/* ============================================================
   Wissenschaftliche Arbeit von Raoul-Marc Dehe, 2026
   ============================================================
   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
   ============================================================ */

/* v198 Privacy-Fix: Google Fonts ENTFERNT — fonts.googleapis.com wurde von
   Safari ITP als Cross-Site-Tracker klassifiziert und verursachte die
   "Datenschutzmaßnahmen reduzieren"-Warnung beim Reload.
   Stattdessen: Bunny Fonts (privacy-friendly drop-in replacement, GDPR-compliant,
   no logging, no tracking). Plus großzügige System-Font-Fallbacks falls
   Bunny temporär nicht erreichbar ist.
   Fraunces (war früher Display-Font) komplett raus — wurde de facto eh
   nirgendwo aktiv verwendet (var(--font-display) zeigte auf Geist). */
@import url('https://fonts.bunny.net/css?family=geist:300,400,500,600|geist-mono: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);

  /* ─── DANGER (Validierungsfehler) ─── */
  --danger:          #C44;

  /* ─── 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;

  /* v198 Privacy-Fix: Robuste Fallback-Stacks. Falls Bunny Fonts Geist mal
     nicht ausliefert (temporäre Bunny-Probleme, oder Geist noch nicht im
     Bunny-Katalog), greift der System-Font-Stack:
       - macOS/iOS: -apple-system → San Francisco
       - Windows:   "Segoe UI"
       - Android:   Roboto
       - Linux:     system-ui generic
     Das ist optisch sehr nahe an Geist und bleibt sauber lesbar.
     'system-ui' am Ende ist generischer Fallback für alle OS. */
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* v198 KRITISCHER Bug-Fix: scroll-behavior:smooth ENTFERNT. Alle
     programmatischen Scrolls (scrollIntoView, window.scrollTo) wurden sonst
     animiert — sah aus wie "die Seite blitzt auf und scrollt runter".
     Ohne smooth sind Scrolls instantan und vorhersagbar, plus der
     Scroll-Watchdog kann seine scrollTo(0,0)-Resets effektiv durchsetzen. */
  /* 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;
  /* v205: auch vertikalen Bounce-Overscroll sperren. Safaris elastisches
     Überscrollen an der Scroll-Schwelle trug zum Flacker-Effekt bei. */
  overscroll-behavior-y: none;
  width: 100%;
  /* v205 Bug-Fix: max-width:100vw entfernt. Auf macOS rechnet 100vw die
     Scrollbar mit ein, width:100% (von <html>) aber nicht. An genau der
     Schwellenbreite (z.B. Split-Screen-Hälfte) entstand dadurch ein
     Oszillations-Loop: Scrollbar erscheint → Viewport schrumpft horizontal
     → body bleibt 100vw breit (= Original) → zu breit → horizontale
     Scrollbar erscheint → vertikaler Platz schrumpft → Layout-Shift → loop.
     Sichtbar als minimales „Zittern“ des Inhalts. width:100% + overflow-x:
     hidden reichen vollkommen aus, max-width:100vw war überflüssig und
     hat aktiv geschadet. */
  /* v198 Bug-Fix: Browser Scroll Anchoring deaktivieren. Sonst kompensiert
     der Browser bei Layout-Shifts (z.B. PiP-Player-Setup auf Stimulus-Seite,
     Wirkprofil-Section-Aufklappen, etc.) automatisch durch Auto-Scroll. Das
     führte zu "Seite scrollt runter ohne dass User etwas getan hat" auf
     Stimulus-Seite und potenziell anderen Pages. Wir kontrollieren Scroll
     selbst via render() → scrollTo(0,0) + scrollToNextDemoField. */
  overflow-anchor: none;
}

/* ──────────────────────────────────────
   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);
  /* v205: Eigene, stabile GPU-Compositing-Ebene erzwingen. Im Safari-
     Privatmodus (gedrosselte GPU-Beschleunigung) flackerte der schwere
     blur()-Stack dieser fixed-Layer an der Scroll-Schwelle. translateZ(0)
     + backface-visibility isolieren die Ebene und stabilisieren das Rendering. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.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.10;
  /* v205: mix-blend-mode:overlay entfernt. Auf einem fixed-Element über
     scrollendem Inhalt ist Overlay-Blend ein bekannter Safari-Flacker-Auslöser
     (besonders im Privatmodus ohne volle GPU-Beschleunigung). Bei dieser
     geringen Deckkraft ist der visuelle Unterschied minimal. Zusätzlich eigene
     GPU-Ebene erzwingen für stabiles Compositing. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  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);
  /* v205 Bug-Fix: backdrop-filter entfernt. Über den fixed-Hintergründen
     (.bg-mesh/.bg-grain, die selbst blur(100px)+mix-blend-mode tragen) führte
     der Blur an der Scroll-Schwelle (z.B. Split-Screen-Höhe) zu GPU-Compositing-
     Flackern ("Bild zittert"). Da der Panel-Hintergrund zu 85–95 % deckend ist,
     war der Blur ohnehin kaum sichtbar — Entfernen ändert das Bild praktisch
     nicht, beseitigt aber das Zittern und passt zur Design-Intention oben
     ("gebrochenes Weiß statt Glaseffekte, wir wollen Ruhe"). */
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.glass-strong {
  background: var(--glass-lighter);
  /* v205 Bug-Fix: backdrop-filter entfernt (siehe .glass oben). */
  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);
  /* v205 Bug-Fix: backdrop-filter entfernt (siehe .glass). Sticky-Element +
     Blur über fixed-Hintergrund = Flacker-Risiko beim Scrollen. Bei 85 %
     Deckkraft war der Blur auf dem 8px-Balken ohnehin nicht wahrnehmbar. */
  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);
}

/* v198 KRITISCHER Bug-Fix: .stage hatte `animation: stage-in 0.55s ...`,
   aber @keyframes stage-in war nirgends definiert. Auf einigen Browsern
   führte das zu einem visuellen "Aufblitzen" beim Page-Wechsel.
   Animation komplett entfernt. Keine Page-Transition mehr. */
.stage {
  /* nichts mehr */
}

/* ──────────────────────────────────────
   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.05rem;
  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;
}

/* Bug #242 (v179) + #243 (v181): Auf bestimmten Page-Layouts soll der
   Lead-Text die volle Container-Breite nutzen — sonst entsteht ein zu
   schmaler Block mit großem leeren Bereich rechts. Page-spezifische
   Overrides statt globaler Änderung, damit andere Stellen (z.B.
   zentrierte Texte mit Atemluft) nicht betroffen sind.
   !important nötig wegen Spezifitäts-Konflikt mit dem
   .lead-small[style*="text-align: center"] Selector. text-align bleibt
   wie inline-style gesetzt (zentriert vs. linksbündig je nach Page). */
