@font-face {
  font-family: Geist;
  src: url("schrift/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Geist;
  src: url("schrift/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grund: #fcfcfc;
  --grund-still: #eff2f6;
  --nacht: #06101f;
  --nacht-linie: #27374d;
  --marke: #15539b;
  --text: #06101f;
  --text-hell: #fcfcfc;
  --text-gedeckt: #5b6472;
  /* Auf Weiß kam der alte Ton nur auf 3:1 — zu wenig für die kleinen Versalzeilen
     und die Formularbeschriftungen. Im Dunkeln wird er weiter oben aufgehellt. */
  --text-still: #6b7380;
  --linie: #e5e7ea;

  --wucht: clamp(2rem, 7.4vw, 6rem);
  --gross: clamp(1.75rem, 4.4vw, 4rem);
  --mittel: clamp(1.4rem, 2.4vw, 2.25rem);
  --tafeltitel: 1.5rem;
  --fliess: 1.125rem;
  --klein: .875rem;
  --winzig: .75rem;

  --eng: -.045em;
  --weit: .06em;

  --rund: 12px;
  --rund-platte: 24px;
  --rund-voll: 999px;

  --seite: clamp(1.25rem, 3.4vw, 3rem);
  --breite: 88rem;
  --hoch: clamp(4.5rem, 9vw, 8rem);
  --hoch-weit: clamp(6rem, 13vw, 12rem);
  --kopfhoehe: 80px;

  --schwung: cubic-bezier(.25, 1, .5, 1);
  --anflug: cubic-bezier(.16, 1, .3, 1);

  /* Glas: oben ein schräger Lichtstreifen, darunter eine leicht getönte Scheibe. */
  --glas:
    linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(204, 219, 238, .3));
  --glas-kante: rgba(255, 255, 255, .85);
  --glas-licht: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .45);
  --glas-schliff: blur(20px) saturate(150%);
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fliess);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { user-select: none; }
/* Auf Berührungsgeräten legt der Browser beim Tippen ein graues Feld über das
   Ziel und lässt Hover-Zustände danach stehen. Beides gehört hier nicht hin. */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible) { outline: none; }
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--marke); color: #fff; }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; }

/* Je größer, desto enger — dagegen: klein, weit, Versal. */
.wucht, .gross, .mittel { font-weight: 500; }
.wucht { font-size: var(--wucht); letter-spacing: var(--eng); line-height: .92; }
.gross { font-size: var(--gross); letter-spacing: -.038em; line-height: 1; }
.mittel { font-size: var(--mittel); letter-spacing: -.03em; line-height: 1.1; }
/* Zusammensetzungen wie „Unternehmenstransaktionen" sprengen sonst die schmale
   Spalte und die Seite lässt sich seitlich schieben. */
/* Trennen erst ab langen Wörtern: sonst zerlegt der Browser auch „Boutique". */
.tafeltitel { font-size: var(--tafeltitel); font-weight: 500; letter-spacing: -.028em; line-height: 1.2; hyphens: auto; hyphenate-limit-chars: 12 6 4; overflow-wrap: break-word; }
.wucht > span, .gross > span { display: block; }
.wucht b, .gross b { font-weight: inherit; }

.schlusssatz { display: grid; gap: 1.5rem; justify-items: center; max-width: 44rem; margin-inline: auto; text-align: center; }
.schlusssatz__tun { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .75rem; }

.auge {
  display: block;
  font-size: var(--winzig);
  font-weight: 400;
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--text-still);
}
.vorlauf { font-size: 1.5rem; line-height: 1.3; color: var(--text-gedeckt); max-width: 46ch; }
.fliess { color: var(--text-gedeckt); max-width: 62ch; }
.klein { font-size: var(--klein); color: var(--text-gedeckt); }
.marke-farbe { color: var(--marke); }

.spur { width: min(100% - var(--seite) * 2, var(--breite)); margin-inline: auto; }
.schmal { max-width: 50rem; }
.feld { padding-block: var(--hoch); }
.feld--weit { padding-block: var(--hoch-weit); }
.feld--knapp { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Kein zweiter Grundton mehr: die Abschnitte laufen auf Weiß durch, getrennt
   wird über Linien und Abstand. */
.still { background: var(--grund); }

/* Kopfleiste: nur Zeichen und Klapper, alles Weitere steckt im Menü. */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--kopfhoehe);
  /* Auf breiten Schirmen rückt die Leiste auf den Satzspiegel ein, sonst steht
     die Navigation weit außen und der Inhalt einsam in der Mitte. */
  padding-inline: max(var(--seite), (100% - var(--breite)) / 2);
  transform: translate3d(0, -100%, 0);
  transition: transform 1.1s var(--schwung), background-color .4s var(--schwung), box-shadow .4s var(--schwung);
}
.kopfleiste.da { transform: translateZ(0); }
/* Milchglas: der Grund scheint gedämpft durch. Ohne backdrop-filter bleibt die
   Fläche schlicht deckender, lesbar ist die Leiste in beiden Fällen. */
.kopfleiste {
  background: rgba(252, 252, 252, .82);
  border-bottom: 1px solid rgba(6, 16, 31, .07);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kopfleiste {
    background: rgba(252, 252, 252, .62);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
  .kopfleiste.aufdunkel { background: rgba(6, 16, 31, .5); }
}
.kopfleiste.aufdunkel {
  background: rgba(6, 16, 31, .72);
  border-bottom-color: rgba(255, 255, 255, .1);
}
/* Über dem Bild-Aufmacher trägt das Foto selbst: dort bleibt die Leiste klar,
   Wortmarke und Wege stehen ohnehin schon in Weiß. */
.bildhero:not(.gescrollt) .kopfleiste {
  background: none;
  border-bottom-color: transparent;
  /* Nicht none: das Ein- und Ausschalten des Weichzeichners baut die
     Compositor-Ebene neu auf und kostet genau am Übergang ein Bild. Mit
     Radius 0 bleibt die Ebene stehen, es ändert sich nur die Stärke. */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}
/* Die Leiste bleibt immer durchsichtig; .gesetzt merkt sich nur, dass der Grund
   inzwischen hell ist, und dreht Zeichen und Klapper zurück auf Dunkel. */
/* Der Farbwechsel am Fuß des Bild-Decks läuft weich, nicht als harter Schnitt. */
/* height:auto, sonst rechnet der Browser mit 104×42 aus dem Attribut, das SVG
   wird darin zentriert und links bleibt ein halber Pixel Fläche stehen. */
.kopfleiste__zeichen img { display: block; position: relative; width: 104px; height: auto; transition: filter .45s var(--schwung); }
/* Die Buchstaben im AD-Kasten sind ausgespart. Ohne eigene Fläche darunter
   schaut das dunkle Band hindurch, sobald die Leiste darüber steht. */
.kopfleiste__zeichen::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 43.35%;
  background: #fff;
}

/* Der Klapper hängt am Fenster, nicht in der Leiste. Im Bild-Hero ist er aus —
   dort steht nur die Wortmarke — und erscheint, sobald der Inhalt beginnt. */
.klapper {
  position: fixed;
  top: calc((var(--kopfhoehe) - 48px) / 2);
  right: calc(var(--seite) - 12px);
  z-index: 51;
  display: grid;
  place-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  cursor: pointer;
  /* Der Klapper steht mal über Weiß, mal über einem Nachtband. Difference
     rechnet seine Farbe gegen das, was gerade darunter liegt. */
  mix-blend-mode: difference;
  transition: opacity .4s var(--schwung), visibility 0s;
}
/* Weiß, weil erst Difference daraus die Farbe macht: über Weiß wird der Balken
   dunkel, über dem Nachtband hell. */
.klapper span {
  display: block;
  width: 28px;
  height: 2px;
  background: #fff;
  transition: transform .4s var(--schwung);
}
/* Über dem Foto trägt Difference nicht: gegen einen hellen Himmel bleibt vom
   Balken kaum etwas übrig. Dort steht er glatt in Weiß, mit einem Schatten
   darunter, damit er auch über hellen Stellen des Bildes steht. */
