/* ============================================================
   BA-Thesis Befragungs-Webseite
   Liquid Glass + Form-/Skalen-Elemente
   Baut auf Stimulus-Set-Stylesheet auf, ergänzt um:
   - Progress-Bar
   - Panels & Step-Containers
   - Likert/SAM-Skalen-Buttons
   - Block-Auswahl-Karten
   - Form-Felder, Radio-Groups
   - Toast/Spinner
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ─── HINTERGRUND-TÖNE: gebrochenes Weiß bis warmes Sand ─── */
  --bg-cream:        #FBF8F3;  /* Haupthintergrund: ganz leicht warm */
  --bg-paper:        #F5F0E8;  /* Sekundärflächen */
  --bg-amber:        #EFE5D4;  /* Akzent-Hintergrund */
  --bg-sage:         #DDE0D5;
  --bg-dusk:         #D6DDDF;
  --bg-rose:         #E8D9D2;

  /* ─── TEXT: warm-grau, weniger schwarz für menschlichere Wirkung ─── */
  --text-primary:    #2A241D;  /* statt fast-Schwarz: warmes Dunkelbraun */
  --text-secondary:  #6B5F52;  /* warmer Grauton */
  --text-muted:      #978A7B;
  --text-inverse:    #FBF8F3;

  /* ─── GLAS: deutlich reduzierte Effekte ─── */
  --glass-light:     rgba(255, 253, 250, 0.85);
  --glass-lighter:   rgba(255, 253, 250, 0.95);
  --glass-medium:    rgba(255, 253, 250, 0.70);
  --glass-border:    rgba(255, 253, 250, 0.92);
  --glass-edge:      rgba(42, 36, 29, 0.08);  /* warmere Kante */

  /* ─── AKZENT: gedämpftes Marineblau — seriös, akademisch ─── */
  --accent:          #1E3A5F;
  --accent-soft:     rgba(30, 58, 95, 0.07);
  --accent-medium:   rgba(30, 58, 95, 0.18);
  --accent-strong:   rgba(30, 58, 95, 0.32);

  /* ─── POL-FARBEN (Diagramm-Akzente bleiben, sind NGO-warm) ─── */
  --pol-aff:         #C46B5E;
  --pol-narr:        #8B6F73;
  --pol-dial:        #7A9468;
  --pol-inf:         #5E7B8F;

  /* ─── BLOCK-FARBEN ─── */
  --block-S:         #B89968;
  --block-E:         #8A9B7A;
  --block-K:         #6E8997;
  --block-M:         #A07878;

  /* ─── SCHATTEN: dezenter, warmer ─── */
  --shadow-xs:       0 1px 2px rgba(42,36,29,0.04);
  --shadow-sm:       0 2px 4px rgba(42,36,29,0.05), 0 1px 2px rgba(42,36,29,0.04);
  --shadow-md:       0 4px 12px rgba(42,36,29,0.06), 0 2px 4px rgba(42,36,29,0.04);
  --shadow-lg:       0 8px 24px rgba(42,36,29,0.08), 0 4px 8px rgba(42,36,29,0.05);
  --shadow-glow:     0 0 0 1px rgba(255,253,250,0.6) inset;

  --radius-sm: 6px;
  --radius-md: 12px;     /* etwas weniger rund — klarer */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', Consolas, monospace;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* Bessere Schrift-Rendering: Kerning + Standard-Ligaturen + Discretionary Ligatures aus */
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
  /* Kein horizontales Scrollen — verhindert iOS Bouncy-Scroll und versehentliches Wischen */
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-cream);
  /* Bug #117: 100vh inkludiert auf iOS Safari die Address-Bar — content könnte
     verschnitten werden. dvh (dynamic viewport) berücksichtigt sichtbare Höhe.
     Fallback auf 100vh für ältere Browser. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Subtile Letter-Spacing-Optimierung für Body-Text auf größeren Bildschirmen */
  letter-spacing: -0.005em;
  /* Kein horizontales Scrollen */
  overflow-x: hidden;
  overscroll-behavior-x: none;
  width: 100%;
  max-width: 100vw;
}

/* ──────────────────────────────────────
   RUHIGER HINTERGRUND
   NGO-typisch: gebrochenes Weiß, kaum Effekte, viel Ruhe
   ────────────────────────────────────── */
.bg-mesh {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: var(--bg-cream);
}
.bg-mesh::before {
  content: ''; position: absolute;
  width: 80vw; height: 80vw; top: -30vw; right: -20vw;
  background: radial-gradient(circle, var(--bg-amber) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.30;
  /* Keine Animation mehr — wirkt unruhig bei langer Befragung */
}
.bg-mesh::after {
  content: ''; position: absolute;
  width: 70vw; height: 70vw; bottom: -25vw; left: -20vw;
  background: radial-gradient(circle, var(--bg-paper) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.40;
}
/* Extra-Mesh-Layer komplett ausblenden — wir wollen Ruhe */
.bg-mesh-extra { display: none; }

/* Grain-Textur deutlich reduzieren — kaum noch sichtbar */
.bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ──────────────────────────────────────
   PANEL-FLÄCHEN: NGO-typisch ruhig & klar
   Statt Glaseffekten setzen wir auf gebrochenes Weiß
   mit dezenter Trennung zur Umgebung.
   ────────────────────────────────────── */
.glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  backdrop-filter: blur(12px) saturate(110%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: var(--glass-lighter);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
}

/* ──────────────────────────────────────
   APP CONTAINER & PROGRESS BAR
   ────────────────────────────────────── */
#app {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  /* Bug #117: dvh statt vh — siehe body-Kommentar */
  min-height: 100vh;
  min-height: 100dvh;
}

.progress-bar {
  position: sticky;
  top: var(--sp-3);
  z-index: 10;
  height: 8px;
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #2A547F 100%);
  border-radius: var(--radius-pill);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-label {
  position: absolute;
  top: 14px; right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.stage {
  animation: stage-in 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes stage-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Wichtig: KEIN transform in dieser Animation, weil transform einen
   neuen containing block erzeugt und position:sticky in Children bricht. */

/* ──────────────────────────────────────
   PANELS — mehr Atemraum, klarere Kanten
   ────────────────────────────────────── */
.panel {
  padding: var(--sp-8) var(--sp-7);
  margin-bottom: var(--sp-5);
  /* Wichtig für Sticky-Children (z.B. Stim-Player) */
  overflow: visible;
}
.panel-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ──────────────────────────────────────
   TYPOGRAPHY
   ────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--sp-6);
}
.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ─── HEADLINES ─────────────────────────
   Größerer Kontrast zwischen Display- und Body-Größen für klarere Hierarchie.
   Display nutzt Fraunces im Optical-Size 144 mit minimalem Letter-Spacing
   und tighter Line-Height — wirkt magazin-artig, premium.
*/
.title-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-5);
}
.title-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.015em;
}
.title-medium {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.8vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-4);
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.title-medium em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* ─── BODY-TEXT ─────────────────────────
   Lead etwas größer, weicheren Zeilenabstand, leichtere Farbe für mehr Pause
   nach den großen Headlines. Schafft den gewünschten Größenkontrast.
*/
.lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 56ch;
}
.lead-small {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-5);
  letter-spacing: -0.003em;
  max-width: 60ch;
}
.lead-small[style*="text-align: center"],
.lead[style*="text-align: center"] {
  margin-left: auto;
  margin-right: auto;
}
.small-muted {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: var(--sp-4) 0;
  letter-spacing: 0.005em;
}

/* ──────────────────────────────────────
   INFO GRID (welcome page)
   ────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--glass-edge);
  border-bottom: 1px solid var(--glass-edge);
}
.info-card {
  /* Kein Hintergrund, kein Rahmen — wirkt nicht mehr wie ein Button */
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  /* v176 Bug #159: flex column mit fixierten Höhen für Icon und Text-Bereich,
     damit alle 4 Karten visuell auf einer Linie sind — auch wenn die Texte
     unterschiedlich lang sind ("jederzeit möglich" 2 Zeilen vs "16 Beiträge"
     1 Zeile) und die Icons unterschiedliche Höhen haben (Emoji vs SVG). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.info-card-icon {
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  opacity: 0.7;
  /* Bug #159: fixe Höhe sorgt für konsistente vertikale Ausrichtung der
     Icons über alle 4 Karten — Emojis und SVG werden zentriert. */
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.info-card-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.info-card-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.35;
  font-variation-settings: "opsz" 16;
  /* Bug #159: min-height reserviert Platz für 2 Zeilen — sonst sind Karten
     mit kurzen Texten ("16 Beiträge") niedriger als solche mit langen
     ("jederzeit möglich" / "ca. 25–30 Min.") und das Layout wirkt unruhig. */
  min-height: 2.7em;
}

/* v176: Highlight-Variante der info-card für die Welcome-Karte "Dankeschön"
   Macht die Wirkprofil-Karte dezent prominenter, aber ohne den Look zu sprengen */
.info-card-highlight .info-card-icon {
  color: var(--accent);
  opacity: 1;
}
.info-card-highlight .info-card-title {
  color: var(--accent);
  opacity: 0.9;
}
.info-card-highlight .info-card-text {
  font-weight: 600;
}

