/* Survey-App — Basis-CSS, JG-Farbwelt 2 (jobsgalore.de)
   Tokens-Quelle: ~/.claude/skills/po-prototyp/resources/tokens-farbwelt-2.css
   Schrift: Source Sans 3 (Prototyp via Google Fonts CDN; Produktion: lokal mit @font-face — DSGVO).
*/

:root {
  /* Typografie */
  --font-family-base: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  /* Abstände (JG-Token-Skala) */
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 50px;

  /* Markenfarben */
  --color-brand-red-light:   #E30613;
  --color-brand-red-dark:    #AF063E;
  --color-brand-orange:      #FF9900;

  /* Textfarben (erweitert nach MC-LP-UI 2026-05-23) */
  --color-text-primary:      #000000;
  --color-text-dark:         #1A1A1A;
  --color-text-body:         #555555;
  --color-text-label:        #888888;
  --color-text-muted:        #999999;
  --color-text-footer:       #AAAAAA;

  /* Hintergründe */
  --color-bg-text:           #F2F2F2;
  --color-bg-card:           #F2F2F2;
  --color-bg-image:          #999999;
  --color-bg-white:          #FFFFFF;
  --color-border-card:       #E0E0E0;

  /* Schaltflächen — Verlauf */
  --btn-gradient:        linear-gradient(90deg, #E30613 0%, #AF063E 100%);
  --btn-gradient-hover:  linear-gradient(90deg, #ff1a27 0%, #c4084a 100%);
  --btn-text-color:      #FFFFFF;

  /* Survey-spezifische Tokens (lokal abgeleitet) */
  --line-height-base: 1.55;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --max-content-width: 896px;

  /* ===== PO-STELLSCHRAUBEN: Intro-Weißräume (Desktop) =====
     Diese Werte gezielt anpassen, um Abstände auf der Intro-Seite zu ändern. */
  --intro-pad-top: 72px;             /* Weißraum ganz oben (über Badge) */
  --intro-space-after-badge: 32px;   /* Weißraum unter Badge (vor Headline) */
  --intro-space-before-button: 32px; /* Weißraum über dem Button */
}

* { box-sizing: border-box; }

html {
  /* Scrollbar-Spur IMMER anzeigen → konstante Inhaltsbreite über alle Screens.
     Verhindert das Verrutschen des zentrierten Inhalts beim Screen-Wechsel,
     wenn ein Screen scrollt (Frage 2/3) und ein anderer nicht (Frage 1).
     Robuster als scrollbar-gutter (greift auch bei klassischen Scrollbars). */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.surface { background: var(--color-bg-white); min-height: 100vh; display: flex; flex-direction: column; }

.survey-root {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--space-md);
}

/* Intro + Gate-Out: zentrierte Info-Screens (MC-LP s1-Stil).
   Das <main> trägt selbst die Klasse .intro/.gate-out — daher Regeln direkt darauf. */
/* Desktop-Werte fix (klare Abgrenzung zu Mobile via 640px-Breakpoint, kein clamp/vw).
   Abstände als explizite Stellschrauben (kein flex-gap) — siehe :root-Variablen. */
.intro, .gate-out {
  padding: var(--intro-pad-top) 64px var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.intro .badge, .gate-out .badge {
  margin-bottom: var(--intro-space-after-badge);
}

.intro .cta-row, .gate-out .cta-row {
  margin-top: var(--intro-space-before-button);
  justify-content: center;
}

.intro .content, .gate-out .content {
  max-width: 700px;
  text-align: center;
}

.intro .content p, .gate-out .content p {
  text-align: center;
}

.intro .content blockquote {
  text-align: left;
  max-width: 700px;
  margin-inline: auto;
}

.intro .content h1, .gate-out .content h1 {
  max-width: 700px;
  margin-inline: auto;
}

/* Inhalts-Container für gerenderten Markdown */
.content > :first-child { margin-top: 0; }
.content > :last-child  { margin-bottom: 0; }

/* Headlines — Farbe abhängig vom Screen-Kontext (Intro = brand-red, Outro/Status = text-dark) */
.content h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
  color: var(--color-text-dark);
}
.intro .content h1 { color: var(--color-brand-red-light); }
.outro .content h1, .gate-out .content h1 { color: var(--color-text-dark); }

.content h2 {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-text-body);
  margin: var(--space-md) 0 var(--space-sm);
  letter-spacing: 0;
}

/* H3 = Überschrift in Fragengröße — exakt wie .q-label (PO-Entscheidung 2026-05-27).
   H3 war app-weit ungenutzt, daher global gesetzt, ohne bestehende Screens zu ändern. */
.content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: var(--space-md) 0 var(--space-sm);
}

/* Absätze + Listen — Lese-Text dunkel wie MC-LP (text-primary), fest 16px */
.content p {
  margin: 0 0 var(--space-md);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.6;
}