.bildhero:not(.gescrollt) .klapper { mix-blend-mode: normal; }
.bildhero:not(.gescrollt) .klapper span {
  height: 2.5px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(6, 16, 31, .55);
}
.klapper[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.klapper[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Über dem dunklen Bild-Hero dreht sich der Kontrast um: dort steht die
   Wortmarke ganz in Weiß, die Fläche unter dem AD-Kasten stört nur. */
.bildhero:not(.gescrollt) .kopfleiste__zeichen img,
.kopfleiste.aufdunkel .kopfleiste__zeichen img { filter: brightness(0) invert(1); }
.bildhero:not(.gescrollt) .kopfleiste__zeichen::before,
.kopfleiste.aufdunkel .kopfleiste__zeichen::before { display: none; }
/* Im offenen Menü bleibt oben nur das Kreuz. */
.kopfleiste__zeichen {
  position: relative;
  transition: opacity .3s var(--schwung);
}

/* Die Wege stehen rechts neben der Wortmarke. Difference macht ihre Farbe gegen
   den Grund, genau wie beim Klapper — sonst bräuchte jede Sektion eine Regel. */
.kopfnav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.1vw, 2.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kopfnav a {
  position: relative;
  display: block;
  padding-block: .35rem;
  color: var(--marke);
  font-size: .82rem;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.kopfnav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--schwung);
}
.kopfnav a:hover::after,
.kopfnav a:focus-visible::after,
.kopfnav a[aria-current="page"]::after { transform: scaleX(1); }
/* Über dem dunklen Bild-Aufmacher kehrt sich der Kontrast um. */
.bildhero:not(.gescrollt) .kopfnav a,
.kopfleiste.aufdunkel .kopfnav a { color: #fff; }
.menue-offen .kopfnav { opacity: 0; pointer-events: none; }
.kopfnav { transition: opacity .3s var(--schwung); }
/* Unterhalb der Breite reicht der Platz für sieben Wege nicht mehr — dort
   übernimmt wieder die Schublade. */
@media (max-width: 1180px) {
  .kopfnav { display: none; }
}
@media (min-width: 1181px) {
  .klapper { display: none; }
  .menue-offen .klapper { display: grid; }
}
.menue-offen .kopfleiste__zeichen { opacity: 0; pointer-events: none; }
/* Solange die große Wortmarke im Hero steht, bleibt die kleine oben aus. */
/* Bei offenem Menü ist das Kreuz immer da, auch wenn man oben im Hero steht. */
.menue-offen .klapper { opacity: 1; visibility: visible; }

.schublade {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: grid;
  align-content: center;
  padding: var(--kopfhoehe) 0 2rem;
  background: var(--nacht);
  color: var(--text-hell);
  opacity: 0;
  visibility: hidden;
  /* Zu: nichts bewegt sich, die Fläche blendet einfach aus. */
  transition: opacity .45s var(--schwung), visibility 0s .45s;
}
.schublade.offen {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--schwung), visibility 0s;
}
/* Die Einträge bleiben stehen und springen erst zurück, wenn nichts mehr zu sehen ist. */
.schublade:not(.offen) .schublade__wege a {
  transition-duration: 0s, .12s, .22s;
  transition-delay: .45s, 0s, 0s;
}
.schublade:not(.offen) .schublade__fuss { transition-duration: 0s; transition-delay: .45s; }
.schublade__wege li { overflow: hidden; }
.schublade__wege a {
  display: inline-block;
  padding: .12em 0;
  font-size: clamp(1.5rem, 4.2vw, 3.25rem);
  font-weight: 500;
  letter-spacing: var(--eng);
  line-height: 1.16;
  transform: translateX(-104%);
  /* Getrennt notiert, damit die Staffelung nur den Einlauf verzögert und nicht die Farbe. */
  transition-property: transform, color, padding-left;
  transition-duration: .6s, .12s, .22s;
  transition-timing-function: var(--schwung), linear, var(--schwung);
  transition-delay: 0s, 0s, 0s;
}
.schublade.offen .schublade__wege a { transform: translateX(0); }
.schublade.offen .schublade__wege li:nth-child(1) a { transition-delay: .06s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(2) a { transition-delay: .15s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(3) a { transition-delay: .24s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(4) a { transition-delay: .33s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(5) a { transition-delay: .42s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(6) a { transition-delay: .51s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(7) a { transition-delay: .6s, 0s, 0s; }
.schublade.offen .schublade__wege li:nth-child(8) a { transition-delay: .69s, 0s, 0s; }
@media (pointer: fine) {
  /* :has, damit nur bei einem echten Treffer abgedunkelt wird — nicht schon in den Zeilenlücken.
     Die zweite Regel braucht dieselbe :has-Basis, sonst gewinnt das Abdunkeln auch am Zeiger. */
  .schublade__wege:has(a:hover) a { color: rgba(252, 252, 252, .3); }
  .schublade__wege:has(a:hover) a:hover { color: var(--text-hell); padding-left: .5rem; }
}

.schublade__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--nacht-linie);
  opacity: 0;
  transition: opacity .4s var(--schwung);
}
.schublade.offen .schublade__fuss { opacity: 1; transition-delay: .75s; }
.schublade__fuss div { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.schublade__fuss a {
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: rgba(252, 252, 252, .6);
  transition: color .3s var(--schwung);
}
.schublade__fuss a:hover { color: var(--text-hell); }

/* Tasten: vollrunde Pillen, Hover ist eine blaue Fläche unter dem Label. */
/* Alle Pillen sind Glas: getönte Fläche statt Vollton, feine Kante, Lichtkante
   innen oben. Die Tönung entscheidet, ob sie auf hellem oder dunklem Grund sitzt. */
.taste {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--rund-voll);
  background: linear-gradient(155deg, rgba(32, 95, 174, .97), rgba(15, 60, 118, .96));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
  color: var(--text-hell);
  font: inherit;
  font-size: var(--klein);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.taste > span { position: relative; z-index: 1; white-space: nowrap; transition: color .3s var(--schwung); }
.taste--glas {
  border-color: rgba(6, 16, 31, .12);
  background: linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(226, 232, 240, .4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  color: var(--text);
}
/* Auf dunklem Grund muss die Glaspille umgekehrt aufgebaut sein, sonst steht sie unsichtbar da. */
.nachtfeld .taste--glas, .sockel .taste--glas {
  border-color: rgba(252, 252, 252, .22);
  background: linear-gradient(155deg, rgba(252, 252, 252, .18), rgba(252, 252, 252, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  color: var(--text-hell);
}
.taste--hell {
  border-color: rgba(255, 255, 255, .75);
  background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(226, 232, 240, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--nacht);
}
.taste--knapp { height: 40px; padding: 0 1.1rem; }
.taste--stumm {
  border-color: rgba(6, 16, 31, .16);
  background: none;
  box-shadow: none;
  color: var(--text);
}
@media (pointer: fine) {
  /* Die Füllung greift 1px über den Rand hinaus, sonst bleibt die helle Kante
     als Ring um die blaue Fläche stehen. */
  .taste::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(155deg, rgba(18, 68, 132, .98), rgba(8, 38, 78, .97));
    opacity: 0;
    transition: opacity .3s var(--schwung);
  }
  .taste:hover::before { opacity: 1; }
  .taste:hover > span { color: #fff; }
  .taste { transition: border-color .3s var(--schwung); }
  .taste:hover { border-color: transparent; }
}

.pfeil-weg {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--marke);
  transition: gap .75s var(--schwung);
}
.pfeil-weg::after { content: "→"; letter-spacing: 0; }
.pfeil-weg:hover { gap: .95rem; }

/* Deck ─────────────────────────────────────────────────────────────────────
   Der Hero kennt drei Bewegungen, die ineinandergreifen:
   1. Auftakt  – das Bild kommt aus einem leichten Zoom zur Ruhe, die Wortmarke
                 schiebt sich aus ihrer eigenen Unterkante hoch (.wach).
   2. Sog      – beim Scrollen läuft das Foto langsamer als die Seite, die
                 Wortmarke schneller. Das Bild wirkt schwer, der Satz leicht.
   3. Übergabe – auf halber Höhe geht die große Wortmarke, die kleine oben
                 kommt (siehe .uebergabe weiter unten bei der Kopfleiste).
   seite.js setzt dafür genau eine Zahl: --tief, 0 am Anfang, 1 am Fuß des
   Decks. Alles Weitere rechnet das Blatt hier selbst. */
.deck {
  position: relative;
  display: grid;
  /* Der Satz sitzt bewusst im unteren Drittel, nicht mittig. */
  align-items: end;
  min-height: 100svh;
  padding: calc(var(--kopfhoehe) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(5rem, 17vh, 13rem);
  background: var(--grund);
  text-align: center;
  overflow: hidden;
}
.deck__satz { display: grid; justify-items: center; gap: 1.75rem; }
.deck .spur { position: relative; z-index: 2; }
.deck .wucht { max-width: none; font-size: clamp(1.9rem, 5.5vw, 4.4rem); }
/* Im Bild-Deck trägt die Wortmarke selbst, kein Satz daneben. */
.deck__marke { overflow: hidden; }
/* Die Wortmarke sitzt jetzt in der Leiste. Die Überschrift bleibt trotzdem im
   Dokument, damit Suche und Vorleseprogramme den Titel bekommen. */
.deck__marke--still {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.deck__marke img { width: auto; height: clamp(4.5rem, 13vw, 11rem); }
.deck .vorlauf { max-width: 54ch; color: #414b5a; }
.deck__tun { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Bild-Deck: das Foto trägt den Hero. */
/* Solange das Foto noch nicht steht, sieht man die Wortmarke auf Weiß — nicht
   eine dunkle Fläche. Das Foto legt sich darüber, sobald es da ist. */
.deck--bild {
  background: var(--grund) url("bilder/adwin-wortmarke.svg") no-repeat center;
  background-size: clamp(7rem, 14vw, 12rem) auto;
  color: var(--text-hell);
}
.deck__grund {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Der Berg bleibt stehen: die Ebene läuft zu 90 % gegen die Seite an, das
     Deck schneidet sie unten ab. Der Inhalt schiebt sich als Blatt darüber,
     während das Bild weiter zoomt. --deckhoch setzt seite.js in Pixeln. */
  transform: translate3d(0, calc(var(--tief, 0) * var(--deckhoch, 100svh) * .9), 0);
  will-change: transform;
}
/* Der Zoom steckt fest im Bild, nicht in der Bewegung: eine wechselnde Skalierung
   erzwingt in jedem Bild ein neues Rastern der Fläche und ruckelt. */
.deck__grund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform: scale(1.06);
  backface-visibility: hidden;
}

/* Wo der Browser es kann, hängt die Fahrt direkt an der Scroll-Position: sie
   läuft im Compositor, ein Skript käme ihr immer einen Frame hinterher — genau
   das war das Wackeln. Ohne diese Fähigkeit übernimmt weiter seite.js. */
@supports (animation-timeline: view()) {
  .deck {
    view-timeline-name: --deckfahrt;
    view-timeline-axis: block;
  }
  .deck__grund {
    animation: deck-sog linear both;
    animation-timeline: --deckfahrt;
    animation-range: exit 0% exit 100%;
  }
  @keyframes deck-sog {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 90%, 0); }
  }
  .deck__schleier::after {
    animation: deck-schatten linear both;
    animation-timeline: --deckfahrt;
    animation-range: exit 0% exit 100%;
  }
  @keyframes deck-schatten {
    from { opacity: 0; }
    to { opacity: .45; }
  }
  .deck__band {
    animation: band-fort linear both;
    animation-timeline: --deckfahrt;
    animation-range: exit 0% exit 38%;
  }
  @keyframes band-fort {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  .deck__band-linie {
    animation: linie-zu linear both;
    animation-timeline: --deckfahrt;
    animation-range: exit 0% exit 53%;
  }
  @keyframes linie-zu {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
  }
}

/* Der Schleier hängt am Deck, nicht am Bild — er soll beim Sog stehen bleiben,
   sonst rutscht die dunkle Kante unter der Wortmarke weg. Oben eine Vignette
   für die Kopfleiste, unten Tiefe für die Wortmarke, das Markenblau nur noch
   als Schimmer von unten statt als Wäsche über dem ganzen Himmel. */
.deck__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(6, 16, 31, .46) 0%,
      rgba(6, 16, 31, .12) 30%,
      rgba(6, 16, 31, 0) 48%,
      rgba(6, 16, 31, .52) 88%,
      rgba(6, 16, 31, .7) 100%),
    radial-gradient(125% 80% at 50% 110%, rgba(21, 83, 155, .45) 0%, rgba(21, 83, 155, 0) 62%);
}
/* Je weiter der Inhalt hochkommt, desto tiefer sinkt das Bild in den Schatten. */
.deck__schleier::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nacht);
  opacity: calc(var(--tief, 0) * .45);
  will-change: opacity;
}

/* Der Satz läuft dem Bild davon, wird dabei kleiner und ist vor dem Fuß des
   Decks schon weg — er tritt zurück, statt einfach auszublenden. */
.deck .deck__satz {
  transform: translate3d(0, calc(var(--tief, 0) * -9vh), 0) scale(calc(1 - var(--tief, 0) * .06));
  opacity: max(0, calc(1 - var(--tief, 0) * 1.55));
}

/* Das Band an der Unterkante: eine Haarlinie, darunter die drei Felder und der
   Ort. Kein Scroll-Hinweis — die Kante trägt lieber, was die Firma tut. */
.deck__band {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3.4vh, 2.6rem);
  z-index: 2;
  width: min(100% - var(--seite) * 2, var(--breite));
  transform: translateX(-50%);
  pointer-events: none;
  /* Beim Scrollen geht das Band als Erstes — es hat seine Arbeit getan. */
  opacity: max(0, calc(1 - var(--tief, 0) * 2.6));
}
/* Die Linie zieht sich beim Scrollen zur Mitte zusammen, während sie sich beim
   Auftakt von links aufgezogen hat. Zwei Ursprünge, zwei Ebenen. */
.deck__band-linie {
  display: block;
  height: 1px;
  background: var(--linie);
  transform: scaleX(max(0, calc(1 - var(--tief, 0) * 1.9)));
}
.deck__band-linie > span { display: block; height: 100%; background: rgba(6, 16, 31, .3); transform-origin: 0 50%; }
.deck__band-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem clamp(1.75rem, 4vw, 3.5rem);
  padding-top: 1.1rem;
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--text-gedeckt);
}
.deck__band-ort { margin-left: auto; color: var(--text-still); }
.deck__band-reihe > span > span { display: block; }

/* Der Auftakt: die Kamera kommt zur Ruhe. Erst zieht das Bild in die Schärfe,
   dann steigt die Wortmarke, dann zieht sich das Band auf.
   Ohne JS steht alles einfach da, wo es hingehört. */
.js .deck .deck__marke img { transform: translate3d(0, 108%, 0); }
.js .deck .deck__band-linie > span { transform: scaleX(0); }
.js .deck .deck__band-reihe > span > span { opacity: 0; transform: translate3d(0, 14px, 0); }
.js .deck.wach .deck__marke img { transform: translate3d(0, 0, 0); transition: transform .7s .1s var(--anflug); }
.js .deck.wach .deck__band-linie > span { transform: scaleX(1); transition: transform .8s .3s var(--anflug); }
.js .deck.wach .deck__band-reihe > span > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .5s var(--anflug), transform .55s var(--anflug);
}
.js .deck.wach .deck__band-reihe > span:nth-child(1) > span { transition-delay: .46s; }
.js .deck.wach .deck__band-reihe > span:nth-child(2) > span { transition-delay: .52s; }
.js .deck.wach .deck__band-reihe > span:nth-child(3) > span { transition-delay: .58s; }
.js .deck.wach .deck__band-reihe > span:nth-child(4) > span { transition-delay: .66s; }

/* Die Übergabe: die kleine Wortmarke kommt, während die große geht — noch in
   Weiß auf dem Foto. Erst am Fuß des Decks dreht .gescrollt beide auf Dunkel. */
/* Bei offenem Menü bleibt die Wortmarke in jedem Fall aus — auch mitten in der
   Übergabe, deren Regel sonst gewinnt. */

@media (prefers-reduced-motion: reduce) {
  .deck__grund, .deck .deck__satz { transform: none; }
  .deck__grund, .deck__schleier::after, .deck__band, .deck__band-linie { animation: none; }
  .deck .deck__satz, .deck__band { opacity: 1; }
  .deck__schleier::after { opacity: 0; }
  .deck__band-linie { transform: none; }
  .js .deck .deck__marke img { transform: none; }
  .js .deck .deck__band-linie > span { transform: none; }
  .js .deck .deck__band-reihe > span > span { opacity: 1; transform: none; }
}
/* Trägt ein Foto den Hero, kippt das Band auf helle Töne. */
.deck--bild .deck__band-linie { background: rgba(252, 252, 252, .26); }
.deck--bild .deck__band-linie > span { background: rgba(252, 252, 252, .55); }
.deck--bild .deck__band-reihe { color: rgba(252, 252, 252, .68); }
.deck--bild .deck__band-ort { color: rgba(252, 252, 252, .45); }
.deck--bild .auge { color: rgba(252, 252, 252, .72); }
.deck--bild .vorlauf { color: rgba(252, 252, 252, .82); }
.deck--bild .marke-farbe { color: #79b4ff; }
.deck--bild .taste--glas { background: rgba(252, 252, 252, .16); color: var(--text-hell); }

/* Stirn: Kopfbereich der Unterseiten */
/* Seitenkopf: Rubrik über der Zeile, Titel links, Einleitung rechts daneben.
   Die Linie unten schließt den Kopf ab, statt ihn ins Weiße auslaufen zu lassen. */
.stirn { padding: calc(var(--kopfhoehe) + clamp(2.25rem, 4.5vw, 4rem)) 0 clamp(2rem, 4vw, 3.25rem); }
.stirn .spur { display: grid; gap: clamp(.8rem, 1.6vw, 1.2rem); }
/* Ohne sichtbare Überschrift trägt der Einleitungssatz den Seitenkopf allein —
   also mittig und etwas kräftiger, damit er den Anfang setzt. */
.stirn .vorlauf {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}
.stirn .merkzeile { justify-content: center; }
/* Wer den Menüpunkt angeklickt hat, weiß, wo er ist — die Seitenüberschrift
   bleibt deshalb unsichtbar, steht für Suche und Vorleseprogramme aber weiter
   im Dokument. */
.stirn .wucht {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Bleibt darunter nichts stehen, trägt der Kopf allein den Abstand nach oben —
   sonst legt der folgende Abschnitt seinen eigenen obendrauf und die Seite
   beginnt tiefer als die übrigen. */
.stirn:not(:has(.vorlauf, .merkzeile)) { padding-bottom: 0; }
.stirn:not(:has(.vorlauf, .merkzeile)) + .feld { padding-top: 0; }

.merkzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.merkzeile li {
  padding: .5rem 1.05rem;
  border: 1px solid rgba(6, 16, 31, .12);
  border-radius: var(--rund-voll);
  background: linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(226, 232, 240, .4));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--text-gedeckt);
}

/* Bildplatten: der Rahmen macht die Form, darunter blitzt die Markenfarbe. */
.platte { border-radius: var(--rund-platte); overflow: hidden; background: var(--marke); }
.platte img { width: 100%; height: 100%; object-fit: cover; }
.platte { position: relative; }
/* Kennzeichnung auf erzeugten Bildern: sitzt in der Ecke und bleibt auf hellen
   wie dunklen Bildstellen lesbar. */
.hinweis {
  position: absolute;
  left: clamp(.75rem, 1.4vw, 1.25rem);
  bottom: clamp(.75rem, 1.4vw, 1.25rem);
  padding: .3rem .7rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--rund-voll);
  background: linear-gradient(155deg, rgba(30, 92, 170, .82), rgba(14, 58, 114, .78));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--text-hell);
  font-size: .6875rem;
  letter-spacing: var(--weit);
  text-transform: uppercase;
}
.platte--breit img { aspect-ratio: 2 / 1; }
.platte--hoch img { aspect-ratio: 4 / 5; }

