/*
 * hj-member App-Schale, Komponenten-Bibliothek (aus infra/design/prototype.html,
 * Design-System infra/DESIGN.md). Nur der Member-Teil (NICHT die Coach-Konsole = Modul D).
 * Redesign V1 (15.10.2026, Bauvertrag design/redesign/V1-UMSETZUNG.md): Mulish selbst gehostet,
 * Farben als Tokens mit Hell- und Dunkelwert, V1-Komponenten am Ende der Datei (Abschnitt REDESIGN V1).
 * Feste Farben nur noch fuer bewusst farbige Dinge (Status, Verlaeufe, weiss auf Farbe).
 */
@font-face { font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/mulish-latin-ext-400-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/mulish-latin-ext-600-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/mulish-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/mulish-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/mulish-latin-400-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/mulish-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/assets/fonts/mulish-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Mulish'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/assets/fonts/mulish-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme:light;
  /* V1 Grundfarben (hell). Alte Namen bleiben, alter Code liest sie weiter. */
  --bg:#F2F4F7; --card:#FFFFFF;
  /* --card2: Felder und weiche Flaechen, eine Spur dunkler als die Karte (Satzanzahl, Historie, Diagramm). */
  --card2:#EEF1F6;
  --line:#E6E9F0; --line-2:#EEF1F5;
  --navy:#10155F; --navy-2:#232a7a; --navy-soft:#3a4290;
  --ink:#1C2033; --muted:#5A6275; --muted-2:#8A91A3;
  --tint:#EDF4FF; --tint-2:#F2F6FF;
  --prim:#10155F; --prim-ink:#FFFFFF;
  /* Leiste (Pille unten bzw. links) */
  --bar:rgba(16,21,95,.86); --bar-solid:#10155F;
  --tab-on:#FFFFFF; --tab-on-ink:#10155F;
  /* Marke: bleibt in beiden Modi Navy (Verlaeufe, dunkle Flaechen mit weisser Schrift). */
  --brand:#10155F; --brand-bg:#10155F; --brand-teal:#15779B;
  --teal:#15779B; --teal-t:#0F6383; --on-teal:#FFFFFF;
  --green:#6FCE78; --green-d:#4fae5c; --green-t:#2B7A37; --green-100:#E7F7E9;
  --amber:#F5A623; --amber-t:#8F5600; --amber-100:#FEF3DF; --amber-ink:#b9791b; --warn-t:#B45309;
  --rose-t:#A3324F; --rose-100:#FCE8EE; --rose-dot:#E0607E;
  --red:#E92020; --red-t:#a51616; --bad-t:#C0392B;
  --ic-acc:url(#hjg-h);
  --shadow:0 10px 30px rgba(16,21,95,.08);
  --shadow-sm:0 4px 14px rgba(16,21,95,.06);
  --shadow-card:0 10px 30px rgba(16,21,95,.06);
  --card-border:1px solid transparent;
  --r:18px; --r-sm:12px;
  --font:'Mulish', system-ui, -apple-system, sans-serif;
}
/* Dunkelmodus: explizit gewaehlt (data-theme) oder automatisch, solange nicht ausdruecklich hell. */
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0B0E26; --card:#151A3D; --card2:#1D2350; --line:#283063; --line-2:#222A57;
  --navy:#ECEEF8; --ink:#ECEEF8; --muted:#A9AFC8; --muted-2:#7C83A3;
  --tint:#222A5C; --tint-2:#1A2049;
  --prim:#9AA2FF; --prim-ink:#0B0E26;
  --bar:rgba(29,35,80,.9); --bar-solid:#1D2350;
  --tab-on:#9AA2FF; --tab-on-ink:#0B0E26;
  --brand-bg:#262D6E;
  --teal:#5BB8DA; --teal-t:#5BB8DA; --on-teal:#0B0E26;
  --green-d:#6FCE78; --green-t:#6FCE78; --green-100:rgba(111,206,120,.16);
  --amber-t:#F5A623; --amber-100:rgba(245,166,35,.16); --amber-ink:#F5B94A; --warn-t:#F5A623;
  --rose-t:#F7A8B8; --rose-100:rgba(247,168,184,.16); --rose-dot:#F7A8B8;
  --red:#FF7070; --red-t:#FF9A9A; --bad-t:#FF8A80;
  --ic-acc:url(#hjg-d);
  --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-sm:none; --shadow-card:none;
  --card-border:1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme:dark;
    --bg:#0B0E26; --card:#151A3D; --card2:#1D2350; --line:#283063; --line-2:#222A57;
    --navy:#ECEEF8; --ink:#ECEEF8; --muted:#A9AFC8; --muted-2:#7C83A3;
    --tint:#222A5C; --tint-2:#1A2049;
    --prim:#9AA2FF; --prim-ink:#0B0E26;
    --bar:rgba(29,35,80,.9); --bar-solid:#1D2350;
    --tab-on:#9AA2FF; --tab-on-ink:#0B0E26;
    --brand-bg:#262D6E;
    --teal:#5BB8DA; --teal-t:#5BB8DA; --on-teal:#0B0E26;
    --green-d:#6FCE78; --green-t:#6FCE78; --green-100:rgba(111,206,120,.16);
    --amber-t:#F5A623; --amber-100:rgba(245,166,35,.16); --amber-ink:#F5B94A; --warn-t:#F5A623;
    --rose-t:#F7A8B8; --rose-100:rgba(247,168,184,.16); --rose-dot:#F7A8B8;
    --red:#FF7070; --red-t:#FF9A9A; --bad-t:#FF8A80;
    --ic-acc:url(#hjg-d);
    --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-sm:none; --shadow-card:none;
    --card-border:1px solid var(--line);
  }
}

html, body { background:var(--bg); }
.hjm-app { font-family:var(--font); color:var(--ink); background:var(--bg); min-height:100vh;
  -webkit-font-smoothing:antialiased; }
.hjm-app *, .hjm-app *::before, .hjm-app *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.hjm-app button { font-family:inherit; }
/* iOS Safari zoomt beim Antippen in jedes Eingabefeld, dessen Schrift kleiner als 16px ist, und
   zoomt danach nicht zurueck. Deshalb: Felder nie unter 16px. Gilt als Grundwert fuer Felder ohne
   eigene Klasse (Safari setzt sonst ~13px); jede Feld-Regel weiter unten haelt sich ebenfalls daran.
   Den Zoom per maximum-scale abzuschalten ist keine Loesung (nimmt Sehschwachen das Vergroessern).
   tests/eingabe-schrift.test.mjs prueft das. */
input, select, textarea { font-size:16px; }

/* App-Rahmen: mobil volle Breite, Tablet breitere Spalte, Desktop Seitenleiste + Inhalt */
.hjm-frame {
  max-width:460px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative;
}

/* Kopfzeile: ruhig auf dem Grund, runde Knoepfe (V1) */
.apphead { position:sticky; top:0; z-index:20; background:var(--bg); padding:12px 20px;
  display:flex; align-items:center; gap:12px; min-height:68px; border-bottom:0; }
.apphead .back { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  display:none; place-items:center; cursor:pointer; color:var(--navy); font-size:18px; flex:none; padding:0; }
.apphead .back.show { display:grid; }
.apphead h2 { font-size:20px; font-weight:800; color:var(--navy); letter-spacing:-.3px; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0; }
.apphead .av { width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg,#62C3DC,#2F3C99);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; cursor:pointer; flex:none; border:0; padding:0; }
.apphead .bell { position:relative; width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--navy); display:grid; place-items:center; cursor:pointer; font-size:17px; flex:none; padding:0; }
.apphead .back .hji, .apphead .bell .hji { width:22px; height:22px; }
.apphead .bell .notif-badge { position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:800; line-height:17px;
  text-align:center; box-shadow:0 0 0 2px var(--bg); }
/* Feed-Zeile: ungelesene fett + Punkt-Markierung rechts. */
.list .li.notif .tx b { font-weight:700; }
.list .li.notif.unread { background:var(--tint-2); }
.list .li.notif .notif-dot { width:9px; height:9px; border-radius:50%; background:var(--red); flex:none; align-self:center; }
/* „Neues"-Banner auf der Startseite: prominenter, antippbarer Hinweis auf neue 1:1-Inhalte.
   V1 ersetzt es durch .v1-hint; die Regel bleibt, solange altes Markup es nutzt. */
.new-banner { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  border:0; border-radius:16px; padding:14px 16px; margin:0 0 12px;
  background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff;
  box-shadow:0 6px 18px rgba(111,206,120,.35); }
.new-banner .nb-ic { font-size:22px; flex:none; }
.new-banner .nb-tx { flex:1; min-width:0; display:flex; flex-direction:column; }
.new-banner .nb-tx b { font-size:15px; font-weight:800; }
.new-banner .nb-tx span { font-size:12px; font-weight:600; opacity:.9; }
.new-banner .nb-chev { font-size:22px; flex:none; }

/* Scroll-Bereich + Screens. Unten Platz fuer die schwebende Leiste (70 hoch + 20 Abstand + Luft). */
.app { flex:1; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth;
  padding-bottom:calc(108px + env(safe-area-inset-bottom)); }
.screen { display:none; padding:8px 20px 30px; animation:hjm-fade .25s ease; }
.screen.active { display:block; }
@keyframes hjm-fade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion: reduce){ .screen{ animation:none; } .app { scroll-behavior:auto; } }

/* Leiste V1 (Handy): schwebende Navy-Pille, unten 20 px, links und rechts 12 px, Hoehe 70, Radius 35.
   Icon und Wort dicht (1 px), der aktive Reiter traegt eine helle Pille um beides. */
.tabbar { position:fixed; z-index:40; left:50%; transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom)); width:min(436px, calc(100% - 24px)); height:70px;
  display:flex; align-items:center; justify-content:space-around; gap:2px; padding:0 6px;
  border-radius:35px; border:0; background:var(--bar);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 14px 30px rgba(16,21,95,.28); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .tabbar { background:var(--bar-solid); } }
.tabbar button { flex:0 1 auto; min-width:52px; min-height:46px; border:0; background:transparent; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 4px 5px; border-radius:20px;
  font-size:10.5px; line-height:13px; font-weight:700; white-space:nowrap; color:rgba(255,255,255,.78); cursor:pointer;
  position:relative; --ic-acc:currentColor; transition:background .18s ease, color .18s ease; }
.tabbar button[hidden] { display:none; }
.tabbar button .ic { width:24px; height:24px; display:grid; place-items:center; font-size:19px; line-height:1; }
.tabbar button .ic .hji, .tabbar button > .hji { width:22px; height:22px; }
.tabbar button .lbl { display:block; }
.tabbar button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* Aktiv: helle Pille, Icon im Akzent (der helle Verlauf, er traegt auch auf der lila Pille im Dunkelmodus). */
.tabbar button.active { background:var(--tab-on); color:var(--tab-on-ink); font-weight:800; --ic-acc:url(#hjg-h); }
.tabbar button .lockdot { position:absolute; top:1px; right:2px; font-size:9px; line-height:1; }
.tabbar button .lockdot .hji { width:12px; height:12px; }
/* „Mein 1:1"/Coaching: roter Punkt bei ungelesenem Neuem. Das Emoji im Markup wird zum Kreis. */
.tabbar button .newdot { top:4px; right:8px; width:9px; height:9px; border-radius:50%; background:var(--red);
  font-size:0; overflow:hidden; box-shadow:0 0 0 2px var(--bar-solid); }
.tabbar button.active .newdot { box-shadow:0 0 0 2px var(--tab-on); }
.tabbar .newdot[hidden] { display:none; }
@media (prefers-reduced-motion: reduce){ .tabbar button { transition:none; } }

/* Karten & Struktur (V1: Radius 24, weicher Schatten; dunkel Rahmen statt Schatten) */
.card { background:var(--card); border:var(--card-border); border-radius:24px; padding:16px; box-shadow:var(--shadow-card); }
.card + .card { margin-top:12px; }
.sec-title { font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.6px;
  margin:22px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
.sec-title a { font-size:12px; color:var(--teal); text-transform:none; letter-spacing:0; cursor:pointer; font-weight:700; }
.muted { color:var(--muted); }
.row { display:flex; align-items:center; gap:12px; }
.between { justify-content:space-between; }

/* Pills / Badges */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:11px;
  font-weight:800; background:var(--tint); color:var(--navy); }
.pill.green { background:var(--green-100); color:var(--green-t); }
.pill.red { background:var(--rose-100); color:var(--rose-t); }
.pill.amber { background:var(--amber-100); color:var(--amber-t); }
.pill.teal { background:rgba(21,119,155,.14); color:var(--teal); }

/* Buttons: Hauptknopf als Pille in --prim */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px; padding:13px 20px;
  border-radius:999px; border:0; background:var(--prim); color:var(--prim-ink); font-weight:800; font-size:15px; cursor:pointer;
  transition:transform .15s, opacity .15s; box-shadow:0 8px 20px rgba(16,21,95,.18); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.green { background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff; box-shadow:0 8px 20px rgba(79,174,92,.3); }
.btn.ghost { background:var(--card); color:var(--navy); border:1.5px solid var(--line); box-shadow:none; }
.btn.teal { background:var(--teal); color:var(--on-teal); box-shadow:0 8px 20px rgba(21,119,155,.25); }
.btn.sm { width:auto; min-height:36px; padding:8px 16px; font-size:13px; border-radius:999px; }
.btn .hji { width:20px; height:20px; }

/* Tiles */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* Einspaltig, wenn die zweite Kachel ausgeblendet ist (z. B. Nachmessen ohne laufenden Plan). */
.grid2.one { grid-template-columns:1fr; }
.tile { border-radius:22px; padding:16px; cursor:pointer; position:relative; overflow:hidden; min-height:104px;
  display:flex; flex-direction:column; justify-content:space-between; gap:10px; transition:transform .15s; border:var(--card-border);
  background:var(--card); box-shadow:var(--shadow-card); text-align:left; color:var(--ink); }
.tile:active { transform:scale(.98); }
/* Icon-Feld der Kachel: frueher Emoji mit Schriftgroesse, jetzt traegt es ein svg.hji. */
.tile .ic { font-size:24px; line-height:1; }
.tile .ic .hji, .tile > .hji { width:26px; height:26px; }
.tile .t { font-weight:800; font-size:14.5px; color:var(--navy); line-height:1.2; }
.tile .s { font-size:12px; color:var(--muted); font-weight:600; }
.tile.nav { background:linear-gradient(150deg,var(--brand),var(--navy-2)); border:0; }
.tile.nav .t, .tile.nav .s { color:#fff; } .tile.nav .s { color:rgba(255,255,255,.7); }
.tile.grn { background:linear-gradient(150deg,var(--green),var(--green-d)); border:0; }
.tile.grn .t, .tile.grn .s { color:#fff; } .tile.grn .s { color:rgba(255,255,255,.85); }
.tile.teal { background:linear-gradient(150deg,var(--brand-teal),#0f5a77); border:0; }
.tile.teal .t, .tile.teal .s { color:#fff; } .tile.teal .s { color:rgba(255,255,255,.8); }
.tile.nav, .tile.grn, .tile.teal { --ic-acc:currentColor; color:#fff; }
.tile .lockcorner { position:absolute; top:10px; right:12px; font-size:15px; opacity:.9; }
.tile .lockcorner .hji { width:16px; height:16px; }
/* Breite Home-Karten (Daily Check, Stressmaster) tragen das Schloss wie die Kacheln. */
.card > .lockcorner { position:absolute; top:8px; right:12px; font-size:14px; opacity:.9; }

/* Listen */
.list .li { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2);
  cursor:pointer; text-align:left; width:100%; background:none; border-left:0; border-right:0; border-top:0; }
.list .li:last-child { border-bottom:0; }
.li .ic { width:42px; height:42px; border-radius:12px; background:var(--tint); display:grid; place-items:center;
  font-size:20px; flex:none; color:var(--navy); }
/* Produktbild statt Emoji (Supplement-Plan): gleiche Kachelmaße, Motiv formatfüllend. */
.li img.ic { object-fit:cover; display:block; }
.li .tx { flex:1; min-width:0; }
.li .tx b { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.li .tx span { font-size:12px; color:var(--muted); font-weight:600; }
.li .chev { color:var(--muted-2); font-size:18px; }

/* Fortschritt / Ring / Thumb */
.progress { height:8px; border-radius:99px; background:var(--line); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-d)); }
.thumb { aspect-ratio:16/9; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-teal));
  display:grid; place-items:center; color:#fff; position:relative; overflow:hidden; }
.thumb .play { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.9); display:grid;
  place-items:center; color:var(--navy); font-size:18px; padding-left:3px; }
.thumb .dur { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px;
  font-weight:700; padding:2px 7px; border-radius:6px; }
/* Kurs-Detail: Lektion + eingebetteter Vimeo-Player (responsiv 16:9). */
.lesson { margin:0 0 22px; }
.lesson-h { display:flex; align-items:center; gap:10px; margin:0 2px 8px; }
.lesson-n { flex:none; width:24px; height:24px; border-radius:50%; background:var(--prim); color:var(--prim-ink);
  font-size:13px; font-weight:800; display:grid; place-items:center; }
.lesson-h b { color:var(--navy); font-size:15px; font-weight:800; }
.lesson-dur { margin-left:auto; flex:none; font-size:12px; font-weight:700; }
/* Kapitel-Ueberschrift (Tutor-„Topic") ueber einer Lektionsgruppe. */
.lesson-sec { color:var(--navy); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  margin:6px 2px 12px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.08); }
.lesson-body { font-size:13px; }
.lesson-body p { margin:0 0 8px; }
.course-desc p { margin:0 0 10px; }
.course-desc :where(ul,ol) { margin:0 0 10px 18px; }
.vwrap { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--brand-bg); }
.vwrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ring { --p:62; width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--green) calc(var(--p)*1%), rgba(255,255,255,.25) 0); display:grid; place-items:center; margin:0 auto; }
.ring .inner { width:96px; height:96px; border-radius:50%; background:var(--brand-bg); display:grid; place-items:center;
  text-align:center; color:#fff; }
.ring .inner b { font-size:28px; font-weight:900; line-height:1; }
.ring .inner span { font-size:11px; opacity:.8; font-weight:700; }

/* Banner */
.banner { border-radius:var(--r); padding:18px; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-teal));
  box-shadow:var(--shadow); position:relative; overflow:hidden; }
.banner h3 { font-size:17px; font-weight:800; margin:0 0 5px; }
.banner p { font-size:12.5px; opacity:.9; line-height:1.5; margin:0 0 12px; }
.banner p:last-child { margin-bottom:0; }

/* Chat / Composer */
.chat { display:flex; flex-direction:column; gap:10px; padding:6px 2px; }
.bub { max-width:80%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; font-weight:500; }
.bub.them { background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; color:var(--ink); }
.bub.me { background:var(--prim); color:var(--prim-ink); border-bottom-right-radius:5px; align-self:flex-end; }
.bub.ai { background:linear-gradient(135deg,var(--tint),var(--card)); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px; }
.bub small { display:block; font-size:10px; opacity:.6; margin-top:3px; font-weight:700; }
.composer { display:flex; gap:8px; padding:10px 0 2px; align-items:center; }
.composer input { flex:1; border:1px solid var(--line); border-radius:999px; padding:12px 16px; font-size:16px; background:var(--card); }
.composer input:focus { outline:2px solid var(--teal); }
.composer .send { width:44px; height:44px; border-radius:50%; background:var(--prim); color:var(--prim-ink); border:0; font-size:18px; cursor:pointer; flex:none; }

/* Felder */
.field { margin-bottom:13px; }
.field label { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:16px; background:var(--card); color:var(--ink); font-family:inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--teal); }

/* Stat / Alert / Spark / Check / Rate / Toggle / Steps / Subnav */
.stat { background:var(--tint-2); border-radius:14px; padding:13px; text-align:center; }
.stat b { display:block; font-size:22px; font-weight:900; color:var(--navy); line-height:1; }
.stat span { font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.alert { border-radius:14px; padding:13px 14px; font-size:12.5px; font-weight:600; line-height:1.5; display:flex; gap:10px; align-items:flex-start; }
.alert.red { background:rgba(233,32,32,.08); border:1px solid rgba(233,32,32,.25); color:var(--red-t); }
.alert.green { background:rgba(111,206,120,.12); border:1px solid rgba(111,206,120,.35); color:var(--green-d); }
.alert.info { background:var(--tint-2); border:1px solid var(--line); color:var(--muted); }
.alert .i { font-size:16px; flex:none; }
.spark { width:100%; height:70px; display:block; }
/* Diagrammfeld des Uebungsverlaufs auf --card2 wie im Trainingsprototyp (`.chart`). */
.card.fx-chart { background:var(--card2); box-shadow:none; border:0; border-radius:14px; }
/* Rezept-Filter: horizontal scrollbare Chip-Leiste (haeufigste Tags + „Alle"). */
.recipe-filters { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; -webkit-overflow-scrolling:touch; }
.recipe-filters::-webkit-scrollbar { display:none; }
.recipe-filters { scrollbar-width:none; }
.rfilter { flex:none; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  color:var(--navy); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.rfilter.on { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.check { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.check:last-child { border-bottom:0; }
.check .box { width:24px; height:24px; border-radius:8px; border:2px solid var(--line); flex:none; display:grid;
  place-items:center; cursor:pointer; color:#fff; font-size:13px; background:none; }
.check.done .box { background:var(--green); border-color:var(--green); }
.check.done .lbl { text-decoration:line-through; color:var(--muted); }
.check .lbl { font-size:14px; font-weight:700; flex:1; }
.rate { display:flex; gap:7px; }
.rate button { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--card); font-weight:800; color:var(--muted); cursor:pointer; }
.rate button.on { background:var(--green); border-color:var(--green); color:#fff; }
.tog { width:44px; height:26px; border-radius:99px; background:var(--line); position:relative; cursor:pointer; flex:none; transition:.2s; border:0; }
.tog::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s; }
.tog.on { background:var(--green); } .tog.on::after { left:21px; }
.steps { display:flex; gap:6px; margin-bottom:14px; }
.steps i { flex:1; height:5px; border-radius:99px; background:var(--line); }
.steps i.on { background:var(--navy); }
.subnav { display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; margin:0 -2px; }
.subnav::-webkit-scrollbar { height:0; }
.subnav button { flex:none; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 15px; font-weight:800; font-size:13px; color:var(--muted); cursor:pointer; white-space:nowrap; }
.subnav button.on { background:var(--prim); color:var(--prim-ink); border-color:var(--prim); }
.copanel { display:none; } .copanel.active { display:block; animation:hjm-fade .2s; }

/* Skeleton (Loading) — DESIGN.md §6 */
.skel { height:16px; border-radius:8px; margin:8px 0; background:linear-gradient(90deg,var(--line-2),var(--tint-2),var(--line-2));
  background-size:200% 100%; animation:hjm-shimmer 1.2s infinite; }
@keyframes hjm-shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }

/* ---- Auth-Gating: Login nur bei "in", App-Rahmen nur bei "ok" (loading = neutral) ---- */
.hjm-login { display:none; }
.hjm-frame { display:none; }
.hjm-app[data-auth="in"] .hjm-login { display:flex; }
.hjm-app[data-auth="ok"] .hjm-frame { display:flex; }
.hjm-login { max-width:400px; margin:0 auto; padding:40px 20px; flex-direction:column; gap:14px; }
.hjm-login .brand { display:flex; align-items:center; gap:11px; margin-bottom:8px; }
.hjm-login .logo { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-teal));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px; box-shadow:var(--shadow-sm); }
.hjm-login .brand h1 { font-size:21px; color:var(--navy); font-weight:800; margin:0; }

/* Marken-Kopf der Sidebar: nur im Desktop-Layout sichtbar (siehe @media unten). */
.side-brand { display:none; }

/* ---------- Tablet (600 bis 899px): breitere Inhaltsspalte, weiterhin die Pille unten ----------
 * Schliesst die Luecke zwischen Handy-Spalte (<600px) und Desktop-Sidebar (>=900px):
 * auf dem Tablet fuellt die Spalte den Schirm statt schmaler 460px-Spalte mit Leerraum. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hjm-frame { max-width:720px; }
  .hjm-login { max-width:460px; }
  .apphead { padding:14px 32px; min-height:72px; }
  .apphead h2 { font-size:21px; }
  .screen { padding:16px 32px 48px; }
  .grid2 { gap:16px; }
  .tile { min-height:118px; padding:18px; }
  .tile .ic { font-size:25px; }
  .sec-title { margin-top:22px; }
  /* Pille breiter, aber nicht ueber die ganze Tabletbreite: die Reiter bleiben beieinander. */
  .tabbar { width:min(560px, calc(100% - 48px)); }
}

/* ---------- Desktop-Layout (>=900px): Seitenleiste + Inhaltsflaeche ----------
 * Dieselbe Navy-Pille steht hochkant links und schwebt (oben, links, unten 16 px, Breite 104),
 * oben das weisse Quadrat „HJ", unter jedem Icon sein Wort. Der App-Rahmen ist ein Grid
 * [Leiste | Kopf] / [Leiste | Inhalt]; die Leiste klebt beim Scrollen. */
