/* ============================================================================
   nachtflug.css — Vorlage "Nachtflug" (gamroth-nachtflug)
   Worldflight durch eine Stadt bei Nacht, 03:12 bis Sonnenaufgang.
   Engine (scrollcraft.css/js) bleibt unangetastet; hier nur Tokens + Seite.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}

:root {
  --sc-canvas:      #0A101C;
  --sc-surface:     #141B2B;
  --sc-ink:         #F1EEE6;
  --sc-ink-soft:    #A5ADBE;
  --sc-accent:      #F4B65F;   /* warmes Fensterlicht */
  --sc-accent-ink:  #1E1305;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;

  /* Nachtflug-eigene Größen */
  --nf-leiste-h: 3.25rem;
  --nf-day: 0;                          /* 0 = Nacht, 1 = Morgen (setzt JS) */
  --nf-scrim: rgba(10, 16, 28, 1);      /* Scrim-Grundton (setzt JS warm)   */
}

html { background: var(--sc-canvas); }

/* Licht auf Dunkel: eine Spur mehr Durchschuss und Tracking (taste.md). */
body {
  line-height: 1.65;
  letter-spacing: 0.002em;
}

/* ======================= Skip-Link ======================= */
.nf-skip {
  position: fixed; top: -3rem; left: 1rem; z-index: 400;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--sc-r-sm) var(--sc-r-sm);
  transition: top 160ms var(--sc-ease-out);
}
.nf-skip:focus-visible { top: 0; }

