/* ═══════════════════════════════════════════════════════════════
   PEYVÊN BILIND — Website-Designsystem
   Dieselbe Designsprache wie die App: dunkler Nachthimmel,
   warmes Gold, Violett, Teal, Glasflächen. Ruhig und edel.
   ═══════════════════════════════════════════════════════════════ */

/* Die Werte spiegeln 1:1 lib/design/pb_design.dart (_pbDark/_pbLight,
   PBRadii, PBShadows). Wer dort etwas ändert, ändert es auch hier —
   App und Website sollen sich wie ein Produkt anfühlen. */
:root {
  --bg-top: #120b22;
  --bg-mid: #1b1338;
  --bg-bottom: #241a46;

  --gold: #ffc857;
  --gold-deep: #e9a93e;
  --gold-soft: #ffe3a3;

  --violet: #7c5cff;
  --violet-deep: #5a3be0;
  --violet-soft: #b6a2ff;

  --teal: #2bd9a6;
  --teal-soft: #8cf0d6;
  --red: #ff6b6b;

  /* Dunkle Tinte für Text AUF Gold/Akzentflächen (PBColors.onAccent). */
  --on-accent: #1b1338;

  --text: #ffffff;
  --text-2: #cbc4e6;
  --text-3: #8d86ac;

  /* Karten sind in der App FLÄCHEN, kein durchscheinendes Glas
     (PBGlassCard nutzt glassSolid — der echte BackdropFilter wurde
     dort wegen der GPU-Kosten bewusst entfernt). Die Website macht es
     jetzt genauso: ruhiger, kontrastreicher, deutlich besser lesbar. */
  --surface: #2a2246;
  --surface-strong: #332b50;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.25);

  /* PBRadii */
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius: 22px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --radius-pill: 99px;

  --maxw: 1120px;

  --font:
    "Avenir Next", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;

  /* Karten-Tiefe: im Dunkeln bewusst KEIN Schatten (wie PBShadows.elevation),
     die Fläche trägt sich selbst. */
  --elevation: none;
  --elevation-hover: none;
}

/* ── Lichttheme (spiegelt lib/design/pb_design.dart _pbLight) ───
   Mehrschichtiges Lavendel statt flachem Weiß, dunkle Tinte statt
   Weiß als Text. Gold/Violett/Teal bleiben als Markenfamilie
   unverändert. */
:root[data-theme="light"] {
  --bg-top: #f6f1ff;
  --bg-mid: #e8dcfa;
  --bg-bottom: #d6c6f1;

  --text: #1b1436;
  --text-2: #574e77;
  --text-3: #8b84a8;

  --surface: #fefdff;
  --surface-strong: #f5f1fd;
  --glass: rgba(42, 30, 94, 0.047);
  --glass-strong: rgba(42, 30, 94, 0.086);
  --border: rgba(42, 30, 94, 0.12);
  --border-strong: rgba(53, 42, 106, 0.22);

  --gold-text-on-bg: #8a5a00;

  /* Zarte, violett getönte Doppelschattierung — die „schwebenden"
     Karten des Hellmodus der App. */
  --elevation:
    0 18px 32px rgba(124, 92, 255, 0.14),
    0 5px 10px rgba(124, 92, 255, 0.07);
  --elevation-hover:
    0 26px 46px rgba(124, 92, 255, 0.2),
    0 8px 16px rgba(124, 92, 255, 0.1);
}

