/* ══════════════════════════════════════════════════════════════════════════════
   Vidono im Aussehen von winku.de.

   WARUM EINE ÜBERSCHREIBENDE SCHICHT und keine neu geschriebenen Vidono-Dateien:
   Die mitgelieferten base.css, components.css und dashboard.css legen ihre Farben,
   Abstände und Radien durchgehend in CSS-Variablen ab. Wir müssen deshalb nicht
   1.700 Zeilen fremdes CSS anfassen, sondern die Variablen umdefinieren — dann
   folgt alles, was darauf aufbaut, von selbst. Eine umgeschriebene Kopie hätte
   dagegen bei jedem Vidono-Update von Hand nachgezogen werden müssen.

   Diese Datei wird IMMER ZULETZT eingebunden. Steht sie vorher, gewinnen die
   Vidono-Werte, und die Seite sieht aus wie vorher — nur mit einer zusätzlichen
   Datei im Ladeprotokoll.

   NUR EIN AUSSEHEN, KEIN UMSCHALTER. winku.de ist dunkel, und zwar durchgehend.
   Vidono hatte einen Hell/Dunkel-Schalter; er bleibt technisch bestehen (das
   Attribut data-theme wird weiter gesetzt), führt aber zu demselben Bild — sonst
   stünde ein Knopf da, der scheinbar nichts tut. Der Knopf wird ausgeblendet.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Die Schriftdateien liegen als Kopie unter /fonts NEBEN diesem Ordner — nicht auf
   winku.de. Grund ist die Content-Security-Policy: font-src 'self' erlaubt nur den
   eigenen Host, und vidono.winku.de ist gegenüber winku.de ein anderer Host. Die
   Schriften wurden dort still verworfen, die Seite fiel auf die Systemschrift
   zurück und sah nur ungefähr aus wie winku.de.
   Die Adressen sind RELATIV zu dieser Datei: aus /css/ heraus ist ../fonts/ auf
   winku.de /vidono/fonts/ und auf den eigenen Adressen /fonts/. Eine Adresse, zwei
   Hosts, keine PHP-Verarbeitung in einer .css-Datei nötig. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrainsmono-500.woff2') format('woff2')}

/* ── Die Farbwerte von winku.de, auf die Namen von Vidono gelegt ──────────────── */
:root,
:root[data-theme="dark"],
:root[data-theme="light"]{
  /* winku.de */
  --wk-bg:#0b0f19; --wk-card:rgba(255,255,255,.04); --wk-border:rgba(255,255,255,.08);
  --wk-text:#e5e7eb; --wk-muted:#9ca3af;
  --wk-accent:#7c3aed; --wk-accent2:#06b6d4; --wk-accent3:#f472b6;

  /* Vidono-Namen -> winku.de-Werte */
  --bg-body:var(--wk-bg);
  --bg-card:var(--wk-card);
  --text-main:var(--wk-text);
  --text-muted:var(--wk-muted);
  --primary:var(--wk-accent);
  --primary-hover:#8b5cf6;
  --border-color:var(--wk-border);
  --input-bg:rgba(255,255,255,.05);
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --radius:18px;
  /* Zustandsfarben bleiben bei ihrer Bedeutung: Grün heißt gut, Rot heißt Abbruch.
     Sie sind kein Teil der Marke und dürfen nicht in den Akzent aufgehen. */
  --success:#22c55e; --danger:#ef4444; --warning:#f59e0b;
}

/* ── Grund und Hintergrund ────────────────────────────────────────────────────── */
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--wk-bg);
  color:var(--wk-text);
}
/* Das Raster und die farbigen Schleier von winku.de. Auf der Webseite stehen dafür
   vier leere <div>; hier kommen sie aus Pseudo-Elementen, damit keine der kopierten
   Vidono-Seiten dafür angefasst werden muss. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--wk-border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--wk-border) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
          mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(520px 520px at 8% -6%,  rgba(124,58,237,.45), transparent 70%),
    radial-gradient(460px 460px at 96% 104%,rgba(6,182,212,.40),  transparent 70%),
    radial-gradient(320px 320px at 58% 42%, rgba(244,114,182,.22),transparent 70%);
  filter:blur(30px);
}

/* ── Kopfleiste ──────────────────────────────────────────────────────────────── */
.navbar{
  background:transparent;border-bottom:1px solid var(--wk-border);
  backdrop-filter:none;position:sticky;top:0;padding:0;
}
[data-theme="dark"] .navbar{background:transparent}
.nav-content{max-width:1100px;padding:18px 24px;gap:14px;flex-wrap:wrap}
.nav-content .logo{
  font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--wk-text);
  display:flex;align-items:center;gap:10px;
}
/* ── Die beiden Zeichen in der Kopfzeile ──────────────────────────────────────
   Links das W von winku.de als Rückweg, daneben die Marke von Vidono.

   Nur EINE Verlaufskachel, und zwar die von Vidono. Das W steht daneben als
   schlichtes Zeichen in Winku-Violett: Zwei Kacheln nebeneinander streiten sich um
   die Aufmerksamkeit, und die Marke dieser Seite ist die von Vidono. */
.logo-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 24px rgba(124,58,237,.35);
}
.logo-mark svg{width:22px;height:22px;display:block}
/* Die beiden Kacheln tragen ihre eigene Farbe. .logo-mark-winku wiederholt den
   Verlauf von .logo-mark ausdrücklich: Ohne die Regel sähe man der Klasse nicht an,
   dass sie eine Farbe hat — und die nächste Änderung an .logo-mark färbte still beide. */
.logo-mark-winku{background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2))}
.logo-mark-vidono{
  background:linear-gradient(135deg,#9146FF,#bf94ff);
  box-shadow:0 8px 24px rgba(145,70,255,.35);
}
.v-marke{display:flex;align-items:center;gap:12px;min-width:0}
/* Der Rückweg trägt jetzt dieselbe Darstellung wie die Marke auf winku.de selbst:
   Verlaufskachel und der Name in Weiß, ohne Rahmen. Die Pille davor war eine dritte
   Knopfform neben .btn und .logo — sie sah nach nichts davon aus.

   Erkennbar bleibt er als anklickbar durch das Anheben beim Zeigen und den Schatten
   unter der Kachel; der Trennstrich rechts sagt, dass hier zwei Dinge stehen. */
.v-heim{
  display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
  font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--wk-text);
  text-decoration:none;transition:transform .2s,opacity .2s;
}
.v-heim:hover{transform:translateY(-1px);opacity:.9}
/* Kein Trennstrich mehr zwischen den beiden Zeichen: Zwei Marken nebeneinander
   brauchen Abstand, keine Linie — die Linie machte aus dem Paar eine Tabelle. */
.v-marke .logo{padding-left:2px}
.v-marke{gap:16px}
/* Name und Bild sind ein Knopf, nicht zwei lose Teile nebeneinander. */
.v-konto{padding-left:5px}
.v-avatar-mini{box-shadow:none}
.v-bereich{color:var(--wk-muted);font-size:.85rem;font-weight:600}
.v-kanalwahl{margin:0}
.v-kanalwahl .channel-select{padding:8px 14px;border-radius:999px;font-size:.85rem;font-family:inherit}

/* ── Knöpfe im Zuschnitt von winku.de: Pillenform, Verlauf beim Hauptknopf ────── */
/* Die Maße von winku.de, nicht nur die Farben. Vorher stand hier allein die Pillenform;
   Polsterung und Schriftgröße kamen weiter aus components.css (10px/20px, .btn-sm mit
   eckigen 8px Radius). Ein Knopf mit richtiger Farbe und fremden Maßen sieht daneben aus —
   und in der Kopfzeile standen genau deshalb drei Knöpfe, die nicht zueinander passten. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:600;font-size:.95rem;
  font-family:inherit;border:0;cursor:pointer;text-decoration:none;
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.btn-sm{padding:9px 18px;font-size:.85rem;border-radius:999px}
.btn-lg{padding:16px 30px;font-size:1.05rem;border-radius:999px}
.btn .ic{width:18px;height:18px;flex:0 0 auto}
.btn-primary{
  background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));
  color:#fff;border:0;box-shadow:0 10px 30px rgba(124,58,237,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(124,58,237,.5)}
.btn-outline,.btn-secondary{
  border:1px solid var(--wk-border);background:var(--wk-card);color:var(--wk-text);
}
/* components.css faerbt beim Darueberfahren Rand UND Text lila. Auf winku.de hellt sich
   stattdessen die Flaeche auf — der Text bleibt lesbar. Beides zugleich ergaebe einen
   Knopf, der beim Zeigen die Farbe wechselt und dabei schlechter zu lesen ist. */
.btn-outline:hover,.btn-secondary:hover{
  background:rgba(255,255,255,.08);border-color:var(--wk-border);color:var(--wk-text);
  transform:translateY(-2px);
}

/* ── Karten, Felder, Tabellen ────────────────────────────────────────────────── */
.card,.alert,.invite-card,.modal-content,.panel{
  background:var(--wk-card);border:1px solid var(--wk-border);border-radius:var(--radius);
}
input,select,textarea{
  background:var(--input-bg);border:1px solid var(--wk-border);color:var(--wk-text);
  border-radius:12px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--wk-accent);outline:none}
/* Klapplisten werden vom Betriebssystem gezeichnet: ohne diese Zeile steht in der
   aufgeklappten Liste dunkle Schrift auf dunklem Grund und man liest nichts. */
select option{background:#131826;color:var(--wk-text)}
code,kbd,samp,pre{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
table{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.02em}

/* ── Profilbild ───────────────────────────────────────────────────────────────
   EINE Hülle für beide Fälle: mit Bild und ohne. Vorher trug nur das <img> einen
   Ring, der Buchstaben-Rückfall keinen — und die Größe kam aus vier Quellen
   (style.css 100px, dashboard.css 90px, diese Datei 96px, dazu eine Zahl im
   style-Attribut). Welche gewann, hing an der Reihenfolge der Stildateien.

   Jetzt steht die Größe in --gr und wird von der aufrufenden Stelle gesetzt.
   overflow:hidden schneidet das Bild rund zu, statt sich auf border-radius am
   <img> zu verlassen; place-items zentriert den Buchstaben ohne Zusatzregel. */
.v-avatar{
  --gr:96px;
  width:var(--gr);height:var(--gr);flex:0 0 auto;
  display:inline-grid;place-items:center;overflow:hidden;
  border-radius:50%;
  background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));
  box-shadow:0 0 0 3px var(--wk-bg),0 0 0 5px rgba(124,58,237,.55);
  vertical-align:middle;
}
.v-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.v-avatar b{font-size:calc(var(--gr) * .42);font-weight:800;color:#fff;line-height:1}
/* Die alten Regeln aus style.css und dashboard.css zielen auf .profile-img und
   greifen damit nicht mehr — die Klasse gibt es im Markup nicht mehr. Sie hier zu
   überschreiben wäre Ratearbeit gegen zwei Dateien, die wir nicht anfassen wollen. */
.profile-card .v-avatar{margin-bottom:14px}

/* ── Fuß ─────────────────────────────────────────────────────────────────────── */
footer,.v-fuss{
  border-top:1px solid var(--wk-border);padding:22px 24px;text-align:center;
  color:var(--wk-muted);font-size:.9rem;line-height:1.9;margin-top:auto;
}
footer a,.v-fuss a{color:inherit;text-decoration:none;display:inline-block;padding:6px 2px}
footer a:hover,.v-fuss a:hover{color:var(--wk-text)}

/* ── Eigene Seiten (Anmeldung, Hinweisbänder) ────────────────────────────────── */
.v-inhalt{max-width:1100px;margin:0 auto;padding:34px 24px 60px}
.v-anmelden h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin:0 0 8px}
.v-sub{color:var(--wk-muted);max-width:62ch;margin:0 0 26px}
.v-wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.v-weg{background:var(--wk-card);border:1px solid var(--wk-border);border-radius:var(--radius);padding:20px 22px}
.v-weg h2{font-size:1rem;font-weight:700;margin:0 0 8px}
.v-weg p{color:var(--wk-muted);font-size:.9rem;margin:0 0 16px}
.v-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  font-size:.95rem;font-weight:600;text-decoration:none;
  border:1px solid var(--wk-border);background:var(--wk-card);color:var(--wk-text)}
