/* =====================================================================
   vinda — Gestaltung nach dem Handoff „Redesign, Richtung E" (21.08.2026)

   Was sich gegenüber der Fassung vom 18.08. geändert hat:

   - Farbwelt von warmem Terrakotta/Oliv auf Smaragd/Waldgrün
   - Glas-Optik entfällt: keine backdrop-filter-Karten, kein Verlauf auf
     body, keine schwebenden Lichtflächen. Stattdessen ein ruhiger heller
     Grund und flache weiße Karten mit 1px Rand.
   - Radien einheitlich statt asymmetrisch. Die alte Signatur
     (99px 99px 20px 20px) ist eine bewusst aufgegebene Entscheidung —
     sie liegt im Rückweg-Commit, falls sie doch bleiben soll.
   - Grotesk statt Serif, keine Monospace mehr.

   WICHTIG für spätere Änderungen: Die Variablennamen sind absichtlich
   dieselben geblieben (--ink, --terra, --olive …), obwohl sie jetzt grüne
   Werte tragen. app.js benutzt sie an 182 Stellen. Ein Umbenennen hätte
   ein Suchen-und-Ersetzen über 3.400 Zeilen bedeutet, ohne dass irgendwas
   dadurch besser aussieht. Die neuen, sprechenden Namen stehen daneben —
   neuer Code nimmt die.
   ===================================================================== */

:root{
  /* --- Die Palette aus dem Handoff ---------------------------------- */
  --gruen:#1FA76C; --gruen-hell:#2CBF7E; --gruen-tief:#178A5B;
  --gruen-matt:#8FC5A4;                    /* halb erfüllt, nicht Warnung */
  --makro-kh:#5FA97E; --makro-fett:#B7CDA0; /* Makros: eine Abstufung, kein Ampelsystem */
  --tanne:#26543C;                          /* dunkle Karten, Zeichen ✕ */
  --tinte:#10241A;
  --text-2:#54705F; --text-3:#6F8577; --text-4:#9DB1A4;
  --papier:#F6FAF6; --karte:#FFFFFF;
  --rand-farbe:#E2ECE3; --linie:#F0F5F0;
  --gruen-lasur:#E4F3E8; --gruen-lasur-2:#DFF3E6;
  --amber:#E8B54A; --amber-text:#8A6209; --amber-lasur:#F9EDCF;

  /* --- Alte Namen, neue Werte (app.js nutzt diese) ------------------ */
  --ink:var(--tinte); --muted:var(--text-2); --faint:var(--text-3);
  --terra:var(--gruen); --terra-deep:var(--gruen-tief); --terra-light:var(--gruen-hell);
  --olive:var(--gruen); --olive-deep:var(--tanne); --olive-light:var(--gruen-hell);
  --ochre:var(--amber); --ochre-deep:var(--amber-text);

  /* --- Flächen und Linien ------------------------------------------- */
  --glas:var(--karte);                       /* war Milchglas, jetzt weiß */
  --glas-rand:1px solid var(--rand-farbe);
  --hair:1px solid var(--linie);
  --track:#ECF3ED;
  --dunkel:var(--tanne); --auf-dunkel:#F2F9F3;
  /* .62 aus dem Handoff ergibt auf dem Tannengrün 4,2:1 und liegt damit
     knapp unter den 4,5:1 der WCAG. Mit .78 sind es 5,7:1, und leiser
     als der Haupttext bleibt es trotzdem deutlich. */
  --auf-dunkel-leise:rgba(242,249,243,.78);

  /* --- Schatten ------------------------------------------------------ */
  --schatten-karte:0 20px 40px -32px rgba(15,40,28,.35);
  --schatten-knopf:0 12px 24px -10px rgba(31,167,108,.6);
  --schatten-dunkel:0 18px 36px -24px rgba(15,40,28,.55);

  /* --- Radien -------------------------------------------------------- */
  --r-gross:28px; --r-klein:20px; --r-pille:99px; --r-badge:14px;
}

/* touch-action auf ALLEN Elementen, nicht nur auf html und body: Sonst
   bleibt der Doppeltipp-Zoom auf einzelnen Karten und Knöpfen aktiv. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}

/* Die Seite selbst scrollt NIE. Nur der Inhaltsbereich bewegt sich.
   Ohne das lässt sich die App am iPhone seitlich wegziehen, es erscheint
   ein weißer Rand, und sie fühlt sich nach Webseite an statt nach App. */
html, body{
  height:100%;
  overflow:hidden;
  position:fixed;
  inset:0;
  overscroll-behavior:none;
  scrollbar-width:none;-ms-overflow-style:none;
  touch-action:manipulation;          /* kein Doppeltipp-Zoom */
}
::-webkit-scrollbar{width:0;height:0;display:none}

body{
  font-family:'Schibsted Grotesk',system-ui,sans-serif;color:var(--ink);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}
html{background:var(--papier)}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font-family:inherit;font-size:16px} /* 16px verhindert Zoom auf iOS */

