/* Landing Page „Glut und Asche“ (Spec v2 §6.4). Nur auf / eingebunden.
   Leitmotiv: ein Leuchtfeuer am unteren Rand des Hero, das die Überschrift von unten anstrahlt;
   Aschepartikel steigen daraus auf (js/embers.js). Alles darunter bleibt ruhig. */

:root {
  --ember-25: color-mix(in srgb, var(--ember) 25%, transparent);
  --ember-45: color-mix(in srgb, var(--ember) 45%, transparent);
  --ember-70: color-mix(in srgb, var(--ember) 70%, transparent);
  --gold-lit: color-mix(in srgb, var(--gold) 72%, var(--text));
  --section-gap: var(--s-16);
}
@media (min-width: 760px) { :root { --section-gap: 112px; } }

/* Die Landing-Abschnitte bringen ihre eigenen Abstände mit. */
main:has(> .landing-steps) { padding-block: 0; }

/* ---------- 1 · Hero ---------- */

.landing-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(calc(100svh - 64px), 860px);
  padding-block: var(--s-16) 120px;
  text-align: center;
  background:
    radial-gradient(ellipse 46rem 26rem at 50% 112%, var(--ember-45), transparent 70%),
    radial-gradient(ellipse 90rem 40rem at 50% 120%, var(--ember-faint), transparent 70%),
    linear-gradient(180deg, transparent 0%, var(--bg-sunken) 100%);
}
.landing-hero::after { /* Horizont: die Glutlinie als Boden des Leuchtfeuers */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--ember) 50%, var(--line) 82%, transparent);
  box-shadow: 0 0 18px 1px var(--ember-25);
}

.embers {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hero-bed { /* Glutbett: heißer Kern über dem Horizont */
  position: absolute; z-index: -2;
  left: 50%; bottom: -70px;
  width: min(760px, 120%); height: 190px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 30% 34% at 50% 62%, var(--ember-bright), transparent 70%),
    radial-gradient(ellipse 55% 50% at 50% 60%, var(--ember-70), transparent 72%),
    radial-gradient(ellipse 80% 70% at 50% 60%, var(--ember-25), transparent 75%);
  filter: blur(14px);
  opacity: 0.85;
  animation: bed-breathe 5s ease-in-out infinite alternate;
}
@keyframes bed-breathe { to { opacity: 1; transform: translateX(-50%) scale(1.04, 1.08); } }

.hero-inner { position: relative; display: grid; justify-items: center; }

.hero-sigil {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.hero-sigil span {
  width: clamp(40px, 8vw, 88px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember));
}
.hero-sigil span:last-child { background: linear-gradient(90deg, var(--ember), transparent); }
.hero-sigil .flame { width: 20px; height: 27px; filter: drop-shadow(0 0 10px var(--ember)); }

/* Die Überschrift wird vom Feuer darunter angestrahlt: oben kühles Weiß, unten Gold und Glut. */
.hero-title {
  max-width: 11ch;
  margin: 0 auto var(--s-6);
  font-size: clamp(2.5rem, 10.5vw, 7.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.035em;
  text-wrap: balance;
  color: var(--text);
  background: linear-gradient(180deg, var(--text) 30%, var(--gold-lit) 72%, var(--ember-bright) 104%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 42px var(--ember-25));
}

.hero-lead {
  max-width: 34rem;
  margin: 0 auto var(--s-4);
  font-size: clamp(var(--fs-md), 2.2vw, var(--fs-lg));
  line-height: 1.5;
  color: var(--text);
  opacity: 0.86;
  text-wrap: balance;
}

.hero-genres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: 0 auto var(--s-8);
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-genres li {
  padding: var(--s-1) var(--s-3);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

.hero-actions { justify-content: center; gap: var(--s-3); }
.btn-lg .icon { width: 20px; height: 20px; }

.hero-live {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-6);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--ember-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-glass);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.hero-live:hover { color: var(--text); border-color: var(--ember); }
.hero-live .badge-dot, .landing-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px var(--ember);
  animation: ember-pulse 1.8s var(--ease) infinite;
}

