/* ============================================================
   Stream-Gamification  |  Chubby Otter Studios
   Farbpalette und Fonts 1:1 von der Hauptwebsite
   ============================================================ */

:root {
  --bg: #1a1128;
  --panel: #21172f;
  --panel-soft: #271b38;
  --panel-border: rgba(201,184,232,0.14);
  --text: #f2eaff;
  --text-dim: #a894c4;
  --faint: #766088;
  --lavender: #c9b8e8;
  --accent: #e923ff;
  --accent-glow: #f14dff;
  --cyan: #00e5ff;
  --danger: #ff5470;
  --success: #34d399;
  --gold: #ffc861;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Nunito", system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.rang-name, .stat-wert, .preis, .btn, .brand, .tab {
  font-family: "Oxanium", sans-serif;
}

a { color: var(--cyan); }

.scanline {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(0deg,
    rgba(233,35,255,0.015) 0px, rgba(233,35,255,0.015) 1px,
    transparent 1px, transparent 3px);
}

/* ── Kopfbereich ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26,17,40,0.88);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(18px);
}
.nav {
  max-width: 1120px; margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.brand {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.06em;
  color: var(--lavender); text-decoration: none;
}
.nav-links {
  display: flex; align-items: center; gap: 1.4rem;
  color: var(--text-dim); font-size: 0.86rem; font-weight: 600;
  flex-wrap: wrap;
}
.nav-links a { text-decoration: none; color: inherit; transition: color .18s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.nav-active { color: var(--cyan); }
.nav-cta { color: var(--accent) !important; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}
.glow {
  position: absolute; top: -160px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 420px;
  background: radial-gradient(ellipse at center,
    rgba(233,35,255,0.22) 0%, rgba(0,229,255,0.10) 45%, transparent 75%);
  filter: blur(10px); pointer-events: none; z-index: 0;
}
/* Nicht .hero > * verwenden: das würde auch .glow aus seiner
   absoluten Position holen und den Kopfbereich aufblähen. */
.hero > h1,
.hero > p { position: relative; z-index: 1; }
.hero h1 {
  margin: 0 0 .6rem; font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800; letter-spacing: .01em;
}
.hero p {
  margin: 0 auto; max-width: 46rem;
  color: var(--text-dim); font-size: 1.02rem;
}

/* ── Layout ──────────────────────────────────────────────── */
main { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem 4rem; }

section { margin-top: 3rem; }
section > h2 {
  font-size: 1.35rem; margin: 0 0 .4rem;
  display: flex; align-items: center; gap: .6rem;
}
section > h2::before {
  content: ""; width: 3px; height: 1.1em;
  background: var(--accent); border-radius: 2px;
}
.section-intro { color: var(--text-dim); margin: 0 0 1.4rem; max-width: 52rem; }

/* ── Karten ──────────────────────────────────────────────── */
/* 250 statt 260: bei 1120 Pixeln Inhaltsbreite passen damit vier
   Karten in eine Zeile. Mit 260 blieb die vierte allein uebrig. */
