@font-face{font-family:Exo;src:url(/schrift/exo2-latin.woff2) format("woff2"),url(/schrift/exo2-latin-ext.woff2) format("woff2");font-weight:100 900}
@font-face{font-family:Mono;src:url(/schrift/share-tech-mono-latin.woff2) format("woff2")}
:root{--cy:#22d3ff;--or:#ffab3d;--gr:#35e39a;--li:#b178ff;--bv:#6b84ff;--pi:#ff6fb8;--rot:#ff5a6e;--gold:#e8b45a;
  --t1:#eaf6ff;--t2:#a9c9de;--t3:#6b90aa;--rand:rgba(110,180,225,.32)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#040a14;min-height:100%}
body{font-family:Exo,sans-serif;color:var(--t1);background:#041527;min-height:100vh;position:relative;overflow-x:hidden}
/* Raum wie auf der Testseite: Licht, Punkte zum Rand, Waben, fernes Rad, Schleier, Ecken */
#raum,#waben,#fern{position:fixed;left:0;top:0;pointer-events:none}
#waben{opacity:.16}#fern{opacity:.08}
.schleier{position:fixed;left:0;right:0;height:180px;top:-200px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(30,195,255,.015),transparent);animation:schleier 18s linear infinite}
@keyframes schleier{to{top:110vh}}
.ecke{position:fixed;width:22px;height:22px;border:0 solid rgba(30,195,255,.55);pointer-events:none}
.mono{font-family:Mono,monospace}
/* Glas wie auf der Testseite (Glas.qml) */
.box{position:relative;isolation:isolate}
.box>svg.glas{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.box.klick{cursor:pointer}
.kopf{display:flex;justify-content:space-between;font-family:Mono;font-size:13px;letter-spacing:3px;color:var(--t3);padding:12px 18px 0}
.ansicht{position:relative;z-index:1;display:none;padding:18px 24px 70px;max-width:1680px;margin:0 auto}
.ansicht.an{display:block}
/* Leiste oben */
.leiste{height:56px;display:flex;align-items:center;gap:20px;padding:0 12px 0 22px}
.leiste .z{font-family:Mono;font-size:30px;color:#fff;line-height:1}
.leiste .z small{font-size:18px;color:var(--t2)}
.leiste .d{font-size:18px;color:var(--t1)}
.leiste .name{font-family:Mono;font-size:14px;letter-spacing:4px;color:var(--cy);margin-left:8px}
.leiste .lage{margin-left:18px;display:flex;align-items:center;gap:10px;font-size:17px;color:var(--t1);white-space:nowrap}
.leiste .kn{margin-left:auto;display:flex;gap:10px}
i.l{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--gr);box-shadow:0 0 8px var(--gr)}
i.l.gelb{background:var(--or);box-shadow:0 0 8px var(--or)}
i.l.rot{background:var(--rot);box-shadow:0 0 8px var(--rot)}
i.l.grau{background:#4b6377;box-shadow:none}
/* Knöpfe */
.box.knopf{height:38px;display:inline-flex;align-items:center;gap:9px;padding:0 16px;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--t2);cursor:pointer;white-space:nowrap}
.knopf svg{width:17px;height:17px}
.knopf.gold{color:#ffe0a8}.knopf.rot{color:#ff8796}
/* Raster */
.raster{display:grid;grid-template-columns:minmax(300px,1fr) minmax(420px,1.7fr) minmax(300px,1fr);gap:18px;margin-top:18px;align-items:stretch}
/* alle Spalten schließen unten auf einer Linie ab: je Spalte wächst ein Kasten mit */
.dehnt{flex:1}
.spalte{display:flex;flex-direction:column;gap:18px}
.inhalt{padding:12px 18px 18px}
/* Karten wie die Module rechts auf der Testseite */
.karte{display:flex;align-items:center;gap:18px;padding:16px 18px}
.ring{width:66px;height:66px;border-radius:50%;flex:none;position:relative;display:flex;align-items:center;justify-content:center}
.ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0c1d33}
.ring svg{position:relative;z-index:1;width:30px;height:30px}
.karte .name{font-size:21px;letter-spacing:1.5px;text-transform:uppercase}
.karte .st{font-size:15px;color:var(--t2);margin-top:3px;display:flex;align-items:center;gap:8px}
.karte .st2{font-size:14px;color:var(--t3);margin-top:2px}
/* Zahlen */
.zahlen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zahl{border:1px solid rgba(110,180,225,.18);border-radius:6px;padding:8px 12px;background:rgba(6,16,30,.5)}
.zahl .n{font-size:13px;letter-spacing:2px;color:var(--t2);text-transform:uppercase}
.zahl .w{font-family:Mono;font-size:26px;color:#fff;margin-top:2px}
/* Zeilen wie das Protokoll */
.e{display:flex;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid rgba(110,180,225,.1)}
.e:last-child{border-bottom:none}
.e .ic{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--t2)}
.e .ic svg{width:20px;height:20px}
.e .t{font-size:17px;line-height:1.15}.e .s{font-size:13.5px;color:var(--t3);margin-top:2px}
.e .u{margin-left:auto;font-family:Mono;font-size:14px;color:var(--t3);text-align:right;white-space:nowrap}
.e .u b{font-weight:normal;color:var(--t2)}
.lb{font-family:Mono;font-size:12px;letter-spacing:3px;color:var(--t3);margin:14px 0 6px}
/* Reiter (gold = gewählt) */
.reiter{display:flex;justify-content:center;gap:10px;margin:12px 0 4px}
.reiter div{min-width:150px;text-align:center;padding:6px 14px;font-size:16px;letter-spacing:2px;color:var(--t2);border:1.5px solid var(--rand);border-radius:8px;background:rgba(10,22,38,.7);cursor:pointer;text-transform:uppercase}
.reiter div.an{color:#ffe0a8;border-color:#d79a3e;background:linear-gradient(180deg,rgba(232,180,90,.32),rgba(232,180,90,.06));box-shadow:0 0 16px rgba(232,180,90,.25)}
/* Tabelle der Geräte */
table{width:100%;border-collapse:collapse;margin-top:6px}
th{font-family:Mono;font-weight:normal;font-size:12px;letter-spacing:3px;color:var(--t3);text-align:left;padding:8px 8px 6px;border-bottom:1px solid rgba(110,180,225,.18)}
td{font-size:16px;padding:10px 8px;border-bottom:1px solid rgba(110,180,225,.1);vertical-align:middle}
td.m{font-family:Mono;font-size:14px;color:var(--t2)}
td .s{font-size:13px;color:var(--t3);margin-top:2px}
.kl{font-family:Mono;font-size:12px;letter-spacing:2px;border:1px solid var(--rand);border-radius:5px;padding:3px 8px;background:rgba(10,22,38,.6);color:var(--t2);white-space:nowrap}
.kl.ok{color:#9ff0c8;border-color:rgba(53,227,154,.45)}
.kl.fehlt{color:#ffd28a;border-color:rgba(255,171,61,.5)}
/* Balken */
.balken{height:6px;border-radius:3px;background:rgba(110,180,225,.14);margin-top:8px;overflow:hidden}
.balken div{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cy),#7fe6ff);box-shadow:0 0 8px rgba(34,211,255,.5)}
.hinweis{display:flex;align-items:center;gap:14px;padding:12px 18px}
.hinweis .stb{width:5px;align-self:stretch;border-radius:3px;flex:none}
.hinweis .tx{font-size:16px;line-height:1.3}
/* Anmeldung und Notfall: ein Fenster in der Mitte */
.mitte{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center}
.fenster{width:520px;max-width:100%;padding-bottom:26px}
.fenster .titel{font-family:Mono;font-size:15px;letter-spacing:4px;color:var(--cy);text-align:center;margin-top:22px}
.fenster .satz{font-size:16px;color:var(--t2);text-align:center;line-height:1.45;margin:10px 34px 0}
.qr{width:240px;height:240px;margin:22px auto 0;padding:14px;background:#eaf6ff;border-radius:6px;box-shadow:0 0 24px rgba(34,211,255,.25)}
.qr svg{width:100%;height:100%;display:block}
.code{font-family:Mono;font-size:40px;letter-spacing:8px;color:#fff;text-align:center;margin-top:18px}
.warte{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;font-size:15px;color:var(--t2)}
.dreh{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(34,211,255,.25);border-top-color:#22d3ff;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.eingabe{display:block;width:300px;max-width:calc(100% - 68px);margin:24px auto 0;font-family:Mono;font-size:30px;letter-spacing:6px;text-align:center;
  color:#fff;background:rgba(6,16,30,.7);border:1.5px solid var(--rand);border-radius:8px;padding:10px 0;outline:none;text-transform:uppercase}
.eingabe:focus{border-color:rgba(120,220,255,.6);box-shadow:0 0 12px rgba(34,211,255,.18)}
.mittig{display:flex;justify-content:center;margin-top:18px}
.klein{font-family:Mono;font-size:12px;letter-spacing:2px;color:var(--t3);text-align:center;margin-top:14px}
/* Bibliothek */
.bibkopf{display:flex;align-items:center;gap:18px;padding:12px 18px 16px;flex-wrap:wrap}
.suche{flex:1;min-width:240px;font-family:Exo,sans-serif;font-size:17px;color:var(--t1);background:rgba(6,16,30,.7);border:1.5px solid var(--rand);border-radius:8px;padding:8px 14px;outline:none}
.suche:focus{border-color:rgba(120,220,255,.6);box-shadow:0 0 12px rgba(34,211,255,.18)}
.bibraster{display:grid;grid-template-columns:minmax(260px,1fr) minmax(360px,1.5fr) minmax(360px,1.5fr);gap:18px;margin-top:18px;align-items:start}
.liste .e{cursor:pointer;border-radius:6px;padding-left:8px}
.liste .e.an{background:linear-gradient(180deg,rgba(232,180,90,.22),rgba(232,180,90,.04));box-shadow:inset 0 0 0 1.5px rgba(215,154,62,.6)}
.liste .e.an .t{color:#ffe0a8}
.bild{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:Mono;font-size:15px;color:#fff;box-shadow:0 0 8px rgba(34,211,255,.25)}
.cover{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:14px}
.al{cursor:pointer}
.al .c{aspect-ratio:1;border-radius:6px;border:1.5px solid var(--rand);display:flex;align-items:flex-end;padding:8px;font-family:Mono;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.85)}
.al.an .c{border-color:#d79a3e;box-shadow:0 0 14px rgba(232,180,90,.35)}
.al .t{font-size:15px;margin-top:6px;line-height:1.15}.al .s{font-size:13px;color:var(--t3)}
.al.an .t{color:#ffe0a8}
.nr{font-family:Mono;font-size:14px;color:var(--t3);width:24px;text-align:right;flex:none}
@media (max-width:1180px){.bibraster{grid-template-columns:1fr}}
/* Bibliotheken (Fenster „Neue Bibliothek“ / „Bibliothek ändern“) */
.e.wahl{cursor:pointer;border-radius:6px;padding-left:8px}
.e.wahl:hover{background:rgba(34,211,255,.06)}
.fenster.breit{width:600px}
.fenster .lb{margin:20px 34px 6px}
.ordner{margin:0 34px;max-height:340px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(110,180,225,.35) transparent}
.ordner .e{border-radius:6px;padding-left:8px}
.ordner .e.an{background:linear-gradient(180deg,rgba(232,180,90,.22),rgba(232,180,90,.04));box-shadow:inset 0 0 0 1.5px rgba(215,154,62,.6)}
.ordner .e.an .t{color:#ffe0a8}
.ordner .e.aus{opacity:.45;cursor:default}
.ordner .e:not(.aus){cursor:pointer}
.fenster .reiter div{min-width:130px}
.knoepfe{display:flex;justify-content:center;gap:12px;margin-top:22px}
/* Player (Boss 01.11.): Timer in der Leiste, Reiter Musik/Hörspiele, Weiterhören, Abspielleiste unten */
.leiste .timer{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:Mono;font-size:13px;letter-spacing:2px;color:var(--t3);white-space:nowrap}
.leiste .timer b{font-weight:normal;color:#ffe0a8;font-size:16px}
.leiste .timer svg{width:16px;height:16px}
.leiste .timer+.kn{margin-left:14px}
.ansicht.spielt{padding-bottom:130px}
.pl{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#041527;
  background:linear-gradient(180deg,#7fe6ff,#22d3ff);box-shadow:0 0 12px rgba(34,211,255,.45)}
.pl svg{width:16px;height:16px;margin-left:2px}
.pl.gross{width:46px;height:46px}.pl.gross svg{width:22px;height:22px}
.hz{width:22px;height:22px;flex:none;color:var(--t3);cursor:pointer}.hz.an{color:var(--pi);filter:drop-shadow(0 0 5px rgba(255,111,184,.6))}
.e.laeuft .t{color:#7fe6ff}.e.laeuft .nr{color:#22d3ff}
.zuletzt{display:grid;grid-template-columns:repeat(auto-fill,140px);gap:14px;padding:12px 18px 18px}
.weiter{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px;padding:12px 18px 18px}
.wk{display:flex;gap:14px;align-items:center;border:1px solid rgba(110,180,225,.18);border-radius:8px;padding:12px;background:rgba(6,16,30,.5)}
.wk .c{width:72px;height:72px;border-radius:6px;flex:none;border:1.5px solid var(--rand)}
.wk .t{font-size:17px;line-height:1.15}.wk .s{font-size:13.5px;color:var(--t3);margin-top:2px}
.wk .balken{margin-top:8px}
.wk .wo{font-family:Mono;font-size:12px;letter-spacing:1px;color:var(--t2);margin-top:6px}
.spieler{position:fixed;left:24px;right:24px;bottom:16px;z-index:5;max-width:1632px;margin:0 auto;display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(360px,1.6fr) minmax(220px,1fr);align-items:center;gap:22px;padding:14px 20px;
  background:rgba(4,12,24,.94);backdrop-filter:blur(10px)}
.spieler .jetzt{display:flex;align-items:center;gap:14px;min-width:0}
.spieler .jetzt .c{width:58px;height:58px;border-radius:6px;flex:none;border:1.5px solid var(--rand)}
.spieler .jetzt .t{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spieler .jetzt .s{font-size:13.5px;color:var(--t3)}
.spieler .mitte2{display:flex;flex-direction:column;align-items:center;gap:8px}
.spieler .tasten{display:flex;align-items:center;gap:18px;color:var(--t2)}
.spieler .tasten svg.k{width:22px;height:22px;cursor:pointer}
.spieler .zeit{display:flex;align-items:center;gap:12px;width:100%;font-family:Mono;font-size:13px;color:var(--t3)}
.spieler .zeit .balken{flex:1;margin:0;height:5px}
.spieler .rechts{display:flex;align-items:center;justify-content:flex-end;gap:16px;color:var(--t2)}
.spieler .rechts svg{width:20px;height:20px}
.spieler .laut{width:110px;height:5px;border-radius:3px;background:rgba(110,180,225,.14);overflow:hidden}
.spieler .laut div{width:70%;height:100%;background:var(--t2)}
.spieler .wohin{font-family:Mono;font-size:11px;letter-spacing:2px;color:var(--t3);text-align:center}
.hraster{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:18px;align-items:start}
.weiterg{display:grid;grid-template-columns:auto 1fr 330px;gap:26px;align-items:center;padding:16px 22px 20px}
.kassette{width:250px;height:158px;border-radius:12px;position:relative;background:linear-gradient(180deg,#1a2b40,#0b1626);
  border:1.5px solid rgba(140,228,255,.45);box-shadow:0 0 18px rgba(30,195,255,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.kassette .etikett{position:absolute;left:14px;right:14px;top:12px;height:96px;border-radius:6px;overflow:hidden;background:#071426}
.kassette .etikett canvas{width:100%;height:100%;display:block}
.kassette .fenster2{position:absolute;left:52px;right:52px;top:58px;height:40px;border-radius:20px;background:rgba(2,10,20,.92);
  border:1px solid rgba(140,228,255,.35);display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.kassette .spule{width:28px;height:28px;border-radius:50%;border:3px dashed #8ce4ff;box-sizing:border-box;animation:drehen 3s linear infinite;box-shadow:0 0 8px #1ec3ff}
.kassette .band{flex:1;height:14px;margin:0 6px;border-radius:7px;background:linear-gradient(90deg,#3a2414,#5a3a20)}
.kassette .unten{position:absolute;left:46px;right:46px;bottom:0;height:30px;border-radius:8px 8px 0 0;background:rgba(255,255,255,.05);border:1px solid rgba(140,228,255,.2);border-bottom:none}
@keyframes drehen{to{transform:rotate(360deg)}}
.winfo .t{font-size:24px}.winfo .s{font-size:15px;color:var(--t3);margin:2px 0 12px}
.winfo .wo{font-family:Mono;font-size:12.5px;letter-spacing:1.5px;color:var(--t2);margin-top:8px}
.winfo .knopf svg{width:18px;height:18px}
.auch .e{padding:8px 0}.auch .t{font-size:15px}.auch .s{font-size:12.5px;color:var(--t3)}
canvas.mini{width:44px;height:44px;border-radius:5px;flex:none}
.rkopf{display:flex;align-items:baseline;gap:12px;margin:16px 0 8px}
.rkopf b{font-weight:normal;font-size:18px}.klein2{font-size:13px;color:var(--t3);flex:1}
.weiterp{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:14px;border:1px solid rgba(140,228,255,.6);
  background:rgba(30,195,255,.13);color:#8ce4ff;font-size:13px;box-shadow:0 0 8px rgba(30,195,255,.33);cursor:pointer}
.weiterp::before{content:"";border-left:8px solid #8ce4ff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.weiterp.gross{display:flex;justify-content:center;height:46px;border-radius:23px;font-size:15px;background:#1ec3ff;color:#021424;box-shadow:0 0 14px #1ec3ff;margin:4px 0 14px}
.weiterp.gross::before{border-left-color:#021424}
.regal{display:flex;gap:3px;overflow:hidden;align-items:flex-end;min-height:118px}
.regal canvas{flex:none;border-radius:2px;cursor:pointer}
.regal.einzeln{gap:10px;min-height:84px}
.brett{height:3px;margin-top:6px;border-radius:2px;background:linear-gradient(90deg,#1ec3ff55,#1ec3ffcc,#1ec3ff55);box-shadow:0 0 8px #1ec3ff}
.zeitstrahl .folge{display:flex;gap:12px;padding:7px 0;align-items:center;position:relative}
.zeitstrahl .linie{position:absolute;left:7px;top:0;bottom:0;width:2px;background:rgba(30,195,255,.27)}
.zeitstrahl .punkt{width:16px;height:16px;border-radius:50%;background:#0a2a48;border:2px solid rgba(30,195,255,.55);flex:none;z-index:1;box-sizing:border-box}
.zeitstrahl .gehoert .punkt{background:#1ec3ff}.zeitstrahl .dran .punkt{background:#8ce4ff;box-shadow:0 0 10px #1ec3ff}
.zeitstrahl .kas{width:46px;height:46px;border-radius:5px;flex:none}
.zeitstrahl .t{flex:1;font-size:15px}.zeitstrahl .t small{display:block;color:var(--t3);font-size:12.5px}
.zeitstrahl .gehoert{opacity:.6}.zeitstrahl .offen{opacity:.55}.zeitstrahl .dran .t{color:#8ce4ff}
.zeitstrahl .teile{margin:0 0 6px 28px;border-left:2px solid rgba(30,195,255,.27);padding-left:14px}
.zeitstrahl .teile .e{padding:5px 0}
.spieler .tx{font-family:Mono;font-size:12.5px;letter-spacing:1.5px;color:var(--t2);cursor:pointer;white-space:nowrap}
.spieler .tx.sp{font-size:15px;letter-spacing:0}
/* Mini-Player (Boss 01.11.): einer für alles, unten auf jeder Seite, solange etwas geladen ist; steuert, was gerade
   läuft (Musik oder Hörspiel); Klick auf eine freie Stelle öffnet den Player an der Stelle, die gerade läuft; rotes X beendet die Wiedergabe, dann ist der Mini weg */
.mini{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:5;width:min(1240px,calc(100% - 48px));display:flex;align-items:center;gap:20px;
  padding:10px 20px 16px;background:rgba(4,12,24,.94);backdrop-filter:blur(10px)}
.mini .mzum{display:flex;align-items:center;gap:12px;min-width:0;flex:1;max-width:calc(50% - 300px);cursor:pointer}
.mini .c{width:52px;height:52px;border-radius:6px;flex:none;border:1.5px solid var(--rand);background-size:cover;background-position:center}
.mini .t{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini .s{font-size:13.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .hz{width:22px;height:22px}
.mini .mmitte{position:absolute;left:50%;top:calc(50% - 3px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.mini .mtasten{position:relative;display:flex;align-items:center;gap:16px;color:var(--t2)}
.mini .mtasten>.tx:last-child{position:absolute;left:100%;margin-left:16px}
.mini .mtasten svg.k{width:21px;height:21px;cursor:pointer}
.mini .tx{font-family:Mono;font-size:12.5px;letter-spacing:1.5px;color:var(--t2);cursor:pointer;white-space:nowrap}
.mini .tx.sp{font-size:15px;letter-spacing:0}
.mini .wohin{font-family:Mono;font-size:10.5px;letter-spacing:2px;color:var(--t3);white-space:nowrap}
.mini .mzeit{margin-left:auto;font-family:Mono;font-size:13px;color:var(--t3);white-space:nowrap}
.mini .mrechts{display:flex;align-items:center;gap:12px;color:var(--t2)}
.mini .mrechts svg{width:20px;height:20px;cursor:pointer}
.mini .laut{width:90px;height:5px;border-radius:3px;background:rgba(110,180,225,.14);overflow:hidden;cursor:pointer}
.mini .laut div{width:70%;height:100%;background:var(--t2)}
.mini{cursor:pointer}.mini[hidden]{display:none}
.mini .mx{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;color:#ff5a6e;border:1px solid rgba(255,90,110,.55);background:rgba(255,90,110,.08);cursor:pointer}
.mini .mx:hover{background:rgba(255,90,110,.2)}.mini .mx svg{width:16px;height:16px}
.mini .mlinie{position:absolute;left:16px;right:16px;bottom:6px;height:3px;background:rgba(110,180,225,.18);border-radius:2px;cursor:pointer}
.mini .mlinie div{height:100%;background:linear-gradient(90deg,var(--cy),#7fe6ff);box-shadow:0 0 6px rgba(34,211,255,.6)}
.mini .mlinie i{position:absolute;top:-3px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#bff3ff;box-shadow:0 0 8px #22d3ff}
/* Nur fürs Muster: zwischen den drei Seiten wechseln */
.spieler{bottom:74px}.mini{bottom:74px}.ansicht.spielt{padding-bottom:190px}
  font-family:Mono;font-size:12px;letter-spacing:2px;color:var(--t3);background:rgba(4,10,20,.85);border:1px dashed rgba(110,180,225,.35);border-radius:8px;padding:6px 10px}
@media (max-width:1180px){.raster{grid-template-columns:1fr}.leiste .name{display:none}}
/* S.T.E.L.L.A.: Haken, Schritte, Poster, Titelseite, Video */
.ordner.haken .e{cursor:pointer}
.ordner.haken .e .ic{width:22px;height:22px;border:1.5px solid var(--rand);border-radius:5px;color:transparent}
.ordner.haken .e.an .ic{color:#ffe0a8;border-color:#d79a3e;background:rgba(232,180,90,.15)}
.ordner.haken .e .ic svg{width:15px;height:15px}
.fenster .feld{display:block;width:calc(100% - 68px);margin:0 34px;flex:none}
.schritte{margin:0 34px;display:flex;flex-direction:column;gap:8px}
.schritte div{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--t2)}
.schritte b{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:Mono;font-weight:normal;font-size:13px;color:#021424;background:#22d3ff;box-shadow:0 0 8px #1ec3ff}
.recht{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 4px}
.rkn{display:flex;justify-content:flex-end;margin-top:4px}
.rkn .knopf{height:32px;font-size:13px}
.reihe{display:flex;gap:14px;overflow-x:auto;scrollbar-width:thin;padding:12px 18px 18px}
.pk{flex:none;width:140px;cursor:pointer}
.pk :is(canvas,img,.ohne){width:140px;height:210px;border-radius:6px;border:1.5px solid var(--rand);display:block}
.pk:hover :is(canvas,img,.ohne){border-color:rgba(120,220,255,.6);box-shadow:0 0 14px rgba(34,211,255,.25)}
.pk .t{font-size:15px;margin-top:6px;line-height:1.15}.pk .s{font-size:13px;color:var(--t3)}
.pk .balken{margin-top:5px;height:4px}
.pk .gs{position:relative}.pk .gs::after{content:"✓";position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;background:#35e39a;color:#041527;font-size:13px;display:grid;place-items:center}
.sraster{display:flex;gap:18px;flex-wrap:wrap;padding:4px 0 6px}
.gitter{display:grid;grid-template-columns:repeat(auto-fill,140px);gap:18px;padding:12px 18px 18px;justify-content:space-between}
.wk .breitbild{width:128px;height:72px;border-radius:6px;flex:none;border:1.5px solid var(--rand)}
.genres{display:flex;flex-wrap:wrap;gap:10px;padding:12px 18px 18px}
.genres span{font-size:15px;padding:7px 14px;border:1.5px solid var(--rand);border-radius:8px;background:rgba(10,22,38,.7);color:var(--t2);cursor:pointer}
.genres b{font-weight:normal;font-family:Mono;font-size:12px;color:var(--t3);margin-left:6px}
.ansicht .hgrund{position:absolute;left:0;right:0;top:0;width:100%;height:560px;object-fit:cover;opacity:.35;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.titelseite{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;margin-top:28px;align-items:start}
.gposter{width:300px;height:450px;border-radius:8px;border:1.5px solid var(--rand);box-shadow:0 0 30px rgba(0,0,0,.6)}
.tt{font-size:40px;letter-spacing:1px;line-height:1.1}
.tm{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px;font-size:16px;color:var(--t2)}
.tag{font-size:17px;font-style:italic;color:#ffe0a8;margin-top:14px}
.th{font-size:17px;line-height:1.5;max-width:820px;margin-top:10px;color:var(--t1)}
.tm2{font-size:14px;color:var(--t3);margin-top:10px}
.taste{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 10px}
.spuren{display:flex;flex-wrap:wrap;gap:30px;margin-top:6px}
.spuren .reiter div{min-width:0}
.folgen{max-width:900px}
.folgen .e :is(canvas,img,.ohne){width:128px;height:72px;border-radius:6px;flex:none;border:1.5px solid var(--rand)}
.folgen .e.klick{cursor:pointer}
.video{position:fixed;inset:0;background:#000;z-index:2}
.vbild{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.voben{position:absolute;left:24px;right:24px;top:20px;display:flex;align-items:center;gap:20px}
.vt{font-size:24px}.vs{font-size:15px;color:var(--t2)}
.vleiste{position:absolute;left:24px;right:24px;bottom:140px;padding:14px 22px 12px;background:rgba(4,12,24,.85);backdrop-filter:blur(10px)}
.vleiste .zeit{display:flex;align-items:center;gap:12px;font-family:Mono;font-size:13px;color:var(--t3)}
.vleiste .vlauf{flex:1;margin:0;height:5px;position:relative;overflow:visible}
.vleiste .vlauf i{position:absolute;top:-3px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:#bff3ff;box-shadow:0 0 8px #22d3ff}
.vtasten{display:flex;align-items:center;gap:18px;margin-top:10px;color:var(--t2)}
.vtasten .tx{font-family:Mono;font-size:12.5px;letter-spacing:1.5px;color:var(--t2);cursor:pointer;white-space:nowrap}
.vtasten .tx.sp{font-size:15px;letter-spacing:0}
.vrechts{margin-left:auto;display:flex;align-items:center;gap:16px}
.vrechts svg{width:20px;height:20px;cursor:pointer}
.vleiste .laut{width:100px;height:5px;border-radius:3px;background:rgba(110,180,225,.14);overflow:hidden}
.vleiste .laut div{width:70%;height:100%;background:var(--t2)}
.vleiste .wohin{font-family:Mono;font-size:11px;letter-spacing:2px;color:var(--t3);text-align:center;margin-top:8px}
@media (max-width:900px){.titelseite{grid-template-columns:1fr}.gposter{width:200px;height:300px}}
.leiste .name,.leiste .d{white-space:nowrap}
.leiste .reiter div{min-width:0;padding:6px 16px}
@media (max-width:1500px){.leiste .d{display:none}}
.mp{width:30px;height:44px;border-radius:4px;flex:none;border:1px solid var(--rand)}
.aufgabe{display:flex;align-items:center;gap:18px;padding:16px 18px}
.aufgabe .amitte{flex:1;min-width:0}
.aufgabe .name{font-size:19px;letter-spacing:1.5px;text-transform:uppercase}
.aufgabe .st{font-size:15px;color:var(--t2);margin-top:3px;display:flex;align-items:center;gap:8px}
.aufgabe .st2{font-size:14px;color:var(--t3);margin-top:2px}
.aknoepfe{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.aknoepfe .knopf{height:32px;font-size:13px;justify-content:center}
.knopf.klein2k{height:30px;font-size:12px;padding:0 12px}
.iv{position:relative;margin:18px 34px 0}
.iv canvas{width:100%;aspect-ratio:16/9;border-radius:6px;border:1.5px solid var(--rand);display:block}
.ivmarke{position:absolute;right:10px;top:10px;font-family:Mono;font-size:12px;letter-spacing:2px;color:#041527;background:#ffab3d;border-radius:4px;padding:3px 8px}
.izeit{display:flex;align-items:center;gap:12px;margin:12px 34px 0;font-family:Mono;font-size:13px;color:var(--t3)}
.ileiste{flex:1;height:8px;border-radius:4px;background:rgba(110,180,225,.14);position:relative}
.ibereich{position:absolute;top:0;bottom:0;border-radius:4px;background:rgba(255,171,61,.75);box-shadow:0 0 8px rgba(255,171,61,.5)}
.ibereich.ab{background:rgba(177,120,255,.7);box-shadow:0 0 8px rgba(177,120,255,.5)}
.ileiste i{position:absolute;top:-3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#bff3ff;box-shadow:0 0 8px #22d3ff}
.itasten{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px;color:var(--t2)}
.itasten .tx{font-family:Mono;font-size:15px;cursor:pointer}
.iwerte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 34px}
.iwerte .lb{margin:16px 0 6px}
.iwerte .suche{width:100%;font-family:Mono;text-align:center;min-width:0}
.iwerte .knopf{margin-top:8px;width:100%;justify-content:center;height:32px;font-size:13px}
/* Echte Seite: Bilder statt gemalter Platzhalter, Video, Bild-Untertitel */
.ohne{display:grid;place-items:center;text-align:center;padding:8px;font-size:13px;color:var(--t3);background:linear-gradient(160deg,#0b2036,#04101e);object-fit:cover}
img.gposter,img.hgrund,img.breitbild,img.mp,.pk img{object-fit:cover;background:#04101e}
video.vbild{object-fit:contain;opacity:1;background:#000}
.video .pgs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.video.still .voben,.video.still .vleiste{opacity:0;transition:opacity .4s}
.video.still{cursor:none}
.vleiste .vlauf{cursor:pointer}.vleiste .laut{cursor:pointer}
.pk.ziehen{opacity:.4}
.pk .weg{display:none}
.hinweis{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:20;padding:10px 18px;border-radius:8px;background:rgba(4,12,24,.92);border:1.5px solid var(--rand);font-size:15px;color:var(--t1)}
.hinweis.rot{border-color:#ff8796;color:#ffc2ca}