.kopfsatz { display: grid; gap: 1.25rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
/* Abschnitt, der als Ganzes mittig steht — Auge, Überschrift und der Weg darunter. */
.feld--mitte .spur { text-align: center; }
.feld--mitte .kopfsatz { justify-items: center; max-width: 46rem; margin-inline: auto; }
.kopfsatz--geteilt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: end; }

/* Die Trennlinien entstehen aus dem Grund des Rasters. Der darf aber erst kommen,
   wenn die Tafeln da sind — sonst steht vorher ein grauer Block auf der Seite. */
.gitter { display: grid; gap: 1px; background: var(--linie); }
/* Die Tafel steht von Anfang an weiß da, bewegt wird nur ihr Inhalt. Käme sie
   selbst erst eingeblendet, sähe man beim Aufbau den Rastergrund als grauen
   Block statt der Haarlinien. Die Staffelung kommt als --stufe von der Tafel;
   eigene Größen vererben sich, transition-delay nicht — und läge auch auf dem
   Hover. */
.js .gitter > .an { opacity: 1; transform: none; }
.js .gitter > .an > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--anflug) var(--stufe, 0s), transform .7s var(--anflug) var(--stufe, 0s);
}
.js .gitter > .an.da > * { opacity: 1; transform: none; }
/* Symbol und Weg brauchen zusätzlich ihre Hover-Wege, sonst nimmt ihnen die
   Regel darüber die Bewegung ganz weg. */