.karten {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.karte {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
}
.karte h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.karte p  { margin: 0; color: var(--text-dim); font-size: .92rem; }

/* ── Statistikkacheln ────────────────────────────────────── */
.stats {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 1.5rem;
}
.stat {
  background: var(--panel-soft);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.stat-wert {
  font-size: 1.6rem; font-weight: 800; color: var(--cyan);
  line-height: 1.2;
}
.stat-label {
  font-size: .78rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Tabellen ────────────────────────────────────────────── */
.tabelle-wrap {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th {
  text-align: left; padding: .85rem 1rem;
  font-family: "Oxanium", sans-serif; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 700;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
td {
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(201,184,232,0.07);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(233,35,255,0.04); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Abzeichen ───────────────────────────────────────────── */
.rang-badge {
  display: inline-block;
  padding: .18rem .6rem; border-radius: 999px;
  font-family: "Oxanium", sans-serif; font-size: .76rem; font-weight: 700;
  background: rgba(233,35,255,0.14);
  border: 1px solid rgba(233,35,255,0.3);
  color: var(--accent-glow);
  white-space: nowrap;
}
/* Die Stufenzahl vor dem Namen. Abgesetzter Kasten statt nur Text,
   damit das Auge beim Scrollen die Spalte als Zahlenreihe liest und
   nicht als Teil des Rangnamens. */
.rang-badge .stufe {
  display: inline-block; min-width: 1.3em;
  margin: 0 .45em 0 -.15em; padding: 0 .2em;
  border-radius: 4px; text-align: center;
  background: rgba(255,255,255,.12);
  font-size: .92em; font-weight: 800;
}
.rang-badge.r1 { background: rgba(201,184,232,.10); border-color: rgba(201,184,232,.25); color: var(--lavender); }
.rang-badge.r2 { background: rgba(0,229,255,.10);  border-color: rgba(0,229,255,.28);  color: var(--cyan); }
.rang-badge.r5,
.rang-badge.r6 { background: rgba(255,200,97,.12); border-color: rgba(255,200,97,.35); color: var(--gold); }

.platz {
  font-family: "Oxanium", sans-serif; font-weight: 800;
  color: var(--faint); width: 2.6rem;
}
.platz.top1 { color: var(--gold); }
.platz.top2 { color: var(--lavender); }
.platz.top3 { color: #cd9575; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; vertical-align: middle; margin-right: .55rem;
  border: 1px solid var(--panel-border);
  background: var(--panel-soft);
}

/* ── Preisangaben ────────────────────────────────────────── */
.preis {
  font-weight: 800; color: var(--cyan);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
code, .key {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .86em;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 5px;
  padding: .1rem .38rem;
  color: var(--cyan);
  white-space: nowrap;
}

/* ── Marke "in Arbeit" ───────────────────────────────────── */
.bald {
  display: inline-block; margin-left: .5rem;
  padding: .08rem .5rem; border-radius: 999px;
  font-family: "Oxanium", sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
  background: rgba(255,200,97,.12);
  border: 1px solid rgba(255,200,97,.32);
  color: var(--gold);
}

/* ── Reiter ──────────────────────────────────────────────── */
.tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.tab {
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  font-size: .86rem; font-weight: 700;
  cursor: pointer; transition: all .18s;
}
.tab:hover { color: var(--text); border-color: rgba(201,184,232,.3); }
.tab.aktiv {
  background: rgba(233,35,255,.14);
  border-color: rgba(233,35,255,.4);
  color: var(--accent-glow);
}

/* ── Hinweise ────────────────────────────────────────────── */
.hinweis {
  background: var(--panel-soft);
  border-left: 3px solid var(--cyan);
  border-radius: 0 10px 10px 0;
  padding: .9rem 1.1rem;
  color: var(--text-dim); font-size: .92rem;
  margin: 1.2rem 0;
}
.hinweis strong { color: var(--text); }
.hinweis.warn { border-left-color: var(--gold); }
.hinweis.gefahr { border-left-color: var(--danger); }

.laden, .leer {
  padding: 2.5rem 1rem; text-align: center;
  color: var(--faint); font-size: .92rem;
}

/* ── Bereichsnavigation (Punkte, Rangliste, Legends) ─────── */
.bereich {
  max-width: 1120px; margin: -0.4rem auto 0;
  /* Der untere Innenabstand hält den Inhalt von der Leiste weg.
     Ohne ihn klebt die erste Sektion direkt darunter. */
  padding: 0 1.5rem 2.4rem;
  display: flex; gap: .5rem; flex-wrap: wrap;
  justify-content: center;
}

/* Die erste Sektion braucht keinen eigenen Abstand nach oben,
   den liefert schon die Leiste beziehungsweise der Kopfbereich. */
main > section:first-child { margin-top: 0; }
.bereich a {
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: .45rem 1.2rem;
  font-family: "Oxanium", sans-serif;
  font-size: .86rem; font-weight: 700;
  text-decoration: none; transition: all .18s;
}
.bereich a:hover { color: var(--text); border-color: rgba(201,184,232,.3); }
.bereich a.hier {
  background: rgba(233,35,255,.14);
  border-color: rgba(233,35,255,.4);
  color: var(--accent-glow);
}
@media (max-width: 640px) { .bereich { padding: 0 1rem 1.8rem; } }

/* ── Gacha-Quoten ────────────────────────────────────────── */
/* Gewinn gruen, Verlust rot - in einer Tabelle, in der jede zweite
   Zeile ein Minus ist, muss man das nicht erst lesen. */
td.plus  { color: var(--success); font-weight: 700; }
td.minus { color: var(--danger); }

/* ── Belohnungen als aufklappbare Karten ─────────────────── */
/* Gleiche Mechanik wie bei den Anime-Sets, nur enger: hier steht
   zugeklappt die Zahl im Vordergrund, nach der die Leute suchen. Die
   Vollbreiten-Regel der Sets braucht es nicht - ein Reward-Rumpf ist
   drei Zeilen hoch, die Luecke daneben faellt nicht auf. */
.rewards {
  display: grid; gap: .6rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.reward {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 0 1rem;
}
/* Wie bei den Sets: einzeln aufgeklappt ueber die volle Breite. Bei
   "Stream mit Handicap" stehen acht Auswahlzeilen im Rumpf - in einer
   Spalte riss das ein Loch von vierhundert Pixeln daneben auf. */
.reward[open] {
  padding-bottom: .9rem;
  border-color: rgba(233,35,255,.28);
}
.rewards:not(.alle-auf) .reward[open] { grid-column: 1 / -1; }
.reward-kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 0; cursor: pointer; list-style: none;
}
.reward-kopf::-webkit-details-marker { display: none; }
.reward-kopf strong {
  font-family: "Oxanium", sans-serif; font-size: .96rem;
  color: var(--text); font-weight: 700;
}
.reward-kopf .preis { margin-left: auto; font-size: 1rem; }
.reward-kopf::after {
  content: "\203A"; flex-shrink: 0;
  font-family: "Oxanium", sans-serif; font-size: 1.05rem; line-height: 1;
  color: var(--faint); transition: transform .2s, color .2s;
}
.reward[open] > .reward-kopf::after { transform: rotate(90deg); color: var(--text-dim); }
.reward-kopf:hover::after { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .reward-kopf::after { transition: none; }
}

/* Der Mindestrang gehoert in die Kopfzeile: wer ihn nicht hat, soll
   gar nicht erst aufklappen muessen. */
.rang-mini {
  flex-shrink: 0;
  padding: .1rem .5rem; border-radius: 999px;
  font-family: "Oxanium", sans-serif; font-size: .7rem; font-weight: 700;
  background: rgba(255,200,97,.12);
  border: 1px solid rgba(255,200,97,.3);
  color: var(--gold); white-space: nowrap;
}

.reward-rumpf {
  border-top: 1px solid rgba(201,184,232,.08);
  padding-top: .7rem;
}
.reward-rumpf p { margin: 0 0 .5rem; color: var(--text-dim); font-size: .9rem; }
.reward-wahl, .reward-queue { color: var(--faint) !important; font-size: .84rem !important; }

/* ── Fusszeile ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--panel-border);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--faint); font-size: .84rem;
}
.footer a { color: var(--text-dim); }


/* ============================================================
   Einstieg oben auf der Erklaerseite
   ------------------------------------------------------------
   Drei Bausteine, alle als auto-fit-Raster: auf dem Rechner
   nebeneinander, auf dem Handy automatisch untereinander. Kein
   eigener Umbruchpunkt noetig.
   ============================================================ */

/* ── Der Ablauf in drei Schritten ────────────────────────── */
.ablauf {
  display: grid; gap: 1rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.schritt {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 1.3rem 1.3rem 1.2rem;
}
.schritt .nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-bottom: .7rem;
  border-radius: 50%;
  font-family: "Oxanium", sans-serif; font-weight: 800; font-size: .9rem;
  color: var(--bg); background: var(--accent);
}
.schritt:nth-child(2) .nr { background: #b05cff; }
.schritt:nth-child(3) .nr { background: var(--cyan); }
.schritt h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.schritt p  { margin: 0; color: var(--text-dim); font-size: .92rem; }

/* Der Pfeil zwischen den Schritten. Nur dort, wo wirklich
   nebeneinander gesetzt wird - sonst zeigt er ins Leere. */
@media (min-width: 760px) {
  .schritt:not(:last-child)::after {
    content: "→";
    position: absolute; right: -.95rem; top: 50%;
    transform: translateY(-50%);
    font-family: "Oxanium", sans-serif; font-size: 1.1rem;
    color: var(--faint); z-index: 1;
  }
}

/* ── Was es dir bringt ───────────────────────────────────── */
.vorteile {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.vorteil {
  background: var(--panel-soft);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}
.vorteil:nth-child(2) { border-left-color: #b05cff; }
.vorteil:nth-child(3) { border-left-color: var(--cyan); }
.vorteil:nth-child(4) { border-left-color: var(--gold); }
.vorteil h3 {
  margin: 0 0 .3rem; font-size: .98rem;
  display: flex; align-items: center; gap: .5rem;
}
.vorteil p { margin: 0; color: var(--text-dim); font-size: .9rem; line-height: 1.5; }
.vorteil .sym { width: 1.1rem; height: 1.1rem; flex: none; color: var(--lavender); }
.vorteil .sym svg { width: 100%; height: 100%; display: block; }

/* ── Anime-Sets ──────────────────────────────────────────── */
.set-kopf {
  display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; margin-bottom: 1.1rem;
}
.suchfeld {
  flex: 1 1 14rem; max-width: 22rem;
  background: var(--panel-soft);
  border: 1px solid var(--panel-border);
  border-radius: 999px; padding: .55rem 1rem;
  color: var(--text); font-family: "Nunito", sans-serif; font-size: .9rem;
}
.suchfeld:focus { outline: none; border-color: rgba(0,229,255,.45); }
.set-zaehler { color: var(--faint); font-size: .84rem; margin-right: auto; }
.alle-knopf {
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--panel-border); border-radius: 999px;
  padding: .45rem 1.1rem;
  font-family: "Oxanium", sans-serif; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.alle-knopf:hover { color: var(--text); border-color: rgba(201,184,232,.3); }

/* Auf dem Handy bekommt das Suchfeld die erste Zeile allein, darunter
   stehen Zaehler und Knopf nebeneinander. Vorher teilten sich alle
   drei eine Zeile und der Zaehler wurde rechts abgeschnitten. */
@media (max-width: 640px) {
  .suchfeld { flex: 1 1 100%; max-width: none; }
}

/* Zugeklappt sollen alle 21 Sets auf einen Blick passen, darum ein
   engeres Raster als bei den uebrigen Karten. align-items: start ist
   hier entscheidend: ohne das waechst beim Aufklappen eines Sets die
   ganze Rasterzeile mit, und daneben stehen fuenf leere Kaesten. */
.sets {
  display: grid; gap: .7rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.set {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--set-farbe, var(--accent));
  border-radius: 14px;
  padding: 0 1.1rem;
}
/* Ein einzeln aufgeklapptes Set nimmt die ganze Rasterbreite. Bliebe
   es in seiner Spalte, stuende neben den sechs Rangnamen eine drei
   Kaesten hohe Leerflaeche - das sah aus wie ein Ladefehler. Ueber die
   volle Breite passen die Raenge nebeneinander und es entsteht kein
   Loch. Sind ohnehin alle offen, gilt das nicht: dann sind alle Karten
   gleich hoch und das normale Raster ist die kompaktere Anordnung. */
.set[open] { padding-bottom: 1.1rem; }
.sets:not(.alle-auf) .set[open] { grid-column: 1 / -1; }
/* Feste Spaltenzahl statt auto-fit: sechs Raenge gehen glatt in drei
   oder zwei Spalten auf. Mit auto-fit kamen je nach Fensterbreite
   Aufteilungen wie fuenf oben und einer allein darunter heraus. */
.sets:not(.alle-auf) .set[open] .rangkette {
  display: grid; gap: 0 1.4rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px) {
  .sets:not(.alle-auf) .set[open] .rangkette {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 540px) {
  .sets:not(.alle-auf) .set[open] .rangkette {
    grid-template-columns: 1fr;
  }
  .sets:not(.alle-auf) .set[open] .rangkette li {
    border-top: 1px solid rgba(201,184,232,.07);
  }
}
.sets:not(.alle-auf) .set[open] .rangkette li { border-top: none; }

/* summary statt div: das Auf- und Zuklappen kann der Browser selbst,
   ohne JavaScript, und Tastatur und Screenreader bekommen es gratis
   richtig. Das Standard-Dreieck wird ersetzt, weil es in Chrome und
   Safari unterschiedlich sitzt. */
.set-titel {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 0; cursor: pointer; list-style: none;
}
.set-titel::-webkit-details-marker { display: none; }
.set-titel .wer { margin-left: auto; }
.set-titel::after {
  content: "›"; flex-shrink: 0;
  font-family: "Oxanium", sans-serif; font-size: 1.1rem; line-height: 1;
  color: var(--faint); transition: transform .2s, color .2s;
}
.set[open] > .set-titel::after { transform: rotate(90deg); color: var(--text-dim); }
.set-titel:hover::after { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .set-titel::after { transition: none; }
}
/* Die Setfarbe kommt aus der Datenbank und ist dort als Markenfarbe
   des Anime hinterlegt - Attack on Titan dunkelrot, Overlord
   dunkelviolett. Auf dem dunklen Panel sind die ungemischt kaum zu
   lesen. Darum wird der Titel zu 60 Prozent aus der Setfarbe und zu
   40 Prozent aus der Textfarbe gemischt: die Zuordnung bleibt
   erkennbar, der Kontrast stimmt wieder. Aeltere Browser ohne
   color-mix bekommen die reine Textfarbe. */
.set-titel strong {
  font-family: "Oxanium", sans-serif; font-size: 1.02rem;
  color: var(--text);
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  .set-titel strong {
    color: color-mix(in srgb, var(--set-farbe, var(--text)) 60%, var(--text));
  }
}
.set-titel .wer { font-size: .76rem; color: var(--faint); white-space: nowrap; }

/* Die sechs Raenge als Kette. Nummer und Name, damit die Stufe
   sofort ablesbar ist, ohne zu zaehlen. */
.rangkette { list-style: none; margin: 0; padding: 0; counter-reset: stufe; }
.rangkette li {
  counter-increment: stufe;
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem 0; font-size: .89rem;
  border-top: 1px solid rgba(201,184,232,.07);
}
.rangkette li:first-child { border-top: none; }
.rangkette li::before {
  content: counter(stufe);
  flex: none; width: 1.3rem; height: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: .68rem; font-weight: 700;
  font-family: "Oxanium", sans-serif;
  color: var(--faint); background: rgba(201,184,232,.08);
}
.rangkette li:last-child::before {
  color: var(--gold); background: rgba(255,200,97,.14);
}
.rangkette li:last-child { color: var(--text); font-weight: 600; }

.set-befehl {
  margin-top: .8rem; padding-top: .7rem;
  border-top: 1px solid rgba(201,184,232,.09);
  font-size: .8rem; color: var(--faint);
}

/* ── Schmale Bildschirme ─────────────────────────────────── */
@media (max-width: 640px) {
  .nav { padding: .8rem 1rem; }
  .nav-links { gap: .9rem; font-size: .8rem; }
  main { padding: 0 1rem 3rem; }
  .hero { padding: 2.5rem 1rem 2rem; }
  th, td { padding: .65rem .7rem; }
  .verstecken-klein { display: none; }
}