/* Badge — kleine Pille mit Brand-Akzent (z. B. „PraxisGuide", „Vorschau") */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-red-dark);
  border: 1px solid rgba(175, 6, 62, 0.15);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  background: rgba(175, 6, 62, 0.03);
}

/* Card — abgesetzter Inhalts-Block ohne Brand-Akzent */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.card p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Footer */
.footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-footer);
  margin-top: auto;
  padding-top: var(--space-lg);
}

.content ul, .content ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}

.content li { margin-bottom: 4px; }

.content strong { font-weight: 700; }
.content em { font-style: italic; }

/* Blockquote — abgesetzter Inhalts-Block, MC-Box-Farbe #F9FAFB */
.content blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-md) calc(var(--space-md) + 4px);
  background: #F9FAFB;
  border: 1px solid #EDEFF2;
  border-radius: var(--radius-md);
}

.content blockquote p { margin: 0 0 var(--space-sm); color: var(--color-text-primary); }
.content blockquote p:last-child { margin: 0; }
.content blockquote strong { color: var(--color-text-primary); font-weight: 700; }

/* Bilder */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Code (inline) */
.content code {
  background: var(--color-bg-text);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: 'Menlo', 'Consolas', monospace;
}

/* Buttons */
.cta-row {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.btn {
  display: inline-block;
  padding: 8px 32px;
  border-radius: var(--radius-md);
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease;
  color: var(--btn-text-color);
}

.btn-primary {
  background: var(--btn-gradient);
}

.btn-primary:hover {
  background: var(--btn-gradient-hover);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-brand-red-dark);
  outline-offset: 2px;
}

/* Button mit Pfeil (z. B. Intro „Los geht's →") */
.btn-with-arrow::after {
  content: " →";
  margin-left: 4px;
}

/* Footer-Meta — dezent, nur in Dev sichtbar */
.meta {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.meta code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* --- Frage-Screens --- */

.screen, .outro {
  padding-block: var(--space-lg);
}

/* === Outro: zentriert, MC-Stil — Haken + roter Hinweis über der schwarzen
   Überschrift, heller Inhaltsblock in Intro-Breite (700px). === */
.outro {
  text-align: center;
}

.outro-check {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-md);
  color: var(--color-brand-red-light);
}

.outro-eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--color-brand-red-light);
  font-weight: 700;
  font-size: 1.05rem;
}

.outro-box {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-lg) 48px;
  background: #F9FAFB;
  border: 1px solid #EDEFF2;
  border-radius: var(--radius-md);
  text-align: center;
}

/* Überschrift in der Box = große, schwarze HL (zweite Markdown-Zeile) */
.outro-box .content h2 {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text-dark);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md);
}
.outro-box .content p { text-align: center; }

/* Konstante Inhaltsbreite über alle Frage-Screens. Ohne width:100% schrumpft
   der Container (margin:0 auto im Spalten-Flex) auf die Inhaltsbreite → q1 mit
   langen Optionstexten wird schmaler als q2 → „Weiter" springt seitlich.
   max-width: MC-Satzspiegel 672px Inhaltsspalte + 2×20px Seitenabstand
   (Box 712px → sichtbare Inhaltsspalte 672px, wie MarktCheck). Bewusst px statt
   rem: Inhaltsbreite soll unabhängig von der Grundschrift bleiben. */
.screen {
  width: 100%;
  max-width: calc(672px + 2 * var(--space-md));
}

/* Topbar (MC-Stil): Zurück-Button links, Progress rechts, feste Höhe.
   Feste Höhe + feste margin → identische HL-Startposition über alle Frage-Screens. */
.screen-topbar {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

/* Progress „Frage n / 4" — rechts in der Topbar, gleiche Grundlinie wie Zurück */
.progress {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  margin-left: auto; /* schiebt nach rechts, auch wenn kein Zurück-Button da ist */
  letter-spacing: 0;
}

.survey-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.question {
  border: 0;
  padding: 0;
  margin: 0;
}

.q-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1.5rem;
  padding: 0;
  line-height: 1.3;
}

.q-label .req {
  color: var(--color-brand-red-light);
  margin-left: 4px;
}