@media (min-width: 900px) {
  /* Login vertikal zentriert */
  .hjm-login { justify-content:center; min-height:100vh; max-width:420px; }

  /* App-Rahmen -> Grid: [Leiste | Kopf] / [Leiste | Inhalt].
   * Selektor matcht die Auth-Regel (.hjm-app[data-auth="ok"] .hjm-frame{display:flex}),
   * sonst gewinnt deren höhere Spezifität und display:grid greift nicht. */
  .hjm-app[data-auth="ok"] .hjm-frame {
    max-width:none; width:100%; min-height:100vh; box-shadow:none; background:var(--bg);
    display:grid;
    grid-template-columns:136px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"side head" "side main";
  }

  /* Pille hochkant links */
  .tabbar {
    grid-area:side; position:sticky; top:16px; left:auto; bottom:auto; transform:none; align-self:start;
    width:104px; height:calc(100vh - 32px); margin:16px 0 16px 16px;
    flex-direction:column; justify-content:flex-start; align-items:center; gap:6px; padding:16px 0;
    border-radius:36px; overflow-y:auto; scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar { display:none; }
  .side-brand { display:grid; place-items:center; flex:none; margin:2px 0 14px; }
  .side-brand .logo { width:52px; height:52px; border-radius:16px; background:#fff; color:var(--brand);
    font-weight:900; font-size:17px; letter-spacing:-.3px; display:grid; place-items:center;
    box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .side-brand span { display:none; }
  .tabbar button {
    flex:none; width:84px; min-height:58px; padding:8px 4px 7px; border-radius:22px; gap:3px;
    font-size:11px; line-height:14px; white-space:normal; text-align:center;
  }
  .tabbar button .ic { width:26px; height:26px; font-size:21px; }
  .tabbar button .ic .hji, .tabbar button > .hji { width:24px; height:24px; }
  .tabbar button:hover:not(.active) { background:rgba(255,255,255,.1); color:#fff; }
  .tabbar button .lockdot { top:4px; right:10px; }
  .tabbar button .newdot { top:7px; right:16px; }

  /* Kopfzeile über dem Inhalt (Seitentitel + Account), ruhig auf dem Grund */
  .apphead { grid-area:head; padding:16px 40px; min-height:78px; background:var(--bg); border-bottom:0; }
  .apphead h2 { font-size:24px; }
  .apphead .back, .apphead .bell, .apphead .av { width:46px; height:46px; }

  /* Inhalts-Spalte: zentriert, bis etwa 1240 px breit; die Leiste verdeckt hier nichts mehr */
  .app { grid-area:main; padding-bottom:0; }
  .screen { max-width:1240px; margin:0 auto; padding:24px 40px 60px; }
  .grid2 { gap:16px; }
  .tile { min-height:120px; padding:18px; }
  .tile .ic { font-size:26px; }
  .tile .t { font-size:15px; }
  .sec-title { margin-top:26px; }
}

/* Lexikon-Akkordeon: Begriff (.li) + aufklappbarer HTML-Inhalt (.lex-body). */
.lex-item { border-bottom:1px solid var(--line, #eef0f4); }
.lex-item:last-child { border-bottom:0; }
.lex-item .li.open .chev { transform:rotate(90deg); }
.lex-item .li .chev { transition:transform .15s ease; }
.lex-body { font-size:14px; line-height:1.5; }
.lex-body > :first-child { margin-top:0; }
.lex-body > :last-child { margin-bottom:0; }
.lex-body img { max-width:100%; height:auto; }

/* ---------- Onboarding-Ausbau: Gate-Views, Formulare, Toggle, Legal, Lesezeichen, Dialog ---------- */

/* Login-/Registrier-/Pending-Umschaltung im Auth-Gate */
.hjm-login .gate-view { display:none; flex-direction:column; gap:14px; width:100%; }
.hjm-login[data-mode="login"]    .gate-view[data-view="login"],
.hjm-login[data-mode="register"] .gate-view[data-view="register"],
.hjm-login[data-mode="pending"]  .gate-view[data-view="pending"],
.hjm-login[data-mode="forgot"]   .gate-view[data-view="forgot"],
.hjm-login[data-mode="reset"]    .gate-view[data-view="reset"] { display:flex; }
.gate-link { color:var(--teal); font-weight:800; text-decoration:none; }
.gate-link:hover { text-decoration:underline; }

/* Zwei-Spalten-Feldzeile in Formularen */
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.row2 .field { margin-bottom:13px; }

/* Inline-Zustimmungs-Checkbox (AGB/Datenschutz) */
.term-check { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--muted);
  font-weight:600; line-height:1.45; margin:2px 0 13px; }
.term-check input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--green); }
.term-check a { color:var(--teal); font-weight:800; text-decoration:none; }
.term-check a:hover { text-decoration:underline; }

/* An/Aus-Schalter (Newsletter) */
.switch { position:relative; width:46px; height:27px; border-radius:999px; border:0; flex:none;
  background:var(--line); cursor:pointer; transition:background .18s ease; padding:0; }
.switch .knob { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(16,21,95,.25); transition:transform .18s ease; }
.switch[aria-checked="true"] { background:var(--green); }
.switch[aria-checked="true"] .knob { transform:translateX(19px); }
.switch:disabled { opacity:.5; cursor:default; }

/* Rechtstext-Reader */
.legal-doc .card { line-height:1.6; font-size:14px; color:var(--ink); }
.legal-doc h1, .legal-doc h2, .legal-doc h3 { color:var(--navy); margin:16px 0 8px; line-height:1.3; }
.legal-doc h1 { font-size:19px; } .legal-doc h2 { font-size:16px; } .legal-doc h3 { font-size:14px; }
.legal-doc p { margin:0 0 10px; } .legal-doc ul, .legal-doc ol { margin:0 0 10px 18px; }
.legal-doc a { color:var(--teal); }
.legal-meta { font-size:11px; color:var(--muted-2); font-weight:700; margin-top:14px; }

/* Lesezeichen-Button in Listenzeilen */
.li .bm { flex:none; border:0; background:none; cursor:pointer; font-size:19px; line-height:1;
  color:var(--muted-2); padding:4px; border-radius:8px; }
.li .bm.on { color:var(--amber); }
.li .bm:hover { background:var(--tint-2); }
/* 1:1-Videos: Zeile wie bei den Dateien, der eingebettete Player klappt beim Klick auf.
   Die Trennlinie sitzt am Aufklapp-Element, damit sie unter dem Player steht, nicht darueber. */
.vid-item { border-bottom:1px solid var(--line-2); }
.vid-item:last-child { border-bottom:0; }
.vid-item .li { border-bottom:0; }
.vid-item .li .chev { transition:transform .15s ease; }
.vid-item .li.open .chev { transform:rotate(90deg); }
.vid-body { padding:0 0 13px; }

/* Bestätigungs-Dialog ("Bist du sicher?") */
.hjm-modal { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(16,21,95,.45); padding:24px; }
.hjm-modal[hidden] { display:none; }
.hjm-modal .box { background:var(--card); border-radius:var(--r); padding:22px; max-width:340px; width:100%;
  box-shadow:var(--shadow); text-align:center; }
.hjm-modal h4 { color:var(--navy); font-size:17px; margin:0 0 8px; }
.hjm-modal p { color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.hjm-modal .actions { display:flex; gap:10px; }
.hjm-modal .actions .btn { padding:12px; }
/* Blatt „Training beenden?" (Prototyp `blattBeenden`): zwei Wege als Optionen mit Begruendung. */
.hjm-modal .fx-beenden { text-align:left; }
.fx-opt { display:block; width:100%; text-align:left; background:var(--card, #fff); border:1.5px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-top:10px; cursor:pointer; min-height:44px; font:inherit; }
.fx-opt b { display:block; color:var(--navy); font-size:15px; }
.fx-opt span { display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:3px; }
.fx-opt.on { border-color:var(--teal); }
.field textarea { resize:vertical; min-height:44px; font-family:inherit; }

/* ---------- Coaching-Feedback (Sternebewertung) ---------- */
.fb-stars { display:flex; gap:6px; justify-content:center; }
.fb-star { background:none; border:0; cursor:pointer; font-size:34px; line-height:1; padding:2px 4px;
  color:var(--line); transition:color .12s, transform .08s; }
.fb-star.on { color:#f6b83a; }
.fb-star:active { transform:scale(.9); }

/* ---------- DNAnalyzer (Gene) ---------- */
/* Punkt je Gen: Farbfamilie der Funktionskategorie aus der Wissensdatenbank, KEINE Ampel.
   Grün = normale Basis · Blau/Indigo = höhere Aktivität (neutral, kein Mangel) ·
   Gelb → Orange → Rot = zunehmend geringere Aktivität · Dunkelrot = Enzym fehlt ·
   Violett = veränderte Regulation · Grau = nicht bestimmbar/nicht getestet. */
.dna-dot { width:12px; height:12px; border-radius:50%; flex:none; background:var(--muted-2); box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.dna-dot.green { background:#4CAF6D; }
.dna-dot.blue { background:#3B82C4; }
.dna-dot.indigo { background:#3A56A8; }
.dna-dot.violet { background:#8E5BC4; }
.dna-dot.yellow { background:#E7C34A; }
.dna-dot.orange { background:#E28A3C; }
.dna-dot.red { background:#D9534F; }
/* „fehlt" ist konzeptionell etwas anderes als „langsam" → eigener Ring als zweites Signal. */
.dna-dot.darkred { background:#B03030; box-shadow:0 0 0 3px rgba(176,48,48,.18); }
.dna-dot.grey, .dna-dot.untested, .dna-dot.unresolved, .dna-dot.locked { background:var(--muted-2); }
/* Gesperrt (Freigabe_Stufe ungleich frei): Ring statt Fuellung, damit die Sperre nicht wie
   ein Befund aussieht. */
.dna-dot.locked { background:transparent; border:2px solid var(--muted-2); box-sizing:border-box; }
.dna-dot.unresolved { box-shadow:0 0 0 3px rgba(0,0,0,.04); opacity:.75; }
/* Legende unter der Genliste. */
.dna-legend { display:flex; flex-wrap:wrap; gap:10px 16px; padding:12px 4px 2px; }
.dna-legend span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
/* Funktionsabzeichen auf der Detailseite („arbeitet langsam"), Farbe wie der Punkt. */
.dna-badge { display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff; background:var(--muted-2); }
.dna-badge.green { background:#4CAF6D; }
.dna-badge.blue { background:#3B82C4; }
.dna-badge.indigo { background:#3A56A8; }
.dna-badge.violet { background:#8E5BC4; }
.dna-badge.yellow { background:#E7C34A; color:#3a2f00; }
.dna-badge.orange { background:#E28A3C; }
.dna-badge.red { background:#D9534F; }
.dna-badge.darkred { background:#B03030; }
.dna-badge.grey { background:var(--muted-2); color:var(--ink); }
/* Kopf der Detailseite: Gen-Name + Kategorie + Status-Pill. */
.dna-head { border-radius:var(--r); padding:18px; color:#fff; margin-bottom:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-teal)); box-shadow:var(--shadow); }
.dna-head h3 { font-size:20px; font-weight:800; margin:0 0 4px; }
.dna-head .dna-cat { font-size:12.5px; opacity:.9; font-weight:600; }
.dna-head .dna-status { display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800; }
/* Karten-Block je Auswirkung/Symptom/Empfehlung im Tab-Panel. */
.dna-block { padding:13px 0; border-bottom:1px solid var(--line-2); }
.dna-block:last-child { border-bottom:0; }
.dna-block h4 { color:var(--navy); font-size:14px; font-weight:800; margin:0 0 4px; }
.dna-block p { font-size:13px; line-height:1.5; margin:0 0 6px; color:var(--ink); }
.dna-block p:last-child { margin-bottom:0; }
.dna-block .dna-meta { font-size:12px; color:var(--muted); font-weight:600; }
.dna-empty { font-size:13px; color:var(--muted); font-weight:600; padding:10px 2px; }

/* ===== DNAnalyzer: Abdeckung + die drei weiteren Bereiche =====
   Leitregel (Design-Regeln der Enzym-Seiten, von Fabio abgenommen 01.09.2026): jede Liste zeigt
   zugeklappt EINE Zeile, offen bleibt oben nur die Kernaussage. Titel werden ausgeschrieben,
   nie abgeschnitten; die Kategorie steht als kleines Etikett daneben. */

/* Farbfamilie wie im Prototyp (gruen/blau/gelb/orange/rot/grau) - bewusst dieselben Woerter,
   damit Modul, Prototyp und App nicht drei Vokabulare fuehren. */
.dna-chip { display:inline-flex; align-items:center; gap:4px; flex:none; padding:3px 9px;
  border-radius:999px; font-size:11px; font-weight:800; color:#fff; background:var(--muted-2); }
.dna-chip.gruen { background:#4CAF6D; }
.dna-chip.blau { background:#3B82C4; }
.dna-chip.gelb { background:#E7C34A; color:#3a2f00; }
.dna-chip.orange { background:#E28A3C; }
.dna-chip.rot { background:#B03030; }
.dna-chip.grau { background:var(--muted-2); }
/* Sperren sind sichtbar, nicht unsichtbar: eigenes Aussehen, damit sie nicht wie ein Status wirkt. */
.dna-chip.lock { background:var(--card); color:var(--navy); border:1.5px solid var(--line); }
.dna-chip.lock svg { flex:none; }

/* Aufklapper. Der Kopf ist die zugeklappte Zeile und traegt Icon, vollen Titel, Etikett. */
.dna-acc { border-bottom:1px solid var(--line-2); }
.dna-acc:last-child { border-bottom:0; }
.dna-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:13px 2px; }
.dna-acc > summary::-webkit-details-marker { display:none; }
.dna-acc > summary::after { content:'\203A'; margin-left:auto; color:var(--muted-2); font-size:20px;
  line-height:1; transform:rotate(90deg); transition:transform .15s ease; flex:none; }
.dna-acc[open] > summary::after { transform:rotate(-90deg); }
.dna-acc > summary .tx { min-width:0; flex:1 1 auto; }
/* Titel ausgeschrieben, nie abgeschnitten (Design-Regel 2). */
.dna-acc > summary .tx b { display:block; font-size:13.5px; font-weight:800; color:var(--navy);
  line-height:1.35; white-space:normal; overflow:visible; text-overflow:clip; }
.dna-acc > summary .tx span { display:block; font-size:12px; color:var(--muted); font-weight:600; }
.dna-acc-body { padding:2px 2px 14px; }
.dna-acc-body > *:first-child { margin-top:0; }
.dna-acc-body .btn { margin-top:10px; }
/* In den Bereichslisten uebernehmen die Aufklapper die Rolle der `.li`-Zeilen. */
.dna-list { padding:2px 14px; }

/* Icon-Kachel je Zeile (Design-Regel 3: jede Zeile hat ein Icon). */
.ic.dna-ic { display:grid; place-items:center; background:var(--tint-2); color:var(--navy); }
.ic.dna-ic.gruen { background:rgba(76,175,109,.14); color:#317a4a; }
.ic.dna-ic.blau { background:rgba(59,130,196,.14); color:#2a5f92; }
.ic.dna-ic.gelb { background:rgba(231,195,74,.20); color:#8a6d00; }
.ic.dna-ic.orange { background:rgba(226,138,60,.16); color:#a25a17; }
.ic.dna-ic.rot { background:rgba(176,48,48,.14); color:#8d2626; }
.ic.dna-ic.grau { background:var(--line-2); color:var(--muted); }
.dna-ico { display:block; }

/* Zahl + Schloss auf den Bereichs-Kacheln. */
.dna-count { display:inline-flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
.dna-count .n { font-size:13px; font-weight:800; color:var(--navy); }

/* Kernaussage oben im geoeffneten Aufklapper. */
.dna-key { padding:8px 0 6px; }
.dna-key b { display:block; font-size:15px; font-weight:800; color:var(--navy); line-height:1.3; }
.dna-key span { display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px; }
.dna-key .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; }

/* Zahlenzeile: Fakten, keine Deutung. */
.dna-facts { display:flex; flex-wrap:wrap; gap:8px 18px; padding:8px 0; }
.dna-facts span { font-size:13px; font-weight:800; color:var(--navy); }
.dna-facts i { display:block; font-style:normal; font-size:11px; font-weight:700; color:var(--muted); }

/* Benannter Absatz im Aufklapper. Der Text steht buendig unter seiner Ueberschrift
   (Design-Regel 7): kein geerbter Einzug. */
.dna-feld { padding:8px 0 2px; }
.dna-feld > b { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:2px; }
.dna-feld > p { margin:0; padding-left:0; font-size:13px; line-height:1.5; color:var(--ink); }
.dna-eyebrow { font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:4px; }

/* Quellmarke: woher der Text bzw. die Zahl kommt. */
.dna-src { font-size:11px; font-weight:700; color:var(--muted-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:4px 0 2px; word-break:break-word; }

/* Sichtbare Luecke. Kein Ersatztext, keine leere Karte: was das Modul nicht hergibt, wird benannt. */
.dna-gap { display:flex; gap:9px; align-items:flex-start; border-radius:12px; padding:10px 12px;
  margin:8px 0; background:var(--tint-2); border:1px dashed var(--line);
  font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.dna-gap b { color:var(--navy); }
.dna-gap .i { flex:none; }
.dna-gap .dna-src { margin:2px 0 0; }
/* A12: Hinweis ueber dem Kachelraster, wie viele Auswirkungen ausgeblendet sind. */
.dna-note { font-size:13px; color:var(--muted); margin:0 0 10px; }

/* Erklaerte Sperre. Gesperrtes wird gezeigt und begruendet, nicht weggelassen. */
.dna-lockcard { border-radius:var(--r); padding:14px; background:var(--card); border:1.5px solid var(--line);
  box-shadow:var(--shadow-sm); margin:10px 0; }
.dna-lockcard .ttl { display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:800;
  color:var(--navy); margin-bottom:6px; }
.dna-lockcard p { font-size:13px; line-height:1.5; margin:0 0 6px; color:var(--ink); }

/* Skala der Veranlagung. Die Position kommt aus dem Modul (ANF_KRANKHEIT.Schwellen),
   nicht aus einer Rechnung im Frontend. */
.dna-scale { padding:8px 0 4px; }
.dna-scale .bar { position:relative; height:8px; border-radius:999px;
  background:linear-gradient(90deg,rgba(76,175,109,.35),var(--line),rgba(226,138,60,.45)); }
.dna-scale .mark { position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--muted-2); border:3px solid var(--card);
  box-shadow:0 2px 6px rgba(16,21,95,.25); }
.dna-scale .mark.gruen { background:#4CAF6D; }
.dna-scale .mark.blau { background:#3B82C4; }
.dna-scale .mark.gelb { background:#E7C34A; }
.dna-scale .mark.orange { background:#E28A3C; }
.dna-scale .mark.rot { background:#B03030; }
.dna-scale .lbl { display:flex; justify-content:space-between; margin-top:8px;
  font-size:11px; font-weight:700; color:var(--muted); }

/* Abdeckung der Datei (Befund C9): steht vor den Ergebnissen. */
.dna-cov { margin-top:12px; padding:2px 14px; }
.dna-cov > .dna-acc > summary { gap:10px; flex-wrap:wrap; }
.dna-cov > .dna-acc > summary b { font-size:13.5px; font-weight:800; color:var(--navy); }
.dna-cov .dna-sub { flex-basis:100%; font-size:12px; color:var(--muted); font-weight:600; }
.dna-cov-area { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 0 3px; border-top:1px solid var(--line-2); }
.dna-cov-area b { font-size:12.5px; font-weight:800; color:var(--navy); }
.dna-cov-area span { font-size:12px; font-weight:700; color:var(--muted); }
.dna-cov-list { padding-bottom:4px; }
.dna-cov-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12px;
  font-weight:600; color:var(--muted); }
.dna-cov-row .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--navy);
  font-weight:700; }
.dna-cov-expl { padding:10px 0 2px; border-top:1px solid var(--line-2); }
.dna-cov-expl p { font-size:12.5px; line-height:1.5; margin:6px 0 0; color:var(--ink); }

/* Zwei-Spalten-Zeile (Phaenotypen: Name + Regel). */
.dna-var { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line-2); }
.dna-var .lbl { min-width:0; flex:1; }
.dna-var .a { font-size:13px; font-weight:800; color:var(--navy); }
.dna-var .b { font-size:12px; font-weight:600; color:var(--muted); line-height:1.4; }

/* Warnhinweis in Bernstein: fuer Saetze, die eine Grenze ziehen (Disclaimer, offene Stellen). */
.alert.amber { background:rgba(245,166,35,.10); border:1px solid rgba(245,166,35,.35); color:var(--amber-t); }

/* ===== Enzym-Genseite 1:1 zum Prototyp (SPEC A1/A5/A6/A8, Design-Regeln 1-9) ===== */
/* Abschnittsueberschrift in den Reitern. */
.dna-sec { font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin:18px 0 8px; }
.dna-sec:first-child { margin-top:4px; }

/* A8: Aktivitaetsachse der Uebersicht. Stufen aus f.achse, die Position markiert die API. */
.dna-axis { display:flex; gap:4px; margin:6px 0 4px; }
.dna-axis-seg { flex:1; text-align:center; padding:9px 4px; border-radius:10px; background:var(--tint-2);
  font-size:10.5px; font-weight:800; line-height:1.2; color:var(--muted); }
.dna-axis-seg.on { color:#fff; }
.dna-axis-seg.on.green { background:#4CAF6D; } .dna-axis-seg.on.blue { background:#3B82C4; }
.dna-axis-seg.on.indigo { background:#3A56A8; } .dna-axis-seg.on.violet { background:#8E5BC4; }
.dna-axis-seg.on.yellow { background:#E7C34A; color:#3a2f00; } .dna-axis-seg.on.orange { background:#E28A3C; }
.dna-axis-seg.on.red { background:#D9534F; } .dna-axis-seg.on.darkred { background:#B03030; }
.dna-axis-seg.on.grey { background:var(--muted-2); }
.dna-axis-note { font-size:12px; color:var(--muted); font-weight:600; margin:2px 0 8px; }

/* A8: Kategorie-Chips „Was du tun kannst" -> Sprung in den Empfehlungsreiter. */
.dna-chiprow { display:flex; flex-wrap:wrap; gap:8px; }
.dna-catchip { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line);
  background:var(--card); border-radius:999px; padding:7px 12px; font-size:12.5px; font-weight:800;
  color:var(--navy); cursor:pointer; }
.dna-catchip .ic { color:var(--navy); }
.dna-catchip .n { background:var(--tint); border-radius:999px; padding:0 7px; font-size:11px; color:var(--muted); }

/* Empfehlungen (A1/A5): je Kategorie eine Karte mit Aufklappern; nur die Dosierung ist gesperrt. */
.dna-catcard { border:1px solid var(--line); border-radius:var(--r); padding:2px 12px 4px; margin:0 0 12px;
  background:var(--card); box-shadow:var(--shadow-sm); }
.dna-catcard-hd { display:flex; align-items:center; gap:10px; padding:11px 2px 8px; font-size:13.5px;
  font-weight:800; color:var(--navy); border-bottom:1px solid var(--line-2); }
.dna-catcard-hd .n { margin-left:auto; background:var(--tint); border-radius:999px; padding:1px 9px;
  font-size:12px; font-weight:700; color:var(--muted); }
.dna-lockcard .btn.sm { margin-top:4px; }

/* Icon-Chip mit Farbton (Design-Regel 6b). Nur die Ton-Varianten bekommen die Chip-Groesse,
   damit die Chips der drei Bereiche (ohne Ton) unveraendert bleiben. */
.ic.dna-ic[class*="ton-"] { width:34px; height:34px; border-radius:10px; flex:none; }

/* A6: Bereichs-Kacheln. Raster nach Kategorie, Tippen oeffnet ein Blatt. */
.dna-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:8px; margin:2px 0 4px; }
.dna-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  border:1px solid var(--line); border-radius:14px; padding:11px; cursor:pointer; text-align:left;
  background:var(--card); font:inherit; }
.dna-tile:active { transform:scale(.98); }
.dna-tile .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.dna-tile b { font-size:12.5px; font-weight:800; line-height:1.2; color:var(--navy); }
.dna-tile .n { position:absolute; top:9px; right:11px; font-size:11px; font-weight:800; color:var(--muted); }

/* Farbtoene (Design-Regel 6b): Kachelflaeche als helle Tinte, Icon-Chip und Titel im Vollton. */
.ic.dna-ic.ton-nerv { background:rgba(33,55,91,.11); color:#21375B; }
.ic.dna-ic.ton-psyche { background:rgba(70,80,140,.11); color:#46508C; }
.ic.dna-ic.ton-schlaf { background:rgba(47,92,134,.11); color:#2F5C86; }
.ic.dna-ic.ton-kreis { background:rgba(42,122,158,.11); color:#2A7A9E; }
.ic.dna-ic.ton-bauch { background:rgba(42,140,147,.12); color:#2A8C93; }
.ic.dna-ic.ton-schutz { background:rgba(30,122,114,.12); color:#1E7A72; }
.ic.dna-ic.ton-energie { background:rgba(62,124,166,.11); color:#3E7CA6; }
.ic.dna-ic.ton-stoff { background:rgba(74,111,165,.11); color:#4A6FA5; }
.dna-tile.ton-nerv { background:rgba(33,55,91,.06); } .dna-tile.ton-nerv .ic { background:rgba(33,55,91,.14); color:#21375B; } .dna-tile.ton-nerv b { color:#21375B; }
.dna-tile.ton-psyche { background:rgba(70,80,140,.06); } .dna-tile.ton-psyche .ic { background:rgba(70,80,140,.14); color:#46508C; } .dna-tile.ton-psyche b { color:#46508C; }
.dna-tile.ton-schlaf { background:rgba(47,92,134,.06); } .dna-tile.ton-schlaf .ic { background:rgba(47,92,134,.14); color:#2F5C86; } .dna-tile.ton-schlaf b { color:#2F5C86; }
.dna-tile.ton-kreis { background:rgba(42,122,158,.06); } .dna-tile.ton-kreis .ic { background:rgba(42,122,158,.14); color:#2A7A9E; } .dna-tile.ton-kreis b { color:#2A7A9E; }
.dna-tile.ton-bauch { background:rgba(42,140,147,.07); } .dna-tile.ton-bauch .ic { background:rgba(42,140,147,.15); color:#2A8C93; } .dna-tile.ton-bauch b { color:#2A8C93; }
.dna-tile.ton-schutz { background:rgba(30,122,114,.07); } .dna-tile.ton-schutz .ic { background:rgba(30,122,114,.15); color:#1E7A72; } .dna-tile.ton-schutz b { color:#1E7A72; }
.dna-tile.ton-energie { background:rgba(62,124,166,.06); } .dna-tile.ton-energie .ic { background:rgba(62,124,166,.14); color:#3E7CA6; } .dna-tile.ton-energie b { color:#3E7CA6; }
.dna-tile.ton-stoff { background:rgba(74,111,165,.06); } .dna-tile.ton-stoff .ic { background:rgba(74,111,165,.14); color:#4A6FA5; } .dna-tile.ton-stoff b { color:#4A6FA5; }

/* Design-Regel 6a: durchscheinendes Blatt von unten. Ohne backdrop-filter greift ein
   deckender Hintergrund. Der Ton kommt von der Kachel, ueber die geoeffnet wurde. */
.dna-sheet-ov { position:fixed; inset:0; z-index:70; background:rgba(16,21,95,.30);
  display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .22s; }
.dna-sheet-ov.show { opacity:1; }
.dna-sheet { width:100%; max-width:640px; max-height:84vh; overflow:auto; border-radius:22px 22px 0 0;
  background:rgba(255,255,255,.89); -webkit-backdrop-filter:blur(34px) saturate(190%) brightness(1.06);
  backdrop-filter:blur(34px) saturate(190%) brightness(1.06); border-top:1px solid rgba(255,255,255,.6);
  padding:8px 16px calc(24px + env(safe-area-inset-bottom)); transform:translateY(16px); transition:transform .24s; }
.dna-sheet-ov.show .dna-sheet { transform:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .dna-sheet { background:var(--card); } }
.dna-sheet .grip { width:40px; height:4px; border-radius:999px; background:var(--muted-2); opacity:.5; margin:6px auto 12px; }
.dna-sheet .hd { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dna-sheet .hd b { flex:1; font-size:16px; font-weight:800; color:var(--navy); }
.dna-sheet .hd .x { flex:none; border:0; background:var(--tint-2); width:30px; height:30px; border-radius:50%;
  font-size:20px; line-height:1; color:var(--muted); cursor:pointer; }
.dna-sheet.ton-nerv .hd b { color:#21375B; } .dna-sheet.ton-nerv .grip { background:#21375B; }
.dna-sheet.ton-psyche .hd b { color:#46508C; } .dna-sheet.ton-psyche .grip { background:#46508C; }
.dna-sheet.ton-schlaf .hd b { color:#2F5C86; } .dna-sheet.ton-schlaf .grip { background:#2F5C86; }
.dna-sheet.ton-kreis .hd b { color:#2A7A9E; } .dna-sheet.ton-kreis .grip { background:#2A7A9E; }
.dna-sheet.ton-bauch .hd b { color:#2A8C93; } .dna-sheet.ton-bauch .grip { background:#2A8C93; }
.dna-sheet.ton-schutz .hd b { color:#1E7A72; } .dna-sheet.ton-schutz .grip { background:#1E7A72; }
.dna-sheet.ton-energie .hd b { color:#3E7CA6; } .dna-sheet.ton-energie .grip { background:#3E7CA6; }
.dna-sheet.ton-stoff .hd b { color:#4A6FA5; } .dna-sheet.ton-stoff .grip { background:#4A6FA5; }

/* „Coming soon"-Kachel (z. B. Fragecenter): ausgegraut, nicht interaktiv */
.tile.soon { opacity:.6; filter:grayscale(.5); cursor:default; }
.tile.soon:active { transform:none; }
.tile .soon-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:800;
  letter-spacing:.4px; text-transform:uppercase; background:var(--muted-2); color:#fff;
  padding:2px 6px; border-radius:6px; }

/* ---------- Anamnese-Formular (38 Felder, in app.js aus /me/anamnesis gerendert) ---------- */
.anf-section { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  color:var(--teal); margin:22px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line-2); }
.anf-section:first-child { margin-top:2px; }
.anf { margin-bottom:16px; }
.anf-label { display:block; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:7px; }
.anf-req { color:var(--red); font-weight:800; }
.anf-input { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px;
  font-size:16px; font-family:inherit; background:var(--card); color:var(--ink); }
.anf-input:focus { outline:2px solid var(--teal); }
textarea.anf-input { resize:vertical; min-height:44px; }
.anf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.anf-chip { border:1.5px solid var(--line); background:var(--card); color:var(--navy); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.15; }
.anf-chip[aria-pressed="true"] { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.anf-chip:active { transform:translateY(1px); }
.anf-scale { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.anf-scale button { border:1.5px solid var(--line); background:var(--card); color:var(--navy); border-radius:9px;
  padding:9px 0; font-size:13px; font-weight:800; cursor:pointer; font-family:inherit; }
.anf-scale button[aria-pressed="true"] { background:var(--green); border-color:var(--green-d); color:#fff; }
.anf-hidden { display:none !important; }
.anf-invalid .anf-input { border-color:var(--red); }
.anf-invalid .anf-label { color:var(--red); }
.anf-err { display:none; font-size:11px; font-weight:700; color:var(--red); margin-top:5px; }
.anf-invalid .anf-err { display:block; }

/* ---------- Rezepte (Katalog + Detail) ---------- */
.recipe-hero { width:100%; max-height:220px; object-fit:cover; border-radius:14px; margin:6px 0 2px; display:block; }
.recipe-macros { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 2px; }
.recipe-macros .macro { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  font-size:11px; font-weight:800; background:var(--tint); color:var(--navy); }
.recipe-tags { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.recipe-tags .rtag { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; background:rgba(21,119,155,.12); color:var(--teal); }
ol.recipe-steps { margin:2px 0 0; padding:0; list-style:none; counter-reset:step; }
ol.recipe-steps li { position:relative; padding:2px 0 14px 40px; counter-increment:step;
  font-size:14px; line-height:1.55; color:var(--navy); }
ol.recipe-steps li::before { content:counter(step); position:absolute; left:0; top:0; width:26px; height:26px;
  border-radius:50%; background:linear-gradient(135deg,var(--brand-teal),var(--brand)); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; }
ol.recipe-steps li:last-child { padding-bottom:2px; }

/* Supplement-Plan (Fahrplan-Screen): Produkt-Link + Rabattcode je Position. */
.sp-link { display:inline-block; margin-top:6px; font-size:13px; font-weight:700; color:var(--teal); text-decoration:none; }
.sp-link:hover { text-decoration:underline; }
.sp-code { display:inline-block; margin-top:6px; font-size:12px; font-weight:700; color:var(--navy);
  background:var(--tint); border:1px dashed var(--teal); border-radius:8px; padding:2px 8px; }

/* PWA-Update-Hinweis (vollflaechig unten): neue Version verfuegbar (P2-pwaadopt). */
.hjm-update-bar { position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--brand-bg); color:#fff;
  box-shadow:0 -6px 20px rgba(16,21,95,.28); }
.hjm-update-bar span { font-size:13.5px; font-weight:600; }
.hjm-update-bar .btn { width:auto; padding:9px 16px; font-size:13px; border-radius:11px;
  background:#fff; color:var(--brand); box-shadow:none; flex:none; }

/* Install-Nudge-Banner (dezent unten, wegtippbar; Haeufigkeit gedrosselt). */
.hjm-install-banner { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:55; display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 10px 30px rgba(16,21,95,.16); }
.hjm-install-banner span { font-size:13px; font-weight:700; color:var(--navy); }
.hjm-install-actions { display:flex; align-items:center; gap:8px; flex:none; }
.hjm-install-banner .btn { width:auto; padding:8px 14px; font-size:13px; border-radius:11px; }
.hjm-install-banner .btn.ghost { padding:6px 10px; font-size:16px; line-height:1; }

/* ---------- Engine-Motor (Kundensicht): Heute-Abhaken, Scores, Ziele, Fahrplan ---------- */
/* Rundes Häkchen zum Abhaken einer Tagesaufgabe (Ja/Nein-Baustein). */
.eng-check { flex:none; width:34px; height:34px; border-radius:50%; border:2px solid var(--line);
  background:var(--card); color:var(--green-d); font-size:17px; font-weight:900; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:transform .08s, background .12s, border-color .12s; }
.eng-check.on { background:linear-gradient(135deg,var(--green),var(--green-d)); border-color:transparent; color:#fff; }
.eng-check:active { transform:scale(.9); }
.li.eng-done .tx b { text-decoration:line-through; color:var(--muted); }
/* Mengen-/Dauer-Eintrag: schmales Zahlenfeld + OK. */
.eng-log { display:flex; align-items:center; gap:6px; flex:none; }
.eng-in { width:64px; padding:8px 8px; border:1px solid var(--line); border-radius:10px; font-size:16px;
  font-family:inherit; text-align:right; background:var(--card); color:var(--ink); }
.eng-in:focus { outline:2px solid var(--teal); }
.eng-logbtn { width:auto; padding:8px 12px; font-size:13px; border-radius:10px; }
/* Nicht-blockierender Kurz-Hinweis (Backdating außerhalb der Woche u. Ä.). */
.eng-toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,12px); z-index:60;
  max-width:82%; background:var(--brand-bg); color:#fff; font-size:13px; font-weight:700; line-height:1.35;
  padding:11px 16px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transition:opacity .25s, transform .25s;
  pointer-events:none; text-align:center; }
.eng-toast.show { opacity:1; transform:translate(-50%,0); }

/* Video-Fragecenter (Community, je Lektion) */
.lesson-qa { margin:10px 2px 0; }
.qa-toggle { width:auto; padding:8px 14px; font-size:13px; }
.qa-panel { margin-top:12px; border-top:1px solid var(--line-2); padding-top:12px; }
.qa-list { display:flex; flex-direction:column; gap:10px; }
.qa-item { background:var(--tint-2); border:1px solid var(--line-2); border-radius:12px; padding:11px 13px; }
.qa-meta { font-size:12px; color:var(--navy); display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:5px; }
.qa-body { font-size:14px; color:var(--ink); white-space:pre-wrap; }
.qa-answer { margin-top:9px; padding:9px 11px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.qa-answer b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--teal); margin-bottom:3px; }
.qa-answer div { font-size:14px; color:var(--ink); white-space:pre-wrap; }
.qa-badge { font-size:10px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  background:var(--muted-2); color:#fff; padding:2px 7px; border-radius:6px; }
.qa-badge.ok { background:var(--teal); }
.qa-actions { margin-top:8px; display:flex; gap:14px; }
.lnk { background:none; border:0; padding:0; font-size:12px; font-weight:700; color:var(--teal); cursor:pointer; }
.lnk.danger { color:var(--red); }
.lnk:disabled { opacity:.5; cursor:default; }
.qa-ask { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.qa-input { width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:16px; resize:vertical; min-height:44px; }
.qa-check { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); font-weight:600; }
.qa-check input { margin-top:2px; flex:none; }
.qa-send { width:auto; align-self:flex-start; padding:10px 18px; font-size:14px; }

/* ---------- „Messen"-Vergleich unter einer Blutwert-Zeile (P3-community) ---------- */
.bv-row { cursor:pointer; }
.bv-chev { transition:transform .15s ease; }
.bv-row.open .bv-chev { transform:rotate(90deg); }
.bv-compare { padding:14px 4px 6px; border-bottom:1px solid var(--line-2); }
/* Blutwert-Liste: Name, juengster Wert mit Einordnung, Trend gegen die Messung davor. */
.bv-row .tx span { display:block; }
.bv-trend { margin-top:2px; }
.bv-trend.up, .bv-trend.down { color:var(--teal); }
.bv-wert { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; text-align:right; }
.bv-wert b { color:var(--navy); font-weight:900; white-space:nowrap; font-size:14px; }
.bv-wert .pill { padding:3px 8px; font-size:10.5px; white-space:nowrap; }
.bv-row.bv-aus .bv-wert b { color:var(--amber-ink); }
.bv-row.bv-aus .ic { background:rgba(245,166,35,.16); }
.bv-ziel { font-size:12px; font-weight:700; color:var(--muted); margin:0 2px 8px; }
.bv-kurve { display:block; width:100%; height:80px; margin:0 0 8px; }
.bv-kurve .bv-band { fill:rgba(111,206,120,.22); }
.bv-kurve .bv-linie { fill:none; stroke:var(--teal); stroke-width:2; vector-effect:non-scaling-stroke; }
.bv-kurve .bv-punkt { fill:var(--navy); }
.bv-verlauf { display:flex; flex-direction:column; gap:6px; margin:0 2px 10px; }
.bv-vz { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:600; }
.bv-vz span:first-child { flex:1; }
.bv-vz b { color:var(--navy); font-weight:800; }
.bv-vz b.aus { color:var(--amber-ink); }
.bv-vz .pill { padding:2px 8px; font-size:10.5px; }
.bv-cmp { margin-top:6px; }
.stat .stat-sub { display:block; margin-top:4px; font-size:11px; color:var(--muted); font-weight:600; }
.sec-title[hidden] { display:none; }
.fp-ziel + .fp-ziel { margin-top:12px; }
.fp-ziel .progress { margin-top:8px; }
.cmp-track { position:relative; height:10px; border-radius:99px; background:var(--tint);
  margin:6px 6px 16px; }
.cmp-band { position:absolute; top:0; bottom:0; background:rgba(111,206,120,.35); border-radius:99px; }
.cmp-mark { position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--card); }
.cmp-mark.me { background:var(--navy); width:14px; height:14px; }
.cmp-mark.all { background:var(--teal); }
.cmp-mark.grp { background:var(--amber); }
.cmp-legend { display:flex; flex-direction:column; gap:5px; }
.cmp-lg { font-size:12px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:7px; }
.cmp-lg b { color:var(--navy); font-weight:800; }
.cmp-lg i { width:11px; height:11px; border-radius:50%; flex:none; }
.cmp-lg.me i { background:var(--navy); }
.cmp-lg.opt i { background:var(--green-d); }
.cmp-lg.all i { background:var(--teal); }
.cmp-lg.grp i { background:var(--amber); }
.cmp-hint { display:block; width:100%; text-align:left; margin-top:10px; background:var(--tint-2);
  border:0; border-radius:12px; padding:10px 12px; color:var(--teal); font-weight:700;
  font-size:12px; font-family:inherit; cursor:pointer; }
.qa-nudge { display:block; width:100%; text-align:left; background:var(--tint-2); border:0;
  border-radius:12px; padding:10px 12px; color:var(--teal); font-weight:700; font-size:12px;
  font-family:inherit; cursor:pointer; line-height:1.45; }

/* ================= 1:1-Chat mit dem Coach (C2/C10) =================
   Ein Thread im Coaching-Bereich: oben der Verlauf (scrollt fuer sich), unten die Eingabe.
   Die Hoehe kommt aus --cochat-h (app.js misst die freie Flaeche), damit die Eingabezeile auf
   jedem Geraet sichtbar bleibt und nicht die ganze Seite scrollt. */
.cochat { display:flex; flex-direction:column; height:var(--cochat-h, 60vh); min-height:320px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
/* dvh nach vh: auf dem Telefon aendert sich vh nicht, wenn die Browserleiste ein- und ausfaehrt,
   dvh schon. Ohne das rutscht die Eingabezeile beim Tippen unter die Leiste. Alte Browser
   ignorieren die zweite Zeile und behalten den vh-Wert. */
@supports (height:100dvh) { .cochat { height:var(--cochat-h, 60dvh); } }
.cochat-scroll { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,var(--tint-2),var(--card) 110px);
  /* Ohne contain scrollt am Ende des Verlaufs die ganze Seite weiter. Im Chat faellt das
     besonders auf, weil man staendig bis ans Ende scrollt. */
  overscroll-behavior:contain; }
/* Der Tagestrenner bleibt beim Scrollen oben stehen, sonst weiss man in langen Verlaeufen
   nicht mehr, welcher Tag gerade sichtbar ist. */
.cochat-day { align-self:center; position:sticky; top:0; z-index:1;
  font-size:11px; font-weight:800; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:4px 0; }
.comsg { max-width:82%; border-radius:16px; padding:9px 12px; font-size:14px; line-height:1.45;
  box-shadow:var(--shadow-sm); overflow-wrap:anywhere; }
.comsg.from-coach { align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:6px; }
.comsg.from-member { align-self:flex-end; background:linear-gradient(135deg,var(--brand),var(--navy-2)); color:#fff; border-bottom-right-radius:6px; }
.comsg .by { display:block; font-size:11px; font-weight:800; color:var(--teal); margin-bottom:2px; }
/* Auf der dunklen eigenen Blase traegt Deckkraft den Rueckzug; auf der hellen Coach-Blase
   wuerde 70 % Deckkraft den Kontrast unter das Lesbare druecken, dort also eine echte Farbe. */
.comsg .foot { display:block; margin-top:3px; font-size:10.5px; opacity:.7; text-align:right; }
.comsg.from-coach .foot { opacity:1; color:var(--muted); }
.comsg .tag { display:inline-block; margin-right:6px; font-size:10px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted); }
.comsg img { display:block; max-width:100%; border-radius:11px; margin:2px 0; }
.comsg audio { display:block; width:210px; max-width:100%; margin:2px 0; }
.comsg .chat-att-fehler { display:block; font-size:12px; color:var(--red); margin:2px 0; }
.cochat-empty { margin:auto; text-align:center; color:var(--muted); font-size:13px; font-weight:600; padding:0 18px; }

.cochat-compose { display:flex; align-items:flex-end; gap:8px; padding:10px; border-top:1px solid var(--line-2); background:var(--card); }
.cochat-compose textarea { flex:1; resize:none; min-height:40px; max-height:120px; border:1px solid var(--line);
  border-radius:13px; padding:10px 13px; font-size:16px; line-height:1.3; font-family:inherit; color:var(--ink); }
.cochat-compose textarea:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.cochat-attach, .cochat-mic, .cochat-send { width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); display:grid; place-items:center; cursor:pointer; font-size:16px; flex:none; color:var(--navy); }
.cochat-send { background:linear-gradient(135deg,var(--brand),var(--brand-teal)); border-color:transparent; color:#fff; }
/* Tastaturfokus muss man sehen. Die drei Knoepfe hatten vorher gar keinen Stil dafuer. */
.cochat-attach:focus-visible, .cochat-mic:focus-visible, .cochat-send:focus-visible {
  outline:2px solid var(--teal); outline-offset:2px; }
.cochat-mic.rec { background:var(--red); border-color:var(--red); color:#fff; animation:hjm-pulse 1.1s infinite; }
@keyframes hjm-pulse { 50% { opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .cochat-mic.rec { animation:none; } }
.cochat-note { padding:0 13px 10px; font-size:12px; color:var(--muted); }
.cochat-note.err { color:var(--red); font-weight:700; }

/* Zahl ungelesener Coach-Nachrichten am Chat-Reiter. */
.subnav .conum[hidden] { display:none; }
.subnav .conum { display:inline-grid; place-items:center; margin-left:6px; min-width:17px; height:17px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff; font-size:10.5px; font-weight:900; line-height:1; }
/* --- „Ansicht als Kunde" (Team/Support): unuebersehbares Band ueber der ganzen App ---------
   Absicht: in keiner Sekunde Zweifel, in wessen Konto man gerade schaut. Deshalb fest oben,
   volle Breite, warnfarben — und die App rutscht darunter (padding-top am Wrapper). */
.hjm-impbar { position:fixed; top:0; left:0; right:0; z-index:9999;
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  background:var(--amber); color:#3a2a00; font-family:var(--font); font-weight:800;
  font-size:13px; line-height:1.3; box-shadow:0 2px 10px rgba(16,21,95,.18); }
.hjm-impbar[hidden] { display:none; }
.hjm-impbar .eye { flex:none; font-size:15px; }
.hjm-impbar .txt { flex:1 1 auto; min-width:0; }
.hjm-impbar .txt b { font-weight:900; }
.hjm-impbar .ro { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:99px;
  background:rgba(0,0,0,.14); font-size:11px; font-weight:800; white-space:nowrap; }
.hjm-impbar button { flex:none; border:0; border-radius:99px; padding:6px 13px; cursor:pointer;
  background:#3a2a00; color:#fff; font-family:inherit; font-weight:800; font-size:12px; }
.hjm-app.imp-on { padding-top:38px; }

/* --- Fitness („Mein Training"): kompakte Aktionen, Eingabefelder, Filterleiste -------------
   Hintergrund: .btn ist bewusst 100 % breit, weil es fast immer die eine Haupt-Aktion einer
   Seite ist. In Kopfzeilen und Listenzeilen (Löschen, ×, „+ Plan") schiebt genau das den
   eigentlichen Inhalt weg — dort greifen die schmalen Varianten unten. */
.btn.sm { flex:none; white-space:nowrap; }
.btn.icon { width:auto; flex:none; padding:0; min-width:36px; height:36px;
  font-size:17px; line-height:1; border-radius:11px; box-shadow:none; }
.fx-input { flex:1 1 auto; width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; background:var(--card); font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); }
.fx-input::placeholder { color:var(--muted-2); font-weight:600; }
.fx-input:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
/* Kopfzeile mit Titel + schmaler Aktion: der Titel darf schrumpfen, der Knopf nicht. */
.fx-head { gap:10px; }
.fx-head .ttl { flex:1 1 auto; min-width:0; font-size:17px; font-weight:800; color:var(--navy); }
.fx-count { margin:0 0 9px 2px; font-size:12px; font-weight:700; color:var(--muted); }
/* ---------- Training H3: Bibliothek mit Sperrgrund, Plan-Detail nach dem Prototyp ---------- */
/* Gesperrt heisst nicht weg: ausgegraut mit Grund, trotzdem antippbar (Punkt 6). */
.li.fxh3-gesperrt .ic, .li.fxh3-gesperrt .tx b, .li.fxh3-gesperrt .tx > span:not(.fxh3-grund) { opacity:.45; }
.fxh3-grund { display:block; margin-top:2px; font-size:12px; font-weight:700; color:var(--bad-t); }
.li .tx .fxh3-grund { font-size:12px; color:var(--bad-t); }
.fxh3-kopf .ttl { flex:1 1 auto; min-width:0; }
.fxh3-name { display:inline; padding:0; border:0; background:none; font:inherit; font-size:17px; font-weight:800;
  color:var(--navy); text-align:left; cursor:text; }
.fxh3-stats { display:flex; gap:22px; margin-top:12px; }
.fxh3-stats span { display:block; font-size:11.5px; font-weight:700; color:var(--muted); }
.fxh3-stats b { display:block; font-size:16px; font-weight:800; color:var(--navy); }
.fxh3-listkopf { display:flex; justify-content:flex-start; margin:12px 0 10px; }
.fxh3-listkopf .btn { margin-top:0; }
.fxh3-liste { position:relative; display:flex; flex-direction:column; gap:10px; }
.fxh3-karte { display:flex; align-items:stretch; gap:6px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 10px 12px 12px; box-shadow:var(--shadow-sm); position:relative; }
.fxh3-karte:not(.zieht) { transition:transform .16s ease; }
.fxh3-karte.zieht { z-index:3; box-shadow:0 10px 24px -8px rgba(16,21,95,.35); }
.fxh3-auf { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:0; border:0; background:none;
  text-align:left; cursor:pointer; font:inherit; }
.fxh3-auf .ic { width:46px; height:46px; border-radius:12px; background:var(--tint); display:grid; place-items:center;
  font-size:20px; flex:none; object-fit:cover; }
.fxh3-auf .tx { flex:1; min-width:0; }
.fxh3-auf .tx b { display:block; font-size:15px; font-weight:800; color:var(--ink); line-height:1.25; }
.fxh3-auf .tx span { display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--muted); }
.fxh3-auf .tx .meta { margin-top:6px; color:var(--ink); font-size:12.5px; }
.fxh3-super { font-style:normal; font-weight:800; color:var(--teal); }
.fxh3-rechts { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:8px; flex:none; }
.fxh3-punkte { width:32px; height:26px; border-radius:8px; border:0; background:none; color:var(--muted);
  font-size:19px; line-height:1; cursor:pointer; }
.fxh3-griff { touch-action:none; cursor:grab; color:var(--muted-2); font-size:16px; line-height:1; padding:4px 7px;
  user-select:none; -webkit-user-select:none; }
.fxh3-griff:active { cursor:grabbing; color:var(--muted); }
.fxh3-band { display:flex; align-items:center; gap:7px; margin:-4px 0 -4px 6px; font-size:12px; font-weight:700; color:var(--teal); }
.fxh3-band i { display:block; width:14px; height:1.5px; background:var(--teal); }
.fxh3-zug .fxh3-band { visibility:hidden; }
.fxh3-extrakopf { margin:18px 0 8px 4px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.fxh3-extra { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; width:100%; margin-bottom:10px;
  padding:12px 14px; border-radius:var(--r); border:1.5px dashed var(--teal); background:var(--card); text-align:left;
  font:inherit; cursor:pointer; }
.fxh3-extra.fertig { border-style:solid; background:var(--tint); }
.fxh3-extra .n { font-size:14.5px; font-weight:800; color:var(--navy); }
.fxh3-extra .s { margin-top:2px; font-size:12.5px; font-weight:600; color:var(--muted); }
.fxh3-extra .hk { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center;
  color:#fff; font-weight:800; }
.fxh3-extra.fertig .hk { background:var(--teal); border-color:var(--teal); }
.fxh3-vol { margin-top:14px; }
.fxh3-vol-kopf { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px;
  font-size:14px; font-weight:800; color:var(--navy); }
.fxh3-vol-kopf .k { font-size:12px; font-weight:700; color:var(--muted); }
.fxh3-vol-z { display:grid; grid-template-columns:minmax(0,120px) 1fr 34px; gap:10px; align-items:center; padding:6px 0; }
.fxh3-vol-z .g { font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fxh3-vol-z .b { position:relative; height:8px; border-radius:4px; background:var(--line-2); overflow:hidden; }
.fxh3-vol-z .b i { position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--teal); }
.fxh3-vol-z .b i.unten { background:var(--muted-2); }
.fxh3-vol-z .b i.drueber { background:var(--amber); }
.fxh3-vol-z .b .korr { position:absolute; top:0; bottom:0; border-left:1px solid var(--muted-2); border-right:1px solid var(--muted-2); }
.fxh3-vol-z .n { font-size:13px; font-weight:700; text-align:right; color:var(--ink); }
.fxh3-vol-fuss { margin:10px 0 0; font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.hjm-modal .fxh3-aktionen { padding:14px; }
.hjm-modal .fxh3-aktionen h4 { text-align:center; margin:4px 0 10px; }
.fxh3-aktionen button { display:block; width:100%; padding:14px 10px; border:0; border-bottom:1px solid var(--line-2);
  background:none; font:inherit; font-size:15px; font-weight:700; color:var(--teal); cursor:pointer; }
.fxh3-aktionen button.rot { color:var(--bad-t); }
.fxh3-aktionen button.ab { border-bottom:0; color:var(--ink); }
.hjm-modal .fxh3-schieben p, .hjm-modal .fxh3-name-blatt p { margin:10px 0 12px; }
.fxh3-sz { display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; }
.fxh3-sz.on { background:var(--tint); }
.fxh3-sz .n { flex:1; min-width:0; font-size:13.5px; font-weight:700; color:var(--ink); }
.fxh3-sz .k { display:flex; gap:4px; flex:none; }
.fxh3-sz .k button { width:32px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--card);
  color:var(--navy); font-size:14px; cursor:pointer; }
.fxh3-sz .k button:disabled { opacity:.3; cursor:default; }
/* Titelbild der Uebung: quadratisch, volle Kartenbreite. Feste Seitenverhaeltnis-Angabe,
   damit beim Nachladen nichts springt (die Quelle ist immer 1:1). */
.fx-hero { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px;
  background:var(--tint-2); margin:0 0 12px; }
/* Muskelkarte: eine oder zwei Ansichten nebeneinander. Fehlt eine Ansicht, steht die
   vorhandene allein und bekommt die halbe Breite - das ist kein Fehlzustand, sondern der
   Normalfall (erzeugt wird nur die Seite, auf der ein Muskel leuchtet). */
.fx-karten { display:flex; gap:10px; justify-content:center; }
.fx-karte { flex:0 1 50%; margin:0; text-align:center; }
.fx-karte img { display:block; width:100%; height:auto; aspect-ratio:472/860; }
.fx-karte figcaption { margin-top:4px; font-size:12px; font-weight:700; color:var(--muted); }
/* Zahlenzeile (Label, Felder, Knopf); vom Workout nicht mehr benutzt, aber an anderer Stelle. */
.fx-set { display:flex; align-items:center; gap:6px; margin-top:6px; }
.fx-set .fx-input { flex:1 1 0; min-width:0; padding:9px 10px; text-align:center; }
.fx-set .btn.sm { flex:none; padding:9px 12px; }

/* ---- Ernaehrungstracking ---- */
/* Makro-Kacheln (Tagesbilanz + Mengen-Vorschau). Farben je Naehrstoff kommen inline aus
   app.js (Farbschluessel der Uebergabe), damit sie mit der App eine Quelle haben. */
.es-macros { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.es-macro { flex:1 1 0; min-width:64px; border:1px solid rgba(255,255,255,.25); border-radius:10px;
  padding:6px 8px; text-align:center; }
.es-macro span { display:block; font-size:11px; font-weight:700; opacity:.85; }
.es-macro b { font-size:15px; font-weight:800; }
.es-macro b i { font-style:normal; font-weight:700; font-size:11px; opacity:.75; }
/* In der Mengen-Vorschau (heller Grund) tragen die Kacheln eine eigene Randfarbe (inline). */
.card .es-macro, [data-screen="essen-menge"] .es-macro { border-color:var(--line); }
[data-screen="essen-menge"] .es-macro span { color:var(--muted); opacity:1; }

.es-warn { color:#C08B4F; font-weight:800; }   /* Bernstein: nur Warnung (Farbschluessel) */

.es-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.es-chip { border:1px solid var(--line); background:var(--card); color:var(--navy); border-radius:999px;
  padding:6px 12px; font-size:13px; font-weight:700; cursor:pointer; }
.es-chip.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }

.es-urteil { display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; margin-top:6px; background:var(--card); }
.es-urteil b { color:var(--navy); font-size:13px; font-weight:800; }
.es-urteil span { color:var(--muted); font-size:12px; font-weight:600; text-align:right; }
.es-urteil .es-deins { color:var(--teal); font-size:10px; font-weight:800; text-align:left; margin-left:4px; vertical-align:middle; }

/* Barcode-Scanner: Kamerabild mit Zielrahmen. Der Rahmen ist fast quadratisch, damit ein
   hochkant gehaltener Code genauso hineinpasst wie ein querer; gelesen wird nur sein Inhalt. */
.es-scan-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:12px;
  overflow:hidden; }
.es-scan-wrap video { width:100%; height:100%; object-fit:cover; display:block; }
.es-scan-rahmen { position:absolute; left:14%; right:14%; top:12%; bottom:12%;
  border:2px solid rgba(255,255,255,.9); border-radius:12px; box-shadow:0 0 0 100vmax rgba(0,0,0,.3);
  transition:border-color .15s; }
.es-scan-linie { position:absolute; left:8%; right:8%; top:50%; height:2px; background:rgba(255,80,80,.85);
  box-shadow:0 0 6px rgba(255,80,80,.8); animation:es-scan-puls 1.6s ease-in-out infinite; }
@keyframes es-scan-puls { 0%, 100% { opacity:.35; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .es-scan-linie { animation:none; } }
.es-scan-ok .es-scan-rahmen { border-color:#22c55e; box-shadow:0 0 0 100vmax rgba(0,0,0,.3), inset 0 0 0 3px #22c55e; }
.es-scan-ok .es-scan-linie { background:#22c55e; box-shadow:none; animation:none; opacity:1; }
.es-scan-knoepfe { position:absolute; right:10px; bottom:10px; display:flex; gap:8px; }
.es-scan-knopf { min-width:44px; height:36px; padding:0 12px; border:0; border-radius:18px;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.es-scan-knopf.an { background:#fff; color:#111; }
.es-scan-knopf[hidden] { display:none; }
.es-scan-hinweis { font-size:13px; font-weight:600; text-align:center; margin:8px 0; }
.es-teilen { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px;
  font-weight:600; color:var(--navy); cursor:pointer; }
.es-teilen input { width:18px; height:18px; }

.es-fotos { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.es-foto { position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); }
.es-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.es-foto-x { position:absolute; top:2px; right:2px; width:22px; height:22px; border:0;
  border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:16px; line-height:1;
  cursor:pointer; }
/* ---- Ernaehrung, Tagesbildschirm wie im Prototyp (RUNDE2 §2, DESIGN §1, Oktober-Paket) ----
   Die HUELLE folgt der App (Karte 18/16, Rand #E8ECF1, Navy #10155F, Knoepfe 36/11, Eingabefelder),
   die DARSTELLUNG darin dem Prototyp (APP_BESSER A). Auswahl tuerkis #15779B (APP_BESSER B3). */

/* Rubriken sind Wegweiser, keine Ueberschriften (DESIGN §2.3): grau, 12/800, im ganzen Modul. */
[data-screen="ernaehrung"] .sec-title, [data-screen^="essen-"] .sec-title {
  font-size:12px; font-weight:800; color:var(--muted-2); letter-spacing:.7px; }
.es-rubrik { font-size:12px; font-weight:800; color:var(--muted-2); text-transform:uppercase; letter-spacing:.7px; }

.es-datum { border:0; background:none; cursor:pointer; color:var(--navy); font:inherit; font-size:15px;
  font-weight:800; padding:6px 8px; border-radius:10px; }
.es-datum:hover { background:var(--tint-2); }

/* Tageskopf (DESIGN §1.1): Modulverlauf, Balken auf dunkler Bettung, je Makro eine Farbe. */
.es-tageskopf { background:linear-gradient(135deg,#15779B 0%,#6FCE78 100%); border-radius:18px; padding:20px;
  display:flex; flex-direction:column; gap:15px; color:#fff; }
.es-tk-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.es-tk-links { display:flex; align-items:baseline; gap:6px; min-width:0; flex-wrap:wrap; }
.es-tk-zahl { font-size:32px; font-weight:800; color:#fff; letter-spacing:-1px; line-height:1.1; }
.es-tk-ziel { font-size:14px; font-weight:600; color:rgba(255,255,255,.78); }
.es-tk-rest { font-size:13px; font-weight:700; color:rgba(255,255,255,.92); white-space:nowrap; }
/* Ueber dem Ziel eine weisse Pille: Rot auf Gruen waere matschig. */
.es-tk-rest.drueber { color:#C0392B; background:#fff; padding:3px 9px; border-radius:999px; }
.es-tk-balken { height:8px; border-radius:4px; background:rgba(0,0,0,.44); overflow:hidden; display:flex; }
.es-tk-balken div { height:100%; border-radius:4px; background:#fff; flex-shrink:0; }
.es-tk-balken div.n-p { background:#FFA98C; }
.es-tk-balken div.n-kh { background:#7FC8FF; }
.es-tk-balken div.n-f { background:#FFCE4D; }
.es-tk-balken div.n-b { background:#D6EE8C; }
/* Der Balken sagt dasselbe wie die Zahl: ueber dem Ziel gestreift statt voll in seiner Farbe. */
.es-tk-balken div.drueber { background:repeating-linear-gradient(115deg,#fff 0 5px,rgba(255,255,255,.45) 5px 10px); }
/* Seit 11.10.2026: die zweite Streifenfarbe ist die des Makros, Kalorien bleiben weiss/weiss. */
.es-tk-balken div.drueber.n-p { background:repeating-linear-gradient(115deg,#fff 0 5px,#FFA98C 5px 10px); }
.es-tk-balken div.drueber.n-kh { background:repeating-linear-gradient(115deg,#fff 0 5px,#7FC8FF 5px 10px); }
.es-tk-balken div.drueber.n-f { background:repeating-linear-gradient(115deg,#fff 0 5px,#FFCE4D 5px 10px); }
.es-tk-balken div.drueber.n-b { background:repeating-linear-gradient(115deg,#fff 0 5px,#D6EE8C 5px 10px); }
.es-tk-makros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.es-tk-makro { display:flex; flex-direction:column; gap:6px; min-width:0; }
.es-tk-zeile { display:flex; align-items:baseline; justify-content:space-between; gap:5px; min-width:0; }
.es-tk-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.80); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; min-width:0; }
.es-tk-wert { font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.es-tk-wert i { font-style:normal; color:rgba(255,255,255,.62); font-weight:600; }
.es-tk-wert.drueber { color:#C0392B; background:#fff; padding:1px 6px; border-radius:999px; }
.es-tk-wert.drueber i { color:#C98A80; }
.es-tk-makro .es-tk-balken { height:5px; border-radius:3px; }
.es-tk-satz { font-size:12px; font-weight:600; color:rgba(255,255,255,.85); margin-top:-6px; }
/* Runde 9 (RUNDE2 §9.3): „≥" Untergrenze, „≈" Schaetzung. Die Marke steht in Farbe und Gewicht der
   Zahl, sie gehoert zum Wert. Der Satz darunter braucht auf dem Verlauf eigenen Grund: weiss auf
   #6FCE78 sind 1,6:1, mit 55 % Navy darunter gemessene 6,2:1. */
.es-tk-mind { margin-right:1px; }
.es-tk-fehlt { font-size:11px; line-height:1.4; font-weight:600; color:#fff; background:rgba(16,21,95,.55);
  border-radius:9px; padding:6px 9px; }
.es-vorschau .es-tk-fehlt { margin-top:9px; }

/* Mahlzeit als Karte (RUNDE2 §2.2, DESIGN §1.4). */
.card.es-mz { margin-top:12px; display:flex; flex-direction:column; gap:2px; }
.es-mz-kopf { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:6px; }
.es-mz-links { display:flex; align-items:center; gap:0; min-width:0; }
.es-mz-name { font-size:13px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.6px;
  margin-right:2px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es-mz-eigen { font-size:10px; font-weight:800; color:var(--muted-2); background:var(--card2); padding:2px 6px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.5px; margin-left:4px; white-space:nowrap; }
.es-mz-rechts { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.es-ico { width:25px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:0;
  background:none; padding:0; cursor:pointer; border-radius:8px; flex-shrink:0; }
.es-ico:focus-visible, .es-zeile:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.es-ico-bild img { width:24px; height:24px; border-radius:7px; object-fit:cover; display:block; }
.es-zeitknopf { display:flex; align-items:center; gap:4px; border:0; background:none; padding:2px 0; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--muted-2); }
.es-zeitknopf .leer { color:var(--muted-2); }
.es-mz-summe { display:flex; align-items:center; gap:4px; border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap; }
.es-pfeil { display:inline-flex; transition:transform .15s; }
.es-pfeil.auf { transform:rotate(180deg); }
.es-mz-makros { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:2px 0 10px; }
.es-mz-makros > div { display:flex; flex-direction:column; gap:2px; min-width:0; }
.es-mz-mname { display:flex; align-items:center; gap:4px; min-width:0; }
.es-mz-mname span { font-size:11px; font-weight:700; color:var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.es-mz-makros b { font-size:13px; font-weight:800; color:var(--muted); white-space:nowrap; }
/* Auf weissem Grund ein hauchduenner Rand: Koralle auf Weiss allein kommt nur auf 1,86. */
.es-mpunkt { width:7px; height:7px; border-radius:999px; display:inline-block; flex-shrink:0; box-shadow:0 0 0 1px rgba(16,21,95,.18); }
.es-mpunkt.n-p { background:#FFA98C; }
.es-mpunkt.n-kh { background:#7FC8FF; }
.es-mpunkt.n-f { background:#FFCE4D; }
.es-mpunkt.n-b { background:#D6EE8C; }

/* Zeile (DESIGN §1.2/§1.3): links Name und Zubereitung, rechts die Kalorien an fester Kante. */
.es-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; width:100%;
  text-align:left; border:0; border-top:1px solid var(--line-2); background:none; cursor:pointer; font:inherit; color:inherit; }
.es-mz-kopf + .es-zeile, .es-mz-makros + .es-zeile { border-top:0; }
.es-zeile .links { display:flex; flex-direction:column; gap:2px; min-width:0; }
.es-zeile .name { font-size:14.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.es-zeile .unter { font-size:12px; font-weight:400; color:var(--muted-2); }
.es-zeile .rechts { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.es-zeile .wert { font-size:15px; font-weight:800; color:var(--navy); }
.es-zeile .klein { font-size:11px; font-weight:600; color:var(--muted-2); }

/* Wischen zum Loeschen im Tag (Severin 04.10.): die Zeile liegt auf dem roten Knopf und gleitet nach
   links. touch-action:pan-y laesst das senkrechte Scrollen beim Browser. Der Knopf ist auch per
   Tastatur und VoiceOver erreichbar; hat er den Fokus, oeffnet sich die Zeile von selbst. */
.es-wisch { position:relative; overflow:hidden; border-top:1px solid var(--line-2); }
.es-mz-kopf + .es-wisch, .es-mz-makros + .es-wisch { border-top:0; }
.es-wisch > .es-zeile { position:relative; z-index:1; border-top:0; background:var(--card); touch-action:pan-y;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:transform .2s ease; }
.es-wisch.offen > .es-zeile, .es-wisch:has(.es-wisch-weg:focus-visible) > .es-zeile { transform:translateX(-92px); }
.es-wisch-weg { position:absolute; top:0; right:0; bottom:0; width:92px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; border:0; background:#C0392B; color:#fff; font:inherit;
  font-size:13px; font-weight:800; cursor:pointer; opacity:0; transition:opacity .2s ease; }
/* Zu ist der Knopf durchsichtig (sonst schimmert am Rand ein roter Strich durch), aber weiter fokussierbar. */
.es-wisch.offen .es-wisch-weg, .es-wisch.wischt .es-wisch-weg, .es-wisch-weg:focus-visible { opacity:1; }
.es-wisch-weg:focus-visible { outline:2px solid var(--navy); outline-offset:-4px; }

/* „Gerade eingetragen" oben auf der Suche, dem Mahlzeit-Foto und dem Diktat (Severin 04.10.). */
.es-sitz { margin:0 0 12px; padding:12px 14px; border-color:#BFE3EE; }
.es-sitz-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.es-sitz-kopf b { display:block; color:var(--navy); font-size:14px; font-weight:800; }
.es-sitz-kopf span { display:block; color:var(--muted); font-size:12px; font-weight:600; margin-top:1px; }
.es-sitz-zeile { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line-2); }
.es-sitz-kopf + .es-sitz-zeile { margin-top:8px; }
.es-sitz-zeile .links { display:flex; flex-direction:column; gap:1px; min-width:0; }
.es-sitz-zeile .name { font-size:14px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.es-sitz-zeile .unter { font-size:12px; color:var(--muted-2); }
.es-sitz-weg { flex:none; width:44px; height:44px; margin-right:-10px; display:grid; place-items:center; border:0; border-radius:12px;
  background:none; color:var(--muted-2); cursor:pointer; }
.es-sitz-weg:hover { background:var(--tint-2); color:var(--bad-t); }
.es-sitz-weg:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }

/* Kamera oder Mediathek (Mahlzeit-Foto, Foto zur Mahlzeit). */
.es-fotowahl { display:flex; flex-wrap:wrap; gap:8px; }
.es-fotowahl .btn { display:inline-flex; align-items:center; gap:6px; }

/* Ernaehrungskalender: das Monatsblatt des Trainingskalenders (.fxk-*) in der Tageswahl. */
.es-kal .fxk-monat { margin-top:6px; }
.es-kal .fxk-raster { margin-bottom:10px; }

/* Fussleiste: darf umbrechen, lieber zwei Zeilen als ein abgeschnittener Knopf (RUNDE2 §2.7). */
.es-mz-fuss { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 0 0; }
.es-mz-fuss.linie { border-top:1px solid var(--line-2); }
.es-mz-fuss-r { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.es-hinzu { display:flex; align-items:center; gap:7px; border:0; background:none; padding:4px 0; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; color:var(--teal); }
.es-fussknopf { display:flex; align-items:center; gap:5px; background:var(--card2); border:0; border-radius:8px;
  padding:7px 10px; cursor:pointer; font:inherit; font-size:12px; font-weight:700; color:var(--muted); }
.es-fussknopf.nur { width:31px; height:31px; padding:0; justify-content:center; }
.es-neu-mz { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; background:none;
  padding:14px 0 8px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--muted-2); }

/* Aufklapper in der Karte (Notiz, Uhrzeit, Teilen, Tageswahl, neue Mahlzeit). */
.es-feld-auf { display:flex; flex-direction:column; gap:9px; padding:4px 0 8px; }
/* Unter der klebenden Kopfzeile nicht verschwinden, wenn das Feld ins Bild gescrollt wird (Punkt 11). */
.es-feld-auf, .es-fotos { scroll-margin-top:72px; scroll-margin-bottom:90px; }
.card.es-karte-auf { display:flex; flex-direction:column; gap:9px; }
.es-feld-titel { color:var(--navy); font-size:15px; font-weight:800; }
.es-klein { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; margin:0; }
.es-reihe { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.es-textknopf { border:0; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  color:var(--muted); padding:9px 10px; }
.es-rot { color:var(--warn-t); }
/* „Anlegen" wartet grau, bis etwas drinsteht; Schrift #4B5563 statt Weiss (5,0 statt 1,87). */
.btn.es-anlegen:disabled { background:var(--card2); color:var(--muted); opacity:1; box-shadow:none; }
/* Mengenseite: der Hauptknopf schwebt ueber der Tab-Leiste (Punkt 10), wie die Pausenuhr im
   Workout. `fixed`, weil das Dokument scrollt. Unten bleibt Platz, damit nichts dahinter verschwindet. */
[data-hj="essen-menge-body"] { padding-bottom:104px; }
/* Das Einblenden der Seite schiebt mit transform; solange das laeuft, haengt ein fixed-Kind an der
   Seite statt am Bildschirm und die Leiste sprang. Hier blendet die Seite nur ueber die Deckkraft ein. */
.screen[data-screen="essen-menge"] { animation-name:hjm-fade-nur; }
@keyframes hjm-fade-nur { from{opacity:0} to{opacity:1} }
.es-mg-leiste { position:fixed; left:50%; transform:translateX(-50%); width:min(428px, calc(100% - 32px));
  bottom:calc(74px + env(safe-area-inset-bottom)); z-index:25; display:flex; flex-direction:column; gap:6px; }
.es-mg-leiste .btn { margin:0; box-shadow:0 10px 26px rgba(16,21,95,.28); }
.es-mg-leiste .btn.es-anlegen:disabled { box-shadow:0 6px 18px rgba(16,21,95,.12); }
.es-mg-leiste-hinweis { margin:0; align-self:center; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; box-shadow:var(--shadow-sm); }
.es-foto-gross { width:100%; height:auto; max-height:320px; }
.es-foto-gross img { max-height:320px; }

/* Befinden in der Karte (APP_BESSER B2): je Symptom eigene Zeile ab dem zweiten (RUNDE2 §2.5). */
.es-symfeld { display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--line-2); margin-top:8px; padding:14px 0 6px; }
.es-symfeld h3 { margin:0; font-size:17px; font-weight:800; color:var(--navy); letter-spacing:-.3px; }
.es-symfeld p { margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
.es-gut { display:flex; align-items:center; justify-content:center; gap:9px; height:46px; border-radius:13px; width:100%;
  border:0; background:var(--card2); color:#3E9E6C; cursor:pointer; font:inherit; font-size:15px; font-weight:700; }
.es-gut.an { background:#3E9E6C; color:#fff; }
.es-oder { display:flex; align-items:center; gap:10px; }
.es-oder i { flex:1; height:1px; background:var(--line-2); }
.es-oder span { font-size:11.5px; font-weight:700; color:var(--muted-2); }
.es-stufen { margin:0; flex-wrap:nowrap; }
.es-stufen .es-chip { flex:1 1 auto; padding:9px 10px; text-align:center; white-space:nowrap; }
.es-symzeile { border:1px solid var(--line); border-radius:12px; display:flex; flex-direction:column; }
.es-symzeile.auf { border-color:#59B8CE; padding:0 13px 13px; gap:9px; }
.es-symzeile-kopf { display:flex; align-items:center; gap:8px; width:100%; border:0; background:none; cursor:pointer;
  padding:11px 13px; text-align:left; font:inherit; }
.es-symzeile.auf .es-symzeile-kopf { padding:11px 0 0; }
.es-symzeile-kopf b { font-size:14px; font-weight:700; color:var(--ink); }
.es-symzeile-kopf span:not(.es-pfeil) { margin-left:auto; font-size:12px; font-weight:600; color:var(--muted); }

/* Kurzhinweis mit Rueckgaengig, fuenf Sekunden. Seit 11.10.2026 eine eigene Leiste (Prototyp
   toastMitZug): Symbol links, Name fett, weisser Knopf, unten ein Streifen im Modulverlauf. */
.es-toast { position:fixed; left:16px; right:16px; bottom:calc(24px + env(safe-area-inset-bottom)); max-width:420px;
  margin:0 auto; display:flex; align-items:center; gap:12px; background:var(--brand-bg); color:#fff;
  padding:12px 12px 14px 14px; border-radius:18px; overflow:hidden; box-shadow:0 8px 24px rgba(20,34,70,.28);
  z-index:9999; opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .2s, transform .28s cubic-bezier(.2,.9,.3,1.2); }
.es-toast.an { opacity:1; pointer-events:auto; transform:translateY(0); }
.es-toast .tz-symbol { width:34px; height:34px; border-radius:11px; flex-shrink:0; background:rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; }
.es-toast .tz-text { display:flex; flex-direction:column; min-width:0; flex-grow:1; line-height:1.25; }
.es-toast .tz-text b { font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-toast .tz-text span { font-size:12px; font-weight:600; color:rgba(255,255,255,.66); }
.es-toast .tz-knopf { display:flex; align-items:center; gap:6px; flex-shrink:0; border:0; cursor:pointer; font:inherit;
  background:#fff; color:var(--brand); font-size:13px; font-weight:800; height:36px; padding:0 14px; border-radius:999px; }
.es-toast .tz-knopf:active { transform:scale(.96); }
.es-toast .tz-lauf { position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:linear-gradient(90deg,#15779B,#6FCE78); transform-origin:left; }
.es-toast.an .tz-lauf { animation:esTzLauf 5s linear forwards; }
@keyframes esTzLauf { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .es-toast { transition:none; transform:none; }
  .es-toast.an { transform:none; } .es-toast.an .tz-lauf { animation:none; } }

/* Erfassen (RUNDE2 §3, DESIGN §2.1): drei Wege als Spalten, Listen in Karten, zwei Kacheln am Fuss. */
.es-mz-ziel { margin:0 0 8px; font-size:15px; font-weight:800; color:var(--navy); }
.es-wege { display:flex; gap:8px; margin:0 0 4px; }
.es-weg { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px 10px;
  border-radius:11px; background:var(--card); border:1px solid var(--line); cursor:pointer; font:inherit; color:var(--navy); }
.es-weg span { font-size:11.5px; font-weight:700; color:var(--muted); }
.es-weg:focus-visible, .es-kachel:focus-visible, .es-stern:focus-visible, .es-stern-klein:focus-visible,
.es-favbuchen:focus-visible, .es-vertr-kopf:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.es-rubrik-oben { margin:16px 2px 8px; }
.card.es-liste { padding:2px 14px; }
.card.es-liste .es-zeile:first-child { border-top:0; }
.es-plus { width:30px; height:30px; border-radius:8px; background:var(--tint); color:var(--navy); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.es-favzeile { gap:9px; cursor:default; }
.es-stern-klein { display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0;
  margin-left:-5px; border:0; background:none; cursor:pointer; padding:0; }
.es-favbuchen { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-grow:1; min-width:0;
  text-align:left; border:0; background:none; cursor:pointer; padding:0; font:inherit; color:inherit; }
.es-favbuchen .links { display:flex; flex-direction:column; gap:2px; min-width:0; }
.es-mehr { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; padding:13px 0; border:0;
  border-top:1px solid var(--line-2); background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--teal); }
.es-mehr.es-mehr-frei { border-top:0; padding:10px 0 2px; color:var(--muted); }
.card.es-leer { margin-top:12px; display:flex; flex-direction:column; gap:5px; text-align:center; }
.card.es-leer b { font-size:14px; color:var(--ink); }
.card.es-leer span { font-size:12.5px; color:var(--muted); line-height:1.5; }
.es-kacheln { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.card.es-kachel { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer; padding:14px;
  font:inherit; color:inherit; margin-top:12px; }
.es-kacheln .card.es-kachel { margin-top:0; }
.es-kachel-ic { width:34px; height:34px; border-radius:9px; background:var(--card2); color:var(--muted); display:flex;
  align-items:center; justify-content:center; flex-shrink:0; }
.es-kachel-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
.es-kachel-tx b { font-size:14px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.es-kachel-tx span { font-size:12px; color:var(--muted); }

/* Mengenseite (RUNDE2 §4, DESIGN §3): Stern am Namen, Mahlzeit wechselbar, gruene Kachel als Vorschau. */
.es-mg-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:6px; }
.es-mg-titel { min-width:0; }
.es-mg-name { font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.3px; overflow-wrap:anywhere; }
.es-mg-unter { font-size:12.5px; font-weight:600; color:var(--muted); margin-top:2px; }
.es-stern { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border:0; background:none; cursor:pointer; border-radius:10px; padding:0; }
.es-mg-feld { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
  padding-top:10px; border-top:1px solid var(--line-2); }
.es-mg-feld > span { font-size:13px; font-weight:700; color:var(--muted); }
.es-mg-wahl { display:flex; align-items:center; gap:7px; border:0; background:none; cursor:pointer; font:inherit; padding:4px 0; }
.es-mg-wahl b { font-size:15px; font-weight:800; color:var(--navy); }
.es-tk-balken.teile { position:relative; overflow:visible; }
.es-tk-balken.teile div { border-radius:0; }
.es-tk-balken.teile div:first-child { border-radius:4px 0 0 4px; }
.es-tk-balken div.schon { background:rgba(255,255,255,.34); }
.es-tk-balken i.marke { position:absolute; top:-2px; bottom:-2px; width:2px; background:rgba(0,0,0,.55); border-radius:1px; }
.es-tk-satz b { font-weight:800; color:#fff; }
.es-vorschau .es-tk-satz { margin-top:-4px; }
.card.es-wn { margin-top:6px; padding:4px 14px; }
.es-wn-zeile { display:flex; justify-content:space-between; gap:10px; padding:9px 0; font-size:13px; }
.es-wn-zeile + .es-wn-zeile { border-top:1px solid var(--line-2); }
.es-wn-zeile span { color:var(--muted); font-weight:600; }
.es-wn-zeile b { color:var(--ink); font-weight:700; white-space:nowrap; }
/* Vertraeglichkeit (DESIGN §3.3): eine Zeile mit Urteil, die Liste klappt in derselben Karte auf. */
.card.es-vertr { margin-top:12px; padding:13px 14px; }
.es-vertr-kopf { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none;
  cursor:pointer; padding:0; font:inherit; color:inherit; }
.es-vertr-tx { display:flex; flex-direction:column; gap:1px; min-width:0; flex-grow:1; }
.es-vertr-tx b { font-size:14px; font-weight:700; color:var(--ink); }
.es-vertr-tx > span { font-size:12px; color:var(--muted); }
.es-vertr-tx .es-vertr-alle { color:var(--teal); font-weight:700; margin-top:3px; }
.es-vertr-liste { display:flex; flex-direction:column; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); }
/* Regel 4: worueber das Brueckenurteil spricht (Vertreter oder Warenart mit Sortenzahl). */
.es-vertr-ueber { font-size:12px; font-weight:600; color:#4B5563; line-height:1.45; }
.es-pg { display:flex; flex-direction:column; gap:4px; }
.es-rubrik.es-pg-nein { color:var(--warn-t); }
.es-rubrik.es-pg-ja { color:#3E9E6C; }
.es-pg-zeile { display:flex; align-items:center; gap:10px; padding:8px 0; }
.es-pg-zeile + .es-pg-zeile { border-top:1px solid var(--line-2); }
.es-pg-name { font-size:14px; font-weight:700; color:var(--ink); }
.es-pg-grund { flex-grow:1; text-align:right; font-size:12px; font-weight:700; color:var(--warn-t); }
.es-rubrik:not(.es-pg-nein):not(.es-pg-ja) ~ .es-pg-zeile .es-pg-grund { color:var(--muted-2); }
.es-deins { font-size:10px; font-weight:800; color:var(--teal); background:var(--tint); padding:2px 6px; border-radius:5px;
  text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
.es-tuerkis { color:var(--teal); }

/* Rezepte von Health Journey (RUNDE2 Runde 6, Prototyp .rd-*, .upille, .ugrund). */
.es-rz-block { margin-top:14px; padding:13px 14px; }
.es-rz-kopf { display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:none; padding:0;
  cursor:pointer; font:inherit; }
.es-rz-kopf .es-kachel-tx { flex-grow:1; }
.es-rz-kopf:focus-visible, .es-upille:focus-visible, .es-rz-stufe:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.es-rz-liste { margin-top:8px; border-top:1px solid var(--line-2); }
.es-rz-unter { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.es-rz-marke { font-size:10px; font-weight:800; color:var(--muted-2); background:var(--card2); padding:1px 5px; border-radius:4px;
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.es-rz-marke.nein { color:var(--warn-t); background:var(--amber-100); }
.es-chip-zahl { font-weight:800; opacity:.65; }
.es-rd-bild { position:relative; border-radius:18px; overflow:hidden; margin-bottom:14px; }
.es-rd-band { height:178px; background:linear-gradient(135deg,#15779B 0%,#6FCE78 100%); display:flex; align-items:center;
  justify-content:center; }
.es-rd-band span { font-size:54px; font-weight:800; color:rgba(255,255,255,.34); }
.es-rd-text { position:absolute; left:0; right:0; bottom:0; padding:34px 16px 13px; color:#fff;
  background:linear-gradient(to top, rgba(8,11,22,.86) 18%, rgba(8,11,22,0)); }
.es-rd-text .t { font-size:20px; font-weight:800; letter-spacing:-.4px; line-height:1.18; overflow-wrap:anywhere; }
.es-rd-text .u { font-size:12px; opacity:.86; margin-top:3px; }
.es-rz-pillen { display:flex; flex-wrap:wrap; gap:7px; }
.es-upille { display:inline-flex; align-items:center; gap:6px; border-radius:999px; font:inherit; font-size:12.5px; font-weight:700;
  padding:7px 13px; color:var(--navy); background:var(--card); border:1px solid var(--line); }
button.es-upille { cursor:pointer; }
.es-upille.nein { background:var(--amber-100); border-color:rgba(180,83,9,.34); color:var(--warn-t); }
.es-upille.offen { color:var(--muted); }
.es-upille.ja { color:#3E9E6C; border-color:rgba(62,158,108,.34); }
.es-upille.an { box-shadow:0 0 0 2px rgba(180,83,9,.22); }
.es-upille.offen.an { box-shadow:0 0 0 2px rgba(138,147,160,.3); }
.es-upille.ja.an { box-shadow:0 0 0 2px rgba(62,158,108,.28); }
.es-upille em { font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal);
  background:var(--tint); padding:1px 5px; border-radius:4px; }
.es-upille .zu { font-size:14px; line-height:1; opacity:.55; margin-left:1px; }
.es-upunkt { width:8px; height:8px; border-radius:999px; flex-shrink:0; display:inline-block; }
.es-upunkt.nein { background:var(--warn-t); }
.es-upunkt.offen { background:var(--muted-2); }
.es-upunkt.ja { background:#3E9E6C; }
.es-ulegende { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
.es-ulegende span { font-size:11px; color:var(--muted); font-weight:600; margin-right:9px; }
.es-ulegende b { color:var(--ink); }
.es-ugrund { margin-top:9px; padding:13px 15px; border:1px solid rgba(180,83,9,.3); }
.es-ugrund.offen { border-color:var(--line); }
.es-ugrund-kopf { font-size:12.5px; color:var(--muted); padding-bottom:9px; border-bottom:1px solid var(--line-2); line-height:1.45; }
.es-ugrund-kopf b { color:var(--ink); }
.es-ugrund-zeile { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; }
.es-ugrund-zeile + .es-ugrund-zeile { border-top:1px solid var(--line-2); }
.es-ugrund-name { font-size:13.5px; font-weight:700; color:var(--ink); }
.es-ugrund-wort { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--warn-t); background:var(--amber-100);
  padding:2px 7px; border-radius:999px; white-space:nowrap; }
.es-rz-stufen { display:flex; gap:7px; }
.es-rz-stufe { flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:11px 0; border-radius:999px;
  background:var(--card); border:1px solid var(--line); color:var(--muted); cursor:pointer; font:inherit; min-width:0; }
.es-rz-stufe b { font-size:15px; font-weight:700; }
.es-rz-stufe i { font-size:11px; font-weight:700; color:var(--muted-2); font-style:normal; white-space:nowrap; }
.es-rz-stufe.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.es-rz-stufe.on i { color:rgba(255,255,255,.78); }

/* ---- Ernaehrung: Auswertung Woche und Monat (RUNDE2 Runde 5, Prototyp .umschalter, .saeulen) ----
   Huelle im Hausformat (.card), Darstellung darin wie im Prototyp. */
.es-aw-umschalter { display:flex; background:var(--card2); border-radius:10px; padding:3px; gap:3px; margin:0 0 12px; }
.es-aw-umschalter button { flex:1 1 0; padding:9px 0; border:0; border-radius:8px; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted-2); }
.es-aw-umschalter button.an { background:var(--card); color:var(--navy); font-weight:700; box-shadow:0 1px 2px rgba(16,21,95,.08); }
.es-aw-umschalter button:focus-visible, .es-aw-wahl button:focus-visible, .es-aw-reihe button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.es-aw-titel { display:flex; flex-direction:column; gap:2px; margin:2px 2px 12px; font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.4px; }
.es-aw-titel span { font-size:12px; font-weight:600; color:var(--muted-2); letter-spacing:0; }
.card.es-aw-karte { display:flex; flex-direction:column; gap:14px; margin-top:12px; }
/* Schnitt je Tag: dieselbe gruene Kachel wie der Tageskopf (11.10.2026). */
.es-tageskopf.es-aw-schnitt { margin-top:12px; }
.es-aw-schnitt-titel { font-size:12px; font-weight:800; color:rgba(255,255,255,.80); text-transform:uppercase;
  letter-spacing:.7px; margin-bottom:-8px; }
.es-aw-schnitt .es-tk-satz { margin-top:0; }
.es-aw-rubrik { margin:18px 2px 0; }
.es-aw-rubrik + .card.es-aw-karte { margin-top:8px; }
.es-aw-kopf { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.es-aw-spalte { display:flex; flex-direction:column; gap:6px; min-width:0; }
.es-aw-spalte.rechts { align-items:flex-end; gap:3px; }
.es-aw-gross { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.es-aw-gross b { font-size:30px; font-weight:800; letter-spacing:-.8px; line-height:1.1; }
.es-aw-gross span { font-size:13px; font-weight:600; color:var(--muted-2); }
.es-aw-klein { font-size:12px; font-weight:700; color:var(--muted-2); }
.es-aw-abstand { font-size:13px; font-weight:800; }
.es-aw-leise { font-size:11.5px; font-weight:600; color:var(--muted-2); line-height:1.45; margin:0; }
.es-aw-makros { display:flex; flex-direction:column; gap:11px; }
.es-aw-makro { display:flex; flex-direction:column; gap:6px; }
.es-aw-mzeile { display:flex; align-items:baseline; justify-content:space-between; gap:5px; }
.es-aw-mname { font-size:12px; font-weight:700; color:var(--muted); }
.es-aw-mwert { font-size:12px; font-weight:700; color:var(--ink); }
.es-aw-mwert i { font-style:normal; color:var(--muted-2); font-weight:600; }
.es-aw-mwert.drueber, .es-aw-mwert.darunter { color:var(--bad-t); }
.es-aw-mwert.geschafft { color:#3E9E6C; }
.es-aw-balken { height:5px; background:var(--line-2); border-radius:3px; overflow:hidden; flex:1 1 auto; }
.es-aw-balken.dick { height:8px; border-radius:4px; }
.es-aw-balken div { height:100%; border-radius:inherit; }
/* Fuenf feste Kennzahlen als Raster: auf 390 px wird keine rechts abgeschnitten. */
.es-aw-wahl { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.es-aw-wahl button { padding:7px 2px; border:0; border-radius:8px; background:var(--card2); cursor:pointer; font:inherit;
  font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-aw-wahl button.an { background:var(--teal); color:var(--on-teal); }
.es-aw-saeulen { position:relative; height:186px; }
.es-aw-ziellinie { position:absolute; left:0; right:0; border-top:1px dashed var(--line); }
.es-aw-zielwort { position:absolute; right:0; font-size:10px; font-weight:700; color:var(--muted-2); background:var(--card); padding-left:5px; }
.es-aw-reihe { position:absolute; left:0; right:0; bottom:0; height:172px; display:flex; align-items:flex-end; justify-content:space-between; }
.es-aw-reihe button { flex:1 1 0; min-width:0; border:0; padding:0; border-radius:5px 5px 0 0; cursor:pointer; background:#6E4FBF; }
.es-aw-reihe button.heute { background:#C6D4E8; }
/* Angefangen, nicht zu Ende getrackt: gestreift, sichtbar da und erkennbar nicht mitgerechnet. */
.es-aw-reihe button.angefangen { background:repeating-linear-gradient(135deg,var(--line) 0 4px,var(--card2) 4px 8px); }
.es-aw-reihe button.leer { background:var(--line); }
.es-aw-tage { display:flex; justify-content:space-between; margin-top:-2px; }
.es-aw-tage span { flex:1 1 0; min-width:0; text-align:center; font-size:11px; font-weight:700; color:var(--muted-2); }
.es-aw-tage span.heute { color:var(--navy); font-weight:800; }
.es-aw-teil { display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line-2); padding-top:14px; }
.es-aw-teil.erst { border-top:0; padding-top:0; }
.es-aw-teil.reihe { flex-direction:row; align-items:center; flex-wrap:wrap; gap:7px; }
.es-aw-symzeile { display:flex; align-items:center; gap:10px; }
.es-aw-symzeile > span { font-size:13px; font-weight:600; color:var(--ink); width:104px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; }
.es-aw-symzeile > b { font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap; text-align:right; min-width:20px; }
.es-aw-pille { font-size:12px; font-weight:700; color:var(--muted); background:var(--card2); padding:4px 9px; border-radius:7px; }
.es-aw-befund { display:flex; flex-direction:column; gap:3px; }
.es-aw-befund > b { font-size:13.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.es-aw-nichts { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted); line-height:1.45; }
.es-aw-nichts svg { flex-shrink:0; margin-top:1px; }
.es-aw-hinweis { display:flex; gap:9px; padding:2px 4px; margin-top:12px; }
.es-aw-hinweis svg { flex-shrink:0; margin-top:2px; }
.es-aw-hinweis span { font-size:12px; color:var(--muted-2); line-height:1.45; }
/* ---------------- Trainingsprofil (Onboarding) ----------------
   Ein Formular fuer Onboarding und Bearbeiten. Auswahl ueber Chips (Einfach- und Mehrfach-
   auswahl), Tage als Zahlenreihe und Minuten als Stepper (beide teilen die Daily-Check-Optik). */
.fx-onb { text-align:center; }
.fx-onb .t { display:block; font-size:17px; font-weight:800; color:var(--navy); line-height:1.3; }
.fx-onb p { margin:8px 0 14px; font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; }
.fx-prof .btn { margin-top:0; }
.fx-field { margin-top:16px; }
.fx-field .lbl { display:block; font-size:13px; font-weight:800; color:var(--navy); margin:0 0 9px 2px; }
.fx-field .hint { margin:7px 2px 0; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.4; }
.fx-chips { display:flex; flex-wrap:wrap; gap:8px; }
.fx-chip { flex:0 0 auto; padding:9px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-family:inherit; font-size:13px; font-weight:700;
  cursor:pointer; transition:background .12s ease, color .12s ease, border-color .12s ease; }
.fx-chip:hover { border-color:var(--teal); color:var(--teal); }
.fx-chip.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.fx-chip:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
.fx-prof-status { margin:12px 2px 0; }

/* Satz-Vorgabe im laufenden Workout: ruhiger Hinweis ueber der Eingabezeile. */
.fx-sugg { margin:8px 0 2px; padding:9px 11px; border-radius:10px; background:var(--tint-2,#f3f6f8);
  font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.fx-sugg b { display:block; color:var(--navy); font-weight:800; }
.fx-sugg .gr { display:block; margin-top:2px; }

/* ---- Workout-Schirm (Bau-Block A4) ----
   Masse aus der Spezifikation Teil 3 des Entwicklerpakets, Farben aus den Tokens dieser App.
   Streifen oben (64er Kacheln), eine Karte fuer die laufende Uebung, Satztabelle mit baugleichen
   Zellen (Feld, Auswahl, fester Wert: dieselbe Hoehe, Zeilenhoehe, Innenabstand), Pausenuhr
   klebt unten im Schirm. Zahlen in Spalten mit tabellarischen Ziffern, sonst wandern sie. */
.fx-strip-kopf { margin:14px 2px 6px; font-size:12px; font-weight:700; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.fx-fort { height:4px; border-radius:99px; background:var(--line); overflow:hidden; margin:0 2px 10px; }
.fx-fort i { display:block; height:100%; background:var(--green); border-radius:99px; transition:width .3s ease; }
.fx-strip { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 8px; margin:0 -2px 4px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.fx-strip::-webkit-scrollbar { display:none; }
.fx-strip-k { position:relative; flex:none; width:64px; height:64px; padding:0; border-radius:10px;
  border:1.5px solid transparent; background:var(--card); box-shadow:var(--shadow-sm); cursor:pointer;
  display:grid; place-items:center; overflow:visible; }
/* Titelbild wie im Prototyp (`bild(x, 58)`): 58 px in der 64er Kachel, freigestellt (Alpha),
   `contain` statt `cover`, damit nichts abgeschnitten wird. Keine Nummer. */
.fx-strip-k img { width:58px; height:58px; object-fit:contain; border-radius:8px; display:block; }
.fx-strip-k .leer { width:58px; height:58px; border-radius:8px; background:var(--line); display:block; }
/* Rahmen sagt „hier bist du" (2,5 px) bzw. „schon ein Satz drin" (1,5 px + Haken). Zwei
   Unterscheidungen, damit die laufende Kachel nach dem ersten Satz nicht ihren Rahmen verliert. */
.fx-strip-k.dran { border-color:var(--teal); }
.fx-strip-k.lauf { border:2.5px solid var(--teal); }
.fx-strip-k .hk { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
  background:var(--teal); color:var(--on-teal); font-size:10px; font-weight:900; line-height:14px; text-align:center;
  border:2px solid var(--bg); }
.fx-strip-k.voll .hk { background:var(--green-d); }
.fx-strip-k.plus { border:1.5px dashed var(--muted-2); background:transparent; box-shadow:none;
  color:var(--muted); font-size:24px; font-weight:700; }
.fx-strip-k:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }

.fx-ueb { padding:16px; }
.fx-ueb-kopf { display:flex; align-items:center; gap:12px; }
.fx-ueb-bild { flex:none; width:52px; height:52px; border-radius:12px; object-fit:cover; background:var(--tint-2); }
.fx-ueb-bild.leer { display:grid; place-items:center; font-size:22px; }
.fx-ueb-kopf .tx { flex:1; min-width:0; }
.fx-ueb-kopf .tx b { display:block; font-size:16.5px; font-weight:800; color:var(--navy); line-height:1.25; }
.fx-ueb-kopf .tx span { display:block; margin-top:2px; font-size:12px; font-weight:600; color:var(--muted); }
.fx-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.fx-pill { flex:none; padding:7px 12px; border-radius:99px; border:1px solid var(--line); background:var(--tint-2);
  font-size:12.5px; font-weight:700; color:var(--navy); cursor:pointer; font-variant-numeric:tabular-nums; }
.fx-pill.on { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.fx-pill:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.fx-wu { margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--tint-2); }
.fx-wu-z { display:flex; align-items:center; gap:10px; padding:3px 0; font-variant-numeric:tabular-nums; }
.fx-wu-z .nr { width:18px; font-size:12px; font-weight:700; color:var(--muted-2); }
.fx-wu-z b { font-size:14px; color:var(--navy); }
.fx-wu p { margin:6px 0 8px; font-size:12px; font-weight:600; color:var(--muted); line-height:1.45; }

.fx-tab { margin-top:10px; }
.fx-tr { display:grid; grid-template-columns:22px 1fr 1fr 1fr 32px; gap:8px; align-items:center; min-height:41px; }
.fx-tr.kopf { align-items:start; min-height:0; padding-bottom:4px; font-size:9.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); text-align:center; }
.fx-tr.kopf .sub { display:block; margin-top:1px; font-size:9px; letter-spacing:.02em; text-transform:none; }
.fx-tr .nr { font-size:12px; font-weight:800; color:var(--muted-2); text-align:center; font-variant-numeric:tabular-nums; }
/* Baugleich: Feld, Auswahl und fester Wert. 36 px hoch, 1,5 px Rand, also Zeilenhoehe 32. */
.fx-zelle { display:block; width:100%; min-width:0; height:36px; margin:0; padding:0 4px; line-height:32px;
  border:1.5px solid transparent; border-radius:9px; font-family:inherit; font-size:16px; font-weight:700;
  text-align:center; text-align-last:center; color:var(--ink); font-variant-numeric:tabular-nums;
  background:transparent; -webkit-appearance:none; appearance:none; box-sizing:border-box; }
.fx-zelle.feld { background:var(--tint-2); border-color:var(--line); }
.fx-zelle.feld::placeholder { color:var(--muted-2); }
.fx-zelle.feld:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.fx-zelle::-webkit-outer-spin-button, .fx-zelle::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.fx-zelle[type=number] { -moz-appearance:textfield; }
.fx-tr.fertig .fx-zelle { color:var(--navy); }
.fx-tr.spaeter .fx-zelle { color:var(--muted-2); font-weight:600; }
.fx-hak { position:relative; justify-self:center; width:24px; height:24px; padding:0; border-radius:7px; border:1.5px solid var(--muted-2);
  background:transparent; color:#fff; font-size:13px; font-weight:900; line-height:21px; text-align:center; cursor:pointer; }
/* Trefferflaeche 38 x 38 px, unsichtbar: das Kaestchen bleibt 24 (Fabio, 29.09.). */
.fx-hak::after { content:''; position:absolute; left:-8.5px; right:-8.5px; top:-8.5px; bottom:-8.5px; }
.fx-tr.offen .fx-hak { border-color:var(--teal); }
.fx-hak.on { background:var(--teal); border-color:var(--teal); }
.fx-tr.spaeter .fx-hak { border-color:var(--line); cursor:default; }
span.fx-hak { cursor:default; }
.fx-hak:disabled { opacity:.5; }
.fx-hak:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.fx-satzknoepfe { display:flex; gap:8px; margin-top:8px; }
.fx-satzknoepfe button { flex:1; height:35px; border:0; border-radius:10px; background:var(--card2);
  color:var(--navy); font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.fx-satzknoepfe button:disabled { opacity:.45; cursor:default; }

/* Pausenuhr: schwebt ueber der Tab-Leiste, solange eine Pause laeuft. `fixed`, nicht `sticky`:
   gescrollt wird das Dokument, nicht .app, sticky bliebe am Ende der Seite haengen. Liegt im
   Workout-Schirm, ist also mit ihm ausgeblendet; der Platz darunter haelt die letzte Zeile frei. */
[data-hj="workout-body"] { padding-bottom:96px; }
.fx-uhr { position:fixed; left:50%; transform:translateX(-50%); width:min(428px, calc(100% - 32px));
  bottom:calc(74px + env(safe-area-inset-bottom)); z-index:25; padding:10px 12px 12px; border-radius:16px;
  background:var(--brand-bg); color:#fff; box-shadow:0 10px 26px rgba(16,21,95,.28); }
.fx-uhr[hidden] { display:none; }
.fx-uhr-bar { height:4px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; margin-bottom:9px; }
.fx-uhr-bar i { display:block; height:100%; background:var(--green); border-radius:99px; transition:width .45s linear; }
.fx-uhr-row { display:flex; align-items:center; gap:8px; }
.fx-uhr-row .lbl { font-size:12px; font-weight:700; opacity:.85; }
.fx-uhr-row .zeit { flex:1; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.fx-uhr-row .btn.sm { padding:8px 12px; }
.fx-uhr-row .btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.fx-uhr-row .btn:not(.ghost) { background:#fff; color:var(--brand); box-shadow:none; }
@media (prefers-reduced-motion: reduce) { .fx-fort i, .fx-uhr-bar i { transition:none; } }

/* ---- Workout-Schirm, Training Welle 2 (Helfer H2): Punkte 4, 5, 15 ----
   Satzzeile ohne Schrittknoepfe (Wdh./KG getippt), RIR mit (i), Menue unter der Karte, Blaetter,
   Tagleiste mit „+ Frei", Griff zum Ziehen. Nur .fxh2-Klassen; bestehende .fx-Regeln werden hier
   lediglich ergaenzt.
   Satzzeile nach den bindenden Massen (Punkt 5, 29.09.): Haken 24 x 24, Rand 1,5, Radius 7; Feld
   36 px; Zeile 41 px; Knoepfe fuer die Satzanzahl 35 px. Die Trefferflaeche des Hakens (38 px)
   kommt aus .fx-hak::after, sichtbar bleibt das Kaestchen 24. Die Satzzeile erbt diese Masse aus
   den .fx-Regeln oben und ueberschreibt sie hier nicht. */
.fxh2-tab select.fxh2-vorschlag { color:var(--muted); font-weight:600; }
/* Der Spaltenkopf RIR ist antippbar; die Flaeche reicht ueber den Kopf hinaus (44 px), ohne dass
   die drei Beschriftungen aus der Linie rutschen. */
.fxh2-rir { position:relative; border:0; background:none; padding:0; margin:0; font:inherit; color:var(--teal);
  letter-spacing:inherit; text-transform:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:3px; }
.fxh2-rir::after { content:''; position:absolute; left:-12px; right:-12px; top:-15px; bottom:-15px; }
.fxh2-i { display:inline-grid; place-items:center; width:13px; height:13px; border-radius:50%; border:1.2px solid currentColor;
  font-size:8.5px; font-weight:900; font-style:normal; letter-spacing:0; text-transform:none; line-height:1; }
.fxh2-rir:focus-visible { outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }
.fxh2-satzknoepfe button { height:35px; font-size:15px; }
.fxh2-pills .fx-pill { min-height:44px; padding:0 14px; }
.fxh2-pills .fx-pill.fxh2-an { border-color:var(--teal); color:var(--teal); }
.fxh2-leiter { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; margin:8px 2px 0; }
.fxh2-leiter:empty { display:none; }

/* Menue unter der Karte: ohne Karte, ohne Linien, eine Ebene hinter der Uebung. */
.fxh2-menue { margin:14px 0 4px; padding:0 6px; }
.fxh2-mp { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 4px; border:0; border-radius:10px;
  background:none; font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; }
.fxh2-mp:active { background:var(--tint-2); }
.fxh2-mp:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.fxh2-mp .ic { width:20px; flex:none; text-align:center; color:var(--muted-2); font-size:15px; }
.fxh2-mp.rot, .fxh2-mp.rot .ic { color:var(--bad-t); }

/* Tagleiste ueber dem Training: ein Chip je Tag, Haken fuer erledigte, „+ Frei" gestrichelt am Ende. */
.fxh2-tage { display:flex; gap:10px; overflow-x:auto; padding:6px 2px 10px; margin:0 -2px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; }
.fxh2-tage::-webkit-scrollbar { display:none; }
.fxh2-chip { position:relative; flex:none; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--card); font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap; }
.fxh2-chip.on { border-color:var(--teal); background:var(--tint); color:var(--navy); }
.fxh2-chip.frei { border-style:dashed; }
.fxh2-chip .ok { position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; border-radius:50%; background:var(--teal);
  color:var(--on-teal); font-size:10px; font-weight:900; line-height:18px; text-align:center; }
.fxh2-chip:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.fxh2-coach { background:var(--tint); border:1px solid var(--teal); border-radius:14px; padding:12px 14px; margin:0 0 10px; }
.fxh2-coach .l { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--teal); margin-bottom:4px; }
.fxh2-coach .t { font-size:14.5px; line-height:1.5; color:var(--ink); white-space:pre-wrap; }

/* Blatt von unten */
.fxh2-ov { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(16,21,95,.45); font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased; }
.fxh2-blatt { width:100%; max-width:520px; max-height:86vh; overflow:auto; background:var(--card); border-radius:20px 20px 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:var(--shadow); }
.fxh2-blatt-kopf { position:sticky; top:-8px; z-index:4; display:flex; align-items:center; gap:10px; padding:6px 0 10px;
  background:var(--card); }
.fxh2-blatt-kopf b { flex:1; font-size:17px; font-weight:800; color:var(--navy); }
.fxh2-x { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--tint-2); color:var(--navy);
  font-size:22px; line-height:1; cursor:pointer; }
.fxh2-hinweis { background:var(--tint-2); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin:0 0 10px;
  font-size:13.5px; line-height:1.5; color:var(--muted); }
.fxh2-hinweis b { color:var(--navy); }
.fxh2-opt { display:block; width:100%; min-height:48px; padding:12px 14px; margin:0 0 8px; border:1.5px solid transparent;
  border-radius:12px; background:var(--tint-2); font-family:inherit; font-size:15px; font-weight:700; color:var(--navy);
  text-align:left; cursor:pointer; font-variant-numeric:tabular-nums; }
.fxh2-opt.on { background:var(--tint); border-color:var(--teal); }
.fxh2-opt:disabled { opacity:.6; }
.fxh2-satz { font-size:14.5px; line-height:1.5; color:var(--ink); margin:0 0 12px; }
.fxh2-skala { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.fxh2-skala-z { display:flex; align-items:center; gap:11px; background:var(--tint-2); border-radius:10px; padding:9px 12px; }
.fxh2-skala-z .rz { width:26px; text-align:center; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; }
.fxh2-skala-z .rt { flex:1; font-size:14px; color:var(--muted); }
.fxh2-skala-z .rm { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--teal); }
.fxh2-skala-z.ziel { background:var(--tint); }
.fxh2-skala-z.ziel .rz, .fxh2-skala-z.ziel .rt { color:var(--navy); font-weight:800; }
.fxh2-feld { display:block; width:100%; min-height:44px; box-sizing:border-box; padding:10px 12px; margin:0 0 10px;
  border:1.5px solid var(--line); border-radius:10px; background:var(--card); font-family:inherit; font-size:16px; color:var(--ink); }
textarea.fxh2-feld { resize:vertical; line-height:1.45; }
.fxh2-feld:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.fxh2-gwkopf { display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.fxh2-gwkopf img, .fxh2-gwkopf .leer { flex:none; width:56px; height:56px; border-radius:12px; object-fit:contain; background:var(--tint-2); }
.fxh2-gwkopf b { display:block; font-size:15.5px; color:var(--navy); }
.fxh2-gwkopf span { display:block; font-size:12.5px; color:var(--muted); font-weight:600; }
.fxh2-gwfelder { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:4px; }
.fxh2-gwfelder label span { display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); margin:0 0 4px 2px; }
.fxh2-gwfelder .fxh2-feld { text-align:center; font-variant-numeric:tabular-nums; }
.fxh2-gwtitel { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin:16px 2px 8px; }
.fxh2-gwliste { max-height:220px; overflow:auto; border-radius:12px; background:var(--tint-2); padding:4px 0; }
.fxh2-gwliste div { padding:7px 14px; font-size:14px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }
.fxh2-maxkopf { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
.fxh2-maxkopf div { background:var(--tint-2); border-radius:12px; padding:10px 12px; }
.fxh2-maxkopf span { display:block; font-size:11px; font-weight:800; color:var(--muted); }
.fxh2-maxkopf b { display:block; font-size:18px; color:var(--navy); font-variant-numeric:tabular-nums; }
/* Uebungshistorie je Einheit (Prototyp histkarten): waagerecht blaettern, Karte fuehrt in die Zusammenfassung */
.fxh2-histtitel { font-weight:800; font-size:16px; color:var(--navy); margin:16px 0 10px; }
.fxh2-histkarten { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.fxh2-histkarten::-webkit-scrollbar { display:none; }
.fxh2-histkarte { flex:none; display:flex; flex-direction:column; justify-content:flex-start; min-width:150px; background:var(--card2); border:0; border-radius:12px; padding:12px;
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.fxh2-histkarte .d { display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.fxh2-histkarte table { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.fxh2-histkarte th { color:var(--muted); font-weight:600; font-size:11px; text-align:right; padding:0 0 4px 8px; }
.fxh2-histkarte td { text-align:right; padding:1px 0 1px 8px; }
.fxh2-leer { font-size:14px; color:var(--muted); font-weight:600; margin:6px 2px 12px; }

/* Reihenfolge: eigener Behaelter nur fuer die Karten, gezogen wird am Griff. Nur der Griff traegt
   touch-action:none, die Liste bleibt scrollbar. Abstand = FXH2_LUECKE in app.js. */
.fxh2-liste { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.fxh2-karte { position:relative; display:flex; align-items:center; gap:6px; padding:0 6px 0 0; border:1px solid var(--line);
  border-radius:12px; background:var(--card); }
.fxh2-karte:not(.zieht) { transition:transform .16s ease; }
.fxh2-karte.dies { background:var(--tint-2); }
.fxh2-karte.zieht { z-index:3; box-shadow:0 10px 24px -8px rgba(16,21,95,.35); }
.fxh2-zeile { flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:56px; padding:6px 0 6px 8px; border:0;
  background:none; font-family:inherit; text-align:left; cursor:pointer; }
.fxh2-zeile img, .fxh2-zeile .leer { flex:none; width:40px; height:40px; border-radius:8px; object-fit:contain; background:var(--tint-2); }
.fxh2-zeile .tx { flex:1; min-width:0; font-size:14px; font-weight:700; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fxh2-griff { flex:none; width:44px; height:44px; display:grid; place-items:center; color:var(--muted-2); font-size:18px;
  touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; }
.fxh2-griff:active { cursor:grabbing; color:var(--muted); }
.fxh2-sort { flex:none; display:flex; gap:4px; }
.fxh2-sort button { width:44px; height:44px; border:0; border-radius:10px; background:var(--tint-2); color:var(--navy);
  font-size:17px; font-weight:800; cursor:pointer; }
.fxh2-sort button:disabled { opacity:.3; cursor:default; }
@media (prefers-reduced-motion: reduce) { .fxh2-karte:not(.zieht) { transition:none; } }

/* ---------------- Daily Check v2 ----------------
   Eine Frage je Schirm (Bau-Block C). Optik aus den App-Tokens, nicht aus Fabios Schirmen.
   Kein Fortschrittsbalken und keine Restzeit: oben nur ein Strich je Frage (voll = beantwortet,
   jetzt = dieser Schirm, sonst offen). Die Icons zeichnen mit currentColor und bekommen hier die
   App-Farbe. Stufenknoepfe mindestens 44 px hoch, sie teilen sich die Zeile (flex:1 1 0). */
.dc-kopf { display:flex; align-items:baseline; gap:8px; margin:2px 2px 10px; }
.dc-kopf b { font-size:15px; font-weight:800; color:var(--navy); }
.dc-kopf span { font-size:11.5px; font-weight:700; color:var(--muted); }
.dc-faden { display:flex; gap:4px; margin:0 2px 12px; }
.dc-faden i { flex:1 1 0; height:4px; border-radius:2px; background:var(--line); }
.dc-faden i.voll { background:var(--teal); }
.dc-faden i.jetzt { background:var(--navy-soft); opacity:.45; }
.dc-schirm { padding:20px 18px 16px; }
.dc-frage { margin-bottom:16px; }
.dc-frage b { display:block; font-size:18px; font-weight:800; color:var(--navy); line-height:1.35; letter-spacing:-.2px; }
.dc-frage span { display:block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45; }
.dc-icon { display:grid; place-items:center; margin:4px 0 14px; color:var(--navy); }
.dc-icon svg { width:72px; height:72px; }
.dc-icon.leer { color:var(--muted-2); }

.dc-scale { display:flex; gap:6px; }
.dc-pip { flex:1 1 0; min-width:0; min-height:44px; padding:8px 4px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--navy);
  font-family:inherit; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;
  transition:background .12s ease, color .12s ease, border-color .12s ease; }
.dc-pip:hover { border-color:var(--teal); color:var(--teal); }
.dc-pip.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.dc-pip:focus-visible, .dc-chip:focus-visible, .dc-stepbtn:focus-visible { outline:2px solid var(--navy); outline-offset:1px; }
.dc-enden { display:flex; justify-content:space-between; gap:12px; margin-top:8px;
  font-size:11.5px; font-weight:700; color:var(--muted); }
.dc-enden span:last-child { text-align:right; }

.dc-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dc-chips.lang { flex-direction:column; flex-wrap:nowrap; }
.dc-chip { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--navy);
  font-family:inherit; font-size:14px; font-weight:700; text-align:left; }
.dc-chip em { font-style:normal; font-weight:800; color:var(--muted); min-width:14px; font-variant-numeric:tabular-nums; }
.dc-chip:hover { border-color:var(--teal); }
.dc-chip.on { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.dc-chip.on em { color:#fff; }
/* Bristol (N-05): die Figur links in der Zeile, 38 x 21 px. Gewaehlt bleibt sie auf hellem Grund lesbar. */
.dc-bristol { flex:none; width:38px; height:21px; display:block; border-radius:5px; }
.dc-bristol svg { display:block; width:38px; height:21px; }
.dc-chip.on .dc-bristol { background:rgba(255,255,255,.92); }

.dc-step { display:flex; align-items:center; justify-content:center; gap:14px; }
.dc-stepbtn { width:48px; height:48px; flex:none; cursor:pointer; border:1px solid var(--line);
  border-radius:12px; background:var(--card); color:var(--navy); font-family:inherit; font-size:22px; font-weight:800; }
.dc-stepbtn:hover { border-color:var(--teal); color:var(--teal); }
.dc-stepval { min-width:52px; text-align:center; font-size:26px; font-weight:800; color:var(--navy);
  font-variant-numeric:tabular-nums; }
.dc-unit { font-size:13px; font-weight:700; color:var(--muted); }

.dc-num { display:flex; align-items:center; gap:9px; }
.dc-num input { flex:1 1 0; min-width:0; padding:12px; border:1px solid var(--line);
  border-radius:12px; background:var(--card); font-family:inherit; font-size:18px; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.dc-num input:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }

.dc-note { width:100%; box-sizing:border-box; padding:12px; border:1px solid var(--line);
  border-radius:12px; background:var(--card); font-family:inherit; font-size:16px; font-weight:600;
  color:var(--ink); line-height:1.45; resize:vertical; }
.dc-note:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.dc-note::placeholder { color:var(--muted-2); font-weight:600; }
.dc-note-hinweis { margin:8px 2px 0; font-size:13px; }

/* Feldkarte der Modul-Frageboegen (HJM.dcFeldKarte), unveraendert aus dem ersten Daily Check. */
.dc-field { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px 14px; box-shadow:var(--shadow-sm); }
.dc-q { margin-bottom:10px; }
.dc-q b { display:block; font-size:14px; font-weight:800; color:var(--navy); line-height:1.35; }
.dc-q span { display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.4; }

.dc-status { min-height:16px; margin:12px 2px 0; font-size:12px; font-weight:700; color:var(--muted); }
.dc-status.err { color:var(--red); }
.dc-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; }
.dc-nav .btn.sm { min-width:44px; }
.dc-ende .dc-satz { font-size:16px; font-weight:700; color:var(--navy); line-height:1.5; margin:0; }
/* Nachtragen: eine ruhige Zeile, kein Hinweis, dass etwas fehlt (§13). */
.dc-nachtrag { display:block; width:100%; margin-top:12px; padding:10px 4px; border:0; background:none;
  text-align:left; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted); }
.dc-nachtrag:hover { color:var(--teal); }
/* Uebersprungen (angesehen, bewusst leer, N-06): erledigt, aber nicht beantwortet. */
.dc-faden i.leer { background:var(--teal); opacity:.35; }

/* Kalender im Check (N-08): voll, teilweise, Luecke. Drei Darstellungen, keine Wertung.
   Eckiger Punkt = nachgetragen. Aeltere Tage grau und gesperrt, sichtbar bleiben sie. */
.dc-kopf .dc-kal-knopf { margin-left:auto; align-self:center; min-height:36px; padding:6px 12px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--navy);
  font-family:inherit; font-size:12.5px; font-weight:800; }
.dc-kopf .dc-kal-knopf.an { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.dc-kopf .dc-kal-knopf:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.dc-kal { padding:12px 12px 14px; margin-bottom:12px; }
.dc-kal .fxk-raster { margin-bottom:8px; }
.dc-kal .fxk-tag i.dc-p, .dc-kal-legende i.dc-p { width:8px; height:8px; border-radius:50%; }
.dc-p.voll { background:var(--teal); }
.dc-p.teilweise { background:transparent; box-shadow:inset 0 0 0 1.5px var(--teal); }
.dc-p.luecke { background:var(--line); }
.dc-kal .fxk-tag i.dc-p.nach, .dc-kal-legende i.dc-p.nach { border-radius:1.5px; }
.dc-kal .fxk-tag.dc-k-alt, .dc-kal .fxk-tag.dc-k-ohne { color:var(--muted-2); cursor:default; }
.dc-kal .fxk-tag.dc-k-alt i.dc-p { opacity:.55; }
.dc-kal-legende { display:flex; flex-wrap:wrap; gap:6px 14px; margin:2px 2px 6px; font-size:12px; font-weight:700; color:var(--muted); }
.dc-kal-legende span { display:inline-flex; align-items:center; gap:6px; }
.dc-kal-text { margin:4px 2px 0; font-size:12px; font-weight:600; color:var(--muted); line-height:1.45; }

/* Uebungsdetail: Haupt- und Nebenmuskulatur als zwei benannte Zeilen */
.fx-muskeln .fx-muskel-zeile + .fx-muskel-zeile { margin-top: 10px; }

/* =====================================================================
 * APP-EBENE + STRESSMASTER (Chip 5e). Nur App-Tokens (--navy, --teal, --green, --r ...),
 * Fabios Screens sind Vorlage fuer Aufbau und Ablauf, nicht fuer Farben und Schrift.
 * Praefix ae- = App-Ebene (app-ebene.js), gilt fuer jedes spaetere Modul.
 * ===================================================================== */
.ae-phase { font-size:11.5px; font-weight:800; color:var(--teal); text-transform:uppercase; letter-spacing:.6px; margin:14px 0 4px; }
.ae-phase .ae-zahl { float:right; color:var(--muted-2); letter-spacing:0; text-transform:none; }
.ae-modulkopf { margin:6px 0 12px; }
.ae-modulkopf .ae-phase { margin-top:4px; }
.ae-stitel { font-size:21px; font-weight:900; color:var(--navy); line-height:1.25; letter-spacing:-.3px; margin:0 0 6px; }
.ae-sunter { font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.ae-hinweis { font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.55; margin:12px 2px; }
.ae-notiz { background:var(--tint-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px;
  font-size:13px; font-weight:600; color:var(--ink); line-height:1.55; margin:12px 0; }
.ae-notiz b { color:var(--navy); }
.ae-notiz.warn { background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.4); }
.ae-anpassen { margin-top:12px; }
.ae-leise { display:block; margin:14px auto 4px; border:0; background:none; color:var(--muted); font-size:12.5px;
  font-weight:700; text-decoration:underline; cursor:pointer; font-family:inherit; }
.ae-mitte { justify-content:center; text-align:center; }
.ae-text { font-size:13.5px; line-height:1.6; font-weight:600; color:var(--ink); margin-top:12px; }
.ae-gruppe { padding:4px 16px; }
.ae-zeile { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.ae-zeile:last-child { border-bottom:0; }
.ae-zeile .nm { flex:1; min-width:0; font-size:14px; font-weight:800; color:var(--ink); }
.ae-zeile .nm small { display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:2px; }
.ae-zeile .wt { flex:none; min-width:58px; text-align:right; font-size:13px; font-weight:800; color:var(--navy); }
.ae-grenzliste .nm { font-weight:700; font-size:13.5px; line-height:1.45; }

.ae-chips { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.ae-chip { border:1px solid var(--line); background:var(--card); border-radius:999px; padding:8px 14px; font-weight:800;
  font-size:12.5px; color:var(--muted); cursor:pointer; font-family:inherit; font-style:normal; }
.ae-chip.on { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.ae-chip.statisch { cursor:default; padding:4px 10px; font-size:11.5px; background:var(--tint); border-color:transparent; color:var(--navy); }

/* Stufenfarben: hoch = rot, mittel = teal, niedrig = grau. Bernstein bleibt Warnungen vorbehalten. */
.st-hoch { color:var(--red); } .st-mittel { color:var(--teal); } .st-niedrig { color:var(--muted-2); } .st-gut { color:var(--green-d); }
i.st-hoch { background:var(--red); } i.st-mittel { background:var(--teal); } i.st-niedrig { background:var(--muted-2); }
i.st-gut { background:var(--green); }
.ae-spur { display:block; height:6px; border-radius:4px; background:var(--line-2); margin-top:7px; overflow:hidden; }
.ae-spur i { display:block; height:100%; border-radius:4px; }
.ae-marke { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; color:#fff; background:var(--muted-2); }
.ae-marke.st-hoch { background:var(--red); color:#fff; } .ae-marke.st-mittel { background:var(--teal); color:var(--on-teal); }
.ae-marke.st-niedrig { color:#fff; } .ae-marke.st-gut { background:var(--green-d); color:#fff; }

/* Heute + Woche */
/* Kopfbox Stressmaster (Punkt 8, Fabio 30.09.): 178 px wie das Training. Oben der Tag und der
   Wochenkreis (52 px), unten sieben Kacheln (44 px) mit Kuerzel. Farben nur Weiss, Mint, Verlauf. */
.ae-heute { margin-bottom:12px; min-height:178px; box-sizing:border-box; display:flex; flex-direction:column;
  justify-content:space-between; --ae-mint:#A8F0B4; }
.ae-hoben { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ae-heute p.ae-hzahl { margin:0; font-size:15px; font-weight:700; opacity:1; line-height:1.1; }
.ae-hzahl b { font-size:30px; font-weight:900; line-height:1; }
.ae-heute p.ae-hunter { margin:3px 0 0; font-size:12px; line-height:1.3; }
.ae-wkreis { position:relative; width:52px; height:52px; flex:none; }
.ae-wkreisbox { display:flex; align-items:center; gap:8px; flex:none; }
.ae-wkreistext { font-size:11px; font-weight:800; line-height:1.2; color:rgba(255,255,255,.8); text-align:right; }
.ae-wkreis svg { display:block; transform:rotate(-90deg); }
.ae-wkreis circle { fill:none; stroke-width:6; }
.ae-kspur { stroke:rgba(255,255,255,.22); }
.ae-kbogen { stroke:var(--ae-mint); stroke-linecap:round; }
.ae-kzahl { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.ae-kzahl b { color:#FFFFFF; font-size:16px; font-weight:900; }
.ae-kzahl small { color:rgba(255,255,255,.8); font-size:8.5px; font-weight:700; margin-top:1px; }
.ae-wtage { display:flex; gap:6px; margin-top:14px; }
.ae-wtag { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.ae-wkachel { position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:44px;
  border-radius:7px; overflow:hidden; background:rgba(255,255,255,.13); }
.ae-wkachel i { display:block; width:100%; background:var(--ae-mint); }
.ae-wkachel::after { content:""; position:absolute; inset:0; border-radius:7px; pointer-events:none; }
.ae-wtag.offen .ae-wkachel::after { box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
.ae-wtag.jetzt .ae-wkachel::after { box-shadow:inset 0 0 0 2px #FFFFFF; }
.ae-wname { font-size:10.5px; font-weight:800; line-height:12px; text-align:center; color:rgba(255,255,255,.75); }
.ae-wtag.jetzt .ae-wname { color:#FFFFFF; }
.ae-serie { margin:4px 0 10px; font-size:13px; color:var(--muted); }
.ae-serie b { color:var(--navy); }

.ae-sofort { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; margin:0 0 12px;
  border:1px solid var(--line); background:var(--card); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow-sm); font-family:inherit; }
.ae-sofort .nm { flex:1; min-width:0; }
.ae-sofort .nm b { display:block; font-size:14.5px; font-weight:800; color:var(--navy); }
.ae-sofort .nm span { font-size:12px; font-weight:600; color:var(--muted); }
.ae-sofort .chev, .ae-ergebniskarte .chev { color:var(--muted-2); font-size:20px; }
.ae-sym { display:inline-grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--tint); color:var(--teal); }
.ae-karte { background:var(--card); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r);
  padding:14px 16px; margin:0 0 12px; font-size:13px; font-weight:600; line-height:1.5; color:var(--ink); }
.ae-karte-mess { border-left-color:var(--green); }
.ae-karte > b { display:block; font-size:15px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.ae-karte ul { margin:8px 0; padding-left:18px; }
.ae-karte .btn { margin-top:8px; }
.ae-ergebniskarte { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; margin:0 0 12px; font-family:inherit; }
.ae-ergebniskarte .ek { flex:1; min-width:0; }
.ae-ergebniskarte .ek > b { display:block; font-size:15px; font-weight:800; color:var(--navy); }
.ae-ergebniskarte .ek > span { font-size:12px; font-weight:600; color:var(--muted); }
.ae-ergebniskarte .ae-chips { margin:6px 0 0; gap:5px; }
.ae-thermo { flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; }
.ae-thermo > b { font-size:20px; font-weight:900; line-height:1; }
.ae-thermo .rohr { width:10px; height:40px; border-radius:6px; background:var(--line-2); display:flex; align-items:flex-end; overflow:hidden; }
.ae-thermo .rohr i { display:block; width:100%; border-radius:6px; }
.ae-thermo .tvon { font-size:10px; font-weight:700; color:var(--muted-2); }

.ae-reiter { margin-top:6px; }
.ae-planzeile { width:100%; text-align:left; background:none; border-left:0; border-right:0; border-top:0; font-family:inherit; }
.ae-planzeile.tippbar { cursor:pointer; }
.ae-ksym { color:var(--teal); }
.ae-ksym.fertig { background:rgba(111,206,120,.18); color:var(--green-d); }
.li .tx .ae-zustand { display:block; }
.li .tx .ae-zustand.faellig { color:var(--teal); font-weight:800; }
.li .tx .ae-zustand.fertig { color:var(--green-d); }
.li .tx .ae-wbilanz { display:block; color:var(--green-d); font-weight:700; }
.ae-mitlauf { flex:none; font-size:11px; font-weight:700; color:var(--muted); cursor:pointer; }
.li .tx .ae-taktstand { display:block; color:var(--muted); }
.li .tx .ae-taktstand.fertig { color:var(--green-d); }
.ae-plan .li .tx b { line-height:1.3; }
/* Plankarte mit Haeufigkeitswahl: die Zeile startet die Uebung, „Wie oft?" ist ein eigener Knopf. */
.ae-planmitwahl { gap:8px; }
.ae-planstart { display:flex; align-items:center; gap:13px; flex:1; min-width:0; background:none; border:0; padding:0;
  text-align:left; font-family:inherit; color:inherit; }
.ae-planstart.tippbar { cursor:pointer; }
.ae-hfknopf { flex:none; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 10px; font-size:11.5px;
  font-weight:800; color:var(--navy); cursor:pointer; font-family:inherit; }
.ae-hfknopf.on { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.ae-hfbox { padding:2px 0 12px; border-bottom:1px solid var(--line-2); }
.ae-hfbox .ae-hfwahl { margin:0; box-shadow:none; }
.ae-hfwahl .ae-leise { margin:10px 0 0; }

/* Resilienzring (Auswertung, Reiter Ressourcen): der Ring der App, auf weisser Karte. */
.ae-resilienz { padding:16px; margin-bottom:12px; }
.ae-reskopf { display:flex; align-items:center; gap:16px; }
.ae-resring { width:96px; height:96px; margin:0; flex:none;
  background:conic-gradient(var(--green) calc(var(--p)*1%), var(--line-2) 0); }
.ae-resring .inner { width:76px; height:76px; }
.ae-resring .inner b { font-size:21px; }
.ae-restext { flex:1; min-width:0; }
.ae-restext b { display:block; font-size:15px; font-weight:800; color:var(--navy); }
.ae-restext span { font-size:12.5px; font-weight:600; color:var(--muted); }
.ae-resilienz .ae-gruppe { padding:6px 0 0; }
.ae-saeule.zaehltnicht .nm { color:var(--muted); }
.ae-resohne { flex:0 1 auto; max-width:60%; font-size:12px; font-weight:600; color:var(--muted); text-align:right; }
.ae-reslink { background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--teal); cursor:pointer; text-decoration:underline; }
.ae-resfuss { margin:10px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.ae-resfuss b { color:var(--navy); }

/* Profil (bipolar) */
.ae-pol { padding:12px 0; border-bottom:1px solid var(--line-2); }
.ae-pol:last-child { border-bottom:0; }
.ae-polkopf { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; }
.ae-polkopf b { color:var(--navy); font-weight:800; }
.ae-polkopf span { color:var(--muted); font-weight:700; font-size:12px; }
.ae-polspur { position:relative; height:10px; border-radius:6px; background:var(--line-2); margin:8px 0 5px; }
.ae-polspur .ziel { position:absolute; top:0; bottom:0; background:rgba(111,206,120,.35); border-radius:6px; }
.ae-polspur .mitte { position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--muted-2); }
.ae-polspur .zeiger { position:absolute; top:-4px; width:4px; height:18px; border-radius:3px; background:var(--navy); }
.ae-polfuss { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--muted-2); }

/* Vergleich vorher/heute */
.ae-vgkarte { text-align:center; }
.ae-vgoben { display:flex; align-items:center; justify-content:space-around; }
.ae-vgzahl b, .ae-vgweg b { display:block; font-size:30px; font-weight:900; line-height:1.1; }
.ae-vgzahl span, .ae-vgweg span { font-size:11px; font-weight:700; color:var(--muted-2); }
.ae-vgdiff.besser { color:var(--green-d); } .ae-vgdiff.schlechter { color:var(--red); } .ae-vgdiff.gleich { color:var(--muted-2); }
.ae-vgzeile { display:flex; align-items:center; gap:10px; padding:9px 0; text-align:left; }
.ae-vgnm { width:38%; font-size:12.5px; font-weight:800; color:var(--ink); }
.ae-vgbalken { position:relative; flex:1; height:8px; border-radius:5px; background:var(--line-2); }
.ae-vgbalken i { position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--muted-2); }
.ae-vgbalken i.besser { background:var(--green); } .ae-vgbalken i.schlechter { background:var(--red); }
.ae-vgbalken u { position:absolute; top:-3px; width:2px; height:14px; background:var(--navy); text-decoration:none; }
.ae-vgzeile .ae-vgdiff { width:36px; text-align:right; font-size:12px; font-weight:800; }

/* Rueckblick */
.ae-rbsumme { font-size:12px; font-weight:700; color:var(--muted); margin:4px 2px 10px; }
.ae-rbtag { padding:0; overflow:hidden; }
.ae-rbkopf { display:flex; align-items:center; gap:10px; width:100%; padding:13px 16px; border:0; background:none; cursor:pointer; font-family:inherit; text-align:left; }
.ae-rbdatum { flex:1; font-size:14px; font-weight:800; color:var(--navy); }
.ae-rbdatum small { margin-left:8px; font-size:11.5px; color:var(--muted-2); font-weight:700; }
.ae-rbzahl { font-size:11.5px; font-weight:700; color:var(--muted); }
.ae-rbpfeil { color:var(--muted-2); font-size:18px; transition:transform .15s ease; }
.ae-rbtag.offen .ae-rbpfeil { transform:rotate(90deg); }
.ae-rbinhalt { display:none; padding:0 16px 10px; }
.ae-rbtag.offen .ae-rbinhalt { display:block; }
.ae-rbeintrag { border-top:1px solid var(--line-2); padding-top:10px; margin-top:4px; }
.ae-rbname { display:flex; align-items:center; gap:10px; margin:0 0 6px; font-weight:800; color:var(--ink); font-size:13.5px; }
.ae-rbname .ae-sym { width:30px; height:30px; border-radius:9px; }
.ae-rbname small { display:block; font-size:11.5px; color:var(--muted); font-weight:600; }
.ae-rbzeile { margin:6px 0; }
.ae-rbfrage { margin:0; font-size:11.5px; font-weight:800; color:var(--muted); }
.ae-rbtext { margin:2px 0 0; font-size:13.5px; font-weight:600; color:var(--ink); white-space:pre-wrap; line-height:1.5; }
.ae-rbzeile.erledigt .ae-rbtext { text-decoration:line-through; color:var(--muted); }
.ae-rbeintrag .ae-leise { margin:6px 0 0; }

/* Uebung */
.ae-uebungscreen { padding-bottom:0; }
.ae-uebung { display:flex; flex-direction:column; min-height:calc(100vh - 150px); }
.ae-ublatt { flex:1; }
.ae-ufuss { position:sticky; bottom:0; display:flex; gap:10px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--bg); }
.ae-ufuss .btn { flex:1; }
.ae-utitel { font-size:20px; font-weight:900; color:var(--navy); margin:10px 0 6px; line-height:1.25; }
.ae-utext { font-size:13.5px; font-weight:600; color:var(--muted); line-height:1.55; margin:0 0 12px; }
.ae-usymbol { display:grid; place-items:center; width:64px; height:64px; border-radius:20px; background:var(--tint); color:var(--teal); margin:10px 0 4px; }
.ae-udauer { display:inline-block; padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--navy); font-size:12px; font-weight:800; margin-bottom:10px; }
.ae-ukarte { margin:12px 0; }
.ae-ukarte h4 { margin:0 0 8px; font-size:13px; font-weight:800; color:var(--navy); }
.ae-ukarte ol, .ae-ukarte ul { margin:0; padding-left:20px; font-size:13.5px; font-weight:600; line-height:1.6; color:var(--ink); }
.ae-takt { display:flex; flex-wrap:wrap; gap:6px; }
.ae-takt span { padding:5px 10px; border-radius:999px; background:var(--tint); color:var(--navy); font-size:12px; font-weight:800; }
.ae-uwahl { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; margin:0 0 8px; font-family:inherit;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 14px; }
.ae-uwahl .ut { flex:1; min-width:0; }
.ae-uwahl .ut b { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.ae-uwahl .ut span { font-size:12px; font-weight:600; color:var(--muted); }
.ae-uwahl .ae-uhaken, .ae-baustein .ae-uhaken { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line);
  display:grid; place-items:center; color:transparent; font-size:13px; }
.ae-uwahl.on { border-color:var(--teal); background:var(--tint-2); }
.ae-uwahl.on .ae-uhaken, .ae-baustein.on .ae-uhaken { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.ae-ufeld { margin:12px 0; }
.ae-ufeld label { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:var(--navy); margin-bottom:7px; }
.ae-ufeld .nr { display:inline-grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--tint); color:var(--teal); font-size:11.5px; }
.ae-ufeld textarea, .ae-uzeile { width:100%; box-sizing:border-box; padding:11px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); line-height:1.45; }
.ae-ufeld textarea { resize:vertical; }
.ae-ufeld textarea:focus, .ae-uzeile:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.ae-zaehler { text-align:right; font-size:11px; font-weight:700; color:var(--muted-2); margin-top:3px; }
.ae-upunkt { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); margin:0 0 8px; padding:4px 36px 4px 4px; position:relative; }
.ae-upunkt .ae-uzeile { margin:0 0 8px 46px; width:calc(100% - 46px); }
.ae-upunktknopf { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; background:none; cursor:pointer; text-align:left; font-family:inherit; }
.ae-upunktknopf .ul { flex:1; min-width:0; }
.ae-upunktknopf .ul b { display:block; font-size:14px; font-weight:800; color:var(--ink); }
.ae-upunktknopf .ul span { font-size:12px; font-weight:600; color:var(--muted); }
.ae-ukasten, .ae-uplay { flex:none; width:26px; height:26px; border-radius:8px; border:2px solid var(--line); display:grid; place-items:center; color:transparent; }
.ae-uplay { border-radius:50%; background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
.ae-upunkt.an .ae-ukasten { background:var(--green); border-color:var(--green); color:#fff; }
.ae-upunkt.an .ul b { text-decoration:line-through; color:var(--muted); }
.ae-upunktknopf .ul .ae-uart { display:block; margin-top:3px; font-size:10.5px; font-weight:800; color:var(--teal); }
.ae-udauerchen { flex:none; font-size:11.5px; font-weight:800; color:var(--muted); }
.ae-pweg { position:absolute; top:10px; right:6px; width:28px; height:28px; border:0; background:none; color:var(--muted-2); font-size:20px; cursor:pointer; }
.ae-pneu { display:flex; gap:8px; margin:10px 0; }
.ae-pneu .ae-uzeile { flex:1; }
.ae-uunter { font-size:12px; font-weight:700; color:var(--muted); text-align:center; margin:8px 0 0; }
.ae-tagereihe { display:flex; gap:6px; }
.ae-tagchip { flex:1; min-width:0; padding:10px 0; border-radius:10px; border:1px solid var(--line); background:var(--card); font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer; font-family:inherit; }
.ae-tagchip.on { background:var(--prim); border-color:var(--prim); color:var(--prim-ink); }
.ae-tagzeit { display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.ae-tagzeit span { width:96px; flex:none; font-size:13px; font-weight:700; color:var(--ink); }
.ae-uzeit { display:flex; gap:8px; }
.ae-kennzahl { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.ae-kennzahl:last-child { border-bottom:0; }
.ae-kennzahl span { color:var(--muted); font-weight:700; }
.ae-kennzahl b { color:var(--navy); font-weight:800; text-align:right; }
.ae-ufertig { text-align:center; padding:16px 0 4px; }
.ae-grosshaken { display:grid; place-items:center; width:64px; height:64px; margin:0 auto; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff; }
.ae-grosshaken svg { width:32px; height:32px; }
.ae-ef { margin:8px 0 0; font-size:11.5px; font-weight:800; color:var(--muted); }
.ae-et { margin:2px 0 0; font-size:13.5px; font-weight:600; color:var(--ink); white-space:pre-wrap; line-height:1.5; }
.ae-wfrage { margin:16px 0 8px; text-align:center; }
.ae-wknoepfe { display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.ae-wdank { font-size:12.5px; font-weight:700; color:var(--green-d); margin:8px 0 0; }

/* Laufender Timer: Szene mit Schleier, weisse Schrift, der Kreis atmet mit */
.ae-uebung.dunkel { position:relative; margin:-8px -20px 0; padding:0 20px; color:#fff; background:var(--brand-bg); overflow:hidden; }
.ae-uebung.dunkel .ae-ufuss { background:transparent; position:relative; z-index:2; }
.ae-uebung.dunkel .btn { background:#fff; color:var(--brand); box-shadow:none; }
.ae-uebung.dunkel .btn.ghost { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.ae-szene { position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,var(--brand),var(--brand-teal)) center/cover no-repeat; }
.ae-schleier { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.05) 60%,rgba(0,0,0,.55) 100%); }
.ae-uleiste, .ae-ulauf { position:relative; z-index:1; }
.ae-uleiste { display:flex; justify-content:space-between; padding:16px 0; font-weight:800; font-size:14px; }
.ae-rest { font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.88); text-shadow:0 1px 8px rgba(0,0,0,.55); }
/* justify-content:center setzt den Atembereich in die Mitte statt oben ans Blatt (Stressmaster 1.3, Punkt 10). */
.ae-ulauf { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 0 20px; }
/* Ein Satz Zahlen fuer Ring und Hilfskreise (Vorlage 04_optik/stressmaster.css). Der Schrumpffaktor
   --klein muss zu scale(.62) in app-ebene.js passen. */
.ae-atem { --ring:230px; --klein:.62; --ringlinie:2.5px; --hilfslinie:1.5px;
  width:var(--ring); height:var(--ring); display:grid; place-items:center; position:relative; }
/* Zwei gepunktete Kreise stehen still und zeigen, wohin der Atem geht: aussen, wo die Einatmung endet,
   innen, wo die Ausatmung endet. Nur bei gefuehrten Uebungen gesetzt. Gerechnet auf Strichmitte:
   aussen 230 - 2,5 + 1,5 = 229 px, innen (230 - 2,5) x 0,62 + 1,5 = 142,55 px. */
.ae-fuehrung { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:var(--hilfslinie) dashed rgba(255,255,255,.34); pointer-events:none; }
.ae-fuehrung.aussen { width:calc(var(--ring) - var(--ringlinie) + var(--hilfslinie)); height:calc(var(--ring) - var(--ringlinie) + var(--hilfslinie)); }
.ae-fuehrung.innen { width:calc((var(--ring) - var(--ringlinie)) * var(--klein) + var(--hilfslinie));
  height:calc((var(--ring) - var(--ringlinie)) * var(--klein) + var(--hilfslinie)); border-color:rgba(255,255,255,.24); }
/* Der Atemkreis ist ein Ring, keine gefuellte Scheibe: eine Scheibe deckt die Bildmitte zu, auf die die Szenen komponiert sind. */
.ae-kreis { position:relative; width:var(--ring); height:var(--ring); border-radius:50%; background:transparent; border:var(--ringlinie) solid rgba(255,255,255,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center; transition-property:transform; transition-timing-function:ease-in-out;
  box-shadow:0 0 40px rgba(111,206,120,.35); }
.ae-kreis.aus { box-shadow:0 0 30px rgba(21,119,155,.45); }
.ae-kreis.ruhig { transform:scale(.92); }
.ae-sek { font-size:44px; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.ae-sekwort { font-size:11px; font-weight:700; opacity:.85; margin-top:4px; }
.ae-ansage { margin:26px 0 0; font-size:16px; font-weight:600; text-align:center; min-height:24px; }
.ae-utipp { font-size:12px; font-weight:600; opacity:.85; text-align:center; }
.ae-hell .ae-chip { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
.ae-hell .ae-chip.on { background:#fff; color:var(--brand); }
@media (prefers-reduced-motion: reduce) { .ae-kreis { box-shadow:none; } }

/* Fragebogen: eine Frage je Schirm */
.ae-fortschritt { height:5px; border-radius:4px; background:var(--line-2); overflow:hidden; margin:4px 0 6px; }
.ae-fortschritt i { display:block; height:100%; background:linear-gradient(90deg,var(--brand-teal),var(--green)); transition:width .25s ease; }
.ae-kicker { font-size:13px; font-weight:800; color:var(--navy); margin:10px 0 2px; }
.ae-frage { font-size:20px; font-weight:900; color:var(--navy); line-height:1.3; margin:4px 0 8px; }
.ae-antwort { margin:16px 0 8px; }
.ae-antwort .dc-scale { gap:4px; }
.ae-antwort .dc-pip { padding:8px 0; font-size:13px; min-height:46px; }
.ae-skalaenden { display:flex; justify-content:space-between; font-size:11.5px; font-weight:700; color:var(--muted); margin-top:6px; }
.ae-bipol .a, .ae-bipol .b { font-size:14px; font-weight:700; color:var(--ink); line-height:1.45; margin:0; }
.ae-bipol .b { text-align:right; }
.ae-punkte { display:flex; align-items:center; justify-content:space-between; margin:16px 0; }
.ae-punkt { flex:1; min-width:0; height:40px; display:grid; place-items:center; border:0; background:none; cursor:pointer; padding:0; }
.ae-punkt i { display:block; border-radius:50%; border:2px solid var(--muted-2); background:var(--card); }
.ae-punkt.on i { background:var(--teal); border-color:var(--teal); }
.ae-fragenav { display:flex; gap:10px; margin-top:20px; }
.ae-fragenav .btn { flex:1; }
.ae-laeuft { text-align:center; padding:40px 0; }
.ae-spinner { width:54px; height:54px; margin:0 auto 16px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--teal); animation:ae-dreh 1s linear infinite; }
@keyframes ae-dreh { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ae-spinner { animation:none; } }
.ae-schritte div { font-size:13.5px; font-weight:700; color:var(--muted-2); margin:6px 0; transition:color .2s; }
.ae-schritte div.an { color:var(--navy); }
.ae-hebel { margin-bottom:10px; }
.ae-hebel b { font-size:15px; font-weight:800; color:var(--navy); }
.ae-hebel p { margin:6px 0 0; font-size:13px; font-weight:600; color:var(--muted); line-height:1.5; }

/* Plan-Uebernahme */
.ae-baustein { display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit; border:1.5px solid var(--line); margin:0 0 10px; }
.card.ae-baustein + .card.ae-baustein { margin-top:0; }
.ae-baustein.on { border-color:var(--teal); }
.ae-bkopf { display:flex; align-items:center; gap:10px; }
.ae-bkopf b { flex:1; font-size:14.5px; font-weight:800; color:var(--navy); }
.ae-bkopf .ae-ksym { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--tint); }
.ae-bd { display:block; font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.5; margin:8px 0; }
.ae-bm { display:flex; flex-wrap:wrap; gap:6px; }
.ae-bm span { padding:3px 9px; border-radius:999px; background:var(--tint-2); font-size:11px; font-weight:800; color:var(--muted); }
.ae-bm .ae-platz { background:rgba(21,119,155,.12); color:var(--teal); }
.ae-bm .ae-platz.warn { background:rgba(245,166,35,.16); color:var(--amber-ink); }
.ae-bm .ae-platz.selbst { background:rgba(21,119,155,.06); color:var(--navy); }
.ae-selbst { display:block; font-size:11px; font-weight:800; color:var(--teal); margin-top:2px; }
/* Stressmaster-Plan: Katalog zum Selbstaussuchen (Punkt 4, Prototyp scPlan) */
.ae-katalog { margin-top:14px; }
.ae-katauf { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:13px 14px; border:1.5px dashed var(--line);
  border-radius:14px; background:transparent; font-family:inherit; font-size:14px; font-weight:800; color:var(--teal); cursor:pointer; text-align:left; }
.ae-katauf[aria-expanded="true"] { border-style:solid; }
.ae-katzahl { font-size:12px; font-weight:700; color:var(--muted); }
.ae-katfeld { margin:14px 2px 6px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.ae-katein { display:flex; align-items:flex-start; gap:10px; width:100%; margin:0 0 8px; padding:11px 12px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--card, #fff); font-family:inherit; text-align:left; cursor:pointer; }
.ae-katplus { flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--teal);
  font-size:17px; font-weight:800; line-height:1; }
.ae-kattx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ae-kattx b { font-size:14px; font-weight:800; color:var(--navy); }
.ae-kattx span { font-size:12px; font-weight:600; color:var(--muted); line-height:1.45; }
.ae-kattx .ae-katm { font-size:11.5px; font-weight:700; }
.ae-kattx .ae-katgrund { font-size:11.5px; font-weight:700; color:var(--teal); }
.ae-kattx .ae-katgrund.warn { color:var(--amber-ink); }

/* Passwort anzeigen (Auge im Feld) */
.pw-wrap { position:relative; }
.pw-wrap input { padding-right:46px; }
.pw-auge { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; border:0; background:transparent;
  color:var(--muted); cursor:pointer; border-radius:10px; padding:0; }
.pw-auge:hover, .pw-auge:focus-visible { color:var(--navy); }
.pw-auge[aria-pressed="false"] .pw-strich { display:none; }

/* ===== Training H1 (Welle 2, Punkte 14, 7, 8): Uebersicht "Mein Training", Einstellungsblatt,
   Planliste mit Wochenvolumen, Wochenabschluss und Bilanz. Vorlage: kunde.html (ub*, zeile,
   kachel, skala, worat, bi*). Eigener Praefix, damit H2/H3 unberuehrt bleiben. ===== */
.fxh1-held { position:relative; overflow:hidden; border-radius:var(--r); padding:20px; color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,var(--navy-soft) 62%,var(--brand-teal) 100%); }
.fxh1-held .l { font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.75; font-weight:700; }
.fxh1-held h2 { font-size:25px; font-weight:800; margin:5px 0 3px; letter-spacing:-.02em; color:#fff; padding-right:80px; overflow-wrap:anywhere; }
.fxh1-held .meta { font-size:14px; opacity:.88; }
.fxh1-held button { display:block; width:100%; margin-top:16px; background:#fff; color:var(--brand); border:0;
  border-radius:12px; padding:14px; font:inherit; font-weight:800; font-size:16px; cursor:pointer; min-height:44px; }
.fxh1-hantel { position:absolute; right:16px; top:20px; width:76px; opacity:.35; color:#fff; }
.fxh1-hantel svg { width:100%; height:auto; display:block; }
.fxh1-zwei { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.fxh1-kachel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px; text-align:left;
  font:inherit; color:var(--ink); cursor:pointer; min-width:0; }
.fxh1-kachel .ic { font-size:19px; margin-bottom:8px; display:block; }
.fxh1-kachel .n { font-weight:800; font-size:15.5px; line-height:1.2; color:var(--navy); }
.fxh1-kachel .s { color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.35; }
.fxh1-teil { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:26px 0 10px; }
.fxh1-block { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; }
.fxh1-woche { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:10px; }
.fxh1-woche .gross { font-size:27px; font-weight:800; color:var(--navy); letter-spacing:-.02em; }
.fxh1-woche .klein { color:var(--muted); font-size:13.5px; }
.fxh1-punkte { display:flex; gap:7px; }
.fxh1-punkte i { flex:1; height:7px; border-radius:4px; background:var(--line); }
.fxh1-punkte i.voll { background:var(--teal); }
.fxh1-zahlen { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.fxh1-zahlen .v { font-size:17px; font-weight:800; color:var(--ink); }
.fxh1-zahlen .l { font-size:11.5px; color:var(--muted); margin-top:1px; }
.fxh1-zeile { display:flex; align-items:center; gap:12px; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:15px; margin-bottom:9px; text-align:left; font:inherit; color:var(--ink);
  font-size:15.5px; font-weight:600; cursor:pointer; min-height:44px; }
.fxh1-zeile .ic { font-size:17px; width:22px; text-align:center; flex:none; }
.fxh1-zeile .s { display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:2px; }
.fxh1-zeile .ch { margin-left:auto; color:var(--muted-2); font-size:17px; }
.fxh1-leer { text-align:center; color:var(--muted); font-size:14px; padding:18px 6px; white-space:pre-line; }
.fxh1-leer .fx-opt { max-width:320px; margin:14px auto 0; }
/* Wochenvolumen je Muskel gegen den Korridor */
.fxh1-vol { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-top:16px; }
.fxh1-vol .kopf { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:8px; }
.fxh1-vol .kopf b { color:var(--navy); font-size:14.5px; }
.fxh1-vol .kopf span { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.fxh1-volzeile { display:grid; grid-template-columns:minmax(0,120px) 1fr 30px; gap:10px; align-items:center; padding:6px 0; }
.fxh1-volzeile .n { font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fxh1-volzeile .fok { color:var(--teal); font-size:11px; font-weight:800; }
.fxh1-volzeile .z { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.fxh1-volbalken { height:8px; background:var(--line-2); border-radius:4px; position:relative; overflow:hidden; }
.fxh1-volbalken i { position:absolute; left:0; top:0; bottom:0; background:var(--teal); border-radius:4px; }
.fxh1-volbalken i.unten { background:var(--muted-2); }
.fxh1-volbalken i.drueber { background:var(--amber); }
.fxh1-volbalken .korr { position:absolute; top:0; bottom:0; border-left:1px solid var(--muted-2); border-right:1px solid var(--muted-2); }
.fxh1-vol .fuss { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.45; }
.fxh1-woklein { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:8px; width:100%;
  background:none; border:0; font:inherit; padding:18px 0 6px; cursor:pointer; min-height:44px; }
.fxh1-woklein .w { color:var(--teal); font-weight:700; }
.fxh1-woklein .n { color:var(--muted); font-size:13px; }
/* Trainingskalender (Punkt 17): Symbol rechts in der Blockzeile "Diese Woche", Blatt mit Monatsraster */
.fxh1-teil.fxk-teil { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.fxk-knopf { flex:none; width:44px; height:44px; margin:-6px -10px -6px 0; display:grid; place-items:center; border:0;
  background:none; color:var(--teal); border-radius:12px; cursor:pointer; }
.fxk-knopf:focus-visible, .fxk-tag:focus-visible, .fxk-pfeil:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.hjm-modal.fxk-sheet { z-index:130; align-items:flex-end; padding:0; font-family:var(--font); color:var(--ink); }
.fxk-monat { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 0 10px; }
.fxk-monat b { font-size:17px; font-weight:800; color:var(--navy); }
.fxk-pfeil { width:44px; height:44px; border:0; border-radius:12px; background:var(--tint-2); color:var(--navy);
  font-size:24px; line-height:1; cursor:pointer; }
.fxk-pfeil:disabled { opacity:.35; cursor:default; }
.fxk-raster { display:flex; flex-direction:column; gap:2px; }
.fxk-zeile { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.fxk-zeile.kopf span { text-align:center; font-size:11.5px; font-weight:800; color:var(--muted); padding:4px 0; }
.fxk-tag { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:44px;
  border:0; border-radius:12px; background:none; font:inherit; color:var(--ink); cursor:pointer; padding:4px 0; }
.fxk-tag .z { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font-size:14.5px;
  font-weight:600; font-variant-numeric:tabular-nums; }
.fxk-tag i { width:6px; height:6px; border-radius:50%; background:transparent; }
.fxk-tag i.punkt { background:var(--teal); }
.fxk-tag.heute .z { box-shadow:inset 0 0 0 1.5px var(--teal); color:var(--teal); font-weight:800; }
.fxk-tag.gewaehlt .z { background:var(--prim); color:var(--prim-ink); box-shadow:none; }
.fxk-tag.zukunft { color:var(--muted-2); cursor:default; }
.fxk-kacheln { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:14px 0 4px; }
.fxk-kachel { background:var(--tint-2); border-radius:12px; padding:11px 10px; min-width:0; }
.fxk-kachel .v { font-size:16px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fxk-kachel .s { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.3; }
.fxk-tagtitel { font-size:14.5px; font-weight:800; color:var(--navy); margin:18px 0 8px; }
.fxk-keins { font-size:13.5px; color:var(--muted); padding:4px 2px 8px; }
/* Zusammenfassung der Einheit */
.fxk-kopf { padding-bottom:14px; }
.fxk-kopf h1 { font-size:24px; }
.fxk-kopf .wann { font-size:13.5px; color:var(--muted); margin-top:6px; }
.fxh1-bikacheln.fxk-drei { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.fxk-drei .fxh1-bikachel { padding:12px 10px; }
.fxk-drei .fxh1-bikachel .v { font-size:18px; }
.fxk-uebung { background:var(--tint-2); border-radius:12px; padding:12px 14px; margin-top:10px; }
.fxk-ukopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.fxk-ukopf b { font-size:15px; color:var(--ink); min-width:0; }
.fxk-ukopf span { flex:none; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.fxk-saetze { width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.fxk-saetze th { color:var(--muted); font-weight:600; font-size:11px; text-align:right; padding:2px 0 4px; }
.fxk-saetze td { text-align:right; padding:3px 0; border-top:1px solid var(--line); }
.fxk-saetze th:first-child, .fxk-saetze td:first-child { text-align:left; color:var(--muted); }
/* Einstellungsblatt mit Unterblaettern */
/* Das Blatt haengt an <body>, ausserhalb von .hjm-app: Schrift und Farbe hier setzen. */
.hjm-modal.fxh1-sheet { align-items:flex-end; padding:0; font-family:var(--font); color:var(--ink); }
.hjm-modal .fxh1-blatt { max-width:520px; text-align:left; padding:0; border-radius:var(--r) var(--r) 0 0;
  max-height:92vh; display:flex; flex-direction:column; }
.fxh1-blattkopf { display:flex; align-items:center; gap:8px; padding:14px 16px 10px; border-bottom:1px solid var(--line-2); }
.fxh1-blattkopf h4 { flex:1; margin:0; text-align:center; font-size:16px; }
.fxh1-blattkopf .zur, .fxh1-blattkopf .zu, .fxh1-blattkopf > span { width:36px; height:36px; flex:none; border:0; background:none;
  color:var(--navy); font-size:24px; line-height:1; cursor:pointer; border-radius:10px; }
.fxh1-blattinhalt { overflow-y:auto; padding:8px 16px 24px; -webkit-overflow-scrolling:touch; }
.fxh1-ezeile { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line-2); padding:14px 2px; font:inherit; color:var(--ink); font-size:15px; cursor:pointer; min-height:44px; }
.fxh1-ezeile .l { flex:1; min-width:0; font-weight:600; }
.fxh1-ezeile .w { color:var(--muted); text-align:right; max-width:56%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.fxh1-ezeile .w.leer { color:var(--muted-2); }
.fxh1-ezeile .ch { color:var(--muted-2); font-size:18px; width:12px; flex:none; }
.fxh1-ezeile .sub { display:block; font-size:12.5px; color:var(--muted); margin-top:3px; font-weight:400; line-height:1.45; white-space:normal; }
.fxh1-schalter { width:50px; height:30px; border-radius:999px; background:var(--line); position:relative; flex:none; }
.fxh1-schalter i { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .15s; }
.fxh1-schalter.on { background:var(--teal); }
.fxh1-schalter.on i { left:23px; }
.fx-opt.fxh1-gen { margin-top:20px; }
.fxh1-link { display:block; width:100%; text-align:center; background:none; border:0; font:inherit; color:var(--teal);
  font-size:14px; font-weight:600; padding:18px 0 4px; cursor:pointer; min-height:44px; }
.fxh1-hinweis { background:var(--tint); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13.5px;
  line-height:1.5; color:var(--ink); margin:10px 0; }
.fxh1-hinweis b { color:var(--navy); }
.fxh1-hinweis.warn { background:var(--amber-100); border-color:rgba(245,166,35,.4); }
.fxh1-rad { margin:6px 0 4px; }
.fxh1-radwert { display:block; width:100%; text-align:center; padding:11px 0; font:inherit; font-size:18px; color:var(--muted);
  background:none; border:0; border-radius:12px; cursor:pointer; min-height:44px; }
.fxh1-radwert.on { background:var(--tint-2); color:var(--navy); font-size:22px; font-weight:800; }
.fxh1-fussnote { text-align:center; color:var(--muted); font-size:13.5px; padding:8px 0 0; }
.fxh1-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.fxh1-kachel2 { position:relative; background:var(--tint-2); border:1.5px solid var(--line); border-radius:14px; padding:13px 26px 13px 13px;
  text-align:left; font:inherit; font-weight:700; font-size:14.5px; color:var(--ink); cursor:pointer; min-height:44px; overflow-wrap:anywhere; }
.fxh1-kachel2.on { border-color:var(--teal); background:var(--card); }
.fxh1-kachel2 .anz { display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:3px; }
.fxh1-kachel2 .hak { position:absolute; top:6px; right:8px; color:var(--teal); font-size:13px; font-weight:800; }
.fxh1-tabs { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin-top:6px; }
.fxh1-tabs::-webkit-scrollbar { display:none; }
.fxh1-tabs button { padding:10px 0 11px; white-space:nowrap; color:var(--muted); font:inherit; font-weight:700; font-size:14.5px;
  background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.fxh1-tabs button.on { color:var(--navy); border-bottom-color:var(--navy); }
.fxh1-suche { width:100%; margin-top:14px; }
.fxh1-zaehl { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 2px 4px; font-size:13px; color:var(--muted); }
.fxh1-zaehl button { background:none; border:0; font:inherit; color:var(--teal); font-weight:700; cursor:pointer; min-height:44px; }
.fxh1-buchstabe { padding:14px 6px 6px; font-size:12px; color:var(--muted); letter-spacing:.06em; }
.fxh1-austreffer { display:flex; gap:12px; align-items:center; width:100%; text-align:left; background:none; border:0;
  border-bottom:1px solid var(--line-2); padding:8px 2px; font:inherit; color:var(--ink); cursor:pointer; min-height:44px; }
.fxh1-austreffer img, .fxh1-austreffer .ph { width:42px; height:42px; border-radius:10px; flex:none; object-fit:cover;
  background:var(--tint-2); display:grid; place-items:center; }
.fxh1-austreffer .m { flex:1; min-width:0; }
.fxh1-austreffer .n { font-weight:600; font-size:15px; line-height:1.2; }
.fxh1-austreffer .e { color:var(--muted); font-size:12.5px; margin-top:2px; }
.fxh1-austreffer .kasten { width:24px; height:24px; border-radius:7px; border:2px solid var(--line); flex:none;
  display:grid; place-items:center; font-size:13px; font-weight:800; }
.fxh1-austreffer.aus .kasten { background:var(--red); border-color:var(--red); color:#fff; }
.fxh1-austreffer.aus .n { color:var(--muted); text-decoration:line-through; }
.fxh1-chipgruppe { font-size:12px; color:var(--muted); font-weight:700; margin:10px 0 6px; }
/* Wochenabschluss */
.fxh1-obbalken { display:flex; gap:5px; padding:4px 0 14px; }
.fxh1-obbalken i { flex:1; height:3px; border-radius:2px; background:var(--line); }
.fxh1-obbalken i.on { background:var(--teal); }
.fxh1-frage { font-size:25px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--navy); margin:0 0 8px; }
.fxh1-sub { color:var(--muted); font-size:14.5px; line-height:1.45; margin-bottom:18px; }
.fxh1-wogruppe { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px; margin-bottom:12px; }
.fxh1-wogruppe .kopf { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.fxh1-wogruppe .nam { font-weight:700; font-size:16px; color:var(--navy); }
.fxh1-wogruppe .anz { color:var(--muted); font-size:13px; }
.fxh1-skalapole { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin:10px 0 7px; }
.fxh1-skala { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.fxh1-skala button { background:var(--tint-2); border:0; border-radius:11px; padding:12px 0; font:inherit; font-size:18px; font-weight:800; cursor:pointer; min-height:44px; }
.fxh1-skala .s1, .fxh1-skala .s5 { color:var(--red); }
.fxh1-skala .s2, .fxh1-skala .s4 { color:var(--amber-ink); }
.fxh1-skala .s3 { color:var(--green-d); }
.fxh1-skala button.on { color:#fff; }
.fxh1-skala button.on.s3 { background:var(--green-d); }
.fxh1-skala button.on.s2, .fxh1-skala button.on.s4 { background:var(--amber); }
.fxh1-skala button.on.s1, .fxh1-skala button.on.s5 { background:var(--red); }
.fxh1-skalatext { text-align:center; font-size:14px; font-weight:700; margin-top:9px; min-height:20px; }
.fxh1-skalatext.s3 { color:var(--green-d); }
.fxh1-skalatext.s2, .fxh1-skalatext.s4 { color:var(--amber-ink); }
.fxh1-skalatext.s1, .fxh1-skalatext.s5 { color:var(--red); }
.fxh1-skalasub { text-align:center; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4; }
.fxh1-worat { display:flex; gap:11px; align-items:flex-start; padding:13px 2px; border-bottom:1px solid var(--line); }
.fxh1-worat .pfeil { font-size:17px; width:24px; text-align:center; flex:none; font-weight:800; color:var(--muted); }
.fxh1-worat .pfeil.hoch { color:var(--green-d); }
.fxh1-worat .pfeil.runter { color:var(--amber-ink); }
.fxh1-worat .txt { flex:1; font-size:14.5px; line-height:1.45; }
/* Training P4: getauschte Uebungen (Vorschau im Schritt "Übungen" und in der Bilanz) */
.fxh1-tausch { font-size:13.5px; line-height:1.45; color:var(--navy); padding:8px 2px; border-bottom:1px solid var(--line); }
.btn.fxh1-cta { margin-top:18px; }
/* Wochenbilanz */
.fxh1-bikopf { text-align:center; padding:8px 0 20px; }
.fxh1-bikopf h1 { font-size:27px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--navy); }
.fxh1-bikopf .satz { font-size:18px; font-weight:800; font-style:italic; margin-top:14px; }
.fxh1-bikacheln { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 20px; }
.fxh1-bikachel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; min-width:0; }
.fxh1-bikachel .l { font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:5px; }
.fxh1-bikachel .v { font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--navy); overflow-wrap:anywhere; }
.fxh1-bikachel .s { font-size:12.5px; color:var(--muted); margin-top:3px; }
.fxh1-biteil { font-size:12.5px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:800; margin:20px 0 4px; }
.fxh1-bizeile { display:flex; align-items:baseline; gap:11px; padding:11px 2px; border-bottom:1px solid var(--line); }
.fxh1-bizeile .n { flex:1; min-width:0; font-size:15px; line-height:1.25; }
.fxh1-bizeile .n small { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.fxh1-bizeile .v { font-variant-numeric:tabular-nums; font-weight:800; }
.fxh1-bizeile .v.plus { color:var(--green-d); }
.fxh1-bizeile .v.null { color:var(--muted); font-weight:400; }
.fxh1-bire { text-align:right; }
.fxh1-bire .p { font-size:13px; margin-bottom:2px; color:var(--muted); }
.fxh1-bire .p.plus { color:var(--green-d); }
.fxh1-bire .p.minus { color:var(--amber-ink); }
.fxh1-bire .kg { font-size:15px; font-weight:700; color:var(--teal); }
.fxh1-bire .l { font-size:11.5px; color:var(--muted); margin-top:1px; }

/* Ernaehrung 1.2, die Menge im Tag umtippen (RUNDE2 §2.9, Prototyp .zeile-links und .vs-menge):
   die Tageszeile ist eine Reihe. Links der Knopf, der die Zeile oeffnet, in der Mitte das Mengenfeld
   mit der Einheit daneben, rechts die Kalorien. Feste Spaltenbreiten und Ziffern gleicher Breite:
   bei 50 und bei 150 Gramm stehen Feld und Kalorien an derselben Kante. Das Feld hat 16px, sonst
   zoomt iOS beim Antippen. Die Zeile sperrt Textauswahl fuer die Wischgeste, das Feld nicht. */
.es-tagzeile { cursor:default; gap:10px; }
.es-tagzeile .es-zeile-links { flex:1 1 auto; min-width:0; padding:0; margin:0; border:0; background:none; font:inherit;
  color:inherit; text-align:left; cursor:pointer; align-self:stretch; justify-content:center; }
.es-zeile-links:focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }
.es-tm { display:flex; align-items:baseline; justify-content:flex-end; gap:3px; flex:0 0 auto; width:76px; box-sizing:border-box;
  background:var(--card2); border-radius:9px; padding:6px 9px; cursor:text; }
.es-tm:focus-within { box-shadow:0 0 0 2px var(--teal); }
.es-tm input { width:44px; min-width:0; padding:0; margin:0; border:0; background:none; outline:none; text-align:right;
  font:inherit; font-size:16px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; touch-action:manipulation; }
.es-tm > span { font-size:11.5px; font-weight:700; color:var(--muted-2); }
.es-tm-fest { background:none; cursor:default; }
.es-tm-fest b { font-size:15px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.es-tagzeile .rechts { width:48px; }
.es-tagzeile .wert { font-variant-numeric:tabular-nums; }

/* ---- Vorschlag nach Mahlzeit-Foto und Diktat (Paketstand 1.2, RUNDE2 §3.6, Prototyp zeichneVorschlag) ----
   Jede Zeile ist eine Reihe: Haken, Zeilenknopf (oeffnet die Mengenseite), Grammfeld daneben. Ein
   Eingabefeld in einem Knopf gibt es nicht. Abgewaehlt ist blass (§3.6d). Das Feld hat 16px Schrift,
   sonst zoomt iOS beim Antippen hinein. Unten der feste Knopf, Bauart wie auf der Mengenseite; die
   Seite blendet nur ueber die Deckkraft ein, sonst haengt der feste Knopf waehrenddessen an ihr. */
.screen[data-screen="essen-teller"], .screen[data-screen="essen-diktat"] { animation-name:hjm-fade-nur; }
.es-vs-kopf { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px; margin:4px 0 7px; }
.es-vs-kopf .es-rubrik { margin:0; }
.es-vs-aenderbar { font-size:12px; font-weight:700; color:var(--teal); }
.card.es-vs-liste { padding:3px 14px; }
.es-vs-zeile { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line-2); transition:opacity .15s; }
.es-vs-zeile:first-child { border-top:0; }
.es-vs-zeile.aus { opacity:.45; }
.es-vs-haken { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0;
  border-radius:7px; border:1.5px solid var(--line); background:var(--card); cursor:pointer; }
.es-vs-haken.an { background:var(--brand-bg); border-color:var(--brand-bg); }
.es-vs-haken.leer { cursor:default; }
.es-vs-haken:focus-visible, .es-vs-knopf:focus-visible, .es-vs-fehlt:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.es-vs-knopf { display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; text-align:left; border:0; background:none;
  padding:0; cursor:pointer; font:inherit; color:inherit; }
div.es-vs-knopf { cursor:default; }
.es-vs-knopf .name { font-size:14.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.es-vs-knopf .unter { font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums; }
.es-vs-gs { display:inline-block; margin-left:7px; padding:2px 6px; border-radius:5px; background:var(--amber-100); color:var(--amber-t);
  font-size:10.5px; font-weight:800; white-space:nowrap; vertical-align:1px; }
/* Katalogtreffer unsicher (esKatalogZuordnen): kuehler als „Menge geschätzt", damit beide unterscheidbar sind. */
.es-vs-gs.es-vs-pr { background:var(--tint); color:var(--teal-t); }
.es-vs-menge { display:flex; align-items:baseline; gap:3px; flex-shrink:0; background:var(--card2); border-radius:9px; padding:5px 9px; cursor:text; }
.es-vs-menge input.es-vs-g { width:46px; border:0; background:none; outline:none; padding:0; margin:0; text-align:right;
  font-family:inherit; font-size:16px; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.es-vs-menge:focus-within { box-shadow:0 0 0 2px var(--teal); }
.es-vs-menge span { font-size:11.5px; font-weight:700; color:var(--muted); }
.es-vs-summe { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding:14px 17px;
  border-radius:16px; background:var(--brand-bg); color:#fff; }
.es-vs-kcal { display:flex; align-items:baseline; gap:6px; }
.es-vs-kcal b { font-size:25px; font-weight:800; letter-spacing:-.7px; font-variant-numeric:tabular-nums; }
.es-vs-kcal span { font-size:12px; font-weight:700; color:#A9C0E8; }
.es-vs-makros { display:flex; gap:13px; flex-wrap:wrap; justify-content:flex-end; }
.es-vs-makros span { font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.es-vs-fehlt { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:46px; margin-top:10px;
  border-radius:12px; background:var(--card); border:1.5px solid var(--line); cursor:pointer; font:inherit; }
.es-vs-fehlt span { font-size:13.5px; font-weight:800; color:var(--teal); }
.es-vs-hinweis { margin:10px 2px 0; }
.es-vs-platz { height:84px; }
.es-vs-anhaengen { margin:-4px 0 10px; }

/* ---------- Diktieren: eigenes Mikrofon (Paketstand 1.2, RUNDE2 §3.7, Prototyp .dk-*) ----------
   ZWEI getrennte Anzeigen: .es-dk-pegel bewegt sich nur, wenn wirklich gemessen wird (Analyser am
   Mikrofonstrom), .es-dk-puls sagt bloss „laeuft", wenn die Messung nicht zu haben ist (iOS). Ein
   gezeichneter Ausschlag ohne Messung saehe genauso aus und waere gelogen. */
.es-dk { display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px 8px 16px; text-align:center; }
.es-dk [hidden], [data-hj="dk-feld"][hidden] { display:none !important; }
.es-dk-titel { margin:0; font-size:20px; font-weight:800; color:var(--navy); line-height:1.25; }
.es-dk-unter { margin:-6px 0 4px; font-size:13px; font-weight:600; color:var(--muted); min-height:1.4em; }
.es-dk-knopf { width:96px; height:96px; border-radius:999px; position:relative; border:0; padding:0; cursor:pointer;
  background:linear-gradient(135deg, #15779B 0%, #6FCE78 100%); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(21,119,155,.32); transition:transform .12s; }
.es-dk-knopf:active { transform:scale(.96); }
.es-dk-knopf:focus-visible { outline:3px solid var(--navy); outline-offset:4px; }
.es-dk-knopf.an { background:linear-gradient(135deg, #10155F 0%, #15779B 100%); }
.es-dk-knopf:disabled { opacity:.6; cursor:default; }
.es-dk-puls { position:absolute; inset:-10px; border-radius:999px; border:2px solid rgba(21,119,155,.45);
  animation:es-dk-puls 1.6s ease-out infinite; pointer-events:none; }
@keyframes es-dk-puls { 0% { transform:scale(.92); opacity:.9; } 100% { transform:scale(1.22); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .es-dk-puls { animation:none; opacity:.5; } }
.es-dk-pegel { display:flex; align-items:flex-end; gap:4px; height:26px; }
.es-dk-pegel i { display:block; width:4px; height:4px; border-radius:2px; background:var(--teal); transition:height 90ms linear; }
.es-dk-satz { font-size:16px; font-weight:600; color:var(--ink); line-height:1.5; max-width:32ch; min-height:1.5em; overflow-wrap:anywhere; }
.es-dk-satz.leer { color:var(--muted-2); font-weight:500; }
.es-dk-fehler { width:100%; text-align:left; border-radius:14px; padding:12px 14px; font-size:13px; font-weight:600; line-height:1.5;
  background:rgba(233,32,32,.08); border:1px solid rgba(233,32,32,.25); color:var(--red-t); }
.es-dk-hinweis { max-width:34ch; }
.es-dk-label { display:block; margin:0 2px 6px; }

/* ---- Ernaehrung 1.3 (Fabio 06.10.) ----
   1) Mengenseite, gruene Kachel (RUNDE2 §4.4): vier Zeilen statt drei Spalten. Je Zeile Name, blass
      der Zuwachs, dann der Stand mit Ziel; darunter der Balken. Die Spalten fuer Zuwachs und Stand sind
      fest und rechtsbuendig mit Ziffern gleicher Breite, damit vier Zeilen an derselben Kante stehen.
      Der Name wird nie gekuerzt; bei 375 px bleiben fuer ihn ueber 150 px. */
.es-vs-makros { display:flex; flex-direction:column; gap:9px; }
.es-vs-makro { display:flex; flex-direction:column; gap:5px; min-width:0; }
.es-vs-mzeile { display:grid; grid-template-columns:minmax(0,1fr) 48px 72px; align-items:baseline; column-gap:8px; }
.es-vs-mzeile .es-tk-name { font-size:13px; overflow:visible; text-overflow:clip; }
.es-vs-plus { font-size:12px; font-weight:700; color:rgba(255,255,255,.62); text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.es-vs-mzeile .es-tk-wert { font-size:13px; text-align:right; justify-self:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.es-vs-makro .es-tk-balken { height:5px; border-radius:3px; }

/* 2) Grammfeld im Tag (RUNDE2 §2.9): die Zahl OBEN, die Einheit DARUNTER, feste Spalte von 58 px,
      rechtsbuendig, tabular-nums. So stehen vier Zeilen untereinander an derselben Kante. Das Feld
      behaelt 16px, sonst zoomt iOS beim Antippen. */
.es-tm { flex-direction:column; align-items:flex-end; justify-content:center; gap:0; width:58px; padding:4px 7px; }
.es-tm input { width:100%; text-align:right; line-height:1.2; }
.es-tm > span { font-size:10.5px; line-height:1.1; text-align:right; }
.es-tm-fest b { line-height:1.2; }

/* 4) „Gerade eingetragen" in der Suche: die Liste ist gedeckelt und rollt in sich, und mit dem Fokus
      im Suchfeld (Telefon) bleibt nur der Kopf stehen. Das Suchfeld rutscht so nicht unter die Tastatur. */
.es-sitz-knoepfe { display:flex; align-items:center; gap:6px; flex:none; }
.es-sitz-auf { padding:10px 6px; color:var(--teal); }
.es-sitz-liste { margin-top:8px; max-height:156px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.es-sitz-liste .es-sitz-zeile:first-child { border-top:0; }

/* ---------------- Daily Check: Sprungmarken (Paket B) ----------------
   Unter dem Faden eine Segmentleiste der Gruppen, die heute Fragen haben (Koerper, Befinden,
   Rueckblick, Koerpercheck). Navy wie der Faden, nicht in einer Themenfarbe. Die Marke der
   aktuellen Frage ist gefuellt, eine fertige Gruppe zeigt ihre Zahl in Teal. Vier Marken teilen
   sich die Zeile nach Laenge des Titels (Koerpercheck ist der laengste), Trefferflaeche 44 px. */
.dc-marken { display:flex; gap:3px;
  margin:-4px 2px 12px; padding:3px; border-radius:12px; background:var(--tint-2); }
.dc-marke { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  flex:1 1 auto; min-width:0; min-height:44px; padding:5px 4px; border:0; border-radius:9px; background:transparent;
  cursor:pointer; font:inherit; color:var(--navy); -webkit-tap-highlight-color:transparent; }
.dc-marke b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; font-weight:800; letter-spacing:-.1px; }
.dc-marke span { font-size:11px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.dc-marke:hover { background:var(--card); }
.dc-marke.fertig span { color:var(--teal); }
.dc-marke.jetzt { background:var(--prim); color:var(--prim-ink); box-shadow:0 1px 3px rgba(16,21,95,.18); }
.dc-marke.jetzt span { color:rgba(255,255,255,.78); }
.dc-marke:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
@media (max-width:340px) { .dc-marke b { font-size:11px; } }
/* Reiter (N-13): Kernset und die aktiven Themen heissen wie im Backend ("Darm & Verdauung") und
   werden nicht abgeschnitten: passen sie nicht in eine Zeile, bricht die Leiste um, jede Zeile
   fuellt sich. Der Koerpercheck ist ein eigenes Ritual: gestrichelte Kante, kein gleichrangiger Reiter. */
.dc-marken { flex-wrap:wrap; }
.dc-marke { flex:1 0 auto; padding:5px 10px; }
.dc-marke.ritual { border:1px dashed rgba(16,21,95,.28); }

/* ---------------- Daily Check: Uhrzeiten (N-12) ----------------
   Bettzeit/Aufstehzeit als Bogen mit zwei Griffen, die Dauer in der Mitte. Ein unberuehrter Griff
   ist grau und gestrichelt: er steht auf einem Vorschlag, nicht auf einer Antwort. touch-action:none,
   damit Ziehen nicht die Seite scrollt. Die einzelne Uhrzeit sind zwei Auswahlfelder (16 px+). */
.dc-bogen { padding:4px 2px 0; }
.dc-bogen svg { display:block; width:100%; height:auto; overflow:visible; touch-action:none; user-select:none; -webkit-user-select:none; }
.dc-bogen .grund { fill:none; stroke:var(--line); stroke-width:10; stroke-linecap:round; }
.dc-bogen .voll { fill:none; stroke:var(--navy); stroke-width:10; stroke-linecap:round; opacity:.28; }
.dc-bogen .griff { fill:var(--card); stroke:var(--navy); stroke-width:3; cursor:grab; }
.dc-bogen .griff.leer { stroke:var(--muted); stroke-dasharray:3 3; }
.dc-bogen .griff:focus { outline:none; stroke:var(--teal); stroke-width:4; }
.dc-bogen .gr { font-family:inherit; font-size:24px; font-weight:800; fill:var(--navy); text-anchor:middle;
  font-variant-numeric:tabular-nums; }
.dc-bogen.zu .griff { cursor:default; }
.dc-bogen-zeiten { display:flex; justify-content:space-between; gap:10px; margin-top:6px;
  font-size:13px; font-weight:700; color:var(--muted); }
.dc-bogen-zeiten b { color:var(--navy); font-size:16px; font-variant-numeric:tabular-nums; }
.dc-bogen-hinweis { margin:8px 2px 0; font-size:13px; }
.dc-zeitwahl { display:flex; align-items:center; gap:8px; }
.dc-zeitwahl select { min-width:76px; padding:12px 10px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); font-family:inherit; font-size:18px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.dc-zeitwahl select:focus { outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal); }
.dc-zeitwahl b { font-size:20px; color:var(--navy); }

/* =====================================================================
 * REDESIGN V1 (Bauvertrag design/redesign/V1-UMSETZUNG.md, 15.10.2026)
 * Icons, Grundkorrekturen fuer den Dunkelmodus, V1-Bausteine (Start, HealthHub,
 * Modulkoepfe, Status), Desktop-Raster der Startseite. Nur Tokens, Verlaeufe nach Vertrag.
 * ===================================================================== */

/* ---- Icons (web/icons.svg): Linie = currentColor, Akzent = var(--ic-acc) ---- */
.hji { display:inline-block; width:1.25em; height:1.25em; flex:none; vertical-align:-.25em; overflow:visible;
  fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hji-mono { --ic-acc:currentColor; }
.hji-16 { width:16px; height:16px; }
.hji-20 { width:20px; height:20px; }
.hji-24 { width:24px; height:24px; }
.hji-28 { width:28px; height:28px; }
/* Icon-Felder (.ic), die frueher ein Emoji ueber die Schriftgroesse trugen: das svg fuellt das Feld. */
.ic > .hji { width:1.15em; height:1.15em; vertical-align:middle; }
.li .ic > .hji { width:22px; height:22px; }
.ae-sym > .hji, .es-kachel-ic > .hji, .fxh1-kachel .ic > .hji { width:20px; height:20px; }
.fxh1-zeile .ic > .hji, .fxh2-mp .ic > .hji { width:18px; height:18px; }
.lockcorner > .hji, .lockdot > .hji { width:1em; height:1em; vertical-align:-.12em; }
/* Auf farbigem Grund ist das Icon einfarbig weiss. */
.tile.nav .hji, .tile.grn .hji, .tile.teal .hji, .banner .hji, .dna-head .hji { --ic-acc:currentColor; }

/* ---- Felder: Schrift, Platzhalter und Grund folgen den Tokens (Dunkelmodus) ---- */
.hjm-app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.hjm-app select, .hjm-app textarea { color:var(--ink); }
.hjm-app ::placeholder { color:var(--muted-2); opacity:1; }
.qa-input, .cochat-compose textarea { background:var(--card); color:var(--ink); }
.cochat-compose textarea::placeholder, .qa-input::placeholder { color:var(--muted-2); }
.lesson-sec { border-bottom-color:var(--line); }
.thumb .play { color:var(--brand); }
.dc-marke.jetzt span { color:var(--prim-ink); opacity:.78; }
/* Auswahl auf Teal: die Schrift folgt dem Token (weiss hell, Nachtblau dunkel). */
.qa-badge.ok, .fxh3-extra.fertig .hk, .fx-hak.on { color:var(--on-teal); }

/* ---- Schwebende Elemente ueber der Pille (nur Handy und Tablet, auf dem Desktop steht die Leiste links) ---- */
@media (max-width: 899.98px) {
  .hjm-app .es-mg-leiste, .hjm-app .fx-uhr { bottom:calc(102px + env(safe-area-inset-bottom)); }
  html .eng-toast, html .es-toast { bottom:calc(104px + env(safe-area-inset-bottom)); }
  html .hjm-install-banner { bottom:calc(102px + env(safe-area-inset-bottom)); }
  html .hjm-update-bar { left:12px; right:12px; bottom:calc(102px + env(safe-area-inset-bottom)); border-radius:18px;
    padding:12px 14px 12px 16px; }
  .ae-ufuss { bottom:calc(98px + env(safe-area-inset-bottom)); padding-bottom:12px; }
}

/* ---- Dunkelmodus: Stellen mit eigenen Farbtoenen (DNA, Blaetter) ---- */
html[data-theme="dark"] .dna-sheet { background:rgba(21,26,61,.92); border-top-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .dna-tile[class*="ton-"] b,
html[data-theme="dark"] .dna-sheet[class*="ton-"] .hd b { color:var(--ink); }
html[data-theme="dark"] .ic.dna-ic[class*="ton-"],
html[data-theme="dark"] .dna-tile[class*="ton-"] .ic { color:#A9C8F0; }
html[data-theme="dark"] .ic.dna-ic.gruen { color:#7FD49A; }
html[data-theme="dark"] .ic.dna-ic.blau { color:#8DBBEA; }
html[data-theme="dark"] .ic.dna-ic.gelb { color:#E7C34A; }
html[data-theme="dark"] .ic.dna-ic.orange { color:#F0A86A; }
html[data-theme="dark"] .ic.dna-ic.rot { color:#F08A8A; }
html[data-theme="dark"] .es-vertr-ueber { color:var(--muted); }
html[data-theme="dark"] .es-aw-reihe button.heute { background:#3A4688; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .dna-sheet { background:rgba(21,26,61,.92); border-top-color:rgba(255,255,255,.08); }
  html:not([data-theme="light"]) .dna-tile[class*="ton-"] b,
  html:not([data-theme="light"]) .dna-sheet[class*="ton-"] .hd b { color:var(--ink); }
  html:not([data-theme="light"]) .ic.dna-ic[class*="ton-"],
  html:not([data-theme="light"]) .dna-tile[class*="ton-"] .ic { color:#A9C8F0; }
  html:not([data-theme="light"]) .ic.dna-ic.gruen { color:#7FD49A; }
  html:not([data-theme="light"]) .ic.dna-ic.blau { color:#8DBBEA; }
  html:not([data-theme="light"]) .ic.dna-ic.gelb { color:#E7C34A; }
  html:not([data-theme="light"]) .ic.dna-ic.orange { color:#F0A86A; }
  html:not([data-theme="light"]) .ic.dna-ic.rot { color:#F08A8A; }
  html:not([data-theme="light"]) .es-vertr-ueber { color:var(--muted); }
  html:not([data-theme="light"]) .es-aw-reihe button.heute { background:#3A4688; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html[data-theme="dark"] .dna-sheet { background:var(--card); }
}

/* Inline-Verlaeufe im Markup (style="background:linear-gradient(135deg,var(--navy),var(--teal))"): im
   Dunkelmodus waere --navy hell. Auf dem Element selbst gelten deshalb die Markenwerte, darunter wieder
   die dunklen Tokens. Die eine helle Verlaufskarte (#fff nach --tint-2) wird zur Karte. */
html[data-theme="dark"] .hjm-app [style*="gradient("][style*="var(--navy"],
html[data-theme="dark"] .hjm-app [style*="gradient("][style*="var(--teal"] { --navy:#10155F; --teal:#15779B; }
html[data-theme="dark"] .hjm-app [style*="gradient("][style*="var(--navy"] *,
html[data-theme="dark"] .hjm-app [style*="gradient("][style*="var(--teal"] * { --navy:#ECEEF8; --teal:#5BB8DA; }
html[data-theme="dark"] .hjm-app [style*="gradient(135deg,#fff"] { background:var(--card) !important; border:var(--card-border); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .hjm-app [style*="gradient("][style*="var(--navy"],
  html:not([data-theme="light"]) .hjm-app [style*="gradient("][style*="var(--teal"] { --navy:#10155F; --teal:#15779B; }
  html:not([data-theme="light"]) .hjm-app [style*="gradient("][style*="var(--navy"] *,
  html:not([data-theme="light"]) .hjm-app [style*="gradient("][style*="var(--teal"] * { --navy:#ECEEF8; --teal:#5BB8DA; }
  html:not([data-theme="light"]) .hjm-app [style*="gradient(135deg,#fff"] { background:var(--card) !important; border:var(--card-border); }
}

/* ---- Statuspunkte und Statuspillen. Beim Kunden nie Rot: „auffaellig" ist Rose. ---- */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; vertical-align:middle;
  background:var(--muted-2); }
.dot-ok { background:var(--green); }
.dot-warn { background:var(--amber); }
.dot-bad { background:var(--rose-dot, #E0607E); }
.dot-off { background:var(--muted-2); opacity:.7; }
.pill-ok, .pill-warn, .pill-rose, .pill-info { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:13px; font-size:12px; font-weight:800; white-space:nowrap; line-height:1; }
.pill-ok { background:var(--green-100); color:var(--green-t); }
.pill-warn { background:var(--amber-100); color:var(--amber-t); }
.pill-rose { background:var(--rose-100); color:var(--rose-t); }
.pill-info { background:rgba(21,119,155,.12); color:var(--teal-t); }
html[data-theme="dark"] .pill-info { background:rgba(91,184,218,.16); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pill-info { background:rgba(91,184,218,.16); } }

/* ---- Startseite V1 ---- */
/* Begruessung: Avatar, „Hallo, Vorname", runde Glocke rechts */
.v1-greet { display:flex; align-items:center; gap:12px; margin:4px 0 0; }
.v1-greet__av { width:46px; height:46px; border-radius:50%; flex:none; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center; background:linear-gradient(145deg,#62C3DC,#2F3C99); color:#fff;
  font-family:inherit; font-size:15px; font-weight:800; overflow:hidden; }
.v1-greet__av img { width:100%; height:100%; object-fit:cover; display:block; }
.v1-greet__text { flex:1; min-width:0; }
.v1-greet__text b, .v1-greet b { display:block; font-size:16px; font-weight:800; color:var(--navy); line-height:1.25; }
.v1-greet__text span, .v1-greet > span { display:block; font-size:13px; font-weight:600; color:var(--muted); }
/* Runder Knopf (Glocke, Zurueck) im Inhalt, 46 px */
.v1-round { position:relative; width:46px; height:46px; border-radius:50%; flex:none; padding:0; cursor:pointer;
  display:grid; place-items:center; background:var(--card); border:1px solid var(--line); color:var(--navy); font-family:inherit; }
.v1-round .hji { width:22px; height:22px; }
.v1-round .v1-badge { position:absolute; top:9px; right:10px; width:9px; height:9px; border-radius:50%;
  background:var(--red); box-shadow:0 0 0 2px var(--card); }
.v1-round .v1-badge[hidden] { display:none; }
.v1-title { margin:6px 0 4px; font-size:30px; font-weight:800; color:var(--navy); letter-spacing:-.7px; line-height:1.12; }
/* Abschnittskopf V1 („Deine Module", „Schnellzugriff") */
.v1-sec { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:36px; margin:22px 0 10px; }
.v1-sec h3, .v1-sec > b { margin:0; font-size:19px; font-weight:800; color:var(--navy); letter-spacing:-.2px; }
.v1-sec a, .v1-sec button { border:0; background:none; padding:8px 0; font:inherit; font-size:14px; font-weight:800;
  color:var(--teal); cursor:pointer; text-decoration:none; }

/* Hinweis „Hell mit Signal": getoente Karte, Icon-Kachel mit Verlauf, roter Punkt, Verb-Knopf rechts */
.v1-hint { --hint-bg:var(--card); --hint-line:var(--line); --hint-ink:var(--prim); --hint-sub:var(--muted);
  --hint-tile:linear-gradient(145deg,#62C3DC,#2F3C99);
  display:flex; align-items:center; gap:14px; width:100%; margin:0 0 12px; padding:14px; border-radius:24px;
  background:var(--hint-bg); border:1px solid var(--hint-line); text-align:left; cursor:pointer; font-family:inherit;
  color:var(--ink); }
.v1-hint[hidden] { display:none; }
.v1-hint--coach { --hint-bg:#E9F7EE; --hint-line:#BFE6CB; --hint-ink:#136B45; --hint-sub:#1F6B3A;
  --hint-tile:linear-gradient(145deg,#3DAA5C 0%,#136B45 100%); }
.v1-hint--review { --hint-bg:#FEF3DF; --hint-line:#F6D9A4; --hint-ink:#8F5600; --hint-sub:#8F5600;
  --hint-tile:linear-gradient(145deg,#F6B740 0%,#B86E00 100%); }
.v1-hint__tile { position:relative; width:48px; height:48px; border-radius:15px; flex:none; display:grid; place-items:center;
  background:var(--hint-tile); color:#fff; }
.v1-hint__tile .hji { width:26px; height:26px; --ic-acc:currentColor; }
.v1-hint__dot { position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 3px var(--hint-bg); }
.v1-hint__dot[hidden] { display:none; }
.v1-hint__text { flex:1; min-width:0; }
.v1-hint__text b { display:block; font-size:15.5px; font-weight:800; color:var(--navy); line-height:1.25; }
.v1-hint__text span { display:block; margin-top:3px; font-size:13px; font-weight:700; color:var(--hint-sub); line-height:1.35; }
.v1-hint__btn { display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:18px; flex:none;
  background:var(--hint-ink); color:#fff; font-size:13.5px; font-weight:800; white-space:nowrap; border:0; font-family:inherit; }
.v1-hint:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
html[data-theme="dark"] .v1-hint--coach { --hint-bg:rgba(111,206,120,.12); --hint-line:rgba(111,206,120,.32); --hint-sub:#9BE3A4; --hint-ink:#2E8B4F; }
html[data-theme="dark"] .v1-hint--review { --hint-bg:rgba(245,166,35,.12); --hint-line:rgba(245,166,35,.34); --hint-sub:#F5B94A; --hint-ink:#A86A08; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .v1-hint--coach { --hint-bg:rgba(111,206,120,.12); --hint-line:rgba(111,206,120,.32); --hint-sub:#9BE3A4; --hint-ink:#2E8B4F; }
  html:not([data-theme="light"]) .v1-hint--review { --hint-bg:rgba(245,166,35,.12); --hint-line:rgba(245,166,35,.34); --hint-sub:#F5B94A; --hint-ink:#A86A08; }
}

/* Health Score: Wort, Wochenpille, Weglinie (SVG), Marken darunter. Keine Prozentzahl. */
.v1-score { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:26px; background:var(--card);
  border:var(--card-border); box-shadow:var(--shadow-card); color:var(--ink); cursor:pointer; text-align:left;
  font-family:inherit; width:100%; }
.v1-score__head { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:-4px; }
.v1-score__label { font-size:12.5px; font-weight:700; color:var(--muted); }
.v1-score__word { margin-top:2px; font-size:21px; font-weight:800; color:var(--navy); letter-spacing:-.4px; line-height:1.15; }
.v1-score__pill { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:13px; flex:none;
  background:var(--green-100); color:var(--green-t); font-size:12px; font-weight:800; white-space:nowrap; }
.v1-score__line { display:block; width:100%; height:auto; overflow:visible; }
.v1-score__marks { display:flex; justify-content:space-between; gap:8px; font-size:11.5px; font-weight:700; color:var(--muted); }
.v1-score__marks > :last-child { text-align:right; }

/* Deine Module: wischbare Verlaufskarten mit Wasserzeichen-Icon und weissem Pfeilknopf */
.v1-mods { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px;
  margin:0 -20px; padding:2px 20px 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.v1-mods::-webkit-scrollbar { display:none; }
.v1-mod { --mod-grad:linear-gradient(155deg,#2F3C99 0%,#10155F 75%); --mod-shadow:rgba(16,21,95,.22);
  position:relative; flex:none; width:224px; height:228px; border-radius:28px; overflow:hidden; scroll-snap-align:start;
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px 66px 18px 18px; border:0; text-align:left;
  cursor:pointer; color:#fff; font-family:inherit; background:var(--mod-grad); box-shadow:0 14px 30px var(--mod-shadow);
  transition:transform .15s; }
.v1-mod[hidden] { display:none; }
.v1-mod::before { content:""; position:absolute; left:-40px; top:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 70%); pointer-events:none; }
.v1-mod:active { transform:scale(.98); }
.v1-mod:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.v1-mod--training { --mod-grad:linear-gradient(155deg,#2E7299 0%,#10155F 75%); --mod-shadow:rgba(16,21,95,.22); }
.v1-mod--ernaehrung { --mod-grad:linear-gradient(155deg,#5DBB72 0%,#17657E 75%); --mod-shadow:rgba(23,101,126,.22); }
.v1-mod--stress { --mod-grad:linear-gradient(155deg,#4A4C9E 0%,#171A5E 75%); --mod-shadow:rgba(23,26,94,.22); }
.v1-mod__chip { position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; height:30px;
  padding:0 12px 0 8px; border-radius:15px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:12px; font-weight:800; white-space:nowrap; }
.v1-mod__chip .hji { width:16px; height:16px; --ic-acc:currentColor; }
.v1-mod__mark { position:absolute; right:-30px; bottom:40px; width:160px; height:160px; opacity:.16; color:#fff;
  --ic-acc:currentColor; stroke-width:1.1; pointer-events:none; }
.v1-mod__title { position:relative; display:block; font-size:19px; font-weight:800; line-height:1.2; color:#fff; }
.v1-mod__sub { position:relative; display:block; margin-top:4px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.88); }
.v1-mod__go { position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:50%; background:#fff;
  color:var(--brand); display:grid; place-items:center; }
.v1-mod__go .hji { width:20px; height:20px; --ic-acc:currentColor; }
.v1-mod .lockcorner { top:16px; right:16px; z-index:1; }

/* Schnellzugriff: 2 Spalten */
.v1-quick { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.v1-qtile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:16px;
  border-radius:24px; border:var(--card-border); background:var(--card); box-shadow:var(--shadow-card); text-align:left;
  cursor:pointer; font-family:inherit; color:var(--ink); min-width:0; transition:transform .15s; }
.v1-qtile[hidden] { display:none; }
.v1-qtile:active { transform:scale(.98); }
.v1-qtile:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.v1-qtile .ic { width:46px; height:46px; border-radius:15px; background:var(--card2); display:grid; place-items:center;
  flex:none; color:var(--navy); font-size:22px; }
.v1-qtile .ic .hji { width:24px; height:24px; }
.v1-qtile b, .v1-qtile .t { display:block; font-size:15px; font-weight:800; color:var(--navy); line-height:1.25; }
.v1-qtile span:not(.ic):not(.lockcorner), .v1-qtile .s { display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--muted); }
.v1-qtile .lockcorner { top:14px; right:14px; }

/* Beliebte Rezepte: wischbar, Bild 124 hoch */
.v1-rezepte { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px;
  margin:0 -20px; padding:2px 20px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.v1-rezepte::-webkit-scrollbar { display:none; }
.v1-rezepte[hidden] { display:none; }
.v1-rez { width:164px; flex:none; display:flex; flex-direction:column; gap:9px; border:0; background:none; padding:0;
  text-align:left; cursor:pointer; scroll-snap-align:start; font-family:inherit; color:var(--ink); }
.v1-rez__bild, .v1-rez__img { position:relative; display:block; width:100%; height:124px; border-radius:22px; overflow:hidden;
  background:linear-gradient(145deg,#E7F7E9,#BFE6CB); }
.v1-rez__bild img, .v1-rez__img img, .v1-rez > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.v1-rez > img { position:static; height:124px; border-radius:22px; }
.v1-rez__tag { position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; height:24px; padding:0 9px;
  border-radius:12px; background:rgba(255,255,255,.9); color:var(--brand); font-size:11px; font-weight:800; }
.v1-rez__title { font-size:14.5px; font-weight:800; color:var(--navy); line-height:1.25; overflow-wrap:anywhere; }
.v1-rez__meta { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); }
.v1-rez__meta .hji { width:15px; height:15px; }
.v1-rez:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:22px; }

/* ---- HealthHub ---- */
/* Kopf: Navy-Verlauf mit drei weichen Lichtern (Schlaf, Blut, Gene) */
.v1-hubhead { position:relative; overflow:hidden; margin:-8px -20px 16px; padding:18px 20px 22px;
  border-radius:0 0 32px 32px; color:#fff;
  background:
    radial-gradient(260px 220px at 85% 10%, rgba(158,227,241,.55) 0%, rgba(158,227,241,0) 70%),
    radial-gradient(260px 220px at 10% 85%, rgba(195,180,255,.5) 0%, rgba(195,180,255,0) 70%),
    radial-gradient(260px 220px at 95% 95%, rgba(247,168,184,.5) 0%, rgba(247,168,184,0) 70%),
    linear-gradient(150deg,#10155F 0%,#2F3C99 100%); }
.v1-hubhead::before { content:""; position:absolute; left:-60px; top:-90px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%); pointer-events:none; }
.v1-hubhead > * { position:relative; }
.v1-hubhead h1, .v1-hubhead h2, .v1-hubhead__title { margin:0; font-size:28px; font-weight:800; letter-spacing:-.5px; color:#fff; line-height:1.15; }
.v1-hubhead .hji { --ic-acc:currentColor; }
.v1-rings { display:flex; justify-content:space-around; align-items:flex-start; gap:8px; margin:18px 0 16px; }
.v1-ring { --p:0; --ring:#9EE3F1; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0;
  border:0; background:none; padding:0; font-family:inherit; color:#fff; cursor:pointer; text-align:center; }
.v1-ring--schlaf { --ring:#9EE3F1; } .v1-ring--blut { --ring:#F7A8B8; } .v1-ring--gene { --ring:#C3B4FF; }
.v1-ring__dial { position:relative; width:92px; height:92px; border-radius:50%; flex:none; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1.1; }
.v1-ring__dial::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.v1-ring__dial > svg:not(.hji) { position:absolute; inset:0; width:100%; height:100%; }
.v1-ring__dial:has(> svg:not(.hji))::before { display:none; }
.v1-ring__val { position:relative; font-size:20px; font-weight:800; color:#fff; }
.v1-ring__unit { position:relative; font-size:10.5px; font-weight:700; color:rgba(255,255,255,.82); max-width:76px; }
.v1-ring__lbl, .v1-ring > b { font-size:12px; font-weight:800; color:var(--ring); }
.v1-ring:focus-visible { outline:2px solid #fff; outline-offset:4px; border-radius:16px; }
/* Reiter auf dem Kopf: Pillen, aktiv weiss mit Navy */
.v1-segs { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -20px; padding:0 20px; }
.v1-segs::-webkit-scrollbar { display:none; }
.v1-segs button, .v1-segs a { flex:none; display:inline-flex; align-items:center; min-height:36px; padding:0 15px;
  border-radius:18px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.18); color:#fff;
  font-family:inherit; font-size:13px; font-weight:800; white-space:nowrap; cursor:pointer; text-decoration:none; }
.v1-segs .on, .v1-segs .active, .v1-segs [aria-selected="true"], .v1-segs [aria-current="page"] {
  background:#fff; color:var(--brand); border-color:#fff; }
.v1-segs button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.v1-hubgrid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.v1-hubgrid > .card { margin-top:0; }

/* ---- Modulkoepfe: Themenverlauf, weisse Schrift, runder Zurueck-Knopf aus Milchglas ---- */
.v1-head { --head-grad:linear-gradient(120deg,#10155F 0%,#2F3C99 100%);
  position:relative; overflow:hidden; margin:-8px -20px 16px; padding:16px 20px 24px; border-radius:0 0 32px 32px;
  color:#fff; background:var(--head-grad); }
.v1-head::after { content:""; position:absolute; right:-70px; top:-80px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%); pointer-events:none; }
.v1-head > * { position:relative; z-index:1; }
.v1-head .hji { --ic-acc:currentColor; }
.v1-head h1, .v1-head h2, .v1-head__title { margin:14px 0 4px; font-size:26px; font-weight:800; letter-spacing:-.5px; line-height:1.15; color:#fff; }
.v1-head p, .v1-head__sub { margin:0; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.85); line-height:1.45; }
.v1-head__top { display:flex; align-items:center; gap:10px; }
.v1-head__back { width:44px; height:44px; border-radius:50%; flex:none; padding:0; cursor:pointer; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.18); color:#fff; font-family:inherit; font-size:18px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.v1-head__back .hji { width:22px; height:22px; }
.v1-head__back:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.v1-head--training { --head-grad:linear-gradient(120deg,#10155F 0%,#2E7299 100%); }
.v1-head--ernaehrung { --head-grad:linear-gradient(120deg,#17657E 0%,#5DBB72 100%); }
.v1-head--stress { --head-grad:linear-gradient(120deg,#171A5E 0%,#4A4C9E 100%); }
.v1-head--blut { --head-grad:linear-gradient(120deg,#5E1233 0%,#C2394E 100%); }
.v1-head--gene { --head-grad:linear-gradient(120deg,#261A68 0%,#7454C9 100%); }
.v1-head--lernen { --head-grad:linear-gradient(120deg,#0E4F6B 0%,#2B9FBF 100%); }
.v1-head--coaching { --head-grad:linear-gradient(120deg,#10155F 0%,#15779B 100%); }
.v1-head--fahrplan { --head-grad:linear-gradient(120deg,#2F3C99 0%,#62C3DC 100%); }
.v1-head--hub { --head-grad:
    radial-gradient(240px 200px at 88% 8%, rgba(158,227,241,.5) 0%, rgba(158,227,241,0) 70%),
    radial-gradient(240px 200px at 8% 92%, rgba(195,180,255,.45) 0%, rgba(195,180,255,0) 70%),
    radial-gradient(240px 200px at 96% 96%, rgba(247,168,184,.45) 0%, rgba(247,168,184,0) 70%),
    linear-gradient(120deg,#10155F 0%,#2F3C99 100%); }

/* ---- Startseite Raster: Handy eine Spalte in Vertragsreihenfolge ---- */
.v1-startgrid { display:flex; flex-direction:column; gap:14px; }
.v1-startgrid > * { min-width:0; margin:0; }
.v1-startgrid > [hidden] { display:none; }
.v1-startgrid > * > .v1-sec:first-child { margin-top:8px; }

/* ---- Desktop ab 900 px ---- */
@media (min-width: 900px) {
  .v1-title { font-size:32px; }
  .v1-head, .v1-hubhead { margin:0 0 20px; border-radius:32px; padding:22px 28px 28px; }
  .v1-segs { margin:0; padding:0; }
  .v1-hubgrid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
  /* Module drei nebeneinander statt Scroll, Rezepte als 4er-Raster */
  .v1-mods { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); overflow:visible; margin:0; padding:0 0 4px;
    scroll-snap-type:none; }
  .v1-mod { width:auto; }
  .v1-rezepte { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); overflow:visible; margin:0; padding:0;
    scroll-snap-type:none; }
  .v1-rez { width:auto; }
  .v1-rez__bild, .v1-rez__img, .v1-rez > img { height:132px; }
  /* Raster: Zeile 1 Hinweis 2/3 + Daily Check 1/3, Zeile 2 Score 1/3 + Module 2/3,
     Zeile 3 Schnellzugriff 1/3 + Rezepte 2/3. Fehlt ein Partner, nimmt der andere die ganze Zeile. */
  .v1-startgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px 22px; align-items:start; }
  .v1-startgrid > * { grid-column:1 / -1; }
  .v1-startgrid > .v1-sg-hint { grid-column:span 2; }
  .v1-startgrid > .v1-sg-daily { grid-column:span 1; }
  .v1-startgrid > .v1-sg-score { grid-column:span 1; }
  .v1-startgrid > .v1-sg-mods { grid-column:span 2; }
  .v1-startgrid > .v1-sg-quick { grid-column:span 1; }
  .v1-startgrid > .v1-sg-rezepte { grid-column:span 2; }
  .v1-startgrid:not(:has(> .v1-sg-daily:not([hidden]))) > .v1-sg-hint,
  .v1-startgrid:not(:has(> .v1-sg-hint:not([hidden]))) > .v1-sg-daily { grid-column:1 / -1; }
  .v1-startgrid:not(:has(> .v1-sg-rezepte:not([hidden]))) > .v1-sg-quick { grid-column:1 / -1; }
  .v1-startgrid:not(:has(> .v1-sg-rezepte:not([hidden]))) > .v1-sg-quick .v1-quick { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .v1-startgrid > .v1-sg-score > .v1-score, .v1-startgrid > .v1-sg-hint > .v1-hint { height:100%; margin:0; }
  .v1-startgrid > * > .v1-sec:first-child { margin-top:0; }
}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce) {
  .v1-mod, .v1-qtile, .tile, .btn { transition:none; }
  .v1-mod:active, .v1-qtile:active, .tile:active { transform:none; }
  .v1-mods, .v1-rezepte { scroll-behavior:auto; }
}