/* ==========================================================================
   altiko Designsystem — Richtung "Puls"
   Eine Quelle für Farben, Schriften, Abstände und Bausteine.
   Neue Seiten binden nur diese Datei ein und sehen automatisch richtig aus.
   ========================================================================== */

:root {
  /* ---- Flächen ---------------------------------------------------------- */
  --bg:        #0C0D12;
  --leiste:    #101219;
  --karte:     #14161E;
  --karte-2:   #1B1E28;
  --karte-3:   #232733;
  --rand:      rgba(255, 255, 255, .08);
  --rand-2:    rgba(255, 255, 255, .15);

  /* ---- Schrift ---------------------------------------------------------- */
  --text:      #F2F3F7;
  --text-2:    #D6D9E3;
  --leise:     #939AAE;
  --leiser:    #666D82;

  /* ---- Akzente ---------------------------------------------------------- */
  --pink:      #FF3D8B;
  --lila:      #7B5CFF;
  --cyan:      #22D3EE;
  --lime:      #A3E635;
  --orange:    #FF8A3D;
  --rot:       #FF5A5A;

  --lila-hell: #B4A2FF;
  --pink-hell: #FF74AC;

  /* ---- Verläufe --------------------------------------------------------- */
  --v-haupt:   linear-gradient(135deg, var(--pink), var(--lila));
  --v-frisch:  linear-gradient(135deg, var(--cyan), var(--lime));

  /* ---- Typografie ------------------------------------------------------- */
  --display: "Sora", system-ui, sans-serif;
  --sans:    "Inter", system-ui, sans-serif;

  /* ---- Form ------------------------------------------------------------- */
  --r-s: 8px; --r-m: 11px; --r-l: 14px; --r-xl: 20px; --r-rund: 999px;
  --leiste-breit: 244px;

  --schatten-haupt: 0 8px 22px rgba(255, 61, 139, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px; line-height: 1.6; letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ==========================================================================
   Grundgerüst: Seitenleiste links, Inhalt rechts
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--leiste-breit) 1fr; min-height: 100vh; }

/* ------------------------------------------------------------ Seitenleiste */
.seitenleiste {
  position: sticky; top: 0; height: 100vh;
  background: var(--leiste);
  border-right: 1px solid var(--rand);
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
  z-index: 20;
}

.marke { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }
.marke-zeichen {
  /* Der Kopf des Maskottchens auf der Verlaufskachel - dasselbe Bild wie
     im Reiter des Browsers, damit beides als eine Marke gelesen wird. */
  width: 32px; height: 32px; border-radius: 11px; display: block;
  box-shadow: var(--schatten-haupt);
}
.marke-text { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.04em; }

.nav-gruppe { margin-bottom: 18px; }
.nav-titel {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--leiser); padding: 0 10px 7px;
}
.nav { display: grid; gap: 2px; }

.nav-punkt {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-m);
  color: var(--leise); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  border: 0; background: transparent; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav-punkt svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.7; }
.nav-punkt:hover { background: rgba(255, 255, 255, .045); color: var(--text-2); }
.nav-punkt.aktiv { background: rgba(255, 255, 255, .07); color: var(--text); }
.nav-punkt.aktiv::before {
  content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--v-haupt);
}

/* Das Menue ist mit den Plattform-Abschnitten laenger geworden als der
   Bildschirm hoch ist. Ohne diesen Kasten waren die untersten Punkte
   schlicht nicht erreichbar. */
.leisten-mitte {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -14px; padding: 0 14px;
  scrollbar-width: thin; scrollbar-color: var(--rand-2) transparent;
}
.leisten-mitte::-webkit-scrollbar { width: 7px; }
.leisten-mitte::-webkit-scrollbar-thumb { background: var(--rand-2); border-radius: 4px; }
.leisten-mitte::-webkit-scrollbar-track { background: transparent; }

.leisten-fuss { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--rand); }
.status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--leise); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); flex-shrink: 0; }
.punkt.weg { background: var(--rot); box-shadow: 0 0 10px var(--rot); }
.punkt.warte { background: var(--orange); box-shadow: 0 0 10px var(--orange); }

/* Abdunkler fuer das ausgeklappte Menue.
   Muss IMMER aus dem Raster genommen sein - sonst belegt er eine Zelle
   und schiebt den Inhalt unter die Seitenleiste. */
.schirm {
  position: fixed; inset: 0; z-index: 15;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .24s;
}
.schirm.an { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------------------------- Inhalt */
.inhalt { position: relative; min-width: 0; }

/* Farbnebel — die Signatur der Richtung "Puls", nur im Inhaltsbereich */
.inhalt::before {
  content: ""; position: fixed; inset: -20% -20% -20% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 30% at 26% 10%, rgba(255, 61, 139, .17), transparent 82%),
    radial-gradient(36% 30% at 84%  4%, rgba(123, 92, 255, .19), transparent 80%),
    radial-gradient(32% 26% at 64% 72%, rgba(34, 211, 238, .12), transparent 82%);
}

/* Kein filter: blur() und keine Dauerbewegung - und diesmal mit dem
   Grund, der beim ersten Anlauf gefehlt hat.

   Die Ueberlegung davor war: Weichzeichnen ist teuer, aber es faellt nur
   einmal an, danach liegt das Ergebnis als Ebene im Grafikspeicher.
   Das stimmt - wenn es einen Grafikspeicher gibt. Auf einem Rechner ohne
   funktionierenden Grafiktreiber faellt Chrome auf den Software-Renderer
   zurueck, und der rechnet die Weichzeichnung immer wieder neu: knapp
   zwei Millionen Bildpunkte, breiter Kernel, zweimal nebeneinander,
   sechzigmal in der Sekunde. Genau dann tut altiko etwas, was andere
   Seiten nicht tun - und daneben ruckelt jedes Video.

   Ein radialer Farbverlauf IST bereits ein weicher Verlauf. Das blur()
   obendrauf hat nur die Kante der Ellipse geglaettet; dieselbe Weichheit
   steht jetzt in den Farbstopps selbst und kostet nichts.

   Die Bewegung ist ebenfalls raus. Ein Werkzeug, das waehrend des
   Streamens offen steht, hat keinen Grund, dauerhaft die volle
   Bildflaeche neu zu zeichnen - auch nicht mit Grafikkarte. */

