/* Argos-Strecke: Motor + Zäsur/Methodikblock. Extrahiert aus entwuerfe/argos-final-entwurf.html (getestet per Playwright, siehe entwuerfe/NOTIZ-zusammenfuehrung.md). Nur auf / geladen (Landeseite + Story), nicht auf /methodik. */

.fuss-dunkel{
  --l-tinte:#EDF0F4; --l-tinte-2:#93A0B1; --l-tinte-3:#7D8695;
  --l-linie:color-mix(in srgb, #EDF0F4 16%, transparent);
  --l-akzent:#E8A765;
  background:transparent;
}
.fuss-dunkel .marke-abzeichen{border:1px solid color-mix(in srgb, #EDF0F4 20%, transparent)}

/* CSP: style-src 'self' ohne 'unsafe-inline' verwirft style="…"-Attribute
   (siehe tests/test_kein_safe.py). Versteckter Symbol-Container statt
   inline position:absolute. */
.sc-symbole{position:absolute}

/* ═══════════════════════════════════════════════════════════════════════
   D · EIN TON — Grundfläche, Wasserzeichen, ruhige Scrollwirkung.
   Der Farbwechsel Landeseite → Methodik ist entfallen: alle Abschnitte sind
   transparent, der Grundton (#0a0a0b, der Ton der Landeseite) liegt genau
   einmal auf dem Wurzelelement. Damit gibt es keine Naht, unabhängig von
   Scrollposition, Viewporthöhe oder fixed/normal-Verankerung.
   ═══════════════════════════════════════════════════════════════════════ */
html{ background:#0a0a0b; }
body.land-body{ background:transparent; }

/* Wasserzeichen: das Signet, rechts, sehr leise. Liegt auf z-index:-1, also
   über der Wurzelfläche und unter jedem Inhalt — kein Kontrastrisiko. */
.grund-signet{
  position:fixed; z-index:-1; pointer-events:none;
  inset-block-start:50%; inset-inline-end:-8vw;
  translate:0 calc(-50% + var(--signet-versatz, 0px));
  width:clamp(20rem,34vw,38rem); aspect-ratio:599/557;
  opacity:0;
  color:#EDF0F4;
  mask-image:radial-gradient(85% 85% at 55% 50%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(85% 85% at 55% 50%, #000 55%, transparent 100%);
  transition:opacity 900ms cubic-bezier(.16,1,.3,1);
}
.grund-signet svg{ width:100%; height:100%; display:block; fill:currentColor; }
@media (max-width:760px){ .grund-signet{ inset-inline-end:-34%; } }

/* Ruhiges Licht statt Farbsprung: ein einziger, sehr weicher Schein, der
   viewportfest steht — beim Scrollen wandert der Inhalt hindurch. */
.grund-licht{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(237,240,244,.055), transparent 60%),
    radial-gradient(90% 60% at 92% 45%, rgba(232,167,101,.035), transparent 65%),
    radial-gradient(140% 90% at 50% 110%, rgba(237,240,244,.03), transparent 60%);
}

/* Linien: jedes Kapitel bekommt eine Haarlinie, die beim Eintreten aufzieht. */
.kapitel{ position:relative; }
.kapitel::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, #EDF0F4 22%, transparent) 22%, color-mix(in srgb, #EDF0F4 22%, transparent) 78%, transparent);
  transform:scaleX(.12); transform-origin:0 50%; opacity:0;
  transition:transform 1100ms cubic-bezier(.16,1,.3,1), opacity 700ms ease;
}
.kapitel.ist-sichtbar::before{ transform:scaleX(1); opacity:1; }

/* Reveal: der Abschnitt hebt sich beim Eintreten leise an. */
.kapitel > *{
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity 720ms cubic-bezier(.16,1,.3,1), transform 720ms cubic-bezier(.16,1,.3,1);
}
.kapitel.ist-sichtbar > *{ opacity:1; transform:none; }
.kapitel.ist-sichtbar > :nth-child(2){ transition-delay:70ms; }
.kapitel.ist-sichtbar > :nth-child(3){ transition-delay:140ms; }
.kapitel.ist-sichtbar > :nth-child(n+4){ transition-delay:200ms; }

/* Zäsur trägt jetzt die Übergangsarbeit allein — als Linie, nicht als Farbe. */
.zaesur{ border-block-start:1px solid color-mix(in srgb, #EDF0F4 8%, transparent); }
.zaesur__inner::before{
  content:""; display:block; width:1px; height:clamp(4.25rem,10.4vh,7.15rem);
  background:linear-gradient(180deg, transparent, color-mix(in srgb, #EDF0F4 28%, transparent));
  margin-inline:auto;
}

@media (prefers-reduced-motion:reduce){
  .kapitel::before{ transform:none; opacity:1; transition:none; }
  .kapitel > *{ opacity:1; transform:none; transition:none; }
  .grund-signet{ transition:none; }
}


/* scrollcraft engine, unverändert eingebettet */
/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #0a0a0b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #141416;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #0a0a0b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:where(a) { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

[data-sc-pan] { display: flex; will-change: transform; }

[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
video[data-sc-scrub].sc-has-clip { opacity: 1; }

.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

.sc-world__spacer { pointer-events: none; }

[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  [data-sc-reveal] { clip-path: none !important; }
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   B · ZÄSUR — Übergangselement zwischen Landeseite und Methodikblock.
   Eigene, feste Farbwerte (nicht von .methodik-Tokens abhängig): der
   Methodikblock soll herauslösbar bleiben, die Zäsur ist Landeseiten-Kitt,
   nicht Teil des Blocks. Bewusst kein neuer Satz an die (unveränderte)
   Landeseite angehängt — stattdessen ein eigenständiges Element.
   ═══════════════════════════════════════════════════════════════════════ */
/* Dokument-Ebene, nicht Landeseiten-Inhalt: `.land-body{overflow-x:hidden}`
   unterdrückt zwar den Scrollbalken, lässt aber programmatisches/Touch-
   Scrollen zu (anders als `overflow:clip`), was der schmale, nicht
   umbrechende `.arg-ticker`-Text bei 390px sonst ausnutzt. Der eigentliche
   Fix läge im Ticker-Text selbst — der ist aber unveränderter Landeseiten-
   Inhalt, also wird stattdessen hier, auf Dokumentebene, geklemmt. */
html { overflow-x: clip; }

/* Zweistufiger Aufbau statt eines einzigen Verlaufs über die volle Fläche:
   `.zaesur` selbst trägt schon die Zielfarbe als Volltonhintergrund — exakt
   `--sc-canvas` des Methodikblocks, identisch, keine Naht möglich, weil es
   dieselbe Farbe ist. `.zaesur__verlauf` legt sich nur über den oberen Teil
   und läuft in genau diese Farbe aus. Darunter bleibt garantiert Volltonfläche
   übrig, unabhängig von Viewport-Höhe oder Textlänge — dort sitzt der Satz,
   damit der Kontrast nie vom Zufall der Verlaufsmitte abhängt. */
/* Fehler Runde 2: Verlauf startete bei Weiß (#FBFBFC), passend zur hellen
   Landeseite — aber Nav/Ticker/Hero/Mythos direkt darüber sind alle dunkel
   (--bg/--bg-soft). Ergebnis: weißer Blitz zwischen zwei dunklen Flächen.
   Kein Hell/Dunkel-Wechsel hier, also auch kein Verlauf dafür nötig — direkt
   an --bg (#0a0a0b, der Ton, in den Hero/Mythos auslaufen) anschließen und
   knapp zu --sc-canvas (#0A0D12) hinüberziehen. */
/* Zweiter Fund: nicht die Farbe war falsch, sondern der Mechanismus. Nav/
   Ticker/Hero/Mythos nutzen alle denselben Verlauf MIT
   background-attachment:fixed — dadurch wirken sie wie ein einziger,
   durchgehender Hintergrund (derselbe Trick, viewport-verankert, nicht
   elementverankert). Ein normal scrollender Hintergrund direkt darunter
   kann damit nie exakt übereinstimmen: während gescrollt wird, bleibt der
   fixierte Hintergrund oben stehen, meiner wandert mit — die Kante
   verschiebt sich ständig, egal welchen Farbton man wählt. Fix: dieselbe
   fixierte Basis 1:1 übernehmen (identisch nahtlos zu allem darüber, weil
   es derselbe Trick ist), und erst darüber, in einer eigenen,
   NICHT-fixierten Ebene, in die Methodik-Fläche (--sc-canvas) einblenden —
   dieser zweite Übergang liegt vollständig im normalen Dokumentfluss, also
   ohne den fixed/normal-Konflikt. */
.zaesur{
  position:relative; overflow:hidden;
  background:transparent;
  min-height:clamp(20rem,46vh,28rem);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.zaesur__verlauf{
  position:absolute; inset:0;
  pointer-events:none;
  background:none;
}
.zaesur__grain{ display:none; }
.zaesur__grain::before{
  content:""; position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.zaesur__inner{
  position:relative; z-index:1;
  max-width:1200px;margin-inline:auto;padding-inline:20px;
  padding-block:clamp(2.6rem,6vh,4rem) clamp(3rem,7vh,4.5rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;
}
.zaesur__kicker{
  font-family:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  font-size:clamp(.84rem,.8rem + .17vw,.94rem);letter-spacing:.28em;text-transform:uppercase;color:#A9AFBC;
}
/* ═══════════════════════════════════════════════════════════════════════
   C · METHODIKBLOCK — geschlossener, herauslösbarer Wrapper `.methodik`.
   Alle Marken-Tokens des Methodikentwurfs sitzen hier statt auf :root, damit
   sich der Block später als eigenständiges Jinja-Partial abtrennen lässt.
   Grammatik: chaptered editorial. Das Signet ist das Folio.
   Signature Move: Belegzwang (jede Behauptung trägt ihre Fundstelle).
   ═══════════════════════════════════════════════════════════════════════ */

.methodik {
  --sc-canvas:     #0a0a0b;
  --sc-surface:    #141416;
  --sc-ink:        #EDF0F4;
  --sc-ink-soft:   #93A0B1;
  --sc-accent:     #E8A765;
  --sc-accent-ink: #0a0a0b;

  --sc-font-display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", monospace;

  /* Keine --beleg-*-Farbskala mehr nötig: Aktie (Raster) und Krypto
     (Wortliste) sind hier durchgehend einfarbig (var(--sc-ink)), tragen also
     gar keine Farbabstufung, die gegen I-1 verstoßen könnte. */
  --folio-breite: 5.5rem;
  --rand-breite: 17rem;
  --spalte: 60ch;

  display:block;
  position:relative;
  background: transparent;
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.075rem);
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ── Das Folio. Erscheint erst mit dem Methodikblock (siehe Skript unten),
      damit der Fortschrittsanzeiger nie „Titelblatt" zeigt, während man noch
      im Hero der Landeseite ist. ── */

.folio {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--folio-breite);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  padding-block: 1.6rem;
  z-index: 40; pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--sc-ease-out);
}
.folio.ist-sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .folio { transition: none; } }
.folio__signet {
  width: 1.55rem; height: auto; display: block;
  fill: var(--sc-ink); opacity: 0.9;
  transform: rotate(calc(var(--dok, 0) * 12deg));
  transition: fill 400ms var(--sc-ease-out), opacity 400ms var(--sc-ease-out);
}
.folio__spur {
  flex: 1; width: 1px; margin-block: 1.1rem;
  background: color-mix(in srgb, var(--sc-ink) 16%, transparent);
  position: relative;
}
.folio__spur::after {
  content: ""; position: absolute; inset-inline: -0.5px; top: 0;
  height: calc(var(--dok, 0) * 100%);
  background: var(--sc-ink); opacity: 0.55;
}
.folio__kapitel {
  font-family: var(--sc-font-mono);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  writing-mode: vertical-rl; text-orientation: mixed;
  white-space: nowrap;
}

/* ── Der Satzspiegel. Drei Spalten: Folio, Text, Marginalrand. ── */

.kapitel {
  position: relative;
  padding-block: clamp(5rem, 11vh, 9rem);
  padding-inline: var(--folio-breite) clamp(1.25rem, 5vw, 3rem);
  /* Kein eigener deckender Hintergrund mehr (war identisch zu --sc-canvas
     auf html, rein redundant) — sonst verdeckt jedes Kapitel das fixe
     Signet-Wasserzeichen (.grund-signet) vollständig. Aktuell setzt kein
     data-sc-drift diese Variable um, sollte das genutzt werden, braucht
     der Drift-Effekt eine eigene Lösung statt dieser Hintergrundfläche. */
}
/* Der Stapel ist eine flache Liste, kein langes Kapitel — weniger Höhe statt
   einer rechten Spalte, die nur Leere trägt (Auftrag Abschnitt 3). */
.kapitel--kompakt { padding-block: clamp(3.5rem, 8vh, 6rem); }
.satz {
  display: grid;
  grid-template-columns: minmax(0, var(--spalte)) var(--rand-breite);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  /* `width:100%` statt nur `max-width`: als Grid-/Flex-Item (Titelblatt
     zentriert vertikal über display:flex) würde ein bloßes `width:auto` +
     `margin-inline:auto` sonst auf die eigene Inhaltsbreite schrumpfen
     (Grid-/Flexbox-Regel: auto-Margins erzwingen shrink-to-fit) statt auf
     die volle Zeile zu strecken — mit expliziter Breite entfällt das. */
  width: 100%; max-width: 68rem;
  /* Fester Einzug statt margin-inline:auto auf beiden Seiten: so bleibt der
     linke Satzrand exakt gleich, auch wenn `.satz--voll` (Kapitel III) ein
     größeres max-width hat und dadurch sonst asymmetrisch zentrieren würde —
     alle Kapitel bündig, unabhängig von der eigenen Breite. */
  margin-inline-start: max(0px, calc((100% - 68rem) / 2));
  margin-inline-end: auto;
  align-items: start;
}
.satz__text { min-width: 0; }
.satz__rand { position: relative; min-height: 100%; }

/* Modifier: volle Satzbreite (Drei Maßstäbe). Randspalte bleibt, trägt aber
   nur eine einzige Fundstelle — der Textbereich selbst füllt den Rest. */
.satz--voll { grid-template-columns: minmax(0, 1fr) var(--rand-breite); max-width: 78rem; }

/* ── Typografie. Zwei Familien, Mono nur für Daten und Fundstellen. ── */

.kopfzeile {
  font-family: var(--sc-font-mono);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: flex; gap: 0.9rem; align-items: baseline;
  margin-block-end: clamp(1.6rem, 3vh, 2.4rem);
}
.kopfzeile::after {
  content: ""; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--sc-ink) 14%, transparent);
  transform: translateY(-0.28em);
}

h2.titel {
  font-family: var(--sc-font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.35rem);
  line-height: 1.04; letter-spacing: -0.024em; font-weight: 620;
  text-wrap: balance;
  margin-block-end: 1.15rem;
}
h3.unter {
  font-family: var(--sc-font-display);
  font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.2rem);
  line-height: 1.3; letter-spacing: -0.012em; font-weight: 620;
  margin-block-end: 0.35rem;
}
p { max-width: var(--spalte); text-wrap: pretty; }
p + p { margin-block-start: 1.05rem; }
.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.52; color: var(--sc-ink);
  letter-spacing: -0.008em;
}
.leise { color: var(--sc-ink-soft); }
.platzhalter{
  color: var(--sc-accent);
  border-bottom: 1px dashed color-mix(in srgb, var(--sc-accent) 60%, transparent);
  padding-inline: 0.15em;
}

/* ── Belegzwang: der Marginalapparat. Der Signature Move. ── */

.anspruch {
  border-block-end: 1px solid color-mix(in srgb, var(--sc-ink) 22%, transparent);
  padding-block-end: 0.06em;
}
.fundstelle {
  position: absolute; inset-inline: 0;
  font-family: var(--sc-font-mono);
  font-size: 0.685rem; line-height: 1.5; letter-spacing: 0.005em;
  color: var(--sc-ink-soft);
  padding-inline-start: 1.35rem;
  opacity: 0; transform: translateX(0.5rem);
  transition: opacity 460ms var(--sc-ease-out), transform 460ms var(--sc-ease-out);
}
.fundstelle::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block-start: 0.62em;
  width: 0.95rem; height: 1px;
  background: var(--sc-ink-soft);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 520ms var(--sc-ease-out) 120ms;
}
.fundstelle b {
  display: block; font-weight: 500;
  color: var(--sc-ink); letter-spacing: 0.03em;
}
.ist-belegt .fundstelle,
.fundstelle.ist-belegt { opacity: 1; transform: none; }
.ist-belegt .fundstelle::before,
.fundstelle.ist-belegt::before { transform: scaleX(1); }

@media (max-width: 62rem) {
  .satz, .satz--voll { grid-template-columns: minmax(0, 1fr); }
  .satz__rand { display: contents; }
  .fundstelle {
    position: static; opacity: 1; transform: none;
    padding-inline-start: 0; margin-block: 0.6rem 1.5rem;
    border-inline-start: 1px solid color-mix(in srgb, var(--sc-ink) 20%, transparent);
    padding-inline-start: 0.85rem;
  }
  .fundstelle::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fundstelle { opacity: 1; transform: none; transition: none; }
  .fundstelle::before { transform: scaleX(1); transition: none; }
}

/* ── Titelblatt. Gestaucht: die Landeseite hat bereits einen 100svh-Hero mit
      Wortmarke, hier reicht eine Zäsur von etwa halber Bildhöhe. Wortmarke
      ist h2, nicht h1 — genau ein h1 im Dokument, das der Landeseite. ── */

.titelblatt {
  min-height: 56svh;
  /* flex statt grid: als Grid-Item bekäme `.satz` (margin-inline:auto, kein
     eigenes width) eine shrink-to-fit-Breite statt auf die volle Zeile
     gestreckt zu werden — dadurch säße das Titelblatt nicht bündig mit den
     übrigen, block-basierten Kapiteln. */
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3rem, 8vh, 5rem);
}
.titelblatt .satz { align-items: end; }
.titelblatt .satz__rand { display: flex; flex-direction: column; justify-content: flex-end; }
.wortmarke {
  font-family: var(--sc-font-display);
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.6rem);
  line-height: 0.9; letter-spacing: -0.045em; font-weight: 700;
  margin-block-end: 0.7rem;
}
.wortmarke .tag {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: clamp(0.62rem, 0.56rem + 0.35vw, 0.78rem);
  letter-spacing: 0.42em; font-weight: 400;
  color: var(--sc-ink-soft);
  margin-block-start: 0.85rem; padding-inline-start: 0.28em;
}
.titelblatt__signet {
  width: clamp(3.6rem, 9vw, 6.5rem); height: auto;
  fill: var(--sc-ink); opacity: 0.94;
  margin-block-end: clamp(1.4rem, 4vh, 2.4rem);
}
/* ── Belegzeile: die eine echte Quelle, jetzt in Schritt 01 · Quellen. ── */

/* Faksimile statt Kasten: keine Flächenfüllung mehr, die Form kommt über
   eine Randlinie (die „Beleg-Kante") und eine Kopf-Haarlinie. Darf ab der
   zweispaltigen Breite nach rechts in den leeren Marginalrand ausbrechen —
   sie ist das einzige echte Materialstück der Seite und verdient den Platz. */
.belegzeile {
  margin-block: 1.6rem 0.6rem;
  max-width: var(--spalte);
  padding-inline-start: clamp(1rem, 2.4vw, 1.4rem);
  border-inline-start: 2px solid color-mix(in srgb, var(--sc-ink) 32%, transparent);
}
.belegzeile__kopf {
  font-family: var(--sc-font-mono);
  font-size: 0.685rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  padding-block-end: 0.9rem;
  margin-block-end: 1.1rem;
  border-block-end: 1px solid color-mix(in srgb, var(--sc-ink) 16%, transparent);
}
.belegzeile__zitat {
  font-family: var(--sc-font-mono);
  font-size: 0.96rem; line-height: 1.66;
  color: var(--sc-ink);
}
.belegzeile__fuss {
  font-family: var(--sc-font-mono);
  font-size: 0.685rem; letter-spacing: 0.03em; color: var(--sc-ink-soft);
  margin-block-start: 1rem;
}
@media (min-width: 62rem) {
  .belegzeile {
    max-width: none;
    margin-inline-end: calc(-1 * (var(--rand-breite) + clamp(1.5rem, 4vw, 3.5rem)));
  }
}

/* ── Die vier Schritte. Kein Kartenraster: Absätze am Stamm. ── */

/* Der Stamm wächst mit dem Scrollen, wie die Spur im Folio: eine gedämpfte
   Grundlinie (::before) plus eine volltonige Füllung (::after), deren Höhe
   ein einzelner, globaler Scroll-Handler in --stamm-p schreibt (derselbe
   Aufbau wie folio__spur — kein Handler pro Element). Der aktive Schritt
   kommt separat über IntersectionObserver: „ist-aktiv" schaltet Text und
   Punkt auf volle Tinte, alles andere bleibt auf --sc-ink-soft gedämpft
   (7,3:1 auf --sc-canvas — deutlich über der 4,5:1-Pflicht), nie auf
   opacity. */
.stamm { position: relative; margin-block-start: 1.3rem; }
/* Die senkrechte Fortschrittslinie ist entfernt — die Schritte tragen sich
   allein über Nummer und Typografie. */
.schritt {
  position: relative;
  padding-inline-start: 0;
  padding-block: 0 clamp(2rem, 4vh, 2.9rem);
  color: var(--sc-ink-soft);
  transition: color 420ms var(--sc-ease-out);
}
.schritt h3, .schritt p { color: inherit; }
.schritt.ist-aktiv { color: var(--sc-ink); }
.schritt:last-child { padding-block-end: 0; }

.schritt__nr {
  font-family: var(--sc-font-mono);
  font-size: 0.66rem; letter-spacing: 0.18em; color: var(--sc-ink-soft);
  display: block; margin-block-end: 0.45rem;
}
@media (prefers-reduced-motion: reduce) {
  .schritt { color: var(--sc-ink); transition: none; }
}

/* ── Kapitel III: die drei Maßstäbe. Runde 3: alle drei Figuren der echten
      Methodikseite (anwendung/oberflaeche/vorlagen/methodik.html + stil.css)
      übernommen, nicht nachgebaut — Ring, Stufenbalken, gestrichelter Kreis
      mit Dokumentzeichen. Angepasst an Marken-Tokens/Typografie der Strecke.
      Achromatisch (R==G==B): alles über var(--sc-ink)/var(--sc-ink-soft),
      kein Hex-Literal in diesem Block — der Grep am Ende findet entsprechend
      nichts. Alle drei auf gemeinsamer Grundlinie über .mass__figur (flex,
      align-items: flex-end, feste Mindesthöhe). ── */

.masstaebe {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: 2.4rem;
}
@media (min-width: 46rem) { .masstaebe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mass__titel {
  font-family: var(--sc-font-mono);
  font-size: 0.66rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--sc-ink-soft); margin-block-end: 0.9rem;
}
.mass p { font-size: 0.94rem; line-height: 1.6; color: var(--sc-ink-soft); max-width: 36ch; }
.mass__figur { display: flex; align-items: flex-end; min-height: 9.2rem; margin-block: 0 1.1rem; }

/* Aktie: der Ring, ohne Fortschrittsbogen — es gibt in dieser Fassung
   keinen Score zu zeigen, also existiert das Element dafür gar nicht erst.
   „0–100" ist die Skalenbeschriftung, keine Messung (I-1). */
.fig-ring { position: relative; width: 8.25rem; height: 8.25rem; }
.fig-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fig-ring__spur { fill: none; stroke: color-mix(in srgb, var(--sc-ink) 24%, transparent); stroke-width: 9px; }
.fig-ring__zahl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sc-font-mono); font-size: 1.05rem; letter-spacing: 0;
  color: var(--sc-ink-soft);
}

/* Krypto: die fünf aufsteigenden Balken der echten Seite, römisch I–V —
   plus die sprechenden Bandnamen des Entwurfs als eigene Liste darunter,
   Balken und Namen in derselben Reihenfolge (I=Unbelegt … V=Belegt). */
.fig-baender { display: flex; flex-direction: column; gap: 0.5rem; }
.fig-baender__balken { display: flex; align-items: flex-end; gap: 6px; height: 6.6rem; }
.fig-baender__band {
  width: 22px; height: 100%; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--sc-ink) 14%, transparent);
}
.fig-baender__band i { position: absolute; inset-inline: 0; inset-block-end: 0; display: block; background: var(--sc-ink); }
.fig-baender__band[data-stufe="1"] i { height: 20%; }
.fig-baender__band[data-stufe="2"] i { height: 40%; }
.fig-baender__band[data-stufe="3"] i { height: 60%; }
.fig-baender__band[data-stufe="4"] i { height: 80%; }
.fig-baender__band[data-stufe="5"] i { height: 100%; }
.fig-baender__ziffern { display: flex; gap: 6px; }
.fig-baender__ziffern span {
  width: 22px; text-align: center;
  font-family: var(--sc-font-mono); font-size: 0.62rem; color: var(--sc-ink-soft);
}
.fig-baender__namen {
  list-style: none; margin-block: 0.8rem 1.1rem;
  display: grid; gap: 3px;
  font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
}
.fig-baender__namen b { display: inline-block; width: 1.6em; color: var(--sc-ink); font-weight: 500; }

