/* Selbst gehostete Schriften (DSGVO: keine Google-Fonts-CDN). Latin-Subset, deckt deutsche Umlaute ab. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}

:root{
  /* ===== Zentrale Markenpalette (Angleichung an holisticbreathwork.de) =====
     ALLE Farben der App liegen ausschliesslich in diesem Block —
     Re-Branding spaeter per Variablen-Swap. */
  --bg-top:#F7F4E8;          /* Seitenverlauf oben: Creme */
  --bg-bottom:#C7D3D9;       /* Seitenverlauf unten: Blaugrau */
  --btn-primary:#3D5A6B;     /* Primaerbutton / aktive Elemente: dunkles Schieferblau */
  --btn-primary-d:#2E4350;   /* Hover / gedrueckt */
  --btn-secondary:#FAF3DC;   /* Sekundaerbutton: Creme, dunkle Schrift */
  --heading:#2E4350;         /* Ueberschriften: dunkles Schieferblau */
  --gold:#B8862D;            /* Akzent Gold/Ocker — sparsam, fuer Flaechen/Dekor */
  --gold-ink:#7E5A1B;        /* Gold abgedunkelt fuer kleine Schrift (WCAG AA, >=4.5:1 auch auf Creme) */
  --card:#FBFAF6;            /* Kartenflaeche (weiss bis cremeweiss) */
  --card-shadow:0 8px 24px color-mix(in srgb,var(--btn-primary) 10%,transparent);
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--nebel) 30%,transparent);
  /* abgeleitete Toene derselben Palette */
  --petrol:var(--btn-primary);--petrol-d:var(--btn-primary-d); /* Alias: Timer-Ziffern, aktive Chips */
  --nebel:#9FB7C2;--nebel-l:#D5DFE4;
  --tint:#F3EDDA;--tint-2:#F9F6EC;
  --bg:#F7F4E8;--ink:#2B3A44;--muted:#4A5A64;--ph:#9AA8B1; /* muted: >=4.5:1 auch auf --bg-bottom */
  --line:#E2DFD2;--white:#FFFFFF;
  /* CP-Schaubild-Kartengradient (Konstantins Vorlage 06.07, Pixel-Sampling). Bewusst
     eigene Variablen statt --petrol, damit Buttons/Chips app-weit unveraendert bleiben.
     --cp-accent spiegelt CP_ACCENT (app.js) fuer CSS-seitige Nutzung (Trend-Kachel). */
  --cp-grad-top:#183E55;--cp-grad-bot:#163B4E;--cp-accent:#75FBF2;
  --warn:#B4763F;--warn-bg:#F6EEE5;--ok:#3C7D5A;--ok-bg:#E9F4EE;
  --err-ink:#9A3B3B;--err-bg:#FBEAEA;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%) fixed;
  min-height:100%;
}
.app{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
  box-shadow:0 0 60px color-mix(in srgb,var(--btn-primary) 14%,transparent)}

/* heller Header — liegt direkt auf dem Seitenverlauf, kein dunkler Block mehr */
.wavewrap{position:relative;padding:26px 26px 6px;color:var(--heading);overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
/* Logo ohne Kachel: transparentes SVG direkt auf dem Verlauf.
   EINE gemeinsame Regel fuer alle Seiten (Klient + Coach), ~210px auf Mobile;
   flex:none verhindert Schrumpfen im .brand-Flexlayout. */
.brand .logo{display:inline-block;flex:none}
.brand .logo img{width:min(56vw,180px);height:auto;display:block}
.wavewrap h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;color:var(--heading);margin-top:12px;position:relative;z-index:2}
.wavewrap .sub{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;position:relative;z-index:2}
.wave-bottom{display:none}

/* Pflanzen-Dekor (Original-Grafiken der Website, lokal ausgeliefert) */
.deco{position:absolute;top:-6px;right:-40px;width:240px;max-width:62%;opacity:.85;
  pointer-events:none;user-select:none;z-index:1}
.deco-end{display:block;width:170px;margin:2px auto -12px;opacity:.6;pointer-events:none;user-select:none}

/* progress steps */
.steps{display:flex;gap:6px;margin:14px 0 2px;position:relative;z-index:2}
.steps .s{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--btn-primary) 18%,transparent)}
.steps .s.done{background:var(--btn-primary)}
.steps .s.active{background:var(--gold)}

/* body */
.body{flex:1;overflow-y:auto;padding:16px 24px 26px}
.lead{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:16px}
h2.sect{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px;color:var(--heading)}
.sub2{font-size:12px;color:var(--muted);margin-bottom:14px}

/* cards / blocks */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--card-shadow);padding:18px;margin-bottom:14px}
.block{margin-bottom:16px}
/* Eyebrow-Labels: kleine Gold-Akzente wie auf der Hauptseite */
.eyebrow,.block h3{font-size:12px;font-weight:600;color:var(--gold-ink);letter-spacing:.4px;margin-bottom:6px;text-transform:uppercase}
.block ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.block li{font-size:11.5px;color:var(--ink);background:var(--tint);border-radius:8px;padding:6px 10px}
.note{font-size:12px;color:var(--muted);line-height:1.6;background:var(--tint-2);border-left:3px solid var(--nebel);
  border-radius:0 10px 10px 0;padding:11px 13px;margin-bottom:14px}
.endmark{height:1px;background:var(--line);margin:6px 0 14px}

/* form fields */
.field{text-align:left;margin-bottom:14px}
.field label{display:block;font-size:11.5px;font-weight:500;color:var(--petrol);margin-bottom:6px;letter-spacing:.3px}
input.t,textarea.t,.field input{width:100%;border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);transition:.15s;resize:vertical}
input.t:focus,textarea.t:focus,.field input:focus{outline:none;border-color:var(--nebel);box-shadow:var(--focus-ring)}
.field input.feld-fix,.field input:disabled{background:var(--bg,#f3f4f3);color:var(--muted);cursor:not-allowed;opacity:.75}
.cp-fix-hinweis{color:var(--petrol);font-weight:500}
input::placeholder,textarea::placeholder{color:var(--ph)}
.two{display:flex;gap:9px}
.two input{flex:1}

/* question */
.q{margin-bottom:18px}
.q .label{font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:9px;line-height:1.4}
.q .label .n{color:var(--btn-primary);font-weight:600;margin-right:6px}

/* yes/no */
.yn{display:flex;gap:8px}
.yn button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:11px;padding:11px;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;transition:.15s}
.yn button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}

/* choice */
.choice{display:flex;flex-wrap:wrap;gap:7px}
.choice button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s}
.choice button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}

/* scale */
.scale{display:flex;gap:5px}
.scale button{flex:1;aspect-ratio:1;border:1px solid var(--line);background:var(--white);border-radius:9px;
  font-family:inherit;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:.15s;padding:0}
.scale button.on{background:var(--petrol);color:#fff;border-color:var(--petrol);transform:scale(1.06)}
.scale-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:5px}

/* multi (Mehrfachauswahl, Chips) */
.multi{display:flex;flex-wrap:wrap;gap:7px}
.multi button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s}
.multi button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}

/* matrix (Item x Haeufigkeit) */
.matrix{display:flex;flex-direction:column;gap:10px}
.mrow{display:flex;flex-direction:column;gap:5px}
.mlab{font-size:12.5px;color:var(--ink)}
.mbtns{display:flex;gap:5px}
.mbtns button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:9px;padding:8px 4px;
  font-family:inherit;font-size:11px;color:var(--muted);cursor:pointer;transition:.15s}
.mbtns button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}

/* medliste (wiederholbare Zeilen) */
.medliste{display:flex;flex-direction:column;gap:9px}
.medrow{display:flex;gap:7px;align-items:center}
.medrow .medinput{flex:1;min-width:0}
.medrem{flex:none;width:32px;height:32px;border:1px solid var(--line);background:var(--white);border-radius:9px;
  font-size:18px;line-height:1;color:var(--muted);cursor:pointer;transition:.15s}
.medrem:hover{background:var(--tint)}
.medadd{align-self:flex-start;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:12.5px;color:var(--petrol);cursor:pointer;transition:.15s}
.medadd:hover{background:var(--tint)}