.kopfbalken {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 26px 34px 20px;
  border-bottom: 1px solid var(--rand);
}
.kopf-text { min-width: 0; }
.kopf-titel { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.04em; margin: 0; }
.kopf-unter { font-size: 13.5px; color: var(--leiser); margin: 2px 0 0; }
.kopf-aktion { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.bereich { position: relative; z-index: 1; padding: 26px 34px 70px; max-width: 1000px; }
.bereich[hidden] { display: none; }

/* ------------------------------------------------------------------ Knöpfe */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--text); background: rgba(255, 255, 255, .055);
  border: 1px solid var(--rand); border-radius: var(--r-m);
  padding: 9px 16px; cursor: pointer;
  transition: background .16s, border-color .16s, transform .14s;
}
.btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--rand-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-haupt {
  background: var(--v-haupt); border-color: transparent;
  font-weight: 600; color: #fff; box-shadow: var(--schatten-haupt);
}
.btn-haupt:hover { background: linear-gradient(135deg, #FF5599, #8B6EFF); box-shadow: 0 12px 30px rgba(255, 61, 139, .38); }
.btn-klein { padding: 6px 12px; font-size: 13px; }

/* --------------------------------------------------------------- Kennwerte */
.kennwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 13px; margin-bottom: 28px; }
.kennwert {
  position: relative; overflow: hidden;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-xl); padding: 18px 20px;
}
.kennwert::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.k1::after { background: linear-gradient(90deg, var(--pink), var(--lila)); }
.k2::after { background: linear-gradient(90deg, var(--lila), var(--cyan)); }
.k3::after { background: linear-gradient(90deg, var(--cyan), var(--lime)); }
.k4::after { background: linear-gradient(90deg, var(--orange), var(--pink)); }
.kennwert-zahl { font-family: var(--display); font-size: 31px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.kennwert-marke { font-size: 13.5px; color: var(--leise); margin-top: 5px; }

/* ------------------------------------------------------------------ Karten */
.karte-block { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-xl); }

.unterkopf { display: flex; align-items: center; gap: 11px; margin: 30px 0 14px; }
.unterkopf:first-child { margin-top: 0; }
.unterkopf h3 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.chip {
  font-size: 12.5px; color: var(--leise);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--rand);
  padding: 3px 11px; border-radius: var(--r-rund);
}
.schub { flex: 1; }