:root[data-theme="light"] .gold-text {
  background: linear-gradient(135deg, var(--gold-deep), #8a5a00);
  -webkit-background-clip: text;
  background-clip: text;
}

:root[data-theme="light"] .pb-header {
  background: rgba(246, 241, 255, 0.78);
}

:root[data-theme="light"] .nav.open {
  background: rgba(246, 241, 255, 0.97);
}

/* Fallback für Erstbesucher ohne JS/gespeicherte Wahl. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg-top: #f6f1ff;
    --bg-mid: #e8dcfa;
    --bg-bottom: #d6c6f1;
    --text: #1b1436;
    --text-2: #574e77;
    --text-3: #8b84a8;
    --surface: #fefdff;
    --surface-strong: #f5f1fd;
    --glass: rgba(42, 30, 94, 0.047);
    --glass-strong: rgba(42, 30, 94, 0.086);
    --border: rgba(42, 30, 94, 0.12);
    --border-strong: rgba(53, 42, 106, 0.22);
    --elevation:
      0 18px 32px rgba(124, 92, 255, 0.14),
      0 5px 10px rgba(124, 92, 255, 0.07);
    --elevation-hover:
      0 26px 46px rgba(124, 92, 255, 0.2),
      0 8px 16px rgba(124, 92, 255, 0.1);
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(
    180deg,
    var(--bg-top) 0%,
    var(--bg-mid) 55%,
    var(--bg-bottom) 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Sanfte Leuchtflecken im Hintergrund — echte Elemente (nicht ::before/
   ::after), damit motion.js sie per GSAP/ScrollTrigger butterweich
   parallaxen kann (Pseudoelemente sind für GSAP nicht ansteuerbar).
   Werden von pb.js einmalig in den body injiziert. */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  transition: background-color 0.3s ease;
}
.bg-blob-1 {
  width: 480px;
  height: 480px;
  background: var(--violet);
  top: -140px;
  right: -120px;
}
.bg-blob-2 {
  width: 420px;
  height: 420px;
  background: var(--gold);
  bottom: -160px;
  left: -140px;
  opacity: 0.08;
}

/* ── Scroll-Fortschrittsbalken ────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  z-index: 60;
  pointer-events: none;
}

/* ── Video-Modal ──────────────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(9, 5, 20, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.video-modal.open {
  display: flex;
}
.video-modal .video-modal-inner {
  position: relative;
  width: min(880px, 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}
.video-modal video {
  display: block;
  width: 100%;
  max-height: 82vh;
  background: #000;
}
.video-modal .video-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 11, 34, 0.72);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s, transform 0.2s;
}
.video-modal .video-modal-close:hover {
  background: rgba(18, 11, 34, 0.92);
  transform: scale(1.06);
}

/* Play-Symbol auf klickbaren Episoden-Vorschaubildern */
.ep-card[data-video],
.ep-card.reveal[data-video] {
  cursor: pointer;
}
.ep-video-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.ep-card:hover .ep-video-hint {
  opacity: 1;
}
.ep-video-hint span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(18, 11, 34, 0.68);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
}

main {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
}

a {
  color: var(--gold);
  text-decoration: none;
}
/* Im Hellmodus ist helles Gold als Linkfarbe auf dem Lavendelgrund zu
   schwach — dieselbe dunkle Bernsteinfarbe wie in der App verwenden. */
:root[data-theme="light"] a {
  color: var(--gold-text-on-bg);
}

/* Ist eine ganze Karte ein Link (Episodenkacheln auf der Startseite),
   darf die Linkfarbe NICHT den gesamten Karteninhalt einfärben —
   Überschrift und Fließtext behalten ihre normale Farbe. */
a.card,
a.card h1,
a.card h2,
a.card h3,
a.card p {
  color: var(--text);
}
a.card p.muted {
  color: var(--text-3);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* ── Header ───────────────────────────────────────────────────── */
.pb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: rgba(18, 11, 34, 0.72);
  border-bottom: 1px solid var(--border);
}

.pb-header .bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.2px;
}
.brand img {
  width: 30px;
  height: 30px;
}

.nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav a {
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 12px;
  transition:
    color 0.2s,
    background 0.2s;
}
.nav a:hover {
  color: var(--text);
  background: var(--glass);
}
.nav a.active {
  color: var(--gold);
  background: rgba(255, 200, 87, 0.1);
}
.nav a.cta {
  color: #1b1338;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  font-weight: 800;
  margin-inline-start: 6px;
}
.nav a.cta:hover {
  filter: brightness(1.06);
}

.burger {
  display: none;
  margin-inline-start: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 1.1rem;
  cursor: pointer;
}