/* v176: Welcome-Bonus-Note — dezenter Hinweis-Banner auf der Startseite,
   der die Wirkprofil-Karte unten in Worten erklärt. Bewusst kein "Aufdringliches",
   sondern als ruhiger Akzent gestaltet. "Auf Wunsch" macht freiwilligen Charakter klar. */
.welcome-bonus-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) auto;
  max-width: 640px;
  background: linear-gradient(
    135deg,
    rgba(212, 184, 145, 0.10) 0%,
    rgba(212, 184, 145, 0.04) 100%
  );
  border: 1px solid rgba(212, 184, 145, 0.30);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.welcome-bonus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}
.welcome-bonus-icon svg {
  display: block;
}
.welcome-bonus-text {
  flex: 1;
}
.welcome-bonus-text strong {
  font-weight: 600;
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .welcome-bonus-note {
    font-size: 13px;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .welcome-bonus-icon {
    width: 24px;
    height: 24px;
  }
  .welcome-bonus-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* ──────────────────────────────────────
   WIRKPROFIL-Section (v176)
   Aufklappende Anmelde-Sektion auf dem Stakeholder-Auswahl-Step
   ────────────────────────────────────── */
.wirkprofil-section {
  margin-top: var(--sp-5);
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              transform 0.4s ease,
              padding 0.4s ease,
              margin-top 0.4s ease;
}
.wirkprofil-section.is-visible {
  max-height: 1200px; /* großzügig für Mobile + Validierungs-Fehler */
  opacity: 1;
  transform: translateY(0);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(212, 184, 145, 0.06) 0%,
    rgba(212, 184, 145, 0.02) 100%
  );
}
.wirkprofil-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.wirkprofil-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.wirkprofil-icon svg {
  display: block;
}
.wirkprofil-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.wirkprofil-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--sp-4) 0;
}
.wirkprofil-checkbox {
  margin-bottom: 0;
}
.wirkprofil-fields {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              transform 0.3s ease,
              margin-top 0.3s ease;
}
.wirkprofil-fields.is-visible {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  margin-top: var(--sp-3);
}
.wirkprofil-fields .field {
  margin-bottom: var(--sp-3);
}
.wirkprofil-fields .field:last-child {
  margin-bottom: 0;
}
.wirkprofil-fields .field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.wirkprofil-fields .field input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-display);
  /* Bug #151: 16px MUSS sein, sonst zoomt iOS Safari beim Fokus rein.
     Schwellwert ist exakt 16px — 15.x triggert noch Auto-Zoom. */
  font-size: 16px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-edge);
  border-radius: 8px;
  color: var(--text-primary);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.wirkprofil-fields .field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.8);
}
.wirkprofil-fields .field input.input-error {
  border-color: var(--danger, #C44);
  background: rgba(196, 68, 68, 0.05);
}
.wirkprofil-error {
  margin-top: var(--sp-3);
  padding: 10px 14px;
  background: rgba(196, 68, 68, 0.08);
  border: 1px solid rgba(196, 68, 68, 0.25);
  border-radius: 8px;
  color: var(--danger, #C44);
  font-size: 13px;
  font-family: var(--font-display);
  line-height: 1.4;
}

/* ──────────────────────────────────────
   PROGRESS INDICATOR (Footer — Schritt-Übersicht)
   ────────────────────────────────────── */
.progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-7) auto var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  flex-wrap: wrap;
  max-width: 760px;
  border-top: 1px solid var(--glass-edge);
  /* Dezenter Footer-Look: leicht transparent, weniger prominent als die Hauptpanels */
  opacity: 0.85;
}
.pi-step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
/* Schritt-Nummer als Kreis */
.pi-num {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--glass-edge);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.pi-label {
  white-space: nowrap;
}

/* Aktiver Schritt: Akzent */
.pi-step.active { color: var(--accent); font-weight: 600; }
.pi-step.active .pi-num {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
/* Erledigte Schritte */
.pi-step.done { color: var(--text-secondary); }
.pi-step.done .pi-num {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-medium);
}

.pi-line {
  flex: 1;
  min-width: 16px;
  height: 2px;
  background: var(--glass-edge);
  border-radius: 1px;
  transition: background 0.3s ease;
}
.pi-line.done {
  background: var(--accent-medium);
}

/* ──────────────────────────────────────
   BUTTONS
   ────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--text-inverse);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: #15294A;
}
.btn-large {
  font-size: 15.5px;
  padding: 16px 32px;
}
.btn-secondary {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  padding: 12px 22px;
  background: rgba(255,255,255,0.5);
  color: var(--text-primary);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}
.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.btn-link:hover { background: var(--accent-soft); }

.btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  flex-wrap: wrap;
}
.btn-row.centered {
  justify-content: center;
}
.btn-row > span:empty { display: none; }

/* ──────────────────────────────────────
   RESUME BANNER
   ────────────────────────────────────── */
.resume-banner {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-primary);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(30, 58, 95, 0.06);
  border: 1px solid rgba(30, 58, 95, 0.12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.resume-banner::before {
  content: '⏵';
  font-size: 1.1rem;
  color: var(--accent);
  flex-shrink: 0;
}
.resume-banner span {
  flex: 1 1 auto;
  font-weight: 500;
}
.resume-banner .btn-link {
  font-weight: 500;
}

/* ──────────────────────────────────────
   FORM FIELDS
   ────────────────────────────────────── */
.field {
  margin-bottom: var(--sp-5);
}
.field label {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--sp-2);
  line-height: 1.45;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="tel"],
.field textarea,
.field select.select-control,
textarea#item_freitext {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.field select.select-control {
  appearance: none;
  -webkit-appearance: none;
  /* Eigener Pfeil rechts */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: rgba(255,255,255,0.6);
  padding-right: 36px;
  cursor: pointer;
}
.field input:focus,
.field textarea:focus,
.field select.select-control:focus,
textarea#item_freitext:focus {
  outline: none;
  background: rgba(255,255,255,0.95);
  border-color: var(--accent-medium);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea {
  font-family: var(--font-body);
  resize: vertical;
  line-height: 1.5;
}

/* ──────────────────────────────────────
   RADIO GROUP
   ────────────────────────────────────── */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.radio-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14.5px;
  user-select: none;
}
.radio-label:hover {
  background: rgba(255,255,255,0.7);
  border-color: var(--accent-medium);
}
.radio-label input[type="radio"] {
  margin: 0;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
  position: relative;
}
.radio-label input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px white inset, 0 0 0 1px var(--accent);
}
.radio-label.checked {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  margin-bottom: var(--sp-5);
}
.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px; height: 18px;
  cursor: pointer;
}

/* ──────────────────────────────────────
   DSGVO TEXT
   ────────────────────────────────────── */
.dsgvo-text {
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  margin: var(--sp-5) 0;
  max-height: 360px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.dsgvo-text h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  margin: var(--sp-4) 0 var(--sp-2);
  color: var(--text-primary);
  font-variation-settings: "opsz" 18;
}
.dsgvo-text h4:first-child { margin-top: 0; }
.dsgvo-text p { margin: 0 0 var(--sp-3); }
.dsgvo-text::-webkit-scrollbar { width: 6px; }
.dsgvo-text::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; opacity: 0.4; }

/* ──────────────────────────────────────
   BLOCK GRID (Block-Auswahl)
   ────────────────────────────────────── */
.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}
.block-card {
  text-align: left;
  padding: var(--sp-5);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-family: var(--font-body);
}
.block-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.block-card.selected {
  background: rgba(255,255,255,0.95);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
}
.block-card-icon {
  font-size: 1.8rem;
  color: var(--accent);
  font-family: var(--font-display);
  margin-bottom: var(--sp-1);
}
.block-card[data-block="S"] .block-card-icon { color: var(--block-S); }
.block-card[data-block="E"] .block-card-icon { color: var(--block-E); }
.block-card[data-block="K"] .block-card-icon { color: var(--block-K); }
.block-card[data-block="M"] .block-card-icon { color: var(--block-M); }
.block-card-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--text-primary);
  font-variation-settings: "opsz" 24;
}
.block-card-text {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ──────────────────────────────────────
   STIMULUS PLAYER
   ────────────────────────────────────── */
.stimulus-header {
  display: flex;
  /* Bug #132: Format-Tag zentriert über dem Beitrag (war: space-between → links) */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.stim-meta-tags {
  display: flex; gap: 6px;
}
/* Bug #132: Stimulus-Prompt-Headline ("Bitte sieh dir diesen Beitrag an:")
   zentriert über dem Stimulus, passend zum darüber zentrierten Format-Tag. */
.stimulus-prompt {
  text-align: center;
}
.tag-mini {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: rgba(26,24,20,0.05);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}

/* Save-Indikator: zeigt der Probandin, dass Antworten zwischengespeichert werden.
   Wird erst sichtbar nach der ersten echten Antwort (über JS-Klasse .visible). */
.save-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  background: rgba(110, 142, 90, 0.08);
  color: rgba(110, 142, 90, 0.7);
  border-radius: var(--radius-sm);
  display: none; /* Initial unsichtbar — bis die erste Antwort gespeichert wurde */
  align-items: center;
  gap: 6px;
  cursor: default;
  transition: all 0.4s ease;
  margin-left: auto;
}
.save-indicator.visible {
  display: inline-flex;
}
.save-indicator .save-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(110, 142, 90, 0.5);
  transition: all 0.4s ease;
}
.save-indicator.flash {
  background: rgba(110, 142, 90, 0.18);
  color: rgba(110, 142, 90, 1);
  animation: save-flash 1.4s ease;
}
.save-indicator.flash .save-dot {
  background: rgba(110, 142, 90, 1);
  box-shadow: 0 0 0 3px rgba(110, 142, 90, 0.2);
}
@keyframes save-flash {
  0%, 70% { transform: scale(1.04); }
  100%    { transform: scale(1); }
}
.stim-player {
  margin: var(--sp-5) 0;
  border-radius: var(--radius-md);
  background: rgba(26,24,20,0.04);
  /* overflow:hidden entfernt — bricht in manchen Browsern Sticky.
     Stattdessen sorgen wir mit isolation für sauberen Schichten-Stack. */
  isolation: isolate;
}
/* Inhalts-Elemente bekommen das border-radius direkt */
.stim-player > video,
.stim-player > img,
.stim-player > iframe {
  border-radius: var(--radius-md);
}

