/* ============================================================================
   lagen.css — Vorlage „lagen": Typographic Poster als Zwei-Farb-Übereinanderdruck.
   Blau = Sachlage, Rot = Handlung, Papier = Bogen. Engine (scrollcraft.css/js)
   bleibt unangetastet, hier nur Tokens + eigenes Markup.
   ========================================================================== */

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

:root {
  --lg-papier:      #F7F5EF;
  --lg-papier-kuehl:#F1F1EF;
  --lg-papier-hell: #FBF9F3;
  --lg-ink:         #1D1C18;
  --lg-ink-soft:    #55524A;
  --lg-blau:        #1F4FA3;
  --lg-rot:         #CE3116; /* 4,73:1 auf Papier, kleiner Text sicher */
  --lg-hairline:    color-mix(in oklab, var(--lg-ink) 16%, transparent);

  --sc-canvas:      var(--lg-papier);
  --sc-surface:     var(--lg-papier-kuehl);
  --sc-ink:         var(--lg-ink);
  --sc-ink-soft:    var(--lg-ink-soft);
  --sc-accent:      var(--lg-rot);
  --sc-accent-ink:  var(--lg-papier);
  --sc-font-display: "Familjen Grotesk", "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Familjen Grotesk", "Archivo", system-ui, sans-serif;

  --streifen-h: 3rem;
}

body { color: var(--lg-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Ohne JavaScript (Engine nie gemountet): alles sichtbar, alles in Deckung */
html:not(.sc-ready) [data-sc-cue] { opacity: 1; }
html:not(.sc-ready) :is([data-sc-in], [data-sc-stagger] > *) { opacity: 1; transform: none; }
html:not(.sc-ready) [data-sc-reveal] { clip-path: none !important; }

a { color: inherit; text-decoration-color: var(--lg-rot); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--lg-rot); }
@media (hover: hover) and (pointer: fine) {
  a, #lotse-open { transition: color 140ms var(--sc-ease-out); }
}

/* ============================================================ Kontrollstreifen */
.kontrollstreifen {
  position: fixed; top: 0; inset-inline: 0; z-index: 60;
  height: var(--streifen-h);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: var(--sc-gutter);
  background: var(--lg-papier);
  border-bottom: 1px solid var(--lg-hairline);
}
.streifen-instrumente { display: flex; align-items: center; gap: 0.5rem; }
.farbfeld {
  width: 0.85rem; height: 0.85rem; flex: none;
  border: 1.5px solid; background: transparent;
  transition: background-color 180ms var(--sc-ease-out);
}
.farbfeld--blau { border-color: var(--lg-blau); }
.farbfeld--rot  { border-color: var(--lg-rot); }
.farbfeld--blau.gedruckt { background: var(--lg-blau); }
.farbfeld--rot.gedruckt  { background: var(--lg-rot); }
.passer {
  margin-left: 0.35rem;
  font-size: 0.875rem; font-variant-numeric: tabular-nums;
  color: var(--lg-ink-soft); letter-spacing: 0.01em;
  min-width: 4.6rem;
}
.passer::before { content: "Passer "; }
.streifen-name {
  margin: 0 auto; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: center;
}
.streifen-tel {
  font-size: 0.95rem; font-weight: 650; white-space: nowrap;
  text-decoration-thickness: 2px;
  /* 0.7rem vertikal hebt die Tap-Fläche über 44px; rein unsichtbare
     Hit-Area (kein Hintergrund), der 3rem-Streifen wächst dadurch nicht. */
  padding: 0.7rem 0.1rem;
}

main { padding-top: var(--streifen-h); }

/* ============================================================ Akt 1 · Hero */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* padding-bottom hält die Visitenzeilen über dem extern injizierten
     Bußgeldlotse-Fab (unten rechts) frei — gemessen (--lotse-fab-platz,
     s. Akt 7), Fallback 7.5rem falls nur lagen.js ausfällt */
  padding: calc(var(--streifen-h) + 3vh) var(--sc-gutter) var(--lotse-fab-platz, 7.5rem);
}
.hero-inhalt {
  width: 100%; max-width: 76rem; margin-inline: auto;
  /* Fab-Schutzstreifen rechts (s. Akt 5): die Visitenzeilen sind
     rechtsbündig und passieren beim Wegscrollen des Heros die Fab-Ecke.
     Innen-Padding = Fab-Streifen minus dem, was Gutter + Zentrierung
     (max-width 76rem im Innenmaß der Section) ohnehin schon freihalten. */
  padding-right: max(0px, calc(var(--lotse-fab-breite, 0px)
    - var(--sc-gutter)
    - max(0px, (100vw - 2 * var(--sc-gutter) - 76rem) / 2)));
}
.lage-wort {
  position: relative; margin: 0; width: fit-content;
  font-family: var(--sc-font-display);
  font-size: clamp(4.4rem, 14.5vw, 11.5rem);
  line-height: 0.92; font-weight: 700;
  letter-spacing: var(--sc-track-tight, -0.03em);
  text-wrap: balance;
}
.lage-kopie { display: block; }
.lage-kopie--blau { position: relative; color: var(--lg-blau); mix-blend-mode: multiply; }
.lage-kopie--rot {
  position: absolute; inset: 0; color: var(--lg-rot); mix-blend-mode: multiply;
}
.lage-wort .einzug { margin-left: 0.55em; }
.hero-zeile {
  margin: 2.2rem 0 0; max-width: 42ch;
  font-size: 1.2rem; line-height: 1.55; color: var(--lg-ink-soft);
  text-wrap: pretty;
}
.visitenzeilen {
  align-self: flex-end; text-align: right;
  margin-top: clamp(2rem, 6vh, 4.5rem);
  max-width: 76rem; width: 100%;
}
.visitenzeilen p { margin: 0.15rem 0; }
.vz-name { font-size: 1.05rem; font-weight: 650; }
.vz-gebiete, .vz-ort { font-size: 0.95rem; color: var(--lg-ink-soft); }
.demotag {
  display: inline-block; margin-top: 0.6rem !important;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--lg-rot);
}

