/* 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{
  --petrol:#47657b;--petrol-d:#1C2D37;--nebel:#99bec8;--nebel-l:#cfdee4;
  --tint:#EEF3F5;--tint-2:#F6F9FA;--bg:#FBFCFD;--ink:#28333B;--muted:#6E828D;
  --line:#E3EAEE;--white:#FFFFFF;--warn:#B4763F;--warn-bg:#F6EEE5;--ok:#3C7D5A;
}
*{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:radial-gradient(1200px 600px at 50% -10%, #EDF3F5 0%, transparent 60%), #EAEFF2;
  min-height:100%;
}
.app{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  background:var(--bg);box-shadow:0 0 60px rgba(46,72,88,.10)}

/* wave header */
.wavewrap{position:relative;background:linear-gradient(180deg,var(--petrol) 0%,var(--petrol-d) 100%);
  padding:42px 26px 30px;color:#fff;overflow:hidden}
.brand{display:flex;align-items:center;gap:10px;position:relative;z-index:2}
/* O9: Logo-Kachel deutlich groesser (~130px), SVG fuellt mit wenig Padding */
.brand .logo{display:inline-block;background:#fff;border-radius:20px;padding:7px 10px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.brand .logo img{height:116px;max-width:min(58vw,240px);width:auto;display:block}
.wavewrap h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:24px;margin-top:14px;position:relative;z-index:2}
.wavewrap .sub{font-size:12.5px;opacity:.84;margin-top:3px;line-height:1.5;position:relative;z-index:2}
.wave-bottom{position:absolute;left:0;right:0;bottom:-1px;z-index:2}

/* 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:rgba(255,255,255,.25)}
.steps .s.done{background:#fff}
.steps .s.active{background:var(--nebel-l)}

/* body */
.body{flex:1;overflow-y:auto;padding:22px 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(--petrol)}
.sub2{font-size:12px;color:var(--muted);margin-bottom:14px}

/* cards / blocks */
.card{background:var(--white);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 6px 18px rgba(63,98,118,.05);padding:18px;margin-bottom:14px}
.block{margin-bottom:16px}
.block h3{font-size:12px;font-weight:600;color:var(--petrol);letter-spacing:.3px;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:0 0 0 3px rgba(157,184,195,.22)}
input::placeholder,textarea::placeholder{color:#A9B9C1}
.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(--nebel);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}

/* 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(--white);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:12px;padding:14px;cursor:pointer;border:0;transition:.2s}
.btn-primary{background:var(--petrol);color:#fff;width:100%}
.btn-primary:hover{background:var(--petrol-d)}
.btn-primary:disabled{background:#C2CED4;cursor:not-allowed}
.btn-ghost{flex:none;width:96px;background:var(--tint);color:var(--petrol)}
.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}
.error{background:#FBEAEA;color:#9A3B3B;border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:12px;display:none}
.error.show{display:block}
.success{background:#E9F4EE;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:#E9F4EE;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 */
.tabbar{position:sticky;bottom:0;display:flex;background:var(--white);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(--petrol) 0%,var(--petrol-d) 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-chart{display:block;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}

/* quick tiles */
.row2{display:flex;gap:12px;margin-bottom:14px}
.tile{flex:1;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;
  text-decoration:none;color:var(--ink);box-shadow:0 6px 18px rgba(63,98,118,.05);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}

/* 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(--muted);text-transform:uppercase;letter-spacing:.3px}
.calc .chip .val{font-size:18px;font-weight:600;color:var(--petrol);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}

/* 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}
.cpalert{display:none;background:var(--nebel-l);color:var(--petrol-d);border-radius:12px;padding:12px 14px;
  font-size:13px;font-weight:600;margin-bottom:14px;animation:pulse 1s ease-in-out infinite}
.cpalert.show{display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
.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(--tint);color:var(--petrol);flex:1}

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

/* O5: Streak unter der Kurve */
.streak{font-size:12px;font-weight:600;color:var(--petrol);background:var(--tint);
  border-radius:999px;padding:7px 13px;display:inline-block;margin:-4px 0 14px}

/* O1: Schnelleingabe Morgen-CP */
.mcpquick h3{font-size:12px;font-weight:600;color:var(--petrol);letter-spacing:.3px;text-transform:uppercase;margin-bottom:8px}
.mcpq-row{display:flex;gap:10px}
.mcpq-row input{flex:1;border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink)}
.mcpq-row input:focus{outline:none;border-color:var(--nebel);box-shadow:0 0 0 3px rgba(157,184,195,.22)}
.mcpq-row .btn{flex:none;width:auto;padding:12px 18px}
.mcpq-done{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mcpq-done .okv{font-size:15px;font-weight:600;color:var(--ok)}
.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-Erfassung im Timer */
.cpcapture{display:flex;gap:8px;margin-bottom:12px}
.cpcapture input{flex:1;border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink)}
.cpcapture input:focus{outline:none;border-color:var(--nebel);box-shadow:0 0 0 3px rgba(157,184,195,.22)}
.cpcapture .btn{flex:none;width:auto;padding:11px 16px}
.cplist{font-size:11.5px;color:var(--muted);margin-bottom:10px;min-height:0}
#uebernehmen{width:100%;margin-bottom:12px}

/* 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='%236E828D' 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:0 0 0 3px rgba(157,184,195,.22)}

/* 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:#E9F4EE;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}