/*
 * BWW Rezepte, vorläufige Frontend-Ausgabe.
 * Farben nach dem globalen Schema der Website.
 */

.bww-rz {
  --bww-navy: #0D2D5E;
  --bww-primary: #1B4D8E;
  --bww-border: #E0E0DC;
  --bww-heading: #0F1117;
  --bww-text: #555555;
  --bww-bg: #F7F7F5;
  /* Ernährung, Teal. Passend zum Farbschema der Website. */
  --bww-teal: #0F6E56;
  --bww-teal-dunkel: #085041;
  --bww-teal-hell: #E1F5EE;

  color: var(--bww-text);
  font-size: 16px;
  line-height: 1.65;
  margin-top: 24px;
}

.bww-rz h2 {
  color: var(--bww-heading);
  font-size: 22px;
  margin: 32px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bww-border);
}

.bww-rz-titel {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--bww-heading);
  margin: 0 0 18px;
}

.bww-rz-bild {
  margin: 0 0 22px;
}
.bww-rz-bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.bww-rz-kurz {
  font-size: 17px;
  margin: 0 0 20px;
}

/* Faktenzeile */
.bww-rz-fakten {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  background: var(--bww-bg);
  border: 1px solid var(--bww-border);
  border-radius: 10px;
}
.bww-rz-fakten li {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.bww-rz-fakten span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #AAAAAA;
}
.bww-rz-fakten strong {
  font-size: 18px;
  color: var(--bww-heading);
}

/* Portionshinweis */
.bww-rz-portionen {
  margin: 20px 0 0;
  padding: 11px 14px;
  background: var(--bww-bg);
  border-left: 3px solid var(--bww-primary);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
}

/* Zutaten */
.bww-rz-zutaten {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bww-rz-zutaten li {
  display: flex;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--bww-border);
  margin: 0;
}
.bww-rz-zutaten li:last-child { border-bottom: none; }
.bww-rz-menge {
  flex: 0 0 92px;
  font-weight: 700;
  color: var(--bww-primary);
}
.bww-rz-name { flex: 1; }
.bww-rz-abschnitt {
  font-weight: 700;
  color: var(--bww-heading);
  border-bottom: none;
  padding-top: 18px;
}

/* Zubereitung */
.bww-rz-schritt-abschnitt {
  font-size: 17px;
  font-weight: 700;
  color: var(--bww-heading);
  margin: 22px 0 8px;
}
.bww-rz-schritt-abschnitt:first-of-type { margin-top: 8px; }

.bww-rz-schritte {
  margin: 0;
  padding-left: 22px;
}
.bww-rz-schritte li {
  margin-bottom: 12px;
  padding-left: 4px;
}

/* Nährwerttabelle */
.bww-rz-nw {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  margin: 0;
}
.bww-rz-nw th, .bww-rz-nw td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bww-border);
  text-align: right;
}
.bww-rz-nw thead th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #AAAAAA;
  padding-bottom: 7px;
}
.bww-rz-nw tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--bww-text);
}
.bww-rz-nw tbody tr:last-child th,
.bww-rz-nw tbody tr:last-child td { border-bottom: none; }
.bww-rz-nw tbody td:first-of-type strong {
  color: var(--bww-heading);
  font-size: 17px;
}
.bww-rz-nw tbody td + td { color: #AAAAAA; font-size: 14px; }
.bww-rz-nw-hinweis {
  font-size: 13px;
  color: #AAAAAA;
  margin: 10px 0 0;
}

/* Aufbewahrung */
.bww-rz-aufbewahrung { margin: 0; }
.bww-rz-mealprep {
  display: inline-block;
  margin: 0 0 14px;
  padding: 9px 14px;
  background: var(--bww-teal-hell);
  border-radius: 8px;
  color: var(--bww-teal-dunkel);
  font-size: 15px;
}
.bww-rz-aufb-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}
.bww-rz-aufb-liste li {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.bww-rz-aufb-liste span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #AAAAAA;
}
.bww-rz-aufb-liste strong {
  font-size: 18px;
  color: var(--bww-heading);
}
.bww-rz-aufb-hinweis {
  font-size: 13.5px;
  color: #AAAAAA;
  margin: 12px 0 0;
  max-width: 62ch;
}