/* ============================================================ Akt 2 · Stapel */
/* Kein eigenes position auf den Stages: die Engine setzt .sc-stage
   (position: sticky), ein Author-position bricht das Pinning still. */
.stapel-stage { height: 100svh; overflow: hidden; }
.begriffe { position: absolute; inset: 0; }
.begriff {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  font-family: var(--sc-font-display);
  font-size: calc(var(--s) * clamp(1.7rem, 4.2vw, 3.6rem));
  font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  transform: rotate(var(--r));
  opacity: 1;
}
.begriff i { font-style: normal; display: block; }
.b-blau { position: relative; color: var(--lg-blau); mix-blend-mode: multiply; }
.b-rot {
  position: absolute; inset: 0; color: var(--lg-rot); mix-blend-mode: multiply;
  transform: none;
}
.stapel-satz {
  position: absolute; left: var(--sc-gutter);
  /* Ruht während des GESAMTEN Pins an dieser Position — muss deshalb über
     der Fab-Zone liegen (gemessen: bei 375/390px lag er sonst mit vollen
     Zeilen im Fab; --lotse-fab-platz = Fab-Oberkante + 32px Reserve,
     0 ohne Embed, dann greift allein das clamp()). */
  bottom: max(clamp(3rem, 9vh, 6rem), var(--lotse-fab-platz, 0px));
  margin: 0; max-width: 36ch;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.5;
  color: var(--lg-ink); text-wrap: pretty;
}

/* ============================================================ Akt 3 · Stille */
/* Fab-Schutzstreifen rechts (s. Akt 5): ungepinnter Fliesstext, die Zeile
   hat kein max-width — ohne Guard hinge ihre Sichtbarkeit in der Fab-Ecke
   nur am Reveal-Timing von data-sc-in. */
.stille {
  /* Feinschliff 02.09.2026 (Tim): 30vh → 14vh je Seite, die Pause bleibt
     als ruhige Stelle erkennbar, wirkt aber nicht mehr übertrieben leer. */
  padding: 14vh var(--sc-gutter);
  padding-right: max(var(--sc-gutter), var(--lotse-fab-breite, 0px));
}
.stille-zeile {
  margin: 0 0 0 clamp(0rem, 12vw, 14rem);
  font-size: 1rem; color: var(--lg-ink-soft);
}

