/*
 * web.css — nur die Startseite. Die App bringt ihr eigenes styles.css mit.
 * Farbvariablen absichtlich dieselben Namen und Werte wie dort, damit der
 * Übergang von der Startseite in die App nicht wie ein Sprung wirkt.
 */
:root {
  --bg: #f7f7f5;
  --card-bg: #ffffff;
  --text: #1f2328;
  --text-muted: #6b7280;
  --accent: #2563eb;
  --knew: #10b981;
  --new: #f97316;
  --track: #e5e7eb;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181d; --card-bg: #1f2228; --text: #e6e7ea; --text-muted: #9aa0a8;
    --accent: #60a5fa; --knew: #34d399; --new: #fb923c; --track: #353a42;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }

/* Ruhiger Farbverlauf im Hintergrund – nichts Aufdringliches, die Seite soll
   nach Lernwerkzeug aussehen und nicht nach Werbelandeseite. */
.hero-wrap {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(50rem 26rem at 90% 0%, color-mix(in srgb, var(--knew) 12%, transparent), transparent 55%);
}

.topbar {
  max-width: 1080px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand picture { display: flex; }  /* Dunkelmodus: helle Fassung des Zeichens (logo_mark_hell.png), 25.09. */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.btn {
  border: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
  padding: 11px 22px; background: var(--accent); color: #fff;
  transition: transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn-ghost {
  background: transparent; color: var(--text); box-shadow: none;
  border: 1.5px solid var(--track); padding: 9px 18px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn-lang { background: none; border: none; color: var(--text-muted); cursor: pointer; font: inherit; padding: 6px; }
.btn-lang:hover { color: var(--accent); }

.hero { max-width: 1080px; margin: 0 auto; padding: 40px 24px 72px; }
.hero h1 {
  font-size: clamp(32px, 5.2vw, 54px); line-height: 1.1; margin: 0 0 18px;
  letter-spacing: -0.02em; max-width: 16ch;
}
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--text-muted); max-width: 56ch; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.release-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.hero-note { font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.hero-note.hero-probe { color: var(--text); font-weight: 600; margin-top: 16px; }
.hero-note.hero-probe + .hero-note { margin-top: 6px; }

/* Held in zwei Spalten mit gestapelten Lernkarten (2026-09-20). Die Karten
   nehmen die Maße der echten (.card in styles.css: 16 px Radius, weicher
   Schatten, 4er-Raster für Antworten) — kein Screenshot, der beim nächsten
   Redesign veraltet. Gestapelt wie die Toasts der App: die vorderste leicht
   geneigt, dahinter zwei kleinere; alle 4 s rutscht die vorderste hinaus
   (JS in index.html). Feste Höhe, damit Bild-, Ton- und Textkarten denselben
   Umriss haben und der Stapel beim Wechsel nicht springt. */
.hero-2col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-demo { display: flex; justify-content: center; }
.demo-stack { position: relative; width: min(400px, 100%); height: 430px; margin-top: 30px; }
.demo-card {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  padding: 18px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--track) 60%, transparent);
  transform-origin: 50% 20%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease;
}
.demo-card[data-pos="0"] { transform: rotate(-2deg); z-index: 4; }
.demo-card[data-pos="1"] { transform: translateY(-16px) scale(.94) rotate(1.5deg); opacity: .92; z-index: 3; }
.demo-card[data-pos="2"] { transform: translateY(-32px) scale(.88) rotate(-1deg); opacity: .6; z-index: 2; }
.demo-card[data-pos="3"] { transform: translateY(-44px) scale(.82); opacity: 0; z-index: 1; }
.demo-card.raus { transform: translateX(120%) rotate(8deg); opacity: 0; z-index: 5; transition-duration: .5s; }
.demo-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.demo-streak { font-weight: 800; color: var(--new); letter-spacing: 0; font-size: 14px; text-transform: none; }
.demo-badge { display: inline-block; align-self: flex-start; margin: 12px 0 8px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.demo-frage { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; flex: 1 1 auto; display: flex; align-items: center; }
/* Medienblock der Bild-/Ton-Karten: nimmt den Platz, den die Textkarten der
   Frage lassen — so bleibt der Umriss gleich. Kein echtes Foto (die liegen bei
   Wikimedia und müssten nachgeladen werden), sondern ein Farbfeld mit Motiv. */
.demo-media { height: 96px; border-radius: 12px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
/* Echte Fotos (Adrian, 20.09.), als 760×200-WebP im Repo (web/img/) — bei
   Wikimedia geholt, zugeschnitten und stark verkleinert (18 bzw. 30 KB), damit
   die Startseite nichts nachlädt. Nachweise stehen im Fuß (#bildnachweis). */
.demo-bild { overflow: hidden; background: var(--track); }
.demo-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-ton { gap: 12px; padding: 0 16px; background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); }
.demo-play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px; flex: 0 0 auto; }
.demo-welle { display: flex; align-items: center; gap: 4px; height: 40px; flex: 1 1 auto; }
.demo-welle i { flex: 1 1 auto; height: 30%; border-radius: 2px; background: var(--accent); opacity: .75; animation: demoWelle 1.1s ease-in-out infinite; }
.demo-welle i:nth-child(2n) { animation-delay: .15s; } .demo-welle i:nth-child(3n) { animation-delay: .3s; } .demo-welle i:nth-child(5n) { animation-delay: .45s; }
@keyframes demoWelle { 0%, 100% { height: 25%; } 50% { height: 90%; } }
.demo-media + .demo-frage { flex: 0 0 auto; font-size: 16px; }
.demo-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.demo-antwort {
  position: relative; padding: 13px 10px 13px 16px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 14px;
  background: color-mix(in srgb, var(--text) 5%, var(--card-bg)); border: 1.5px solid transparent;
}
.demo-antwort i { position: absolute; top: 4px; left: 8px; font-style: normal; font-size: 10px; color: var(--text-muted); }
.demo-antwort { transition: background .25s ease, border-color .25s ease, transform .12s ease; }
.demo-antwort.demo-druck { transform: scale(.96); background: color-mix(in srgb, var(--text) 10%, var(--card-bg)); }
.demo-antwort.demo-richtig { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 14%, var(--card-bg)); }
.demo-fuss { margin-top: auto; }
.demo-zeile { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.demo-zeile b { color: var(--text); }
.demo-balken { height: 6px; border-radius: 999px; background: var(--track); margin-top: 4px; overflow: hidden; }
.demo-balken span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.demo-balken.demo-gruen span { background: var(--knew); }
@media (max-width: 860px) {
  .hero-2col { grid-template-columns: 1fr; gap: 20px; }
  .demo-stack { width: min(360px, 100%); height: 410px; }
  .hero-demo { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-card { transition: none; }
  .demo-welle i { animation: none; height: 55%; }
}

.features { max-width: 1080px; margin: 0 auto; padding: 8px 24px 72px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.feature {
  background: var(--card-bg); border: 1px solid var(--track); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.feature .ico { font-size: 26px; line-height: 1; display: block; margin-bottom: 10px; }
.feature h3 { margin: 0 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--text-muted); font-size: 14.5px; }

.stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 0 0 34px; }
.stat b { display: block; font-size: 26px; line-height: 1.1; }
.stat span { color: var(--text-muted); font-size: 13.5px; }

footer { max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; color: var(--text-muted); font-size: 13.5px; }
footer .sep { margin: 0 8px; opacity: .5; }
footer .bildnachweis { font-size: 12px; margin: 0 0 14px; opacity: .8; }
footer .bildnachweis a { color: inherit; }

/* ---------- Login-Overlay ---------- */
/* Overlay scrollt, wenn die Karte höher ist als das Fenster (2026-09-05, Adrian: auf niedrigen
   Bildschirmen war „Konto erstellen" unerreichbar). Zentriert wird über margin:auto an der
   Karte, NICHT über align-items:center — das würde bei Überlänge oben und unten abschneiden;
   auto-Ränder werden bei Überlauf zu 0 und die Karte bleibt von oben her scrollbar. */
.ov { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 20px; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ov.on { display: flex; }
.ov-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); } /* fixed, nicht absolute: seit das Overlay scrollt (v10), deckte absolute nur die erste Bildschirmhöhe ab (Adrian, 05.09.) */
.ov-card {
  position: relative; width: 100%; max-width: 420px; background: var(--card-bg);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 26px 26px 22px; animation: ov-in .18s ease-out;
  margin: auto;                         /* zentriert, im Scrollfall oben anfangen (s. .ov) */
}
@keyframes ov-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ov-x {
  position: absolute; top: 12px; right: 14px; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted); padding: 4px 8px; border-radius: 8px;
}
.ov-x:hover { background: var(--track); color: var(--text); }
.ov-card h2 { margin: 0 0 4px; font-size: 21px; }
.ov-card .sub { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }

.tabs { display: flex; gap: 6px; background: var(--track); padding: 4px; border-radius: 999px; margin-bottom: 18px; }
.tabs button {
  flex: 1; border: none; background: none; cursor: pointer; font: inherit; font-weight: 700;
  padding: 8px 10px; border-radius: 999px; color: var(--text-muted);
}
.tabs button.on { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.08); }

