/* Skerno · Startseite · Stylesheet
   Farben nach Website/Skizze/Skizze.md (Briefing v2.1), Palette Navy & Hafer.
   Stand 16.09.2026: Glasflächen über Stimmungsbildern, Popover am Diagrammpunkt, ruhige Eintritte. */

/* ---------- Schrift ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #202736;
  --navy-900: #161C28;
  --paper: #FAFAF8;
  --oat: #CCBE8A;
  --oat-dark: #75693F;
  --sage: #D5DBD1;
  --muted: #59615E;

  --hair-paper: rgba(32, 39, 54, .16);
  --hair-sage: rgba(32, 39, 54, .2);
  --hair-dark: rgba(250, 250, 248, .16);

  --glass-bg: rgba(250, 250, 248, .74);
  --glass-line: rgba(32, 39, 54, .12);
  --glass-shadow: 0 40px 90px -40px rgba(22, 28, 40, .35);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px; --s14: 112px; --s16: 128px;

  --content: 1200px;
  --margin: clamp(20px, 8.333vw, 120px);
  --gutter: 32px;
  --nav-h: 72px;

  --fs-display: clamp(44px, 5vw, 76px);
  --fs-h2: clamp(34px, 3.2vw, 48px);
  --fs-h3: 26px;
  --fs-lead: 22px;
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-label: 12px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-pop: cubic-bezier(.2, .8, .2, 1);
  --t: 200ms;
  --t-fast: 160ms;

  --focus: var(--navy);
  color-scheme: light;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
strong { font-weight: 500; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark { --focus: var(--paper); }
.on-light { --focus: var(--navy); }

.skip-link {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--navy); color: var(--paper);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none; border-radius: 3px;
}
.skip-link:focus { top: var(--s2); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typografie ---------- */
.display { font-size: var(--fs-display); line-height: 1.02; font-weight: 700; letter-spacing: -.028em; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; font-weight: 600; letter-spacing: -.022em; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 400; }
.small { font-size: var(--fs-small); line-height: 1.5; }
.label { font-size: var(--fs-label); line-height: 1.4; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; }
.tnum { font-variant-numeric: tabular-nums; }

.text-link {
  display: inline-block; text-decoration: none; font-size: var(--fs-small); font-weight: 500;
  padding-bottom: 3px; border-bottom: 1px solid currentColor; line-height: 1.3;
  transition: border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.text-link:hover { opacity: .72; }

.ph { border-bottom: 1px dashed currentColor; opacity: .78; } /* Platzhalter, sichtbar gekennzeichnet */

/* ---------- Raster ---------- */
.container { width: min(var(--content), 100% - 2 * var(--margin)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 3px;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  background: var(--navy); color: var(--paper);
  box-shadow: 0 1px 2px rgba(22, 28, 40, .14);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover { background: var(--navy-900); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(22, 28, 40, .45), 0 1px 2px rgba(22, 28, 40, .14); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(22, 28, 40, .14); transition-duration: 80ms; }
.on-dark .btn, .btn--paper { background: var(--paper); color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.on-dark .btn:hover, .btn--paper:hover { background: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .25); }
.on-dark .btn:active, .btn--paper:active { box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.btn:focus-visible { outline-offset: 4px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50;
  color: var(--paper);
  --focus: var(--paper);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair-paper); opacity: 0; transition: opacity var(--t) var(--ease);
}
.nav.is-solid {
  background: rgba(250, 250, 248, .9); color: var(--navy); --focus: var(--navy);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
}
.nav.is-solid::after { opacity: 1; }
.nav.is-menu { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }

/* Bildmarke und Wortmarke als feste Einheit: beide Kästen bekommen aus dem Seitenverhältnis
   eine eindeutige Breite. Ohne das leitet mancher Browser die Breite der Wortmarke aus der
   voreingestellten SVG-Größe ab; dann steht das Wort weit rechts neben der Bildmarke. */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark { height: 30px; aspect-ratio: 1128 / 1388; flex: none; }
.brand-word { height: 17px; aspect-ratio: 620 / 145; flex: none; }
.brand-mark svg, .brand-word svg { display: block; width: 100%; height: 100%; }
.brand-mark, .brand-word { transition: opacity var(--t) var(--ease); }

.nav-right { display: flex; align-items: center; gap: var(--s6); }
.nav-links { display: flex; gap: var(--s4); }
.nav-links a {
  position: relative; font-size: var(--fs-small); font-weight: 500; text-decoration: none; padding: 6px 0; line-height: 1.3;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-pop);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav .btn { background: var(--paper); color: var(--navy); }
.nav .btn:hover { background: #fff; }
.nav.is-solid .btn { background: var(--navy); color: var(--paper); }
.nav.is-solid .btn:hover { background: var(--navy-900); }

.menu-toggle {
  display: none; font-size: var(--fs-small); font-weight: 500; padding: 12px 0; line-height: 1.3; min-height: 44px;
  border-bottom: 1px solid currentColor;
}
.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--navy-900); color: var(--paper); --focus: var(--paper);
  padding: calc(var(--nav-h) + var(--s4)) var(--margin) var(--s4);
  display: none; flex-direction: column;
}
.menu.is-open { display: flex; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  display: block; font-size: 34px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-decoration: none;
  padding: 20px 0; border-bottom: 1px solid var(--hair-dark);
}
.menu-links a:focus-visible { outline-offset: -3px; }
.menu-links li:first-child a { border-top: 1px solid var(--hair-dark); }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); }
.menu-foot .btn { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(720px, 100svh);
  background: var(--navy-900); color: var(--paper);
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + var(--s8)) 0 168px;
}
.hero-atmo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; pointer-events: none; user-select: none;
  transform: scale(1.03); /* verdeckt die weichen Bildränder; das Bild steht still */
}
.hero-glow {
  /* Das Licht trägt das Stimmungsbild; der Verlauf schützt nur noch den Text links. */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 28, 40, .76) 0, rgba(22, 28, 40, .64) 72px, rgba(22, 28, 40, .22) 150px, rgba(22, 28, 40, 0) 280px),
    linear-gradient(100deg, rgba(22, 28, 40, .78) 0%, rgba(22, 28, 40, .48) 30%, rgba(22, 28, 40, .12) 52%, rgba(22, 28, 40, 0) 68%),
    linear-gradient(180deg, rgba(22, 28, 40, 0) 55%, rgba(22, 28, 40, .35) 100%);
}
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* Motiv: Datenlinien, die sich zu einem Knoten bündeln (assets/img/motive/buendel.*), als Lichtzeichnung über dem Stimmungsbild */
.hero-motif {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  right: -3%; top: 0; height: 100%; width: 68%; object-fit: cover; object-position: 66% 50%;
  mix-blend-mode: screen; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 34%, #000 100%);
}
/* Staubfeld: langsam treibende Lichtpunkte über dem Stimmungsbild, gezeichnet in site.js.
   Nur wenn Bewegung erlaubt ist; ruht, sobald der Hero aus dem Bild ist. */
.hero-dust {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen;
  opacity: 0; transition: opacity 1200ms var(--ease);
}
.hero-dust.is-on { opacity: 1; }
.hero-video {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; display: none; transition: opacity 350ms var(--ease);
}
.hero-video.is-on { opacity: 1; transition-duration: 450ms; }
.hero-content { position: relative; z-index: 2; row-gap: 0; }
.hero-title { grid-column: 1 / 11; }
/* Der Lead ist ein einzelner Satz (23.09.): Stufe H3 statt Lead, in zwei ausgeglichenen Zeilen,
   darüber eine Haarlinie in Hafer im Maß der Kapitelzeile (96 px). Die Linie steht näher am Satz
   als an der H1. Siehe UMSETZUNG.md, „Hero-Lead“. */
