@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{
  --bg:#F4F1EB; --bg-2:#ECE7DD; --surface:#FCFBF8;
  --ink:#303A35; --muted:#7E887F; --line:#E4DED2;
  --sage:#6F9384; --sage-deep:#527567; --sage-soft:#DCE6E0;
  --lavender:#9C93B8; --lavender-soft:#E7E3EF;
  --shadow:0 2px 10px rgba(60,72,64,.06), 0 8px 28px rgba(60,72,64,.05);
  /* Radius-Skala – 4 Stufen + Pille, ersetzt die zuvor 12 verstreuten Werte.
     Konzentrik-Regel: verschachtelte Ecken = Innenradius + Innenabstand.
     --radius / --radius-lg bleiben als semantische Aliasse (Karten / Sheets). */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --radius:var(--r-lg); --radius-lg:var(--r-xl);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --tabbar-bg:rgba(252,251,248,.9);
  /* Typo-Skala – 7 Stufen (Verhältnis ~1,2) plus eine Display-Größe fürs
     Onboarding. Ersetzt die zuvor 22 verstreuten Roh-/Halbpixelwerte.
     Hierarchie entsteht aus Größe + Gewicht + Farbe, nicht aus Größe allein. */
  --fs-2xs:11px; --fs-xs:13px; --fs-sm:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-hero:40px;
}
/* ---------- Dunkler Modus (ruhig gehalten, keine harten Kontraste) ---------- */
html[data-theme="dark"]{
  --bg:#161A18; --bg-2:#212622; --surface:#1F2421;
  --ink:#E6EAE5; --muted:#92998F; --line:#2E342F;
  --sage:#7BA08F; --sage-deep:#A7C6B8; --sage-soft:#2C3A33;
  --lavender:#A79DC2; --lavender-soft:#312E3C;
  --shadow:0 2px 10px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.3);
  --tabbar-bg:rgba(22,26,24,.94);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#161A18; --bg-2:#212622; --surface:#1F2421;
    --ink:#E6EAE5; --muted:#92998F; --line:#2E342F;
    --sage:#7BA08F; --sage-deep:#A7C6B8; --sage-soft:#2C3A33;
    --lavender:#A79DC2; --lavender-soft:#312E3C;
    --shadow:0 2px 10px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.3);
    --tabbar-bg:rgba(22,26,24,.94);
    color-scheme:dark;
  }
}
/* ---------- Textgröße (Mehr → Darstellung) ----------
   Sanfte Gesamtskalierung über zoom – wirkt wie die Anzeigegröße am Handy.
   Browser ohne zoom-Unterstützung zeigen einfach die Standardgröße. */
html[data-fontsize="s"] body{zoom:.92}
html[data-fontsize="l"] body{zoom:1.1}
/* iOS zoomt bei Eingabefeldern unter effektiv 16px automatisch hinein –
   bei „Klein" die Feld-Schrift entsprechend gegenskalieren */
html[data-fontsize="s"] input,html[data-fontsize="s"] textarea,html[data-fontsize="s"] select{font-size:17.5px}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Kein versehentlicher Doppeltipp-Zoom (und keine Tipp-Verzögerung) –
   bewusster Zwei-Finger-Pinch zum Vergrößern bleibt möglich (Barrierefreiheit) */
html{touch-action:manipulation}
/* hidden-Attribut muss auch gegen display-Regeln von Klassen gewinnen
   (z. B. .row2{display:grid} beim Zeitraum im PDF-Export) */
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  overscroll-behavior-y:none;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:var(--fs-md);color:var(--ink)}
/* Sichtbarer Fokusring – nur bei Tastatur/Fokus-Steuerung, nicht beim Antippen.
   :where() hält die Spezifität bei 0, damit Komponenten-Regeln vorgehen können.
   Buttons, Tabs, Chips u. a. hatten bisher gar keine Fokus-Rückmeldung. */
:where(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--sage);outline-offset:2px}

#app{
  max-width:560px; margin:0 auto;
  /* Mindestabstand oben, weil Android die Statusleiste nicht über
     safe-area-inset meldet (Edge-to-Edge) – sonst klebt der Kopf an der Uhr. */
  padding:calc(max(var(--safe-t), 24px) + 14px) 18px calc(108px + var(--safe-b));
  min-height:100%;
}

