/* Schriften stehen hier DIREKT statt hinter @import '/fonts.css' (26.7.).
   Ein @import wird erst entdeckt, NACHDEM diese Datei geladen und geparst ist —
   die Kette war also HTML → app.css → fonts.css → woff2, vier Anfragen
   nacheinander. Gemessen kostete allein der fonts.css-Schritt ~160 ms auf dem
   Server, auf Mobilfunk entsprechend mehr, für 1,2 KB Inhalt. Inline entfällt
   dieser Round-Trip komplett und die Schriften starten eine Stufe früher.
   (Die Schriftdateien selbst sind unverändert — hier wird nichts gesubsettet.) */
/* Je EINE Regel pro Familie mit Gewichts-BEREICH statt drei mit Einzelgewichten
   (26.7.). Grund: `newsreader-400/500/600.woff2` sind byte-identisch (gleiche MD5) —
   es ist dieselbe Variable-Font-Datei unter drei Namen, jede 129 KB, und sie trägt
   die komplette Achse wght 200–800. Der Browser lud also dreimal dasselbe herunter,
   um daraus drei feste Gewichte zu schneiden. Dasselbe bei Playfair (3 × 38 KB,
   Achse 400–900). Mit dem Bereich reicht eine Datei und der Browser interpoliert
   die Gewichte daraus — 584 KB → 252 KB und vier Anfragen weniger, bei
   identischem Schriftbild.
   Kursiv bleibt getrennt: newsreader-400i hat NUR eine opsz-Achse (kein wght),
   playfairdisplay-500i ist statisch — die beiden sind echte Extra-Schnitte.
   Die ungenutzten Doppel-Dateien liegen bewusst noch in static/fonts/, damit
   Clients mit altem, gecachtem CSS kein 404 bekommen; siehe WARTUNG.md. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/newsreader-400.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/newsreader-400i.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/playfairdisplay-500.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/playfairdisplay-500i.woff2') format('woff2')}

/* Lumen — Deco-Designsystem (Runde 44). Smaragd + Messing-Gold, Playfair Display +
   Newsreader. Klassennamen bleiben stabil (andere Seiten hängen daran); nur Palette +
   Typo werden auf Deco umgelegt. Blaupause: static/design-lumen.html. */