/* ============================================================ Akt 4 · Deckung */
.deckung-stage {
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--streifen-h) var(--sc-gutter) 0;
  /* Fab-Schutzstreifen rechts (s. Akt 5), hier als Variable: die Stage
     fährt VOR dem Pin durchs Bild, dabei passiert der Display-Satz bei
     375/390 die Fab-Ecke (Kritik-Runde 3/4, gemessen: Overlap nur bei
     stageTop > 0, nie im Pin-Frame). Da die Trennung horizontal ist, ist
     sie scroll-invariant — sie deckt Einfahren, Pin und Ausfahren gleich
     ab. Gleiche Formel wie .schluss-grid, nur mit max-width 72rem. */
  --satz-schutz: max(0px, calc(var(--lotse-fab-breite, 0px)
    - var(--sc-gutter)
    - max(0px, (100vw - 2 * var(--sc-gutter) - 72rem) / 2)));
}
.satz, .deckung-nach { padding-right: var(--satz-schutz); }
.satz { max-width: 72rem; margin-inline: auto; width: 100%; }
.satz-text {
  position: relative; margin: 0; width: fit-content;
  font-family: var(--sc-font-display);
  /* Zweiter Term: der Satz traegt feste <br>-Umbrueche — wuerde der
     Schutzstreifen ihn nur verschmaelern, braeche die laengste Zeile
     („bis das Bild scharf ist.") im Peak-Moment um (der Grund, warum
     der Streifen hier in Runde 3 zunaechst NICHT uebernommen wurde).
     Stattdessen deckelt die verfuegbare Spaltenbreite die Schriftgroesse:
     9.2 = gemessene Breite der laengsten Zeile je px Schriftgroesse
     (304px bei 33.6px, +2% Reserve); 24px = Rot-Versatz der Deckungs-
     Choreografie (21px translate3d bei --dk:1 waehrend des Einfahrens,
     s. u.), der ueber die fit-content-Box hinausragt. Ohne Embed
     (--lotse-fab-breite:0) greift der Deckel erst unter ~330px Viewport
     und verhindert dort nur den ohnehin drohenden Zeilenueberlauf. */
  font-size: min(clamp(2.1rem, 5.4vw, 4.7rem),
    calc((100vw - 2 * var(--sc-gutter) - var(--satz-schutz, 0px) - 24px) / 9.2));
  line-height: 1.08; font-weight: 650;
  letter-spacing: -0.02em;
}
.satz-kopie { display: block; }
.satz-kopie--blau { position: relative; color: var(--lg-blau); mix-blend-mode: multiply; }
.satz-kopie--rot { position: absolute; inset: 0; color: var(--lg-rot); mix-blend-mode: multiply; }
.deckung-nach {
  max-width: 72rem; margin: 2.4rem auto 0; width: 100%;
  font-size: 1.15rem; color: var(--lg-ink-soft);
}

/* Choreografie nur mit Engine UND ohne reduzierte Bewegung: sonst steht
   alles in Deckung (SPEC K6). --sc-p wird von der Engine auf dem Akt
   publiziert und erbt in die Kinder. */
@media (prefers-reduced-motion: no-preference) {
  html.sc-ready .lage-kopie--rot { transform: translate3d(3px, 2px, 0); }

  html.sc-ready .begriff {
    opacity: clamp(0, calc((var(--sc-p, 1) - var(--t)) * 7), 1);
  }
  html.sc-ready .b-rot {
    transform: translate3d(calc(var(--ox) * 1px), calc(var(--oy) * 1px), 0);
  }

  html.sc-ready .deckung-stage {
    --dk: clamp(0, calc(1 - var(--sc-p, 1) / 0.95), 1);
  }
  /* Deckungslatch (Feinschliff 02.09.2026): einmal eingerastet, bleibt der
     Satz auch beim Zurückscrollen scharf — Klasse setzt lagen.js. */
  html.sc-ready .deckung-stage.deckung-latched { --dk: 0; }
  html.sc-ready .satz-kopie--rot {
    transform: translate3d(calc(var(--dk, 0) * 21px), calc(var(--dk, 0) * 12px), 0)
               rotate(calc(var(--dk, 0) * 0.5deg));
  }
}