/* ---------- Kopfzeilen ---------- */
.page-head{margin:6px 2px 18px}
.eyebrow{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.page-title{font-family:var(--font-display);font-weight:500;font-size:var(--fs-2xl);line-height:1.1;margin:4px 0 0}
.page-sub{color:var(--muted);font-size:var(--fs-sm);margin-top:6px}

/* ---------- Karten ---------- */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.card-soft{background:var(--bg-2);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.card h3{margin:0 0 12px;font-size:var(--fs-md);font-weight:600}

/* ---------- Kalender ---------- */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-nav button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--sage-deep);background:var(--surface);box-shadow:var(--shadow)}
.cal-month{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal-dow{text-align:center;font-size:var(--fs-2xs);color:var(--muted);font-weight:600;padding-bottom:2px}
.cal-cell{aspect-ratio:1;border-radius:var(--r-md);background:var(--bg-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;transition:transform .15s ease}
.cal-cell:active{transform:scale(.94)}
.cal-cell.empty{background:transparent}
.cal-cell .num{font-size:var(--fs-sm);font-weight:500}
.cal-cell.today{outline:2px solid var(--sage);outline-offset:-2px}
.cal-cell .dot{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--lavender);opacity:.85}
.cal-cell .dot-panic{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--lavender);opacity:.75}
.cal-cell .dot-thought{position:absolute;top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:var(--sage);opacity:.75}
.cal-cell .dot-journal{position:absolute;bottom:6px;right:5px;width:5px;height:5px;border-radius:50%;background:#D8C7A4;opacity:.9}
.cal-cell.filled .num{color:#33403a;font-size:var(--fs-2xs);line-height:1;opacity:.75}
.cal-emoji{font-size:var(--fs-md);line-height:1}
.cal-legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-xs);color:var(--muted);justify-content:center}
.cal-legend .bar{height:9px;width:120px;border-radius:var(--r-xs);background:linear-gradient(90deg,#8B95B5,#D8C7A4,#8FB39E)}

/* ---------- Slider / Skalen ---------- */
.field{margin-bottom:18px}
.field > label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:9px}
.field .hint{font-weight:400;color:var(--muted);font-size:var(--fs-xs)}
.scale-row{display:flex;align-items:center;gap:14px}
.scale-pill{min-width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-md);color:#fff;flex:none;text-shadow:0 1px 3px rgba(0,0,0,.22)}
.sum-pill{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:var(--r-sm);font-weight:700;font-size:var(--fs-sm);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:var(--r-xs);background:var(--track,linear-gradient(90deg,#8B95B5,#D8C7A4,#8FB39E))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px var(--line);margin-top:-9px}
input[type=range]::-moz-range-track{height:10px;border-radius:var(--r-xs);background:var(--track,linear-gradient(90deg,#8B95B5,#D8C7A4,#8FB39E))}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18),0 0 0 1px var(--line)}
.scale-unset{font-size:var(--fs-xs);color:var(--muted);font-style:italic}
/* Gesicht rechts neben dem Regler: spiegelt den Wert (Tabler-Mood-Icons) */
.scale-face{flex:none;display:flex;align-items:center;transition:color .15s}
.scale-face.unset{color:var(--muted);opacity:.45}
/* Slider-Sperre gegen versehentliches Verstellen beim Scrollen:
   erst ein Tipp auf die Zeile schaltet den Regler frei.
   Der Hinweis-Pill macht das sichtbar, statt es erraten zu müssen. */
.scale-row{position:relative}
.scale-row.locked{cursor:pointer}
.scale-row.locked input[type=range]{pointer-events:none;opacity:.4}
.scale-row input[type=range]{transition:opacity .15s}
.scale-row .unlock-hint{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:4px 12px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(0,0,0,.1);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;pointer-events:none}
.scale-row.locked .unlock-hint{display:block}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:var(--r-pill);background:var(--bg-2);font-size:var(--fs-sm);color:var(--ink);transition:background .12s,color .12s;border:1.5px solid var(--line)}
.chip.on{background:var(--sage);color:#fff;border-color:transparent}

/* ---------- Check-ins (Heute-Seite) ---------- */
.ci-wrap{display:flex;flex-wrap:wrap;gap:8px}
.ci-item{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);border-radius:var(--r-pill);padding:4px 6px 4px 12px;font-size:var(--fs-xs);color:var(--muted)}
.ci-pill{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:var(--r-sm);font-weight:700;font-size:var(--fs-xs);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)}

/* ---------- Inputs ---------- */
textarea,input[type=text],input[type=number],input[type=tel],select{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-md);padding:12px 14px;resize:vertical;
}
textarea:focus,input:focus,select:focus{outline:2px solid var(--sage-soft);outline-offset:1px;border-color:var(--sage)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mini-label{font-size:var(--fs-xs);color:var(--muted);margin:0 0 5px 2px}

/* ---------- Toggle ---------- */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0}
.toggle + .toggle{border-top:1px solid var(--line)}
.toggle span{font-size:var(--fs-sm)}
.switch{width:50px;height:30px;border-radius:var(--r-pill);background:var(--line);position:relative;flex:none;transition:background .18s}
.switch::after{content:"";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:transform .18s}
.switch.on{background:var(--sage)}
.switch.on::after{transform:translateX(20px)}

/* Wasser-Zähler auf der Heute-Seite */
.wtr-row{display:flex;align-items:center;gap:14px}
.wtr-btn{flex:none;width:44px;height:44px;border:0;border-radius:var(--r-md);background:var(--bg-2);color:var(--ink);
  font-size:var(--fs-lg);display:grid;place-items:center;cursor:pointer}
.wtr-btn:disabled{opacity:.35;cursor:default}
.wtr-plus{background:var(--sage-soft)}
.wtr-mid{flex:1;text-align:center}
.wtr-count{font-size:var(--fs-xl);font-weight:600;font-variant-numeric:tabular-nums}
.wtr-count .wtr-goal{font-size:var(--fs-sm);font-weight:400;color:var(--muted);margin-left:4px}
.wtr-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:6px}
.wtr-dot{width:12px;height:12px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line)}
.wtr-dot.on{background:#8B95B5;border-color:#8B95B5}
.wtr-dot.extra.on{background:var(--sage)}

/* Sortier-Pfeile für die Bausteine der Heute-Seite (Einstellungen) */
.ord-btn{width:28px;height:28px;border:0;border-radius:var(--r-sm);background:var(--bg-2);color:var(--muted);
  display:grid;place-items:center;font-size:var(--fs-2xs);padding:0;flex:none;cursor:pointer}
.ord-btn:disabled{opacity:.3;cursor:default}

/* ---------- Gruppierte Einstellungen (Mehr-Seite) ---------- */
details.set-group{margin-bottom:12px}
details.set-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 18px;cursor:pointer}
details.set-group>summary::-webkit-details-marker{display:none}
details.set-group .sg-icon{flex:none;width:38px;height:38px;border-radius:var(--r-md);background:var(--bg-2);display:grid;place-items:center;color:var(--sage-deep)}
details.set-group .sg-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
details.set-group[open] .sg-icon{background:var(--surface)}
details.set-group .sg-text{flex:1;min-width:0}
details.set-group .sg-title{display:block;font-weight:600;font-size:var(--fs-sm)}
details.set-group .sg-sub{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
details.set-group>summary .chev{color:var(--muted);transition:transform .2s;flex:none}
details.set-group[open]>summary .chev{transform:rotate(180deg)}
details.set-group .sg-body{margin-top:12px;padding:0 8px}
details.set-group .sg-body>.card:last-child,details.set-group .sg-body>.card-soft:last-child{margin-bottom:4px}
/* Offene Gruppe als zusammenhängender Block: getönter, umrandeter Container,
   der die inneren Karten sichtbar von den zugeklappten Nachbar-Gruppen trennt.
   Der Kopf bleibt beim Scrollen oben kleben (sticky), sodass jederzeit
   erkennbar ist, in welchem Bereich man sich gerade befindet. */
details.set-group[open]{
  background:var(--sage-soft);border-radius:var(--radius-lg);
  margin:0 -8px 28px;padding:0 0 10px;box-shadow:var(--shadow);
}
details.set-group[open]>summary{
  background:var(--sage-soft);box-shadow:none;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  position:sticky;top:calc(max(var(--safe-t), 24px));z-index:5;
}
details.set-group[open] .sg-title{color:var(--sage-deep);font-size:var(--fs-md)}
details.set-group[open]>summary .chev{color:var(--sage-deep)}

/* ---------- Aufklappbare Bereiche ---------- */
details.sec{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
details.sec > summary{list-style:none;padding:16px 18px;font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:space-between}
details.sec > summary::-webkit-details-marker{display:none}
details.sec > summary .chev{color:var(--muted);transition:transform .2s}
details.sec[open] > summary .chev{transform:rotate(180deg)}
details.sec .sec-body{padding:0 18px 18px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:var(--r-md);font-size:var(--fs-md);font-weight:600;background:var(--sage);color:#fff;box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:var(--surface);color:var(--sage-deep);box-shadow:none;border:1.5px solid var(--line)}
html[data-theme="dark"] .btn-ghost{border-color:var(--muted)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .btn-ghost{border-color:var(--muted)}}
.btn-quiet{background:var(--bg-2);color:var(--ink);box-shadow:none;border:1.5px solid var(--line)}
html[data-theme="dark"] .btn-quiet{border-color:var(--muted)}
@media(prefers-color-scheme:dark){html[data-theme="auto"] .btn-quiet{border-color:var(--muted)}}
.btn-sm{width:auto;padding:10px 16px;font-size:var(--fs-sm)}

/* ---------- Tabbar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + var(--safe-b));
  background:var(--tabbar-bg);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:var(--fs-2xs);font-weight:600;flex:1;padding:4px 0;border-radius:var(--r-md)}
/* content-box + gleiches Padding auf allen Tabs: die aktive Pille erscheint,
   ohne dass das Layout beim Wechsel springt (nur die Füllung wechselt) */
.tab svg{width:24px;height:24px;box-sizing:content-box;padding:3px 16px;border-radius:var(--r-pill);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:background .18s ease,color .18s ease}
.tab svg [fill]:not([fill="none"]){fill:currentColor;stroke:none}
/* Aktiver Tab: Farbe UND Pille – zwei Unterscheidungsmerkmale (barrierefrei) */
.tab.active{color:var(--sage-deep)}
.tab.active svg{background:var(--sage-soft)}

/* ---------- Anker-Knopf ---------- */
.anchor-btn{
  position:fixed;right:18px;bottom:calc(76px + var(--safe-b));z-index:45;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--lavender);color:#fff;box-shadow:0 6px 18px rgba(120,110,150,.4);
}
.anchor-btn:active{transform:scale(.93)}

/* ---------- Sheet / Overlay ---------- */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
/* Wichtig: ohne diese Regel überdeckt das (leere) Overlay die ganze Seite und
   verschluckt alle Klicks, weil .sheet das hidden-Attribut überschreibt. */
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(40,48,44,.4);backdrop-filter:blur(2px);animation:fade .2s ease}
.sheet-panel{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--bg);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:10px 18px calc(28px + var(--safe-b));box-shadow:0 -10px 40px rgba(0,0,0,.18);
  animation:slideup .26s cubic-bezier(.22,.9,.34,1);-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.sheet-panel:focus{outline:none}
.sheet-grab{width:42px;height:5px;border-radius:var(--r-xs);background:var(--line);margin:8px auto 12px;touch-action:none;cursor:grab}
.sheet-head{touch-action:none}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.sheet-close{width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;color:var(--muted);font-size:var(--fs-md);flex:none}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Atemkreis (Signatur) ---------- */
.breath-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;padding:14px 0 6px;min-height:320px;justify-content:center}
.breath-stage{position:relative;width:230px;height:230px;display:grid;place-items:center}
.breath-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--sage-soft)}
.breath-circle{
  width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #8FB39E, #6F9384 70%);
  box-shadow:0 0 0 14px rgba(111,147,132,.10), 0 0 0 30px rgba(111,147,132,.06);
  transition:transform 4s ease-in-out;
}
/* 96px × 2.375 = 228px = Innendurchmesser des 230px-Rings (2×1px Rand) –
   der Kreis füllt den Rahmen beim Einatmen also genau aus */
