/* ==========================================================================
   Trustview — Stildatei, Fassung 5
   Sechs Grautöne, ein Metallton, zwei Schriften, kein Bild. Ein
   Abstandssystem, ein Raster, eine Größenskala. Die Anmutung eines
   Instruments: Ebenen, Linien, Licht.

   Grundregeln:
   - Ohne JavaScript ist jede Seite vollständig lesbar. Alles, was per
     Skript aufgefahren wird, hängt an der Klasse html.js.
   - prefers-reduced-motion: reduce schaltet jede Bewegung ab.
   - Farben nur über die Variablen in :root. Verläufe und Linien nur als
     Transparenz derselben sieben Werte.
   - Der Metallton ist Licht, keine Farbe: Ziffern, Haarlinien, der aktive
     Menüpunkt, der eine wichtigste Knopf. Nie flächig, nie in Riesengröße.
   - Abstände nur über die Skala --s1 … --s32. Kein freier Zahlenwert.
   ========================================================================== */

:root {
  /* Farben — vollständige Palette, siehe SCHEMA.md */
  --grund:   #1f2124;
  --flaeche: #33373d;
  --linie:   #3f444b;
  --neben:   #88909b;
  --weiss:   #ffffff;
  --schwarz: #000000;
  --metall:  #D4B483;   /* Champagner. 8,2:1 auf Grund, 6,1 auf Fläche, 5,0 auf Linie */

  /* Licht: Weiß als Quelle, nie als Fläche */
  --licht-1: rgb(255 255 255 / .04);
  --licht-2: rgb(255 255 255 / .08);
  --licht-3: rgb(255 255 255 / .16);
  --schatten: rgb(0 0 0 / .35);

  /* Der Metallton als Schimmer: Kanten und Ebenenränder, 4–35 % Deckkraft */
  --metall-schimmer: rgb(212 180 131 / .05);
  --metall-hauch:    rgb(212 180 131 / .12);
  --metall-kante:    rgb(212 180 131 / .35);

  /* Material: Wo eine Ebene auf einer anderen liegt, oben eine Lichtkante,
     unten ein Schatten — beide so schwach, dass man sie nicht benennen kann */
  --kante-licht:    rgb(255 255 255 / .10);
  --kante-schatten: rgb(0 0 0 / .28);
  --fall:           0 12px 32px rgb(0 0 0 / .28);
  --glas:           rgb(31 33 36 / .84);

  /* Schriften — liegen unter assets/fonts/ */
  --schrift: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Abstandsskala: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px */
  --s1:  .25rem;
  --s2:  .5rem;
  --s3:  .75rem;
  --s4:  1rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s12: 3rem;
  --s16: 4rem;
  --s24: 6rem;
  --s32: 8rem;

  /* Abgeleitete Abstände — je Bildbreite genau ein Wert aus der Skala */
  --rand:      var(--s4);    /* Seitenrand links/rechts        16 → 24 → 48 → 64 */
  --abschnitt: var(--s16);   /* Abschnitt oben/unten           64 → 96 → 128    */
  --block:     var(--s12);   /* Abschnittskopf → Inhalt        48 → 64          */
  --spalte:    var(--s4);    /* Spaltenabstand im Raster       16 → 24          */
  --zeile:     var(--s6);    /* Zeilenabstand in Listen        24 → 32          */
  --kopf-h:    var(--s16);   /* Höhe der Kopfzeile             64               */
  --kennung-ab: var(--s6);   /* Kennung → Überschrift, überall 24 → 32          */

  /* Größenskala: 12 · 14 · 16–18 · 20–24 · 24–32 · 32–48 · 40–80 · 44–112 px */
  --t0: .75rem;
  --t1: .875rem;
  --t2: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --t3: clamp(1.25rem, 1.1rem  + .6vw,  1.5rem);
  --t4: clamp(1.5rem,  1.2rem  + 1.2vw, 2rem);
  --t5: clamp(2rem,    1.4rem  + 2.4vw, 3rem);
  --t6: clamp(2.5rem,  1.5rem  + 4.2vw, 5rem);
  --t7: clamp(2.75rem, 1.5rem  + 5.5vw, 7rem);

  /* Bewegung: eine Kurve, drei Dauern, nichts federt. Jede Bewegung auf
     der Seite nimmt eine dieser drei — auch die Effekte am Text unten. */
  --kurve: cubic-bezier(.2, 0, 0, 1);
  --kurz:  .2s;
  --mittel-d: .35s;
  --lang:  .6s;

  --breite: 100rem;   /* Innenbreite, 1600 px */
}

@media (min-width: 600px) {
  :root { --rand: var(--s6); }
}
@media (min-width: 768px) {
  :root { --abschnitt: var(--s24); }
}
@media (min-width: 1024px) {
  :root { --rand: var(--s12); --block: var(--s16); --spalte: var(--s6); --zeile: var(--s8); --kennung-ab: var(--s8); }
}
@media (min-width: 1280px) {
  :root { --abschnitt: var(--s32); --zeile: var(--s12); }
}
@media (min-width: 1440px) {
  :root { --rand: var(--s16); }
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  background: var(--grund);
  color: var(--weiss);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--linie) var(--grund);
  scrollbar-width: thin;
}

html.menue-offen { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--t2);
  line-height: 1.6;
  background: var(--grund);
  color: var(--weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}

/* UMBRÜCHE — die Regel für die ganze Seite.

   Automatische Silbentrennung ist abgeschaltet. Deutsche Komposita werden
   dabei an Stellen zerlegt, die beim Lesen stolpern lassen
   („Handwerks-betriebe", „Behörden-formulare"), und in einer Grotesk mit
   engem Buchstabenabstand sieht der Trennstrich nach Satzfehler aus.
   Gemessen am 02.09.2026: auf JEDER geprüften Breite von 320 bis 1920 Pixel
   wurden Wörter getrennt.

   Stattdessen zwei Werkzeuge, die nur eingreifen, wenn es nötig ist:
   `text-wrap: pretty` verhindert ein einzelnes Wort auf der letzten Zeile,
   `overflow-wrap: break-word` bricht ein Wort nur, wenn es allein schon
   breiter als seine Spalte wäre — also nie im Normalfall. */
p, li { text-wrap: pretty; }
.lauftext, .lead, .zeile-text, .schritte p, .vergleich p, .gruende p, .leistung-ergebnis {
  hyphens: manual; -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; }
a:hover { text-decoration-thickness: .08em; }

p { margin: 0; }
p + p { margin-top: var(--s4); }

ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
/* Satzzeichen am Zeilenanfang hängen optisch in den Rand (wo der Browser es kann) */
h1, h2, h3, .lead, .lauftext, .leistung-ergebnis { hanging-punctuation: first; }

address { font-style: normal; }

::selection { background: var(--metall); color: var(--schwarz); }