.bww-rz-notizen {
  background: var(--bww-bg);
  border-left: 3px solid var(--bww-primary);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}

@media (max-width: 480px) {
  .bww-rz-titel { font-size: 26px; }
  .bww-rz-menge { flex-basis: 76px; }
  .bww-rz-fakten { gap: 12px 20px; padding: 14px; }
  .bww-rz-fakten strong { font-size: 16px; }
}

/* Ähnliche Rezepte */
.bww-rz-aehnlich {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.bww-rz-aehnlich li { margin: 0; }
.bww-rz-aehnlich a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bww-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .18s, box-shadow .18s;
}
.bww-rz-aehnlich a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(13, 45, 94, .10);
}
.bww-rz-a-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.bww-rz-a-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--bww-teal) 0%, var(--bww-teal-dunkel) 100%);
  color: rgba(255, 255, 255, .3);
  font-size: 44px;
  font-weight: 800;
}
.bww-rz-a-titel {
  display: block;
  padding: 12px 13px 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: var(--bww-heading);
}
.bww-rz-a-meta {
  display: block;
  padding: 6px 13px 13px;
  font-size: 12.5px;
  color: #AAAAAA;
}

@media (max-width: 860px) {
  .bww-rz-aehnlich { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .bww-rz-aehnlich { grid-template-columns: 1fr; gap: 12px; }
}

/* Bring-Button, Zwei-Klick-Lösung */
.bww-rz-bring { margin: 18px 0 0; }
.bww-rz-bring-knopf,
a.bww-rz-bring-knopf {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--bww-border);
  background: #fff;
  color: var(--bww-primary);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.bww-rz-bring-knopf:hover { border-color: var(--bww-primary); }
.bww-rz-bring-knopf:focus-visible { outline: 2px solid var(--bww-primary); outline-offset: 2px; }
.bww-rz-bring-hinweis {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: #AAAAAA;
}

/* ---------------------------------------------------------------
   Einkaufsliste
   --------------------------------------------------------------- */
.bww-el-rezepte { list-style: none; margin: 0 0 16px; padding: 0; }
.bww-el-rezepte li { padding: 8px 2px; border-bottom: 1px solid var(--bww-border); }
.bww-el-rezepte li:last-child { border-bottom: none; }
.bww-el-rezepte a { color: var(--bww-primary); font-weight: 600; text-decoration: none; }
.bww-el-rezepte a:hover { text-decoration: underline; }
.bww-el-rezepte span { color: #AAAAAA; font-size: 13.5px; margin-left: 8px; }

.bww-el-aendern { font-size: 14px; color: var(--bww-primary); }

.bww-el-gruppe {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bww-teal);
  margin: 26px 0 8px;
}
.bww-el-liste { list-style: none; margin: 0; padding: 0; }
.bww-el-liste li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--bww-border);
}
.bww-el-liste li:last-child { border-bottom: none; }
.bww-el-menge {
  flex: 0 0 92px;
  font-weight: 700;
  color: var(--bww-heading);
  text-align: right;
}
.bww-el-name { flex: 1; }
.bww-el-stueck {
  display: block;
  font-size: 13px;
  color: #AAAAAA;
  margin-top: 1px;
}