:root{
  --bg:#1C1713;--card:#261F18;--line:#392F27;--fg:#ECE2D2;--mut:#9A8E7C;
  --accent:#C0674A;--gold-soft:#A9876B;--sage:#9CB07A;--amber:#E0B259;--rust:#D89070;
  --tabbar:rgba(28,23,19,.96);   /* untere Leiste: Espresso-Grundton (Clay-Oberkante via border) */
  --sleep-deep:#3C5A4A;--sleep-light:#9CB07A;--sleep-rem:#E0B259;--sleep-awake:#7A6F63;
  --disp:"Playfair Display",Georgia,serif;--body:"Newsreader",Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Zoom komplett sperren (gar kein Zoomen, R48): touch-action killt Pinch/Doppeltipp,
   text-size-adjust verhindert iOS-Text-Aufblähen; nozoom.js blockt zusätzlich die
   iOS-Pinch-Gesten (Safari ignoriert user-scalable=no). Inputs sind 16px → kein Focus-Zoom. */
html{overscroll-behavior-y:none;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
html,body{touch-action:pan-x pan-y}/* kein Pinch-/Doppeltipp-Zoom, Scrollen bleibt */
/* MPA-Seitenwechsel: Cross-Document View Transitions (iOS 18.4+/Chrome 126+) blenden
   die Tabs weich über statt hart zu schneiden — der leere Frame beim Navigieren
   verschwindet. Ältere Browser ignorieren die Regel (progressive enhancement). */
/* Volle Seiten-Navigationen (Login, Nicht-pjax-Seiten): weicher Übergang NUR auf dem
   Inhalts-Wrapper. :root ist ausgenommen — Safari snapshottet fixe Elemente (Tab-Leiste)
   im root sonst mit Scroll-Versatz. Die pjax-Tab-Wechsel animieren NICHT hierüber,
   sondern direkt per Web-Animations-API in nav.js (View-Transition-Overlays decken
   die fixe Leiste sonst während der Animation ab). */
/* NAV:AUTO deaktiviert (18.7.): Cross-Document-View-Transitions kollidierten mit der
   gewollten Web-Animations-API-Animation in nav.js → „Transition was skipped", der
   Übergangs-Overlay hing (v.a. iOS-WKWebView) und fror den Seitenwechsel ein.
   Die Seitenwechsel-Animation macht weiterhin nav.js selbst. Siehe WARTUNG.md §3. */
@view-transition{navigation:none}
:root{view-transition-name:none}
/* App-Shell (4.7., Fix „Leiste rutscht hoch"): Der BODY scrollt nie mehr — .page ist
   der Scroll-Container (Architektur nativer Apps, wie im ?handy-Rahmen bewährt).
   Damit ist die fixe Tab-Leiste physikalisch vom Scrollen/Bouncen entkoppelt.
   Nur aktiv, wenn nav.js den Wrapper gebaut hat (html.appshell) — Seiten ohne
   nav.js (Login, Datenschutz) scrollen normal weiter. */
html.appshell, html.appshell body{height:100%;overflow:hidden}
html.appshell body{padding:0}
html.appshell .page{position:fixed;top:0;left:0;right:0;margin:0 auto;
  bottom:calc(48px + max(0px, calc(env(safe-area-inset-bottom) - 30px)));   /* endet ÜBER der Leiste */
  max-width:480px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:none;z-index:0;   /* none, NICHT contain: contain stoppt nur das Scroll-
    Chaining, der lokale iOS-Gummiband-Bounce von .page läuft weiter; DOM-Replace (go/swap) mitten
    im Bounce fror sonst den Overscroll-Versatz ein → Lücke oben + stuck scroll (Fix 21.7.). */
  padding:max(16px,env(safe-area-inset-top)) 16px 150px}   /* 150px: Platz für FAB (Fix 5.7., Überlappung) */
::view-transition-old(page),::view-transition-new(page){animation-duration:.18s}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  max-width:480px;margin:0 auto;padding:16px;
  padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:calc(150px + env(safe-area-inset-bottom))}
h1,h2{font-family:var(--disp);font-weight:600;letter-spacing:0;line-height:1.1}
h1{font-size:30px;margin:6px 0 4px}
.label{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}
.muted{color:var(--mut)}
/* Einklappbare Detail-Sektion (natives <details>, kein JS — CSP-sicher).
   Default zu: Screens zeigen nur die Kern-Ansage, Details auf Abruf. */
details.fold{background:var(--card);border:1px solid var(--line);border-radius:16px;margin:12px 0}
details.fold>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:8px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'›';color:var(--mut);font-size:17px;
  transform:rotate(90deg);transition:transform .15s ease}