/* Fokus: ein Ring im Metallton, mit Luft zum Element, dazu ein weicher Hof.
   Sichtbar auf jeder Fläche der Seite, nie der Browser-Standard. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--metall); outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--metall-hauch);
  border-radius: var(--s1);
}
.knopf:focus-visible, .pille:focus-visible, .menue summary:focus-visible { border-radius: 999px; }

/* Sprunglink */
.sprung {
  position: fixed; top: var(--s3); left: var(--s3); z-index: 200;
  padding: var(--s3) var(--s6); background: var(--weiss); color: var(--schwarz);
  font-family: var(--mono); font-size: var(--t1); text-decoration: none; border-radius: 999px;
  transform: translateY(-200%);
}
.sprung:focus-visible { transform: none; outline-color: var(--schwarz); outline-offset: -4px; }

/* Fortschritt am oberen Rand — ein Strich, der mit dem Lesen wächst (JS) */
.lauf {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 1px; background: var(--metall);
  transform: scaleX(var(--f, 0)); transform-origin: 0 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Raster — zwölf Spalten, eine linke Kante
   -------------------------------------------------------------------------- */

.innen { width: 100%; max-width: var(--breite); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Typografische Bausteine
   -------------------------------------------------------------------------- */

/* Optischer Ausgleich: je größer die Versalien, desto enger der Buchstaben-
   abstand (−3,5 % → −3 % → −1,5 %); die kleinen Mono-Kennungen laufen
   dafür mit +14 %. Rechnerisch gleich wäre optisch ungleich. */
.riese, .gross, .mittel {
  text-transform: uppercase;
  font-weight: 700;
  font-variation-settings: 'wght' 680;
  line-height: .95;
  letter-spacing: -.035em;
  text-wrap: balance;
  /* Silbentrennung ist aus — kein „Handwerks-betriebe" mehr.
     `break-word` bleibt aber stehen, und zwar bewusst: Es bricht ein Wort
     ausschließlich dann, wenn das Wort allein schon breiter ist als der
     Bildschirm. Ich hatte es am 02.09.2026 einmal entfernt, weil eine
     Messung einen Wortbruch bei 1024 px zu zeigen schien. Die Messung war
     unzuverlässig (Klon-Vergleich mit falscher Breite) — der Ausbau dagegen
     war messbar schädlich: Bei 320 bis 414 Pixeln lief die Seite seitlich
     über, weil lange Komposita nicht mehr umbrechen konnten. Ein Wortbruch
     im Notfall ist besser als eine Seite, die man zur Seite schieben kann. */
  overflow-wrap: break-word;
  hyphens: manual;
}
.riese  { font-size: var(--t7); }
.gross  { font-size: var(--t6); letter-spacing: -.03em; font-variation-settings: 'wght' 640; }
.mittel { font-size: var(--t4); line-height: 1; letter-spacing: -.015em; font-variation-settings: 'wght' 620; }
@media (max-width: 599px) {
  /* Auch auf schmalen Bildschirmen wird nicht getrennt: Eine Überschrift
       mit Trennstrich wirkt wie ein Fehler, eine Zeile mehr wie Absicht. */
    .riese, .gross, .mittel, .schritte h3, .gruende h3 {
      hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word;
    }
  /* Schmale Bildschirme: eine Pille darf umbrechen, statt hinauszuragen */
  .pille { white-space: normal; max-width: 100%; }
}

/* Die Riesenüberschrift füllt die Spaltenbreite: --em ist die gemessene Breite
   der längsten Zeile in em (steht im HTML). So bricht oberhalb von 600 px keine
   Zeile mehr um, und unterhalb nur an Wortgrenzen oder mit Trennstrich. */
.held-inhalt { container-type: inline-size; }
.riese { font-size: clamp(2.25rem, calc(100cqw / var(--em, 16) * .96), 7rem); }

/* Rasterkinder dürfen nie breiter werden als ihre Spalte */
/* Rasterkinder dürfen nie breiter werden als ihre Spalte.
   Rasterzellen haben von Haus aus `min-width: auto` und schrumpfen deshalb
   nicht unter die Breite ihres längsten Wortes. Bei 320 und 360 Pixeln ragten
   dadurch „Software für Arbeitsabläufe" und der Absatz darunter 20 Pixel über
   ihren Kasten und 4 Pixel über den Bildschirmrand hinaus — gemessen am
   02.09.2026. `.leistung-kopf` fehlte in dieser Aufzählung. */
.leistung > *, .leistung-kopf > *, .leistung-punkte > *,
.gruende > li > *, .schritte > li > *, .ebene-inhalt, .ebene-zeile > *,
.tafel-kopf > *, .zeile > * { min-width: 0; }

/* Zeilenweise Einfahrt der Riesenüberschrift. Ohne JS zeitgesteuert, mit JS
   sobald der Ladeschirm weg ist. Der Ausgangszustand steckt im Keyframe. */
.riese .z { display: block; overflow-y: clip; padding: .04em 0 .08em; margin: -.04em 0 -.08em; }
.riese .z > span { display: block; }
html:not(.js) .riese .z > span,
html.bereit .riese .z > span {
  animation: zeile-auf var(--lang) var(--kurve) both;
  animation-delay: calc(var(--n, 0) * .06s + .05s);
}
@keyframes zeile-auf {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

/* Sicherung für den Fall ohne Skript.
   Die Überschrift wird über eine Animation eingeblendet, deren Ausgangs-
   zustand („105 % nach unten") durch `fill-mode: both` auch VOR dem Start
   gilt. Läuft die Animation aus irgendeinem Grund nicht an, bleibt die
   Überschrift damit dauerhaft aus ihrem Kasten geschoben — also unsichtbar.
   Das ist der teuerste denkbare Fehler auf dieser Seite.
   `scripting: none` greift genau dann, wenn kein Skript läuft. Dort wird
   die Animation gar nicht erst vergeben: Der Text steht einfach da. */
@media (scripting: none) {
  html:not(.js) .riese .z > span {
    animation: none;
    transform: none;
  }
}

/* Kennung: Mono, versal, gesperrt — ein Bauteil, kein Schmuck */
.kennung {
  font-family: var(--mono); font-size: var(--t0); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.kennung { color: var(--neben); }

/* Pille: ein Bauteil aus Material — Hauch Fläche, Lichtkante oben, Schatten
   unten. Der Text ist gesperrter Mono-Satz mit einer Ziffer im Metallton.
   Die Sperrung läuft rechts nach; das letzte Zeichen bekommt sie nicht. */
.pille {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--s8); padding: var(--s1) calc(var(--s4) - .14em) var(--s1) var(--s4);
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--licht-1);
  font-family: var(--mono); font-size: var(--t0); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--weiss);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--kante-licht), 0 1px 0 var(--kante-schatten);
}
.pille b { font-weight: 500; color: var(--metall); }

