/* ============================================================================
   gamroth-klartext „Klartext" — Typographic Poster
   Grund: Mitternachtsblau. Text: Kreide. Ein Akzent: Bernstein, nur fürs
   Telefon und aktive Zustände. Eine variable Grotesk (Bricolage Grotesque,
   wght 200–800, lokal). Typografie ist die Bildwelt.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: block;
}

:root {
  --sc-canvas:     #1B2A41;   /* Mitternachtsblau */
  --sc-surface:    #22334D;
  --sc-ink:        #F2EDE3;   /* Kreide */
  --sc-ink-soft:   #ABA695;   /* Kreide, gedämpft — 5.9:1 auf dem Grund */
  --sc-accent:     #E8A13C;   /* Bernstein — nur die eine Handlung */
  --sc-accent-ink: #16223A;

  --sc-font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --sc-font-text:    "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;

  --sc-shadow-color: 216 41% 8%;

  /* Der Größenrhythmus dieser Seite. Drei Extreme, bewusst weit auseinander. */
  --fs-giant: clamp(3.9rem, 19vw, 14.5rem);    /* Beat 1: die Frage        */
  --fs-terms: clamp(2.3rem, 9.2vw, 8.6rem);    /* Beat 2: die Begriffe     */
  --fs-peak:  clamp(2.5rem, 11.5vw, 11rem);    /* Beat 4: der Satz         */
  --fs-quiet: 0.9375rem;                        /* Beat 6: die kleinste     */
}

/* Ohne JavaScript steht alles fertig da. Die Engine-Defaults verstecken
   [data-sc-cue] und [data-sc-in]; das hier dreht es zurück, solange die
   Engine nicht übernommen hat. */
html:not(.sc-ready) [data-sc-cue] { opacity: 1; }
html:not(.sc-ready) :is([data-sc-in], [data-sc-stagger] > *) { opacity: 1; transform: none; }

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

/* ------------------------------------------------------------- Chrome ----
   Kein Balken. Eine kleine feste Telefonzeile oben rechts (Projektgesetz:
   durchgehend erreichbar), der Lotse-Button unten rechts (Embed). */
.phoneline {
  position: fixed; top: 0; right: 0; z-index: 60;
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0.5rem clamp(1rem, 3vw, 2rem);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sc-ink); text-decoration: none;
}
.phoneline strong { font-weight: 700; color: var(--sc-accent); margin-left: 0.45em; }
.phoneline:hover strong { text-decoration: underline; text-underline-offset: 0.22em; }

.demotag {
  position: fixed; top: 0; left: 0; z-index: 60; margin: 0;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  font-size: 0.875rem; font-weight: 500; color: var(--sc-ink-soft);
  pointer-events: none;
}

/* ------------------------------------------------------- Beat 1: Frage --- */
.act-frage { min-height: 100svh; display: flex; align-items: flex-end; }
.frage-inner {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--sc-gutter) clamp(2.2rem, 6vh, 4.5rem);
}
.frage-h1 {
  font-size: var(--fs-giant);
  font-weight: 760;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(1.6rem, 4vh, 3.2rem);
  text-wrap: balance;
}
.frage-h1 .l2 { display: block; }
/* Optischer Ausgleich: das P steht sonst optisch zu weit rechts. */
.frage-h1 { margin-left: -0.045em; }