.js .gitter .tafel--fassbar .tafel__zeichen {
  transition: top .42s cubic-bezier(.4, 0, .25, 1), opacity .7s var(--anflug) var(--stufe, 0s), transform .7s var(--anflug) var(--stufe, 0s);
}
.js .gitter .tafel--fassbar .pfeil-weg {
  transition: gap .42s cubic-bezier(.4, 0, .25, 1), opacity .7s var(--anflug) var(--stufe, 0s), transform .7s var(--anflug) var(--stufe, 0s);
}
.gitter--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gitter--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gitter--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tafel {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--grund);
  transition: background-color .4s var(--schwung);
}
/* Glaskarten ausgenommen: sonst überschreibt der Abschnittsgrund ihre Füllung. */
.still .tafel:not(.tafel--glas) { background: var(--grund); }
/* Glaskarten stehen frei nebeneinander, deshalb echte Lücken statt der
   Haarlinien, die sonst aus dem Rastergrund entstehen. */
.gitter--glas { position: relative; isolation: isolate; gap: clamp(.9rem, 1.5vw, 1.5rem); background: transparent; }
/* Weiße Scheiben auf weißem Grund sieht niemand. Unter dem Raster liegt deshalb
   ein blasser Schleier in der Markenfarbe — erst der macht das Glas sichtbar. */