/* Lesetext steht im Grundzustand weiß. Gedeckt wird er nur mit JavaScript
   und nur, bis er gelesen ist (siehe „Effekte, die den Text hervorheben").
   So ist ohne Skript alles hell, und mit Skript endet alles hell. */
.lead { font-size: var(--t3); line-height: 1.45; max-width: 42ch; color: var(--weiss); }
.lauftext { max-width: 62ch; }

/* Weiter-Verweis: Text und Pfeil in Weiß; beim Überfahren nimmt der Pfeil
   das Licht auf und rückt nach. Ruhezustand ohne Farbe — das hält den
   Metallton auf jedem Bildschirm auf Ziffern, Haarlinie und Knopf. */
.weiter {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; color: var(--weiss); text-decoration: none;
  font-weight: 500; font-size: var(--t2);
  transition: color var(--kurz);
}
.weiter svg { width: var(--s6); height: var(--s6); flex: none; color: var(--neben); transition: transform var(--mittel-d) var(--kurve), color var(--kurz); }
.weiter:hover, .weiter:focus-visible { text-decoration: underline; text-decoration-color: var(--metall); text-underline-offset: .2em; }
.weiter:hover svg, .weiter:focus-visible svg { transform: translateX(var(--s1)); color: var(--metall); }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */

/* Der eine wichtigste Knopf: Metall mit Lichtkante oben und Schatten
   darunter. Überfahren: etwas heller und hebt sich; gedrückt: setzt auf.
   Der leere Knopf ist eine Haarlinie mit Lichtkante — beim Überfahren Weiß. */
.knopf {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--s12); padding: var(--s2) var(--s6);
  border-radius: 999px; border: 1px solid var(--metall);
  background: var(--metall); color: var(--schwarz);
  font-weight: 500; font-size: var(--t2); line-height: 1.2; text-decoration: none;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px var(--kante-schatten);
  transition: background-color var(--kurz), background-image var(--kurz), color var(--kurz), border-color var(--kurz), box-shadow var(--kurz), transform var(--kurz) var(--kurve);
}
.knopf svg { width: 1.1em; height: 1.1em; flex: none; }
.knopf--leer { background: transparent; color: var(--weiss); border-color: var(--linie); box-shadow: inset 0 1px 0 var(--kante-licht), 0 1px 0 var(--kante-schatten); }
/* Auf dem Metallknopf wäre ein Metallring unsichtbar: dort ist der Ring weiß */
.knopf:focus-visible { outline-color: var(--weiss); outline-offset: 3px; box-shadow: 0 0 0 7px var(--licht-2); }
.knopf--leer:focus-visible { outline-color: var(--metall); box-shadow: 0 0 0 7px var(--metall-hauch); }
.knopf:active { transform: translateY(1px); box-shadow: inset 0 1px 2px var(--kante-schatten); }

@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background-image: linear-gradient(var(--licht-3), var(--licht-3)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), 0 6px 16px var(--kante-schatten); transform: translateY(-1px); }
  .knopf--leer:hover { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); box-shadow: 0 6px 16px var(--kante-schatten); }
  .knopf:active, .knopf--leer:active { transform: translateY(1px); box-shadow: inset 0 1px 2px var(--kante-schatten); }
}

.aktionen { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------------------
   Ladeschirm — existiert nur mit JavaScript (html.js), sonst display:none.
   -------------------------------------------------------------------------- */

.lade { display: none; }
html.js .lade {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 300;
  background: var(--grund);
  transition: transform var(--lang) var(--kurve);
}
html.js .lade.weg { transform: translateY(-101%); }
.lade img { width: clamp(11rem, 32vw, 22rem); }
.lade-inhalt { display: grid; gap: var(--s6); justify-items: center; }
.lade-inhalt .kennung { color: var(--neben); }
/* Unter dem Wortlogo zieht eine Haarlinie im Metallton auf — der erste
   Eindruck ist ein Instrument, das anspringt */
.lade-inhalt::after {
  content: ''; grid-row: 2; width: 100%; height: 1px; margin-top: calc(var(--s6) * -1);
  background: linear-gradient(90deg, transparent, rgb(212 180 131 / .6), transparent);
  transform: scaleX(0); animation: lade-linie var(--lang) var(--kurve) .1s both;
}
.lade-inhalt .kennung { grid-row: 3; }
@keyframes lade-linie { to { transform: none; } }

/* --------------------------------------------------------------------------
   Kopfzeile — feste Leiste, sichtbare Navigation ab 860 px
   -------------------------------------------------------------------------- */

.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--kopf-h);
  padding: 0 var(--rand);
  background: var(--grund);
  border-bottom: 1px solid transparent;
  transition: border-color var(--kurz), background-color var(--kurz), box-shadow var(--kurz);
}
html.js .kopf { background: transparent; }
/* Sobald gescrollt ist: eine Glasleiste — Grund mit 84 % Deckkraft, dahinter
   weichgezeichnet, unten eine Haarlinie und ein schwacher Fall */
html.js .kopf.kopf--fest {
  background: var(--glas);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom-color: var(--linie);
  box-shadow: var(--fall);
}
.kopf-innen {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
}
.marke { display: inline-flex; align-items: center; min-height: 44px; }
.marke img { height: var(--s4); width: auto; }

.kopf-nav { display: none; }
/* Jeder Eintrag ist mindestens 44 × 44 groß („Start" ist nur 31 px breit,
   deshalb ein Innenabstand von 8 px je Seite); der Strich darunter läuft
   nur unter dem Wort, nicht unter dem Innenabstand. */
.kopf-nav ul { display: flex; align-items: center; gap: var(--s2); list-style: none; }
.kopf-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 var(--s2);
  font-size: var(--t1); font-weight: 500; letter-spacing: .01em;
  color: var(--neben); text-decoration: none; position: relative;
  transition: color var(--kurz);
}
.kopf-nav a::after {
  content: ""; position: absolute; left: var(--s2); right: calc(100% - var(--s2)); bottom: var(--s2);
  height: 1px; background: currentColor;
  transition: right var(--mittel-d) var(--kurve);
}
.kopf-nav a:hover, .kopf-nav a:focus-visible { color: var(--weiss); }
.kopf-nav a:hover::after { right: var(--s2); }
/* Die Seite, auf der man ist, trägt den Strich dauerhaft — im Metallton */
.kopf-nav a[aria-current="page"] { color: var(--weiss); }
.kopf-nav a[aria-current="page"]::after { right: var(--s2); background: var(--metall); }