.breath-circle.run{transform:scale(2.375)}
.breath-cue{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;color:var(--sage-deep);min-height:30px;text-align:center}
.breath-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-sm)}

/* ---------- Verlauf / Chart ---------- */
.chart-card canvas{width:100%;height:200px;display:block}
.legend{display:flex;gap:16px;margin-top:12px;font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:var(--r-xs);margin-right:6px;vertical-align:middle}
.stat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:center}
.stat .v{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;font-variant-numeric:tabular-nums}
.stat .l{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- Listen / Notfallplan ---------- */
.plan-item{margin-bottom:14px}
.plan-item label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--sage-deep);margin-bottom:6px}
.contact-line{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.contact-line a{flex:1;text-decoration:none;background:var(--sage-soft);color:var(--sage-deep);font-weight:600;padding:13px 14px;border-radius:var(--r-md);display:flex;justify-content:space-between;align-items:center}

.empty-note{color:var(--muted);font-size:var(--fs-sm);text-align:center;padding:30px 10px}
/* Bearbeiten-Modus: Lösch-Buttons ausblenden bis Bearbeiten aktiv */
.edit-list .rm-btn{visibility:hidden;pointer-events:none;opacity:0;transition:opacity .15s}
.edit-list.editing .rm-btn{visibility:visible;pointer-events:auto;opacity:1}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%);background:#243028;color:#E8EDE8;padding:11px 18px;border-radius:var(--r-pill);font-size:var(--fs-sm);z-index:80;box-shadow:var(--shadow);animation:fade .2s ease}

