/* ==================================================================
   WOW LORE QUIZ - Steuer-Dock
   In OBS unter Docks -> Benutzerdefinierte Browser-Docks eintragen.
   Parameter:  ?ws=ws://127.0.0.1:8080/
               ?action=[WOW LORE QUIZ] Handler
               ?actionid=<Action-ID>   (sicherer als der Name)
   ================================================================== */
:root{
  --bg:#151515; --panel:#202020; --karte:#242424; --chip:#262626;
  --rand:rgba(255,255,255,.08); --rand-stark:rgba(255,255,255,.14);
  --text:#f5f5f5; --leise:#a6a6a6;
  --gold:#e9b451; --gut:#86d3b7; --warn:#ff8a80; --gelb:#ffc766;
  --radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font:14px/1.45 "Segoe UI",system-ui,sans-serif;
  padding:10px;min-width:280px;
}
.karte{background:var(--panel);border:1px solid var(--rand);border-radius:var(--radius);padding:10px;margin-bottom:8px}

/* ---------- Scrollleisten im Dock-Stil ---------- */
html{scrollbar-color:#3c3c3c var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#3c3c3c;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#555}
::-webkit-scrollbar-corner{background:var(--bg)}

/* ---------- Suchfelder (Fragenbank, Verlauf, Einstellungen) ---------- */
input[type=search]{
  -webkit-appearance:none;appearance:none;
  background:#1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 10px center/15px;
  border:1px solid var(--rand-stark);border-radius:7px;color:var(--text);
  font:inherit;font-size:13px;line-height:1.2;padding:8px 10px 8px 33px;min-width:0;
  outline:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
input[type=search]::placeholder{color:#7a7a7a}
input[type=search]:hover{border-color:rgba(255,255,255,.22)}
input[type=search]:focus{border-color:rgba(233,180,81,.65);box-shadow:0 0 0 3px rgba(233,180,81,.13);background-color:#1e1e1e}
input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none;width:14px;height:14px;cursor:pointer;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0d0d0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/12px no-repeat}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1}
#vThema{-webkit-appearance:none;appearance:none;background:#1a1a1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center/13px;
  border:1px solid var(--rand-stark);border-radius:7px;color:var(--text);font:inherit;font-size:13px;padding:8px 28px 8px 10px;outline:none;cursor:pointer}
#vThema:focus{border-color:rgba(233,180,81,.65);box-shadow:0 0 0 3px rgba(233,180,81,.13)}
#vThema option{background:#1e1e1e;color:var(--text)}
.etikett{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);font-weight:700;margin-bottom:6px}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.punkt{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none;transition:background .3s}
.punkt.an{background:var(--gut)}
.titel{font-weight:700;letter-spacing:.02em}
.titel b{color:var(--gold)}
.sbChip{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;
  border:1px solid var(--rand);color:var(--leise);white-space:nowrap;cursor:default}