@media (max-width: 759.98px) {
  .landing-hero { min-height: 0; padding-block: var(--s-12) 96px; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 22rem; }
  .hero-title { font-size: clamp(2.5rem, 11.5vw, 3.5rem); }
}

/* ---------- Gemeinsame Abschnittsköpfe ---------- */

main > section { padding-block: var(--section-gap) 0; }
main > section:last-child { padding-bottom: var(--section-gap); }

.landing-head { max-width: 40rem; margin-bottom: var(--s-10); }
.landing-head h2, .why-text h2, .streamer-text h2, .library-text h2, .landing-final h2 {
  margin: 0 0 var(--s-3);
  font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
  font-weight: 700;
  line-height: 1.1;
}
.landing-head p { margin: 0; color: var(--text-muted); font-size: var(--fs-md); }

/* ---------- 2 · So funktioniert's ---------- */

.how-steps {
  --mark: 56px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-8);
  margin: 0; padding: 0;
  list-style: none;
}
.how-steps::before { /* der Weg von Schritt zu Schritt */
  content: "";
  position: absolute;
  top: calc(var(--mark) / 2); left: calc(var(--mark) / 2); right: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--ember), var(--line-strong) 60%, transparent);
}
.how-step { position: relative; }
.how-mark {
  position: relative;
  display: grid; place-items: center;
  width: var(--mark); height: var(--mark);
  margin-bottom: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--ember);
}
.how-mark .icon { width: 24px; height: 24px; }
.how-mark .flame { width: 20px; height: 27px; }
.how-step:nth-child(2) .how-mark { border-color: var(--ember); box-shadow: 0 0 22px var(--ember-soft); }
.how-no {
  position: absolute; right: -6px; top: -6px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
}
.how-step h3 { margin: 0 0 var(--s-2); font-size: var(--fs-md); line-height: 1.3; }
.how-step p { margin: 0; color: var(--text-muted); }

@media (max-width: 899.98px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .how-steps::before {
    top: calc(var(--mark) / 2); bottom: calc(var(--mark) / 2); left: calc(var(--mark) / 2); right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, var(--ember), var(--line-strong) 70%);
  }
  .how-step { display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: var(--s-5); }
  .how-mark { grid-row: span 2; margin: 0; }
  .how-step h3 { align-self: end; margin-top: var(--s-1); }
}

/* ---------- 3 · Warum ---------- */

