:root{--bg:#f6f5ef;--card:#fff;--tx:#1d2b26;--soft:#5d6b65;--pri:#1f6f5c;--pri2:#e3f1ec;--ok:#2e8b57;--bad:#c0392b;--line:#dcdacd;--gold:#e0a21b;--tab:62px}
@media(prefers-color-scheme:dark){:root:not([data-theme=hell]){--bg:#14201c;--card:#1d2d27;--tx:#ecf2ef;--soft:#9db0a8;--pri:#4cc4a2;--pri2:#23423a;--ok:#5cd08a;--bad:#ff7b6b;--line:#2f4a41;--gold:#f0b73a}}
:root[data-theme=dunkel]{--bg:#14201c;--card:#1d2d27;--tx:#ecf2ef;--soft:#9db0a8;--pri:#4cc4a2;--pri2:#23423a;--ok:#5cd08a;--bad:#ff7b6b;--line:#2f4a41;--gold:#f0b73a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font:17px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:var(--pri)}
main{max-width:760px;margin:0 auto;padding:1rem 1rem calc(var(--tab) + 2rem + env(safe-area-inset-bottom))}
main.voll{max-width:none;padding:0}
#tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;background:#0e1714;border-top:1px solid #243a32;z-index:20}
#tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8aa197;text-decoration:none;font-size:.7rem}
#tabs svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tabs a.on{color:#4cc4a2}
#tabs a.on svg{stroke-width:2.4}
h1{font-size:1.6rem;margin:.3rem 0 .8rem}h2{font-size:1.15rem;margin:1.5rem 0 .6rem}h3{font-size:1.05rem;margin:.2rem 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem;margin:.7rem 0}
.btn{display:inline-block;background:var(--pri);color:#fff;border:0;border-radius:12px;padding:.7rem 1.3rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
:root:not([data-theme=hell]) .btn{color:#0b1814}
.btn.leise{background:var(--pri2);color:var(--pri)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.soft{color:var(--soft)}
.hinweis{background:var(--pri2);border-radius:12px;padding:.7rem 1rem;margin:.7rem 0;font-size:.95rem}
input[type=text],input[type=password],input[type=search]{width:100%;font:inherit;padding:.7rem;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--tx);margin:.25rem 0 .8rem}
label{font-size:.9rem;color:var(--soft)}
.fehler{color:var(--bad);font-weight:600}.ok{color:var(--ok);font-weight:600}
.liste a,.liste button.z{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--line);padding:.6rem .2rem;color:var(--tx);text-decoration:none;cursor:pointer}
.liste small{color:var(--soft)}
.seg{display:flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{flex:1;font:inherit;padding:.6rem;border:0;background:var(--card);color:var(--soft);cursor:pointer}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 .6rem}
.chips button{flex:none;font:inherit;padding:.45rem .9rem;border-radius:20px;border:2px solid var(--line);background:var(--card);color:var(--soft);cursor:pointer}
.chips button.an{border-color:var(--pri);color:var(--pri);font-weight:700}
.stats{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--soft)}.stats b{color:var(--tx);font-size:1.4rem}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--pri);color:#0b1814;font-size:2rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:.3rem auto}
.zentral{text-align:center}
.thema{margin-top:1rem}.thema h3{color:var(--soft);font-size:.9rem}
.levels{display:flex;flex-wrap:wrap;gap:.4rem;margin:.3rem 0}
.lv{flex:none;font:inherit;font-size:.85rem;padding:.4rem .7rem;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--tx);cursor:pointer;text-align:left}
.lv small{display:block;color:var(--soft);font-size:.72rem}
.lv.fertig{border-color:var(--ok);background:var(--pri2)}.lv.dran{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri2)}
video{width:100%;background:#000;border-radius:12px;display:block}

/* Feed */
.feed{position:fixed;left:0;right:0;top:0;bottom:calc(var(--tab) + env(safe-area-inset-bottom));background:#070d0b;color:#fff;overflow:hidden;touch-action:none;user-select:none}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.slide video{width:100%;height:100%;object-fit:contain;border-radius:0;pointer-events:none}
.slide.anim-hoch{animation:hoch .28s ease-out}.slide.anim-runter{animation:runter .28s ease-out}.slide.anim-fade{animation:fade .25s}
@keyframes hoch{from{transform:translateY(60%);opacity:.2}to{transform:none;opacity:1}}
@keyframes runter{from{transform:translateY(-60%);opacity:.2}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.chip{position:absolute;top:.7rem;left:.7rem;right:4.5rem;z-index:3;background:rgba(0,0,0,.55);border:0;color:#fff;font:inherit;font-size:.85rem;padding:.4rem .8rem;border-radius:20px;text-align:left;cursor:pointer;max-width:max-content}
.titel{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 4.8rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.8));z-index:2;pointer-events:none}
.titel b{font-size:1.7rem;line-height:1.2;display:block}.titel small{opacity:.75}
.rail{position:absolute;right:.5rem;bottom:1.2rem;z-index:3;display:flex;flex-direction:column;gap:.7rem;align-items:center}
.rail button{width:58px;border:0;background:none;color:#fff;font:inherit;font-size:.68rem;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;text-shadow:0 1px 3px #000}
.rail .ic{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:transform .15s}
.rail button.an .ic{background:var(--gold);color:#1d2b26;transform:scale(1.08)}
.rail button.kann.an .ic{background:#4cc4a2}
.flash{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;font-size:5rem;pointer-events:none;animation:fade .2s}
.mitte{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:.8rem}
.mitte .gross{font-size:4rem}
.mitte .btn{min-width:14rem}
.hilfe{position:absolute;left:0;right:0;top:3.3rem;text-align:center;z-index:2;font-size:.8rem;opacity:.65;pointer-events:none}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);color:var(--tx);width:100%;max-width:560px;max-height:85vh;overflow:auto;border-radius:18px 18px 0 0;padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom))}
.sheet video{max-height:45vh}
.wort{font-size:1.5rem;font-weight:700;text-align:center;margin:.6rem 0 .2rem}
.mitte .btn.leise{background:rgba(255,255,255,.16);color:#fff}
.mitte .btn:not(.leise){color:#0b1814;background:#4cc4a2}

.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.an .ico.f{fill:currentColor}
.rail .ic svg{width:26px;height:26px}
.rail .ic.txt{font-size:.85rem;font-weight:700}
.rail button.an .ic,.rail button.kann.an .ic{background:#fff;color:#14201c}
.mitte .gross{line-height:1}.mitte .gross .ico{width:4rem;height:4rem;stroke-width:1.6}
.seg button{display:flex;align-items:center;justify-content:center;gap:.4rem}
.chips button{display:flex;align-items:center;gap:.4rem}
.liste .ico{width:1em;height:1em;vertical-align:-.12em;color:var(--soft)}
.chip{display:inline-flex;align-items:center;gap:.4rem}

/* Design-Auswahl: wie Menüleiste und Feed – graue Linien-Icons, aktiv weiß/schwarz invertiert */
.seg{gap:0;border-width:1px}
.seg button{flex-direction:column;gap:.35rem;padding:.8rem .4rem .65rem;font-size:.85rem;border:0}
.seg button + button{border-left:1px solid var(--line)}
.seg button .ico{width:26px;height:26px;stroke-width:1.8;vertical-align:0}
.seg button.an{background:var(--tx);color:var(--bg);font-weight:600}
.seg button.an .ico{stroke-width:2.2}

.back{position:absolute;top:.6rem;left:.6rem;z-index:3;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.back .ico{width:26px;height:26px;vertical-align:0}