details.fold[open]>summary::after{transform:rotate(-90deg)}
details.fold>summary .label{margin:0}
details.fold>summary .foldval{margin-left:auto;font-weight:700;font-size:13px}
details.fold>.fold-body{padding:0 16px 16px}
input,select{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:#0B1714;color:var(--fg);font-size:16px;font-family:var(--body)}
/* Checkboxen/Radios nicht auf volle Breite strecken (sonst verziehen sie die Zeile) */
input[type=checkbox],input[type=radio]{width:auto;padding:0;margin:0;flex:0 0 auto}
button{font-family:inherit}
/* Buttons: Deco — Gold-Outline (Standard) / Gold gefüllt (.accent) */
.btn{display:block;width:100%;text-align:center;padding:14px;border-radius:10px;
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;margin-top:12px;cursor:pointer}
.btn:active{background:var(--accent);color:var(--bg)}
.btn.accent{background:var(--accent);color:var(--bg)}
/* Inline-Variante für .btn in einer flex-Reihe (z. B. „+" neben Eingabefeldern):
   ohne dies erbt der Button width:100% und quetscht die Geschwister auf ein paar px. */
.btn.inline{display:inline-flex;align-items:center;justify-content:center;
  width:auto;flex:0 0 auto;margin-top:0;padding-left:20px;padding-right:20px}
.row{display:flex;gap:8px}
.seg{flex:1;text-align:center;padding:10px 0;border-radius:10px;background:var(--line);
  color:var(--mut);font-family:var(--disp);font-weight:600;letter-spacing:.06em;border:0}
.seg.on{background:var(--accent);color:var(--bg)}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.bar>div{height:100%;background:var(--accent)}
/* Sparklines: OHNE diese Regeln füllt eine SVG-<polyline> per Default schwarz (fill:black) →
   „aneinandergehängte Dreiecke" statt Linie. fill:none + stroke macht daraus eine echte Linie. */
.spark{width:70px;height:26px}
.bigspark{width:100%;height:48px;display:block}
.spark .ln,.bigspark .ln{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spark .ar,.bigspark .ar{fill:var(--accent);opacity:.10}
.fab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(68px + env(safe-area-inset-bottom));max-width:448px;width:calc(100% - 32px)}
.meal{display:flex;align-items:center;gap:10px;padding:8px 0}
.meal img,.thumb{width:38px;height:38px;border-radius:9px;object-fit:cover;background:#33333a}
.macros{display:flex;justify-content:space-around;margin-top:10px;font-size:12px;text-align:center}
.macros b{display:block;font-size:15px;font-family:var(--disp);font-weight:600}
a{color:var(--accent)}
.hide{display:none}
/* Masthead (LUMEN + Datum), geteilt */
.mast{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.mast .date{font-family:var(--disp);font-style:italic;color:var(--mut);font-size:15px}
.mast .wm{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:.32em;text-indent:.32em;color:var(--fg)}
.mast .wm i{color:var(--accent);font-style:normal;font-size:10px;margin-right:6px;vertical-align:2px}
/* Heute-Coach-Kopf: Status-Überschrift + Lede + Anforderungs-Zeilen */
.status{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1.08;margin-top:4px}
.status .amp{color:var(--accent)}
.lede{font-size:17px;color:var(--fg);margin-top:10px;white-space:pre-line}.lede b{color:var(--accent);font-weight:600}
.req{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--line);
  text-decoration:none;color:var(--fg)}
.req:first-child{border-top:0}.req:active{color:var(--accent)}
.req .ic{width:24px;text-align:center;color:var(--accent);font-size:15px;flex:0 0 auto}
.req .mid{flex:1}.req .t{font-weight:500}.req .s{font-size:14px;color:var(--mut);font-style:italic}
.req .rt{font-family:var(--disp);font-weight:600;font-size:17px}
.req .chev{color:var(--gold-soft);margin-left:8px}
.req .pbar{height:2px;background:var(--line);margin-top:6px;position:relative}
.req .pbar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);max-width:100%}
/* Deco-Trenner ◆ (geteilt) + Eyebrow-Label */
.dvd{display:flex;align-items:center;gap:13px;color:var(--accent);margin:22px 0 14px}
.dvd::before,.dvd::after{content:"";height:1px;flex:1;background:var(--gold-soft);opacity:.45}
.dvd .x{font-size:9px;letter-spacing:.3em}
.eyebrow{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:18px 0 10px}
/* Kontext: Szenario-Chips + Freitext-Ask */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chipin{position:absolute;opacity:0;width:0;height:0}
.chip{display:inline-flex;cursor:pointer;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-family:var(--disp);font-size:15px;color:var(--mut)}
.chipin:checked+.chip{border-color:var(--accent);color:var(--accent);background:var(--card)}
.ctx-note{font-style:italic;color:var(--mut);font-size:15px;margin-top:6px}
.ask{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--accent);
  padding-bottom:9px;margin-top:12px}
.ask input{flex:1;border:0;background:transparent;color:var(--fg);font-family:var(--body);
  font-size:17px;outline:none;padding:0;border-radius:0}
.ask input::placeholder{color:var(--mut);font-style:italic}
.ask button{flex:none;width:34px;height:34px;border:1px solid var(--accent);background:transparent;
  color:var(--accent);border-radius:50%;cursor:pointer;font-size:16px;font-family:var(--body)}
.ask button:active{background:var(--accent);color:var(--bg)}
/* Menü-Liste (Mehr): klickbare Zeilen mit Titel + Unterzeile */
.menu{margin-top:6px}
.menu a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;
  border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
.menu a:first-child{border-top:0}.menu a:active{color:var(--accent)}
.menu a>span:first-child{flex:1}
.menu .mt{display:block;font-weight:500}
.menu .ms{display:block;font-size:13px;color:var(--mut);font-style:italic;margin-top:2px}
.menu .chev{color:var(--gold-soft);flex:0 0 auto;font-size:18px}
/* Faktor-Zeile (Erholungs-Einfluss, mit · Beleg) */
.factor{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:12px 0;border-top:1px solid var(--line);font-size:16px}
.factor:first-child{border-top:0}
.factor .lab b{font-weight:500}
.factor .beleg{color:var(--gold-soft);font-size:13px;font-style:italic;cursor:pointer;
  background:none;border:0;padding:0;margin-left:6px;font-family:var(--body)}