.gitter--glas::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Seitlich nur ein fester kleiner Überstand: prozentual ragt der Schleier bei
     schmalen Fenstern über den Seitenrand und die Seite lässt sich schieben. */
  inset: -14% -1rem;
  background:
    radial-gradient(58% 90% at 16% 4%, rgba(21, 83, 155, .22), rgba(21, 83, 155, 0) 62%),
    radial-gradient(52% 90% at 88% 96%, rgba(21, 83, 155, .17), rgba(21, 83, 155, 0) 60%);
  /* Ohne die Maske stünde der Schleier als Rechteck mit sichtbarer Kante da. */
  -webkit-mask-image: radial-gradient(72% 68% at 50% 50%, #000 22%, transparent 76%);
  mask-image: radial-gradient(72% 68% at 50% 50%, #000 22%, transparent 76%);
}
/* Drei Lagen machen die Scheibe: ein schräger Lichtstreifen über der oberen
   Ecke, darunter die getönte Fläche, dazu Lichtkanten oben und unten und ein
   Schimmer nach innen. Der Schliff bricht den Schleier, der unter dem Raster
   liegt — daher kommt die Farbe im Glas. */
.tafel--glas {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: clamp(20px, 2.2vw, 30px);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .22) 34%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(160deg, rgba(255, 255, 255, .74) 0%, rgba(214, 227, 245, .58) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    inset 0 0 44px rgba(255, 255, 255, .32),
    0 22px 46px rgba(6, 16, 31, .09);
}
/* Der Weg unten steht in allen Tafeln auf einer Linie, egal wie lang der Text
   darüber ist — der Absatz nimmt die freie Höhe auf. */
.tafel:has(.pfeil-weg) { grid-template-rows: auto auto 1fr auto; }
/* Angehoben wird über top, nicht über transform: ein transform macht den
   Rahmen zur eigenen Ebene, und das Multiply des Symbols rechnet dann gegen
   Nichts statt gegen die Tafel — die weiße Kiste käme beim Hover zurück. */
.tafel__zeichen { position: relative; top: 0; width: 88px; height: 88px; transition: top .4s var(--schwung); }
/* Die Symbole liegen auf weißem Grund. Multiply rechnet das Weiß gegen den
   Seitengrund weg, der Schlagschatten bleibt als echter Schatten stehen. */
.tafel__zeichen img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tafel p { color: var(--text-gedeckt); font-size: 1rem; }
/* Hover: die Tafel löst sich aus dem Raster — reines Weiß und ein Schatten, der
   von null aufwächst statt zu erscheinen. Angehoben wird nichts per transform,
   das würde das Multiply der Symbole aushebeln.
   Der Übergang steht in derselben Tiefe wie die Einblend-Regel der Tafeln, die
   ist spezifischer und würde die Zeit sonst überschreiben. */
.tafel--fassbar { box-shadow: 0 0 0 rgba(6, 16, 31, 0); }
/* Gleichmäßige Kurve statt --anflug: das starke Ausklingen dort setzt fast die
   ganze Bewegung in den ersten Moment, das wirkt trotz langer Dauer wie ein
   Sprung. */
/* Muss .an.da schlagen: die Einblend-Regel steht weiter unten im Blatt und
   nähme der Tafel sonst den Hover-Übergang ganz weg — er sprang dann hart um. */
.js .gitter .tafel--fassbar.an {
  transition: box-shadow .42s cubic-bezier(.4, 0, .25, 1),
              opacity .7s var(--anflug) var(--stufe, 0s), transform .7s var(--anflug) var(--stufe, 0s);
}
.tafel--fassbar { transition: box-shadow .42s cubic-bezier(.4, 0, .25, 1); }
.tafel--fassbar .tafel__zeichen { transition: top .42s cubic-bezier(.4, 0, .25, 1); }
.tafel--fassbar .pfeil-weg { transition: gap .42s cubic-bezier(.4, 0, .25, 1); }
@media (pointer: fine) {
  /* Kein hellerer Grund beim Hover: die Symbol-Dateien haben keinen Alphakanal,
     ihr eigener Bildgrund würde sich als Kasten abzeichnen. Es trägt der Schatten. */
  .tafel--fassbar:hover { box-shadow: 0 18px 40px rgba(6, 16, 31, .11); }
  .tafel--fassbar:hover .tafel__zeichen { top: -6px; }
  .tafel--fassbar:hover .pfeil-weg { gap: .95rem; }
}

.punkte { display: grid; gap: .75rem; }
.punkte li { position: relative; padding-left: 1.4rem; color: var(--text-gedeckt); font-size: 1rem; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--marke); }

/* Duo-Block: Text neben Platte */
.paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.paar--kehrt > :first-child { order: 2; }
/* Die Leistungsblöcke liegen als Glasplatte auf der Seite. */
.paar--glas {
  padding: clamp(1.5rem, 3.2vw, 3rem);
  border: 1px solid var(--glas-kante);
  border-radius: clamp(28px, 3.4vw, 48px);
  /* Zwei Lagen: oben der schräge Lichtstreifen, darunter die getönte Scheibe. */
  background: var(--glas);
  backdrop-filter: var(--glas-schliff);
  -webkit-backdrop-filter: var(--glas-schliff);
  box-shadow: var(--glas-licht);
}
.paar__satz { display: grid; gap: 1.5rem; align-content: start; justify-items: start; }

/* Partnerlogos: ein Band auf Weiß, keine Kästen. Die Logos werden auf eine
   gemeinsame Höhe gebracht und in der Breite gedeckelt, sonst drängen sich die
   quadratischen Zeichen vor die breiten. */
.partner {
  overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner__spur {
  display: flex;
  align-items: center;
  width: max-content;
  animation: partnerlauf 64s linear infinite;
}
/* Der Abstand steckt im Element, nicht in einem gap — sonst stimmt die halbe
   Spurbreite nicht mehr und der Übergang macht bei jeder Runde einen Satz. */
.partner__spur li { padding-right: clamp(2.5rem, 5.5vw, 5rem); }
/* Feste Höhe, nicht auto: sonst haben die Bilder vor dem Laden keine Ausdehnung. */
.partner__spur img {
  width: auto;
  height: clamp(2.9rem, 4.2vw, 4rem);
  max-width: clamp(10rem, 15vw, 14rem);
  object-fit: contain;
  /* Ein Teil der Dateien liegt als JPEG ohne Alphakanal vor. Der Kontrast zieht
     deren Grund auf reines Weiß, Multiply rechnet es gegen den Seitengrund weg —
     sonst steht um jede Marke ein grauer Kasten. Abgedunkelt wird nicht: das
     träfe den Grund mit und brächte den Kasten zurück. */
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.4);
  opacity: 1;
  transition: filter .4s var(--schwung), opacity .4s var(--schwung);
}
/* Diese eine Marke liegt als helle Schrift auf dunkler Platte. Umgekehrt wird
   die Platte hell und verschwindet im Multiply wie bei den übrigen. */
.partner__spur img[src$="goerg.png"] { filter: grayscale(1) invert(1) brightness(1.35) contrast(1.6); }
@keyframes partnerlauf { to { transform: translateX(-50%); } }
@media (pointer: fine) {
  .partner:hover .partner__spur { animation-play-state: paused; }
  .partner__spur img:hover { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .partner { -webkit-mask-image: none; mask-image: none; }
  .partner__spur { flex-wrap: wrap; justify-content: center; width: 100%; animation: none; }
  .partner__spur li[aria-hidden] { display: none; }
}


/* Etappen als Stapel: die Schritte schieben sich übereinander. */
.stapel { position: relative; }
.etappe {
  display: grid;
  grid-template-columns: 5rem minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 3.6vw, 3.25rem) clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--glas-kante);
  border-radius: clamp(20px, 2.2vw, 30px);
  background: var(--glas);
  backdrop-filter: var(--glas-schliff);
  -webkit-backdrop-filter: var(--glas-schliff);
  box-shadow: var(--glas-licht);
}
.etappe__zahl { font-size: 3.5rem; font-weight: 500; letter-spacing: var(--eng); line-height: .9; color: var(--text-still); transition: color .4s var(--schwung); }
.etappe__satz { display: grid; gap: .5rem; }
.etappe__satz p { color: var(--text-gedeckt); font-size: 1rem; }
.etappe .tafeltitel { transition: color .4s var(--schwung); }
/* Nicht der Zeiger färbt die Stufe, sondern die Leseposition: seite.js setzt
   .jetzt auf die Stufe, an der man gerade steht. */
.etappe { transition: border-color .4s var(--schwung); }
.etappe.jetzt { border-color: rgba(21, 83, 155, .45); }
.etappe.jetzt .etappe__zahl,
.etappe.jetzt .tafeltitel { color: var(--marke); }
/* Die Stufen schieben sich übereinander, auf jedem Gerät — am Handy mit
   knapperem Abstand zur Leiste, sonst bleibt vom Stapel nichts zu sehen. */
.js .stapel .etappe { position: sticky; top: calc(var(--kopfhoehe) + 1.5rem); }
@media (max-width: 860px) {
  .js .stapel .etappe { top: calc(var(--kopfhoehe) + .75rem); }
}

/* Riege: freigestellte Portraits */
.riege { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.gesicht { display: grid; grid-template-rows: auto 1fr; gap: 1rem; }
/* Die Portraits sind auf reinem Weiß freigestellt, die Seite ist minimal
   gebrochen — ohne Multiply zeichnet sich der Bildkasten als Kante ab. Die
   Karte bleibt dafür ohne eigene Fläche, sonst rechnet der Modus dagegen. */
.gesicht__bild { aspect-ratio: 4 / 5; border-radius: var(--rund); overflow: hidden; }
.gesicht__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  mix-blend-mode: multiply;
  transition: transform .7s var(--schwung);
}
.gesicht strong { display: block; font-weight: 500; font-size: 1.0625rem; letter-spacing: -.02em; }
.gesicht span { display: block; margin-top: .2rem; font-size: var(--klein); line-height: 1.35; color: var(--text-gedeckt); }
@media (pointer: fine) { .gesicht:hover img { transform: scale(1.04); } }