.hero-lead {
  grid-column: 1 / 8; margin-top: var(--s4); opacity: .92; max-width: 34ch;
  font-size: var(--fs-h3); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance;
}
.hero-lead::before {
  content: ""; display: block; width: 96px; height: 1px; margin: var(--s1) 0 var(--s3);
  background: rgba(204, 190, 138, .75);
}
.hero-actions { grid-column: 1 / 9; margin-top: var(--s6); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.hero-thread { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 1; pointer-events: none; }
.hero-thread svg { width: 100%; height: 100%; overflow: visible; }
.hero-thread path { fill: none; stroke: var(--oat); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero-thread-dot {
  position: absolute; left: 52%; top: 60%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--oat); box-shadow: 0 0 0 6px rgba(204, 190, 138, .14), 0 0 24px rgba(204, 190, 138, .35);
}
.hero-skip {
  position: absolute; right: var(--margin); bottom: 40px; z-index: 3; display: none;
  padding-bottom: 6px; border-bottom: 1px solid var(--hair-dark); color: var(--paper);
  transition: opacity var(--t) var(--ease);
}
.hero-skip:hover { border-bottom-color: var(--paper); }

/* Sequenz-Zustände (nur wenn html.seq gesetzt ist, siehe Inline-Skript im Kopf) */
html.seq .hero-video { display: block; }
html.seq .hero-skip { display: block; }
html.seq .hero-reveal { opacity: 0; transform: translateY(14px); }
html.seq .hero-motif, html.seq .hero-thread, html.seq .hero-glow, html.seq .hero-atmo { opacity: 0; }
html.seq .hero-dust { opacity: 0 !important; }
html.seq .brand-mark, html.seq .brand-word { opacity: 0; }
html.seq.seq-text .hero-reveal {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html.seq.seq-text .hero-thread { opacity: 1; transition: opacity 520ms var(--ease) 200ms; }
/* Das Licht breitet sich aus, sobald die Bildmarke steht: Stimmungsbild, Verlauf und Motiv kommen
   gemeinsam als ein Hintergrund vor dem Text (Rückmeldung 18.09.: das Motiv gehört zum Hintergrund) */
html.seq.seq-light .hero-glow { opacity: 1; transition: opacity 1000ms var(--ease); }
html.seq.seq-light .hero-atmo { opacity: 1; transition: opacity 1200ms var(--ease); }
html.seq.seq-light .hero-motif { opacity: .62; transition: opacity 1200ms var(--ease) 120ms; }
html.seq.seq-landed .brand-mark { opacity: 1; transition: none; }
html.seq.seq-landed .brand-word { opacity: 1; transition: opacity 260ms var(--ease) 60ms; }
html.seq.seq-skip .hero-reveal, html.seq.seq-skip .brand-mark, html.seq.seq-skip .brand-word, html.seq.seq-skip .hero-glow, html.seq.seq-skip .hero-thread {
  opacity: 1; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); transition-delay: 0ms;
}
html.seq.seq-skip .hero-motif { opacity: .62; transition: opacity var(--t) var(--ease); }
html.seq.seq-skip .hero-atmo { opacity: 1; transition: opacity 200ms var(--ease); }
html.seq.seq-skip .hero-video, html.seq.seq-skip .hero-skip { opacity: 0; pointer-events: none; }

/* Bildmarke: bleibt am Aufblühpunkt als Nachbild stehen, während das Weiß des Flashs abklingt,
   und fliegt danach in die Navigation.
   Zustände: is-born (steht scharf, leichter Schein), is-set (Schein weg), is-flying (Flug),
   is-landed (im selben Bild versteckt, in dem die Navigationsmarke erscheint).
   Die Filterliste hat überall dieselbe Form (blur, zwei Schatten), damit die Übergänge weich laufen. */
.fly-mark {
  position: fixed; z-index: 60; left: 0; top: 0; width: 100px; height: 123px; color: var(--paper);
  opacity: 0; pointer-events: none; will-change: transform, opacity, filter;
  transform: translate(-50%, -50%) scale(.78);
  filter: blur(8px) drop-shadow(0 0 16px rgba(255, 246, 222, .9)) drop-shadow(0 0 48px rgba(236, 222, 188, .6));
}
.fly-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fly-mark.is-born {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  filter: blur(0) drop-shadow(0 0 8px rgba(255, 246, 222, .5)) drop-shadow(0 0 24px rgba(236, 222, 188, .3));
  transition: opacity 240ms var(--ease), transform 380ms var(--ease), filter 380ms var(--ease);
}
.fly-mark.is-set {
  filter: blur(0) drop-shadow(0 0 0 rgba(255, 246, 222, 0)) drop-shadow(0 0 0 rgba(236, 222, 188, 0));
  transition: filter 480ms var(--ease);
}
.fly-mark.is-flying { transition: transform 600ms cubic-bezier(.4, 0, .2, 1); }
.fly-mark.is-landed { opacity: 0; transition: none; }
html.seq.seq-skip .fly-mark { opacity: 0 !important; transition: opacity 120ms linear; }
/* Das Weiß des Flashs klingt ab wie nach einem Blitz (erst zügig, dann langsam) */
.hero-video.is-fading { opacity: 0; transition: opacity 640ms cubic-bezier(.5, 0, .3, 1); }

/* ---------- Blöcke ---------- */
.block { padding: var(--s14) 0 var(--s16); }
.block--paper { background: var(--paper); color: var(--navy); --hair: var(--hair-paper); }
.block--sage { background: var(--sage); color: var(--navy); --hair: var(--hair-sage); padding-bottom: var(--s14); }
.block--dark { color: var(--paper); --hair: var(--hair-dark); padding-bottom: var(--s6); background: var(--navy-900); }

/* Stimmungsbilder (assets/img/stimmung/): weiches Licht als Untergrund, Inhalt darüber */
.block--atmo { position: relative; isolation: isolate; overflow: hidden; }
.block--atmo > .container { position: relative; z-index: 2; }
.block-atmo {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; pointer-events: none; user-select: none;
}
/* Block 01 ist mit der Erzählstrecke rund achtmal so hoch wie das Fenster. Mit `cover` über die
   ganze Höhe wurde das Papierbild 6,7-fach gestreckt (sichtbar blieben 13 % der Bildbreite) und
   wirkte hochskaliert. Deshalb steht es fensterhoch und klebt im Block: gezeigt wird die ganze
   Komposition in etwa natürlicher Größe, das Licht bleibt hinter der stehenden Diagrammbühne
   ruhig. `clip` statt `hidden`, sonst wäre der Block ein Scrollport und `sticky` wirkungslos
   (siehe „Zwei Stolpersteine“ bei der Erzählung). Ohne `clip` (Safari vor 16) bliebe nach einer
   Fensterhöhe eine Kante zur Grundfläche; dort gilt weiter das Bild über die ganze Blockhöhe. */
.block--paper.block--atmo { overflow: clip; }
.block--paper > picture { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.block--paper .block-atmo { position: sticky; inset: auto; top: 0; display: block; height: 100vh; }
@supports not (overflow: clip) {
  .block--paper .block-atmo { position: absolute; inset: 0; height: 100%; }
}
.block--sage .block-atmo { opacity: 1; }
.block--dark .block-atmo { object-position: right top; }
.block--dark::after {
  /* Dunkelverlauf hinter der linken Textspalte (Kontrast), das Licht bleibt rechts */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 28, 40, .94) 0, rgba(22, 28, 40, .9) 100px, rgba(22, 28, 40, .35) 210px, rgba(22, 28, 40, 0) 320px),
    linear-gradient(100deg, rgba(22, 28, 40, .72) 0%, rgba(22, 28, 40, .42) 38%, rgba(22, 28, 40, .08) 62%, rgba(22, 28, 40, 0) 78%),
    linear-gradient(180deg, rgba(22, 28, 40, 0) 60%, rgba(22, 28, 40, .55) 100%);
}