.kopf-rechts { display: flex; align-items: center; gap: var(--s6); }
.kopf-rechts .uhr { display: none; color: var(--neben); }
.kopf-tel {
  display: none; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: var(--t1); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.kopf-tel:hover { text-decoration: underline; }
.kopf-platz { width: 44px; }   /* Platz für den Menü-Knopf */

/* Die Telefonnummer im Kopf braucht Platz, den es zwischen 600 und 860
   Pixeln nicht gibt: Dort ist der Menüknopf noch da, und die Nummer lief
   18 Pixel darunter — gemessen bei 820 px. Sie erscheint deshalb erst,
   wenn der Menüknopf verschwunden ist und die Navigation offen steht.
   Verloren geht nichts: Auf schmalen Bildschirmen steht die Nummer im
   Menü, im Kopfbereich der Seite und im Fuß, überall als Wählverweis. */
@media (min-width: 860px)  { .kopf-tel { display: inline-flex; } }
@media (min-width: 860px)  { .kopf-nav { display: block; } .kopf-platz { display: none; } }
@media (min-width: 1280px) { .kopf-rechts .uhr { display: inline; } }

/* Menü — ein <details>, funktioniert ohne Skript; nur unterhalb 860 px sichtbar */
.menue {
  position: fixed; z-index: 70;
  top: calc((var(--kopf-h) - 44px) / 2);
  right: var(--rand);
}
.menue summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s3);
  border-radius: 999px; background: var(--weiss); color: var(--schwarz);
  border: 1px solid var(--weiss);
  font-family: var(--mono); font-size: var(--t0); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative; z-index: 2;
  user-select: none;
  box-shadow: 0 2px 8px var(--kante-schatten);
  transition: box-shadow var(--kurz), transform var(--kurz) var(--kurve);
}
.menue summary:active { transform: translateY(1px); box-shadow: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary::marker { content: ''; }
.menue summary:focus-visible { outline-color: var(--weiss); outline-offset: 3px; }
.menue summary i { display: inline-block; width: var(--s4); height: var(--s4); position: relative; }
.menue summary i::before, .menue summary i::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--schwarz);
  transition: transform var(--kurz) var(--kurve), top var(--kurz) var(--kurve);
}
.menue summary i::before { top: 3px; }
.menue summary i::after  { top: 11px; }
.menue[open] summary i::before { top: 7px; transform: rotate(45deg); }
.menue[open] summary i::after  { top: 7px; transform: rotate(-45deg); }
.menue-zu { display: none; }
.menue[open] .menue-auf { display: none; }
.menue[open] .menue-zu { display: inline; }
/* Ab 860 px steht die Navigation offen im Kopf; der Menüknopf verschwindet.
   Steht nach der Grundregel, damit die Reihenfolge entscheidet. */
@media (min-width: 860px) { .menue > summary { display: none; } }

.menue-ueberzug {
  position: fixed; inset: 0; z-index: 1;
  background: var(--grund); color: var(--weiss);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--kopf-h) + var(--s6)) var(--rand) var(--s8);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s12);
  animation: ueberzug-auf var(--mittel-d) var(--kurve) both;
}
@keyframes ueberzug-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.menue-liste { list-style: none; border-top: 1px solid var(--linie); }
.menue-liste li { border-bottom: 1px solid var(--linie); animation: auf-von-unten var(--lang) var(--kurve) both; animation-delay: calc(var(--n, 0) * .05s + .05s); }
.menue-liste a {
  display: grid; grid-template-columns: var(--s12) 1fr; align-items: baseline; column-gap: var(--s4);
  padding: var(--s3) 0; text-decoration: none; color: var(--weiss);
  font-size: var(--t6); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  transition: color var(--kurz);
}
.menue-liste a b { font-family: var(--mono); font-weight: 500; font-size: var(--t0); letter-spacing: .14em; color: var(--neben); }
.menue-liste a small { grid-column: 2; font-family: var(--mono); font-size: var(--t0); letter-spacing: .12em; text-transform: uppercase; color: var(--neben); margin-top: var(--s2); }
.menue-liste a[aria-current="page"] { color: var(--metall); }
.menue-liste a[aria-current="page"] small::before { content: 'Sie sind hier — '; }
.menue-liste a:focus-visible { outline-offset: -2px; }
.menue-fuss {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s8);
  font-size: var(--t1); color: var(--neben);
  animation: auf-von-unten var(--lang) var(--kurve) both; animation-delay: .3s;
}
.menue-fuss a { color: var(--weiss); text-decoration: none; }
.menue-fuss a:hover { text-decoration: underline; }
.menue-fuss ul { list-style: none; display: grid; gap: var(--s2); }
.menue-fuss ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.menue-fuss .pille { margin-bottom: var(--s3); }
.menue-fuss .gross-link { display: block; min-height: 44px; font-size: var(--t4); font-weight: 700; letter-spacing: -.02em; padding: var(--s1) 0; font-variant-numeric: tabular-nums; }

@keyframes auf-von-unten {
  from { opacity: 0; transform: translateY(var(--s3)); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Seitenaufbau: Ebenen, die sich beim Scrollen überlagern
   .held / .ebene bleiben stehen (sticky), .tafel schiebt sich darüber.
   -------------------------------------------------------------------------- */

main { display: block; position: relative; }

.held, .ebene { position: relative; z-index: 1; background: var(--grund); overflow: clip; }
.tafel, .fuss, .rechtstext { position: relative; z-index: 2; background: var(--grund); }

@media (min-width: 1024px) and (min-height: 620px) {
  .held, .ebene { position: sticky; top: 0; }
  /* Die Kante der Ebene nimmt den Metallton auf; darunter ein weicher Fall */
  .tafel--blatt { box-shadow: 0 -1px 0 var(--metall-kante), 0 -32px 64px var(--schatten); }
}

/* Kopfbereich */
.held {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--kopf-h) + var(--s8)) var(--rand) var(--abschnitt);
  /* Licht statt Fläche: ein warmer Schimmer oben links, sonst Grund */
  background:
    radial-gradient(70% 60% at 18% 0%, var(--metall-schimmer), transparent 70%),
    radial-gradient(70% 60% at 18% 0%, var(--licht-1), transparent 70%),
    var(--grund);
}
.held-inhalt {
  position: relative;
  transform: translateY(calc(var(--p, 0) * -4vh));
  opacity: calc(1 - var(--p, 0) * .9);
}
/* Das Raster wird sichtbar: zwölf Hairlines auf den Spaltenkanten */
.held-inhalt::before {
  content: ''; position: absolute; inset: -100vh 0 calc(var(--abschnitt) * -1); z-index: -1;
  background: repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px calc((100% + var(--spalte)) / 12));
  opacity: .3; pointer-events: none;
}
.held-kopf { margin-bottom: var(--kennung-ab); }
.held-unten {
  display: grid; gap: var(--s6) var(--spalte); align-items: end;
  margin-top: var(--s8);
  padding-top: var(--s8);
  border-top: 1px solid var(--linie);
  /* Die Haarlinie fängt links das Licht und läuft nach rechts aus */
  border-image: linear-gradient(90deg, var(--metall-kante), var(--linie) 45%) 1;
}
@media (min-width: 1024px) { .held-kopf { margin-bottom: var(--s12); } }   /* Riesentitel: eine Stufe mehr Luft */
.held-unten .lauftext a { color: var(--weiss); }
.held-unten .aktionen { align-self: end; }
@media (min-width: 1024px) {
  .held-unten { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--s12); }
  .held-unten .lauftext { grid-column: 1 / 7; }
  .held-unten .aktionen { grid-column: 7 / 13; justify-content: flex-end; }
}

