/* arabxhabub.de - Website + Admin
   Bewusst leicht: keine Frameworks, keine externen Fonts, kein Build-Schritt.

   Die Startseite (.home-body) hat einen animierten Hintergrund, alles dazu
   steht im Abschnitt "Startseite" weiter unten und in home.js. Admin und
   Control bleiben absichtlich statisch. Overlays haben ihr eigenes
   overlay.css. Animiert wird ausschließlich transform und opacity. */

:root {
  --bg: #0a0c11;
  --bg-soft: #0e121a;
  --surface: #12161f;
  --surface-2: #161b26;
  --line: #222938;
  --line-strong: #2e3648;
  --text: #e9edf6;
  --muted: #97a1b6;
  --cyan: #22d3ee;
  --purple: #a855f7;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --radius: 14px;
  --maxw: 1160px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Startseite. Alles Farbige läuft über diese Variablen, damit der
     Hell-Modus weiter unten nur sie überschreiben muss. */
  --page: #07080d;
  --text-strong: #f3f6ff;
  --nav-link: rgba(233, 237, 246, 0.62);
  --nav-link-on: #ffffff;
  --nav-halo: 0 0 18px rgba(34, 211, 238, 0.55);
  --scrim: rgba(7, 8, 13, 0.72);
  --glass: rgba(16, 20, 29, 0.55);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-shadow: none;
  --accent-line: rgba(34, 211, 238, 0.32);
  --ring: rgba(34, 211, 238, 0.18);
  --hint: rgba(233, 237, 246, 0.42);
  --wash-a: rgba(34, 211, 238, 0.17);
  --wash-b: rgba(168, 85, 247, 0.16);
  --cursor-glow: rgba(125, 220, 255, 0.12);
  --seam: rgba(168, 214, 240, 0.5);
  --seam-a: rgba(34, 211, 238, 0.13);
  --seam-b: rgba(168, 85, 247, 0.13);
  --glow-a: rgba(34, 211, 238, 0.28);
  --glow-b: rgba(168, 85, 247, 0.28);

  /* Winkel des Schnitts im Hero. Flacher als 103deg, weil die Namen sonst
     oben rechts und unten links in die Linie laufen. */
  --slash: 100deg;
}

/* Hell-Modus. Nur die Startseite setzt data-theme, Admin und Control bleiben
   bewusst dunkel.

   Das ist keine Umkehrung der dunklen Werte: halbdurchsichtige Flächen wirken
   auf Hell schmutzig, deshalb sind Karten hier deckend weiß mit Schatten. Die
   Farbflächen im Hintergrund liegen deutlich schwächer, sonst färben sie
   das Weiß ein. */
[data-theme='light'] {
  --bg: #f4f6fa;
  --bg-soft: #edf0f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: #e3e8f1;
  --line-strong: #ccd5e4;
  --text: #12161f;
  --muted: #59637a;
  --cyan: #0b7f97;
  --purple: #6d28d9;
  --green: #05765a;
  --amber: #8a5a04;
  --red: #c0322c;

  --page: #f7f9fc;
  --text-strong: #0b0e15;
  --nav-link: rgba(18, 22, 31, 0.6);
  --nav-link-on: #0b0e15;
  --nav-halo: none;
  --scrim: rgba(247, 249, 252, 0.84);
  --glass: #ffffff;
  --glass-line: rgba(18, 22, 31, 0.09);
  --glass-shadow: 0 1px 2px rgba(18, 22, 31, 0.04),
    0 10px 28px rgba(18, 22, 31, 0.06);
  --accent-line: rgba(11, 127, 151, 0.4);
  --ring: rgba(11, 127, 151, 0.12);
  --hint: rgba(18, 22, 31, 0.42);
  --wash-a: rgba(56, 189, 248, 0.14);
  --wash-b: rgba(168, 85, 247, 0.1);
  --cursor-glow: rgba(56, 189, 248, 0.09);
  --seam: rgba(64, 82, 110, 0.4);
  --seam-a: rgba(11, 127, 151, 0.09);
  --seam-b: rgba(109, 40, 217, 0.09);
  --glow-a: rgba(11, 127, 151, 0.14);
  --glow-b: rgba(109, 40, 217, 0.14);
}

* {
  box-sizing: border-box;
}

/* Das Attribut hidden muss gewinnen.
   Der Browser setzt dafür nur [hidden] { display: none } - und jede eigene
   Regel mit display schlägt das, weil eigene Regeln vor der Browservorgabe
   kommen. Ein Kasten mit "display: grid" stand deshalb offen da, obwohl
   JavaScript ihn für geschlossen hielt. Solche Fehler sind von aussen nicht
   zu sehen und kosten eine halbe Stunde Suche, also hier einmal für alle. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* Nur für Screenreader - z.B. die H1 der Startseite, deren Text als
   Split-Hero gestaltet ist. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand .x {
  color: var(--cyan);
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
}

/* Das Kanalbild auf der Mod-Seite. Es steht an der Stelle des Punktes, damit
   die Kopfzeile nicht springt, wenn das Profil nachgeladen wird. */
.cowner-bild {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

/* ---------- Header ---------- */

/* Schwebt über dem Hintergrund: kein Rahmen, keine Fläche. Erst beim
   Scrollen kommt ein leiser Schleier dazu, sonst treffen Menütexte auf
   Kartentexte. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
}

/* Der Schleier liegt in einer eigenen Ebene und wird nur ein- und
   ausgeblendet. Kein backdrop-filter: das müsste den Bereich hinter der
   Leiste bei jedem Scrollbild neu unscharf rechnen. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim) 62%, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  gap: 12px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav a {
  position: relative;
  padding: 9px 15px;
  border: 1px solid transparent; /* gleiche Höhe wie der Admin-Knopf */
  border-radius: 999px;
  color: var(--nav-link);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.nav a:hover {
  color: var(--nav-link-on);
  text-shadow: var(--nav-halo);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav a:hover::after {
  opacity: 1;
  transform: none;
}

/* Der einzige Punkt im Menü, der wegführt statt zu scrollen - deshalb als
   Pille und ohne den Unterstrich der anderen Links. */
.nav a.is-login {
  margin-left: 8px;
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.3);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.nav a.is-login:hover {
  border-color: rgba(34, 211, 238, 0.75);
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.22);
  text-shadow: none;
}

.nav a.is-login::after {
  display: none;
}

.nav-toggle {
  display: none;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Hell/Dunkel ---------- */

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: transparent;
  color: var(--nav-link);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.theme-toggle:hover {
  color: var(--nav-link-on);
  border-color: var(--accent-line);
  box-shadow: 0 0 22px var(--ring);
}

/* Beide Zeichen liegen in derselben Zelle übereinander, sichtbar ist
   immer das, wohin der Klick führt.

   Die Träger sind ausdrücklich aufgezählt statt nur .ico: das Dashboard
   nutzt dieselben Zeichen im Popout, aber ein blankes .ico würde jedem
   späteren Element mit dem Namen etwas verpassen. */
.theme-toggle .ico,
.dpop-ico .ico {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ico.sun {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -8px 0 -1.5px, 0 8px 0 -1.5px, -8px 0 0 -1.5px, 8px 0 0 -1.5px,
    -5.5px -5.5px 0 -2px, 5.5px 5.5px 0 -2px, -5.5px 5.5px 0 -2px,
    5.5px -5.5px 0 -2px;
}

/* Sichel: ein Kreis, aus dem ein innerer Schatten das Stück herausschneidet */
.ico.moon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset -4px -1px 0 0 currentColor;
  opacity: 0;
  transform: scale(0.4) rotate(80deg);
}

[data-theme='light'] .ico.sun {
  opacity: 0;
  transform: scale(0.4) rotate(-80deg);
}

[data-theme='light'] .ico.moon {
  opacity: 1;
  transform: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease,
    color 0.12s ease;
}

.btn:hover {
  border-color: var(--cyan);
  color: #fff;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  border-color: transparent;
  color: #06111a;
}

.btn-primary:hover {
  color: #06111a;
  filter: brightness(1.08);
}

.btn-ghost {
  background: transparent;
}

.btn-sm {
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 9px;
}

.btn-danger:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ========== Startseite ========== */

.home-body {
  background: var(--page);
}

.home-body main,
.home-body .site-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Hintergrund ---------- */

/* Liegt fest hinter dem Inhalt und zieht sich damit über die ganze Seite.

   Bewusst ohne filter: blur(). Eine unscharfe Fläche muss der Browser bei
   jeder Bewegung neu berechnen - genau das hat die Seite ausgebremst.
   Farbverläufe sind von sich aus weich, werden einmal gezeichnet und danach
   nur noch verschoben. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--page);
}

/* Die beiden weichen Lichter unten. Animiert wird ausschließlich
   translate3d, deshalb keine Neuberechnung pro Bild. */
.bg-wash {
  position: absolute;
  width: 72vw;
  height: 72vw;
  border-radius: 50%;
}

.bg-wash.a {
  left: -18vw;
  bottom: -38vw;
  background: radial-gradient(circle, var(--wash-a), transparent 68%);
  animation: wash-a 36s ease-in-out infinite alternate;
}

.bg-wash.b {
  right: -20vw;
  bottom: -42vw;
  background: radial-gradient(circle, var(--wash-b), transparent 68%);
  animation: wash-b 46s ease-in-out infinite alternate;
}

@keyframes wash-a {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(6vw, -6vh, 0);
  }
}

@keyframes wash-b {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-7vw, -3vh, 0);
  }
}

.bg-sparks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Folgt dem Zeiger, Position setzt home.js über transform. */
.bg-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cursor-glow), transparent 66%);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ---------- Split-Hero ---------- */

.split {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); /* volle Höhe, sonst kein Versatz */
  align-items: center;
  padding: 120px 0 130px;
}

/* Der Schnitt läuft als Verlauf über die volle Fläche und sitzt dadurch bei
   jedem Seitenverhältnis gleich - er wirkt im Bildschirm eingebaut statt
   zwischen die Namen gesetzt. Der Kern ist bewusst kein Weiß, sondern nimmt
   die Farben des Hintergrunds auf. Die Maske lässt ihn oben und unten
   auslaufen, sonst endet er beim Scrollen mit einer harten Kante. */
