/* Startseite vor der Anmeldung.
   Eigenstaendig gehalten, aber in derselben Farbwelt wie das Dashboard
   dahinter — wer sich anmeldet, soll sich wiederfinden. */

:root {
  --bg:#0b0f14; --card:#131a22; --rand:#212c38;
  --akzent:#22d3ee; --akzent-hell:#67e8f9;
  --text:#dbe4ee; --text-dim:#8fa3b8;
  --gold:#fbbf24; --gruen:#4ade80;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:32px 20px;
  background-image:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(34,211,238,.07), transparent 60%);
}

/* Breiter als vorher, damit die Vorschauen nebeneinander Platz haben. Die
   Karten darueber und darunter vertragen das — ihre Inhalte sind ohnehin
   zweispaltig. */
.huelle { width:100%; max-width:900px; }
.kopf { text-align:center; margin-bottom:24px; }
.marke { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.marke span { color:var(--akzent); }
.claim { color:var(--text-dim); margin-top:8px; line-height:1.6; }

.karte {
  background:var(--card); border:1px solid var(--rand);
  border-radius:14px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.35);
}

.knopf {
  display:block; text-align:center; text-decoration:none;
  background:var(--akzent); color:#062028; font-weight:700;
  padding:13px 18px; border-radius:999px; font-size:1rem;
  transition:background .15s ease, transform .15s ease;
}
.knopf:hover { background:var(--akzent-hell); transform:translateY(-1px); }
.knopf:active { transform:translateY(0); }

.hinweis { color:var(--text-dim); font-size:.85rem; text-align:center;
  margin-top:12px; line-height:1.6; }
.titel {
  font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--akzent-hell);
  margin-bottom:16px;
}
.liste { display:grid; gap:14px; }
@media (min-width:620px) { .liste { grid-template-columns:1fr 1fr; } }
.punkt { display:flex; gap:11px; align-items:flex-start; }
.punkt .zeichen { font-size:1.1rem; line-height:1.35; flex-shrink:0; }
.punkt b { display:block; font-size:.92rem; font-weight:600; }
.punkt span { color:var(--text-dim); font-size:.85rem; line-height:1.5; }
.fuss { text-align:center; color:var(--text-dim); font-size:.8rem;
  margin-top:22px; line-height:1.6; }
hr { border:none; border-top:1px solid var(--rand); margin:20px 0; }
code { font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.9em; }

/* ── Die Vorschau: was der Bot eigentlich tut ──
   Statt zu beschreiben, dass mitgezaehlt wird, laeuft es hier einmal ab —
   Nachrichten treffen ein, die Zahlen daneben bewegen sich mit. Das ist der
   ganze Bot in zehn Sekunden. */

/* Einspaltig, auch auf breiten Bildschirmen: Die Vorschau steht jetzt in
   einer halben Spalte, nebeneinander waeren Chat und Zahlen beide zu schmal. */
.demo { display:grid; gap:12px; }

.demo-chat, .demo-werte {
  background:var(--card); border:1px solid var(--rand);
  border-radius:14px; padding:14px 16px; box-shadow:0 2px 10px rgba(0,0,0,.35);
}

.demo-kopf {
  display:flex; align-items:center; gap:8px;
  font-size:.75rem; color:var(--text-dim);
  font-family:ui-monospace,"JetBrains Mono",monospace;
  padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--rand);
}

/* Der Punkt pulsiert nur, solange "live" auch stimmt — er ist die einzige
   Bewegung, die nichts erklaert, und deshalb dezent. */