.q-helper {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.q-error {
  margin: var(--space-sm) 0 0;
  color: var(--color-brand-red-light);
  font-size: 0.9rem;
}

/* Options (Radio + Checkbox) */
.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Options — MC-Stil: grauer Default-Rahmen, rot bei Hover/Auswahl, Buchstaben-Kachel.
   Ausgewählter Zustand über box-shadow (kein Geometrie-Wechsel → kein Layout-Sprung). */
.option {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
  padding: 12px 16px;
  background: var(--color-bg-white);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.option:hover {
  border-color: var(--color-brand-red-light);
  background-color: #fef2f2;
}

.option.is-selected {
  border-color: var(--color-brand-red-light);
  background-color: #fef2f2;
  box-shadow: 0 0 0 2px var(--color-brand-red-light);
}

/* Buchstaben-Kachel (A, B, C …) links in der Option */
.option-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: #f3f4f6;
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
}
.option.is-selected .option-badge {
  background-color: var(--color-brand-red-light);
  color: #ffffff;
}

.opt-label { flex: 1; line-height: 1.4; text-align: left; }

/* natives Radio/Checkbox visuell verstecken, aber funktional + zugänglich halten */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Dropdown + Text */
.dropdown, .text-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--color-bg-text);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  font: inherit;
  color: var(--color-text-primary);
}

.dropdown:focus, .text-input:focus {
  outline: none;
  border-color: var(--color-brand-red-light);
}

textarea.text-input {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

/* Honeypot — versteckt, aber nicht display:none (Bot-Detection) */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ghost-Button (Zurück oben) — grauer Rahmen, kein Hintergrund */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-border-card);
  color: var(--color-text-body);
  padding: 7px 16px;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Frage-Screen: weniger Weißraum über dem „Weiter"-Button; Button rechtsbündig
   (rechte Kante Button = rechte Kante der Inhaltsbox). */
.screen .cta-row {
  margin-top: var(--space-md);
  justify-content: flex-end;
}

/* --- DOI-Formular im Outro --- */

.doi-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  text-align: left; /* Formular linksbündig in der ansonsten zentrierten Box */
}

/* Absenden-Button mittig unter dem Formular */
.doi-form .cta-row { justify-content: center; }

.doi-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Desktop: E-Mail liegt über volle Breite (eigenes .field), darunter eine .field-row
   mit Anrede (schmal) / Vorname / Nachname. Mobile bricht auf eine Spalte (@media). */
.doi-form .field-row {
  display: flex;
  gap: var(--space-md);
}
.doi-form .field-row .field { flex: 1; min-width: 0; } /* min-width:0 → Felder schrumpfen mit, statt über die Box hinauszuragen */
.doi-form .field-row .field-anrede { flex: 0.65; }

.doi-form label {
  font-weight: 600;
  color: var(--color-text-primary);
}

.doi-form .req { color: var(--color-brand-red-light); }

.doi-form input[type="text"],
.doi-form input[type="email"],
.doi-form input[type="tel"],
.doi-form select {
  width: 100%;             /* Feld füllt seine Spalte, ragt nicht über die Box hinaus */
  height: 48px;            /* feste, gleiche Höhe für ALLE Felder inkl. Anrede-Dropdown */
  padding: 0 14px;         /* Höhe steuert die Box (box-sizing:border-box global) */
  border: 2px solid var(--color-bg-text);
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  font: inherit;
  color: var(--color-text-primary);
}

/* Safari rendert <select> mit eigener, kleinerer Höhe und ignoriert vertikales
   Padding → Anrede war halb so hoch. appearance:none erzwingt die Box-Höhe oben;
   dafür ein eigener Dropdown-Pfeil (SVG), da der native sonst entfällt. */
.doi-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.doi-form input:focus, .doi-form select:focus {
  outline: none;
  border-color: var(--color-brand-red-light);
}

/* Einwilligung: eine kompakte, anklickbare Zeile (Checkbox + Text mit Datenschutz-Link) */
.doi-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.doi-consent input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-brand-red-light);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Sichtbarer Tastatur-Fokus für die Consent-Checkbox.
   Die pauschale Regel .doi-form input:focus { outline:none } entfernt sonst auch
   hier den Fokusring; auf einer nativen Checkbox ersetzt border-color ihn nicht
   sichtbar (v.a. Safari/WebKit). Eigener Outline-Ring im Brand-Stil, konsistent
   mit dem Button. :focus-visible → nur bei Tastatur-Navigation, nicht bei Mausklick. */
.doi-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-brand-red-dark);
  outline-offset: 2px;
}

.doi-consent a {
  color: var(--color-brand-red-light);
  text-decoration: underline;
}

/* === DOI-Modul-spezifische Layout-Regeln (000 §5.5).
   Die Klasse .doi-module dient v. a. als JS-Marker (Tastatur, Scroll, Konsistenz-
   Regel). Visuell wird der DOI-Modul-Screen im Outro-Look gerendert (graue Box,
   Eyebrow, mittiger Submit) — die Box-/Eyebrow-Optik kommt aus .outro/.outro-box,
   nicht aus eigenen Overrides. === */

/* Kontaktaufnahme-Block: visuell zurücktretend (Reihenfolge defensiv, #18),
   Whitespace oben gegen den Belohnungs-Kern und unten gegen Submit. */