/* Die Ebene: eine stehende Aussage, über die sich das nächste Blatt schiebt */
.ebene {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
  padding: calc(var(--kopf-h) + var(--s8)) var(--rand) var(--abschnitt);
  background:
    radial-gradient(60% 50% at 80% 100%, var(--licht-1), transparent 70%),
    var(--flaeche);
}
.ebene--schwarz { background:
    radial-gradient(60% 50% at 80% 100%, var(--licht-1), transparent 70%),
    var(--schwarz); }
.ebene-inhalt { opacity: calc(1 - var(--p, 0) * .9); }
.ebene-inhalt .pille { margin-bottom: var(--kennung-ab); }
/* Wie im Abschnittskopf: Titel oben angeschlagen, Vorspann an der Unterkante */
.ebene-zeile { display: grid; gap: var(--s6) var(--spalte); align-items: start; }
.ebene .gross { font-size: var(--t6); }
.ebene .lead { color: var(--weiss); }
@media (min-width: 1024px) {
  .ebene-zeile { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ebene-zeile .gross { grid-column: 1 / 9; }
  .ebene-zeile .lead { grid-column: 9 / 13; align-self: end; padding-bottom: .1em; }
}

/* Tafel: ein Abschnitt. Ein Abstand oben, derselbe unten. */
.tafel { padding: var(--abschnitt) var(--rand); }
.tafel--blatt { border-top: 1px solid var(--linie); }
.tafel--flaeche { background: var(--flaeche); }
/* Auf der helleren Fläche erreicht Nebentext (#88909b) keine 4,5:1 mehr —
   dort wird jeder Text weiß. Die Hierarchie kommt aus Größe und Schrift. */
.tafel--flaeche .lead, .tafel--flaeche .kennung,
.tafel--flaeche .zeile-text, .tafel--flaeche .schritte p, .tafel--flaeche .vergleich p,
.tafel--flaeche .spalten p, .tafel--flaeche .gruende p, .tafel--flaeche .leistung-punkte li { color: var(--weiss); }
.ebene .kennung { color: var(--weiss); }
/* Die Fläche liegt auf dem Grund: oben ein Hauch Licht, unten ein Schatten */
.tafel--flaeche { box-shadow: inset 0 1px 0 var(--metall-hauch), inset 0 -1px 0 var(--kante-schatten); }

/* Abschnittskopf: Kennung, Titel, Vorspann — alle auf dem Raster.
   Die Kennung steht in fester Höhe über dem Titel (--kennung-ab), egal
   wie lang der Vorspann rechts ist: Titel oben angeschlagen, Vorspann an
   der Unterkante — so bleibt der Abstand Kennung → Titel überall gleich. */
.tafel-kopf {
  display: grid; gap: var(--kennung-ab) var(--spalte); align-items: start;
  margin-bottom: var(--block);
}
.tafel-kopf .tafel-kennung { display: flex; align-items: center; }
@media (min-width: 1024px) {
  .tafel-kopf { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tafel-kopf .tafel-kennung { grid-column: 1 / 13; }
  .tafel-kopf .gross { grid-column: 1 / 9; }
  .tafel-kopf .lead { grid-column: 9 / 13; align-self: end; padding-bottom: .1em; }
  .tafel-kopf .gross:last-child { grid-column: 1 / 11; }
}

/* Ein weiterer Block in derselben Tafel steht im Abstand --block */
.tafel .block { margin-top: var(--block); }

/* --------------------------------------------------------------------------
   Das stehende Wort — Drahtmodell im Hintergrund, der Inhalt zieht vorbei
   -------------------------------------------------------------------------- */

.wortwand { position: relative; overflow-x: clip; }
.wort {
  display: none;
  position: sticky; top: 50vh; height: 0; z-index: 0;
  pointer-events: none; user-select: none;
  text-align: center; overflow: visible;
}
.wort span {
  display: block; transform: translateY(-50%);
  font-size: min(30rem, calc(140vw / var(--zeichen, 6)));
  font-weight: 800; font-variation-settings: 'wght' 820;
  text-transform: uppercase; letter-spacing: -.04em; line-height: 1;
  white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--linie);
  opacity: .8;
}
.tafel--flaeche .wort span { -webkit-text-stroke-color: var(--neben); opacity: .5; }
.wortwand > .innen { position: relative; z-index: 1; }
@media (min-width: 1024px) { .wort { display: block; } }

/* --------------------------------------------------------------------------
   Zeilen — die großen Listen mit Verweis. Zwölf Spalten, Untergitter.
   -------------------------------------------------------------------------- */

.zeilen { list-style: none; border-top: 1px solid var(--linie); }
.zeilen > li { border-bottom: 1px solid var(--linie); }
.zeile {
  display: grid; grid-template-columns: var(--s12) minmax(0, 1fr) var(--s8);
  gap: var(--s3) var(--spalte); align-items: start;
  padding: var(--zeile) 0;
  position: relative; isolation: isolate;
  color: inherit; text-decoration: none;
  transition: color var(--kurz);
}
.zeile::before {
  content: ''; position: absolute; inset: 0 calc(var(--rand) * -1); z-index: -1;
  background: var(--weiss);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--mittel-d) var(--kurve);
}
.zeile-nr { font-family: var(--mono); font-size: var(--t0); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--metall); padding-top: .5em; font-variant-numeric: tabular-nums; }
.zeile-titel { font-size: var(--t4); }
.zeile-text { grid-column: 2 / 3; color: var(--neben); max-width: 65ch; font-size: var(--t2); }
.zeile-art { display: block; margin-bottom: var(--s2); }
.zeile-pfeil { width: var(--s8); height: var(--s8); justify-self: end; transition: transform var(--mittel-d) var(--kurve); }
.zeile-pfeil svg { width: 100%; height: 100%; }
a.zeile:focus-visible { outline-offset: -2px; }
@media (min-width: 1024px) {
  .zeilen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }
  .zeilen > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .zeile { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .zeile-nr { grid-column: 1 / 2; }
  .zeile-titel { grid-column: 2 / 7; }
  .zeile-text { grid-column: 7 / 12; grid-row: 1; padding-top: .2em; }
  .zeile-pfeil { grid-column: 12 / 13; grid-row: 1; }
}
@media (hover: hover) and (pointer: fine) {
  a.zeile:hover { color: var(--schwarz); }
  a.zeile:hover::before { transform: scaleY(1); transform-origin: 50% 0; }
  a.zeile:hover .zeile-nr, a.zeile:hover .zeile-text, a.zeile:hover .zeile-art { color: var(--linie); }
  a.zeile:hover .zeile-pfeil { transform: rotate(-45deg); }
}