/* --- Bühne: am Desktop ein Gerät, am Handy Vollbild ------------------ */
#buehne{
  position:fixed;inset:0;
  display:flex;justify-content:center;align-items:flex-start;
  overflow:hidden;
}
#app{
  width:100%;max-width:440px;height:100%;position:relative;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--papier);
}
@media (min-width:760px){
  html,body{position:static;overflow:auto;height:auto}
  #buehne{position:static;background:#EDF3EE;
    padding:22px 20px 26px;align-items:center;min-height:100dvh;
  }
  #app{
    height:min(900px,94dvh);border-radius:36px;
    border:1px solid var(--rand-farbe);
    box-shadow:0 48px 82px -40px rgba(15,40,28,.35);
  }
}

/* Die schwebenden Lichtflächen sind Teil der alten Glas-Optik und
   entfallen. Die Elemente stehen weiterhin im Markup — sie hier
   auszublenden ist verlässlicher, als sie aus dem Rahmen zu entfernen
   und dabei eine Fundstelle zu übersehen. */
.licht,.lichtA,.lichtB{display:none}

/* --- Kopfzeile ------------------------------------------------------- */
header{
  position:relative;z-index:5;flex:0 0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 10px;
}
.wortmarke{font-size:22px;font-weight:900;letter-spacing:-.03em}
.datum{font-size:12.5px;letter-spacing:0;color:var(--text-3);
  margin-top:2px;padding-left:2px;text-transform:none;white-space:nowrap}
.profil{display:flex;align-items:center;gap:7px;background:var(--karte);
  border:var(--glas-rand);border-radius:var(--r-badge);
  padding:5px 6px 5px 12px;font-size:12px;min-height:40px}
.zeichen{width:26px;height:26px;border-radius:var(--r-pille);
  display:grid;place-items:center;font-size:13px;font-weight:700;
  background:var(--gruen-lasur)}

/* --- Tagesnavigation -------------------------------------------------- */
.tagleiste{display:flex;align-items:center;gap:2px;margin-top:2px}
.tagpfeil{width:30px;min-height:30px;border-radius:var(--r-pille);
  color:var(--text-4);font-size:17px;line-height:1;display:grid;place-items:center}
.tagpfeil:disabled{opacity:.3}