/* Steckbriefe */
.steckbrief { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.steckbrief + .steckbrief { margin-top: var(--hoch); padding-top: var(--hoch); border-top: 1px solid var(--linie); }
/* Gespiegelt heißt: die Spalten tauschen mit, sonst wächst das Portrait in die Textspalte. */
.steckbrief--kehrt { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
.steckbrief--kehrt > :first-child { order: 2; }
.steckbrief__satz { display: grid; gap: 1.35rem; align-content: start; }
/* Der Steckbrief braucht drei klar getrennte Ebenen: Aussage, Erläuterung, Kompetenzen. */
.steckbrief__satz .vorlauf { color: var(--text); font-size: 1.375rem; max-width: 40ch; }
.steckbrief__satz .fliess { max-width: 52ch; }

.koennen-block { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.koennen__titel {
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--text-still);
}
.koennen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 2rem; }
.koennen li {
  position: relative;
  padding-left: 1rem;
  font-size: .9375rem;
  color: var(--text-gedeckt);
}
.koennen li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--marke); }
/* Rolle und Zitat sitzen in einer Markenpille — die beiden sollen aus dem Fließtext heraustreten. */
/* Rolle und Zitat liegen wie Glas auf der Seite: getönte Fläche, Lichtkante
   oben, weicher Schlagschatten darunter. */
.steckbrief__satz .auge {
  width: fit-content;
  margin-bottom: .9rem;
  padding: .5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--rund-voll);
  background: linear-gradient(155deg, rgba(38, 105, 185, .92), rgba(15, 62, 120, .88));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
  color: var(--text-hell);
}
/* Steckbrief: sichtbar bleibt der Aufschlag, der Rest klappt auf. Ohne JS steht
   alles offen da, deshalb hängt das Zusammenklappen an .js. */
.mehr > div { display: grid; gap: 1.35rem; }
.js .mehr { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--schwung); }
.js .mehr.zu { grid-template-rows: 0fr; }
.js .mehr > div { min-height: 0; overflow: hidden; }
.mehr-weg { display: none; justify-self: start; padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.js .mehr-weg { display: inline-flex; }
.mehr-weg::after { content: "↓"; }
.mehr-weg[aria-expanded="true"]::after { content: "↑"; }

/* Das Zitat trägt sich selbst: nur eine Linie an der Seite, keine Fläche. */
.stimme {
  justify-self: start;
  padding-left: 1.5rem;
  border-left: 1px solid var(--linie);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -.02em;
}

/* Der LinkedIn-Strom bringt sein eigenes Raster mit; hier steht nur der Weg
   nach draußen, falls das Widget nicht durchkommt. */
/* Sperre vor eingebetteten Fremddiensten: erklärt, was beim Laden passiert. */
.sperre[hidden] { display: none; }
.sperre {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--linie);
  border-radius: clamp(20px, 2.2vw, 30px);
  text-align: center;
}
.sperre__satz { max-width: 54ch; color: var(--text-gedeckt); }
.sperre__weg { font-size: var(--klein); }
.feedweg { margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* Aktuelles: Zeit und Art links, die Meldung rechts, getrennt nur durch Linien. */
.meldung {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--linie);
}
.meldung__zeit { display: grid; gap: .35rem; align-content: start; }
.meldung__zeit time { font-size: var(--klein); color: var(--text-gedeckt); }
.meldung__art { font-size: var(--winzig); letter-spacing: var(--weit); text-transform: uppercase; color: var(--marke); }
.meldung__satz { display: grid; gap: .8rem; align-content: start; }
.meldung__satz p { max-width: 62ch; color: var(--text-gedeckt); font-size: 1rem; }
.meldung__akten { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: .35rem; }
.meldungen .mehr > div { gap: 0; }
.meldungen .mehr-weg { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Dunkles Feld */
.nachtfeld, .deck--bild { --text-still: #9aa2ae; }
.nachtfeld { position: relative; background: var(--nacht); color: var(--text-hell); }
/* Stoßen zwei dunkle Felder aneinander, fehlt die Kante, die sonst der
   Farbwechsel setzt — eine Haarlinie trennt sie wieder. */
.nachtfeld + .nachtfeld { border-top: 1px solid var(--nacht-linie); }
.nachtfeld .spur { position: relative; z-index: 1; }
.nachtfeld .fliess, .nachtfeld .vorlauf, .nachtfeld p { color: rgba(252, 252, 252, .7); }
.nachtfeld .auge { color: rgba(252, 252, 252, .5); }
.nachtfeld .punkte li { color: rgba(252, 252, 252, .78); }
.nachtfeld .punkte li::before { background: var(--text-hell); }
/* Der Ablauf läuft untereinander an einer Schiene entlang: links die Linie mit
   einem Punkt je Stufe, rechts Titel und Erklärung. */
.saeulen {
  position: relative;
  display: grid;
  width: min(100%, 68rem);
  margin-inline: auto;
}
/* Die Schiene besteht aus einem Stück je Stufe. So wächst sie beim Scrollen mit,
   und oben wie unten endet sie genau im ersten und letzten Punkt. */
.saeule::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--nacht-linie);
}
.saeule:first-child::before { top: calc(clamp(1.75rem, 3.4vw, 2.9rem) + .4em + 5px); }
.saeule:last-child::before { bottom: calc(100% - clamp(1.75rem, 3.4vw, 2.9rem) - .4em - 6px); }
.saeule {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  align-items: start;
  gap: .5rem clamp(2rem, 5vw, 4.5rem);
  padding: clamp(1.75rem, 3.4vw, 2.9rem) 0 clamp(1.75rem, 3.4vw, 2.9rem) clamp(2.75rem, 5vw, 4.25rem);
}
.saeule::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(1.75rem, 3.4vw, 2.9rem) + .4em);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--marke);
}
/* Stufen ohne Erklärung brauchen die zweite Spalte nicht — sonst klebt die
   Schiene links und rechts steht die halbe Breite leer. */
/* Die Schiene zählt optisch mit: ohne den Versatz sitzt die Textspalte rechts
   von der Seitenmitte. Verschoben wird der ganze Block, sonst wandert die
   Schiene neben die Punkte. */
.saeulen:not(:has(p)) {
  width: fit-content;
  translate: calc(clamp(1.75rem, 3vw, 2.5rem) / -2) 0;
}
.saeulen:not(:has(p)) .saeule {
  grid-template-columns: minmax(0, 1fr);
  padding-left: clamp(1.75rem, 3vw, 2.5rem);
  text-align: center;
}
.saeule .tafeltitel { font-size: var(--mittel); }
.saeule .fliess { max-width: 58ch; font-size: 1.1875rem; }
.saeule strong { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 500; letter-spacing: var(--eng); line-height: 1; }

/* Die helle Schiene wächst am Scrollstand entlang, sie wird nicht eingeblendet.
   Sie kommt aus dem Skript, ohne JS bleiben die grauen Stücke oben stehen. */
.schiene {
  position: absolute;
  left: 5px;
  top: var(--oben, 0);
  width: 1px;
  height: var(--hoch, 0);
  background: var(--marke);
  transform: scaleY(var(--lauf, 0));
  transform-origin: top center;
}
.js .saeule::after { background: var(--nacht-linie); transition: background-color .5s var(--schwung), box-shadow .5s var(--schwung); }
.js .saeule.erreicht::after { background: var(--marke); box-shadow: 0 0 0 5px rgba(46, 116, 200, .18); }
/* Die Stufe selbst bleibt stehen, damit ihr Stück Schiene nicht mitwandert —
   bewegt wird nur, was daneben steht, und das hängt am Scrollstand statt an
   einem Auslöser. Sonst springt der Text, während die Linie noch läuft. */
.js .saeulen .saeule--folge.an,
.js .saeulen .saeule--folge.an.da { opacity: 1; transform: none; transition: none; }
.js .saeulen .saeule--folge > * {
  opacity: var(--nah, 0);
  transform: translate3d(calc((1 - var(--nah, 0)) * -16px), 0, 0);
}