.demografie-panel .lead-small,
.blockinfo-panel .lead-small,
.dsgvo-panel .lead-small {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.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. 20–25 Min.") und das Layout wirkt unruhig. */
  min-height: 2.7em;
}

/* 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);
  /* v205: Gleiche Breite wie .welcome-box darüber. Vorher max-width:640px +
     margin auto → der Kasten war auf breiteren Viewports schmaler als die Box
     darüber. Jetzt volle Container-Breite, linksbündig wie .welcome-box. */
  margin: var(--sp-4) 0;
  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: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  /* v198 Update 5: 20px Puffer beim scrollIntoView({block:'start'}) —
     Section sitzt nicht direkt am Viewport-Rand sondern leicht abgesetzt. */
  scroll-margin-top: 20px;
  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);
}

/* Bug #174 (v176): Generische input-error-Visualisierung für alle Inputs
   und Container (z.B. Verfügbarkeits-Matrix). Konsistente rote Markierung
   plus sanfte Pulsing-Animation, damit User sofort sieht wo das Problem ist. */
input.input-error,
textarea.input-error,
select.input-error {
  border-color: var(--danger, #C44) !important;
  background: rgba(196, 68, 68, 0.05) !important;
  animation: input-error-pulse 0.5s ease-out;
}
.verfueg-matrix-wrap.input-error {
  outline: 2px solid var(--danger, #C44);
  outline-offset: 4px;
  border-radius: var(--radius-md);
  animation: input-error-pulse 0.5s ease-out;
}
@keyframes input-error-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}
.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;
}

/* ──────────────────────────────────────
   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-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-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; }

/* ──────────────────────────────────────
   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;
}

/* ──────────────────────────────────────
   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);
}
.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;
  /* Sticky-Player auf ALLEN Bildschirmen aktiv. Auf Mobile kleinere PiP-Größe. */
  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);
  /* Bug #167f (v176): Container max-height entfernt — sie war 50vh und damit
     auf kleinen Browser-Höhen (z.B. 13" MacBook 830px = 415px) KLEINER als
     das Bild selbst (max-height: min(70vh, 450px)). Resultat: Bild ragte
     aus dem Container raus und überlappte mit dem "Beantworte..."-Text
     darunter. Jetzt: Container passt sich Inhalt an, kein Overlap mehr. */
  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;
}
/* 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)
*/
.stim-player video,
.stim-player iframe {
  max-height: 50vh;
  width: 100%;
  /* v198 Bug-Fix: aspect-ratio 16/9 als Default — Browser reserviert Platz
     VOR dem Video-Load. Wenn das echte Video andere Ratio hat, korrigiert
     es sich automatisch. Verhindert Layout-Shift beim ersten Load. */
  aspect-ratio: 16 / 9;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stim-player img {
  /* Bug #167b/c/d/e (v176): max-height als min(vh, px) damit Browser-Zoom (Cmd+)
     das Bild auch echt vergrößert. Pure vh skaliert beim Zoom NICHT.
     Mit dem px-Cap als unterer (kleinerer) Wert: bei normalem Zoom greift
     px → der wächst mit Browser-Zoom mit.
     Bug #167e: max-height deutlich reduziert — User-Feedback "Bilder
     überlappen mit Beantworte..."-Frage. Jetzt definitiv kein Overlap mehr,
     Frage + erste Skala direkt im initialen Viewport sichtbar.
     NUR für Bilder — Videos bleiben kompakt (45vh). */
  max-height: min(60vh, 280px);
  /* v198 KRITISCHER Bug-Fix: aspect-ratio als Default — der Browser reserviert
     Platz vor dem Bild-Load basierend auf width × aspect-ratio. Wenn das echte
     Bild andere Ratio hat, korrigiert sich's automatisch. Damit verhindert
     wir Layout-Shift beim ersten Bild-Aufruf, der bisher den Watchdog kurz
     triggern ließ (sichtbarer "Blitz"). 4/3 ist als Default am robustesten
     für typische Plakate/Fotos. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  width: 100%;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Video bleibt kompakt — nicht größer machen wie Bilder.
   Videos werden abgespielt und konsumiert, nicht im Detail untersucht. */
.stim-player video {
  max-height: 45vh;
}

/* Bug #167 (v176): Bilder auf größeren Bildschirmen etwas größer.
   Bug #167e: ABER deutlich kleiner als vorher — Frage muss komplett
   sichtbar sein ohne Overlap.
   Bug #167b: min(vh, px) für Browser-Zoom-Support — bei Cmd+ wächst
   das Bild trotzdem zusätzlich. */
@media (min-width: 720px) {
  .stim-player img {
    max-height: min(65vh, 380px);
  }
}
@media (min-width: 1024px) {
  .stim-player img {
    max-height: min(70vh, 450px);
  }
}
.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.)
   
   Bug #216 (v176): PiP wird KLEIN und im right-Margin (beiger Bereich
   außerhalb des Container-Rahmens) positioniert. Auf großen Displays
   (≥1220px) berechnet calc() die exakte Position rechts vom Container.
   
   Bug #217 (v176): body.has-stuck-player als Prefix damit die Spezifität
   höher ist als die Compact-Mode-Regeln (`.stimulus-panel .stim-player`).
   Sonst gewinnt Compact-Mode bei gleicher Spezifität durch spätere
   Position im CSS — und der PiP wird zur Original-Größe gerendert. */
body.has-stuck-player .stim-player.is-stuck {
  position: fixed !important;
  top: 16px !important;
  /* calc((100vw - 1220px) / 2) = Margin-Bereich rechts vom 980px-Container,
     minus 120px (PiP-Breite) und 60px Buffer. max(16px, ...) verhindert
     negativen Wert auf kleineren Displays. */
  right: max(16px, calc((100vw - 1220px) / 2)) !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  /* Klein gehalten — passt in den right-Margin auf Standard-Desktops */
  width: 120px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: none !important;
  height: auto !important;
  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);
}
/* Bug #217 (v176): is-stuck-Regeln mit body.has-stuck-player prefix für
   höhere Spezifität (0,2,2 statt 0,2,1) — sonst gewinnt der Compact-Mode
   `.stimulus-panel .stim-player img` (0,2,1, !important) bei gleicher
   Spezifität durch späteres Auftreten im CSS und das PiP-Bild bleibt groß. */
body.has-stuck-player .stim-player.is-stuck video,
body.has-stuck-player .stim-player.is-stuck iframe {
  max-height: 70px !important;
  height: auto !important;
  aspect-ratio: 16/9;
}
body.has-stuck-player .stim-player.is-stuck img {
  max-height: 80px !important;
  width: 100% !important;
}