.sbChip i{width:7px;height:7px;border-radius:50%;background:#666}
.sbChip.an{color:var(--gut)}
.sbChip.an i{background:var(--gut);box-shadow:0 0 6px var(--gut)}
.sbChip.aus{color:#ff5d7a;border-color:rgba(255,93,122,.55);background:rgba(255,93,122,.12)}
.sbChip.aus i{background:#ff5d7a;animation:sbBlink 1.2s ease-in-out infinite}
.sbChip.egal{opacity:.55}
@keyframes sbBlink{50%{opacity:.25}}
.kopf .rechts{margin-left:auto;font-size:11px;color:var(--leise);text-align:right;line-height:1.35}

/* ---------- Status ---------- */
.status{display:flex;align-items:baseline;gap:8px}
.phase{font-weight:700}
.phase.laeuft{color:var(--gut)} .phase.aufloesung{color:var(--gelb)} .phase.leer{color:var(--leise)}
.status .uhr{margin-left:auto;font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}
.status .uhr.knapp{color:var(--warn)}
.unterzeile{font-size:12px;color:var(--leise);margin-top:4px}

/* ---------- Knoepfe ---------- */
button{
  font:inherit;color:var(--text);background:var(--chip);
  border:1px solid var(--rand-stark);border-radius:var(--radius);
  padding:7px 10px;cursor:pointer;transition:background .15s,border-color .15s;
}
button:hover:not(:disabled){background:#303030;border-color:rgba(255,255,255,.26)}
button:disabled{opacity:.38;cursor:default}
button.haupt{background:var(--gold);border-color:var(--gold);color:#1a1405;font-weight:700}
button.haupt:hover:not(:disabled){background:#f3c876}
button.gefahr{color:var(--warn);border-color:rgba(255,138,128,.4)}
button.aktiv{background:rgba(233,180,81,.18);border-color:var(--gold);color:var(--gold)}
button.sicher{background:var(--warn);border-color:var(--warn);color:#1a0a08;font-weight:700}

.reihe{display:flex;gap:6px;align-items:center}
.gitter{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gitter.drei{grid-template-columns:1fr 1fr 1fr}
.voll{width:100%}

/* ---------- Rundenwahl ---------- */
.zaehler{display:flex;align-items:center;gap:6px}
.zaehler input{
  width:52px;text-align:center;font:inherit;font-weight:700;
  background:var(--karte);color:var(--text);
  border:1px solid var(--rand-stark);border-radius:var(--radius);padding:6px 4px;
}
.zaehler input:disabled{opacity:.4}

/* ---------- Loesung ---------- */
.loesung{background:var(--karte);border-radius:var(--radius);padding:8px 10px;margin-top:6px}
.loesung .antwort{font-size:17px;font-weight:700;color:var(--gold)}
.loesung .lEn{font-size:12px;color:var(--leise);margin-top:1px}
.loesung .lEn:empty{display:none}
.loesung .frage{font-size:12px;color:var(--leise);margin-bottom:4px}
.loesung.verdeckt .antwort,.loesung.verdeckt .lEn{filter:blur(7px);user-select:none}
/* Klick-Karte: Ort + kleine Karte mit dem Ziel */
.loesung .lKarte{position:relative;margin-top:6px;border-radius:4px;overflow:hidden}
.loesung .lKarte img{display:block;width:100%;height:auto}
.loesung .lKarte i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#ff5d7a;border:2px solid #fff;box-shadow:0 0 8px #ff5d7a}
.loesung.verdeckt .lKarte,.loesung.verdeckt .frage.ort{filter:blur(7px)}
/* Bei der Klick-Karte steht der Name schon in der Frage - statt der Antwort nur Ort und Karte */
.loesung.klick .antwort,.loesung.klick .lEn{display:none}
.leerhinweis{font-size:12px;color:var(--leise);font-style:italic}

/* ---------- Knappe Antworten ---------- */
.knapp{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--rand)}
.knapp:first-of-type{border-top:0}
.knapp .wer{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%}
.knapp .was{flex:1;font-size:12px;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.knapp .wert{font-size:11px;color:var(--gelb);font-variant-numeric:tabular-nums}
.knapp button{padding:3px 8px;font-size:12px}

/* ---------- Fuss ---------- */
.fuss{display:flex;justify-content:center;gap:14px;margin:2px 0 6px}
button.textknopf{background:none;border-color:transparent;color:var(--leise);font-size:11px;padding:4px 6px}
button.textknopf:hover:not(:disabled){background:none;border-color:transparent;color:var(--text)}

/* ---------- Steuerung (neu, 04.10.2026) ---------- */
#seiteSteuerung{display:flex;flex-direction:column}
#seiteSteuerung.imSpiel #poolKarte{order:8}
#seiteSteuerung.imSpiel .fuss{order:9}
.kartenkopf{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.kartenkopf .etikett{margin:0}
.kleintext{font-size:11px;color:var(--leise)}
.kleintext i{font-style:normal;opacity:.75}

/* Fragenpool: eine Kachel je Art mit Fortschritt */
.poolGitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
.poolKachel{position:relative;background:var(--karte);border:1px solid var(--rand);border-radius:6px;
  padding:7px 9px 8px;overflow:hidden}
.poolKachel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--farbe,#888)}
.poolKachel.aus{opacity:.45}
.poolKachel .pName{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:700}
.poolKachel .pMix{font-size:10px;font-weight:700;color:var(--leise);font-variant-numeric:tabular-nums}
.poolKachel .pZahl{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}
.poolKachel .pZahl small{font-size:11px;font-weight:600;color:var(--leise);margin-left:3px}
.poolKachel .pSpur{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:5px}
.poolKachel .pSpur i{display:block;height:100%;background:var(--farbe,#888);opacity:.8;border-radius:3px}
.poolKachel .pText{font-size:10.5px;color:var(--leise);margin-top:4px;font-variant-numeric:tabular-nums}
/* Thema freigeben: kleiner Knopf unten rechts, zweimal klicken */
.poolKachel .pReset{position:absolute;right:6px;bottom:5px;padding:1px 6px;font-size:11px;line-height:16px;border-radius:5px;
  background:transparent;border:1px solid var(--rand);color:var(--leise);cursor:pointer}
.poolKachel .pReset:hover{color:var(--text);border-color:var(--farbe,#888)}
.poolKachel .pReset.scharf{color:#fff;background:var(--gefahr,#c0392b);border-color:transparent}

/* Start: alles in einer Zeile, Starten als kompakter Hauptknopf */
.startZeile{display:flex;align-items:center;gap:6px}
.startZeile .zaehler{flex:none}
.zaehler{background:var(--karte);border:1px solid var(--rand-stark);border-radius:6px;padding:2px;gap:0}
.zaehler button{background:none;border:0;width:28px;padding:5px 0;font-size:15px;line-height:1}
.zaehler button:hover:not(:disabled){background:rgba(255,255,255,.06)}
.zaehler input{border:0;background:none;width:38px;padding:4px 0;font-size:15px}
button.pille{border-radius:999px;padding:6px 12px;font-size:12px}
.startKnopf{margin-left:auto;padding:8px 18px;border-radius:6px;font-size:13px;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(233,180,81,.18)}
.themaBlock{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.testBlock{margin-top:10px;padding-top:9px;border-top:1px solid var(--rand)}
.testKopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
button.neben{padding:4px 12px;font-size:12px;border-radius:6px;color:var(--gelb);border-color:rgba(255,199,102,.35);
  background:rgba(255,199,102,.06)}
button.neben:hover:not(:disabled){background:rgba(255,199,102,.14);border-color:var(--gelb)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips button{padding:2px 9px;font-size:11px;border-radius:999px}

/* Laufende Runde: 3x2 Kacheln mit Symbol */
.steuerGitter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.steuerGitter button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 4px 7px;border-radius:6px;min-height:52px}
.steuerGitter .ico{font-size:15px;line-height:1;font-weight:800}
.steuerGitter .txt{font-size:11px;color:var(--leise);line-height:1.15;text-align:center}
.steuerGitter button.aktiv .txt{color:var(--gold)}
.steuerGitter button.gefahr .txt{color:var(--warn)}

/* ---------- Meldungen ---------- */
#meldungen{position:fixed;left:10px;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.meldung{
  background:#2c2c2c;border:1px solid var(--rand-stark);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:7px 10px;font-size:12px;
  animation:rein .25s ease both;
}
.meldung.gut{border-left-color:var(--gut)}
.meldung.schlecht{border-left-color:var(--warn)}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.weg{display:none !important}

/* ---------- Markieren ---------- */
.grundwahl{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.grundwahl button{padding:4px 9px;font-size:12px}
.markiertHaken{font-size:12px;color:var(--gelb);font-weight:700}
.zaehlmarke{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;
  background:var(--gelb);color:#1a1405;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.zaehlmarke:empty{display:none}

.mEintrag{background:var(--karte);border:1px solid var(--rand);border-radius:var(--radius);padding:9px 10px;margin-bottom:7px}
.mKopf{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--leise);margin-bottom:5px}
.mGrund{background:rgba(255,199,102,.16);color:var(--gelb);border-radius:3px;padding:1px 6px;font-weight:700}
.mFrage{font-size:13px;font-weight:600;line-height:1.35}
.mAntwort{font-size:12px;color:var(--gold);margin-top:3px}
.mBild{width:54px;height:54px;border-radius:4px;object-fit:cover;background:#1e1e1e;float:right;margin-left:8px}
.mKnoepfe{display:flex;gap:5px;margin-top:8px;clear:both}
.mKnoepfe button{flex:1;padding:5px 6px;font-size:12px}
.mKnoepfe button.sicher{background:var(--warn);border-color:var(--warn);color:#1a0a08;font-weight:700}

.mForm label{display:block;font-size:11px;color:var(--leise);margin:7px 0 3px}
.mForm textarea,.mForm input,.mForm select{
  width:100%;background:#1b1b1b;color:var(--text);border:1px solid var(--rand-stark);
  border-radius:var(--radius);padding:6px 7px;font:inherit;font-size:12px;resize:vertical}
.mForm textarea{min-height:52px}
.mZeile{display:flex;gap:6px}
.mZeile > div{flex:1}

/* ---------- Reiter ---------- */
.reiter{display:flex;gap:4px;margin-bottom:8px}
.reiter button{flex:1 1 auto;min-width:0;padding:6px 4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border-color:transparent;color:var(--leise)}
.reiter button.an{background:var(--panel);border-color:var(--rand);color:var(--text);font-weight:700}

/* ---------- Einstellungen ---------- */
.eGruppe{margin-bottom:6px;padding:0}
.eKopf{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:0;border-radius:var(--radius);
  padding:9px 10px;text-align:left;cursor:pointer}
.eKopf:hover:not(:disabled){background:rgba(255,255,255,.04);border:0}
.eKopf .etikett{margin:0;color:var(--text);flex:none}
.eKopf .kurz{flex:1;min-width:0;font-size:11px;color:var(--leise);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eKopf .pfeil{font-size:11px;color:var(--gold);transition:transform .15s;display:inline-block;transform:rotate(90deg)}
.eGruppe.zu .eKopf .pfeil{transform:none}
.eKoerper{padding:0 10px 8px}
.eGruppe.zu .eKoerper{display:none}
.eLeiste{display:flex;gap:6px;margin-bottom:6px}
.eSuche{margin-bottom:6px}
.eSuche input{width:100%;box-sizing:border-box}
.eAbschnitt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);font-weight:700;margin:14px 2px 6px}
#eInhalt > .eAbschnitt:first-of-type{margin-top:4px}
.klappKopf{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.klappKopf:hover:not(:disabled){background:none;border:0}
.klappKopf .pfeil{font-size:10px;color:var(--leise);transition:transform .15s}
.karte.zu .klappKopf .pfeil{transform:rotate(-90deg)}
.karte.zu #knappListe{display:none}
#vorlagen:empty{display:none}
#vorlagen button.vorlage{display:inline-flex;align-items:center;gap:5px;border-style:dashed}
#vorlagen button.vorlage .vx{opacity:.5;font-size:12px;line-height:1}
#vorlagen button.vorlage .vx:hover{opacity:1;color:var(--warn)}
#vorlagen button.vorlagePlus{opacity:.75}
#vorlagen .vorlageName{-webkit-appearance:none;appearance:none;width:150px;padding:3px 11px;font:inherit;font-size:11px;line-height:1.4;
  background:#1a1a1a;color:var(--text);border:1px solid var(--rand-stark);border-radius:999px;outline:none;
  transition:border-color .15s,box-shadow .15s}
#vorlagen .vorlageName::placeholder{color:#7a7a7a}
#vorlagen .vorlageName:hover{border-color:rgba(255,255,255,.22)}
#vorlagen .vorlageName:focus{border-color:rgba(233,180,81,.65);box-shadow:0 0 0 3px rgba(233,180,81,.13)}
.vEintrag.fb .vSym{color:var(--leise)}
.auPlay{flex:none;width:26px;height:26px;padding:0;border-radius:50%;font-size:11px;line-height:1;display:grid;place-items:center}
.auPlay.an{background:rgba(69,212,131,.18);border-color:rgba(69,212,131,.6);color:#45d483}
/* Player im Dock: Zeitleiste zum Vorspulen + Lautstaerke */
#auPlayer{position:sticky;top:0;z-index:5;border-color:rgba(233,180,81,.35);box-shadow:0 6px 14px rgba(0,0,0,.45)}
#auPlayer.weg{display:none}
.apKopf{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.apName{flex:1;min-width:0;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apName small{color:var(--leise);font-weight:400;margin-left:6px}
.apZu{flex:none;width:24px;height:24px;padding:0;border-radius:50%;line-height:1;display:grid;place-items:center;color:var(--leise)}
.apZeile{display:flex;align-items:center;gap:8px}
.apZeit{flex:none;min-width:36px;font-size:11px;color:var(--leise);font-variant-numeric:tabular-nums;text-align:center}
.apLaut{display:flex;align-items:center;gap:6px;flex:none;width:118px}
.apLaut span{font-size:12px;color:var(--leise);cursor:pointer;user-select:none;width:16px;text-align:center}
input.apRegler{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;margin:0;padding:0;border:0;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--gold) 0,var(--gold) var(--p,0%),rgba(255,255,255,.14) var(--p,0%),rgba(255,255,255,.14) 100%)}
input.apRegler::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#f5f5f5;border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(233,180,81,.15)}
input.apRegler:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(233,180,81,.22)}
input.apRegler::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#f5f5f5;border:2px solid var(--gold)}
.vEintrag.fb.uebersprungen .vSym{color:var(--gelb)}
.eLeiste button{flex:1;padding:4px 6px;font-size:11px}
.eZeile{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--rand)}
.eZeile:first-of-type{border-top:0}
.eZeile label{flex:1;font-size:13px;line-height:1.3}
.eZeile label i{display:block;font-style:normal;font-size:11px;color:var(--leise);margin-top:1px}
.eZeile input[type=number],.eZeile input[type=text]{
  background:var(--karte);color:var(--text);border:1px solid var(--rand-stark);
  border-radius:var(--radius);padding:5px 7px;font:inherit;font-size:13px;
}
.eZeile input[type=number]{width:74px;text-align:right}
.eZeile input[type=text]{flex:2;min-width:0}
.eSchalter{min-width:56px;padding:4px 8px;font-size:12px}
.eSchalter.an{background:rgba(233,180,81,.18);border-color:var(--gold);color:var(--gold);font-weight:700}
.eDrei{display:flex;gap:4px}
.eDrei input{width:52px !important}
.eHaken{display:flex;flex-wrap:wrap;gap:4px;padding:4px 0}
/* Fragen-Mix: ein Balken mit allen Arten, darunter je Art ein Feld */
.mixBalken{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--chip);margin:4px 0 8px}
.mixBalken i{display:block;height:100%;transition:flex-grow .25s}
.mixZeile{display:flex;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--rand)}
.mixZeile:first-of-type{border-top:0}
.mixZeile .farbe{width:10px;height:10px;border-radius:3px;flex:none}
.mixZeile .name{flex:1;font-size:13px}
.mixZeile .prozent{width:44px;text-align:right;font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums}
.mixZeile input{width:60px;text-align:right}
.mixZeile .schloss{flex:none;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:6px;
  background:transparent;border:1px solid transparent;color:var(--leise);opacity:.55;cursor:pointer}
.mixZeile .schloss:hover:not(:disabled){opacity:1;background:rgba(255,255,255,.05);border-color:var(--rand)}
.mixZeile .schloss svg{width:14px;height:14px}
.mixZeile.fest .schloss{opacity:1;color:var(--gelb);border-color:rgba(255,199,102,.35);background:rgba(255,199,102,.08)}
.mixZeile.fest input{border-color:rgba(255,199,102,.45)}
.mixWarn{font-size:11px;color:var(--warn);margin-top:4px}
.mixZeile.leer .name,.mixZeile.leer .prozent{opacity:.45}
.mixKnopf{display:flex;gap:6px;margin-top:6px}
/* Sprecherliste */
.stimmen{display:flex;flex-direction:column;gap:4px;padding:4px 0}
.stimme{display:flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--rand);border-radius:var(--radius);padding:3px 4px 3px 8px;font-size:13px}
.stimme span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stimmeNeu{display:flex;gap:6px}
.stimmeNeu input{flex:1;min-width:0}
.eHaken button{padding:3px 8px;font-size:11px}
.eText{display:block;padding:5px 0;border-top:1px solid var(--rand)}
.eText span{display:block;font-size:11px;color:var(--leise);margin-bottom:3px}
.eText .eTextKopf{display:flex;align-items:center;gap:6px}
.eText .eTextKopf input{width:auto;margin:0}
.eText .eTextKopf b{font-weight:400}
.eText.aus input[type=text]{opacity:.45;text-decoration:line-through}
.eText.aus .eTextKopf b::after{content:" - aus";color:#ff5d7a}
.eText input{width:100%;background:var(--karte);color:var(--text);border:1px solid var(--rand-stark);
  border-radius:var(--radius);padding:5px 7px;font:inherit;font-size:12px}
.eFuss{position:sticky;bottom:0;background:var(--bg);padding:8px 0 2px;display:flex;gap:6px}
.eFuss button{flex:1}
.eStand{font-size:11px;color:var(--leise);text-align:center;padding:4px 0 8px}

/* ---------- ElevenLabs ---------- */
.elZeile{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--leise);margin:-2px 0 8px;padding:0 2px}
.elZeile b{color:var(--text);font-variant-numeric:tabular-nums}
.elZeile .spur{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;min-width:40px}
.elZeile .fuell{height:100%;background:var(--gut);border-radius:0 4px 4px 0}
.elZeile.knapp .fuell{background:var(--gelb)}
.elZeile.leer .fuell{background:var(--warn)}
.elZeile.knapp b{color:var(--gelb)} .elZeile.leer b{color:var(--warn)}
/* Bis die Credits da sind: Platz freihalten, Balken schimmert */
.elZeile.laedt b{color:var(--leise);font-weight:400}
.elZeile.laedt .spur{background:linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.05) 100%);
  background-size:200% 100%;animation:elWarten 1.4s linear infinite}
.elZeile.laedt .fuell{width:0}
@keyframes elWarten{from{background-position:100% 0}to{background-position:-100% 0}}
.elKarte .gross{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.elKarte .spur{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin:6px 0}
.elKarte .fuell{height:100%;background:var(--gut);border-radius:0 4px 4px 0}
.elKarte .spur{position:relative}
.elKarte .spur .prog{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 3px,transparent 3px 6px)}
.elPrognose{margin-top:8px;padding:8px 10px;border-radius:var(--radius);font-size:12px;line-height:1.45;
  background:rgba(134,211,183,.08);border:1px solid rgba(134,211,183,.25)}
.elPrognose b{font-variant-numeric:tabular-nums}
.elPrognose.eng{background:rgba(255,199,102,.08);border-color:rgba(255,199,102,.3)}
.elPrognose.nein{background:rgba(255,138,128,.08);border-color:rgba(255,138,128,.3)}
.elPrognose .kopfz{font-weight:700;margin-bottom:2px}
/* Platzhalter unter den Chat-Texten, Klick fuegt ein */
.ePlatz{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.ePlatz button{padding:1px 6px;font-size:10px;font-family:ui-monospace,Consolas,monospace;color:var(--leise)}
.ePlatz button:hover{color:var(--gold);border-color:var(--gold)}
.ePlatz.leer{font-size:10px;color:var(--leise);opacity:.7}
/* ---------- Verlauf ---------- */
.vZusammen{font-size:12px;color:var(--leise)}
.vZusammen b{color:var(--text)}
.vTag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);font-weight:700;margin:12px 2px 6px}
.vEintrag{display:flex;gap:10px;background:var(--panel);border:1px solid var(--rand);border-left:3px solid var(--rand-stark);
  border-radius:var(--radius);padding:8px 10px;margin-bottom:6px}
.vEintrag.geloest{border-left-color:var(--gut)}
.vEintrag.niemand{border-left-color:var(--warn)}
.vEintrag.uebersprungen{border-left-color:var(--gelb)}
.vEintrag img{width:54px;height:54px;object-fit:cover;border-radius:3px;flex:none;background:var(--chip)}
/* Verlauf: schmale Zeile, Details erst nach Klick */
.vEintrag{flex-direction:column;gap:0;padding:0;margin-bottom:4px}
.vZeile{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;min-width:0}
.vZeile:hover{background:rgba(255,255,255,.03)}
.vSym{flex:none;width:16px;text-align:center;font-size:12px}
.vEintrag.geloest .vSym{color:var(--gut)} .vEintrag.niemand .vSym{color:var(--warn)} .vEintrag.uebersprungen .vSym{color:var(--gelb)}
.vAnt{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vMeta{flex:none;font-size:11px;color:var(--leise)}
.biDaumen{flex:none;width:26px;height:26px;border-radius:5px;object-fit:cover;background:rgba(127,127,127,.15)}
.vEintrag.offen .vZeile{border-bottom:1px solid var(--rand)}
.vDetail{padding:8px 10px 10px;display:flex;flex-direction:column;gap:5px}
.vDetail img.vBild{width:100%;max-height:180px;height:auto;object-fit:contain;border-radius:4px;background:var(--chip)}
.vFeld{font-size:12px;line-height:1.4;word-break:break-word}
.vFeld > b{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);font-weight:700;margin-bottom:1px}
.vFeld.geloest{color:var(--gut)} .vFeld.niemand{color:var(--warn)} .vFeld.uebersprungen{color:var(--gelb)}
.vFeld.warn{color:var(--warn)} .vFeld.leise{color:var(--leise);font-size:11px}
.vHinweise{margin:0;padding-left:18px} .vHinweise li.nicht{color:var(--leise)}
.vEintrag .vText{flex:1;min-width:0}
.vKopf{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--leise);flex-wrap:wrap}
.vKopf .chip{padding:0 6px;border-radius:3px;background:var(--chip);border:1px solid var(--rand);font-size:10px}
.vKopf .chip.test{color:var(--gelb);border-color:rgba(255,199,102,.35)}
.vFrage{font-size:13px;margin:3px 0 2px;line-height:1.35}
.vAntwort{font-size:13px;font-weight:700}
.vErgebnis{font-size:12px;margin-top:2px}
.vErgebnis.geloest{color:var(--gut)} .vErgebnis.niemand{color:var(--warn)} .vErgebnis.uebersprungen{color:var(--gelb)}
.vKnapp{font-size:11px;color:var(--leise);margin-top:3px}
.vKnapp i{font-style:normal;color:var(--text)}

/* ---------- Testklicks ---------- */
.tkPunkt{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#ff5d7a;border:2px solid #fff;pointer-events:none}
.tkZeile{margin-top:6px}
.tkPunkt.anonym{background:#9aa0a8}
.tkPunkt.test{background:#ffc766}
.tkPunkt i{position:absolute;left:12px;top:-6px;font-style:normal;font-size:10px;font-weight:700;white-space:nowrap;
  color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000}
.tkListe{margin-top:6px;max-height:180px;overflow:auto}
.tkEintrag{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:1px solid var(--rand);font-size:12px}
.tkEintrag:first-child{border-top:0}
.tkEintrag .p{width:8px;height:8px;border-radius:50%;background:#ff5d7a;flex:none}
.tkEintrag.anonym .p{background:#9aa0a8}
.tkEintrag .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkEintrag.anonym .n{color:var(--leise)}
.tkEintrag .w{color:var(--leise);font-size:11px;font-variant-numeric:tabular-nums}
.tkEintrag .z{font-size:11px;font-variant-numeric:tabular-nums;padding:0 5px;border-radius:4px;background:var(--rand);color:var(--text)}
.tkEintrag .z.oft{background:#ff5d7a33;color:#ff8da1}
.tkEintrag .z i{font-style:normal;color:var(--leise)}
.tkAnon{margin-top:6px;padding:6px 8px;border-radius:var(--radius);font-size:11.5px;line-height:1.4;
  background:rgba(255,199,102,.08);border:1px solid rgba(255,199,102,.3)}
.tkZeile input{vertical-align:middle;margin-right:4px}
/* ---------- Eigene Klick-Orte ---------- */
.kInfo{font-size:12px;color:var(--leise);margin:2px 0 8px;line-height:1.4}
.kOrt{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--rand)}
.kOrt:first-of-type{border-top:0}
.kOrt img{width:64px;height:36px;object-fit:cover;border-radius:3px;flex:none;background:var(--chip)}
.kOrt .kName{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kOrt .kName small{display:block;font-weight:400;font-size:11px;color:var(--leise)}
.kOrt button{padding:3px 8px;font-size:12px}
.kForm{background:var(--karte);border:1px solid var(--rand-stark);border-radius:6px;padding:9px;margin:6px 0 10px}
.kForm label{display:block;font-size:11px;color:var(--leise);margin:8px 0 3px}
.kForm input[type=text],.kForm select{width:100%;background:#1b1b1b;color:var(--text);border:1px solid var(--rand-stark);
  border-radius:var(--radius);padding:6px 7px;font:inherit;font-size:12px}
.kDrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;
  border:1px dashed rgba(255,93,122,.45);border-radius:6px;background:rgba(255,93,122,.05);
  font-size:12px;color:var(--leise);text-align:center;padding:8px;outline:none}
.kDrop:focus{border-color:#ff5d7a}
.kDrop.da{padding:0;border-style:solid;overflow:hidden}
.kDrop img{display:block;width:100%;height:auto}
.kKarte{position:relative;width:100%;border-radius:4px;overflow:hidden;cursor:crosshair;background:#0c0d11;user-select:none}
.kKarte img{display:block;width:100%;height:auto;pointer-events:none}
.kVor{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#7f8aa3;
  border:1px solid rgba(0,0,0,.7);z-index:1}
.kVor.bild{background:#e8b64c}
.kVor.eigen{background:#ff5d7a}
.kVor:hover{transform:scale(1.6);z-index:3}
.kVor:hover::after{content:attr(data-n);position:absolute;left:50%;bottom:9px;transform:translateX(-50%) scale(.625);
  transform-origin:bottom center;white-space:nowrap;background:rgba(10,11,15,.92);color:#fff;font-size:14px;
  padding:2px 7px;border-radius:4px;pointer-events:none}
.kVor.nah{box-shadow:0 0 0 3px rgba(255,93,122,.6)}
.kLegende{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;opacity:.75;margin-top:4px}
.kLegende i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;background:#7f8aa3}
.kLegende i.bild{background:#e8b64c}
.kLegende i.eigen{background:#ff5d7a}
.kSicht{margin-bottom:6px}
.kSicht .chips{margin-bottom:6px}
.kArten button{display:inline-flex;align-items:center;gap:5px}
.kArten button i{width:8px;height:8px;border-radius:50%;display:inline-block}
.kArten button span{opacity:.6;font-variant-numeric:tabular-nums}
.kSichtKarte{cursor:default}
.kSichtKarte.verschieben{cursor:crosshair;box-shadow:0 0 0 2px rgba(255,93,122,.7)}
.kPin{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--f,#7f8aa3);
  border:1.5px solid rgba(0,0,0,.65);cursor:pointer;transition:transform .12s}
.kPin.aus{background:#5a5a5a;opacity:.6}
.kPin.korr{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.kPin:hover{transform:scale(1.6);z-index:3}
.kPin:hover::after{content:attr(data-n);position:absolute;left:50%;bottom:10px;transform:translateX(-50%) scale(.625);
  transform-origin:bottom center;white-space:nowrap;background:rgba(0,0,0,.85);color:#fff;font-size:16px;padding:2px 7px;border-radius:4px;pointer-events:none}
.kPin.an{transform:scale(1.7);z-index:4;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 10px rgba(255,255,255,.6)}
.kPin.neu{background:#ff5d7a;transform:scale(1.5);z-index:5;box-shadow:0 0 0 3px rgba(255,93,122,.45);pointer-events:none}
.kSichtDetail{background:var(--karte);border:1px solid var(--rand-stark);border-radius:6px;margin-top:8px}
.kSichtKopf{display:flex;align-items:center;gap:7px;font-size:14px}
.kSichtKopf i{width:10px;height:10px;border-radius:50%;flex:none}
.kSichtKopf span{margin-left:auto;font-size:11px;color:var(--leise)}
.kWarnung{margin-top:6px;padding:6px 8px;border-radius:4px;font-size:12px;background:rgba(255,93,122,.14);
  border:1px solid rgba(255,93,122,.45)}
.kZiel{position:absolute;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  border:2px solid #fff;background:rgba(255,93,122,.35);box-shadow:0 0 0 2px #ff5d7a,0 0 12px rgba(255,93,122,.8)}
.kZiel::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff}
.kRadius{display:flex;align-items:center;gap:8px}
.kRadius input{flex:1}
.kRadius span{width:42px;text-align:right;font-size:12px;color:var(--leise);font-variant-numeric:tabular-nums}
.kKnoepfe{display:flex;gap:6px;margin-top:10px}
.kKnoepfe button{flex:1}
.kHinweis{font-size:11px;color:var(--leise);margin-top:4px}
/* ---------- Statistik ---------- */
/* Statistik: Unterreiter als Segment-Schalter, Aktualisieren als kleines Symbol */
.sNav{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.segment{flex:1;display:flex;background:var(--karte);border:1px solid var(--rand);border-radius:6px;padding:2px;gap:2px}
.segment button{flex:1;background:none;border:0;border-radius:4px;padding:5px 4px;font-size:12px;color:var(--leise);white-space:nowrap}
.segment button:hover:not(:disabled){background:rgba(255,255,255,.05);border:0}
.segment button.an{background:var(--chip);color:var(--text);font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.segment button[data-s="verwaltung"]{flex:0 0 32px}
button.iconknopf{width:32px;height:30px;padding:0;font-size:15px;border-radius:6px;flex:none}
.sZweier{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sZweier > .karte{margin-bottom:0}
@media (max-width:360px){ .sZweier{grid-template-columns:1fr} }
.sKacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.sKachel{background:var(--panel);border:1px solid var(--rand);border-radius:var(--radius);padding:8px 7px;min-width:0}
.sKachel .w{white-space:nowrap;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.sKachel .t{font-size:9px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;color:var(--leise);font-weight:700;margin-top:3px}
.sKachel.gold .w{color:var(--gold)}
.sGoldTage{display:flex;align-items:flex-end;gap:2px;height:60px;border-bottom:1px solid var(--rand-stark);margin:4px 0 4px}
.sGoldTage .s{flex:1;background:var(--gold);border-radius:3px 3px 0 0;min-height:1px;opacity:.85;cursor:default}
.sGoldTage .s.leer{background:rgba(255,255,255,.08)}
.sGoldTage .s:hover{opacity:1}
.sRekord{display:flex;align-items:center;gap:10px}
.sRekord .zeit{font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.sRekord .wer{font-weight:700;font-size:13px}
.sRekord .was{font-size:11px;color:var(--leise)}
/* Saeulen: Loesequote je Quiz, aelteste links. Duenne Saeulen, oben gerundet,
   2px Luecke, Wert steht im Tooltip. */
.sSaeulen{display:flex;align-items:flex-end;gap:2px;height:64px;border-bottom:1px solid var(--rand-stark);margin:4px 0 4px}
.sSaeulen .s{flex:1;max-width:18px;background:var(--gold);border-radius:4px 4px 0 0;min-height:2px;opacity:.85;cursor:default}
.sSaeulen .s:hover{opacity:1;outline:1px solid var(--gold-hell,#f7d492)}
.sSaeulen .s.gestoppt{background:repeating-linear-gradient(135deg,var(--gold) 0 3px,rgba(233,180,81,.45) 3px 6px)}
.sAchse{display:flex;justify-content:space-between;font-size:10px;color:var(--leise)}
/* Balken: Loesequote je Bereich */
.sBalken{padding:5px 0;border-top:1px solid var(--rand)}
.sBalken:first-of-type{border-top:0}
.sBalken .kopf2{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.sBalken .kopf2 span:last-child{color:var(--leise);font-variant-numeric:tabular-nums}
.sBalken .spur{height:6px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.sBalken .fuell{height:100%;background:var(--gold);border-radius:0 4px 4px 0}
/* Zuschauer-Profile */
.zEintrag .vZeile{gap:9px}
.zRang{flex:none;width:20px;text-align:right;font-size:11px;font-weight:800;color:var(--leise);font-variant-numeric:tabular-nums}
.zEintrag.r1 .zRang{color:#f5c542}.zEintrag.r2 .zRang{color:#c9d1dc}.zEintrag.r3 .zRang{color:#d08a4a}
.zAva{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font-size:11px;font-weight:800;
  color:var(--gold);background:radial-gradient(circle at 35% 30%,rgba(233,180,81,.3),rgba(233,180,81,.08) 70%)}
.zGruppe{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.zGTitel{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);font-weight:700}
.zRaster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px}
.zKachel{background:var(--karte);border:1px solid var(--rand);border-radius:6px;padding:6px 8px;min-width:0}
.zKachel b{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.zKachel span{display:block;font-size:10px;color:var(--leise);margin-top:1px}
.zKachel.gold b{color:var(--gold)} .zKachel.gut b{color:var(--gut)} .zKachel.warn b{color:var(--gelb)}
.zArt{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:8px;font-size:11px}
.zArt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zArt em{font-style:normal;color:var(--leise);font-variant-numeric:tabular-nums;text-align:right}
.zSpur{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.zSpur i{display:block;height:100%;background:var(--gold);border-radius:3px}
.sZeile{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--rand);font-size:12px}
.sZeile:first-of-type{border-top:0}
.sZeile .a{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sZeile .b{color:var(--leise);font-variant-numeric:tabular-nums;white-space:nowrap}
.sZeile .platz{width:18px;color:var(--gold);font-weight:800;text-align:right}
.sZeile img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#1e1e1e}
.sZeile .klein{display:block;font-size:10px;color:var(--leise)}
/* Update-Hinweis unter dem Kopf */
.updateHinweis{display:flex;flex-direction:column;gap:2px;margin:8px 10px 0;padding:9px 12px;border-radius:12px;text-decoration:none;
  background:linear-gradient(90deg,rgba(227,173,79,.18),rgba(227,173,79,.06));border:1px solid rgba(227,173,79,.45);color:#f1eadf;font-size:12px}
.updateHinweis b{color:#f8d690;font-size:12.5px}
.updateHinweis:hover{border-color:#f8d690}