/* ============================================================ Akt 5 · Gebiete */
.wrap { max-width: 68rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
/* Fab-Schutzstreifen rechts: Gebiete und Kanzlei sind UNGEPINNTE
   Fliesstext-Akte — dort ist jede Scroll-Position ein Rast-Zustand, ein
   fixer Fab unten rechts überlappt also zwangsläufig jede Spalte, die
   horizontal bis in diese Ecke reicht. Darum wird der gemessene
   Fab-Streifen (--lotse-fab-breite, s. lagen.js) dauerhaft aus der Spalte
   herausgehalten. Die Zentrierung des .wrap (max-width 68rem) hält bei
   breiten Viewports schon (100vw − 68rem)/2 frei — nur die Differenz wird
   als zusätzliches padding-right reserviert, bei sehr breiten Viewports
   bleibt es beim normalen Gutter (keine Asymmetrie ohne Not). */
.wrap {
  padding-right: max(var(--sc-gutter), calc(var(--lotse-fab-breite, 0px)
    - max(0px, (100vw - 68rem) / 2)));
}
/* Direkt nach einem Pin: reduziertes Kopf-Padding (gotchas.md, flow nach pin) */
.gebiete { padding-block: 4rem 5rem; }
.abschnitt-titel {
  margin: 0; font-family: var(--sc-font-display);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--lg-ink);
}
.abschnitt-intro {
  margin: 0.9rem 0 3rem; font-size: 1.15rem; color: var(--lg-ink-soft);
  max-width: 50ch;
}
.gebiet {
  display: grid; grid-template-columns: 11.5rem 1fr; gap: 2rem;
  border-top: 1px solid var(--lg-hairline);
  padding-block: 1.9rem 2.1rem;
}
.gebiet-problem {
  margin: 0.45rem 0 0; font-size: 0.95rem; color: var(--lg-ink-soft);
  line-height: 1.5;
}
.gebiet-begriff {
  margin: 0; font-family: var(--sc-font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 650;
  letter-spacing: -0.015em; color: var(--lg-blau); line-height: 1.15;
}
.gebiet-strich {
  width: 5.5rem; height: 4px; background: var(--lg-rot);
  margin: 0.65rem 0 0.85rem;
}
.gebiet-zeile { margin: 0; max-width: 58ch; line-height: 1.6; color: var(--lg-ink); }

/* ============================================================ Akt 6 · Kanzlei */
.kanzlei { padding-block: 4rem 6rem; }
.kanzlei-grid {
  display: grid; grid-template-columns: minmax(240px, 330px) 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start;
}
.portraet { margin: 0; }
.duotone {
  position: relative; background: var(--lg-blau);
}
.duotone::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--lg-rot);
  transform: translate3d(8px, 8px, 0);
  pointer-events: none; z-index: -1;
}
.duotone img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode: screen;
}
.portraet figcaption {
  margin-top: 0.7rem; font-size: 0.875rem; color: var(--lg-ink-soft);
}
.kanzlei-satz {
  margin: 1.2rem 0 0; max-width: 56ch; line-height: 1.65; color: var(--lg-ink);
  font-size: 1.05rem; text-wrap: pretty;
}
.lotse { margin-top: 3rem; border-top: 1px solid var(--lg-hairline); padding-top: 2rem; }
.lotse-titel {
  margin: 0 0 0.9rem; font-family: var(--sc-font-display);
  font-size: 1.3rem; font-weight: 650;
}
.lotse-text { margin: 0; }
.lotse-text p {
  margin: 0; max-width: 56ch; line-height: 1.6; color: var(--lg-ink-soft);
}
#lotse-open {
  margin-top: 1.3rem; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.3rem 0.15rem;
  background: none; border: none; cursor: pointer;
  font: 600 1.05rem/1.3 var(--sc-font-text); color: var(--lg-rot);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
#lotse-open:hover { color: var(--lg-ink); }

/* ============================================================ Akt 7 · Schluss */
/* Bodenfreiheit für den extern injizierten Bußgeldlotse-Fab (fixed, unten
   rechts): lagen.js misst den echten .bgl-fab und setzt --lotse-fab-platz
   (Muster aus tagwerk.js); Fallback 7rem bei JS-Ausfall, 0 ohne Embed.
   Zwei Ebenen, beide nötig:
   1. padding-bottom auf der SECTION: die Section ist border-box mit fixer
      Pin-Höhe (span·100vh, Inline-Style der Engine), das Padding verkürzt
      den Sticky-Laufweg — am Seitenende steht der Fab frei unter der Stage.
   2. padding-bottom auf der STAGE: die Stage ist der Kasten, in dem der
      Inhalt tatsächlich lebt — zentriert (Desktop) bzw. intern scrollbar
      (mobil, overflow-y:auto ≤700px). Nur ein Padding HIER garantiert,
      dass der Inhalt in JEDEM Pin-Frame und am INTERNEN Scroll-Ende
      oberhalb des Fab endet; das Section-Padding allein wird vom inneren
      Scroll-Container nie erreicht (Kritik-Runde 2, 375×667: Impressum-
      Link am internen Scroll-Ende unter dem Fab — gemessen). Die Stage
      bleibt dabei exakt 100svh (border-box), die Engine unberührt. */
