/* quizking.app – Quizkönig – Duell / Quiz King – Duel
   Gestaltung wie die App (Prototyp _workspace/prototypen/quizkoenig-ios, Quizkoenig/Design/Tokens.swift):
   Farben, Wimpel-Ecken (zwei große, zwei kleine über Kreuz), flache Karten mit kurzem weichem Schatten,
   goldener Knopf, Schrift SF Pro Rounded (lokal über ui-rounded, keine Webfonts). Hell und dunkel wie die App. */

:root {
  /* Identität (fest) */
  --koenig: #2A1D86;
  --gold: #F4B400;
  --gold-hell: #F4C430;
  --nacht: #160F3D;
  --saphir: #1E4FC9;
  --violett: #6A27D3;
  --rubin: #B0174F;
  --smaragd: #0A7458;
  --bernstein: #B4470A;
  --pflaume: #8E2C9E;
  --petrol: #0D6E7E;

  /* Flächen und Text: hell */
  --grund: #F5F2FC;
  --flaeche: #FFFFFF;
  --flaeche-tief: #ECE7FA;
  --text: #160F3D;
  --text-leise: #4D4677;
  --akzent: #4B2BB8;
  --rand: #D6CEF3;
  --icon-gold: #C98A00;
  --schatten: 0 3px 8px rgba(0, 0, 0, 0.10);

  /* Abstand, Radius (Tokens.swift) */
  --s: 8px; --m: 12px; --l: 16px; --xl: 20px; --xxl: 28px;
  --r-klein: 10px; --r-mittel: 16px; --r-gross: 26px;

  color-scheme: light dark;
}

/* Erscheinungsbild: Vorgabe = System (prefers-color-scheme); der Schalter setzt data-theme="light|dark" auf <html>. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
    --grund: #0F0B2A;
    --flaeche: #1D1748;
    --flaeche-tief: #2A2260;
    --text: #FFFFFF;
    --text-leise: #C4BDEB;
    --akzent: #F4C430;
    --rand: #3B3383;
    --icon-gold: #F4C430;
    --schatten: 0 3px 8px rgba(0, 0, 0, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0F0B2A;
    --flaeche: #1D1748;
    --flaeche-tief: #2A2260;
    --text: #FFFFFF;
    --text-leise: #C4BDEB;
    --akzent: #F4C430;
    --rand: #3B3383;
    --icon-gold: #F4C430;
    --schatten: 0 3px 8px rgba(0, 0, 0, 0.10);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 6px; }

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

/* Die eigene Form der App: Wimpel */
.wimpel { border-radius: var(--r-gross) var(--r-klein) var(--r-gross) var(--r-klein); }