.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.hint-link { text-align: right; margin-top: 6px; }
.hint-link a { color: var(--text-muted); font-size: 13px; }
.hint-link a:hover { color: var(--accent); }
.field input, .field select {
  width: 100%; font: inherit; padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid var(--track); background: var(--bg); color: var(--text);
}
.field input:focus { outline: none; border-color: var(--accent); }
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.ov-card .btn { width: 100%; margin-top: 6px; }
/* Google-Login (2026-09-02) */
.oder { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; color: var(--text-muted); font-size: 13px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--track); }
.btn-google { margin-top: 0; }
/* hidden-Attribut muss gegen display:flex/inline-block gewinnen (2026-09-02: „oder" blieb im Passwort-vergessen-Schritt sichtbar) */
.oder[hidden], .btn-google[hidden], .btn-apple[hidden], .hint-link[hidden] { display: none; }
/* Apple-Login (2026-09-05): Knopf nach Apples HIG — schwarz, weißes Logo, gleiche Höhe wie Google */
.btn-apple { margin-top: 8px; background: #000; color: #fff; border: 1.5px solid #000; box-shadow: none; padding: 9px 18px; }
.btn-apple:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; box-shadow: none; }
.apple-logo { display: inline-block; width: 1em; height: 1em; vertical-align: -.12em; margin-right: .25em; }
.zurueck-row { text-align: center; margin-top: 12px; }
.zurueck-row a { color: var(--text-muted); font-size: 13px; }
.zurueck-row a:hover { color: var(--accent); }
.g-logo { display: inline-block; font-weight: 800; font-family: Arial, sans-serif; color: #4285f4; margin-right: .25em; }

.msg { border-radius: 10px; padding: 10px 13px; font-size: 14px; margin: 4px 0 12px; display: none; }
.msg.on { display: block; }
.msg.err { background: color-mix(in srgb, #f43f5e 14%, transparent); color: #b0233c; }
.msg.ok { background: color-mix(in srgb, var(--knew) 16%, transparent); color: #0f7a55; }
@media (prefers-color-scheme: dark) {
  .msg.err { color: #ff9db0; }
  .msg.ok { color: #6ee7b7; }
}

.busy { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .ov-card { animation: none; }
  .busy { animation-duration: 2s; }
}

/* ---------------------------------------------------------------------------
   Rechtstexte (Impressum, Datenschutz)
   Bewusst schmal gesetzt: 68 Zeichen Zeilenlaenge liest sich auch bei langen
   Absaetzen noch, und diese Seiten bestehen fast nur aus Absaetzen.
   Farben und Radien kommen aus denselben Variablen wie die Startseite, damit
   der Sprung vom Footer hierher nicht wie eine fremde Seite wirkt.
--------------------------------------------------------------------------- */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 8px 24px 72px; }
.legal h1 { font-size: 30px; line-height: 1.25; margin: 24px 0 6px; }
.legal .stand { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; }
.legal h2 {
  font-size: 19px; margin: 34px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--track);
}
.legal h3 { font-size: 16px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal li { margin: 5px 0; }
.legal .dl { margin: 12px 0; }
.legal .dl div { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--track); }
.legal .dl b { flex: 0 0 190px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 560px) {
  .legal .dl div { display: block; }
  .legal .dl b { display: block; flex: none; }
}
/* Hinweiskasten – ruhig, kein Warndreieck-Ton. Wird fuer Dinge benutzt, die
   der Leser wirklich mitnehmen soll (Loeschung des Kontos, Beschwerderecht). */
.legal .box {
  background: var(--card-bg); border-radius: var(--radius);
  padding: 14px 18px; margin: 18px 0; box-shadow: var(--shadow);
}
.legal .box p:first-child { margin-top: 0; }
.legal .box p:last-child { margin-bottom: 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--track); vertical-align: top; }
.legal th { color: var(--text-muted); font-weight: 600; }
.back { display: inline-block; margin: 22px 0 0; font-size: 15px; }
.legal-links { font-size: 13px; margin: 28px 0 0; color: var(--text-muted); }
.legal-links a { color: var(--text-muted); }
.legal-links a:hover { color: var(--accent); }
/* Die Marke oben links ist auf den Rechtsseiten ein Link zur Startseite. Ohne
   diese Regel greift `a { color: var(--accent) }` und faerbt den Schriftzug
   blau — auf der Startseite selbst faellt das nicht auf, weil er dort kein
   Link ist. */
a.brand { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   Kontaktformular
--------------------------------------------------------------------------- */
.form { margin: 20px 0 8px; }
.form label { display: block; font-weight: 600; margin: 16px 0 6px; }
.form .opt { font-weight: 400; color: var(--text-muted); }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--track);
  border-radius: 12px; padding: 11px 13px;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form .hint { color: var(--text-muted); font-size: 14px; margin: 6px 0 0; }
.form button { margin-top: 22px; }

/* Der Honigtopf muss fuer Menschen unsichtbar sein, ohne `display:none` –
   manche Bots werten das aus und lassen das Feld dann leer. Deshalb aus dem
   Bild geschoben und aus der Tabreihenfolge genommen. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hinweis {
  border-radius: var(--radius); padding: 14px 18px; margin: 20px 0 0;
  border: 1px solid var(--track); background: var(--card-bg);
}
.hinweis.gut      { border-color: var(--knew); }
.hinweis.schlecht { border-color: var(--new); }

/* ---------------------------------------------------------------------------
   Sprachnavigation: ein Knopf je Sprache, nebeneinander.
   Loest den frueheren Umschaltknopf ab. Bei drei Sprachen musste man mit dem
   sonst durchschalten — von Deutsch nach Spanisch ging es nur ueber Englisch,
   und man sah dem Knopf nicht an, welche Sprachen es ueberhaupt gibt.
--------------------------------------------------------------------------- */
.langnav {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--track); border-radius: 999px; background: var(--card-bg);
}
.langnav button {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted); padding: 6px 11px; border-radius: 999px;
  transition: background .12s, color .12s;
}
.langnav button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.langnav button.an { background: var(--accent); color: #fff; }
.langnav button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Runde „aus dem Kopf" im Karten-Stapel (25.09.): nimmt exakt den Platz der
   2×2-Auswahl ein (2 × 47 px + 8 px Abstand), damit der Stapel nicht springt. */
.demo-selbst { height: 102px; margin-bottom: 12px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 8px; }
.demo-selbst[hidden], .demo-selbst [hidden], .demo-antworten[hidden] { display: none !important; }
.demo-zeigen, .demo-wusste, .demo-neu { display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 700; font-size: 14px; padding: 13px 10px; color: #fff; transition: transform .12s ease, filter .15s ease, box-shadow .2s ease; }
.demo-zeigen { background: var(--accent); }
.demo-loesung { text-align: center; font-weight: 800; font-size: 17px; color: var(--accent); }
.demo-bewerten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-wusste { background: var(--knew); }
.demo-neu { background: var(--new); }
.demo-zeigen.demo-druck, .demo-wusste.demo-druck, .demo-neu.demo-druck { transform: scale(.96); filter: brightness(.92); }
.demo-wusste.demo-gedrueckt { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--knew); }
.demo-neu.demo-gedrueckt { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--new); }
/* Community-Links im Fuß (25.09.2026). */
footer .social-links { margin: 0 0 12px; }
footer .social-links a { color: inherit; text-decoration: none; }
footer .social-links a:hover { color: var(--accent); }
footer .social-links a { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
footer .social-links .social-ico { width: 16px; height: 16px; display: block; }
@media (prefers-color-scheme: dark) { footer .social-links .social-ico[src$="tiktok.svg"] { filter: invert(1); } }

/* Beim Start benachrichtigen (2026-09-25) — schmale Zeile unter dem Einladungs-
   Hinweis, gleiche Farbwelt wie der Release-Hinweis oben. */
.release-form { margin: 22px 0 0; max-width: 460px; }
.release-titel { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.release-zeile { display: flex; gap: 8px; }
.release-zeile input[type="email"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--track, #d8dbe0); background: var(--card-bg); color: var(--text);
}
.release-zeile input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.release-zeile .btn { padding: 10px 18px; white-space: nowrap; }
.release-ok { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.release-ok input { margin: 2px 0 0; accent-color: var(--accent); }
.release-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.release-status { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
.release-status.gut { color: color-mix(in srgb, #10b981 70%, var(--text)); background: color-mix(in srgb, #10b981 12%, transparent); }
.release-status.schlecht { color: color-mix(in srgb, #ef4444 75%, var(--text)); background: color-mix(in srgb, #ef4444 10%, transparent); }
@media (max-width: 480px) { .release-zeile { flex-direction: column; } .release-zeile .btn { width: 100%; } }

/* ============================================================================
   Startseite erklärt das Produkt (2026-09-26, Adrian: „Verbessere mal noch die
   Startseite … Nutze entweder Anker oder echte Menüpunkte … mehr das Produkt
   erklärt, ähnlich wie bei dem Intro"). Ankermenü + Abschnitte.
   ============================================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.topnav { display: flex; gap: 4px; margin-left: 28px; }
.topnav a { color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.topnav a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 1020px) {
  .topbar { flex-wrap: wrap; column-gap: 8px; }
  .topnav { order: 3; width: 100%; margin: 10px 0 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 6px 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
}
@media (max-width: 420px) { #login-top { padding: 8px 12px; } .topbar .langnav button { padding-left: 8px; padding-right: 8px; } }
.abschnitt { max-width: 1080px; margin: 0 auto; padding: 56px 24px 24px; scroll-margin-top: 12px; }
.abschnitt h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 10px; }
.abschnitt-lead { color: var(--text-muted); font-size: clamp(16px, 1.8vw, 18px); max-width: 62ch; margin: 0 0 28px; }
.features.abschnitt h2 { margin-bottom: 22px; }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; counter-reset: none; }
.schritt { position: relative; background: var(--card-bg); border: 1px solid var(--track); border-radius: 16px; padding: 22px 20px 20px; }
.schritt-nr { position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.schritt .ico { font-size: 28px; line-height: 1; display: block; margin-bottom: 12px; }
.schritt h3 { margin: 0 0 6px; font-size: 17px; }
.schritt p { margin: 0; color: var(--text-muted); font-size: 14.5px; }
/* Zeitstrahl aus dem App-Intro (styles.css .ob-zs-*), hier als eigene volle Zeile unter den
   Schritten (in der Schritt-Karte war er zu eng). Beschriftungen liegen absolut, damit nicht die
   längste Zahl die Abstände bestimmt; die Striche wachsen mit dem Abstand wie die Leiter. */
.zs { margin-top: 18px; background: var(--card-bg); border: 1px solid var(--track); border-radius: 16px; padding: 20px 24px 18px; }
.zs-kopf, .zs-fuss { font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.zs-kopf { margin-bottom: 18px; font-weight: 700; color: var(--text); }
.zs-fuss { margin-top: 12px; }
.zs-reihe { display: flex; align-items: center; padding: 0 22px 26px 8px; }
.zs-punkt { position: relative; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.zs-kreis { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.zs-punkt.lang .zs-kreis { background: var(--knew); box-shadow: 0 0 0 4px color-mix(in srgb, var(--knew) 22%, transparent); }
.zs-t { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.zs-punkt:first-child .zs-t { left: -4px; transform: none; }
.zs-strich { height: 3px; min-width: 30px; background: var(--track); border-radius: 2px; }
.zs-mehr { font-size: 16px; color: var(--text-muted); line-height: 1; padding-left: 3px; }
@media (max-width: 520px) {
  .zs { padding: 18px 16px 16px; }
  .zs-reihe { padding-right: 18px; }
  .zs-t { font-size: 11px; top: 19px; }
  .zs-kreis { width: 12px; height: 12px; }
  /* Schmal: Die kurzen ersten Abstände bekommen mehr Mindestbreite, der Auslauf nach
     „≈ 35 Tage" gibt dafür Platz ab – sonst stoßen „1 Tag" und „3 Tage" aneinander. */
  .zs-strich { min-width: 40px; }
  .zs-strich.zs-ende { flex-grow: 1 !important; min-width: 18px; max-width: 36px; }
}
@keyframes zsStrich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zsPunkt { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes zsEin { from { opacity: 0; } to { opacity: 1; } }
/* .warte (nur per JS gesetzt) hält alles verborgen, bis der Strahl ins Bild scrollt. */
.zs.warte .zs-strich { transform: scaleX(0); }
.zs.warte .zs-kreis, .zs.warte .zs-t, .zs.warte .zs-mehr { opacity: 0; }
.zs.los .zs-strich { transform-origin: left center; animation: zsStrich 0.34s ease-out both; }
.zs.los .zs-kreis { animation: zsPunkt 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.zs.los .zs-t, .zs.los .zs-mehr { animation: zsEin 0.3s ease-out both; }
.zs.los .zs-punkt:nth-of-type(1) .zs-kreis { animation-delay: 0.05s; }
.zs.los .zs-strich:nth-of-type(2) { animation-delay: 0.20s; }
.zs.los .zs-punkt:nth-of-type(3) .zs-kreis { animation-delay: 0.35s; }
.zs.los .zs-strich:nth-of-type(4) { animation-delay: 0.50s; }
.zs.los .zs-punkt:nth-of-type(5) .zs-kreis { animation-delay: 0.75s; }
.zs.los .zs-strich:nth-of-type(6) { animation-delay: 0.95s; }
.zs.los .zs-punkt:nth-of-type(7) .zs-kreis { animation-delay: 1.25s; }
.zs.los .zs-strich:nth-of-type(8) { animation-delay: 1.50s; }
.zs.los .zs-punkt:nth-of-type(9) .zs-kreis { animation-delay: 1.90s; }
.zs.los .zs-strich:nth-of-type(10) { animation-delay: 2.15s; }
.zs.los .zs-mehr { animation-delay: 2.45s; }
.zs.los .zs-punkt:nth-of-type(1) .zs-t { animation-delay: 0.15s; }
.zs.los .zs-punkt:nth-of-type(3) .zs-t { animation-delay: 0.45s; }
.zs.los .zs-punkt:nth-of-type(5) .zs-t { animation-delay: 0.85s; }
.zs.los .zs-punkt:nth-of-type(7) .zs-t { animation-delay: 1.35s; }
.zs.los .zs-punkt:nth-of-type(9) .zs-t { animation-delay: 2.00s; }
@media (prefers-reduced-motion: reduce) {
  .zs.warte .zs-strich { transform: none; }
  .zs.warte .zs-kreis, .zs.warte .zs-t, .zs.warte .zs-mehr { opacity: 1; }
  .zs.los .zs-strich, .zs.los .zs-kreis, .zs.los .zs-t, .zs.los .zs-mehr { animation: none; }
}

.themen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.themen li { padding: 7px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--track); font-size: 14px; font-weight: 600; }

.plaene { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.plan { background: var(--card-bg); border: 1px solid var(--track); border-radius: 16px; padding: 22px 22px 18px; }
.plan h3 { margin: 0 0 12px; font-size: 20px; }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li { position: relative; padding: 0 0 10px 26px; color: var(--text-muted); font-size: 14.5px; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--knew); }
.plan-pro { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--card-bg)), var(--card-bg) 60%); }
.plan-pro h3 { color: var(--accent); }

.faq-liste { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq { background: var(--card-bg); border: 1px solid var(--track); border-radius: 14px; padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; padding: 16px 28px 16px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 22px; font-weight: 400; color: var(--text-muted); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.abschluss { margin: 44px 0 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.abschluss-titel { margin: 0; font-size: 22px; font-weight: 800; }

/* „Spiel, wo du willst" (26.09.): Webseite jetzt, Erweiterung und Apps bald. Die Store-Knöpfe
   sehen aus wie echte Store-Schaltflächen, sind aber deaktiviert und tragen ein „Bald"-Schild. */
.plattformen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plattform { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--track); border-radius: 16px; padding: 22px 20px 20px; }
.plattform h3 { margin: 12px 0 6px; font-size: 17px; }
.plattform p { margin: 0 0 16px; color: var(--text-muted); line-height: 1.55; font-size: 15px; }
.plattform-jetzt { border-color: color-mix(in srgb, var(--accent) 45%, var(--track)); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 12%, transparent); }
.plattform-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.plattform-ico svg { width: 24px; height: 24px; }
.plattform-knoepfe { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.store-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 12px; border: 1px solid transparent; background: #111418; color: #fff; font: inherit; text-align: left; cursor: not-allowed; }
.store-btn svg { width: 24px; height: 24px; flex: 0 0 auto; }
.store-btn:disabled { opacity: 1; }
.store-btn > svg, .store-btn > img, .store-btn .store-txt { opacity: .7; }
.store-btn > img { width: 24px; height: 24px; flex: 0 0 auto; }
.store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.store-klein { font-size: 11px; }
.store-gross { font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.store-bald { position: absolute; top: -8px; right: -8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--accent), var(--knew)); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (prefers-color-scheme: dark) { .store-btn { background: #fff; color: #111418; } }
/* Zweite Schaltfläche im Hero: ghost-artig, deaktiviert, mit demselben Schild. */
.btn-bald { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9.5px 20px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--text-muted) 55%, transparent); background: transparent; color: var(--text-muted); font: inherit; font-weight: 700; cursor: not-allowed; }
.btn-bald svg { width: 18px; height: 18px; }
.btn-bald .store-bald { top: -9px; right: -10px; }

/* „Aktuell nur für Tester" (26.09.): gut sichtbar im Hero und im Anmelde-Overlay. */
.tester-hinweis { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, #f59e0b 13%, var(--card-bg)); border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); }
.tester-hinweis b { font-weight: 800; }
.tester-hinweis[hidden] { display: none; }
.hero-note.tester-hinweis { margin-top: 12px; max-width: 520px; }
.ov-card .tester-hinweis { margin: 4px 0 14px; font-size: 13px; }
/* Browser-Logos nebeneinander, leicht überlappend (Karte + Hero-Knopf). */
.browser-logos { display: inline-flex; align-items: center; height: 44px; }
.browser-logos img { width: 36px; height: 36px; border-radius: 50%; background: var(--card-bg); box-shadow: 0 0 0 3px var(--card-bg); }
.browser-logos img + img { margin-left: -6px; }
.browser-logos.klein { height: auto; }
.browser-logos.klein img { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--bg); background: var(--bg); }
.browser-logos.klein img + img { margin-left: -5px; }

/* ---------------------------------------------------------------------------
   Spiele-Vorführung (26.09.): sechs nachgebaute Spiele spielen sich selbst vor.
   Das Skript setzt nur data-s (Takt) und .fertig; alles Sichtbare steht hier.
   --------------------------------------------------------------------------- */
.spiele-show { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 32px; align-items: center; margin: 8px 0 26px; }
.sd-tabs { position: relative; display: flex; flex-direction: column; gap: 6px; }
.sd-tab { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; cursor: pointer; overflow: hidden; transition: background .2s, border-color .2s, box-shadow .2s; }
.sd-tab:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.sd-tab.on { background: var(--card-bg); border-color: var(--track); box-shadow: var(--shadow); }
.sd-tab-e { font-size: 24px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); flex: 0 0 auto; }
.sd-tab-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-tab-t b { font-size: 15px; }
.sd-tab-sub { font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.sd-tab-fort { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; }
.sd-tab.on .sd-tab-fort { opacity: 1; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.sd-tab-fort i { display: block; height: 100%; width: 0; background: var(--accent); }
.sd-tab.on.lauf .sd-tab-fort i { animation: sdFort var(--dauer, 6s) linear forwards; }
.spiele-show.pause .sd-tab-fort i { animation-play-state: paused !important; }
@keyframes sdFort { from { width: 0; } to { width: 100%; } }

.sd-buehne { position: relative; height: 470px; display: grid; place-items: center; }
.sd-buehne::before { content: ""; position: absolute; inset: 6% 8%; border-radius: 40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); filter: blur(10px); }
.sd-karte {
  position: absolute; width: min(390px, 100%); height: 450px; display: flex; flex-direction: column; gap: 12px;
  background: var(--card-bg); border-radius: 20px; padding: 18px 18px 16px;
  border: 1px solid color-mix(in srgb, var(--track) 60%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s;
}
.sd-karte.aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sd-karte.ohne, .sd-karte.ohne * { transition: none !important; animation: none !important; }
.sd-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sd-uhr { font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.sd-uhr.knapp { color: #ef4444; }
.sd-frage { font-size: 19px; font-weight: 700; line-height: 1.3; }
.sd-frage.klein { font-size: 16px; text-align: center; }
.sd-hinweis { font-size: 13px; font-weight: 700; color: var(--accent); }
.sd-hinweis.mitte { text-align: center; color: var(--text-muted); font-weight: 600; }
.sd-ok { margin-top: auto; align-self: center; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; color: color-mix(in srgb, var(--knew) 75%, var(--text)); background: color-mix(in srgb, var(--knew) 15%, var(--card-bg)); opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sd-karte.fertig .sd-ok { opacity: 1; transform: none; }
.sd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-opt { position: relative; padding: 13px 10px; border-radius: 12px; text-align: center; font-weight: 600; font-size: 14px; background: color-mix(in srgb, var(--text) 5%, var(--card-bg)); border: 1.5px solid transparent; transition: background .25s, border-color .25s, transform .15s; }
.sd-knopf { align-self: stretch; text-align: center; padding: 12px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; transition: transform .15s, filter .2s, opacity .3s; }
/* Finger: tippt dorthin, wo gespielt wird. */
.sd-finger { position: absolute; z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 40%, transparent); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); left: var(--fx0); top: var(--fy0); transition: left 1.1s cubic-bezier(.45, .05, .3, 1), top 1.1s cubic-bezier(.45, .05, .3, 1), opacity .3s; }
@keyframes sdTipp { 0% { transform: scale(1); } 40% { transform: scale(.65); } 100% { transform: scale(1); } }
@keyframes sdPuls { 0% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--knew) 70%, transparent)); } 100% { filter: drop-shadow(0 0 0 transparent); } }

/* Geo */
.sd-geo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--accent) 12%, var(--card-bg)); --fx0: 16%; --fy0: 86%; }
.geo-karte { display: block; width: 100%; height: 100%; }
.geo-karte path { fill: color-mix(in srgb, var(--text) 14%, var(--card-bg)); stroke: var(--card-bg); stroke-width: 1.2; stroke-linejoin: round; transition: fill .35s ease; }
.sd-karte[data-spiel="geo"]:not([data-s="0"]) .sd-finger { left: 50%; top: 52%; }
.sd-karte[data-spiel="geo"][data-s="2"] .sd-finger { animation: sdTipp .35s ease; }
.sd-karte[data-spiel="geo"][data-s="2"] .geo-karte .ziel, .sd-karte[data-spiel="geo"].fertig .geo-karte .ziel { fill: var(--knew); }
.sd-karte[data-spiel="geo"][data-s="2"] .geo-karte { animation: sdPuls .9s ease; }
.sd-karte[data-spiel="geo"].fertig .sd-finger { opacity: 0; }

/* Flaggen */
.sd-flagge { height: 128px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, var(--card-bg)); }
.sd-flagge img { height: 108px; width: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18)); }
.sd-karte[data-spiel="flagge"][data-s="1"] .sd-opt[data-richtig] { transform: scale(.95); background: color-mix(in srgb, var(--text) 12%, var(--card-bg)); }
.sd-karte[data-spiel="flagge"][data-s="2"] .sd-opt[data-richtig], .sd-karte[data-spiel="flagge"].fertig .sd-opt[data-richtig] { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 15%, var(--card-bg)); }

/* Sortieren */
.sd-liste { position: relative; height: 212px; }
.sd-reihe { position: absolute; left: 0; right: 0; height: 46px; top: calc(var(--slot, 0) * 55px); display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, var(--card-bg)); border: 1.5px solid transparent; font-weight: 700; font-size: 15px; transition: top .6s cubic-bezier(.45, .05, .3, 1), box-shadow .3s, transform .3s, border-color .3s, background .3s; }
.sd-griff { color: var(--text-muted); font-size: 14px; }
.sd-name { flex: 1 1 auto; }
.sd-wert { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--knew) 75%, var(--text)); opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; font-variant-numeric: tabular-nums; }
.sd-karte[data-spiel="sort"][data-s="1"] .sd-reihe[data-heb="1"], .sd-karte[data-spiel="sort"][data-s="2"] .sd-reihe[data-heb="2"] { z-index: 2; transform: scale(1.03); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); background: var(--card-bg); border-color: var(--accent); }
.sd-karte[data-spiel="sort"][data-s="3"] .sd-knopf { transform: scale(.96); filter: brightness(1.1); }
.sd-karte[data-spiel="sort"].fertig .sd-reihe { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 10%, var(--card-bg)); }
.sd-karte[data-spiel="sort"].fertig .sd-wert { opacity: 1; transform: none; }
.sd-karte[data-spiel="sort"].fertig .sd-reihe:nth-child(2) .sd-wert { transition-delay: .08s; }
.sd-karte[data-spiel="sort"].fertig .sd-reihe:nth-child(3) .sd-wert { transition-delay: .16s; }
.sd-karte[data-spiel="sort"].fertig .sd-reihe:nth-child(4) .sd-wert { transition-delay: .24s; }
.sd-karte[data-spiel="sort"].fertig .sd-knopf, .sd-karte[data-spiel="schaetz"].fertig .sd-knopf { opacity: 0; height: 0; padding: 0; overflow: hidden; }

