: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:18px; --radius-lg:26px;
  --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);
}
/* ---------- 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;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
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:16px;color:var(--ink)}

#app{
  max-width:560px; margin:0 auto;
  padding:calc(var(--safe-t) + 14px) 18px calc(108px + var(--safe-b));
  min-height:100%;
}

/* ---------- Kopfzeilen ---------- */
.page-head{margin:6px 2px 18px}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.page-title{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.1;margin:4px 0 0}
.page-sub{color:var(--muted);font-size:14.5px;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:16px;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:21px;font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.cal-dow{text-align:center;font-size:11.5px;color:var(--muted);font-weight:600;padding-bottom:2px}
.cal-cell{aspect-ratio:1;border-radius:14px;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:14px;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.filled .num{color:#33403a;font-size:11px;line-height:1;opacity:.75}
.cal-emoji{font-size:16px;line-height:1}
.cal-legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--muted);justify-content:center}
.cal-legend .bar{height:9px;width:120px;border-radius:6px;background:linear-gradient(90deg,#8B95B5,#D8C7A4,#8FB39E)}

/* ---------- Slider / Skalen ---------- */
.field{margin-bottom:18px}
.field > label{display:block;font-size:15px;font-weight:600;margin-bottom:9px}
.field .hint{font-weight:400;color:var(--muted);font-size:13px}
.scale-row{display:flex;align-items:center;gap:14px}
.scale-pill{min-width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;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:10px;font-weight:700;font-size:15px;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:6px;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:6px;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:13px;color:var(--muted);font-style:italic}

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

/* ---------- Inputs ---------- */
textarea,input[type=text],input[type=number],input[type=tel],select{
  width:100%;border:1px solid var(--line);background:var(--surface);border-radius:13px;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:12.5px;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:15px}
.switch{width:50px;height:30px;border-radius:999px;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)}

/* ---------- 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:15.5px;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:15px;font-size:16px;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:14.5px}

/* ---------- 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:11px;font-weight:600;flex:1;padding:4px 0;border-radius:12px}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab svg [fill]:not([fill="none"]){fill:currentColor;stroke:none}
.tab.active{color:var(--sage-deep)}

/* ---------- 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:26px 26px 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}
.sheet-grab{width:42px;height:5px;border-radius:3px;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:18px;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;
}
.breath-circle.run{transform:scale(2.0)}
.breath-cue{font-family:var(--font-display);font-size:23px;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:15px}

/* ---------- Verlauf / Chart ---------- */
.chart-card canvas{width:100%;height:200px;display:block}
.legend{display:flex;gap:16px;margin-top:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;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:26px;font-weight:500}
.stat .l{font-size:12px;color:var(--muted)}

/* ---------- Listen / Notfallplan ---------- */
.plan-item{margin-bottom:14px}
.plan-item label{display:block;font-size:13px;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:13px;display:flex;justify-content:space-between;align-items:center}

.empty-note{color:var(--muted);font-size:14.5px;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:999px;font-size:14px;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:14px}
.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:19px;font-weight:500;color:var(--sage-deep);line-height:1.35}
.affirm-hint{font-size:11.5px;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:13px;padding:4px;margin-bottom:14px}
.seg-btn{flex:1;padding:9px 6px;border-radius:10px;font-size:13.5px;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:15px}
.wk-row + .wk-row{border-top:1px solid var(--line)}
.trend-good{color:var(--sage-deep);font-weight:600;font-size:13.5px}
.trend-soft{color:var(--lavender);font-weight:600;font-size:13.5px}
.trend-flat{color:var(--muted);font-size:13px}

/* ---------- 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:4px;background:var(--bg-2)}
.heatmap .hm.future{opacity:0}

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

/* ---------- Korrelationsliste ---------- */
.corr-list{margin:0;padding-left:18px}
.corr-list li{font-size:14px;color:var(--ink);margin-bottom:8px;line-height:1.45}

/* ---------- 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:14px;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:14.5px}
.lr-int{font-size:12.5px;color:var(--sage-deep);font-weight:600;flex:none}
.lr-sub{font-size:13px;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:14px;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:14px}
.sr-text{font-size:13px;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;
  padding:calc(var(--safe-t) + 8px) 16px 8px;background:var(--lavender);color:#fff;font-size:13.5px;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:999px;font-size:13.5px}
body.demo-on #app{padding-top:calc(var(--safe-t) + 52px)}

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

/* ---------- 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:26px;font-weight:500;margin:0 0 8px;line-height:1.2}
.ob-sub{color:var(--muted);font-size:15px;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:15px;font-weight:500}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .breath-circle{transition:transform 4s linear}
}