/* Sticky-Player: Player bleibt am oberen Bildschirmrand kleben, während
   die Probandin durch die Fragen scrollt. So kann sie jederzeit zurückschauen.

   Aktiv ab 768px Bildschirmbreite (Tablet aufwärts). Auf Smartphones bleibt
   der Player im normalen Fluss, weil sticky dort ergonomisch nichts bringt.

   Wichtige Voraussetzungen für position:sticky:
   1. Eltern-Element darf KEIN overflow:hidden haben         (per .panel { overflow: visible } gelöst)
   2. Eltern-Element darf KEIN transform haben                (per stage-Animation ohne transform gelöst)
   3. Element muss eine top-Position bekommen                 (top: 32px)
   4. Eltern muss länger sein als das Sticky-Element          (durch viele Fragen-Items immer gegeben)
*/
/* Sticky-Player ab 480px Browser-Breite — also auch auf Smartphones im
   Querformat und auf jedem Desktop-Fenster, das nicht extrem schmal ist.
   Auf sehr schmalen Hochformat-Smartphones (< 480px) bleibt der Player
   im normalen Scroll-Fluss. */
/* Sticky-Player auf ALLEN Bildschirmen aktiv. Auf Mobile kleinere PiP-Größe. */
.stim-player {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;
  z-index: 5;
  box-shadow: 0 12px 32px rgba(26,24,20,0.10),
              0 2px 6px rgba(26,24,20,0.06);
  max-height: 50vh;
  align-self: flex-start;
  /* Sanfte Übergänge zwischen normaler und geschrumpfter Größe */
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
}
.stim-player video,
.stim-player iframe {
  max-height: 50vh;
  width: 100%;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stim-player img {
  max-height: 45vh;
  object-fit: contain;
  width: 100%;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stim-player .audio-card {
  max-height: 50vh;
  transition: padding 0.3s ease, max-height 0.3s ease;
}

/* PICTURE-IN-PICTURE-MODUS: aktiviert sobald der Player am Rand klebt.
   (.is-stuck wird per IntersectionObserver in JS gesetzt.)
   Der Player schwebt OBEN RECHTS in kompaktem Format —
   so bleibt er beim Scrollen immer im Blick und User kann jederzeit zurückschauen. */
.stim-player.is-stuck {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: auto;
  margin: 0;
  /* Kompakte PiP-Größe — bewusst klein gehalten damit Inhalte sichtbar bleiben */
  width: 240px;
  max-width: calc(100vw - 32px);
  max-height: none;
  z-index: 50;
  box-shadow: 0 12px 32px rgba(26,24,20,0.28),
              0 4px 12px rgba(26,24,20,0.16);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Sticky-Player wird AUSGEBLENDET sobald der Freitext-Bereich sichtbar wird —
   methodisch sauber: User soll aus der Erinnerung schreiben, nicht aus
   parallelem Schauen. Replay ist über Hochscrollen weiterhin möglich. */
.stim-player.is-stuck.is-hidden-bottom {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
.stim-player.is-stuck video,
.stim-player.is-stuck iframe {
  max-height: none;
  height: auto;
  aspect-ratio: 16/9;
}
.stim-player.is-stuck img {
  max-height: 150px;
  width: 100%;
}
.stim-player.is-stuck .audio-card,
.stim-player.is-stuck .audio-player-custom {
  padding: var(--sp-2) var(--sp-3);
}
.stim-player.is-stuck .audio-icon {
  font-size: 1.2rem;
}
.stim-player.is-stuck .audio-meta {
  display: none;
}
/* Custom-Audio-Player im PiP-Modus: kleiner Play-Button */
.stim-player.is-stuck .audio-play-big {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.stim-player.is-stuck .audio-play-icon {
  font-size: 18px;
}
.stim-player.is-stuck .audio-progress-bar {
  width: 90%;
  height: 4px;
}
.stim-player.is-stuck .audio-time {
  font-size: 9px;
}
/* Custom-Video-Player im PiP-Modus: kleiner Play-Button (vor erstem Klick) */
.stim-player.is-stuck .video-play-big {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.stim-player.is-stuck .video-play-icon {
  font-size: 18px;
}
.stim-player.is-stuck audio {
  margin-top: 4px !important;
}

/* Auf großen Desktop-Bildschirmen (≥ 1100px): PiP etwas breiter,
   passt rechts neben das Panel ohne Überlappung. */
@media (min-width: 1100px) {
  .stim-player.is-stuck {
    width: 280px;
  }
  .stim-player.is-stuck img {
    max-height: 180px;
  }
}

/* Auf Mobile (≤ 480px): PiP kompakter — oben rechts mit kleinen Abständen */
@media (max-width: 480px) {
  .stim-player.is-stuck {
    width: 150px;
    top: 12px;
    right: 12px;
    bottom: auto;
  }
  .stim-player.is-stuck img {
    max-height: 90px;
  }
  .stim-player.is-stuck .audio-play-big,
  .stim-player.is-stuck .video-play-big {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* Player-Inhalt: Display-Eigenschaften (außerhalb der Media-Query) */
.stim-player video,
.stim-player img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}
.audio-card {
  padding: var(--sp-5);
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
}
.audio-icon {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
}
.audio-meta {
  margin-top: var(--sp-2);
}
.audio-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  font-variation-settings: "opsz" 24;
}
.audio-marke {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-variation-settings: "opsz" 14;
}
.placeholder {
  padding: var(--sp-7);
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}
.placeholder code {
  background: rgba(26,24,20,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}
.placeholder-hint {
  font-size: 11px;
  display: inline-block;
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0;
}

/* ──────────────────────────────────────
   ITEMS / SCALES
   ────────────────────────────────────── */
.items-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--glass-edge);
}
.items-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin: 0 0 var(--sp-5);
  font-variation-settings: "opsz" 18;
  color: var(--accent);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(30, 58, 95, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.items-heading::before {
  content: '✎';
  font-size: 1.2rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.item-block {
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(30, 58, 95, 0.10);
  border-left: 3px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--radius-md);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(30, 58, 95, 0.04);
}
.item-block:hover {
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.08);
}
.item-block:focus-within {
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
}
.item-block.missing {
  border-color: #C46B5E;
  border-left-color: #C46B5E;
  box-shadow: 0 0 0 3px rgba(196,107,94,0.15);
  animation: shake 0.45s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.item-question {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin-bottom: var(--sp-4);
}
.item-question em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.item-optional {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0;
}

/* SAM (9-Punkt) und Likert (7-Punkt) — gleiches 3-Spalten-Layout:
   linker Anker | Buttons-Container | rechter Anker
   Mit CSS-Grid bleibt der rechte Anker garantiert ganz rechts und die
   Buttons-Reihe verteilt sich automatisch über den verfügbaren Platz. */
.sam-row, .likert-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sam-anchor, .likert-anchor {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: normal;
  line-height: 1.35;
  flex: 0 0 auto;
  max-width: 22%;
  font-weight: 500;
}
.sam-anchor-left,
.likert-anchor-left {
  text-align: left;
}
.sam-anchor-right,
.likert-anchor-right {
  text-align: right;
  margin-left: auto;
}

/* Buttons-Container: nimmt mittleren Platz ein, Buttons gleichmäßig verteilt */
.sam-buttons,
.likert-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex: 1 1 auto;
}

.sam-btn, .likert-btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(30, 58, 95, 0.20);
  background: #FFFFFF;
  color: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.05);
}
.sam-btn:hover, .likert-btn:hover {
  background: rgba(30, 58, 95, 0.06);
  transform: scale(1.10);
  border-color: var(--accent);
  box-shadow: 0 3px 8px rgba(30, 58, 95, 0.12);
}
.sam-btn.selected, .likert-btn.selected {
  background: var(--accent);
  color: #FBF8F3;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.15),
              0 4px 12px rgba(30, 58, 95, 0.25);
  transform: scale(1.12);
  font-weight: 700;
}

/* Pol-Choice (Forced Choice 4) */
.pol-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.pol-choice-btn {
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid rgba(30, 58, 95, 0.15);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.04);
}
.pol-choice-btn:hover {
  background: rgba(30, 58, 95, 0.04);
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(30, 58, 95, 0.10);
}
.pol-choice-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.25);
  transform: translateY(-1px);
}
.pol-choice-btn.selected .pol-choice-label {
  color: #FBF8F3;
  font-weight: 600;
}
.pol-choice-btn.selected .pol-choice-sub {
  color: rgba(251, 248, 243, 0.8);
}
.pol-choice-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--accent);
  transition: color 0.18s ease;
}
.pol-choice-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 4px;
  line-height: 1.35;
  transition: color 0.18s ease;
}