/* Schritte — Zeilen ohne Verweis, mit Zähler */
.schritte { list-style: none; border-top: 1px solid var(--linie); counter-reset: schritt; }
.schritte > li {
  display: grid; grid-template-columns: var(--s12) minmax(0, 1fr);
  gap: var(--s3) var(--spalte); align-items: start;
  padding: var(--zeile) 0; border-bottom: 1px solid var(--linie);
}
.schritte > li::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t0); font-weight: 500; letter-spacing: .14em; color: var(--metall); padding-top: .5em;
  font-variant-numeric: tabular-nums;
}
.schritte h3 { font-size: var(--t4); text-transform: uppercase; letter-spacing: -.015em; line-height: 1; overflow-wrap: break-word; hyphens: manual; font-variation-settings: 'wght' 620; }
.schritte p, .schritte .vergleich { grid-column: 2; color: var(--weiss); max-width: 65ch; }
.schritte--ohne-nr > li::before { content: none; }
.schritte--ohne-nr > li { grid-template-columns: minmax(0, 1fr); }
.schritte--ohne-nr p { grid-column: 1; }
@media (min-width: 1024px) {
  .schritte { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }
  .schritte > li { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .schritte > li::before { grid-column: 1 / 2; }
  .schritte h3 { grid-column: 2 / 7; }
  .schritte p, .schritte .vergleich { grid-column: 7 / 12; grid-row: 1; padding-top: .2em; }
  .schritte--ohne-nr > li { grid-template-columns: subgrid; }
  .schritte--ohne-nr h3 { grid-column: 1 / 7; }
  .schritte--ohne-nr p { grid-column: 7 / 12; }
}

/* Heute / Danach — zwei Absätze mit Kennung, das Ergebnis steht in Weiß.
   Die Absätze liegen im eigenen Raster, nicht im Raster der Schritte. */
.vergleich { display: grid; gap: var(--s4); }
.schritte .vergleich p { display: grid; grid-template-columns: var(--s16) minmax(0, 1fr); column-gap: var(--s3); margin: 0; grid-column: auto; grid-row: auto; padding-top: 0; max-width: none; }
.vergleich .kennung { padding-top: .45em; }
.vergleich .danach { color: var(--weiss); }

/* Listen — zwei große Textlisten mit Pillen-Label */
.listen { display: grid; gap: var(--block) var(--spalte); }
@media (min-width: 768px) {
  .listen { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .listen > .liste { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .listen > .liste:nth-child(odd)  { grid-column: 1 / 6; }
  .listen > .liste:nth-child(even) { grid-column: 7 / 12; }
}
.liste .pille { margin-bottom: var(--s6); }
.liste ul, .liste ol { list-style: none; border-top: 1px solid var(--linie); }
.liste li {
  padding: var(--s3) 0; border-bottom: 1px solid var(--linie);
  font-size: var(--t3); font-weight: 500; line-height: 1.25; letter-spacing: -.01em;
}
.liste ol { counter-reset: punkt; }
.liste ol li { display: grid; grid-template-columns: var(--s12) 1fr; column-gap: var(--s4); }
.liste ol li::before { counter-increment: punkt; content: counter(punkt, decimal-leading-zero); font-family: var(--mono); font-size: var(--t0); font-weight: 500; letter-spacing: .14em; color: var(--metall); padding-top: .5em; font-variant-numeric: tabular-nums; }
.liste .ergebnis { margin-top: var(--s6); font-size: var(--t3); font-weight: 700; letter-spacing: -.02em; }
.liste .lead { margin-bottom: var(--s6); }
.liste .aktionen { margin-top: var(--s6); }
.liste li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.liste li a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* Fließtextspalten */
.spalten { display: grid; gap: var(--block) var(--spalte); align-items: start; }
.spalten .block + .block { margin-top: var(--s8); }
.spalten h3 { font-size: var(--t4); text-transform: uppercase; letter-spacing: -.02em; line-height: 1; margin-bottom: var(--s3); }
.spalten p { color: var(--neben); }
.spalten .aktionen { margin-top: var(--s6); }
@media (min-width: 1024px) {
  .spalten { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .spalten > :nth-child(odd)  { grid-column: 1 / 6; }
  .spalten > :nth-child(even) { grid-column: 7 / 12; }
}

/* --------------------------------------------------------------------------
   Kontakt — die große Nummer
   -------------------------------------------------------------------------- */

.kontakt-riese { list-style: none; display: grid; gap: var(--s6); }
.kontakt-riese a {
  display: block; text-decoration: none;
  font-size: var(--t6); font-weight: 700; letter-spacing: -.03em; line-height: 1;
  padding: var(--s3) 0; border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
  /* Hier ist `anywhere` nötig, nicht `break-word`. Der Unterschied:
     `anywhere` verkleinert auch die Mindestbreite des Kastens, `break-word`
     nicht. Ohne das lief die Telefonnummer bei 320 Pixeln über den Rand —
     gemessen, ausgebaut und am 02.09.2026 wieder zurückgestellt. */
  overflow-wrap: anywhere;
  transition: color var(--kurz);
}
.kontakt-riese .pille { margin-bottom: var(--s3); }
@media (hover: hover) and (pointer: fine) {
  .kontakt-riese a:hover { text-decoration: underline; text-decoration-thickness: .04em; text-underline-offset: .12em; text-decoration-color: var(--metall); }
}
/* Ein Weg, groß: die Nummer in Riesengröße, die E-Mail als zweite Zeile */
.kontakt-riese--eins a { font-size: var(--t7); }
.kontakt-riese--eins .kontakt-zweit { font-size: var(--t4); color: var(--neben); border-bottom: 0; padding-top: var(--s4); }
.kontakt-riese--eins .kontakt-zweit a { font-size: inherit; color: var(--weiss); display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; padding: 0; font-weight: 500; letter-spacing: -.01em; }
.kontakt-raster { display: grid; gap: var(--block) var(--spalte); align-items: end; }
.kontakt-adresse { display: grid; gap: var(--s4); font-size: var(--t2); }
.kontakt-adresse .kennung { display: block; margin-bottom: var(--s1); }
@media (min-width: 1024px) {
  .kontakt-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kontakt-raster .kontakt-riese { grid-column: 1 / 9; }
  .kontakt-raster .kontakt-adresse { grid-column: 9 / 13; }
}
.held .kontakt-riese { margin-top: var(--s8); }

/* Kontakt-Tafel: Schwarz, das Licht kommt von der Nummer */
.tafel--kontakt {
  background:
    radial-gradient(50% 40% at 20% 60%, var(--metall-schimmer), transparent 70%),
    radial-gradient(50% 40% at 20% 60%, var(--licht-1), transparent 70%),
    var(--schwarz);
  box-shadow: inset 0 1px 0 var(--metall-hauch);
}

/* --------------------------------------------------------------------------
   Leistungen — das Herz der Startseite. Je Leistung: Ziffer, Titel,
   Ergebnis-Satz, drei Punkte, ein Verweis. Überfliegbar wie eine Tabelle.
   -------------------------------------------------------------------------- */

.leistungen { list-style: none; border-top: 1px solid var(--linie); }
.leistung {
  display: grid; grid-template-columns: var(--s12) minmax(0, 1fr);
  gap: var(--s4) var(--spalte); align-items: start;
  padding: var(--zeile) 0; border-bottom: 1px solid var(--linie);
}
.leistung-nr { font-family: var(--mono); font-size: var(--t0); font-weight: 500; letter-spacing: .14em; color: var(--metall); padding-top: .5em; font-variant-numeric: tabular-nums; }
.leistung-kopf { grid-column: 2; display: grid; gap: var(--s4); align-content: start; }
.leistung-kopf .mittel { font-size: var(--t5); }
.leistung-ergebnis { font-size: var(--t3); line-height: 1.4; max-width: 34ch; color: var(--weiss); }
.leistung-kopf .weiter { margin-top: var(--s2); justify-self: start; }
.leistung-punkte { grid-column: 2; list-style: none; border-top: 1px solid var(--linie); align-self: start; }
.leistung-punkte li {
  display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); column-gap: var(--s2);
  padding: var(--s3) 0; border-bottom: 1px solid var(--linie);
  color: var(--weiss); line-height: 1.45;
}
.leistung-punkte li::before { content: ''; width: var(--s3); height: 1px; background: var(--neben); margin-top: .8em; }
@media (min-width: 1024px) {
  .leistungen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte); }
  .leistung { grid-column: 1 / -1; grid-template-columns: subgrid; }
  .leistung-nr { grid-column: 1 / 2; }
  .leistung-kopf { grid-column: 2 / 7; }
  .leistung-punkte { grid-column: 7 / 12; grid-row: 1; padding-top: .2em; border-top: 0; }
  .leistung-punkte li:first-child { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Gründe — vier Felder, zwei Spalten, Haarlinien statt Kacheln
   -------------------------------------------------------------------------- */

.gruende { list-style: none; display: grid; border-top: 1px solid var(--linie); }
.gruende > li {
  display: grid; grid-template-columns: var(--s12) minmax(0, 1fr);
  gap: var(--s3) var(--spalte); align-items: start;
  padding: var(--zeile) 0; border-bottom: 1px solid var(--linie);
}
.gruende b { font-family: var(--mono); font-size: var(--t0); font-weight: 500; letter-spacing: .14em; color: var(--metall); padding-top: .5em; font-variant-numeric: tabular-nums; }
.gruende h3 { font-size: var(--t4); text-transform: uppercase; letter-spacing: -.015em; line-height: 1; font-variation-settings: 'wght' 620; max-width: 18ch; }
.gruende p { grid-column: 2; color: var(--neben); max-width: 40ch; }
@media (min-width: 768px) {
  .gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalte); }
  .gruende > li:nth-child(odd) { padding-right: var(--spalte); }
}
@media (min-width: 1024px) {
  .gruende { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gruende > li { grid-column: span 6; }
  .gruende > li:nth-child(odd)  { grid-column: 1 / 6; padding-right: 0; }
  .gruende > li:nth-child(even) { grid-column: 7 / 12; }
}

/* --------------------------------------------------------------------------
   Fuß — mit dem Wortlogo über die ganze Breite
   -------------------------------------------------------------------------- */

.fuss { background: var(--schwarz); border-top: 1px solid var(--linie); box-shadow: inset 0 1px 0 var(--metall-hauch); padding: var(--abschnitt) var(--rand) var(--s6); color: var(--neben); font-size: var(--t1); }
.fuss a { transition: color var(--kurz); }
.fuss a:hover { color: var(--metall); text-decoration: none; }
.fuss .pille { background: var(--licht-1); }
.fuss-raster { display: grid; gap: var(--s8) var(--spalte); }
@media (min-width: 600px)  { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fuss-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); } .fuss-raster > div { grid-column: span 3; } }
.fuss .pille { margin-bottom: var(--s4); }
.fuss ul { list-style: none; display: grid; }
.fuss a { color: var(--weiss); text-decoration: none; }
.fuss ul a, .fuss address a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.fuss-satz { color: var(--weiss); max-width: 30ch; font-size: var(--t2); }
.fuss-logo { margin-top: var(--block); padding-top: var(--s6); border-top: 1px solid var(--linie); }
.fuss-logo img { width: 100%; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4) var(--s8); margin-top: var(--s6); }
.fuss-unten ul { display: flex; gap: var(--s6); }
.fuss-unten a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */

