/* Basaks Küche – Gestaltung
   Warme Küchenfarben, mobil zuerst, gut lesbar bei Tageslicht. */

/* Farbwelt "warm & sanft" (Wunsch Basak 09.09.2026).
   Vorher: cremeweisser Hintergrund (#fdf8f2) und hartes Dunkelrot (#8c2f1e).
   Jetzt: warmer Sand und Terrakotta -- ruhiger, weniger Kontrastschlag,
   dieselbe Kuechen-Stimmung. Farben NUR hier aendern, nicht in den Regeln. */
:root {
  --rot: #a8503a;          /* Terrakotta, Akzent fuer Knoepfe und Herz */
  --rot-hell: #c2664c;
  --rot-tief: #7d3523;

  /* KOPFZEILE OHNE FARBFLAECHE (Basak 09.09.2026).
     Weg von Terrakotta ueber Salbeigruen zu: gar keine Farbe mehr.
     Zuerst war der Kopf terrakotta -- gefiel nicht. Dann salbeigruen,
     aus vier gezeigten Varianten gewaehlt -- gefiel live auch nicht
     ("nein gruen gefaellt mir nicht"). Jetzt traegt der Kopf dieselbe
     helle Flaeche wie die Karten, mit dunkler Schrift und feiner Linie.
     Die einzige kraeftige Farbe im Bild ist damit das Terrakotta der
     Knoepfe. Kopf UND Rezeptkopf sind hell -- sonst gaebe es beim
     Oeffnen eines Rezepts einen Farbsprung. */
  --kopf-flaeche: #fffcf7;
  --kopf-schrift: #33281f;
  --creme: #f4ebdd;        /* warmer Sand statt Cremeweiss */
  --flaeche: #eee2d0;      /* abgesetzte Flaechen auf dem Sand */
  --karte: #fffcf7;        /* Karten heller als der Sand, damit sie abheben */
  --tinte: #33281f;
  --tinte-leise: #7a6857;  /* dunkler als vorher, sonst zu schwacher Kontrast */
  --linie: #e7dbc8;
  --gruen: #6b7f4e;        /* Salbei */
  --gold: #b8893f;
  --schatten: 0 1px 2px rgba(90,60,35,.05), 0 6px 18px rgba(90,60,35,.06);
  --schatten-tief: 0 2px 6px rgba(90,60,35,.08), 0 14px 34px rgba(90,60,35,.10);
  --radius: 18px;
  --radius-klein: 12px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);

  /* Ueberschriften in einer Serifenschrift -- das gibt der App den
     Kochbuch-Charakter, ohne dass eine Schrift geladen werden muss.
     Georgia liegt auf Windows, Android und iOS bereits vor; ohne
     Web-Font bleibt die App offline vollstaendig funktionsfaehig. */
  --schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overscroll-behavior-y: none;
}

body {
  padding-bottom: calc(72px + var(--unten));
  max-width: 720px;
  margin-inline: auto;
}

h1, h2, h3 {
  margin: 0; font-weight: 600; letter-spacing: -.005em;
  font-family: var(--schrift-titel);
}

/* ---------- Kopf ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(16px + var(--oben)) 20px 15px;
  /* Anmutung einer Kochbuchseite statt eines Farbblocks:
     warmes Off-White mit einem hauchfeinen Leinenmuster (2 % Deckung,
     man sieht es nur aus der Naehe) und einer goldenen Vignettenlinie
     als Abschluss. Farbe steckt damit in der LINIE, nicht in der Flaeche
     -- die Farbfelder hatten Basak dreimal nicht gefallen. */
  background:
    repeating-linear-gradient(45deg,
      rgba(168,80,58,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg,
      rgba(168,80,58,.022) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fffefb 0%, var(--kopf-flaeche) 55%, #fbf4e9 100%);
  color: var(--kopf-schrift);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 2px 18px rgba(90,60,35,.06);
  position: relative;
}
/* Vignette: kraeftig in der Mitte, laeuft an den Raendern aus. */
.kopf::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(184,137,63,.55) 22%,
    rgba(184,137,63,.75) 50%, rgba(184,137,63,.55) 78%, transparent 100%);
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Der Titel traegt die Farbe, nicht der Hintergrund. Tiefes Terrakotta
   wirkt wie Buchdruck und gibt der hellen Flaeche einen Anker. */