/* ── Theme-/Sprachumschalter ──────────────────────────────────── */
.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
.tool-btn {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.tool-btn:hover {
  background: var(--glass-strong);
  border-color: var(--border-strong);
}
.tool-btn:active {
  transform: scale(0.94);
}
.lang-switch {
  position: relative;
}
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 140px;
  background: rgba(18, 11, 34, 0.97);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  z-index: 70;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] .lang-menu {
  background: rgba(246, 241, 255, 0.98);
}
.lang-menu.open {
  display: block;
}
.lang-option {
  display: block;
  width: 100%;
  text-align: start;
  background: none;
  border: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.lang-option:hover {
  background: var(--glass);
  color: var(--text);
}
.lang-option.active {
  color: var(--gold);
  background: rgba(255, 200, 87, 0.1);
}

@media (max-width: 900px) {
  .tool-group {
    margin-inline-start: 0;
    order: 2;
  }
  .burger {
    margin-inline-start: 8px;
    order: 3;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────
   Angelehnt an PBPrimaryButton: Gold-Verlauf, dunkle Tinte, Radius 18,
   warmes Glühen darunter. Dazu ein Licht-Sweep beim Überfahren und ein
   sichtbarer Fokusring für die Tastaturbedienung. */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  font-size: 0.96rem;
  letter-spacing: 0.3px;
  line-height: 1;
  padding: 15px 18px 15px 26px;
  border-radius: var(--radius-md);
  transition:
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.24s ease,
    border-color 0.2s ease,
    background 0.18s;
}

/* Schmaler Lichtstreifen, der beim Überfahren einmal durchwandert. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.42) 48%,
    transparent 76%
  );
  transform: translateX(-120%);
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn:hover::after {
  transform: translateX(120%);
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.12s;
}
.btn:focus-visible {
  outline: 2px solid var(--violet-soft);
  outline-offset: 3px;
}
.btn[disabled],
.btn.is-loading {
  cursor: not-allowed;
}

/* "Button-in-Button": kreisförmiges Pfeil-Badge statt eines nackten
   Pfeilzeichens neben dem Text — federt beim Hover leicht diagonal. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(27, 19, 56, 0.16);
  flex: none;
  font-size: 0.9em;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-ghost .btn-icon {
  background: var(--glass-strong);
}
.btn:hover .btn-icon {
  transform: translate(2px, -2px) scale(1.08);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--on-accent);
  box-shadow: 0 10px 26px rgba(255, 200, 87, 0.34);
}
.btn-gold:hover {
  box-shadow: 0 16px 34px rgba(255, 200, 87, 0.42);
}

/* Zweite Stufe für violette Aktionen (z. B. Training starten). */
.btn-violet {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  box-shadow: 0 10px 26px rgba(124, 92, 255, 0.4);
}
.btn-violet .btn-icon {
  background: rgba(255, 255, 255, 0.2);
}
.btn-violet:hover {
  box-shadow: 0 16px 34px rgba(124, 92, 255, 0.48);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--elevation);
}
.btn-ghost:hover {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}
/* Auf dem Ghost-Button wäre ein weißer Sweep im Hellmodus unsichtbar
   und im Dunkeln zu grell — er bekommt einen dezenteren. */
.btn-ghost::after {
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(124, 92, 255, 0.14) 48%,
    transparent 76%
  );
}

/* Textknopf ohne Fläche — für nachgeordnete Aktionen. */
.btn-quiet {
  background: none;
  color: var(--text-2);
  padding: 12px 14px;
  box-shadow: none;
}
.btn-quiet::after {
  display: none;
}
.btn-quiet:hover {
  color: var(--text);
  background: var(--glass);
}

.btn-sm {
  font-size: 0.86rem;
  padding: 10px 14px 10px 18px;
  border-radius: var(--radius-sm);
}
.btn-sm .btn-icon {
  width: 21px;
  height: 21px;
}
.btn-block {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-icon {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
  .btn::after {
    display: none;
  }
}

/* ── Karten ───────────────────────────────────────────────────────
   Entspricht PBGlassCard: eine ruhige Fläche mit feiner Kante und
   — nur im Hellmodus — weicher, violett getönter Tiefe. Kein
   backdrop-filter mehr: auf dem fast einfarbigen Grund war er kaum
   sichtbar, kostete aber pro Karte einen Compositing-Durchgang und
   ließ das Scrollen auf schwächeren Geräten ruckeln. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--elevation);
  transition:
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}
.card-strong {
  background: var(--surface-strong);
}
.card-glow-gold {
  box-shadow: var(--elevation), 0 18px 60px rgba(255, 200, 87, 0.12);
}
.card-glow-violet {
  box-shadow: var(--elevation), 0 18px 60px rgba(124, 92, 255, 0.16);
}

/* Hover nur auf Karten, die auch klickbar/hervorhebbar sind
   (Feature- und Episoden-Karten) — Formulare/Statistik-Kacheln
   bleiben ruhig. */
.card.feature:hover,
.card.ep-card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  background: var(--surface-strong);
}
.card.feature:hover {
  box-shadow: var(--elevation-hover), 0 22px 50px rgba(124, 92, 255, 0.18);
}
.card.ep-card:hover {
  box-shadow: var(--elevation-hover), 0 22px 50px rgba(255, 200, 87, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  .card.feature:hover,
  .card.ep-card:hover {
    transform: none;
  }
}

/* ── Typografie ───────────────────────────────────────────────────
   Magazin-Rhythmus wie PBType: sehr fette, eng gesetzte Schlagzeilen
   (negative Laufweite) gegen ruhigen, etwas weiteren Fließtext. Genau
   dieser Kontrast lässt eine Seite hochwertig statt beliebig wirken. */
h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -1.4px;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.8px;
  text-wrap: balance;
}
h3 {
  font-size: 1.1rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.lead {
  color: var(--text-2);
  font-size: 1.06rem;
  line-height: 1.65;
  font-weight: 500;
  max-width: 62ch;
  text-wrap: pretty;
}
.muted {
  color: var(--text-3);
}
.gold-text {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Weit gesperrter Großbuchstaben-Vorspann (PBType.kicker). */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-3);
}