.skip {
  position: absolute; left: var(--m); top: -80px; z-index: 10;
  background: var(--gold); color: var(--nacht); padding: var(--m) var(--l);
  border-radius: var(--r-klein); font-weight: 800; text-decoration: none;
}
.skip:focus { top: var(--m); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kopfzeile: nur die Sprachwahl */
/* Kopfleiste eigene Zeile, klar vom Hero getrennt (Mathias 14.10.2026): Sprachwahl und Schalter ragen nie ins Gerät. */
.top { position: relative; z-index: 2; padding: var(--l) 0; border-bottom: 1px solid var(--rand); background: var(--grund); }
.top .wrap { display: flex; justify-content: flex-end; align-items: center; gap: var(--s); }
.erscheinung {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.erscheinung svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.erscheinung .sonne { display: none; }
:root[data-erscheinung-ist="dark"] .erscheinung .sonne { display: block; }
:root[data-erscheinung-ist="dark"] .erscheinung .mond { display: none; }
.erscheinung[hidden] { display: none; }
.sprachen { display: flex; gap: var(--s); margin: 0; padding: 0; list-style: none; }
.sprachen a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 var(--m); border-radius: 22px; border: 1px solid var(--rand);
  color: var(--text-leise); font-weight: 700; text-decoration: none; background: var(--flaeche);
}
.sprachen a[aria-current="page"] { color: var(--text); border-color: var(--akzent); }

/* Startkopf wie in der App: Bildmarke + Wortmarke + Unterzeile (Variante a) */
.startkopf { display: flex; align-items: center; gap: var(--l); margin: var(--xl) 0 var(--xxl); }
.startkopf img { width: 96px; height: 96px; flex: none; }
.startkopf h1 { margin: 0; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; font-weight: 900; letter-spacing: -0.01em; color: var(--text); }
.startkopf .unterzeile { margin: 6px 0 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.075em; color: var(--text-leise); }

/* Blaue Kopfkarte (wie „Dein Wochenbestwert“) */
.kopfkarte {
  background: linear-gradient(135deg, var(--saphir) 0%, var(--koenig) 100%);
  color: #fff; padding: var(--xxl) var(--xl) var(--xl); box-shadow: var(--schatten);
}
.kopfkarte .marke { display: flex; align-items: center; gap: var(--s); margin: 0 0 var(--m); font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.kopfkarte h2 { margin: 0; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.1; font-weight: 900; }
.kopfkarte .lede { margin: var(--m) 0 0; font-size: 1.15rem; color: rgba(255, 255, 255, 0.92); max-width: 30em; }

/* Goldener Knopf der App – hier als Hinweis (noch kein Store-Eintrag, absichtlich kein Link) */
.knopf-gold {
  display: flex; align-items: center; justify-content: center; gap: var(--s);
  min-height: 56px; margin: var(--xl) 0 0; padding: var(--m) var(--xl);
  background: var(--gold); color: var(--nacht); font-size: 1.15rem; font-weight: 800; text-align: center; text-wrap: balance;
  box-shadow: var(--schatten);
}
.knopf-gold svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* Drei Vorteile als weiße Karten */
.abschnitt { margin: var(--xxl) 0 0; }
.abschnitt > h2 { margin: 0 0 var(--m); font-size: 1.35rem; font-weight: 800; color: var(--akzent); }
.vorteile { display: grid; gap: var(--m); margin: 0; padding: 0; list-style: none; }
.vorteil {
  display: flex; gap: var(--l); align-items: flex-start;
  background: var(--flaeche); padding: var(--l) var(--xl); box-shadow: var(--schatten);
}
.vorteil h3 { margin: 2px 0 2px; font-size: 1.2rem; font-weight: 800; }
.vorteil p { margin: 0; color: var(--text-leise); }

/* Plakette: Icon in runder Farbfläche, Tinte weiß, Gold-Ebene gold */
.plakette {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.plakette svg { width: 28px; height: 28px; }
.plakette .tinte { fill: currentColor; }
.plakette .gold { fill: var(--gold-hell); }
.p-violett { background: var(--violett); }
.p-saphir { background: var(--saphir); }
.p-smaragd { background: var(--smaragd); }
.p-rubin { background: var(--rubin); }
.p-bernstein { background: var(--bernstein); }
.p-petrol { background: var(--petrol); }
.p-pflaume { background: var(--pflaume); }
.p-koenig { background: var(--koenig); }
.p-gold { background: var(--gold); color: var(--nacht); }
.p-gold .gold { fill: var(--koenig); }
.icon-klein { width: 22px; height: 22px; }
.icon-klein .tinte { fill: currentColor; }
.icon-klein .gold { fill: var(--gold-hell); }

/* Fuß */
footer { margin: 48px 0 0; padding: var(--xl) 0 40px; border-top: 1px solid var(--rand); color: var(--text-leise); }
footer ul { display: flex; flex-wrap: wrap; gap: 0 var(--s); margin: 0 0 var(--s); padding: 0; list-style: none; }
footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s); color: var(--text); font-weight: 600; }
footer p { margin: 0; padding: 0 var(--s); font-size: 0.95rem; }

/* Bewegung: Bildmarke schwebt sacht – aus bei „Bewegung reduzieren“ (wie BewegungsSteuerung in der App) */
@media (prefers-reduced-motion: no-preference) {
  .startkopf img { animation: schweben 5s ease-in-out infinite; }
  .held-geraet { animation: auftauchen 0.6s ease-out both; }
  .galerie-liste { scroll-behavior: smooth; }
}
@keyframes schweben { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(0deg); } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .knopf-gold { font-size: 1.05rem; padding: var(--m) var(--l); }
  .startkopf img { width: 72px; height: 72px; }
  .vorteil { padding: var(--l); gap: var(--m); }
}
@media (forced-colors: active) {
  .kopfkarte, .vorteil, .knopf-gold, .spielart, .zahl-karte, .faq details, .hoerprobe { border: 2px solid CanvasText; }
}

/* ---- Ausbau 14.10.2026 abends: Bühne mit Gerät, Zahlen, Spielarten, Bilder, Für alle, Hörprobe, Fragen ---- */

.buehne { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 40px; align-items: center; padding-top: var(--xxl); }
.buehne-text { max-width: 600px; }
.held { display: flex; justify-content: center; padding-top: var(--s); }
.held-geraet {
  width: min(320px, 76vw); padding: 10px; background: #0B0820; box-shadow: 0 24px 60px rgba(22, 15, 61, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  border-radius: 52px;
}
.held-geraet img { border-radius: 42px; width: 100%; }

.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--m); margin: var(--xl) 0 0; padding: 0; list-style: none; }
.zahl-karte { background: var(--flaeche); padding: var(--l); box-shadow: var(--schatten); }
.zahl-karte strong { display: block; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zahl-karte span { color: var(--text-leise); font-weight: 600; }
.zahlen-fuss { margin: var(--s) 0 0; color: var(--text-leise); font-size: 0.95rem; }

.abschnitt { margin-top: 56px; }
.abschnitt > h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 900; color: var(--text); }
.abschnitt > .einleitung { margin: -4px 0 var(--xl); color: var(--text-leise); max-width: 42em; }
.unter { margin: var(--xl) 0 var(--m); font-size: 1.2rem; font-weight: 800; color: var(--akzent); }