.doi-interview {
  margin-top: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Häkchen + Widerruf-Hinweis als zusammenhängende Gruppe. */
.doi-consent-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doi-widerruf-hint {
  margin: 0 0 0 30px;  /* Einrückung wie Text neben der Checkbox (18px breit + 12px gap) */
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Label über der Zwei-Wege-Auswahl. */
.doi-way-label {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Assistenz-Felder mit eigenem inneren Abstand. */
.doi-assistenz {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: 4px;
}

.doi-assistenz-hint {
  margin: 0;
  color: var(--color-brand-red-light);
  font-size: 0.9rem;
}

.form-error {
  color: var(--color-brand-red-light);
  font-weight: 600;
  margin: 0;
}

/* === Submitted-Screen (nach dem Absenden) — MC-KPI-OnePager-Stil:
   zentriert, Haken oben, graue Kontakt-Box, Hinweiszeile, Footer. === */

/* Empfänger-E-Mail: marked verlinkt sie automatisch (mailto) → Browser-Default
   blau/unterstrichen. Im Submitted-Text stattdessen schwarz + fett, ohne Link-Optik. */
.content.submitted a {
  color: var(--color-text-primary);
  font-weight: 700;
  text-decoration: none;
}

/* Kontakt-Box: grauer Block, zweispaltig (Label grau | Wert fett dunkel) */
.contact-box {
  max-width: 520px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) 32px;
  background: var(--color-bg-text);
  border-radius: var(--radius-md);
  text-align: left;
}

.contact-row {
  display: flex;
  gap: var(--space-md);
  padding: 8px 0;
}

.contact-label {
  flex: 0 0 42%;
  color: var(--color-text-label);
}

.contact-value {
  font-weight: 700;
  color: var(--color-text-dark);
}

/* Hinweiszeile unter der Box + Footer ganz unten — dezent */
.submitted-help {
  margin: var(--space-lg) auto 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.submitted-footer {
  margin-top: var(--space-lg);
  color: var(--color-text-footer);
  font-size: 0.85rem;
}

/* ===== MOBILE — harter Breakpoint bei 640px, feste Werte (MC-Konvention) =====
   Klare Abgrenzung: Desktop nutzt obige feste Werte, hier wird gesprungen.
   Geändert werden Padding, gap und Schriftgrößen — Buttons + Badge bleiben gleich. */
@media (max-width: 640px) {
  .container { padding: var(--space-md) var(--space-sm); }

  /* Touch-Ergonomie: Button auf Mobil mind. 44px hoch (empfohlenes Touch-Ziel-
     Minimum, Apple HIG). inline-flex hält den Text in der größeren Box vertikal
     zentriert. Desktop bleibt unverändert flach. */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Intro/Gate-Out: noch mehr Weißraum oben über der Badge, kompakte Seiten.
     Mobile-Stellschrauben: padding-top (Weißraum oben), badge margin (unter Badge),
     cta-row margin-top (über Button). */
  .intro, .gate-out { padding: 80px 20px 40px; }
  .intro .badge, .gate-out .badge { margin-bottom: 28px; }
  .intro .cta-row, .gate-out .cta-row { margin-top: 40px; }
  .screen, .outro { padding-block: 32px; }

  /* Buttons behalten ihre Breite (wie MC). */
  .cta-row { flex-direction: column; align-items: center; }

  /* Schriftgrößen größer + dichter; mehr Luft über Text und unter H2 */
  .content h1 { font-size: 31px; line-height: 1.2; margin-bottom: 24px; }
  .content h2 { font-size: 14px; margin: 28px 0 20px; }
  .content p  { font-size: 18px; line-height: 1.45; letter-spacing: -0.02em;}

  /* DOI-Formular: zweispaltige Zeilen brechen auf eine Spalte (volle Breite) */
  .doi-form .field-row { flex-direction: column; gap: var(--space-md); }
  .doi-form .field-row .field-anrede { flex: 1; }

  /* Outro-Box: schmalerer Innenabstand auf kleinen Schirmen */
  .outro-box { padding: var(--space-md) 20px; }

  /* Kontakt-Box: volle Breite, schmalerer Innenabstand */
  .contact-box { padding: var(--space-md) 20px; }
}

/* ===================================================================
   Legal-Footer (Impressum + Datenschutz)
   Auf jeder Survey-Screen sichtbar — TMG §5 / DDG §5 (ständig verfügbar).
   Dezent, hellgrau, mittig — nutzt --color-text-footer.
   =================================================================== */
.legal-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  font-size: 13px;
  color: var(--color-text-footer);
  line-height: 1.4;
}

.legal-footer a {
  color: var(--color-text-footer);
  text-decoration: none;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
  text-decoration: underline;
}

.legal-footer-sep {
  margin: 0 0.5em;
  color: var(--color-text-footer);
  opacity: 0.6;
}