/* Kontakt */
.kontaktfeld { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.daten { display: grid; gap: 1.75rem; }
.daten address { font-style: normal; color: var(--text-gedeckt); line-height: 1.7; }
.daten a:hover { color: var(--marke); }
.formular { display: grid; gap: 1.25rem; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.eingabe { display: grid; gap: .5rem; }
.eingabe > span { font-size: var(--winzig); letter-spacing: var(--weit); text-transform: uppercase; color: var(--text-still); }
.eingabe input, .eingabe textarea {
  width: 100%;
  padding: .95rem 1.35rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-voll);
  background: var(--grund);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .3s var(--schwung);
}
.eingabe textarea { min-height: 9rem; border-radius: var(--rund); resize: vertical; }
.eingabe input::placeholder, .eingabe textarea::placeholder { color: var(--text-still); }
.eingabe input:focus, .eingabe textarea:focus { outline: 0; border-color: var(--marke); }
.eingabe input:user-invalid, .eingabe textarea:user-invalid { border-color: #b3261e; }
/* Der Einwilligungssatz ist Pflichttext, keine Botschaft: kleiner, blasser und
   dichter gesetzt als der Rest des Formulars. */
.zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; font-size: .75rem; line-height: 1.45; color: var(--text-still); }
.zustimmung input { margin-top: .25rem; accent-color: var(--marke); }
.zustimmung a { color: var(--text-gedeckt); text-decoration: underline; text-underline-offset: 2px; }
.honig { position: absolute; left: -9999px; }
.rueckmeldung { min-height: 1.4rem; font-size: var(--klein); color: var(--marke); }

/* Rechtstexte */
/* Die Spalte steht mittig auf der Seite, der Text bleibt linksbündig — bei den
   langen Absätzen der Rechtstexte liest sich zentrierter Satz schlecht. */
.rechtstext { display: grid; gap: 1.15rem; max-width: 48rem; margin-inline: auto; }
.rechtstext h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.028em; margin-top: 2rem; }
/* Die erste Überschrift bringt keinen eigenen Abstand mit — den trägt der
   Abschnitt, sonst startet die Seite tiefer als die übrigen. */
.rechtstext > :first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.0625rem; font-weight: 500; margin-top: 1rem; }
.rechtstext p, .rechtstext li { color: var(--text-gedeckt); }
.rechtstext ul { display: grid; gap: .5rem; padding-left: 1.2rem; list-style: disc; }
.rechtstext a { color: var(--marke); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }

/* Sockel */
.sockel { background: var(--nacht); color: var(--text-hell); overflow: hidden; }
/* Endet die Seite auf einem dunklen Feld, fehlt dem Fuß sonst jede Kante. */
main:has(> .nachtfeld:last-child) + .sockel { border-top: 1px solid var(--nacht-linie); }
/* Heller Fuß, wo die Seite auf dem Formular endet: das dunkle Feld samt großer
   Wortmarke würde den Abschluss dort erschlagen. */
.sockel--hell { background: var(--grund); color: var(--text); }
.sockel--hell .wortmarke { display: none; }
.sockel--hell .sockel__boden { border-top-color: var(--linie); }
.sockel--hell .sockel__pflicht a { color: var(--text-gedeckt); }
.sockel--hell .sockel__pflicht a:hover { color: var(--text); }
.sockel__wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--nacht-linie); }
.sockel__weg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--seite);
  font-size: var(--mittel);
  font-weight: 500;
  letter-spacing: -.03em;
  overflow: hidden;
}
.sockel__weg + .sockel__weg { border-left: 1px solid var(--nacht-linie); }
.sockel__weg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grund);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--schwung);
}
.sockel__weg > * { position: relative; z-index: 1; transition: color .5s var(--schwung), transform .5s var(--schwung); }
@media (pointer: fine) {
  .sockel__weg:hover::before { transform: scaleX(1); }
  .sockel__weg:hover > * { color: var(--nacht); }
  .sockel__weg:hover > span:first-child { transform: translateX(10px); }
}

/* Im dunklen Fuß muss der stille Ton in die andere Richtung. */
.sockel:not(.sockel--hell) { --text-still: #9aa2ae; }
.sockel__mitte { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: clamp(3rem, 6vw, 5rem) 0; }
.sockel h2 { font-size: var(--winzig); font-weight: 400; letter-spacing: var(--weit); text-transform: uppercase; color: var(--text-still); margin-bottom: 1.25rem; }
.sockel li + li { margin-top: .65rem; }
.sockel__mitte a { color: rgba(252, 252, 252, .72); transition: color .3s var(--schwung); }
.sockel__mitte a:hover { color: var(--text-hell); }
.sockel address { font-style: normal; color: rgba(252, 252, 252, .72); line-height: 1.8; }

.wortmarke { display: flex; justify-content: center; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; }
.wortmarke span { display: block; }
.wortmarke img { width: auto; height: clamp(4.5rem, 19vw, 17rem); }
/* Signatur des Studios im Fuß, zurückhaltend und erst beim Überfahren voll da. */
.sockel__bau { display: block; opacity: .7; transition: opacity .3s var(--schwung); }
.sockel__bau:hover { opacity: 1; }
.sockel__bau img { width: clamp(10rem, 17vw, 15rem); height: auto; }
/* Auf dunklem Grund wird die schwarze Wortmarke umgedreht statt eine zweite
   Datei zu pflegen — das PNG hat einen Alphakanal, es bleibt also freigestellt. */
.sockel:not(.sockel--hell) .sockel__bau img { filter: brightness(0) invert(1); }
/* Pflichtangaben im Fuß, wo die Spalten darüber wegfallen. */
.sockel__pflicht { display: inline-flex; gap: 1.5rem; }
.sockel__pflicht a { color: var(--text-still); transition: color .3s var(--schwung); }
.sockel__pflicht a:hover { color: var(--text-hell); }
.sockel__boden {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--nacht-linie);
  font-size: var(--winzig);
  letter-spacing: var(--weit);
  text-transform: uppercase;
  color: var(--text-still);
}

/* Bewegung */
/* Seitenwechsel überlässt der Browser sich selbst, wo er das kann: er blendet
   die alte gegen die neue Seite, ohne Zwischenschritt und ohne Warten auf ein
   Skript. Der Vorhang darunter ist nur noch das Netz für alle anderen. */
@view-transition { navigation: auto; }
/* Die neue Seite kommt von rechts herein und schiebt die alte ein Stück nach
   links weg — dieselbe Geste wie beim Schubfach, nur über die ganze Fläche. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .44s;
  animation-timing-function: var(--anflug);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: blattWeg; }
::view-transition-new(root) { animation-name: blattHerein; }
@keyframes blattHerein {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: none; }
}
/* Die alte Seite geht nicht mit gleicher Geschwindigkeit mit: sie bleibt ein
   Stück zurück und tritt in die Tiefe — daraus entsteht die Schichtung. */
@keyframes blattWeg {
  from { transform: none; opacity: 1; }
  to { transform: translate3d(-16%, 0, 0) scale(.985); opacity: .5; }
}
/* Kopfleiste und Schubfach hängen sich aus dem Wechsel aus: sie gehören zur
   Anwendung, nicht zum Blatt, und stehen deshalb still, während darunter
   gewechselt wird. */
.kopfleiste { view-transition-name: kopf; }
.klapper { view-transition-name: klapper; }
::view-transition-group(kopf),
::view-transition-group(klapper) { animation-duration: .44s; }
::view-transition-old(kopf),
::view-transition-new(kopf),
::view-transition-old(klapper),
::view-transition-new(klapper) { animation: none; mix-blend-mode: normal; }
::view-transition-old(kopf),
::view-transition-old(klapper) { display: none; }
/* Netz für Browser ohne eigenen Seitenwechsel: dort fährt ein Blatt in der
   Grundfarbe von rechts über die Seite, bevor gewechselt wird. */
.schirm {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--grund);
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
  transition: transform .3s var(--anflug);
}
.schirm.zeigt { transform: none; pointer-events: all; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .schirm { transition: none; }
}