/* ETF/Rohstoff: echte Figur der Methodikseite übernommen — gestrichelter,
   leerer Kreis (.met-keinscore) mit Dokumentzeichen, statt der zuvor hier
   erfundenen Aktendeckel-Form. */
.fig-akte { width: 6.3rem; height: 6.3rem; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--sc-ink) 24%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.fig-akte__doc {
  width: 1.9rem; height: 1.9rem;
  stroke: var(--sc-ink-soft); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.fig-akte__marke {
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin-block-end: 0.6rem;
}
.entscheidung {
  font-family: var(--sc-font-display);
  font-size: 1rem; line-height: 1.5; font-weight: 500;
  color: var(--sc-ink);
  margin-block-end: 0.7rem;
}

/* ── Kolophon. Editorial-Schluss: kleinste Type, CTA als laufender Text. ── */

.kolophon { padding-block: clamp(5rem, 12vh, 9rem) clamp(3rem, 7vh, 5rem); }
.kolophon__signet {
  width: clamp(2.6rem, 5vw, 3.6rem); height: auto;
  fill: var(--sc-ink); opacity: 0.9; margin-block-end: 1.8rem;
}
.aufruf {
  font-family: var(--sc-font-display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.95rem);
  line-height: 1.36; letter-spacing: -0.018em; font-weight: 500;
  max-width: 30ch;
}
.aufruf a {
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  border-radius: 2px;
}
.aufruf a:hover { text-decoration-thickness: 2px; }
.aufruf a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; text-decoration: none; }

