/* ==========================================================================
   manuel-hartmann.de
   Handgeschrieben. Kein Framework, kein Build-Tool, kein CDN.

   Gestaltungsgedanke: "Signal im Dunkeln".
   Tiefer Graphit als Grund, ein einziger Gruenton, der sich wie eine
   Kontrollleuchte verhaelt. Tiefe entsteht durch weiche Lichtverlaeufe und
   feine Raster, nicht durch Kaesten und Rahmen. Verlaeufe setzen Akzente,
   sie tragen aber nie Information - was sie zeigen, steht auch im Text.

   1  Schriften     2  Tokens        3  Reset & Basis    4  Layout
   5  Licht/Textur  6  Kopf & Nav    7  Hero             8  Kennzahlen
   9  Karten       10  Prinzipien   11  Werdegang       12  Grafiken
   13 Formular     14  Fuss         15  Bewegung & Hilfsklassen
   ========================================================================== */

/* ── 1  Schriften ─────────────────────────────────────────────────────────
   Selbst gehostet. Keine Google-Fonts-CDN - das waere eine Uebermittlung der
   Besucher-IP an einen Dritten ohne Rechtsgrundlage. Variable Fonts: alle
   Schnitte aus je einer Datei. Lizenz SIL OFL 1.1 -> /assets/fonts/OFL.txt */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist.6a98141a06.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono.e54fa48c73.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; font-style: normal;
}

/* ── 2  Tokens ───────────────────────────────────────────────────────────── */

:root {
  --bg:          #0A0B0D;
  --bg-2:        #0E1013;
  --surface:     #131519;
  --surface-2:   #171A1F;
  --border:      #22262E;
  --border-hi:   #2E333D;
  --border-feld: #60646B;   /* Bedienelemente: 3,3:1 - WCAG 1.4.11 */

  /* Nachgerechnet auf --bg / --surface:
     text 17,9:1 / 16,5:1 · muted 7,5:1 / 6,9:1 · dim 4,9:1 / 4,6:1 */
  --text:   #F2F3F5;
  --muted:  #9AA0A8;
  --dim:    #7C7F85;

  /* Akzent: verfeinerte Variante des Gruens aus dem eigenen ERP. */
  --accent:      #7BC043;
  --accent-hell: #A3E06B;
  --accent-dim:  #4E7F24;

  --grad-akzent: linear-gradient(100deg, #A3E06B 0%, #7BC043 45%, #3FA9A0 100%);
  --grad-linie:  linear-gradient(90deg, transparent, var(--border-hi) 18%, var(--border-hi) 82%, transparent);
  --grad-flaeche: linear-gradient(165deg, #16191E 0%, #101317 100%);

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.3rem, 1.1rem + 4.6vw, 4.6rem);
  --fs-h2:      clamp(1.6rem, 1.15rem + 1.8vw, 2.6rem);
  --fs-h3:      clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-body:    clamp(1rem, .96rem + .2vw, 1.0625rem);
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  --measure:   62ch;
  --wrap:      1180px;
  --gutter:    clamp(1.25rem, .7rem + 2.2vw, 2.75rem);
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9rem);

  --radius:    14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  260ms;
}

/* ── 3  Reset & Basis ────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* der Seitenkoerper scrollt nie seitlich */
  position: relative;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.1; font-weight: 600;
  letter-spacing: -.025em; text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 500; letter-spacing: -.038em; line-height: 1.03; }
h2 { font-size: var(--fs-h2); letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; }

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent-hell); }

/* ── Unterstreichung: nur wo sie gebraucht wird ───────────────────────────
   Der Akzentton liegt gegenueber dem Fliesstext nur bei 1,2-2,0:1. WCAG 1.4.1
   verlangt 3:1, wenn ausschliesslich Farbe einen Link kennzeichnet — bei
   Links MITTEN IM TEXT bleibt die Unterstreichung deshalb, sonst waeren sie
   fuer Menschen mit Farbsehschwaeche nicht mehr als Link erkennbar.

   FREISTEHENDE Links sind ein anderer Fall: sie stehen allein in ihrer Zeile,
   es gibt keinen Fliesstext, mit dem man sie verwechseln koennte. Dort ist die
   Unterstreichung nur Unruhe. Beim Ueberfahren und bei Tastaturfokus kommt sie
   zurueck — damit bleibt ein nicht-farbliches Signal erhalten. */
.hero__links a,
.taetigkeit__mehr a,
.kontaktwege a,
p > a:only-child {
  text-decoration: none;
}
.hero__links a:hover,        .hero__links a:focus-visible,
.taetigkeit__mehr a:hover,   .taetigkeit__mehr a:focus-visible,
.kontaktwege a:hover,        .kontaktwege a:focus-visible,
p > a:only-child:hover,      p > a:only-child:focus-visible {
  text-decoration: underline;
}

