/* ==========================================================================
   Ofira.app — Komponenten. Ausschließlich Tokens. "Quiet Confidence".
   ========================================================================== */

/* --- Eyebrow / Lead / Section-Header --------------------------------- */
.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-link);
  margin-bottom: var(--space-md);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-default);
}
.section-head { max-width: var(--measure); margin-bottom: var(--space-7); }
.section-head.text-center { margin-inline: auto; }
/* Auf dem Smartphone wirken zentrierte Section-Köpfe ausgewogener als
   linksbündige. Fließtexte, Karten und Split-Spalten bleiben linksbündig. */
@media (max-width: 767.98px) {
  .section-head { text-align: center; margin-inline: auto; }
}
/* Steht die Kopfzeile allein in ihrer Sektion (z. B. Rundgang-Intro), entfällt
   ihr Abstand nach unten — sonst addiert er sich zum Sektions-Padding. */
.section-head:last-child { margin-bottom: 0; }

/* ====================================================================== */
/* Buttons                                                                */
/* ====================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing),
              transform var(--motion-fast) var(--easing),
              filter var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Primär: warmer Orange-Verlauf mit Lichtkante, Navy-Text (kein Weiß auf Orange).
   Hover: Anheben + leichtes Aufleuchten der Fläche (filter:brightness, smooth) —
   dezent und hochwertig, Navy-Text bleibt voll lesbar. */
.btn--primary {
  background: var(--grad-cta);
  color: var(--color-action-label);
  box-shadow: var(--shadow-sm), var(--inset-sheen);
}
.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow: var(--shadow-md), var(--inset-sheen);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm), var(--inset-sheen); }
.btn--secondary:hover { transform: translateY(-2px); }

/* Sekundär: Umriss in Navy */
.btn--secondary {
  background: transparent;
  border-color: var(--color-text-strong);
  color: var(--color-text-strong);
}
.btn--secondary:hover { background: var(--navy-100); color: var(--color-text-strong); }

/* Sekundär-Button auf dunklem Grund: Glas-Ghost */
.section--dark .btn--secondary,
.stage .btn--secondary,
.cta-band .btn--secondary,
.hero-xl__content .btn--secondary {
  background: var(--stage-surface);
  border-color: var(--border-on-dark);
  color: var(--color-on-dark);
}
.section--dark .btn--secondary:hover,
.stage .btn--secondary:hover,
.cta-band .btn--secondary:hover,
.hero-xl__content .btn--secondary:hover {
  background: var(--surface-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

/* Leiser Tertiär-Button: nur Text + Pfeil, für drucklose CTAs */
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-strong);
  padding-inline: var(--space-3);
  gap: var(--space-2);
}
.btn--quiet::after {
  content: '\2192';
  transition: transform var(--motion-fast) var(--easing);
}
.btn--quiet:hover { color: var(--color-link); }
.btn--quiet:hover::after { transform: translateX(3px); }
.stage .btn--quiet, .section--dark .btn--quiet { color: var(--color-on-dark); }
.stage .btn--quiet:hover, .section--dark .btn--quiet:hover { color: var(--orange-300); }

/* Größe */
.btn--lg { min-height: 56px; padding: 0 var(--space-7); }
.btn--sm { min-height: 42px; padding: 0 var(--space-5); font-size: var(--fs-note); }
.btn--block { display: flex; width: 100%; }

/* Zustand: deaktiviert */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Zustand: lädt (Spinner vor dem Label, Label bleibt lesbar) */
.btn.is-loading { pointer-events: none; cursor: progress; }
.btn.is-loading::before {
  content: '';
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-pill);
  animation: btn-spin var(--motion-spin) linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before { animation: none; }
}

/* Inline-Textlink mit Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.link-arrow::after { content: '\2192'; transition: transform var(--motion-fast) var(--easing); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ====================================================================== */
/* Karten                                                                 */
/* ====================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion-medium) var(--easing),
              box-shadow var(--motion-medium) var(--easing),
              border-color var(--motion-medium) var(--easing);
}
@media (min-width: 768px) { .card { padding: var(--space-6); } }
.card h3 { margin-bottom: var(--space-3); }
.card > p { color: var(--color-text-default); }
.card--muted { background: var(--color-surface-muted); }

/* Karten heben sich beim Hover sanft */
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-200);
}

/* Ausnahme: Formular-Karten (Kontakt/Buchung) bleiben beim Hover ruhig */
form.card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--color-border);
}

/* Klickbare Karte: der Textlink überzieht als transparentes Overlay die ganze
   Karte (stretched link). Ein Klick irgendwo auf der Karte folgt dem Link,
   Text und Pfeil bleiben sichtbar und klickbar. Barrierefrei ein einziger Link. */
.card--link { position: relative; }
.card--link .stretched-link::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
}

/* Differenzierungs-Kachel mit Akzentkante */
.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  height: 100%;
  box-shadow: var(--shadow-tile);
  transition: transform var(--motion-medium) var(--easing),
              box-shadow var(--motion-medium) var(--easing),
              border-color var(--motion-medium) var(--easing);
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-tile-hover);
  border-color: var(--orange-200);
}
.tile__title { margin-bottom: var(--space-3); }
/* Geteilter Icon-Verlauf: Stop-Farben aus Tokens, Defs unsichtbar */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon-grad__from { stop-color: var(--orange-500); }
.icon-grad__to   { stop-color: var(--orange-700); }

/* Tile-Icon: ohne Box, größer, Marken-Verlauf via stroke="url(#ofira-icon-gradient)" */
.tile__icon {
  color: var(--orange-600);          /* Fallback, falls ohne Verlauf genutzt */
  margin-bottom: var(--space-4);
}
.tile__icon svg { width: 52px; height: 52px; stroke-width: 1.5; }

