/* ==================================================================
   Dock auf BB UI (bb_ui.css): die alten Dock-Farben zeigen auf die
   gemeinsamen Tokens, Karten werden Glas. Neues im Dock bitte mit den
   BB-UI-Tokens bauen statt mit festen Farben.
   ================================================================== */
:root{
  --bg:transparent; --panel:var(--bb-glas); --karte:rgba(255,244,228,.035); --chip:var(--bb-glas-hell);
  --rand:var(--bb-rand); --rand-stark:var(--bb-rand-stark);
  --text:var(--bb-text); --leise:var(--bb-leise);
  --gold:var(--bb-akzent); --gut:var(--bb-gut); --warn:var(--bb-warn); --gelb:var(--bb-gelb);
  --radius:var(--bb-radius-klein);
}
body{font-size:13.5px;padding:12px 12px 16px}
.karte{background:linear-gradient(180deg,var(--bb-glas-hell),transparent 60%),var(--bb-glas);
  border:1px solid var(--bb-rand);border-radius:var(--bb-radius);padding:12px 13px;margin-bottom:10px;
  -webkit-backdrop-filter:var(--bb-blur);backdrop-filter:var(--bb-blur);box-shadow:var(--bb-schatten)}
.etikett{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--bb-leise)}
.kleintext{color:var(--bb-matt)}

/* Status oben */
.status .phase{font-size:15px}
.status .uhr{font-size:20px;letter-spacing:.02em}

/* Reiter: Segmentleiste */
.reiter{margin-bottom:10px}
.reiter button{padding:7px 6px;font-size:12.5px}