/* --- Scrollbereich --------------------------------------------------- */
main{
  position:relative;z-index:2;flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;      /* seitlich nichts wegziehbar */
  overscroll-behavior:contain;            /* kein Weiterziehen auf die Seite */
  -webkit-overflow-scrolling:touch;
  padding:0 20px 120px;
}
.screen{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.screentitel{font-weight:900;letter-spacing:-.03em}

/* --- Karten ---------------------------------------------------------- */
/* Flach, weiß, ein Haar von Rand. Der Schatten trägt nicht, er setzt die
   Karte nur leicht ab — deshalb ein sehr weicher Wert mit negativem
   Spread statt einer sichtbaren Kante. */
.karte{background:var(--karte);border:var(--glas-rand);
  border-radius:var(--r-gross);padding:18px;margin-bottom:12px;position:relative;
  box-shadow:var(--schatten-karte)}
.karte.hero{border-radius:var(--r-gross);padding:22px}
.karte.hero-koerper{border-radius:var(--r-gross);padding:22px}
.overline{font-size:10.5px;letter-spacing:.07em;font-weight:700;
  text-transform:uppercase;color:var(--text-3)}
.hair{border-top:var(--hair);margin:12px 0 10px}
/* .serif und .mono stehen an über hundert Stellen in app.js. Statt sie
   dort zu entfernen, tragen sie hier die neue Bedeutung: .serif ist die
   Fokuszahl, .mono die Metazeile. Keine Serif, keine Monospace mehr. */
.serif{font-weight:900;letter-spacing:-.035em;line-height:1.02}
.mono{letter-spacing:.01em}
/* ABWEICHUNG vom Handoff: dort steht `font-variant-numeric: tabular-nums`
   für alle Zahlen. In Schibsted Grotesk bekommt im Tabellensatz auch die
   Interpunktion eine volle Ziffernbreite — aus „114,8 kg" wird sichtbar
   „114 , 8 kg". Bei deutschem Dezimalkomma trifft das jede einzelne Zahl
   in der App, und der Gewinn (Ziffern springen beim Hochzählen nicht)
   wiegt das nicht auf: Die Fokuszahlen stehen zentriert, die Breite
   ändert sich also symmetrisch und fällt kaum auf.
   Rückgängig zu machen, indem hier tabular-nums gesetzt wird. */
.num{font-variant-numeric:proportional-nums}

/* --- Bogen (Heute-Hero) ---------------------------------------------- */
.bogen{display:block;margin:0 auto}
.bogen path{fill:none;stroke-linecap:round}
.bogenwert{text-align:center;margin-top:-58px;position:relative}
.bogenwert .gross{font-size:56px;font-weight:900;letter-spacing:-.045em;line-height:.95}
.bogenwert .unter{font-size:12.5px;color:var(--text-2);white-space:nowrap;margin-top:6px}
.legende{display:flex;gap:16px;justify-content:center;margin-top:14px;
  font-size:11px;color:var(--text-3)}
.legende i{width:8px;height:8px;border-radius:99px;display:inline-block;margin-right:6px}

/* --- Balken ---------------------------------------------------------- */
.track{background:var(--track);border-radius:99px;overflow:hidden}
.fill{height:100%;border-radius:99px;animation:growW .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}
.perlen{display:flex;gap:3px;margin-top:10px}
.perle{flex:1;height:10px;border-radius:99px;background:var(--track);
  animation:beadIn .4s ease both}
.perle.voll{background:var(--gruen)}

/* --- Buttons --------------------------------------------------------- */
.primaer{width:100%;padding:15px;border-radius:var(--r-pille);color:#fff;
  font-size:15px;font-weight:700;
  background:linear-gradient(155deg,var(--gruen-hell),var(--gruen));
  box-shadow:var(--schatten-knopf)}
/* Die zweite Fassung war früher oliv gegen terrakotta. Beide sind jetzt
   grün — unterschieden wird über die Tiefe, nicht über den Farbton. */
.primaer.olive{background:linear-gradient(155deg,var(--gruen),var(--tanne));
  box-shadow:0 12px 24px -12px rgba(38,84,60,.7)}
.primaer:disabled{opacity:.5;box-shadow:none}
.sekundaer{padding:14px 18px;border-radius:var(--r-pille);background:var(--track);
  border:0;color:var(--tanne);font-size:14px;font-weight:600}
.iconbtn{width:56px;height:56px;flex:0 0 auto;border-radius:var(--r-klein);
  background:var(--track);border:0;display:grid;place-items:center;color:var(--text-2)}
/* ABWEICHUNG vom Handoff: Dort steht --gruen-tief (#178A5B) als Chip-Text
   auf --gruen-lasur. Nachgerechnet sind das 3,8:1 — unter den 4,5:1, die
   die WCAG für Text dieser Größe verlangt, und das Briefing fordert
   ausdrücklich ausreichende Kontraste. Mit dem Tannengrün sind es 7,6:1
   bei praktisch gleichem Erscheinungsbild. */
.pille{padding:7px 13px;border-radius:var(--r-pille);background:var(--gruen-lasur);
  border:0;color:var(--tanne);font-size:12px;font-weight:600;white-space:nowrap}
.pille.aktiv{background:var(--tanne);color:#CFEEDA;font-weight:700}

/* --- Auswahlknöpfe: Portion, Tageszeit, Umschalter --------------------
   Anders als .pille sind das echte Umschalter — man muss sehen, was
   gerade gilt, und der Daumen muss sie treffen.

   Vorher trugen sie nur die Klasse .pille und bekamen ihren Aktiv-Zustand
   über eine Hintergrundfarbe im style-Attribut. Zwei Fehler auf einmal:
   Die Inline-Angabe hat .pille.aktiv überschrieben und damit gerade den
   deutlicheren Zustand ausgehebelt — und die Portionsknöpfe hatten
   überhaupt keinen. Wer "1 Dose (500 ml)" antippte, sah nur, dass die
   Zahl oben sprang.

   Der Haken ist Absicht: Das Briefing verlangt, Information nie allein
   über Farbe zu transportieren. */
.wahl{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 14px;border-radius:var(--r-pille);
  background:var(--track);color:var(--text-2);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  border:1.5px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             transform .1s ease}
.wahl:active{transform:scale(.96)}
.wahl.aktiv{background:var(--gruen-lasur-2);color:var(--tanne);
  border-color:var(--gruen);font-weight:700}   /* 7,5:1 statt 3,8:1 */
.wahl.aktiv::before{content:"✓";font-size:11px;font-weight:900;line-height:1}
.wahl:disabled{opacity:.6}
.wahl:disabled:active{transform:none}

/* --- Alle Knöpfe reagieren sichtbar ----------------------------------
   Ein Knopf, der beim Tippen nichts tut, fühlt sich nach Webseite an.
   Die Tastaturmarkierung liegt auf :focus-visible, damit sie beim Tippen
   mit dem Finger nicht auftaucht. */
button{transition:background .16s ease,color .16s ease,transform .1s ease,
        box-shadow .16s ease,border-color .16s ease}
button:not(:disabled):active{transform:scale(.97)}
button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
nav button:not(:disabled):active,
.seitennav button:active{transform:none}   /* Navigation bleibt ruhig */

/* --- Tab-Leiste ------------------------------------------------------ */
nav{position:absolute;left:0;right:0;bottom:0;z-index:20;
  background:var(--karte);
  border-top:1px solid var(--rand-farbe);
  display:flex;align-items:flex-start;justify-content:space-around;
  padding:9px 8px calc(env(safe-area-inset-bottom,0px) + 9px)}
nav button{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:600;color:var(--text-4);flex:1;position:relative;
  padding-top:5px;min-height:44px}
/* Der Balken bleibt im Akzentgrün — er ist eine Fläche, kein Text und
   braucht nur 3:1. Die 10px-Beschriftung darunter käme damit auf 3,1:1
   und ist deshalb einen Ton dunkler. */
nav button.aktiv{color:var(--gruen-tief)}
nav button.aktiv::before{content:"";position:absolute;top:-1px;width:16px;height:3px;
  border-radius:99px;background:var(--gruen)}
nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
nav .teller{width:58px;height:58px;margin-top:-24px;border-radius:99px;
  background:linear-gradient(155deg,var(--gruen-hell),var(--gruen));color:#fff;
  box-shadow:0 14px 28px -10px rgba(31,167,108,.5);justify-content:center;flex:0 0 auto}
nav .teller::before{display:none}
nav .teller svg{width:24px;height:24px;stroke-width:2}

/* --- Toast ----------------------------------------------------------- */
#toast{position:absolute;left:16px;right:16px;bottom:106px;z-index:50;
  background:var(--tinte);color:#F2F9F3;border-radius:18px;padding:13px 16px;
  font-size:13.5px;font-weight:600;display:none;align-items:center;gap:10px;
  box-shadow:0 18px 34px -16px rgba(16,36,26,.7)}
#toast.an{display:flex;animation:toastin .3s cubic-bezier(.2,.8,.2,1)}
#toast .haken{color:#2FCB85;font-size:16px}

/* --- Netzstand -------------------------------------------------------- */
.netzchip{align-self:center;padding:5px 11px;border-radius:var(--r-pille);
  background:var(--amber-lasur);color:var(--amber-text);font-size:11px;font-weight:600}

/* --- Nährstoff-Raster ------------------------------------------------ */
/* Das Kachelraster bleibt vorerst, umgefärbt. Das Rad aus dem Handoff
   kommt erst, wenn geklärt ist, wie 23 Nährstoffe mit fünf Zuständen
   darin dargestellt werden — dazu steht die Frage B1 offen. */
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kachel{height:74px;border-radius:var(--r-klein);position:relative;overflow:hidden;
  border:var(--glas-rand);background:var(--karte);
  display:flex;flex-direction:column;justify-content:space-between;padding:8px;text-align:left}
.kachel .fuellung{position:absolute;left:0;right:0;bottom:0;z-index:0}
.kachel .kuerzel{font-size:10.5px;font-weight:600;color:var(--text-2);
  position:relative;z-index:1;line-height:1.15}
.kachel .wert{font-size:11.5px;font-weight:700;position:relative;z-index:1}
.kachel.ohnedaten{border:1px dashed var(--text-4);background:var(--papier)}
.kachel.gewaehlt{border:1.6px solid var(--gruen)}

/* --- Mahlzeiten ------------------------------------------------------ */
.karte.mahlzeiten{border-radius:var(--r-gross)}
.zeile{display:flex;align-items:center;gap:11px;padding:9px 0}
.uhrchip{width:40px;height:40px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1.1}
.meta{font-size:12px;color:var(--text-3);margin-top:2px;letter-spacing:0}
.leergruppe{width:100%;border:1px dashed var(--gruen-matt);border-radius:var(--r-klein);
  padding:12px;color:var(--gruen-tief);font-size:13.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
/* Ist in der Mahlzeit schon etwas erfasst, tritt der Knopf zurück — er
   soll nachtragen ermöglichen, nicht die Liste dominieren. */
.leergruppe.schmal{border-color:var(--rand-farbe);color:var(--text-2);
  padding:8px;font-size:12px;margin-top:5px;min-height:36px}

/* --- Foto ------------------------------------------------------------ */
.sucher{position:relative;height:230px;border-radius:var(--r-gross);overflow:hidden;
  background:repeating-linear-gradient(135deg,#E2EDE3 0 10px,#EDF4ED 10px 20px);
  display:grid;place-items:center;margin-bottom:12px}
.sucher img{width:100%;height:100%;object-fit:cover}
.scanlinie{position:absolute;left:0;right:0;height:3px;background:var(--gruen-hell);
  box-shadow:0 0 16px 4px rgba(47,203,133,.55);animation:sweep 1.3s ease-in-out infinite}
.punkte{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.punkte i{width:9px;height:9px;border-radius:99px;background:var(--track)}
.pos{display:flex;align-items:center;gap:10px;padding:11px;border-radius:var(--r-badge);
  animation:pop .34s cubic-bezier(.2,.8,.2,1) both}
.pos.unsicher{background:var(--amber-lasur)}
.pos.bestaetigt{background:var(--gruen-lasur)}
.pos.ohnetreffer{opacity:.62}
.mengenbtn{width:44px;height:44px;border-radius:var(--r-badge);background:var(--track);
  border:0;font-size:20px;line-height:1;color:var(--tanne);
  display:grid;place-items:center}
.mengenbtn:active{background:var(--gruen-lasur-2);transform:scale(.92)}
.frage{background:var(--gruen-lasur);border:1px solid var(--gruen-lasur-2);
  border-radius:var(--r-gross);padding:18px;margin-bottom:12px}
.frage h3{font-size:20px;font-weight:800;letter-spacing:-.02em;
  line-height:1.25;margin-bottom:12px}

/* --- Login ----------------------------------------------------------- */
#login{flex:1;min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:32px 26px calc(env(safe-area-inset-bottom,0px) + 32px);gap:14px}
#login input{width:100%;padding:15px 16px;border-radius:var(--r-klein);
  background:var(--karte);border:var(--glas-rand);color:var(--ink)}
#login .fehler{color:var(--amber-text);font-size:13px;min-height:18px}

/* --- Animationen ----------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes growW{from{width:0}}
@keyframes growH{from{transform:scaleY(.12);opacity:.4}}
@keyframes dashIn{from{stroke-dashoffset:900}}
@keyframes beadIn{from{opacity:.15;transform:scale(.6)}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}}
@keyframes sweep{0%{top:6%}50%{top:88%}100%{top:6%}}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.95}}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* --- Erfassen: Modus-Umschalter -------------------------------------- */
/* Vier gleich große Kacheln, damit der Daumen sie blind trifft. Die aktive
   ist gefüllt statt nur umrandet — Umrandungen erkennt man auf einem
   hellen Hintergrund im Sonnenlicht nicht. */
.moduskachel{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 6px;border:var(--glas-rand);border-radius:var(--r-klein);
  background:var(--karte);color:var(--text-2);
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;min-height:44px;
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.moduskachel:active{transform:scale(.97)}
.moduskachel.aktiv{background:var(--gruen-lasur-2);color:var(--tanne);
  border-color:transparent}
.moduskachel.aktiv svg{stroke:var(--tanne)}

/* --- Körper: Umfänge -------------------------------------------------- */
.umfangraster{display:grid;grid-template-columns:112px minmax(0,1fr);
  gap:14px;align-items:start;margin:14px 0 4px}
.figurbuehne{width:112px}
.figur{width:100%;height:auto;display:block}
.figurkoerper{fill:#E4EAE5;stroke:var(--rand-farbe);stroke-width:1}
.band{fill:none;stroke:var(--text-4);stroke-width:1.3;stroke-dasharray:3 4;
  transition:stroke .18s ease,stroke-width .18s ease}
.band.an{stroke:var(--gruen);stroke-width:2.4;stroke-dasharray:none}
.bandtreffer{fill:transparent;cursor:pointer}
.hoehenlinie{stroke:var(--gruen-matt);stroke-width:1;stroke-dasharray:4 5}

.umfangliste{display:flex;flex-direction:column;gap:2px}
/* Ganze Zeile antippbar, mindestens 44 px hoch. */
.umfangzeile{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;
  padding:8px 9px;border-radius:var(--r-badge);border:1px solid transparent;text-align:left;
  transition:background .16s ease,border-color .16s ease}
.umfangzeile.an{background:var(--gruen-lasur);border-color:var(--gruen-lasur-2)}
.umfangdelta{font-size:11px;font-weight:700;min-width:34px;text-align:right}
.umfangpfeil{color:#B9CBBE;font-size:15px;line-height:1}

/* --- Messanleitung ----------------------------------------------------- */
.zurueckchip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  border-radius:var(--r-pille);background:var(--track);border:0;
  font-size:12px;font-weight:600;letter-spacing:0;
  color:var(--tanne);margin-bottom:12px}
.anleitungkarte{padding:18px}
.anleitungbuehne{position:relative;margin:14px auto 4px;max-width:230px}
/* Landmarke als HTML über der Höhenlinie, nicht als SVG-text. */
.landmarke{position:absolute;left:0;transform:translateY(-100%);
  font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--tanne);white-space:nowrap;pointer-events:none}
.querschnitt{position:relative;width:58px;height:58px;flex:0 0 auto;border-radius:99px;
  background:var(--track)}
.querschnitt::after{content:"";position:absolute;inset:-7px;border-radius:99px;
  border:1.3px dashed var(--gruen-matt)}
.hoehekasten{background:var(--gruen-lasur);border-radius:var(--r-badge);padding:13px 14px}
.schrittzeile{display:flex;gap:11px;padding:9px 0;border-bottom:var(--hair)}
.schrittzeile:last-of-type{border-bottom:0}
.nichtkasten{border:1.3px dashed var(--amber);border-radius:var(--r-badge);
  padding:12px 14px;margin-top:8px}
.messeingabe{display:flex;align-items:center;gap:12px;margin-top:10px}
.stufenbtn{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-klein);
  background:var(--track);border:0;font-size:22px;
  display:grid;place-items:center;color:var(--tanne)}
/* Zahlenfeld fuer den Umfang. Sieht aus wie die Anzeige, die es ersetzt,
   nimmt aber Tastatureingaben entgegen. font-family kommt aus der
   input-Regel weiter oben, Groesse und Gewicht aus .serif/inline. */
.messfeld{width:100%;min-width:0;padding:0 0 3px;text-align:center;
  background:transparent;border:0;border-bottom:1.5px solid var(--rand-farbe);
  border-radius:0;color:var(--ink);line-height:1.02;
  -webkit-appearance:none;appearance:none}
.messfeld:focus{outline:0;border-bottom-color:var(--gruen)}
.messfeld.fehler{border-bottom-color:var(--amber);color:var(--amber-text)}

/* Rechner: Dialog statt eigener Seite. */
.messdialog{position:relative;width:min(760px,calc(100vw - 48px));
  max-height:88vh;overflow-y:auto;background:var(--karte);
  border:var(--glas-rand);border-radius:var(--r-gross);padding:20px}
.dialogzu{position:absolute;top:14px;right:14px;width:34px;height:34px;
  border-radius:99px;background:var(--track);display:grid;place-items:center;
  font-size:15px;color:var(--text-2);z-index:2}
@media (min-width:1100px){
  .blattgrund{align-items:center;justify-content:center}
  .umfangraster{grid-template-columns:130px minmax(0,1fr)}
  .figurbuehne{width:130px}
  .umfangliste{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .stufenbtn{width:44px;height:44px;font-size:19px}
}

/* --- Blatt von unten -------------------------------------------------- */
.blattgrund{position:fixed;inset:0;z-index:60;background:rgba(16,36,26,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;animation:einblenden .25s ease}
.blatt{width:100%;background:var(--karte);
  border:0;border-radius:32px 32px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 22px);
  animation:hochschieben .38s cubic-bezier(.2,.8,.2,1)}
/* Der Griff oben: 40×4, wie im Handoff. */
.blatt::before{content:"";display:block;width:40px;height:4px;border-radius:99px;
  background:var(--track);margin:-8px auto 16px}
@keyframes einblenden{from{opacity:0}}
@keyframes hochschieben{from{transform:translateY(60px)}}

/* =====================================================================
   Rechner-Fassung ab 1100 px

   Dieselbe App, andere Anordnung. Keine zweite Anwendung: Sonst pflegen
   wir jede Änderung doppelt, und eine der beiden Fassungen hinkt immer
   hinterher. Unterschiedlich ist nur das Layout — Datenwege, Zustände und
   Endpunkte sind identisch.
   ===================================================================== */

/* Am Handy und Tablet unsichtbar. */
.seitenleiste{display:none}
.kopfmarke{display:flex;align-items:center;gap:9px}
.hauptspalte{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.kopftitel{display:none}

@media (min-width:1100px){
  #buehne{padding:26px 24px 30px}

  #app{
    max-width:1400px;height:min(940px,94dvh);
    display:grid;grid-template-columns:238px minmax(0,1fr);
    border-radius:32px;
  }

  /* Die Tableiste unten weicht der Seitenleiste. */
  #app > nav{display:none}

  /* --- Seitenleiste --------------------------------------------------- */
  .seitenleiste{
    display:flex;flex-direction:column;gap:22px;
    padding:22px 14px 18px;
    border-right:1px solid var(--rand-farbe);
    background:var(--karte);
    border-radius:32px 0 0 32px;
  }
  .seitenmarke{display:flex;align-items:center;gap:9px;padding:0 8px 2px}

  .seitennav{display:flex;flex-direction:column;gap:2px}
  .seitennav button{
    display:flex;align-items:center;gap:11px;
    padding:11px 12px;border-radius:var(--r-badge);
    font-size:14px;font-weight:600;color:var(--text-2);text-align:left;
    transition:background .16s ease,color .16s ease;
  }
  .seitennav button:hover{background:var(--track);color:var(--ink)}
  .seitennav button.aktiv{background:var(--gruen-lasur-2);color:var(--tanne)}
  .seitennav svg{width:19px;height:19px;fill:none;stroke:currentColor;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

  .seitenschnell{margin-top:auto}
  .seitenschnell button{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:9px 12px;border-radius:12px;font-size:13px;color:var(--text-2);
    text-align:left;transition:background .16s ease,color .16s ease;
  }
  .seitenschnell button:hover{background:var(--track);color:var(--ink)}
  /* Die Taste steht dran, statt in einer Hilfe versteckt zu sein. */
  .taste{
    display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;
    border-radius:6px;border:1px solid var(--rand-farbe);
    background:var(--papier);
    font-size:10px;font-weight:700;color:var(--text-3);
  }

  /* --- Kopfzeile ------------------------------------------------------ */
  /* Die Wortmarke steht links in der Seitenleiste, oben wäre sie doppelt. */
  header{padding:20px 26px 10px;align-items:flex-start}
  .kopfmarke{display:none}
  /* Der Titel steht oben in der Kopfzeile. Der Titel im Screen selbst wäre
     dann doppelt — am Handy bleibt er, dort gibt es die Kopfzeile so nicht. */
  .screentitel{display:none}
  .kopftitel{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;
    line-height:1.1}
  .datum{margin-top:4px}

  /* --- Inhalt --------------------------------------------------------- */
  main{padding:0 26px 34px}

  /* Karten fließen in zwei Spalten. Mehrspaltiger Textsatz statt Raster:
     So muss keine Ansicht wissen, wie viele Karten sie hat, und nichts
     wird auseinandergerissen. */
  .screen{columns:2;column-gap:16px}
  .karte{break-inside:avoid;margin-bottom:16px}

  /* Der Erfassen-Screen braucht die volle Breite: Suchfeld und Kamera
     sehen zweispaltig zerhackt aus. */
  main[data-ansicht="erfassen"] .screen{columns:1;max-width:760px}
  main[data-ansicht="teller"] .screen{columns:1;max-width:760px}
  main[data-ansicht="essen"] .screen{columns:1;max-width:760px}

  /* Das Nährstoffraster darf nicht zwischen zwei Spalten zerrissen werden,
     und es hat auf dem Rechner Platz für deutlich mehr Kacheln. */
  .raster{grid-template-columns:repeat(8,1fr);break-inside:avoid}
  main[data-ansicht="spektrum"] .screen{columns:1;max-width:1020px}

  .sucher{max-width:560px;margin-left:auto;margin-right:auto}
  #toast{left:auto;right:26px;bottom:26px;max-width:420px}
}

@media (min-width:1500px){
  .screen{columns:3}
  main[data-ansicht="erfassen"] .screen,
  main[data-ansicht="teller"] .screen{columns:1}
}

/* --- Profil: Vorlieben und Ausschlüsse -------------------------------- */
/* Vorgemerkt aus dem Chat. Bewusst in Amber statt in Grün: Der Eintrag
   ist noch keine Erfassung, und genau das soll die Karte sagen, bevor
   jemand die Kalorien vermisst. */
.vormerkkarte{border-color:var(--amber);background:var(--amber-lasur)}
.vormerkkarte .sekundaer{background:var(--karte)}
.hinweiszeile{font-size:12px;line-height:1.5;color:var(--amber-text);margin-top:9px}

/* Eine Position der Vormerkung: Zeile mit Menge, darunter die Vorschläge
   zum Antippen. Automatisch zugeordnet wird nur, was wörtlich stimmt —
   alles andere entscheidet sich hier, vor dem Übernehmen. */
.vorzeile{padding:9px 0;border-bottom:1px solid rgba(138,98,9,.18)}
.vorzeile:last-of-type{border-bottom:0}
.vorkopf{display:flex;align-items:flex-start;gap:9px}
.vorwahl{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.vorwahl .stufe{text-align:left}
.vorwahl .stufe.an{background:var(--gruen);border-color:transparent;color:#fff}

.praefzeile{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:var(--hair);min-height:44px}
.praefzeile:last-of-type{border-bottom:0}
/* Zwei Stufen, sichtbar unterschieden: "nie" ist streng und wird betont. */
.stufe{border:1px solid var(--rand-farbe);background:var(--karte);
  border-radius:99px;padding:7px 12px;font-size:11.5px;font-weight:600;
  color:var(--text-2);letter-spacing:0;min-height:34px}
.stufe.streng{background:var(--amber-lasur);border-color:transparent;
  color:var(--amber-text)}

/* --- Rezepte ----------------------------------------------------------- */
.rezeptzeile{display:flex;align-items:flex-start;width:100%;text-align:left;
  padding:11px 0;border-bottom:var(--hair);min-height:44px}
.rezeptzeile:last-of-type{border-bottom:0}

/* --- Essen: Einstiegskarte auf Heute ----------------------------------- */
/* Dunkel, damit sie Gewicht hat, ohne eine zweite Zeile im Zeilen-Stil zu
   sein. Die Frage steht sofort da; der Vorschlag kommt nach, wenn er da
   ist. Deshalb hat die Vorschauzeile eine feste Mindesthöhe — sonst
   springt die Seite, sobald die KI antwortet. */
.essenkarte{display:block;width:100%;text-align:left;background:var(--dunkel);
  border:0;color:var(--auf-dunkel);border-radius:var(--r-gross);
  padding:18px 20px;margin-bottom:12px;position:relative;
  box-shadow:var(--schatten-dunkel)}
.essenkarte .overline{color:var(--auf-dunkel-leise)}
.essenfrage{font-size:21px;font-weight:900;letter-spacing:-.03em;
  line-height:1.2;margin-top:6px;padding-right:26px}
.essenvorschau{min-height:32px;display:flex;align-items:center;gap:8px;
  margin-top:9px;font-size:13px;color:var(--auf-dunkel-leise)}
.essenvorschau .name{color:var(--auf-dunkel);font-weight:700}
.essenpfeil{position:absolute;top:18px;right:18px;color:var(--auf-dunkel-leise);
  font-size:19px;line-height:1}

/* --- Essen: Ausschlüsse ------------------------------------------------ */
.ausschlusschips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ausschlusschip{display:inline-flex;align-items:center;gap:7px;
  background:var(--amber-lasur);color:var(--amber-text);
  border-radius:99px;padding:7px 9px 7px 13px;font-size:12.5px;font-weight:600}
.ausschlusschip button{width:22px;height:22px;border-radius:99px;flex:0 0 auto;
  display:grid;place-items:center;font-size:14px;line-height:1;
  color:var(--amber-text);background:rgba(255,255,255,.6)}
.ausschlussneu{display:flex;gap:8px;margin-top:11px}
.ausschlussneu input{flex:1;min-width:0;padding:12px 14px;
  border-radius:var(--r-klein);background:var(--karte);
  border:var(--glas-rand);color:var(--ink)}

.schrittnr{width:22px;height:22px;flex:0 0 auto;border-radius:99px;
  display:grid;place-items:center;background:var(--gruen-lasur);
  color:var(--tanne);font-size:11px;font-weight:700;margin-top:1px}

/* --- Kochmodus ---------------------------------------------------------
   Ein Schritt je Bildschirm, große Schrift, wenig sonst. Beim Kochen
   schaut man aus zwei Metern Entfernung mit teigigen Händen hin. */
.kochkopf{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:2px 0 12px}
.kochbalken{display:flex;gap:4px;margin-bottom:14px}
.kochbalken span{flex:1;height:4px;border-radius:99px;background:var(--track);
  transition:background .25s ease}
.kochbalken span.an{background:var(--gruen)}
.kochkarte{padding:22px 20px}
.kochtext{font-size:20px;line-height:1.5}
@media (min-width:1100px){
  .kochtext{font-size:26px}
  main[data-ansicht="rezept"] .screen{columns:1;max-width:720px}
}

/* --- Portionswahl: Anzahl mal Portion ---------------------------------
   Vorher gab es nur ein Grammfeld. Wer zwei Scheiben wollte, musste 90
   ausrechnen — das ist nicht, wie Menschen über Essen sprechen. */
.portionswahl{display:flex;gap:9px;align-items:stretch}
.anzahlfeld{display:flex;align-items:center;gap:6px;flex:0 0 auto;
  background:var(--karte);border:var(--glas-rand);border-radius:var(--r-badge);padding:4px}
.portionsauswahl{flex:1;min-width:0;padding:13px;border-radius:var(--r-badge);
  border:var(--glas-rand);background:var(--karte);color:var(--ink);
  font-family:inherit;font-size:14px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
    linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* --- Eintrag löschen ---------------------------------------------------
   Zwei Stufen statt Systemdialog: Der erste Tipp macht aus dem × ein
   „Löschen?", der zweite löscht wirklich. */
.loeschen{width:26px;height:26px;flex:0 0 auto;border-radius:99px;
  color:var(--text-4);font-size:15px;line-height:1;
  display:grid;place-items:center;margin-left:2px;
  transition:background .16s ease,color .16s ease,width .16s ease}
.loeschen.sicher{width:auto;padding:0 11px;height:26px;font-size:11px;
  font-weight:700;background:var(--amber-lasur);color:var(--amber-text)}

/* --- Querformat --------------------------------------------------------
   Im Manifest steht orientation: portrait. Android hält sich daran, wenn
   die App installiert ist — im Browser und auf iOS dreht sie trotzdem
   mit. Deshalb zusätzlich diese Sperre.

   Sie greift NUR auf Touch-Geräten mit wenig Höhe, damit ein schmales
   Browserfenster am Rechner nicht fälschlich als gedrehtes Handy gilt.
   Ein Tablet im Querformat bleibt bewusst benutzbar.

   ACHTUNG Reihenfolge: Der Ruhezustand muss VOR der @media-Regel stehen.
   Beide Selektoren heißen `#querhinweis` und sind damit gleich spezifisch
   — eine Media Query erhöht die Spezifität nicht. Stand `display:none`
   darunter, gewann es immer. Genau so war es seit Einführung der Regel,
   die Sperre war nie wirksam; nachgemessen im Browser gegen die alte und
   die neue Fassung. */
#querhinweis{display:none}

/* Sitzt die echte Sperre (screen.orientation.lock), kann das Gerät gar
   nicht erst ins Querformat — der Hinweis wäre dann bestenfalls
   überflüssig und schlimmstenfalls ein kurzes Aufblitzen beim Drehen. */
html[data-hochformat="gesperrt"] #querhinweis{display:none !important}

@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  #querhinweis{
    position:fixed;inset:0;z-index:999;display:flex;
    flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:var(--papier);color:var(--ink);text-align:center;padding:30px;
  }
  #querhinweis svg{width:46px;height:46px;fill:none;stroke:var(--gruen);
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* --- Schreiben ---------------------------------------------------------
   Ein Feld für berichten und fragen. Blasen, damit erkennbar bleibt, was
   von wem kam — mehr Gestaltung braucht es hier nicht. */
#chatverlauf{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;
  max-height:52vh;overflow-y:auto}
.chatblase{border-radius:var(--r-klein);padding:12px 14px;max-width:92%;
  font-size:13.5px;line-height:1.5}
.chatblase.ich{align-self:flex-end;background:var(--gruen-lasur);
  color:var(--tanne)}
.chatblase.du{align-self:flex-start;background:var(--karte);
  border:var(--glas-rand)}
.chateingabe{display:flex;gap:8px;align-items:flex-end}
.chateingabe textarea{flex:1;padding:12px 14px;border-radius:var(--r-klein);
  border:var(--glas-rand);background:var(--karte);color:var(--ink);
  font-family:inherit;font-size:16px;line-height:1.45;resize:none}
@media (min-width:1100px){ #chatverlauf{max-height:none} }

/* --- Körper: Verteilung -------------------------------------------------
   Die Figur steht mittig, die vier Wertkarten schweben darüber. Sie
   überlappen die Silhouette bewusst — so bleibt die Karte kompakt und
   die Zuordnung Karte-zu-Zone entsteht über die Höhe. */
.umschalter{display:inline-flex;background:var(--track);border-radius:var(--r-pille);padding:4px}
.umschalter button{padding:7px 14px;border-radius:var(--r-pille);font-size:12px;
  font-weight:700;color:var(--text-2);min-height:36px}
.umschalter button.an{background:var(--tanne);color:#CFEEDA}

.verteilbuehne{position:relative;margin:6px auto 4px;max-width:330px;
  min-height:330px;display:flex;justify-content:center}
.heatfigur{width:150px;height:auto;display:block}
.wertkarte{position:absolute;width:122px;background:var(--karte);
  border-radius:18px;padding:9px 11px;
  box-shadow:0 14px 30px -14px rgba(15,40,28,.35);border:var(--glas-rand)}

.zonenlegende{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:8px;font-size:11px;color:var(--text-3)}
.zonenlegende i{width:14px;height:14px;border-radius:5px;display:inline-block;
  margin-right:6px;vertical-align:-3px;border:1px solid var(--rand-farbe)}

@media (min-width:1100px){
  .verteilbuehne{max-width:none}
}