.landing-why {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-12) var(--s-16);
  align-items: center;
}
.why-text { max-width: 38rem; }
.why-text p { color: var(--text-muted); }
.why-text .why-lead {
  margin-bottom: var(--s-5);
  color: var(--text);
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.why-stats {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-8);
}
.why-stats::before { /* senkrechte Glutlinie */
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--ember) 50%, transparent);
  box-shadow: 0 0 14px var(--ember-soft);
}
.why-stats-title { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-sm); }
.stats { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); margin: 0; }
.stat {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.stat:last-child { border-bottom: 0; }
.stat dd {
  grid-column: 1; grid-row: 1;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat dt { grid-column: 2; grid-row: 1; color: var(--text); font-size: var(--fs-md); font-weight: 500; }

@media (max-width: 899.98px) {
  .landing-why { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4 · Für Streamer ---------- */

.landing-streamer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-12) var(--s-16);
  align-items: center;
}
.streamer-lead { color: var(--text-muted); font-size: var(--fs-md); max-width: 34rem; margin-bottom: var(--s-8); }
.features { display: grid; gap: var(--s-5); margin: 0 0 var(--s-8); padding: 0; list-style: none; }
.feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.feature > .icon {
  width: 40px; height: 40px; padding: 9px;
  border-radius: var(--radius-control);
  background: var(--ember-faint);
  border: 1px solid var(--ember-soft);
  color: var(--ember);
}
.feature h3 { margin: 0 0 2px; font-size: var(--fs-base); }
.feature p { margin: 0; color: var(--text-muted); }

/* Bühne: eine angedeutete Spielszene mit Bossleiste, rechts oben liegt das echte Demo-Overlay */
.streamer-demo { margin: 0; min-width: 0; }
.streamer-stage {
  position: relative;
  isolation: isolate;
  display: grid; justify-items: end; align-items: start;
  min-height: 600px;
  padding: var(--s-4);
}
.stage-scene {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 34% 22% at 22% 74%, var(--ember-45), transparent 70%),
    radial-gradient(ellipse 70% 50% at 70% 0%, color-mix(in srgb, var(--tone-4) 75%, transparent), transparent 70%),
    linear-gradient(175deg, color-mix(in srgb, var(--tone-2) 80%, var(--bg)), var(--bg-sunken) 75%);
}
.stage-scene::before { /* ferner Bergkamm im Nebel */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 18%; height: 42%;
  background: color-mix(in srgb, var(--tone-4) 35%, var(--bg-sunken));
  clip-path: polygon(0 70%, 10% 52%, 18% 60%, 33% 22%, 44% 48%, 52% 38%, 63% 58%, 76% 14%, 88% 44%, 100% 30%, 100% 100%, 0 100%);
  opacity: 0.8;
}
.stage-scene::after { /* naher Boden */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: var(--bg-sunken);
  clip-path: polygon(0 40%, 18% 30%, 30% 46%, 48% 26%, 64% 42%, 80% 22%, 100% 38%, 100% 100%, 0 100%);
}
.stage-boss { /* Bossleiste wie im Spiel */
  position: absolute; z-index: 1;
  left: 8%; right: 8%; bottom: var(--s-8);
  display: grid; gap: 6px;
  pointer-events: none;
}
.stage-boss-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-display);
  color: var(--text);
  text-shadow: 0 1px 6px var(--bg-sunken);
}
.stage-boss-bar {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: linear-gradient(90deg, var(--danger) 0 64%, color-mix(in srgb, var(--gold) 55%, transparent) 64% 70%, var(--bg-sunken) 70%);
}
.streamer-stage iframe {
  display: block;
  max-width: 100%;
  border: 0;
  color-scheme: normal; /* gleiches Farbschema wie das Overlay → transparenter Hintergrund */
  background: transparent;
}
.stage-caption { margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }

@media (max-width: 899.98px) {
  .landing-streamer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759.98px) {
  .streamer-stage { justify-items: center; padding: var(--s-3) 0 var(--s-20); }
  .stage-scene { inset: 0 calc(-1 * var(--s-4)); border-radius: 0; border-inline: 0; }
  .stage-boss { bottom: var(--s-5); }
}

/* ---------- 5 · Jetzt live ---------- */

.landing-live h2 { display: flex; align-items: center; gap: var(--s-3); }
.landing-live .live-dot { flex: none; width: 10px; height: 10px; }