/* ---------- Kopfzeile mit Aktion ---------- */
.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--sage-deep);background:var(--surface);box-shadow:var(--shadow);flex:none;margin-top:6px}
.icon-btn:active{transform:scale(.93)}

/* ---------- Installations-Hinweis & Anleitung ---------- */
.install-hint{position:relative;border:1px solid var(--sage-soft)}
.hint-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:var(--bg);color:var(--muted);display:grid;place-items:center;font-size:var(--fs-sm)}
.install-steps{margin:0;padding-left:20px}
.install-steps li{margin-bottom:14px;line-height:1.4}
.install-steps li:last-child{margin-bottom:0}
.ios-share{display:inline-block;vertical-align:-3px;color:var(--sage-deep)}

/* ---------- Affirmation ---------- */
.affirm{text-align:center;padding:20px 18px;border:1px solid var(--sage-soft);background:linear-gradient(180deg,var(--sage-soft),var(--bg-2));cursor:pointer;user-select:none}
.affirm-text{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;color:var(--sage-deep);line-height:1.35}
.affirm-hint{font-size:var(--fs-2xs);color:var(--muted);margin-top:8px;letter-spacing:.04em}

/* ---------- Schnelleintrag ---------- */
.qscale{margin-top:4px}
.qscale .scale-row{gap:14px}

/* ---------- Segment-Umschalter (Zeitraum/Theme) ---------- */
.seg{display:flex;gap:4px;background:var(--bg-2);border-radius:var(--r-md);padding:4px;margin-bottom:14px}
.seg-btn{flex:1;padding:9px 6px;border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;color:var(--ink)}
.seg-btn.on{background:var(--surface);color:var(--sage-deep);box-shadow:var(--shadow)}