.schluss { padding-bottom: var(--lotse-fab-platz, 7rem); }
.schluss-stage {
  height: 100svh;
  display: flex; align-items: center;
  padding: var(--streifen-h) var(--sc-gutter) var(--lotse-fab-platz, 7rem);
}
.schluss-grid {
  display: grid; grid-template-columns: 260px 1fr;
  gap: clamp(3rem, 6vw, 5.5rem); align-items: center;
  max-width: 64rem; margin-inline: auto; width: 100%;
  /* Fab-Schutzstreifen rechts (s. Akt 5): bevor der Pin greift, fährt die
     Stage von unten durchs Bild — dabei passiert die Vermerk-Spalte sonst
     die Fab-Ecke (gemessen, Kritik-Runde 2). Gleiche Formel wie
     .hero-inhalt, nur mit max-width 64rem. */
  padding-right: max(0px, calc(var(--lotse-fab-breite, 0px)
    - var(--sc-gutter)
    - max(0px, (100vw - 2 * var(--sc-gutter) - 64rem) / 2)));
}
.bogen { position: relative; width: 240px; height: 320px; margin-inline: auto; }
.minilage { position: absolute; inset: 0; border: 1.5px solid; }
.minilage::before {
  content: ""; position: absolute; inset: 12% 14%;
  opacity: 0.75; mix-blend-mode: multiply;
}
.minilage--blau { border-color: var(--lg-blau); }
.minilage--blau::before {
  background: repeating-linear-gradient(to bottom,
    var(--lg-blau) 0 10px, transparent 10px 34px);
}
.minilage--rot { border-color: var(--lg-rot); }
.minilage--rot::before {
  inset: 34% 14% 12%;
  background: repeating-linear-gradient(to bottom,
    var(--lg-rot) 0 7px, transparent 7px 30px);
}
.minilage--text { border-color: var(--lg-hairline); }
.minilage--text::before {
  inset: 16% 18%;
  opacity: 0.5;
  background: repeating-linear-gradient(to bottom,
    var(--lg-ink) 0 2px, transparent 2px 12px);
}
@media (prefers-reduced-motion: no-preference) {
  html.sc-ready .schluss-stage {
    --cl: clamp(0, calc(1 - var(--sc-p, 1) / 0.9), 1);
  }
  html.sc-ready .minilage--blau {
    transform: translate3d(calc(var(--cl, 0) * -46px), calc(var(--cl, 0) * 20px), 0)
               rotate(calc(var(--cl, 0) * -7deg));
  }
  html.sc-ready .minilage--rot {
    transform: translate3d(calc(var(--cl, 0) * 40px), calc(var(--cl, 0) * -10px), 0)
               rotate(calc(var(--cl, 0) * 5deg));
  }
  html.sc-ready .minilage--text {
    transform: translate3d(calc(var(--cl, 0) * -6px), calc(var(--cl, 0) * -26px), 0)
               rotate(calc(var(--cl, 0) * 1.5deg));
  }
  /* Latch: der fertige Bogen bleibt liegen, egal wohin zurückgescrollt wird */
  html.sc-ready .bogen.fertig .minilage { transform: none !important; }
}