/* Motive (assets/img/motive/): abstrakte IT-Motive als leise Flächen */
.block-motif { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.block-motif--sage {
  /* Gestaffelte Ebenen, auf Salbei umgerechnet, rechts, weich einlaufend */
  right: 0; top: 0; height: 100%; width: 64%; object-fit: cover; object-position: 78% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .9) 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .9) 40%, #000 100%);
}
.block-motif--contact {
  /* Netz mit wenigen Lichtpunkten, hinter dem Pfeilkreis, nur als Lichtzeichnung (screen) */
  right: -4%; top: -2%; width: 56%; height: 62%; object-fit: cover; object-position: 78% 45%;
  mix-blend-mode: screen; opacity: .42;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 72% 42%, #000 20%, transparent 74%);
  mask-image: radial-gradient(ellipse 62% 64% at 72% 42%, #000 20%, transparent 74%);
}

/* Kapitelzeile: Kicker links, Blockmarke „01 — 03“ rechts */
.chapter { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 20px; }
.chapter-kicker { color: var(--oat-dark); }
.chapter-mark { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; line-height: 1; letter-spacing: .06em; color: var(--muted); }
.chapter-line { display: block; width: 96px; height: 1px; background: currentColor; opacity: .45; }
.block--dark .chapter-kicker { color: var(--oat); }
.block--dark .chapter-mark { color: rgba(250, 250, 248, .72); }

/* ---------- Glasfläche (Box über der Box) ----------
   Die Oberfläche liegt auf einer eigenen Ebene (::before), damit sie sich beim Eintritt
   nach außen öffnen kann, ohne den Satz darin zu verziehen: scaleX auf einer leeren
   Fläche verändert nur Rand und Radius, nicht die Zeilen. */
.glass {
  position: relative;
  padding: var(--s8) var(--s8) var(--s10);
  overflow: visible;
}
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid var(--glass-line); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), var(--glass-shadow);
  transform-origin: center;
}
.glass--paper { --glass-bg: rgba(250, 250, 248, .68); } /* etwas durchlässiger als die Fläche in 02 */
.glass--sage { --glass-bg: rgba(250, 250, 248, .72); margin-right: 12%; }

/* Öffnen am Scroll: 6 % schmaler, dann auf volle Breite. Nur die Breite — skaliert wird die
   leere Ebene, der Satz darin verzieht sich nicht. Kein Übergang: die Breite hängt
   unmittelbar an `--p` und damit an der Scrollposition (siehe „Eintritt am Scroll“). */
html.motion .glass.reveal::before { transform: scaleX(calc(.94 + .06 * var(--p, 1))); }

.intro { margin-top: var(--s5); align-items: start; }
.intro-title { grid-column: 1 / 8; }
.intro-text { grid-column: 1 / 7; margin-top: var(--s3); max-width: 40ch; color: rgba(32, 39, 54, .76); }
#arbeitsweise .intro-title { grid-column: 1 / 10; }

/* ---------- 01 · Diagramm ---------- */
.diagram-area { position: relative; margin-top: var(--s12); }
.diagram-wrap { position: relative; }
.diagram { width: 100%; height: auto; overflow: visible; }
.diagram .ln {
  fill: none; stroke: var(--navy); stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke;
  /* pathLength="1" im Markup: Strich und Lücke sind damit je eine volle Pfadlänge.
     Grundzustand (ohne Skript, bei reduzierter Bewegung): Linie vollständig sichtbar. */
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-opacity var(--t-fast) var(--ease), stroke-width var(--t-fast) var(--ease);
}
/* Zweite Lage in Navy über den Grundlinien. Zeigen, Fokus oder ein offenes Panel legen sie
   von links nach rechts frei — und zwar die ganze Kette vom Anfang bis zum gezeigten Punkt,
   Abschnitt für Abschnitt (Versatz `--at2` aus site.js). Zurück läuft sie ohne Versatz und
   schneller: der Blick ist dann schon woanders. */
.diagram .lnh {
  fill: none; stroke: var(--navy); stroke-opacity: 1; stroke-width: 1.5;
  vector-effect: non-scaling-stroke; pointer-events: none;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 180ms var(--ease);
}
.diagram .lnh.is-on {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 260ms var(--ease-pop) var(--at2, 0ms);
}
.diagram-list { display: none; }

.node {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--navy); background: var(--paper); color: var(--navy);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.node::after { content: ""; position: absolute; inset: -11px; border-radius: inherit; }
.node .plus { display: block; width: 11px; height: 11px; position: relative; transition: transform var(--t) var(--ease); }
.node .plus::before, .node .plus::after { content: ""; position: absolute; background: currentColor; }
.node .plus::before { left: 0; right: 0; top: 5px; height: 1px; }
.node .plus::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.node:hover, .node.is-hot { background: var(--navy); color: var(--paper); scale: 1.08; box-shadow: 0 6px 14px -6px rgba(22, 28, 40, .5); }
.node[aria-expanded="true"] { background: var(--navy); color: var(--paper); scale: 1; box-shadow: 0 0 0 5px rgba(32, 39, 54, .1); }
.node[aria-expanded="true"] .plus { transform: rotate(45deg); }
.node-label {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 12px;
  white-space: nowrap; font-size: var(--fs-small); line-height: 1.3; color: var(--muted); pointer-events: none;
  transition: color var(--t-fast) var(--ease);
}
.node:hover .node-label, .node.is-hot .node-label, .node[aria-expanded="true"] .node-label { color: var(--navy); }
.node--group {
  width: 26px; border: 0; background: none; border-radius: 13px; flex-direction: column; justify-content: space-between;
  transform: translateX(-50%); box-shadow: none;
}
.node--group:hover, .node--group.is-hot, .node--group[aria-expanded="true"] { background: none; scale: 1; box-shadow: none; }
.node--group .dot {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--navy); background: var(--paper); color: var(--navy);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.node--group:hover .dot, .node--group.is-hot .dot { background: var(--navy); color: var(--paper); scale: 1.08; box-shadow: 0 6px 14px -6px rgba(22, 28, 40, .5); }
.node--group[aria-expanded="true"] .dot { background: var(--navy); color: var(--paper); scale: 1; box-shadow: 0 0 0 5px rgba(32, 39, 54, .1); }
.node--group:hover .dot:nth-child(2), .node--group.is-hot .dot:nth-child(2) { transition-delay: 30ms; }
.node--group:hover .dot:nth-child(3), .node--group.is-hot .dot:nth-child(3) { transition-delay: 60ms; }
.node--group[aria-expanded="true"] .plus { transform: rotate(45deg); }
.node--group .node-label { margin-top: 12px; }
.node--box { width: 48px; height: 48px; border-radius: 3px; background: var(--paper); }
.node--box::after { inset: -6px; }
.node--box .core { width: 14px; height: 14px; border-radius: 50%; background: var(--oat); box-shadow: 0 0 0 0 rgba(204, 190, 138, 0); transition: box-shadow var(--t-fast) var(--ease); }
.node--box:hover, .node--box.is-hot, .node--box[aria-expanded="true"] { background: var(--navy); }
.node--box:hover .core, .node--box.is-hot .core { box-shadow: 0 0 0 4px rgba(204, 190, 138, .22); }
.node--box .node-label { color: var(--oat-dark); margin-top: 10px; }
.node--box:hover .node-label, .node--box.is-hot .node-label, .node--box[aria-expanded="true"] .node-label { color: var(--navy); }

/* ---------- 01 · Diagramm zeichnet sich ----------
   Einmalig beim ersten Sichtbarwerden (IntersectionObserver setzt `.is-drawn`, site.js).
   Die drei Kreise setzen sich, dann laufen die drei Zuflüsse gleichzeitig los und kommen
   gemeinsam am Ansatzpunkt an; jede Ankunft löst genau einen Druckimpuls am Punkt aus,
   die weiterführende Linie startet mit dem Impuls. Gesamt 1,76 s.
   Ohne Skript und bei reduzierter Bewegung steht das Diagramm sofort vollständig da. */