strong { font-weight: 600; color: var(--text); }
em { font-style: normal; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; max-width: var(--measure); }
li { margin-bottom: .4em; }
li::marker { color: var(--dim); }

img, svg { max-width: 100%; height: auto; display: block; }
code, kbd { font-family: var(--mono); font-size: .9em; }

/* Deutsche Silbentrennung: bei 320 px (400 % Zoom, WCAG 1.4.10) sprengt
   "Warenwirtschaftssystem" jede Ueberschriftenzeile. */
body { hyphens: manual; }
@media (max-width: 560px) {
  h1, h2, h3, h4 { hyphens: auto; overflow-wrap: anywhere; }
  p, li, dd, dt   { hyphens: auto; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent); color: #080A05; }

/* ── 4  Layout ───────────────────────────────────────────────────────────── */

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--gutter);
  position: relative; z-index: 1;
}

.section { padding-block: var(--section-y); position: relative; }
.section + .section { padding-top: 0; }

/* Trennlinie als Verlauf, der an den Raendern ausblendet - eine durchgezogene
   Linie von Kante zu Kante wirkt wie ein Kasten, das hier wie ein Uebergang. */
.section--line { padding-top: var(--section-y); }
.section--line::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: var(--grad-linie);
}

.section__label {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 1.4rem;
}
/* Kleine Kontrollleuchte vor dem Sektionslabel. Reine Dekoration -
   die Information steht im Text daneben. */
.section__label::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  flex: 0 0 auto;
}

.section__intro {
  color: var(--muted);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.25rem);
  margin-top: 1.1rem; max-width: 56ch; line-height: 1.6;
}

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--accent); color: #080A05;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; top: 0; }

/* ── 5  Licht & Textur ───────────────────────────────────────────────────── */

/* Zwei weiche Lichtquellen und ein sehr feines Punktraster. Zusammen nehmen
   sie der Flaeche das Pappige, ohne dass etwas "gestaltet" aussieht.
   Beides liegt hinter dem Inhalt und ist fuer Screenreader unsichtbar. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% 8%,   rgba(123,192,67,.11), transparent 62%),
    radial-gradient(48rem 34rem at 8%  28%,  rgba(63,169,160,.08), transparent 60%),
    radial-gradient(70rem 50rem at 50% 96%,  rgba(123,192,67,.05), transparent 65%);
  /* Sehr langsame Drift. 48 Sekunden ist bewusst so lang, dass man die
     Bewegung nicht sieht, sondern nur merkt, dass die Flaeche lebt. */
  animation: drift 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
}

/* Punktraster + Koernung. Die Koernung nimmt dem Verlauf das Digitale -
   ohne sie sieht jede dunkle Flaeche nach Bildschirmschoner aus. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  background-size: 34px 34px, 140px 140px;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 12%, transparent 72%);
  opacity: .55;
}

/* Fortschrittsbalken am oberen Rand - rein dekorativ, deshalb aria-hidden
   im Markup. Laeuft ohne JavaScript ueber eine scrollgebundene Animation. */
.fortschritt {
  position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60;
  background: var(--grad-akzent);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .fortschritt {
    animation: fortschritt linear;
    animation-timeline: scroll(root block);
  }
  @keyframes fortschritt { to { transform: scaleX(1); } }
}

/* ── 6  Kopf & Navigation ────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:root[data-scrolled="1"] .kopf {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: var(--border);
}

.kopf__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.75rem;
}

.marke { text-decoration: none; color: var(--text); display: block; line-height: 1.2; }
.marke__name { font-weight: 600; letter-spacing: -.02em; font-size: 1.0625rem; }
.marke__rolle {
  display: block; font-family: var(--mono); font-size: .625rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--dim);
  margin-top: .2rem;
}

.nav { display: flex; gap: 1.85rem; align-items: center; }
.nav a {
  color: var(--muted); text-decoration: none; font-size: var(--fs-small);
  padding: .35rem 0; position: relative; transition: color 150ms var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--grad-akzent); border-radius: 2px;
}

.nav-toggle, .nav__schliessen {
  background: none; border: 1px solid var(--border-feld); color: var(--text);
  border-radius: var(--radius-sm); padding: .55rem .85rem;
  font: inherit; font-size: var(--fs-small); cursor: pointer;
}
/* WICHTIG: beide Knoepfe existieren nur fuer die schmale Ansicht.
   Ohne dieses display:none stand der Schliessen-Knopf mitten in der
   Desktop-Navigation. */