/* Sichtbarer Fokus für alles Bedienbare — ohne das ist eine Seite
   mit der Tastatur nicht benutzbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--violet-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Redaktioneller Abschnitts-Kicker ─────────────────────────────
   Punkt + Kicker-Label + auslaufende Linie, angelehnt an das
   PBEditorialLabel-Muster der App (lib/design/pb_design.dart) — gibt
   Abschnitten eine "Magazin"-Struktur statt einer nackten Überschrift. */
.kicker-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.kicker-line .eyebrow {
  margin: 0;
  white-space: nowrap;
}
.kicker-line .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--gold);
  box-shadow: 0 0 10px 1px rgba(255, 200, 87, 0.55);
}
.kicker-line .dot-violet {
  background: var(--violet);
  box-shadow: 0 0 10px 1px rgba(124, 92, 255, 0.55);
}
.kicker-line .dot-teal {
  background: var(--teal);
  box-shadow: 0 0 10px 1px rgba(43, 217, 166, 0.55);
}
.kicker-line .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}
[dir="rtl"] .kicker-line .line {
  background: linear-gradient(270deg, var(--border-strong), transparent);
}

/* ── Abschnitte ───────────────────────────────────────────────── */
.section {
  padding: 84px 0;
}
.section-tight {
  padding: 52px 0;
}
.section-head {
  margin-bottom: 38px;
}
.section-head p {
  margin-top: 10px;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  padding: 96px 0 72px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.hero .sun {
  width: 58px;
  margin-bottom: 22px;
}
.hero .actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-figure {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-figure img.char {
  width: min(320px, 70vw);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
  /* Deutlich engerer, allseitiger Verlauf — kaschiert den warmen
     Studio-Hintergrund, der fest in der Bilddatei steckt (nur die
     äußersten Bildränder sind transparent, unmittelbar um die Figur
     liegt ein beiger Verlauf, der besonders im Dunkelmodus als
     sichtbar kastiger Rand auffiel). Opaker Kern bewusst klein, damit
     der Verlauf lange vor dem Bildrand vollständig ausgeblendet ist. */
  mask-image: radial-gradient(ellipse 52% 60% at 50% 40%, #000 28%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 40%, #000 28%, transparent 84%);
}
.hero-figure::before,
.hero-figure::after {
  content: "";
  position: absolute;
  inset: 10% 12%;
  filter: blur(30px);
}
.hero-figure::before {
  background: radial-gradient(
    circle,
    rgba(255, 200, 87, 0.22),
    transparent 65%
  );
}
/* Zweiter, wärmerer Schein-Layer, der den warmen Hautton der Figur
   aufgreift — der Übergang zum Seitenhintergrund wirkt dadurch wie ein
   beabsichtigter Schein statt einer harten Bildkante. */
.hero-figure::after {
  inset: 16% 18%;
  background: radial-gradient(
    circle,
    rgba(255, 176, 120, 0.18),
    transparent 70%
  );
  filter: blur(42px);
}

/* Schwebende Held-Figur — dauerhafte, sehr sanfte Auf-/Ab-Bewegung auf
   einem Wrapper (getrennt vom Element, das GSAP für Eintritts-/Hover-
   Bounce animiert, damit sich beide Transform-Animationen nicht in die
   Quere kommen). */
.hero-float {
  animation: heroFloat 4.6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}
#hero-char {
  display: block;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .hero-float {
    animation: none;
  }
}

/* ── Raster ───────────────────────────────────────────────────── */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.feature .icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.25rem;
  margin-bottom: 14px;
}
.icon-gold {
  background: rgba(255, 200, 87, 0.14);
}
.icon-violet {
  background: rgba(124, 92, 255, 0.16);
}
.icon-teal {
  background: rgba(43, 217, 166, 0.14);
}
.feature p {
  color: var(--text-2);
  font-size: 0.95rem;
  margin-top: 6px;
}

/* ── Episoden-Karten ──────────────────────────────────────────── */
.ep-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.ep-card .ep-top {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 22px 0;
}
.ep-card .num {
  font-size: 2.6rem;
  font-weight: 800;
  opacity: 0.25;
  line-height: 1;
}
.ep-card img.char {
  width: 92px;
  mask-image: radial-gradient(ellipse 54% 62% at 50% 38%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 54% 62% at 50% 38%, #000 30%, transparent 82%);
}

/* Platzhalter für Episoden ohne eigene Illustration (noch keine
   Charakterbilder vorhanden) — dezenter Glasring + Farbschein statt
   flacher Box, damit es wie ein bewusstes Symbol wirkt statt wie ein
   fehlendes Bild. */
.ep-placeholder {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  background: linear-gradient(150deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18);
}
.ep-placeholder::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  z-index: -1;
  filter: blur(16px);
  opacity: 0.55;
}
.ep-placeholder-gold::before {
  background: radial-gradient(circle, rgba(255, 200, 87, 0.4), transparent 70%);
}
.ep-placeholder-violet::before {
  background: radial-gradient(circle, rgba(124, 92, 255, 0.4), transparent 70%);
}
.ep-placeholder-teal::before {
  background: radial-gradient(circle, rgba(43, 217, 166, 0.4), transparent 70%);
}
.ep-card .ep-body {
  padding: 10px 22px 22px;
}
.ep-card .tags {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.tag-gold {
  color: var(--gold);
  border-color: rgba(255, 200, 87, 0.4);
  background: rgba(255, 200, 87, 0.08);
}
/* Helles Gold auf fast weißer Karte wäre praktisch unlesbar (etwa 1,6:1).
   Im Hellmodus deshalb dasselbe dunkle Bernstein wie PBColors.goldText. */
:root[data-theme="light"] .tag-gold {
  color: var(--gold-text-on-bg);
  border-color: rgba(233, 169, 62, 0.5);
  background: rgba(255, 200, 87, 0.16);
}
.tag-teal {
  color: var(--teal);
  border-color: rgba(43, 217, 166, 0.4);
  background: rgba(43, 217, 166, 0.08);
}
:root[data-theme="light"] .tag-teal {
  color: #0e7a5c;
  border-color: rgba(23, 169, 126, 0.5);
  background: rgba(43, 217, 166, 0.14);
}

/* ── Formulare ────────────────────────────────────────────────── */
.auth-wrap {
  max-width: 440px;
  margin: 64px auto;
}
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 7px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.09);
}
.field.has-error input {
  border-color: var(--red);
}
.field-hint {
  display: none;
  color: #ff9b9b;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 6px;
}
.field.has-error .field-hint {
  display: block;
}
.field-password {
  position: relative;
}
.field-password input {
  padding-inline-end: 46px;
}
.field-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 4px;
  width: 38px;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s;
}
.field-toggle:hover {
  color: var(--text);
}