/* ElevenLabs als schmale Leiste */
.elZeile{margin:0 0 10px;padding:7px 11px;border-radius:var(--bb-radius);background:rgba(0,0,0,.22);border:1px solid var(--bb-rand);font-size:11.5px}
.elZeile .spur{height:5px;background:rgba(255,255,255,.07)}
.elZeile .fuell{background:linear-gradient(90deg,#3fb98d,var(--bb-gut))}

/* Fragen-Kacheln */
.poolGitter{gap:8px}
.poolKachel{background:linear-gradient(160deg,color-mix(in srgb,var(--farbe,#888) 10%,transparent),transparent 55%),rgba(255,244,228,.03);
  border:1px solid var(--bb-rand);border-radius:10px;padding:9px 11px 10px}
.poolKachel::before{width:2px;top:10px;bottom:10px;border-radius:2px;opacity:.9}
.poolKachel:hover{border-color:color-mix(in srgb,var(--farbe,#888) 45%,transparent)}
.poolKachel .pSpur{height:3px;background:rgba(255,255,255,.07)}
.poolKachel .pReset{border-radius:7px;background:rgba(0,0,0,.25)}

/* Start */
.zaehler{background:rgba(0,0,0,.28);border-color:var(--bb-rand-stark);border-radius:var(--bb-radius-klein)}
.zaehler input,.zaehler input:focus{background:none;border:0;box-shadow:none}
button.pille,.chips button{border-radius:999px}
.chips{gap:5px}
.chips button{padding:3px 10px;font-size:11.5px;background:rgba(255,244,228,.035)}
.startKnopf{border-radius:var(--bb-radius-klein);padding:9px 20px}
button.neben{border-radius:var(--bb-radius-klein)}
.steuerGitter button{border-radius:10px;background:rgba(255,244,228,.04)}

/* Felder mit eigenem Hintergrund im alten Dock */
input[type=search],#vThema{background-color:rgba(0,0,0,.28)}
.mForm textarea,.mForm input,.mForm select,.kForm input[type=text],.kForm select{background-color:rgba(0,0,0,.28)}
.loesung,.mEintrag{background:rgba(255,244,228,.035);border:1px solid var(--bb-rand);border-radius:10px}

/* Meldungen unten */
.meldung{background:rgba(32,29,25,.88);-webkit-backdrop-filter:var(--bb-blur);backdrop-filter:var(--bb-blur);
  border-radius:var(--bb-radius-klein);box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}
.zaehlmarke{background:var(--bb-akzent);color:var(--bb-akzent-text)}
/* Einstellungen kompakt: zugeklappte Gruppen sind schlanke Zeilen ohne
   Kartenrahmen, erst die offene Gruppe wird zur Glasflaeche */
#seiteEinstellungen .eGruppe{padding:0;background:rgba(255,244,228,.022);border:1px solid transparent;border-radius:9px;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:2px;transition:background .15s,border-color .15s}
#seiteEinstellungen .eGruppe:hover{background:rgba(255,244,228,.045)}
#seiteEinstellungen .eGruppe:not(.zu){background:linear-gradient(180deg,var(--bb-glas-hell),transparent 60%),var(--bb-glas);
  border-color:var(--bb-rand);box-shadow:var(--bb-schatten);margin:6px 0 8px}
#seiteEinstellungen .eKopf{padding:7px 12px;gap:10px;min-height:34px}
#seiteEinstellungen .eKopf:hover:not(:disabled){background:transparent}
#seiteEinstellungen .eKopf .etikett{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--bb-text)}
#seiteEinstellungen .eKopf .kurz{font-size:11px;color:var(--bb-matt)}
#seiteEinstellungen .eGruppe:not(.zu) .eKopf .kurz{opacity:0}
#seiteEinstellungen .eKopf .pfeil{color:var(--bb-matt);font-size:10px;width:10px}
#seiteEinstellungen .eGruppe:not(.zu) .eKopf .pfeil{color:var(--bb-akzent)}
#seiteEinstellungen .eKoerper{padding:0 12px 8px}
#seiteEinstellungen .eAbschnitt{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--bb-matt);margin:18px 4px 6px}
#seiteEinstellungen .eZeile{padding:7px 0;gap:10px}
#seiteEinstellungen .eZeile label{font-size:12.5px}
#seiteEinstellungen .eZeile label i{font-size:11px;color:var(--bb-matt);margin-top:2px}
#seiteEinstellungen .eZeile input[type=text]{background:rgba(0,0,0,.28);border-radius:7px;height:28px}
.eLeiste{gap:4px}
.eLeiste button{background:transparent;border-color:transparent;color:var(--bb-leise);font-size:11.5px;padding:3px 8px}
.eLeiste button:hover:not(:disabled){background:rgba(255,244,228,.05);border-color:transparent;color:var(--bb-text)}
#seiteEinstellungen .karte:not(.eGruppe){padding:11px 12px}
/* Sprecher-Auswahl */
.stimme.fehlt span{color:var(--bb-warn)}
.stimme small{margin-left:8px;font-size:11px;color:var(--bb-warn)}
.stimmeNeu select{flex:1;min-width:0;padding:6px 8px;font-size:12.5px}
.stimmeInfo{font-size:11px;color:var(--bb-matt);margin-top:6px}
.stimmeInfo a{color:var(--bb-akzent-hell)}
/* Ohne Verbindung: alles unter Kopf und Status ausgegraut */
body > *{transition:opacity .25s,filter .25s}
body.getrennt > *:not(.bb-kopf):not(#statusKarte):not(#meldungen):not(#einrichtung):not(script){opacity:.38;filter:grayscale(.85);pointer-events:none;user-select:none}
body.getrennt #statusKarte{border-color:rgba(255,127,116,.35)}
/* Wartung in den Einstellungen */
.wZeile{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--bb-rand)}
.wZeile:first-child{border-top:0}
.wZeile > div{flex:1;min-width:0}
.wZeile b{display:block;font-size:13px;font-weight:600}
.wZeile span{display:block;font-size:11.5px;color:var(--bb-leise);margin-top:2px}
.wZeile button{flex:none;padding:6px 12px;font-size:12px}
/* Speichern/Verwerfen-Leiste der Einstellungen: braucht eine eigene Flaeche, der Seitengrund ist jetzt durchsichtig */
.eFuss{background:rgba(18,16,14,.82);-webkit-backdrop-filter:var(--bb-blur);backdrop-filter:var(--bb-blur);
  margin:0 -12px;padding:10px 12px;border-top:1px solid var(--bb-rand)}
/* ---------- Einrichtungs-Assistent (erster Start) ----------
   Liegt ueber dem ganzen Dock, bleibt auch ohne Verbindung bedienbar (dockSperren
   laesst #einrichtung aus). Gemerkt wird nur im Dock selbst (localStorage). */
.ein{position:fixed;inset:0;z-index:500;overflow:auto;padding:12px;background:rgba(10,9,8,.94);-webkit-backdrop-filter:var(--bb-blur);backdrop-filter:var(--bb-blur)}
.ein .einKopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ein .einKopf b{font-size:15px}
.ein .einKopf .textknopf{margin-left:auto}
.ein .schritte{display:flex;gap:4px;margin-bottom:12px}
.ein .schritte i{flex:1;height:4px;border-radius:4px;background:var(--bb-rand-stark)}
.ein .schritte i.da{background:var(--bb-akzent)}
.ein .einKarte{background:var(--bb-glas);border:1px solid var(--bb-rand);border-radius:var(--bb-radius);padding:14px}
.ein h3{font-size:16px;margin:0 0 6px}
.ein p{color:var(--bb-leise);font-size:13px;margin:0 0 10px}
.ein ol{margin:0 0 10px 18px;color:var(--bb-leise);font-size:13px;display:grid;gap:4px}
.ein ol b,.ein p b{color:var(--bb-text)}
.ein code{font:12px Consolas,monospace;color:var(--bb-akzent-hell)}
.ein .pruef{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--bb-radius-klein);background:var(--bb-glas-hell);font-size:13px;margin-bottom:8px}
.ein .pruef::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--bb-gelb)}
.ein .pruef.ok::before{background:var(--bb-gut)}
.ein .pruef.nein::before{background:var(--bb-warn)}
.ein .kopierZeile{display:flex;gap:6px;margin-bottom:10px}
.ein .kopierZeile input{flex:1;min-width:0;background:#1a1a1a;border:1px solid var(--bb-rand-stark);border-radius:7px;color:var(--bb-akzent-hell);font:12px Consolas,monospace;padding:7px 8px}
.ein .presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-bottom:8px}
.ein .presets button.an{background:rgba(231,176,82,.18);border-color:var(--bb-akzent);color:var(--bb-akzent)}
.ein .einFuss{display:flex;gap:6px;margin-top:12px}
.ein .einFuss .haupt{margin-left:auto}
#statusKarte .einHilfe{width:100%;margin-top:8px}
.ein a,.ein a:visited{color:var(--bb-akzent-hell,#f4d08a);text-decoration:underline;text-decoration-color:rgba(244,208,138,.55);text-underline-offset:3px;overflow-wrap:anywhere}
.ein a:hover{color:#fff0cc;text-decoration-color:currentColor}
.ein a:focus-visible{outline:2px solid var(--bb-akzent-hell,#f4d08a);outline-offset:4px;border-radius:2px}
.ein .einAktion{margin-bottom:8px}
.ein .einAktion button{white-space:nowrap}