/* Gefülltes, rundes Bestätigungs-Badge (z. B. Erfolgsseite) */
.tile__icon--lg {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-pill);
  background: var(--orange-50);
  margin-bottom: var(--space-4);
}
.tile__icon--lg svg { width: 30px; height: 30px; }
.tile__close {
  margin-top: var(--space-4);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

/* ====================================================================== */
/* Workflow-Schritte (nummeriert)                                         */
/* ====================================================================== */
.step { height: 100%; }
.step__num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  color: var(--color-on-dark);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  margin-bottom: var(--space-4);
}
.step__title { margin-bottom: var(--space-2); }

/* ====================================================================== */
/* Listen mit Haken                                                       */
/* ====================================================================== */
.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--orange-500);
  border-bottom: 2px solid var(--orange-500);
  transform: rotate(-45deg);
}

/* ====================================================================== */
/* Mockup-Platzhalter (App-Rahmen ohne Inhalt: gerasterte Fläche + Label)  */
/* ====================================================================== */
.mockup--flush { max-width: none; margin-inline: 0; }
.mockup__placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: var(--space-7);
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(241, 96, 29, 0.16) 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-800) 0%, var(--navy-950) 80%);
  text-align: center;
}
.mockup__placeholder--tall { min-height: 360px; }
.mockup__placeholder span {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.82);
  background: rgba(7, 11, 22, 0.55);
  padding: var(--space-2) var(--space-4);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
}

/* ====================================================================== */
/* Pain-Points Block                                                      */
/* ====================================================================== */
.pain {
  border-left: 2px solid var(--orange-300);
  padding-left: var(--space-6);
}
.pain p { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-default); }
.pain p + p { margin-top: var(--space-5); }

/* ====================================================================== */
/* Trust-Streifen (ehrliche Kennzahlen, kein erfundener Social Proof)     */
/* ====================================================================== */
.proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof__item { text-align: center; }
.proof__num {
  font-size: var(--fs-h2);
  line-height: 1.05;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ws-h2);
  color: var(--color-text-strong);
}
.proof__label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.section--dark .proof__num { color: var(--color-on-dark); }
.section--dark .proof__label { color: var(--navy-300); }

/* ====================================================================== */
/* Vergleichstabelle (Rechnungsformate)                                   */
/* ====================================================================== */
/* Weiße, schwebende Fläche wie die Karten; horizontal scrollbar auf Mobil,
   die abgerundeten Ecken beschneiden Kopfzeile und Spaltentönung. */
.compare-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: var(--fs-note);
}
.compare-table th,
.compare-table td {
  padding: var(--space-5);
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.compare-table tbody tr:last-child > * { border-bottom: 0; }

/* Kopfzeile: kleine, ruhige Labels auf zartem Grund */
.compare-table thead th {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--navy-50);
}

/* Erste Spalte: Formatname als Zeilenkopf */
.compare-table th:first-child,
.compare-table td:first-child { text-align: left; }
.compare-table tbody th {
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* Dezenter Row-Hover erleichtert das Ablesen in der Zeile */
.compare-table tbody tr { transition: background var(--motion-fast) var(--easing); }
.compare-table tbody tr:hover { background: var(--navy-50); }

/* Entscheidende Spalte (gilt als E-Rechnung) sanft hervorheben */
.compare-table th:nth-child(4),
.compare-table td:nth-child(4) { background: var(--orange-50); }
.compare-table thead th:nth-child(4) { color: var(--orange-600); }
.compare-table tbody tr:hover td:nth-child(4) { background: var(--orange-100); }

/* Ja / Nein / eingeschränkt */
.compare-mark { display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.c-yes .compare-mark { width: 22px; height: 22px; color: var(--orange-500); }
.c-no .compare-mark { color: var(--navy-400); }
.c-plain .compare-mark { color: var(--navy-400); }
.c-partial {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* Großer Preis-Anker */
.price-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bolder);
  letter-spacing: var(--ws-display);
  color: var(--color-text-strong);
}

/* ====================================================================== */
/* Hero                                                                   */
/* ====================================================================== */
.hero { position: relative; padding-block: var(--space-8); overflow: hidden; }
@media (min-width: 768px) { .hero { padding-block: var(--space-9); } }
.hero h1 {
  font-size: var(--fs-hero-fluid);
  max-width: 18ch;
}
.hero .lead { margin-top: var(--space-5); max-width: 52ch; }
.hero .cluster { margin-top: var(--space-7); }

/* Weiche, warme Radial-Washes als Atmosphäre (kein „Gradient-Soup").
   Position über Tokens steuerbar, damit der Schein pro Sektion variiert. */
.has-glow {
  position: relative; overflow: hidden;
  --hg1-x: 85%; --hg1-y: 8%;
  --hg2-x: 8%;  --hg2-y: 0%;
}
.has-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at var(--hg1-x) var(--hg1-y), var(--glow-orange) 0%, transparent 60%),
    radial-gradient(50% 50% at var(--hg2-x) var(--hg2-y), var(--glow-navy) 0%, transparent 55%);
}
.has-glow > * { position: relative; z-index: 1; }
.has-glow--bl { --hg1-x: 14%; --hg1-y: 90%; --hg2-x: 96%; --hg2-y: 10%; }
.has-glow--tl { --hg1-x: 12%; --hg1-y: 6%;  --hg2-x: 92%; --hg2-y: 100%; }