/* ── Sterne-Bewertung ─────────────────────────────────────────── */
.star-rating {
  display: flex;
  gap: 6px;
}
.star-rating button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--border-strong);
  transition: color 0.15s, transform 0.15s;
  line-height: 1;
  padding: 2px;
}
.star-rating button:hover {
  transform: scale(1.12);
}
.star-rating button.on {
  color: var(--gold);
}
.field select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
}
[dir="rtl"] .field select {
  background-position: 20px center, 15px center;
}

/* ── Ladezustand auf Buttons ──────────────────────────────────── */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn.is-loading .btn-spinner {
  display: inline-block;
}
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(27, 19, 56, 0.25);
  border-top-color: #1b1338;
  animation: btnSpin 0.7s linear infinite;
}
@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation: none;
  }
}
.form-error {
  display: none;
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: #ffb0b0;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 13px;
  padding: 11px 14px;
  margin-bottom: 16px;
}
.form-error.show {
  display: block;
}
.form-ok {
  display: none;
  background: rgba(43, 217, 166, 0.1);
  border: 1px solid rgba(43, 217, 166, 0.4);
  color: #8cf0d6;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 13px;
  padding: 11px 14px;
  margin-bottom: 16px;
}
.form-ok.show {
  display: block;
}

/* ── Dashboard (Lernen) ───────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0;
}
.stat-row-2 {
  grid-template-columns: repeat(2, 1fr);
}
.stat {
  text-align: center;
  padding: 22px 14px;
}
.stat .val {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.stat .lbl {
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-top: 5px;
}
.progress-track {
  height: 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
  margin-top: 12px;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ep-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.ep-progress .dot {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: var(--glass-strong);
}
.ep-progress .done {
  color: var(--teal);
  font-weight: 800;
  font-size: 0.85rem;
}

/* ── Charakterbild-Rahmen (assets/img/characters/*) ─────────────
   Gleiche Masken-/Schein-Behandlung wie die Hero-Figur, in einem
   eigenständigen wiederverwendbaren Rahmen für Feature-Sektionen. */