.kopf h1 {
  font-size: 1.5rem; letter-spacing: .01em; color: #8e4430;
}
.kopf-unter {
  margin: 5px 0 0; font-size: .86rem; color: var(--tinte-leise);
  font-style: italic;
}
.vorrat-kurz {
  flex: none;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--rot);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.vorrat-kurz:hover { background: #e8dbc6; }
.vorrat-kurz:active { transform: scale(.96); }

/* ---------- Ansichten ---------- */
main { padding: 16px 14px 24px; }
.view { display: none; animation: auf .22s ease; }
.view.aktiv { display: block; }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hinweis {
  background: #fdf4e5;
  border: 1px solid #ecd8b9;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .88rem;
  color: #7a6250;
  margin-bottom: 16px;
}
.hinweis strong { display: block; color: var(--tinte); font-size: .98rem; margin-bottom: 2px; }

/* ---------- Filter ---------- */
.filterleiste { margin-bottom: 14px; }
.filter-gruppe { margin-bottom: 10px; }
.filter-titel {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinte-leise);
  margin-bottom: 6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit;
  font-size: .85rem;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--linie);
  background: var(--karte);
  color: var(--tinte);
  cursor: pointer;
  transition: .15s;
}
.chip:active { transform: scale(.95); }
.chip:hover { border-color: #d8c6ad; }
.chip.aktiv {
  background: var(--rot); border-color: var(--rot); color: #fff;
  box-shadow: 0 2px 8px rgba(168,80,58,.25);
}
.chip.aktiv:hover { border-color: var(--rot); }

.suchfeld {
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: .95rem;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--linie);
  background: var(--karte);
  color: var(--tinte);
}
.suchfeld:focus { outline: 2px solid var(--rot-hell); outline-offset: 1px; }

.treffer-info { font-size: .82rem; color: var(--tinte-leise); margin: 0 0 10px 2px; }