/* Akzent-Wort */
.accent { color: var(--color-link); }

/* Großer Aussagesatz */
.statement {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
  letter-spacing: var(--ws-h2);
}
/* Kurze, plakative Statement-Sätze wirken auf dem Smartphone zentriert runder. */
@media (max-width: 767.98px) {
  .statement { text-align: center; margin-inline: auto; }
}

/* ====================================================================== */
/* Rechtstexte (AGB, Impressum, Datenschutz)                              */
/* ====================================================================== */
/* Paragraphen-Überschriften sind Binnengliederung eines Dokuments, keine
   Marketing-Sektionen: je eine Stufe kleiner in der bestehenden Skala
   (h2 -> fs-h3, h3 -> fs-lead), damit der Fließtext das Bild bestimmt. */
.legal h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ws-h3);
}
.legal h3 {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: normal;
}

/* ====================================================================== */
/* Formular                                                               */
/* ====================================================================== */
.field { display: block; margin-bottom: var(--space-5); }
.field > label {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
  margin-bottom: var(--space-2);
}
.field .req, .checkbox-field .req { color: var(--color-invalid); }
.input, .textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  transition: border-color var(--motion-fast) var(--easing);
}
.textarea { min-height: 140px; padding: var(--space-4); resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--grey-600); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--orange-100), 0 0 0 1.5px var(--orange-500);
}
/* Natives Select im Look der Inputs */
.select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  transition: border-color var(--motion-fast) var(--easing);
}
/* Zustand: ungültig (rot) — aria-invalid vom Server/nach Blur,
   .is-invalid live per JS (Pflichtfeld leer oder Eingabe fehlerhaft) */
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"],
.input.is-invalid, .textarea.is-invalid, .select.is-invalid {
  border-color: var(--color-invalid);
}
.input[aria-invalid="true"]:focus-visible, .textarea[aria-invalid="true"]:focus-visible,
.input.is-invalid:focus-visible, .textarea.is-invalid:focus-visible {
  border-color: var(--color-invalid);
  box-shadow: 0 0 0 3px var(--color-invalid-soft), 0 0 0 1.5px var(--color-invalid);
}
/* Zustand: geprüft gültig (grün) — auch optionale Felder mit korrektem Inhalt */
.input.is-valid, .textarea.is-valid, .select.is-valid {
  border-color: var(--color-valid);
}
.input.is-valid:focus-visible, .textarea.is-valid:focus-visible {
  border-color: var(--color-valid);
  box-shadow: 0 0 0 3px var(--color-valid-soft), 0 0 0 1.5px var(--color-valid);
}
/* Zustand: deaktiviert */
.input:disabled, .textarea:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
/* Gruppe verwandter Felder (z. B. Mehrfach-Auswahl) ohne Default-Rahmen */
.field-group { border: 0; padding: 0; margin: 0 0 var(--space-5); min-inline-size: 0; }
.field-group__legend {
  padding: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
  margin-bottom: var(--space-3);
}
.checkbox-field {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
/* Eigene Checkbox statt nativer: kleine Radien, Rahmen wie die Eingabefelder,
   angehakt Marken-Orange mit Navy-Haken (CTA-Regel: kein Weiß auf Orange). */
.checkbox-field input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: 2px; flex: none;
  background: var(--color-surface) center / 14px no-repeat;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing),
              background-color var(--motion-fast) var(--easing);
}
.checkbox-field input:checked {
  background-color: var(--color-action);
  border-color: var(--color-action);
  background-image: var(--icon-check-navy);
}
.checkbox-field input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* Pflicht-Checkbox (Einwilligung): roter Rahmen, solange nicht bestätigt.
   Angehakt übernimmt der gefüllte Haken die Bestätigung. */
.checkbox-field input.is-invalid,
.checkbox-field input[aria-invalid="true"] {
  border-color: var(--color-invalid);
}
.checkbox-field label { font-size: var(--fs-small); color: var(--color-text-default); line-height: 1.5; }
/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-3); }
.form-note--error { color: var(--color-invalid-text); }
.form-note--pull { margin-top: calc(-1 * var(--space-3)); }

/* Eigenständiger sekundärer Hinweistext (größer als Formular-Hint) */
.note { font-size: var(--fs-note); line-height: var(--lh-note); color: var(--color-text-muted); }

.alert-success {
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--color-text-strong);
}
.alert-error {
  background: var(--color-on-dark);
  border: 1.5px solid var(--color-invalid);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-invalid-text);
  margin-bottom: var(--space-5);
}

/* Bestätigungs-Modal nach erfolgreichem Formularversand (per JS erzeugt) */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--space-5);
  background: rgba(7, 11, 22, 0.55);
  backdrop-filter: blur(2px);
}
.modal[hidden] { display: none; }
.modal__dialog {
  width: 100%; max-width: 30rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--space-7);
  text-align: center;
}
.modal__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--orange-50); color: var(--orange-600);
  font-size: 28px; line-height: 1;
}
.modal__title { font-size: var(--fs-h3); }
.modal__text { color: var(--color-text-default); margin-top: var(--space-3); }
.modal__close { margin-top: var(--space-6); }