/* consent / confirm */
.confirm,.consent{display:flex;gap:11px;align-items:flex-start;padding:14px;background:var(--tint);border-radius:14px;margin-bottom:12px}
.confirm.locked{opacity:.5;pointer-events:none}
.confirm .box,.consent .box{width:22px;height:22px;border-radius:6px;border:2px solid var(--petrol);flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.confirm .box.on,.consent .box.on{background:var(--petrol)}
.confirm .box svg,.consent .box svg{width:13px;height:13px;opacity:0;transition:.15s}
.confirm .box.on svg,.consent .box.on svg{opacity:1}
.confirm p,.consent p{font-size:11.5px;color:var(--ink);line-height:1.55}

.riskwarn{display:none;margin-top:11px;background:var(--warn-bg);border-radius:10px;padding:11px 13px;
  font-size:11.5px;color:#7A4E22;line-height:1.55}
.riskwarn.show{display:block}

/* footer nav buttons */
.nav{padding:14px 24px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:10px}
.nav .stepinfo{flex-basis:100%;text-align:center;font-size:10.5px;color:var(--muted);margin-bottom:9px}
.btn{font-family:inherit;font-weight:600;font-size:14px;border-radius:8px;padding:14px;cursor:pointer;border:0;transition:.2s}
.btn-primary{background:var(--btn-primary);color:#fff;width:100%}
.btn-primary:hover{background:var(--btn-primary-d)}
.btn-primary:disabled{background:color-mix(in srgb,var(--btn-primary) 30%,var(--white));cursor:not-allowed}
.btn-ghost{flex:none;width:96px;background:var(--btn-secondary);color:var(--btn-primary-d)}
.btn-outline{background:var(--white);border:1px solid var(--btn-primary);color:var(--btn-primary)}
.next{flex:1}

/* misc */
.center{text-align:center}
.qr{width:150px;height:150px;margin:6px auto 8px;border-radius:18px;background:var(--white);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line);overflow:hidden}
.qr img{width:100%;height:100%;object-fit:contain;padding:8px}
.muted{color:var(--muted);font-size:11.5px;line-height:1.6}
.proto-vorschau-zeile{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.proto-vorschau-zeile:last-child{border-bottom:0}
.error{background:var(--err-bg);color:var(--err-ink);border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:12px;display:none}
.error.show{display:block}
.success{background:var(--ok-bg);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:12px}
.imprint{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.5;padding:16px 24px 22px}
.badge{display:inline-block;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.open{background:var(--tint);color:var(--muted)}
.linkrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}
.linkrow:last-child{border-bottom:0}
.linkrow .who .nm{font-size:14px;font-weight:600;color:var(--ink)}
.linkrow .who .em{font-size:11px;color:var(--muted);margin-top:1px}
a.plain{color:var(--petrol);text-decoration:none}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{color:var(--ink);font-weight:500;text-align:right}

/* ---------- Stufe 2 ---------- */

/* bottom tab bar — heller Grund, aktiver Tab Schieferblau */
.tabbar{position:sticky;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);
  padding:8px 6px env(safe-area-inset-bottom);z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  color:var(--muted);font-size:10px;font-weight:500;padding:6px 2px;border-radius:10px}
.tabbar a svg{width:21px;height:21px}
.tabbar a.active{color:var(--petrol)}
.tabbar a.active svg{stroke:var(--petrol)}
.body.with-tabs{padding-bottom:16px}

/* greeting */
.greet{margin-bottom:14px}
.greet .date{font-size:12px;color:var(--muted);margin-top:2px}

/* CP curve card (Modul 2) */
.cpcard{background:linear-gradient(155deg,var(--cp-grad-top) 0%,var(--cp-grad-bot) 100%);border:0;color:#fff}
.cpcard h3{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;opacity:.85}
.cp-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.cp-now{font-family:'Cormorant Garamond',serif;font-size:40px;line-height:1;font-weight:600;margin-top:4px}
.cp-now small{font-size:14px;font-weight:400;opacity:.8;margin-left:5px}
.cp-delta{font-size:12px;font-weight:600;background:rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;white-space:nowrap}
.cp-delta-neutral{font-weight:500;opacity:.75}
.cp-chart{display:block;width:100%;height:auto;margin-top:6px}
.cp-empty{font-size:12.5px;opacity:.9;line-height:1.6;margin-top:8px}
.cp-axis{font-size:10px;opacity:.7;display:flex;justify-content:space-between;margin-top:4px}
/* Neubau: Header-rechts (Oe-7-Tage-Box + Trend-Badge gestapelt) */
.cp-tr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cp-avg7{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.cp-avg7-val{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600}
.cp-avg7-val small{font-size:11px;font-weight:400;opacity:.8;margin-left:3px}
.cp-avg7-cap{font-size:9px;text-transform:uppercase;letter-spacing:.4px;opacity:.7;margin-top:2px}
/* Neubau: 4 Stat-Kacheln */
.cp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.cp-stat{background:rgba(255,255,255,.10);border-radius:10px;padding:9px 5px;display:flex;flex-direction:column;gap:2px;text-align:center;align-items:center}
.cp-stat-val{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;line-height:1.05;white-space:nowrap}
.cp-stat-val small{font-size:10px;font-weight:400;opacity:.75;margin-left:1px}
.cp-stat-cap{font-size:9.5px;text-transform:uppercase;letter-spacing:.2px;opacity:.85;line-height:1.15}
.cp-stat-sub{font-size:9px;opacity:.6;line-height:1.1}
.cp-stat-val-trend{color:var(--cp-accent)}
.cp-stat-ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cp-stat-ic svg{width:18px;height:18px}
.cp-tappable{cursor:pointer;transition:opacity .15s}
.cp-tappable:active{opacity:.85}

/* quick tiles */
.row2{display:flex;gap:12px;margin-bottom:14px}
.tile{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;
  text-decoration:none;color:var(--ink);box-shadow:var(--card-shadow);display:block}
.tile .ic{width:34px;height:34px;border-radius:10px;background:var(--tint);display:flex;align-items:center;
  justify-content:center;margin-bottom:8px}
.tile .ic svg{width:18px;height:18px;stroke:var(--petrol)}
.tile h4{font-size:13.5px;color:var(--ink);margin-bottom:2px}
.tile p{font-size:11px;color:var(--muted);line-height:1.4}

/* collapsible info block (Abkuerzungslegende) */
.info{border:1px solid var(--line);border-radius:14px;background:var(--tint-2);margin-bottom:16px;overflow:hidden}
.info summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--petrol);
  display:flex;align-items:center;gap:8px}
.info summary::-webkit-details-marker{display:none}
.info summary .chev{margin-left:auto;transition:.2s;color:var(--muted)}
.info[open] summary .chev{transform:rotate(180deg)}
.info .inner{padding:0 14px 14px}
.info .legrow{display:flex;gap:10px;font-size:11.5px;padding:5px 0;border-top:1px solid var(--line)}
.info .legrow .c{flex:none;min-width:96px;font-weight:600;color:var(--ink)}
.info .legrow .l{color:var(--muted);line-height:1.5}
.info .meta{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5}
.cpt-video{margin-top:12px;border:1px dashed var(--line);border-radius:12px;background:var(--tint);color:var(--muted);font-size:12px;text-align:center;padding:22px 12px}

/* protokoll form grid */
.grid2{display:flex;gap:10px}
.grid2 .field{flex:1}
.daystamp{font-size:12px;color:var(--muted);margin-bottom:14px}
.calc{display:flex;gap:10px;margin:2px 0 16px}
.calc .chip{flex:1;background:var(--tint);border-radius:12px;padding:10px 12px;text-align:center}
.calc .chip .lab{font-size:10px;color:var(--gold-ink);text-transform:uppercase;letter-spacing:.3px}
.calc .chip .val{font-size:18px;font-weight:600;color:var(--heading);margin-top:2px}

/* protokoll history list */
.histrow{padding:11px 0;border-bottom:1px solid var(--line)}
.histrow:last-child{border-bottom:0}
.histrow .top{display:flex;justify-content:space-between;font-size:12.5px}
.histrow .top .d{font-weight:600;color:var(--ink)}
.histrow .top .m{color:var(--petrol);font-weight:600}
.histrow .det{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}

/* Dokument-Ansicht (Lese-Bericht eines Tages) */
.doc-open{margin-bottom:16px}
.histrow-click{cursor:pointer;border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .15s}
.histrow-click:hover{background:var(--tint)}
.histrow-click .dok-chev{vertical-align:middle;color:var(--muted);transition:transform .2s;margin-left:2px}
.histrow-click.open .dok-chev{transform:rotate(90deg)}
.dok-wrap{padding:4px 0 14px}
.dok-datum{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;color:var(--heading);margin:6px 0 14px}
.dok-sect{margin-bottom:16px}
.dok-sect .eyebrow{margin-bottom:8px}
.dok-sect .histrow:first-of-type{padding-top:0}
.dokrow{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)}
.dokrow:last-child{border-bottom:0}
.dokrow .dl{color:var(--muted)}
.dokrow .dv{color:var(--ink);font-weight:600;text-align:right}
/* Sprach-Journal-Zeile im Tagesprotokoll-Dokument: die kompakte Voice-Zeile
   ist laenger als ein Kennwert - linksbuendig und normal statt fett lesen. */
.dok-voice .dv{font-weight:400;text-align:left}
.dok-bar{margin-bottom:14px}
.dok-bar .btn-ghost{width:auto;padding:10px 16px}
#dokument-heute{display:none}
.body.dokmodus>:not(#dokument-heute){display:none}
.body.dokmodus #dokument-heute{display:block}
/* Historie nach Uebung gruppiert: antippbare Ueberschrift, auf-/zuklappbar */
.histgrp{margin-top:10px}
.histgrp-head{display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:none;font-family:inherit;cursor:pointer;text-align:left;
  padding:6px 0;border-bottom:1px solid var(--line)}
.histgrp-head .t{font-size:13px;font-weight:600;color:var(--petrol)}
.histgrp-head .n{font-size:11px;color:var(--muted);font-weight:600;margin-left:auto}
.histgrp-head::after{content:'⌄';margin-left:8px;color:var(--muted);transition:transform .15s}
.histgrp.collapsed .histgrp-head::after{transform:rotate(-90deg)}
.histgrp.collapsed .histgrp-body{display:none}

/* timer (Modul 3) */
.timerwrap{text-align:center}
.timer-disp{font-family:'Cormorant Garamond',serif;font-size:62px;font-weight:600;color:var(--petrol);
  line-height:1;margin:6px 0 4px;letter-spacing:1px}
.timer-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.timer-ctrl{display:flex;gap:10px;margin-bottom:14px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
/* ST: Steps — Scroll-Picker 0–200, Einer-Schritte (B-II) */
.st-picker{position:relative;height:200px;margin-bottom:14px;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--white)}
.st-picker-scroll{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:80px 0;
  box-sizing:border-box;text-align:center}
.st-picker-scroll::-webkit-scrollbar{display:none}
.st-picker-item{height:40px;line-height:40px;scroll-snap-align:center;
  font-size:20px;color:var(--muted);transition:color .12s,font-size .12s}
.st-picker-item.sel{color:var(--petrol);font-size:30px;font-weight:600;
  font-family:'Cormorant Garamond',serif}
.st-picker::before,.st-picker::after{content:'';position:absolute;left:0;right:0;
  height:80px;pointer-events:none;z-index:2}
.st-picker::before{top:0;background:linear-gradient(var(--white),rgba(255,255,255,0))}
.st-picker::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--white))}
.st-picker-band{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);
  height:40px;border-top:1px solid var(--nebel);border-bottom:1px solid var(--nebel);
  pointer-events:none;z-index:1}