/* ──────────────────────────────────────
   PAUSE / ABSCHLUSS
   ────────────────────────────────────── */
.pause-icon, .thanks-icon {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--accent);
  text-align: center;
  margin-bottom: var(--sp-3);
  font-variation-settings: "opsz" 144;
  display: block;
}

.summary-box {
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: 14px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-edge);
}
.summary-row:last-child { border-bottom: none; }
.summary-label {
  color: var(--text-secondary);
}
.summary-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ──────────────────────────────────────
   SUBMIT / SPINNER / WARN-BOX
   ────────────────────────────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: var(--sp-5) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.warn-box {
  padding: var(--sp-4) var(--sp-5);
  background: rgba(196, 155, 94, 0.12);
  border: 1px solid rgba(196, 155, 94, 0.3);
  border-radius: var(--radius-md);
  margin: var(--sp-4) 0;
  font-size: 14px;
}
.warn-box code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: rgba(26,24,20,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.data-preview {
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  background: rgba(26,24,20,0.04);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.data-preview summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.data-preview pre {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow-y: auto;
}

/* ──────────────────────────────────────
   TOAST
   ────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  background: var(--text-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  pointer-events: none;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ──────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────── */
@media (max-width: 720px) {
  #app { padding: var(--sp-4) var(--sp-3); }
  .panel { padding: var(--sp-5) var(--sp-4); }
  .title-display {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }
  .title-medium {
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.018em;
  }
  .lead {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: var(--sp-4);
  }
  .lead-small {
    font-size: 0.98rem;
    line-height: 1.6;
  }
  .item-question {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: var(--sp-3);
  }

  /* Welcome-Seite: Info-Karten als 2-Spalten-Grid + sehr kompakte Karten */
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin: var(--sp-3) 0;
    padding: var(--sp-3) 0;
  }
  .info-card {
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
  }
  .info-card-icon { font-size: 1rem; margin-bottom: 0; line-height: 1; opacity: 0.7; }
  .info-card-title { font-size: 9px; margin-bottom: 2px; }
  .info-card-text { font-size: 11px; line-height: 1.25; }

  /* Welcome: Tablet-Hinweis ausblenden auf Mobile (spart Platz) */
  .hide-on-mobile { display: none !important; }

  /* Welcome-Lead Mobile: großzügig lesbar */
  .welcome-panel .lead {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: var(--sp-3);
  }

  /* Welcome-Panel: angenehmes Padding, Hero-Title mit Atemluft */
  .welcome-panel { padding: var(--sp-4) var(--sp-3); }
  .welcome-panel .eyebrow { margin-bottom: var(--sp-4); }
  .welcome-panel h1 {
    margin-top: 0;
    margin-bottom: var(--sp-4);
    font-size: 1.7rem;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  /* Welcome-Lead-Row: angenehme Margins */
  .welcome-panel .welcome-lead-row {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-4);
  }

  /* Welcome-Box: kompaktes Padding */
  .welcome-panel .welcome-box {
    padding: var(--sp-3);
    margin: var(--sp-2) 0;
  }
  .welcome-box-heading { margin-bottom: var(--sp-2); }
  .welcome-box-divider { margin: var(--sp-2) 0; }

  /* Avatar etwas kleiner auf Mobile */
  .welcome-panel .welcome-avatar svg {
    width: 56px;
    height: 56px;
  }

  /* Progress-Indicator auf Welcome: kompakter */
  .welcome-panel .progress-indicator { margin: var(--sp-2) 0; }
  .welcome-panel .btn-row { margin-top: var(--sp-3); }

  /* Block-Choice: Karten als 2x2-Grid auf Mobile */
  .block-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2);
  }
  .block-card {
    padding: var(--sp-3) var(--sp-2) !important;
    min-height: 0 !important;
    /* Bug #147 (v175): min-width: 0 erzwingt gleiche Spaltenbreite trotz langer
       Wörter wie "Kooperationspartner:innen". Ohne das setzt der Browser
       eine implizite Mindestbreite basierend auf dem längsten Inhalt. */
    min-width: 0 !important;
  }
  .block-card-icon { font-size: 1.6rem !important; margin-bottom: var(--sp-1); }
  .block-card-label {
    font-size: 0.95rem !important;
    line-height: 1.2;
    margin-bottom: 4px;
    /* Bug #147 (v175): Lange Begriffe brechen sauber statt Spalte aufzuweiten */
    word-break: break-word;
    hyphens: auto;
  }
  /* Bug #146 (v175): Beschreibungstexte vollständig lesbar machen.
     Vorher war -webkit-line-clamp: 2 aktiv → längere Texte
     (Kooperationspartner:innen, Mitarbeiter:innen) wurden abgeschnitten.
     Clamp entfernt; Grid-Layout sorgt für gleiche Karten-Höhe pro Reihe. */
  .block-card-text {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Demografie: Felder kompakter */
  .field { margin-bottom: var(--sp-3); }
  .field label { font-size: 0.9rem; margin-bottom: 4px; }
  .select-control { font-size: 1rem; padding: 10px 12px; }

  /* Radio-Gruppen: weniger Padding */
  .radio-label { padding: 10px 12px; font-size: 0.95rem; }

  /* Progress-Indicator: kompakter auf Mobile, Labels stark verkleinert aber sichtbar */
  .progress-indicator {
    margin: var(--sp-3) 0;
    gap: 4px;
  }
  .pi-step {
    font-size: 9px;
    gap: 4px;
    letter-spacing: 0.05em;
  }
  .pi-num { width: 18px; height: 18px; font-size: 10px; }
  .pi-label { display: none; }
  .pi-step.active .pi-label { display: inline; }
  .pi-line { min-width: 8px; }

  /* SAM/Likert-Skalen auf Mobile: Anker oben (50%/50%), Buttons darunter in einer Reihe.
     Nutzt CSS-Grid mit explicit grid-areas — viel zuverlässiger als Flex+order. */
  .sam-row, .likert-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "btns btns";
    gap: 4px 8px;
    align-items: center;
  }
  /* Wichtig: Desktop-max-width auf Mobile aufheben, sonst werden die Anker
     auf 22% Breite gequetscht und brechen Texte wie "ruhig / entspannt" um. */
  .sam-anchor, .likert-anchor {
    max-width: none !important;
  }
  .sam-anchor-left, .likert-anchor-left {
    grid-area: left;
    text-align: left !important;
    font-size: 12.5px !important;
    line-height: 1.3;
    white-space: normal;
  }
  .sam-anchor-right, .likert-anchor-right {
    grid-area: right;
    text-align: right !important;
    font-size: 12.5px !important;
    line-height: 1.3;
    white-space: normal;
    margin-left: 0 !important;
  }
  .sam-buttons, .likert-buttons {
    grid-area: btns;
    width: 100%;
    display: flex;
    gap: 4px;
    justify-content: space-between;
  }
  .sam-btn, .likert-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    height: 44px;
    font-size: 13.5px;
    padding: 0;
  }

  /* Pol-Wahrnehmung auf Mobile: 2x2-Grid mit kompakten Kästchen */
  .pol-choice {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .pol-choice-btn {
    padding: 8px 10px;
    text-align: center;
  }
  .pol-choice-label {
    font-size: 12px;
    line-height: 1.2;
  }
  .pol-choice-sub {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 1px;
  }

  /* Button-Reihe: vollbreit, Primärbutton oben */
  .btn-row { flex-direction: column-reverse; gap: var(--sp-2); }
  .btn-row > button { width: 100%; }

  /* Aber: zentrierte Button-Reihe (z.B. Welcome) bleibt zentriert mit natürlicher Breite */
  .btn-row.centered { flex-direction: row; justify-content: center; }
  .btn-row.centered > button { width: auto; min-width: 200px; }

  .progress-label { display: none; }

  /* DSGVO-Box auf Mobile kompakter */
  .dsgvo-box { padding: var(--sp-3); font-size: 0.9rem; }
  .dsgvo-box h4 { font-size: 0.95rem; margin-top: var(--sp-3); }

  /* Stimulus-Header kompakter, Save-Indikator schmaler */
  .stimulus-header { gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .stim-meta-tags { gap: 4px; }
  .tag-mini, .save-indicator { font-size: 9px; padding: 3px 6px; }

  /* Item-Texte auf Mobile leicht kompakter */
  .item-block { margin-bottom: var(--sp-4); }

  /* Resume-Banner kompakter */
  .resume-banner { font-size: 0.9rem; padding: var(--sp-3); flex-wrap: wrap; }
}

::selection { background: var(--accent); color: var(--text-inverse); }

/* ──────────────────────────────────────
   FOKUSGRUPPEN-PHASE
   Hero-Komponente + Kontakt-Formular
   ────────────────────────────────────── */

.fokus-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

/* Dekoratives Element: leichter Akzent-Lichtschein im Hintergrund */
.fokus-hero::before {
  content: '';
  position: absolute;
  top: -60%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, var(--accent-soft) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.fokus-hero > * { position: relative; z-index: 1; }

.title-large {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--sp-4);
  font-variation-settings: "opsz" 96;
}
.title-large em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  color: var(--accent);
}

.lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  max-width: 56ch;
}

/* Drei Info-Kacheln nebeneinander */
.fokus-info-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-6);
}
.fokus-info-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255,255,255,0.45);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fokus-info-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.fokus-info-icon {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}
.fokus-info-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.fokus-info-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-primary);
  font-variation-settings: "opsz" 16;
}

/* Kontakt-Formular */
.fokus-contact {
  animation: fokus-fade-in 0.4s ease;
}
@keyframes fokus-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pflichtfeld-Markierung */
.field-required {
  color: var(--pol-aff);
  margin-left: 4px;
  font-weight: 500;
}

/* Felder nebeneinander auf Desktop */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.field-spaced {
  margin-top: var(--sp-5);
}

/* DSGVO-Box im Fokus-Formular: dezent, aber sichtbar */
/* Wiederverwendbare Info-Flag-Box (mit gebogener Akzent-Linie links und Flagge) */
.info-flag-box,
.fokus-dsgvo {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  background: rgba(30, 58, 95, 0.04);
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}
.info-flag-icon,
.fokus-dsgvo-icon {
  font-size: 1.4rem;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
}
.info-flag-text,
.fokus-dsgvo-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.info-flag-text strong,
.fokus-dsgvo-text strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* Button-Reihe etwas breiter */
.btn-row-wide {
  margin-top: var(--sp-6);
}

/* Responsive Anpassungen */
@media (max-width: 720px) {
  .fokus-info-grid {
    gap: var(--sp-2);
  }
  .fokus-info-tile {
    padding: var(--sp-3);
  }
  .fokus-info-icon {
    font-size: 1.4rem;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* ──────────────────────────────────────
   DEV-AUTH-MODAL (Bug #149 v175)
   Passwort-Eingabe für Dev-Mode-Zugang. Schützt den Live-Server vor
   versehentlicher Dev-Mode-Aktivierung durch Probandinnen.
   ────────────────────────────────────── */
#dev-auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: tab-lock-fade-in 0.3s ease;
}
.dev-auth-content {
  max-width: 380px;
  width: 100%;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  box-shadow: var(--shadow-lg);
}
.dev-auth-icon {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent);
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.dev-auth-content h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 var(--sp-2) 0;
  color: var(--text-primary);
}
.dev-auth-content p {
  margin: 0 0 var(--sp-3) 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.dev-auth-content input {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-mono);
  background: white;
  margin-bottom: var(--sp-2);
  box-sizing: border-box;
}
.dev-auth-content input:focus {
  outline: none;
  border-color: var(--accent);
}
.dev-auth-error {
  color: #c14;
  font-size: 0.85rem;
  margin: 0 0 var(--sp-3) 0;
  visibility: hidden;
  min-height: 1.2em;
}
.dev-auth-error.visible {
  visibility: visible;
}
.dev-auth-buttons {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}
.dev-auth-buttons button {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.dev-auth-buttons #dev-auth-cancel {
  background: white;
  color: var(--text-secondary);
  border: 1px solid var(--glass-edge);
}
.dev-auth-buttons #dev-auth-submit {
  background: var(--accent);
  color: white;
  border: none;
}
.dev-auth-buttons button:hover {
  opacity: 0.85;
}

/* ──────────────────────────────────────
   TAB-LOCK-OVERLAY (Bug #148 v175)
   Zeigt sich, wenn bereits ein anderer Tab dieser Befragung läuft.
   Verhindert parallele Sessions (Mehrfach-Teilnahme-Schutz).
   ────────────────────────────────────── */
#tab-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 50, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  animation: tab-lock-fade-in 0.3s ease;
}
@keyframes tab-lock-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tab-lock-content {
  max-width: 480px;
  width: 100%;
  padding: var(--sp-6);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  box-shadow: var(--shadow-lg);
}
.tab-lock-icon {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--accent);
  margin-bottom: var(--sp-3);
  line-height: 1;
}
.tab-lock-content h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 var(--sp-3) 0;
  color: var(--text-primary);
  line-height: 1.3;
}
.tab-lock-content p {
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.5;
  color: var(--text-secondary);
}
.tab-lock-content p.tab-lock-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.tab-lock-content button {
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.tab-lock-content button:hover {
  opacity: 0.9;
}

/* ──────────────────────────────────────
   HONEYPOT (Bot-Trap)
   Sichtbar für Bots im DOM, unsichtbar für echte Probandinnen.
   Wer das ausfüllt, wird beim Submit als Bot-Verdacht geflaggt.
   ────────────────────────────────────── */
.honeypot-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────
   PILL-BUTTON-GROUP
   Kompakte Alternative zu Radio-Buttons (z.B. Geschlecht)
   ────────────────────────────────────── */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-1);
}
.pill-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.55);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  font-variation-settings: "opsz" 16;
}
.pill-btn:hover {
  background: rgba(255,255,255,0.85);
  border-color: var(--accent-medium);
  color: var(--text-primary);
}
.pill-btn.selected {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-soft);
}
.pill-btn.selected:hover {
  background: var(--accent);
}

@media (max-width: 720px) {
  .pill-btn { font-size: 13px; padding: 8px 14px; }
}

/* ──────────────────────────────────────
   TOP STATUS BAR
   Dezente Statusleiste oben mit Schritt-Anzeige + Fortschritt
   ────────────────────────────────────── */
.top-status-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 980px;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  /* Dezenter Container — kein eigener Hintergrund, nur untere Linie */
  border-bottom: 1px solid var(--glass-edge);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.tsb-label {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 0 0 auto;
  white-space: nowrap;
}
.tsb-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}
.tsb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glass-edge);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: help;
}
.tsb-dot.done {
  background: var(--accent-medium);
}
.tsb-dot.active {
  background: var(--accent);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tsb-percent {
  font-weight: 500;
  color: var(--text-secondary);
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fortschrittsbalken: ganz dünne Linie an der Unterkante des Containers */
.tsb-fill-track {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  overflow: hidden;
  border-radius: 1px;
}
.tsb-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: kompakter, Label kürzer */
@media (max-width: 720px) {
  .top-status-bar {
    padding: var(--sp-2);
    gap: var(--sp-2);
    font-size: 10px;
  }
  .tsb-steps { gap: 6px; }
  .tsb-dot { width: 5px; height: 5px; }
  .tsb-dot.active { width: 7px; height: 7px; }
  .tsb-percent { min-width: 30px; font-size: 10px; }
}

/* ──────────────────────────────────────
   WEB-STIMULUS — Bug #135 (v155): web-scroll-container entfernt.
   Web-Stimuli werden ab v155 als statisches Bild (PNG) gerendert,
   wie alle anderen non-AV-Stimuli auch (print/chat/mail/bild).
   Siehe survey.js renderStimulusPlayer() für Details.
   ────────────────────────────────────── */

/* Halbzeit-Pause Countdown-Text */
.pause-countdown-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin: var(--sp-3) 0;
  letter-spacing: 0.04em;
}
.pause-countdown-text #pause-countdown {
  display: inline-block;
  min-width: 18px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────
   WELCOME-HEADER mit Avatar + persönlicher Begrüßung
   ────────────────────────────────────── */
.welcome-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.welcome-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--glass-edge);
  background: var(--bg-paper);
}
.welcome-avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.welcome-intro {
  flex: 1 1 auto;
  padding-top: 4px;
}
.welcome-headline {
  margin: 0 !important;
}
.welcome-greet {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  font-variation-settings: "opsz" 96, "SOFT" 50;
}
.welcome-greet em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  font-variation-settings: "opsz" 96, "SOFT" 100;
}

@media (max-width: 720px) {
  .welcome-header {
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
  }
  .welcome-avatar {
    width: 56px;
    height: 56px;
  }
  .welcome-greet {
    font-size: 1.3rem;
    line-height: 1.25;
  }
}

/* Welcome-Schlussappell oben: zentriert über dem Schritt-Kasten */
.welcome-thanks {
  margin-top: var(--sp-3);
  text-align: center;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .welcome-thanks {
    margin-top: var(--sp-3);
  }
}

/* Lead-Row mit Avatar links + Lead-Text rechts (Avatar vertikal zentriert) */
.welcome-lead-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-4);
}
.welcome-lead-row .welcome-avatar {
  flex: 0 0 auto;
  align-self: center;
}
.welcome-lead-text {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 0;
  align-self: center;
}
@media (max-width: 720px) {
  .welcome-lead-row {
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    align-items: center;
  }
  .welcome-lead-text {
    padding-top: 0;
  }
}

/* ──────────────────────────────────────
   FLOW-STEPS: Zweistufen-Ablauf-Indikator
   (Welcome — zeigt Befragung jetzt → Gruppengespräch später)
   ────────────────────────────────────── */