/* ---------- Wochenvergleich ---------- */
.wk-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:var(--fs-sm)}
.wk-row + .wk-row{border-top:1px solid var(--line)}
.trend-good{color:var(--sage-deep);font-weight:600;font-size:var(--fs-xs)}
.trend-soft{color:var(--lavender);font-weight:600;font-size:var(--fs-xs)}
.trend-flat{color:var(--muted);font-size:var(--fs-xs)}

/* ---------- Heatmap ---------- */
.heatmap{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px}
.heatmap .hm{aspect-ratio:1;border-radius:var(--r-xs);background:var(--bg-2)}
.heatmap .hm.future{opacity:0}

/* Sanfter Rückblick */
.review-quote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-md);line-height:1.5;color:var(--ink);margin:0 0 10px}

/* Medikamenten-Marker unter der Verlaufskurve */
.med-marks{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.med-mark{font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.med-mark i{width:12px;border-top:2px dashed var(--muted);opacity:.7;flex:none}
.med-mark em{font-style:normal;color:var(--sage-deep)}
.mm-d{font-variant-numeric:tabular-nums}

/* ---------- Symptom-Häufigkeit ---------- */
.freq-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.freq-l{flex:none;width:104px;font-size:var(--fs-xs)}
.freq-bar{flex:1;height:9px;border-radius:var(--r-xs);background:var(--bg-2);overflow:hidden}
.freq-bar span{display:block;height:100%;border-radius:var(--r-xs);background:var(--sage)}
.freq-n{flex:none;font-size:var(--fs-xs);color:var(--muted);width:30px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Zusammenhänge (Beobachtungs-Zeilen mit Symbol) ---------- */
.corr-list{margin:0}
.corr-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0}
.corr-item + .corr-item{border-top:1px solid var(--line)}
.corr-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);background:var(--bg-2);display:grid;place-items:center;font-size:var(--fs-md)}
.corr-item p{margin:0;font-size:var(--fs-sm);color:var(--ink);line-height:1.45;align-self:center}

/* ---------- Log-Zeilen (Panik / Gedanken) ---------- */
.log-row{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;margin-bottom:9px}
.log-row:active{transform:scale(.99)}
.lr-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lr-date{font-weight:600;font-size:var(--fs-sm)}
.lr-int{font-size:var(--fs-xs);color:var(--sage-deep);font-weight:600;flex:none}
.lr-sub{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- Suchergebnisse ---------- */
.search-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:9px}
.dot-mood{width:14px;height:14px;border-radius:50%;flex:none}
.sr-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sr-date{font-weight:600;font-size:var(--fs-sm)}
.sr-text{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Demo-/Vorschau-Banner ---------- */
.demo-banner{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:12px;
  /* Android meldet die Statusleiste nicht über safe-area-inset (nur Notches),
     daher Mindestabstand erzwingen, damit der Banner nicht unter Uhr/Akku rutscht. */
  padding:calc(max(var(--safe-t), 24px) + 8px) 16px 8px;background:var(--lavender);color:#fff;font-size:var(--fs-xs);font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,.18)}
.demo-banner button{background:rgba(255,255,255,.22);color:#fff;font-weight:600;padding:7px 14px;border-radius:var(--r-pill);font-size:var(--fs-xs)}
body.demo-on #app{padding-top:calc(max(var(--safe-t), 24px) + 52px)}

/* ---------- Medikamenten-Eintrag in Einstellungen ---------- */
.med-entry{background:var(--bg-2);border-radius:var(--r-md);padding:12px;margin-bottom:8px}
.med-entry .chips{margin-top:8px}

/* ---------- Weitergeben (Link + QR-Code) ----------
   Der QR-Code bleibt immer auf weißem Grund mit dunklen Modulen – auch im
   dunklen Design, sonst finden ihn die Kameras schlechter. Der weiße Rahmen
   liefert gleichzeitig die nötige Ruhezone. */
.share-qr{display:flex;flex-direction:column;align-items:center;margin-bottom:14px}
.share-qr-code{width:min(216px,62vw);aspect-ratio:1;background:#fff;border-radius:var(--r-md);
  padding:8px;box-shadow:var(--shadow);display:grid;place-items:center}
.share-qr-code svg{display:block;border-radius:var(--r-xs)}
.share-qr-cap{margin:10px 0 0;font-size:var(--fs-xs);color:var(--muted)}
.share-url{text-align:center;font-weight:600;color:var(--sage-deep);background:var(--bg-2)}

/* ---------- Onboarding-Wizard ---------- */
.ob-progress{display:flex;gap:5px;justify-content:center;margin-bottom:22px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s}
.ob-dot.on{background:var(--sage)}
.ob-title{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;margin:0 0 8px;line-height:1.2}
.ob-sub{color:var(--muted);font-size:var(--fs-sm);margin:0 0 22px}
.ob-nav{display:flex;gap:10px;margin-top:22px}
.ob-nav .btn{flex:1}
.ob-skip{flex:none;width:auto;padding:15px 20px;background:none;color:var(--muted);font-size:var(--fs-sm);font-weight:500}

/* ---------- Signature: „Anker findet Halt" (erster Eindruck im Onboarding) ----------
   Die Marke der App als ruhiger Moment statt als Deko: der Anker sinkt ein und
   pendelt sich aus – Halt finden ist das Kernversprechen. Danach ein kaum
   merkliches Schweben, damit er anwesend wirkt, ohne zu zappeln. Ein einziger
   Delight-Moment mit benennbarem Anlass; respektiert prefers-reduced-motion. */
.anker-hero{display:flex;justify-content:center;margin:2px 0 20px}
.anker-pool{position:relative;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--sage-soft), var(--bg-2));
  display:grid;place-items:center}
/* Einmalige Welle nach unten – wie ein Anker, der die Wasseroberfläche berührt */
.anker-pool::after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;
  border:1.5px solid var(--sage);opacity:0;animation:anker-ripple 1.4s ease-out .35s 1 both}