.nav-toggle, .nav__schliessen { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 60;
    background: var(--bg);
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; padding: var(--gutter); display: none;
  }
  .nav[data-offen="1"] { display: flex; }
  .nav a {
    font-size: 1.3rem; padding: 1.05rem 0; color: var(--text);
    border-bottom: 1px solid var(--border); min-height: 48px;
  }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav a[aria-current="page"]::after { display: none; }
  .nav[data-offen="1"] .nav__schliessen {
    display: block; position: absolute; top: 1.45rem; right: var(--gutter);
  }
}

/* Ohne JavaScript: kein Umschalter, Navigation bricht einfach um. */
.kein-js .nav-toggle, .kein-js .nav__schliessen { display: none; }
.kein-js .nav {
  position: static; display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 1rem; padding: 0;
}
.kein-js .nav a { font-size: var(--fs-small); padding: .3rem 0; border-bottom: 0; min-height: 0; }

/* ── 7  Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(4rem, 2rem + 10vw, 9rem) clamp(4rem, 2rem + 6vw, 7rem);
  position: relative;
}
/* Die Hauptzeile ist kurz und der Umbruch steht im Markup — 22ch verhindert
   nur, dass "Automatisieren," bei sehr grossen Fenstern unnoetig umbricht. */
.hero h1 { max-width: 22ch; position: relative; }

/* ── Kreismotiv rechts ────────────────────────────────────────────────────
   Drei Ringe, die unterschiedlich schnell und teils gegenlaeufig drehen.
   Sehr niedrig deckend: es soll den Blick nicht holen, sondern den leeren
   rechten Bereich fuellen und dem Text Tiefe geben. */
.hero__grafik {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-9rem, -14vw, -3rem);
  top: 50%; translate: 0 -50%;
  width: clamp(24rem, 42vw, 40rem); aspect-ratio: 1;
  opacity: .55;
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.hero__grafik svg { width: 100%; height: 100%; }
.hero__ring { transform-origin: 260px 260px; }
.hero__ring--1 { animation: ringdreh 54s linear infinite; }
.hero__ring--2 { animation: ringdreh 38s linear infinite reverse; }
.hero__ring--3 { animation: ringdreh 26s linear infinite; }
@keyframes ringdreh { to { transform: rotate(360deg); } }

/* Unter 900 px stoert das Motiv mehr, als es traegt. */
@media (max-width: 900px) { .hero__grafik { display: none; } }

/* ── Einlauf beim Laden ───────────────────────────────────────────────────
   Gestaffelt, kurz, einmalig. "backwards" sorgt dafuer, dass die Elemente
   waehrend der Verzoegerung schon im Startzustand stehen — ohne das blitzen
   sie kurz auf, bevor die Animation greift. */
@keyframes heroauf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* Ohne Deckkraft — fuer die beiden grossen Textbloecke. Ein Element mit
   opacity: 0 zaehlt nicht als LCP-Kandidat, die Ueberschrift haette den
   groessten Inhaltsbaustein also um ihre Verzoegerung nach hinten geschoben.
   Beide Bloecke umstellen, nicht nur einen: welcher der groessere ist, haengt
   an der Fensterbreite. */
@keyframes heroauf_still {
  from { transform: translateY(18px); }
  to   { transform: none; }
}
@keyframes herografik {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: .55; transform: none; }
}

.hero__rolle  { animation: heroauf 700ms var(--ease)  60ms backwards; }
.hero h1      { animation: heroauf_still 800ms var(--ease) 140ms backwards; }
.hero__sub    { animation: heroauf_still 800ms var(--ease) 320ms backwards; }
.hero__links  { animation: heroauf 800ms var(--ease) 440ms backwards; }
.hero__weiter { animation: heroauf 800ms var(--ease) 620ms backwards; }
.hero__grafik { animation: herografik 1400ms var(--ease) 200ms backwards; }

/* ── Scroll-Hinweis ───────────────────────────────────────────────────── */
.hero__weiter {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  position: relative; z-index: 1;
  transition: color var(--dur) var(--ease);
}
.hero__weiter:hover { color: var(--text); }
.hero__weiter-pfeil {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border-hi); color: var(--accent);
  animation: tippen 2.6s ease-in-out infinite;
}
@keyframes tippen {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(3px); }
}
.hero__weiter:hover .hero__weiter-pfeil { border-color: var(--accent); }
.hero h1 .zeile-2 { display: block; color: var(--muted); }

/* Das Akzentwort mit Verlauf statt Vollton - der einzige Ort, an dem der
   Verlauf auf Schrift liegt. Faellt der Verlauf aus, bleibt die Grundfarbe. */
.hero h1 em {
  color: var(--accent);
  background: var(--grad-akzent);
}