/* ====================================================================== */
/* Header / Navigation                                                    */
/* ====================================================================== */
/* Header: einheitlich auf ALLEN Seiten — dunkel im Ausgangszustand, beim
   Scrollen helle Glas-Leiste. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy-900);
  border-bottom: 1px solid transparent;
  transition: background-color var(--motion-medium) var(--easing),
              border-color var(--motion-medium) var(--easing),
              backdrop-filter var(--motion-medium) var(--easing);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  transition: min-height var(--motion-medium) var(--easing);
}
.nav__logo { display: inline-flex; align-items: center; background-image: none; }
.nav__logo img { height: 30px; width: auto; }
/* Initial dunkler Header -> weißes Logo; beim Scroll (hell) -> dunkles Logo */
.nav__logo img.nav__logo--dark { display: none; }
.nav__logo img.nav__logo--light { display: block; }
.nav__links {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: var(--space-6);
}
.nav__links a {
  color: var(--color-on-dark);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  padding-block: var(--space-2);
  /* animierte Gradient-Unterstreichung ohne Layout-Shift */
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size var(--motion-medium) var(--easing-out),
              color var(--motion-fast) var(--easing);
}
.nav__links a:hover, .nav__links a[aria-current="page"] {
  color: var(--color-on-dark);
  background-size: 100% 2px;
}
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__cta { display: none; }
/* Header-CTA bewusst kompakter als btn--sm, damit er die Navigation nicht dominiert */
.nav__cta.btn--sm { min-height: 38px; padding: 0 var(--space-4); }
/* Telefon-Direktwahl (tel:-Link) neben dem CTA — auf Mobilgeräten besonders
   nützlich. Bewusst ohne Rahmen (kein zweiter „Button" neben dem CTA);
   die Klickfläche bleibt trotzdem 40px groß. */
.nav__phone {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--orange-400);
  transition: background-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing);
}
.nav__phone svg { width: 22px; height: 22px; }
.nav__phone:hover { background: var(--surface-on-dark); color: var(--orange-300); }
.nav__phone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  background: transparent; border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; color: var(--color-on-dark); }
.nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (min-width: 992px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
}

/* Beim Scrollen: kompakte, helle Glas-Leiste (alle Seiten gleich) */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-page) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
          backdrop-filter: saturate(1.1) blur(8px);
  border-bottom-color: var(--color-border);
}
.site-header.is-scrolled .nav { min-height: 64px; }
.site-header.is-scrolled .nav__links a { color: var(--color-text-strong); }
.site-header.is-scrolled .nav__logo img.nav__logo--dark { display: block; }
.site-header.is-scrolled .nav__logo img.nav__logo--light { display: none; }
.site-header.is-scrolled .nav__toggle svg { color: var(--color-text-strong); }
.site-header.is-scrolled .nav__phone { color: var(--color-link); }
.site-header.is-scrolled .nav__phone:hover { background: var(--navy-100); color: var(--color-link-hover); }

/* Mobiles Menü (heller Grund, gut lesbar) */
.nav__mobile {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-page);
  padding: var(--space-4) 0 var(--space-5);
}
.nav__mobile.is-open { display: block; }
/* Bei geöffnetem Menü unten denselben Header-Rand freilassen wie seitlich
   (Container-Gutter), damit der durchscheinende Header-Grund rundum sichtbar
   ist statt bündig mit dem Panel abzubrechen. */
.site-header:has(.nav__mobile.is-open) .container { padding-bottom: var(--gutter-mobile); }
@media (min-width: 768px) {
  .site-header:has(.nav__mobile.is-open) .container { padding-bottom: var(--gutter); }
}
.nav__mobile ul { list-style: none; margin: 0; padding: 0; }
.nav__mobile a {
  display: block;
  padding: var(--space-4) var(--space-2);
  color: var(--color-text-strong);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
}
/* CTA im Mobilmenü: kompakt und zentriert, statt volle Breite. */
.nav__mobile .btn {
  display: flex;
  width: fit-content;
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-6);
  border-bottom: 0;
}
@media (min-width: 992px) { .nav__mobile { display: none !important; } }

/* ====================================================================== */
/* Footer                                                                 */
/* ====================================================================== */
.site-footer {
  position: relative;
  background: var(--navy-950);
  color: var(--navy-300);
  padding-block: var(--space-8);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad-hairline-accent);
}
.site-footer::after {
  content: '';
  position: absolute; left: 20%; right: 20%; bottom: -10%;
  height: 40%;
  pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, var(--glow-orange-soft) 0%, transparent 70%);
}
.site-footer > * { position: relative; z-index: 1; }
/* Generische Link-Farbe NICHT auf Buttons anwenden (sonst überschreibt sie das
   zentrale Button-Token -> inkonsistente Schriftfarbe). */
.site-footer a:not(.btn) { color: var(--navy-200); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--color-on-dark); }

/* Mini-CTA-Zeile: letzte Conversion-Chance */
.footer-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--navy-800);
}
.footer-cta p {
  color: var(--color-on-dark);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  max-width: 40ch;
}
.footer-cta .note { color: var(--navy-400); font-weight: var(--fw-regular); font-size: var(--fs-note); margin-top: var(--space-1); }

.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__logo img { height: 28px; width: auto; margin-bottom: var(--space-4); }
.footer__tag { color: var(--navy-400); max-width: 34ch; font-size: var(--fs-note); line-height: var(--lh-note); }
/* Spalten-Überschrift = ruhiges Label (gedämpft, Versalien, klein). */
.footer h4 {
  color: var(--navy-400);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--space-3); }
/* Links = kompakter Inhalt, klar kleiner als Tagline (klare Hierarchie). */
.footer li a { font-size: var(--fs-small); line-height: var(--lh-note); }

/* Trust-Zeile über dem Legal-Bereich (Text-Badges, keine Fake-Siegel) */
.footer-trust {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-800);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--fs-mini);
  color: var(--navy-400);
}