.kolophon a.weiterweg {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-block-start: 1.3rem;
  font-family: var(--sc-font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--sc-ease-out);
}
.kolophon a.weiterweg:hover, .kolophon a.weiterweg:focus-visible { color: var(--sc-ink); }
.weiterweg span:first-child { display: inline-block; font-size: 0.95rem; transition: transform 200ms var(--sc-ease-out); }
.weiterweg:hover span:first-child { transform: translateY(2px); }

.kleingedruckt {
  margin-block-start: clamp(3rem, 7vh, 4.5rem);
  padding-block-start: 1.2rem;
  border-block-start: 1px solid color-mix(in srgb, var(--sc-ink) 15%, transparent);
  font-family: var(--sc-font-mono);
  font-size: 0.665rem; line-height: 1.9; letter-spacing: 0.035em;
  color: var(--sc-ink-soft);
  max-width: 60ch;
}
.kleingedruckt strong { color: var(--sc-ink); font-weight: 500; }

/* `.kolophon a.rueckweg`, nicht nur `.rueckweg`: dieselbe Spezifitäts-Falle
   wie beim Zäsur-Link — `.land-body a{color:inherit}` würde sonst gewinnen
   und die Dämpfung zunichtemachen. */
.kolophon a.rueckweg {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-block-start: clamp(2.2rem, 5vh, 3rem);
  font-family: var(--sc-font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color 200ms var(--sc-ease-out);
}
.kolophon a.rueckweg:hover, .kolophon a.rueckweg:focus-visible { color: var(--sc-ink); }
.rueckweg__pfeil { display: inline-block; font-size: 0.95rem; transition: transform 200ms var(--sc-ease-out); }
.rueckweg:hover .rueckweg__pfeil { transform: translateY(-2px); }

.methodik ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
.methodik :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

@media (max-width: 46rem) {
  .methodik { --folio-breite: 2.9rem; }
  .folio__kapitel { display: none; }
  .schritt { padding-inline-start: 0; }