/* ---------- Rezeptkarten ---------- */
.rezeptliste { display: grid; gap: 12px; }
.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--schatten);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  transition: .15s;
}
.karte:active { transform: scale(.985); }
.karte:hover { box-shadow: var(--schatten-tief); border-color: #dccdb6; }
.karte-oben { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.karte-name {
  font-size: 1.1rem; font-weight: 600;
  font-family: var(--schrift-titel); letter-spacing: -.005em;
}
.karte-unter { font-size: .84rem; color: var(--tinte-leise); margin-top: 3px; }
.karte-herz { flex: none; font-size: 1.1rem; color: var(--rot); }
.karte-knoepfe { flex: none; display: flex; align-items: center; gap: 9px; }
.karte-plan {
  width: 36px; height: 36px; padding: 0;
  border: 1.5px solid var(--linie); border-radius: 11px;
  background: var(--karte); cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  display: grid; place-items: center;
  transition: .15s;
}
.karte-plan:active { transform: scale(.9); }
.karte-plan:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.karte:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

.karte-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.pill {
  font-size: .74rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1e7d8;
  color: #7a6250;
  white-space: nowrap;
}
.pill.zeit { background: #eef2e6; color: var(--gruen); font-weight: 600; }
.pill.warten { background: #f3ebe0; color: #8a6a45; }
.pill.kind { background: #fdf0e0; color: var(--gold); }
.pill.gesund { background: #e8f1e4; color: var(--gruen); }

.balken { margin-top: 10px; }
.balken-text { font-size: .8rem; margin-bottom: 4px; display: flex; justify-content: space-between; }
.balken-text .fehlt { color: var(--tinte-leise); }
.balken-spur { height: 6px; background: #ebdfcd; border-radius: 999px; overflow: hidden; }
.balken-fuell { height: 100%; border-radius: 999px; transition: width .3s; }
.b-voll { background: var(--gruen); }
.b-fast { background: var(--gold); }
.b-wenig { background: #d8b9a4; }

.leer {
  text-align: center;
  padding: 40px 20px;
  color: var(--tinte-leise);
  font-size: .92rem;
}
.leer .gross { font-size: 2.2rem; display: block; margin-bottom: 8px; }

/* ---------- Vorrat ---------- */
.vorrat-aktuell {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--schatten);
}
.vorrat-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.vorrat-kopf h2 { font-size: 1rem; }
.vorrat-chips .chip { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.vorrat-chips .chip::after { content: " ×"; opacity: .7; }
.vorrat-leer { font-size: .86rem; color: var(--tinte-leise); }

.link-btn {
  background: none; border: none; font: inherit; font-size: .82rem;
  color: var(--tinte-leise); text-decoration: underline; cursor: pointer; padding: 4px;
}
.link-btn.stark { color: var(--rot); font-weight: 600; }

.eigene-zeile { display: flex; gap: 8px; margin-bottom: 16px; }
.eigene-zeile input {
  flex: 1; font: inherit; font-size: .95rem; padding: 11px 14px;
  border-radius: var(--radius); border: 1.5px solid var(--linie);
  background: var(--karte); color: var(--tinte);
}
.eigene-zeile input:focus { outline: 2px solid var(--rot-hell); outline-offset: 1px; }
.btn-plus {
  flex: none; width: 46px; border: none; border-radius: var(--radius);
  background: var(--rot); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.btn-plus:active { transform: scale(.95); }

.katalog-gruppe { margin-bottom: 18px; }
.katalog-gruppe h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinte-leise); margin-bottom: 8px;
}
.katalog-gruppe .chip.gewaehlt { background: var(--gruen); border-color: var(--gruen); color: #fff; }

/* ---------- Einkauf ---------- */
.einkaufsliste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.einkaufsliste li {
  display: flex; align-items: center; gap: 12px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--schatten);
}
.einkaufsliste li.erledigt { opacity: .5; }
.einkaufsliste li.erledigt .e-name { text-decoration: line-through; }
.e-box {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid var(--linie); background: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: .85rem; color: #fff; padding: 0;
}
.einkaufsliste li.erledigt .e-box { background: var(--gruen); border-color: var(--gruen); }
.e-mitte { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.e-name { font-size: .95rem; }
.e-preis { font-size: .75rem; line-height: 1.3; }
.e-preis.angebot { color: var(--gruen); font-weight: 600; }
.e-preis.richtpreis { color: var(--tinte-leise); }

/* ---------- Angebote der Woche ---------- */
.angebote {
  background: #edf1e4; border: 1px solid #dae3cb;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.angebote h3 { font-size: 1rem; color: var(--gruen); margin-bottom: 10px; }
.angebote-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.angebot-btn {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: var(--karte); border: 1px solid #dae3cb;
  border-radius: var(--radius-klein); padding: 9px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  align-items: baseline;
}
.angebot-btn:disabled { opacity: .55; cursor: default; }
.a-zutat { font-size: .92rem; font-weight: 600; color: var(--tinte); }
.a-preis { font-size: .95rem; font-weight: 700; color: var(--gruen); white-space: nowrap; }
.a-laden { font-size: .76rem; color: var(--tinte-leise); }
.a-plus { font-size: .76rem; color: var(--rot); white-space: nowrap; }
.a-drauf { font-size: .76rem; color: var(--tinte-leise); white-space: nowrap; }
.angebote-stand {
  margin: 10px 0 0; font-size: .72rem; color: var(--tinte-leise);
  line-height: 1.4; padding-top: 8px; border-top: 1px solid #dae3cb;
}
.e-menge {
  flex: none; font-size: .82rem; font-weight: 600; color: var(--gruen);
  background: #edf1e4; border-radius: 999px; padding: 2px 10px;
}
.einkaufsliste li.erledigt .e-menge { background: var(--flaeche); color: var(--tinte-leise); }
.e-weg { background: none; border: none; color: var(--tinte-leise); font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.einkauf-fuss { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- Woche ---------- */
.wochenplan { display: grid; gap: 10px; margin-bottom: 16px; }
.tag {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--schatten);
  display: flex; align-items: center; gap: 12px;
}
.tag-name { flex: none; width: 74px; font-weight: 650; font-size: .9rem; }
.tag-heute .tag-name { color: var(--rot); }
.tag-inhalt { flex: 1; font-size: .92rem; }
.tag-leer { color: var(--tinte-leise); font-size: .86rem; }
.tag-btn { background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 0; width: 100%; }
.tag-weg { flex: none; background: none; border: none; color: var(--tinte-leise); font-size: 1.1rem; cursor: pointer; }

.btn-gross {
  width: 100%; font: inherit; font-size: .95rem; font-weight: 600;
  padding: 15px; border: none; border-radius: var(--radius);
  background: var(--rot); color: #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(168,80,58,.22);
  transition: .15s;
}
.btn-gross:active { transform: scale(.99); }
.btn-gross:hover { background: var(--rot-hell); }
.btn-gross.hell {
  background: var(--flaeche); color: var(--rot); margin-top: 10px;
  box-shadow: none; border: 1px solid var(--linie);
}
.btn-gross.hell:hover { background: #ece0cd; }

/* ---------- Detail ---------- */
.detail {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(44,33,24,.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: blende .2s ease;
}
/* Das HTML-Attribut hidden muss die display-Regel oben schlagen. */
.detail[hidden], .toast[hidden] { display: none; }
@keyframes blende { from { opacity: 0; } to { opacity: 1; } }
.detail-innen {
  background: var(--creme);
  width: 100%; max-width: 720px; max-height: 92vh;
  border-radius: 24px 24px 0 0;
  overflow-y: auto; position: relative;
  padding-bottom: calc(84px + var(--unten));
  animation: hoch .26s cubic-bezier(.2,.8,.3,1);
}
.detail-innen.klein { padding-bottom: calc(20px + var(--unten)); }
@keyframes hoch { from { transform: translateY(100%); } to { transform: none; } }

.d-zu {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.d-zu:hover { background: #e8dbc6; }
/* Dieselbe Kochbuch-Anmutung wie die Hauptkopfzeile, damit es beim
   Oeffnen eines Rezepts keinen Bruch gibt. */
.d-kopf {
  padding: 24px 20px 20px;
  background:
    repeating-linear-gradient(45deg,
      rgba(168,80,58,.022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg,
      rgba(168,80,58,.022) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #fffefb 0%, var(--kopf-flaeche) 55%, #fbf4e9 100%);
  color: var(--kopf-schrift);
  position: relative;
}
.d-kopf::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(184,137,63,.55) 22%,
    rgba(184,137,63,.75) 50%, rgba(184,137,63,.55) 78%, transparent 100%);
}
.d-kopf h2 {
  font-size: 1.5rem; padding-right: 40px; line-height: 1.25; color: #8e4430;
}
.d-kopf p {
  margin: 5px 0 0; font-size: .88rem; color: var(--tinte-leise); font-style: italic;
}
.d-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* Keine Sonderfarbe mehr: Auf hellem Grund koennen die Merkzeichen
   dieselben Farben tragen wie auf den Rezeptkarten – Art, Zeit, Wartezeit
   sind dadurch sogar besser unterscheidbar als vorher in Weiss auf Rot. */

.d-body { padding: 18px 20px 8px; }
.d-body section { margin-bottom: 24px; }
.d-body h3 { font-size: 1rem; margin-bottom: 10px; }
.leise { font-weight: 400; font-size: .82rem; color: var(--tinte-leise); }

.zutatenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.zutatenliste li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: 10px; font-size: .93rem;
}
.zutatenliste li.da { background: #edf1e4; }
.zutatenliste li.fehlt { background: #fbeee6; }
.z-hak { flex: none; width: 18px; font-size: .8rem; }
.z-hak.ja { color: var(--gruen); }
.z-hak.nein { color: var(--rot-hell); }
.z-name { flex: 1; }
.z-menge { flex: none; color: var(--tinte-leise); font-size: .85rem; }
.z-basis { opacity: .55; }

.schritte { margin: 0; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.schritte li {
  counter-increment: s; position: relative; padding-left: 40px; font-size: .95rem;
}
.schritte li::before {
  content: counter(s);
  position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--rot); color: #fff;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 650;
}
.anrichten {
  background: #fdf4e5; border: 1px solid #ecd8b9;
  border-radius: var(--radius); padding: 14px 16px;
}
.anrichten h3 { color: var(--gold); }
.anrichten p { margin: 0; font-size: .92rem; }

/* ---------- Schritte abhaken ---------- */
.schritt-btn {
  font: inherit; text-align: left; background: none; border: none;
  padding: 0; margin: 0; color: inherit; cursor: pointer; width: 100%;
}
.schritte li.erledigt { opacity: .45; }
.schritte li.erledigt .schritt-btn { text-decoration: line-through; }
.schritte li.erledigt::before { background: var(--gruen); }

/* ---------- Daten sichern ---------- */
.sicherung {
  margin-top: 26px; padding: 16px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.sicherung h3 { font-size: 1rem; margin-bottom: 6px; }
.sicherung p { margin: 0; font-size: .85rem; color: var(--tinte-leise); line-height: 1.5; }
.sicherung-knoepfe { display: grid; gap: 8px; margin-top: 12px; }
.sicherung-knoepfe .btn-gross { margin-top: 0; }
.sicherung-stand {
  margin-top: 10px !important; font-size: .78rem !important;
  padding-top: 10px; border-top: 1px solid var(--linie);
}

/* ---------- Portionen umrechnen ---------- */
.portionen {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px;
}
.port-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--linie); border-radius: 50%;
  background: var(--karte); color: var(--rot);
  font-size: 1.5rem; line-height: 1; font-weight: 600;
  cursor: pointer; box-shadow: var(--schatten);
}
.port-btn:active { background: var(--creme); }
.port-zahl {
  font-size: .95rem; font-weight: 600; color: var(--tinte-leise);
  min-width: 8.5em; text-align: center;
}
.port-hinweis {
  margin: 10px 0 0; padding: 8px 12px;
  background: #faf0dd; border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-size: .82rem; color: var(--tinte-leise); line-height: 1.45;
}

.bild-box { margin: 0 0 12px; }
.bild-box img {
  width: 100%; display: block;
  border-radius: 12px; background: #ebdfcd;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.bild-box figcaption {
  margin-top: 6px; font-size: .7rem; color: var(--tinte-leise); line-height: 1.4;
}
.bild-box figcaption a { color: var(--tinte-leise); }

/* ---------- Gesünder tauschen ---------- */
.tausch {
  background: #eef2e5; border: 1px solid #dae3cb;
  border-radius: var(--radius); padding: 14px 16px;
}
.tausch h3 { color: var(--gruen); }
/* Aufklappbar: zugeklappt sieht man nur, WOFUER es Tipps gibt.
   Bei einem Kuchen sind das schnell fuenf Zutaten – ausgeklappt
   waere das eine Textwand, die niemand liest. */
.tausch-zutat {
  border-bottom: 1px solid #dae3cb;
}
.tausch-zutat:last-child { border-bottom: none; }
.tausch-zutat > summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 0; font-size: .9rem; font-weight: 650; color: var(--tinte);
}
.tausch-zutat > summary::-webkit-details-marker { display: none; }
.tausch-zutat-name::before {
  content: "statt "; font-weight: 400; color: #76826b;
}
.tausch-anzahl {
  font-size: .74rem; font-weight: 500; color: #76826b; white-space: nowrap;
}
.tausch-zutat[open] > summary { border-bottom: 1px dashed #dae3cb; }
.tausch-zutat[open] > summary .tausch-anzahl { visibility: hidden; }
.tausch-zutat > *:not(summary):first-of-type { margin-top: 9px; }
.tausch-zutat > *:last-child { margin-bottom: 11px; }

/* Ein Tausch besteht aus zwei Angaben, die beide sofort lesbar sein
   muessen: WOMIT (fett, gruen) und WIE VIEL (rechts daneben). */
.tausch-tipp { margin: 0 0 9px; }
.tausch-kopf {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.tausch-kopf::before {
  content: "→"; color: var(--gruen); font-weight: 700; flex: 0 0 auto;
}
.tausch-nimm {
  font-size: .89rem; font-weight: 650; color: var(--gruen);
}
.tausch-menge {
  font-size: .78rem; color: #5c6e4a;
  background: #e3ead8; border-radius: 999px; padding: 1px 9px;
}
/* Kalorienvergleich und Wirkung – die beiden Angaben, nach denen Basak
   ausdruecklich gefragt hat. Bewusst direkt unter dem Vorschlag und vor
   dem Fliesstext, damit man sie sieht, ohne zu lesen. */
.tausch-fakten {
  margin: 4px 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 10px;
  align-items: baseline;
}
.tausch-kcal {
  font-size: .78rem; font-weight: 600; color: var(--rot);
  background: #f7e6e0; border-radius: 999px; padding: 1px 9px;
  white-space: nowrap;
}
.tausch-wirkung { font-size: .8rem; color: #5c6e4a; font-style: italic; }
.tausch-text {
  margin: 3px 0 0 20px; font-size: .84rem; line-height: 1.45; color: #63705a;
}

/* Warnungen stehen bewusst unten und optisch abgesetzt - sie sind
   kein Tausch, sondern der Hinweis, wo einer NICHT funktioniert. */
.tausch-achtung {
  margin: 8px 0 0; padding-left: 20px; position: relative;
  font-size: .81rem; line-height: 1.45; color: #7a6748;
}
.tausch-achtung::before {
  content: "!"; position: absolute; left: 4px; top: 0;
  font-weight: 700; color: var(--gold);
}

/* ---------- Notizbuch ---------- */
.kochbuch {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px;
}
.k-status { margin: 0 0 12px; font-size: .88rem; color: var(--tinte-leise); }
.k-block { margin-top: 16px; }
.k-label {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinte-leise); margin-bottom: 7px;
}
.k-sterne { display: flex; gap: 4px; }
.k-stern {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 1.7rem; line-height: 1; color: #ded2c3;
  transition: .12s;
}
.k-stern.an { color: var(--gold); }
.k-stern:active { transform: scale(.85); }
#k-notiz {
  width: 100%; font: inherit; font-size: .92rem;
  padding: 11px 13px; border-radius: 12px;
  border: 1.5px solid var(--linie); background: var(--creme);
  color: var(--tinte); resize: vertical; min-height: 88px;
}
#k-notiz:focus { outline: 2px solid var(--rot-hell); outline-offset: 1px; }
.k-hinweis { margin: 6px 0 0; font-size: .74rem; color: var(--tinte-leise); }

.pill.gekocht { background: #e6eef5; color: #3f5f7d; font-weight: 600; }
.pill.sport { background: #e4eef0; color: #2f6b73; }

/* Art des Gerichts – das erste Merkzeichen auf jeder Karte */
.pill.art { font-weight: 650; }
.pill.art-fruehstueck { background: #fdf0d8; color: #96671a; }
.pill.art-haupt       { background: #f6e2dc; color: #9a3d28; }
.pill.art-beilage     { background: #e9edda; color: #5c6b32; }
.pill.art-suppe       { background: #e3ecf3; color: #3d6180; }
.pill.art-salat       { background: #e2f0e4; color: #386b42; }
.pill.art-snack       { background: #f2e8f2; color: #6f4370; }
.pill.art-shake       { background: #e7ecf5; color: #45568a; }
.pill.art-gebaeck     { background: #f7e9d5; color: #8a6224; }
.pill.art-nachtisch   { background: #fae4ea; color: #963f5c; }
.pill.zunehmen        { background: #f6e8d2; color: #8a5b1e; font-weight: 600; }
.d-meta .pill.stark { background: rgba(255,255,255,.32); font-weight: 650; }
.karte-notiz {
  margin-top: 10px; padding: 8px 11px;
  background: #fdf4e5; border-radius: 10px;
  font-size: .82rem; color: #7a6250;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.d-fuss {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 720px; margin-inline: auto;
  display: flex; gap: 10px;
  padding: 12px 20px calc(12px + var(--unten));
  background: rgba(253,248,242,.96);
  border-top: 1px solid var(--linie);
  backdrop-filter: blur(8px);
}
.btn-fuss {
  flex: 1; font: inherit; font-size: .92rem; font-weight: 600;
  padding: 13px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--linie); background: var(--karte); color: var(--tinte);
}
.btn-fuss.an { background: var(--rot); border-color: var(--rot); color: #fff; }
.btn-fuss:active { transform: scale(.98); }

.tagwahl-liste { padding: 8px 20px 20px; display: grid; gap: 8px; }
.tagwahl-liste button {
  font: inherit; text-align: left; padding: 14px 16px;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--tinte); cursor: pointer;
}
.tagwahl-liste button span { display: block; font-size: .8rem; color: var(--tinte-leise); }

.wahl-liste { padding: 4px 20px 20px; display: grid; gap: 8px; }
.wahl-liste button {
  font: inherit; text-align: left; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--tinte); cursor: pointer;
}
.wahl-liste button span { display: block; font-size: .78rem; color: var(--tinte-leise); }
#rezeptwahl .suchfeld { width: calc(100% - 40px); margin: 0 20px 12px; }

/* ---------- Tableiste ---------- */
.tableiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  max-width: 720px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--linie);
  padding-bottom: var(--unten);
  backdrop-filter: blur(10px);
}
.tab {
  position: relative;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: .68rem;
  padding: 8px 2px 10px;
  color: var(--tinte-leise);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tab-icon { font-size: 1.25rem; line-height: 1.1; }
.tab.aktiv { color: var(--rot); font-weight: 650; }
.badge {
  position: absolute; top: 4px; right: calc(50% - 22px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--rot); color: #fff;
  font-size: .62rem; line-height: 17px; text-align: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--unten)); z-index: 80;
  background: var(--tinte); color: #fff;
  padding: 11px 18px; border-radius: 999px;
  font-size: .87rem; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  animation: toastauf .25s ease;
}
@keyframes toastauf { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Dunkler Modus ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --creme: #191411;
    --karte: #241d19;
    --tinte: #f0e5d5;
    --tinte-leise: #a8968a;
    --linie: #392e27;
    --flaeche: #2c231d;
    --schatten: 0 1px 2px rgba(0,0,0,.3);
    --schatten-tief: 0 2px 8px rgba(0,0,0,.4);
    /* Der helle Kopf wird im Dunkelmodus dunkel, aber etwas heller als
       der Seitenhintergrund -- sonst verschwindet er ganz. */
    --kopf-flaeche: #241d19;
    --kopf-schrift: #f0e5d5;
  }
  /* Leinenmuster und Verlauf muessen hier dunkel sein, sonst leuchtet
     der Kopf. Die goldene Vignette bleibt -- sie traegt den Charakter. */
  .kopf, .d-kopf {
    background:
      repeating-linear-gradient(45deg,
        rgba(240,229,213,.02) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(-45deg,
        rgba(240,229,213,.02) 0 1px, transparent 1px 5px),
      linear-gradient(180deg, #2a221d 0%, #241d19 55%, #1d1713 100%);
  }
  .kopf h1, .d-kopf h2 { color: #e0917a; }
  /* Die hellen Randfarben der Hover-Zustaende wuerden hier aufleuchten. */
  .karte:hover { border-color: #4a3c32; }
  .chip:hover { border-color: #4a3c32; }
  .btn-gross.hell:hover { background: #3b2f26; }
  .e-menge { background: #222a1e; color: #9dbd7e; }
  .einkaufsliste li.erledigt .e-menge { background: #2c231d; color: #a8968a; }
  .e-preis.angebot { color: #9dbd7e; }
  .angebote { background: #222a1e; border-color: #3a462f; }
  .angebot-btn { background: #241d19; border-color: #3a462f; }
  .a-zutat { color: #e6dcc9; }
  .a-preis { color: #9dbd7e; }
  .angebote-stand { border-top-color: #3a462f; }
  .hinweis { background: #2a211a; border-color: #3d3025; color: #c9b8a8; }
  .anrichten { background: #2a211a; border-color: #3d3025; }
  .pill { background: #322820; color: #c1ae9e; }
  .balken-spur { background: #322820; }
  .zutatenliste li.da { background: #222a1e; }
  .zutatenliste li.fehlt { background: #2e211c; }
  .tableiste { background: rgba(30,24,20,.97); }
  .d-fuss { background: rgba(25,20,17,.96); }
  .d-zu { background: rgba(40,32,27,.9); color: #f0e5d5; }
  .e-box { background: #241d19; }
  .btn-gross.hell { background: #322820; color: #e8a48c; }
  .karte-notiz { background: #2a211a; color: #c9b8a8; }
  #k-notiz { background: #191411; }
  .k-stern { color: #4a3d33; }
  .pill.gekocht { background: #22303c; color: #9dc0dd; }
  .pill.sport { background: #1f3134; color: #86c2c9; }
  .pill.art-fruehstueck { background: #3a2d17; color: #dfb96a; }
  .pill.art-haupt       { background: #3b241d; color: #e0917a; }
  .pill.art-beilage     { background: #2b3120; color: #b3c481; }
  .pill.art-suppe       { background: #1f2c38; color: #93b8d8; }
  .pill.art-salat       { background: #22301f; color: #98c79f; }
  .pill.art-snack       { background: #2f2331; color: #c39cc4; }
  .pill.art-gebaeck     { background: #362a1a; color: #d6ac6b; }
  .pill.warten          { background: #322820; color: #c9a882; }
  .pill.art-nachtisch   { background: #351f28; color: #dc9aae; }
  .pill.art-shake       { background: #232a38; color: #97a8d0; }
  .pill.zunehmen        { background: #3a2e1c; color: #d8ab6a; }
  .bild-box img { background: #322820; }
  .port-hinweis { background: #322820; color: #c9b6a2; }

  /* Der Tausch-Kasten war im Dunkelmodus hell geblieben und hat geblendet. */
  .tausch { background: #242c20; border-color: #3a462f; }
  .tausch-zutat { border-bottom-color: #3a462f; }
  .tausch-zutat > summary { color: #e6dcc9; }
  .tausch-zutat[open] > summary { border-bottom-color: #3a462f; }
  .tausch-zutat-name::before, .tausch-anzahl { color: #93a186; }
  .tausch-kcal { background: #3a2823; color: #e0917a; }
  .tausch-wirkung { color: #9dbd7e; }
  .tausch-nimm { color: #9dbd7e; }
  .tausch-kopf::before { color: #9dbd7e; }
  .tausch-menge { background: #33402a; color: #b9cfa4; }
  .tausch-text { color: #a9b79c; }
  .tausch-achtung { color: #c3ab82; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}