/* ====================================================================== */
/* CTA-Band                                                               */
/* ====================================================================== */
.cta-band {
  background: var(--navy-800);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.cta-band h2 { color: var(--color-on-dark); }
.cta-band p { color: var(--navy-300); margin-top: var(--space-3); max-width: 52ch; margin-inline: auto; }
.cta-band .cluster { margin-top: var(--space-6); }

/* Fade-in/Reveal: vollständig in motion.css (.rv-System, .fade-in als Alias) */

/* Trennlinie */
.hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-7); }

/* ====================================================================== */
/* App-/Dashboard-Mockup (Hero-Visual, nur Markenfarben)                  */
/* ====================================================================== */
.mockup {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}
.mockup--lg { max-width: 760px; }
.mockup--xl { max-width: 1000px; }

/* ====================================================================== */
/* App-Screenshot ohne Browser-Chrome: nur das Bild, dezenter Schatten     */
/* ====================================================================== */
.shot {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.shot img { display: block; width: 100%; height: auto; }
.stage .shot, .section--dark .shot { box-shadow: var(--shadow-dark); }

/* Hover-Zoom OHNE transform (sonst würde jeder Rahmen mitskalieren). Stattdessen
   wächst die Breite: Der Rahmen bleibt dadurch exakt 1px und das Bild wird scharf
   neu gerendert. Der Platzhalter .shot-frame hält die Spaltenhöhe (kein Umbruch),
   das Bild liegt absolut darin und füllt bei Hover exakt die Inhaltsbreite. */
.shot-frame { position: relative; aspect-ratio: 1905 / 1045; }
.shot-frame > .shot--zoom {
  position: absolute;
  top: 0;
  width: 100%;
  border: 0 solid var(--color-border);   /* Rahmen erscheint erst beim Zoom */
  aspect-ratio: 1905 / 1045;
}
/* Verankerung an der jeweiligen AUSSENkante: Bild rechts ist rechts verankert,
   Bild links ist links verankert. Beim Zoom wächst NUR die Breite gleichmäßig
   zur Textseite hin — kein Schwenk/Richtungswechsel. */
.split .shot--zoom { right: 0; left: auto; }
.split--reverse .shot--zoom { left: 0; right: auto; }
.shot--zoom img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .shot--zoom {
    cursor: zoom-in;
    z-index: 1;
    /* z-index-Reset erst NACH dem Schrumpfen (step-Verzögerung um die volle
       Dauer) -> das schrumpfende Bild bleibt über der nächsten Sektion. */
    transition: width var(--motion-zoom) var(--easing-in-out),
                border-width var(--motion-zoom) var(--easing-in-out),
                box-shadow var(--motion-zoom) var(--easing-in-out),
                z-index 0s linear var(--motion-zoom);
  }
  /* 200% der Spalte + Gap = exakt die definierte Inhaltsbreite (.split). */
  .shot--zoom:hover {
    width: calc(200% + var(--space-8));
    z-index: 30;
    border-width: 1px;
    box-shadow: 0 50px 90px -25px rgba(7, 11, 22, 0.5);
    /* Beim Hovern z-index sofort erhöhen (keine Verzögerung). */
    transition: width var(--motion-zoom) var(--easing-in-out),
                border-width var(--motion-zoom) var(--easing-in-out),
                box-shadow var(--motion-zoom) var(--easing-in-out),
                z-index 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shot--zoom { transition: none; }
}

/* ====================================================================== */
/* Workflow-Video: gerahmtes Video mit Klick-Cover (Play + Label).          */
/* Ohne JS: native Controls. Mit JS: Cover, Klick startet die Wiedergabe.   */
/* ====================================================================== */
.video-ph { position: relative; margin-inline: auto; max-width: 1140px; }
.video-ph__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  background: var(--navy-950);
}
.video-ph__fallback { padding: var(--space-5); color: var(--stage-text); }

