[hidden]{display:none!important}
:root{
  --bg:#0E1116;--panel:#161B22;--panel2:#1C232D;--line:#2A3340;--text:#E8EDF4;--dim:#8F9BAD;
  --accent:#4FC9C0;--accent2:#F2B94F;--sel:#2E7D5B;--danger:#E0604A;--claude:#E08A5B;--astra:#5BA8E0;--alt:#8C7BD6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 "Segoe UI",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
.spacer{flex:1}
#top{height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:16px}.brand span{color:var(--dim);font-weight:400;margin-left:8px}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:4px 12px;color:var(--dim)}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 14px}
.btn:hover{border-color:#41506a}.btn.primary{background:#1F5F5A;border-color:#2C8A82}.btn.small{padding:5px 10px;font-size:13px}
.btn.on{background:#24425F;border-color:var(--astra)}
.btn:disabled{opacity:.45;cursor:default}
#main{display:flex;height:calc(100% - 52px - 210px)}
#viewer{flex:1;display:flex;flex-direction:column;min-width:0;padding:14px 14px 8px}
#stage{position:relative;flex:1;min-height:0;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
#stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#vB{visibility:hidden}
#grid{position:absolute;inset:0;display:grid;gap:6px;padding:6px;background:#05070A}
#grid .zelle{position:relative;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:#000}
#grid .zelle.gewaehlt{border-color:var(--sel)}
#grid .zelle:hover{border-color:var(--accent)}
#grid video{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
#grid .cap{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.7);padding:2px 8px;border-radius:4px;font-size:12px}
#leer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:repeating-linear-gradient(45deg,#11161D 0 14px,#0D1117 14px 28px);text-align:center;padding:40px}
.leer-titel{color:var(--dim);font-size:15px}#leerText{font-size:22px;max-width:80%}
#stageLabel{color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
#stageLabel:empty{display:none}
#transport{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding-top:10px}
#transport > *{flex-shrink:0;max-width:100%}
#transport .seg button{white-space:nowrap}
.ibtn{width:40px;height:40px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);font-size:15px}
.ibtn.big{width:48px;height:48px;font-size:18px;background:#1F5F5A;border-color:#2C8A82}
#zeit{font-variant-numeric:tabular-nums;color:var(--dim);min-width:120px;margin-left:6px}
.check{color:var(--dim);display:flex;gap:6px;align-items:center}
#inspector{width:440px;flex:none;background:var(--panel);border-left:1px solid var(--line);padding:14px 16px;overflow:auto}
#aKopf{color:var(--dim);display:flex;justify-content:space-between}
blockquote{margin:8px 0 14px;font-size:18px;line-height:1.35;border-left:3px solid var(--accent2);padding-left:12px}
.regler{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
#uebergangZeile{flex-wrap:wrap;gap:6px}#uebergangZeile .seg{width:100%}#uebergangZeile .seg button{flex:1;padding:5px 4px;white-space:nowrap}
.stepper{display:flex;align-items:center;gap:4px}
.stepper button{width:28px;height:28px;border-radius:6px;background:var(--panel);border:1px solid var(--line)}
.stepper input{width:64px;text-align:right;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:4px 6px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:var(--panel);border:0;padding:5px 12px}.seg button.on{background:#24425F}
#tempoZeile input{flex:1}#tempoWert{min-width:56px;text-align:right;font-variant-numeric:tabular-nums}
#rechnung{color:var(--dim);font-size:13px;padding-top:6px;border-top:1px solid var(--line);margin-top:6px}
.liste-kopf{display:flex;justify-content:space-between;color:var(--dim);margin:4px 0 8px}
.karte{display:flex;gap:10px;padding:8px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel2);cursor:pointer}
.karte.aktiv{border-color:var(--accent)}
.karte.gewaehlt{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset}
.karte img{width:118px;height:66px;object-fit:cover;border-radius:6px;background:#000;flex:none}
.karte .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.karte .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.karte .m{color:var(--dim);font-size:12px}
.karte .aktionen{display:flex;gap:5px;margin-top:auto;flex-wrap:wrap}
.karte .aktionen .btn{padding:4px 8px;white-space:nowrap}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:10px;background:#333;margin-right:6px}
.badge.claude{background:var(--claude);color:#1a0d05}.badge.astra{background:var(--astra);color:#04121e}.badge.alt{background:var(--alt);color:#0c0820}
.ok{color:#6FD39E;font-weight:600;white-space:nowrap;align-self:center}
.hilfe{color:var(--dim);font-size:12px;margin-top:12px}
#timelineWrap{height:210px;background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column}
#tlTools{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;color:var(--dim)}
#timeline{position:relative;flex:1;overflow-x:auto;overflow-y:hidden;padding:0 14px}
#ruler{position:relative;height:22px}
#ruler .tick{position:absolute;top:0;height:22px;border-left:1px solid var(--line);color:var(--dim);font-size:11px;padding-left:3px}
#track{position:relative;height:118px}
.block{position:absolute;top:6px;height:106px;border-radius:7px;border:1px dashed #3A4556;background:#12171E;overflow:hidden;cursor:pointer}
.block.hat{border-style:solid}
.block.gewaehlt{border:2px solid var(--sel)}
.block.aktiv{outline:2px solid var(--accent);outline-offset:1px}
.block .bild{position:absolute;inset:18px 0 0 0;background-size:cover;background-position:center;opacity:.9}
.block .kopf{position:absolute;left:0;right:0;top:0;height:18px;font-size:11px;padding:1px 5px;background:rgba(0,0,0,.55);white-space:nowrap;overflow:hidden}
.block .pv,.block .pn{position:absolute;top:18px;bottom:0;background:repeating-linear-gradient(135deg,rgba(242,185,79,.55) 0 5px,rgba(0,0,0,.6) 5px 10px)}
.block .pv{left:0}.block .pn{right:0}
.block .n{position:absolute;right:4px;bottom:3px;font-size:11px;background:rgba(0,0,0,.65);border-radius:8px;padding:0 6px}
#playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);pointer-events:none;left:14px}
#toast{position:fixed;left:50%;bottom:230px;transform:translateX(-50%);background:#2A3340;padding:8px 16px;border-radius:8px;border:1px solid #41506a}
#exportBox{position:fixed;right:16px;top:60px;width:360px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#exportBox a{color:var(--accent)}
#produktionBox{position:fixed;right:16px;top:60px;width:380px;max-height:calc(100vh - 80px);overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:20}
#produktionBox a{color:var(--accent)}#produktionBox ul{margin:6px 0 8px 18px;padding:0}#produktionBox li{margin:2px 0}
#produktionBox .balken{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:8px 0}#produktionBox .balken i{display:block;height:100%;background:#2C8A82}
.bestaetigen{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--danger)}
#transport .seg button{padding:5px 10px;font-size:13px}
#grid .zelle.aktiv{border-color:var(--accent)}
#grid .zelle .haken{display:none;position:absolute;right:6px;top:6px;background:var(--sel);padding:2px 8px;border-radius:4px;font-size:12px}
#grid .zelle.gewaehlt .haken{display:block}
#grid .zelle .weg{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid var(--line);font-size:14px;line-height:1;opacity:.75}
#grid .zelle .weg:hover{opacity:1;border-color:var(--danger);color:var(--danger)}
.wmark{color:var(--accent2)}
.block .wn{position:absolute;left:4px;bottom:3px;font-size:11px;background:var(--accent2);color:#1a1205;border-radius:8px;padding:0 6px}
#wunschBox{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
#wunschBox select{max-width:290px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;font-size:13px}
#wText{width:100%;resize:vertical;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:7px 9px;font:inherit;margin:6px 0}
.wAktionen{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hinweis{color:var(--dim);font-size:12px;margin:6px 0 0}
#wAufnahme{display:flex;gap:6px;align-items:center;color:var(--danger);font-variant-numeric:tabular-nums}
#wAufnahme .punkt{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
#wuensche{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.wunsch{border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:8px;padding:8px 10px;background:var(--panel)}
.wunsch.umgesetzt{border-left-color:var(--sel);opacity:.85}
.wkopf{display:flex;gap:8px;font-size:12px;color:var(--dim);align-items:center}
.wkopf span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wstatus{font-weight:600;color:var(--accent2)}.umgesetzt .wstatus{color:#6FD39E}
.wtext{margin:5px 0;white-space:pre-wrap}
.wunsch audio{width:100%;height:32px;margin-top:5px}
.abschrift{font-size:13px;margin-top:4px;font-style:italic}
.dim{color:var(--dim)}
.werledigt{font-size:12px;color:#6FD39E;margin-top:4px}
.wfuss{display:flex;justify-content:flex-end;gap:6px;margin-top:4px}
.wedit{display:flex;flex-direction:column;gap:6px;width:100%}
.wedit select,.wedit textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px}
.wedit textarea{resize:vertical}
.wedit div{display:flex;justify-content:flex-end;gap:6px}
/* Konto und Rückmeldung folgen der vorhandenen dunklen Oberfläche. */
[hidden] { display: none !important; }
#kontoLeiste { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line, #343b48); }
#kontoLeiste select { max-width:34vw; }
#speicherStand[data-state="error"], #speicherStand[data-state="uncertain"], #verbindung, #loginFehler { color:#ffb6a6; }
#speicherStand[data-state="saved"] { color:#9fdbb2; }
#anmeldung, #projektLeer { max-width:620px; margin:4vh auto; padding:24px; }
#loginForm label { display:block; margin:16px 0; }
#loginForm input { display:block; width:100%; margin-top:8px; padding:10px; }
#projektLinks a { display:block; margin:12px 0; }
#updateHinweis, #updateStatus { margin:8px 18px; color:var(--dim); }
#abgleich { margin:8px 18px; padding:8px 12px; border:1px solid var(--dim); border-radius:6px; }
#abgleich[hidden] { display:none; }
dialog { max-width:520px; color:inherit; background:#202630; border:1px solid #657188; border-radius:10px; padding:24px; }
dialog::backdrop { background:#000a; }
body.ohneProjekt #top, body.ohneProjekt #main, body.ohneProjekt #timelineWrap { display:none; }
body { display:flex; flex-direction:column; }
#main { height:auto; flex:1; min-height:0; }
#top, #kontoLeiste, #updateHinweis, #updateStatus, #abgleich { flex-shrink:0; }
#timelineWrap { flex:0 0 210px; }
body.ohneProjekt { overflow:auto; }
#anmeldung, #projektLeer { width:min(620px, 100%); }
.wfehler{color:var(--danger);font-size:12px;margin-top:4px}.wfehler:empty{display:none}
/* K33/B4: Lektionsliste und Rücklink im Design der Oberfläche statt Browser-Blau/Violett. */
#projektLinks a, #zurListe { color:var(--accent); text-decoration:none; }
#projektLinks a:visited, #zurListe:visited { color:var(--accent); }
#projektLinks a:hover, #zurListe:hover, #projektLinks a:focus-visible, #zurListe:focus-visible { text-decoration:underline; }
/* K33/B4: Handy und schmale Fenster: Spalten untereinander, Kopfleiste bricht um, kein seitliches Scrollen. Desktop bleibt unverändert. */
@media (max-width: 760px) {
  html, body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:visible; }
  #kontoLeiste { gap:8px; padding:8px 12px; }
  #kontoLeiste select { max-width:60vw; }
  #top { height:auto; flex-wrap:wrap; gap:8px; padding:8px 12px; }
  #top .spacer { display:none; }
  #top .btn { flex:1 1 auto; }
  #main { flex-direction:column; flex:none; }
  #viewer { padding:10px 12px 8px; }
  #stage { flex:none; aspect-ratio:16/9; }
  #stageLabel { max-width:100%; }
  #zeit { min-width:0; }
  #inspector { width:auto; border-left:0; border-top:1px solid var(--line); overflow:visible; padding:12px; }
  #wunschBox select { max-width:100%; }
  #exportBox, #produktionBox { left:12px; right:12px; width:auto; }
  #toast { max-width:calc(100vw - 24px); }
}
/* K43: Lektionsauswahl in der Kontoleiste im dunklen Design statt weißem Standardfeld (auch die aufgeklappte Liste). */
#kontoLeiste select { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:4px 8px; font:inherit; font-size:13px; color-scheme:dark; }
#kontoLeiste select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
#kontoLeiste select option { background:var(--panel2); color:var(--text); }