.char-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.char-frame::before,
.char-frame::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  filter: blur(28px);
  z-index: 0;
}
.char-frame::before {
  background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 68%);
}
.char-frame::after {
  inset: 14%;
  background: radial-gradient(circle, rgba(255, 176, 120, 0.16), transparent 70%);
  filter: blur(36px);
}
.char-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 260px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.25));
  mask-image: radial-gradient(ellipse 54% 62% at 50% 40%, #000 30%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 54% 62% at 50% 40%, #000 30%, transparent 84%);
}

/* ── Lernkreislauf-Schritte ("So funktioniert's") ────────────────── */
.how-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.step-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.step-num {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.88rem;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #1b1338;
  box-shadow: 0 8px 18px rgba(255, 200, 87, 0.25);
}
.step-item h3 {
  font-size: 1rem;
}
.step-item p {
  color: var(--text-2);
  font-size: 0.9rem;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .how-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .char-frame img {
    max-width: 200px;
  }
  .step-item {
    text-align: start;
  }
}

/* ── Fortschritts-Ring (Level-Ring, wiederverwendbar) ────────────── */
.pb-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  flex: none;
}
.pb-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pb-ring circle {
  fill: none;
  stroke-width: 9;
}
.pb-ring .ring-track {
  stroke: var(--glass-strong);
}
.pb-ring .ring-progress {
  stroke: var(--gold);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-ring .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}
.pb-ring .ring-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.pb-ring .ring-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
}
.pb-ring.ring-sm {
  width: 68px;
  height: 68px;
}
.pb-ring.ring-sm .ring-value {
  font-size: 0.92rem;
}
.pb-ring.ring-sm circle {
  stroke-width: 7;
}
.pb-ring.ring-earned .ring-progress {
  stroke: var(--teal);
}

/* ── Fortschritt-Teaser (Startseite) ──────────────────────────────── */
.progress-teaser {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 34px 32px;
}
.progress-teaser .pills {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .progress-teaser {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .progress-teaser .pills {
    justify-content: center;
  }
}

/* ── 7-Tage-Aktivitätsstreifen ────────────────────────────────────── */
.activity-strip {
  display: flex;
  gap: 6px;
}
.activity-strip .day {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  background: var(--glass);
  border: 1px solid var(--border);
}
.activity-strip .day.active {
  background: linear-gradient(180deg, var(--teal), #17a97e);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(43, 217, 166, 0.25);
}

/* ── Rechtstexte ──────────────────────────────────────────────── */
.legal {
  max-width: 780px;
  margin: 56px auto;
}
.legal h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}
.legal h2 {
  font-size: 1.15rem;
  margin: 34px 0 10px;
  color: var(--gold-soft);
}
.legal p,
.legal li {
  color: var(--text-2);
  font-size: 0.96rem;
}
.legal ul {
  padding-inline-start: 22px;
  margin: 8px 0;
}
.legal .card {
  margin-top: 26px;
}

/* ── Entwickler ───────────────────────────────────────────────── */
.dev-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 32px;
}
.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 16px 50px rgba(255, 200, 87, 0.3);
}
.avatar .inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold-soft);
  overflow: hidden;
}
.avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.dev-card .role {
  color: var(--gold-soft);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin: 6px 0 18px;
}
.dev-card .text {
  max-width: 640px;
  color: var(--text-2);
}

.ribbon {
  width: 190px;
  display: block;
  margin: 18px auto;
}