.karte { max-width: 46rem; }
.karte-name { font-size: var(--sc-t-lg); font-weight: 650; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.karte-gebiete { font-size: var(--sc-t-base); color: var(--sc-ink-soft); margin: 0 0 1.3rem; }
.karte-cta {
  display: inline-block; min-height: 48px;
  font-size: var(--sc-t-lg); font-weight: 700; color: var(--sc-accent);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.24em;
}
.karte-cta:hover { text-decoration-thickness: 3px; }
.karte-zusatz { font-size: 0.9375rem; color: var(--sc-ink-soft); margin: 0.65rem 0 0; }

/* Sauberer Abgang: Beat 2 folgt ohne Puffer direkt auf Beat 1, dessen Karte
   sonst bis zu einer ganzen Viewport-Höhe lang mit den verstreuten Wörtern
   denselben Bildschirm teilt. Das blendet die Karte aus, sobald sie den
   Viewport nach oben verlässt — siehe klartext.js ("Beat 1: Kartenabgang").
   Bewusst NICHT über --sc-p (die Engine aktualisiert das nur im scroll-Event
   → rAF-Takt; bleibt dieser Takt an irgendeiner Stelle aus — Tab im
   Hintergrund, Frame-Drops bei einem schnellen Wisch/Fling — friert die
   Karte bei ihrer letzten Opazität ein, während der native Scroll
   weiterläuft, und verdeckt dann dauerhaft, was darunter erscheint,
   einschließlich der Telefonzeile. klartext.js rechnet dieselbe Formel
   stattdessen direkt in einem ungedrosselten scroll-Listener nach, ohne
   requestAnimationFrame und ohne das "ticking"-Flag, das hängen bleiben
   könnte. Nur die Karte ist betroffen, die Überschrift bleibt unverändert.

   Runde 2: KEIN CSS-transition mehr auf opacity. Grund, gemessen: eine
   transition macht den geschriebenen Zielwert vom Compositor/Paint-Takt
   abhängig — setzt man style.opacity synchron (z.B. mit will-change davor
   und einem Reflow dazwischen), bleibt getComputedStyle().opacity exakt
   beim ALTEN Wert hängen, bis irgendwann ein Paint-Frame nachkommt; unter
   Last (viele Scroll-Events, gedrosseltes Rendering, Hintergrund-Tab) kann
   das Sekunden dauern, obwohl der Inline-Style längst korrekt ist — exakt
   der gemeldete Fehler. op selbst ist bereits eine stetige Funktion der
   echten Scrollposition (bei jedem nativen scroll-Event neu berechnet),
   die Karte blendet beim normalen Scrollen also ohnehin schon weich aus;
   die transition fügte nur ein zusätzliches, bei schnellem/programmatischem
   Sprung eben nicht garantiert abschließendes Delay hinzu. Ohne transition
   zeigt der nächste tatsächliche Paint immer sofort den korrekten Wert. */
.karte {
  transition: none;
}

/* ---------------------------------------------------- Beat 2: Begriffe ---
   Die Angstbegriffe liegen schief und verstreut; der Scroll richtet sie
   Buchstabe für Buchstabe. Grundzustand im Markup ist der GEORDNETE Satz;
   die Streuung existiert nur mit Engine und ohne reduced motion. */
.act-terms .stage-terms {
  display: flex; align-items: center;
}
.terms {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  font-size: var(--fs-terms);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-block: 0;
}
.terms .word { display: block; width: fit-content; }
.terms .lt { display: inline-block; white-space: pre; }

@media (prefers-reduced-motion: no-preference) {
  .sc-ready .terms { --p: var(--sc-p, 0); }
  .sc-ready .terms .word {
    --wop: clamp(0, calc((var(--p) - var(--wd)) / 0.5), 1);
    --winv: calc((1 - var(--wop)) * (1 - var(--wop)));
    transform: rotate(calc(var(--wr) * var(--winv) * 1deg));
    transform-origin: 24% 62%;
    will-change: transform;
  }
  .sc-ready .terms .lt {
    --op: clamp(0, calc((var(--p) - var(--sd)) / 0.45), 1);
    --inv: calc((1 - var(--op)) * (1 - var(--op)));
    transform:
      translate(calc(var(--sx) * var(--inv) * 1em), calc(var(--sy) * var(--inv) * 1em))
      rotate(calc(var(--sr) * var(--inv) * 1deg));
    will-change: transform;
  }
}

.terms-echo {
  max-width: var(--sc-maxw); margin: 1.8rem auto 0; padding-inline: var(--sc-gutter);
  font-size: var(--sc-t-base); color: var(--sc-ink-soft);
}
/* Die Echo-Zeile kommt erst, wenn sich die Wörter geordnet haben. */
@media (prefers-reduced-motion: no-preference) {
  .sc-ready .stage-terms .terms-echo {
    opacity: clamp(0, calc((var(--sc-p, 0) - 0.58) / 0.18), 1);
  }
}

/* ------------------------------------------------------ Beat 3: Index --- */
.act-index { padding-block: clamp(4rem, 9vh, 7rem) clamp(7rem, 16vh, 12rem); }
.index-wrap { max-width: 52rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.index-label {
  font-size: 0.875rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 2.2rem;
}
.index-liste { list-style: none; margin: 0; padding: 0; }
.index-liste li { border-top: 1px solid var(--sc-hairline); padding: 1.35rem 0 1.45rem; }
.index-liste li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.index-problem { font-size: var(--sc-t-xl); font-weight: 620; letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
.index-begriff { font-size: 0.9375rem; color: var(--sc-ink-soft); margin: 0.3rem 0 0.55rem; }
.index-zeile { font-size: var(--sc-t-base); color: var(--sc-ink); font-weight: 400; margin: 0; max-width: 44rem; }

.lotse { margin-top: 3.2rem; }
.lotse-label {
  font-size: 0.875rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-accent); margin: 0 0 0.8rem;
}
.lotse p { font-size: var(--sc-t-base); margin: 0; max-width: 44rem; }
.lotse-open {
  display: none;
  margin-top: 1.4rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.4rem;
  background: var(--sc-accent); color: var(--sc-canvas);
  border: 0; border-radius: 2px; cursor: pointer;
  font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em;
}
.lotse-open[data-ready] { display: inline-block; }
.lotse-open:hover, .lotse-open:focus-visible { background: #FFFFFF; }

/* ------------------------------------------------------- Beat 4: Peak ---
   „Aus Sie wird Wir." Grundzustand im Markup ist die Wir-Fassung; S und e
   existieren, sind aber ausgeblendet. Das Skript armiert die Choreografie
   nur mit Motion-Erlaubnis. Alles transform/opacity, vom Scroll getrieben. */
.stage-peak { display: flex; align-items: center; }
.peak {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  padding-inline: var(--sc-gutter);
  font-size: var(--fs-peak);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.peak .pl { display: block; width: fit-content; }
.peak .g { display: inline-block; white-space: pre; }
.peak .g-s, .peak .g-e { display: none; }
.peak .rest { display: inline-block; white-space: pre; }

.peak-armed .peak .g-s, .peak-armed .peak .g-e {
  display: inline-block; width: 0; overflow: visible;
}
.peak-armed .peak .g, .peak-armed .peak .rest { will-change: transform, opacity; }

/* ----------------------------------------------------- Beat 5: Belege --- */
.act-belege { padding-block: clamp(4.5rem, 10vh, 8rem); }
.belege-wrap { max-width: 52rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.belege-label {
  font-size: 0.875rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin: 0 0 0.5rem;
}
.belege-demo { font-size: 0.875rem; color: var(--sc-ink-soft); margin: 0 0 2.4rem; }
.stimme { margin: 0 0 2.6rem; padding: 0; }
.stimme:last-of-type { margin-bottom: 0; }
.stimme blockquote { margin: 0; }
.stimme p { font-size: var(--sc-t-lg); font-weight: 450; line-height: 1.42; letter-spacing: -0.01em; margin: 0; max-width: 40rem; }
.stimme figcaption { font-size: 0.9375rem; color: var(--sc-ink-soft); margin-top: 0.75rem; }
/* Reveal auf dem Wrapper, nicht auf der Type: clip-path frisst sonst
   Ober-/Unterlängen (devices.md §4). */
.stimme .wipe { padding-block: 0.2em; } /* contain:paint jetzt generisch in scrollcraft.css auf [data-sc-reveal] */

/* -------------------------------------------------------- Beat 6: Ruhe ---
   Inversion: die kleinste Typografie der Seite. Kontakt als laufender Text,
   die Nummer als schlichter unterstrichener Link, das Passbild angeheftet. */
.stage-ruhe { display: flex; align-items: center; }
.ruhe-wrap {
  width: 100%; max-width: 62rem; margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.ruhe-text h2 { font-size: var(--fs-quiet); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 1.1rem; }
.ruhe-text p { font-size: var(--fs-quiet); line-height: 1.75; color: var(--sc-ink); margin: 0 0 1rem; max-width: 54ch; }
.ruhe-text a { color: var(--sc-ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.ruhe-text a.tel { color: var(--sc-accent); font-weight: 650; }
.ruhe-fuss { font-size: 0.875rem; color: var(--sc-ink-soft); margin-top: 1.6rem; }
.ruhe-fuss a { color: var(--sc-ink-soft); }

.passbild { margin: 0; transform: rotate(1.8deg); }
.passbild img {
  width: clamp(7rem, 12vw, 10.5rem); height: auto;
  border: 5px solid var(--sc-ink);
  box-shadow: var(--sc-e2);
}
.passbild figcaption { font-size: 0.8125rem; color: var(--sc-ink-soft); margin-top: 0.6rem; max-width: 14rem; text-wrap: pretty; }

/* Klick-Wachstum: klickbare Elemente und Bilder wachsen dezent bei Hover/Focus
   (Tims Wunsch, 31.08.). Bewusst auf `a`/`img` beschränkt, nicht auf jedes
   Element — nur was wirklich anklickbar ist bzw. ein Bild ist. */
@media (prefers-reduced-motion: no-preference) {
  a { transition: transform 0.18s ease; transform-origin: center; }
  a:hover, a:focus-visible { transform: scale(1.05); }
  img { transition: transform 0.25s ease; transform-origin: center; }
  img:hover { transform: scale(1.04); }
}

/* ------------------------------------------------------------- Mobile --- */
@media (max-width: 700px) {
  /* .phoneline (Telefonnummer, Projektgesetz: durchgehend erreichbar) und
     .demotag sitzen beide fixed/top:0, .phoneline rechts, .demotag links,
     beide ohne Breitenbegrenzung. Ab ~700px reicht die Zeile nicht mehr für
     beide nebeneinander — gemessen bei 390px überlappten sie sich real um
     ~112 x 34px. Fix: eigene Zeile für .demotag unter der Telefonzeile,
     damit es NIE eine gemeinsame Reihe gibt, in der beide um Platz
     konkurrieren — unabhängig von Textlänge oder Scrollposition.
     Fix-Nachtrag: `position: absolute` war falsch -- ohne positionierten
     Vorfahren bindet das an das Dokument, nicht den Viewport, und wandert
     beim Scrollen durch die weiterhin fixe .phoneline hindurch (gemessen:
     Overlap bei scrollY 10-90px). `fixed` beibehalten wie die Basisregel,
     nur die Zeile verschieben -- bleibt dann bei jeder Scrollposition an
     derselben Stelle relativ zum Viewport, keine Ueberschneidung moeglich. */
  .demotag { top: 3rem; }
  .frage-inner { padding-top: 4.2rem; padding-bottom: 7.5rem; }
  .karte-zusatz, .passbild figcaption { font-size: 0.875rem; }
  .ruhe-wrap { grid-template-columns: 1fr; align-content: center; }
  .passbild { justify-self: start; margin-top: 0.4rem; }
  .terms { line-height: 1.12; font-size: 13.5vw; }
  .peak { font-size: 14vw; line-height: 1.04; }
}

/* Reduced motion: die Sätze stehen fertig da, inklusive Wir-Fassung
   (Grundzustand des Markups). Zusätzliche Absicherung: */
@media (prefers-reduced-motion: reduce) {
  .terms .word, .terms .lt, .peak .g, .peak .rest { transform: none !important; opacity: 1 !important; }
  .peak .g-s, .peak .g-e { display: none !important; }
  .passbild { transform: rotate(1.8deg); }
}

/* Bußgeldlotse-Knopf: Kreide-Ring, damit er sich vom dunklen Grund trennt
   (analog zur provisorischen Überschreibung in gamroth-standard, §7). */
.bgl-fab { box-shadow: 0 0 0 2px var(--sc-ink) !important; }