/* Bug #215/#217 (v176): !important + höhere Spezifität damit Compact-Mode
   die audio-card padding nicht überschreibt. */
body.has-stuck-player .stim-player.is-stuck .audio-card,
body.has-stuck-player .stim-player.is-stuck .audio-player-custom {
  padding: var(--sp-2) var(--sp-3) !important;
}
.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;
}

/* Bug #216 (v176): Die alte ≥1100px-Regel ist nicht mehr nötig — die
   calc-Position rückt den PiP automatisch ins right-Margin auf großen
   Displays. PiP-Breite bleibt überall 120px. */

/* Auf Mobile (≤ 480px): PiP kompakter — oben rechts mit kleinen Abständen */
@media (max-width: 480px) {
  .stim-player.is-stuck {
    width: 110px !important;
    right: 12px !important;
    /* v198 Finding #8: safe-area-inset-top für iPhone X+ — sonst sitzt
       der PiP unter Notch/Dynamic-Island bei Vollbild-Browser-Modus.
       Plus etwas Buffer (8px) gegen iOS Safari URL-Bar. */
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    bottom: auto !important;
  }
  .stim-player.is-stuck img {
    max-height: 70px !important;
  }
  .stim-player.is-stuck .audio-play-big,
  .stim-player.is-stuck .video-play-big {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  /* Bug #226 (v176): Welcome-Page für iPhone weiter kompaktiert,
     damit alle drei Absätze + Welcome-Box + Button auf einen
     Screen passen ohne zu scrollen. */
  .welcome-panel .lead {
    font-size: 0.88rem;
    line-height: 1.45;
  }
  .welcome-panel h1 {
    font-size: 1.35rem;
    margin-bottom: var(--sp-3);
  }
  .welcome-panel .eyebrow { margin-bottom: var(--sp-2); }
  .welcome-panel .welcome-lead-row {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-3);
  }
  .welcome-panel .welcome-lead-content {
    gap: 8px;
  }
  .welcome-panel { padding: var(--sp-3) var(--sp-3); }

  /* ============================================================
     Bug #230 (v176): iPhone Layout-Lock — alle relevanten Container
     hart auf 100vw begrenzen, damit beim Page-Wechsel (besonders nach
     Pinch-Zoom auf vorheriger Seite) nichts mehr horizontal überlappen
     kann. Belt-and-suspenders-Ansatz: width-Constraints, box-sizing,
     word-break, overflow-x ALLE redundant.
     ============================================================ */
  #app,
  .panel,
  .panel-narrow,
  .welcome-panel,
  .stim-panel,
  .item-block,
  .items-section,
  .stim-player,
  .sam-row,
  .likert-row,
  .sam-buttons,
  .likert-buttons,
  .pol-choice,
  .btn-row,
  .welcome-box,
  .info-grid,
  .hiw-row {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* Item-Block: kompaktes Padding auf iPhone, damit Inhalt mehr Platz hat */
  .item-block {
    padding: var(--sp-3) !important;
  }

  /* Lange Wörter / URLs / Stimulus-Texte umbrechen statt überlaufen */
  .item-question,
  .stim-text,
  .lead,
  .welcome-lead-text,
  .pol-choice-label,
  .pol-choice-sub,
  .sam-anchor,
  .likert-anchor {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Sam/Likert-Skala: Gap noch knapper damit alle 9 Buttons reinpassen */
  .sam-buttons,
  .likert-buttons {
    gap: 3px !important;
    /* Bug #232 (v176): Vertikales Overflow erlauben damit Box-Shadow
       der selected-Buttons nicht abgeschnitten wird */
    overflow-y: visible;
    padding: 4px 0;
  }
  .sam-btn,
  .likert-btn {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    font-size: 12.5px !important;
  }

  /* Bug #232 (v176): Auf Mobile (Touch-Geräte) den Scale-Transform für
     selected/hover ausschalten — sonst wächst der Button um 12% und wird
     vom Container oben+unten abgeschnitten. Selected-State bleibt durch
     Farbe + Border + Box-Shadow eindeutig erkennbar.
     Hover-Scale ist auf Touch-Geräten ohnehin sinnlos (kein Hover). */
  .sam-btn:hover,
  .likert-btn:hover,
  .sam-btn.selected,
  .likert-btn.selected {
    transform: none !important;
  }

  /* Bug #240 (v178): Selber Fix für Pol-Choice-Buttons (emotional/erzählend/
     dialogisch/informativ). Beim Auswählen ragten sie durch translateY(-1px)
     + 14px box-shadow oben über den Container hinaus → grafisch abgeschnitten.
     Auf Touch-Geräten kein Verschieben mehr — Selected-State bleibt durch
     Farbwechsel (Accent-Blau-Background + weißer Text) klar erkennbar. */
  .pol-choice-btn:hover,
  .pol-choice-btn.selected {
    transform: none !important;
  }
  /* Plus: Container braucht Top/Bottom-Padding damit Box-Shadow Platz hat */
  .pol-choice {
    padding: 4px 0;
  }
}

/* Bug #177 (v176): Auf 481-700px Browser-Breite (kleine Tablets, schmale
   Browser-Fenster im Splitview, DevTools-Responsive-Modus) den PiP-Player
   verkleinern — sonst überlappt er mit der Items-Heading + erster Frage.
   Vorher war der PiP hier 240px breit (Default), zu groß für den Bereich. */
@media (min-width: 481px) and (max-width: 700px) {
  .stim-player.is-stuck {
    width: 170px;
    top: 12px;
    right: 12px;
  }
  .stim-player.is-stuck img {
    max-height: 100px;
  }
  .stim-player.is-stuck .audio-play-big,
  .stim-player.is-stuck .video-play-big {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
}

/* v198 Finding #8: Sehr schmale Smartphones (iPhone SE 1. Gen = 320px,
   ältere Android-Geräte ≤380px Breite): PiP noch kleiner, sonst nimmt er
   ein Drittel der Bildschirm-Breite ein und kann mit Browser-UI / Page-
   Content kollidieren. Diese Regel ist NACH dem 480px-Block, sodass sie
   bei schmalen Screens überschreibt (Cascade-Order). */
@media (max-width: 380px) {
  .stim-player.is-stuck {
    width: 88px !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  }
  .stim-player.is-stuck img {
    max-height: 56px !important;
  }
  .stim-player.is-stuck .audio-play-big,
  .stim-player.is-stuck .video-play-big {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }
  /* Audio-Card im PiP: padding reduzieren damit play-button + time hineinpassen */
  body.has-stuck-player .stim-player.is-stuck .audio-card,
  body.has-stuck-player .stim-player.is-stuck .audio-player-custom {
    padding: 8px 6px !important;
  }
  .stim-player.is-stuck .audio-time {
    font-size: 9px !important;
  }
}

/* Bug #177/#182/#190a (v176): Wenn der PiP-Player aktiv ist (body.has-stuck-player),
   bekam die Items-HEADING rechts Padding — damit der Heading-Text "Bitte
   beantworte die folgenden Fragen..." nicht hinter dem PiP-Player verschwindet.
   Bug #202 (v176): ENTFERNT — durch den Smart-Stop (Bug #197) landet die
   Heading visuell oberhalb des PiP-Bereichs (bzw. nur leicht im unteren
   Bereich), nicht mehr direkt rechts daneben. Padding-right ist daher
   nicht mehr nötig und stauchte den Text unnötig auch wenn der PiP gar
   nicht direkt neben der Heading ist. */

/* Bug #183 (v176): Wenn der PiP-Player aktiv ist, rückt die Items-Section
   nach oben — ohne den großen leeren Raum zwischen PiP und "Bitte beantworte
   die folgenden Fragen…"-Heading. Effekt: PiP oben rechts, Heading direkt
   links daneben auf gleicher Höhe.
   Bug #188 (v176): ABER kleiner Puffer (100px) für iOS Momentum-Scroll.
   Sonst scrollt der iOS-User mit Schwung über die ersten 1-2 Fragen hinaus,
   ohne sie zu sehen. 100px sind genug für moderaten Schwung, ohne den leeren
   Raum-Eindruck wieder zurückzubringen. Plus: padding-top + border weg im
   PiP-Modus (sind im normalen Modus für visuelle Trennung wichtig). */
/* Bug #183/#188 (v176): Wenn der PiP-Player aktiv ist, rückt die Items-Section
   nach oben — ohne den großen leeren Raum zwischen PiP und "Bitte beantworte
   die folgenden Fragen…"-Heading. Effekt: PiP oben rechts, Heading direkt
   links daneben auf gleicher Höhe.
   Bug #188 (v176): Puffer (250px) für iOS Momentum-Scroll. Sonst scrollt der
   iOS-User mit Schwung über die ersten Fragen hinaus, ohne sie zu sehen.
   Plus: padding-top + border weg im PiP-Modus (sind im normalen Modus für
   visuelle Trennung wichtig). */
body.has-stuck-player .items-section {
  margin-top: 250px !important;
  padding-top: 0 !important;
  border-top-color: transparent !important;
}

/* Bug #212/#213 (v176, ENTFERNT): 500px Buffer auf Desktop war Workaround
   für PiP-Item-Overlap. Mit Bug #216 (PiP außerhalb des Containers) ist
   der Buffer nicht mehr nötig — items-section bleibt 250px wie immer. */

/* Bug #209 (v176, ENTFERNT): padding-right auf items-section verschob alle
   Items nach links — sah aber unausgewogen aus mit großem Whitespace rechts.
   Bug #210 (v176, ENTFERNT): PiP semi-transparent — User wollte Original-
   Optik. Stattdessen Bug #211: einmaliger Auto-Scroll beim Aktivieren des
   PiP-Modus, der die erste Frage einmalig unter den PiP positioniert.
   Danach scrollt der User frei. */

/* Bug #203 (v176): scroll-snap auf items-heading ENTFERNT.
   Vorher (Bug #188c): scroll-snap-align: start sollte iOS Momentum-Scroll
   sanft an der Heading stoppen. ABER: Mit Bug #197 stoppt der JS-Hard-Stop
   bei der ERSTEN FRAGE (nicht der Heading). Die zwei konkurrierten:
   CSS würde zur Heading snappen, JS würde zur ersten Frage scrollen.
   Plus: scroll-snap auf iOS Safari unzuverlässig (siehe Bug #188d).
   Der JS-Hard-Stop ist die zuverlässige, alleinige Lösung. */

/* 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-icon {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
}
.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;
}
/* v202: Nutzerfreundliche Bild-Fehlermeldung mit Reload-Button */
.placeholder-title {
  font-family: var(--font-display, inherit);
  font-size: 15px;
  color: var(--text, #2A241D);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 14px;
}
.img-reload-btn {
  display: inline-block;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--navy, #1E3A5F);
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: opacity 0.15s ease;
  min-height: 44px;
}
.img-reload-btn:hover { opacity: 0.88; }
.img-reload-btn:active { opacity: 0.75; }
/* v204: Quellen-Bestätigungscode auf der Abschluss-Seite */
.sc-code-value {
  font-family: var(--font-mono, monospace);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--navy, #1E3A5F);
  background: rgba(30,58,95,0.07);
  border: 1px dashed rgba(30,58,95,0.35);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
  margin: 0 0 12px 0;
  user-select: all;
  word-break: break-all;
}
.sc-code-link {
  display: inline-block;
  font-weight: 500;
  color: var(--navy, #1E3A5F);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-code-link:hover { opacity: 0.8; }

/* ──────────────────────────────────────
   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;
}
.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);
}

/* 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;
}

/* ──────────────────────────────────────
   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);
}

/* v198 Finding #1: Submit-Error-Banner. Erscheint am unteren Bildschirmrand
   auf der Danke-Page, falls das Sheet-Webhook fehlschlägt. Banner kann
   bewusst nicht weggeklickt werden — der User soll den Tab offen halten. */
.submit-error-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #FFF3E0;
  border-top: 2px solid #E65100;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
  padding: 14px 16px env(safe-area-inset-bottom, 14px);
  animation: submit-error-banner-in 0.35s ease-out;
}
@keyframes submit-error-banner-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.submit-error-banner-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.submit-error-banner-text {
  flex: 1 1 280px;
  font-size: 14px;
  color: #3E2723;
  line-height: 1.45;
}
.submit-error-banner-text strong {
  color: #E65100;
}
.submit-error-banner-btn {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: #E65100;
  color: #FFF;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease;
}
.submit-error-banner-btn:hover {
  background: #BF360C;
}
.submit-error-banner-btn:active {
  background: #A0320B;
}
@media (max-width: 480px) {
  .submit-error-banner-btn {
    width: 100%;
  }
}

/* ──────────────────────────────────────
   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: 0.95rem;
    line-height: 1.5;
    margin-bottom: var(--sp-2);
  }

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

  /* Welcome-Lead-Row: kompaktere Margins für Mobile */
  .welcome-panel .welcome-lead-row {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-3);
  }

  /* Bug #226 (v176): Welcome-Lead-Content kompakter Abstand zwischen
     den drei Absätzen — passt auf einen iPhone-Screen ohne Scrollen. */
  .welcome-panel .welcome-lead-content {
    gap: var(--sp-2);
  }

  /* 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; }

  /* Progress-Indicator auf Welcome: kompakter */
  .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; }

  /* 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;
  }
  /* Bug #232 (v176): Touch-Geräten kein Scale-Transform — Button würde
     sonst über die Grid-Zelle hinausragen und vertikal abgeschnitten. */
  .sam-btn:hover,
  .likert-btn:hover,
  .sam-btn.selected,
  .likert-btn.selected {
    transform: none !important;
  }
  .sam-buttons, .likert-buttons {
    padding: 4px 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);
}

/* 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;
}
/* 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-cream);
  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; }
}

/* ──────────────────────────────────────
   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; }
}

/* ──────────────────────────────────────
   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-LEAD-ROW mit Akzent-Strich + Lead-Texten
   ────────────────────────────────────── */
/* Lead-Row mit Akzent-Strich links + Lead-Text-Block rechts */
.welcome-lead-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Bug #225 (v176): Eleganter vertikaler Akzent-Strich links neben den
   Lead-Absätzen — clever und minimalistisch. Verlauf von rot oben zu
   transparent unten gibt Tiefe. Kein Bild mehr nötig. */
.welcome-lead-content {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  align-self: stretch;
}
.welcome-lead-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  /* Bug #228 (v176): Verlauf UMGEKEHRT — oben blass, unten kräftig.
     Führt das Auge zum CTA-Absatz, der unten steht. Klassisches
     Eye-flow-Prinzip in Richtung Action-Punkt. */
  background: linear-gradient(to bottom,
    rgba(30, 58, 95, 0.15) 0%,
    rgba(30, 58, 95, 0.55) 50%,
    rgba(30, 58, 95, 0.85) 100%);
  border-radius: 2px;
}
.welcome-lead-text {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 0;
  align-self: stretch;
  /* Bug #241 (v179): max-width entfernt, das von .lead geerbt wurde (56ch).
     Das machte die Lead-Absätze nur ~60% breit, mit großem leeren Bereich
     rechts. Im Welcome-Layout mit Akzent-Strich soll der Text bündig mit
     der Headline darüber laufen — also volle Container-Breite. */
  max-width: none;
}

/* Bug #228 (v176): CTA-Absatz in Theme-Blau — hebt den Mithilfe-Aufruf
   visuell vom restlichen Lead-Text ab. Passend zum Akzent-Strich. */
.welcome-lead-cta {
  color: #1E3A5F;
  font-weight: 500;
}

/* Mobile (≤720): Strich näher dran */
@media (max-width: 720px) {
  .welcome-lead-content {
    padding-left: var(--sp-3);
    gap: var(--sp-2);
  }
}

@media (max-width: 720px) {
  .welcome-lead-row {
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    align-items: flex-start;
  }
  .welcome-lead-text {
    padding-top: 0;
  }
}
.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) {
  .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. 20–25 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;
}