.rechtstext { padding: calc(var(--kopf-h) + var(--s12)) var(--rand) var(--abschnitt); }
.rechtstext .innen > * { max-width: 70ch; }
.rechtstext .pille { margin-bottom: var(--s6); }
.rechtstext h1 { font-size: var(--t5); text-transform: uppercase; letter-spacing: -.03em; line-height: .95; margin-bottom: var(--s8); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.rechtstext h2 { font-size: var(--t3); text-transform: uppercase; letter-spacing: -.02em; margin: var(--s8) 0 var(--s3); overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.rechtstext p, .rechtstext li { color: var(--weiss); }
.rechtstext p + p { margin-top: var(--s4); }
.rechtstext ul { padding-left: var(--s6); margin: var(--s4) 0; }
.rechtstext li { margin-bottom: var(--s2); }
.rechtstext address { margin-bottom: var(--s6); }
.rechtstext a { text-decoration: underline; text-underline-offset: .15em; }
.rechtstext .quelle { margin-top: var(--s8); font-size: var(--t1); color: var(--neben); }

/* --------------------------------------------------------------------------
   Einzug beim Sichtbarwerden — nur mit JS versteckt, per Beobachter gezeigt
   -------------------------------------------------------------------------- */

html.js .auf { opacity: 0; transform: translateY(var(--s3)); }
html.js .auf.sichtbar {
  opacity: 1; transform: none;
  transition: opacity var(--lang) var(--kurve), transform var(--lang) var(--kurve);
}

/* Zähler am Rand (wird per JS erzeugt) — bewusst außerhalb des Rasters */
.rand {
  position: fixed; left: calc(var(--rand) / 2 - var(--s1)); bottom: var(--s8); z-index: 40;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: var(--t0); letter-spacing: .2em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--neben); pointer-events: none;
  display: flex; gap: var(--s3); align-items: center;
}
.rand > span:first-child { color: var(--weiss); }
.rand i { display: block; width: 1px; height: var(--s12); background: var(--linie); }
@media (max-width: 1279px) { .rand { display: none; } }

/* --------------------------------------------------------------------------
   Ruhe: keine Bewegung, wenn das System es so will
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .lade { display: none; }
  .riese .z > span, html:not(.js) .riese .z > span, html.bereit .riese .z > span { animation: none; transform: none; }
  .held-inhalt, .ebene-inhalt { transform: none; opacity: 1; }
  html.js .auf { opacity: 1; transform: none; transition: none; }
  .menue-ueberzug, .menue-liste li, .menue-fuss { animation: none; }
  .zeile, .zeile::before, .zeile-pfeil, .kontakt-riese a, .knopf, .weiter, .weiter svg, .menue summary, .menue summary i::before,
  .menue summary i::after, .menue-liste a, .kopf, .kopf-nav a, .kopf-nav a::after, .fuss a { transition: none; }
  .weiter:hover svg, .knopf:hover, .knopf:active, .menue summary:active { transform: none; }
  .lade-inhalt::after { animation: none; transform: none; }
  .rand, .lauf { display: none; }
}

/* --------------------------------------------------------------------------
   Druck
   -------------------------------------------------------------------------- */

@media print {
  html, body, .tafel, .held, .ebene, .fuss { background: var(--weiss) !important; color: var(--schwarz) !important; }
  .kopf, .menue, .lade, .rand, .wort, .sprung, .lauf { display: none !important; }
  .held, .ebene { position: static; min-height: 0; }
  .fuss-logo { display: none; }
}

/* ==================================================================
   EFFEKTE, DIE DEN TEXT HERVORHEBEN

   Der Auftrag lautet: mehr Bewegung, aber sie soll den Text „nicht
   stören, sondern mehr hervorheben". Das schließt alles aus, was neben
   dem Text passiert — schwebende Formen, wandernde Farben, Dinge die
   den Blick vom Lesen wegziehen.

   Was bleibt, ist Bewegung, die AM Text arbeitet: Was gerade im
   Lesebereich steht, wird heller. Was man überfährt, bekommt eine
   Linie. Wo der Zeiger steht, fällt etwas Licht hin. Der Text wird
   damit nicht dekoriert, sondern beleuchtet.
   ================================================================== */

/* ---- 1. Lesehervorhebung ----------------------------------------
   Fließtext steht zunächst im gedeckten Grau. Sobald ein Absatz in den
   Lesebereich kommt, geht er auf Weiß. Das ist der eigentliche Effekt:
   Er lenkt nicht ab, er zeigt genau dorthin, wo man gerade liest.
   Ohne JavaScript steht alles sofort auf der hellen Fassung — der
   Ausgangszustand hängt an html.js. */
html.js .lauftext,
html.js .lead,
html.js .leistung-ergebnis,
html.js .leistung-punkte li,
html.js .schritte p {
  color: var(--neben);
  transition: color var(--lang) var(--kurve);
}
html.js .lauftext.gelesen,
html.js .lead.gelesen,
html.js .leistung-ergebnis.gelesen,
html.js .leistung-punkte li.gelesen,
html.js .schritte p.gelesen {
  color: var(--weiss);
}

/* ---- 2. Akzentlinie unter Überschriften --------------------------
   Zieht beim Sichtbarwerden von links nach rechts auf. Sie unterstreicht
   im Wortsinn und ist die einzige Stelle, an der Bewegung Farbe trägt.
   Kurz gehalten (höchstens 12 rem), damit sie ein Strich bleibt und nicht
   mit der Haarlinie der Liste darunter konkurriert. */
html.js .gross { position: relative; }
html.js .gross::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.34em;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--metall), transparent);
  transition: width var(--lang) var(--kurve) .1s;
}
html.js .gross.gelesen::after { width: min(100%, 12rem); }