/* Schätzquiz: Tipp 300 m, richtig 330 m auf einer Skala bis 600 m. */
.sd-skala { position: relative; padding-top: 37px; margin: 18px 4px 0; --tipp: 25%; }
.sd-schiene { position: relative; height: 8px; border-radius: 999px; background: var(--track); }
.sd-spanne { position: absolute; top: 0; bottom: 0; left: 50%; width: 5%; border-radius: 999px; background: var(--knew); opacity: 0; transition: opacity .4s .3s; }
.sd-tipp { position: absolute; top: 0; left: var(--tipp); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: left 1.3s cubic-bezier(.45, .05, .3, 1); }
.sd-tipp b { height: 24px; padding: 0 9px; display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.sd-tipp::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--card-bg); border: 3px solid var(--accent); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); box-sizing: border-box; }
.sd-wahr { position: absolute; top: 29px; left: 55%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sd-wahr::before { content: ""; width: 3px; height: 24px; border-radius: 2px; background: var(--knew); }
.sd-wahr b { margin-top: 4px; font-size: 13px; color: color-mix(in srgb, var(--knew) 75%, var(--text)); white-space: nowrap; }
.sd-marken { display: flex; justify-content: space-between; margin-top: 40px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sd-karte[data-spiel="schaetz"] .sd-knopf { margin-top: 14px; }
.sd-karte[data-spiel="schaetz"]:not([data-s="0"]) .sd-skala { --tipp: 50%; }
.sd-karte[data-spiel="schaetz"][data-s="2"] .sd-tipp b, .sd-karte[data-spiel="schaetz"].fertig .sd-tipp b { opacity: 1; transform: none; }
.sd-karte[data-spiel="schaetz"][data-s="2"] .sd-knopf { transform: scale(.96); filter: brightness(1.1); }
.sd-karte[data-spiel="schaetz"].fertig .sd-wahr, .sd-karte[data-spiel="schaetz"].fertig .sd-spanne { opacity: 1; }

.sd-bild { height: 104px; display: grid; place-items: center; font-size: 64px; line-height: 1; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--card-bg)), color-mix(in srgb, var(--accent) 4%, var(--card-bg))); }
.sd-karte[data-spiel="schaetz"] .sd-skala { margin-top: 4px; }
.sd-turm { height: 84px; width: auto; fill: color-mix(in srgb, #8b6b4a 85%, var(--text)); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .15)); }

/* Klavier: eine Oktave C–C, gesucht ist F♯ (schwarze Taste zwischen F und G). */
.sd-note { text-align: center; font-size: 46px; font-weight: 800; line-height: 1; color: var(--accent); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), color .3s; }
.sd-tasten { position: relative; display: flex; height: 150px; margin-top: 6px; --fx0: 18%; --fy0: 92%; }
.sd-tasten .w { flex: 1 1 0; margin: 0 1.5px; border-radius: 0 0 8px 8px; background: #fbfbfa; border: 1px solid #d4d6db; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .05); }
.sd-tasten .s { position: absolute; top: 0; width: 8.5%; height: 60%; left: calc(var(--x) * 12.5% - 4.25%); border-radius: 0 0 6px 6px; background: linear-gradient(#2a2d33, #16181c); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); transition: background .25s; z-index: 2; }
.sd-karte[data-spiel="klavier"]:not([data-s="0"]) .sd-finger { left: 50%; top: 36%; }
.sd-karte[data-spiel="klavier"][data-s="2"] .sd-finger { animation: sdTipp .35s ease; }
.sd-karte[data-spiel="klavier"][data-s="2"] .s.ziel2, .sd-karte[data-spiel="klavier"].fertig .s.ziel2 { background: linear-gradient(color-mix(in srgb, var(--knew) 80%, #000), var(--knew)); }
.sd-karte[data-spiel="klavier"][data-s="2"] .sd-note, .sd-karte[data-spiel="klavier"].fertig .sd-note { color: var(--knew); transform: scale(1.12); }
.sd-karte[data-spiel="klavier"].fertig .sd-finger { opacity: 0; }

/* Quiz-Duell: du gegen Mia, live. */
.sd-duell-kopf { display: flex; justify-content: space-between; align-items: center; }
.sd-sp { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sd-sp i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; color: #fff; background: var(--accent); }
.sd-sp.mia i { background: var(--new); }
.sd-pkt { position: relative; font-style: normal; font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; min-width: 14px; text-align: center; }
.sd-pkt .neu { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); color: var(--knew); }
.sd-pkt .alt { display: inline-block; transition: opacity .2s, transform .3s; }
.sd-vs { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.sd-zeit { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; }
.sd-zeit span { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--knew), var(--accent)); transition: width 2.2s linear; }
.sd-mia-status { margin-top: auto; align-self: center; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s; }
.sd-mia-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--new); animation: sdBlink 1s ease-in-out infinite; }
@keyframes sdBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sd-karte[data-spiel="duell"]:not([data-s="0"]) .sd-zeit span { width: 38%; }
.sd-karte[data-spiel="duell"][data-s="1"] .sd-mia-status, .sd-karte[data-spiel="duell"][data-s="2"] .sd-mia-status { opacity: 1; }
.sd-karte[data-spiel="duell"][data-s="2"] .sd-opt[data-richtig] { transform: scale(.95); background: color-mix(in srgb, var(--text) 12%, var(--card-bg)); }
.sd-karte[data-spiel="duell"][data-s="3"] .sd-opt[data-richtig], .sd-karte[data-spiel="duell"].fertig .sd-opt[data-richtig] { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 15%, var(--card-bg)); }
.sd-karte[data-spiel="duell"][data-s="3"] .sd-opt.mia-wahl, .sd-karte[data-spiel="duell"].fertig .sd-opt.mia-wahl { border-color: color-mix(in srgb, #ef4444 70%, transparent); background: color-mix(in srgb, #ef4444 10%, var(--card-bg)); }
.sd-opt.mia-wahl::after { content: "M"; position: absolute; top: -8px; right: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--new); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sd-opt[data-richtig]::after { content: "A"; position: absolute; top: -8px; left: -6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sd-karte:not([data-spiel="duell"]) .sd-opt[data-richtig]::after { display: none; }
.sd-karte[data-spiel="duell"][data-s="3"] .sd-opt::after, .sd-karte[data-spiel="duell"].fertig .sd-opt::after { opacity: 1; transform: none; }
.sd-karte[data-spiel="duell"][data-s="3"] .sd-pkt .alt, .sd-karte[data-spiel="duell"].fertig .sd-pkt .alt { opacity: 0; transform: translateY(-10px); }
.sd-karte[data-spiel="duell"][data-s="3"] .sd-pkt .neu, .sd-karte[data-spiel="duell"].fertig .sd-pkt .neu { opacity: 1; transform: none; }

/* „Außerdem dabei" */
.sd-mehr { margin: 0 0 26px; }
.sd-mehr p { font-size: 14px; font-weight: 700; color: var(--text-muted); margin: 0 0 10px; }
.sd-mehr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sd-mehr li { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--track); }

@media (max-width: 860px) {
  .spiele-show { grid-template-columns: 1fr; gap: 14px; }
  .sd-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding: 4px 2px 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sd-tabs::-webkit-scrollbar { display: none; }
  .sd-tab { width: auto; flex: 0 0 auto; padding: 8px 14px 10px 10px; gap: 8px; border-radius: 999px; border-color: var(--track); background: var(--card-bg); scroll-snap-align: start; }
  .sd-tab.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .sd-tab-e { width: 28px; height: 28px; font-size: 17px; border-radius: 50%; }
  .sd-tab-sub { display: none; }
  .sd-tab-t b { font-size: 14px; white-space: nowrap; }
  .sd-tab-fort { left: 16px; right: 16px; bottom: 3px; }
  .sd-buehne { height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-karte, .sd-karte * { transition: none !important; animation: none !important; }
  .sd-tab-fort { display: none; }
}

/* ---------------------------------------------------------------------------
   Mitmach-Demo „Worum es geht" (26.09.): Kategorien links, Kartenstapel rechts.
   --------------------------------------------------------------------------- */
.themen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 44px; align-items: start; }
.probier { display: inline-flex; gap: 8px; align-items: flex-start; margin: 4px 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.themen li { padding: 0; background: none; border: 0; }
.thema { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--track); font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.thema:hover { border-color: var(--accent); }
.thema:active { transform: scale(.97); }
.thema.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.themen-demo { position: sticky; top: 24px; }
.td-stapel { position: relative; height: 520px; }
.td-hinten { position: absolute; inset: 0; border-radius: var(--radius); background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--track) 60%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); transform: translateY(-14px) scale(.94) rotate(1.5deg); opacity: .85; }
.td-hinten.zwei { transform: translateY(-26px) scale(.88) rotate(-1deg); opacity: .5; }
.td-karte {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  background: var(--card-bg); border-radius: var(--radius); padding: 18px 18px 14px;
  border: 1px solid color-mix(in srgb, var(--track) 60%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  transform: rotate(-1deg); transition: transform .26s cubic-bezier(.2, .7, .2, 1), opacity .26s ease;
}
.td-karte.raus { transform: translateX(110%) rotate(8deg); opacity: 0; }
.td-karte.rein { transform: translateY(-18px) scale(.95); opacity: 0; transition: none; }
.td-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.td-kat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-zahl { font-weight: 800; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--text); white-space: nowrap; }
.td-badge { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.td-badge.td-gesehen { background: color-mix(in srgb, var(--knew) 16%, transparent); color: color-mix(in srgb, var(--knew) 70%, var(--text)); }
.td-badge.td-auffr { background: color-mix(in srgb, var(--new) 16%, transparent); color: color-mix(in srgb, var(--new) 80%, var(--text)); }
/* Bild wächst in den freien Platz der Karte und wird immer GANZ gezeigt (contain);
   die weichgezeichnete Kopie dahinter füllt die Ränder. */
.td-bild { position: relative; flex: 1 1 150px; min-height: 130px; max-height: 240px; border-radius: 12px; overflow: hidden; background: var(--track); }
.td-bild img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.td-bild img.td-bild-hg { position: absolute; inset: 0; object-fit: cover; filter: blur(18px) saturate(1.2); transform: scale(1.25); opacity: .55; }
.td-credit { position: absolute; right: 6px; bottom: 5px; max-width: calc(100% - 12px); padding: 2px 6px; border-radius: 6px; font-size: 10px; line-height: 1.3; color: #fff; background: rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.td-frage { font-size: 18px; font-weight: 700; line-height: 1.3; }
.td-frage.klein { font-size: 16px; }
.td-unten { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.td-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.td-opt { padding: 12px 10px; border-radius: 12px; text-align: center; font: inherit; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--text); background: color-mix(in srgb, var(--text) 5%, var(--card-bg)); border: 1.5px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .12s; }
.td-opt:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.td-opt:not(:disabled):active { transform: scale(.97); }
.td-opt:disabled { cursor: default; }
.td-opt.richtig { border-color: var(--knew); background: color-mix(in srgb, var(--knew) 15%, var(--card-bg)); }
.td-opt.falsch { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--card-bg)); }
.td-rueck { font-size: 13px; line-height: 1.45; color: var(--text-muted); max-height: 58px; overflow: hidden; }
.td-rueck.gut b { color: color-mix(in srgb, var(--knew) 75%, var(--text)); }
.td-rueck.schlecht b { color: #dc2626; }
.td-knopf { display: flex; align-items: center; justify-content: center; border: 0; border-radius: 12px; padding: 13px 10px; font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: var(--accent); cursor: pointer; transition: transform .12s, filter .15s; }
.td-knopf:hover { filter: brightness(1.06); }
.td-knopf:active { transform: scale(.97); }
.td-knopf.td-zweit { background: color-mix(in srgb, var(--text) 8%, var(--card-bg)); color: var(--text); }
.td-loesung { text-align: center; font-weight: 800; font-size: 19px; color: var(--accent); }
.td-info { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); text-align: center; max-height: 58px; overflow: hidden; }
.td-bewerten, .td-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.td-ja { background: var(--knew); }
.td-nein { background: var(--new); }
.td-balken { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; flex: 0 0 auto; }
.td-balken span { display: block; height: 100%; border-radius: 999px; background: var(--knew); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.td-leer { margin: auto; color: var(--text-muted); font-size: 14px; text-align: center; padding: 0 20px; }
.td-fertig { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.td-fertig-t { font-size: 22px; font-weight: 800; }
.td-fertig-s { margin: 0 0 8px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.td-fuss { margin: 14px 4px 0; font-size: 12px; color: var(--text-muted); text-align: center; }
@media (max-width: 900px) {
  .themen-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .themen-text { min-width: 0; }
  .themen-demo { position: static; max-width: 420px; width: 100%; margin: 0 auto; }
  .themen { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .themen::-webkit-scrollbar { display: none; }
  .themen li { flex: 0 0 auto; }
  .td-stapel { height: 510px; margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .td-karte, .td-balken span { transition: none; } }