.js .an { opacity: 0; transform: translateY(56px); }
.js .an.da { opacity: 1; transform: none; transition: opacity .7s var(--anflug) var(--stufe, 0s), transform .7s var(--anflug) var(--stufe, 0s); }
/* Der Anflug: Display-Text kommt gedreht aus der Tiefe. */
.js .flug { opacity: 0; transform: perspective(1000px) translate3d(-60px, 60px, 0) rotateY(34deg) rotateX(22deg); transform-origin: left center; }
/* Am Ende ganz ohne Transform: die Identität aus perspective() sähe gleich aus,
   ließe aber jede Überschrift dauerhaft auf einer eigenen Compositor-Ebene. */
.js .flug.da { opacity: 1; transform: none; transition: opacity .8s var(--anflug) var(--stufe, 0s), transform .85s var(--anflug) var(--stufe, 0s); }
.js .steigt span { display: block; transform: translateY(110%); transition: transform .65s var(--anflug); }
.js .steigt.da span { transform: translateY(0); }
.js .steigt span:nth-child(2) { transition-delay: .07s; }
.js .steigt span:nth-child(3) { transition-delay: .14s; }
.js .steigt span:nth-child(4) { transition-delay: .21s; }
.js .steigt span:nth-child(5) { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .js .an, .js .an.da, .js .flug, .js .flug.da { opacity: 1; transform: none; transition: none; }
  .js .steigt span, .js .steigt.da span { transform: none; transition: none; }
  .js .stapel .etappe { position: relative; top: auto; }
  .js .mehr { transition: none; }
  .kopfleiste { transition: none; }
  .schublade__wege a, .schublade.offen .schublade__wege a { transform: none; transition-delay: 0s, 0s, 0s; }
  .schublade.offen .schublade__fuss { transition-delay: 0s; }
}


@media (max-width: 1100px) {
  .riege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gitter--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etappe { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .etappe__satz { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --kopfhoehe: 64px; }

  .gitter--drei, .gitter--vier, .gitter--zwei, .paar, .kopfsatz--geteilt, .stirn .spur,
  .saeule, .steckbrief, .kontaktfeld, .sockel__mitte, .sockel__wege { grid-template-columns: minmax(0, 1fr); }
  .stirn .vorlauf { margin-bottom: 0; }
  .meldung { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .meldung__zeit { grid-auto-flow: column; justify-content: start; gap: 1rem; align-items: baseline; }
  .paar--kehrt > :first-child, .steckbrief--kehrt > :first-child { order: 0; }
  .sockel__weg + .sockel__weg { border-left: 0; border-top: 1px solid var(--nacht-linie); }
}

/* Mobil: alles eine Nummer kleiner. */
@media (max-width: 640px) {
  :root {
    --fliess: 1rem;
    --klein: .8125rem;
    --wucht: 2rem;
    --gross: 1.625rem;
    --mittel: 1.25rem;
    --tafeltitel: 1.125rem;
    --hoch: 3rem;
    --hoch-weit: 3.75rem;
    --rund-platte: 16px;
  }
  .wucht { line-height: 1.04; letter-spacing: -.035em; }
  .vorlauf { font-size: 1.0625rem; }
  .deck { min-height: 92svh; padding: calc(var(--kopfhoehe) + 2.25rem) 0 clamp(3.5rem, 14vh, 7rem); }
  .deck__grund img { object-position: 50% 58%; }
  /* Am Handy zieht der Pin etwas weniger an, und die Unschärfe bleibt klein —
     ein 9-px-Weichzeichner über die ganze Fläche kostet dort zu viel. */
  .deck__grund { transform: translate3d(0, calc(var(--tief, 0) * var(--deckhoch, 92svh) * .8), 0); }
  .deck__band-ort { display: none; }
  /* Die drei Felder bleiben am Handy in einer Zeile: sie werden über die Breite
     verteilt und schrumpfen mit, statt umzubrechen. */
  .deck__band-reihe {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .6rem;
    padding-top: .85rem;
    font-size: clamp(.5rem, 2.5vw, .6875rem);
    letter-spacing: .04em;
  }
  .deck__band-reihe > span { white-space: nowrap; }
  .deck__tun { width: 100%; max-width: 20rem; }
  .deck__tun .taste { flex: 1 0 100%; }
  .kopfleiste__zeichen img { width: 82px; }

  /* Zwei Spalten sind am Handy zu eng: die Titel brechen mitten im Wort und die
     Symbole schrumpfen auf Briefmarkengröße. Eine Karte pro Zeile, dafür in
     ganzer Breite und ohne Trennstriche. */
  /* Am Handy führt das Schubfach durch die Seite — die beiden Wegespalten im
     Sockel wiederholen es nur und machen die Fußzeile unnötig lang. */
  .sockel__wege-block { display: none; }
  /* Der Ortsvermerk trägt am Handy nichts bei. Die Bauzeile und die Pflichtlinks
     im selben Balken bleiben stehen — die Bauzeile mittig unter der Wortmarke. */
  .sockel__boden > span:not(.sockel__pflicht) { display: none; }
  .sockel__boden { justify-content: center; padding: 2.75rem 0 2.25rem; }
  .sockel__bau img { width: 11rem; }
  .sockel__boden:not(:has(.sockel__pflicht)) { border-top: 0; }
  .gitter--drei, .gitter--vier, .gitter--zwei { grid-template-columns: minmax(0, 1fr); }
  .partner__spur li { padding-right: 2.25rem; }
  .tafel { padding: 1.4rem 1.15rem; gap: .7rem; hyphens: manual; }
  .tafel p, .punkte li { font-size: .9375rem; }
  .tafel__zeichen { width: 52px; height: 52px; }
  .tafeltitel { hyphens: manual; }

  .wand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wand li { padding: .7rem; }
  .riege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .gesicht span { font-size: .75rem; }
  .gesicht strong { font-size: .9375rem; }

  .etappe { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1.25rem 1rem; gap: .9rem; }
  .etappe__zahl { font-size: 1.75rem; }
  .saeule strong { font-size: 3rem; }
  .vorlauf, .merkzeile { max-width: none; }
  .merkzeile { gap: .45rem; }
  .merkzeile li { padding: .4rem .85rem; }
  .zwei { grid-template-columns: minmax(0, 1fr); }
  .koennen { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .steckbrief__satz .vorlauf { font-size: 1.0625rem; }
  .stimme { padding-left: 1rem; font-size: 1rem; }
  .wortmarke span { font-size: 3.5rem; }
  /* Im Schubfach ist am Handy Platz genug — die Wege dürfen dort tragen. */
  .schublade__wege a { font-size: 1.85rem; }
  .schublade__wege li + li { margin-top: .1rem; }
  .sockel__weg { font-size: 1.25rem; }
}


/* Zustimmung: liegt unten und nimmt die Seite nicht gefangen — wer nur liest,
   kann weiterlesen. Erst die Entscheidung schaltet die eingebetteten Beiträge frei. */
.hinweisblatt {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
  pointer-events: none;
}
.hinweisblatt[hidden] { display: none; }
.hinweisblatt__blatt {
  display: grid;
  gap: 1rem;
  width: min(54rem, 100%);
  padding: clamp(1.15rem, 2.4vw, 1.75rem);
  border: 1px solid rgba(6, 16, 31, .1);
  border-radius: 14px;
  background: rgba(252, 252, 252, .93);
  box-shadow: 0 18px 48px rgba(6, 16, 31, .16);
  pointer-events: auto;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hinweisblatt__blatt {
    background: rgba(252, 252, 252, .78);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
  }
}
.hinweisblatt__titel { margin: 0 0 .35rem; font-size: 1.05rem; }
.hinweisblatt__blatt p { margin: 0; font-size: var(--klein); color: #414b5a; }
.hinweisblatt__tun { display: flex; flex-wrap: wrap; gap: .6rem; }
.hinweisblatt__weg a { font-size: var(--klein); color: var(--marke); }
/* Der Widerruf braucht einen Knopf, kein Ziel — sieht aber aus wie die Wege
   daneben, damit die Fußzeile eine Reihe bleibt. */
.alsweg {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 46rem) {
  .hinweisblatt__blatt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.75rem; }
  .hinweisblatt__weg { grid-column: 1 / -1; }
  .hinweisblatt__tun { flex-wrap: nowrap; }
}