/* Cover erscheint nur mit JS (.is-enhanced) und verschwindet beim Abspielen. */
.video-ph__cover {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.video-ph.is-enhanced .video-ph__cover { display: block; }
.video-ph.is-playing .video-ph__cover { display: none; }

.video-ph__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 22, 0.30) 0%, rgba(7, 11, 22, 0.50) 100%);
}
/* Play-Button + Hinweistext mittig gestapelt */
.video-ph__cta {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.video-ph__play {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--grad-cta);
  color: var(--color-action-label);
  box-shadow: var(--shadow-cta);
  transition: transform var(--motion-fast) var(--easing);
}
.video-ph__play svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.video-ph__cover:hover .video-ph__play,
.video-ph__cover:focus-visible .video-ph__play { transform: scale(1.06); }
.video-ph__label {
  color: var(--color-on-dark);
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(7, 11, 22, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .video-ph.is-enhanced .video-ph__play { animation: vph-pulse 2.4s var(--easing) infinite; }
  @keyframes vph-pulse {
    0%, 100% { box-shadow: var(--shadow-cta), 0 0 0 0 rgba(241, 96, 29, 0.45); }
    50%      { box-shadow: var(--shadow-cta), 0 0 0 14px rgba(241, 96, 29, 0); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mockup--float { animation: floaty var(--motion-float) ease-in-out infinite; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}
.mockup__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--navy-50);
  border-bottom: 1px solid var(--color-border);
}
.mockup__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--navy-300); }
.mockup__addr {
  margin-left: var(--space-3);
  font-size: var(--fs-small); color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
}
.mockup__body { padding: var(--space-5); }
.mockup__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.mockup__head strong { color: var(--color-text-strong); font-size: var(--fs-h3); }
.mockup__head span { font-size: var(--fs-small); color: var(--color-text-muted); }
.mockup__rows { list-style: none; padding: 0; margin: 0; }
.mockup__rows li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--navy-100);
  font-size: var(--fs-small);
}
.mockup__rows li:last-child { border-bottom: 0; }
.mockup__rows .doc { color: var(--color-text-strong); font-weight: var(--fw-medium); }
.mockup__rows .cust { color: var(--color-text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockup__rows .amount { color: var(--color-text-strong); }
.mockup__chart {
  display: flex; align-items: flex-end; gap: var(--space-2);
  height: 64px; margin-top: var(--space-5); padding-top: var(--space-3);
  border-top: 1px solid var(--navy-100);
}
.mockup__chart i {
  display: block; flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--navy-200);
}
.mockup__chart i.is-accent { background: var(--orange-400); }
.mockup__flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.mockup__flow b { color: var(--color-text-strong); font-weight: var(--fw-medium); }
.mockup__flow span { color: var(--orange-500); }

/* Status-Badges: ausschließlich Marken-Tokens (kein Ampel-Rot/Grün) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-mini); font-weight: var(--fw-medium);
  padding: 2px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px; height: 6px; flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.7;
}
.badge--paid { background: var(--navy-100); color: var(--navy-800); }
.badge--open { background: var(--grey-100); color: var(--grey-700); }
.badge--due  { background: var(--orange-100); color: var(--orange-800); }

/* ====================================================================== */
/* Dunkle Premium-Sektion                                                 */
/* ====================================================================== */
.section--dark {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  color: var(--navy-300);
  --dg1-x: 80%; --dg1-y: 0%;
  --dg2-x: 10%; --dg2-y: 100%;
}
.section--dark::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 70% at var(--dg1-x) var(--dg1-y), var(--glow-orange-strong) 0%, transparent 60%),
    radial-gradient(40% 60% at var(--dg2-x) var(--dg2-y), var(--glow-orange-soft) 0%, transparent 60%);
}
.section--dark.glow-mirror { --dg1-x: 16%; --dg1-y: 4%;  --dg2-x: 92%; --dg2-y: 100%; }
.section--dark.glow-low    { --dg1-x: 62%; --dg1-y: 108%; --dg2-x: 6%; --dg2-y: -8%; }

/* Vollflächiges Bild-Band: dunkles Foto als Hintergrund, heller Text über Scrim */
.imageband { position: relative; overflow: hidden; isolation: isolate; background: transparent; }
/* Fallback-Farbe als eigene Ebene UNTER dem Bild (z-index -3), damit das Foto
   (z-index -2) nicht vom Sektions-Hintergrund verdeckt wird. */
.imageband::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background: var(--stage-bg);
}
/* Direkt-Kind-Selektor + höhere Spezifität: bleibt hinter dem Inhalt, auch wenn
   die Sektion zusätzlich .grain trägt (.grain > * würde sonst nach vorne holen). */
.imageband > .imageband__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.imageband > .imageband__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--scrim-left);
}
/* Weiche Variante: unscharfer, navy-getönter Backdrop (kein Vordergrund-Motiv) */
.imageband--soft > .imageband__bg { filter: blur(3px) saturate(1.05); transform: scale(1.06); }
.imageband--soft > .imageband__scrim { background: var(--scrim-cover); }
.imageband h2 { color: var(--stage-text-strong); }
.imageband .lead, .imageband p { color: var(--stage-text); }
.imageband .eyebrow { color: var(--orange-300); }
/* Karte auf dem Bild-Band: gefrostetes Glas statt hellem Grund, damit der
   Inhalt über dem Foto lesbar bleibt. */
.imageband .card--muted {
  background: var(--stage-surface);
  border-color: var(--stage-border-strong);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
}
.imageband .card--muted > p { color: var(--stage-text); }
.imageband .card--muted strong { color: var(--stage-text-strong); }
.imageband .link-arrow { color: var(--orange-400); }
.imageband .link-arrow:hover { color: var(--orange-300); }
/* Split-Variante: schmalere Textspalte, damit das Motiv daneben frei bleibt. */
.imageband--split .measure { max-width: 48ch; }
/* Auf schmalen/hohen Viewports schneidet cover links/rechts zu: Ausschnitt an
   die rechte Kante rücken, damit die Personen im Bild bleiben (Text liegt links
   über dem dunklen Scrim). */
@media (max-width: 991.98px) {
  .imageband--split .imageband__bg { object-position: 82% center; }
}
.section--dark > * { position: relative; z-index: 1; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--color-on-dark); }
.section--dark .statement { color: var(--color-on-dark); }
.section--dark .price-hero { color: var(--color-on-dark); }
.section--dark .eyebrow,
.hero-xl__content .eyebrow { color: var(--orange-300); }
.section--dark .lead, .section--dark p { color: var(--navy-300); }
.section--dark .accent-line {
  width: 48px; height: 3px; background: var(--orange-500);
  border-radius: var(--radius-xs); margin-bottom: var(--space-5);
}
.section--dark .link-arrow { color: var(--orange-400); }
.section--dark .link-arrow:hover { color: var(--orange-300); }

/* Karten/Flow-Steps auf dunklem Grund */
.section--dark .card,
.section--dark .flow__step {
  background: var(--navy-800);
  border-color: var(--navy-700);
  color: var(--navy-300);
}
.section--dark .card h3,
.section--dark .flow__step .step__title,
.section--dark .card h2 { color: var(--color-on-dark); }
.section--dark .card > p,
.section--dark .flow__step p { color: var(--navy-300); }
.section--dark .card:hover,
.section--dark .flow__step:hover {
  border-color: var(--navy-600);
  box-shadow: var(--shadow-dark);
}
.section--dark .step__num { background: var(--orange-500); color: var(--navy-900); }
.section--dark .flow__step + .flow__step::before { border-color: var(--orange-400); }