/* Gefuehrter CP-Mess-Fluss (loest die fruehere cpalert/cpcapture-Erinnerung ab) */
.messflow{background:var(--nebel-l);color:var(--petrol-d);border-radius:12px;padding:14px;
  font-size:13.5px;line-height:1.55;margin-bottom:14px;text-align:left}
.messflow .btn{width:100%;padding:14px;font-size:17px;margin-top:10px}
.messflow .flow-wert{font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:600;
  text-align:center;margin:10px 0;color:var(--petrol)}
.messflow .flow-lauf{text-align:center;font-size:18px;margin:22px 0;color:var(--muted)}
.messflow input{width:100%;border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink);margin-top:10px}
.messflow input:focus{outline:none;border-color:var(--nebel);box-shadow:var(--focus-ring)}
/* AW-2: dasselbe Skip-Styling auch im AW-Lauf-Screen (Hausmuster wiederverwendet) */
.messflow .flow-skip, #aw-run .flow-skip{text-align:center;margin:10px 0 0}
.messflow .flow-count{font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:600;
  text-align:center;margin:8px 0;color:var(--petrol);letter-spacing:1px}
.messflow ul.flow-proto{list-style:none;margin:8px 0 0}
.messflow ul.flow-proto li{padding:3px 0;font-size:13.5px}
.expick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.expick button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:9px 15px;
  font-family:inherit;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s}
.expick button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.btn-sec{background:var(--btn-secondary);color:var(--btn-primary-d);flex:1}

/* ---------- Stufe 3 ---------- */

/* O5: Streak unter der Kurve — kleiner Gold-Akzent */
.streak{font-size:12px;font-weight:600;color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 14%,var(--white));
  border-radius:999px;padding:7px 13px;display:inline-block;margin:-4px 0 14px}

/* Letzter gemessener CP + Tagesrichtung */
.cpwert h3{font-size:12px;font-weight:600;color:var(--gold-ink);letter-spacing:.4px;text-transform:uppercase;margin-bottom:8px}
.cpw-zahl{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;color:var(--ink);line-height:1.1}
.cpw-zahl small{font-family:inherit;font-size:15px;font-weight:400;color:var(--muted)}
.cpw-richtung{font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);margin-left:8px}

/* Tagesimpuls: Spruch + Quelle */
.tagesimpuls .ti-spruch{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;
  color:var(--ink);line-height:1.4;margin:2px 0 0}
.tagesimpuls .ti-quelle{font-size:12.5px;margin-top:6px}
.linkbtn{border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--petrol);cursor:pointer;text-decoration:underline;padding:4px}

/* O6: 3-Schritte-Starthilfe (liegt auf der Petrol-Kachel) */
.starter{list-style:none;margin-top:10px}
.starter li{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.55;
  opacity:.95;padding:6px 0}
.starter .num{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}

/* O2: CP-Werteliste der laufenden Session im Timer */
.cplist{font-size:11.5px;color:var(--muted);margin-bottom:10px;min-height:0}