.factor .beleg:active{color:var(--accent)}
.factor .src{display:block;font-size:12px;color:var(--mut);font-style:italic;margin-top:2px}
.factor .sign{font-family:var(--disp);font-size:20px;font-weight:600;min-width:54px;text-align:right}
.sign.minus{color:var(--rust)}.sign.plus{color:var(--sage)}
/* Daten-Zeile mit Spark (Erholungswerte) */
.data{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.data:first-child{border-top:0}
.data .nm{font-weight:500}.data .d{color:var(--mut);font-style:italic;font-size:14px}
.data b{font-family:var(--disp);font-weight:600;font-size:18px}
.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:100;
  transform:translateZ(0);
  display:flex;background:var(--tabbar);backdrop-filter:blur(8px);
  border-top:1px solid var(--accent);
  /* 12px in die Safe-Area hinein: Leiste sitzt tiefer (nativer), Icons bleiben
     über dem Home-Indikator. */
  padding-bottom:max(0px, calc(env(safe-area-inset-bottom) - 30px))}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 0 4px;color:var(--mut);text-decoration:none;font-family:var(--disp);
  font-size:9px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.tabbar a.active{color:var(--fg)}
/* Offene iOS-Tastatur (nav.js setzt kb-open via visualViewport): Leiste + FAB ausblenden,
   statt sie von der Tastatur nach oben schieben zu lassen — Verhalten nativer Apps. */
html.kb-open .tabbar,html.kb-open .fab{display:none}
.tabbar a span{white-space:nowrap}
.tabbar svg{width:21px;height:21px;color:var(--gold-soft)}
.tabbar a.active svg{color:var(--accent)}
/* Tab-Micro-Feedback (native App-Gefühl): der frisch aktivierte Tab „ploppt" kurz —
   Spring-Overshoot am Icon. nav.js setzt .pop beim Wechsel und nimmt es nach dem
   Lauf wieder weg (sonst würde es bei erneutem Aktivieren nicht neu triggern). */
@keyframes tabpop{0%{transform:scale(1)}42%{transform:scale(1.3)}100%{transform:scale(1)}}
.tabbar a.pop svg{animation:tabpop .34s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion: reduce){.tabbar a.pop svg{animation:none}}

/* Pull-to-Refresh-Indikator (nav.js steuert Position/Opazität während des Ziehens).
   .page hat overscroll-behavior:none → die native Gummiband-Refresh-Geste des
   Browsers ist gesperrt; dieser Indikator ersetzt sie kontrolliert. */
.ptr{position:fixed;top:0;left:50%;margin-left:-18px;z-index:90;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.35);
  color:var(--accent);pointer-events:none;opacity:0}
.ptr-i{display:flex;transition:transform .08s linear}
.ptr svg{width:20px;height:20px}
.ptr.ptr-on .ptr-i{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ptr.ptr-on .ptr-i{animation:none}}
/* Ring (Apple-Health-/Whoop-Stil), Deco-Farben */
.ring-wrap{position:relative;width:184px;height:184px;margin:6px auto 2px}
.ring{width:184px;height:184px;transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-width:12}
.ring .track{stroke:var(--line)}
.ring .fill{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:439.8;
  stroke-dashoffset:439.8;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1),stroke .3s}
/* Der Ringinnenraum ist schmaler als die Box: Bei r=70 und 12px Strichbreite bleiben
   innen ~147px von 184px. Ohne dieses Polster legt sich langer Text über den farbigen
   Bogen — genau der Fehler vom 27.7. In die Mitte gehören nur Zahl und Kategorie;
   alles Weitere kommt in #ringmeta darunter. */
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 20px}
#ringmeta{text-align:center;margin-top:2px}
.ring-num{font-family:var(--disp);font-size:46px;font-weight:600;letter-spacing:0;line-height:1}
.ring-sub{font-size:12px;color:var(--mut);margin-top:3px;font-style:italic}
.fab.row{display:flex;gap:8px}
/* Vollbild-Overlays (Aufnahme/Ergebnis/Texteingabe) sind modal. .fab ist auf Body-Ebene
   gehoben (nav.js) und .tabbar liegt auf z-index:100 — beide würden sonst ÜBER dem Overlay
   (im .page-Stacking-Context) landen und den „In Tagebuch speichern"-Button überdecken.
   Bei offenem Overlay daher ausblenden. */