.anker-mark{width:56px;height:56px;color:var(--sage-deep);transform-origin:50% 12%;
  animation:anker-settle .9s cubic-bezier(.22,.9,.34,1) both}
.anker-mark svg{width:100%;height:100%;display:block;animation:anker-float 7s ease-in-out 1.2s infinite}
/* Pendelt vom oberen Ring (wo das Tau hält) aus, Ausschläge werden kleiner */
@keyframes anker-settle{
  0%{opacity:0;transform:translateY(-16px) rotate(-9deg)}
  55%{opacity:1}
  70%{transform:translateY(0) rotate(5deg)}
  85%{transform:rotate(-2.5deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
@keyframes anker-ripple{0%{opacity:.45;transform:scale(.55)}100%{opacity:0;transform:scale(1.6)}}
@keyframes anker-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(1.2deg)}}
@media (prefers-reduced-motion: reduce){
  .anker-mark,.anker-mark svg{animation:none;transform:none;opacity:1}
  .anker-pool::after{display:none}
}

/* ---------- Ruhe: Abschnitts-Label ---------- */
.calm-group-label{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:22px 2px 10px}
.page-head + .calm-group-label{margin-top:6px}
/* Ruhe-Seite: Werkzeuge als Kacheln (Icon + Name statt Karte mit Erklärabsatz) */
.calm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calm-tile{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  text-align:left;color:var(--ink);font-size:var(--fs-sm);font-weight:600;line-height:1.25;
  transition:transform .12s}
.calm-tile:active{transform:scale(.97)}
.ct-icon{color:var(--sage);display:flex}
/* Skills: Zeile aus Haupt-Knopf und Favoriten-Stern. Der Stern liegt bewusst
   neben dem Knopf statt darin – ein Button im Button ist ungültig und wäre auf
   dem Handy kaum zielsicher zu treffen. Beide Ziele sind ≥ 44 px hoch. */
.skill-row{display:flex;align-items:stretch;gap:8px;margin-bottom:9px}
.skill-row .sk-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;
  transition:transform .12s}
.skill-row .sk-main:active{transform:scale(.99)}
.sk-name{font-weight:600;font-size:var(--fs-sm);overflow-wrap:anywhere}
.sk-hint{font-size:var(--fs-xs);color:var(--muted);overflow-wrap:anywhere}
.sk-count{font-size:var(--fs-xs);color:var(--sage-deep);font-weight:600}
.skill-fav{flex:none;width:48px;display:grid;place-items:center;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
/* Aktiv nicht nur über die Farbe: der Stern wird zusätzlich gefüllt */
.skill-fav.on{color:var(--sage);background:var(--sage-soft);border-color:transparent}
.skill-fav:active{transform:scale(.97)}
/* Katalog-Suche: gleiche Höhe wie die Zeilen darunter, damit der Kopf ruhig wirkt */
.sk-search{width:100%;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-md)}
.sk-search::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5}
.ct-sub{font-size:var(--fs-xs);color:var(--muted);font-weight:400;line-height:1.35;margin-top:-4px}
.sec{scroll-margin-top:14px}
/* „Nur einmal erklären": kleiner ⓘ-Punkt neben Titeln, Text auf Antippen */
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--bg-2);color:var(--muted);font-size:var(--fs-2xs);font-weight:600;
  font-style:italic;font-family:Georgia,serif;vertical-align:2px;margin-left:2px}
.intro-sub{margin:-2px 0 12px}
.intro-sub[hidden]{display:none}

/* ---------- Geführter Sequenz-Player (PMR, Body-Scan, Sicherer Ort, Erdung) ---------- */
.guided{display:flex;flex-direction:column;align-items:center;gap:16px;padding:10px 0 4px;min-height:300px;justify-content:center;text-align:center}
.guided-meta{font-variant-numeric:tabular-nums;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.04em}
.guided-topnav{display:flex;align-items:center;justify-content:center;gap:18px;width:100%}
.guided-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-lg);line-height:1;
  color:var(--muted);background:var(--bg-2);flex:none;padding-bottom:3px}