/* Spielarten: farbige Karten wie die Startseite der App */
.spielarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--m); margin: 0; padding: 0; list-style: none; }
.spielart { display: flex; gap: var(--l); align-items: flex-start; padding: var(--l) var(--xl) var(--xl); color: #fff; box-shadow: var(--schatten); }
.spielart h3 { margin: 4px 0 4px; font-size: 1.2rem; font-weight: 800; }
.spielart p { margin: 0; color: rgba(255, 255, 255, 0.94); }
.spielart .plakette { background: rgba(255, 255, 255, 0.16); }
.spielart .marke-plus { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); font-size: 0.8rem; font-weight: 800; vertical-align: 2px; }
.s-rubin { background: var(--rubin); }
.s-smaragd { background: var(--smaragd); }
.s-bernstein { background: var(--bernstein); }
.s-violett { background: var(--violett); }
.s-petrol { background: var(--petrol); }
.s-saphir { background: var(--saphir); }
.s-koenig { background: var(--koenig); }
.s-pflaume { background: var(--pflaume); }
.s-gold { background: var(--gold); color: var(--nacht); }
.s-gold p { color: var(--nacht); }
.s-gold .plakette { background: rgba(22, 15, 61, 0.12); color: var(--nacht); box-shadow: inset 0 0 0 1.5px rgba(22, 15, 61, 0.3); }
.s-gold .plakette .gold { fill: var(--koenig); }
.s-gold .marke-plus { background: rgba(22, 15, 61, 0.14); }

/* Bilder: waagrechte Leiste mit Einrasten, Knöpfe nur mit JavaScript */
.galerie { position: relative; }
.galerie-liste { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: var(--r-klein); }
.galerie-reihe { display: flex; gap: var(--l); margin: 0; padding: 4px 4px var(--l); list-style: none; }
.galerie-liste:focus-visible { outline-offset: 0; }
.galerie-liste li { flex: none; width: min(260px, 70vw); scroll-snap-align: start; }
.galerie-liste li.breit { width: min(420px, 86vw); }
.galerie-liste figure { margin: 0; }
.galerie-liste img { border-radius: 28px; border: 1px solid var(--rand); box-shadow: var(--schatten); background: var(--flaeche); }
.galerie-liste li.breit img { border-radius: 20px; }
.galerie-liste figcaption { margin-top: var(--s); color: var(--text-leise); font-size: 0.95rem; font-weight: 600; }
.galerie-knoepfe { display: flex; gap: var(--s); justify-content: flex-end; margin: 0 0 var(--s); }
.galerie-knoepfe[hidden] { display: none; }
.rund {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rand); background: var(--flaeche);
  color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--schatten);
}
.rund svg { width: 22px; height: 22px; }
.rund .tinte { fill: currentColor; }
.rund .gold { fill: var(--icon-gold); }
.rund:disabled { opacity: 0.4; cursor: default; }

/* Für alle spielbar: weiße Karten */
.vorteile.zwei { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vorteil .plakette { color: #fff; }

/* Hörprobe */
.hoerprobe { background: var(--flaeche); padding: var(--xl) var(--xxl); box-shadow: var(--schatten);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s) 40px; align-items: center; }
.hoerprobe-text p { max-width: 36em; }
.hoerprobe h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 900; display: flex; align-items: center; gap: var(--s); }
.hoerprobe h2 svg { width: 24px; height: 24px; }
.hoerprobe h2 .tinte { fill: currentColor; }
.hoerprobe h2 .gold { fill: var(--icon-gold); }
.hoerprobe p { margin: 0 0 var(--m); color: var(--text-leise); }
.hoerprobe audio { width: 100%; margin: var(--s) 0 var(--m); }
.hoerprobe .mitschrift { margin: 0; padding: var(--m) var(--l); background: var(--flaeche-tief); border-radius: var(--r-klein); color: var(--text); }

/* Häufige Fragen */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m); align-items: start; }
.faq details { background: var(--flaeche); box-shadow: var(--schatten); border-radius: var(--r-mittel); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--l) var(--xl); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--m);
  font-weight: 800; font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--akzent); }
.faq details[open] summary::after { content: "–"; }
.faq .antwort { padding: 0 var(--xl) var(--l); color: var(--text-leise); }
.faq .antwort p { margin: 0 0 var(--s); }

/* Fuß: andere Spiele */
.andere { margin: 0 0 var(--m); padding: 0 var(--s); }
.andere a { padding: 0; min-height: 44px; }

@media (max-width: 860px) {
  .buehne { grid-template-columns: 1fr; gap: var(--xxl); padding-top: var(--s); }
  .hoerprobe, .faq { grid-template-columns: 1fr; }
  .hoerprobe { padding: var(--xl); }
}
@media (max-width: 560px) {
  .zahlen { grid-template-columns: 1fr; gap: var(--s); }
  .zahl-karte { display: flex; align-items: baseline; gap: var(--m); padding: var(--m) var(--l); }
}