.seam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    var(--slash),
    transparent calc(50% - 80px),
    var(--seam-a) calc(50% - 2px),
    var(--seam) calc(50% - 0.7px),
    var(--seam) calc(50% + 0.7px),
    var(--seam-b) calc(50% + 2px),
    transparent calc(50% + 80px)
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 18%,
    #000 72%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    #000 18%,
    #000 72%,
    transparent
  );
  animation: seam-in 0.95s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes seam-in {
  from {
    opacity: 0;
    transform: scale3d(1, 0.05, 1);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.side {
  position: relative;
  z-index: 1;
  min-width: 0;
  transition: opacity 0.4s ease;
}

/* Arab unten links, Habub oben rechts - die Diagonale folgt dem Schnitt.
   Der Innenabstand hält beide vom Schnitt weg; am engsten wird es dort, wo
   die Linie am weitesten aussen liegt, deshalb ist er so großzügig. */
.side.left {
  justify-self: end;
  align-self: end;
  text-align: right;
  padding-right: clamp(24px, 6.5vw, 120px);
}

.side.right {
  justify-self: start;
  align-self: start;
  text-align: left;
  padding-left: clamp(24px, 6.5vw, 120px);
}

/* Platz für die Bilder: bei Arab über dem Namen, bei Habub darunter. Der
   Platz bleibt zu, solange keine Datei da ist - home.js öffnet ihn erst,
   wenn das Bild wirklich geladen wurde. So verschiebt sich nichts und es
   hängt kein kaputtes Bildsymbol im Hero. */
.shot {
  display: block;
  height: 0;
  overflow: hidden;
}

.shot.has-shot {
  height: clamp(150px, 22vh, 280px);
}

.side.left .shot.has-shot {
  margin-bottom: 18px;
}

.side.right .shot.has-shot {
  margin-top: 18px;
}

.shot img {
  display: block;
  height: 100%;
  width: auto;
  max-width: min(100%, 420px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.side.left .shot img {
  margin-left: auto; /* rechts anschlagen wie der Name */
}

.shot img.is-ready {
  opacity: 1;
}

.side .name {
  display: block;
  font-size: clamp(44px, 9vw, 132px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--text-strong);
  transition: text-shadow 0.4s ease;
}

.side .handle {
  display: block;
  margin-top: 16px;
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s ease;
}

/* Die Farbe hängt an der Seite, nicht am Namen - so passt sie immer zur
   Hälfte des Hintergrunds, egal wer links steht. */
.side.left .name {
  text-shadow: 0 0 60px var(--glow-a);
}

.side.right .name {
  text-shadow: 0 0 60px var(--glow-b);
}

/* Wer eine Seite anfasst, soll sie auch ansehen. Bewusst :has() und nicht
   .split:hover - sonst würde jeder Zeiger irgendwo im Hero beide Seiten
   abdunkeln. Ohne :has() bleibt einfach alles hell. */
.split:has(.side:hover) .side:not(:hover) {
  opacity: 0.34;
}

.side.left:hover .name {
  text-shadow: 0 0 14px var(--glow-a), 0 0 70px var(--glow-a);
}

.side.right:hover .name {
  text-shadow: 0 0 14px var(--glow-b), 0 0 70px var(--glow-b);
}

.side.left:hover .handle {
  color: var(--cyan);
}

.side.right:hover .handle {
  color: var(--purple);
}

/* Die Animation sitzt innen, damit sie den Versatz von .side nicht
   überschreibt. */
.side-in {
  display: block;
}

.side.left .side-in {
  animation: from-left 0.95s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s both;
}

.side.right .side-in {
  animation: from-right 0.95s cubic-bezier(0.16, 0.84, 0.24, 1) 0.2s both;
}

@keyframes from-left {
  from {
    opacity: 0;
    transform: translate3d(-60px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes from-right {
  from {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 36px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hint);
  transform: translate3d(-50%, 0, 0);
  transition: color 0.2s ease;
  animation: hint-in 0.8s ease 1s both;
}

.scroll-hint:hover {
  color: var(--nav-link-on);
}

.scroll-hint .chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  animation: bob 1.9s ease-in-out infinite;
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes bob {
  0%,
  100% {
    opacity: 0.45;
    transform: rotate(45deg) translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) translate3d(4px, 4px, 0);
  }
}

/* ---------- Inhalt unter dem Hero ---------- */

/* Erst wenn home.js läuft, wird etwas versteckt - ohne JavaScript bleibt
   die Seite trotzdem vollständig lesbar. */
.reveal-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.reveal {
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 0.84, 0.24, 1);
}

.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Nullhoch würde der IntersectionObserver nicht sicher melden, deshalb ein
   schmaler Streifen: verlässt er das Bild, gilt die Seite als gescrollt. */
.scroll-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 64px;
  pointer-events: none;
}

.home-body .section {
  padding: 104px 0;
  border-bottom: 0;
  scroll-margin-top: 92px; /* die Kopfzeile schwebt darüber */
}

/* ---------- Abschnittskopf ---------- */

/* Die Nummer hält die Reihenfolge zusammen und sagt gleich, wie weit der
   Baustein ist - das ersetzt die gleichförmigen "Coming soon"-Schilder. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow .num {
  font-size: 13px;
  color: var(--text-strong);
}

.eyebrow .num::after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 0 4px 12px;
  background: var(--line-strong);
}

.eyebrow.now {
  color: var(--green);
}

.sec-title {
  max-width: 18ch;
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.sec-lead {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
}

/* ---------- Bot ---------- */

/* Spiele mit Platz für das Logo. Fehlt die Datei, steht nur der Name da -
   derselbe Mechanismus wie bei den Bildern im Hero. */
.games-note {
  max-width: 62ch;
  margin: 60px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.games {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.games li {
  display: flex;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}

.games .shot {
  flex: 0 0 auto;
  width: 0;
  height: 28px;
}

/* Helle Fläche unter dem Logo, wie in einem Launcher. Die Logos kommen in
   Originalfarbe, und zwei davon sind dunkel auf durchsichtig - die wären auf
   der dunklen Karte nicht zu sehen. */
.games .shot.has-shot {
  width: 28px;
  height: 28px;
  padding: 3px;
  margin-right: 12px;
  border-radius: 7px;
  background: #eef1f7;
}

/* Hochkant-Logos sonst links angeschlagen statt mittig auf der Fläche. */
.games .shot img {
  margin: 0 auto;
}

/* Umschalter über dem Chat: jeder Knopf spielt eine andere Szene. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tab {
  padding: 9px 15px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease;
}

.tab:hover {
  color: var(--text-strong);
  border-color: var(--line-strong);
}

.tab.is-on {
  color: var(--text-strong);
  border-color: var(--accent-line);
  background: var(--glass);
}

.bot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: 44px;
}

/* Nachgebauter Chat statt Beschreibung - zeigt in vier Zeilen, was der Bot
   tut. */
.chat {
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--glass-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.chat-top .dot {
  background: var(--green);
}

/* Feste Mindesthöhe, damit beim Umschalten und beim Einlaufen der Zeilen
   nicht die halbe Seite nachrutscht. */
.chat-body {
  margin: 0;
  padding: 16px 18px 20px;
  min-height: 240px;
  list-style: none;
}

.chat-body li {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}

.chat-body li:first-child {
  margin-top: 0;
}

/* Während die Szene läuft, stehen noch nicht gezeigte Zeilen auf display:
   none - so sitzen die Schreibpunkte immer unter der letzten Zeile. */
.chat-body.is-playing > li {
  display: none;
}

.chat-body.is-playing > li.is-in {
  display: block;
  animation: msg-in 0.3s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Die drei Punkte, solange der Bot "schreibt" */
.chat-body.is-playing > li.typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 8px 0 3px;
}

.chat-body .typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: blip 1s ease-in-out infinite;
}

.chat-body .typing i:nth-child(2) {
  animation-delay: 0.14s;
}

.chat-body .typing i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes blip {
  0%,
  100% {
    opacity: 0.25;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, -3px, 0);
  }
}

/* Systemmeldung, kein Chatteilnehmer */
.chat-body .note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

.chat-body .who {
  margin-right: 8px;
  font-weight: 700;
  color: var(--cyan);
}

.chat-body .who.mod {
  color: var(--green);
}

.chat-body .from-bot {
  color: var(--muted);
}

.chat-body .from-bot .who {
  color: var(--purple);
}

/* Hervorhebung in einer Bot-Antwort - der Name bleibt violett, weil die
   Regel darüber genauer ist. */
.chat-body .from-bot b {
  color: var(--text);
}

/* Aufzählung mit Linie statt Kartenkacheln. */
.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 0 0 22px 20px;
  border-left: 1px solid var(--glass-line);
}

.facts li:last-child {
  padding-bottom: 0;
}

.facts b {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--text-strong);
}

.facts span {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Overlay-Bühne ---------- */

.over-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 40px;
}

/* Beispiele links. Bewusst als Liste mit Erklärung und nicht als Reiter -
   so steht neben jedem Namen, worum es geht. */
.picks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--glass-line);
  border-left-width: 2px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease;
}

.pick b {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  color: var(--text);
  transition: color 0.18s ease;
}

.pick span {
  font-size: 14px;
  line-height: 1.45;
}

.pick:hover {
  border-color: var(--line-strong);
}

.pick:hover b,
.pick.is-on b {
  color: var(--text-strong);
}

.pick.is-on {
  background: var(--glass);
  border-left-color: var(--cyan);
}

/* Sieht aus wie die Leinwand in OBS: Schachbrett heißt durchsichtig. Die
   Größen innen hängen an der Breite der Bühne (Container-Einheiten), damit
   das Bild in jeder Größe gleich aussieht - genau wie eine Browserquelle,
   die skaliert wird. Auf dem Handy dreht --u alles etwas größer, sonst wäre
   die Schrift nicht zu lesen. */
.stage {
  --u: 1cqw;
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  /* Gleiches Schachbrett wie in der Admin-Vorschau, damit beide Ansichten
     erkennbar dasselbe zeigen. */
  background-color: #090c12;
  background-image: linear-gradient(45deg, #0d1119 25%, transparent 25%),
    linear-gradient(-45deg, #0d1119 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0d1119 75%),
    linear-gradient(-45deg, transparent 75%, #0d1119 75%);
  background-size: 26px 26px;
  background-position: 0 0, 0 13px, 13px -13px, -13px 0;
}

/* Nur eine Szene liegt im Bild. Ohne JavaScript bleibt es bei der ersten.
   visibility hält die wartenden Szenen auch aus Vorlesehilfen heraus - sie
   steht mit in der Überblendung, sonst würde die alte Szene beim Wechsel
   schlagartig verschwinden. */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}

.scene.is-on {
  opacity: 1;
  visibility: visible;
}

/* Bausteine im Bild. Bewusst nicht am Farbschema der Seite: ein Overlay liegt
   über Video und bleibt dunkel mit hellem Text, auch im Hell-Modus. */
.node {
  position: absolute;
  display: grid;
  gap: calc(0.7 * var(--u));
  padding: calc(1.5 * var(--u)) calc(2.1 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(1.3 * var(--u));
  background: rgba(8, 10, 16, 0.74);
  color: #eef3ff;
  font-size: calc(2 * var(--u));
  line-height: 1.34;
  white-space: nowrap;
  transition: transform 1s cubic-bezier(0.3, 0.9, 0.2, 1), opacity 0.45s ease;
}

.node-label {
  font-size: calc(1.35 * var(--u));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 243, 255, 0.5);
}

.node-big {
  font-size: calc(3.6 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.node-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2.4 * var(--u));
  font-weight: 600;
}

.node-row i {
  font-style: normal;
  color: #22d3ee;
}

/* Balken. Gefüllt wird über scaleX, nicht über die Breite - eine Breite
   müsste der Browser in jedem Bild neu umbrechen. */
.bar {
  height: calc(0.9 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  transform: scaleX(0.68);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.3, 0.9, 0.2, 1);
}

/* Zwei Stände derselben Anzeige liegen übereinander, umgeschaltet wird nur
   die Deckkraft. */
.swap {
  display: grid;
}

.swap b {
  grid-area: 1 / 1;
  font-weight: 800;
  transition: opacity 0.45s ease;
}

.swap b + b {
  opacity: 0;
}

/* Schreibmarke beim Ändern eines Textes */
.caret {
  display: inline-block;
  width: calc(0.3 * var(--u));
  height: calc(3 * var(--u));
  margin-left: calc(0.6 * var(--u));
  vertical-align: -0.14em;
  background: #22d3ee;
  opacity: 0;
}

/* Meldung, die kurz aufpoppt (z.B. neue Subs) */
.pop {
  position: absolute;
  left: 40%;
  top: 19%;
  padding: calc(0.8 * var(--u)) calc(1.8 * var(--u));
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color: #06111a;
  font-size: calc(1.9 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 0.9, 0.3, 1.4);
}

.chip-ok {
  justify-self: start;
  margin-top: calc(0.4 * var(--u));
  padding: calc(0.5 * var(--u)) calc(1.4 * var(--u));
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.18);
  color: #6ee7b7;
  font-size: calc(1.5 * var(--u));
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Löschzeichen an der Karte, die rausfliegt */
.kill {
  position: absolute;
  top: calc(-1.4 * var(--u));
  right: calc(-1.4 * var(--u));
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  background: #f87171;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Das x im Zeichen: zwei gekreuzte Striche */
.kill::before,
.kill::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 26%;
  width: 48%;
  height: calc(0.35 * var(--u));
  background: #2a0b0b;
}

.kill::before {
  transform: rotate(45deg);
}

.kill::after {
  transform: rotate(-45deg);
}

/* Nachgezeichneter Zeiger. Er führt durch die Szene, damit niemand selbst
   herumprobieren muss. */
.cursor {
  position: absolute;
  width: calc(2.6 * var(--u));
  height: calc(3.7 * var(--u));
  background: #ffffff;
  clip-path: polygon(0 0, 0 82%, 24% 62%, 42% 100%, 60% 91%, 42% 54%, 74% 47%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 1s cubic-bezier(0.3, 0.9, 0.2, 1);
}

/* Die Takte einer Szene bauen aufeinander auf: bei b3 sind b1 und b2 noch
   gesetzt. Was ein späterer Takt anders will, steht weiter unten und gewinnt
   über die Reihenfolge - so muss nichts zurückgenommen werden. */

/* ----- Szene 1: Ziele laufen mit ----- */

.goal-sub {
  left: 6%;
  top: 13%;
  min-width: 30cqw;
}

.goal-fol {
  left: 46%;
  top: 51%;
  min-width: 36cqw;
}

.goal-fol .bar i {
  transform: scaleX(0.998);
}

.scene.b1 .pop {
  opacity: 1;
  transform: none;
}

.scene.b1 .goal-sub .swap b {
  opacity: 0;
}

.scene.b1 .goal-sub .swap b + b {
  opacity: 1;
}

.scene.b1 .goal-sub .bar i {
  transform: scaleX(0.82);
}

.scene.b2 .pop {
  opacity: 0;
  transform: scale(0.9);
}

.scene.b2 .goal-fol .swap b {
  opacity: 0;
}

.scene.b2 .goal-fol .swap b + b {
  opacity: 1;
}

.scene.b2 .goal-fol .bar i {
  transform: scaleX(1);
  background: linear-gradient(90deg, #34d399, #6ee7b7);
}

.scene.b2 .chip-ok {
  opacity: 1;
  transition-delay: 0.5s;
}

/* ----- Szene 2: frei verschieben ----- */

.card-rank {
  left: 62%;
  top: 11%;
}

.card-time {
  left: 5%;
  top: 66%;
}

.c-move {
  left: 70%;
  top: 15%;
}

.scene.b1 .cursor {
  opacity: 1;
}

.scene.b2 .card-rank {
  transform: translate3d(-4cqw, 50cqh, 0);
  transition-delay: 0.4s;
}

.scene.b2 .c-move {
  transform: translate3d(-4cqw, 52cqh, 0);
  transition-delay: 0s, 0.4s;
}

.scene.b3 .card-time {
  transform: translate3d(9cqw, -48cqh, 0);
  transition-delay: 0.4s;
}

.scene.b3 .c-move {
  transform: translate3d(-49cqw, 6cqh, 0);
}

/* ----- Szene 3: dieselbe Karte, drei Gesichter ----- */

.look {
  left: 21%;
  top: 22%;
}

.look-2,
.look-3 {
  opacity: 0;
}

/* Rund, farbig, mit Balken statt nackter Zahlen */
.look-2 {
  border-color: rgba(216, 180, 254, 0.45);
  border-radius: calc(3.6 * var(--u));
  background: linear-gradient(
    135deg,
    rgba(76, 29, 149, 0.88),
    rgba(11, 10, 24, 0.86)
  );
  box-shadow: 0 0 calc(5 * var(--u)) rgba(168, 85, 247, 0.28);
}

.look-2 .node-label {
  color: rgba(233, 195, 255, 0.8);
}

.look-2 .node-row i {
  color: #f0abfc;
}

.look-2 .bar i {
  transform: scaleX(0.8); /* Habub 4 von 5 */
}

.look-2 .bar.low i {
  transform: scaleX(0.6); /* Arab 3 von 5 */
}

/* Ganz reduziert: kein Kasten, nur die Zahl */
.look-3 {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.look-3 .node-big {
  font-size: calc(7 * var(--u));
  text-shadow: 0 0 calc(3 * var(--u)) rgba(34, 211, 238, 0.5);
}

.scene.b1 .look-1 {
  opacity: 0;
}

.scene.b1 .look-2 {
  opacity: 1;
}

.scene.b2 .look-2 {
  opacity: 0;
}

.scene.b2 .look-3 {
  opacity: 1;
}

/* ----- Szene 4: Text ändern, Karte rauswerfen ----- */

.card-text {
  left: 8%;
  top: 20%;
}

.card-old {
  left: 46%;
  top: 58%;
}

.c-edit {
  left: 62%;
  top: 26%;
}

.scene.b1 .card-text .swap b {
  opacity: 0;
}

.scene.b1 .card-text .swap b + b {
  opacity: 1;
}

.scene.b1 .caret {
  animation: caret 0.9s steps(2, jump-none) 6;
}

@keyframes caret {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.scene.b2 .c-edit {
  transform: translate3d(-11cqw, 36cqh, 0);
}

.scene.b2 .kill {
  opacity: 1;
  transition-delay: 0.8s;
}

.scene.b2 .card-old {
  opacity: 0;
  transform: scale(0.88);
  transition-delay: 1.3s;
}

.stage-hint {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--hint);
}

/* ---------- Die sechs Widgets (Overlays) ---------- */

.wtitle {
  margin: 64px 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* Gleiche Aufteilung wie die Bühne oben: links wählen, rechts schauen. */
.wgrid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  margin-top: 32px;
}

.wpicks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpick {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--glass-line);
  border-bottom-width: 2px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease;
}

.wpick b {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  color: var(--text);
  transition: color 0.18s ease;
}

.wpick span {
  font-size: 14px;
  line-height: 1.45;
}

.wpick:hover {
  border-color: var(--line-strong);
}

.wpick:hover b,
.wpick.is-on b {
  color: var(--text-strong);
}

.wpick.is-on {
  background: var(--glass);
  border-bottom-color: var(--cyan);
}

/* Nur eine Ansicht liegt im Bild. Die wartenden bleiben im Fluss (grid mit
   einer Zelle), damit die Höhe beim Wechsel nicht springt. Ohne JavaScript
   greift .wpane:not(.is-on) nicht, dann stehen alle sechs untereinander -
   lesbar statt leer. */
.wview {
  display: grid;
}

.reveal-ready .wpane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.reveal-ready .wpane.is-on {
  opacity: 1;
  visibility: visible;
}

/* Links das Bild in OBS, rechts das Steuerpanel. */
.wpane {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}

.wcol {
  min-width: 0;
}

.wlabel {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hint);
}

.wsrc {
  margin: 10px 0 0;
}

.wsrc code {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--cyan);
  overflow-wrap: anywhere;
}

.wopen {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
  transition: color 0.15s ease;
}

.wopen::after {
  content: ' \2192';
}

.wopen:hover {
  color: var(--text-strong);
}

.wmod {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Steuerpanel auf dem Handy ---------- */

/* Nachbildung von /control - dunkel und mit grossen Flächen, weil es genau
   so auf dem Handy des Mods aussieht. Bewusst nicht am Farbschema der Seite,
   sondern am echten Panel. Alles nur Anschauungsmaterial: hier sind es spans,
   keine Knöpfe, damit niemand ins Leere klickt. */
.phone {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #0b0e15;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.phone-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(238, 243, 255, 0.5);
}

.phone-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}

.phone-body {
  display: grid;
  gap: 9px;
  padding: 14px;
  color: #eef3ff;
}

.phint {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 243, 255, 0.45);
}

.pnum {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}

.pnum.is-time {
  font-size: 30px;
  letter-spacing: -0.01em;
}

.prow {
  display: flex;
  gap: 8px;
}

.pbtn {
  flex: 1;
  padding: 11px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.pbtn.is-key {
  border-color: transparent;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color: #06111a;
}

.pbtn.wide {
  flex: 1 0 100%;
}

.ptabs .pbtn {
  padding: 7px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.pfield {
  flex: 1;
  padding: 11px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 14px;
  color: rgba(238, 243, 255, 0.62);
}

.pline {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13px;
}

.pcheck {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
}

/* Haken aus zwei Strichen - kein Zeichen, das je nach Schrift anders sitzt. */
.pcheck.is-on {
  position: relative;
  border-color: #34d399;
  background: #34d399;
}

.pcheck.is-on::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #06111a;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

/* Kleines Rad im Panel. Dieselben Segmente wie im Overlay, damit erkennbar
   dasselbe gemeint ist. */
.pwheel {
  width: 116px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(
    #22d3ee 0deg 60deg,
    #a855f7 60deg 120deg,
    #34d399 120deg 180deg,
    #fbbf24 180deg 240deg,
    #f472b6 240deg 300deg,
    #60a5fa 300deg 360deg
  );
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14),
    inset 0 0 26px rgba(0, 0, 0, 0.45);
}

.pres {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  color: #22d3ee;
}

/* ---------- Wie ein Mod an die Steuerung kommt ---------- */

.wways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.wways li {
  padding: 16px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

.wways b {
  display: block;
  font-size: 16px;
  color: var(--text-strong);
}

.wways span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Der Ausschnitt zeigt das Widget wie eine Browserquelle. Eigenes --u, damit
   dieselben Bausteine wie in der Bühne passen - nur kleiner. */
.widget-view {
  --u: 2.1cqw;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  container-type: size;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background-color: #090c12;
  background-image: linear-gradient(45deg, #0d1119 25%, transparent 25%),
    linear-gradient(-45deg, #0d1119 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0d1119 75%),
    linear-gradient(-45deg, transparent 75%, #0d1119 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

/* In der Karte steht der Baustein mittig statt frei positioniert. */
.widget-view .node {
  position: static;
}

.node-mid {
  font-size: calc(2.2 * var(--u));
  font-weight: 700;
}

/* Info-Popup: gleiche Fläche, aber als Pille */
.node.pill {
  border-radius: 999px;
  padding: calc(1.3 * var(--u)) calc(2.6 * var(--u));
}

.node-row.done {
  color: rgba(238, 243, 255, 0.45);
  text-decoration: line-through;
}

.node-row.done i {
  color: #34d399;
}

/* Glücksrad. Die Segmente sind ein conic-gradient, gedreht wird nur die
   Scheibe - der Zeiger liegt daneben und bleibt stehen. */
.wheel {
  width: 62cqh;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #22d3ee 0deg 60deg,
    #a855f7 60deg 120deg,
    #34d399 120deg 180deg,
    #fbbf24 180deg 240deg,
    #f472b6 240deg 300deg,
    #60a5fa 300deg 360deg
  );
  box-shadow: 0 0 0 calc(0.35 * var(--u)) rgba(255, 255, 255, 0.16),
    inset 0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.4);
  transition: transform 1.8s cubic-bezier(0.16, 0.86, 0.2, 1);
}

/* Dreht einmal an, wenn die Ansicht dazukommt. Beim Wegschalten fällt die
   Animation weg und das Rad steht wieder am Anfang. */
.wpane.is-on .wheel {
  animation: wheel-once 2.2s cubic-bezier(0.16, 0.86, 0.2, 1) both;
}

@keyframes wheel-once {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(343deg);
  }
}

.wheel-pin {
  position: absolute;
  top: 12%;
  width: 0;
  height: 0;
  border-left: calc(1.2 * var(--u)) solid transparent;
  border-right: calc(1.2 * var(--u)) solid transparent;
  border-top: calc(2 * var(--u)) solid #ffffff;
}

/* ---------- Für Streamer ---------- */

/* Waagerechte Reiter mit Linie darunter. Der aktive sitzt mit seiner eigenen
   Linie auf der gemeinsamen - deshalb der negative Rand. */
.str-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 36px;
  border-bottom: 1px solid var(--glass-line);
}

.str-tab {
  padding: 12px 16px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.str-tab:hover {
  color: var(--text);
}

.str-tab.is-on {
  color: var(--text-strong);
  border-bottom-color: var(--cyan);
}

/* Alle Ansichten liegen in derselben Zelle, damit die Höhe beim Wechsel
   nicht springt. Ohne JavaScript greift die Regel nicht und alle fünf stehen
   untereinander - lesbar statt leer. */
.str-view {
  display: grid;
  margin-top: 30px;
}

.reveal-ready .str-pane {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.reveal-ready .str-pane.is-on {
  opacity: 1;
  visibility: visible;
}

.str-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.str-head {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.str-say {
  max-width: 46ch;
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.str-say code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 14px;
  color: var(--cyan);
}

.str-demo {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

.demo-top {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.demo-top span {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}

.demo-num {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.demo-mini {
  font-size: 13px;
  color: var(--hint);
}

/* Zeilen mit Vorzeichen. Farbe allein reicht nicht - das Zeichen davor sagt
   dasselbe noch einmal, für Farbenblinde und in Schwarzweiss. */
.feed {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rahmen dazu, weil --surface-2 im Hell-Modus fast das Weiß der Karte ist
   und die Zeilen sonst nicht als Fläche zu erkennen sind. */
.feed li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}

.feed b {
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.feed span {
  flex: none;
  font-weight: 700;
}

.feed li::before {
  flex: none;
  font-weight: 800;
}

.feed .up::before,
.feed .in::before {
  content: '+';
  color: var(--green);
}

.feed .down::before {
  content: '\2212';
  color: var(--red);
}

.feed .out::before {
  content: '\2192';
  color: var(--cyan);
}

.feed .up span,
.feed .in span {
  color: var(--green);
}

.feed .down span {
  color: var(--red);
}

.feed .out span {
  color: var(--cyan);
}

.duo {
  display: flex;
  gap: 22px;
}

.duo-one {
  font-size: 13px;
  color: var(--muted);
}

.duo-one b {
  margin-right: 5px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

/* Balken mit fester Höhe, die Werte stehen als height im HTML - das ist der
   einzige Ort, an dem Daten stehen. */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 92px;
}

.chart span {
  flex: 1;
  border-radius: 5px 5px 2px 2px;
  background: var(--line-strong);
}

.chart .is-now {
  background: linear-gradient(180deg, var(--cyan), var(--purple));
}

.demo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--muted);
}

.demo-facts b {
  color: var(--text-strong);
}

/* ---------- Aufruf zum Anmelden ---------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 26px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}

/* Der letzte Aufruf steht mittig und ohne Kasten - er ist der Abschluss der
   Seite, nicht ein Hinweis in einem Abschnitt. */
.cta-end {
  display: block;
  max-width: 52ch;
  margin: 0 auto;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}

.cta-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
}

.cta-big {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-strong);
}

.cta-say {
  max-width: 44ch;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.cta-end .cta-say {
  margin: 14px auto 0;
}

.cta-fine {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hint);
}

/* Twitch-Lila, aber der dunklere Markenwert - auf dem helleren wäre weisser
   Text unter dem Kontrastminimum. Das Logo ist ein Inline-SVG, damit keine
   Datei von aussen geladen wird. */
.btn-tw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 13px 20px;
  border-radius: 11px;
  background: #772ce8;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  transition: filter 0.15s ease;
}

.btn-tw:hover {
  filter: brightness(1.14);
}

.btn-tw svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-tw .badge {
  border-color: rgba(255, 255, 255, 0.45);
  background: none;
  color: #ffffff;
  font-size: 11px;
}

.btn-tw-big {
  margin-top: 24px;
  padding: 16px 26px;
  font-size: 17px;
}

.btn-tw-big svg {
  width: 21px;
  height: 21px;
}

/* ---------- Stichworte (Spiele) ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  font-size: 14px;
  color: var(--muted);
}

.home-body .site-footer {
  border-top: 1px solid var(--glass-line);
  background: var(--scrim);
}

/* ---------- Sections ---------- */

.section {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
}

.section:last-of-type {
  border-bottom: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.section-head h2 {
  font-size: clamp(24px, 3.4vw, 32px);
}

.section-head .lead {
  color: var(--muted);
  max-width: 560px;
  margin-top: 8px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.card h3 {
  font-size: 19px;
}

.card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.live {
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.4);
}

.badge.wip {
  color: var(--amber);
  border-color: rgba(251, 191, 36, 0.4);
}

.badge.soon {
  color: var(--muted);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 28px 0;
  color: var(--muted);
  font-size: 14px;
}

.site-footer .inner {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Admin ---------- */

.admin-body {
  background: var(--bg);
}

.admin-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 12, 17, 0.96);
  border-bottom: 1px solid var(--line);
}

.admin-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.status .dot {
  background: var(--red);
}

.status.online .dot {
  background: var(--green);
}

.admin-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.admin-nav a {
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.12s ease, background-color 0.12s ease,
    border-color 0.12s ease;
}

.admin-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.admin-nav a.active {
  color: var(--cyan);
  border-color: var(--line-strong);
  background: var(--surface);
}

.admin-main {
  padding: 26px 0 60px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}

.panel > h2 {
  font-size: 20px;
}

.panel .hint {
  color: var(--muted);
  font-size: 14px;
  margin-top: 6px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--cyan);
}

.form-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.player-row:last-child {
  border-bottom: 0;
}

.player-name {
  min-width: 110px;
  font-weight: 700;
  font-size: 17px;
}

.player-wins {
  min-width: 74px;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  line-height: 1;
}

.player-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.player-actions input[type="number"] {
  width: 86px;
}

.step {
  width: 46px;
  height: 42px;
  font-size: 18px;
  padding: 0;
}

.link-box {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  background: var(--bg-soft);
  font-size: 14px;
  word-break: break-all;
}

.link-box code {
  color: var(--cyan);
  font-size: 14px;
}

.module-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-card.is-live {
  border-color: rgba(52, 211, 153, 0.35);
}

/* ---------- Teilnehmer-Karten (Admin) ---------- */

.player-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.player-card .head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.player-card .head .who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.accent-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  background: var(--cyan);
}

.accent-dot[data-accent='cyan'] {
  background: #22d3ee;
}
.accent-dot[data-accent='purple'] {
  background: #a855f7;
}
.accent-dot[data-accent='green'] {
  background: #34d399;
}
.accent-dot[data-accent='pink'] {
  background: #f472b6;
}
.accent-dot[data-accent='amber'] {
  background: #fbbf24;
}
.accent-dot[data-accent='red'] {
  background: #f87171;
}

.player-card .head h3 {
  font-size: 19px;
}

.player-card .head .id {
  color: var(--muted);
  font-size: 13px;
}

.player-card .head .spacer {
  flex: 1;
}

.sub-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sub-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.row + .row {
  margin-top: 10px;
}

textarea {
  width: 100%;
  min-height: 132px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: var(--cyan);
}

.wheel-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 12px;
  margin-bottom: 12px;
}

.wheel-block textarea {
  min-height: 104px;
  margin-top: 8px;
}

.wheel-block .link-item {
  margin-top: 8px;
}

.link-list {
  display: grid;
  gap: 8px;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 13px;
  min-width: 0;
}

.link-item .label {
  font-weight: 700;
  color: var(--muted);
  flex: none;
  width: 78px;
}

.link-item code {
  color: var(--cyan);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.secret {
  color: var(--amber) !important;
}

/* ---------- Timer ---------- */

.timer-display {
  font-size: 38px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--cyan);
  white-space: nowrap;
}

.timer-display.over {
  color: var(--amber);
}

.timer-display.done {
  color: var(--green);
}

/* ---------- Vorschau ---------- */

.preview-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.preview-card .head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.preview-card .head h3 {
  font-size: 17px;
}

.preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  /* dezentes Schachbrett = transparenter Hintergrund der Browserquelle */
  background-color: #090c12;
  background-image: linear-gradient(45deg, #0d1119 25%, transparent 25%),
    linear-gradient(-45deg, #0d1119 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0d1119 75%),
    linear-gradient(-45deg, transparent 75%, #0d1119 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}

.preview-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: 0 0;
}

.preview-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

.preview-status .state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}

.preview-status .state .dot {
  background: var(--muted);
}

.preview-status .state.online .dot {
  background: var(--green);
}

.preview-status .state.fail .dot {
  background: var(--red);
}

.preview-status .result {
  font-weight: 600;
}

.preview-status .result.ok {
  color: var(--green);
}

.preview-status .result.fail {
  color: var(--red);
}

/* ---------- Control-Panel (Streamer / Mod) ---------- */

.control-main {
  padding: 22px 0 60px;
  max-width: 720px;
  margin: 0 auto;
}

.big-number {
  font-size: 62px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
  text-align: center;
  margin: 6px 0 18px;
}

/* Dieselbe Zeile, aber mit einem Wort darin statt einer Uhrzeit: ein langer
   Eintrag vom Glückrad braucht Umbruch und darf kleiner werden. */
.big-number.wort {
  font-size: clamp(30px, 7vw, 54px);
  font-variant-numeric: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.btn-xl {
  padding: 18px 24px;
  font-size: 22px;
  font-weight: 800;
  border-radius: 14px;
  flex: 1;
  min-width: 96px;
}

/* Eigene Zeit: die festen Knöpfe daneben decken den Alltag ab, hier steht
   der krumme Wert - etwa 00:07:30 nach einer Unterbrechung im Stream. */
.czeile {
  margin-top: 12px;
  align-items: center;
}

.czeit {
  width: 118px;
  padding: 10px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: 0.04em;
}

.czeit:focus-visible {
  outline: none;
  border-color: var(--accent-line);
}

.cvz {
  font-variant-numeric: tabular-nums;
}

/* Was auf dem Rad steht - nur zum Nachsehen, nicht anklickbar. */
.ctags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.ctag {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.wheel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.wheel-box .frame {
  position: relative;
}

.wheel-box .pointer {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -12px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid var(--cyan);
  z-index: 2;
}

.wheel-box canvas {
  display: block;
  transform: rotate(0deg);
  will-change: transform;
}

.wheel-result-text {
  font-size: 22px;
  font-weight: 800;
  color: var(--cyan);
  min-height: 1.3em;
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 50;
}

.toast.show {
  opacity: 1;
  visibility: visible;
}

.toast.error {
  border-color: var(--red);
  color: var(--red);
}

/* ---------- Access denied / 404 ---------- */

.center-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  background: radial-gradient(
      700px 340px at 50% 0%,
      rgba(168, 85, 247, 0.12),
      transparent 65%
    ),
    var(--bg);
}

.center-page .box {
  max-width: 460px;
}

.center-page h1 {
  font-size: 30px;
  margin-top: 18px;
}

.center-page p {
  color: var(--muted);
  margin-top: 12px;
}

.center-page .btn {
  margin-top: 24px;
}

/* Mehrere Knöpfe nebeneinander auf den mittigen Seiten (Login-Hinweis, 404). */
.center-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Dashboard ---------- */

/* Farblich an Discord: flache Flächen, Blurple als Akzent, kaum Glow.
   Nur das Dashboard bekommt diese Werte - die Startseite bleibt neon. */
.dash-body {
  min-height: 100vh;
  background: var(--page);

  --page: #313338;
  --bg: #313338;
  --bg-soft: #2b2d31;
  --sidebar: #1e1f22;
  --surface: #2b2d31;
  --surface-2: #232428;
  --input: #1e1f22;
  --hover: #35373c;
  --selected: #404249;
  --line: #3f4147;
  --line-strong: #4e5058;
  --text: #dbdee1;
  --text-strong: #f2f3f5;
  --muted: #949ba4;
  --hint: #6d6f78;
  --cyan: #5865f2;
  --purple: #4752c4;
  --green: #23a559;
  --amber: #f0b232;
  --red: #da373c;
  --glass: #2b2d31;
  --glass-line: #3f4147;
  --glass-shadow: none;
  --accent-line: #5865f2;
  --ring: rgba(88, 101, 242, 0.22);
  --btn: #5865f2;
  --btn-hover: #4752c4;
  --btn-fg: #ffffff;
  --nav-halo: none;
  --radius: 8px;
}

html[data-theme='light'] .dash-body {
  --page: #f2f3f5;
  --bg: #f2f3f5;
  --bg-soft: #ebedef;
  --sidebar: #ebedef;
  --surface: #ffffff;
  --surface-2: #f2f3f5;
  --input: #e3e5e8;
  --hover: #e8eaed;
  --selected: #dfe0e4;
  --line: #d9dbde;
  --line-strong: #c4c6cb;
  --text: #313338;
  --text-strong: #060607;
  --muted: #5c5e66;
  --hint: #6d6f78;
  --cyan: #5865f2;
  --purple: #4752c4;
  --green: #248046;
  --amber: #9a7611;
  --red: #d83c3e;
  --glass: #ffffff;
  --glass-line: #d9dbde;
  --glass-shadow: 0 1px 0 rgba(6, 6, 7, 0.04);
  --accent-line: #5865f2;
  --ring: rgba(88, 101, 242, 0.14);
  --btn: #5865f2;
  --btn-hover: #4752c4;
  --btn-fg: #ffffff;
}

.dash-body .bg {
  display: none;
}

.dash-body ::selection {
  background: color-mix(in srgb, var(--btn) 38%, transparent);
  color: var(--text-strong);
}

/* Alle Klassen hier tragen ein d- am Anfang. Dieses Stylesheet gilt für die
   ganze Seite, und ohne Präfix greifen kurze Namen woanders mit: .side heißt
   im Hero der Startseite schon die halbe Bühne mit Habub und Arab. */
/* Volle Breite: die Sidebar sitzt am linken Rand, die Mitte nimmt den Rest.
   Ein zentrierter Kasten mit 1320px hat Tabellen und Formulare zu schmal
   gemacht, sobald mehr als eine Spalte drinstand. */
.dshell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  min-height: 100vh;
}

/* Die Sperre sitzt nur in der Mitte. Sidebar bleibt klickbar, auf #bot
   nimmt JS dash-tor-frei - dort muss man den Bot holen können. */
html.dash-tor:not(.dash-tor-frei) .dmain {
  min-height: 100vh;
}

html.dash-tor:not(.dash-tor-frei) .dmain > :not(.dtor) {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.dtor {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--page) 72%, #000);
}

.dtor[hidden] {
  display: none;
}

.dtor-karte {
  display: grid;
  gap: 10px;
  width: min(440px, 100%);
  padding: 22px 22px 18px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 48px color-mix(in srgb, #000 42%, transparent);
}

.dtor-karte strong {
  color: var(--text-strong);
  font-size: 16px;
}

.dtor-karte p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.dtor-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Ohne min-width darf die Spalte nicht schmaler werden als ihr Inhalt - dann
   laufen die langen OBS-Adressen aus dem Raster heraus. */
.dmain {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 1480px;
  justify-self: center;
  padding: 16px 24px 0;
  background: var(--page);
}

/* ---------- Sidebar ---------- */

/* Am linken Fensterrand fest, volle Höhe. Kein schwebender Kasten mehr:
   der kostete links und rechts Rand, den die Mitte nötiger hat.

   Feste Höhe, nicht max-height: sonst richtet sich die Spalte nach dem Inhalt
   der offenen Ansicht und die Leiste wäre bei "Module" lang und bei
   "Übersicht" kurz. */
.dside {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 240px;
  height: 100vh;
  padding: 10px 8px 12px;
  border: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--sidebar);
  transition: width 0.18s ease;
}

/* Zugeklappt bleiben nur die Zeichen stehen. Die Breite zu animieren ist hier
   die Ausnahme von "nur transform und opacity": es passiert einmal pro Klick,
   nicht in einer Schleife, und ein harter Sprung wirkt kaputt. */
.dside-zu .dside {
  width: 72px;
}

.dside-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.dside-toggle:hover {
  background: var(--hover);
  color: var(--text-strong);
}

/* Drei Striche aus einem Kasten und zwei Schatten - kein Bild, kein SVG. */
.dbars {
  flex: none;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.dside-zu .dside-txt {
  display: none;
}

.dside-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--line-strong) transparent;
}

.dsnav {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.dsnav:hover {
  background: var(--hover);
  color: var(--text-strong);
}

/* Überschrift der zweiten Reihe. Steht vor .dsnav.is-on, damit der aktive
   Bereich auch dort seine Farbe behält - sonst gewänne die spätere Regel. */
.dsnav-gruppe {
  margin: 16px 0 4px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}

/* Zugeklappt bleibt ein Strich: ein Wort, von dem zwei Buchstaben zu sehen
   sind, ist schlechter als eine Trennlinie. */
.dside-zu .dsnav-gruppe {
  margin: 12px 10px 6px;
  padding: 0;
  border-top: 1px solid var(--glass-line);
  font-size: 0;
}

.dsnav.is-klein {
  gap: 10px;
  min-height: 32px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.dsnav.is-klein .dsnav-ico {
  width: 16px;
  height: 16px;
}

.dsnav.is-klein:hover {
  color: var(--text);
}

.dsnav.is-on {
  background: var(--selected);
  color: var(--text-strong);
}

.dsnav-ico {
  flex: none;
  width: 20px;
  height: 20px;
}

.dside-zu .dsnav-txt {
  display: none;
}

.dsnav-ast {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dsnav-zeile {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dsnav-zeile .dsnav {
  flex: 1;
  min-width: 0;
}

.dsnav-klapp {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.dsnav-klapp:hover {
  background: var(--hover);
  color: var(--text-strong);
}

.dsnav-klapp svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

.dsnav-ast.is-auf .dsnav-klapp svg {
  transform: rotate(180deg);
}

.dsnav-ast-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px;
}

.dsnav-ast-liste[hidden] {
  display: none;
}

.dsnav-ast-kat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 1px;
  padding: 4px 10px 4px 40px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}

.dsnav-ast-kat:hover,
.dsnav-ast-kat.is-on {
  color: var(--text-strong);
  background: var(--selected);
}

.dsnav-ast-liste .dsnav {
  padding-left: 40px;
}

@media (min-width: 861px) {
  .dside-zu .dsnav-klapp,
  .dside-zu .dsnav-ast-liste {
    display: none;
  }
}

/* Der Weg zurück auf die Website gehört nicht zu den Bereichen, deshalb
   unten und mit Abstand. */
.dsnav-out {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

/* ---------- Kopfzeile ---------- */

/* Bewusst ohne Rand und ohne Markenschriftzug. Links die vier Plätze für den
   Schnellzugriff, rechts Begrüßung und Bild als ein Knopf. */
.dtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px 0;
}

/* ---------- Schnellzugriff ---------- */

.dquick {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dq {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.dq:hover {
  background: var(--hover);
  color: var(--text-strong);
}

.dq-ico {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--muted);
}

/* Freier Platz: gestrichelt, damit man sieht, dass da noch etwas hin kann. */
.dq.is-leer {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--hint);
  font-weight: 600;
}

.dq.is-leer .dq-ico {
  color: var(--hint);
}

/* Stift zum Umbelegen, erscheint erst bei Interesse an der Leiste. */
.dq-edit {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--hint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, color 0.12s ease, background-color 0.12s ease;
}

.dquick:hover .dq-edit,
.dq-edit:focus-visible,
.dquick.is-edit .dq-edit {
  opacity: 1;
}

.dq-edit:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dquick.is-edit .dq-edit {
  color: var(--cyan);
}

/* Der Stift trägt dasselbe Zeichen-Element wie die Plätze, soll aber die
   Farbe des Knopfes annehmen statt selbst zu leuchten. */
.dq-edit .dq-ico {
  width: 16px;
  height: 16px;
  color: inherit;
}

.dq-wahl {
  padding: 9px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Konto-Popout ---------- */

.dme {
  position: relative;
  flex: none;
}

.dme-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Steht direkt links am Bild und gehört zum selben Knopf. Deutlich kleiner
   als eine Überschrift - neben einem 42px-Bild wäre alles andere zu laut. */
.dme-hi {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}

.dme-name {
  font-size: 15.5px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  white-space: nowrap;
}

.dme-rang {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dme-btn:hover,
.dme-btn[aria-expanded='true'] {
  background: var(--hover);
}

.dme-shot,
.dme-fallback {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

/* Steht nur da, wenn Twitch kein Bild liefert. */
.dme-fallback {
  display: grid;
  place-items: center;
  background: var(--input);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-strong);
}

.dme-shot:not([hidden]) ~ .dme-fallback {
  display: none;
}

.dme-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate3d(0, -1px, 0);
  transition: transform 0.16s ease;
}

.dme-btn[aria-expanded='true'] .dme-caret {
  transform: rotate(225deg) translate3d(0, -1px, 0);
}

.dme-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 236px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: dpop-in 0.14s ease-out;
}

html[data-theme='light'] .dme-pop {
  box-shadow: 0 8px 24px rgba(6, 6, 7, 0.08);
}

@keyframes dpop-in {
  from {
    opacity: 0;
    transform: translate3d(0, -5px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dme-pop {
    animation: none;
  }

  .dside {
    transition: none;
  }
}

/* ---------- Tools: Chat-Kampf ---------- */

.dkampf-hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--violet) 32%, var(--line));
}

.dkampf-hero::after {
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--violet) 15%, transparent);
  content: "";
  pointer-events: none;
  filter: blur(12px);
}

.dkampf-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--violet);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.dkampf-tabs {
  position: sticky;
  z-index: 3;
  top: 12px;
  margin: 14px 0;
}

.dkampf-start code {
  color: var(--violet);
  font-size: 0.84em;
}

.dkampf-shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.dkampf-vorlagen {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.dkampf-vorlagen button {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease;
}

.dkampf-vorlagen button:hover {
  transform: translateY(-1px);
}

.dkampf-item {
  position: relative;
  display: flex;
  min-height: 176px;
  padding: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  flex-direction: column;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.dkampf-item:hover {
  transform: translateY(-2px);
}

.dkampf-item.is-heal {
  background:
    linear-gradient(145deg, color-mix(in srgb, #3fd18b 10%, transparent), transparent 55%),
    var(--surface-2);
}

.dkampf-item.is-shield {
  background:
    linear-gradient(145deg, color-mix(in srgb, #56a8ff 11%, transparent), transparent 55%),
    var(--surface-2);
}

.dkampf-item.is-boost {
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffb454 12%, transparent), transparent 55%),
    var(--surface-2);
}

.dkampf-item.is-aus {
  opacity: 0.5;
}

.dkampf-item-kopf,
.dkampf-item-taten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dkampf-item-typ {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dkampf-item h3 {
  margin: 18px 0 5px;
  color: var(--text);
  font-size: 18px;
}

.dkampf-item p {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 13px;
}

.dkampf-item small {
  color: var(--muted);
  line-height: 1.45;
}

.dkampf-item-taten {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 14px;
}

.dkampf-item-taten .dicon-btn {
  width: 32px;
  height: 32px;
}

.dkampf-editor {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.dkampf-editor.is-offen {
  opacity: 1;
  transform: translateY(0);
}

.dkampf-inventar {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dkampf-speicherstatus {
  margin: 4px 0 0;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--green) 38%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--green);
  font-size: 13px;
  font-weight: 750;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.dkampf-speicherstatus[hidden] {
  display: none;
}

.dkampf-speicherstatus.is-sichtbar {
  opacity: 1;
  transform: translateY(0);
}

.dkampf-speicherstatus.is-fehler {
  border-color: color-mix(in srgb, var(--red) 38%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
}

/* ---------- Tools: Raubzüge ---------- */

.draub-hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #ffb454 35%, var(--line));
}

.draub-hero::before {
  position: absolute;
  right: -85px;
  bottom: -125px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, #ffb454 17%, transparent),
      transparent 68%
    );
  content: "";
  pointer-events: none;
}

.draub-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #ffb454;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.draub-tabs {
  position: sticky;
  z-index: 3;
  top: 12px;
  margin: 14px 0;
  backdrop-filter: blur(18px);
}

.draub-start {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #ffb454 10%, transparent),
      transparent 60%
    ),
    var(--surface);
}

.draub-start code {
  color: #ffb454;
  font-size: 0.84em;
}

.draub-sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  border-color: color-mix(in srgb, #ffb454 35%, var(--line));
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, #ffb454 8%, transparent),
      transparent
    ),
    var(--surface);
  animation: draub-ein 180ms ease-out;
}

.draub-sperre[hidden] {
  display: none;
}

.draub-sperre .dcard-title {
  margin-bottom: 4px;
}

#raubBedienung {
  transition: opacity 160ms ease, transform 160ms ease;
}

#raubBedienung.is-gesperrt {
  opacity: 0.42;
  transform: translateY(2px);
  pointer-events: none;
  user-select: none;
}

.draub-offen-card {
  min-width: 0;
}

.draub-offen {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.draub-offen-eintrag {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #ffb454;
  border-radius: 12px;
  background: var(--surface-2);
  animation: draub-ein 180ms ease-out;
}

.draub-offen-eintrag.is-task {
  border-left-color: var(--violet);
}

.draub-offen-eintrag > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.draub-offen-eintrag strong {
  color: var(--text);
  font-size: 14px;
}

.draub-offen-eintrag span {
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffb454 12%, var(--surface));
  color: #ffb454;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.draub-offen-eintrag p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.draub-task-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.draub-task {
  display: flex;
  min-height: 175px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #ffb454 7%, transparent),
      transparent 55%
    ),
    var(--surface-2);
  flex-direction: column;
  transition: opacity 160ms ease, transform 160ms ease;
}

.draub-task:hover {
  transform: translateY(-2px);
}

.draub-task.is-aus {
  opacity: 0.5;
}

.draub-task-kopf,
.draub-task-taten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.draub-task-kopf strong {
  color: var(--muted);
  font-size: 11px;
}

.draub-task h3 {
  margin: 18px 0 5px;
  color: var(--text);
  font-size: 17px;
}

.draub-task p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.draub-task-taten {
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 14px;
}

.draub-task-taten .dicon-btn {
  width: 32px;
  height: 32px;
}

@keyframes draub-ein {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@media (max-width: 1050px) {
  .dkampf-shop,
  .draub-task-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .dbot-sperre {
    align-items: stretch;
    flex-direction: column;
  }

  .dbot-sperre .dneu-btn {
    width: 100%;
    justify-content: center;
  }

  .dkampf-shop {
    grid-template-columns: minmax(0, 1fr);
  }

  .draub-task-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .dkampf-tabs,
  .draub-tabs,
  .dcasino-tabs,
  .dfol-tabs {
    position: static;
    overflow-x: auto;
  }

  .draub-sperre {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  #raubBedienung,
  .draub-sperre,
  .draub-offen-eintrag,
  .draub-task {
    animation: none;
    transition: none;
  }
}

/* ---------- Tools: Casino ---------- */

.dcasino-hero {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #f4c430 35%, var(--line));
}

.dcasino-hero::before {
  position: absolute;
  right: -85px;
  bottom: -125px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, #f4c430 17%, transparent),
      transparent 68%
    );
  content: "";
  pointer-events: none;
}

.dcasino-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #f4c430;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.dcasino-tabs {
  position: sticky;
  z-index: 3;
  top: 12px;
  margin: 14px 0;
  backdrop-filter: blur(18px);
}

.dcasino-start {
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, #f4c430 10%, transparent),
      transparent 60%
    ),
    var(--surface);
}