/* ======================= Himmelsleiste ======================= */
.himmel {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  height: var(--nf-leiste-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent);
}
.himmel__sky { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.himmel__sky-night, .himmel__sky-morning { position: absolute; inset: 0; }
.himmel__sky-night {
  background: linear-gradient(90deg, #060B15 0%, #0B1424 55%, #16233C 100%);
}
.himmel__sky-morning {
  background: linear-gradient(90deg, #21304A 0%, #4A5C7A 45%, #C97F3F 82%, #F0B45C 100%);
  opacity: var(--nf-day);
}

.himmel__uhr {
  margin: 0; flex: none;
  font-size: var(--sc-t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--sc-ink);
}

/* Die Zeitachse: Waypoints + Mond */
.himmel__track {
  position: relative; flex: 1 1 auto; height: 100%; min-width: 5rem;
  /* rechts Puffer, damit der Mond (2.5rem breit, zentriert auf dem
     Bahnende) am Endanschlag nicht in den Telefon-Chip ragt */
  margin-right: 1.25rem;
}
.himmel__wp ol {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
}
.himmel__wp li { position: absolute; top: 0; height: 100%; }
/* Positionen = Etappenstarts / 7.35 (Gewichte 1.05×5 + 2.10) */
.himmel__wp li:nth-child(1) { left: 0%; }
.himmel__wp li:nth-child(2) { left: 14.29%; }
.himmel__wp li:nth-child(3) { left: 28.57%; }
.himmel__wp li:nth-child(4) { left: 42.86%; }
.himmel__wp li:nth-child(5) { left: 57.14%; }
.himmel__wp li:nth-child(6) { left: 85.71%; }
.himmel__wp button {
  appearance: none; border: 0; background: transparent; color: var(--sc-ink-soft);
  height: 100%; padding: 0 0.4rem; margin: 0; cursor: pointer;
  display: flex; align-items: center; gap: 0.45rem;
  font: inherit; font-size: var(--sc-t-xs); letter-spacing: 0.04em;
}
.wp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-ink) 38%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc-ink) 18%, transparent);
  transition: background 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.himmel__wp button .wp-label {
  opacity: 0; transform: translateY(2px);
  transition: opacity 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .himmel__wp button:hover .wp-label { opacity: 1; transform: none; }
}
.himmel__wp button:focus-visible .wp-label,
.himmel__wp button[aria-current="true"] .wp-label { opacity: 1; transform: none; }
.himmel__wp button[aria-current="true"] { color: var(--sc-ink); }
.himmel__wp button[aria-current="true"] .wp-dot {
  background: var(--sc-accent);
  box-shadow: 0 0 8px 1px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.himmel__wp button:active .wp-dot { transform: scale(0.9); }

/* Der Mond (Signature Move: greifbar, scrubbt die Fahrt) */
.himmel__mond {
  appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
  position: absolute; top: 50%; left: 0;
  width: 2.5rem; height: 2.5rem;
  translate: -50% -50%;
  display: grid; place-items: center;
  cursor: grab; touch-action: none;
  z-index: 2;
}
.himmel__mond:active { cursor: grabbing; }
.mond__scheibe {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #FDFBF2 0%, #D9DCE4 55%, #9BA3B4 100%);
  box-shadow:
    0 0 10px 2px rgba(240, 240, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 140ms var(--sc-ease-out);
}
.himmel__mond:active .mond__scheibe { transform: scale(1.18); }
/* Am Horizontpunkt wird der Mond zur Sonne (rein scrollgebunden, reversibel) */
.himmel__mond.is-sun .mond__scheibe {
  background: radial-gradient(circle at 38% 34%, #FFF3D6 0%, #F4B65F 58%, #D97E2E 100%);
  box-shadow:
    0 0 14px 4px rgba(244, 182, 95, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.4);
}
.himmel__mond::after {
  /* kurzes Aufglühen beim Überschreiten der Schwelle, beide Richtungen */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 182, 95, 0.55) 0%, transparent 65%);
  opacity: 0; transform: scale(0.6);
  transition: opacity 350ms var(--sc-ease-out), transform 350ms var(--sc-ease-out);
  pointer-events: none;
}
.himmel__mond.is-flare::after { opacity: 1; transform: scale(1.5); }

.himmel__tel {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.2rem 0.65rem;
  border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  border-radius: var(--sc-r-sm);
  color: var(--sc-ink); text-decoration: none;
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
}
.himmel__tel:hover { border-color: var(--sc-accent); }
.himmel__tel-label {
  font-size: var(--sc-t-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--sc-accent);
}
.himmel__tel-nr { font-size: var(--sc-t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Bußgeldlotse-Fab an der Standard-Position unten rechts: die Position
   selbst kommt unangetastet aus embed.js (geteilte Portfolio-Position wie
   bei Kamerafahrt/Klartext/Zweispalten/Standbilder/Tagwerk/Fahrwasser).
   Nur die Farbe wird an die Nachtwelt angepasst; provisorisch per CSS,
   weil kanzleien/SLUG.json ohne CORS-Header auf fremden Domains still
   scheitert (siehe gamroth-standard SPEC §7). */
.bgl-fab {
  background: var(--sc-accent) !important;
  color: var(--sc-accent-ink) !important;
  box-shadow: 0 6px 22px -6px rgba(244, 182, 95, 0.45),
              0 2px 6px rgba(4, 6, 12, 0.5) !important;
}
/* KEINE body:has(.bgl-overlay)-Ausblendregel mehr: das aktuell deployte
   embed.js erzeugt sein Overlay-Element schon beim Seitenaufruf (unsichtbar,
   fürs Vorladen) — die alte Überbrückungsregel würde den Fab damit dauerhaft
   verstecken. Beim Öffnen blendet embed.js den Fab inzwischen selbst aus. */

/* ======================= Copy über der Welt ======================= */

/* Ein Scrim-Shape für die ganze Seite: Band unten, Ton wandert mit der Zeit. */
[data-nf-scrim].sc-scrim {
  background: linear-gradient(
    0deg,
    color-mix(in oklab, var(--nf-scrim) 90%, transparent) 0%,
    color-mix(in oklab, var(--nf-scrim) 62%, transparent) 32%,
    transparent 58%
  );
}

.sc-copy { max-width: min(38rem, 88vw); }

/* --- Hero: die Lichtkarte --- */
.nf-hero { bottom: clamp(2.5rem, 9vh, 7rem); }
.nf-hero__kanzlei {
  font-size: 0.85rem; font-weight: 650;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-accent);
  margin-bottom: 0.8rem;
}
.nf-hero__h1 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: var(--sc-track-tight);
  margin: 0 0 0.9rem;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(6, 10, 18, 0.65);
}
.nf-hero__lead {
  margin: 0 0 0.65rem; max-width: 38ch;
  font-size: var(--sc-t-lg); line-height: 1.4;
  text-wrap: pretty;
}
.nf-hero__gebiete {
  margin: 0 0 1.1rem;
  font-size: var(--sc-t-sm); letter-spacing: 0.03em;
  color: var(--sc-ink-soft);
}
.nf-hero__cta { margin: 0 0 0.8rem; }

.nf-tel {
  display: inline-flex; flex-direction: column; gap: 0.1rem;
  padding: 0.7rem 1.1rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm);
  text-decoration: none; font-weight: 650;
  box-shadow: 0 6px 22px -6px rgba(244, 182, 95, 0.45), var(--sc-edge);
  transition: transform 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.nf-tel:hover { transform: translateY(-1px); }
.nf-tel:active { transform: translateY(1px); }
.nf-tel__nr { font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums; line-height: 1.15; }

.nf-demotag {
  margin: 0; width: fit-content;
  font-size: var(--sc-t-xs); letter-spacing: 0.06em;
  color: var(--sc-ink-soft);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  border-radius: var(--sc-r-sm);
  padding: 0.25rem 0.5rem;
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
}

/* --- Etappen 2-3: die Sorgen (Untertitel-Rhythmus) --- */
.nf-sorge {
  left: var(--sc-gutter); bottom: clamp(3rem, 11vh, 8rem);
  max-width: 38rem;
}
.nf-sorge__zeit {
  margin: 0 0 0.4rem;
  font-size: var(--sc-t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: 0.14em;
  color: var(--sc-accent);
}
.nf-sorge__problem {
  margin: 0 0 0.55rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 620;
  line-height: 1.08; letter-spacing: var(--sc-track-snug);
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(6, 10, 18, 0.6);
}
.nf-sorge__gebiet {
  margin: 0 0 0.45rem; font-size: var(--sc-t-base); color: var(--sc-ink-soft);
}
.nf-sorge__zeile { color: var(--sc-ink-soft); }
.nf-sorge__mehr {
  margin: 0; max-width: 44ch;
  font-size: var(--sc-t-lg); line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(6, 10, 18, 0.55);
}

/* --- Etappe 4: Ablauf --- */
.nf-ablauf { bottom: clamp(3rem, 11vh, 8rem); max-width: 38rem; }
.nf-ablauf__h2 {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 640;
  letter-spacing: var(--sc-track-snug);
  text-shadow: 0 2px 18px rgba(6, 10, 18, 0.6);
}
.nf-ablauf__lead {
  margin: 0 0 0.9rem;
  font-size: var(--sc-t-lg); line-height: 1.4;
  color: var(--sc-ink-soft);
  text-shadow: 0 1px 12px rgba(6, 10, 18, 0.55);
}
.nf-ablauf__liste {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.7rem;
  font-size: var(--sc-t-lg); line-height: 1.4; max-width: 46ch;
  text-shadow: 0 1px 12px rgba(6, 10, 18, 0.55);
}
.nf-ablauf__liste li { display: flex; gap: 0.75rem; align-items: baseline; }
.nf-ablauf__nr {
  flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%; font-size: var(--sc-t-sm); font-weight: 650;
  background: color-mix(in oklab, var(--sc-accent) 22%, transparent);
  color: var(--sc-accent);
  transform: translateY(0.28rem);
}

/* --- Etappe 4: Bußgeldlotse --- */
.nf-lotse { bottom: clamp(3rem, 11vh, 8rem); max-width: 34rem; }
.nf-lotse__h2 {
  margin: 0 0 0.5rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 640;
  text-shadow: 0 2px 18px rgba(6, 10, 18, 0.6);
}
.nf-lotse__text {
  margin: 0 0 0.9rem;
  font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink);
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(6, 10, 18, 0.55);
}
.nf-lotse__btn {
  appearance: none; cursor: pointer;
  font: inherit; font-weight: 620; font-size: var(--sc-t-base);
  color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-surface) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  border-radius: var(--sc-r-sm);
  padding: 0.55rem 0.95rem; min-height: 44px;
  transition: border-color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
.nf-lotse__btn:hover { border-color: var(--sc-accent); }
.nf-lotse__btn:active { transform: translateY(1px); }

/* --- Etappe 5: die eine Zeile (Peak) --- */
.nf-morgen {
  inset-inline: auto; left: 50%; translate: -50% 0;
  bottom: clamp(4rem, 14vh, 10rem);
  text-align: center; max-width: none;
}
.nf-morgen__zeile {
  margin: 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-3xl); font-weight: 560;
  line-height: 1.12; text-wrap: balance;
  letter-spacing: var(--sc-track-snug);
  text-shadow: 0 2px 26px rgba(20, 14, 8, 0.7);
}

