/* La.Living Akademie — Plattform-Oberfläche. Ruhig, nüchtern, DM Sans. */
:root{
  --ink:#141414; --ink-soft:#3a3a3a; --ink-faint:#6d6d6d;
  --bg:#faf7f2; --surface:#ffffff; --line:#e9e1d6; --line-2:#f0e9df;
  --cognac:#9E5A31; --cognac-deep:#834827; --olive:#6f7d54;
  --radius:12px; --shadow:0 1px 2px rgba(30,20,10,.05), 0 8px 30px rgba(30,20,10,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:18px; line-height:1.55;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
a{color:var(--cognac)}
h1,h2,h3,h4{line-height:1.2; margin:0}
button{font:inherit; cursor:pointer}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}

/* Kopfzeile */
.top{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{font-weight:700; letter-spacing:.18em; color:var(--cognac); font-size:.92rem}
.brand small{letter-spacing:.18em; color:var(--ink-faint); font-weight:600; font-size:.62rem; display:block}
.top .who{display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--ink-soft)}
.btn{background:var(--cognac); color:#fff; border:0; padding:11px 18px; border-radius:10px; font-weight:600; font-size:.95rem}
.btn:hover{background:var(--cognac-deep)}
.btn.ghost{background:transparent; color:var(--cognac); border:1px solid var(--line)}
.btn.klein{padding:7px 13px; font-size:.85rem}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Login */
.auth{min-height:100vh; display:grid; place-items:center; padding:30px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:34px}
.auth .card{width:440px; max-width:100%}
.auth h1{font-size:1.5rem; margin-bottom:4px}
.auth .sub{color:var(--ink-faint); font-size:.95rem; margin-bottom:22px}
.tabs{display:flex; gap:8px; margin-bottom:20px}
.tabs button{flex:1; background:var(--line-2); border:0; padding:10px; border-radius:9px; color:var(--ink-soft); font-weight:600}
.tabs button.an{background:var(--cognac); color:#fff}
label{display:block; font-size:.82rem; color:var(--ink-soft); font-weight:600; margin:14px 0 5px}
input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font:inherit; background:#fff}
input:focus{outline:2px solid var(--cognac); border-color:var(--cognac)}
.fehler{color:#a6301f; font-size:.86rem; margin-top:12px; min-height:1em}
.hinweis{color:var(--ink-faint); font-size:.8rem; margin-top:10px}
form .btn{width:100%; margin-top:20px; padding:13px}

/* Fortschritts-Leiste */
.status{display:flex; flex-wrap:wrap; gap:22px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 24px; margin:26px 0}
.kpi{min-width:120px}
.kpi .l{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700}
.kpi .v{font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums}
.bar{flex:1; min-width:200px}
.bar .track{height:9px; background:var(--line-2); border-radius:100px; overflow:hidden; margin-top:6px}
.bar .track i{display:block; height:100%; background:linear-gradient(90deg,var(--cognac),var(--cognac-deep)); width:0}
.live{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--olive)}
.live .dot{width:9px; height:9px; border-radius:50%; background:var(--olive)}
.live.aus{color:var(--ink-faint)} .live.aus .dot{background:var(--ink-faint)}

/* Modul-Liste */
.modul{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden}
.modkopf{display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer}
.modnr{width:34px; height:34px; border-radius:9px; background:var(--line-2); display:grid; place-items:center; font-weight:700; color:var(--cognac); flex:none}
.modnr.fertig{background:var(--olive); color:#fff}
.modkopf .t{flex:1}
.modkopf .t b{display:block; font-size:1rem}
.modkopf .t small{color:var(--ink-faint); font-size:.8rem}
.modkopf .st{font-size:.8rem; color:var(--ink-faint); font-variant-numeric:tabular-nums; text-align:right}
.pill{font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:100px; white-space:nowrap}
.pill.offen{background:var(--line-2); color:var(--ink-faint)}
.pill.laeuft{background:#f3e7db; color:var(--cognac-deep)}
.pill.fertig{background:#e7ecdd; color:#4c5a37}
.einheiten{border-top:1px solid var(--line-2); display:none}
.modul.auf .einheiten{display:block}
.einheit{display:flex; align-items:center; gap:12px; padding:12px 20px 12px 24px; border-top:1px solid var(--line-2); cursor:pointer}
.einheit:first-child{border-top:0}
.einheit:hover{background:var(--bg)}
.mark{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:none}
.mark.fertig{background:var(--olive); border-color:var(--olive)}
.mark.laeuft{border-color:var(--cognac)}
.einheit .t{flex:1; font-size:.94rem}

/* Lernpanel (Overlay) */
.overlay{position:fixed; inset:0; background:rgba(30,20,10,.4); display:none; align-items:flex-start; justify-content:center; padding:30px; z-index:50; overflow:auto}
.overlay.auf{display:flex}
.lern{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); width:760px; max-width:100%; margin:auto}
.lernkopf{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line)}
.lernkopf .crumb{font-size:.82rem; color:var(--ink-faint)}
.lernkopf .crumb b{color:var(--ink)}
.zu{background:none; border:0; font-size:1.4rem; color:var(--ink-faint); line-height:1}
.lernbody{padding:24px}
.schritt{border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:14px}
.schritt .typ{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--cognac); font-weight:700; margin-bottom:6px}
.schritt.merksatz{background:#faf1e8; border-color:#eBD9c7}
.schritt.praxis{background:#f2f4ec; border-color:#e0e6d5}
.schritt.ziele{background:#f7f4ee; border-color:#e6ded0}
ul.ziele{margin:0; padding-left:20px; color:var(--ink-soft)}
ul.ziele li{margin:6px 0}
.schritt h4{font-size:1.05rem; margin-bottom:6px}
.schritt p{margin:0; color:var(--ink-soft)}
.verdeckt{filter:blur(4px); opacity:.5; pointer-events:none}
.frage{border:1px solid var(--line); border-radius:10px; padding:20px; margin-top:8px}
.frage .typ{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--olive); font-weight:700}
.frage h4{margin:6px 0 14px}
.opt{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; margin-bottom:9px; cursor:pointer}
.opt:hover{border-color:var(--cognac)}
.opt.gewaehlt{border-color:var(--cognac); background:#faf1e8}
.opt.richtig{border-color:var(--olive); background:#eef2e6}
.opt.falsch{border-color:#d98a7a; background:#f8ece9}
.fb{margin-top:12px; padding:13px 15px; border-radius:9px; font-size:.9rem; display:none}
.fb.richtig{background:#eef2e6; color:#455235; display:block}
.fb.falsch{background:#f8ece9; color:#8a3423; display:block}
.weiter{display:flex; justify-content:space-between; align-items:center; margin-top:6px}

.fertig-box{background:#eef2e6; border:1px solid #d5e0c4; border-radius:var(--radius); padding:22px 24px; margin:26px 0}
.fertig-box h3{color:#455235; margin-bottom:6px}
.mini{color:var(--ink-faint); font-size:.85rem}
.tabelle{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tabelle th,.tabelle td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-2); font-size:.9rem}
.tabelle th{background:var(--bg); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint)}
.tabelle tr:last-child td{border-bottom:0}

/* ============ Plattform v2 — Ring, Schritt-Anzeige, Live-Timer, Interaktionen ============ */
.statuswrap{display:flex; align-items:center; gap:26px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 26px; margin:26px 0; flex-wrap:wrap}
.ring{position:relative; width:92px; height:92px; flex:none}
.ring svg{width:92px; height:92px}
.ringval{position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1}
.ringval b{font-size:1.5rem; font-weight:700}
.ringval small{display:block; font-size:.58rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:2px}
.statkpis{display:flex; gap:28px; flex-wrap:wrap}
.statkpis .kpi .l{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); font-weight:700; margin-bottom:3px}
.statkpis .kpi .v{font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums}
.statkpis .kpi .v small{font-size:.8rem; font-weight:500; color:var(--ink-faint)}
.statkpis .kpi .v.naechst{color:var(--cognac)}
.statgo{margin-left:auto}

.einheit .t small{display:block; color:var(--ink-faint); font-size:.76rem; margin-top:1px}

.kopf-rechts{display:flex; align-items:center; gap:14px}
.livebadge{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; color:#4c5a37;
  background:#eef2e6; padding:5px 11px; border-radius:100px; font-variant-numeric:tabular-nums}
.livebadge .dot{width:8px; height:8px; border-radius:50%; background:var(--olive)}
.livebadge.aus{color:var(--ink-faint); background:var(--line-2)} .livebadge.aus .dot{background:var(--ink-faint)}

.steptrack{display:flex; gap:6px; padding:16px 26px 0}
.steptrack .dot{height:6px; flex:1; border-radius:100px; background:var(--line-2)}
.steptrack .dot.done{background:var(--olive)}
.steptrack .dot.now{background:var(--cognac)}

.lernbody{padding:20px 26px 26px}
.stepmeta{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--cognac); font-weight:700; margin-bottom:12px}
.block{margin-bottom:4px}
.block h3{font-size:1.2rem; margin-bottom:12px}
.block p.lang{color:var(--ink-soft); line-height:1.62}
.block.merksatz{background:#faf1e8; border:1px solid #ecd9c7; border-radius:12px; padding:18px 20px}
.block.merksatz .mk-typ{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--cognac); font-weight:700; margin-bottom:6px}
.block.merksatz p{margin:0; font-size:1.05rem}
.block .ziele{margin:0; padding-left:20px; color:var(--ink-soft)} .block .ziele li{margin:7px 0}
.grafik{overflow-x:auto; padding:8px 0} .grafik svg{max-width:100%; height:auto; display:block; margin:0 auto}
.fall-s{background:var(--bg); border-left:3px solid var(--cognac); border-radius:8px; padding:14px 16px; margin-bottom:16px; color:var(--ink)}

.block.frage h3{font-size:1.12rem}
#opts .opt, .wf .opt{display:block; width:100%; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:13px 16px; margin-bottom:9px; font:inherit; color:var(--ink); cursor:pointer}
#opts .opt:hover:not(:disabled), .wf .opt:hover:not(:disabled){border-color:var(--cognac)}
.opt.gewaehlt{border-color:var(--cognac); background:#faf1e8}
.opt.richtig{border-color:var(--olive); background:#eef2e6}
.opt.falsch{border-color:#d98a7a; background:#f8ece9}
.opt:disabled{cursor:default; opacity:.9}
.wf{display:flex; gap:12px} .wf .opt{text-align:center; font-weight:700; margin-bottom:0}
.fb{margin-top:14px; padding:12px 14px; border-radius:9px; font-size:.9rem; display:none}
.fb.richtig{background:#eef2e6; color:#455235; display:block}
.fb.falsch{background:#f8ece9; color:#8a3423; display:block}
.aktion{display:flex; justify-content:space-between; align-items:center; margin-top:18px; min-height:44px}
.aktion .mini{color:var(--ink-faint); font-size:.85rem}

/* La.Living-Methode: Ankommen & Mitnehmen */
.block.situation{background:var(--bg); border:1px solid var(--line); border-left:3px solid var(--cognac); border-radius:12px; padding:18px 20px}
.block.situation .mk-typ{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--cognac); font-weight:700; margin-bottom:6px}
.block.situation h3{font-size:1.12rem}
.block.transfer{background:#f2f4ec; border:1px solid #dde4d0; border-radius:12px; padding:18px 20px}
.block.transfer .mk-typ{font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:#4c5a37; font-weight:700; margin-bottom:6px}
.block.transfer h3{font-size:1.12rem}