/* O7: Auswahlfeld wie Eingabefelder */
.field select{width:100%;border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5A64' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.field select:focus{outline:none;border-color:var(--nebel);box-shadow:var(--focus-ring)}

/* videos (Modul 4) */
.vid{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.vid:last-child{border-bottom:0}
.vid .thumb{width:46px;height:46px;border-radius:12px;background:var(--tint);display:flex;align-items:center;
  justify-content:center;flex:none}
.vid .thumb svg{width:20px;height:20px}
.vid.locked .thumb{background:var(--tint-2)}
.vid .vmeta{flex:1}
.vid .vmeta .t{font-size:13.5px;font-weight:600;color:var(--ink)}
.vid.locked .vmeta .t{color:var(--muted)}
.vid .vmeta .s{font-size:11px;color:var(--muted);margin-top:2px}
.vid .tag{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px;flex:none}
.vid .tag.free{background:var(--ok-bg);color:var(--ok)}
.vid .tag.lock{background:var(--tint);color:var(--muted)}

/* O8: Karte mit nativem Player */
.vid.vplay{display:block}
.vid.vplay video{width:100%;border-radius:12px;margin-top:10px;background:#000;display:block}

/* O10: Video -> Uebung-Bruecke */
.vid .uebt{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--petrol);
  background:var(--tint);border-radius:999px;padding:8px 15px;text-decoration:none;transition:.15s}
.vid .uebt.pulse{background:var(--petrol);color:#fff;animation:pulse 1.2s ease-in-out 3}

/* ---------- Stufe 4 (Konstantins Feedback) ---------- */

/* K2: Info-Symbol im Uebungs-Picker + aufklappbare Erklaerung */
.expick .exinfo{flex:none;width:26px;height:26px;padding:0;border-radius:50%;margin:5px 2px 0 -4px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:14px;line-height:1;
  color:var(--petrol);background:var(--tint);border:1px solid var(--line)}
.exdesc{background:var(--tint-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font-size:12px;color:var(--muted);line-height:1.6;margin:-6px 0 16px}
.exdesc strong{display:block;font-size:12.5px;color:var(--petrol);margin-bottom:3px}

/* K1: Bestaetigung/Hinweis nach dem Timer-Stopp */
.protostatus{border-radius:12px;padding:12px 14px;font-size:12.5px;font-weight:600;margin-bottom:14px;text-align:center}
.protostatus.ok{background:#E9F4EE;color:var(--ok)}
.protostatus.warn{background:var(--nebel-l);color:var(--petrol-d)}
.protostatus a{color:inherit;font-weight:600}

/* K3: "Lieber lesen?"-Block auf der Video-Karte */
.vid .info.lesen{margin:10px 0 0;background:var(--tint-2)}
.vid .info.lesen .inner p{font-size:12px;color:var(--muted);line-height:1.6;padding-top:4px}

/* K4: Atemzyklus-Pacer */
.pace-cap{font-size:11.5px;font-weight:600;color:var(--gold-ink);letter-spacing:.4px;text-transform:uppercase;
  text-align:left;margin-bottom:8px}
.steppers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:16px}
/* K4: kompakte Stepper im laufenden Pacer - Zentriert unter dem Atemkreis */
.pace-cap-run{text-align:center;margin:4px 0 6px}
.steppers-run{margin-bottom:6px}
.stepper label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px}
.stepper .row{display:flex;align-items:center;justify-content:space-between;gap:1px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:12px;background:var(--white);padding:4px 2px}
.stepper .row button{width:22px;height:30px;border:0;background:transparent;border-radius:8px;
  font-size:16px;color:var(--petrol);cursor:pointer;flex:none;touch-action:manipulation}
.stepper .row button:active{background:var(--tint)}
.stepper .v{font-size:14px;font-weight:600;color:var(--ink);min-width:18px;text-align:center}
.durpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.durpick button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 13px;
  font-family:inherit;font-size:12px;color:var(--muted);cursor:pointer;transition:.15s}
.durpick button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.durpick input{width:80px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;
  font-family:inherit;font-size:12px;color:var(--ink);text-align:center}
/* RA+: 3/4-Phasenwahl mittig, Rundenlabel mit etwas Abstand */
#raplus #ra-minpick{justify-content:center}
#raplus #ra-round{margin-bottom:4px}
#raplus #ra-minlabel{margin-top:4px}
.togglerow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  justify-content:center;margin-bottom:14px;cursor:pointer}
.togglerow input{accent-color:var(--petrol);width:16px;height:16px}
.breath-stage{height:200px;display:flex;align-items:center;justify-content:center;margin:6px 0 2px}
.breath-circle{width:180px;height:180px;border-radius:50%;transform:scale(.55);will-change:transform;
  background:radial-gradient(circle at 35% 30%, var(--nebel) 0%, var(--petrol) 55%, var(--petrol-d) 100%);
  box-shadow:0 10px 30px color-mix(in srgb,var(--btn-primary) 25%,transparent)}
.breath-label{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--heading);margin-bottom:6px}
.pace-meta{display:flex;justify-content:center;gap:14px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.pace-meta .rest{font-weight:600;color:var(--petrol)}

/* K6: Video-Link/-Hinweis in der Uebungs-Info */
.exdesc .exvid{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--petrol);text-decoration:none}
.exdesc .exvid.off{color:var(--muted);font-weight:500}