.diagram .ln[data-to="ansatzpunkt"] { --at: 220ms; --draw: 540ms; } /* Ankunft 760 ms */
.diagram .ln[data-to="schritt"]     { --at: 780ms; --draw: 300ms; } /* Ankunft 1080 ms */
.diagram .ln[data-to="ergebnis"]    { --at: 1100ms; --draw: 300ms; } /* Ankunft 1400 ms */
.diagram-area .node--group { --at: 110ms; }
.diagram-area .node--group .dot:nth-child(1) { --at: 0ms; }
.diagram-area .node--group .dot:nth-child(2) { --at: 55ms; }
.diagram-area .node--group .dot:nth-child(3) { --at: 110ms; }
.diagram-area .node[data-panel="ansatzpunkt"] { --at: 740ms; }
.diagram-area .node[data-panel="schritt"]     { --at: 1060ms; }
.diagram-area .node[data-panel="ergebnis"]    { --at: 1380ms; }

/* Ausgangszustand der einmaligen Zeichnung. Im Erzähl-Modus (`.is-seq`) gilt er nicht:
   dort steht der Stand in `--q`, und die drei Abläufe sind von Beginn an da. */
html.motion .diagram-area:not(.is-drawn):not(.is-seq) .ln { stroke-dashoffset: 1; }
html.motion .diagram-area:not(.is-drawn):not(.is-seq) .node:not(.node--group),
html.motion .diagram-area:not(.is-drawn):not(.is-seq) .node--group .dot,
html.motion .diagram-area:not(.is-drawn):not(.is-seq) .node-label { opacity: 0; }

html.motion .diagram-area.is-drawn .ln {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--draw, 540ms) linear var(--at, 0ms),
              stroke-opacity var(--t-fast) var(--ease), stroke-width var(--t-fast) var(--ease);
}
html.motion .diagram-area.is-drawn .node:not(.node--group),
html.motion .diagram-area.is-drawn .node--group .dot {
  animation: node-pop 380ms var(--ease-pop) var(--at, 0ms) backwards;
}
html.motion .diagram-area.is-drawn .node-label {
  animation: node-label-in 320ms var(--ease) calc(var(--at, 0ms) + 240ms) backwards;
}
/* Ein einzelner, vergehender Ring als Aufschlag. Läuft genau einmal, bleibt nicht stehen. */
html.motion .diagram-area.is-drawn .node:not(.node--group)::before,
html.motion .diagram-area.is-drawn .node--group .dot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--navy); opacity: 0; pointer-events: none;
  animation: node-ring 620ms var(--ease) calc(var(--at, 0ms) + 60ms);
}
/* Nach dem Durchlauf wird die Choreografie abgeräumt (site.js setzt `.is-set`): der Endzustand
   ist dann rein statisch und kann durch keine Neuberechnung des Stils erneut anlaufen. */
html.motion .diagram-area.is-set .ln {
  transition: stroke-opacity var(--t-fast) var(--ease), stroke-width var(--t-fast) var(--ease);
}
html.motion .diagram-area.is-set .node:not(.node--group),
html.motion .diagram-area.is-set .node--group .dot,
html.motion .diagram-area.is-set .node-label { animation: none; }
html.motion .diagram-area.is-set .node:not(.node--group)::before,
html.motion .diagram-area.is-set .node--group .dot::before { content: none; }

@keyframes node-pop {
  0% { opacity: 0; scale: .78; }
  58% { opacity: 1; scale: 1.055; }
  100% { opacity: 1; scale: 1; }
}
@keyframes node-label-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes node-ring { from { opacity: .3; scale: .68; } to { opacity: 0; scale: 2.05; } }

/* ---------- 01 · Die Erzählung an der Scrollposition ----------
   Ersetzt auf dem Desktop die einmalige, zeitbasierte Choreografie oben: statt `.is-drawn`
   setzt site.js `.is-seq` und lässt `--q` von 0 auf 1 laufen, während das Diagramm im Bild
   steht. Jede Linie, jeder Punkt und jedes Etikett hat darin ein eigenes Fenster [a, b] und
   leitet seinen Stand daraus ab — kein Schwellwert, kein Abspielen: hält man an, hält die
   Zeichnung an; scrollt man zurück, läuft sie denselben Weg zurück.
   Der Fortschritt ist gedämpft (site.js), damit die Linien dem Rad nicht hart folgen.
   Gerechnet wird nur mit `clamp(0, …, 1)` auf einer einheitenlosen Zahl; pro Bild ändern sich
   ausschließlich `stroke-dashoffset` und `opacity`, also nichts, was Layout auslöst. */
html.motion .diagram-area.is-seq { --q: 0; }

/* Das Diagramm bleibt stehen, während die Erzählung läuft. Gepinnt wird nur die Hülle im
   Glas, nicht der Block: der Rahmen bleibt durchgehend sichtbar. Die Strecke steht als
   Innenabstand unter der Hülle — sie trägt keinen Inhalt, sie ist der Weg. */
html.motion .diagram-area.is-seq .diagram-pin { position: sticky; top: var(--seq-top, 120px); }
/* Zwei Stolpersteine, beide gemessen, beide notwendig:
   1. Der umgebende Block klemmt sein Stimmungsbild mit `overflow: hidden` ab. Das macht ihn
      zum Scrollport und setzt jedes `position: sticky` darin außer Kraft. `clip` schneidet
      genauso ab, ohne Scrollport — site.js setzt die Klasse nur, wenn der Browser `clip`
      kennt, sonst bleibt es bei der einmaligen Zeichnung.
   2. Die Strecke steht als leeres Nachher-Element hinter der Hülle, nicht als Innenabstand:
      Chrome rechnet `padding` nicht zum Spielraum, den ein klebendes Element im Container
      hat — mit `padding-bottom` bliebe die Hülle stehen. Ein Block im Fluss zählt.
   Länge seit 02.10. 456vh (24.09.: 655vh, davor 140vh): bei 140vh lagen zwischen zwei
   Stationen rund 300 px, zwei, drei Radrasten — wer zügig scrollte, stand schon an der
   nächsten, bevor der Text gelesen war. 655vh war im Gebrauch dann zu zäh; jetzt
   rund 44 % schneller, etwa eine Fensterhöhe je Station. */
.block.is-seq-host { overflow: clip; }
html.motion .diagram-area.is-seq::after {
  content: ""; display: block; height: var(--seq-run, 456vh);
}

/* Das Diagramm steht vollständig, sobald der Block eingetreten ist — der Abschnitt heißt
   „Das Ganze sehen“, also ist das Ganze von Anfang an da. Die Erzählung baut nichts auf,
   sie geht durch: die kräftige zweite Lage (`.lnh`) läuft mit dem Scroll durch die Kette
   und lässt hinter sich die Punkte gesetzt zurück. Ruhiger als ein Aufbau aus dem Nichts —
   und es gibt keinen Stand, an dem die Fläche leer wirkt. */
html.motion .diagram-area.is-seq .ln { stroke-dashoffset: 0; }
html.motion .diagram-area.is-seq .lnh {
  stroke-dashoffset: calc(1 - var(--l, 0));
  transition: none;
}
html.motion .diagram-area.is-seq .lnh[data-stufe="0"] { --l: clamp(0, calc((var(--q) - .03) / .26), 1); }
html.motion .diagram-area.is-seq .lnh[data-stufe="1"] { --l: clamp(0, calc((var(--q) - .34) / .20), 1); }
html.motion .diagram-area.is-seq .lnh[data-stufe="2"] { --l: clamp(0, calc((var(--q) - .60) / .20), 1); }

/* Die Punkte stehen mit. Erreicht die Linie einen, wird er gesetzt: ein ruhiger Ring und
   das Etikett in Navy — der Zustand „hier stehen wir“, leiser als das Zeigen mit der Maus.
   Kein `scale` und keine Deckkraft aus `--q`: beides bliebe dem Zeigen im Weg. */
html.motion .diagram-area.is-seq .node .node-label { transition: color var(--t-fast) var(--ease); }

/* Der Aufschlag beim Erreichen einer Station: einmalig, nicht am Scroll. site.js setzt
   `.is-hit` genau beim Wechsel und nimmt es nach dem Durchlauf wieder ab. */