.dcasino-start code {
  color: #f4c430;
  font-size: 0.84em;
}

.dcasino-sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  border-color: color-mix(in srgb, #f4c430 35%, var(--line));
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb, #f4c430 8%, transparent),
      transparent
    ),
    var(--surface);
}

.dcasino-sperre[hidden] {
  display: none;
}

.dcasino-offen {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.dcasino-offen-eintrag {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid #f4c430;
  border-radius: 12px;
  background: var(--surface-2);
}

.dcasino-offen-eintrag div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dcasino-offen-eintrag p {
  margin: 8px 0;
  color: var(--muted);
}

.dcasino-symbole {
  display: grid;
  gap: 12px;
}

.dcasino-symbol {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) 36px;
  gap: 10px;
  align-items: end;
}

.dblick-casino .dblick-walzen {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.dblick-casino .dblick-walzen i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 58px;
  border-radius: 10px;
  background: color-mix(in srgb, #f4c430 16%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f4c430 35%, transparent);
  color: #f4c430;
  font-style: normal;
  font-size: 22px;
}

/* ---------- Tools: Subathon ---------- */

.dsub-hero-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dsub-uhr-karte {
  text-align: center;
  padding: 22px 18px 20px;
}

.dsub-status {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.dsub-uhr {
  margin: 0;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dsub-uhr.is-ende {
  color: #34d399;
}

.dsub-uhr.is-plus {
  color: #fbbf24;
}

.dsub-last {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.dsub-plus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.dsub-plus-frei {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dsub-plus-frei .dneu-txt {
  width: 88px;
}

.dsub-laenge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.dsub-kurz {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}

.dsub-kurz-sep {
  color: var(--muted);
}

.dsub-kurz .dneu-txt,
.dsub-laenge .dneu-txt {
  width: 4.4em;
  min-width: 0;
  max-width: 5.2em;
}

.dsub-kurz .dsub-filter,
.dsub-kurz .dsub-hin-text {
  width: 12em;
  max-width: 100%;
}

.dsub-ov {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

.dsub-vorschau {
  min-height: 220px;
  margin-bottom: 12px;
}

.dsub-ov-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.vs-subathon {
  position: relative;
  overflow: hidden;
}

.vs-unter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vs-toast {
  position: absolute;
  top: 50%;
  right: 10px;
  max-width: 46%;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(7, 10, 18, 0.62);
  font-size: 15px;
  font-weight: 800;
  color: #34d399;
  opacity: 0;
  transform: translateX(16px) translateY(-50%);
  pointer-events: none;
}

.vs-toast.is-links {
  right: auto;
  left: 10px;
  transform: translateX(-16px) translateY(-50%);
}

.vs-toast.is-an {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.vs-toast.is-klar {
  background: transparent;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.dsub-set {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.dsub-set .dcmd-feld {
  width: auto;
}

.dsub-set .dneu-txt,
.dsub-aus-karte .dneu-txt {
  min-width: 0;
}

.dsub-set input[type='number'].dneu-txt,
.dsub-aus-karte input[type='number'].dneu-txt {
  width: 5.2em;
  max-width: 5.2em;
}

.dsub-set select.dneu-txt {
  width: 11em;
}

.dsub-set input[type='text'].dneu-txt {
  width: 16em;
  max-width: 100%;
}

.dsub-set .dcmd-feld:has(.dfarben) {
  width: 100%;
}

.dsub-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
}

.dsub-panel-eng {
  width: auto;
  padding: 0;
  gap: 8px;
}

.dsub-panel-txt:empty {
  display: none;
}

.dsub-panel-txt {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.dsub-tog-in {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.dsub-tog {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: background 0.16s ease;
}

.dsub-tog::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(0);
  transition: transform 0.16s ease;
}

.dsub-tog-in:checked + .dsub-tog {
  background: var(--cyan, #22d3ee);
}

.dsub-tog-in:checked + .dsub-tog::after {
  transform: translateX(18px);
}

.dsub-tog-in:focus-visible + .dsub-tog {
  outline: 2px solid var(--cyan, #22d3ee);
  outline-offset: 3px;
}

.dsub-panel-wrap {
  display: grid;
}

.dsub-panel-body {
  display: grid;
  gap: 12px;
  padding: 2px 0 6px;
}

.dsub-panel-body[hidden] {
  display: none;
}

.dsub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dsub-chip {
  padding: 5px 10px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.dsub-chip:hover {
  border-color: var(--cyan, #22d3ee);
}

.dsub-ov-form .dcom-tabs {
  margin: 4px 0 16px;
}

.dsub-ov-form .dsub-panel:not(.dsub-panel-eng) {
  padding: 12px 0 4px;
}

.dsub-ov-form .dsub-set .dcard-say,
.dsub-ov-form .dsub-chips {
  flex: 1 1 100%;
  width: 100%;
}

.dsub-aus {
  display: grid;
  gap: 8px;
}

.dsub-aus-karte {
  padding: 10px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.dsub-aus-karte.is-aus {
  opacity: 0.55;
}

.dsub-aus-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.dsub-aus-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 7em;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.dsub-aus-name::after {
  content: '';
  flex: none;
  width: 0.42em;
  height: 0.42em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.dsub-aus-karte.is-auf .dsub-aus-name::after {
  transform: rotate(-135deg) translate(-1px, 1px);
}

.dsub-aus-mehr {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.dsub-aus-karte.is-auf .dsub-aus-mehr {
  grid-template-rows: 1fr;
}

.dsub-aus-mehr-in {
  overflow: hidden;
  min-height: 0;
  padding-top: 10px;
}

.dsub-aus-kurz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.dsub-aus-karte select.dneu-txt {
  width: 7.5em;
}

.dsub-aus-karte select.dsub-hin-seite {
  width: 11em;
}

.dsub-aus-hintkopf {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.dsub-aus-hint {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.dsub-aus-hint[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .dsub-ov {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .dsub-set input[type='text'].dneu-txt,
  .dsub-aus-karte .dsub-filter,
  .dsub-aus-karte .dsub-hin-text {
    width: 100%;
  }

  .dsub-hero-tat {
    width: 100%;
  }

  .dsub-hero-tat .dneu-btn,
  .dsub-hero-tat .dov-tat {
    flex: 1;
    justify-content: center;
  }
}

/* ---------- Tools: Follower ---------- */

.dfol-hero {
  position: relative;
  overflow: hidden;
}

.dfol-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--cyan);
}

.dfol-tabs {
  margin: 14px 0 18px;
}

.dfol-sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dfol-sperre[hidden] {
  display: none;
}

.dfol-sync {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}

.dfol-filter {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 10px 12px;
  align-items: end;
  margin: 0 0 16px;
}

.dfol-filter-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 1px;
}

.dfol-zeit {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  grid-column: 1 / -1;
}

.dfol-zeit[hidden] {
  display: none;
}

#folZeitBtn.is-an,
#folWegZeitBtn.is-an {
  border-color: var(--accent-line);
  color: var(--text-strong);
}

.dfol-seite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

.dfol-platz {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  color: var(--muted);
}

.dblick-fol .dblick-kpis {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}

.dblick-fol .dblick-kpis i {
  font-style: normal;
}

.dwk.is-kommt {
  cursor: default;
  opacity: 0.72;
}

.dwk.is-kommt:hover {
  transform: none;
}

.dpop-head {
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--glass-line);
}

.dpop-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}

.dpop-login {
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.dpop-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.dpop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.dpop-row:hover {
  background: var(--surface-2);
}

/* Profil bearbeiten gibt es noch nicht - sieht deshalb nicht wie ein Knopf aus. */
.dpop-row.is-off {
  color: var(--hint);
  cursor: default;
}

.dpop-row.is-off:hover {
  background: transparent;
}

.dpop-soon {
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Anzahl am rechten Rand der Zeile, wie das "bald" daneben - nur gefüllt
   statt umrandet, weil es eine Angabe ist und kein Zustand. */
.dpop-zahl {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.dpop-ico {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.dpop-out {
  padding-top: 6px;
  border-top: 1px solid var(--glass-line);
}

.dpop-row.is-out:hover {
  color: var(--red);
}

/* ---------- Hinweis auf den Follow ---------- */

/* Eine Zeile mit Rand, kein Kasten mit Ausrufezeichen: der Dienst läuft auch
   ohne Follow, der Hinweis darf also nicht wie eine Sperre wirken. */
.dfolge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px 12px 16px;
  border: 0;
  border-left: 4px solid var(--btn);
  border-radius: 8px;
  background: var(--surface);
}

.dfolge-txt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-width: 0;
  flex: 1;
}

.dfolge-say {
  margin: 0;
  font-size: 14.5px;
  color: var(--text);
}

.dfolge-links {
  display: flex;
  gap: 8px;
}

.btn-tw-mini {
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 13.5px;
}

.dfolge-zu {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.dfolge-zu:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- Ansichten ---------- */

.dviews {
  display: block;
  padding: 18px 0 60px;
}

/* Ohne JavaScript stehen alle Bereiche untereinander und die Links links
   springen dorthin. Erst dash-ready blendet die inaktiven aus. */
.dash-ready .dview {
  display: none;
}

.dash-ready .dview.is-on {
  display: grid;
  gap: 12px;
  animation: dview-in 0.2s ease-out;
}

@keyframes dview-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-ready .dview.is-on {
    animation: none;
  }
}

.dfehler {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 0;
  border-left: 4px solid var(--red);
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  font-size: 14px;
  color: var(--text);
}

.dcard {
  padding: 16px 18px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.dcard-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-strong);
}

.dcard-say {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* Die eigene Twitch-Id im Konto-Menü. Zum Abschreiben gedacht, deshalb
   user-select: all - ein Klick markiert die ganze Zahl. */
.dpop-id {
  margin: 6px 0 0;
}

.dpop-id code {
  padding: 2px 7px;
  border-radius: 4px;
  border: 0;
  background: var(--input);
  color: var(--text-strong);
  font-size: 12px;
  user-select: all;
}

/* ---------- Zahlen des eigenen Kanals ---------- */

/* auto-fit statt fester Spaltenzahl: es sind zwei bis vier Kacheln, je
   nachdem was Twitch hergegeben hat. Mit fester Zahl bliebe sonst eine
   Lücke, wo eine Zahl fehlt. */
.dstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.dstat {
  position: relative;
  padding: 14px 16px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

.dstat::before {
  display: none;
}

.dstat-wert {
  display: block;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.dstat-label {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

/* Woher die Zahl kommt, z.B. "1.240 Sub-Punkte". Leise gehalten: die Zeile
   erklärt die Kachel, sie ist nicht ihr Inhalt. */
.dstat-zusatz {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--hint);
}

/* Die geschätzte Einnahme ist gerechnet und nicht abgefragt. Eigene Farbe,
   damit sie sich von den echten Zahlen der Kachel unterscheidet. */
.dstat-zusatz.is-geld {
  color: var(--green);
  font-weight: 650;
}

.dstat-zusatz.is-hoch {
  color: var(--green);
}

.dstat-zusatz.is-runter {
  color: var(--red);
}

/* Der Rechenweg steht im title und nicht dauerhaft auf der Seite. Damit das
   auffindbar bleibt, sieht alles mit title auch danach aus. */
.dstat-zusatz[title],
.dliste-kopf[title] {
  text-decoration: underline dotted var(--glass-line);
  text-underline-offset: 3px;
  cursor: help;
}

/* ---------- Listen unter den Kacheln ---------- */

.dlisten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.dliste {
  padding: 14px 16px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.dliste-kopf {
  margin: 0 0 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dliste-rows {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dliste-rows li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.dliste-txt {
  flex: 1;
  min-width: 0;
}

/* Als <a>, wenn es etwas zu öffnen gibt (Stream, Clip) - sonst als <span>.
   Beide sehen gleich aus, der Link färbt sich nur beim Zeigen.

   Statt drei Punkten am Ende blendet der Titel aus. Ein Clip-Titel bricht
   selten an einer sinnvollen Stelle ab, und die Kante war das, was am Ende
   nach Fehler aussah. */
.dliste-name {
  display: block;
  overflow: hidden;
  container-type: inline-size;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-strong);
  text-decoration: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

a.dliste-name:hover {
  color: var(--cyan);
}

.dliste-lauf {
  display: inline-block;
  white-space: nowrap;
  transition: transform 3.5s linear;
}

/* Beim Zeigen fährt der Titel so weit nach links, wie er über den Rand
   hinaussteht: 100cqw ist die sichtbare Breite, 100 % die des Textes. min()
   hält kurze Titel bei null - sonst wanderten sie nach rechts. */
.dliste-rows li:hover .dliste-lauf,
.dliste-name:focus-visible .dliste-lauf {
  transform: translateX(min(0px, calc(100cqw - 100%)));
}

/* Platz 1 bis 3 sollen auffallen, ohne dass man die Zahl liest. Die Farben
   stehen hier fest und nicht als Variable: sie bedeuten Gold, Silber und
   Bronze und sollen sich mit dem Farbschema nicht mitdrehen. */
.dliste-rang {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.dliste-rang.is-1 {
  background: rgba(232, 193, 90, 0.2);
  color: #e0b64f;
}

.dliste-rang.is-2 {
  background: rgba(198, 208, 219, 0.18);
  color: #b6c1cf;
}

.dliste-rang.is-3 {
  background: rgba(207, 139, 82, 0.2);
  color: #cd8850;
}

/* Auf Weiß sind die drei Töne zu hell, um die Zahl darin zu lesen. */
[data-theme='light'] .dliste-rang.is-1 {
  color: #9a7317;
}

[data-theme='light'] .dliste-rang.is-2 {
  background: rgba(120, 136, 156, 0.18);
  color: #64748b;
}

[data-theme='light'] .dliste-rang.is-3 {
  color: #a35c22;
}

.dliste-rows li.is-top .dliste-wert {
  color: var(--text);
  font-weight: 650;
}

/* Follower-Verlauf. Die Linie wird in der Breite gestreckt, der Strich nicht -
   dafür steht vector-effect am Pfad. */
.dkurve {
  display: block;
  width: 100%;
  height: 56px;
  margin: 4px 0 8px;
  color: var(--cyan);
}

.dkurve-linie {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.dkurve-flaeche {
  fill: currentColor;
  opacity: 0.12;
}

.dkurve-fuss {
  margin: 0;
  font-size: 11.5px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.dliste-meta {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--hint);
}

.dliste-wert {
  flex: none;
  font-size: 12px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.dliste-wert.is-runter {
  color: var(--red);
  opacity: 0.85;
}

.dstat-tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

/* Wann die Zahlen geholt wurden. Ganz rechts und leise - gebraucht wird das
   nur beim Vergleich mit dem Creator Dashboard. */
.dstat-stand {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}

.dstat-btn {
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.dstat-btn:hover:not(:disabled) {
  border-color: var(--accent-line);
}

.dstat-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.dstat-btn.is-weg:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.5);
  color: var(--red);
}

/* Der Verbinden-Knopf ist ein Link: .dneu-btn ist für <button> gemacht und
   bringt kein text-decoration mit. */
.dstat-los {
  display: inline-block;
  margin-top: 14px;
  text-decoration: none;
}

/* ---------- Kanalkopf in der Übersicht ---------- */

.dkanal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

/* Farbverlauf hinter dem Bild - der Kopf ist die erste Karte im Bereich und
   darf sich von den Zahlen darunter abheben. */
.dkanal::before {
  display: none;
}

.dkanal-shot,
.dkanal-leer {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--glass-line);
}

.dkanal-leer {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 30px;
  font-weight: 800;
  color: var(--cyan);
}

.dkanal-shot:not([hidden]) ~ .dkanal-leer {
  display: none;
}

.dkanal-txt {
  position: relative;
  min-width: 0;
  flex: 1;
}

.dkanal-name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.dkanal-login {
  margin: 1px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* Stream-Titel kann beliebig lang sein - eine Zeile, dann Punkte. */
.dkanal-titel {
  margin: 8px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--text);
}

.dkanal-stand {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  max-width: 46%;
}

.dfakt {
  padding: 5px 11px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.dlive {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, #ff4d6a 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #ff4d6a 14%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  color: #ff6b83;
  white-space: nowrap;
}

.dlive::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.dlive.is-off {
  border-color: var(--glass-line);
  background: var(--surface);
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 720px) {
  .dkanal {
    flex-wrap: wrap;
    gap: 13px;
  }

  .dkanal-shot,
  .dkanal-leer {
    width: 58px;
    height: 58px;
  }

  .dkanal-name {
    font-size: 19px;
  }

  .dkanal-stand {
    max-width: none;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

/* ---------- Eigene Overlays ---------- */

/* Knopfleiste ausserhalb der Karte. Steht über und unter der Liste: bei
   zwölf Overlays ist der obere weggescrollt. */
.dbalken {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.dbalken.is-unten {
  margin: 14px 0 0;
}

.dbalken-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.dbalken-plus {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.dneu {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.dneu-sel,
.dneu-txt {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}

.dneu-txt {
  flex: 1;
  min-width: 190px;
}

.dneu-sel {
  cursor: pointer;
}

.dneu-txt:focus-visible,
.dneu-sel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--btn);
}

.dneu-btn {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--btn);
  color: var(--btn-fg, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.dneu-btn:hover {
  background: var(--btn-hover, #4752c4);
}

.dneu-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Erklärung zum gewählten Typ - steht unter dem Formular, damit die Zeile
   beim Umschalten nicht die Knöpfe verschiebt. */
.dneu-say {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.dovs {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* Links das Widget in klein, rechts Name und Knöpfe. So erkennt man beim
   Überfliegen, welches Overlay man vor sich hat, ohne OBS aufzumachen. */
.dov {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

.dov-mini {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 116px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background-color: #0b0e15;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 14px 14px;
  background-position:
    0 0,
    0 7px,
    7px -7px,
    -7px 0;
}

/* In der Liste zählt der Umriss, nicht die Beschriftung - für Namen und
   Ergebnis ist bei dieser Größe ohnehin kein Platz. */
.dov-mini .vs-titel,
.dov-mini .vs-label,
.dov-mini .vs-ergebnis {
  display: none;
}

.dov-mini .vs-stage {
  padding: 8px;
}

.dov-mini .vs-zahl {
  font-size: 30px;
}

.dov-mini .vs-rang {
  width: 100%;
  gap: 4px;
}

.dov-mini .vs-rang li {
  padding: 4px 8px;
  font-size: 11px;
}

.dov-haupt {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.dov-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Der Name ist gleich das Eingabefeld: Umbenennen ohne zweiten Knopf und ohne
   Dialogfenster. Sieht erst beim Hineinklicken wie ein Feld aus. */
.dov-name {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-strong);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.dov-name:hover {
  border-color: var(--glass-line);
}

.dov-name:focus-visible {
  outline: none;
  border-color: var(--accent-line);
  background: var(--surface);
}

.dov-typ {
  flex: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--selected);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dov-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.dov-lab {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--hint);
}

.dov-link code {
  overflow: hidden;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}

.dov-copy {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--hover);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.dov-copy:hover {
  background: var(--selected);
  color: var(--text-strong);
}

.dov-open {
  font-size: 13px;
  font-weight: 500;
  color: var(--btn);
}

.dov-open:hover {
  text-decoration: underline;
}

.dov-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.dov-tat {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--hover);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.dov-tat:hover {
  background: var(--selected);
  color: var(--text-strong);
}

.dov-tat.is-stark {
  background: var(--btn);
  color: var(--btn-fg, #fff);
}

.dov-tat.is-weg:hover {
  color: var(--red);
}

@media (max-width: 620px) {
  .dov {
    grid-template-columns: 1fr;
  }

  .dov-mini {
    height: 150px;
  }
}

/* Steht, wo noch nichts angelegt ist. Bewusst ruhig - eine leere Liste ist
   kein Fehler. */
.dleer {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Mods (dteam-, weil dmod- schon den Modulen gehört) ---------- */

.dteam {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.dteam-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

.dteam-shot {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.dteam-shot.is-leer {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 800;
  color: var(--cyan);
}

.dteam-txt {
  min-width: 0;
  flex: 1;
}

.dteam-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-strong);
}

.dteam-login {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}

.dteam-login:hover {
  color: var(--cyan);
}

/* Kanalname über den fremden Overlays. */
.dteam-kopf {
  margin: 20px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dfremd {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dfremd li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

.dfremd-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text-strong);
}

.dneu-btn-mini {
  padding: 7px 15px;
  font-size: 13px;
  text-decoration: none;
}

/* ---------- Chatbot ---------- */

/* Reiter: aktiver Reiter sitzt als Karte auf der Leiste, mit dickem Strich
   unten. Nur Text plus Haarlinie war zu schwach - die Reihe muss als
   Umschalter lesbar sein, nicht als Untertitel. */
.dbot-reiter {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 4px 4px 0;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.dbot-reiter::-webkit-scrollbar {
  display: none;
}

.dbot-reiter-knopf {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px 11px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 10px 10px 0 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.dbot-reiter-knopf:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--line);
  border-bottom-color: transparent;
}

.dbot-reiter-knopf.is-on {
  border-color: transparent;
  border-bottom-color: var(--btn);
  background: var(--surface);
  color: var(--text-strong);
}

.dbot-reiter-knopf:focus-visible {
  outline: none;
  color: var(--text-strong);
  border-color: transparent;
  border-bottom-color: var(--btn);
}

.dbot-reiter-knopf.is-gesperrt,
.dbot-reiter-knopf:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.dbot-reiter-knopf.is-gesperrt:hover,
.dbot-reiter-knopf:disabled:hover {
  color: var(--muted);
  border-color: transparent;
  background: none;
}

.dbot-sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 12px 0 18px;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
}

.dbot-sperre[hidden] {
  display: none;
}

.dbot-sperre > div:first-child {
  display: grid;
  gap: 4px;
}

.dbot-sperre strong {
  color: var(--text-strong);
  font-size: 14px;
}

.dbot-sperre span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dbot-sperre > div:last-child {
  flex: none;
}

/* "kommt" - klein und ruhig. Der Reiter ist anklickbar, dahinter steht, was
   geplant ist; nur soll niemand danach suchen und es nicht finden. */
.dbot-bald-marke {
  padding: 2px 6px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dbot-inhalt,
.dbot-tafel {
  display: grid;
  gap: 18px;
}

/* Unterreiter (Spiele und Clips): Pillen in einem eigenen Kasten. Bewusst
   anders als die Reiter darüber - zwei gleich aussehende Zeilen
   übereinander sagen nicht, welche zu welcher gehört. */
.dspiel-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}

.dspiel-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease,
    box-shadow 0.12s ease;
}

.dspiel-knopf:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--surface-2);
}

.dspiel-knopf.is-on {
  border-color: var(--cyan);
  background: var(--ring);
  color: var(--text-strong);
  box-shadow: 0 0 0 1px var(--cyan);
}

.dspiel-knopf:focus-visible {
  outline: none;
  border-color: var(--cyan);
  color: var(--text-strong);
  box-shadow: 0 0 0 1px var(--cyan);
}

/* Logo neben dem Namen. Erst sichtbar, wenn die Datei wirklich da ist -
   sonst bleibt nur der Text, ohne kaputtes Bildsymbol. Helle Fläche wie
   auf der Startseite: manche Logos sind dunkel auf durchsichtig. */
.dspiel-ico {
  display: none;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 6px;
  background: #eef1f7;
}

.dspiel-ico.is-an {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dspiel-ico img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.dspiel-tafel {
  display: grid;
  gap: 18px;
}

/* Was gerade zu tun ist - eine Zeile, kein Kasten. Ohne offene Punkte ist sie
   weg, und die Karte besteht aus Kopf und Knöpfen. */
.dbot-hinweis {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Der zweite Platz: sieht aus wie eine Karte, ist aber keine. Gestrichelt und
   blass, damit die Hand gar nicht erst hinfährt - hier gibt es nichts zu
   verbinden, das kommt später. */
.dbot-slot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-style: dashed;
  background: none;
  box-shadow: none;
  opacity: 0.62;
}

.dbot-slot-zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
}

.dbot-slot-txt {
  flex: 1;
  min-width: 180px;
  display: grid;
  gap: 4px;
}

.dbot-slot-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.dbot-slot-say {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Der /mod-Befehl zum Kopieren. */
.dbot-code {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.dbot-code-txt {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--input);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

/* Home: Kopf mit Bot, Lampe rechts. */
.dbot-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.dbot-kopf-txt {
  flex: 1;
  min-width: 160px;
}

.dbot-kopf-txt .dcard-title {
  margin: 0;
}

.dbot-kopf-say {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.dbot-bild-gross {
  width: 46px;
  height: 46px;
}

.dbot-lampe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
}

.dbot-testsay {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.dbot-testsay.is-gut {
  border-color: rgba(52, 211, 153, 0.45);
  color: var(--text);
}

.dbot-testsay.is-schlecht {
  border-color: rgba(248, 113, 113, 0.45);
  color: var(--text);
}

#botHomeTaten {
  margin-top: 18px;
}

.dbot-bald {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
}

.dbot-bald li {
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}

.dbot-bald li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-line);
}

/* Der Zustand des Bot-Kontos: Bild, Name, Knopf. Eine Zeile, weil es meist
   nur eine Aussage ist - verbunden oder nicht. */
.dbot-konto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
}

.dbot-bild {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

.dbot-namen {
  display: grid;
  gap: 2px;
  margin-right: auto;
}

.dbot-name-gross {
  font-size: 15px;
  font-weight: 750;
  color: var(--text-strong);
}

.dbot-sub {
  font-size: 13px;
  color: var(--muted);
}

/* Ein Punkt sagt schneller als ein Wort, ob etwas läuft. */
.dbot-punkt {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
}

.dbot-punkt.is-on {
  background: var(--green, #34d399);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.dbot-liste {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
}

.dbot-tabelle-wrap {
  margin-top: 18px;
  overflow-x: auto;
}

.dbot-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.dbot-tabelle th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.dbot-tabelle td {
  padding: 12px;
  border-bottom: 1px solid var(--glass-line);
  vertical-align: middle;
}

.dbot-tabelle tr:last-child td {
  border-bottom: 0;
}

.dbot-tabelle-akt {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.dbot-tabelle .dbot-cmd-name,
.dbot-tabelle .dbot-cmd-text {
  display: block;
}

.dbot-tabelle .dcmd-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dbot-klapp {
  padding: 0;
}

.dbot-klapp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
}

.dbot-klapp-kopf::-webkit-details-marker {
  display: none;
}

.dbot-klapp-kopf > span:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dbot-klapp-kopf .dcard-say {
  margin-top: 0;
}

.dbot-klapp[open] .dcmd-vars-pfeil {
  transform: rotate(225deg);
}

.dbot-klapp[open] .dbot-tabelle-wrap,
.dbot-klapp[open] .dleer {
  margin-left: 24px;
  margin-right: 24px;
}

.dbot-klapp[open] .dleer {
  margin-bottom: 22px;
}

.dbot-klapp[open] .dbot-tabelle-wrap {
  margin-bottom: 22px;
}

/* Suche und "bauen" in einer Zeile, die Liste darunter scrollt. Ohne die
   Leiste wäre der Knopf wieder ausserhalb der Karte, und ohne die Höhe
   würde die Seite mit achtzehn Vorlagen endlos werden. */
.dcmd-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.dcmd-suche {
  flex: 1 1 180px;
  min-width: 0;
}

.dbot-liste-scroll {
  margin-top: 12px;
  max-height: min(28rem, 55vh);
  overflow-x: hidden;
  overflow-y: auto;
}

.dbot-liste-scroll .dbot-liste {
  margin-top: 0;
}

.dbot-eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
}

.dbot-cmd {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dbot-cmd-name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--cyan);
}

.dbot-cmd-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dbot-cmd-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.dbot-knoepfe {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ausgeschaltet: die Zeile bleibt lesbar, tritt aber zurück. In einer Liste
   aus zwanzig Vorlagen soll auf einen Blick klar sein, was davon im Chat
   wirklich gilt. */
.dbot-eintrag.is-aus .dbot-cmd {
  opacity: 0.45;
}

.dbot-eintrag.is-aus .dbot-cmd-name {
  text-decoration: line-through;
}

/* ---------- Chatbot: Command anlegen ---------- */

.dbalken.is-links {
  justify-content: flex-start;
}

.dcmd {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

/* Name und Abklingzeit teilen sich eine Reihe: die Zahl braucht wenig Platz,
   und beides gehört zum Befehl selbst. Alias und die Namenslisten stehen
   darunter je in einer eigenen Reihe. */
.dcmd-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.dcmd-reihe.is-zwei {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dcmd-feld {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.dcmd-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.dcmd-opt {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hint);
}

/* .dneu-txt bringt min-width: 190px mit - das ist für die Overlay-Zeile
   gedacht und würde hier die Dreierspalte auseinanderdrücken. */
.dcmd .dneu-txt {
  width: 100%;
  min-width: 0;
}

/* Das Ausrufezeichen sitzt im Feld, damit niemand es mit eintippt. */
.dcmd-ruf {
  position: relative;
  display: block;
}

.dcmd-ruf-zeichen {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 750;
  color: var(--cyan);
  pointer-events: none;
}

.dcmd-ruf .dneu-txt {
  width: 100%;
  padding-left: 26px;
}

.dcmd-ruf.is-klammer .dneu-txt {
  padding-right: 26px;
}

.dcmd-ruf-ende {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 750;
  color: var(--cyan);
  pointer-events: none;
}

/* Beim Ändern steht der Name fest - ein neuer Name wäre ein neuer Befehl. */
.dneu-txt.is-fest {
  color: var(--muted);
  cursor: not-allowed;
}

.dcmd-feld-schmal {
  width: 132px;
}

.dcmd-cd {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dcmd-cd .dneu-txt {
  width: 74px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dcmd-einheit {
  font-size: 13px;
  color: var(--muted);
}

.dcmd-stufen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dcmd-stufe {
  padding: 8px 15px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.dcmd-stufe:hover {
  color: var(--text);
}

.dcmd-stufe.is-on {
  border-color: var(--accent-line);
  background: var(--ring);
  color: var(--text-strong);
}

.dcmd-listewahl {
  display: grid;
  gap: 8px;
}

.dcmd-listewahl-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.dcmd-listewahl-reihe .dneu-txt {
  flex: 1 1 180px;
  min-width: 160px;
}

.dcmd-antwort {
  min-height: 84px;
  resize: vertical;
}

/* Eine Zeile je Eintrag - das Feld soll von sich aus zeigen, dass hier eine
   Liste steht und kein Satz. */
.dcmd-eintraege {
  min-height: 180px;
  line-height: 1.7;
}

.dcmd-zaehler {
  margin: 0;
  font-size: 12px;
  color: var(--hint);
}

.dcmd-zaehler.is-voll {
  color: var(--amber);
}

/* Überschrift mitten im Formular. Aus vier Feldern sind viele geworden, und
   ohne Zwischenzeile liest sich das als eine einzige lange Liste. */
.dcmd-teil {
  display: grid;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-line);
}

.dcmd-teil:first-child {
  padding-top: 0;
  border-top: 0;
}

.dcmd-teil-titel {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-strong);
}

.dcmd-teil-say {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Haken einer Gruppe stehen dicht beieinander - .dschalter bringt für sich
   allein einen Abstand mit, den es hier nicht braucht. */
.dcmd-schalter {
  display: grid;
  gap: 12px;
}

.dcmd-schalter .dschalter {
  margin-bottom: 0;
}

/* Ein Satz zum Feld darüber, kein eigener Absatz - deshalb rückt er näher
   heran, als die Lücke des Formulars vorgibt. */
.dcmd-hilfe {
  margin: -8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hint);
}

.dcmd-hilfe code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--cyan);
}

.dcmd-texte {
  display: grid;
  gap: 16px;
}

/* Eine Absage ist ein Satz und keine Antwort voller Platzhalter - das Feld
   darf entsprechend flacher stehen. */
.dcmd-antwort.is-kurz {
  min-height: 0;
}

.dcmd-vars {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--glass-line);
  border-radius: 13px;
}

/* Zugeklappt, bis jemand Platzhalter braucht. Listen stehen in derselben
   Klappe - sie gelten kanalweit, nicht nur für eigene Befehle. */
.dcmd-vars.is-klapp {
  padding: 0;
  overflow: hidden;
}

.dcmd-vars-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.dcmd-vars-kopf::-webkit-details-marker {
  display: none;
}

.dcmd-vars-kopf .dcmd-label {
  margin: 0;
}

.dcmd-vars-pfeil {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.12s ease;
}

.dcmd-vars.is-klapp[open] .dcmd-vars-pfeil {
  transform: rotate(225deg);
}

.dcmd-vars.is-klapp[open] .dcmd-vargruppen {
  padding: 0 16px;
}

.dcmd-vars.is-klapp[open] .dcmd-vargruppen:last-child {
  padding-bottom: 16px;
}

/* Die Liste ist lang geworden. Ohne Überschriften sucht man darin, mit
   Überschriften überfliegt man sie. */
.dcmd-vargruppen {
  display: grid;
  gap: 12px;
}

.dcmd-vargruppe {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hint);
}

.dcmd-varliste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
}

.dcmd-var {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.dcmd-var:hover {
  border-color: var(--accent-line);
}

.dcmd-var-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--cyan);
  overflow-wrap: anywhere;
}

.dcmd-var-say {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.dcmd-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Steht neben dem Knopf und sagt, was hinter ihm liegt. Bewusst blass - es ist
   eine Auskunft und keine Aufforderung. */
.dcmd-stand {
  font-size: 12.5px;
  color: var(--hint);
}

/* Kopfzeile eines Eintrags in der Liste: Name, Aliasse, Rechte. */
.dcmd-kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.dcmd-alias {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
}

.dcmd-marke {
  padding: 2px 8px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.dcmd-marke.is-mod,
.dcmd-marke.is-broadcaster {
  border-color: rgba(52, 211, 153, 0.4);
}

.dcmd-marke.is-sub,
.dcmd-marke.is-vip {
  border-color: var(--accent-line);
}

/* Namenslisten schlagen die Stufen, also stehen sie auch farblich daneben. */
.dcmd-marke.is-erlaubt {
  border-color: var(--accent-line);
  color: var(--text);
}

.dcmd-marke.is-gesperrt {
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 700px) {
  .dcmd-reihe,
  .dcmd-reihe.is-zwei {
    grid-template-columns: 1fr;
  }

  .dcmd-feld-schmal {
    width: 100%;
  }
}

/* ---------- Chatbot: die drei Clip-Karten ---------- */

/* Titel links, Schalter rechts. Der Schalter gehört in den Kopf, weil er die
   ganze Karte an- und ausmacht und nicht eine Einstellung darin. */
.dclip-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* Die aufgeklappten Einstellungen. Die Linie trennt sie vom Kopf, ohne die
   Karte in zwei Karten zu zerlegen. */
.dclip-inhalt {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-line);
}

.dknebel {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Der Kasten selbst ist unsichtbar, aber da: er nimmt Klick, Tastatur und
   Fokus entgegen, die Bahn daneben zeigt nur seinen Stand. */
.dknebel-box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dknebel-bahn {
  position: relative;
  flex: none;
  width: 44px;
  height: 25px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dknebel-bahn::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.dknebel-box:checked + .dknebel-bahn {
  border-color: var(--accent-line);
  background: var(--ring);
}

.dknebel-box:checked + .dknebel-bahn::after {
  background: var(--cyan);
  transform: translateX(19px);
}

.dknebel-box:focus-visible + .dknebel-bahn {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.dknebel-txt {
  min-width: 26px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}

.dknebel-box:checked ~ .dknebel-txt {
  color: var(--text-strong);
}

/* Rechnet den Befehl vor. Sieht aus wie eine Chatzeile, weil hier steht, was
   später im Chat steht. */
.dclip-probe {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: var(--glass);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.dclip-probe b {
  font-weight: 650;
  color: var(--text-strong);
}

@media (max-width: 700px) {
  .dclip-kopf {
    flex-direction: column;
    gap: 14px;
  }
}

/* ---------- Events: Verlosung ---------- */

.devt-mehr {
  margin: 4px 0 0;
}

.devt-mehr summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 650;
}

.devt-mehr[open] summary {
  margin-bottom: 12px;
  color: var(--text);
}

.devt-lauf-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.devt-stand {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.devt-stand.is-an {
  border-color: var(--accent-line);
  color: var(--text-strong);
  background: var(--surface-2);
}

.devt-leute {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.devt-wer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 650;
}

.devt-weg {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.devt-weg:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}

#evtAddForm {
  align-items: flex-end;
  margin-top: 16px;
}

#evtAnzeige:disabled {
  opacity: 0.85;
}

.devt-unbegrenzt {
  align-self: end;
  padding-bottom: 10px;
}

.devt-shell {
  display: grid;
  gap: 22px;
}

.devt-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 11px;
}

.devt-blick {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 196px;
  padding: 16px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.devt-blick[hidden] {
  display: none;
}

.devt-blick-kopf strong {
  display: block;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 800;
}

.devt-blick-kopf p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.devt-blick-buehne {
  position: relative;
  min-height: 156px;
}

.dwk.is-blick {
  border-color: var(--accent-line);
  background: var(--ring);
}

.dblick {
  position: relative;
  min-height: 156px;
}

.dblick-rad-scheibe {
  width: 132px;
  height: 132px;
  margin: 8px auto 0;
  border-radius: 50%;
  background: conic-gradient(
    #22d3ee 0 25%,
    #7c5cff 25% 50%,
    #ffb454 50% 75%,
    #34d399 75% 100%
  );
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cyan) 22%, transparent);
}

.dblick-rad-zeiger {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 16px solid var(--text-strong);
  transform: translateX(-50%);
}

.dblick-rad-kern {
  position: absolute;
  top: 62px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 800;
  transform: translateX(-50%);
}

.dblick-chip,
.dblick-win,
.dblick-dmg,
.dblick-beute,
.dblick-defend {
  position: absolute;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.dblick-chip {
  top: 18px;
  left: 8px;
}

.dblick-win,
.dblick-dmg,
.dblick-beute {
  right: 6px;
  bottom: 10px;
  opacity: 0;
  transform: translateY(8px);
}

.dblick-bday {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.dblick-kal {
  display: grid;
  place-items: center;
  height: 108px;
  border-radius: 16px;
  background: color-mix(in srgb, #ff8aa8 16%, var(--surface-2));
  color: #ff8aa8;
}

.dblick-kal span {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.dblick-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dblick-liste li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12px;
}

.dblick-liste em {
  color: var(--muted);
  font-style: normal;
}

.dblick-liste .is-heute {
  border: 1px solid color-mix(in srgb, #ff8aa8 40%, transparent);
}

.dblick-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dblick-kpis i {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--surface-2);
  font-style: normal;
  text-align: center;
}

.dblick-kpis b {
  font-size: 18px;
}

.dblick-kpis small {
  color: var(--muted);
  font-size: 10px;
}

.dblick-balken {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.dblick-balken span {
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 999px;
  background: var(--cyan);
}

.dblick-kampf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
}

.dblick-kaempfer {
  display: grid;
  gap: 8px;
}

.dblick-kaempfer i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 22%, var(--surface-2));
}

.dblick-kaempfer i::after {
  display: block;
  width: var(--hp);
  height: 100%;
  border-radius: inherit;
  background: var(--violet);
  content: "";
  transform-origin: left center;
}

.dblick-vs {
  color: var(--violet);
  font-size: 22px;
}

.dblick-raub-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
}

.dblick-raub-zeile span {
  color: var(--muted);
}

.dblick-muenze {
  width: 22px;
  height: 22px;
  margin: 16px auto 0;
  border-radius: 50%;
  background: #ffb454;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #000 18%, transparent);
}

.dblick-defend {
  left: 8px;
  bottom: 12px;
  color: #ffb454;
}

.devt-blick-buehne.is-an .dblick-rad-scheibe {
  animation: dblick-spin 1.15s cubic-bezier(0.15, 0.8, 0.2, 1);
}

.devt-blick-buehne.is-an .dblick-win,
.devt-blick-buehne.is-an .dblick-dmg,
.devt-blick-buehne.is-an .dblick-beute {
  animation: dblick-pop 0.7s 0.55s ease both;
}

.devt-blick-buehne.is-an .dblick-liste li {
  animation: dblick-up 0.45s ease both;
}

.devt-blick-buehne.is-an .dblick-liste li:nth-child(2) {
  animation-delay: 80ms;
}

.devt-blick-buehne.is-an .dblick-liste li:nth-child(3) {
  animation-delay: 160ms;
}

.devt-blick-buehne.is-an .dblick-balken span {
  animation: dblick-bar 0.7s ease both;
}

.devt-blick-buehne.is-an .dblick-kaempfer.is-ziel i::after {
  animation: dblick-hp 0.8s ease both;
}

.devt-blick-buehne.is-an .dblick-vs {
  animation: dblick-schlag 0.45s ease;
}

.devt-blick-buehne.is-an .dblick-muenze {
  animation: dblick-flug 0.8s ease both;
}

.devt-blick-buehne.is-an .dblick-defend {
  animation: dblick-puls 1.1s ease;
}

.dblick-rang {
  display: grid;
  gap: 8px;
  margin: 22px 8px 0;
  padding: 0;
  list-style: none;
}

.dblick-rang li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
}

.dblick-rang em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dblick-rang b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dblick-rang span {
  color: var(--cyan);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.dblick-rang .is-eins {
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
}

.devt-blick-buehne.is-an .dblick-rang li {
  animation: dblick-up 0.45s ease both;
}

.devt-blick-buehne.is-an .dblick-rang li:nth-child(2) {
  animation-delay: 80ms;
}

.devt-blick-buehne.is-an .dblick-rang li:nth-child(3) {
  animation-delay: 160ms;
}

.dcnt-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.dcnt-chips-neben {
  margin-top: -6px;
}

.dgeb-chip.is-neben {
  opacity: 0.92;
  font-weight: 600;
}

.dcnt-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}

.dcnt-suche {
  flex: 1 1 220px;
  min-width: 0;
}

.dcnt-karte {
  min-width: 0;
}

.dcnt-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.dcnt-stand {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.dcnt-balken {
  height: 6px;
  margin: 12px 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 16%, var(--surface-2));
  overflow: hidden;
}

.dcnt-balken span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.dcnt-taten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.dcnt-leiste .dcnt-taten {
  margin-top: 0;
}

.dcnt-karte.is-aus {
  opacity: 0.55;
}

.dcnt-eigen-titel {
  margin: 8px 0 0;
}

@keyframes dblick-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(420deg);
  }
}

@keyframes dblick-pop {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dblick-up {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@keyframes dblick-bar {
  from {
    width: 12%;
  }
  to {
    width: var(--w);
  }
}

@keyframes dblick-hp {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0.55);
  }
}

@keyframes dblick-schlag {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  40% {
    transform: scale(1.25) rotate(-12deg);
  }
}

@keyframes dblick-flug {
  from {
    transform: translateX(28px);
    opacity: 0.2;
  }
  to {
    transform: translateX(-28px);
    opacity: 1;
  }
}

@keyframes dblick-puls {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
}

.devt-shell.is-offen {
  grid-template-columns: 188px minmax(0, 1fr);
  align-items: start;
}

.devt-shell.is-offen .devt-blick {
  display: none;
}

.devt-shell.is-offen .devt-karten {
  grid-template-columns: 1fr;
  position: sticky;
  top: 20px;
}

.devt-shell.is-offen .dwk-say {
  display: none;
}

.devt-inhalt,
#evtWidgetVerlosung,
#evtWidgetGeburtstage,
#evtWidgetCommunitystats,
#evtWidgetCombat,
#evtWidgetRobbery,
#evtWidgetCounter,
#evtWidgetCasino,
#evtWidgetFollower,
#evtWidgetSubathon {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.devt-heute {
  color: var(--cyan);
  font-weight: 750;
}

.dgeb-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.dgeb-grid[hidden] {
  display: none;
}

.dgeb-liste {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 40px);
}

.dgeb-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dgeb-kopf-tat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dgeb-suche {
  display: block;
  margin-top: 12px;
}

.dgeb-werk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.dgeb-wahl {
  min-width: 0;
}

.dgeb-wahl .dneu-sel {
  font-size: 12.5px;
}

.dgeb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dgeb-chip {
  padding: 5px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--hover);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.dgeb-chip:hover,
.dgeb-chip.is-an {
  color: var(--text-strong);
  background: var(--selected);
}

.dgeb-scroll {
  margin-top: 12px;
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding-right: 2px;
}

.dgeb-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.dgeb-tabelle th,
.dgeb-tabelle td {
  padding: 8px 6px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

.dgeb-tabelle th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.dgeb-tabelle th button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.dgeb-tabelle th button:hover,
.dgeb-tabelle th.is-an button {
  color: var(--text-strong);
}

.dgeb-th-tat {
  width: 68px;
}

.dgeb-tabelle td {
  font-size: 13px;
}

.dgeb-wer-name {
  font-weight: 750;
  color: var(--text-strong);
}

.dgeb-wer-alter {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 650;
}

.dgeb-wer-meta,
.dgeb-wer-rest {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--text);
}

.dgeb-wer-rest.is-nah {
  color: var(--cyan);
}

.dgeb-wer-tat {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.dgeb-gruppe td {
  padding-top: 14px;
  border-bottom: 0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dgeb-tabelle tr.is-heute td {
  background: var(--surface-2);
}

.dgeb-tabelle .dgeb-ico {
  width: 28px;
  height: 28px;
}

.dgeb-ico {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dgeb-ico:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}

.dgeb-ico-svg {
  width: 16px;
  height: 16px;
  display: block;
}

.dgeb-modal {
  max-width: 420px;
}

.dcom-tabs {
  position: sticky;
  top: 12px;
  z-index: 8;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.dcom-tab {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.dcom-tab:hover {
  color: var(--text-strong);
  background: var(--hover);
}

.dcom-tab.is-on {
  color: var(--text-strong);
  background: var(--selected);
  box-shadow: none;
}

.dcom-pane {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.dcom-pane[hidden] {
  display: none;
}

.dcom-pane .dgeb-liste {
  position: static;
  max-height: none;
}

#evtLinks:empty,
#evtOverviewLinks:empty {
  min-height: 28px;
}

.dcom-pane.is-sichtbar,
#evtWidgetVerlosung.is-sichtbar,
#evtWidgetGeburtstage.is-sichtbar,
#evtWidgetCommunitystats.is-sichtbar,
#evtWidgetCombat.is-sichtbar,
#evtWidgetRobbery.is-sichtbar,
#evtWidgetCounter.is-sichtbar,
#evtWidgetCasino.is-sichtbar,
#evtWidgetFollower.is-sichtbar,
#evtWidgetSubathon.is-sichtbar {
  animation: dcom-ein 220ms ease-out both;
}

@keyframes dcom-ein {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dcom-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dcom-kpi {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 17px;
  overflow: hidden;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    border-color 180ms ease;
}

.dcom-kpi::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(72 218 255 / 12%), transparent 68%);
  pointer-events: none;
}

.dcom-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}

.dcom-kpi span,
.dcom-kpi small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.dcom-kpi strong {
  color: var(--text-strong);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.05;
}

.dcom-kpi small.is-live {
  color: var(--cyan);
}

.dcom-start {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.dcom-start-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 190px;
  background:
    radial-gradient(circle at 88% 12%, rgb(72 218 255 / 12%), transparent 32%),
    var(--surface);
}

.dcom-start-main .dov-tat {
  margin-top: 12px;
}

.dcom-eyebrow {
  margin-bottom: 7px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dcom-start-actions {
  display: grid;
  gap: 8px;
}

.dcom-start-actions button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text-strong);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    transform 170ms ease,
    opacity 170ms ease,
    border-color 170ms ease;
}

.dcom-start-actions button:hover {
  transform: translateX(3px);
  border-color: var(--accent-line);
}

.dcom-start-actions span {
  font-size: 13px;
  font-weight: 750;
}

.dcom-start-actions small {
  color: var(--muted);
  font-size: 11.5px;
}

.dcom-single {
  width: min(100%, 980px);
}

.dcom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.dcom-grid.is-daten {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.dcom-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dcom-zwischen {
  margin: 8px 0 0;
  color: var(--text-strong);
  font-size: 13px;
}

.dcom-vorschau {
  padding: 11px 13px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}

.dcom-commands {
  display: grid;
  gap: 9px;
}

.dcom-command-gruppe {
  display: grid;
  gap: 9px;
}

.dcom-erweitert {
  margin-top: 4px;
}

.dcom-erweitert-inhalt {
  display: grid;
  gap: 11px;
  padding-top: 13px;
}

.dcom-command {
  display: grid;
  grid-template-columns: 24px minmax(90px, 0.65fr) minmax(120px, 1fr);
  gap: 8px;
  align-items: end;
}

.dcom-command .dschalter-box {
  margin-bottom: 11px;
}

.dcom-suche {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.dcom-profil {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.dcom-profil-kopf {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dcom-profil-kopf strong {
  font-size: 20px;
  color: var(--text-strong);
}

.dcom-profil-werte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dcom-profil-werte span {
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}

.dcom-profil-werte strong {
  display: block;
  margin-top: 2px;
  color: var(--text-strong);
  font-size: 15px;
}

.dcom-profil-edit {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

.dcom-ledger {
  max-height: 360px;
}

.dcom-plus {
  color: var(--cyan);
  font-weight: 800;
}

.dcom-minus {
  color: #ff7b8b;
  font-weight: 800;
}

.dcom-integrationen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.dcom-integrationen a {
  position: relative;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.dcom-integrationen a:hover {
  background: var(--hover);
}

.dcom-integrationen strong,
.dcom-integrationen span,
.dcom-integrationen em {
  display: block;
}

.dcom-integrationen strong {
  color: var(--text-strong);
  font-size: 13px;
}

.dcom-integrationen span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.dcom-integrationen em {
  margin-top: 11px;
  color: var(--cyan);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 750;
}

@media (max-width: 980px) {
  .dgeb-grid {
    grid-template-columns: 1fr;
  }

  .dgeb-liste {
    position: static;
    max-height: min(70vh, 560px);
  }

  .dcom-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dcom-start {
    grid-template-columns: 1fr;
  }

  .dcom-grid,
  .dcom-grid.is-daten {
    grid-template-columns: 1fr;
  }

  .dcom-integrationen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .devt-blick {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 16px;
  }

  .devt-shell.is-offen {
    grid-template-columns: 1fr;
  }

  .devt-shell.is-offen .devt-karten {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    position: static;
  }

  .devt-shell.is-offen .dwk-say {
    display: block;
  }

  .dcom-zahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dcom-tabs {
    position: static;
    width: 100%;
  }
}

@media (max-width: 540px) {
  .dcom-kpis,
  .dcom-integrationen,
  .dcom-zahlen,
  .dcom-profil-werte {
    grid-template-columns: 1fr;
  }

  .dcom-command {
    grid-template-columns: 24px 1fr;
  }

  .dcom-command .dcom-alias {
    grid-column: 2;
  }

  .dcom-profil-edit {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dcom-pane.is-sichtbar,
  #evtWidgetVerlosung.is-sichtbar,
  #evtWidgetGeburtstage.is-sichtbar,
  #evtWidgetCommunitystats.is-sichtbar,
  #evtWidgetCombat.is-sichtbar,
  #evtWidgetRobbery.is-sichtbar,
  #evtWidgetCounter.is-sichtbar,
  #evtWidgetCasino.is-sichtbar,
  #evtWidgetFollower.is-sichtbar,
  #evtWidgetSubathon.is-sichtbar,
  .devt-blick-buehne.is-an .dblick-rad-scheibe,
  .devt-blick-buehne.is-an .dblick-win,
  .devt-blick-buehne.is-an .dblick-dmg,
  .devt-blick-buehne.is-an .dblick-beute,
  .devt-blick-buehne.is-an .dblick-liste li,
  .devt-blick-buehne.is-an .dblick-balken span,
  .devt-blick-buehne.is-an .dblick-kaempfer.is-ziel i::after,
  .devt-blick-buehne.is-an .dblick-vs,
  .devt-blick-buehne.is-an .dblick-muenze,
  .devt-blick-buehne.is-an .dblick-defend,
  .devt-blick-buehne.is-an .dblick-rang li {
    animation: none;
  }

  .devt-blick-buehne.is-an .dblick-win,
  .devt-blick-buehne.is-an .dblick-dmg,
  .devt-blick-buehne.is-an .dblick-beute {
    opacity: 1;
    transform: none;
  }

  .dcom-tab,
  .dcom-kpi,
  .dcom-start-actions button,
  .dcom-integrationen a {
    transition: none;
  }
}

/* ---------- Fenster: Overlay anlegen und einstellen ---------- */

/* Erbt Rahmen, Backdrop und Animation von .lmodal, nur breiter - die
   Widget-Karten brauchen Platz. */
.dovm {
  width: min(620px, calc(100vw - 28px));
}

#ovAnlegen .dovm-kopf {
  padding: 0 0 18px;
}

.dovm-zur {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}

.dovm-zur svg {
  width: 18px;
  height: 18px;
}

.dovm-zur:hover {
  color: var(--text);
}

.dov-anlegen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.92fr);
  gap: 28px;
  align-items: start;
}

.dov-anlegen-form {
  min-width: 0;
}

.dov-anlegen-sicht {
  position: sticky;
  top: 20px;
}

.dov-valo {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dov-valo-lab {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.dov-valo-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dov-valo-knopf {
  padding: 8px 14px;
  border: 1px solid #ff4655;
  border-radius: 999px;
  background: transparent;
  color: #ff4655;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.dov-valo-knopf:hover {
  background: rgba(255, 70, 85, 0.12);
}

.dov-valo-knopf.is-on {
  background: #ff4655;
  color: #fff;
}

.dov-anlegen-sicht .dvorschau {
  min-height: 420px;
  height: min(68vh, 560px);
}

.dwk.is-on {
  border-color: var(--accent-line);
  background: var(--ring);
}

.dov-design.is-klapp {
  margin-top: 16px;
}

.dov-design-rumpf {
  padding: 0 16px 12px;
}

/* Fenster für die Feineinstellungen. Etwas breiter als das Overlay-Fenster:
   hier stehen Felder paarweise nebeneinander. */
.dvalm {
  width: min(660px, calc(100vw - 28px));
}

/* .dcmd bringt das Raster mit, hier fehlt nur der Rand. Der Abstand nach oben
   sitzt im Fenster im Kopf und nicht am Formular. */
.dvalm-form {
  margin-top: 0;
  padding: 18px 22px 22px;
}

.dvalk {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

#einKontenBox {
  margin-top: 18px;
}

.dvalk-liste {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.dvalk-knopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dvalk-knopf:hover {
  border-color: var(--cyan);
}

.dvalk-platz {
  min-width: 1.6em;
  font-size: 13px;
  font-weight: 750;
  color: var(--cyan);
}

.dvalk-id {
  font-size: 14px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.dvalk-mehr {
  font-size: 12.5px;
  color: var(--muted);
}

.dvalk-zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0;
  padding: 8px 22px 22px;
}

.dvalk-zahlen div {
  display: grid;
  gap: 2px;
}

.dvalk-zahlen dt {
  font-size: 12px;
  color: var(--muted);
}

.dvalk-zahlen dd {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}

.dovm-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 0;
}

.dovm-titel {
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.dovm-x {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.dovm-x:hover {
  color: var(--text);
}

.dovm-teil {
  padding: 16px 22px 22px;
}

.dovm-say {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.dovm-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 11px;
}

/* Eine Karte je Widget-Art. */
.dwk {
  display: grid;
  gap: 4px;
  padding: 14px 14px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.dwk:hover {
  background: var(--hover);
}

.dwk-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--input);
  color: var(--btn);
}

.dwk-svg {
  width: 20px;
  height: 20px;
}

.dwk-name {
  font-size: 15.5px;
  font-weight: 750;
  color: var(--text-strong);
}

.dwk-say {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.dovm-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.dovm-back {
  padding: 11px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
}

.dovm-back:hover {
  color: var(--text);
}

/* ---------- Einstellfelder ---------- */

.dfeld {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.dfeld-lab {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}

.dfeld-say {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.dfeld-txt,
.dfeld-sel {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
}

.dfeld-sel {
  cursor: pointer;
}

.dfeld-txt:focus-visible,
.dfeld-sel:focus-visible {
  outline: none;
  border-color: var(--accent-line);
}

/* Eine Zeile je Eintrag - für die Felder eines Glückrads. */
.dliste {
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.7;
  resize: vertical;
}

.dliste:focus-visible {
  outline: none;
  border-color: var(--accent-line);
}

.dliste-zahl {
  justify-self: end;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.dliste-quellen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.dliste-pick {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 280px;
}

/* Dauer als Std / Min / Sek - gespeichert wird eine Sekundenzahl. */
.ddauer {
  display: flex;
  gap: 9px;
}

.ddauer-teil {
  position: relative;
  flex: 1;
  max-width: 116px;
}

.ddauer-txt {
  width: 100%;
  padding: 11px 44px 11px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}

.ddauer-txt:focus-visible {
  outline: none;
  border-color: var(--accent-line);
}

.ddauer-kurz {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

.dfarben {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.dfarbe {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.dfarbe::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: currentColor;
}

.dfarbe:hover {
  transform: scale(1.08);
}

.dfarbe.is-on {
  border-color: currentColor;
}

.dfarbe.is-cyan {
  color: var(--cyan);
}
.dfarbe.is-purple {
  color: var(--purple);
}
.dfarbe.is-green {
  color: #3ddc84;
}
.dfarbe.is-pink {
  color: #ff5fa2;
}
.dfarbe.is-amber {
  color: #ffb43a;
}
.dfarbe.is-red {
  color: var(--red);
}

.dschalter {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
  cursor: pointer;
}

.dschalter-box {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--cyan);
  cursor: pointer;
}

.dschalter-txt {
  font-size: 14px;
  color: var(--text);
}

/* Eigene Farbe neben den Schnellfarben. Der Systemwähler steckt unsichtbar
   im Knopf - ein eigener hätte sich nicht in die Reihe der Punkte gefügt. */
.dfarbe-frei {
  color: var(--muted);
}

.dfarbe-frei::after {
  background: conic-gradient(
    #f87171,
    #fbbf24,
    #34d399,
    #22d3ee,
    #a855f7,
    #f472b6,
    #f87171
  );
}

.dfarbe-frei.is-on::after {
  background: currentColor;
}

.dfarbe-frei input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* Größe in Pixeln, leer heißt automatisch. */
.dgroesse {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dgroesse-txt {
  width: 116px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--input);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.dgroesse-txt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--btn);
}

.dgroesse-hint {
  font-size: 12.5px;
  color: var(--muted);
}

/* Hintergrund: erst die Art, die Farbe nur bei "eigene". */
.dbg {
  display: grid;
  gap: 9px;
}

.dbg-arten {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dbg-art {
  padding: 8px 13px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.dbg-art:hover {
  color: var(--text);
}

.dbg-art.is-on {
  border-color: var(--accent-line);
  color: var(--text-strong);
}

/* ---------- Vorschau ---------- */

/* Der Kasten, in dem das Widget gezeichnet wird. Kariert, damit man sieht,
   was durchsichtig ist - im Stream liegt dort das Spielbild. */
.dvorschau {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background-color: #0b0e15;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%);
  background-size: 18px 18px;
  background-position:
    0 0,
    0 9px,
    9px -9px,
    -9px 0;
}

/* Auf der Mod-Seite ist die Karte breit, aber der Platz nach unten begrenzt.
   Das Widget richtet sich nach der Höhe - hier darf es etwas mehr sein. */
.control-main .dvorschau {
  min-height: 420px;
}

.dvorschau-tst {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 8px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: rgba(10, 13, 20, 0.86);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.dvorschau-tst:hover {
  border-color: var(--accent-line);
}

/* Der Hinweis, solange nichts ausgesucht ist. */
.dvorschau-leer {
  padding: 0 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hint);
  text-align: center;
}

/* Die Darstellung selbst - dieselben Formen wie in overlay.css, nur auf den
   Kasten bezogen statt auf das ganze Fenster. */
.vs-stage {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 14px;
  background: transparent;
  color: #fff;
  text-align: center;
}

.vs-stage[data-bg='solid'] {
  background: var(--widget-bg, #0b0e15);
}

.vs-titel {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.vs-radrahmen {
  position: relative;
  display: block;
}

.vs-radrahmen canvas {
  display: block;
  transform: rotate(0deg);
  will-change: transform;
}

.vs-stage[data-frame='on'] .vs-radrahmen::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 26%, transparent);
  pointer-events: none;
}

.vs-zeiger {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid var(--accent);
  z-index: 2;
}

.vs-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(233, 237, 246, 0.66);
}

.vs-ergebnis {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 90%;
  height: 90%;
  pointer-events: none;
  font-size: clamp(16px, 4.2vw, 28px);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.88);
}

.vs-ergebnis.is-an {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.vs-reveal-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.vs-reveal-bild.is-waffe {
  object-fit: contain;
  background: rgba(8, 12, 18, 0.72);
}

.vs-reveal-name {
  position: relative;
  z-index: 1;
  line-height: 1.2;
  text-align: center;
  padding: 0 10%;
}

@media (prefers-reduced-motion: reduce) {
  .vs-ergebnis.is-an {
    transition: none;
  }
}

.vs-rang {
  width: min(100%, 280px);
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.vs-rang li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, rgba(10, 13, 20, 0.82));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 13px;
}

.vs-rang em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vs-rang b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-rang span {
  color: var(--accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vs-rang .is-eins {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.vs-karte {
  display: grid;
  gap: 7px;
  padding: 18px 26px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 16px;
  background: rgba(10, 13, 20, 0.82);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 18%, transparent);
}

.vs-karte.plain {
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.vs-zahl {
  font-size: 54px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.vs-karte.done .vs-zahl,
.vs-karte.over .vs-zahl {
  color: #fff;
}

.vs-ende {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 980px) {
  .dov-anlegen {
    grid-template-columns: 1fr;
  }

  .dov-anlegen-sicht {
    position: static;
    order: -1;
  }

  .dov-anlegen-sicht .dvorschau {
    height: min(48vh, 380px);
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  .dovm-karten {
    grid-template-columns: 1fr;
  }

  .dvalk-zahlen {
    grid-template-columns: 1fr;
  }

  .ddauer-teil {
    max-width: none;
  }
}

.dmods-head {
  margin: 22px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dmods-head:first-child {
  margin-top: 18px;
}

.dmod-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dmod {
  padding: 13px 15px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--surface);
}

/* Name links, Stand rechts an der Kante - so lassen sich zwanzig Einträge
   überfliegen, ohne jede Zeile zu lesen. */
.dmod-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.dmod-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.dmod-stand {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}

.dmod.is-live .dmod-stand {
  color: var(--green);
}

.dmod.is-wip .dmod-stand {
  color: var(--amber);
}

.dmod-say {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Login-Fenster ---------- */

/* <dialog> bringt Fokusfalle, Escape und den Backdrop mit. Zu tun bleibt nur
   das Aussehen. */
.lmodal {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.lmodal::backdrop {
  background: rgba(4, 6, 12, 0.68);
}

/* Auf Hell würde derselbe Backdrop wie ein Stromausfall wirken. */
[data-theme='light'] .lmodal::backdrop {
  background: rgba(18, 22, 31, 0.34);
}

/* Ohne das scrollt die Seite hinter dem offenen Fenster weiter. */
html:has(.lmodal[open]) {
  overflow: hidden;
}

.lmodal[open] {
  animation: lmodal-in 0.18s ease-out;
}

@keyframes lmodal-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lmodal[open] {
    animation: none;
  }
}

.lmodal-x {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.lx {
  width: 34px;
  height: 34px;
  margin: 12px 12px 0 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.lx:hover {
  background: var(--surface-2);
  color: var(--text);
}

.lmodal-in {
  padding: 26px 30px 30px;
}

.lmodal-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.lmodal-title {
  margin: 10px 0 0;
  font-size: clamp(23px, 3.4vw, 29px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.lmodal-lead {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.lmodal-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--glass-line);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  overflow: hidden;
}

/* Haarlinien statt einzelner Karten: drei Kästen wären für drei Sätze zu
   viel Rahmen. */
.lmodal-list li {
  position: relative;
  padding: 12px 16px 12px 38px;
  background: var(--surface);
  font-size: 14.5px;
  color: var(--text);
}

.lmodal-list li::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.lmodal-off {
  margin: 16px 0 0;
  padding: 11px 14px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 10px;
  font-size: 14px;
  color: var(--amber);
}

.lmodal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 560px) {
  .lmodal-in {
    padding: 22px 20px 24px;
  }

  .lmodal-row .btn-tw {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .grid-2,
  .grid-3,
  .form-row,
  .sub-grid {
    grid-template-columns: 1fr;
  }

  /* Die Sidebar legt sich quer über den Inhalt. Ein- und Ausklappen gibt es
     hier nicht - dafür ist sie zu flach. */
  .dshell {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  .dmain {
    padding: 12px;
  }

  .dside,
  .dside-zu .dside {
    position: static;
    flex-direction: row;
    align-items: center;
    width: auto;
    height: auto;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }

  .dside-toggle {
    display: none;
  }

  .dside-nav {
    flex-direction: row;
    gap: 6px;
    overflow: visible;
  }

  .dsnav-ast {
    position: relative;
  }

  .dsnav-ast-liste {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 8;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--glass-line);
    border-radius: 12px;
    background: var(--glass);
  }

  .dsnav-ast-kat,
  .dsnav-ast-liste .dsnav {
    padding-left: 12px;
  }

  .dside-zu .dsnav-txt {
    display: inline;
  }

  .dsnav {
    flex: none;
    padding: 9px 12px;
    font-size: 14px;
  }

  .dsnav-out {
    margin: 0;
    padding-top: 9px;
  }

  /* Konto nach oben, die Schnellzugriffe darunter in eine Zeile zum Wischen -
     nebeneinander wird beides zu schmal. */
  .dtop {
    flex-wrap: wrap;
    gap: 10px;
  }

  .dme {
    order: 1;
    margin-left: auto;
  }

  .dquick {
    order: 2;
    width: 100%;
    padding-bottom: 2px;
    overflow-x: auto;
  }

  /* Ohne Zeigegerät gibt es kein Hover - der Stift muss trotzdem erreichbar
     sein. */
  .dq-edit {
    opacity: 1;
  }

  /* Adresse in eine eigene Zeile, sonst bleibt für sie nichts übrig. */
  .dov-link {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .dov-link code {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dviews {
    padding: 16px 2px 50px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 12px;
    right: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    background: var(--page);
    border: 1px solid var(--glass-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    text-align: center;
  }

  .nav a.is-login {
    margin: 4px 0 0;
  }

  /* Untereinander statt nebeneinander. Der Schnitt wird flach gelegt, dann
     läuft er zwischen den Namen durch das Bild - Hälften und Linie ziehen
     über --slash automatisch mit. */
  .split {
    --slash: 172deg;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
    padding: 104px 20px 116px;
  }

  .side.left,
  .side.right {
    justify-self: center;
    align-self: center;
    text-align: center;
    padding: 0;
  }

  /* Habub bleibt oben, Arab unten - wie am Desktop, nur übereinander. */
  .side.right {
    grid-row: 1;
  }

  .side.left {
    grid-row: 2;
  }

  .side.left .shot img {
    margin: 0 auto;
  }

  .side .name {
    font-size: clamp(40px, 14vw, 96px);
  }

  .scroll-hint {
    bottom: 28px;
  }

  .home-body .section {
    padding: 68px 0;
  }

  .bot-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }

  .games-note {
    margin-top: 44px;
  }

  .games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .over-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
  }

  /* Die Bühne bleibt 16:9, ist aber viel schmaler - ohne größeres --u wäre
     die Schrift darin einstellig klein. Dadurch werden die Bausteine relativ
     breiter, also rücken die rechten Karten nach innen. */
  .stage {
    --u: 1.35cqw;
  }

  .card-rank {
    left: 55%;
  }

  .c-move {
    left: 64%;
  }

  .c-edit {
    left: 74%;
    top: 30%;
  }

  .scene.b2 .c-edit {
    transform: translate3d(-23cqw, 34cqh, 0);
  }

  .cmds li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* Beide Ebenen untereinander: erst die Auswahl, dann Bild und Panel. */
  .wgrid,
  .wpane,
  .wways {
    grid-template-columns: minmax(0, 1fr);
  }

  .wgrid {
    margin-top: 24px;
  }

  .wtitle {
    margin-top: 48px;
  }

  /* Das Panel bleibt in Handybreite, statt sich über die Seite zu ziehen. */
  .phone {
    max-width: 340px;
  }

  /* Erklärung über das Beispiel, statt nebeneinander. */
  .str-pane {
    grid-template-columns: minmax(0, 1fr);
  }

  .str-tabs {
    margin-top: 26px;
  }

  .str-view {
    margin-top: 22px;
  }

  /* Der Knopf soll die Breite bekommen, nicht neben dem Text kleben. */
  .cta {
    margin-top: 30px;
    padding: 20px;
  }

  .btn-tw {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .pnum {
    font-size: 36px;
  }

  .player-actions {
    margin-left: 0;
    width: 100%;
  }

  .player-actions input[type="number"] {
    flex: 1;
  }

  .panel {
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Spotify (Einrichten) ---------- */

.dspot-schritte {
  margin: 14px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.dspot-schritte li + li {
  margin-top: 8px;
}

.dspot-schritte a {
  color: var(--text-strong);
}

.dspot-uris {
  display: grid;
  gap: 14px;
  margin: 18px 0 8px;
}

.dspot-url,
.doutro-url {
  display: block;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--input);
  color: var(--text-strong);
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

.dspot-konto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.dspot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- Outro (Tools) ---------- */

.doutro-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 980px) {
  .doutro-grid {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: start;
  }
}

.doutro-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.doutro-import {
  cursor: pointer;
}

.doutro-offset {
  margin-top: 14px;
}

.doutro-offset input[type='range'] {
  width: 100%;
}

.doutro-theme {
  display: grid;
  gap: 18px;
  margin: 14px 0;
}

.doutro-gruppe {
  display: grid;
  gap: 10px;
}

.doutro-editor {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 1100px) {
  .doutro-editor {
    grid-template-columns: 1fr 280px;
    align-items: start;
  }
}

.doutro-vorschau {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #0b0d12;
}

.doutro-buehne {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.doutro-vorschau .outro {
  position: absolute;
  inset: auto;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--doutro-scale, 0.3));
  transform-origin: top left;
  opacity: 1;
  pointer-events: none;
}

.doutro-vorschau .outro-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--outro-bg, transparent);
}

.doutro-vorschau .outro-bg-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doutro-vorschau[data-outro-bg='cover'] .outro-bg-cover,
.doutro-vorschau .outro[data-outro-bg='cover'] .outro-bg-cover {
  opacity: 1;
}

.doutro-vorschau .outro-bg-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}

.doutro-vorschau .outro[data-outro-bg='cover'] .outro-bg-dim {
  opacity: var(--outro-bg-dim, 0.48);
}

.doutro-vorschau .outro-info,
.doutro-vorschau .outro-lyrics,
.doutro-vorschau .outro-bar {
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.doutro-vorschau .outro-lyrics {
  display: var(--outro-lyrics-an, flex);
  left: var(--outro-lyrics-x, 10%);
  top: var(--outro-lyrics-y, 16%);
  width: var(--outro-lyrics-w, 80%);
  height: var(--outro-lyrics-h, 54%);
  flex-direction: column;
  justify-content: center;
  gap: 0.35em;
  overflow: hidden;
  text-align: var(--outro-lyrics-align, center);
  font-family: var(--outro-lyrics-font, Georgia, serif);
  font-size: var(--outro-lyrics-size, 42px);
  font-weight: var(--outro-lyrics-weight, 500);
  color: var(--outro-lyric-next, rgba(255, 255, 255, 0.55));
}

.doutro-vorschau .outro-info {
  display: var(--outro-info-an, flex);
  left: var(--outro-info-x, 4%);
  top: var(--outro-info-y, 78%);
  width: var(--outro-info-w, 48%);
  height: var(--outro-info-h, 16%);
  align-items: center;
  gap: var(--outro-gap, 24px);
  overflow: hidden;
}

.doutro-vorschau .outro-cover-wrap {
  display: var(--outro-cover-show, flex);
  width: var(--outro-cover-size, 88px);
  height: var(--outro-cover-size, 88px);
  flex: 0 0 var(--outro-cover-size, 88px);
  border-radius: var(--outro-cover-radius, 10px);
  overflow: hidden;
}

.doutro-vorschau .outro-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doutro-vorschau .outro-bar {
  display: var(--outro-bar-an, flex);
  left: var(--outro-bar-x, 4%);
  top: var(--outro-bar-y, 95.2%);
  width: var(--outro-bar-w, 92%);
  height: var(--outro-bar-h, 1.6%);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.doutro-vorschau .outro-bar-fill {
  height: 100%;
  width: var(--outro-progress, 0%);
  background: var(--outro-accent, #7ec8c8);
}

.doutro-vorschau .outro-title {
  color: var(--outro-primary, #fff);
  font-family: var(--outro-title-font, system-ui, sans-serif);
  font-size: var(--outro-title-size, 28px);
  font-weight: var(--outro-title-weight, 650);
}

.doutro-vorschau .outro-artist,
.doutro-vorschau .outro-album {
  color: var(--outro-secondary, #ccc);
  font-family: var(--outro-artist-font, system-ui, sans-serif);
  font-size: var(--outro-artist-size, 18px);
}

.doutro-vorschau .outro-album {
  opacity: 0.7;
  font-size: calc(var(--outro-artist-size, 18px) * 0.85);
}

.doutro-vorschau .outro-line[data-role='active'] {
  color: var(--outro-lyric-active, #fff);
}

.doutro-vorschau .outro-line[data-role='prev'] {
  color: var(--outro-lyric-prev, rgba(255, 255, 255, 0.38));
}

.doutro-edit {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.doutro-edit-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(126, 200, 200, 0.45);
  background: rgba(126, 200, 200, 0.06);
  cursor: move;
  touch-action: none;
}

.doutro-edit-box.is-aus {
  border-style: dashed;
  opacity: 0.45;
}

.doutro-edit-box.is-wahl {
  border-color: #7ec8c8;
  background: rgba(126, 200, 200, 0.12);
  box-shadow: inset 0 0 0 1px rgba(126, 200, 200, 0.35);
}

.doutro-edit-name {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8efe8;
  pointer-events: none;
}

.doutro-edit-griff {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #7ec8c8;
  cursor: nwse-resize;
  touch-action: none;
}

.doutro-widgets {
  display: grid;
  gap: 8px;
}

.doutro-widget {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  text-align: left;
}

.doutro-widget.is-wahl {
  border-color: rgba(126, 200, 200, 0.55);
}

.doutro-widget-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.doutro-widget-titel {
  font-size: 13px;
  font-weight: 650;
}

.doutro-widget select,
.doutro-widget input[type='checkbox'] {
  cursor: pointer;
}

.doutro-seite {
  display: grid;
  gap: 12px;
}

.doutro-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.doutro-add-btn {
  flex: 1 1 auto;
  min-width: 0;
}

.doutro-inspektor {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.doutro-seite .dneu-txt,
.doutro-inspektor textarea {
  min-width: 0;
  width: 100%;
  resize: vertical;
}

.doutro-inspektor .dcmd-feld {
  margin: 0;
}

.doutro-farbe {
  display: flex;
  align-items: center;
  gap: 8px;
}

.doutro-farbe-pick {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.doutro-farbe-pick::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.doutro-farbe-pick::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.doutro-farbe-alpha {
  flex: 1;
  min-width: 0;
}

.doutro-loesch {
  margin-top: 4px;
}

.doutro-vorschau .outro-extras,
.doutro-vorschau .outro-extra {
  position: absolute;
  pointer-events: none;
}

.doutro-vorschau .outro-extras {
  inset: 0;
}

.doutro-vorschau .outro-extra {
  box-sizing: border-box;
  overflow: hidden;
}

.doutro-vorschau .outro-extra[data-typ='text'] {
  display: flex;
  align-items: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.doutro-vorschau .outro-extra-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}