.flow-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-3);
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
}
.flow-step {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.flow-step-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  background: rgba(42,36,29,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(42,36,29,0.10);
}
.flow-step-active .flow-step-num {
  background: var(--accent);
  color: #FBF8F3;
  border-color: var(--accent);
}
.flow-step-body {
  min-width: 0;
}
.flow-step-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flow-step:not(.flow-step-active) .flow-step-title {
  color: var(--text-secondary);
  font-weight: 500;
}
.flow-step-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}
.flow-arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 16px;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .flow-steps {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .flow-arrow {
    transform: rotate(90deg);
    align-self: center;
    font-size: 14px;
  }
  .flow-step-title {
    font-size: 13px;
  }
  .flow-step-meta {
    font-size: 9px;
  }
}

/* ──────────────────────────────────────
   HOW-IT-WORKS: "So läuft es ab"
   Grafische Erklärung mit Nummern
   ────────────────────────────────────── */
.how-it-works {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
}
.hiw-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--sp-3);
}
.hiw-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}
.hiw-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  max-width: 220px;
}
.hiw-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  color: #FBF8F3;
  margin-bottom: 2px;
}
.hiw-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(42,36,29,0.04);
  color: var(--accent);
  border: 1px solid rgba(42,36,29,0.06);
}
.hiw-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 4px;
}
.hiw-arrow {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.5;
  display: flex;
  align-items: center;
  align-self: center;
  margin-top: 22px; /* mit den Icons fluchtend, nicht mit den Nummern */
}

@media (max-width: 720px) {
  .how-it-works {
    padding: var(--sp-3);
    margin: var(--sp-3) 0;
  }
  .hiw-row {
    gap: var(--sp-2);
  }
  .hiw-arrow {
    display: flex;
  }
  .hiw-card {
    max-width: none;
    gap: 4px;
  }
  .hiw-icon {
    width: 44px;
    height: 44px;
  }
  .hiw-icon svg {
    width: 28px;
    height: 28px;
  }
  .hiw-label {
    font-size: 12px;
    line-height: 1.25;
  }
}

/* ──────────────────────────────────────
   WELCOME-BOX: Kombinierter Container
   für Schritte (1, 2) + Info-Karten
   ────────────────────────────────────── */
.welcome-box {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
}
.welcome-box-divider {
  height: 1px;
  background: var(--glass-edge);
  margin: var(--sp-3) 0;
}

/* Info-Grid INNERHALB welcome-box: ohne eigene Borders, ohne extra Margin, 4 Spalten */
.welcome-box .info-grid {
  margin: 0;
  padding: 0;
  border-top: none;
  border-bottom: none;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  /* v176 Bug #159: alle Karten gleich hoch (default für Grid, aber explizit
     für Klarheit). Sorgt zusammen mit den info-card-Höhen-Fixes dafür, dass
     alle 4 Karten auf einer Linie sitzen. */
  align-items: stretch;
}

@media (max-width: 720px) {
  .welcome-box .info-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
}

/* v176 Bug #159: Auf sehr schmalen Phones (<400px) wäre 4 Karten in 1 Reihe
   zu eng — Texte würden zerquetscht ("ca. 25–\n30 Min."). Daher 2×2 Layout. */
@media (max-width: 400px) {
  .welcome-box .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
}

/* hiw-row INNERHALB welcome-box: ohne extra Margin */
.welcome-box .hiw-row {
  margin: 0;
}

/* Eyebrow in Panels mittig zentrieren (überall konsistent) */
.panel > .eyebrow,
.welcome-panel > .eyebrow {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* Danke-Satz unter dem Welcome-Button */
.welcome-thanks-bottom {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: var(--sp-3) 0 0;
}

/* Beitrags-Hinweis im Welcome-Kasten (unten) */
.welcome-box-contribution {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 720px) {
  .welcome-box-contribution {
    font-size: 0.88rem;
  }
}

/* Beitrags-Hinweis AUSSERHALB des Kastens (zwischen Kasten und Button) */
.welcome-contribution-outside {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: var(--sp-4) 0 var(--sp-3);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .welcome-contribution-outside {
    font-size: 0.9rem;
    margin: var(--sp-3) 0;
  }
}

/* Nummer + Label nebeneinander unter dem Icon */
.hiw-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.hiw-label-row .hiw-num {
  width: 18px;
  height: 18px;
  font-size: 11px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #FBF8F3;
  font-family: var(--font-display);
  font-weight: 600;
  flex: 0 0 auto;
  margin: 0;
}
.hiw-label-row .hiw-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .hiw-label-row {
    gap: 4px;
  }
  .hiw-label-row .hiw-label {
    font-size: 12px;
  }
}

/* Überschrift im Welcome-Kasten */
.welcome-box-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--sp-3);
}

/* ──────────────────────────────────────
   WELCOME-STATUSBAR (integriert im Panel)
   schmaler Fortschrittsbalken oben
   ────────────────────────────────────── */
.welcome-statusbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.wsb-track {
  flex: 1 1 auto;
  height: 4px;
  background: rgba(42,36,29,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.wsb-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 0;
}
.wsb-percent {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  min-width: 28px;
  text-align: right;
}
.wsb-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .welcome-statusbar {
    margin-top: var(--sp-4);
  }
}

/* ──────────────────────────────────────
   EYEBROW MIT INTEGRIERTEM FORTSCHRITT
   Innovativer Ansatz: Pille selbst wird zum Fortschritts-Indikator
   ────────────────────────────────────── */
.eyebrow-progress {
  position: relative;
  overflow: hidden;
  /* Etwas mehr Padding rechts für Prozent-Anzeige */
  padding-right: 14px;
  /* Inhalt-Stack */
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  isolation: isolate;
}
.eyebrow-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(30, 58, 95, 0.18); /* Marineblau, leicht transparent */
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: 0;
}
.eyebrow-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}
.eyebrow-percent {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  margin-left: var(--sp-2);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* Welcome-Footer: dezenter Hinweis unter dem Button */
.welcome-footer-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: var(--sp-3) 0 0;
  opacity: 0.75;
}
@media (max-width: 720px) {
  .welcome-footer-note {
    font-size: 10px;
    margin-top: var(--sp-2);
  }
}

/* ──────────────────────────────────────
   CONSENT-CARD: Prominente DSGVO-Checkbox
   Klar erkennbar, mit Hover-Feedback
   ────────────────────────────────────── */
.consent-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  background: rgba(30, 58, 95, 0.04);
  border: 1.5px solid rgba(30, 58, 95, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.consent-card:hover {
  background: rgba(30, 58, 95, 0.07);
  border-color: rgba(30, 58, 95, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}
.consent-card input[type="checkbox"] {
  /* native Checkbox verstecken — wir nutzen den span-Ersatz */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.consent-card-checkbox {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: #FBF8F3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-top: 1px;
  position: relative;
}
.consent-card-checkbox::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #FBF8F3;
  border-bottom: 2.5px solid #FBF8F3;
  transform: rotate(-45deg) translate(2px, -2px) scale(0);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.consent-card input[type="checkbox"]:checked + .consent-card-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}
.consent-card input[type="checkbox"]:checked + .consent-card-checkbox::after {
  transform: rotate(-45deg) translate(2px, -2px) scale(1);
}
.consent-card input[type="checkbox"]:focus-visible + .consent-card-checkbox {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.consent-card-text {
  flex: 1 1 auto;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 500;
}

@media (max-width: 720px) {
  .consent-card {
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  .consent-card-checkbox {
    width: 22px;
    height: 22px;
  }
  .consent-card-checkbox::after {
    width: 8px;
    height: 5px;
  }
  .consent-card-text {
    font-size: 0.9rem;
    line-height: 1.45;
  }
}

/* Audio-Card minimal: Symbol links + Player rechts (horizontal), kein Titel/Marke */
.audio-card-minimal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: left;
}
.audio-card-minimal .audio-icon {
  font-size: 36px;
  color: var(--accent);
  opacity: 0.65;
  line-height: 1;
  flex-shrink: 0;
  margin-bottom: 0;
}
.audio-card-minimal audio {
  flex: 1 1 auto;
  margin-top: 0 !important;
}
@media (max-width: 720px) {
  .audio-card-minimal {
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  .audio-card-minimal .audio-icon {
    font-size: 28px;
  }
}

/* DSGVO-Info-Box: Standard info-flag-box mit größerer Schrift, weil Hauptinhalt der Seite */
.dsgvo-info-box {
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.dsgvo-info-box .info-flag-text {
  font-size: 14px;
  line-height: 1.6;
}
.dsgvo-info-box .info-flag-icon {
  font-size: 1.6rem;
}
@media (max-width: 720px) {
  .dsgvo-info-box {
    padding: var(--sp-3) var(--sp-4);
  }
  .dsgvo-info-box .info-flag-text {
    font-size: 13px;
  }
}

/* Fokus-Hero mit zentriertem Inhalt */
.fokus-hero-centered .fokus-info-grid {
  margin-left: auto;
  margin-right: auto;
}

/* Fokus-Decision: prominente Ja/Nein-Buttons */
.fokus-decision {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.fokus-decision-question {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
}
.fokus-decision-buttons {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}
.fokus-decision-btn {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(42, 36, 29, 0.18);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
  letter-spacing: -0.005em;
}
.fokus-decision-btn:hover {
  background: rgba(42, 36, 29, 0.05);
  border-color: rgba(42, 36, 29, 0.3);
  color: var(--text-primary);
}
.fokus-decision-yes.selected {
  background: var(--accent);
  color: #FBF8F3;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.22);
}
.fokus-decision-yes.selected:hover {
  background: #2a4970;
  border-color: #2a4970;
}
.fokus-decision-no.selected {
  background: var(--accent);
  color: #FBF8F3;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.22);
}
.fokus-decision-no.selected:hover {
  background: #2a4970;
  border-color: #2a4970;
}

@media (max-width: 720px) {
  .fokus-decision-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .fokus-decision-btn {
    min-width: 0;
    width: 100%;
  }
}

/* Auto-Submit-Status auf Abschluss-Seite */
.auto-submit-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(30, 58, 95, 0.06);
  border-radius: var(--radius-md);
  border: 1px solid rgba(30, 58, 95, 0.12);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: all 0.4s ease;
}
.auto-submit-status.success {
  background: rgba(45, 110, 45, 0.10);
  border: 2px solid rgba(45, 110, 45, 0.45);
  color: rgb(35, 90, 35);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-body);
}
.auto-submit-status.error {
  background: rgba(180, 60, 30, 0.06);
  border-color: rgba(180, 60, 30, 0.2);
  color: rgb(150, 50, 25);
}
.auto-submit-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(30, 58, 95, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.auto-submit-status.success .auto-submit-spinner,
.auto-submit-status.error .auto-submit-spinner {
  display: none;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ──────────────────────────────────────
   VERFÜGBARKEITS-MATRIX (Wochentag × Zeit)
   ────────────────────────────────────── */
.verfueg-matrix-wrap {
  margin-top: var(--sp-3);
}
.verfueg-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3) 0;
  font-style: italic;
}

.verfueg-matrix {
  display: grid;
  grid-template-columns: 38px repeat(3, 1fr);
  gap: 4px;
  padding: var(--sp-3);
  background: rgba(42, 36, 29, 0.025);
  border-radius: var(--radius-md);
  border: 1px solid rgba(42, 36, 29, 0.08);
  transition: opacity 0.2s ease;
}
.verfueg-matrix-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.verfueg-corner {
  /* Leere Ecke oben links */
}
.verfueg-zeit-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  padding: 4px 2px 6px;
}
.verfueg-zeit-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.verfueg-zeit-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  padding: 4px 2px;
  font-weight: 500;
  white-space: nowrap;
}
.verfueg-tag-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.verfueg-cell {
  border: 1.5px solid rgba(30, 58, 95, 0.25);
  background: #FFF;
  border-radius: 6px;
  height: 36px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  padding: 0;
  font: inherit;
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.04);
}
.verfueg-cell:hover {
  border-color: var(--accent);
  background: rgba(30, 58, 95, 0.08);
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.12);
  transform: scale(1.04);
}
.verfueg-cell::before {
  /* Hilfslinie zum Andeuten, dass die Zelle klickbar ist */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(30, 58, 95, 0.18);
  transition: all 0.15s ease;
}
.verfueg-cell:hover::before {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.4);
}
.verfueg-cell.selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.25);
}
.verfueg-cell.selected::before {
  display: none;
}
.verfueg-cell.selected::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FBF8F3;
  font-size: 14px;
  font-weight: 600;
}
.verfueg-cell:disabled {
  cursor: not-allowed;
}