/* 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;
}

/* ──────────────────────────────────────
   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;
  }
}

/* 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-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;
}
/* v198 Finding #2: Error-State für Audio-Lade-Fehler */
.audio-time.audio-time-error {
  color: #C62828;
  font-size: 12px;
  font-weight: 500;
}

@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);
}
/* Bug #239 (v177): Layout-Varianten für unterschiedliche Optionsanzahlen.
   Werden dynamisch via choiceCardGrid(..., 'narrow' | 'wide', ...) gewählt.
   - narrow: für Alter (5 Optionen) — schmalere Karten, alle in einer Reihe
   - wide:   für Geschlecht (4 Optionen) — breitere Karten in einer Reihe */
.choice-card-grid-narrow {
  grid-template-columns: repeat(5, 1fr);
}
.choice-card-grid-wide {
  grid-template-columns: repeat(4, 1fr);
}
/* Mobile: 2-Spalten-Layout damit alles lesbar bleibt */
@media (max-width: 720px) {
  .choice-card-grid-narrow,
  .choice-card-grid-wide {
    grid-template-columns: repeat(2, 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 {
    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);
}
.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);
}
.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);
}
.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;
}
/* 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;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #164 (v176): Welcome-Page kompakter auf Desktop mit begrenzter
   Höhe (13" MacBook = ~820px effektive Höhe nach Browser-Chrome).
   ──────────────────────────────────────────────────────────────
   Problem (gemeldet 9.5.): Auf MacBook bei 100% Browser-Zoom passt
   nicht alles auf einen Bildschirm — User muss scrollen um
   "Ich mach mit"-Button zu sehen. Mobile/iPad ist OK weil dort
   vertikales Scrollen erwartet wird.
   
   Lösung: NUR auf Desktop-Größen mit begrenzter Höhe (Laptops bis
   ~900px) die Welcome-Spacings + Headline reduzieren. Andere Pages
   (Stakeholder, Stimulus, etc.) bleiben unangetastet — die haben
   keine "alles auf einen Blick"-Anforderung.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-height: 950px) {
  /* Headline kleiner — nicht mehr clamp(...3.4rem) sondern fix kleiner */
  .welcome-panel .title-display {
    font-size: clamp(1.9rem, 3.1vw, 2.5rem) !important;
    margin-bottom: var(--sp-4) !important;
  }
  /* Eyebrow */
  .welcome-panel .eyebrow {
    margin-bottom: var(--sp-3) !important;
  }
  /* Lead-Row */
  .welcome-panel .welcome-lead-row {
    margin-top: var(--sp-3) !important;
    margin-bottom: var(--sp-4) !important;
  }
  .welcome-panel .lead {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
  }
  /* Welcome-Box (WAS DICH ERWARTET) */
  .welcome-panel .welcome-box {
    padding: var(--sp-3) var(--sp-4) !important;
    margin: var(--sp-4) 0 !important;
  }
  .welcome-box-heading {
    margin-bottom: var(--sp-3) !important;
    font-size: 11px !important;
  }
  .welcome-box-divider {
    margin: var(--sp-3) 0 !important;
  }
  /* hiw-row (Beitrag sehen / Fragen beantworten) */
  .welcome-panel .hiw-row {
    margin: var(--sp-3) 0 !important;
  }
  .welcome-panel .hiw-step-icon {
    width: 52px !important;
    height: 52px !important;
  }
  /* Info-Karten */
  .welcome-panel .info-grid {
    gap: var(--sp-3) !important;
  }
  .welcome-panel .info-card-icon {
    height: 25px !important;
    font-size: 1.15rem !important;
  }
  .welcome-panel .info-card-title {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }
  .welcome-panel .info-card-text {
    font-size: 12.5px !important;
    min-height: 2.7em !important;
  }
  /* Welcome-Bonus-Banner (Dankeschön) */
  .welcome-bonus-note {
    padding: var(--sp-3) var(--sp-4) !important;
    margin-top: var(--sp-4) !important;
    font-size: 13px !important;
  }
  .welcome-bonus-icon svg {
    width: 23px !important;
    height: 23px !important;
  }
  /* Button-Row */
  .welcome-panel .btn-row {
    margin-top: var(--sp-4) !important;
  }
  /* Panel-Padding */
  .welcome-panel {
    padding: var(--sp-4) var(--sp-5) !important;
  }
  /* Footer-Margin */
  .welcome-legal-footer {
    margin: 9px auto 5px auto !important;
    font-size: 0.74rem !important;
  }
  /* App-Container vertikales Padding */
  #app {
    padding: var(--sp-3) var(--sp-5) !important;
  }
  /* Bug #227 (v176): Lead-Content gap zwischen den drei Absätzen
     im Compact-Mode auch reduzieren */
  .welcome-panel .welcome-lead-content {
    gap: var(--sp-2) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #227 (v176): EXTRA-kompakter Welcome-Mode für sehr kleine
   Browser-Fenster (≤800px Höhe — typisch 13" Laptops bei 100% Zoom).
   Damit ALLE Welcome-Inhalte (Headline + 3 Lead-Absätze + Welcome-Box
   mit Schritten + Info-Karten + Bonus-Banner + Button) ohne Scrollen
   auf einen Screen passen. Bis 800px greift diese aggressivere Stufe;
   darunter (z.B. <700px) bleibt natürliches Scrollen, weil weiteres
   Verkleinern unleserlich würde.
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-height: 800px) {
  .welcome-panel .title-display {
    font-size: 1.7rem !important;
    margin-bottom: var(--sp-3) !important;
    line-height: 1.1 !important;
  }
  .welcome-panel .eyebrow {
    margin-bottom: var(--sp-2) !important;
  }
  .welcome-panel .welcome-lead-row {
    margin-top: var(--sp-2) !important;
    margin-bottom: var(--sp-3) !important;
  }
  .welcome-panel .welcome-lead-content {
    gap: var(--sp-1) !important;
  }
  .welcome-panel .lead {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
  }
  .welcome-panel .welcome-box {
    padding: var(--sp-2) var(--sp-3) !important;
    margin: var(--sp-2) 0 !important;
  }
  .welcome-box-heading {
    margin-bottom: var(--sp-2) !important;
    font-size: 10px !important;
  }
  .welcome-box-divider {
    margin: var(--sp-2) 0 !important;
  }
  .welcome-panel .hiw-row {
    margin: var(--sp-2) 0 !important;
  }
  .welcome-panel .hiw-step-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .welcome-panel .info-grid {
    gap: var(--sp-2) !important;
  }
  .welcome-panel .info-card-icon {
    height: 22px !important;
    font-size: 1.05rem !important;
  }
  .welcome-panel .info-card-title {
    font-size: 9.5px !important;
    margin-bottom: 2px !important;
  }
  .welcome-panel .info-card-text {
    font-size: 11.5px !important;
    min-height: 2.4em !important;
    line-height: 1.3 !important;
  }
  .welcome-bonus-note {
    padding: var(--sp-2) var(--sp-3) !important;
    margin-top: var(--sp-2) !important;
    font-size: 12px !important;
  }
  .welcome-bonus-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  .welcome-panel .btn-row {
    margin-top: var(--sp-3) !important;
  }
  .welcome-panel {
    padding: var(--sp-3) var(--sp-4) !important;
  }
  .welcome-legal-footer {
    margin: 6px auto 4px auto !important;
    font-size: 0.7rem !important;
  }
  #app {
    padding: var(--sp-2) var(--sp-5) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #193 (v176): Compact-Layout für DSGVO + Demografie + BlockInfo
   ──────────────────────────────────────────────────────────────
   Wie bei Welcome (Bug #164): Auf Desktops/iPads im Querformat mit
   begrenzter Höhe (768-900px) sollen DSGVO-Einwilligung, Beziehungs-
   Auswahl und Demografie-Angaben bei 100% Browser-Zoom OHNE Scrollen
   sichtbar sein. Das verbessert die UX bei Pre-Tests und gibt
   Probandinnen sofort den vollen Überblick. Auf Mobil/Hochformat
   bleibt das normale Layout (Scrollen ist da Standard).
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-height: 900px) {
  /* === Gemeinsame Kompakt-Regeln für alle drei === */
  .dsgvo-panel,
  .demografie-panel,
  .blockinfo-panel {
    padding: var(--sp-4) var(--sp-5) !important;
  }
  .dsgvo-panel .eyebrow,
  .demografie-panel .eyebrow,
  .blockinfo-panel .eyebrow {
    margin-bottom: var(--sp-3) !important;
  }
  .dsgvo-panel .title-medium,
  .demografie-panel .title-medium,
  .blockinfo-panel .title-medium {
    font-size: 1.5rem !important;
    margin-bottom: var(--sp-2) !important;
  }
  .dsgvo-panel .lead-small,
  .demografie-panel .lead-small,
  .blockinfo-panel .lead-small {
    margin-bottom: var(--sp-3) !important;
    font-size: 0.92rem !important;
  }
  .dsgvo-panel .btn-row,
  .demografie-panel .btn-row,
  .blockinfo-panel .btn-row {
    margin-top: var(--sp-3) !important;
  }

  /* === DSGVO-spezifisch === */
  .dsgvo-panel .info-flag-box {
    padding: var(--sp-3) !important;
    margin-bottom: var(--sp-3) !important;
  }
  .dsgvo-panel .dsgvo-text-block {
    margin-bottom: var(--sp-2) !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
  }
  .dsgvo-panel .dsgvo-checkbox-row {
    margin-top: var(--sp-3) !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }

  /* === Demografie-spezifisch === */
  .demografie-panel .demo-section {
    margin-bottom: var(--sp-3) !important;
  }
  .demografie-panel .demo-section-title {
    margin-bottom: var(--sp-2) !important;
    font-size: 0.85rem !important;
  }
  .demografie-panel .demo-grid {
    gap: var(--sp-1) !important;
  }
  .demografie-panel .demo-card {
    padding: var(--sp-2) var(--sp-3) !important;
    font-size: 0.88rem !important;
  }
  .demografie-panel select,
  .demografie-panel input[type="text"] {
    padding: var(--sp-2) var(--sp-3) !important;
    font-size: 0.92rem !important;
  }

  /* === BlockInfo-spezifisch (Beziehungs-Auswahl) === */
  .blockinfo-panel .block-options {
    gap: var(--sp-2) !important;
    margin-top: var(--sp-3) !important;
  }
  .blockinfo-panel .block-option {
    padding: var(--sp-3) var(--sp-4) !important;
  }
  .blockinfo-panel .block-option-label {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
  }
  .blockinfo-panel .block-option-titel {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  .blockinfo-panel .block-option-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #204 (v176): Compact-Layout für STIMULUS-PAGE
   ──────────────────────────────────────────────────────────────
   Wie bei Welcome/DSGVO/Demografie/BlockInfo (Bug #193): Auf Desktops/
   iPads im Querformat mit begrenzter Höhe (768-900px) sollen die
   Stimulus-Pages auf einen Blick zeigen:
   1. Den Stimulus selbst (Bild/Video/Audio)
   2. "Bitte sieh dir diesen Beitrag an:" Heading
   3. "Bitte beantworte die folgenden Fragen…" Items-Heading
   So bekommt die Probandin sofort den vollen Kontext, ohne erst
   scrollen zu müssen, um zu wissen dass Fragen folgen.
   Auf Mobile/Hochformat bleibt das normale Layout (genug Platz).
   ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-height: 900px) {
  /* Panel-Padding insgesamt reduzieren */
  .stimulus-panel {
    padding: var(--sp-4) var(--sp-5) !important;
  }
  /* Eyebrow kompakter */
  .stimulus-panel .eyebrow {
    margin-bottom: var(--sp-3) !important;
  }
  /* Stimulus-Header (Format-Tag) kompakter */
  .stimulus-panel .stimulus-header {
    margin-bottom: var(--sp-2) !important;
  }
  /* "Bitte sieh dir diesen Beitrag an:" — kompakter */
  .stimulus-panel .stimulus-prompt {
    font-size: 1.4rem !important;
    margin: 0 0 var(--sp-3) 0 !important;
  }
  /* Stimulus-Bild deutlich kleiner damit alles in den Viewport passt */
  .stimulus-panel .stim-player img {
    max-height: min(50vh, 320px) !important;
  }
  .stimulus-panel .stim-player video {
    max-height: min(50vh, 320px) !important;
  }
  /* Audio-Card kompakter */
  .stimulus-panel .audio-card {
    padding: var(--sp-3) !important;
  }
  /* Stim-Player Margins reduziert */
  .stimulus-panel .stim-player {
    margin: var(--sp-3) 0 !important;
  }
  /* Items-Section kompakter — kürzerer Abstand zur Stimulus-Section */
  .stimulus-panel .items-section {
    margin-top: var(--sp-3) !important;
    padding-top: var(--sp-3) !important;
  }
  /* Items-Heading kompakter — gleiche Größe wie blockinfo-titel */
  .stimulus-panel .items-heading {
    font-size: 0.95rem !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #205 (v176): Welcome-Footer + Legal-Overlay
   ──────────────────────────────────────────────────────────────
   Dezente graue Links UNTER dem Welcome-Panel ("Impressum · Datenschutz").
   Klick öffnet ein transparent-elegantes Modal-Overlay, das nach 30s
   automatisch schließt (oder per X / Backdrop-Klick / Escape-Taste).
   ────────────────────────────────────────────────────────────── */
.welcome-legal-footer {
  text-align: center;
  margin: var(--sp-2) auto var(--sp-2) auto;
  font-size: 0.78rem;
  color: rgba(26, 24, 20, 0.32);
  letter-spacing: 0.02em;
}
.welcome-legal-footer .legal-link {
  color: rgba(26, 24, 20, 0.32);
  text-decoration: none;
  padding-bottom: 1px;
  transition: color 0.15s ease;
}
.welcome-legal-footer .legal-link:hover,
.welcome-legal-footer .legal-link:focus {
  color: rgba(26, 24, 20, 0.65);
  outline: none;
}

/* Modal-Overlay: dunkler halbtransparenter Backdrop mit Blur */
.legal-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.04);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  backdrop-filter: blur(4px) saturate(120%);
  z-index: 100;
  animation: fadeIn 0.25s ease;
}
.legal-overlay-wrap {
  position: fixed;
  inset: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  pointer-events: none;
  animation: fadeIn 0.3s ease;
}
.legal-overlay-card {
  pointer-events: auto;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 32px);
  /* Fast solide — nur ein Hauch Liquid-Glass-Schimmern */
  background: rgba(255, 253, 250, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  /* Mehrlagige Schatten + Inset-Glanz für tiefen Glas-Look */
  box-shadow:
    0 32px 80px rgba(26, 24, 20, 0.32),
    0 12px 28px rgba(26, 24, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.legal-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.0)
  );
}
.legal-overlay-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.legal-overlay-close {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 1.2rem;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: rgba(26, 24, 20, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.legal-overlay-close:hover,
.legal-overlay-close:focus {
  background: rgba(255, 255, 255, 0.55);
  color: rgba(26, 24, 20, 0.9);
  transform: scale(1.05);
  outline: none;
}
.legal-overlay-close:active {
  transform: scale(0.95);
}
.legal-overlay-content {
  padding: var(--sp-3);
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(26, 24, 20, 0.6);
  -webkit-overflow-scrolling: touch;
}
.legal-overlay-content .legal-text p {
  margin: 0 0 4px 0;
}
.legal-overlay-content .legal-text ul {
  margin: 0 0 5px 0;
  padding-left: 16px;
}
.legal-overlay-content .legal-text li {
  margin-bottom: 1px;
}
.legal-overlay-content .legal-text hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 5px 0;
}
.legal-overlay-content .legal-text strong {
  color: rgba(26, 24, 20, 0.78);
  font-weight: 600;
}
/* Disclaimer hat jetzt die gleiche Farbe wie der Rest — deshalb
   nur noch margin als Special-Style */
.legal-overlay-content .legal-text .legal-disclaimer {
  margin-top: var(--sp-2);
}
@media (max-width: 480px) {
  .legal-overlay-wrap {
    padding: var(--sp-2);
  }
  .legal-overlay-card {
    max-height: calc(100vh - 32px);
  }
  .legal-overlay-header {
    padding: var(--sp-2) var(--sp-3);
  }
  .legal-overlay-content {
    padding: var(--sp-3);
  }
}

/* iOS-Safari Fallback (Bug #163b-Pattern): Auf iOS backdrop-filter
   deaktivieren und solideren Background nutzen — verhindert WebKit-
   Renderer-Crash beim Pinch-Zoom mit aktivem Modal. */
@supports (-webkit-touch-callout: none) {
  .legal-overlay-backdrop {
    background: rgba(26, 24, 20, 0.10);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .legal-overlay-card {
    background: rgba(255, 253, 250, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .legal-overlay-close {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   Bug #163b/c (v176): iOS-Safari WebKit-Crash beim Pinch-Zoom
   ──────────────────────────────────────────────────────────────
   Mehrere GPU-Memory-Frabrikanten zusammen sprengen iOS-Safari
   beim Zoom-Re-Rendering. Drei Übeltäter identifiziert:

   1. backdrop-filter: blur(...) an 20+ Stellen
      → bei jedem Zoom muss WebKit jedes Element neu rendern
   
   2. .bg-mesh::before und ::after Atmosphäre-Blobs:
      - 80vw × 80vw große Pseudo-Elemente
      - filter: blur(100-120px) — extreme Werte
      - radial-gradient als Background
      → bei Zoom muss WebKit 160vw² × Blur neu rastern → OOM
   
   3. .bg-grain noise-Overlay:
      - position: fixed, inset: 0 (full screen)
      - mix-blend-mode: overlay
      - SVG-noise als Background
      → bei Zoom muss Blend-Mode bei höherer Auflösung berechnet werden

   Lösung auf iOS: Alle drei deaktivieren. Auf macOS/Windows bleibt
   alles sichtbar — dort gibt es kein Pinch-Zoom-Problem.

   Detection: -webkit-touch-callout: none ist iOS-only. macOS Safari
   hat diese Property nicht. Damit ist die Heuristik präzise.

   Trade-off: iOS-User sehen einen flacheren, ruhigeren Background
   (nur Grundfarbe statt Atmosphäre-Blobs + Noise). Visuell minimal,
   funktional rettend.

   Symptom (Pre-Tester am 9.5.): "Auf wirkprofil.de ist wiederholt
   ein Problem aufgetreten" beim Pinch-Zoom auf der Page.
   ────────────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* 1) backdrop-filter komplett aus */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 2) Atmosphäre-Blobs verstecken (filter: blur 100-120px Killer) */
  .bg-mesh,
  .bg-mesh::before,
  .bg-mesh::after,
  .bg-mesh-extra {
    display: none !important;
  }

  /* 3) Grain-Overlay verstecken (mix-blend-mode + fixed = teuer beim Zoom) */
  .bg-grain {
    display: none !important;
  }
}

/* ============================================================
   v189: CODE-VERIFIED-BANNER + SCHRITT-2-LOCK
   ============================================================
   Erscheint im Welcome-Screen ÜBER dem Mitmach-Button, wenn der
   User über ?code=… einen gültigen Einladungs-Code mitbringt.
   Schritt 2: Lock-Hinweis + Disabled-Look für nicht-gewählte Karten.
   ============================================================ */

.welcome-code-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) auto 0;
  max-width: 640px;
  background: linear-gradient(
    135deg,
    rgba(120, 160, 110, 0.14) 0%,
    rgba(120, 160, 110, 0.05) 100%
  );
  border: 1px solid rgba(120, 160, 110, 0.40);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}
.welcome-code-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(120, 160, 110, 0.85);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.welcome-code-text strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* Schritt-2-Lock: Hinweis-Banner unter dem Lead-Text */
.blockinfo-code-lock-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
  background: linear-gradient(
    135deg,
    rgba(120, 160, 110, 0.12) 0%,
    rgba(120, 160, 110, 0.04) 100%
  );
  border: 1px solid rgba(120, 160, 110, 0.35);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Disabled-Look für gesperrte Block-Karten */
.block-card.code-locked {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* v200: Dezenter Ausweg-Link unter dem Code-Banner (Rolle ändern / ohne Org).
   Bewusst zurückhaltend — soll den normalen Code-Pfad nicht überstrahlen,
   aber für die Minderheit, die ihn braucht, klar auffindbar sein. */
.code-ausweg-link {
  display: block;
  margin: calc(var(--sp-3) * -1 + 2px) auto var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(42, 36, 29, 0.25);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.code-ausweg-link:hover {
  opacity: 1;
  color: var(--text-primary);
}
/* v200: Auf der Welcome-Seite sitzt der Link zentriert unter dem Button */
.code-ausweg-link.welcome-ausweg {
  margin: var(--sp-4) auto 0;
}

@media (max-width: 600px) {
  .welcome-code-banner,
  .blockinfo-code-lock-note {
    font-size: 13px;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .welcome-code-check {
    width: 22px;
    height: 22px;
    font-size: 13px;
  }
}

/* ============================================================
   v198: Code-Eingabe-Sektion auf Block-Info-Seite
   Für Probandinnen mit Code, die nicht den direkten Link genutzt haben.
   ============================================================ */

.code-input-section {
  margin: var(--sp-5) auto var(--sp-3);
  max-width: 520px;
  padding: var(--sp-4) var(--sp-4);
  background: linear-gradient(
    135deg,
    rgba(120, 160, 110, 0.10) 0%,
    rgba(120, 160, 110, 0.03) 100%
  );
  border: 1px solid rgba(120, 160, 110, 0.30);
  border-radius: 14px;
}
.code-input-label {
  font-size: 13px;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  text-align: center;
}
.code-input-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}
.code-input-row input.input-control {
  flex: 1 1 180px;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.6);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-primary);
  transition: all 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.code-input-row input.input-control:focus {
  outline: none;
  background: rgba(255,255,255,0.95);
  border-color: var(--accent-medium);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.code-input-row input.input-control.input-error {
  border-color: #b03030;
  box-shadow: 0 0 0 3px rgba(176, 48, 48, 0.15);
}
/* v198: Live-Match-Feedback — wenn Code erkannt + zu Klartext umgewandelt. */
.code-input-row input.input-control.input-success {
  border-color: rgba(120, 160, 110, 0.7);
  box-shadow: 0 0 0 3px rgba(120, 160, 110, 0.15);
  background: rgba(120, 160, 110, 0.06);
  font-family: var(--font-body);
  font-size: 14.5px;
  text-transform: none;
  letter-spacing: 0;
  /* Lange Texte bei sehr schmalen Screens sauber abschneiden */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.code-input-row .code-apply-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.code-input-error {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  line-height: 1.4;
  color: #b03030;
  background: rgba(176, 48, 48, 0.08);
  border-left: 3px solid #b03030;
  border-radius: 6px;
}
.code-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-3);
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  position: relative;
}
.code-divider::before,
.code-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(0, 0, 0, 0.08));
  margin: 0 var(--sp-3);
}
@media (max-width: 480px) {
  .code-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .code-input-row input.input-control {
    flex: 0 0 auto;
    width: 100%;
    height: 48px;
  }
  .code-input-row .code-apply-btn {
    width: 100%;
  }
}