/* Zutat aus der Liste nehmen und wieder aufnehmen */
.bww-el-weg,
.bww-el-zurueck {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  text-decoration: none;
  font-size: 17px;
  color: #AAAAAA;
  border: 1px solid var(--bww-border);
  transition: 0.15s;
}
.bww-el-weg:hover {
  color: #b32d2e;
  border-color: #b32d2e;
  background: #fdf3f3;
}
.bww-el-zurueck {
  color: var(--bww-teal);
  border-color: var(--bww-teal-hell);
  background: var(--bww-teal-hell);
}
.bww-el-zurueck:hover { background: var(--bww-teal); color: #fff; }

.bww-el-weggelassen .bww-el-name { color: #AAAAAA; text-decoration: line-through; }
.bww-el-hinweis { font-size: 13.5px; color: #AAAAAA; margin-top: 10px; }

/* Auswahl */
.bww-el-kacheln {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 20px;
}
.bww-el-kacheln li { margin: 0; }
.bww-el-kacheln label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 2px;
  cursor: pointer;
  line-height: 1.4;
}
.bww-el-kacheln input { margin-top: 3px; }

.bww-el-knopf {
  background: var(--bww-teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.bww-el-knopf:hover { background: var(--bww-teal-dunkel); }

@media (max-width: 480px) {
  .bww-el-menge { flex-basis: 74px; }
}

.bww-el-bring-unten {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--bww-border);
}

/* ---------------------------------------------------------------
   Warenkorb
   --------------------------------------------------------------- */
.bww-rz-korb-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 22px 0 0;
}

/* Eigene Liste im Kategorieton, damit sie sich vom Bring-Knopf abhebt */
.bww-rz-korb-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bww-teal);
  color: #fff;
  border: 1px solid var(--bww-teal);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.bww-rz-korb-knopf::before {
  content: "+";
  font-size: 18px;
  line-height: 1;
  margin-top: -2px;
}
.bww-rz-korb-knopf:hover { background: var(--bww-teal-dunkel); border-color: var(--bww-teal-dunkel); }
.bww-rz-korb-knopf:focus-visible { outline: 2px solid var(--bww-primary); outline-offset: 3px; }

.bww-rz-korb-knopf.ist-drin {
  background: var(--bww-teal-hell);
  color: var(--bww-teal-dunkel);
  border-color: var(--bww-teal-hell);
}
.bww-rz-korb-knopf.ist-drin::before { content: "\2713"; font-size: 15px; }
.bww-rz-korb-knopf.gerade-hinzu { transform: scale(0.96); }

.bww-rz-korb-hinweis { font-size: 13.5px; color: #AAAAAA; }

/* Schwebendes Symbol */
/* Schwebender Warenkorb.
   Sitzt über der Lupe der Suche, damit beide erreichbar bleiben.
   Der Abstand lässt sich unter Rezepte, Einstellungen anpassen,
   falls sich die Größe der Lupe ändert. */
.bww-rz-korb {
  position: fixed;
  right: 20px;
  bottom: var(--bww-korb-abstand, 108px);
  /* Über der Lupe der Suche, die ebenfalls unten rechts sitzt. */
  z-index: 9990;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bww-teal, #0F6E56);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(13, 45, 94, .22);
  transition: transform .15s, background .15s;
}
.bww-rz-korb:hover { background: #085041; transform: translateY(-2px); }
.bww-rz-korb:focus-visible { outline: 3px solid #4A9EE8; outline-offset: 3px; }
.bww-rz-korb[hidden] { display: none; }

.bww-rz-korb-zahl {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #0D2D5E;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  border: 2px solid #fff;
}

@media (max-width: 560px) {
  .bww-rz-korb { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .bww-rz-korb-knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bww-rz-korb, .bww-rz-korb-knopf { transition: none; }
}

/* ---------------------------------------------------------------
   Sammlungsseiten
   --------------------------------------------------------------- */
.bww-sm-anzahl { font-size: 15px; color: #AAAAAA; margin: 0 0 22px; }
.bww-sm-leer {
  padding: 22px;
  background: var(--bww-bg);
  border: 1px dashed var(--bww-border);
  border-radius: 12px;
}

.bww-sm-raster {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.bww-sm-karte { margin: 0; }
.bww-sm-karte > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bww-karte, #fff);
  border: 1px solid var(--bww-border);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.bww-sm-karte > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(13, 45, 94, .10);
}

.bww-sm-bild {
  display: block;
  aspect-ratio: 16 / 10;
  background: #DDE6E2;
  overflow: hidden;
}
.bww-sm-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ohne Foto: bewusst gestaltete Fläche statt einer Lücke */
.bww-sm-platzhalter {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding: 16px;
  background: linear-gradient(140deg, var(--bww-teal) 0%, var(--bww-teal-dunkel) 100%);
  overflow: hidden;
}
.bww-sm-platzhalter .i {
  position: absolute;
  right: -12px;
  bottom: -38px;
  font-size: 140px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .13);
}
.bww-sm-platzhalter .t {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}

.bww-sm-inhalt { padding: 15px 16px 0; flex: 1; }
.bww-sm-kats {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bww-teal);
  margin-bottom: 6px;
}
.bww-sm-titel {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bww-heading);
  margin-bottom: 8px;
}
.bww-sm-meta {
  display: flex;
  gap: 14px;
  font-size: 13.5px;
  color: #AAAAAA;
  font-weight: 600;
  padding-bottom: 14px;
}
.bww-sm-werte {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--bww-border);
  background: var(--bww-teal-hell);
}
.bww-sm-werte .k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bww-teal);
}
.bww-sm-werte .v { font-size: 18px; font-weight: 800; color: var(--bww-teal-dunkel); }