.hero__sub {
  margin-top: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  font-size: clamp(1.05rem, .98rem + .5vw, 1.3rem);
  color: var(--muted); max-width: 50ch;
}

.hero__links { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.4rem; }
.hero__links a { font-size: var(--fs-small); }

/* Augenbraue ueber der Hauptzeile - ordnet ein, bevor der Claim kommt. */
.hero__rolle {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 1.5rem;
  display: inline-flex; align-items: center; gap: .6rem;

  /* Die allgemeine Absatzregel setzt max-width: 62ch. Bei 12px Monospace sind
     das nur ~450px — deshalb brach die Zeile viel frueher um als noetig.
     Hier ist die Breite kein Lesbarkeitsthema: es ist eine Kopfzeile, kein
     Fliesstext. */
  max-width: none;
  white-space: nowrap;

  /* Statt eines harten Umbruchpunkts schrumpfen Schriftgrad UND Laufweite mit.
     Die Laufweite ist der groessere Hebel: bei 55 Zeichen kostet .2em mehr
     Breite als der Schriftgrad selbst. So bleibt die Zeile bis hinunter zu
     kleinen Fenstern einzeilig, ohne dass sie winzig wird. */
  font-size:      clamp(.62rem, .5rem + .32vw, .75rem);
  letter-spacing: clamp(.09em, .02em + .3vw, .2em);
}

/* Unter ~520px passt sie beim besten Willen nicht mehr in eine Zeile.
   Dort darf sie umbrechen — abgeschnittener Text waere schlechter. */
@media (max-width: 520px) {
  .hero__rolle { white-space: normal; }
}
.hero__rolle::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* Werkzeugkasten: Schlagworte als Chips. Kompakt genug, dass viel Wissen
   auf wenig Flaeche passt - und ohne dass ein Satz daraus wird. */
.stack {
  display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.stack__gruppe h3 {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); font-weight: 500; margin-bottom: 1.1rem;
}
.stack__liste {
  list-style: none; padding: 0; margin: 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.stack__liste li {
  margin: 0; padding: .42rem .85rem;
  font-size: var(--fs-small); line-height: 1.3; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.stack__liste li:hover { border-color: var(--border-hi); color: var(--text); }

/* ── 8  Kennzahlen ───────────────────────────────────────────────────────── */

/* Am Seitenraster ausgerichtet, nicht randlos. Randlos stand die erste Zahl
   sonst ausserhalb der Textspalte im Nichts. */
.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  margin: 0; padding: 0; list-style: none; max-width: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  overflow: hidden;
  position: relative;
}

.zahl {
  background: var(--grad-flaeche);
  padding: 1.9rem clamp(1.2rem, .9rem + .7vw, 1.8rem);
  position: relative;
  /* Raster statt Flex: so beginnen Wert, Label und Zusatz in JEDER Zelle auf
     derselben Hoehe. Vorher rutschte das Label nach unten, sobald ein Wert
     zweizeilig wurde — die Zeile fiel dann sichtbar aus der Flucht. */
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .45rem;
  align-content: start;
}
/* Feiner Lichtsaum an der Oberkante jeder Zelle - macht die Kacheln
   plastisch, ohne dass ein Rahmen noetig waere. */
.zahl::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 50%, transparent);
}

.zahl__wert {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem);
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  margin: 0; line-height: 1.05;
  /* Ein Wert bleibt einzeilig. Bricht er um, verschiebt sich alles darunter. */
  white-space: nowrap;
  background: linear-gradient(180deg, #FFFFFF 0%, #C6CBD2 100%);
}
.zahl__label {
  font-size: var(--fs-small); color: var(--text); margin: 0;
  font-weight: 500; letter-spacing: -.005em;
}
.zahl__zusatz {
  font-size: var(--fs-micro); color: var(--dim); margin: 0;
  line-height: 1.5; max-width: 26ch;
}

/* Feiner Akzentstrich unter dem Wert, der beim Ueberfahren der Zelle
   von links einlaeuft. Reine Zugabe — traegt keine Information. */
.zahl::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 0; background: var(--grad-akzent);
  transition: width 420ms var(--ease);
}
.zahl:hover::after { width: 100%; }
.zahl__bezug  { font-size: var(--fs-micro); color: var(--dim); line-height: 1.55; margin: .35rem 0 0; max-width: 46ch; }
.zahl__stand  { font-family: var(--mono); font-size: var(--fs-micro); color: var(--dim); }

/* Vorher/Nachher. Der Pfeil ist Dekoration und wird uebersprungen -
   die Zahlen selbst nicht, sie sind die Aussage. */