html.motion .diagram-area.is-seq .node.is-hit::before,
html.motion .diagram-area.is-seq .node--group.is-hit .dot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid var(--navy); opacity: 0; pointer-events: none;
  animation: node-ring 620ms var(--ease);
}
html.motion .diagram-area.is-seq .node--group.is-hit .dot:nth-child(2)::before { animation-delay: 55ms; }
html.motion .diagram-area.is-seq .node--group.is-hit .dot:nth-child(3)::before { animation-delay: 110ms; }

/* Der erreichte Punkt bleibt gesetzt, solange seine Station läuft — ein ruhiger Ring, kein
   Vollton: der Zustand „hier stehen wir“ darf nicht so laut sein wie das Zeigen mit der Maus. */
html.motion .diagram-area.is-seq .node.is-at { box-shadow: 0 0 0 5px rgba(32, 39, 54, .09); }
html.motion .diagram-area.is-seq .node--group.is-at { box-shadow: none; }
html.motion .diagram-area.is-seq .node--group.is-at .dot { box-shadow: 0 0 0 5px rgba(32, 39, 54, .09); }
html.motion .diagram-area.is-seq .node.is-at .node-label { color: var(--navy); }

/* ---------- 01 · Der Erzähltext ----------
   Die vier Abschnitte stehen im Markup unter dem Diagramm. Ohne Skript sind sie schlicht
   untereinander lesbar — die Seite trägt ihren Inhalt dann vollständig ohne Zutun.
   Mit Skript legt `html.js` sie in ein gemeinsames Rasterfeld; sichtbar ist der Abschnitt
   der laufenden Station. Die Höhe richtet sich nach dem längsten, damit beim Wechsel nichts
   springt. Das Popover-Gewand (Rahmen, Schatten, Milchglas, Zeiger, Schließen) fällt weg:
   hier schwebt nichts, hier steht Text. */
.diagram-story { margin-top: var(--s6); }
.diagram-story .pop {
  position: static; width: auto; max-width: none;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; border-radius: 0; box-shadow: none; padding: 0;
  opacity: 1; transform: none; will-change: auto;
}
.diagram-story .pop + .pop { margin-top: var(--s6); }
.diagram-story .pop-arrow, .diagram-story .pop-close { display: none; }

/* Gestapelt wird nur in der Erzählung. Ohne sie — bei reduzierter Bewegung und ohne
   Skript — stehen die vier Abschnitte schlicht untereinander und sind vollständig da.
   Hinge der Stapel an `html.js`, wären sie ohne `.is-live` allesamt unsichtbar. */
html.motion .diagram-area.is-seq .diagram-story { display: grid; }
html.motion .diagram-area.is-seq .diagram-story .pop {
  grid-area: 1 / 1; margin-top: 0;
  opacity: 0; transform: translateY(7px); pointer-events: none;
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
/* Satz links, Zeichnung rechts: das Diagramm darüber nimmt die volle Breite, ein einspaltiger
   Abschnitt darunter ließe die rechte Hälfte leer. Nebeneinander steht die Zeichnung ungefähr
   dort, wo die Kette endet — und die Hülle bleibt flach genug, um ganz ins Fenster zu passen. */
@media (min-width: 1000px) {
  .diagram-story .pop {
    display: grid; align-content: start; justify-content: space-between;
    grid-template-columns: minmax(0, 46ch) minmax(0, 30rem); column-gap: var(--s10);
  }
  .diagram-story .pop-head,
  .diagram-story .pop-title,
  .diagram-story .pop-text { grid-column: 1; }
  .diagram-story .pop-figure,
  .diagram-story .pop-lines {
    grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0;
  }
}
/* Der abgehende Abschnitt geht zuerst, der ankommende setzt kurz danach ein: zwei Texte
   gleichzeitig halb sichtbar wären unruhig zu lesen. */
html.motion .diagram-area.is-seq .diagram-story .pop.is-live {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 200ms var(--ease-pop) 70ms, transform 240ms var(--ease-pop) 70ms;
}

/* Popover: öffnet aus dem Punkt heraus, liegt über dem Diagramm, bleibt im Glasrahmen */
.pop-host { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pop {
  position: absolute; width: 440px; max-width: 100%; pointer-events: auto;
  background: rgba(250, 250, 248, .96);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--glass-line); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 30px 70px -28px rgba(22, 28, 40, .38), 0 2px 8px rgba(22, 28, 40, .06);
  padding: 20px 24px 22px;
  opacity: 0; transform: scale(.96) translate(var(--pop-dx, 0), var(--pop-dy, 8px));
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
  will-change: transform, opacity;
}
.pop[data-place="above"] { --pop-dx: 0; --pop-dy: 8px; }
.pop[data-place="below"] { --pop-dx: 0; --pop-dy: -8px; }
.pop[data-place="right"] { --pop-dx: -8px; --pop-dy: 0; }
.pop[data-place="left"] { --pop-dx: 8px; --pop-dy: 0; }
.pop.is-open { opacity: 1; transform: none; transition: opacity 220ms var(--ease-pop), transform 220ms var(--ease-pop); }
.pop.is-closing { opacity: 0; transform: scale(.985) translate(calc(var(--pop-dx, 0) / 2), calc(var(--pop-dy, 8px) / 2)); }
.pop-arrow {
  position: absolute; width: 12px; height: 12px; background: rgba(250, 250, 248, .985);
  border-left: 1px solid var(--glass-line); border-top: 1px solid var(--glass-line);
}
.pop[data-place="above"] .pop-arrow { left: var(--pop-ax, 50%); bottom: -7px; margin-left: -6px; transform: rotate(225deg); }
.pop[data-place="below"] .pop-arrow { left: var(--pop-ax, 50%); top: -7px; margin-left: -6px; transform: rotate(45deg); }
.pop[data-place="right"] .pop-arrow { top: var(--pop-ay, 50%); left: -7px; margin-top: -6px; transform: rotate(-45deg); }
.pop[data-place="left"] .pop-arrow { top: var(--pop-ay, 50%); right: -7px; margin-top: -6px; transform: rotate(135deg); }

.pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.pop-label { color: var(--oat-dark); }
.pop-close {
  flex: none; width: 36px; height: 36px; margin: -6px -8px -6px 0; border-radius: 50%; position: relative; color: var(--muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pop-close::before, .pop-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: currentColor; margin-left: -7px;
}
.pop-close::before { transform: rotate(45deg); }
.pop-close::after { transform: rotate(-45deg); }
.pop-close:hover { background: rgba(32, 39, 54, .06); color: var(--navy); transform: rotate(90deg); }
.pop-title { margin-top: 8px; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.018em; }
.pop-title:focus-visible { outline-offset: 6px; }
.pop-text { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--navy); }
.pop-figure { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-paper); }
.pop-caption { margin-top: 10px; font-size: 12px; line-height: 1.4; color: var(--muted); letter-spacing: .02em; }

/* Kette: ein Ablauf von Anfang bis Ende */
.pop-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 18px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.pop-chain::before { content: ""; position: absolute; top: 4px; left: 4px; right: calc(25% - 4px); height: 1px; background: var(--navy); opacity: .5; }
.pop-chain li { position: relative; }
.pop-chain li::before { content: ""; position: absolute; top: -18px; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--navy); background: var(--paper); }
.pop-chain li:last-child::before { background: var(--oat); border-color: var(--oat); }