/* K10: Fortschritts-Karte auf der Startseite */
.fortschritt .fs-delta{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--ok);margin:2px 0}
.fortschritt .fs-meta{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------- Startseiten-Layout nach Mockup 20.07.2026 (Stufe 1, reine Anzeige) ---------- */
/* Hero "DEIN TAGESZIEL": Kopf (Eyebrow+H2+Sub), dann Ring links + Heute-geatmet-
   Block rechts, dann vollbreiter "Weiter ueben"-Button. */
.start-hero{display:block}
.start-hero .hero-top{margin-bottom:14px}
.start-hero .hero-top .eyebrow{display:block;margin-bottom:6px}
.start-hero .hero-top h2{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--ink);line-height:1.15;margin:0}
.start-hero .hero-top .hero-sub{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.start-hero .hero-main{display:flex;align-items:center;gap:16px}
.start-hero .hero-ring-wrap{flex:none}
.start-hero .hero-ring{display:block;width:118px;height:118px}
.start-hero .hero-right{flex:1;min-width:0}
.start-hero .hero-geatmet{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:4px}
.start-hero .hero-dot{width:9px;height:9px;border-radius:50%;background:#7CB342;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#7CB342 22%,transparent)}
.start-hero .hero-zahl{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:34px;font-weight:600;color:var(--ink);line-height:1.05}
.start-hero .hero-zahl small{font-family:inherit;font-size:15px;font-weight:400;color:var(--muted);margin-left:3px}
.start-hero .hero-meta{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.4}
.start-hero .hero-motiv{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.start-hero .hero-weiter{margin-top:16px;width:100%;display:block;text-align:center;text-decoration:none}
.start-hero .hero-ring-zahl{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:30px;font-weight:600;fill:var(--ink)}
.start-hero .hero-ring-sub{font-family:'Inter',sans-serif;font-size:10px;fill:var(--muted)}
.start-hero .hero-ring-von{font-family:'Inter',sans-serif;font-size:9px;fill:var(--muted)}

/* Drei-Kachel-Reihe als FOOTER-Sektion der Hero-Karte (Mockup: beides in einer
   Karte, durch feine horizontale Linie getrennt). Kein eigener Kartenschatten. */
.start-kacheln{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--nebel-l)}
.start-kacheln .tile{margin:0;min-width:0;border:none;border-radius:0;box-shadow:none;
  background:transparent;padding:4px 12px;text-align:center;display:block;color:var(--ink)}
.start-kacheln .tile + .tile{border-left:1px solid var(--nebel-l)}
.start-kacheln .tile .k-top{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:6px}
.start-kacheln .tile .k-top .ic{width:auto;height:auto;background:transparent;display:inline-flex;align-items:center;justify-content:center;flex:none}
.start-kacheln .tile .k-top .ic svg{width:16px;height:16px}
.start-kacheln .tile.k-uhr .k-top .ic svg{stroke:#7CB342;color:#7CB342}
.start-kacheln .tile.k-flamme .k-top .ic svg{fill:#E67E22;stroke:none;color:#E67E22}
.start-kacheln .tile.k-pokal .k-top .ic svg{stroke:#3D6FB0;color:#3D6FB0}
.start-kacheln .tile .k-val{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:20px;font-weight:600;
  color:var(--ink);margin:0;line-height:1.1}
.start-kacheln .tile h4{font-size:11px;color:var(--muted);font-weight:500;margin:0;letter-spacing:.2px;white-space:normal}

/* "Ueber dein Ziel hinaus"-Karte (nur wenn Summe > Ziel). Balken: gruen 0..40,
   blau 40..gesamt, 40-Marke an der Nahtstelle. */
.start-ueberziel{display:block;scroll-margin-bottom:84px}
.start-ueberziel .uz-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.start-ueberziel .uz-head .eyebrow{margin-bottom:0}
.start-ueberziel .uz-info{width:18px;height:18px;flex:none;color:var(--muted);display:flex}
.start-ueberziel .uz-info svg{width:18px;height:18px;stroke:var(--muted)}
.start-ueberziel .uz-titel{font-size:13.5px;font-weight:500;color:var(--muted);margin:0 0 14px;line-height:1.35}
.start-ueberziel .uz-row{display:flex;align-items:center;gap:10px}
.start-ueberziel .uz-stat{flex:none;width:76px;text-align:center}
.start-ueberziel .uz-stat .uz-zahl{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:26px;font-weight:600;color:var(--ink);line-height:1}
.start-ueberziel .uz-stat .uz-unit{font-size:10px;color:var(--muted);margin-left:2px}
.start-ueberziel .uz-stat .uz-label{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.start-ueberziel .uz-barwrap{flex:1;position:relative;min-width:0;margin-bottom:22px}
.start-ueberziel .uz-bar{position:relative;height:10px;border-radius:5px;overflow:hidden;background:var(--nebel-l)}
.start-ueberziel .uz-bar .uz-green{position:absolute;left:0;top:0;bottom:0;background:#7CB342}
.start-ueberziel .uz-bar .uz-blue{position:absolute;top:0;bottom:0;background:#3D6FB0}
.start-ueberziel .uz-mark{position:absolute;top:100%;transform:translateX(-50%);margin-top:4px;
  font-size:10px;color:var(--muted);white-space:nowrap}
.start-ueberziel .uz-mark::before{content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
  width:1px;height:6px;background:var(--nebel)}
.start-ueberziel .uz-foot{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.4}

/* K11: Voraussetzungen-Block auf der Uebungsseite */
details.vorauss{margin-bottom:14px}
details.vorauss summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--heading)}
details.vorauss p,details.vorauss li{font-size:13px;color:var(--muted);line-height:1.6}
details.vorauss p{margin-top:10px}
details.vorauss ul{margin:8px 0 0 18px;padding:0}
details.vorauss li{margin-bottom:4px}
details.vorauss strong{color:var(--heading)}

/* K12: strukturierte Uebungsbeschreibung (Absaetze/Listen) in Info-Box,
   Legende und Video-Textblock */
.exdesc p{margin:6px 0 0}
.exdesc ul,.info .inner ul{margin:4px 0 0;padding-left:18px}
.exdesc ul ul,.info .inner ul ul{margin:2px 0 0}
.exdesc li,.info .inner li{margin-bottom:3px}
.vid .info.lesen .inner ul{font-size:12px;color:var(--muted);line-height:1.6}

/* K13: luftigerer Textfluss im CP-Test-Reiter (langer, mehrgliedriger Text).
   KEINE font-size -> Fliesstext erbt 16px vom Body, exakt wie .exdesc p (= "gleich
   wie die Atemuebungen", Konstantins Wunsch); Titel-strong in --petrol wie
   .exdesc strong. Scope :not(.lesen) schuetzt die Video-"Lieber lesen?"-Box
   (eigene Overrides Z.373/429; setzt kein margin, ein blankes .info .inner p
   wuerde dort durchschlagen). .exdesc laeuft NICHT ueber .info .inner -> unberuehrt;
   Legende nutzt .legrow-Divs (keine echten <p>). :has() = progressive enhancement:
   ohne Unterstuetzung faellt der Titel sauber auf den 10px-Absatzabstand zurueck
   (kein Layout-Bruch) - iOS-Safari >=15.4 (2022) kann :has(). */
.info:not(.lesen) .inner p{line-height:1.6;color:var(--ink);margin:10px 0 0}
.info:not(.lesen) .inner p:first-child{margin-top:0}
.info:not(.lesen) .inner p strong{color:var(--petrol)}
.info:not(.lesen) .inner p:has(> strong:first-child){margin-top:18px}
.info:not(.lesen) .inner p:first-child:has(> strong:first-child){margin-top:0}
.info:not(.lesen) .inner ul{margin:6px 0 0;padding-left:20px}
.info:not(.lesen) .inner li{margin-bottom:5px;line-height:1.55}

/* K8b: dezenter Loeschen-Button in der Uebungs-Historie */
.histrow .sess-del{display:block;margin-left:auto;border:0;background:none;font-family:inherit;
  font-size:11px;color:var(--muted);cursor:pointer;padding:3px 0 0;text-decoration:underline}

/* K8a: Protokoll-Tabelle in der Coach-Detailansicht */
.ptab{width:100%;border-collapse:collapse;font-size:11.5px}
.ptab th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--gold-ink);padding:6px 8px 6px 0;border-bottom:1px solid var(--line)}
.ptab td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);color:var(--muted);
  vertical-align:top;line-height:1.5}
/* Kopfzeile und Hauptzeile duerfen trennen (lang="de" ist gesetzt): ohne das
   setzen die laengsten Einzelwoerter ("Anmerkungen", Freitext) eine
   Mindestbreite, mit der die Tabelle auf schmalen Displays aus der Karte laeuft
   und die Werte rechts abgeschnitten werden. Die aufgeklappte Detailzeile ist
   bewusst ausgenommen - ihre Beschriftungen sind Fachbegriffe und sollen nicht
   getrennt werden. */
.ptab th,.ptab tr.pmain>td{-webkit-hyphens:auto;hyphens:auto}
.ptab th,.ptab td{overflow-wrap:break-word}
/* Nur die Datumsspalte der Hauptzeile bleibt einzeilig. Ohne die Einschraenkung
   auf tr.pmain traf die Regel auch die aufgeklappte Detailzeile (deren
   colspan-Zelle ist ebenfalls :first-child) - dort konnten Beschriftung und
   Wert dann nirgends umbrechen und liefen in die Nachbarspalte. */
.ptab tr.pmain>td:first-child{white-space:nowrap;color:var(--ink);font-weight:600}
.ptab tr:last-child td{border-bottom:0}

/* K8c: aufklappbare Detailzeile pro Protokoll */
.ptab tr.pmain{cursor:pointer}
.ptab tr.pdet{display:none}
.ptab tr.pdet.show{display:table-row}
.ptab tr.pdet>td{padding:4px 0 12px}
.ptab tbody tr:nth-last-child(2) td{border-bottom:0} /* letzte pmain-Zeile (vor ihrer pdet-Zeile) */
/* min(100%,...) statt 150px: eine einzelne Spalte darf die Kachel nie breiter
   machen als ihren Rahmen. 170px, damit zwei Spalten erst entstehen, wenn beide
   wirklich Platz fuer Beschriftung und Wert haben. */
.pdet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:0 18px}
/* Beschriftung und Wert stehen nebeneinander, solange sie nebeneinander passen -
   sonst rutscht der Wert in die naechste Zeile statt in die Nachbarspalte. */
.pdet-grid .kv{font-size:11.5px;padding:5px 0;flex-wrap:wrap;column-gap:12px;row-gap:0}
.pdet-grid .kv .k,.pdet-grid .kv .v{min-width:0}
.pdet-grid .kv .v{margin-left:auto}
.pdet-anm{margin-top:6px;font-size:11.5px;color:var(--ink);line-height:1.5;white-space:pre-wrap}
.pdet-uebungen{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.pdet-uebungen .kv{font-size:11.5px;padding:5px 0}

/* Eingangs-Fragebogen in der Coach-Detailansicht: auf-/zuklappbar, Start
   zugeklappt (Wunsch K. Tafill 18.08. - nach ein, zwei Monaten braucht der
   Coach den Bogen nicht mehr staendig, die Protokolle sind das Wichtige).
   Klapp-Muster wie die Protokoll-Detailzeile (.pmain/.pdet.show): klickbare
   Kopfzeile toggelt .show am Body. Kein Merken ueber Sessions/Klienten. */
.fb-klapp-kopf{display:flex;align-items:center;gap:8px;cursor:pointer}
.fb-klapp-kopf h3{flex:1}
.fb-klapp-chev{flex:none;color:var(--muted);font-size:14px;line-height:1;
  transition:transform .15s;transform:rotate(-90deg)}
.fb-klapp-kopf.fb-offen .fb-klapp-chev{transform:rotate(0)}
.fb-klapp-body{display:none}
.fb-klapp-body.show{display:block}

/* Coach-Analyse (CP-Entwicklung) */
.atabs{display:flex;gap:8px;margin-bottom:14px}
.atabs button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:999px;
  padding:9px 0;font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer}
.atabs button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.cardtitle{font-size:12px;font-weight:600;color:var(--petrol);letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:10px}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.acard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--card-shadow);padding:12px 14px}
.acard .al{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.acard .av{font-size:21px;font-weight:600;color:var(--ink);margin:4px 0 2px}
.acard .as{font-size:11px;color:var(--muted);line-height:1.4}
.zchart{display:block;border-radius:10px;overflow:hidden}
.zleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:10.5px;color:var(--muted)}
.zleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;opacity:.6}
.einord p{font-size:13px;line-height:1.55;color:var(--ink);margin:0 0 6px}
.einord .ahin{font-size:12px;color:var(--gold-ink)}
.hist-scroll{max-height:420px;overflow-y:auto}
.biglink{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--card-shadow);padding:14px 16px;margin-bottom:14px;text-decoration:none}
.biglink .t{display:block;font-size:14px;font-weight:600;color:var(--petrol)}
.biglink .s{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
button.ghost{display:block;width:100%;margin-top:10px;border:1px solid var(--line);background:var(--white);
  border-radius:11px;padding:10px;font-family:inherit;font-size:12.5px;color:var(--petrol);cursor:pointer}

/* D: 7-Tage-Ernaehrungsuebersicht */
.ernaehrung-reihe { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 0; }
.ernaehrung-tag { flex: 1 1 0; min-width: 42px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ernaehrung-tag.leer { opacity: 0.45; }
.ernaehrung-datum { font-size: 11px; color: #6B7B85; }
.ernaehrung-chip { width: 100%; height: 28px; border-radius: 6px; }
.ernaehrung-kat { font-size: 10px; color: #6B7B85; text-transform: capitalize; }
.ernaehrung-legende { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
.ernaehrung-leg-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6B7B85; }
.ernaehrung-leg-farb { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* D: Ernährungs-Eingabe-Chips (ersetzen das <select>). Farben/Labels kommen
   aus app.js (ERNAEHRUNG_FARBEN), hier nur Form/Bord. Mobil 390px: 4 Chips
   nebeneinander, flex-wrap faengt enge Viewports ab. */
.ernaehrung-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ernaehrung-chip-btn {
  flex: 1 1 0; min-width: auto; padding: 10px 8px; border-radius: 999px;
  border: 2px solid #E0E5E9; background: transparent; color: #4A5560;
  font: 600 14px/1.2 'Inter', system-ui, sans-serif; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ernaehrung-chip-btn:active { opacity: .85; }
.ernaehrung-chip-btn.selected { color: #fff; }
.ern-tip { color: #3F6276; font-weight: 600; }
.ern-verteilung { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ern-verteilung-row { display: flex; align-items: center; gap: 8px; }
.ern-verteilung-farb { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; }
.ern-verteilung-label { flex: 0 0 auto; min-width: 84px; font-size: 14px; color: #4A5560; text-transform: capitalize; }
.ern-verteilung-anteil { height: 10px; border-radius: 5px; background: #3F6276; opacity: .55; flex: 1 1 auto; min-width: 0; }
.ern-verteilung-n { flex: 0 0 auto; font-weight: 600; color: #2A333B; min-width: 28px; text-align: right; }
.ern-verteilung-keine .ern-verteilung-label { color: #8B97A1; }

/* Kälte & Wärme: Eingabe-Chips (gleiche Form wie ernaehrung-chip-btn). */
.kaelte-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.kaelte-chip-btn {
  flex: 1 1 0; min-width: auto; padding: 10px 8px; border-radius: 999px;
  border: 2px solid #E0E5E9; background: transparent; color: #4A5560;
  font: 600 14px/1.2 'Inter', system-ui, sans-serif; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.kaelte-chip-btn:active { opacity: .85; }
.kaelte-chip-btn.selected { color: #fff; }

/* Kälte & Wärme: 7-Tage-Übersicht (gleiche Form wie ernaehrung-reihe). */
.kaelte-reihe { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 0; }
.kaelte-tag { flex: 1 1 0; min-width: 42px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.kaelte-tag.leer { opacity: 0.45; }
.kaelte-datum { font-size: 11px; color: #6B7B85; }
.kaelte-marker { display: flex; gap: 3px; height: 12px; }
.kaelte-dot { width: 10px; height: 10px; border-radius: 50%; background: #E0E5E9; }
.kaelte-dot.on { background: var(--kd, #3F6276); }
.kaelte-legende { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); }
.kaelte-leg-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6B7B85; }
.kaelte-leg-farb { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Kälte & Wärme: Verlaufs-Seite — Umschalter Woche/Monat. */
.kaelte-toggle { display: flex; gap: 0; margin-bottom: 12px; border-radius: 999px; overflow: hidden; border: 2px solid #E0E5E9; }
.kaelte-toggle-btn {
  flex: 1; padding: 8px 12px; border: none; background: transparent;
  font: 600 14px/1.2 'Inter', system-ui, sans-serif; color: #4A5560;
  cursor: pointer; transition: background .12s, color .12s;
}
.kaelte-toggle-btn.selected { background: #3F6276; color: #fff; }
.kaelte-stat { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.kaelte-stat-farb { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px; }
.kaelte-stat-label { flex: 0 0 auto; min-width: 84px; font-size: 14px; color: #4A5560; }
.kaelte-stat-n { flex: 0 0 auto; font-weight: 600; color: #2A333B; min-width: 28px; text-align: right; }
.kaelte-stat-temp { font-size: 13px; color: #6B7B85; margin-left: 8px; }

/* Bool-Raster Stufe 1 (reine Anzeige): Monatskalender-Grid Mo-So.
   Mobil-First: 7 Spalten + 6px Gap passen bei 390px ohne horizontalen
   Overflow (card-inner ~306px -> ~38px/Zelle). Kein overflow-x:auto,
   damit scrollWidth <= innerWidth garantiert bleibt. */
.kaelte-raster { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* Monats-Navigation ueber dem Raster (Stufe 1, reine Anzeige). Mobil-First:
   flex mit space-between haelt alle drei Elemente in einer Zeile; die
   Monatsbeschriftung kann schrumpfen (ellipsis), die Buttons bleiben fix.
   Passt bei 390px ohne horizontalen Overflow (card-inner ~306px). */
.kaelte-raster-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.kaelte-raster-nav-btn {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #F4F1E8;
  color: #3F6276;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kaelte-raster-nav-btn:active { background: #E8E2D2; }
.kaelte-raster-nav-btn:focus-visible { outline: 2px solid #6BA3D6; outline-offset: 1px; }
.kaelte-raster-nav-monat {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1C2D37);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kaelte-raster-kopf,
.kaelte-raster-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kaelte-raster-wt { text-align: center; font-size: 11px; font-weight: 600; color: #6B7B85; padding: 2px 0; }
.kaelte-raster-tag {
  min-width: 0; min-height: 44px; padding: 4px 2px 5px; border-radius: 8px;
  background: #F4F1E8; border: 1px solid rgba(0,0,0,0.05);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; overflow: hidden;
}
.kaelte-raster-tag.leer { opacity: 0.5; }
.kaelte-raster-tag.leerplatz { background: transparent; border-color: transparent; }
.kaelte-raster-tag[data-eisbaden="true"] { cursor: pointer; border-color: rgba(63,98,118,0.4); }
.kaelte-raster-tag[data-eisbaden="true"]:focus { outline: 2px solid #6BA3D6; outline-offset: 1px; }
.kaelte-raster-datum { font-size: 11px; font-weight: 600; color: #2A333B; line-height: 1; }
.kaelte-raster-marker { display: flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: nowrap; }
.kaelte-raster-marker .kaelte-dot { width: 8px; height: 8px; }
.kaelte-raster-temp {
  font-size: 10px; font-weight: 600; color: #3F6276; line-height: 1; min-height: 11px;
  white-space: nowrap;
}
.kaelte-raster-temp.kaelte-raster-temp-empty { color: transparent; }
/* Eisbaden-Temp default versteckt; on-tap per .show-temp sichtbar. */
.kaelte-raster-tag[data-eisbaden="true"] .kaelte-raster-temp:not(.kaelte-raster-temp-empty) { display: none; }
.kaelte-raster-tag[data-eisbaden="true"].show-temp .kaelte-raster-temp:not(.kaelte-raster-temp-empty) { display: block; }
.kaelte-raster-tag[data-eisbaden="true"].show-temp .kaelte-raster-temp.kaelte-raster-temp-empty { display: none; }

/* Wochen-Seite: Nachtrage-Funktion. */
.woche-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.woche-titel { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.woche-liste { display: flex; flex-direction: column; gap: 0; }
.woche-tag {
  display: block; text-decoration: none; color: inherit;
  padding: 11px 12px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .15s; border-radius: 10px;
}
.woche-tag:last-child { border-bottom: 0; }
.woche-tag:hover { background: var(--tint); }
.woche-tag:active { opacity: .85; }
.woche-tag.leer .woche-tag-summe { color: var(--ph); font-style: italic; }
.woche-tag.heute { background: var(--tint-2); }
.woche-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.woche-tag-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.woche-tag-datum { font-size: 12px; color: var(--muted); }
.woche-tag-summe { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Ernährungs-Monatskalender (Stufe 1, reine Anzeige).
   7-Spalten-Grid Mo-So, ein Farbfeld pro Tag nach ernaehrung-Kategorie.
   Mobil 390px ohne horizontalen Overflow (wie ernaehrung-reihe / Kälte-Raster).
   Farben kommen aus app.js (ERNAEHRUNG_FARBEN), hier nur Form/Bord. */
.ern-raster-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ern-raster-titel { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: var(--heading); }
.ern-raster-nav { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--heading); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ern-raster-nav:active { opacity: .85; }
.ern-raster-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ern-raster-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ern-raster-wt { font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.ern-raster-zelle { min-width: 0; aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 6px; padding: 0; cursor: pointer; display: flex; align-items: flex-start; justify-content: flex-start; font: inherit; color: #fff; }
.ern-raster-zelle:active { opacity: .85; }
.ern-raster-zelle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--btn-primary); }
.ern-raster-leer { background: transparent !important; cursor: default; border: 1px dashed transparent; }
.ern-raster-tag { font-size: 10px; line-height: 1; padding: 3px 0 0 4px; color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: none; }
.ern-raster-zelle.keine { background: var(--card) !important; border: 1px solid var(--line); }
.ern-raster-zelle.keine .ern-raster-tag { color: var(--muted); text-shadow: none; }
.ern-raster-zelle.heute { outline: 2px solid var(--btn-primary); outline-offset: 1px; }
.ern-raster-info { font-size: 12.5px; color: var(--muted); margin-top: 10px; min-height: 18px; }
@media (max-width: 390px) {
  .ern-raster-grid { gap: 3px; }
  .ern-raster-tag { font-size: 9px; padding: 2px 0 0 3px; }
}

/* ---- Dranbleib-Radar (Coach-Klientenliste) ----
   Nutzt ausschliesslich die vorhandenen Ampel-Toene der Palette
   (--ok / --warn / --err-ink), keine neuen Farben. */
.radarrow { padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.radarrow:last-child { border-bottom: 0; }
.radarrow .rkopf { display: flex; align-items: center; gap: 8px; }
.radarrow .rpunkt { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; }
.radarrow .rname { font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radarrow.gruen .rpunkt { background: var(--ok); }
.radarrow.gelb  .rpunkt { background: var(--warn); }
.radarrow.rot   .rpunkt { background: var(--err-ink); }
.badge.gruen { background: var(--ok-bg);  color: var(--ok); }
.badge.gelb  { background: var(--warn-bg); color: var(--warn); }
.badge.rot   { background: var(--err-bg);  color: var(--err-ink); }
/* Kennzahlen umbrechen auf schmalen Geraeten, statt die Zeile zu sprengen */
.radarrow .rkpi { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0 18px;
  font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.radarrow .rkpi b { color: var(--ink); font-weight: 600; }
.radar-legende { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* Aktionsknoepfe je Klientenzeile: duerfen umbrechen, damit drei Elemente
   (Badge + zwei Knoepfe) auf schmalen Geraeten nicht ueberlaufen. */
.linkrow .rowaktionen { display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: center; gap: 6px; flex: 0 1 auto; }
.btn-mini { width: auto; padding: 7px 10px; font-size: 11.5px; white-space: nowrap; }

/* --- Morgen-CP-Schaubild: antippbar + Tagesansicht (Konstantin-Wunsch B) ---
   Aufgeraeumt: das Schaubild traegt die Uebersicht, Einzelwerte wandern in die
   Tagesansicht. Alle Masse fliessend, damit 360 px nicht ueberlaufen. */
.cp-chartbox { cursor: pointer; border-radius: 10px; }
.cp-chartbox:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.cp-hinweis { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

.cp-tagbox { margin-top: 10px; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--white); }
.cp-tagbox:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.cpt-kopf { display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.cpt-kopf .cpt-zu { width: auto; min-width: 28px; padding: 2px 8px; font-size: 13px;
  line-height: 1.4; background: none; border: 1px solid var(--line); color: var(--muted); }

/* Zwei feste Pfeilknoepfe, Mitte flexibel: min-width:0 verhindert den Ueberlauf,
   wenn der Inhalt breiter waere als der freie Platz. */
.cpt-reihe { display: flex; align-items: center; gap: 8px; }
.cpt-reihe > button { flex: 0 0 auto; width: 36px; min-width: 36px; padding: 8px 0;
  font-size: 17px; line-height: 1; }
.cpt-reihe > button:disabled { opacity: .35; }
.cpt-inhalt { flex: 1 1 auto; min-width: 0; text-align: center; }

.cpt-datum { font-size: 12px; color: var(--muted); }
.cpt-wert { font-size: 30px; font-weight: 600; color: var(--petrol); line-height: 1.15; }
.cpt-wert .cpt-einheit { font-size: 14px; font-weight: 400; margin-left: 3px; color: var(--muted); }
.cpt-richtung { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 2px 6px; font-size: 12.5px; margin-top: 2px; }
.cpt-r { font-weight: 600; }
.cpt-hoch { color: var(--ok); }
.cpt-runter { color: var(--err-ink); }
.cpt-gleich, .cpt-neu { color: var(--muted); }
.cpt-bezug { color: var(--muted); font-size: 11.5px; }
.cpt-zaehler { font-size: 11px; color: var(--muted); margin-top: 4px; }
.cpt-wisch { font-size: 11px; color: var(--muted); text-align: center; margin: 8px 0 0; }

/* ---------- AW: Apnoe Walk ---------- */
/* Sicherheitshinweis (Spec 30) vor dem ersten Start */
.aw-safety{text-align:left;font-size:13px;color:var(--ink);line-height:1.6}
.aw-safety ul{list-style:disc;padding-left:20px;margin:8px 0 14px}
.aw-safety li{margin-bottom:6px}
/* Setup: Programm-Uebersicht (Schritte primaer, Sekunden sekundaer - Spec 33) */
.aw-plan{text-align:left;font-size:12.5px;color:var(--ink);line-height:1.7;
  background:var(--tint-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.aw-plan .wp{display:flex;justify-content:space-between;gap:8px}
.aw-plan .wp .ws{color:var(--muted)}
.aw-hint{font-size:11px;text-align:center}
/* Editor */
.aw-name{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--white);
  border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);margin-bottom:14px}
.aw-warmup{grid-template-columns:minmax(0,1fr);max-width:170px;margin:0 auto 16px}
.aw-round-row{border:1px solid var(--line);border-radius:14px;background:var(--white);
  padding:10px;margin-bottom:10px;text-align:left}
.aw-round-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
.aw-round-head .rn{font-size:11.5px;font-weight:600;color:var(--gold-ink);letter-spacing:.4px;text-transform:uppercase}
.aw-round-head .tools{display:flex;gap:2px}
.aw-round-head .tools button{width:30px;height:30px;border:0;background:transparent;border-radius:8px;
  font-size:14px;color:var(--petrol);cursor:pointer;touch-action:manipulation}
.aw-round-head .tools button:active{background:var(--tint)}
.aw-round-head .tools button:disabled{opacity:.3}
.aw-typetoggle{display:flex;gap:6px;margin-bottom:8px}
.aw-typetoggle button{flex:1;border:1px solid var(--line);background:var(--white);border-radius:999px;
  padding:8px 4px;font-family:inherit;font-size:11px;color:var(--muted);cursor:pointer;transition:.15s}
.aw-typetoggle button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.aw-steppers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.aw-auto{font-size:11px;color:var(--muted);text-align:center;margin:0 0 8px}
.aw-danger{color:#9A3B3B}
/* Lauf-Buehne: HOLD und RECOVERY deutlich verschieden (Spec 16) */
.aw-stage{border-radius:18px;padding:16px 10px 10px;margin-bottom:12px;transition:background .2s}
#apnoe-walk.aw-hold .aw-stage{background:color-mix(in srgb,var(--nebel-l) 45%,var(--white))}
#apnoe-walk.aw-recovery .aw-stage{background:var(--ok-bg)}
#apnoe-walk.aw-prepare .aw-stage,#apnoe-walk.aw-warmup .aw-stage{background:var(--tint-2)}
.aw-phase{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--heading);margin-bottom:6px}
.aw-steps{font-family:'Cormorant Garamond',serif;font-size:46px;font-weight:600;color:var(--petrol);
  line-height:1.1;letter-spacing:.5px}
.aw-sek{font-size:13px;color:var(--muted);margin-bottom:4px}
/* Jetzt-atmen: sehr gross, einhaendig erreichbar (Spec 14/20) */
.aw-jetzt{width:100%;font-size:20px;padding:22px 14px;border-radius:18px;margin-bottom:12px;
  touch-action:manipulation}
/* Abschluss (Spec 27): neutral, keine Gamification */
.aw-sumstats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 12px}
.aw-sumstats .ss{background:var(--tint-2);border:1px solid var(--line);border-radius:12px;padding:8px 6px}
.aw-sumstats .ss .sv{font-size:16px;font-weight:600;color:var(--petrol)}
.aw-sumstats .ss .sl{font-size:10.5px;color:var(--muted)}
.aw-sumrounds{text-align:left;font-size:12.5px;color:var(--ink);line-height:1.7;margin-bottom:12px}
.aw-sumrounds .sr{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--tint);padding:3px 0}
.aw-sumrounds .sr:last-child{border-bottom:0}
.aw-sumrounds .sr .sd{color:var(--muted);text-align:right}
/* Abbruch-Dialog (Spec 31) */
.aw-abort{position:fixed;inset:0;background:rgba(43,58,68,.45);display:flex;
  align-items:center;justify-content:center;z-index:40;padding:24px}
.aw-abort-box{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--card-shadow);padding:18px;width:100%;max-width:320px;
  display:flex;flex-direction:column;gap:10px}
.aw-abort-title{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;
  color:var(--heading);text-align:center;margin:0 0 4px}

/* ---------- Voice-Journal (Kette 1, nur bei Feature-Flag voice_aktiv sichtbar) ----------
   Rein additiv: nur neue Selektoren, keine Bestandsregel veraendert. Bei
   Flag=false erzeugt das Frontend keine Elemente mit diesen Klassen. */
.voice-overlay{position:fixed;inset:0;background:rgba(43,58,68,.5);z-index:60;
  display:flex;align-items:flex-end;justify-content:center}
.voice-dialog{background:var(--card);width:100%;max-width:460px;max-height:92vh;
  border-radius:16px 16px 0 0;box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;padding:16px 18px 0}
.voice-entwurf{flex:none;background:var(--warn-bg);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:8px;
  padding:8px 10px;font-size:12px;font-weight:600;text-align:center;margin-bottom:10px}
.voice-text{flex:1;min-height:0;overflow-y:auto;font-size:14px;line-height:1.55;
  padding-right:2px}
.voice-text h3{font-size:16px;color:var(--heading);margin:2px 0 10px}
.voice-text p{margin:0 0 10px}
.voice-text ul{padding-left:18px;margin:0 0 10px}
.voice-text li{margin-bottom:8px}
.voice-fuss{flex:none;background:var(--card);border-top:1px solid var(--line);
  padding:12px 0 calc(14px + env(safe-area-inset-bottom));margin-top:10px}
.voice-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  line-height:1.4;cursor:pointer;margin-bottom:12px}
.voice-check input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--btn-primary)}
.voice-fuss .btn-primary{margin-bottom:8px}
.voice-fuss .btn-sec{width:100%}
.voice-entwurf-inline{display:inline-block;background:var(--warn-bg);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:6px;
  padding:3px 8px;font-size:11px;font-weight:600;margin:0 0 10px}
.voice-bereich .btn-sec{width:100%}

/* Voice-Journal Kette 2: Aufnahme-Block + Tagesliste (nur bei Flag+Gate) */
.voice-rec{margin:2px 0 12px}
.voice-rec-status{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.45}
.voice-rec-status.laeuft{color:var(--err-ink);font-weight:600}
.voice-rec-status.fehler{color:var(--err-ink)}
.voice-rec-status.ok{color:var(--ok)}
#voice-rec-start.voice-rec-laeuft{background:var(--err-ink)}
.voice-heute{border-top:1px solid var(--line);padding-top:8px;margin-bottom:12px}
.voice-heute:empty{display:none;border:0;padding:0;margin:0}
.voice-heute-titel{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin:0 0 6px}
.voice-heute-eintrag{font-size:13px;line-height:1.45;margin-bottom:8px}
.voice-heute-zeit{color:var(--muted);font-weight:600}
.voice-fehler{color:var(--err-ink)}

/* Voice-Journal Kette 3: Bestaetigungs-Dialog */
.voice-transkript{font-size:13.5px;line-height:1.5;background:var(--bg-soft,#f6f6f4);
  border-radius:8px;padding:10px 12px;margin:6px 0 4px}
.voice-korrigierbar{list-style:none;padding:0;margin:0 0 4px}
.voice-korrigierbar li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;
  line-height:1.45;padding:5px 0;border-bottom:1px solid var(--line)}
.voice-korrigierbar li:last-child{border-bottom:0}
.voice-weg{flex:0 0 auto;min-width:34px;min-height:34px;border:1px solid var(--line);
  background:#fff;border-radius:8px;color:var(--muted);font-size:13px;cursor:pointer}
.voice-weg-aktiv span{text-decoration:line-through;color:var(--muted)}
.voice-weg-aktiv .voice-weg{border-color:var(--err-ink);color:var(--err-ink)}
.voice-best-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--ok);border:1px solid var(--ok);border-radius:6px;padding:1px 6px;
  text-transform:uppercase}
.btn-klein{min-height:38px;font-size:13px;padding:6px 12px}

/* Voice-Journal Kette 5: KI-Analyse ("Meine Entwicklung" / Coach-Analyse).
   Bewusst nuechtern: Text zuerst, darunter die Zahlen. Farbe nur im Badge -
   verbessert/verschlechtert sollen unterscheidbar sein, aber nicht schreien. */
.ki-kopf{display:flex;gap:8px;align-items:center;margin:2px 0 8px}
.ki-kopf select{flex:1;min-width:0;padding:8px;box-sizing:border-box}
.ki-text h4{font-size:15px;color:var(--heading);margin:4px 0 8px}
.ki-text p{font-size:14px;line-height:1.55;margin:0 0 10px}
.ki-untertitel{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin:12px 0 6px}
.ki-liste{list-style:none;padding:0;margin:0 0 4px}
.ki-liste li{font-size:13.5px;line-height:1.5;padding:5px 0;border-bottom:1px solid var(--line)}
.ki-liste li:last-child{border-bottom:0}
.ki-label{font-weight:600}
.ki-wert{color:var(--muted)}
.ki-zeitraum{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.ki-hrv{font-size:12.5px;line-height:1.45;margin:8px 0 0}
.ki-badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  border-radius:6px;padding:1px 6px;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--line);color:var(--muted)}
.ki-verbessert{color:var(--ok);border-color:var(--ok)}
.ki-verschlechtert{color:var(--err-ink);border-color:var(--err-ink)}
.ki-fakten{border-top:1px solid var(--line);padding-top:8px;margin-top:12px}