/* ── Footer ───────────────────────────────────────────────────── */
.pb-footer {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 44px 0 36px;
  position: relative;
  z-index: 1;
}
.pb-footer .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}
.pb-footer h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.pb-footer a {
  display: block;
  color: var(--text-2);
  font-size: 0.92rem;
  padding: 4px 0;
}
.pb-footer a:hover {
  color: var(--gold);
}
.pb-footer .fine {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Store-Badges ("Bald verfügbar") ──────────────────────────── */
.store-badges {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
}
.store-badge-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex: none;
}

/* ── Einblendungen ──────────────────────────────────────────────
   Bewusst an `.js` gekoppelt: Inhalte werden NUR versteckt, wenn
   JavaScript tatsächlich läuft und sie auch wieder einblenden kann.
   Ohne JS (deaktiviert, Skript blockiert, CDN nicht erreichbar) ist
   die Seite sofort vollständig lesbar statt leer. */
/* Spiegelt exakt die Bewegungssprache der App (PBEntrance + PBCinematicReveal):
   sanftes Auftauchen + Aufsteigen um 16px + dezenter Scale 0.99 → 1,
   Dauer 520ms, Curves.easeOutCubic = cubic-bezier(0.33, 1, 0.68, 1). */
.js .reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  transition:
    opacity 0.52s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.52s cubic-bezier(0.33, 1, 0.68, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Sofort sichtbar, ohne Überblendung — wird gesetzt, wenn die Seite in
   einem Hintergrund-Tab geladen wurde (dort drosselt der Browser
   Animationen, die Einblendung würde minutenlang „kleben"). */
.js .reveal.reveal-instant {
  transition: none;
}

/* Gestaffelte Einblendung — z. B. für die Hero-Reihenfolge
   (Sonne → Titel → Text → Buttons) statt eines gleichzeitigen Fades. */
/* Staffelung wie PBEntrance.stagger (stepMs: 70). */
.reveal.in.d1 {
  transition-delay: 0.07s;
}
.reveal.in.d2 {
  transition-delay: 0.14s;
}
.reveal.in.d3 {
  transition-delay: 0.21s;
}
.reveal.in.d4 {
  transition-delay: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Responsiv ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 56px;
    text-align: center;
  }
  .hero .sun {
    margin: 0 auto 22px;
  }
  .hero .actions {
    justify-content: center;
  }
  .hero-figure {
    order: -1;
  }
  .hero-figure img.char {
    width: min(230px, 56vw);
  }
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .pb-footer .cols {
    grid-template-columns: 1fr;
  }

  .burger {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(18, 11, 34, 0.97);
    border-bottom: 1px solid var(--border);
    padding: 12px 22px 18px;
    gap: 2px;
  }
  .nav.open {
    display: flex;
  }
  .nav a {
    padding: 12px 14px;
  }
  .nav a.cta {
    margin-inline-start: 0;
    margin-top: 8px;
    text-align: center;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LERNBEREICH IM WEB (episode.html)
   Schauen · Wörter · Training — dieselbe Lernstrecke wie in der App.
   ═══════════════════════════════════════════════════════════════ */

.learn-empty {
  text-align: center;
  padding: 90px 0;
}

.ep-hero {
  margin-bottom: 26px;
}
.ep-hero .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Etappen (Lernweg) ────────────────────────────────────────── */
.learn-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.learn-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.learn-step:hover {
  color: var(--text);
  background: var(--glass);
}
.learn-step.is-active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 8px 20px rgba(255, 200, 87, 0.3);
}
.learn-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--glass-strong);
  font-size: 0.78rem;
  flex: none;
}
.learn-step.is-active .learn-step-num {
  background: rgba(27, 19, 56, 0.18);
}
@media (max-width: 620px) {
  .learn-step-label {
    display: none;
  }
}