/* Nutzen gegen Aufwand */
.pop-chart { width: 100%; height: auto; display: block; }
.pop-chart .ax line, .pop-chart .ax path { fill: none; stroke: var(--navy); stroke-opacity: .4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pop-chart .ax-t { font-size: 11px; fill: var(--muted); letter-spacing: .04em; }
.pop-chart .pt circle { fill: var(--paper); stroke: var(--navy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pop-chart .pt--a circle { fill: var(--oat); stroke: var(--oat); }
.pop-chart .pt--c circle { stroke: var(--muted); stroke-dasharray: 2 2; }
.pop-chart .pt-rank { font-size: 11px; font-weight: 600; fill: var(--navy); }
.pop-chart .pt-n { font-size: 13px; font-weight: 500; fill: var(--navy); }
.pop-chart .pt--c .pt-n { fill: var(--muted); }
.pop-chart .pt-s { font-size: 11px; fill: var(--muted); }

/* Vier Schritte */
.pop-steps { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.pop-steps li { border-top: 1px solid var(--navy); padding-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pop-steps li:first-child { border-top-color: var(--oat); }
.pop-step-nr { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }

/* Drei Zeilen */
.pop-lines { margin-top: 16px; }
.pop-lines li { padding: 11px 0; border-top: 1px solid var(--hair-paper); font-size: 16px; line-height: 1.45; font-weight: 500; display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: baseline; }
.pop-lines li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oat); position: relative; top: -2px; }
.pop-lines li:last-child { border-bottom: 1px solid var(--hair-paper); }

/* ---------- 02 · Pfeiler als Karten ----------
   Vorderseite: ein Foto als Grund, darauf Ziffer und Titel. Rückseite: der Text auf Navy 900.
   Zeigen oder Tastaturfokus dreht die Karte um die senkrechte Achse. Beide Seiten liegen im
   selben Rasterfeld, die Höhe richtet sich also nach der längeren Seite; nichts wird
   abgeschnitten. Ohne Zeigegerät und bei reduzierter Bewegung stehen beide Seiten untereinander.
   Seit 09.10. Fotos statt Zeichen: eine Serie Stillleben (gleicher Tisch, gleiches Licht, die
   Tischkante in allen drei Zuschnitten auf derselben Höhe), siehe assets/img/pfeiler/prompt.md. */
.pillars { margin-top: var(--s10); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pillar { perspective: 1600px; border-radius: 10px; }
.pillar:focus { outline: none; }
.pillar:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.pillar-inner {
  display: grid; position: relative; height: 100%; transform-style: preserve-3d;
  transition: transform 640ms cubic-bezier(.22, .88, .24, 1);
}
.pillar:hover .pillar-inner,
.pillar:focus-visible .pillar-inner { transform: rotateY(180deg); }
.pillar-face {
  position: relative; grid-area: 1 / 1; min-width: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border: 1px solid var(--hair-paper); border-radius: 10px;
  padding: var(--s3) var(--s3) var(--s4);
  display: flex; flex-direction: column;
}
/* Papier als Grund, darüber das Foto mit 88 % Deckkraft, das nach oben ins Papier ausläuft.
   Ziffer und Titel stehen im ruhigen oberen Teil, wo das Foto nur leere Wand zeigt; die
   Gegenstände liegen darunter. Das Seitenverhältnis ist das des Bildzuschnitts (1024 × 1486),
   das Foto wird auf dem Desktop also nicht beschnitten. Die Ebene schneidet das Foto auf
   die Rundung zu (`overflow`), nicht `.pillar-inner` — dort würde es die Drehung abflachen.
   `place-self: stretch` ausdrücklich: Ein Rasterelement mit Seitenverhältnis wird sonst in
   keiner Achse gestreckt. Bei schmalen Karten war die Vorderseite dann kürzer als die
   Rückseite mit Text, und mit nur gestreckter Höhe errechnete sich die Breite aus dem
   Verhältnis und lief über die Spalte hinaus.
   Das Foto steht immer in voller Kartenbreite am unteren Rand (kein `cover`): Wird die Karte
   höher als das Bild — bei schmalen Karten gibt der Rückseitentext die Höhe vor —, wächst oben
   Papierfläche hinzu, statt die äußeren Glasquader seitlich abzuschneiden. Ist sie niedriger
   (mobil 4 : 5), fällt oben leere Wand weg. */
.pillar-face--front {
  aspect-ratio: 1024 / 1486; place-self: stretch;
  overflow: hidden; isolation: isolate;
  background: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 44px -30px rgba(22, 28, 40, .34);
}
.pillar-bild { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pillar-bild img {
  position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; aspect-ratio: 1024 / 1486;
  opacity: .88;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 30%, #000 54%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 30%, #000 54%);
}
/* Kopfzeile: Ziffer, Haarlinie, Knopf. Dieselbe Kopfzeile steht auf der Rückseite an
   derselben Stelle, die Ziffer bleibt beim Drehen also stehen. */
.pillar-kopf { display: flex; align-items: center; gap: 14px; }
.pillar-nr {
  font-size: clamp(48px, 4.6vw, 72px); line-height: .82; font-weight: 200;
  letter-spacing: -.05em; margin-left: -.04em; color: var(--oat-dark);
}
.pillar-linie { flex: 1; height: 1px; background: currentColor; opacity: .18; }
.pillar-plus {
  position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(32, 39, 54, .2); background: rgba(250, 250, 248, .6);
}
.pillar-plus::before, .pillar-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--navy); transform: translate(-50%, -50%);
}
.pillar-plus::before { width: 11px; height: 1px; }
.pillar-plus::after { width: 1px; height: 11px; }
/* Der Titel folgt der Ziffer, statt am Kartenboden zu kleben (21.09.): so beginnen alle drei
   auf derselben Höhe, unabhängig davon, wie viele Zeilen der einzelne Titel braucht.
   Getrennt wird nur an den gesetzten weichen Trennstellen (Hersteller-/unabhängig,
   Ansprech-/partner); „Umsetzung“ bleibt ganz. */
.pillar .h3 {
  margin-top: var(--s3); font-size: clamp(20px, calc(1.25vw + 8px), 24px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
  hyphens: manual; overflow-wrap: break-word;
}
/* „Ansprechpartner“ rückt als Ganzes in die zweite Zeile, statt hinter „Fester“ getrennt zu
   werden; nur wenn es auch allein nicht in die Zeile passt, greift die Trennstelle darin. */
.pillar .wort { display: inline-block; }
/* Rückseite: Ziffer und Titel stehen an derselben Stelle wie vorn (der Titel hier für
   Vorleseprogramme verborgen, er steht schon auf der Vorderseite), statt des Fotos folgt
   der Text. */
.pillar-face--back {
  transform: rotateY(180deg);
  background: var(--navy-900); border-color: transparent; color: var(--paper);
  box-shadow: 0 22px 44px -30px rgba(22, 28, 40, .5);
}
.pillar-face--back .pillar-nr { color: var(--oat); }
.pillar-face--back .pillar-linie { opacity: .22; }
.pillar-face--back p:not(.h3) { margin-top: var(--s2); line-height: 1.55; color: rgba(250, 250, 248, .82); }

/* Ohne Zeigegerät und bei reduzierter Bewegung wird aus der Karte eine offene Karte:
   oben das Foto mit Ziffer und Titel, darunter der Text. Nichts ist verdeckt. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .pillar { perspective: none; }
  .pillar-inner { display: block; transform: none !important; }
  .pillar-face {
    grid-area: auto; -webkit-backface-visibility: visible; backface-visibility: visible;
    transform: none; box-shadow: none; color: inherit;
  }
  .pillar-face--front { border-bottom: 0; border-radius: 10px 10px 0 0; }
  .pillar-face--back {
    background: var(--paper); border: 1px solid var(--hair-paper); border-top: 0;
    border-radius: 0 0 10px 10px; padding-top: var(--s3);
  }
  .pillar-face--back .pillar-kopf, .pillar-face--back .h3, .pillar-plus { display: none; }
  .pillar-face--back p:not(.h3) { margin-top: 0; color: var(--navy); opacity: .82; }
}

/* ---------- 03 · Kontakt ---------- */
.contact-head { margin-top: var(--s5); align-items: center; }
.contact-title { grid-column: 1 / 10; }
.arrow-circle {
  grid-column: 10 / 13; justify-self: end;
  width: 140px; height: 140px; border-radius: 50%; border: 1px solid var(--oat); color: var(--oat);
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 28, 40, .36); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); /* Scheibe vor dem Lichtbild */
  transition: background 240ms var(--ease-pop), color 240ms var(--ease-pop), border-color 240ms var(--ease-pop), box-shadow 240ms var(--ease-pop);
}
.arrow-circle svg { width: 48px; height: 48px; transition: transform 320ms var(--ease-pop); }
.arrow-circle svg path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.arrow-circle:hover, .arrow-circle:focus-visible { background: var(--oat); color: var(--navy); box-shadow: 0 24px 50px -24px rgba(204, 190, 138, .55); }
.arrow-circle:hover svg, .arrow-circle:focus-visible svg { transform: rotate(45deg); }
.arrow-circle:active svg { transform: rotate(45deg) scale(.96); }

.contact-grid { margin-top: var(--s10); align-items: start; }
.contact-left { grid-column: 1 / 6; }
.contact-form { grid-column: 7 / 13; }
.contact-sub { color: rgba(250, 250, 248, .72); }

.steps { border-top: 1px solid var(--hair-dark); margin-top: 12px; }
.steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: var(--s2); padding: 18px 0; border-bottom: 1px solid var(--hair-dark); }
.steps .num { font-size: var(--fs-small); color: rgba(250, 250, 248, .72); padding-top: 4px; }
.steps b { display: block; font-weight: 500; }
.steps p { font-size: var(--fs-small); color: rgba(250, 250, 248, .78); margin-top: 4px; max-width: 62ch; }

/* Personenblock (Portrait und Name) ist am 21.09. aus der Startseite genommen; an seiner
   Stelle steht `.contact-note`. Die Regeln bleiben stehen, damit er ohne Neubau zurückkann. */
.contact-note { font-size: var(--fs-small); color: rgba(250, 250, 248, .78); margin-top: var(--s4); max-width: 52ch; }
.person { display: flex; align-items: center; gap: 20px; margin-top: var(--s4); }
/* Hochformat statt Kreis (18.09.): Der Ausschnitt reicht jetzt bis in die verschränkten Arme,
   und die liegen in der Vorlage am unteren Bildrand — also genau in den Ecken, die eine runde
   Maske wegschneidet. Das Rechteck mit 9 px Radius passt ohnehin besser zur Formensprache
   der Seite als der Kreis; der einzige Kreis bleibt der Pfeilkreis darüber. */
.portrait { width: 72px; height: 90px; border-radius: 9px; background: var(--sage); flex: none; overflow: hidden; }
.portrait picture { display: block; width: 100%; height: 100%; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.person b { display: block; font-weight: 500; }
.person p { font-size: var(--fs-small); color: rgba(250, 250, 248, .78); margin-top: 2px; }
.contact-lines { margin-top: var(--s3); font-size: var(--fs-small); color: rgba(250, 250, 248, .78); }
.contact-lines a { text-decoration: none; color: var(--paper); }
.contact-lines li { padding: 3px 0; }

.form {
  /* Dunkle Glasbox vor dem unscharfen Licht: Navy mit Unschärfe dahinter, Haarlinie hebt sie ab */
  background: rgba(32, 39, 54, .66); border-radius: 8px; padding: 40px 40px 40px;
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 248, .12), inset 0 1px 0 rgba(250, 250, 248, .1), 0 40px 90px -40px rgba(0, 0, 0, .7);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field + .field { margin-top: 24px; }
.field label { font-size: var(--fs-small); font-weight: 500; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 17px; line-height: 1.4; color: var(--paper);
  background: rgba(250, 250, 248, .04); border: 1px solid rgba(250, 250, 248, .28); border-radius: 4px;
  padding: 13px 16px; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(250, 250, 248, .5); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--paper); box-shadow: 0 0 0 3px rgba(250, 250, 248, .18); background: rgba(250, 250, 248, .06); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.field-error { font-size: var(--fs-small); color: var(--paper); line-height: 1.4; }
.field-error:empty { display: none; }
.field-error:not(:empty) { animation: err-in var(--t-fast) var(--ease) both; }
@keyframes err-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
.consent { margin-top: 24px; display: grid; grid-template-columns: 20px 1fr; column-gap: 14px; align-items: start; }
.consent input {
  appearance: none; width: 20px; height: 20px; margin: 3px 0 0; border: 1px solid rgba(250, 250, 248, .5); border-radius: 3px; background: transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.consent input:checked { background: var(--paper); border-color: var(--paper); box-shadow: inset 0 0 0 4px var(--navy-900); }
.consent input:focus-visible { outline: none; border-color: var(--paper); box-shadow: 0 0 0 3px rgba(250, 250, 248, .18); }
.consent input:checked:focus-visible { box-shadow: inset 0 0 0 4px var(--navy-900), 0 0 0 3px rgba(250, 250, 248, .18); }
.consent input[aria-invalid="true"] { border-color: var(--paper); box-shadow: 0 0 0 1px var(--paper); }
.consent label { font-size: var(--fs-small); line-height: 1.5; color: rgba(250, 250, 248, .86); }
.consent label a { color: var(--paper); }
.consent .field-error { grid-column: 2; margin-top: 6px; }
.form .btn { width: 100%; margin-top: 32px; }
.form-status { margin-top: 16px; font-size: var(--fs-small); color: rgba(250, 250, 248, .86); }
.form-status:empty { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-900); color: var(--paper); --focus: var(--paper); padding: 0 0 var(--s6); }
.footer-inner { border-top: 1px solid var(--hair-dark); padding-top: var(--s4); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); }
.footer .brand-mark { height: 37px; }
.footer .brand-word { height: 20px; }
.tagline { margin-top: 12px; color: var(--oat); }
.footer-links { display: flex; gap: var(--s4); }
.footer-links a { font-size: var(--fs-small); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--t) var(--ease); }
.footer-links a:hover { border-bottom-color: currentColor; }