.guided-arrow:disabled{opacity:.35;cursor:default}
.guided-arrow:active:not(:disabled){transform:scale(.92)}
@property --prog{syntax:'<percentage>';inherits:true;initial-value:0%}
.guided-ring{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--sage-soft), var(--bg-2));
  border:1px solid var(--sage-soft);font-family:var(--font-display);font-size:var(--fs-hero);color:var(--sage-deep);
  font-variant-numeric:tabular-nums;transition:--prog 1s linear}
/* Fortschrittsbogen um den Kreis – läuft synchron zum Balken auf volle 100 % */
.guided-ring::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:conic-gradient(var(--sage) var(--prog,0%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px))}
.guided-ring.run{animation:guidedPulse 4s ease-in-out infinite}
@keyframes guidedPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.guided-cue{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:500;color:var(--sage-deep);line-height:1.2}
.guided-text{max-width:340px;font-size:var(--fs-md);margin:0}
.guided-bar{width:100%;max-width:300px;height:6px;border-radius:var(--r-xs);background:var(--bg-2);overflow:hidden}
.guided-bar span{display:block;height:100%;width:0;background:var(--sage);border-radius:var(--r-xs);transition:width 1s linear}
.guided-controls{display:flex;gap:10px;width:100%;max-width:320px;margin-top:6px}
.guided-controls .btn{flex:1}

/* ---------- Bewältigungskarte ---------- */
.coping-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  background:linear-gradient(180deg,var(--sage-soft),var(--bg-2));border:1px solid var(--sage-soft);
  border-radius:var(--radius);padding:30px 20px;margin-bottom:14px}
.coping-text{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:500;color:var(--sage-deep);line-height:1.35;min-height:60px;display:flex;align-items:center}
.coping-dots{display:flex;gap:6px}
.coping-dots .cd{width:7px;height:7px;border-radius:50%;background:var(--line)}
.coping-dots .cd.on{background:var(--sage)}
.coping-card .btn{width:auto;padding-left:22px;padding-right:22px}