.v-btn-primar{background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));color:#fff;border:0;
  box-shadow:0 10px 30px rgba(124,58,237,.35)}
.v-hinweis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:1100px;margin:18px auto 0;padding:14px 20px;
  background:rgba(124,58,237,.14);border:1px solid var(--wk-border);border-radius:var(--radius);
  color:var(--wk-text);font-size:.95rem}
.v-hinweis code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px;font-size:.85rem}
.v-hinweis .v-btn{margin-left:auto}

/* ── Handy und Tablett ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .nav-content{padding:14px 18px}
  /* Auf dem Telefon zaehlt jede Breite: Der Rueckweg bleibt als Kachel erkennbar,
     der Text daneben faellt weg. Das title-Attribut bleibt fuer die Sprachausgabe. */
  .v-heim-text{display:none}
  .v-heim{padding:3px;gap:0}
  .v-marke{gap:8px}
  .v-marke .logo{padding-left:8px}
  .nav-links{width:100%;justify-content:flex-start;gap:8px}
  .nav-content .logo{font-size:1.1rem}
  .nav-links{width:100%;justify-content:flex-start}
  .v-inhalt,.main-container{padding-left:18px;padding-right:18px}
  .v-hinweis{margin:14px 18px 0}
  .v-hinweis .v-btn{margin-left:0;width:100%;justify-content:center}
}

/* ── Reste des früheren Hell/Dunkel-Umschalters ───────────────────────────────
   base.css, style.css und components.css enthalten Regeln, die nur unter
   [data-theme="dark"] greifen. Gesetzt wird das Attribut nicht mehr — theme.js ist
   entfernt —, also greifen sie ohnehin nicht. Sie hier trotzdem zu überschreiben
   kostet vier Zeilen und nimmt der Seite eine stille Abhängigkeit: Sollte das
   Attribut je wieder auftauchen (ein Browser-Add-on, ein zurückgeholtes Skript,
   eine kopierte Seite), sähe sonst genau ein Teil der Oberfläche anders aus als
   der Rest, und man suchte den Fehler im Formular statt im Attribut. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background-color:var(--input-bg);border-color:var(--wk-border);color:var(--wk-text);
}
[data-theme="dark"] .slider{background-color:rgba(255,255,255,.14)}

/* ── Anmeldeseite: ein Knopf, sonst nichts ─────────────────────────────────────
   Ohne Twitch kann Vidono nichts — kein Kanalname, keine Spendenseite, kein
   Overlay-Ziel. Ein halbes Dashboard mit einem Hinweisband darüber war schlechter
   als diese Seite: Sie sagt in einem Satz, worum es geht, und hat einen Weg. */
.v-start{max-width:56ch;margin:0 auto;padding:48px 0 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.v-start-mark{display:block;line-height:0;filter:drop-shadow(0 12px 32px rgba(145,70,255,.4))}
.v-start h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;line-height:1.1;margin:0}
.v-start .v-sub{margin:0}
/* Der Twitch-Knopf trägt hier Twitch-Lila: Er führt zu Twitch, und das darf man sehen.
   Auf winku.de bleibt der Twitch-Knopf farblos — dort ist er eine von zwei Möglichkeiten
   unter vielen, hier ist er der einzige Weg und der eigentliche Inhalt der Seite. */
.v-btn-twitch{background:linear-gradient(135deg,#9146FF,#772ce8);color:#fff;border:0;
  box-shadow:0 10px 30px rgba(145,70,255,.35);padding:16px 30px;font-size:1.05rem}
.v-btn-twitch:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(145,70,255,.5)}
.v-btn-twitch .ic{width:20px;height:20px}
.v-klein{color:var(--wk-muted);font-size:.85rem;line-height:1.6;margin:0;max-width:52ch}
.v-klein a{color:var(--wk-accent2);text-decoration:underline}

/* ── Einrichtungsband: der letzte fehlende Schritt ─────────────────────────────
   Bewusst auffälliger als eine Karte und bewusst ganz oben: Ohne den Schlüssel
   erfährt Vidono nie von einer Spende, und das Feld lag bisher unten zwischen
   zwanzig anderen Einstellungen. */
.v-einrichten{max-width:1100px;margin:0 auto 26px;padding:24px 26px;
  border:1px solid rgba(145,70,255,.35);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(145,70,255,.14),rgba(145,70,255,.04))}
.v-einrichten h2{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0 0 8px}
.v-einrichten h2 .ic{width:22px;height:22px;color:#bf94ff}
.v-einrichten>p{color:var(--wk-muted);margin:0 0 14px;max-width:70ch}
.v-schritte{margin:0 0 18px;padding-left:22px;color:var(--wk-text);line-height:1.8}
.v-schritte li{margin:0}
.v-schritte a{color:var(--wk-accent2);text-decoration:underline}
.v-einrichten-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.v-einrichten-form input{flex:1;min-width:min(320px,100%);padding:12px 14px}
.v-einrichten .v-klein{margin-top:12px;max-width:70ch}
.v-hinweis-fehler{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4)}
.v-hinweis-ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4)}
@media(max-width:900px){
  .v-einrichten{margin-left:18px;margin-right:18px}
  .v-einrichten-form button{width:100%}
}

/* ── Breite und Überlauf im Dashboard ─────────────────────────────────────────
   ZWEI FEHLER, die zusammen dafür sorgten, dass ein langes Video den ganzen
   Kasten breiter machte:

   1. .main-container war 1200px breit, die Kopfzeile 1100px. Der Inhalt ragte
      also grundsätzlich über die Leiste hinaus — unabhängig vom Inhalt.
   2. .dashboard-grid stand auf "260px 1fr". Ein 1fr-Bereich ist mindestens so
      breit wie sein längster unteilbarer Inhalt; ein Videotitel ohne Leerzeichen
      dehnt ihn also über den Container hinaus, und das nimmt die ganze Seite mit.
      minmax(0,1fr) erlaubt dem Bereich, schmaler zu werden als sein Inhalt —
      dann greift das text-overflow:ellipsis, das im Titel schon steht. */
.main-container{max-width:1100px;width:100%;padding:0 24px;margin:32px auto}
.dashboard-grid{grid-template-columns:260px minmax(0,1fr)}
@media(max-width:900px){
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .main-container{padding:0 18px}
}
/* Auch einzeln absichern: Was in einer Zeile steht, darf die Zeile nicht sprengen. */
.queue-item{min-width:0}
.queue-info{min-width:0}
.queue-title{min-width:0;overflow-wrap:anywhere}

/* ── Live-Steuerung: zweite Reihe ─────────────────────────────────────────────
   „Anhalten" oben und „Einreichungen" hier sehen sich ähnlich, tun aber
   Verschiedenes. Die eigene Reihe mit Beschriftung sagt das, bevor jemand den
   falschen Knopf drückt. */