/* ---------- Unterseiten ---------- */
.page { padding: calc(var(--nav-h) + var(--s12)) 0 var(--s16); min-height: 70vh; }
.page .chapter { padding-bottom: 16px; border-bottom: 1px solid var(--hair-paper); font-size: var(--fs-small); color: var(--muted); }
.page-body { margin-top: var(--s6); max-width: 62ch; }
.page-body h2 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 500; margin-top: var(--s6); }
.page-body h3 { font-size: var(--fs-body); font-weight: 500; margin-top: var(--s4); }
.page-body p, .page-body ul { margin-top: 12px; }
.page-body ul { list-style: none; padding-left: 0; }
.page-body li { padding: 6px 0; border-bottom: 1px solid var(--hair-paper); }
.page-body a { text-decoration: none; border-bottom: 1px solid var(--hair-paper); }
.page-body a.text-link { border-bottom: 1px solid currentColor; }
.page-body .note { color: var(--muted); font-size: var(--fs-small); }
.page .display { max-width: 20ch; }

/* ---------- Eintritt am Scroll (einzige scrollabhängige Bewegung) ----------
   `--p` (0…1) kommt aus site.js und folgt unmittelbar der Scrollposition: kein Übergang,
   kein Schwellwert, der etwas auslöst. Jeder Punkt der Bewegung gehört zu genau einer
   Scrollposition; hält man an, hält die Bewegung an, scrollt man zurück, läuft sie denselben
   Weg zurück (Wunsch vom 18.09.). Die Staffelung steckt in `--pi`: jedes Element startet um
   `--i × 7 %` später und ist zusammen mit allen anderen bei `--p: 1` fertig.
   Ohne `motion` (kein Skript, reduzierte Bewegung) greift keine dieser Regeln. */
html.motion .reveal-item {
  --pi: clamp(0, calc((var(--p, 1) - var(--i, 0) * .07) / .79), 1);
  opacity: var(--pi);
  transform: translateY(calc((1 - var(--pi)) * 18px));
  filter: blur(calc((1 - var(--pi)) * 5px));
}
/* Diagramm und Karten ohne Weichzeichner: ein Filter bildet einen Bezugsrahmen und würde
   die Lage der Popover und die räumliche Drehung der Karten stören. Und sobald der Eintritt
   durch ist (`is-full`, aus site.js), fällt der Filter überall weg: `blur(0px)` ist immer
   noch ein Filter und bliebe als Bezugsrahmen stehen. */