/* Feine Körnung gegen Banding auf großen Flächen */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* ====================================================================== */
/* Bildzonen (.media) — gestaltete Platzhalter oder echte Fotos           */
/* ====================================================================== */
.media {
  position: relative;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
}
.media--portrait { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }

/* Foto-Zustand */
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
/* Duotone + Scrim für eingesetzte Fotos / markenkohärenz */
.media--tone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--duotone-navy);
  mix-blend-mode: multiply;
}
.media--scrim::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--scrim-bottom);
}

/* Platzhalter-Zustand: Duotone-Verlauf + Körnung + Line-Art-Motiv + Label */
.media__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 80% 12%, rgba(241, 96, 29, 0.28) 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-800) 0%, var(--navy-900) 70%);
}
.media__ph svg { width: 46%; max-width: 220px; height: auto; opacity: 0.92; }
.media__label {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  z-index: 3;
  font-size: var(--fs-small); color: rgba(255, 255, 255, 0.82);
  background: rgba(7, 11, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  backdrop-filter: blur(4px);
}

/* Text über Bild (z.B. Vollbild-Band) */
.media__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-7);
  color: var(--color-on-dark);
}

/* ====================================================================== */
/* Großformatiger Bild-Hero (.hero-xl)                                    */
/* ====================================================================== */
.hero-xl {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 820px);
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
}
.hero-xl__media { position: absolute; inset: 0; z-index: 0; }
.hero-xl__media img,
.hero-xl .hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
/* Motive mit voller, hoch stehender Person: Kopf/Oberkörper zuverlässig im
   Blick halten (Füße dürfen unten wegfallen), auch bei hohen Seitenverhältnissen */
.hero-xl .hero-slide--focus-upper { object-position: 66% 22%; }
/* Navy-Scrim: links kräftig (für Text), rechts offen (Motiv sichtbar) + unten */
.hero-xl__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,11,22,0.92) 0%, rgba(7,11,22,0.74) 34%, rgba(7,11,22,0.30) 62%, rgba(7,11,22,0.10) 100%),
    linear-gradient(to top, rgba(7,11,22,0.55) 0%, transparent 42%);
}
.hero-xl__inner { position: relative; z-index: 2; width: 100%; }
.hero-xl__content {
  max-width: 660px;
  padding-block: var(--space-9);
  color: var(--color-on-dark);
}
.hero-xl__content h1 { color: var(--color-on-dark); font-size: var(--fs-hero-fluid); }
.hero-xl__content .lead { color: var(--navy-200); margin-top: var(--space-5); max-width: 52ch; }
.hero-xl__content .cluster { margin-top: var(--space-7); }

/* Bild-Indikator (nur bei mehreren Hero-Slides, per JS erzeugt) */
.hero-dots { display: flex; gap: var(--space-2); margin-top: var(--space-7); }
.hero-dot {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--navy-400);
  transition: background var(--motion-fast) var(--easing),
              width var(--motion-medium) var(--easing);
}
.hero-dot:hover { background: var(--navy-200); }
.hero-dot.is-active { width: 26px; background: var(--orange-500); }
.hero-dot:focus-visible { outline: 2px solid var(--orange-300); outline-offset: 3px; }

/* „Mehr entdecken" mittig unten im Hero */
.hero-xl__scroll {
  position: absolute;
  left: 0; right: 0; bottom: var(--space-5);
  z-index: 3;
  display: flex;
  justify-content: center;
  text-decoration: none;
  background-image: none;
}
.hero-xl__scroll:hover .scroll-hint { color: var(--color-on-dark); }
.hero-xl__scroll .scroll-hint {
  margin-top: 0;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--navy-200);
}

/* Galerie-Crossfade (nur aktiv bei mehreren .hero-slide) */
.hero-xl .hero-slide { opacity: 0; transition: opacity var(--motion-crossfade) var(--easing); }
.hero-xl .hero-slide.is-active { opacity: 1; }
.hero-xl .hero-slide:only-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-xl .hero-slide { transition: none; }
}

@media (max-width: 768px) {
  .hero-xl { min-height: 78vh; }
  .hero-xl__media img, .hero-xl .hero-slide { object-position: 64% center; }
  .hero-xl__media::after {
    background:
      linear-gradient(180deg, rgba(7,11,22,0.62) 0%, rgba(7,11,22,0.52) 30%, rgba(7,11,22,0.85) 100%);
  }
  .hero-xl__content { padding-block: var(--space-8); }
}
@media (max-width: 575.98px) {
  /* Auf dem Smartphone kollidiert der Scroll-Hinweis mit der Trustline und ist
     als Affordance entbehrlich, da hier ohnehin intuitiv gescrollt wird. */
  .hero-xl__scroll { display: none; }
}

/* Layered Hero: Bild + überlappender Mockup */
.hero__stack { position: relative; }
.hero__stack .media { aspect-ratio: 4 / 3; }
@media (min-width: 992px) {
  .hero__stack .mockup {
    position: absolute; right: calc(-1 * var(--space-6)); bottom: calc(-1 * var(--space-6));
    width: 78%; max-width: 420px; margin: 0;
  }
}

/* ====================================================================== */
/* Bild-Reveal / Hover-Motion                                             */
/* ====================================================================== */
.js .reveal-img { opacity: 0; transform: scale(1.04); }
.js .reveal-img.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-slow) var(--easing), transform 600ms var(--easing);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) { .js .reveal-img { opacity: 1; transform: none; } }