/* ----------------------------------------------------------------- Overlay */
.quelle { padding: 19px 21px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.quelle-info { flex: 1; min-width: 220px; }
.quelle-titel { font-family: var(--display); font-size: 15px; font-weight: 600; margin: 0 0 3px; letter-spacing: -.025em; }
.quelle-hilfe { font-size: 13px; color: var(--leiser); margin: 0; }
.quelle-feld {
  flex: 1 1 100%; margin-top: 4px;
  background: #0A0B0F; border: 1px solid var(--rand); border-radius: var(--r-m);
  padding: 11px 14px; font-size: 13px; color: var(--leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------------ Regeln */
.regeln { display: grid; gap: 12px; }
.regel {
  position: relative;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-xl); padding: 18px 21px 18px 23px;
  transition: border-color .18s, transform .18s, background .18s;
}
.regel::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; }
.regel:nth-child(4n+1)::before { background: linear-gradient(180deg, var(--pink), var(--lila)); }
.regel:nth-child(4n+2)::before { background: linear-gradient(180deg, var(--cyan), var(--lime)); }
.regel:nth-child(4n+3)::before { background: linear-gradient(180deg, var(--orange), var(--pink)); }
.regel:nth-child(4n)::before   { background: linear-gradient(180deg, var(--lila), var(--cyan)); }
.regel.pausiert::before { background: rgba(255, 255, 255, .14); }
.regel.pausiert { opacity: .68; }
.regel:hover { border-color: var(--rand-2); background: var(--karte-2); transform: translateY(-2px); }

.regel-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.regel-name { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.03em; margin: 0; flex: 1; }
/* Warum eine Regel zuletzt nicht lief. Gedaempft und nicht rot: Das ist
   eine Auskunft, keine Stoerung - eine Abklingzeit, die greift, ist ja
   genau das, was eingestellt wurde. */
.regel-warum {
  margin: 10px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--orange, #FFB020);
  background: rgba(255, 176, 32, .07);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 13px; color: var(--leise);
}
.regel-warum b { color: #FFCE7A; font-weight: 600; }

.aus-chip { font-size: 12px; color: var(--leiser); background: rgba(255, 255, 255, .05); padding: 3px 10px; border-radius: var(--r-rund); }

.schalter {
  width: 40px; height: 23px; border-radius: var(--r-rund); flex-shrink: 0; border: 0;
  background: var(--v-frisch); position: relative; cursor: pointer; transition: background .18s;
}
.schalter::after {
  content: ""; position: absolute; top: 3px; left: 20px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--bg);
  transition: left .2s cubic-bezier(.3, .85, .4, 1);
}
.schalter.aus { background: rgba(255, 255, 255, .14); }
.schalter.aus::after { left: 3px; background: var(--leiser); }

/* ---------------------------------------------------------- Funktionen */
/* Eine Funktion ist eine Zeile mit Schalter. Erst wenn sie an ist,
   klappen ihre Einstellungen auf - eine Seite voller Formularfelder
   fuer Dinge, die gar nicht laufen, ist genau das, was hier weg soll. */
/* Plattformen sind eigene Ueberschriften in der Seitenleiste. Das Logo
   davor in seiner eigenen Farbe - so findet man den Abschnitt im
   Augenwinkel, ohne zu lesen. */
.nav-titel { display: flex; align-items: center; gap: 7px; }
.nav-titel-pf { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }
.nav-titel-pf.pf-twitch  { color: #a970ff; }
.nav-titel-pf.pf-kick    { color: #53fc18; }
.nav-titel-pf.pf-youtube { color: #ff0033; }
.nav-titel-pf.pf-discord { color: #5865f2; }

.nav-nichts { display: block; padding: 5px 10px 3px; font-size: 12.5px; color: var(--leiser); }

/* Schalter mit Wort daneben: "an" und "aus" liest man schneller als eine
   Stellung. */
.fn-anaus { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.fn-anaus span { font-size: 12.5px; color: var(--leise); }

.pf-fuss { font-size: 13px; color: var(--leiser); margin: 20px 0 0; }
.verweis {
  background: none; border: 0; padding: 0; font: inherit; color: var(--lila-hell);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.fn-gruppe { margin: 0 0 34px; }
.fn-gruppe-kopf { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; }
.fn-gruppe-kopf h2 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: -.03em; margin: 0;
}
.fn-gruppe-logo { width: 17px; height: 17px; fill: currentColor; }
.fn-gruppe-logo.pf-twitch  { color: #a970ff; }
.fn-gruppe-logo.pf-kick    { color: #53fc18; }
.fn-gruppe-logo.pf-youtube { color: #ff0033; }
.fn-gruppe-logo.pf-discord { color: #5865f2; }
.fn-gruppe-vor { font-size: 13.5px; color: var(--leise); margin: 0 0 14px; }

.fn {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-l); padding: 16px 18px; margin-bottom: 10px;
  transition: border-color .2s, background .2s;
}
.fn.an { border-color: rgba(255, 255, 255, .14); }

.fn-kopf { display: flex; align-items: flex-start; gap: 14px; }
.fn-zeichen { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.fn-wort { flex: 1; min-width: 0; display: block; }
.fn-titel {
  display: block; font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 2px;
}
.fn-text { display: block; font-size: 13.5px; color: var(--leise); line-height: 1.55; }
.fn-kopf .schalter { margin-top: 3px; }
.fn-fehlt {
  font-size: 12px; color: var(--leiser); background: rgba(255, 255, 255, .05);
  padding: 4px 11px; border-radius: var(--r-rund); white-space: nowrap; flex-shrink: 0;
}

/* Ueberschrift je Element - macht sichtbar, dass Alerts und Umfrage
   getrennte Einstellungen haben und nicht dieselben. */
/* Ueberschrift je Element mit farbigem Strich davor - macht auf einen
   Blick sichtbar, dass hier zwei getrennte Sachen eingestellt werden und
   nicht eine lange Liste. */
.darst-titel {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -.03em; margin: 30px 0 11px;
}
.darst-titel::before {
  content: ""; width: 4px; height: 17px; border-radius: 99px;
  background: var(--strich, var(--v-haupt)); flex-shrink: 0;
}
.darst-titel:first-child { margin-top: 0; }
.darst-alert  { --strich: linear-gradient(180deg, #FF3D8B, #7B5CFF); }
.darst-umfrage { --strich: linear-gradient(180deg, #22D3EE, #A3E635); }
.darst-verlosung { --strich: linear-gradient(180deg, #F59E0B, #FF3D8B); }
.darst-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }

.farbwahl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--leise); }
.farbwahl input[type="color"] {
  width: 34px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 7px; background: none;
}

/* Neun Felder wie das Bild selbst: Man klickt dorthin, wo es stehen
   soll, statt in einer Liste "unten mittig" zu suchen. */
.ecken {
  display: grid; grid-template-columns: repeat(3, 26px); gap: 5px;
  padding: 6px; border-radius: var(--r-m);
  border: 1px solid var(--rand); background: #0A0B0F;
}
.ecke {
  width: 26px; height: 18px; padding: 0; border-radius: 5px;
  border: 1px solid var(--rand); background: rgba(255, 255, 255, .04);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ecke:hover { border-color: var(--rand-2); background: rgba(255, 255, 255, .09); }
.ecke.an { background: var(--v-haupt); border-color: transparent; }
/* Die Mitte des Rasters ist keine Ecke. Nicht "leer" nennen - diese
   Klasse setzt anderswo das Maskottchen als Hintergrund, und das sass
   dann mitten im Auswahlraster. */
.ecke.ecke-luecke { border: 0; background: none; cursor: default; }

/* ---------------------------------------------------------- Umfrage */
.umfrage-lauf { padding: 20px 22px; }
.umfrage-kopf { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.umfrage-kopf > div { flex: 1; min-width: 0; }
.umfrage-frage {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.03em; margin: 0;
}

/* Zwei Zeilen je Antwort: oben die Zahlen, darunter der Balken. */
.umfrage-zeile {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: 4px 10px; align-items: center; margin-bottom: 13px;
}
.umfrage-nummer {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: rgba(123, 92, 255, .2); color: var(--lila-hell);
  font-size: 12.5px; font-weight: 800;
}
.umfrage-text { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umfrage-zahl { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.umfrage-balken {
  grid-column: 1 / -1; height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.umfrage-balken span {
  display: block; height: 100%; background: var(--v-haupt);
  transition: width .45s cubic-bezier(.2, .9, .3, 1);
}
.umfrage-zeile.fuehrt .umfrage-nummer { background: rgba(163, 230, 53, .2); color: #C8F27A; }
.umfrage-zeile.fuehrt .umfrage-balken span { background: linear-gradient(90deg, #A3E635, #22D3EE); }

.umfrage-start { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

/* ------------------------------------------------------------- Verlosung */
/* Dieselbe Tafel wie bei der Umfrage - nur steht hier eine Zahl im
   Mittelpunkt statt einer Liste von Balken. */
.verlosung-lauf { padding: 20px 22px; }
.verlosung-kopf { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.verlosung-kopf > div { flex: 1; min-width: 0; }
.verlosung-titel {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.03em; margin: 0; overflow-wrap: anywhere;
}
.verlosung-zahl {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display); font-size: 40px; font-weight: 800;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.verlosung-zahl small { font-size: 14px; font-weight: 600; color: var(--leise); letter-spacing: 0; }

.verlosung-wort {
  display: inline-block; padding: 1px 8px; border-radius: 7px;
  background: rgba(245, 158, 11, .18); color: #FBBF24; font-weight: 700;
}

.verlosung-gewinner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-top: 10px;
  border: 1px solid rgba(245, 158, 11, .35); border-radius: var(--r-m);
  background: rgba(245, 158, 11, .08);
}
.verlosung-gewinner-name { font-weight: 700; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.verlosung-gewinner-wo { color: var(--leiser); font-size: 12.5px; margin-left: auto; white-space: nowrap; }

.verlosung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.verlosung-start { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }

/* ------------------------------------------------------------ Vorhersage */
/* Zwei Ausgaenge nebeneinander, damit man beim Aufloesen nicht sucht,
   welcher Knopf zu welchem Text gehoert. */
.vh-ausgaenge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 560px) { .vh-ausgaenge { grid-template-columns: 1fr; } }
.vh-ausgang {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--rand-2); border-radius: var(--r-m);
}
.vh-ausgang.gewinner { border-color: #A3E635; background: rgba(163, 230, 53, .08); }
.vh-ausgang-titel { font-weight: 600; overflow-wrap: anywhere; }
.vh-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------------------------------------------------------------- Zitate */
.zitatliste { display: grid; gap: 2px; }
.zitat {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-m);
}
.zitat:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.zitat-nr {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--leiser);
  flex-shrink: 0; min-width: 34px;
}
.zitat-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zitat-wer { color: var(--leiser); font-size: 12.5px; white-space: nowrap; }
.zitat .mini { flex-shrink: 0; align-self: center; }
.zitat-neu { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.zitat-neu input { flex: 1 1 260px; }

/* ---------------------------------------------------------- Klaenge */
.klang-kopf { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px 21px; }
.klang-platz { flex: 1; min-width: 240px; }
.klang-balken {
  height: 7px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.klang-balken span { display: block; height: 100%; background: var(--v-haupt); transition: width .3s; }
.klang-waehlen { cursor: pointer; }

.klang-liste { margin-top: 10px; }
/* Ueberschrift einer Schublade - leise, es ist eine Sortierung und keine
   Ansage. */
.klang-schublade {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--leiser);
  margin: 22px 0 0; padding-left: 2px;
}
.klang-kategorie { width: 150px; flex-shrink: 0; }
@media (max-width: 720px) { .klang-kategorie { width: 110px; } }
.klang {
  display: flex; align-items: center; gap: 11px;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-m); padding: 10px 13px; margin-bottom: 8px;
}
.klang-spielen { color: var(--lila-hell); flex-shrink: 0; }
.klang-spielen svg { width: 15px; height: 15px; }
.klang-name { flex: 1; min-width: 0; }
.klang-groesse { font-size: 12.5px; color: var(--leiser); white-space: nowrap; flex-shrink: 0; }

/* Kein Rechtsrat, sondern eine Warnung - der Ton soll das treffen. */
.klang-recht {
  margin: 22px 0 0; font-size: 12.5px; color: var(--leiser);
  line-height: 1.6; max-width: 66ch;
}

/* --------------------------------------------------------- Reiter */
/* Zwei Listen untereinander waeren eine lange Seite, auf der man rollt,
   um von den eigenen Befehlen zu den mitgelieferten zu kommen. */
.reiter {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 2px;
  border-bottom: 1px solid var(--rand);
}
.reiter-knopf {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 3px; margin-bottom: -3px;
  font: inherit; font-size: 13.5px; color: var(--leiser);
  cursor: pointer; display: flex; align-items: center; gap: 7px;
}
.reiter-knopf + .reiter-knopf { margin-left: 16px; }
.reiter-knopf:hover { color: var(--leise); }
.reiter-knopf.an { color: var(--text); border-bottom-color: var(--lila-hell); }
.reiter-zahl {
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px;
  background: var(--rand); color: var(--leiser);
}
.reiter-knopf.an .reiter-zahl { background: rgba(123, 92, 255, .22); color: var(--lila-hell); }

/* ------------------------------------------------------ Chatbefehle */
/* Zwei Zeilen je Befehl: oben, was passiert - unten, fuer wen und wie
   oft. Alles in eine Zeile zu quetschen ergaebe sechs schmale Felder
   nebeneinander, von denen man keines mehr lesen kann. */
.befehle { display: block; width: 100%; }
.befehl {
  border: 1px solid var(--rand); border-radius: var(--r-m);
  background: #0A0B0F; padding: 12px 14px; margin-bottom: 10px;
}
.befehl-oben { display: flex; align-items: center; gap: 8px; }
.befehl-ruf {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  color: var(--lila-hell); flex-shrink: 0;
}
.befehl-wort { min-width: 0; width: 150px; flex-shrink: 0; }
.befehl-antwort { flex: 1; min-width: 0; }
/* Eine mitgelieferte Vorlage, in der noch der Platzhalter steht. Sie
   loest absichtlich nicht aus - das muss man sehen, sonst sucht jemand
   den Fehler bei der Plattform, waehrend nur ein Link fehlt. Gedaempft
   und nicht rot: Es ist kein Fehler, es ist eine offene Aufgabe. */
.befehl.unfertig { border-color: rgba(255, 138, 61, .3); }
.befehl-unfertig {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--orange); max-width: 62ch;
}

/* Abgeschaltet, aber nicht weg. Blass statt versteckt: Er soll sich
   zurueckholen lassen, ohne dass man ihn suchen muss. */
.befehl.stumm .befehl-oben .eingabe,
.befehl.stumm .befehl-ruf { opacity: .45; }
.befehl-stumm {
  margin: 9px 0 0; font-size: 12.5px; color: var(--leiser);
}
.schalter.klein { transform: scale(.8); transform-origin: left center; flex-shrink: 0; }

/* Zusammengeklappt steht hier nur ein Satz, der sagt, was gilt. */
.befehl-mehr {
  background: none; border: 0; padding: 8px 0 0; margin: 0;
  font: inherit; font-size: 12.5px; color: var(--leiser);
  cursor: pointer; text-align: left;
}
.befehl-mehr:hover { color: var(--leise); }
.befehl-mehr .auf, .befehl.offen .befehl-mehr .zu { display: none; }
.befehl.offen .befehl-mehr .auf { display: inline; }

.befehl-unten {
  display: none; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--rand);
  font-size: 13px; color: var(--leise);
}
.befehl.offen .befehl-unten { display: flex; }
.befehl-unten label { display: flex; align-items: center; gap: 8px; }
.befehl-unten select { min-width: 0; padding: 6px 10px; font-size: 13.5px; }
.befehl-unten input[type="number"] { min-width: 0; width: 78px; padding: 6px 10px; font-size: 13.5px; }

/* Belohnungen: dieselbe Bauform wie die Befehle, andere Felder. */
.belohnung-titel { flex: 1; min-width: 0; }
.belohnung-kosten { width: 110px; flex-shrink: 0; }
.belohnung-einheit { font-size: 13px; color: var(--leiser); flex-shrink: 0; }
.belohnung-pause { width: 92px; }

.belohnung-chat { border-top: 0; padding-top: 0; margin-top: 8px; }
/* Noch nicht bei Twitch - in der Farbe der Warnung, nicht des Fehlers. */
.belohnung-neu { margin: 10px 0 0; font-size: 12.5px; color: #FFA870; }

.befehle-leer { font-size: 13.5px; color: var(--leiser); margin: 0 0 12px; }
.befehle-platzhalter { margin: 14px 0 0; font-size: 12.5px; color: var(--leiser); }
.befehle-platzhalter code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: #C4B6FF; background: rgba(123, 92, 255, .13);
  padding: 2px 7px; border-radius: 6px;
}

@media (max-width: 620px) {
  .befehl-oben { flex-wrap: wrap; }
  .befehl-wort { width: 120px; }
  .befehl-antwort { flex-basis: 100%; order: 3; }
}

/* Auf welchen Plattformen eine Funktion laufen soll. Logo statt Farbe:
   ein Logo erkennt man sofort, eine Farbe muss man erst lernen. */
.plattformwahl { gap: 8px; }
.pf-haken {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 9px; border-radius: var(--r-m);
  border: 1px solid var(--rand); background: #0A0B0F;
  font-size: 14px; cursor: pointer; user-select: none;
}
.pf-haken:hover { border-color: var(--rand-2); }
.pf-haken input { accent-color: var(--lila); margin: 0; cursor: pointer; }
.pf-haken-logo { width: 15px; height: 15px; fill: currentColor; }
.pf-haken-logo.pf-twitch  { color: #a970ff; }
.pf-haken-logo.pf-kick    { color: #53fc18; }
.pf-haken-logo.pf-youtube { color: #ff0033; }

.fn-doppelt {
  margin-top: 13px; padding: 11px 14px; border-radius: var(--r-m);
  background: rgba(255, 138, 61, .1); border: 1px solid rgba(255, 138, 61, .22);
  color: #FFC49B; font-size: 13px; line-height: 1.55;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.fn-doppelt span { flex: 1; min-width: 220px; }

.fn-leer { font-size: 13.5px; color: var(--leiser); line-height: 1.6; }

.fn-felder { margin: 14px 0 0; padding-top: 4px; border-top: 1px solid var(--rand); }
.fn-felder .feld:last-child { border-bottom: 0; padding-bottom: 0; }
/* Alert-Texte sind ganze Saetze - in einem 240 Pixel breiten Feld
   schiebt man beim Tippen den Anfang aus dem Bild. */
.fn-felder .feld-wert input[type="text"] { flex: 1; min-width: 240px; max-width: 560px; }
.fn-felder select { min-width: 240px; }

@media (max-width: 620px) {
  .fn-felder input[type="text"], .fn-felder select { min-width: 0; width: 100%; }
}

/* Die Regel liest sich als Satz, nicht als Formular.
   Das entscheidet, ob Leute ohne Programmierkenntnisse damit klarkommen. */
.satz { display: grid; gap: 8px; }
.satz-zeile { display: flex; gap: 11px; align-items: flex-start; }
.satz-marke {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--r-s); flex-shrink: 0;
  min-width: 74px; text-align: center;
}
.mk-wenn { background: rgba(255, 61, 139, .14); color: var(--pink-hell); }
.mk-nur  { background: rgba(255, 138, 61, .14); color: var(--orange); }
.mk-dann { background: rgba(34, 211, 238, .13); color: var(--cyan); }
.satz-text { font-size: 14.5px; color: var(--text-2); padding-top: 2px; }
.satz-text code {
  font-family: inherit; font-weight: 600; font-size: 13.5px;
  background: rgba(123, 92, 255, .16); color: var(--lila-hell);
  padding: 1.5px 7px; border-radius: 7px;
}

.regel-fuss {
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rand);
  font-size: 13px; color: var(--leiser);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* -------------------------------------------------------------- Ereignisse */
.feed { overflow: hidden; }
.eintrag { display: flex; align-items: center; gap: 13px; padding: 12px 21px; transition: background .14s; }
.eintrag:hover { background: rgba(255, 255, 255, .03); }
.eintrag + .eintrag { border-top: 1px solid var(--rand); }
.eintrag.neu { animation: altiko-rein .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes altiko-rein { from { opacity: 0; transform: translateY(-8px); } }

.avatar {
  width: 33px; height: 33px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
}
.av0 { background: linear-gradient(135deg, #FF3D8B, #7B5CFF); }
.av1 { background: linear-gradient(135deg, #22D3EE, #A3E635); }
.av2 { background: linear-gradient(135deg, #7B5CFF, #22D3EE); }
.av3 { background: linear-gradient(135deg, #FF8A3D, #FF3D8B); }

.eintrag-text { flex: 1; font-size: 14.5px; min-width: 0; }
.eintrag-text b { font-weight: 600; }
.eintrag-text span { color: var(--leise); }
.eintrag-zeit { font-size: 13px; color: var(--leiser); white-space: nowrap; }

/* Haken mit Beschriftung - in den Einstellungsfeldern rechts */
.haken {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-2); cursor: pointer;
}
.haken input { accent-color: var(--lila); width: 15px; height: 15px; }

/* -------------------------------------------------------------- Variablen */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--leiser);
  padding: 12px 21px; border-bottom: 1px solid var(--rand);
}
.tabelle td { padding: 11px 21px; border-bottom: 1px solid var(--rand); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr:hover td { background: rgba(255, 255, 255, .025); }
.tabelle .wert { font-family: var(--display); font-weight: 700; font-size: 15px; }
.bereich-chip {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-rund);
}
.b-global { background: rgba(123, 92, 255, .16); color: var(--lila-hell); }
.b-user   { background: rgba(34, 211, 238, .13); color: var(--cyan); }

/* ================================================== Einstellungen: Felder */
.feld-block { overflow: hidden; }
.feld {
  display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: center;
  padding: 17px 21px;
}
.feld + .feld { border-top: 1px solid var(--rand); }
.feld-marke { font-size: 14.5px; font-weight: 500; }
.feld-marke small { display: block; font-size: 12.5px; color: var(--leiser); font-weight: 400; margin-top: 1px; }
.feld-wert { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; font-size: 14.5px; color: var(--text-2); }
.feld-wert.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--leise); }

.eingabe, select {
  font-family: inherit; font-size: 14.5px; color: var(--text);
  background: #0A0B0F; border: 1px solid var(--rand); border-radius: var(--r-m);
  padding: 9px 13px; min-width: 180px;
  transition: border-color .15s;
}
.eingabe:hover, select:hover { border-color: var(--rand-2); }
.eingabe:focus, select:focus { border-color: var(--lila); outline: none; }
select { cursor: pointer; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 220px; max-width: 100%; height: 5px; border-radius: var(--r-rund);
  background: rgba(255, 255, 255, .12); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--v-haupt); box-shadow: 0 2px 8px rgba(255, 61, 139, .45);
}
input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border: 0; border-radius: 50%;
  background: var(--pink); box-shadow: 0 2px 8px rgba(255, 61, 139, .45);
}
output {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  min-width: 62px; color: var(--text);
}

/* ------------------------------------------------- Verbindungen (Dienste) */
.verbindungen { display: grid; gap: 12px; }
.dienst { display: flex; align-items: center; gap: 15px; padding: 16px 20px; }
.dienst-zeichen {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 17px;
}
.dienst-zeichen.tw { background: linear-gradient(135deg, #9146FF, #7B5CFF); }
.dienst-zeichen.ki { background: linear-gradient(135deg, #53FC18, #A3E635); color: #0A2005; }
.dienst-zeichen.yt { background: linear-gradient(135deg, #FF0033, #FF3D8B); }
.dienst-info { flex: 1; min-width: 0; }
.dienst-name { font-family: var(--display); font-size: 15.5px; font-weight: 600; margin: 0; letter-spacing: -.025em; }
.dienst-lage { font-size: 13px; color: var(--leiser); margin: 0; }

.fussnote { font-size: 13px; color: var(--leiser); margin: 16px 0 0; max-width: 62ch; }
.fussnote b { color: var(--leise); font-weight: 600; }

/* ==========================================================================
   Regel-Editor
   Aufgebaut wie ein Satz, nicht wie ein Formular: Wenn … Nur wenn … Dann …
   Das ist der Unterschied, ob jemand ohne Programmierkenntnisse damit
   zurechtkommt oder aufgibt.
   ========================================================================== */
.editor {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: start center;
  padding: 34px 20px;
  background: rgba(6, 7, 10, .72); backdrop-filter: blur(6px);
  overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.editor.an { opacity: 1; pointer-events: auto; }

.editor-karte {
  width: 100%; max-width: 780px;
  background: var(--karte); border: 1px solid var(--rand-2);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  transform: translateY(14px); transition: transform .24s cubic-bezier(.2, .9, .3, 1.2);
}
.editor.an .editor-karte { transform: translateY(0); }

.editor-kopf {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 22px; border-bottom: 1px solid var(--rand);
}
.editor-kopf h2 { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -.035em; margin: 0; flex: 1; }
.schliessen {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--rand);
  border-radius: var(--r-m); cursor: pointer; color: var(--leise);
  transition: background .15s, color .15s;
}
.schliessen:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.schliessen svg { width: 17px; height: 17px; stroke-width: 1.9; }

.editor-koerper { padding: 20px 22px; }
.editor-fuss {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--rand);
}
/* display:flex schlaegt sonst das hidden-Attribut der Vorlagenauswahl */
.editor-fuss[hidden] { display: none; }

/* ---- Vorlagenauswahl -------------------------------------------------- */
.vorlagen { display: grid; gap: 10px; }
.vorlage {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  background: var(--karte-2); border: 1px solid var(--rand);
  border-radius: var(--r-l); padding: 14px 16px; cursor: pointer;
  font-family: inherit; color: var(--text); width: 100%;
  transition: border-color .15s, background .15s, transform .15s;
}
.vorlage:hover { border-color: var(--rand-2); background: var(--karte-3); transform: translateY(-1px); }
.vorlage-zeichen {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .06);
}
.vorlage-titel { font-weight: 600; font-size: 15px; display: block; }
.vorlage-text { font-size: 13.5px; color: var(--leiser); display: block; margin-top: 1px; }

/* ---- Satzabschnitte --------------------------------------------------- */
.satz-block { margin-bottom: 20px; }
.satz-block-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.satz-block-kopf .satz-marke { margin: 0; }
.satz-block-hilfe { font-size: 12.5px; color: var(--leiser); }

.baustein {
  background: var(--karte-2); border: 1px solid var(--rand);
  border-radius: var(--r-l); padding: 13px 15px; margin-bottom: 8px;
}
.baustein-kopf { display: flex; align-items: center; gap: 9px; }
.baustein-kopf select { flex: 1; min-width: 0; }
.baustein-felder {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 11px;
}
.baustein-felder:empty { display: none; }
.baustein-felder label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--leise);
}
.baustein-felder input[type="text"],
.baustein-felder input[type="number"] {
  font-family: inherit; font-size: 14px; color: var(--text);
  background: #0A0B0F; border: 1px solid var(--rand); border-radius: var(--r-s);
  padding: 7px 11px; min-width: 90px;
}
.baustein-felder input[type="text"] { min-width: 190px; flex: 1; }
.baustein-felder input:focus { border-color: var(--lila); outline: none; }
.baustein-felder input[type="color"] {
  width: 38px; height: 32px; padding: 2px; cursor: pointer;
  background: #0A0B0F; border: 1px solid var(--rand); border-radius: var(--r-s);
}
.baustein-felder select { min-width: 130px; padding: 7px 11px; font-size: 14px; }

.mini {
  width: 30px; height: 30px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--rand);
  border-radius: var(--r-s); cursor: pointer; color: var(--leise);
  transition: background .14s, color .14s;
}
.mini:hover { background: rgba(255, 255, 255, .11); color: var(--text); }
.mini[disabled] { opacity: .3; cursor: not-allowed; }
.mini svg { width: 15px; height: 15px; stroke-width: 2; }
.mini.weg:hover { background: rgba(255, 90, 90, .16); color: var(--rot); }

.hinzu { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.hinzu select { min-width: 210px; }

/* ---- Platzhalterhilfe -------------------------------------------------- */
/* Eigene Zeile, damit das Textfeld die volle Breite behaelt */
.platzhalter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; flex-basis: 100%; }
.platzhalter button {
  font-family: inherit; font-size: 12px; font-weight: 500;
  background: rgba(123, 92, 255, .14); color: var(--lila-hell);
  border: 0; border-radius: 6px; padding: 3px 9px; cursor: pointer;
  transition: background .14s;
}
.platzhalter button:hover { background: rgba(123, 92, 255, .26); }

/* ---- Vorschau ---------------------------------------------------------- */
.vorschau {
  background: #0A0B0F; border: 1px solid var(--rand);
  border-radius: var(--r-l); padding: 15px 17px; margin-top: 4px;
}
.vorschau-marke {
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leiser); margin-bottom: 9px;
}

.editor-fehler { color: var(--rot); font-size: 13.5px; }
/* Kein Fehler, sondern eine Warnung vor dem Verwerfen - andere Farbe,
   damit man nicht denkt, das Speichern sei schiefgegangen. */
.editor-fehler.warnt { color: #FFA870; }

/* ---------------------------------------------------------------- Diverses */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }

.leer { padding: 40px 22px; text-align: center; color: var(--leiser); font-size: 14px; }
.leer b { display: block; color: var(--leise); font-weight: 600; margin-bottom: 5px; font-size: 15px; }
/* Leere Stellen sind die einzigen Momente, in denen im Dashboard nichts
   passiert - da darf AltikoBot stehen. Als Hintergrundbild und nicht als
   Bild im HTML, damit jede leere Stelle es bekommt, ohne dass irgendwo
   ein <img> nachgetragen werden muss. Der Schein ist noetig: die Figur
   ist fast schwarz und verschwaende sonst auf dem dunklen Grund. */
.leer::before {
  content: ""; display: block;
  width: 62px; height: 90px; margin: 0 auto 16px;
  background: url(/static/marke/bot.png) center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(123, 92, 255, .32));
}

.hinweis {
  position: fixed; left: 50%; bottom: 26px; z-index: 40;
  transform: translateX(-50%) translateY(90px);
  background: var(--karte-3); border: 1px solid var(--rand-2);
  color: var(--text); padding: 12px 20px; border-radius: var(--r-m);
  font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.2);
  max-width: calc(100vw - 40px);
}
.hinweis.an { transform: translateX(-50%) translateY(0); }
.hinweis.fehler { border-color: var(--rot); }

/* Menüknopf nur auf schmalen Bildschirmen */
.menue-knopf { display: none; }

/* ==========================================================================
   Schmale Bildschirme: Seitenleiste wird ausklappbar
   ========================================================================== */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .seitenleiste {
    position: fixed; inset: 0 auto 0 0; width: var(--leiste-breit);
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.3, .85, .4, 1);
    box-shadow: 0 0 48px rgba(0, 0, 0, .6);
  }
  .seitenleiste.offen { transform: translateX(0); }

  .menue-knopf {
    display: grid; place-items: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(255, 255, 255, .055); border: 1px solid var(--rand);
    border-radius: var(--r-m); cursor: pointer; color: var(--text);
  }
  .menue-knopf svg { width: 19px; height: 19px; stroke-width: 1.8; }

  .kopfbalken { padding: 18px 20px 16px; }
  .bereich { padding: 20px 20px 70px; }
}

@media (max-width: 620px) {
  .satz-zeile { flex-direction: column; gap: 5px; }
  .satz-marke { min-width: 0; align-self: flex-start; }
  .tabelle th:nth-child(3), .tabelle td:nth-child(3) { display: none; }
  .feld { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .inhalt::before { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- Angemeldetes Konto */
.konto { display: flex; align-items: center; gap: 9px; }
.konto-bild {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: var(--karte-3); object-fit: cover;
}
.konto-name {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-abmelden {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--leiser);
  border-radius: var(--r-s); transition: background .14s, color .14s;
}
.konto-abmelden:hover { background: rgba(255, 90, 90, .14); color: var(--rot); }
.konto-abmelden svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* Bot-Konto */
.dienst-zeichen.bot { background: linear-gradient(135deg, var(--cyan), var(--lila)); }
img.dienst-zeichen { object-fit: cover; }
.fussnote code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  background: rgba(123, 92, 255, .16); color: var(--lila-hell);
  padding: 1px 6px; border-radius: 5px;
}

/* Freischaltungshinweis */
.warnung {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 21px; margin-bottom: 16px;
  border-color: rgba(255, 138, 61, .35);
  background: linear-gradient(135deg, rgba(255, 138, 61, .09), rgba(255, 61, 139, .07));
}
.warnung-text { flex: 1; min-width: 260px; }
.warnung-titel {
  font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.025em; margin: 0 0 4px; color: var(--orange);
}
.warnung-unter { font-size: 13.5px; color: var(--leise); margin: 0; }

/* Rechteliste vor dem Verbinden */
.rechte { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rechte li {
  display: grid; gap: 1px;
  padding-left: 24px; position: relative;
  font-size: 14px;
}
.rechte li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v-frisch);
}
.rechte b { font-weight: 600; }
.rechte span { color: var(--leise); font-size: 13.5px; }

.btn-weg { border-color: rgba(255, 90, 90, .3); color: #FF9B9B; }
.btn-weg:hover { background: rgba(255, 90, 90, .14); border-color: rgba(255, 90, 90, .5); }
.dienst-zeichen.dc { background: linear-gradient(135deg, #5865F2, #7B5CFF); }

/* ------------------------------------------------------------- Reichweite */
/* Steht ganz oben in der Uebersicht - die Zahl, die einen Streamer beim
   Oeffnen als Erstes interessiert. */
.reichweite {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px; margin-bottom: 22px;
}
.reichweite:empty { display: none; }

.rw-karte {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--r-xl); padding: 17px 19px;
}
/* Markenfarbener Schimmer - macht auf einen Blick klar, welche Plattform */
.rw-karte::before {
  content: ""; position: absolute; inset: -70% 40% auto -20%; height: 190%;
  background: radial-gradient(50% 55% at 30% 0%, var(--rw-glanz), transparent 70%);
  pointer-events: none;
}
.rw-zeichen { width: 30px; height: 30px; flex-shrink: 0; position: relative; fill: var(--rw-farbe); }
.rw-text { position: relative; min-width: 0; }
.rw-zahl { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.rw-marke { font-size: 12.5px; color: var(--leise); margin-top: 4px; }

.rw-twitch  { --rw-farbe: #A970FF; --rw-glanz: rgba(145, 70, 255, .26); }
.rw-kick    { --rw-farbe: #53FC18; --rw-glanz: rgba(83, 252, 24, .18); }
.rw-discord { --rw-farbe: #7C88F5; --rw-glanz: rgba(88, 101, 242, .24); }

/* ----------------------------------------------- Seit dem letzten Besuch */
.seitdem { padding: 17px 21px; margin-bottom: 16px; }
.sd-kopf {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--leiser); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 11px;
}
.sd-punkt {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--pink); box-shadow: 0 0 10px var(--pink);
}
.sd-zeile { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sd-teil { font-size: 15px; color: var(--leise); }
.sd-teil b {
  font-family: var(--display); font-size: 21px; font-weight: 800;
  letter-spacing: -.04em; color: var(--text); margin-right: 5px;
}

/* Tagestrenner im Ereignis-Feed */
.feed-tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--leiser); padding: 11px 21px 7px;
  background: rgba(255, 255, 255, .015);
}
.feed-tag + .eintrag { border-top: 0; }

/* ============================================================ Uebersicht
   Zweispaltig: links was passiert ist, rechts was gerade gesagt wird.
   Der Chat laeuft weiter, waehrend man die Zahlen liest - deshalb steht
   er daneben und nicht darunter. */
/* Die 1000px der uebrigen Bereiche sind eine Lesebreite fuer Formulare
   und Regeln. Die Uebersicht hat zwei Spalten - mit derselben Grenze
   bliebe rechts Flaeche leer und links wuerden die Karten umbrechen. */
#b-uebersicht { max-width: 1520px; }

.us-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.us-haupt { min-width: 0; }

/* Unter 1180px ist die Spalte zu schmal fuer lesbare Nachrichten */
@media (max-width: 1180px) {
  .us-raster { grid-template-columns: minmax(0, 1fr); }
  .us-chat { max-height: 420px; }
}

/* ------------------------------------------------------------------ Chat */
.us-chat {
  position: sticky;
  top: 22px;
  display: flex;
  flex-direction: column;
  /* Fensterhoehe minus Kopfzeile und Luft - der Chat soll bis unten gehen */
  height: calc(100vh - 132px);
  min-height: 320px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  overflow: hidden;
}

.chat-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 13px 15px;
  border-bottom: 1px solid var(--rand);
}
.chat-kopf h3 { margin: 0; font-size: 14px; letter-spacing: -.01em; }
.chat-quellen { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.chat-hinweis { font-size: 11px; color: var(--leise); }

.chat-lauf {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 4px 10px;
  font-size: 13px;
  line-height: 1.45;
  /* Zahlen in der Zeit sollen nicht springen */
  font-variant-numeric: tabular-nums;
}
.chat-lauf::-webkit-scrollbar { width: 8px; }
.chat-lauf::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 4px; }

.chat-zeile {
  display: grid;
  grid-template-columns: 13px auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  padding: 3px 12px;
  word-break: break-word;
}
.chat-zeile:hover { background: var(--karte-2); }

/* Das Logo der Plattform. Eine Farbe muss man erst zuordnen lernen, ein
   Logo erkennt man sofort - und darum geht es, wenn Twitch und Kick in
   derselben Spalte laufen. */
.chat-pf {
  width: 13px; height: 13px;
  align-self: center;
  flex-shrink: 0;
  fill: currentColor;
  /* Leicht abgesenkt: die Marken haben unterschiedliche optische Mitten */
  opacity: .92;
}
.chat-pf.pf-twitch  { color: #a970ff; }
.chat-pf.pf-kick    { color: #53fc18; }
.chat-pf.pf-youtube { color: #ff0033; }
.chat-pf.pf-discord { color: #5865f2; }

/* Testereignisse haben kein Logo - die behalten den Punkt */
.chat-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  align-self: center;
  margin: 0 3px;
  flex-shrink: 0;
  background: var(--leiser);
}

.chat-zeit { font-size: 11px; color: var(--leise); }
.chat-name { font-weight: 650; color: var(--text); }
.chat-text { color: var(--text-2); }

.chat-leer {
  padding: 22px 16px;
  color: var(--leise);
  font-size: 12.5px;
  text-align: center;
}
/* Wartet mit. Verschwindet, sobald die erste Nachricht da ist. */
.chat-leer img {
  display: block; width: 78px; height: auto; margin: 6px auto 14px;
  filter: drop-shadow(0 0 18px rgba(123, 92, 255, .35));
}

.chat-eingabe {
  display: flex; gap: 7px;
  padding: 10px;
  border-top: 1px solid var(--rand);
  background: var(--karte-2);
}
.chat-eingabe input {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 9px;
}
.chat-eingabe input:focus-visible {
  outline: 2px solid var(--lila);
  outline-offset: 1px;
}
.chat-eingabe input:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------- Plattform-Kennzeichen
   Im Ereignis-Feed: Ein Follower auf Twitch und einer auf Kick sehen sonst
   identisch aus. */
.pf-marke {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pf-marke.pf-twitch   { color: #c9a6ff; background: #a970ff1f; border-color: #a970ff40; }
.pf-marke.pf-kick     { color: #8ef564; background: #53fc181a; border-color: #53fc1840; }
.pf-marke.pf-youtube  { color: #ff7a94; background: #ff00331a; border-color: #ff003340; }
.pf-marke.pf-discord  { color: #9aa6ff; background: #5865f21f; border-color: #5865f240; }
.pf-marke.pf-internal { color: var(--leise); background: var(--karte-2); border-color: var(--rand); }

/* Der Kreis im Feed traegt die Plattformfarbe mit */
.avatar.pf-twitch  { box-shadow: inset 0 0 0 2px #a970ff66; }
.avatar.pf-kick    { box-shadow: inset 0 0 0 2px #53fc1866; }
.avatar.pf-youtube { box-shadow: inset 0 0 0 2px #ff003366; }

@media (prefers-reduced-motion: reduce) {
  .chat-zeile { transition: none; }
}

/* Verbunden, aber noch ohne Chat - blass statt farbig */
.pf-marke.pf-ruht {
  color: var(--leiser);
  background: transparent;
  border-color: var(--rand);
  border-style: dashed;
}

/* Handlungsanweisung statt blosser Fehlermeldung: erklaeren, was fehlt,
   und die noetige Angabe gleich mitliefern. */
.hinweis-tief {
  padding: 18px 21px;
  margin: -8px 0 16px;
  border-color: rgba(255, 138, 61, .3);
  background: linear-gradient(180deg, rgba(255, 138, 61, .07), transparent);
}
.hinweis-tief .quelle-titel { color: var(--orange); }
.hinweis-tief .quelle-feld { margin: 11px 0 13px; }
.hinweis-knoepfe { display: flex; gap: 9px; flex-wrap: wrap; }

/* ------------------------------------------------------------ OBS-Dock
   Faellt aus der Chat-Karte heraus statt in einem eigenen Bereich zu
   liegen: Die Adresse gehoert zu diesem Chat, nicht zu den Overlays. */
.dock-feld {
  padding: 13px 15px 15px;
  border-bottom: 1px solid var(--rand);
  background: var(--karte-2);
}
.dock-feld[hidden] { display: none; }

.dock-titel {
  margin: 0 0 6px;
  font-size: 12.5px; font-weight: 650;
  color: var(--text);
}
.dock-hilfe {
  margin: 0 0 10px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--leise);
}
.dock-hilfe b { color: var(--text-2); font-weight: 600; }

.dock-feld .quelle-feld {
  margin: 0 0 10px;
  font-size: 11px;
  word-break: break-all;
}

/* Die Adresse ersetzt die Anmeldung - das muss auffallen, ohne dass die
   Karte nach Fehler aussieht. */
.dock-warnung {
  margin: 0 0 11px;
  padding: 8px 10px;
  font-size: 11px; line-height: 1.5;
  color: #ffc9a3;
  background: rgba(255, 138, 61, .09);
  border-left: 2px solid var(--orange);
  border-radius: 0 6px 6px 0;
}

.dock-knoepfe { display: flex; gap: 7px; flex-wrap: wrap; }
.dock-knoepfe .btn { font-size: 12px; padding: 7px 12px; }

/* Die Kopfzeile traegt jetzt drei Dinge - der Knopf darf nicht drueckens */
.chat-kopf { flex-wrap: wrap; }
.chat-kopf .btn-klein { flex-shrink: 0; }

/* Kennzeichnet den Betreiberbereich in der Seitenleiste. Ohne das sieht
   System aus wie eine gewoehnliche Einstellungsseite - und der einzige
   Ort, an dem dienstweite Dinge stehen, bleibt unentdeckt. */
.nav-marke {
  margin-left: auto;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: var(--r-rund);
}
.nav-marke[hidden] { display: none; }

/* ============================================================ OBS-Bruecke
   Szenen aufklappbar statt alles offen: 17 Szenen mit 62 Quellen waeren
   eine Wand aus Text, in der man nichts findet. */
.szenen {
  padding: 0;
  margin: -8px 0 18px;
  overflow: hidden;
}

.szenen-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rand);
  font-size: 12.5px;
  color: var(--leise);
}
.szenen-kopf b { color: var(--text); font-weight: 650; }

.szene { border-bottom: 1px solid var(--rand); }
.szene:last-child { border-bottom: none; }

.szene summary {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  user-select: none;
}
.szene summary::-webkit-details-marker { display: none; }
.szene summary::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid var(--leiser);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
  flex-shrink: 0;
}
.szene[open] summary::before { transform: rotate(90deg); }
.szene summary:hover { background: var(--karte-2); }

.szene-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die gerade gesendete Szene hervorheben - danach sucht man zuerst */
.szene-name.aktiv { color: var(--cyan); font-weight: 650; }
.szene-zahl {
  font-size: 11px; color: var(--leiser);
  padding: 1px 7px;
  background: var(--karte-2);
  border-radius: var(--r-rund);
  flex-shrink: 0;
}

.quellen { margin: 0; padding: 2px 0 8px 31px; list-style: none; }
.quellen li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 16px 3px 0;
  font-size: 12.5px;
}
/* Unsichtbare Quellen gedaempft - sie sind da, aber gerade nicht im Bild */
.quellen li.aus { opacity: .45; }
.quellen li.aus .quelle-name { text-decoration: line-through; }

.quelle-name { color: var(--text-2); }
.quelle-art { color: var(--leiser); font-size: 11px; margin-left: auto; }
.quellen-leer { margin: 0; padding: 2px 16px 10px 31px; font-size: 12px; color: var(--leiser); }

/* Der Kopplungscode wird abgetippt - also gross und mit Abstand */
.kopplungscode {
  margin: 12px 0;
  padding: 14px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  border: 1px dashed var(--rand-2);
  border-radius: var(--r-m);
}

/* Fehlt die OBS-Verbindung, waere eine leere Auswahlliste die
   schlechteste Auskunft - sie saehe aus, als haette der Kanal keine
   Szenen. Stattdessen ein Satz, der sagt, was zu tun ist. */
.baustein-hinweis {
  display: block;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--leise);
  background: var(--karte-2);
  border: 1px dashed var(--rand-2);
  border-radius: var(--r-s);
}
.baustein-hinweis b { color: var(--text-2); font-weight: 600; }