.delta { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.delta__vorher {
  font-family: var(--mono); color: var(--dim);
  font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
  text-decoration: line-through; text-decoration-color: var(--border-hi);
  -webkit-text-fill-color: currentColor;
}
.delta__pfeil { color: var(--dim); font-size: .9rem; -webkit-text-fill-color: currentColor; }
.delta__nachher {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  background: var(--grad-akzent);
}

/* Taetigkeiten. Kein Kennzahlenband: gezaehlte Ergebnisse beschreiben den
   Betrieb, nicht die Person. Hier steht, was tatsaechlich getan wird —
   Ueberschrift plus ein Satz, mehr nicht. */
.taetigkeiten {
  list-style: none; padding: 0; margin: 3rem 0 0; max-width: none;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.taetigkeit {
  position: relative; isolation: isolate; margin: 0;
  background: var(--grad-flaeche);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: .7rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.taetigkeit::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(150deg, rgba(123,192,67,.5), rgba(63,169,160,.25) 40%, transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.taetigkeit:hover { transform: translateY(-4px); border-color: transparent; }
.taetigkeit:hover::after { opacity: 1; }
.taetigkeit:focus-within { border-color: var(--accent); }

.taetigkeit h3 { margin: 0; font-size: var(--fs-h3); }
.taetigkeit p  { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.taetigkeit__mehr { margin-top: auto !important; padding-top: .6rem; }
.taetigkeit__mehr a { font-size: var(--fs-small); }

/* Die einzige Zahl, die bleibt — sie gehoert zur Taetigkeit, nicht zum Betrieb. */
.taetigkeit__zahl {
  font-family: var(--mono); font-weight: 500; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--grad-akzent);
  margin-right: .15rem;
}

/* ── 9  Karten ───────────────────────────────────────────────────────────── */

.karten {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.karte {
  position: relative; isolation: isolate;
  background: var(--grad-flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Verlaufskante, die beim Zeigen aufleuchtet. Liegt als Pseudoelement
   darueber und faengt keine Klicks ab. */
.karte::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(150deg, rgba(123,192,67,.5), rgba(63,169,160,.25) 40%, transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.karte:hover { transform: translateY(-4px); border-color: transparent; }
.karte:hover::after { opacity: 1; }
.karte:focus-within { border-color: var(--accent); }

/* Lichtkegel, der dem Zeiger folgt. app.js schreibt nur zwei Zahlen in
   --mx/--my; gerechnet wird ausschliesslich in der Grafikkarte. */
.karte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
              rgba(123,192,67,.13), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none;
}
.karte:hover::before { opacity: 1; }

.karte h3 { margin: 0; }
.karte p  { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.karte__zahl {
  font-family: var(--mono); font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; color: var(--accent);
  margin-top: auto; padding-top: .9rem; position: relative;
}
.karte__zahl::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--border-hi), transparent);
}
.karte a { font-size: var(--fs-small); }

.spalten { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); margin-top: 2.5rem; }
@media (min-width: 900px) { .spalten { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* ── 10  Prinzipien ──────────────────────────────────────────────────────── */

.prinzipien { list-style: none; padding: 0; margin: 3rem 0 0; max-width: none; }
.prinzip { padding-block: clamp(1.7rem, 1.2rem + 1vw, 2.5rem); display: grid; gap: .9rem; position: relative; }
.prinzip::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
@media (min-width: 860px) {
  .prinzip { grid-template-columns: 5.5rem minmax(0,1fr); column-gap: 2.25rem; }
  /* Ziffer in Spalte 1, alles andere fest in Spalte 2.
     Ein "grid-row: span N" auf der Ziffer erzeugte leere Zeilen, sobald ein
     Eintrag weniger Absaetze hat als der Span breit ist - daher die grossen
     Luecken zwischen den Eintraegen. */
  .prinzip__nr { grid-column: 1; grid-row: 1; }
  .prinzip > :not(.prinzip__nr) { grid-column: 2; }
}

.prinzip h3 { margin: 0; }
.prinzip p  { margin: 0; color: var(--muted); }
.prinzip__beleg {
  border-left: 2px solid; border-image: linear-gradient(180deg, var(--accent), transparent) 1;
  padding-left: 1.05rem; font-size: var(--fs-small); color: var(--dim); max-width: var(--measure);
}
.prinzip__beleg strong { color: var(--muted); font-weight: 500; }

/* ── 11  Werdegang ───────────────────────────────────────────────────────── */

.phasen { list-style: none; padding: 0; margin: 3rem 0 0; max-width: none; }
.phase { padding-block: clamp(1.6rem, 1.2rem + 1vw, 2.3rem); display: grid; gap: .8rem; position: relative; }
.phase::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
@media (min-width: 860px) {
  .phase { grid-template-columns: 5.5rem minmax(0,1fr); column-gap: 2.25rem; }
  .phase__nr { grid-column: 1; grid-row: 1; }
  .phase > :not(.phase__nr) { grid-column: 2; }
}
/* ── Zeitachse für Phasen und Prinzipien ──────────────────────────────────
   Die Ziffern standen vorher klein und ohne Bezug in einer leeren Spalte.
   Jetzt tragen sie eine Linie mit Knoten: aus einer Aufzählung wird eine
   Abfolge — und genau das sind Phasen ja auch. */

.phasen, .prinzipien { position: relative; }

/* Die Linie läuft nur zwischen erstem und letztem Knoten und blendet an
   beiden Enden aus. Durchgezogen sähe sie nach Rahmen aus. */
@media (min-width: 860px) {
  .phasen::before, .prinzipien::before {
    content: ""; position: absolute; left: .5rem; top: 3.6rem; bottom: 3.6rem;
    width: 1px;
    background: linear-gradient(180deg,
      transparent, var(--border-hi) 7%, var(--border-hi) 93%, transparent);
  }
}

.phase__nr, .prinzip__nr {
  position: relative;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + .85vw, 1.95rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-akzent);
  color: var(--accent);
}

@media (min-width: 860px) {
  .phase__nr, .prinzip__nr { padding-left: 1.9rem; padding-top: .2rem; }

  /* Knoten auf der Linie. Der weiche Ring aussen herum lässt ihn leuchten,
     ohne dass ein zweites Element nötig wäre. */
  .phase__nr::before, .prinzip__nr::before {
    content: ""; position: absolute; left: .19rem; top: .5rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(123,192,67,.10), 0 0 14px rgba(123,192,67,.55);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .phase:hover .phase__nr::before,
  .prinzip:hover .prinzip__nr::before {
    transform: scale(1.28);
    box-shadow: 0 0 0 6px rgba(123,192,67,.16), 0 0 22px rgba(123,192,67,.85);
  }
}

/* Schmale Ansicht: kein Platz für eine Achse — Ziffer und Knoten stehen
   nebeneinander über der Überschrift. */
@media (max-width: 859px) {
  .phase__nr, .prinzip__nr {
    display: inline-flex; align-items: center; gap: .6rem; font-size: 1.2rem;
  }
  .phase__nr::before, .prinzip__nr::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 10px rgba(123,192,67,.6);
    flex: 0 0 auto;
  }
}
.phase h3 { margin: 0; }
.phase p  { margin: 0; color: var(--muted); }

.phase__felder { display: grid; gap: 1.1rem; margin-top: .5rem; }
@media (min-width: 1000px) { .phase__felder { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.phase__feld dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .35rem;
}
.phase__feld dd { margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* ── 12  Grafiken ────────────────────────────────────────────────────────── */

.grafik {
  margin: 2.5rem 0 0; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  background: var(--grad-flaeche);
  border: 1px solid var(--border); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.grafik::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 20rem at 85% 0%, rgba(123,192,67,.10), transparent 65%);
}
.grafik svg { width: 100%; height: auto; position: relative; }
.grafik figcaption {
  margin-top: 1.25rem; font-size: var(--fs-micro); color: var(--dim);
  font-family: var(--mono); position: relative;
}

/* Systembilder (Nachbauten) — breite Inhalte scrollen im eigenen Rahmen. */
.bild {
  margin: 2.5rem 0 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.bild__rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bild__inhalt { min-width: 680px; }
.bild figcaption {
  border-top: 1px solid var(--border); padding: .8rem 1.15rem;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--dim);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between;
}

/* ── 13  Formular ────────────────────────────────────────────────────────── */

.form { display: grid; gap: 1.4rem; max-width: 44rem; margin-top: 2.5rem; }
.feld { display: grid; gap: .45rem; }
.feld label { font-size: var(--fs-small); color: var(--muted); }
.feld .pflicht { color: var(--accent); }

input[type="text"], input[type="email"], textarea {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-feld); border-radius: var(--radius-sm);
  font: inherit; padding: .85rem 1rem;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
input:hover, textarea:hover { border-color: #7C8089; }
input:focus, textarea:focus {
  border-color: var(--accent); outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(123,192,67,.12);
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }
::placeholder { color: var(--dim); }

.feld__fehler { font-size: var(--fs-small); color: #FF9382; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #FF9382; }

/* Honigtopf: nicht display:none - manche Ausfueller ignorieren das. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: #080A05; background: var(--grad-akzent);
  border-radius: var(--radius-sm); padding: .9rem 1.7rem;
  transition: filter 150ms var(--ease), transform 150ms var(--ease);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.form__hinweis { font-size: var(--fs-small); color: var(--dim); max-width: var(--measure); margin: 0; }

.meldung {
  border: 1px solid var(--border-hi); border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1.05rem 1.2rem; margin-bottom: 2rem;
}
.meldung--fehler { border-left-color: #FF9382; }
.meldung p { margin: 0; font-size: var(--fs-small); }

.kontaktwege { display: grid; gap: .55rem; margin: 2rem 0 0; }
.kontaktwege dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.kontaktwege dd { margin: 0 0 .85rem; }
.kontaktwege a { font-size: 1.05rem; }

/* ── 14  Fuss ────────────────────────────────────────────────────────────
   Spalten mit hochkant gestellten Labels und einem rotierenden Kreis-Siegel.
   Die Labels stehen senkrecht, weil sie dadurch aus dem Lesefluss treten und
   die Spalten gliedern, ohne Platz in der Breite zu kosten. */

.fuss { margin-top: var(--section-y); padding-block: 4rem 2rem; position: relative; }
.fuss::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: var(--grad-linie);
}

.fuss__raster {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  align-items: start;
}

.fuss__block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; }

/* Hochkant, von unten nach oben gelesen. Der kleine Strich darunter ist der
   ruhige Ersatz fuer die "xx"-Marke aus der Vorlage. */
.fuss__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); margin: 0;
  display: flex; align-items: center; gap: .8rem;
  justify-self: start;
}
.fuss__label::after {
  content: ""; width: 1px; height: 22px;
  background: linear-gradient(180deg, var(--accent), transparent);
}

.fuss__inhalt p { margin: 0 0 .55rem; font-size: var(--fs-small); color: var(--muted); }
.fuss__inhalt p:last-child { margin-bottom: 0; }
.fuss__name { color: var(--text) !important; font-weight: 600; }
.fuss__inhalt a { color: var(--muted); text-decoration: none; }
.fuss__inhalt a:hover { color: var(--accent); }

.fuss__liste { list-style: none; padding: 0; margin: 0; max-width: none; }
.fuss__liste li { margin: 0 0 .5rem; font-size: var(--fs-small); }
.fuss__liste li:last-child { margin-bottom: 0; }
.fuss__liste a { color: var(--muted); text-decoration: none; position: relative; }
.fuss__liste a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent); transition: right 260ms var(--ease);
}
.fuss__liste a:hover { color: var(--text); }
.fuss__liste a:hover::after { right: 0; }
.fuss__liste--still li { color: var(--dim); }

/* Kreis-Siegel: Ring dreht sich langsam, die Mitte steht still. */
.siegel {
  position: relative; justify-self: end; align-self: center;
  width: clamp(9.5rem, 8rem + 5vw, 12rem); aspect-ratio: 1;
  display: grid; place-items: center;
  text-decoration: none; color: var(--text);
}
.siegel__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.siegel__ring text {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; fill: var(--dim);
  transition: fill var(--dur) var(--ease);
}
.siegel__mitte {
  position: relative; text-align: center; line-height: 1.25;
  font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); font-weight: 600;
  letter-spacing: -.015em;
}
.siegel__pfeil {
  display: block; margin-bottom: .3rem; font-size: 1.15em; color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.siegel:hover .siegel__ring text { fill: var(--accent); }
.siegel:hover .siegel__pfeil { transform: translateY(-4px); }
.siegel:focus-visible { border-radius: 50%; }

@keyframes siegeldreh { to { transform: rotate(360deg); } }
.siegel__ring { animation: siegeldreh 26s linear infinite; }
.siegel:hover .siegel__ring { animation-duration: 12s; }

/* Untere Leiste */
.fuss__leiste {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 1.6rem; position: relative;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.fuss__leiste::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: var(--grad-linie);
}
.fuss__copy { margin: 0; font-size: var(--fs-small); color: var(--dim); }
.fuss__recht { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.fuss__recht a { color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.fuss__recht a:hover { color: var(--text); text-decoration: underline; }

/* Schmale Ansicht: Siegel wandert unter die Spalten und zentriert sich. */
@media (max-width: 760px) {
  .siegel { justify-self: center; margin-top: 1rem; }
}

/* ── 15  Bewegung & Hilfsklassen ─────────────────────────────────────────── */

.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim   { color: var(--dim); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Startzustand nur setzen, wenn JS laeuft - sonst bliebe bei einem
   JS-Fehler die halbe Seite unsichtbar. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal[data-sichtbar="1"] {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* Gestaffelt: Karten, Prinzipien und Phasen laufen nacheinander ein.
   Der Versatz ist klein genug, dass es fliessend wirkt statt als Abfolge. */
.js .reveal[data-sichtbar="1"] > *  { animation: einlauf 620ms var(--ease) backwards; }
.js .reveal[data-sichtbar="1"] > *:nth-child(1) { animation-delay:  40ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(2) { animation-delay: 110ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(3) { animation-delay: 180ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(4) { animation-delay: 250ms; }
.js .reveal[data-sichtbar="1"] > *:nth-child(5) { animation-delay: 320ms; }
@keyframes einlauf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Wo der Browser scrollgebundene Animationen kann, uebernimmt er sie:
   die Ueberschriften bewegen sich dann MIT dem Scrollen statt einmalig
   abzuspielen. Das ist der Unterschied, den man als "teuer" wahrnimmt. */
@supports (animation-timeline: view()) {
  .section h2, .section__intro, .grafik {
    animation: aufblenden linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 26%;
  }
  @keyframes aufblenden {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  /* KEINE scrollgebundene Ausblendung mehr auf .hero h1 / .hero__sub:
     die setzt dieselbe animation-Eigenschaft wie der Einlauf beim Laden und
     haette ihn ueberschrieben. Der Einlauf ist der wertvollere Effekt —
     man sieht ihn bei jedem Seitenaufruf, das Ausblenden nur beim Wegscrollen.
     Stattdessen driftet nur das Kreismotiv beim Scrollen davon. */
  .hero__grafik {
    animation: herografik 1400ms var(--ease) 200ms backwards,
               herodrift linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit-crossing 0% exit-crossing 100%;
  }
  @keyframes herodrift {
    to { opacity: 0; transform: translateY(-40px) scale(1.08); }
  }
}

/* Zahlen zaehlen beim ersten Sichtbarwerden hoch (app.js). Waehrend des
   Zaehlens feste Ziffernbreite, sonst zappelt das Layout. */
.zahl__wert[data-zahl] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal[data-sichtbar="1"] > * { animation: none; }
  .karte:hover { transform: none; }
  .karte::before { display: none; }
  body::before { animation: none; }
  .fortschritt { display: none; }
  .siegel__ring { animation: none; }
  .hero__ring, .hero__weiter-pfeil { animation: none; }
  .hero__rolle, .hero h1, .hero__sub, .hero__links, .hero__weiter {
    animation: none; opacity: 1; transform: none;
  }
  .hero__grafik { animation: none; opacity: .55; transform: none; }
  .section h2, .section__intro, .grafik, .hero h1, .hero__sub { animation: none; opacity: 1; transform: none; }
}

/* Kontrastpraeferenz: Verlaufsschrift auf Vollton zuruecknehmen. */
@media (prefers-contrast: more) {
  .hero h1 em, .zahl__wert, .delta__nachher, .prinzip__nr, .phase__nr {
    background: none; -webkit-text-fill-color: currentColor; color: var(--text);
  }
  .hero h1 em, .delta__nachher { color: var(--accent); }
  body::before, body::after { display: none; }
}

@media print {
  .kopf, .nav-toggle, .form, .grafik { display: none; }
  body { background: #fff; color: #000; }
  body::before, body::after { display: none; }
}

/* ── 15b  Ersatz fuer style-Attribute ─────────────────────────────────────
   Die eigene Content-Security-Policy erlaubt style-src 'self' ohne
   'unsafe-inline'. Nach CSP Level 3 faellt style-src-attr darauf zurueck —
   inline style="…" wird also blockiert und wirkte NICHT. Die betroffenen
   Abstaende sahen im Quelltext richtig aus und fehlten in der Anzeige. */

#kopf-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.abstand-gross  { margin-top: 2.5rem; }
.abstand-mittel { margin-top: 1.5rem; }
.klein          { font-size: var(--fs-small); }

/* ── 16  Verlaufsschrift ──────────────────────────────────────────────────
   BEWUSST AM DATEIENDE UND IN EIGENEM ABSCHNITT.

   Diese Regeln beschneiden den Verlauf auf die Buchstaben. Fehlen sie, wird
   aus jedem Verlaufstext ein farbiger Kasten, der die Ziffer verdeckt —
   genau das ist einmal passiert, weil der Block beim Umbau eines anderen
   Abschnitts mit ersetzt wurde. Deshalb steht er jetzt isoliert am Ende,
   und bin/build.php prueft seine Existenz.

   Der @supports-Rahmen ist kein Schmuck: ohne background-clip wuerde
   -webkit-text-fill-color: transparent den Text UNSICHTBAR machen. */

.hero h1 em,
.zahl__wert,
.delta__nachher,
.prinzip__nr,
.phase__nr,
.taetigkeit__zahl { color: var(--accent); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 em,
  .zahl__wert,
  .delta__nachher,
  .prinzip__nr,
  .phase__nr,
  .taetigkeit__zahl {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}