/* "Ich bin flexibel" */
.verfueg-flexibel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  background: #FFF;
  border: 1.5px solid rgba(30, 58, 95, 0.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.04);
}
.verfueg-flexibel-row:hover {
  background: rgba(30, 58, 95, 0.05);
  border-color: var(--accent);
}
.verfueg-flexibel-row.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.18);
}
.verfueg-flexibel-row.is-checked .verfueg-flexibel-text {
  color: #FBF8F3;
  font-weight: 600;
}
.verfueg-flexibel-row.is-checked:hover {
  background: #2a4970;
}
.verfueg-flexibel-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.verfueg-flexibel-checkbox {
  /* Custom-Checkbox versteckt — Hintergrund-Farbwechsel reicht als Indikator */
  display: none !important;
}
.verfueg-flexibel-row.is-checked .verfueg-flexibel-checkbox {
  display: none !important;
}
.verfueg-flexibel-text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 500;
  transition: color 0.15s ease;
}

@media (max-width: 720px) {
  .verfueg-matrix {
    grid-template-columns: 32px repeat(3, 1fr);
    gap: 4px;
    padding: var(--sp-2);
  }
  .verfueg-zeit-label {
    font-size: 11px;
  }
  .verfueg-zeit-time {
    font-size: 9px;
  }
  .verfueg-cell {
    height: 36px;
    min-height: 36px;
  }
  .verfueg-cell.selected::after {
    font-size: 14px;
  }
  .verfueg-tag-label {
    font-size: 11px;
  }
}

/* ──────────────────────────────────────
   CUSTOM AUDIO PLAYER
   Großer mittiger Play-Button + schmale Fortschrittsbar
   ────────────────────────────────────── */
.audio-player-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-6) var(--sp-4);
  gap: var(--sp-3);
  background: rgba(30, 58, 95, 0.04);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(30, 58, 95, 0.08);
}
.audio-player-custom audio {
  display: none;
}
.audio-play-big {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent);
  color: #FBF8F3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.25);
  transition: all 0.18s ease;
  margin-bottom: var(--sp-2);
}
.audio-play-big:hover {
  background: #2a4970;
  transform: scale(1.05);
  box-shadow: 0 8px 22px rgba(30, 58, 95, 0.32);
}
.audio-play-big:active {
  transform: scale(0.96);
}
.audio-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  /* Play-Symbol leicht nach rechts versetzen — visuell zentrierter */
  margin-left: 4px;
}
.audio-play-icon[data-state="playing"] {
  margin-left: 0;
  font-size: 32px;
}
/* Bug #129: SVG-Icons im Audio-Player — vermeidet Emoji-Rendering der
   Unicode-Symbole ▶/⏸ auf iOS Safari (wurden dort als Color-Smileys
   gerendert). SVG bleibt als monochromer Vektor. */
.audio-icon-svg {
  width: 32px;
  height: 32px;
  display: block;
}
.audio-play-icon[data-state="playing"] .audio-icon-svg {
  width: 28px;
  height: 28px;
}
.stim-player.is-stuck .audio-icon-svg {
  width: 18px;
  height: 18px;
}
.stim-player.is-stuck .audio-play-icon[data-state="playing"] .audio-icon-svg {
  width: 16px;
  height: 16px;
}
.audio-progress-bar {
  width: 80%;
  max-width: 320px;
  height: 6px;
  background: rgba(30, 58, 95, 0.12);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.audio-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.08s linear;
  pointer-events: none;
}
.audio-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .audio-player-custom {
    padding: var(--sp-5) var(--sp-3);
  }
  .audio-play-big {
    width: 84px;
    height: 84px;
    font-size: 32px;
  }
  .audio-play-icon {
    font-size: 32px;
  }
  .audio-progress-bar {
    width: 90%;
  }
}

/* ──────────────────────────────────────
   DEV-MODE-SWITCHER (nur bei ?dev=1)
   Fixed unten rechts, klappbar, mit Direktsprung-Buttons
   ────────────────────────────────────── */
#dev-switcher {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  font-family: var(--font-mono);
  font-size: 11px;
}
#dev-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(30, 58, 95, 0.92);
  color: #FBF8F3;
  border: none;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  padding: 0;
}
#dev-toggle:hover {
  transform: scale(1.1);
}
#dev-panel {
  position: absolute;
  bottom: 50px;
  right: 0;
  background: rgba(30, 35, 50, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #FBF8F3;
  border-radius: 8px;
  padding: 12px;
  width: 220px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#dev-panel .dev-title {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
}
#dev-panel .dev-section {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin: 10px 0 4px;
  text-transform: uppercase;
  font-weight: 500;
}
#dev-panel button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: #FBF8F3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}
#dev-panel button:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
}
#dev-panel button.dev-reset {
  background: rgba(180, 60, 40, 0.4);
  border-color: rgba(180, 60, 40, 0.6);
  margin-top: 4px;
}
#dev-panel button.dev-reset:hover {
  background: rgba(180, 60, 40, 0.6);
}

/* Dev-Switcher: Stimulus-Grid 4x4 */
#dev-panel .dev-stim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}
#dev-panel .dev-stim-grid button {
  margin: 0;
  text-align: center;
  padding: 6px 0;
  font-weight: 600;
}

/* Disabled-Button-Style: heller Hintergrund + Marineblau-Schrift = gut lesbar.
   Pointer-events bleibt aktiv, damit Tooltip-Klick funktioniert.
   Echtes [disabled] hat pointer-events:none (Fokusgruppe-Hero ggf.). */
.btn-primary.is-disabled {
  background: rgba(30, 58, 95, 0.10);
  color: rgba(30, 58, 95, 0.55);
  border-color: rgba(30, 58, 95, 0.18);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary[disabled] {
  background: rgba(30, 58, 95, 0.10);
  color: rgba(30, 58, 95, 0.55);
  border-color: rgba(30, 58, 95, 0.18);
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Dev-Switcher: Block-Auswahl-Grid 4 Spalten */
#dev-panel .dev-block-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-bottom: 3px;
}
#dev-panel .dev-block-grid button {
  margin: 0;
  text-align: center;
  padding: 7px 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
}