body:has(#result:not(.hide)) .fab,   body:has(#result:not(.hide)) .tabbar,
body:has(#capture:not(.hide)) .fab,  body:has(#capture:not(.hide)) .tabbar,
body:has(#manpanel:not(.hide)) .fab, body:has(#manpanel:not(.hide)) .tabbar{display:none}
.meal-actions{padding:6px 0 10px;gap:6px}
.seg.del{flex:0 0 auto;padding:10px 12px;background:rgba(216,144,112,.18);color:var(--rust)}
.trendrow{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:13px}
.trendrow span{flex:0 0 44px}
.trendrow b{flex:0 0 auto;min-width:42px;text-align:right;font-family:var(--disp);font-weight:600}
.trendtrack{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.trendtrack div{height:100%;background:var(--accent)}
.trendtrack div.over{background:var(--amber)}
.trendtrack div.hgreen{background:var(--sage)}
.trendtrack div.hyellow{background:var(--amber)}
.trendtrack div.hred{background:var(--rust)}
.hbadge{font-size:22px;font-weight:600;font-family:var(--disp);padding:2px 14px;border-radius:99px;background:var(--line);color:var(--mut)}
.hbadge.green{background:rgba(156,176,122,.16);color:var(--sage)}
.hbadge.yellow{background:rgba(224,178,89,.18);color:var(--amber)}
.hbadge.red{background:rgba(216,144,112,.18);color:var(--rust)}
.msg{max-width:85%;padding:10px 14px;border-radius:14px;margin:8px 0;font-size:15px;white-space:pre-wrap;line-height:1.5}
.msg.me{background:var(--accent);color:var(--bg);margin-left:auto;border-bottom-right-radius:4px}
.msg.coach{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.spin{animation:vspin 1.1s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.spinicon{width:22px;height:22px;display:inline-block;vertical-align:middle}
.ci-ov{position:fixed;inset:0;background:rgba(13,9,7,.98);z-index:1000;display:flex;
  flex-direction:column;padding:40px 16px 24px;overflow-y:auto}
.ci-warn{background:rgba(224,178,89,.16);color:var(--amber);border-radius:12px;padding:10px 12px;
  font-size:13px;font-weight:600;margin-bottom:6px}
.ci-field{margin:14px 0}
.ci-field .fl{font-weight:600;display:flex;justify-content:space-between;font-size:14px}
.ci-field .fl span{color:var(--mut);font-size:11px;font-weight:600}
.ci-segs{display:flex;gap:8px;margin-top:8px}
.ci-seg{flex:1;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:600;font-size:18px;border-radius:14px;background:var(--line);color:var(--mut);
  border:2px solid var(--line);cursor:pointer}
.ci-seg.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.ci-save{margin-top:14px}
.ci-close{position:absolute;top:10px;right:14px;background:var(--line);color:var(--mut);border:0;
  border-radius:10px;width:38px;height:38px;font-size:18px;cursor:pointer}
.ihint{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--line);color:var(--mut);font-size:11px;font-weight:700;
  border:0;cursor:pointer;margin-left:6px;vertical-align:middle;font-family:var(--body);flex:0 0 auto}
.info-pop{position:fixed;inset:0;z-index:1100;background:rgba(13,9,7,.6);display:flex;
  align-items:flex-end;justify-content:center}
.info-box{background:var(--card);border:1px solid var(--line);border-radius:18px 18px 0 0;
  width:100%;max-width:460px;padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  animation:sheetup .2s ease}
@keyframes sheetup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.info-box h3{margin:0 0 8px;font-size:18px;font-family:var(--disp);font-weight:600}
.info-box p{margin:0 0 14px;color:var(--mut);font-size:14px;line-height:1.5}

/* Tag-Drilldown-Overlay (day-detail.js) */
.dd-ov{position:fixed;inset:0;background:rgba(13,9,7,.75);z-index:1200;display:flex;
  align-items:flex-end;justify-content:center}
.dd-box{background:var(--card);width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  border-radius:18px 18px 0 0;padding:16px 16px 28px;animation:sheetup .2s ease}
.dd-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dd-head b{font-size:18px;font-family:var(--disp);font-weight:600}
.dd-x{background:var(--line);border:none;color:var(--fg);width:32px;height:32px;border-radius:50%;
  font-size:15px;cursor:pointer}
.dd-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.dd-t{font-size:12px;color:var(--mut);font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.dd-big{font-size:30px;font-weight:600;font-family:var(--disp);margin:2px 0 6px}
.dd-row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.dd-row span{color:var(--mut)}
.trendrow.clickable{cursor:pointer;border-radius:8px;transition:background .12s}
.trendrow.clickable:active{background:var(--line)}
.trendrow.clickable::after{content:'›';color:var(--mut);font-weight:700;margin-left:8px;flex:0 0 auto}
.clickcard{cursor:pointer}
.clickcard:active{opacity:.65}
.taphint{font-size:11px;color:var(--mut);margin:0 2px 6px;font-style:italic}

/* Versions-Badge (zum Prüfen der aktuellen App-Version) */
.verbadge{position:fixed;bottom:64px;right:8px;font-size:9px;color:var(--mut);opacity:.5;
  pointer-events:none;z-index:5;letter-spacing:.02em}

/* Sprach-Button (mic.js) — Stimm-Wellenform statt Mikrofon; Ladezustand = drehende Lumen-Raute ◆.
   Farbe via currentColor → erbt die Palette (.micbtn=--fg, .omnimic=--bg). */
.micbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);color:var(--fg);border-radius:10px;
  width:38px;height:38px;margin-left:6px;cursor:pointer;vertical-align:middle}
.micbtn .micglyph,.micbtn .micload{width:18px;height:18px}
.micbtn.rec{border-color:var(--accent);color:var(--accent);animation:micpulse 1s infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Omni-„Sprich einfach": kleiner Knopf OBEN in der Kopfzeile (.mast), nicht mehr schwebend */
.mast-right{display:flex;align-items:center;gap:12px}
.omnimic{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--bg);
  border:0;cursor:pointer}
.omnimic .micglyph,.omnimic .micload{width:19px;height:19px}
.omnimic.rec{animation:micpulse 1s infinite}
/* Glyph ↔ Lade-Raute umschalten */
.micbtn .micload,.omnimic .micload{display:none}
.micbtn.busy .micglyph,.omnimic.busy .micglyph{display:none}
.micbtn.busy .micload,.omnimic.busy .micload{display:block;animation:vspin 1.1s linear infinite}

/* Sprach-Ergebnis-Karte (voice-omni.js): Toast oben (beim Kopfzeilen-Knopf), schließbar */
#omniSummary{position:fixed;left:0;right:0;top:calc(10px + env(safe-area-inset-top));
  display:flex;justify-content:center;z-index:44;pointer-events:none}
.vsum{pointer-events:auto;position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 30px 12px 14px;max-width:300px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.vsum-x{position:absolute;top:5px;right:8px;background:none;border:0;color:var(--mut);
  font-size:20px;line-height:1;cursor:pointer}
.vsum-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.vsum-row:first-child{border-top:0}
.vsum-dot{width:8px;height:8px;border-radius:50%;flex:none}
.vsum-dot.ok{background:var(--accent)}
.vsum-dot.no{background:var(--mut)}

/* App-Start-Splash (4.7.): native Lade-Anmutung, wird von app.js nach dem ersten
   Render (max. 1,5 s) ausgeblendet. Liegt über allem inkl. Tab-Leiste. */
#splash{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:opacity .3s ease}
#splash.done{opacity:0;pointer-events:none}
#splash .wm{font-size:28px}

/* Coach-Eingabezeile (4.7.): sticky im Scroll-Container — steht ab dem ersten Frame
   am unteren Rand, gleitet beim Tab-Wechsel natürlich MIT der Seite (kein Fixed-
   Element mehr, das die Slide-Animation losgelöst herumschiebt). */
#chatbar{position:sticky;bottom:0;display:flex;gap:8px;background:var(--bg);
  padding:10px 0 6px;margin-top:12px}
/* Nachrichtenbereich füllt die Seite (Feinmaß setzt chat.js) → Eingabezeile steht
   vom ersten Frame an unten; sticky greift sonst erst beim Scrollen. */
#msgs{min-height:40vh}
/* Chat: flacher Container-Boden, damit die sticky Eingabezeile direkt über der
   Tab-Leiste steht (Standard-Padding 84px ist für FAB-Seiten gedacht). */
html.appshell .page[data-page="/chat.html"]{padding-bottom:8px;padding-top:0}

/* Diktier-Sheet (5.7., Claude-Stil): grauer Bottom-Sheet, Transkript läuft live hier
   hinein und wird erst mit „Einfügen" ins Feld übernommen. Liegt über Inhalt+Leiste. */
.dictsheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;z-index:200;
  background:var(--card,#26201b);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.45)}
.dicthead{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);
  font-family:var(--disp);letter-spacing:.06em;text-transform:uppercase}
.dictdot{width:9px;height:9px;border-radius:50%;background:var(--rust);
  animation:dictpulse 1.1s ease-in-out infinite}
.dictdot.done{animation:none;background:var(--sage,#7a9a6d)}
@keyframes dictpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.dicttext{min-height:56px;max-height:32vh;overflow-y:auto;margin:10px 2px;
  font-size:17px;line-height:1.5}
.dictrow{display:flex;gap:8px}
.dictrow .btn{margin-top:0}
.dictrow .dict-ok{flex:2}
.dictrow .dict-x{flex:1}

/* Heute-Umbau (17.7.): Status-Pills in der BEFEHL-Zone */
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);
  border-radius:999px;font-size:13px;background:transparent}
.pill .pic{color:var(--mut)}
.pill .plabel{color:var(--mut)}
.pill .pval{font-family:var(--disp);font-weight:600}

.zero-cta{margin-top:6px}

/* Rail-Masthead: nur im Desktop-Rail sichtbar (siehe @media unten). Auf schmalen
   Screens IMMER aus — sonst quetscht er als erstes .tabbar-Kind die 5 Tabs.
   Selektor MUSS `.tabbar a.tabbrand` sein (0,2,1): die schwächere `.tabbrand`
   (0,1,0) verliert sonst gegen `.tabbar a{display:flex}` (0,1,1) → Brand doch sichtbar. */
.tabbar a.tabbrand{display:none}

/* ============================================================================
   DESKTOP-WEB-SHELL (18.7.) — ab 900px wird aus dem iPhone-Shell eine echte
   Web-App: die untere Tab-Leiste wird zur festen linken Nav-Leiste, der Inhalt
   rückt daneben in eine gerahmte Lese-Spalte. ALLES hier ist hinter
   `min-width:900px` UND `html.appshell:not(.hf)` — die mobile PWA und der
   ?handy-Telefonrahmen sehen KEINE dieser Regeln (identisches Verhalten wie bisher).
   Motion/pjax/Gesten (nav.js) bleiben unberührt — nur Layout, keine neue Motion.
   ========================================================================== */
@media (min-width:900px){
  :root{--rail:236px;--web-col:640px}

  /* Inhalts-Spalte: rechts neben der Leiste, in der Restbreite zentriert. */
  html.appshell:not(.hf) .page{
    left:var(--rail);right:0;max-width:var(--web-col);margin:0 auto;
    padding:32px 28px 120px}

  /* --- Linke Nav-Leiste (aus .tabbar) ------------------------------------- */
  html.appshell:not(.hf) .tabbar{
    top:0;bottom:0;left:0;right:auto;width:var(--rail);max-width:none;margin:0;
    flex-direction:column;justify-content:flex-start;gap:2px;
    padding:26px 16px 22px;background:var(--bg);
    border-top:0;border-right:1px solid var(--line);backdrop-filter:none}
  /* Selektor `.tabbar a.tabbrand` (0,4,2) muss `.tabbar a` (0,3,2) im selben
     @media schlagen, sonst erben Farbe/Größe die Item-Styles. */
  html.appshell:not(.hf) .tabbar a.tabbrand{
    display:flex;align-items:center;gap:10px;text-decoration:none;background:none;
    font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:.30em;
    text-indent:.30em;color:var(--fg);padding:6px 12px 4px}
  html.appshell:not(.hf) .tabbar a.tabbrand:hover{background:none;color:var(--fg)}
  html.appshell:not(.hf) .tabbar a.tabbrand i{color:var(--accent);font-style:normal;font-size:11px}
  html.appshell:not(.hf) .tabbar a.tabbrand span{white-space:nowrap;font-size:19px}
  /* Trenner unter dem Masthead — Deco-Hairline, konsistent mit dem Leisten-Rand. */
  html.appshell:not(.hf) .tabbar a:not(.tabbrand):first-of-type{margin-top:20px}

  html.appshell:not(.hf) .tabbar a{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:14px;
    padding:12px 14px;border-radius:12px;font-size:13px;letter-spacing:.10em;
    color:var(--mut);transition:color .15s ease,background .15s ease}
  html.appshell:not(.hf) .tabbar a span{font-size:13px}
  html.appshell:not(.hf) .tabbar svg{width:20px;height:20px;flex:0 0 auto}
  /* Desktop hat echten Hover — dezente Aufhellung, kein neuer Akzent. */
  html.appshell:not(.hf) .tabbar a:not(.active):hover{color:var(--fg);background:var(--card)}
  /* Aktiv = Terracotta-Text/Icon auf ruhigem Karten-Grund (wie chip-selected). */
  html.appshell:not(.hf) .tabbar a.active{color:var(--accent);background:var(--card)}
  html.appshell:not(.hf) .tabbar a.active svg{color:var(--accent)}

  /* --- FAB („Mahlzeit fotografieren") an der Inhalts-Spalte ausrichten,
         nicht am ganzen Viewport (sonst schwebt er über der Nav-Leiste). ---- */
  html.appshell:not(.hf) .fab{
    left:calc(50% + var(--rail)/2);transform:translateX(-50%);
    bottom:28px;max-width:calc(var(--web-col) - 56px);
    width:calc(100vw - var(--rail) - 80px)}

  /* --- Check-in-Gate: das 1–5-Raster zog über die volle Fensterbreite.
         Auf Desktop auf eine zentrierte Spalte begrenzen. -------------------- */
  html.appshell:not(.hf) .ci-ov{align-items:center;padding-top:56px}
  html.appshell:not(.hf) .ci-ov>*{width:100%;max-width:460px;margin-left:auto;margin-right:auto}
  html.appshell:not(.hf) .ci-close{right:max(16px,calc(50% - 250px))}

  /* Die Marke trägt jetzt die Nav-Leiste → die In-Page-Wortmarke (rechts oben im
     .mast) wäre doppelt. Ausblenden; das kursive Datum links bleibt. */
  html.appshell:not(.hf) .mast .wm{display:none}

  /* Versions-Badge aus der Ecke der Nav-Leiste heraushalten. */
  html.appshell:not(.hf) .verbadge{bottom:12px;right:12px}
}

/* Ab 1180px: mehr Luft, die Spalte darf etwas breiter atmen. */
@media (min-width:1180px){
  :root{--web-col:680px}
}

/* Coach: Kopfzeile + Chat-Verlauf-Drawer (persistente Unterhaltungen, 18.7.) */
/* Kopfzeile sticky (26.7.): die Eingabezeile unten war schon sticky, die Kopfzeile mit
   „Neuer Chat" (+) und „Frühere Chats" (☰) nicht — bei langen Unterhaltungen musste man
   erst ganz nach oben scrollen, um einen neuen Chat zu starten. Sie trägt jetzt selbst das
   Safe-Area-Polster, deshalb bekommt der Chat-Container unten padding-top:0 (sonst doppelt). */
.chathead{display:flex;align-items:center;gap:8px;margin:0 0 6px;
  position:sticky;top:0;z-index:5;background:var(--bg);
  padding:max(8px,env(safe-area-inset-top)) 0 8px}
.iconbtn{background:none;border:none;color:var(--fg);font-size:20px;line-height:1;
  cursor:pointer;padding:8px 10px;border-radius:12px}
.iconbtn:active{background:var(--card)}
#convdrawer[hidden]{display:none}
#convback{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
#convpanel{position:fixed;top:0;left:0;bottom:0;width:min(84%,320px);z-index:61;
  background:var(--bg);border-right:1px solid var(--line);
  padding:max(16px,env(safe-area-inset-top)) 16px 20px;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;animation:drawerin .18s ease}
@keyframes drawerin{from{transform:translateX(-100%)}to{transform:none}}
.convhead{display:flex;align-items:center;justify-content:space-between;font-size:17px}
#convlist{display:flex;flex-direction:column;gap:8px}
.convitem{display:flex;align-items:center;gap:8px;padding:12px 12px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);cursor:pointer}
.convitem.active{border-color:var(--accent)}
.convitem .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.convitem .cx{background:none;border:none;color:var(--fg);opacity:.5;font-size:15px;
  cursor:pointer;padding:4px 6px;border-radius:8px}
.convitem .cx:active{opacity:1;background:var(--bg)}
.convempty{opacity:.5;font-size:14px;padding:8px 4px}