/* ---------- Plus-Abzeichen (unsichtbar, solange Plus nicht scharf geschaltet) ---------- */
.plus-badge{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.04em;color:#fff;background:var(--lavender);border-radius:var(--r-pill);padding:2px 8px;vertical-align:middle}

/* ---------- Farbwelten (Paletten) ---------- */
/* „Salbei“ ist der Standard aus :root – hier nur die zusätzlichen Farbwelten.
   Aufbau: je Palette die hellen Tokens, dann die dunkle Variante (data-theme=dark
   und Systemdunkel bei theme=auto). Nur Farbtöne werden neu belegt. */
html[data-palette="dusk"]{
  --bg:#F3F1F6; --bg-2:#E9E5F0; --surface:#FCFBFE;
  --ink:#353143; --muted:#847E92; --line:#E3DEEC;
  --sage:#7C74A6; --sage-deep:#5C5486; --sage-soft:#E4DEF0;
  --lavender:#9C93B8; --lavender-soft:#E7E3EF;
}
html[data-palette="sand"]{
  --bg:#F6F1E9; --bg-2:#EFE7D8; --surface:#FDFBF6;
  --ink:#43392E; --muted:#8C8172; --line:#EADFCC;
  --sage:#B08A57; --sage-deep:#8A6A3D; --sage-soft:#EEE2CE;
  --lavender:#A8967C; --lavender-soft:#EBE3D5;
}
html[data-palette="night"]{
  --bg:#EFF2F6; --bg-2:#E3E8EF; --surface:#FBFCFE;
  --ink:#2E3742; --muted:#79828F; --line:#DCE2EB;
  --sage:#6F92B4; --sage-deep:#4A6C8E; --sage-soft:#DEE7F0;
  --lavender:#9AA6C4; --lavender-soft:#E6E9F2;
}
html[data-palette="dusk"][data-theme="dark"]{
  --bg:#191622; --bg-2:#221D2E; --surface:#201B2B;
  --ink:#E7E3F0; --muted:#948CA6; --line:#312A40;
  --sage:#9A8FCB; --sage-deep:#BDB2E4; --sage-soft:#2E2740;
  --lavender:#A79DC2; --lavender-soft:#312E3C;
}
html[data-palette="sand"][data-theme="dark"]{
  --bg:#1A1712; --bg-2:#241F18; --surface:#221D16;
  --ink:#EBE4D8; --muted:#9C9080; --line:#342C20;
  --sage:#C7A06A; --sage-deep:#E0BE88; --sage-soft:#33291B;
  --lavender:#B8A88C; --lavender-soft:#2E271C;
}
html[data-palette="night"][data-theme="dark"]{
  --bg:#12161C; --bg-2:#1B2028; --surface:#191E25;
  --ink:#E3E8EF; --muted:#8A93A0; --line:#28303A;
  --sage:#6F92B4; --sage-deep:#9CBEDD; --sage-soft:#243244;
  --lavender:#9AA6C4; --lavender-soft:#2A2F3E;
}
@media (prefers-color-scheme: dark){
  html[data-palette="dusk"][data-theme="auto"]{
    --bg:#191622; --bg-2:#221D2E; --surface:#201B2B;
    --ink:#E7E3F0; --muted:#948CA6; --line:#312A40;
    --sage:#9A8FCB; --sage-deep:#BDB2E4; --sage-soft:#2E2740;
    --lavender:#A79DC2; --lavender-soft:#312E3C;
  }
  html[data-palette="sand"][data-theme="auto"]{
    --bg:#1A1712; --bg-2:#241F18; --surface:#221D16;
    --ink:#EBE4D8; --muted:#9C9080; --line:#342C20;
    --sage:#C7A06A; --sage-deep:#E0BE88; --sage-soft:#33291B;
    --lavender:#B8A88C; --lavender-soft:#2E271C;
  }
  html[data-palette="night"][data-theme="auto"]{
    --bg:#12161C; --bg-2:#1B2028; --surface:#191E25;
    --ink:#E3E8EF; --muted:#8A93A0; --line:#28303A;
    --sage:#6F92B4; --sage-deep:#9CBEDD; --sage-soft:#243244;
    --lavender:#9AA6C4; --lavender-soft:#2A2F3E;
  }
}

/* Farbwelt-Auswahlkacheln (Vorschaufarben fest, unabhängig vom aktiven Theme) */
.palette-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.palette-swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--bg-2);border:1.5px solid var(--line);color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-align:left}
.palette-swatch.on{border-color:var(--sage);box-shadow:0 0 0 2px var(--sage-soft)}
.palette-swatch .ps-dot{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.08)}
.pal-sage .ps-dot{background:linear-gradient(135deg,#ECE7DD 45%,#6F9384 45%)}
.pal-dusk .ps-dot{background:linear-gradient(135deg,#E9E5F0 45%,#7C74A6 45%)}
.pal-sand .ps-dot{background:linear-gradient(135deg,#EFE7D8 45%,#B08A57 45%)}
.pal-night .ps-dot{background:linear-gradient(135deg,#E3E8EF 45%,#6F92B4 45%)}

/* ---------- Launch-Splash: „Anker sinkt und verankert sich" ----------
   Ruhiges Wasser (kein Alarm), Sandgrund, aufsteigende Bläschen. Die
   Bewegung des Ankers orchestriert splash.js per WAAPI; hier nur Szene
   und Bläschen. Farben aus der Gerätethemenlage (prefers-color-scheme),
   weil der Splash startet, bevor die gespeicherte Themenwahl geladen ist. */
.splash{position:fixed;inset:0;z-index:200;overflow:hidden;
  background:linear-gradient(180deg,#AEBED0 0%,#8496AC 40%,#5F7385 70%,#4C5E6E 100%)}
.splash-sand{position:absolute;left:0;right:0;bottom:0;height:15%;
  background:linear-gradient(180deg,#D8C7A4 0%,#C6B187 100%);
  border-top-left-radius:60% 42%;border-top-right-radius:56% 40%}
.splash-anchor{position:absolute;left:50%;top:6%;width:64px;height:64px;margin-left:-32px;
  color:#EAF0EE;transform-origin:50% 12%;will-change:transform}
.splash-anchor svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 12px rgba(18,28,38,.4))}
.splash-bubble{position:absolute;bottom:13%;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.9), rgba(255,255,255,.2));
  opacity:0;animation-name:splash-bubble;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes splash-bubble{
  0%{transform:translateY(0) translateX(0) scale(.65);opacity:0}
  14%{opacity:.7}
  82%{opacity:.45}
  100%{transform:translateY(-80vh) translateX(var(--drift,8px)) scale(1);opacity:0}
}
/* Sandwölkchen im Moment des Aufsetzens */
.splash-puff{position:absolute;left:50%;bottom:14%;width:78px;height:26px;margin-left:-39px;
  border-radius:50%;background:radial-gradient(ellipse,rgba(214,199,164,.85),transparent 70%);opacity:0}
.splash-puff.go{animation:splash-puff .55s ease-out both}
@keyframes splash-puff{0%{opacity:0;transform:scale(.4)}30%{opacity:.85}100%{opacity:0;transform:scale(1.5)}}
.splash-version{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  text-align:center;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.7);
  text-shadow:0 1px 3px rgba(18,28,38,.35);pointer-events:none}
@media (prefers-color-scheme: dark){
  .splash{background:linear-gradient(180deg,#26333F 0%,#1B2632 52%,#111B24 100%)}
  .splash-sand{background:linear-gradient(180deg,#3A3527 0%,#2C281C 100%)}
  .splash-anchor{color:#CFE0DA}
  .splash-bubble{background:radial-gradient(circle at 34% 30%, rgba(207,224,218,.55), rgba(207,224,218,.12))}
  .splash-version{color:rgba(207,224,218,.6)}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .breath-circle{transition:transform 4s linear}
  /* Splash wird von splash.js ohnehin übersprungen; als Sicherheit ausblenden */
  .splash{display:none}
}