.v-steuerreihe{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--wk-border)}
.v-steuerlabel{color:var(--wk-muted);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.v-steuerreihe .btn{min-width:190px}
.v-steuerreihe .btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Geheimfeld: sichtbar nur, solange man hinsieht ───────────────────────────
   Der StreamElements-Schlüssel ist der Zugang zum Spendenkonto und stand im
   Klartext in einem Feld, das beim Streamen vor Publikum offen lag. */
/* Sichtbar wird der Schlüssel, wenn die Maus über dem FELD liegt — nicht über dem
   Auge daneben. Das Auge saß rechts über den zensierten Zeichen: Man musste genau
   auf das eine Symbol zeigen, um zu sehen, was darunter liegt.

   Das Auge bleibt als Anzeige, dass hier etwas verborgen ist, und als Trefferfläche
   für Tastatur und Finger — beides braucht einen Knopf, kein Darüberfahren. */
.v-geheim{position:relative;display:flex;align-items:center}
.v-geheim input{padding-right:44px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.85rem}
.v-geheim-auge{position:absolute;right:6px;display:grid;place-items:center;
  width:32px;height:32px;border:0;background:transparent;color:var(--wk-muted);cursor:pointer;
  border-radius:8px;pointer-events:auto}
.v-geheim:hover .v-geheim-auge{color:var(--wk-text)}
.v-geheim-auge:hover{background:rgba(255,255,255,.07)}
.v-geheim-auge .ic{width:18px;height:18px}

/* ── Moderatoren ─────────────────────────────────────────────────────────────
   Dreizehn Kästchen in einer Reihe sind eine Wand; dieselben dreizehn in vier
   benannten Gruppen sind eine Entscheidung. Die Vorlagen darüber sind die
   Abkürzung für die häufigen Fälle — sie ersetzen die einzelnen Rechte nicht. */
.v-mod-einladen{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.v-mod-einladen input{flex:1;min-width:min(240px,100%)}
.v-mod-liste{display:flex;flex-direction:column;gap:14px}
.v-mod{border:1px solid var(--wk-border);border-radius:14px;padding:16px;background:rgba(255,255,255,.02)}
.v-mod-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.v-mod-name{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.v-mod-name small{font-size:.78rem}
.v-vorlagen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px solid var(--wk-border)}
.v-vorlagen.saving{opacity:.5;pointer-events:none}
.v-vorlagen-label{color:var(--wk-muted);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
.v-vorlage{padding:7px 14px;border-radius:999px;border:1px solid var(--wk-border);
  background:var(--wk-card);color:var(--wk-text);font:inherit;font-size:.82rem;font-weight:600;
  cursor:pointer;transition:background .2s,border-color .2s}
.v-vorlage:hover{background:rgba(145,70,255,.16);border-color:rgba(145,70,255,.5)}
.v-perm-gruppe{margin-bottom:12px}
.v-perm-gruppe:last-child{margin-bottom:0}
.v-perm-titel{display:block;color:var(--wk-muted);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.perm-grid{display:flex;flex-wrap:wrap;gap:7px}
.perm-chip{padding:6px 13px;border-radius:999px;border:1px solid var(--wk-border);
  background:rgba(255,255,255,.03);color:var(--wk-muted);font:inherit;font-size:.82rem;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.perm-chip:hover{border-color:rgba(255,255,255,.22);color:var(--wk-text)}
.perm-chip.active{background:rgba(145,70,255,.2);border-color:rgba(145,70,255,.6);color:#fff}
.perm-chip.saving{opacity:.5;pointer-events:none}

/* ── Kanalwahl: Knopf mit Bild statt Klappliste des Betriebssystems ───────────
   Wer mehrere Kanäle moderiert, unterscheidet sie am Bild schneller als am
   Namen — und es geht darum, nicht versehentlich im falschen Kanal zu landen. */
.v-kanalwahl{position:relative}
.v-kanalknopf{display:inline-flex;align-items:center;gap:9px;
  padding:5px 12px 5px 5px;border-radius:999px;
  border:1px solid var(--wk-border);background:var(--wk-card);color:var(--wk-text);
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .2s}
.v-kanalknopf:hover{background:rgba(255,255,255,.08)}
.v-kanalknopf .ic{width:16px;height:16px;color:var(--wk-muted);transition:transform .2s}
.v-kanalwahl[data-offen="1"] .v-kanalknopf .ic{transform:rotate(180deg)}
.v-kanalliste{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:250px;
  display:none;flex-direction:column;padding:6px;
  border:1px solid var(--wk-border);border-radius:14px;background:#121826;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.v-kanalwahl[data-offen="1"] .v-kanalliste{display:flex}
.v-kanaleintrag{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--wk-text);text-decoration:none;transition:background .15s}
.v-kanaleintrag:hover{background:rgba(255,255,255,.07)}
.v-kanaleintrag.aktiv{background:rgba(145,70,255,.18)}
.v-kanaleintrag span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.v-kanaleintrag small{color:var(--wk-muted);font-size:.75rem}
.v-optional{color:var(--wk-muted);font-weight:400}
.v-warn-ic{display:inline-grid;place-items:center}
.v-warn-ic .ic{width:26px;height:26px}
/* Der Klapppfeil an aufklappbaren Abschnitten. */
.toggle-arrow .ic{width:18px;height:18px;transition:transform .2s}

/* ── Das laufende Video ───────────────────────────────────────────────────────
   Vorher unterschied es nur ein 4px-Strich links und ein kleines „Läuft" — in
   einer Liste gleich aussehender Zeilen ist das keine Hervorhebung. Jetzt trägt
   die Zeile Rahmen, Grundton und einen ruhigen Puls, und die Restzeit läuft
   sichtbar mit: Daran sieht man, dass überhaupt etwas passiert. */
.queue-item.v-laeuft{
  border-color:rgba(34,197,94,.55);
  background:linear-gradient(90deg,rgba(34,197,94,.14),rgba(34,197,94,.03));
  box-shadow:0 0 0 1px rgba(34,197,94,.25), 0 10px 30px rgba(34,197,94,.10);
}
.v-laeuft-badge{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  color:#22c55e;font-size:.85rem;font-weight:600}
.v-laeuft-badge .ic{width:15px;height:15px;animation:v-puls 2s ease-in-out infinite}
.v-laeuft-badge b{font-variant-numeric:tabular-nums}
@keyframes v-puls{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.v-laeuft-badge .ic{animation:none}}
.v-laeuft-kopf{display:flex;align-items:center;gap:8px;min-width:0;
  padding:5px 12px;border-radius:999px;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);
  color:#22c55e;font-size:.82rem;font-weight:600}
.v-laeuft-kopf .ic{width:14px;height:14px;flex:0 0 auto}
.v-laeuft-titel{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--wk-text);font-weight:500}
.v-laeuft-kopf b{font-variant-numeric:tabular-nums;flex:0 0 auto}
.v-laeuft-kopf[hidden]{display:none}

/* ── Kästchen und Regler in den Einstellungen ─────────────────────────────────
   Die Kästchen standen als nacktes <input> neben einem <label>, das nicht damit
   verbunden war: Ein Klick auf den Text tat nichts, nur das 13px-Kästchen selbst
   war zu treffen. Jetzt ist die ganze Zeile die Schaltfläche. */
.v-check{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;margin:0 0 10px;
  border:1px solid var(--wk-border);border-radius:12px;background:rgba(255,255,255,.02);
  cursor:pointer;transition:background .18s,border-color .18s}
.v-check:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.v-check input{width:18px;height:18px;margin-top:2px;accent-color:#9146FF;flex:0 0 auto;cursor:pointer}
.v-check input:disabled{cursor:not-allowed}
.v-check span{display:flex;flex-direction:column;gap:3px;min-width:0}
.v-check b{font-weight:600;font-size:.92rem}
.v-check small{color:var(--wk-muted);font-size:.82rem;line-height:1.5}
.v-regler{padding:12px 14px;border:1px solid var(--wk-border);border-radius:12px;
  background:rgba(255,255,255,.02)}
.v-regler>label{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.v-regler b{font-weight:600;font-size:.92rem}
.v-regler small{color:var(--wk-muted);font-size:.82rem}
.v-regler-zeile{display:flex;align-items:center;gap:12px}
.v-regler-zeile .ic{width:18px;height:18px;color:var(--wk-muted);flex:0 0 auto}
.v-regler-zeile input[type=range]{flex:1;accent-color:#9146FF;min-width:0}
.v-regler-zeile output{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ── Integrationen ───────────────────────────────────────────────────────────
   Der Kasten war ein violett umrandetes Feld, in dem Beschriftung, Eingabe und
   Erklärung ohne Abstand übereinanderklebten — der Hinweistext lief sogar in die
   nächste Zeile des Formulars hinein. */
.setting-box{padding:18px 20px;border-radius:14px;margin-bottom:18px}
.setting-box h4{margin:0 0 14px;font-size:.75rem;letter-spacing:.08em;color:var(--wk-muted)}
.setting-box .form-group{margin-bottom:16px}
.setting-box .form-group:last-child{margin-bottom:0}
.form-group label{display:block;margin-bottom:6px;font-size:.9rem;font-weight:600;color:var(--wk-text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 13px}
.form-group small{display:block;margin-top:7px;color:var(--wk-muted);font-size:.82rem;line-height:1.55}
.form-group small a{color:var(--wk-accent2);text-decoration:underline}
.form-group input[type=color]{height:44px;padding:5px;cursor:pointer}

/* ── Moderatorenrechte: eingeklappt ───────────────────────────────────────────
   Dreizehn Rechte je Moderator sind die Ausnahme, nicht der Alltag — meistens
   will man nur sehen, wer Moderator ist. Die Zusammenfassung im Kopf („4 von 13")
   beantwortet die häufige Frage, ohne dass man aufklappen muss. */
.v-mod-rechte{border-top:1px solid var(--wk-border);margin-top:4px}
.v-mod-rechte>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 2px;cursor:pointer;list-style:none;color:var(--wk-muted);font-size:.85rem;font-weight:600}
.v-mod-rechte>summary::-webkit-details-marker{display:none}
.v-mod-rechte>summary:hover{color:var(--wk-text)}
.v-mod-rechte>summary>span:first-child{display:inline-flex;align-items:center;gap:8px}
.v-mod-rechte>summary .ic{width:16px;height:16px}
.v-mod-rechte>summary b{color:var(--wk-text);font-weight:700}
.v-mod-rechte[open]>summary .toggle-arrow .ic{transform:rotate(180deg)}
.v-mod-rechte-inhalt{padding-top:6px}

/* ── Der erste Einstieg ───────────────────────────────────────────────────────
   Was jemand nach der ersten Anmeldung sieht, entscheidet, ob er Vidono benutzt
   oder das Fenster schließt. Drei Schritte, einer offen, die erledigten
   eingeklappt und mit Haken — sie sind der Beleg, dass es vorangeht.

   Der Kasten verschwindet vollständig, sobald alle drei erledigt sind. Ein
   Einstiegsband, das ewig stehen bleibt, wird zur Tapete und dann übersehen. */
.v-einstieg{max-width:1100px;margin:0 auto 26px;padding:22px 24px;
  border:1px solid rgba(145,70,255,.35);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(145,70,255,.15),rgba(145,70,255,.03))}
.v-einstieg-kopf{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.v-einstieg-mark{line-height:0;flex:0 0 auto;filter:drop-shadow(0 8px 22px rgba(145,70,255,.45))}
.v-einstieg-kopf h2{font-size:1.25rem;margin:0 0 3px}
.v-einstieg-kopf p{color:var(--wk-muted);margin:0;font-size:.9rem}
.v-einstieg-fortschritt{margin-left:auto;display:flex;align-items:baseline;gap:1px;
  padding:8px 16px;border-radius:999px;border:1px solid var(--wk-border);
  background:rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.v-einstieg-fortschritt b{font-size:1.35rem;font-weight:800;color:#bf94ff}
.v-einstieg-fortschritt span{color:var(--wk-muted);font-size:.9rem;font-weight:600}

.v-schritt{border:1px solid var(--wk-border);border-radius:14px;margin-bottom:10px;
  background:rgba(255,255,255,.02);overflow:hidden}
.v-schritt:last-child{margin-bottom:0}
.v-schritt>summary{display:flex;align-items:center;gap:14px;padding:14px 16px;
  cursor:pointer;list-style:none}
.v-schritt>summary::-webkit-details-marker{display:none}
.v-schritt>summary:hover{background:rgba(255,255,255,.04)}
.v-schritt-nr{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;
  border-radius:50%;background:rgba(145,70,255,.22);border:1px solid rgba(145,70,255,.5);
  color:#fff;font-weight:800;font-size:.9rem}
.v-schritt-nr .ic{width:17px;height:17px}
.v-schritt-titel{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:600}
.v-schritt-titel small{color:var(--wk-muted);font-weight:400;font-size:.83rem;line-height:1.4}
.v-schritt .toggle-arrow{margin-left:auto;color:var(--wk-muted)}
.v-schritt[open] .toggle-arrow .ic{transform:rotate(180deg)}
/* Erledigt: grüner Haken, gedämpft — sichtbar, aber nicht mehr im Weg. */
.v-schritt.fertig{opacity:.75;border-color:rgba(34,197,94,.35)}
.v-schritt.fertig .v-schritt-nr{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.55);color:#22c55e}
.v-schritt-inhalt{padding:4px 16px 18px 60px;border-top:1px solid var(--wk-border)}
.v-schritt-inhalt>p{margin:14px 0;max-width:74ch;line-height:1.65}
.v-schritt-inhalt .v-schritte{margin:0 0 14px;padding-left:20px}
.v-schritt-inhalt .v-schritte li{margin-bottom:9px}
.v-schritt-inhalt .v-klein{margin-top:12px;display:flex;align-items:flex-start;gap:7px}
.v-schritt-inhalt .v-klein .ic{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--warning)}
@media(max-width:640px){.v-schritt-inhalt{padding-left:16px}}

/* Eine Adresse zum Kopieren: Feld und Knopf gehören sichtbar zusammen. */
.v-kopierzeile{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.v-kopierzeile input{flex:1;min-width:min(280px,100%);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.82rem}
.v-kopierzeile .btn{flex:0 0 auto}

/* ── Sprachumschalter ─────────────────────────────────────────────────────────
   Dieselbe Darstellung wie im Kopf von winku.de: eine Pille, die aktive Sprache
   mit dem Marken-Verlauf.

   Die Regeln stehen hier noch einmal, weil Vidono site.css NICHT lädt — es
   benutzt seine eigenen Stildateien, und diese Datei legt nur die winku.de-Werte
   darüber. Ohne sie war der Umschalter zwei nackte Textlinks nebeneinander:
   dieselbe Funktion, aber nichts, was nach einem Schalter aussieht. */
.lang-switch{display:inline-flex;flex:0 0 auto;border:1px solid var(--wk-border);
  border-radius:999px;overflow:hidden;background:var(--wk-card)}
.lang-opt{padding:7px 11px;font-size:.78rem;font-weight:700;color:var(--wk-muted);
  letter-spacing:.03em;text-decoration:none;transition:background .15s,color .15s}
.lang-opt:hover{color:var(--wk-text)}
.lang-opt.active{background:linear-gradient(135deg,var(--wk-accent),var(--wk-accent2));color:#fff}
@media(max-width:900px){.lang-switch{order:-1}}

/* ── Einstellungen der Einblendung ────────────────────────────────────────────
   Vierzehn Einstellungen offen untereinander sind eine Wand — wer nur den Preis
   ändern will, scrollt daran vorbei. Deshalb ausklappbar und in drei benannte
   Gruppen geteilt: Platz und Größe, Farben, Inhalt. */
.v-box-einst{padding:0;overflow:hidden}
.v-box-einst>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:15px 20px;cursor:pointer;list-style:none;font-weight:600}
.v-box-einst>summary::-webkit-details-marker{display:none}
.v-box-einst>summary:hover{background:rgba(255,255,255,.04)}
.v-box-einst>summary>span:first-child{display:inline-flex;align-items:center;gap:9px}
.v-box-einst>summary .ic{width:18px;height:18px}
.v-box-einst[open]>summary{border-bottom:1px solid var(--wk-border)}
.v-box-einst[open]>summary .toggle-arrow .ic{transform:rotate(180deg)}
.v-box-inhalt{padding:18px 20px 20px}
.v-box-inhalt>p.text-muted{margin:0 0 18px;max-width:72ch;line-height:1.6}
.v-box-inhalt h5{margin:22px 0 12px;font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--wk-muted)}
.v-box-inhalt h5:first-of-type{margin-top:0}
.v-box-inhalt .v-regler-zeile{padding:0;border:0;background:none}
.v-box-inhalt .form-group .v-regler-zeile output{min-width:6ch}
/* Häkchen ohne Erklärtext dürfen schmaler sein — sonst steht viel Luft um vier Wörter. */
.v-check-schmal{padding:9px 13px;margin-bottom:7px;align-items:center}
.v-check-schmal input{margin-top:0}
.v-box-inhalt .v-klein{margin:18px 0 14px;max-width:72ch}

/* ── Vorschläge beim Einladen ─────────────────────────────────────────────────
   Bild und Anzeigename, damit man vor dem Klick sieht, wen man einlädt. Der
   oberste Vorschlag ist vorgewählt — Enter nimmt ihn, ohne dass man die Maus
   anfassen muss. */
.v-such{position:relative;flex:1;min-width:min(240px,100%)}
.v-such input{width:100%}
.v-vorschlaege{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  display:flex;flex-direction:column;padding:6px;
  border:1px solid var(--wk-border);border-radius:14px;background:#121826;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.v-vorschlaege[hidden]{display:none}
.v-vorschlag{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border:0;border-radius:10px;background:none;color:var(--wk-text);
  font:inherit;text-align:left;cursor:pointer;transition:background .12s}
.v-vorschlag:hover,.v-vorschlag.aktiv{background:rgba(145,70,255,.20)}
.v-vorschlag img,.v-vorschlag-platz{width:32px;height:32px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.v-vorschlag-platz{display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#9146FF,#bf94ff)}
.v-vorschlag span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.v-vorschlag small{color:var(--wk-muted);font-size:.78rem}

/* ── Protokolle, Ereignisse, Prüfungen ────────────────────────────────────────
   Alle drei waren vierspaltige Tabellen: Uhrzeit, Kennung, Status, Fließtext —
   Zeilen, die man nicht liest, sondern entziffert, und deren Höhe je nach Länge
   des Textes sprang.

   Jetzt eine Liste: Was und Wer vorn, Zeitpunkt rechts, Einzelheiten darunter und
   nur wenn es welche gibt. Die Frage, die man an so eine Liste hat, steht damit
   in der ersten Zeile — nicht in der dritten Spalte. */
.v-log{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto;
  margin:-4px -4px 0;padding:4px}
.v-log-zeile{padding:10px 12px;border-radius:10px;border-left:3px solid transparent;
  background:rgba(255,255,255,.02);transition:background .15s}
.v-log-zeile:hover{background:rgba(255,255,255,.05)}
.v-log-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.v-log-kopf b{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem}
.v-log-kopf b .ic{width:15px;height:15px}
.v-log-kopf time{margin-left:auto;color:var(--wk-muted);font-size:.78rem;
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.v-log-kopf code{font-size:.76rem;color:var(--wk-muted);background:rgba(0,0,0,.3);
  padding:2px 7px;border-radius:6px}
.v-log-was{color:var(--wk-muted);font-size:.86rem}
.v-log-zeile p{margin:5px 0 0;color:var(--wk-muted);font-size:.85rem;line-height:1.5;
  overflow-wrap:anywhere}
.v-betrag{color:#22c55e;font-size:1rem;font-variant-numeric:tabular-nums}
/* Angenommen oder abgelehnt sieht man am Streifen, bevor man liest. */
.v-log-zeile.v-gut{border-left-color:rgba(34,197,94,.7)}
.v-log-zeile.v-gut .v-log-kopf b{color:#22c55e}
.v-log-zeile.v-schlecht{border-left-color:rgba(239,68,68,.7)}
.v-log-zeile.v-schlecht .v-log-kopf b{color:#f87171}

/* ── Icons sitzen auf der Grundlinie, nicht darüber ───────────────────────────
   Ein <svg> ist ein Inline-Element und steht deshalb mit seiner Unterkante auf der
   Schriftgrundlinie — bei einem 24px-Icon neben 14px-Text ragt es dadurch oben
   heraus und wirkt „hochgeschoben". Die Verschiebung nach unten setzt es auf die
   optische Mitte der Zeile.

   Nur dort, wo Icons WIRKLICH im Fließtext stehen: In Flex-Zusammenhängen richtet
   align-items sie ohnehin aus, und dort würde die Verschiebung sie verkanten. */
.v-inhalt .ic, .main-container .ic, .validation-msg .ic, .custom-toast .ic,
.text-muted .ic, p .ic, li .ic, small .ic, label .ic, td .ic, th .ic{
  vertical-align:-.18em;
}
/* In Knöpfen und Zeilen mit flex bleibt es bei der Ausrichtung durch flex. */
.btn .ic, .v-log-kopf .ic, .v-check .ic, .section-header .ic, .v-schritt .ic,
.v-box-einst>summary .ic, .v-mod-rechte>summary .ic, .toggle-arrow .ic,
.nav-links .ic, .logo-mark .ic{vertical-align:baseline}
/* Meldungen: Icon und Text mittig zueinander, statt Icon oben und Text unten. */
.custom-toast>span, .validation-msg{display:flex;align-items:center;gap:9px}
.custom-toast .ic, .validation-msg .ic{flex:0 0 auto;width:18px;height:18px;vertical-align:baseline}
.queue-hinweis{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.queue-hinweis .ic{width:16px;height:16px;flex:0 0 auto;vertical-align:baseline}

/* ── Bildlaufleisten ──────────────────────────────────────────────────────────
   Die Vorgabe des Systems ist auf hellen Seiten gedacht: ein breiter grauer
   Balken mit Pfeilen, der auf dunklem Grund wie ein Fremdkörper wirkt. Schmal,
   halbtransparent und ohne Pfeile fügt sie sich ein — und bleibt sichtbar genug,
   dass man erkennt, dass es weitergeht. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ── Die Karten füllen ihre Spalte ────────────────────────────────────────────
   Im Markup fehlten drei schließende Tags nicht — es waren drei ZU VIEL. Dadurch
   rutschten Protokoll, Ereignisse und Prüfungen aus ihrem Container und standen in
   je eigener Breite versetzt untereinander. Behoben; die Regel hier stellt sicher,
   dass eine Karte auch dann ihre Spalte füllt, wenn sie in einem flex-Zusammenhang
   landet. */
.dashboard-grid>main{min-width:0;display:flex;flex-direction:column;gap:22px}
.dashboard-grid>main>.card,
.dashboard-grid>main>div>.card{width:100%;margin-bottom:0}
.card{margin-bottom:0}

/* ── Warteschlange: Angaben und Menü ──────────────────────────────────────────
   Kanal, Aufrufe, Likes und Alter stehen in der Zeile — das ist es, woran man ein
   Video einschätzt, bevor man es freigibt. Sie kommen aus der Datenbank und nicht
   aus einer neuen YouTube-Anfrage: Beim Einreihen wurden sie ohnehin geholt.

   Die selteneren Wege liegen in einem Menü. Fünf Knöpfe offen nebeneinander sind
   eine Leiste, die breiter ist als der Titel daneben; Freigeben und Ablehnen
   bleiben draußen, weil man sie ständig braucht. */
.queue-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;
  color:var(--wk-muted);font-size:.78rem}
.queue-meta span{opacity:.5}
.queue-aktionen{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.queue-menue{position:relative}
.queue-menue-knopf{padding:8px 10px}
.queue-menue-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:230px;
  display:flex;flex-direction:column;padding:6px;
  border:1px solid var(--wk-border);border-radius:14px;background:#121826;
  box-shadow:0 24px 60px rgba(0,0,0,.6)}
.queue-menue-liste[hidden]{display:none}
.queue-menue-liste>*{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:0;border-radius:9px;background:none;color:var(--wk-text);
  font:inherit;font-size:.86rem;text-align:left;text-decoration:none;cursor:pointer;
  transition:background .12s}
.queue-menue-liste>*:hover{background:rgba(255,255,255,.08)}
.queue-menue-liste .ic{width:16px;height:16px;flex:0 0 auto;color:var(--wk-muted)}
.queue-menue-liste .gefahr{color:#f87171}
.queue-menue-liste .gefahr:hover{background:rgba(239,68,68,.14)}
.queue-menue-liste .gefahr .ic{color:#f87171}

/* ── Video selbst einreihen ───────────────────────────────────────────────────
   Eingeklappt, weil es der seltenere Weg ist: Meistens kommen die Videos von
   Zuschauern. Offen wäre es ein Formular über der Warteschlange, das man jedes
   Mal überliest. */
.v-selbst{border:1px solid var(--wk-border);border-radius:12px;margin-bottom:14px;
  background:rgba(255,255,255,.02);overflow:hidden}
.v-selbst>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;cursor:pointer;list-style:none;font-size:.9rem;font-weight:600}
.v-selbst>summary::-webkit-details-marker{display:none}
.v-selbst>summary:hover{background:rgba(255,255,255,.04)}
.v-selbst>summary>span:first-child{display:inline-flex;align-items:center;gap:8px}
.v-selbst>summary .ic{width:16px;height:16px}
.v-selbst[open]>summary .toggle-arrow .ic{transform:rotate(180deg)}
.v-selbst-inhalt{padding:4px 15px 15px;border-top:1px solid var(--wk-border)}
.v-selbst-inhalt>p{margin:12px 0;font-size:.85rem;line-height:1.55;max-width:72ch}
.v-selbst-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.v-selbst-form>input[type=text]{flex:1;min-width:min(260px,100%)}
.v-selbst-dauer{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--wk-muted)}
.v-selbst-dauer input{width:92px}

/* ── Gesperrte Videos ─────────────────────────────────────────────────────────
   Mit Vorschaubild. Eine Sperrliste aus elfstelligen Kennungen beantwortet die
   Frage „was habe ich da gesperrt?" nicht — und genau die stellt sich, wenn
   jemand eine Sperre aufheben will. */
.v-sperrliste{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto;padding:2px}
.v-sperr{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.02);border-left:3px solid rgba(239,68,68,.55)}
.v-sperr:hover{background:rgba(255,255,255,.05)}
.v-sperr-bild{width:76px;height:43px;object-fit:cover;border-radius:6px;background:#000;
  flex:0 0 auto;display:block;transition:transform .18s}
.v-sperr-bild:hover{transform:scale(1.05)}
.v-sperr-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.v-sperr-text b{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-sperr-text small{color:var(--wk-muted);font-size:.76rem}
.v-sperr-text code{background:rgba(0,0,0,.3);padding:1px 6px;border-radius:5px;font-size:.72rem}
.v-sperr .btn{flex:0 0 auto}

/* Bilder in Protokoll und Prüfliste. */
.v-log-bild{flex:0 0 auto}
.v-check-bild{width:44px;height:25px;object-fit:cover;border-radius:4px;background:#000;
  flex:0 0 auto;display:block}
.v-check-titel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.88rem;flex:1}

/* ── Den vorhandenen Platz nutzen ─────────────────────────────────────────────
   Protokoll, Ereignisse und Prüfungen sind gleichartig und gleich wichtig —
   untereinander waren sie drei halbleere Kästen mit viel Weiß rechts daneben.
   Ab 1200px stehen sie nebeneinander; darunter stapeln sie sich wieder, weil
   zwei Spalten dort schmaler wären als lesbar.

   minmax(0,1fr), damit ein langer Eintrag die Spalte nicht aufbläht — dasselbe
   Muster, das schon die ganze Seite breiter gemacht hatte. */
.v-listen{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:1200px){
  .v-listen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Die Prüfliste ist die längste — sie bekommt die volle Breite unter den beiden. */
  .v-listen>.card:last-child{grid-column:1 / -1}
}
.v-listen>.card{margin:0}

/* ── Handy ────────────────────────────────────────────────────────────────────
   Nichts darf breiter sein als der Bildschirm — auch keine Zeile in einer Liste
   und keine Adresse zum Kopieren. */
@media(max-width:640px){
  .queue-item{flex-wrap:wrap}
  .queue-thumb{width:84px;height:47px}
  .queue-aktionen{width:100%;justify-content:flex-end}
  .queue-menue-liste{right:auto;left:0}
  .v-steuerreihe .btn{min-width:0;flex:1}
  .v-sperr{flex-wrap:wrap}
  .v-sperr .btn{width:100%;justify-content:center}
  .v-selbst-form>input[type=text]{min-width:100%}
  .v-selbst-form button{width:100%;justify-content:center}
  .v-kopierzeile input{min-width:100%}
  .v-einstieg,.v-einrichten{margin-left:0;margin-right:0;padding:18px 16px}
  .v-log-kopf time{margin-left:0;width:100%}
  .settings-grid-2,.settings-grid-3{grid-template-columns:minmax(0,1fr)}
}

/* ── Vorschau: Bild statt Schwarz ─────────────────────────────────────────────
   Der YouTube-Player braucht ein bis zwei Sekunden bis zum ersten Bild. Bis dahin
   steht das Vorschaubild da — dasselbe, das gerade in der Liste zu sehen war und
   deshalb schon geladen ist. Verwischt und abgedunkelt, damit man merkt: Es lädt
   noch, das ist nicht das Video. */
#preview-platzhalter{position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  filter:blur(10px) brightness(.55);transform:scale(1.06)}
#preview-platzhalter[hidden]{display:none}
#preview-platzhalter::after{content:"";position:absolute;inset:0;margin:auto;
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:spin 1s linear infinite}
/* Der Container hat bereits position:relative (dashboard.css), der Player liegt
   absolut darin — der Platzhalter also ebenso. */
#preview-player{z-index:2}
@media(prefers-reduced-motion:reduce){#preview-platzhalter::after{animation:none}}

/* Die ganze Zeile der Warteschlange ist anklickbar — nicht nur das kleine Bild. */
.queue-item[role=button]{cursor:pointer}
.queue-item[role=button]:hover{background:rgba(255,255,255,.045)}
.queue-item[role=button]:focus-visible{outline:2px solid var(--wk-accent);outline-offset:2px}
.queue-item .queue-thumb{cursor:inherit}
.v-box-proben{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}

/* ── Zahlenfelder ohne Pfeile ─────────────────────────────────────────────────
   Die kleinen Auf-/Ab-Pfeile des Browsers sitzen rechts im Feld, sind zwei bis
   drei Pixel groß und in keinem Browser gleich. Wer eine Mindestlänge einstellt,
   tippt sie — die Pfeile wären nur mit sehr viel Geduld zu benutzen. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Beschriftungen der Regeln tragen ein Zeichen: In einer Reihe aus sechs Zahlenfeldern
   findet man „Mindestaufrufe" am Auge schneller als am Wort. */
.form-group label .ic{width:15px;height:15px;color:var(--wk-muted);vertical-align:-.2em;margin-right:5px}
.setting-box h4 .ic{width:15px;height:15px;vertical-align:-.2em;margin-right:6px}

/* ── „Video selbst abspielen": alles auf einer Grundlinie ──────────────────────
   Das Adressfeld hatte keine Beschriftung, die beiden Zahlenfelder eine — dadurch
   standen sie unterschiedlich hoch, und der Knopf schwebte dazwischen. Jetzt hat
   jedes Feld eine Beschriftung, und alle sitzen auf derselben Linie. */
/* Eine Zeile, alle Felder auf einer Grundlinie, der Knopf rechts.
   Vorher: Icon über der Beschriftung (das flex-Label stapelte beides), Felder in
   zufälliger Breite, Knopf mittig in einer eigenen Zeile. */
.v-selbst-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.v-selbst-feld{display:flex;flex-direction:column;gap:5px;margin:0;
  font-size:.8rem;color:var(--wk-muted)}
.v-selbst-feld>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.v-selbst-feld>span .ic{width:14px;height:14px;flex:0 0 auto;vertical-align:baseline}
.v-selbst-feld input{margin:0;width:100%}
.v-selbst-breit{flex:1 1 260px;min-width:0}
.v-selbst-dauer{flex:0 0 110px}
.v-selbst-form .btn{flex:0 0 auto;margin-left:auto}
@media(max-width:640px){
  .v-selbst-breit,.v-selbst-dauer{flex:1 1 100%}
  .v-selbst-form .btn{margin-left:0;width:100%;justify-content:center}
}

/* Der Kasten, der sagt, warum ein Video nicht durchgeht. */
.v-regelfrage{margin-top:14px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.10)}
.v-regelfrage.hart{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.10)}
.v-regelfrage>b{display:flex;align-items:center;gap:8px;font-size:.92rem}
.v-regelfrage>b .ic{width:17px;height:17px;color:var(--warning)}
.v-regelfrage.hart>b .ic{color:#f87171}
.v-regelfrage-titel{margin:8px 0 4px;font-weight:600;font-size:.9rem}
.v-regelfrage ul{margin:6px 0 12px;padding-left:20px;color:var(--wk-muted);font-size:.85rem;line-height:1.7}
.v-regelfrage-knoepfe{display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* Zusätzliche Angaben im Vorschaufenster. */
#preview-meta-extra{margin:0}
#preview-meta-extra[hidden]{display:none}
.preview-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.preview-meta .btn{margin-left:auto}

/* Der Hinweis zur Größe der Browserquelle steht direkt unter dem Link, den man kopiert. */
.v-obs-hinweis{display:flex;align-items:center;gap:7px;margin:8px 0 12px;
  color:var(--wk-muted);font-size:.76rem;line-height:1.45}
.v-obs-hinweis .ic{width:14px;height:14px;flex:0 0 auto;vertical-align:baseline}

/* Ist ein Moderator gerade da? */
.v-mod-status{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--wk-muted)}
.v-mod-status.da{color:#22c55e}
.v-punkt{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(34,197,94,.2)}

/* Protokollzeilen mit Video. */
.v-log-marke{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.07);
  font-size:.75rem;font-weight:600;color:var(--wk-text)}
.v-log-approve{background:rgba(34,197,94,.18);color:#22c55e}
.v-log-ban,.v-log-delete{background:rgba(239,68,68,.16);color:#f87171}
.v-log-unban,.v-log-replay,.v-log-play{background:rgba(145,70,255,.18);color:#bf94ff}
.v-log-vid{display:flex;align-items:center;gap:10px;margin-top:8px;padding:6px 9px;
  border-radius:9px;background:rgba(0,0,0,.25);color:var(--wk-text);text-decoration:none;
  transition:background .15s}
.v-log-vid:hover{background:rgba(255,255,255,.07)}
.v-log-vid img{width:52px;height:29px;object-fit:cover;border-radius:5px;background:#000;flex:0 0 auto}
.v-log-vid span{flex:1;min-width:0;font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-log-vid .ic{width:14px;height:14px;color:var(--wk-muted);flex:0 0 auto}
.v-sperr-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.v-sperr-wer{display:inline-flex;align-items:center;gap:5px}

/* Die Wahl, womit die Seite einen zeigt. */
.tw-anzeige{margin-top:14px;padding-top:14px;border-top:1px solid var(--wk-border)}
.tw-anzeige p{margin:5px 0 11px}
.tw-anzeige-wahl{display:flex;gap:8px;flex-wrap:wrap}

/* Die Wiedergabe-Reihe bekommt dieselbe Form wie die Annahme-Reihe darunter:
   Überschrift links, Knöpfe daneben. Vorher stand sie ohne Beschriftung da, und
   die vier Knöpfe sahen aus, als täten sie Verwandtes — sie tun Verschiedenes. */
.v-steuerreihe-erste{margin-top:15px;padding-top:0;border-top:0}
.v-steuerreihe .btn[disabled]{opacity:.5;cursor:not-allowed}

/* ══ Einrichtung — eine eigene Seite, kein Band über dem Dashboard ═════════════
   Vollbild und ohne Live-Steuerung darunter: Was ohne Einrichtung nicht geht,
   soll auch nicht anklickbar dastehen (Faddi, 26.08.). Die Seite lebt deshalb von
   EINER Karte in der Mitte — der aktuelle Schritt — und einer Leiste darüber, die
   den Weg zeigt. Alles andere wäre wieder ein Dashboard.
   ───────────────────────────────────────────────────────────────────────────── */
.v-setup-body{min-height:100vh;display:flex;flex-direction:column;background:var(--wk-bg)}
.v-setup{width:100%;max-width:820px;margin:0 auto;padding:38px 20px 64px;
  display:flex;flex-direction:column;gap:22px;flex:1}

.v-setup-kopf{display:flex;align-items:center;gap:18px}
.v-setup-kopf h1{margin:0 0 6px;font-size:clamp(1.5rem,4.2vw,2rem);line-height:1.2;
  text-wrap:balance;color:var(--wk-text)}
.v-setup-kopf p{margin:0;color:var(--wk-muted);line-height:1.6;max-width:56ch}
.v-setup-mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;
  background:linear-gradient(135deg,rgba(145,70,255,.30),rgba(6,182,212,.20));
  border:1px solid rgba(145,70,255,.35)}
.v-setup-mark .ic{width:30px;height:30px;color:#c4a2ff}

/* Die Leiste zeigt den Weg UND den Stand: erledigte Schritte tragen einen Haken statt
   einer Zahl. Ein Fortschritt, der nur „Schritt 2 von 4" sagt, verschweigt gerade das,
   was man wissen will — nämlich ob Schritt 1 wirklich sitzt. */
.v-setup-leiste{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.v-setup-leiste li{flex:1 1 165px;min-width:0}
.v-setup-leiste a{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;
  background:var(--wk-card);border:1px solid var(--wk-border);text-decoration:none;
  color:var(--wk-muted);font-size:.86rem;transition:border-color .15s,color .15s}
.v-setup-leiste a:hover{border-color:rgba(145,70,255,.45);color:var(--wk-text)}
.v-setup-leiste li.jetzt a{border-color:rgba(145,70,255,.65);color:var(--wk-text);
  background:rgba(145,70,255,.10)}
.v-setup-leiste li.fertig a{color:var(--wk-text)}
.v-setup-nr{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.07);font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.v-setup-leiste li.fertig .v-setup-nr{background:rgba(34,197,94,.22);color:#4ade80}
.v-setup-leiste li.fertig .v-setup-nr .ic{width:13px;height:13px}
.v-setup-name{display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-setup-name .ic{width:15px;height:15px;flex:0 0 auto}

.v-setup-karte{background:var(--wk-card);border:1px solid var(--wk-border);border-radius:18px;
  padding:26px clamp(18px,4vw,32px)}
.v-setup-karte h2{margin:0 0 12px;font-size:1.28rem;display:flex;align-items:center;gap:10px;
  color:var(--wk-text)}
.v-setup-karte h2 .ic{width:21px;height:21px;color:#c4a2ff;flex:0 0 auto}
.v-setup-karte h3{margin:24px 0 12px;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--wk-muted)}
.v-setup-karte>p{color:var(--wk-muted);line-height:1.65;margin:0 0 16px;max-width:62ch}
.v-setup-zahl{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--wk-muted);margin:0 0 14px !important}
.v-noetig{color:#fbbf24;font-weight:600}
.v-optional-m{color:#4ade80;font-weight:600}

.v-setup-form{display:flex;flex-direction:column;gap:15px}
.v-setup-form label{display:flex;flex-direction:column;gap:7px;font-size:.9rem;
  font-weight:500;color:var(--wk-text)}
.v-setup-form label>.ic{width:15px;height:15px}
.v-setup-form input[type=text],.v-setup-form input[type=url],
.v-setup-form input[type=password],.v-setup-form input[type=number]{
  width:100%;padding:11px 13px;border-radius:10px;background:rgba(0,0,0,.28);
  border:1px solid var(--wk-border);color:var(--wk-text);font:inherit;font-size:.94rem}
.v-setup-form input:focus-visible{outline:2px solid rgba(145,70,255,.7);outline-offset:1px;
  border-color:transparent}
/* minmax(0,1fr) statt 1fr: sonst sprengt ein langer Wert die Spalte, statt umzubrechen. */
.v-setup-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px}

/* Die Wahl trägt ihre Begründung mit. „Automatisch" oder „Ich selbst" allein sagt
   niemandem, was danach anders ist — der Satz darunter schon. */
.v-setup-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:11px}
.v-setup-option{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:11px;
  padding:14px;border-radius:13px;background:rgba(0,0,0,.22);border:1px solid var(--wk-border);
  cursor:pointer;transition:border-color .15s,background .15s}
.v-setup-option:hover{border-color:rgba(145,70,255,.45)}
.v-setup-option:has(input:checked){border-color:rgba(145,70,255,.75);background:rgba(145,70,255,.12)}
.v-setup-option:has(input:focus-visible){outline:2px solid rgba(145,70,255,.7);outline-offset:2px}
.v-setup-option input{flex:0 0 auto;margin-top:3px;accent-color:var(--primary);width:17px;height:17px}
.v-setup-option>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.v-setup-option b{display:flex;align-items:center;gap:7px;font-size:.95rem;color:var(--wk-text)}
.v-setup-option b .ic{width:16px;height:16px;flex:0 0 auto}
.v-setup-option small{color:var(--wk-muted);font-size:.83rem;line-height:1.55;
  overflow-wrap:anywhere}

.v-setup-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.v-setup-skip{color:var(--wk-muted);font-size:.87rem;text-decoration:underline;
  text-underline-offset:3px;margin-left:auto}
.v-setup-skip:hover{color:var(--wk-text)}
.v-setup-fertig{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--wk-border)}

/* Neuen Overlay-Link erzeugen: eingeklappt, weil es der seltene Fall ist — aber HIER,
   weil man genau beim Einrichten merkt, dass der alte Link in einer Aufnahme steht. */
.v-setup-neu{margin-top:18px;border:1px solid var(--wk-border);border-radius:12px;
  padding:12px 14px;background:rgba(0,0,0,.18)}
.v-setup-neu summary{cursor:pointer;font-size:.88rem;color:var(--wk-muted);
  display:flex;align-items:center;gap:8px}
.v-setup-neu summary:hover{color:var(--wk-text)}
.v-setup-neu summary .ic{width:15px;height:15px}
.v-setup-neu[open] summary{margin-bottom:10px;color:var(--wk-text)}
.v-setup-neu form{margin-top:10px}

/* Überspringen — mit den Folgen, nicht mit einer Rückfrage. Wer „bist du sicher?" liest,
   klickt Ja; wer liest, dass Zuschauer bezahlen und nichts passiert, überlegt. */
.v-setup-abbruch{display:flex;justify-content:center}
.v-setup-abbruch>details{width:100%;max-width:640px}
.v-setup-abbruch summary{cursor:pointer;text-align:center;color:var(--wk-muted);
  font-size:.88rem;text-decoration:underline;text-underline-offset:3px;list-style:none}
.v-setup-abbruch summary::-webkit-details-marker{display:none}
.v-setup-abbruch summary:hover{color:var(--wk-text)}
.v-setup-warnung{margin-top:14px;padding:18px;border-radius:14px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.38)}
.v-setup-warnung>b{display:flex;align-items:center;gap:9px;color:#fbbf24;font-size:.95rem}
.v-setup-warnung>b .ic{width:17px;height:17px;flex:0 0 auto}
.v-setup-warnung ul{margin:12px 0;padding-left:20px;color:var(--wk-text);
  line-height:1.65;font-size:.9rem}
.v-setup-warnung li+li{margin-top:9px}
.v-setup-warnung form{margin-top:14px}

@media (max-width:560px){
  .v-setup{padding:24px 14px 48px;gap:18px}
  .v-setup-kopf{gap:13px}
  .v-setup-mark{width:44px;height:44px;border-radius:13px}
  .v-setup-mark .ic{width:23px;height:23px}
  .v-setup-leiste li{flex:1 1 100%}
  .v-setup-karte{padding:20px 16px;border-radius:15px}
  .v-setup-skip{margin-left:0;width:100%;text-align:center}
  .v-setup-fuss .btn{flex:1 1 100%;justify-content:center}
}

/* Nachhol-Zeile im Dashboard: nur für den, der die Einrichtung übersprungen hat.
   Sie nennt die FOLGE, nicht den fehlenden Schalter — „kein StreamElements" sagt
   niemandem etwas, „Zuschauer zahlen und es passiert nichts" schon. */
.v-nachhol{display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  margin:0 0 22px;padding:15px 18px;border-radius:14px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.36)}
.v-nachhol-mark{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:10px;background:rgba(245,158,11,.18)}
.v-nachhol-mark .ic{width:18px;height:18px;color:#fbbf24}
.v-nachhol>div{flex:1 1 260px;min-width:0}
.v-nachhol b{display:block;color:#fbbf24;font-size:.93rem;margin-bottom:5px}
.v-nachhol ul{margin:0;padding-left:18px;color:var(--wk-muted);font-size:.85rem;line-height:1.6}
.v-nachhol li+li{margin-top:5px}
.v-nachhol .btn{flex:0 0 auto;margin-left:auto}
@media (max-width:560px){
  .v-nachhol .btn{margin-left:0;width:100%;justify-content:center}
}

/* ══ Der Ausschnitt auf der Spendenseite ═══════════════════════════════════════
   Hier stand „Start: 0s | Ende: 65s". Bei einem Video von zwanzig Minuten sagt
   „735s" niemandem, wo das liegt. Jetzt steht dort 12:15 – 13:20 — dieselbe
   Schreibweise wie unten im Player, also direkt vergleichbar (Faddi, 26.08.).
   ───────────────────────────────────────────────────────────────────────────── */
.v-ausschnitt{margin-top:16px;padding:15px 17px;border-radius:14px;
  background:rgba(145,70,255,.09);border:1px solid rgba(145,70,255,.30)}
.v-ausschnitt-kopf{display:flex;align-items:center;gap:12px}
.v-ausschnitt-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:10px;background:rgba(145,70,255,.20)}
.v-ausschnitt-ic .ic{width:17px;height:17px;color:#c4a2ff}
.v-ausschnitt-kopf>div{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.v-ausschnitt-kopf small{color:var(--wk-muted);font-size:.76rem;letter-spacing:.05em;
  text-transform:uppercase}
.v-ausschnitt-kopf b{font-size:1.15rem;color:var(--wk-text);font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
.v-ausschnitt-laenge{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:.9rem;color:#c4a2ff;padding:5px 10px;border-radius:999px;
  background:rgba(145,70,255,.18)}

.v-ausschnitt-gesamt{flex:0 0 auto;color:var(--wk-muted);font-size:.78rem;
  font-variant-numeric:tabular-nums}

/* Der Streifen beantwortet, was zwei Zahlen nicht beantworten: liegt der Ausschnitt
   am Anfang, in der Mitte oder kurz vor Schluss? */
.v-ausschnitt-balken{position:relative;height:7px;margin:13px 0 12px;border-radius:999px;
  background:rgba(255,255,255,.09);overflow:hidden}
.v-ausschnitt-balken span{position:absolute;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,#9146ff,#06b6d4);transition:left .15s,width .15s}

.v-ausschnitt-knoepfe{display:flex;gap:9px;flex-wrap:wrap}
.v-ausschnitt-knoepfe .btn{flex:1 1 140px;justify-content:center}
/* Die beiden Knöpfe zeigen in entgegengesetzte Richtungen — dasselbe Zeichen
   gespiegelt statt eines zweiten Icons, das nur ungefähr dasselbe meint. */
.v-ausschnitt-knoepfe .btn:first-child .ic{transform:scaleX(-1)}

.v-ausschnitt-warn{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;
  color:#fbbf24;font-size:.83rem;line-height:1.55}
.v-ausschnitt-warn .ic{width:15px;height:15px;flex:0 0 auto;margin-top:2px}
@media (max-width:480px){
  .v-ausschnitt-kopf b{font-size:1.02rem}
  .v-ausschnitt-knoepfe .btn{flex:1 1 100%}
}

/* ── Ein Feld: Zeichen links, Beschriftung und Eingabe rechts ─────────────────
   Vorher war das Zeichen ein direktes Kind des <label> in einer Spalte — es bekam
   dadurch eine eigene Zeile und schwebte über der Beschriftung (Faddi, 26.08.). */
.v-feld{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:12px}
.v-feld-ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;margin-top:20px;
  border-radius:10px;background:rgba(145,70,255,.14);border:1px solid rgba(145,70,255,.24)}
.v-feld-ic .ic{width:16px;height:16px;color:#c4a2ff}
.v-feld-koerper{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.v-feld-name{font-size:.87rem;font-weight:500;color:var(--wk-text);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.v-feld-koerper .v-such{width:100%}
@media (max-width:480px){
  .v-feld-ic{width:30px;height:30px;margin-top:19px}
  .v-feld-ic .ic{width:14px;height:14px}
}

/* ── Die Schrittleiste: Text vollständig, nicht abgeschnitten ─────────────────
   Vorher stand dort „Spenden empfar" und „Regeln für einge" — white-space:nowrap
   mit Ellipse in einer zu schmalen Spalte. Jetzt darf der Text umbrechen; die
   Kacheln wachsen mit, statt den Text zu beschneiden (Faddi, 26.08.). */
.v-setup-leiste li{flex:1 1 190px}
.v-setup-leiste a{align-items:flex-start;min-height:100%}
.v-setup-name{display:flex;align-items:flex-start;gap:7px;min-width:0;
  overflow:visible;text-overflow:clip;white-space:normal;
  line-height:1.35;overflow-wrap:anywhere;hyphens:auto}
.v-setup-name .ic{margin-top:2px}
@media (max-width:700px){
  /* Auf schmalen Geräten ein Streifen zum Wischen statt vier Kacheln übereinander:
     Vier volle Zeilen schoben den eigentlichen Schritt aus dem Bild. */
  .v-setup-leiste{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:4px;scrollbar-width:thin}
  .v-setup-leiste li{flex:0 0 auto;max-width:78vw;scroll-snap-align:start}
  .v-setup-name{white-space:nowrap}
}

/* ── Ausgewählte Moderatoren ──────────────────────────────────────────────────
   Eine Person mit Bild und Namen, daneben ihre Rechte. Ein Anmeldename allein sagt
   nicht, ob man den Richtigen erwischt hat — es gibt „faddi", „faddi4", „faddi_tv". */
.v-gewaehlt{margin-top:18px;padding:15px 16px;border-radius:14px;
  background:rgba(0,0,0,.20);border:1px solid var(--wk-border)}
.v-gewaehlt h3{margin:0 0 10px !important;display:flex;align-items:center;gap:8px}
.v-gewaehlt h3 .ic{width:14px;height:14px}
.v-gewaehlt-zahl{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:rgba(145,70,255,.22);color:#c4a2ff;
  font-size:.76rem;font-weight:700;letter-spacing:0}
.v-gewaehlt-offen{border-color:rgba(245,158,11,.30);background:rgba(245,158,11,.07)}

.v-person{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--wk-border)}
.v-person+.v-person{margin-top:9px}
.v-person-bild{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.v-person-platz{display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#9146ff,#06b6d4)}
.v-person-name{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 130px}
.v-person-name b{color:var(--wk-text);font-size:.93rem;overflow-wrap:anywhere}
.v-person-name small{color:var(--wk-muted);font-size:.78rem;overflow-wrap:anywhere}

.v-person-recht-wahl{display:flex !important;flex-direction:column !important;gap:4px;
  flex:0 1 190px;min-width:0}
.v-person-recht-titel{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--wk-muted)}
.v-person-recht-wahl select{width:100%;padding:8px 10px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid var(--wk-border);color:var(--wk-text);
  font:inherit;font-size:.86rem;cursor:pointer}
.v-person-recht-wahl select:focus-visible{outline:2px solid rgba(145,70,255,.7);outline-offset:1px}
.v-person-weg{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:transparent;border:1px solid var(--wk-border);
  color:var(--wk-muted);cursor:pointer}
.v-person-weg:hover{border-color:rgba(239,68,68,.55);color:#fca5a5;background:rgba(239,68,68,.10)}
.v-person-weg .ic{width:14px;height:14px}

/* Wartende Einladung: Rechte und Zustand als ruhige Angaben, nicht als Bedienelemente. */
.v-person-recht{flex:0 0 auto;font-size:.78rem;color:#c4a2ff;padding:4px 9px;
  border-radius:999px;background:rgba(145,70,255,.16)}
.v-person-status{flex:0 0 auto;font-size:.78rem;color:#fbbf24}

/* Schon ausgewählt: der Vorschlag bleibt sichtbar, aber nicht mehr anklickbar —
   ihn zu verstecken sähe aus, als gäbe es die Person nicht. */
.v-vorschlag:disabled{opacity:.55;cursor:default}
.v-vorschlag:disabled:hover{background:transparent}
.v-vorschlag-schon{margin-left:auto;display:grid;place-items:center}
.v-vorschlag-schon .ic{width:15px;height:15px;color:#4ade80}

@media (max-width:520px){
  .v-person-recht-wahl{flex:1 1 100%}
  .v-person-weg{margin-left:auto}
}

/* ══ Vorschau der Einblendung im Dashboard ════════════════════════════════════
   In dem Rahmen läuft das ECHTE Overlay (?vorschau=1), nicht ein Nachbau. Die Bühne
   ist deshalb 1920×1080 und wird als Ganzes verkleinert: Nur so stimmen die
   Größenverhältnisse. Eine Box mit 480 px sähe in einem 600 px breiten Rahmen sonst
   riesig aus und im Stream winzig (Faddi, 26.08.). */
.v-box-buehne{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 20px;
  border-radius:14px;overflow:hidden;border:1px solid var(--wk-border);
  /* Schachbrett = "hier ist der Stream durchsichtig". Ein schwarzer Grund sähe aus,
     als läge unter der Box eine schwarze Fläche — die gibt es in OBS nicht. */
  background-color:#11151f;
  background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%),
                   linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%);
  background-size:26px 26px;background-position:0 0,13px 13px}
.v-box-buehne-innen{position:absolute;inset:0}
/* Der Verkleinerungsfaktor kommt aus dem Skript (Bühnenbreite / 1920). In reinem CSS
   ginge nur calc(100cqw / 1920px) — eine Division von Länge durch Länge, die längst
   nicht überall rechnet. Ein falsch verstandenes calc() ergäbe hier eine ungültige
   Regel und damit eine Vorschau in Originalgröße: ein Ausschnitt der linken oberen
   Ecke statt des Bildes. Der Vorgabewert unten trägt, bis das Skript misst. */
.v-box-buehne{--v-skala:.32}
.v-box-buehne iframe{position:absolute;top:0;left:0;width:1920px;height:1080px;border:0;
  transform-origin:top left;transform:scale(var(--v-skala));pointer-events:none}
.v-box-buehne-marke{position:absolute;left:10px;top:10px;z-index:2;display:flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  color:var(--wk-muted);font-size:.72rem;letter-spacing:.04em;pointer-events:none}
.v-box-buehne-marke .ic{width:13px;height:13px}


/* ══ Moderator-Einladungen ════════════════════════════════════════════════════
   Eine Einladung ist eine Entscheidung — sie braucht die Form einer Entscheidung:
   wer fragt, was daraus folgt, ja/nein. Vorher war es ein Block Fließtext mit einer
   Zeile pro Kanal darunter (Faddi, 26.08.). */
.v-einladungen{margin:0 0 24px;padding:20px clamp(16px,3vw,24px);border-radius:18px;
  background:linear-gradient(135deg,rgba(145,70,255,.13),rgba(6,182,212,.07));
  border:1px solid rgba(145,70,255,.34)}
.v-einladungen-kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.v-einladungen-zeichen{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:13px;background:rgba(145,70,255,.22);border:1px solid rgba(145,70,255,.34)}
.v-einladungen-zeichen .ic{width:20px;height:20px;color:#c4a2ff}
.v-einladungen-kopf>div{flex:1 1 220px;min-width:0}
.v-einladungen-kopf h2{margin:0 0 3px;font-size:1.2rem;color:var(--wk-text);line-height:1.25}
.v-einladungen-kopf p{margin:0;color:var(--wk-muted);font-size:.85rem}
.v-einladungen-aus{flex:0 0 auto;margin-left:auto}

.v-einladung-karte{padding:16px;border-radius:15px;background:rgba(0,0,0,.28);
  border:1px solid var(--wk-border)}
.v-einladung-karte+.v-einladung-karte{margin-top:12px}
.v-einladung-wer{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.v-einladung-bild{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid rgba(145,70,255,.45)}
.v-einladung-wer>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.v-einladung-wer b{font-size:1.02rem;color:var(--wk-text);overflow-wrap:anywhere}
.v-einladung-wer small{color:var(--wk-muted);font-size:.79rem;overflow-wrap:anywhere}

/* Die drei Punkte beantworten genau das, was man sich vor dem Annehmen fragt — und der
   dritte nimmt die größte Sorge: Der eigene Kanal bleibt unberührt. */
.v-einladung-punkte{list-style:none;margin:0 0 16px;padding:0;display:flex;
  flex-direction:column;gap:9px}
.v-einladung-punkte li{display:flex;align-items:flex-start;gap:9px;
  color:var(--wk-muted);font-size:.87rem;line-height:1.55}
.v-einladung-punkte .ic{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:#c4a2ff}

.v-einladung-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.v-einladung-knoepfe .btn{flex:1 1 150px;justify-content:center}
.v-einladung-fuss{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  color:var(--wk-muted);font-size:.79rem;line-height:1.55}
.v-einladung-fuss .ic{width:14px;height:14px;flex:0 0 auto;margin-top:2px}
.v-einladung-fuss code{background:rgba(0,0,0,.4);padding:2px 6px;border-radius:6px;
  font-size:.95em;overflow-wrap:anywhere}

@media (max-width:600px){
  .v-einladungen-aus{margin-left:0;width:100%}
  .v-einladungen-aus .btn{width:100%;justify-content:center}
  .v-einladung-knoepfe .btn{flex:1 1 100%}
}

/* ── Offene Einladungen (verschickt, noch nicht angenommen) ─────────────────── */
.v-offene{margin:0 0 18px;padding:14px 15px;border-radius:14px;
  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.28)}
.v-offene-kopf{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.v-offene-kopf b{display:flex;align-items:center;gap:8px;color:#fbbf24;font-size:.9rem}
.v-offene-kopf b .ic{width:14px;height:14px}
.v-offene-kopf small{color:var(--wk-muted);font-size:.79rem}
.v-offene .v-person{background:rgba(0,0,0,.24)}
.v-offene .v-person form{margin:0;margin-left:auto}

/* ── Das Rechte-Auswahlfeld ─────────────────────────────────────────────────────
   Ein nacktes <select> trug den Systempfeil und den Systemrahmen und stand als
   einziges Element der Zeile in einer anderen Formensprache. Der Pfeil ist jetzt
   gezeichnet, der Rest folgt den übrigen Feldern (Faddi, 26.08.).
   Die aufgeklappte Liste zeichnet weiterhin das Betriebssystem — daran kommt kein
   Stylesheet heran, und ein nachgebautes Menü wäre für vier Einträge zu viel. */
.v-person-recht-wahl select,.v-setup-form select{
  appearance:none;-webkit-appearance:none;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.v-person-recht-wahl select:hover{border-color:rgba(145,70,255,.45)}
/* Firefox färbt die Einträge sonst hell auf hell. */
.v-person-recht-wahl select option,.v-setup-form select option{background:#161d2c;color:#e5e7eb}

/* ══ Lange Namen ══════════════════════════════════════════════════════════════
   „aufschmeckedischmackedi" lief aus der Profilkarte heraus und schob die Knöpfe
   darunter mit (Faddi, 26.08.). anywhere statt break-word: break-word bricht nur
   an Wortgrenzen, und genau daran fehlt es bei einem Twitch-Namen. */
.v-name-lang,.profile-card h3{overflow-wrap:anywhere;word-break:normal;hyphens:auto;
  max-width:100%;line-height:1.25;text-wrap:balance}
.v-mod-name b,.v-mod-name small,.v-person-name b,.v-person-name small,
.v-einladung-wer b,.v-einladung-wer small,.v-konto span,.queue-donor,.queue-title{
  overflow-wrap:anywhere}
/* Der Name in der Kopfzeile darf die Leiste nicht sprengen — dort wird gekürzt,
   weil eine zweizeilige Kopfzeile schlimmer ist als ein Auslassungszeichen. */
.v-konto span{display:inline-block;max-width:min(180px,32vw);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* ══ „Was du hier darfst" ═════════════════════════════════════════════════════
   Ein Moderator sah eine Oberfläche, in der manche Knöpfe da waren und andere
   nicht — ohne zu erfahren, warum. Eine fehlende Schaltfläche sieht dann aus wie
   ein Fehler (Faddi, 26.08.). */
.v-meine-rechte{margin:14px 0 0;border-radius:13px;background:rgba(0,0,0,.24);
  border:1px solid var(--wk-border);overflow:hidden;text-align:left}
.v-meine-rechte summary{display:flex;align-items:center;gap:11px;padding:12px 13px;
  cursor:pointer;list-style:none}
.v-meine-rechte summary::-webkit-details-marker{display:none}
.v-meine-rechte summary:hover{background:rgba(255,255,255,.035)}
.v-meine-ic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;background:rgba(145,70,255,.18)}
.v-meine-ic .ic{width:15px;height:15px;color:#c4a2ff}
.v-meine-titel{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.v-meine-titel b{font-size:.88rem;color:var(--wk-text)}
.v-meine-titel small{font-size:.76rem;color:var(--wk-muted);font-variant-numeric:tabular-nums}
.v-meine-rechte .toggle-arrow{flex:0 0 auto;transition:transform .18s}
.v-meine-rechte .toggle-arrow .ic{width:15px;height:15px;color:var(--wk-muted)}
.v-meine-rechte[open] .toggle-arrow{transform:rotate(180deg)}
.v-meine-inhalt{padding:0 13px 14px;border-top:1px solid var(--wk-border);padding-top:12px}

.v-meine-gruppe{display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:#4ade80}
.v-meine-gruppe .ic{width:13px;height:13px}
.v-meine-aus{color:var(--wk-muted);margin-top:15px}
.v-meine-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.v-meine-liste li{display:flex;align-items:flex-start;gap:8px}
.v-meine-liste .ic{width:14px;height:14px;flex:0 0 auto;margin-top:3px;color:#4ade80}
.v-meine-liste span{display:flex;flex-direction:column;gap:1px;min-width:0}
.v-meine-liste b{font-size:.85rem;color:var(--wk-text);overflow-wrap:anywhere}
.v-meine-liste small{font-size:.77rem;color:var(--wk-muted);line-height:1.5;overflow-wrap:anywhere}
/* Was fehlt, steht ruhiger da: Es ist eine Auskunft, kein Fehler. */
.v-meine-liste-aus{flex-direction:row;flex-wrap:wrap;gap:6px}
.v-meine-liste-aus li{padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--wk-border);opacity:.72}
.v-meine-liste-aus .ic{width:11px;height:11px;margin-top:4px;color:var(--wk-muted)}
.v-meine-liste-aus b{font-size:.78rem;font-weight:500;color:var(--wk-muted)}
.v-meine-inhalt .v-klein{display:flex;align-items:flex-start;gap:7px;margin-top:14px}
.v-meine-inhalt .v-klein .ic{width:13px;height:13px;flex:0 0 auto;margin-top:2px}

/* Der Winku-Name unter dem Twitch-Namen bei wartenden Einladungen: zwei Namen, zwei Zeichen —
   damit die Frage „ist das dieselbe Person?" beantwortet ist, ohne dass man raten muss. */
.v-person-name b{display:flex;align-items:center;gap:6px}
.v-person-name b .ic{width:13px;height:13px;flex:0 0 auto;color:#a970ff}
.v-person-winku{display:flex;align-items:center;gap:5px;color:#c4a2ff !important}
.v-person-winku .ic{width:11px;height:11px;flex:0 0 auto}

/* Die Rechte-Vorlage direkt neben dem Namensfeld beim Einladen. */
.v-mod-vorlage{display:flex;flex-direction:column;gap:5px;flex:0 1 190px;min-width:0}
.v-mod-vorlage span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--wk-muted)}
.v-mod-vorlage select{width:100%;padding:9px 32px 9px 11px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid var(--wk-border);color:var(--wk-text);
  font:inherit;font-size:.86rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.v-mod-vorlage select option{background:#161d2c;color:#e5e7eb}
@media (max-width:560px){ .v-mod-vorlage{flex:1 1 100%} }

/* ══ Einladung über der Einrichtung ═══════════════════════════════════════════
   Wer eingeladen wurde, will nicht seinen eigenen Kanal einrichten — er will
   annehmen. Die Einrichtung bleibt sichtbar dahinter, damit klar ist, dass sie
   nicht weg ist; sie ist nur gerade nicht die Frage (Faddi, 26.08.). */
.v-inv-schleier{position:fixed;inset:0;z-index:80;background:rgba(4,6,12,.72);
  backdrop-filter:blur(4px)}
.v-inv-fenster{position:fixed;z-index:81;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 28px));max-height:min(88vh,820px);
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:#12172a;border:1px solid rgba(145,70,255,.32);
  box-shadow:0 28px 70px rgba(0,0,0,.62);
  animation:v-inv-ein .22s cubic-bezier(.2,.8,.3,1)}
@keyframes v-inv-ein{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){ .v-inv-fenster{animation:none} }

.v-inv-kopf{display:flex;align-items:center;gap:14px;padding:19px 20px;
  background:linear-gradient(135deg,rgba(145,70,255,.18),rgba(6,182,212,.08));
  border-bottom:1px solid var(--wk-border)}
.v-inv-zeichen{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;
  border-radius:12px;background:rgba(145,70,255,.24);border:1px solid rgba(145,70,255,.34)}
.v-inv-zeichen .ic{width:19px;height:19px;color:#c4a2ff}
.v-inv-kopf h2{margin:0 0 2px;font-size:1.15rem;color:var(--wk-text);line-height:1.25}
.v-inv-kopf p{margin:0;font-size:.82rem;color:var(--wk-muted)}

.v-inv-koerper{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 20px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.34) transparent}
.v-inv-koerper::-webkit-scrollbar{width:8px}
.v-inv-koerper::-webkit-scrollbar-track{background:transparent}
.v-inv-koerper::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
.v-inv-koerper .v-einladung-karte+.v-einladung-karte{margin-top:0}

.v-inv-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 20px;border-top:1px solid var(--wk-border);background:rgba(0,0,0,.24)}
.v-inv-fuss form{margin:0;margin-left:auto}
.v-inv-spaeter{color:var(--wk-muted);font-size:.85rem;text-decoration:underline;
  text-underline-offset:3px}
.v-inv-spaeter:hover{color:var(--wk-text)}
@media (max-width:520px){
  .v-inv-fuss{flex-direction:column;align-items:stretch}
  .v-inv-fuss form{margin-left:0}
  .v-inv-fuss .btn{width:100%;justify-content:center}
  .v-inv-spaeter{text-align:center}
}

/* ══ Spendenseite: Titel, Beschreibung, Auswertung ════════════════════════════ */
.v-seitenkopf .v-seitentext{max-width:60ch;margin:12px auto 0;color:var(--wk-muted);
  line-height:1.65;font-size:.92rem;overflow-wrap:anywhere}
.v-seite-bearb{margin-top:14px}
.v-seite-bearb .ic{width:14px;height:14px}

.v-stats{margin-top:26px;padding:20px clamp(15px,3vw,22px);border-radius:16px;
  background:var(--wk-card);border:1px solid var(--wk-border)}
.v-stats-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:10px;margin-bottom:18px}
.v-stats-kachel{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:12px;
  background:rgba(0,0,0,.24);border:1px solid var(--wk-border);min-width:0}
.v-stats-wert{font-size:1.3rem;font-weight:800;color:var(--wk-text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.v-stats-name{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--wk-muted);
  letter-spacing:.04em;text-transform:uppercase}
.v-stats-name .ic{width:12px;height:12px}
/* Der Spitzenplatz bekommt Farbe — er ist die einzige Kachel, die eine Person nennt. */
.v-stats-top{background:linear-gradient(135deg,rgba(145,70,255,.16),rgba(6,182,212,.08));
  border-color:rgba(145,70,255,.34)}
.v-stats-top .v-stats-name{color:#c4a2ff}
.v-stats-top .v-stats-wert{font-size:1.05rem}

.v-stats-titel{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 12px;
  font-size:.95rem;color:var(--wk-text)}
.v-stats-titel .ic{width:15px;height:15px;color:#c4a2ff;align-self:center}
.v-stats-titel small{color:var(--wk-muted);font-size:.78rem;font-weight:400}
.v-stats-leer{margin:0;color:var(--wk-muted);font-size:.87rem}
.v-stats-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.v-stats-liste li{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.035);border:1px solid var(--wk-border)}
.v-stats-bild{width:58px;height:33px;border-radius:6px;object-fit:cover;flex:0 0 auto;
  background:rgba(0,0,0,.4)}
.v-stats-mitte{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.v-stats-mitte b{font-size:.87rem;color:var(--wk-text);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.v-stats-mitte small{display:flex;align-items:center;gap:5px;font-size:.76rem;color:var(--wk-muted);
  overflow-wrap:anywhere}
.v-stats-mitte small .ic{width:11px;height:11px;flex:0 0 auto}
.v-stats-rechts{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.v-stats-rechts b{font-size:.88rem;color:#c4a2ff;font-variant-numeric:tabular-nums}
.v-stats-rechts small{display:flex;align-items:center;gap:4px;font-size:.74rem;color:var(--wk-muted);
  font-variant-numeric:tabular-nums}
.v-stats-rechts small .ic{width:11px;height:11px}
@media (max-width:460px){
  .v-stats-bild{width:44px;height:25px}
  .v-stats-liste li{gap:8px;padding:8px}
}

/* ── Das Bearbeiten-Fenster ──────────────────────────────────────────────────── */
.v-sk-schleier{position:fixed;inset:0;z-index:90;background:rgba(4,6,12,.72);backdrop-filter:blur(4px)}
body.sk-offen{overflow:hidden}
.v-sk-fenster{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1000px,calc(100vw - 24px));height:min(88vh,880px);
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:#12172a;border:1px solid rgba(145,70,255,.3);
  box-shadow:0 28px 70px rgba(0,0,0,.62);text-align:left}
.v-sk-fenster[hidden],.v-sk-schleier[hidden]{display:none !important}

.v-sk-kopf{display:flex;align-items:flex-start;gap:13px;padding:16px 19px;
  border-bottom:1px solid var(--wk-border);background:rgba(145,70,255,.10)}
.v-sk-zeichen{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;
  border-radius:11px;background:rgba(145,70,255,.22)}
.v-sk-zeichen .ic{width:17px;height:17px;color:#c4a2ff}
.v-sk-kopf>div{flex:1 1 auto;min-width:0}
.v-sk-kopf h2{margin:0 0 2px;font-size:1.05rem;color:var(--wk-text)}
.v-sk-kopf p{margin:0;font-size:.79rem;color:var(--wk-muted);line-height:1.5}
.v-sk-zu{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:transparent;border:1px solid var(--wk-border);color:var(--wk-muted);cursor:pointer}
.v-sk-zu:hover{background:rgba(255,255,255,.07);color:var(--wk-text)}
.v-sk-zu .ic{width:14px;height:14px}

/* Links stellt man ein, rechts sieht man es. Unter 900px untereinander — zwei Spalten
   wären dort schmaler als lesbar. */
.v-sk-koerper{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){ .v-sk-koerper{grid-template-columns:1fr;overflow-y:auto} }

.v-sk-form{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:17px 19px;
  display:flex;flex-direction:column;gap:14px;margin:0;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.34) transparent}
.v-sk-form::-webkit-scrollbar{width:8px}
.v-sk-form::-webkit-scrollbar-track{background:transparent}
.v-sk-form::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}

.v-sk-feld{display:flex;flex-direction:column;gap:6px}
.v-sk-feld>span{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:.83rem;font-weight:500;color:var(--wk-text)}
.v-sk-feld output{color:#c4a2ff;font-variant-numeric:tabular-nums;font-weight:700}
.v-sk-feld input[type=text],.v-sk-feld textarea,.v-sk-feld select{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  background:rgba(0,0,0,.32);border:1px solid var(--wk-border);color:var(--wk-text);
  font:inherit;font-size:.89rem;resize:vertical}
.v-sk-feld select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.v-sk-feld select option{background:#161d2c;color:#e5e7eb}
.v-sk-feld input[type=range]{width:100%;accent-color:var(--primary)}
.v-sk-trenner{border:0;border-top:1px solid var(--wk-border);margin:2px 0}

.v-sk-schalter{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.v-sk-schalter input{flex:0 0 auto;margin-top:2px;width:17px;height:17px;accent-color:var(--primary)}
.v-sk-schalter b{display:block;font-size:.9rem;color:var(--wk-text)}
.v-sk-schalter small{display:block;font-size:.78rem;color:var(--wk-muted);line-height:1.55;margin-top:2px}
.v-sk-haupt{padding:12px 13px;border-radius:12px;background:rgba(145,70,255,.10);
  border:1px solid rgba(145,70,255,.3)}

/* Ausgegraut statt versteckt: So sieht man beim Einschalten sofort, was es einzustellen gibt. */
.v-sk-abhaengig{display:flex;flex-direction:column;gap:14px;transition:opacity .18s}
.v-sk-abhaengig.aus{opacity:.42;pointer-events:none}

.v-sk-gruppe{border:0;margin:0;padding:0}
.v-sk-gruppe legend{padding:0;margin:0 0 8px;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--wk-muted)}
.v-sk-wahl{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:10px;
  background:rgba(0,0,0,.22);border:1px solid var(--wk-border);cursor:pointer}
.v-sk-wahl+.v-sk-wahl{margin-top:7px}
.v-sk-wahl input{flex:0 0 auto;margin-top:2px;accent-color:var(--primary)}
.v-sk-wahl:has(input:checked){border-color:rgba(145,70,255,.7);background:rgba(145,70,255,.12)}
.v-sk-wahl b{display:block;font-size:.85rem;color:var(--wk-text)}
.v-sk-wahl small{display:block;font-size:.76rem;color:var(--wk-muted);margin-top:1px}

.v-sk-haken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:7px}
.v-sk-haken-eins{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:rgba(0,0,0,.2);border:1px solid var(--wk-border);cursor:pointer;font-size:.82rem}
.v-sk-haken-eins:has(input:checked){border-color:rgba(145,70,255,.5);background:rgba(145,70,255,.10)}
.v-sk-haken-eins input{accent-color:var(--primary);flex:0 0 auto}

.v-sk-recht{display:flex;align-items:flex-start;gap:8px;margin:0;padding:11px 12px;
  border-radius:11px;background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.24);
  color:var(--wk-muted);font-size:.775rem;line-height:1.55}
.v-sk-recht .ic{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:#7dd3fc}

.v-sk-vorschau{min-height:0;display:flex;flex-direction:column;
  border-left:1px solid var(--wk-border);background:rgba(0,0,0,.22)}
@media (max-width:900px){ .v-sk-vorschau{border-left:0;border-top:1px solid var(--wk-border)} }
.v-sk-vorschau-kopf{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:10px 19px;
  border-bottom:1px solid var(--wk-border);color:var(--wk-muted);
  font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}
.v-sk-vorschau-kopf .ic{width:13px;height:13px}
.v-sk-buehne{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px 19px;text-align:center;
  scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.34) transparent}
.v-sk-buehne::-webkit-scrollbar{width:8px}
.v-sk-buehne::-webkit-scrollbar-track{background:transparent}
.v-sk-buehne::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
.v-sk-buehne h1{margin:0 0 4px;font-size:1.4rem;color:var(--wk-text);overflow-wrap:anywhere}
.v-sk-buehne .text-muted{margin:0;font-size:.85rem}
.v-sk-buehne .v-stats{text-align:left;margin-top:20px}

.v-sk-fuss{flex:0 0 auto;display:flex;gap:9px;justify-content:flex-end;padding:12px 19px;
  border-top:1px solid var(--wk-border);background:rgba(0,0,0,.24)}
@media (max-width:520px){
  .v-sk-fenster{width:calc(100vw - 12px);height:calc(100vh - 12px);border-radius:14px}
  .v-sk-fuss .btn{flex:1 1 0;justify-content:center}
}