.live-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--s-4);
  margin: 0; padding: 0; list-style: none;
}
.live-events > li { display: flex; }
.card.live-card { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; }
.live-card-media { position: relative; aspect-ratio: 16 / 6; border-bottom: 1px solid var(--line); }
.live-card-media .cover { position: absolute; inset: 0; }
.live-card-media .cover-game { display: none; }
.live-card-status { position: absolute; top: var(--s-3); left: var(--s-3); }
.live-card-status .badge { background: var(--bg-glass); }
.live-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: var(--s-4) var(--s-5) var(--s-5); }
.live-card-game { margin: 0 0 var(--s-1); color: var(--gold); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--track-display); }
.live-card-title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--track-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.live-row {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--radius-control);
  background: var(--bg-sunken);
}
.live-rank {
  flex: none; width: 1.5ch;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--text-muted);
}
.live-row.podium-1 .live-rank { color: var(--gold); }
.live-row.podium-2 .live-rank { color: var(--silver); }
.live-row.podium-3 .live-rank { color: var(--bronze); }
.live-row.podium-1 { background: linear-gradient(90deg, var(--gold-soft), var(--bg-sunken) 60%); }
.live-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live-row.status-dead .live-name { color: var(--text-muted); }
.live-row .badge { flex: none; }
.live-points { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-max { color: var(--text-muted); font-weight: 500; font-size: var(--fs-sm); }
.live-none { margin: 0 0 var(--s-4); color: var(--text-muted); }
.live-card-foot {
  display: flex; align-items: center; gap: var(--s-2);
  margin: auto 0 0;
  color: var(--text-muted); font-size: var(--fs-sm);
}
.live-card-foot .icon { width: 16px; height: 16px; }
.live-card-more { margin-left: auto; color: var(--ember); font-weight: 600; }
.live-card:hover .live-card-more { color: var(--ember-bright); }

.live-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4) var(--s-8);
  align-items: center;
  padding: var(--s-8);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse 22rem 10rem at 8% 100%, var(--ember-faint), transparent 70%);
}
.live-empty .empty-art { margin: 0; }
.live-empty h3 { margin: 0 0 var(--s-1); font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: var(--track-display); }
.live-empty p { margin: 0; color: var(--text-muted); max-width: 34rem; }
@media (max-width: 759.98px) {
  .live-empty { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--s-8) var(--s-5); }
  .live-empty .actions { justify-content: center; }
}

/* ---------- 6 · Galerie ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 17vw, 220px);
  gap: var(--s-3);
  margin: 0; padding: 0; list-style: none;
}
.shots > li:first-child:not(:only-child):not(:nth-last-child(2)) { grid-column: span 2; grid-row: span 2; }
/* Letzte Reihe füllen: übrig bleibende Kachel(n) strecken */
.shots > li:nth-child(3n+1):last-child { grid-column: 1 / -1; }
.shots > li:nth-child(3n+2):last-child { grid-column: span 2; }

.shot-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-sunken);
}
.shot-open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 0;
  background: none;
  cursor: zoom-in;
}
.shot-open:focus-visible { outline-offset: -3px; border-radius: var(--radius-card); }
.shot-open img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.shot-open:hover img { transform: scale(1.03); }
.tile-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 2px;
  margin: 0;
  padding: var(--s-10) var(--s-4) var(--s-3);
  background: linear-gradient(0deg, var(--scrim) 0%, var(--scrim) 40%, transparent 100%);
  pointer-events: none;
}
.shot-game { color: var(--gold); font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: var(--track-display); }
.shot-caption { font-size: var(--fs-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Platzhalter ohne Uploads: erzeugte Glutverläufe mit Spielnamen */
.shot-tile.placeholder {
  display: flex; align-items: flex-end;
  padding: var(--s-5);
  background:
    radial-gradient(ellipse 60% 85% at var(--glow-x) var(--glow-y), var(--ember-soft), transparent 70%),
    radial-gradient(circle at var(--glow-x) 100%, var(--ember-faint), transparent 45%),
    linear-gradient(155deg, var(--cover-tone) 0%, var(--bg-sunken) 78%);
}
.shot-tile.placeholder::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember) var(--glow-x), transparent);
  opacity: 0.6;
}
.shot-tile.placeholder::before { /* Silhouette: Bergkamm, Ruine oder Turm – je nach Lage des Glutlichts */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sunken) 70%, transparent), var(--bg-sunken));
  clip-path: var(--ridge);
}
.cover-glow-1 { --ridge: polygon(0 55%, 12% 40%, 22% 52%, 38% 18%, 50% 46%, 64% 36%, 78% 60%, 100% 44%, 100% 100%, 0 100%); }
.cover-glow-2 { --ridge: polygon(0 48%, 14% 62%, 30% 34%, 36% 34%, 36% 14%, 40% 14%, 40% 34%, 52% 50%, 70% 40%, 86% 58%, 100% 50%, 100% 100%, 0 100%); }
.cover-glow-3 { --ridge: polygon(0 66%, 20% 54%, 30% 58%, 42% 30%, 46% 30%, 47% 8%, 49% 30%, 54% 30%, 64% 56%, 82% 50%, 100% 62%, 100% 100%, 0 100%); }
.cover-glow-4 { --ridge: polygon(0 40%, 16% 56%, 28% 46%, 46% 64%, 60% 30%, 72% 48%, 84% 22%, 100% 46%, 100% 100%, 0 100%); }
.shot-ph-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  color: var(--text);
  opacity: 0.85;
  overflow-wrap: anywhere;
}
.shots > li.placeholder:first-child .shot-ph-name { font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl)); }