/* --- Etappe 6: das Klingelschild --- */
/* Ein Schild hängt, es schwebt nicht: Engine-TranslateY für beide Close-
   Blöcke aus (sonst drifteten Text und Platte durch die versetzten Fenster
   minimal gegeneinander). Opacity bleibt engine-getrieben. */
.nf-schild, .nf-schild-bg { transform: none !important; }
.nf-schild {
  /* Untergrenze 5.5rem: hält die Platte über der Standard-Fab-Zone unten
     rechts (ca. 24px Abstand + 56px Knopf) frei von Überlappung. */
  bottom: clamp(5.5rem, 9vh, 7rem); max-width: 28rem; text-align: left;
  /* Gravur-Farbe am Block selbst: die Kontrastmessung liest die Ink-Richtung
     am Copy-Block, nicht an den Kindern. */
  color: #241A0E;
}
.nf-schild__platte {
  position: relative;
  padding: 1.4rem 1.5rem 1.2rem;
  color: #241A0E;
}
/* Die Messingplatte selbst: Geschwister-Copy-Block (Kontrastmessung, taste.md),
   Geometrie synct nachtflug.js auf den Text-Block. */
.nf-schild-bg {
  position: absolute; inset: auto; max-width: none; pointer-events: none;
  opacity: 0; z-index: var(--sc-z-copy, 30);
}
.nf-schild__platte-bg {
  width: 100%; height: 100%;
  border-radius: 6px;
  background:
    radial-gradient(circle 3.5px at 12px 12px, #F6E7C4 0%, #8A6832 60%, transparent 70%),
    radial-gradient(circle 3.5px at calc(100% - 12px) 12px, #F6E7C4 0%, #8A6832 60%, transparent 70%),
    radial-gradient(circle 3.5px at 12px calc(100% - 12px), #F6E7C4 0%, #8A6832 60%, transparent 70%),
    radial-gradient(circle 3.5px at calc(100% - 12px) calc(100% - 12px), #F6E7C4 0%, #8A6832 60%, transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.32) 0%, transparent 38%),
    linear-gradient(115deg, #E8C98A 0%, #C69C56 32%, #E3C084 55%, #B89050 82%, #D8B679 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.7),
    inset 0 -1px 0 rgba(74, 52, 22, 0.55),
    0 10px 30px -8px rgba(4, 6, 12, 0.65),
    0 2px 6px rgba(4, 6, 12, 0.4);
}

.nf-schild__kanzlei {
  margin: 0 0 0.15rem;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 680;
  letter-spacing: 0.045em; line-height: 1.1;
  color: #1F1508;
  text-shadow: 0 1px 0 rgba(255, 248, 230, 0.45);
}
.nf-schild__name { margin: 0 0 0.7rem; font-size: var(--sc-t-lg); font-weight: 560; color: #2E2210; }
.nf-schild__adresse, .nf-schild__mail { margin: 0; font-size: var(--sc-t-base); color: #3A2C16; }
.nf-schild__mail a { color: inherit; text-underline-offset: 3px; }
.nf-schild__zusatz { margin: 0.55rem 0 0.95rem; font-size: var(--sc-t-base); color: #3A2C16; font-style: italic; }

.nf-klingel {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  margin: 0 0 0.8rem;
  border-radius: 6px;
  background: rgba(38, 27, 12, 0.14);
  box-shadow: inset 0 1px 2px rgba(46, 32, 12, 0.35), inset 0 -1px 0 rgba(255, 246, 224, 0.4);
  text-decoration: none; color: #241A0E;
}
.nf-klingel__knopf {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFF6DE 0%, #F4B65F 45%, #B87828 100%);
  box-shadow:
    inset 0 -2px 4px rgba(90, 55, 10, 0.55),
    inset 0 2px 3px rgba(255, 250, 235, 0.8),
    0 2px 5px rgba(30, 20, 6, 0.5);
  transition: transform 120ms var(--sc-ease-out), box-shadow 120ms var(--sc-ease-out);
}
.nf-klingel:hover .nf-klingel__knopf { transform: scale(1.05); }
.nf-klingel:active .nf-klingel__knopf {
  transform: scale(0.94);
  box-shadow: inset 0 2px 5px rgba(60, 38, 8, 0.65), 0 1px 2px rgba(30, 20, 6, 0.4);
}
.nf-klingel__text {
  display: flex; flex-direction: column; gap: 0.05rem;
  font-size: var(--sc-t-base); font-weight: 640; letter-spacing: 0.03em;
}
.nf-klingel__text .nf-tel__nr { font-size: var(--sc-t-xl); }
.nf-schild__fuss { margin: 0; font-size: var(--sc-t-sm); color: #4A3A20; }
.nf-schild__fuss a { color: inherit; }

/* ======================= Korn (Scroll-Tempo) ======================= */
.nf-grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ======================= Mobil ======================= */
@media (max-width: 700px) {
  .himmel { gap: 0.6rem; padding: 0 0.65rem; }
  /* Stationspunkte weichen: der greifbare Mond IST auf dem Telefon die Karte,
     die Bahn braucht die Breite (Overlap-Messung 320-428px). */
  .himmel__wp { display: none; }
  .himmel__track {
    margin-left: 0.45rem;
    margin-right: 1.1rem;
    min-width: 2.5rem;
  }
  .himmel__tel-label { display: none; }
  .himmel__tel { padding: 0.2rem 0.55rem; }

  /* Hero unter das erleuchtete Fenster der Portrait-Beschnitte schieben:
     die Headline darf die Glut nicht kreuzen (Kontrast am hellsten Frame).
     5.5rem statt 1rem seit dem Fab-Umzug nach unten rechts: CTA-Pill und
     Demotag müssen über der Fab-Zone (24px + 56px Knopf) stehen. Das
     Scrim-Band ist auf Mobil dafür einen Tick stärker/höher gezogen
     (Hero-Zeilen kreuzen sonst am hellsten Frame die 4.5:1 nicht mehr). */
  /* 6.75rem, nicht 5.5rem: die Engine setzt am Ruhepunkt ~2vh translateY
     auf den Copy-Block, der Demotag rutschte sonst zurück in die Fab-Zone
     (gemessen: 977px² Overlap bei 5.5rem). */
  .nf-hero { bottom: 6.75rem; }
  [data-nf-scrim].sc-scrim {
    background: linear-gradient(
      0deg,
      color-mix(in oklab, var(--nf-scrim) 94%, transparent) 0%,
      color-mix(in oklab, var(--nf-scrim) 80%, transparent) 44%,
      transparent 70%
    );
  }
  .nf-hero__kanzlei { font-size: 0.72rem; margin-bottom: 0.4rem; }
  .nf-hero__h1 { font-size: var(--sc-t-2xl); margin-bottom: 0.55rem; }
  .nf-hero__lead { font-size: var(--sc-t-base); margin-bottom: 0.45rem; }
  .nf-hero__gebiete { margin-bottom: 0.75rem; }
  .nf-hero__cta { margin-bottom: 0.55rem; }
  .nf-tel__nr { font-size: var(--sc-t-base); }

  /* Die vergrößerten Etappen-Texte eine Stufe zurücknehmen, im selben
     Verhältnis wie der Hero (H1 3xl→2xl): kein Overflow auf 390px. */
  .nf-sorge__problem { font-size: var(--sc-t-xl); }
  .nf-sorge__gebiet { font-size: var(--sc-t-sm); }
  .nf-sorge__mehr { font-size: var(--sc-t-base); }
  .nf-ablauf__h2 { font-size: var(--sc-t-xl); margin-bottom: 0.4rem; }
  .nf-ablauf__lead { font-size: var(--sc-t-base); margin-bottom: 0.7rem; }
  .nf-ablauf__liste { font-size: var(--sc-t-base); gap: 0.55rem; }
  .nf-lotse__h2 { font-size: var(--sc-t-lg); }
  .nf-lotse__text { font-size: var(--sc-t-base); }
  /* balance würde hier 3 Zeilen mit einzelnem "wird" bauen */
  .nf-morgen__zeile { font-size: var(--sc-t-2xl); text-wrap: pretty; }
  .nf-schild { max-width: none; bottom: 6.5rem; }
  .nf-schild__kanzlei { font-size: var(--sc-t-xl); }
  .sc-copy { max-width: none; }
}

/* ======================= Reduced Motion ======================= */
@media (prefers-reduced-motion: reduce) {
  .nf-grain { display: none; }
  .himmel__mond { cursor: default; }
  .mond__scheibe, .nf-klingel__knopf, .nf-tel { transition: none; }
  .himmel__mond::after { transition: none; }
}