.vermerk { max-width: 40rem; }
.druckvermerk { margin: 1.8rem 0 0; }
.dv-zeile {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  padding-block: 0.55rem;
  border-top: 1px solid var(--lg-hairline);
}
.dv-zeile dt {
  font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--lg-ink-soft); padding-top: 0.15rem;
}
.dv-zeile dd { margin: 0; line-height: 1.5; }
.freigabe {
  margin: 2.4rem 0 0; font-weight: 600; font-size: 1.05rem;
  color: var(--lg-ink);
}
.freigabe-tel {
  display: inline-block; margin-top: 0.45rem;
  font-family: var(--sc-font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700;
  letter-spacing: -0.015em; color: var(--lg-rot);
  text-decoration-thickness: 3px; text-underline-offset: 6px;
  font-variant-numeric: tabular-nums;
}
.freigabe-tel:hover { color: var(--lg-ink); }
.kolophon {
  margin: 2.6rem 0 0; font-size: 0.875rem; color: var(--lg-ink-soft);
  max-width: 52ch; line-height: 1.6;
}

/* ============================================================ Mobil */
/* Kanzlei-Grid bricht schon bei 900px um (nicht erst 700): zwischen
   700 und 900px lässt der Fab-Schutzstreifen rechts neben dem Porträt
   keine tragfähige Textspalte mehr übrig — einspaltig bleibt der Text
   in voller Breite lesbar. */
@media (max-width: 900px) {
  .kanzlei-grid { grid-template-columns: 1fr; }
  .portraet { max-width: 300px; }
}

@media (max-width: 700px) {
  .streifen-name { display: none; }
  .kontrollstreifen { justify-content: space-between; }

  .lage-wort { font-size: clamp(3.4rem, 19vw, 5.2rem); }
  .visitenzeilen { align-self: flex-start; text-align: left; }

  .begriff { font-size: calc(var(--s) * clamp(1.15rem, 5.6vw, 1.9rem)); }
  .stapel-satz { max-width: 30ch; right: var(--sc-gutter); }

  @media (prefers-reduced-motion: no-preference) {
    html.sc-ready .b-rot {
      transform: translate3d(calc(var(--ox) * 0.6px), calc(var(--oy) * 0.6px), 0);
    }
    html.sc-ready .satz-kopie--rot {
      transform: translate3d(calc(var(--dk, 0) * 13px), calc(var(--dk, 0) * 8px), 0);
    }
  }

  .gebiet { grid-template-columns: 1fr; gap: 0.4rem; }
  .gebiet-problem { margin: 0; }

  .schluss-stage { align-items: flex-start; overflow-y: auto; }
  .schluss-grid {
    grid-template-columns: 1fr; gap: 2.2rem;
    padding-block: 1.5rem 2rem;
  }
  .bogen { width: 150px; height: 200px; margin-inline: 0; }
  @media (prefers-reduced-motion: no-preference) {
    html.sc-ready .minilage--blau {
      transform: translate3d(calc(var(--cl, 0) * -20px), calc(var(--cl, 0) * 10px), 0)
                 rotate(calc(var(--cl, 0) * -7deg));
    }
    html.sc-ready .minilage--rot {
      transform: translate3d(calc(var(--cl, 0) * 18px), calc(var(--cl, 0) * -6px), 0)
                 rotate(calc(var(--cl, 0) * 5deg));
    }
  }
}

/* Bußgeldlotse-Pill (Drittanbieter-Embed, .bgl-fab) auf schmalen Geräten:
   Muster aus sammlung.css — die volle Pill (~162px breit) würde über den
   Fab-Schutzstreifen (--lotse-fab-breite, s. Akt 5) fast die halbe
   Textspalte kosten. Per Override wird sie zum reinen Icon-Knopf (56px)
   verkleinert; das aria-label bleibt, nur der Schriftzug verschwindet.
   lagen.js misst den Fab NACH diesem Override (CSS lädt vor der
   Embed-Injektion, resize wird neu gemessen), der Schutzstreifen schrumpft
   also mit. button.bgl-fab schlägt das zur Laufzeit injizierte .bgl-fab
   per Spezifität. 900px statt der 640px aus sammlung: hier kostet der
   Streifen ab ~900px abwärts spürbar Spaltenbreite (Gebiete-Grid,
   Kanzlei-Grid), die Icon-Form halbiert ihn auf ~96px. */
@media (max-width: 900px) {
  button.bgl-fab { width: 56px; padding: 0; justify-content: center; }
  button.bgl-fab span { display: none; }
}

@media (max-width: 480px) {
  /* Passer ist der Zähler des Signature Move — bleibt sichtbar, wird nur
     kompakter gesetzt (Schrift/Abstände enger, Telefon einen Hauch
     schmaler), damit der Streifen auch bei 360–390px nicht bricht. */
  .kontrollstreifen { gap: 0.6rem; }
  .streifen-instrumente { gap: 0.4rem; }
  .passer { margin-left: 0.2rem; font-size: 0.8125rem; min-width: 4.2rem; }
  .streifen-tel { font-size: 0.9rem; }
  .dv-zeile { grid-template-columns: 1fr; gap: 0.1rem; }
}