#dev-panel .dev-block-grid button.dev-block-active {
  background: rgba(110, 180, 250, 0.45);
  border-color: rgba(110, 180, 250, 0.8);
  color: #FFF;
}

/* ──────────────────────────────────────
   CUSTOM VIDEO PLAYER mit großem Overlay-Button
   Vor dem ersten Klick: großer mittiger Play-Button überlagert das Video
   Nach dem Klick: native Browser-Controls für Pause/Volume/Fullscreen
   ────────────────────────────────────── */
.video-player-custom {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(30, 58, 95, 0.08);
}
.video-player-video {
  width: 100%;
  max-height: 60vh;
  display: block;
  background: #000;
  border-radius: 12px;
  transition: opacity 0.18s ease;
}
.video-play-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent);
  color: #FBF8F3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: all 0.18s ease;
  z-index: 2;
}
.video-play-big:hover {
  background: #2a4970;
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.video-play-big:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.video-play-big.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}
.video-play-icon {
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  margin-left: 4px;  /* Play-Symbol leicht nach rechts versetzen */
}

@media (max-width: 720px) {
  .video-play-big {
    width: 84px;
    height: 84px;
    font-size: 32px;
  }
  .video-play-icon {
    font-size: 32px;
  }
}

/* ──────────────────────────────────────
   CHOICE-CARD-GRID (Demografie: Alter, Geschlecht)
   Klickbare Karten — größer als Pills, kleiner als Block-Karten
   ────────────────────────────────────── */
.choice-card-grid {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
/* 'narrow' Layout — viele kleine Karten (5+ Optionen) */
.choice-card-grid-narrow {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
/* 'wide' Layout — 2 oder 4 breitere Karten */
.choice-card-grid-wide {
  grid-template-columns: repeat(4, 1fr);
}
.choice-card {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(30, 58, 95, 0.18);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  letter-spacing: -0.005em;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(30, 58, 95, 0.04);
}
.choice-card:hover {
  background: rgba(30, 58, 95, 0.05);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(30, 58, 95, 0.10);
}
.choice-card.selected {
  background: var(--accent);
  color: #FBF8F3;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.22);
  font-weight: 600;
}
.choice-card.selected:hover {
  background: #2a4970;
  border-color: #2a4970;
}

@media (max-width: 720px) {
  .choice-card-grid-narrow {
    grid-template-columns: repeat(3, 1fr);
  }
  .choice-card-grid-wide {
    grid-template-columns: repeat(2, 1fr);
  }
  .choice-card {
    font-size: 0.95rem;
    padding: 14px 8px;
    min-height: 50px;
  }
}

/* ──────────────────────────────────────
   TABLET-OPTIMIERUNG (iPad / Android-Tablets)
   721px–1024px Breite — bessere Touch-Targets und Lesbarkeit
   ────────────────────────────────────── */
@media (min-width: 721px) and (max-width: 1024px) {
  /* SAM/Likert-Buttons noch etwas größer */
  .sam-btn, .likert-btn {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }

  /* Anchor-Labels größer und gut lesbar */
  .sam-anchor, .likert-anchor {
    font-size: 14px;
    max-width: 24%;
  }

  /* Choice-Cards größer */
  .choice-card {
    min-height: 64px;
    font-size: 1.05rem;
  }

  /* Pol-Choice (4-Wahl) Buttons größer */
  .pol-choice button {
    min-height: 56px;
    font-size: 14.5px;
  }

  /* Block-Karten etwas mehr Atmung */
  .block-card {
    padding: var(--sp-5);
  }

  /* Form-Inputs größer für Touch */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;  /* verhindert iOS-Zoom beim Fokus */
    min-height: 48px;
  }

  /* Buttons in btn-row: größer */
  .btn-primary, .btn-secondary {
    font-size: 15.5px;
    padding: 14px 28px;
    min-height: 48px;
  }
}

/* ──────────────────────────────────────
   VIDEO REPLAY-BUTTON (erscheint mittig nach Ende)
   ────────────────────────────────────── */
.video-replay-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: #FBF8F3;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: all 0.2s ease;
  z-index: 3;
  letter-spacing: -0.005em;
}
.video-replay-big:hover {
  background: #2a4970;
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.video-replay-big:active {
  transform: translate(-50%, -50%) scale(0.97);
}
.video-replay-big.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}
.video-replay-icon {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
}
.video-replay-label {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .video-replay-big {
    font-size: 14px;
    padding: 12px 20px;
  }
  .video-replay-icon {
    font-size: 20px;
  }
}

/* PiP-Modus: Replay-Button kompakter */
.stim-player.is-stuck .video-replay-big {
  font-size: 11px;
  padding: 8px 14px;
  gap: 6px;
}
.stim-player.is-stuck .video-replay-icon {
  font-size: 14px;
}
.stim-player.is-stuck .video-replay-label {
  display: none;  /* Im Mini-Player nur Symbol */
}

/* Pulse-Animation für fehlende Felder beim Klick auf disabled Weiter-Button */
.field-pulse {
  animation: fieldPulse 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fieldPulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 60, 50, 0); }
  20%  { box-shadow: 0 0 0 6px rgba(220, 60, 50, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(220, 60, 50, 0); }
}
.btn-primary.is-disabled:hover {
  background: rgba(30, 58, 95, 0.10);
  color: rgba(30, 58, 95, 0.55);
  border-color: rgba(30, 58, 95, 0.18);
  transform: none;
  box-shadow: none;
}

/* ──────────────────────────────────────
   ÜBERGANGS-RANGE 721-899px (kleine Tablets / Querformat-Phones)
   SAM/Likert-Skalen brauchen weiterhin das Mobile-Layout (Anchors oben),
   weil 9 Buttons + 2 Anchors in einer Reihe nicht genug Platz haben.
   ────────────────────────────────────── */
@media (min-width: 721px) and (max-width: 899px) {
  .sam-row, .likert-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "btns btns";
    gap: 4px 8px;
    align-items: center;
  }
  .sam-anchor, .likert-anchor {
    max-width: none !important;
  }
  .sam-anchor-left, .likert-anchor-left {
    grid-area: left;
    text-align: left !important;
    font-size: 13.5px !important;
    line-height: 1.3;
    white-space: normal;
  }
  .sam-anchor-right, .likert-anchor-right {
    grid-area: right;
    text-align: right !important;
    font-size: 13.5px !important;
    line-height: 1.3;
    white-space: normal;
    margin-left: 0 !important;
  }
  .sam-buttons, .likert-buttons {
    grid-area: btns;
    width: 100%;
    display: flex;
    gap: 6px;
    justify-content: space-between;
  }
  .sam-btn, .likert-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: 56px;
    height: 48px;
    font-size: 14.5px;
    padding: 0;
  }
}

/* ──────────────────────────────────────
   STIMULUS-PANEL: backdrop-filter OFF für Sticky-Player
   `backdrop-filter` macht den Vorfahren zum containing block für
   position:fixed. Das bricht Sticky-Player. Auf Stimulus-Seiten
   verzichten wir daher auf den Glass-Effekt.
   Wir nutzen :has() (modern) UND eine Body-Klasse (Fallback für
   ältere Safari-Versionen) per JS gesetzt.
   ────────────────────────────────────── */
body:has(.stim-player) .panel.glass-strong,
body.stimulus-page .panel.glass-strong {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ──────────────────────────────────────
   PAUSE-LINK auf Stimulus-Seite (dezent unter Hauptbuttons)
   ────────────────────────────────────── */
.pause-link-row {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}
.btn-pause-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid rgba(30, 58, 95, 0.18);
  color: var(--accent);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s ease;
  letter-spacing: 0.005em;
  opacity: 0.75;
}
.btn-pause-link:hover {
  background: rgba(30, 58, 95, 0.06);
  border-color: var(--accent);
  opacity: 1;
  transform: translateY(-1px);
}
.btn-pause-link .pause-icon-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -0.5px;
}

/* ──────────────────────────────────────
   PAUSED-MODAL (Pop-up Overlay über Stimulus-Seite)
   ────────────────────────────────────── */
.paused-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Bug #119: scrollable bei kleinen Viewports — sonst kann content
     (besonders bei offener Tastatur auf Mobile) abgeschnitten werden. */
  overflow-y: auto;
  animation: pausedModalFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pausedModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.paused-modal-card {
  background: rgba(251, 248, 243, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6);
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(26, 24, 20, 0.32),
              0 8px 24px rgba(26, 24, 20, 0.16);
  animation: pausedModalSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pausedModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.paused-hourglass {
  font-size: 64px;
  line-height: 1;
  margin: var(--sp-3) auto var(--sp-5);
  animation: hourglassFlip 4s ease-in-out infinite;
  display: inline-block;
}
@keyframes hourglassFlip {
  0%, 45%   { transform: rotate(0deg); }
  50%, 95%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}

/* Body-Scroll sperren während Modal offen */
body.modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .paused-hourglass {
    font-size: 56px;
  }
  .paused-modal-card {
    padding: var(--sp-6) var(--sp-4);
  }
}

/* ──────────────────────────────────────
   BUG #118: prefers-reduced-motion
   Respektiert OS-Setting "Bewegung reduzieren" für Nutzer mit Motion-Sensitivität.
   Behält essentielle Transitions (Modal-Öffnen) aber deaktiviert dekorative Animationen.
   ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}