.bww-sm-weitere { list-style: none; margin: 0; padding: 0; }
.bww-sm-weitere li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--bww-border);
}
.bww-sm-weitere li:last-child { border-bottom: none; }
.bww-sm-weitere a { color: var(--bww-primary); font-weight: 600; text-decoration: none; }
.bww-sm-weitere a:hover { text-decoration: underline; }
.bww-sm-weitere span { color: #AAAAAA; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 560px) {
  .bww-sm-raster { grid-template-columns: 1fr; gap: 16px; }
}

/* Hauptseite der Rezepte */
.bww-sm-archiv { max-width: 1180px; margin: 0 auto; padding: 32px 20px 60px; }
.bww-sm-einleitung { font-size: 17px; max-width: 68ch; margin-bottom: 8px; }

.bww-sm-sammlungen {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px 20px;
}
.bww-sm-sammlungen li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bww-border);
  border-radius: 12px;
  background: var(--bww-karte, #fff);
  margin: 0;
}
.bww-sm-sammlungen a { text-decoration: none; flex: 1; }
.bww-sm-sammlungen .t {
  display: block;
  font-weight: 700;
  color: var(--bww-heading);
  margin-bottom: 3px;
}
.bww-sm-sammlungen a:hover .t { color: var(--bww-teal); }
.bww-sm-sammlungen .b { display: block; font-size: 13.5px; color: #AAAAAA; line-height: 1.45; }
.bww-sm-sammlungen .z {
  font-size: 12px;
  font-weight: 700;
  color: var(--bww-teal-dunkel);
  background: var(--bww-teal-hell);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Filterleiste
   --------------------------------------------------------------- */
.bww-fl {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(247, 247, 245, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bww-border);
  padding: 13px 0;
  margin-bottom: 22px;
}
.bww-fl-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bww-fl-reihe:last-child { margin-bottom: 0; }
.bww-fl-lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #AAAAAA;
  min-width: 72px;
}

.bww-fl-chip {
  border: 1px solid var(--bww-border);
  background: #fff;
  color: var(--bww-text);
  padding: 7px 13px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: .15s;
}
.bww-fl-chip:hover { border-color: var(--bww-teal); color: var(--bww-teal-dunkel); }
.bww-fl-chip:focus-visible { outline: 2px solid var(--bww-primary); outline-offset: 2px; }
.bww-fl-chip[aria-pressed="true"] {
  background: var(--bww-teal);
  border-color: var(--bww-teal);
  color: #fff;
}
.bww-fl-chip.ist-leer { opacity: .42; }

.bww-fl-zahl {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #AAAAAA;
}
.bww-fl-chip:hover .bww-fl-zahl { color: var(--bww-teal); }

.bww-fl-reset {
  background: none;
  border: none;
  color: var(--bww-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 7px 4px;
}
.bww-fl-treffer {
  margin-left: auto;
  font-size: 14px;
  color: #AAAAAA;
  white-space: nowrap;
}
.bww-fl-leer {
  padding: 44px 20px;
  text-align: center;
  background: var(--bww-karte, #fff);
  border: 1px dashed var(--bww-border);
  border-radius: 14px;
}

@media (max-width: 640px) {
  .bww-fl { position: static; backdrop-filter: none; }
  .bww-fl-lab { min-width: 100%; margin-bottom: -2px; }
  .bww-fl-treffer { margin-left: 0; width: 100%; }
}