.live-punkt {
  width:7px; height:7px; border-radius:50%; background:#e0533d;
  animation:pulsieren 2s ease-in-out infinite;
}
@keyframes pulsieren { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* Feste Hoehe, nicht nur eine Mindesthoehe: Beide Kacheln zeigen denselben
   Ausschnitt, egal wie lang die Antworten darin sind. Vorher wuchs das
   Fenster mit jeder Zeile, und die Spiel-Kachel wurde durch ihre laengeren
   Botsaetze deutlich hoeher als die daneben.

   Der Inhalt haengt unten: Neue Zeilen kommen unten dazu, aeltere wandern
   oben aus dem Bild — dieselbe Bewegung wie in einem echten Chat. */
.demo-zeilen {
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:7px; height:176px; overflow:hidden;
}

.demo-zeile {
  font-size:.82rem; line-height:1.35;
  animation:einlaufen .35s ease both;
}
.demo-zeile .wer { font-weight:600; }
.demo-zeile .was { color:var(--text-dim); }

/* Der Bot spricht in unserer Farbe — im echten Chat erkennt man ihn am
   Namen, hier soll dasselbe gelten. */
.demo-zeile .wer.bot { color:var(--akzent); }
.demo-zeile.antwort .was { color:var(--text); }
@keyframes einlaufen {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}

/* Die drei Zahlen nebeneinander: Untereinander waeren sie in der schmalen
   Kachel eine lange Spalte aus viel Luft. */
.demo-werte { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.demo-werte .demo-balken { grid-column:1 / -1; }

.wert { display:flex; flex-direction:column; gap:2px; }
.wert span {
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim);
}
.wert strong {
  font-family:ui-monospace,"JetBrains Mono",monospace;
  font-size:1.05rem; font-weight:700; white-space:nowrap;
}

/* Kurz aufleuchten, wenn sich der Wert aendert — sonst uebersieht man, dass
   die Zahl gerade wegen der Zeile links gestiegen ist. */
.wert strong.gestiegen { animation:aufleuchten .5s ease; }
@keyframes aufleuchten {
  0% { color:var(--akzent-hell); transform:scale(1.08); }
  100% { color:inherit; transform:none; }
}

.demo-balken {
  display:flex; align-items:flex-end; gap:4px; height:46px; margin-top:2px;
  padding-top:10px; border-top:1px solid var(--rand);
}
.demo-balken i {
  flex:1; background:linear-gradient(180deg, var(--akzent-hell), #0e7490);
  border-radius:3px 3px 0 0; height:6%;
  transition:height .6s cubic-bezier(.22,.9,.3,1);
}

.demo-fuss {
  font-size:.72rem; color:var(--text-dim); text-align:center; margin-top:4px;
}

/* ── Rahmen um die einzelnen Vorschauen ── */
.schau-kopf { text-align:center; margin:26px 0 14px; }
.schau-kopf .titel { margin-bottom:6px; }

/* Zwei Spalten ab mittlerer Breite. Der Umbruch liegt bei 760px und nicht
   bei den 620px der uebrigen Raster: Die Kacheln tragen Inhalt, keine
   Textzeilen, und werden darunter zu schmal. */
.schau-gitter { display:grid; gap:14px; margin-bottom:18px; }

@media (min-width:760px) {
  .schau-gitter { grid-template-columns:1fr 1fr; }
}

/* Auf dem Desktop duerfen die Kacheln breiter sein als der Rest der Seite:
   Sie zeigen Chatzeilen, Ranglisten und Zahlenreihen — alles Dinge, denen
   Platz hilft. Fliesstext dagegen wird ab einer gewissen Zeilenlaenge
   schlechter lesbar, deshalb bleiben die Karten darueber und darunter schmal.

   Ueber margin und nicht ueber transform: Die Kachelreihe traegt die Klasse
   "stufe", deren Einblend-Animation ihrerseits transform setzt — sie wuerde
   eine Verschiebung von hier ueberschreiben und die Reihe nach dem Einblenden
   nach rechts springen lassen. */
@media (min-width:1000px) {
  .schau-gitter {
    --breit:min(1400px, 100vw - 40px);
    width:var(--breit);
    margin-left:calc(50% - var(--breit) / 2);
  }
}

.schau {
  background:var(--card); border:1px solid var(--rand);
  border-radius:14px; padding:18px 18px 16px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  /* Die Erklaerung sitzt unten buendig, auch wenn die Vorschauen darueber
     unterschiedlich hoch sind — sonst franst die Zeile im Gitter aus. */
  display:flex; flex-direction:column;
}
.schau-titel { font-size:.95rem; font-weight:600; margin-bottom:14px; }
.schau-text {
  color:var(--text-dim); font-size:.85rem; line-height:1.6;
  margin-top:auto; padding-top:14px;
}
.schau .demo { margin-bottom:0; }
.schau .demo-chat, .schau .demo-werte {
  border-color:var(--rand); background:#0f151c;
}

/* Die Spiel-Kachel nutzt denselben Aufbau wie "Mitzaehlen" (.demo, .demo-chat,
   .demo-werte) — sie zeigt dasselbe Bild, nur mit anderem Inhalt. Eigene
   Klassen dafuer gab es hier frueher; sie sind entfallen, weil zwei
   Chatfenster mit unterschiedlichem Stil aussaehen wie zwei Produkte. */

/* ── Songwünsche ──
   Die einzige Kachel über die volle Breite. Zwei Gründe: Sie zeigt zwei Dinge
   nebeneinander, die zusammengehören (Chat und Warteschlange), und als fünfte
   in einem zweispaltigen Raster stünde sie sonst allein in der letzten Reihe. */
@media (min-width:760px) {
  .schau-breit { grid-column:1 / -1; }
  .demo-breit { grid-template-columns:1fr 1fr; align-items:start; }
}

/* Eine Kanalpunkt-Einlösung sieht anders aus als eine getippte Nachricht —
   im echten Twitch-Chat genauso. Das ist hier die halbe Aussage: Für diesen
   Wunsch wurde bezahlt, für den darüber nicht. */
.demo-zeile.einloesung {
  background:rgba(145,70,255,.10);
  border-left:2px solid #9146ff;
  border-radius:0 6px 6px 0;
  padding:5px 8px; margin:3px 0;
}

.ep-marke {
  display:inline-block; margin-right:7px;
  font-size:.68rem; letter-spacing:.03em;
  color:#c9a6ff; background:rgba(145,70,255,.18);
  border-radius:999px; padding:1px 7px;
  vertical-align:.05em;
}

.warteschlange {
  border:1px solid var(--rand); background:#0f151c;
  border-radius:10px; padding:10px 12px;
}

.ws-kopf {
  font-size:.75rem; color:var(--text-dim);
  letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:8px;
}

.ws-zeile {
  display:flex; align-items:center; gap:9px;
  padding:6px 8px; border-radius:8px;
  font-size:.85rem; color:var(--text-dim);
}

/* Der laufende Titel hebt sich ab — sonst ist die Warteschlange eine Liste
   ohne Gegenwart, und der Übergang "Wunsch läuft jetzt" wäre nicht zu sehen. */
.ws-zeile.laeuft { background:rgba(29,185,84,.10); color:var(--text); }
.ws-zeichen { width:16px; flex-shrink:0; text-align:center; font-size:.8rem; }
.ws-titel { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-dauer {
  font-family:ui-monospace,"JetBrains Mono",monospace;
  font-size:.78rem; color:var(--text-dim); flex-shrink:0;
}

/* Gewünschte Titel tragen eine Marke: Ohne sie sähe die Warteschlange aus wie
   eine gewöhnliche Playlist, und der Zusammenhang zum Chat daneben ginge
   verloren. */
.ws-marke {
  font-size:.65rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--akzent); border:1px solid rgba(34,211,238,.35);
  border-radius:999px; padding:1px 6px; flex-shrink:0;
}

.ws-zeile.neu { animation:wsRein .45s cubic-bezier(.22,.9,.3,1); }

@keyframes wsRein {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}

/* ── Rangliste ──
   Die Zeilen liegen absolut und wandern per transform. Mit "order" liesse
   sich dasselbe sortieren, aber der Sprung waere hart — und genau der
   Positionswechsel ist hier die Aussage. */
.rang-demo { position:relative; height:158px; }

.rang-zeile {
  position:absolute; left:0; right:0; height:28px;
  display:flex; align-items:center; gap:10px;
  padding:0 10px; border-radius:8px; background:#0f151c;
  font-size:.85rem;
  transition:transform .55s cubic-bezier(.22,.9,.3,1), opacity .3s ease;
}
.rang-platz {
  width:22px; flex-shrink:0; text-align:center;
  font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.8rem;
  color:var(--text-dim);
}
.rang-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rang-wert {
  font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.82rem;
  color:var(--text-dim);
}
.rang-zeile.steigt .rang-wert { color:var(--akzent-hell); }

/* Wer sich selbst herausgenommen hat: Zahl bleibt, Name nicht. */
.rang-zeile.anonym .rang-name { color:var(--text-dim); font-style:italic; }

/* ── Schalter ── */
.schalter-demo { display:flex; flex-direction:column; gap:8px; }
.schalter-zeile {
  display:flex; align-items:center; gap:10px;
  background:#0f151c; border-radius:8px; padding:8px 12px;
  font-size:.85rem; transition:opacity .3s ease;
}
.schalter-zeile.aus { opacity:.45; }
.schalter-name { flex:1; font-family:ui-monospace,"JetBrains Mono",monospace; font-size:.8rem; }
.schalter-knopf {
  width:32px; height:18px; border-radius:999px; flex-shrink:0;
  background:var(--rand); position:relative;
  transition:background .3s ease;
}
.schalter-knopf::after {
  content:""; position:absolute; top:3px; left:3px;
  width:12px; height:12px; border-radius:50%; background:var(--text-dim);
  transition:transform .3s ease, background .3s ease;
}
.schalter-zeile.an .schalter-knopf { background:rgba(34,211,238,.35); }
.schalter-zeile.an .schalter-knopf::after { transform:translateX(14px); background:var(--akzent); }
.schalter-marke {
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); width:52px; text-align:right; flex-shrink:0;
}

/* Die Karten bauen sich nacheinander auf. Nicht als Schmuck: Es fuehrt den
   Blick von der Vorschau zum Anmeldeknopf und von dort zur Erklaerung. */
.stufe { animation:hochkommen .5s ease both; }
.stufe:nth-child(1) { animation-delay:.05s; }
.stufe:nth-child(2) { animation-delay:.12s; }
.stufe:nth-child(3) { animation-delay:.19s; }
.stufe:nth-child(4) { animation-delay:.26s; }
.stufe:nth-child(5) { animation-delay:.33s; }
.stufe:nth-child(6) { animation-delay:.40s; }
.stufe:nth-child(7) { animation-delay:.47s; }
/* Ab hier alle gleich: Noch längere Verzögerungen liessen den unteren Teil
   der Seite spürbar später erscheinen als er gelesen wird. */
.stufe:nth-child(n+8) { animation-delay:.54s; }
@keyframes hochkommen {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}

/* Wer Bewegung abgestellt hat, bekommt keine. Die Vorschau zeigt dann ihren
   Endstand — die Aussage bleibt, nur der Weg dorthin faellt weg. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation:none !important;
    transition:none !important;
  }
}