html.motion .diagram-area.reveal-item,
html.motion .pillars.reveal-item,
html.motion .reveal.is-full .reveal-item { filter: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .glass { padding: var(--s5) var(--s5) var(--s8); }
  .intro-title { grid-column: 1 / 9; }
  .intro-text { grid-column: 1 / 8; }
  .diagram-area { margin-top: var(--s10); }
  .contact-left { grid-column: 1 / 6; }
  .contact-form { grid-column: 6 / 13; }
  /* Drei Karten nebeneinander werden hier 170 bis 230 px schmal: schmalerer Rand und kleinerer
     Rückseitentext (der Titel schrumpft fließend mit, siehe oben). */
  .pillar-face { padding: 20px 20px var(--s3); }
  .pillar-face--back p:not(.h3) { font-size: 16px; }
}
@media (max-width: 900px) {
  .nav-links, .nav .btn { display: none; }
  .menu-toggle { display: inline-block; }
  .hero { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: 140px; }
  .hero-title, .hero-lead, .hero-actions { grid-column: 1 / 13; }
  .hero-motif { width: 90%; right: -18%; opacity: .5; }
  html.seq.seq-light .hero-motif, html.seq.seq-skip .hero-motif { opacity: .5; }
  .intro-title, .intro-text { grid-column: 1 / 13; }
  #arbeitsweise .intro-title { grid-column: 1 / 13; }
  .pillars { grid-template-columns: 1fr; margin-top: var(--s6); gap: var(--s3); }
  /* Eine Karte je Zeile, höchstens 440 px breit: im Seitenverhältnis 4 : 5 wird sie sonst
     auf Tablets 700 px hoch. */
  .pillars { max-width: 440px; }
  .pillar-face { padding: var(--s3); }
  .pillar-face--front { aspect-ratio: 4 / 5; }
  .pillar-nr { font-size: 56px; }
  .pillar .h3 { font-size: 22px; }
  .pillar-face--back p:not(.h3) { font-size: inherit; }
  .contact-title { grid-column: 1 / 13; }
  .arrow-circle { grid-column: 1 / 13; justify-self: start; margin-top: var(--s4); width: 96px; height: 96px; }
  .arrow-circle svg { width: 36px; height: 36px; }
  .block-motif--contact { width: 80%; height: 46%; right: -20%; top: 0; }
  .contact-left, .contact-form { grid-column: 1 / 13; }
  .contact-form { margin-top: var(--s6); }
  .form { padding: 28px 24px 28px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Schmale Telefone: Karte etwas höher (3 : 4), damit ein zweizeiliger Titel über der
   Tischkante endet (bei 320 px lag er im Format 4 : 5 genau auf der Kante). */
@media (max-width: 480px) {
  .pillar-face--front { aspect-ratio: 3 / 4; }
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  :root { --fs-body: 17px; --fs-lead: 19px; --fs-h3: 22px; --gutter: 16px; --margin: 20px; }
  .block { padding: var(--s8) 0 var(--s8); }
  .block--sage { padding-bottom: var(--s8); }
  .block--dark { padding: var(--s12) 0 var(--s6); }
  .hero { min-height: 0; padding: calc(var(--nav-h) + 48px) 0 120px; }
  .hero-motif { width: 120%; right: -40%; top: -4%; opacity: .34; }
  html.seq.seq-light .hero-motif, html.seq.seq-skip .hero-motif { opacity: .34; }
  /* Mobil steht Text über der ganzen Breite: Bild gedämpft, Licht bleibt als warmer Schein rechts oben. */
  .hero-atmo { object-position: 100% 0; opacity: .7; }
  html.seq.seq-light .hero-atmo, html.seq.seq-skip .hero-atmo { opacity: .7; }
  .hero-glow {
    background:
      linear-gradient(180deg, rgba(22, 28, 40, .74) 0, rgba(22, 28, 40, .66) 140px, rgba(22, 28, 40, .55) 45%, rgba(22, 28, 40, .8) 100%),
      linear-gradient(100deg, rgba(22, 28, 40, .4) 0%, rgba(22, 28, 40, .15) 45%, rgba(22, 28, 40, 0) 80%);
  }
  /* Block 03 mobil: Bild nur im oberen Teil (sonst würde es auf dem hohen Block stark vergrößert), weich auslaufend */
  .block--dark .block-atmo {
    height: min(100%, 860px); object-position: 100% 0; opacity: .75;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .block--dark::after {
    background:
      linear-gradient(180deg, rgba(22, 28, 40, .82) 0, rgba(22, 28, 40, .72) 150px, rgba(22, 28, 40, .6) 420px, rgba(22, 28, 40, .7) 860px, rgba(22, 28, 40, .7) 100%),
      linear-gradient(100deg, rgba(22, 28, 40, .35) 0%, rgba(22, 28, 40, .1) 50%, rgba(22, 28, 40, 0) 80%);
  }
  .block-motif--contact { width: 110%; height: 40%; right: -30%; top: 0; opacity: .32; }
  .block-motif--sage { width: 100%; height: 60%; top: auto; bottom: 0; object-position: 60% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%); }
  .hero-thread { height: 110px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: var(--s4); }
  .hero-actions .btn { width: 100%; }
  .glass { padding: 20px 20px 24px; border-radius: 8px; }
  .glass--sage { margin-right: 0; }
  .chapter-line { width: 40px; }
  .intro { margin-top: var(--s4); }
  .intro-text { margin-top: var(--s2); }

  .diagram-area { margin-top: var(--s6); }
  .diagram-wrap { display: none; }
  .diagram-list { display: block; position: relative; margin-left: 0; }
  .diagram-list::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 1px; background: var(--navy); opacity: .5; }
  .diagram-list li { position: relative; }
  .dnode {
    position: relative; display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; padding: 8px 0; min-height: 48px;
  }
  .dnode .dots { display: flex; flex-direction: column; gap: 6px; flex: none; }
  /* „Abläufe“ ist auf dem Handy ein Listenpunkt wie jeder andere. Die drei Kreise der
     Gruppe standen hier als drei leere Zeilen untereinander, an der mittleren klebte die
     Beschriftung — das las sich wie drei zusätzliche, unbenannte Schritte (Rückmeldung
     18.09.). Auf dem Desktop bleiben alle drei: dort tragen die zusammenlaufenden
     Zuflüsse die Aussage, in einer senkrechten Liste tragen sie nichts. */
  .dnode .dot:not(:first-child) { display: none; }
  .dnode .dot {
    width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--navy); background: var(--paper); color: var(--navy);
    display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .dnode .dot--box { border-radius: 3px; width: 26px; height: 26px; }
  .dnode .dot--box .core { width: 10px; height: 10px; border-radius: 50%; background: var(--oat); }
  .dnode .plus { display: block; width: 11px; height: 11px; position: relative; transition: transform var(--t) var(--ease); }
  .dnode .plus::before, .dnode .plus::after { content: ""; position: absolute; background: currentColor; }
  .dnode .plus::before { left: 0; right: 0; top: 5px; height: 1px; }
  .dnode .plus::after { top: 0; bottom: 0; left: 5px; width: 1px; }
  .dnode span.txt { font-size: var(--fs-body); font-weight: 500; }
  .dnode[aria-expanded="true"] .dot { background: var(--navy); color: var(--paper); }
  .dnode[aria-expanded="true"] .plus { transform: rotate(45deg); }
  .dnode[aria-expanded="true"] span.txt { color: var(--oat-dark); }
  .dnode--box span.txt { color: var(--oat-dark); }

  /* Popover mobil: vollbreite Karte direkt unter dem angetippten Punkt */
  .pop-host { position: static; }
  .pop { position: static; width: 100% !important; margin: 8px 0 16px; padding: 20px 20px 22px; transform-origin: 50% 0; }
  .pop .pop-arrow { display: none; }
  .pop { --pop-dx: 0; --pop-dy: -6px; }
  .pop-steps { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .pop-chain { font-size: 12px; }

  .steps li { grid-template-columns: 32px 1fr; }
  .person { margin-top: var(--s4); }
  .footer-links { flex-direction: column; gap: 10px; }
  .page { padding-top: calc(var(--nav-h) + var(--s8)); }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  html:focus-within { scroll-behavior: auto; }
}