/* ── Dialogskript ─────────────────────────────────────────────── */
.script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.script-list {
  list-style: none;
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.script-line {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border-inline-start: 3px solid var(--teal);
}
.script-line.is-primary {
  border-inline-start-color: var(--violet);
}
.script-speaker {
  font-weight: 900;
  font-size: 0.84rem;
  color: var(--teal);
}
.script-line.is-primary .script-speaker {
  color: var(--violet-soft);
}
:root[data-theme="light"] .script-speaker {
  color: #0e7a5c;
}
:root[data-theme="light"] .script-line.is-primary .script-speaker {
  color: var(--violet-deep);
}
.script-text {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ── Wortkarten ───────────────────────────────────────────────── */
.word-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.word-card {
  padding: 22px;
}
.word-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.word-kurdish {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.4px;
}
.word-meaning {
  color: var(--text-2);
  font-size: 0.96rem;
  margin-top: 3px;
}
.word-sentence {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--glass);
}
.word-sentence-ku {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
}
.word-sentence-tr {
  font-size: 0.88rem;
  margin-top: 4px;
}
.word-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Kleiner runder Lautsprecher neben Wort und Satz. */
.sound-btn {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-2);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.sound-btn:hover {
  background: var(--glass-strong);
  border-color: var(--border-strong);
  transform: scale(1.08);
}
.sound-btn:active {
  transform: scale(0.94);
}

/* Umschaltbare Marker („gespeichert", „schwierig"). */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.chip-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.chip-btn.is-on {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-color: transparent;
}
.chip-btn-violet.is-on {
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
}

/* ── Training ─────────────────────────────────────────────────── */
.training-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.training-progress {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: var(--glass);
  border: 1px solid var(--border);
  overflow: hidden;
}
.training-progress span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.exercise {
  margin-top: 20px;
}
.exercise-prompt {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 1.05rem;
  line-height: 1.6;
}
/* Bewusst KEIN Flex-Container: Der hervorgehobene Ausdruck (<mark>) wäre
   sonst ein eigenes Flex-Element und bekäme eine eigene Zeile, statt
   mitten im Satz zu stehen. Der Lautsprecher hängt sich stattdessen als
   normales Inline-Element hinten an. */
.exercise-prompt p {
  display: block;
}
.exercise-prompt p .sound-btn {
  vertical-align: middle;
  margin-inline-start: 8px;
}
.exercise-prompt.claim {
  font-size: 1.1rem;
}
.word-mark {
  background: rgba(255, 200, 87, 0.24);
  color: inherit;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 900;
  /* Der Ausdruck soll als Einheit umbrechen, nicht mitten im Wort. */
  white-space: nowrap;
}
:root[data-theme="light"] .word-mark {
  background: rgba(233, 169, 62, 0.3);
}
.exercise-question {
  margin-top: 16px;
  font-size: 1rem;
  color: var(--text-2);
}

.option-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.option-list-inline {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  .option-list-inline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}

.option {
  text-align: start;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.option:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-strong);
  transform: translateY(-2px);
}
.option:disabled {
  cursor: default;
  opacity: 0.72;
}
.option.is-right {
  border-color: var(--teal);
  background: rgba(43, 217, 166, 0.16);
  color: var(--text);
  opacity: 1;
}
.option.is-wrong {
  border-color: var(--red);
  background: rgba(255, 107, 107, 0.16);
  opacity: 1;
}
.option.is-picked {
  border-color: var(--gold);
  background: rgba(255, 200, 87, 0.16);
}

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.match-col {
  display: grid;
  gap: 10px;
  align-content: start;
}
.match-item {
  font-size: 0.92rem;
  padding: 12px 14px;
}

.scramble-slot {
  margin-top: 16px;
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--glass);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 2px;
}
.scramble-slot.is-right {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(43, 217, 166, 0.14);
}
.scramble-slot.is-wrong {
  border-style: solid;
  border-color: var(--red);
  background: rgba(255, 107, 107, 0.14);
}
.option-tile {
  min-width: 48px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  padding: 12px 14px;
}

.exercise-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Kurmancî-Sonderzeichen für das Schreibtraining. */
.kurdish-keys {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: -6px;
}
.key-btn {
  min-width: 40px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.16s, transform 0.16s;
}
.key-btn:hover {
  background: var(--glass-strong);
}
.key-btn:active {
  transform: scale(0.93);
}

#writing-input.is-right {
  border-color: var(--teal);
}
#writing-input.is-wrong {
  border-color: var(--red);
}

.feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--glass);
}
.feedback.is-right {
  border-color: rgba(43, 217, 166, 0.5);
  background: rgba(43, 217, 166, 0.12);
}
.feedback.is-wrong {
  border-color: rgba(255, 107, 107, 0.5);
  background: rgba(255, 107, 107, 0.12);
}

/* Hinweis für Gäste, dass ohne Konto nichts gespeichert wird. */
.guest-hint {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.guest-hint.in {
  opacity: 1;
  transform: none;
}