:root{--bg:#0e1621;--card:#16212f;--rand:#26364a;--text:#e8eef5;--leise:#8fa3b8;--blau:#4cb3ff;--gruen:#3ecf7a;--gelb:#f2c14e;--rot:#ef6b6b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,sans-serif}
header{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 16px;border-bottom:1px solid var(--rand)}
h1{margin:0 0 8px;font-size:1.3rem}
.gesamt{display:flex;align-items:center;gap:10px}
.balken{flex:1;height:10px;background:var(--rand);border-radius:6px;overflow:hidden}
#balken{height:100%;width:0;background:var(--gruen);transition:width .3s}
#gesamtText{font-size:.85rem;color:var(--leise);white-space:nowrap}
#filter{display:flex;gap:6px;overflow-x:auto;margin-top:10px}
#filter button{background:var(--card);color:var(--leise);border:1px solid var(--rand);border-radius:16px;padding:5px 12px;cursor:pointer;white-space:nowrap}
#filter button.aktiv{color:var(--text);border-color:var(--blau)}
main{max-width:860px;margin:0 auto;padding:12px 16px 60px}
.stufe{margin:22px 0 8px;color:var(--leise);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.trick{background:var(--card);border:1px solid var(--rand);border-radius:12px;margin-bottom:10px;overflow:hidden}
.kopf{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.nr{width:28px;color:var(--leise);font-variant-numeric:tabular-nums}
.titel{flex:1;font-weight:600}
.titel small{display:block;font-weight:400;color:var(--leise)}
.ampel{font-size:1.3rem}
.inhalt{display:none;padding:0 14px 14px}
.trick.offen .inhalt{display:block}
.status{display:flex;gap:6px;margin:6px 0 12px}
.status button{flex:1;padding:8px;border-radius:8px;border:1px solid var(--rand);background:transparent;color:var(--leise);cursor:pointer}
.status button.an[data-s=offen]{border-color:var(--rot);color:var(--text)}
.status button.an[data-s=ueben]{border-color:var(--gelb);color:var(--text)}
.status button.an[data-s=kann]{border-color:var(--gruen);color:var(--text)}
.videos{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.video{background:var(--bg);border:1px solid var(--rand);border-radius:10px;overflow:hidden}
.vorschau{position:relative;aspect-ratio:16/9;background:#000 center/cover;cursor:pointer}
.vorschau::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:2.2rem;color:#fff;text-shadow:0 0 12px #000}
.vorschau iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vinfo{padding:8px 10px;font-size:.85rem}
.vinfo b{display:block;font-weight:600}
.vinfo span{color:var(--leise)}
.vinfo label{display:flex;gap:6px;align-items:center;margin-top:6px;color:var(--leise)}
textarea{width:100%;margin-top:12px;background:var(--bg);color:var(--text);border:1px solid var(--rand);border-radius:8px;padding:8px;font:inherit;min-height:60px}
footer{position:fixed;bottom:0;left:0;right:0;display:flex;gap:8px;justify-content:center;padding:8px;background:var(--bg);border-top:1px solid var(--rand)}
footer button,.datei{background:var(--card);color:var(--leise);border:1px solid var(--rand);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:.85rem}