@media (max-width: 759.98px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 132px; }
  .shots > li:first-child:not(:only-child):not(:nth-last-child(2)) { grid-row: span 1; }
  .shots > li:nth-child(n):last-child { grid-column: auto; }
  .shots > li:first-child, .shots > li:nth-child(even):last-child { grid-column: span 2; }
  .shot-tile.placeholder { padding: var(--s-4); }
  .shot-ph-name { font-size: var(--fs-base); letter-spacing: 0.03em; text-wrap: balance; }
}

/* Lightbox */
.dialog.lightbox {
  width: auto;
  max-width: min(1280px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100vh - 2 * var(--s-4));
  overflow: hidden;
  background: var(--bg-sunken);
}
.lightbox figure { margin: 0; }
.lightbox img {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  margin-inline: auto;
}
.lightbox figcaption { display: grid; gap: 2px; padding: var(--s-3) var(--s-5) var(--s-4); }
.lightbox-close {
  position: absolute; top: var(--s-2); right: var(--s-2);
  background: var(--bg-glass);
  border-color: var(--line);
}

/* ---------- 7 · Bibliothek ---------- */

.landing-library {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-10) var(--s-16);
  align-items: start;
}
.library-text p { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--s-6); }
.library-games { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.library-games li { border-bottom: 1px solid var(--line); }
.library-games a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) var(--s-2);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.library-games a:hover { background: var(--ember-faint); color: var(--text); }
.library-games a:focus-visible { outline-offset: -2px; }
.lib-game { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.lib-count { flex: none; color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.library-games a:hover .lib-count { color: var(--ember); }

@media (max-width: 899.98px) {
  .landing-library { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 8 · FAQ ---------- */

.landing-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--s-6) var(--s-16);
  align-items: start;
}
.landing-faq .landing-head { margin-bottom: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  display: flex; align-items: center;
  min-height: 60px;
  padding: var(--s-3) var(--s-10) var(--s-3) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { /* Plus, wird zum Minus */
  content: "";
  position: absolute; right: var(--s-2); top: 50%;
  width: 14px; height: 2px;
  border-radius: 1px;
  background: var(--ember);
  transition: transform var(--dur) var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--ember-bright); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details p { max-width: 40rem; margin: 0; padding: 0 var(--s-10) var(--s-5) 0; color: var(--text-muted); }

@media (max-width: 899.98px) {
  .landing-faq { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Schluss ---------- */

.landing-final {
  position: relative;
  isolation: isolate;
  display: grid; justify-items: center;
  text-align: center;
}
.landing-final::before { /* kleines Leuchtfeuer unter dem Aufruf */
  content: "";
  position: absolute; z-index: -1;
  left: 50%; bottom: 0;
  width: min(640px, 100%); height: 260px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 40% at 50% 62%, var(--ember-soft), transparent 70%);
}
.landing-final p { max-width: 32rem; color: var(--text-muted); font-size: var(--fs-md); margin-bottom: var(--s-6); }
.landing-final .actions { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .hero-bed, .hero-live .badge-dot, .landing-live .live-dot { animation: none; }
}