/* ---- 3. Zeigerlicht ----------------------------------------------
   Ein sehr schwacher Schein folgt dem Zeiger über den Textblöcken.
   Vier Prozent Deckkraft — man bemerkt ihn nicht bewusst, aber die
   Textfläche wirkt beleuchtet statt bedruckt. Nur bei einem echten
   Zeiger; auf dem Telefon gibt es ihn nicht, und es fehlt nichts. */
@media (hover: hover) and (pointer: fine) {
  html.js .tafel { position: relative; isolation: isolate; }
  html.js .tafel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--mittel-d) var(--kurve);
    background: radial-gradient(
      22rem 22rem at var(--zx, 50%) var(--zy, 50%),
      rgb(255 255 255 / .045),
      transparent 70%);
  }
  html.js .tafel.beleuchtet::before { opacity: 1; }
}

/* ---- 4. Abschnittsmarke ------------------------------------------
   Die Kennung des Abschnitts, in dem man gerade steht, nimmt den
   Metallton an. Damit weiß man beim Scrollen jederzeit, wo man ist —
   Orientierung, nicht Zierrat. */
html.js .pille { transition: color var(--mittel-d) var(--kurve), border-color var(--mittel-d) var(--kurve); }
html.js .tafel.hier .tafel-kennung .pille {
  color: var(--metall);
  border-color: rgb(212 180 131 / .45);
}
html.js .tafel.hier .tafel-kennung .pille b { color: var(--metall); }

/* ---- Bewegung aus -------------------------------------------------
   Bei „Bewegung reduzieren" bleibt alles stehen und alles ist hell.
   Kein Zustand, in dem Text dauerhaft gedeckt bliebe. */
@media (prefers-reduced-motion: reduce) {
  html.js .lauftext, html.js .lead, html.js .leistung-ergebnis,
  html.js .leistung-punkte li, html.js .schritte p {
    color: var(--weiss);
    transition: none;
  }
  html.js .gross::after { transition: none; width: min(100%, 12rem); }
  html.js .tafel::before { display: none; }
  html.js .pille { transition: none; }
}

/* Die Pille im Kopfbereich nennt alle drei Leistungen und ist damit länger
   geworden. Bis 414 Pixel passte sie nicht mehr in ihren Kasten und wurde
   mitten im Wort abgeschnitten („SOCIAL M…") — gemessen: 397 px Inhalt in
   einem 341 px breiten Kasten. Auf schmalen Bildschirmen darf sie deshalb
   umbrechen; die Trennpunkte bleiben an ihrer Zeile hängen, statt eine neue
   zu beginnen. */
@media (max-width: 479px) {
  .held-kopf .pille {
    white-space: normal;
    line-height: 1.5;
    text-wrap: balance;
  }
}

/* Kein einzelnes Wort auf der letzten Zeile.
   `balance` verteilt die Zeilen einer Überschrift gleichmäßig, statt die
   letzte als Rest übrigzulassen. `pretty` tut dasselbe für Fließtext, ohne
   die Zeilenlänge zu ändern. Kennt ein Browser die Werte nicht, bleibt der
   Satz wie bisher — also nie schlechter. */
h1, h2, h3, .riese, .gross, .mittel, .zeile-titel { text-wrap: balance; }
.leistung-ergebnis, .lead, .lauftext, .zeile-text, .leistung-punkte li,
.schritte p, .gruende p { text-wrap: pretty; }