.media--zoom img { transition: transform 600ms var(--easing); }
.media--zoom:hover img { transform: scale(1.03); }

/* Sektions-Trennkante (weicher Übergang) */
.section--dark + .section,
.section + .section--dark { position: relative; }

/* Scroll-Hinweis (rein CSS) */
.scroll-hint {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-7);
  font-size: var(--fs-small); color: var(--navy-400);
}
.scroll-hint span {
  width: 22px; height: 34px; border: 2px solid var(--navy-600); border-radius: var(--radius-md);
  position: relative; flex: none;
}
.scroll-hint span::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px;
  background: var(--orange-400); border-radius: var(--radius-xs); transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint span::after { animation: scrolldot 1.8s ease-in-out infinite; }
  @keyframes scrolldot { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 8px); } }
}

/* ====================================================================== */
/* Verbundener Workflow (Kette mit gestrichelten Konnektoren)             */
/* ====================================================================== */
.flow { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.flow__step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  overflow-wrap: break-word;
  hyphens: manual;
  transition: transform var(--motion-medium) var(--easing),
              box-shadow var(--motion-medium) var(--easing);
}
.flow__step .step__title { text-wrap: balance; }
.flow__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.flow__step .step__title { margin-bottom: var(--space-2); }
/* Konnektor: mobil vertikal über jedem Schritt ab dem zweiten */
.flow__step + .flow__step::before {
  content: ''; position: absolute;
  left: 52px; top: calc(-1 * var(--space-6)); height: var(--space-6);
  border-left: 2px dashed var(--orange-300);
}
@media (min-width: 768px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  /* Im 2-Spalten-Raster keine Konnektoren: die Kette ergibt erst in einer Reihe Sinn. */
  .flow__step + .flow__step::before { content: none; }
}
@media (min-width: 992px) {
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow__step + .flow__step::before {
    content: ''; left: calc(-1 * var(--space-6)); top: 52px; height: 0; width: var(--space-6);
    border-left: 0; border-top: 2px dashed var(--orange-300);
  }
}

/* ====================================================================== */
/* FAQ (native <details>, ohne JS, zugänglich)                            */
/* ====================================================================== */
.faq { max-width: var(--measure); margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--color-border);
}
.faq__item:first-child { border-top: 1px solid var(--color-border); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: var(--space-5) var(--space-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-weight: var(--fw-medium); color: var(--color-text-strong);
  font-size: var(--fs-lead);
  transition: color var(--motion-fast) var(--easing);
}
.faq__item summary:hover { color: var(--orange-700); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chevron {
  width: 22px; height: 22px; flex: none;
  color: var(--orange-600);
  transition: transform var(--motion-medium) var(--easing-out);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.faq__a {
  padding: 0 var(--space-2) var(--space-5);
  color: var(--color-text-default);
  max-width: 60ch;
}
/* Sanftes Aufklappen: modern via ::details-content, sonst Fade-Fallback */
@media (prefers-reduced-motion: no-preference) {
  .faq__item::details-content {
    transition: height var(--motion-medium) var(--easing-out),
                content-visibility var(--motion-medium) allow-discrete;
    height: 0;
    overflow: clip;
  }
  .faq__item[open]::details-content { height: auto; }
  .faq__item[open] .faq__a { animation: faqIn var(--motion-medium) var(--easing-out); }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* ====================================================================== */
/* Mobile Aktionsleiste (Sticky-Call-Bar)                                 */
/* Nur auf dem Smartphone. Blendet beim Scrollen nach dem Hero ein        */
/* (Klasse .is-visible via JS). Ohne JS bleibt sie verborgen; das Telefon */
/* ist über Header und Footer weiterhin erreichbar. Liegt unter dem       */
/* Consent-Banner (z-index 1000/1001) und unter dem Erfolgs-Modal (100).  */
/* ====================================================================== */
.callbar { display: none; }

@media (max-width: 767.98px) {
  .callbar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding-block: var(--space-3);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
  }
  .callbar.is-visible {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .callbar__inner {
    display: flex;
    gap: var(--space-3);
  }
  .callbar__btn {
    flex: 1;
    min-width: 0;
    padding-inline: var(--space-3);
    font-size: var(--fs-note);
    white-space: nowrap;
  }
  .callbar__btn svg { width: 20px; height: 20px; }

  /* Platz schaffen, damit die Leiste keinen Seiteninhalt verdeckt. */
  body.has-callbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Sehr schmale Geräte: Beschriftungen etwas kompakter, damit beide Buttons
   ohne Umbruch nebeneinander bleiben. */
@media (max-width: 359.98px) {
  .callbar__btn { font-size: var(--fs-small); padding-inline: var(--space-2); }
}

/* ====================================================================== */
/* Rückruf-Modal (Aktionsleiste außerhalb der Geschäftszeiten)            */
/* ====================================================================== */
/* Ankerziel Kontaktformular: nicht unter den klebenden Header springen. */
#kontaktformular { scroll-margin-top: var(--space-8); }

.modal__dialog--form { text-align: left; position: relative; }
.callback-modal [data-callback-view="done"] { text-align: center; }
.callback-modal [hidden] { display: none; }

.modal__x {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-md);
  color: var(--color-text-muted); cursor: pointer;
  transition: background-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing);
}
.modal__x:hover { background: var(--navy-100); color: var(--color-text-strong); }
.modal__x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.modal__x svg { width: 22px; height: 22px; }

.callback-form__submit { width: 100%; }

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .callbar { transition: transform var(--motion-medium) var(--easing); }
}