/* ===========================================================
   Schriften, selbst gehostet.
   Kein Aufruf an Google, damit keine Besucher-IP uebertragen wird (DSGVO).
   Variable Fonts: eine Datei je Familie statt einer je Schnitt.
   unicode-range sorgt dafuer, dass latin-ext nur bei Bedarf geladen wird.
   =========================================================== */
/* Inter, Rasmus Andersson, 2016 bis heute. Hausschrift von Future U
   laut Brand Bible. SIL Open Font License 1.1.
   Eine Familie fuer die ganze Seite. Die Breitenachse ist auf Normal
   festgesetzt, die Gewichtsachse 200-900 bleibt erhalten: ein Schnitt
   fuer jedes Gewicht, das die Seite braucht, aus einer Datei. */
/* Inter, wie die Brand Bible es vorgibt: Inter fuer Fliesstexte,
   Formulare und Tabellen, Inter Extrafett fuer Headlines.
   Selbst gehostet, kein Aufruf an Google. Auf latin beschnitten:
   Umlaute, Eszett und die deutschen Anfuehrungszeichen liegen darin. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/inter-700.woff2') format('woff2');
}
/* Extrafett. Traegt nach Vorgabe alle Ueberschriften. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('fonts/inter-800.woff2') format('woff2');
}
/* Echt kursiv. font-synthesis steht auf none, der Browser wuerde sonst
   die aufrechte Schrift schraegstellen. */
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fonts/inter-400i.woff2') format('woff2');
}

/* ===========================================================
   FUTURE U — Stylesheet
   Bewusst abweichend vom Brandboard, auf ausdrueckliche Entscheidung
   des Auftraggebers: Inter als einzige Familie,
   und eine reine Neutralpalette statt Sage-Gruen und warmem Off-White.
   =========================================================== */

/* Angemeldet, damit getComputedStyle einen Pixelwert liefert statt des
   rohen "clamp(...)"-Textes: app.js liest diesen Wert und kann mit Text
   nichts anfangen. Wo @property fehlt, bleibt das Brett auf der
   gemeinsamen Grundlinie stehen - der Zustand von vorher. */
@property --brett-tiefer {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

:root {
  /* Fliesstext, website-weit. Referenz war der Satz unter "Neue
     Generationen. Neue Technologien." - der Satz selbst ist auf Wunsch
     entfallen, seine Groesse bleibt der Massstab. Vorher lagen die
     Fliesstexte je nach Abschnitt zwischen 15,2 und 20,3 Pixeln. */
  --text-flies: clamp(1.1rem, 2vw, 1.35rem);

  /* Abstand zwischen zwei Kapiteln, je Seite. Doppelt ergibt die Luecke. */
  --kapitel-luft: clamp(48px, 5.6vw, 80px);

  /* Markenfarben nach Vorgabe von Future U. Die Neutraltoene tragen jetzt
     einen leichten Stich ins Blau, damit sie zur Marke gehoeren statt
     danebenzustehen. */
  /* Ein einziger heller Ton auf der ganzen Seite, so wie die Vorgabe es
     sagt: Basic ist der Standard-Hintergrund. Alle drei Namen zeigen
     bewusst auf denselben Wert. Sie bleiben getrennt, weil sie
     verschiedene Rollen bezeichnen und sich einzeln nachziehen liessen.
     Folge: Karten und abgesetzte Abschnitte heben sich nicht mehr ueber
     den Ton ab. Ihre Trennung traegt allein die Haarlinie in Basic Ad-On
     und der Abstand. */
  --basic:      #F6F6F6;   /* Basic: Schrift auf Blau, Kartenflaechen */
  --off:        #F6F6F6;   /* Seitengrund                          */
  --light:      #F6F6F6;   /* abgesetzte Abschnitte                */
  --stone:      #CDD3F0;   /* ruhende Punkte: Ad-On, eine Stufe kraeftiger */
  --line:       #E3E6F7;   /* Basic Ad-On: Haarlinien und Raender  */
  --mid:        #8A8A8A;   /* Akzent in grossen Graden: 3,3:1      */
  --graphite:   #6B6B6B;   /* Sekundaertext: 5,1:1                 */
  --dark:       #333333;   /* kraeftiges Grau                      */
  --black:      #111111;   /* Schrift und schwarze Elemente        */
  /* INK, der Fliesstext. In der Brand Bible ist das Feld schwarz
     ausgefuellt, die Beschriftung #F2F2F2 darunter gehoert nicht dazu.
     Schwarz also, wie das Feld es zeigt. */
  /* INK. Traegt den Fliesstext, so wie die Brand Bible es fuehrt.
     16,9:1 auf dem hellen Grund. Beschriftungen, Kicker und
     Bildunterschriften bleiben auf Graphit: sie sind kein Fliesstext,
     und drei gleich dunkle Ebenen uebereinander nehmen der Seite die
     Gliederung. */
  --ink:        #111111;
  /* Markenblau. 9,7:1 auf Weiss, taugt also auch fuer kleine Schrift, und
     Weiss darauf ebenso. Traegt Ueberschriften, Akzente, Knoepfe und die
     dunklen Flaechen. */
  --kobalt:     #1b32b4;
  /* Dunklere Stufe fuer das Ueberfahren der blauen Knoepfe. */
  --kobalt-tief:#152897;
  /* Das Orange der Brand Bible (#F87C00) bleibt auf Wunsch aussen vor.
     Die Seite kommt mit dem Markenblau als einzigem Akzent aus. */
  /* Aufgehellte Stufe des Markenblaus, nur fuer Schrift auf dunklem Grund.
     Das reine #1b32b4 kommt auf dem abgedunkelten Hero-Foto auf 1,52:1 und
     ist dort nicht lesbar; noetig sind 3:1. Diese Stufe, 45 Prozent Richtung
     Weiss, erreicht 4,8:1 und bleibt als Markenblau erkennbar. */
  --kobalt-hell:#828ed6;
  /* Eine Familie fuer alles. Die beiden Namen bleiben getrennt, weil sie
     unterschiedliche Rollen bezeichnen und je Rolle nachjustiert werden. */
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-prose: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --nav-h:      68px;
  /* Luft ueber und unter dem klebenden Fotofenster in Kapitel 6 */
  --szene-luft: clamp(20px, 3.5vh, 48px);
  /* Nachlauf hinter der letzten Station in Kapitel 6. Er verlaengert die
     Spalte und damit die Klebestrecke des Fotofensters: sonst loest das
     Foto los, bevor das vierte Bild ueberhaupt erscheint. An der
     Fensterhoehe bemessen, weil die Ausloeseschwelle es auch ist. */
  --achse-nachlauf: clamp(320px, 60vh, 680px);
  /* Deutlich hoeher als zuvor 1180: auf breiten Bildschirmen blieben
     dadurch links und rechts grosse Streifen leer. Das Vorbild kennt
     gar keine Obergrenze, nur einen Rand von rund 3,8 Prozent. Hier
     eine Obergrenze, damit Textzeilen nicht beliebig lang werden. */
  --maxw:       1680px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-quart: cubic-bezier(.25,1,.5,1);
  --ease-expo:  cubic-bezier(.16,1,.3,1);
  /* Laengerer Auslauf als quart, sanfterer Anlauf als expo. Fuer die
     Schleier-Aufdeckung, die am Ende deutlich austrudeln soll. */
  --ease-quint: cubic-bezier(.22,1,.36,1);
  font-synthesis: none;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Platz fuer die Scrollleiste dauerhaft freihalten. Sonst rutscht der
     ganze Inhalt seitwaerts, sobald die Auftaktsperre das Scrollen
     abschaltet und die Leiste verschwindet. */
  scrollbar-gutter: stable;
}
/* Auftaktsperre: das Scrollen ruht, bis die Anfangsanimation durch ist. */
html.scroll-gesperrt { overflow: hidden; }

/* Traegheitsscrollen (Lenis).
   Solange Lenis laeuft, muss das native scroll-behavior aus sein, sonst
   ueberlagern sich zwei Glaettungen. Ohne Lenis bleibt die Regel oben aktiv. */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-stopped { overflow: hidden; }
html.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  font-family: var(--font-ui);
  color: var(--black);
  background: var(--off);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Sichtbarer Fokus fuer Tastaturbedienung (WCAG 2.4.7).
   :focus-visible greift nur bei Tastatur, nicht bei Mausklick. */
:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 3px;
}
.hero-full :focus-visible,
.quote-block :focus-visible { outline-color: var(--basic); }   /* auf dunklem Grund */
/* Rand waechst mit dem Fenster statt fest bei 24px zu bleiben. */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 3.6vw, 56px); }

/* Extrafett nach Vorgabe der Brand Bible. Das engere Sperren faengt
   die groessere Masse der 800er-Schnitte ab. */
h1,h2,h3 { font-family: var(--font-ui); letter-spacing: -0.028em; line-height: 1.06; font-weight: 800; }
.hl { color: var(--kobalt); }
.lead { font-size: var(--text-flies); color: var(--ink); font-weight: 400; }
/* Die Kategoriezeile ueber jeder Ueberschrift. In .78rem (12,5px) war
   sie gegen die Ueberschriften darunter kaum noch zu sehen. Jetzt
   mitwachsend und rund ein Viertel groesser; die Sperrung wird dabei
   etwas enger, weil groessere Versalien weniger davon brauchen.
   Hero und "Die Chance" haben eigene Werte und bleiben unberuehrt. */
.kicker {
  font-size: clamp(.9rem, 1.05vw, 1.02rem); font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink); margin-bottom: clamp(20px, 2vw, 26px);
}
/* Die Rollenzeile steht weiter unten bei den uebrigen .person-Regeln.
   Hier stand sie doppelt und wurde dort wieder ueberschrieben. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 15px 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: transform .312s var(--ease), background .312s var(--ease),
              color .312s var(--ease), border-color .312s var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform .312s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--kobalt); color: var(--basic); }
.btn-primary:hover { background: var(--kobalt-tief); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--black); border-color: var(--stone); }
.btn-secondary:hover { border-color: var(--black); transform: translateY(-1px); }
/* Der Kontaktknopf sass eng: 22 Pixel Polster bei 30 Pixel Abstand zu
   den Nachbarn liessen ihn gedraengt wirken, und der Pfeil klebte am
   Wort. Mehr Luft ringsum und zwischen beiden. */
.btn-sm { padding: 11px 26px; font-size: .9375rem; gap: .75em; }

.textlink {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.textlink .arrow { transition: transform .312s var(--ease); }
.textlink:hover .arrow { transform: translateX(4px); }

/* ---------- Logo ---------- */
/* Das Markenzeichen aus der Brand Bible: quadratisch, das abgerundete
   Quadrat im Markenblau steckt schon im Bild. */
.umark { width: 27px; height: 27px; flex: none; display: block; }
.umark.klein { width: 23px; height: 23px; }
/* Wort zuerst, Zeichen dahinter, wie die Brand Bible es zeigt.
   In Markenblau statt in Schwarz: das Logo ist blau. */
.brand { display: flex; align-items: center; gap: 10px; color: var(--kobalt); }
.brand .word { font-weight: 700; letter-spacing: .16em; font-size: .92rem; text-transform: uppercase; }

/* ---------- Navigation ---------- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h);
  /* Basic mit Durchlass, damit die Leiste denselben Ton hat wie die Seite
     darunter. */
  background: rgba(246,246,246,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .375s var(--ease);
}
header.nav.scrolled { border-color: var(--line); }

/* Milchglas unter der Leiste, an designbybrandin.com gemessen.
   Fuenf Ebenen, deren Unschaerfe sich je verdoppelt (1,125 / 2,25 / 4,5
   / 9 / 18), jede per Maske auf ein eigenes Band begrenzt. Weil sie sich
   ueberlagern, entsteht oben die volle Milchigkeit und nach unten ein
   Verlauf ins Klare, statt einer Kante wie bei einer einzelnen Unschaerfe.
   Der Streifen liegt unter der Leiste: deren Grund und damit die
   Lesbarkeit der Links bleiben unberuehrt. */
.nav-glas {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  height: 96px; z-index: 199; pointer-events: none;
  /* Bewusst keine Deckkraft an diesem Element: ein Elternteil mit
     opacity unter 1 wird zur isolierten Gruppe, und backdrop-filter an
     seinen Kindern hat dann nichts mehr zum Abtasten. Gesteuert wird
     stattdessen die Unschaerfe selbst, siehe unten. */
}
.nav-glas i {
  position: absolute; inset: 0; display: block;
  /* Die Staerke haengt an der Scrollposition: --glas laeuft von 0 auf 1.
     Bei 0 ist die Unschaerfe 0 und damit wirkungslos, ohne dass
     irgendwo eine Deckkraft im Spiel waere. Ohne JavaScript bleibt
     --glas ungesetzt und faellt auf 0: der Streifen zeigt nichts. */
  -webkit-backdrop-filter: blur(calc(var(--b) * var(--glas, 0)));
  backdrop-filter: blur(calc(var(--b) * var(--glas, 0)));
  -webkit-mask-image: linear-gradient(to top, transparent var(--von), #000 var(--bis));
  mask-image: linear-gradient(to top, transparent var(--von), #000 var(--bis));
}
/* Drei Ebenen statt der fuenf des Vorbilds. Gemessen kostet nicht die
   Streifenhoehe, sondern die Zahl der Ebenen: mit fuenf rissen sechs
   Bilder die 32ms, mit drei keines. Die Spanne bleibt dieselbe, von
   1,125px bis 18px, nur in groesseren Schritten. */
.nav-glas i:nth-child(1) { --b: 1.125px; --von: 0%;    --bis: 33.3%; }
.nav-glas i:nth-child(2) { --b: 4.5px;   --von: 33.3%; --bis: 66.6%; }
.nav-glas i:nth-child(3) { --b: 18px;    --von: 66.6%; --bis: 100%; }
/* Ohne Unterstuetzung fuer backdrop-filter bliebe ein unsichtbarer
   Kasten stehen. Dann gar nicht erst anzeigen. */
@supports not (backdrop-filter: blur(1px)) {
  .nav-glas { display: none; }
}
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
/* Etwas mehr Abstand zwischen den Punkten, und der Knopf bekommt links
   zusaetzlich Luft: er ist eine Flaeche, kein Wort, und braucht Abstand
   zum letzten Textpunkt. */
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a.btn { margin-left: 6px; }
.nav-links a {
  /* 600 statt 500: in der Leiste stehen die Punkte einzeln und klein,
     da traegt der halbfette Schnitt besser. */
  font-size: .9375rem; color: var(--ink); font-weight: 600;
  padding: 4px 0; border-bottom: 1.5px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav-links a:hover { color: var(--black); border-color: var(--black); }
.nav-links a.active { color: var(--black); border-color: var(--black); }
/* Buttons in der Navigation behalten ihre eigene Schriftfarbe.
   Ohne diese Zeile sticht .nav-links a die Button-Regel aus und der
   Kontakt-Knopf bekaeme graue Schrift auf Schwarz (3,5:1). */
/* .nav-links a ist spezifischer als .btn-sm und hat dessen Polster auf
   4px 0 zurueckgesetzt: der Knopf sass deshalb eng um seine Schrift.
   Hier steht es wieder, mit genug Spezifitaet. */
.nav-links a.btn-primary {
  color: var(--basic); border-bottom-color: transparent;
  padding: 11px 26px; gap: .75em;
}
.nav-links a.btn-primary:hover { border-bottom-color: transparent; }
/* Derselbe Fall auf den Rechtsseiten: dort steht in der Leiste der
   Zurueck-Knopf als .btn-secondary und verlor aus demselben Grund sein
   Polster und seinen Rahmen - gemessen 4px 0 und ohne Rand. Er sah
   dadurch aus wie ein gewoehnlicher Textlink. */
.nav-links a.btn-secondary {
  padding: 11px 26px; gap: .75em;
  border: 1px solid var(--stone); border-bottom-color: var(--stone);
}
.nav-links a.btn-secondary:hover { border-color: var(--black); }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: var(--black); }
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: var(--off); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 24px 20px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; font-size: 1.05rem; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links a:last-child { border-bottom: 0; }
}

/* ---------- Sections ---------- */
main { padding-top: var(--nav-h); }
/* Ein Wert fuer den Abstand zwischen zwei Kapiteln, oben wie unten.
   Er stand auf 130px, die Luecke zwischen zwei Kapiteln war damit 260px.
   Jetzt 80px, also 160px Luecke. Alles, was davon abweicht, steht
   weiter unten und begruendet sich dort. */
section { padding: var(--kapitel-luft) 0; }
.alt { background: var(--light); }
.center { text-align: center; }

/* ---------- Intro-Animation ---------- */
/* ===========================================================
   Intro: Die Blende öffnet sich.
   Der Punkt der Wortmarke ist das Blendenzentrum. Die Fläche zieht
   sich darin zusammen, das Hero-Bild zieht die Schärfe nach, danach
   fahren die Headline-Zeilen als Masken-Wipe hoch.

   Alle Startzustände hängen an .js auf <html>. Ohne JavaScript
   ist die Seite vollständig sichtbar, es wird nichts weggeblendet.
   =========================================================== */

/* ===========================================================
   Wortmarke und Vorhang

   nach dem Aufziehen. Die Wortmarke bleibt und wandert beim Scrollen
   zusammen nach oben, wo sie zum Logo wird.

   Drei Ebenen, damit sich nichts ins Gehege kommt:
     .wm-flug  → Flug zur Navigation (verschieben und verkleinern)
     .bs       → Spreizen der Buchstaben (X)
     .bs > span→ Aufziehen beim Start (Y)
   Ohne JavaScript erscheint nichts davon.
   =========================================================== */
#wortmarke { display: none; }

.js-intro #wortmarke {
  position: fixed; z-index: 210;
  /* Der Kasten geht ueber die volle Fensterbreite, sichtbar sind darin
     nur die Buchstaben in der Mitte. Ohne diese Zeile faengt der leere
     Rest die Klicks ab: gemessen ein unsichtbares Band von 1354 mal
     122 Pixeln quer ueber den Bildschirm, mit z-index 210 ueber allem.
     Wer dort auf ein Eingabefeld klickte, traf stattdessen diesen Link
     auf #auftakt und landete am Seitenanfang. Anklickbar sind jetzt nur
     noch die Buchstaben selbst. Die Tastaturbedienung bleibt
     unberuehrt, pointer-events wirkt allein auf den Zeiger. */
  pointer-events: none;
  /* Blau auf hellem Grund, weiss sobald der Auftakt blau wird. Den
     Mischwert liefert dieselbe Zahl wie fuer den Hintergrund. */
  color: color-mix(in srgb, var(--basic) calc(var(--wm-hell, 0) * 100%), var(--kobalt));
  /* Mittig auf dem Auftakt. Ohne Uebergang, sonst misst der Flug sein
     Ziel gegen eine Position, die noch wandert. */
  top: 50vh; left: 0; right: 0;
  display: flex; justify-content: center;
  transform: translateY(-50%);
  text-decoration: none;
}

.wm-flug {
  display: inline-block; transform-origin: 0 50%;
  transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(var(--fs, 1));
  will-change: transform;
}
.wm-wort {
  /* Gegenstueck zu pointer-events: none am Link darueber: anklickbar
     sind nur die Buchstaben, nicht das leere Band ringsum. */
  pointer-events: auto;
  /* Kompakt und fett, wie die Vorlage das Logo zeigt: eng gesetzt, im
     Extrafett-Schnitt, das Zeichen unmittelbar hinter dem Punkt. */
  display: flex; align-items: baseline;
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 8rem); line-height: 1;
  letter-spacing: -.035em; white-space: nowrap;
}

/* Spreizen */
/* Die Buchstaben ziehen sich beim Aufschlag auseinander und laufen beim
   Scrollen zusammen. Der geschlossene Zustand ist das Logo: eng gesetzt,
   extrafett, das Zeichen am Punkt. Das Spreizen ist also die Bewegung
   dorthin, nicht die Form selbst. */
.wm-wort .bs {
  display: inline-block;
  transform: translateX(calc(var(--k) * var(--spread, 0) * 6vw));
  transition: transform 1.562s var(--ease-expo);
  will-change: transform;
}
/* Beim Scrollen folgt das Spreizen unmittelbar, ohne Nachlauf */
.wm-scrollt .wm-wort .bs { transition: none; }

/* Aufziehen beim Start */
.wm-wort .bs > span {
  display: inline-block;
  opacity: 0; transform: translateY(.42em);
  animation: buchstabeAuf .938s var(--ease-quart) forwards;
  animation-delay: calc(var(--n) * 55ms + 120ms);
}

/* Echter Kreis statt des eckigen Punktzeichens der Schrift */
/* Letzter Platz der Wortmarke: statt eines Buchstabens das Zeichen.
   Etwas ueber der Grundlinie, damit es auf der Versalhoehe sitzt statt
   darauf zu stehen. */
.wm-wort .ist-zeichen > span { margin-left: .06em; }
.wm-wort .ist-zeichen img {
  display: block; width: .92em; height: .92em; transform: translateY(.1em);
}
.wm-wort .ist-punkt > span {
  /* Der Punkt sitzt am E, nicht frei dazwischen. */
  width: .155em; height: .155em; border-radius: 50%;
  background: currentColor; margin: 0 .04em 0 .01em;
}

@keyframes buchstabeAuf {
  from { opacity: 0; transform: translateY(.42em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Solange die Wortmarke lebt, tritt das feste Logo zurueck */
.js-intro .nav a.brand { opacity: 0; pointer-events: none; }

@media (max-width: 700px) {
  /* 6,4vw statt 8vw. Bei 375px Breite schob 8vw das aeusserste Zeichen
     auf -3px und das Markenzeichen auf 378px: beide waren im gespreizten
     Anfangszustand angeschnitten, und das ist das Erste, was jemand auf
     dem Handy sieht. Mit 6,4vw bleiben rund 17px Luft je Seite. */
  .wm-wort .bs { transform: translateX(calc(var(--k) * var(--spread, 0) * 6.4vw)); }
}

@media (prefers-reduced-motion: reduce) {
  .js-intro #wortmarke { display: none; }
  .js-intro .nav a.brand { opacity: 1; pointer-events: auto; }
}

/* --- Startzustände, nur mit aktivem JavaScript --- */
.js-intro .nav .brand { opacity: 0; transition: opacity .688s var(--ease-quart); }
.js-intro .hero-full .bg {
  transform: scale(1.2) translateY(2.5%); filter: blur(18px);
  transition: transform 3s var(--ease-expo), filter 2.375s var(--ease-quart);
  will-change: transform, filter;
}
.js-intro .hero-full .kicker {
  opacity: 0; transform: translateY(20px);
  transition: opacity .875s var(--ease-quart), transform .875s var(--ease-quart);
}
/* Nur noch Zeilenumbruch. Die Einblendung sitzt auf .hero-tafel und
   haengt am Scrollen: die Headline liegt beim Laden unter der Falte, eine
   Choreografie beim Laden waere dort nie zu sehen. */
.hero-full h1 .ln { display: block; padding-bottom: .04em; }
.hero-full h1 .ln > span { display: block; }

/* --- Zielzustände --- */
.nav-in .nav .brand { opacity: 1; }
.hero-in .hero-full .bg { transform: scale(1) translateY(0); filter: blur(0); }
.hero-in .hero-full .kicker { opacity: 1; transform: none; transition-delay: 0s; }

/* Nach der Choreografie will-change wieder abgeben */
.motion-done .hero-full .bg,
.motion-done .wm-flug { will-change: auto; }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } }

/* ===========================================================
   Vorhang: der Hero bleibt stehen, die Seite schiebt sich darueber.

   Der Hero klebt oben fest, alles danach laeuft mit voller
   Geschwindigkeit darueber hinweg und deckt ihn zu. Damit das traegt,
   muss jeder folgende Abschnitt deckend sein, sonst scheint der Hero
   hindurch. Deshalb der Grundwert hier.
   =========================================================== */
main > section { position: relative; z-index: 1; background: var(--off); }
/* Das Laufband ist kein section, braucht die Schichtung des Vorhangs aber
   genauso: sonst bliebe es hinter dem Hero zurueck statt mit darueber
   zu ziehen. Deckend ist es durch seinen eigenen Grund. */
.band {
  position: relative; z-index: 1;
  background: var(--kobalt); color: var(--basic);
  padding: clamp(14px, 2vw, 22px) 0; overflow: hidden;
}
.band-spur {
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  width: max-content;
  font-size: clamp(1.1rem, 2.4vw, 2.2rem); font-weight: 500; letter-spacing: -.02em;
  animation: bandLauf 38s linear infinite;
}
.band .pkt { width: .34em; height: .34em; border-radius: 50%; background: currentColor; flex: none; }
@keyframes bandLauf { to { transform: translateX(-50%); } }
/* Haelt an, solange jemand darauf zeigt oder darin Fokus hat. Ein
   vollwertiger Halteknopf fehlt noch, siehe Hinweis an den Auftraggeber. */
.band:hover .band-spur,
.band:focus-within .band-spur { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .band-spur { animation: none; }
}

/* ---------- Hero (Vollfläche, Film) ---------- */
.hero-full {
  /* Bleibt oben stehen, waehrend der Vorhang darueber zieht. */
  position: sticky; top: 0; z-index: 0; background: none;
  /* Der Film soll das ganze Fenster fuellen. svh statt vh, sonst schiebt
     die Adressleiste auf Mobilgeraeten den unteren Rand aus dem Bild. */
  height: 100vh;
  height: 100svh;
  display: grid; align-items: center;
  padding: clamp(72px,10vw,120px) 0;
  overflow: hidden;
}
/* Die Huelle driftet beim Vorhang mit 10 Prozent der Scrollstrecke nach
   oben, wie im Vorbild. Sie ist dafuer 120 px hoeher als der Hero, sonst
   liefe beim Driften unten eine Kante ins Bild. */
.hero-bild {
  position: absolute; inset: 0;
  height: calc(100% + 120px);
  transform: translateY(var(--drift, 0px));
}
.hero-full .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Zwei Spuren uebereinander. Die vordere laeuft, die hintere laedt still
   den naechsten Clip und wird eingeblendet, kurz bevor die erste endet.
   Ein einzelnes Element mit Quellwechsel wuerde schwarz aufblitzen. */
.film { position: absolute; inset: 0; }
.film-spur {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.375s var(--ease-quart);
}
.film-spur.ist-vorn { opacity: 1; }

/* Halt fuer die Bewegung. Sichtbar erst, wenn wirklich ein Film laeuft. */
.film-halt {
  position: absolute; z-index: 3;
  right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 4vw, 40px);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 18px;   /* 44px Zielflaeche, WCAG 2.5.8 */
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  /* Dicht genug, dass Weiss auch ueber den hellsten Stellen des Films
     ueber 4,5:1 bleibt. Bei .55 waren es nur rund 3,9:1. */
  background: rgba(17,17,17,.78);
  color: var(--basic); font-family: var(--font-ui); font-size: .8rem;
  letter-spacing: .04em; cursor: pointer;
  transition: background .312s var(--ease-quart), border-color .312s var(--ease-quart);
}
.film-halt:hover { background: rgba(17,17,17,.92); border-color: rgba(255,255,255,.75); }
.film-halt-zeichen {
  width: 10px; height: 12px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
/* Angehalten: aus den zwei Balken wird ein Dreieck */
.film-halt[aria-pressed="true"] .film-halt-zeichen {
  width: 0; height: 0; border: none;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
@media (max-width: 560px) { .film-halt-text { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* Dunkler Schleier, auf Wunsch des Auftraggebers.
   Damit kann das Markenblau hier nicht stehen: es kommt auf dunklem
   Grund hoechstens auf 2,45:1, selbst gegen reines Schwarz. Die
   Betonung laeuft deshalb ueber den Tonwert statt ueber Farbe. */
.hero-full .veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.68) 46%, rgba(17,17,17,.40) 100%);
}
/* Zweite Lage nur hinter dem Text. Der Film bringt helle Fenster mit,
   ohne sie faellt die Schrift dort auf 4:1. */
.hero-full .veil::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(17,17,17,.55) 0%, rgba(17,17,17,.36) 30%, rgba(17,17,17,0) 58%);
}
.hero-full .wrap { position: relative; }

/* Kein eigener Grund fuer die Schrift: Kasten und weicher Hof haben
   beide nicht getaugt. Der Hero traegt die Betonung deshalb ueber den
   Tonwert. Das Markenblau kann hier nicht stehen, es hat eine
   Leuchtdichte von 0,07 und kommt auf dunklem Grund nie ueber 2,45:1. */
/* Waehrend der Vorhang zieht, laeuft die Schrift mit halber Scroll-
   geschwindigkeit nach oben und wird dadurch vom Vorhang eingeholt. */
.hero-tafel {
  display: block;
  /* Zwei Bewegungen uebereinander: die Drift des Vorhangs, und ein
     zusaetzlicher Hub, der mit dem Ausblenden waechst. Ohne den zweiten
     wuerde die Schrift nur dunkler, statt sich fortzubewegen. */
  transform: translateY(calc(var(--drift-text, 0px) + var(--tafel-hub, 0px)));
  /* Blendet aus, waehrend der Vorhang sie einholt, und beim
     Zurueckscrollen wieder auf. Ohne JavaScript bleibt sie sichtbar. */
  opacity: var(--tafel-auf, 1);
}
/* Scrollgekoppelte Drift ist genau die Bewegung, die dieser Vorbehalt
   meint. Muss hinter beiden Regeln stehen: eine Medienabfrage erhoeht
   die Spezifitaet nicht, es entscheidet allein die Reihenfolge. */
@media (prefers-reduced-motion: reduce) {
  .hero-bild, .hero-tafel { transform: none; }
}
/* Deutlich groesser als der Kicker in den Kapiteln: hier traegt er die
   Aussage, mit der die Seite beginnt, und steht auf ganzer Breite ueber
   einem Foto. In .78rem verlor er sich darauf.
   Der Zeilenumbruch wird zugelassen, sonst schiebt sich der Satz auf
   schmalen Bildschirmen aus dem Bild. */
.hero-full .kicker {
  color: rgba(255,255,255,.88);
  font-size: clamp(.92rem, 1.45vw, 1.25rem);
  letter-spacing: .13em; line-height: 1.5;
  max-width: 46ch; margin-bottom: clamp(22px, 2.4vw, 32px);
}
.hero-full h1 { color: rgba(255,255,255,.74); font-size: clamp(2.8rem, 8.8vw, 8rem); max-width: 13ch; line-height: .96; }
/* Markenblau ohne hellen Grund, auf ausdrueckliche Entscheidung des
   Auftraggebers und in Kenntnis der Folge: gegen den dunklen Schleier
   ergibt das 1,11:1. Die Farbe ist dieselbe wie auf der uebrigen Seite,
   sie tritt hier nur kaum hervor. Bewusst so gewaehlt. */
.hero-full h1 .hl { color: var(--kobalt); }

/* ---------- Seiten-Header (Unterseiten) ---------- */
.page-head { padding: clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px); }
.page-head h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); max-width: 18ch; }
.page-head .lead { margin-top: 22px; max-width: 46ch; }

/* ---------- Zwei-Spalten ---------- */
/* Fotos driften im eigenen Rahmen, gemessen am Vorbild: das Bild ist
   120 Prozent hoch, der Rahmen schneidet ab, und der Versatz betraegt
   8 Prozent des Abstands zwischen Rahmenmitte und Fenstermitte. Der
   Rahmen traegt jetzt Format und Radius, weil das Bild darin nicht
   mehr zur Layouthoehe beitraegt. Ohne JavaScript und bei reduzierter
   Bewegung bleibt es schlicht mittig stehen. */
.pfoto {
  position: relative; overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: clamp(14px, 2vw, 24px);
}
.pfoto img {
  position: absolute; left: 0; top: 50%;
  /* 135 statt 120 Prozent: der laengere Weg braucht mehr Spielraum, sonst
     saettigt die Bewegung, bevor sie fertig ist. object-fit: cover haelt
     dabei das Seitenverhaeltnis, das Bild wird also enger beschnitten,
     aber nicht verzerrt. Es wird ausschliesslich verschoben, nie skaliert. */
  /* Der Ueberhang ist je Rahmen einstellbar. 35 Prozent sind die Regel;
     Bilder, deren Motiv dicht an der oberen Kante sitzt, bekommen weniger,
     sonst schneidet der Rahmen Koepfe ab. app.js liest denselben Wert und
     bemisst den Weg danach. */
  width: 100%; height: calc(100% * (1 + var(--ueberhang, .35)));
  object-fit: cover;
  transform: translateY(calc(-50% + var(--pf, 0px)));
}
@media (prefers-reduced-motion: reduce) {
  .pfoto img { transform: translateY(-50%); }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.split.wide-left { grid-template-columns: .92fr 1.08fr; }   /* Bildspalte breiter */
.split .pfoto-weit { box-shadow: 0 40px 78px -46px rgba(17,17,17,.45); }
.split h1, .split h2 { font-size: clamp(2.3rem, 6.2vw, 5.4rem); line-height: .98; }
.split p { margin-top: 18px; color: var(--ink); }
.split .btn, .split .textlink { margin-top: 30px; }
@media (max-width: 860px){ .split, .split.wide-left { grid-template-columns: 1fr; } }

.badge-note {
  display: inline-block; margin-top: 28px; padding: 10px 18px;
  border: 1px solid color-mix(in srgb, var(--kobalt) 38%, transparent); border-radius: 999px;
  font-size: .84rem; font-weight: 600; letter-spacing: .04em; color: var(--kobalt);
}

/* ---------- Zitat-Block ---------- */
/* Der Zitat-Einschub setzt sich über Typo, Luft und Haarlinien ab,
   nicht über eine Farbfläche. Ruhiger, aber immer noch klar eine eigene Sektion. */
/* Der blaue Block bringt selbst kein Weiss mit. Damit die Luecke davor
   und dahinter so gross ist wie zwischen zwei hellen Kapiteln, stellen
   seine Nachbarn sie allein. */
#wege { padding-bottom: calc(var(--kapitel-luft) * 2); }
#kontakt { padding-top: calc(var(--kapitel-luft) * 2); }

.quote-block {
  background: var(--kobalt); color: var(--basic); text-align: center;
  padding-top: calc(var(--kapitel-luft) * 1.6); padding-bottom: calc(var(--kapitel-luft) * 1.6);
}
/* Die Anfuehrungszeichen gehoeren in den Satz, nicht als einzelnes
   Zeichen darueber. Etwas kleiner als der Text und heller, damit sie
   das Zitat rahmen, ohne es anzufuehren. */
.quote-block .anf { color: rgba(255,255,255,.42); font-weight: 700; }
.quote-block blockquote {
  font-size: clamp(2rem, 5.6vw, 5rem); font-weight: 500; color: var(--basic);
  letter-spacing: -.038em; line-height: .98; max-width: 20ch; margin: 0 auto;
  text-wrap: balance;
}

/* ---------- Angebots-Karten ---------- */
.offer-head { max-width: 34rem; margin-bottom: clamp(44px,6vw,68px); }
.offer-head.center { max-width: 44rem; margin-left: auto; margin-right: auto; }
/* Die lange Ueberschrift bei "Das Team" lief in 44rem auf vier Zeilen.
   Gemessen: 48rem ergibt drei, erst 70rem ergibt zwei - und 70rem waere
   auf schmaleren Bildschirmen sofort wieder drei. Also drei Zeilen, mit
   Luft, und text-wrap: balance verteilt sie gleichmaessig.
   Eigene Klasse statt :has(), damit der kurze Coaching-Kopf daneben
   unveraendert zweizeilig bleibt. */
.offer-head.center.breit { max-width: 52rem; }
.offer-head.center.breit h2.weit { max-width: 52rem; text-wrap: balance; }
/* Im Gestaltungsmodus auf 69,5px gesetzt und hier uebernommen. Statt des
   festen Werts eine Klammer, die auf allen breiten Bildschirmen dort
   landet und auf dem Handy den bisherigen Grad behaelt. */
.offer-head h2 { font-size: clamp(2.3rem, 5.6vw, 4.35rem); line-height: .98; }
/* Ohne Kapitelzeile darueber stand die Teamzeile zu eng. Mehr Durchschuss
   und mehr Breite, damit sie atmet statt zu stauchen. */
.offer-head h2.weit { line-height: 1.1; max-width: 22ch; margin-inline: auto; }
.offer-head .sub { margin-top: 16px; font-size: 1.2rem; color: var(--ink); font-weight: 600; }
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.offer {
  background: var(--basic); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 26px 28px; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.alt .offer { background: var(--off); }
.offer:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -28px rgba(17,17,17,.34); }
.offer .num {
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--ink);
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.offer h3 { font-size: 1.22rem; font-weight: 700; margin-bottom: 12px; }
.offer p { color: var(--ink); font-size: .975rem; flex: 1; margin-bottom: 22px; }
.offer .textlink { font-size: .8rem; }
@media (max-width: 1000px){ .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .offer-grid { grid-template-columns: 1fr; } }

/* ---------- CTA-Sektion ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); max-width: 20ch; margin: 0 auto; }
.cta-band .btn { margin-top: 34px; }

/* ---------- Leistungs-Blöcke (alternierend, rundes Bild) ---------- */
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,84px); align-items: center; }
.service-block + .service-block { margin-top: clamp(64px,9vw,120px); }
.service-block.flip .media { order: 2; }
.service-block .media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 36px 70px -44px rgba(17,17,17,.45);
}
.service-block h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.service-block .sub { margin-top: 12px; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.service-block p { margin-top: 20px; color: var(--ink); }
.service-block .note { margin-top: 18px; font-style: italic; color: var(--ink); }
.service-block .btn { margin-top: 30px; }
@media (max-width: 860px){
  .service-block, .service-block.flip .media { grid-template-columns: 1fr; order: 0; }
}

/* ---------- Gründerinnen ---------- */
/* Der Sonderwert von 80px stand hier, weil das alte Grundpolster von
   130px unter der luftigen Brettbuehne als leeres Band wirkte. Das
   Grundpolster ist jetzt selbst 80px, die Ausnahme also erledigt. */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); }
.person { text-align: left; }
/* Kein Kreis mehr: hochformatig und ueber die volle Spaltenbreite.
   Der Kreis schnitt die Portraets eng und liess sie klein wirken. */
.person .pfoto {
  margin: 0 0 24px; box-shadow: 0 34px 60px -40px rgba(17,17,17,.42);
}
.person h3 { font-size: 1.5rem; margin-bottom: 10px; }
/* Die Rollenzeile traegt den Akzent. Weiter oben stand dafuer schon eine
   Regel, die hier mit gleicher Selektorstaerke auf Grau zurueckgesetzt
   wurde: die spaetere gewinnt, das Blau war also wirkungslos. Jetzt an
   einer Stelle. 7,3:1 auf dem hellen Grund, reicht auch fuer diesen Grad. */
.person .role {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kobalt); margin-bottom: 18px; line-height: 1.7;
}
/* Name, Rollenzeile und Biotext teilen sich eine linke Kante. Vorher
   zentrierte "margin: 0 auto" die beiden Absaetze in der Spalte, nur die
   Ueberschrift stand am Rand - die Rollenzeile sass dadurch eingerueckt. */
.person p { color: var(--ink); max-width: 38ch; margin: 0; text-align: left; }
.person .socials { justify-content: flex-start; margin-top: 22px; }
@media (max-width: 760px){ .people { grid-template-columns: 1fr; } }

/* ---------- Socials ---------- */
.socials { display: flex; gap: 12px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--stone);
  display: grid; place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
/* Blau beim Ueberfahren, wie bei den Knoepfen: auf dieser Seite steht
   Blau fuer Handlung, und diese Kreise sind Links. */
.socials a:hover { border-color: var(--kobalt); background: var(--basic); }
.socials a:hover svg { stroke: var(--kobalt); }
.socials svg {
  width: 18px; height: 18px; stroke: var(--black); fill: none;
  transition: stroke .25s var(--ease);
}

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,84px); align-items: start; }
/* Ohne eigene Regel blieb der Schlusssatz bei 24 px und fiel damit aus
   der neuen, groesseren Skala heraus. */
#kontakt h2 { font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: .98; }
.contact-info { margin-top: 40px; display: grid; gap: 24px; }
.contact-info .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 5px; }
.contact-info .val { font-size: var(--text-flies); font-weight: 600; }
.contact-info .val a { display: inline-block; padding: 3px 0; }
form.contact { background: var(--basic); border: 1px solid var(--line); border-radius: 20px; padding: clamp(26px,4vw,40px); display: grid; gap: 18px; }
form.contact label { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 8px; }
form.contact input, form.contact textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--black);
  background: var(--off); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: border-color .25s var(--ease);
}
/* 88 statt 140 Pixel: die Feldhoehe sagt, wie viel Text erwartet wird.
   Ein Kasten ueber sechs Zeilen fordert eine Schilderung an. Wer mehr
   schreiben will, kann das Feld weiterhin aufziehen. */
form.contact textarea { min-height: 88px; resize: vertical; }
.feld-hinweis { margin: 8px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink); }
/* Browser-Standard liegt bei 4,23:1 und damit unter der Anforderung */
/* Einzige Ausnahme: Ein schwarzer Platzhalter sieht aus wie ein
   ausgefuelltes Feld. Der Unterschied zwischen leer und beschrieben
   ginge damit verloren. */
form.contact ::placeholder { color: var(--graphite); opacity: 1; }
form.contact input:focus, form.contact textarea:focus { border-color: var(--black); }
form.contact .btn { justify-self: start; margin-top: 6px; }
@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Offener Punkt (Platzhalter) ---------- */
.open-point {
  border: 1px dashed var(--stone); border-radius: 18px;
  padding: clamp(24px,4vw,38px); background: var(--off);
}
.open-point .tag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;

  text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
}
.open-point h3 { font-size: 1.3rem; margin-bottom: 12px; }
.open-point p { color: var(--ink); }
.open-point ul { margin: 16px 0 0 20px; color: var(--ink); }
.open-point li { margin-bottom: 8px; }

/* ---------- Blaue Karte ---------- */
/* Eine Bauform fuer alle farbigen Flaechen mit heller Schrift: die
   Anliegen-Flaeche in den Einzelcoachings und die vier Themenkarten.
   Vorher stand das nur bei .coach-anliegen; eine zweite Definition
   daneben waere mit der Zeit auseinandergelaufen. */
.karte-blau {
  background: var(--kobalt); color: var(--basic);
  border-radius: 20px;
  padding: clamp(28px, 3.2vw, 44px);
}
/* Deutlich ueber dem Fliesstext. In clamp(1.18rem, 1.8vw, 1.5rem) war
   die Ueberschrift bei 1194px Fensterbreite 21,49px gross und damit
   gemessen kleiner als der Text darunter mit 21,6px - die Rangfolge
   stand auf dem Kopf. Jetzt bleibt sie auf jeder Breite rund ein
   Viertel groesser. */
.karte-blau h3 {
  color: var(--basic);
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.karte-blau p { font-size: var(--text-flies); line-height: 1.55; }
/* Die Anliegen-Flaeche braucht mehr Luft unter ihrer Ueberschrift, weil
   darunter eine Liste steht und kein Absatz. */
.coach-anliegen h3 { margin-bottom: clamp(18px, 2vw, 24px); }

/* ---------- Die Themen der Zukunft ---------- */
/* Fortsetzung von "Wer wir sind", kein eigenes Kapitel. Das Polster
   kommt deshalb von hier und nicht aus der Regel fuer section: eineinhalb
   Kapitelabstaende nach oben, genug um abzusetzen, zu wenig um zu
   trennen. Nach unten nichts, das Kapitel schliesst selbst ab. */
.themen { padding: 0; margin-top: calc(var(--kapitel-luft) * 1.5); }
/* Kleiner als die Kapitelueberschrift darueber: die Rangfolge sagt,
   dass dies dazugehoert und nicht daneben steht. Markenblau nach
   Vorgabe, 8,4:1 auf dem hellen Grund. */
.themen h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem); color: var(--kobalt);
  max-width: 18ch; line-height: 1.04;
}
.themen-auftakt {
  margin-top: 18px; max-width: 62ch;
  font-size: var(--text-flies); line-height: 1.6; text-wrap: pretty;
}
/* Untereinander, auf Wunsch. Die Zweiteilung der Seite steckt dann
   nicht mehr im Raster der Karten, sondern in jeder Karte selbst:
   Titel links, Text rechts. Ueber die volle Breite durchlaufend ergaebe
   der Text sonst eine Zeile von rund hundert Zeichen - lesbar ist etwa
   die Haelfte. So traegt die Breite etwas, statt nur da zu sein. */
.themen-feld {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(12px, 1.3vw, 18px);
  margin-top: clamp(32px, 4vw, 52px);
}
.thema {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: clamp(18px, 3vw, 56px);
  align-items: start;
  /* Flacher als die Anliegen-Flaeche: vier gestapelte Karten mit vollem
     Polster wuerden den Abschnitt unnoetig in die Laenge ziehen. */
  padding: clamp(22px, 2.4vw, 32px) clamp(26px, 3vw, 40px);
}
.thema h3 { margin-bottom: 0; }
.thema p { margin: 0; }
/* Schmale Schirme: wieder untereinander, der Titel bekommt seine Luft
   zurueck. */
@media (max-width: 760px) {
  .thema { grid-template-columns: 1fr; gap: 0; }
  .thema h3 { margin-bottom: 10px; }
}

/* ---------- Rechtstexte: Impressum und Datenschutz ---------- */
/* Lange Lesetexte in einer Spalte. Keine eigene Schriftgroesse: sie
   kommt aus --text-flies wie ueberall sonst. */
.recht { max-width: 70ch; }
.recht h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); color: var(--kobalt);
  margin: clamp(38px, 4.4vw, 58px) 0 14px; line-height: 1.2;
}
.recht h2:first-child { margin-top: 0; }
/* Auch hier: unter 1,6vw rutschte die Zwischenueberschrift unter den
   Fliesstext, der auf 1,35rem gedeckelt ist. */
.recht h3 { font-size: clamp(1.3rem, 1.95vw, 1.55rem); margin: 26px 0 8px; }
.recht p, .recht li { font-size: var(--text-flies); line-height: 1.65; text-wrap: pretty; }
.recht p { margin-bottom: 14px; }
.recht ul { margin: 0 0 14px 20px; }
.recht li { margin-bottom: 8px; }
.recht a { color: var(--kobalt); text-decoration: underline; text-underline-offset: .18em; }
.recht .anschrift { margin-bottom: 14px; line-height: 1.65; font-size: var(--text-flies); }
.recht .stand {
  margin-top: clamp(38px, 4.4vw, 58px); padding-top: 18px;
  border-top: 1px solid var(--line); font-size: .92rem;
}
/* Platzhalter, die das Unternehmen noch bestaetigen muss. Gelb
   hinterlegt, damit sie beim Ueberfliegen nicht durchrutschen - und
   nicht nur farbig, sondern auch im Text als solche benannt. */
.offen {
  background: #FFF3A3; color: var(--ink); font-weight: 700;
  padding: .08em .3em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ---------- Footer ---------- */
footer { padding: clamp(56px,7vw,88px) 0 40px; border-top: 1px solid var(--line); background: var(--off); }
.foot-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot-tag { margin-top: 14px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
/* Padding hebt die Trefferflaeche von 23 auf 31 Pixel (WCAG 2.5.8: min. 24) */
.foot-links a { font-size: .9rem; color: var(--ink); padding: 4px 0; transition: color .25s var(--ease); }
.foot-links a:hover { color: var(--black); }
.foot-bottom {
  margin-top: clamp(36px,5vw,56px); padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
/* Graphite statt hellem Grau: 4,72:1 gegen Off-White, WCAG AA erfuellt */
.foot-bottom p { font-size: .8rem; color: var(--ink); letter-spacing: .04em; }

/* ---------- Reveal ---------- */
/* Die Deckkraft haengt durchgehend an der Scrollposition, nicht an einem
   Schalter: --auf laeuft von 0 an der Bildunterkante auf 1, sobald das
   Element 55 Prozent Bildhoehe erreicht hat, und beim Zurueckscrollen
   denselben Weg zurueck. Der Wert kommt aus app.js.
   Ohne JavaScript bleibt --auf ungesetzt und faellt auf 1: dann steht
   alles einfach da, kein Renderer zeigt leere Abschnitte. */
.reveal {
  opacity: var(--auf, 1);
  /* Der Weg ist die halbe Eigenhoehe, nicht ein fester Pixelwert. An der
     Referenz gemessen: dort liegt das Verhaeltnis bei jedem Element exakt
     bei 0,5, vom 27px hohen Kicker bis zum 288px hohen Absatz. Ein fester
     Wert waere bei kleinen Zeilen zu viel und bei grossen zu wenig.
     Gedeckelt bei 140px: das hoechste Element der Referenz misst 288px und
     kommt damit auf 144. Ohne Deckel schoebe sich unser 663px hoher
     Portraetrahmen um 331px nach unten und waere erst zu sehen, wenn die
     Blende schon durch ist. */
  transform: translateY(calc((1 - var(--auf, 1)) * min(50%, 140px)));
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .offer:hover { transform: none; }

  /* Intro-Choreografie entfällt vollständig: alles sofort sichtbar und scharf */
  .js-intro #intro { display: none; }
  .js-intro .nav .brand,
  .js-intro .hero-full .kicker { opacity: 1; transform: none; transition: none; }
  .js-intro .hero-full .bg { transform: none; filter: none; transition: none; }
}

/* ===========================================================
   Laengere Lesepassagen.
   Seit der Umstellung auf Inter traegt eine Familie die ganze
   Seite. Die Passagen setzen sich nicht mehr ueber die Schriftart ab,
   sondern ueber Gewicht, Zeilenhoehe und Zeilenlaenge.
   =========================================================== */
/* :not(.kicker), weil diese Regel mit 0,1,1 staerker ist als .kicker mit
   0,1,0: die Kategoriezeile in einem .split holte ihre Groesse still aus
   dem Fliesstext und blieb bei jeder Aenderung an .kicker stehen. */
.split p:not(.kicker),
.service-block p:not(.kicker),
.service-block .note,
.person p:not(.role),
.open-point p,
.open-point li {
  font-family: var(--font-prose);
  /* font-optical-sizing entfaellt: die statischen Inter-Schnitte haben
     keine optische Achse,
     die Angabe waere ohne Wirkung. */
  font-size: var(--text-flies);
  line-height: 1.65;
  max-width: 62ch;            /* eine Grotesk laeuft breiter als eine Serife */
  text-wrap: pretty;          /* verhindert einzelne Woerter in der letzten Zeile */
}
.service-block .note { font-style: italic; }

/* ===========================================================
   Schleier-Aufdeckung.
   Ueber dem Satz liegt eine halbtransparente Flaeche in der Farbe des
   Untergrunds. Sie wird von der rechten Kante her zusammengezogen, wodurch
   der Text von links nach rechts hervortritt.
   Die Schrift selbst wird dabei nicht angefasst: sie bewegt sich nicht,
   sie wird nicht zerlegt, und der Uebergang laeuft mitten durch die
   Buchstaben statt von Wort zu Wort zu springen.
   Der Schleier entsteht nur mit .schleier-bereit, die das Skript setzt.
   Ohne JavaScript gibt es ihn gar nicht und der Satz steht offen da.
   =========================================================== */
[data-schleier] { position: relative; }

[data-schleier].schleier-bereit::after {
  content: '';
  position: absolute;
  /* Etwas ueber die Textkante hinaus, damit Ober- und Unterlaengen
     sauber verdeckt werden. */
  inset: -.12em -.02em -.12em 0;
  background: var(--schleier, var(--off));
  /* 0,72 wie im Vorbild (dort rgba(...,.8) mal opacity .9). Der noch nicht
     freigegebene Teil bleibt als heller Schatten stehen, statt ganz zu
     verschwinden. Genau das liest sich als zunehmende Transparenz. */
  opacity: .72;
  transform: scaleX(1);
  transform-origin: 100% 50%;   /* zieht sich nach rechts zusammen */
  pointer-events: none;
}
[data-schleier].schleier-auf::after {
  transform: scaleX(0);
  /* Die Dauer steht nicht fest, sondern kommt je Satz aus dem Skript:
     sie waechst mit der Breite, damit die Kante ueberall gleich schnell
     wandert. Bei fester Dauer laeuft ein breiter Satz spuerbar schneller
     durch als ein schmaler. Der Rueckfallwert gilt, falls kein Skript
     laeuft, dann ist ohnehin kein Schleier da. */
  transition: transform var(--schleier-dauer, 4.125s) var(--ease-quint);
}

/* Der Zitatblock steht auf der abgesetzten Flaeche, nicht auf dem
   Seitengrund. Der Schleier muss dessen Farbe treffen. */
.quote-block [data-schleier] { --schleier: var(--kobalt); }

@media (prefers-reduced-motion: reduce) {
  [data-schleier].schleier-bereit::after { content: none; }
}

/* ===========================================================
   Onepager: die Reise
   =========================================================== */

/* Sprunglink fuer Tastatur- und Screenreader-Bedienung */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--black); color: var(--basic); padding: 12px 20px; border-radius: 999px;
  font-size: .9rem; font-weight: 600; transition: top .25s var(--ease-quart);
}
.skip:focus { top: 16px; }

/* ---------- Kapitel: Die Lage ---------- */
/* Unten knapper als oben: darunter folgt die Luecke, die ihren Inhalt
   ohnehin mittig im Bild fuehrt und dadurch selbst Luft mitbringt. */
/* Das untere Polster war grosszuegig, und darunter folgt mit der Chance
   eine bildschirmhohe Buehne, deren obere Haelfte ohnehin leer ist.
   Zusammen ergab das einen Graben. */
/* Darueber liegt das farbige Laufband. Es bringt selbst kein Weiss mit,
   deshalb stellt dieses Kapitel die ganze Luecke allein: zweimal der
   Kapitelwert statt einmal. Das Polster nach unten bleibt klein, es
   laeuft in die angeheftete Buehne der Chance. */
.kapitel { padding-top: calc(var(--kapitel-luft) * 2); padding-bottom: clamp(24px,3vw,48px); }
.wrap.gross { max-width: 76rem; }
.grossaussage {
  font-family: var(--font-ui); font-weight: 600;
  /* Kleiner als zuvor: der Satz lief ueber sechs Zeilen und fuellte den
     ganzen Bildschirm. Von 8,4vw auf 6,2vw, Deckel von 8,6 auf 5,8rem. */
  font-size: clamp(2.1rem, 6.2vw, 5.8rem); line-height: 1.0; letter-spacing: -.032em;
  text-wrap: balance; margin-bottom: 28px;
}
/* Der Nachsatz darunter ist auf Wunsch entfallen. Ohne ihn stuende der
   Abstand als leeres Band unter der Aussage. */
.grossaussage:last-child { margin-bottom: 0; }
.nachsatz {
  font-family: var(--font-prose); font-optical-sizing: auto;
  font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.6; color: var(--ink);
  max-width: 46ch; text-wrap: pretty;
}

/* ---------- Angeheftete Szene ---------- */
.szene-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px,6vw,88px); align-items: start; }
/* Angeheftet. Sobald es festklebt, legt der Browser dafuer eine eigene
   Ebene an und muss sie rastern: ein ~900 px hohes Element mit grossem
   Bild und weichem Schatten. Das kostet genau ein Einzelbild, immer an
   derselben Stelle. Mit .bereit wird die Ebene vorher angelegt, in Ruhe,
   statt mitten im Scrollen. Das Skript setzt die Klasse im Leerlauf. */
/* Das Fotofenster fuellt beim Kleben die Hoehe unter der Navigation und
   fuehrt sein Bild darin mittig. Vorher klebte es bei nav+48 und behielt
   seine volle Hoehe: gemessen 995px in einem 1000px hohen Fenster, es
   ragte also 111px unter den Bildschirm und war unten abgeschnitten.
   Die Navigation liegt fest ueber der Seite, deshalb beginnt der Bereich
   erst darunter - sonst laege das Foto hinter der Leiste. */
.szene-fix {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  /* Nur senkrecht zentrieren. place-content wuerde auch die Spalte auf
     die Inhaltsbreite schrumpfen, und die leitet sich unten mit 100%
     aus eben dieser Spalte ab: ein Zirkelschluss, das Bild wird null. */
  display: grid; align-content: center; justify-items: center;
}
.szene-fix.bereit { will-change: transform; }
.wege-kopf { margin-bottom: clamp(36px, 5vw, 68px); }
.wege-kopf h2 { font-size: clamp(2.3rem, 6.4vw, 5.6rem); line-height: .98; max-width: 20ch; }
/* Der Schatten sitzt am Rahmen, nicht an den Bildern. Er wird damit
   einmal gerastert statt bei jedem Bildwechsel neu. Ein 78-px-Weichzeichner
   um ein Bild dieser Groesse ist teuer genug, um ein Einzelbild zu kosten. */
.szene-bild {
  position: relative;
  /* Die Breite wird aus der verfuegbaren Hoehe abgeleitet, damit das
     Seitenverhaeltnis 3:4 erhalten bleibt und das Bild nie beschnitten
     wird. Ist die Spalte schmaler, gewinnt sie. */
  width: min(100%, calc((100svh - var(--nav-h) - 2 * var(--szene-luft)) * 3 / 4));
  aspect-ratio: 3/4; border-radius: clamp(14px, 2vw, 24px);
  box-shadow: 0 26px 44px -30px rgba(17,17,17,.42);
}
/* Alle vier Bilder liegen uebereinander. Gewechselt wird ueber Deckkraft,
   nie ueber die Quelle: ein Quellenwechsel zwingt den Browser, die Ebene
   neu aufzubauen, und genau das ruckelte. */
.szene-spur {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
  opacity: 0; transition: opacity .562s var(--ease-quart);
}
.szene-spur.ist-vorn { opacity: 1; }
@media (max-width: 900px) {
  .szene-grid { grid-template-columns: 1fr; }
  .szene-fix { position: static; }
}

/* ---------- Zeitachse ---------- */
.achse { position: relative; padding-left: 46px; padding-bottom: var(--achse-nachlauf); }
/* Die Linie endet bei der letzten Station, nicht am Kasten: der reicht
   durch den Nachlauf weiter, und die Linie liefe sonst ins Leere. */
.achse-linie {
  position: absolute; left: 7px; top: 12px;
  bottom: calc(var(--achse-nachlauf) + 12px); width: 2px;
  background: var(--stone); border-radius: 2px; overflow: hidden;
}
.achse-fuellung {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--kobalt); border-radius: 2px;
  /* Ueber transform statt height: das laeuft im Compositor und loest beim
     Scrollen kein Layout aus. */
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .15s linear;
}
/* Grosszuegiger Abstand: die Klebestrecke der linken Spalte ist genau
   die Differenz beider Spaltenhoehen. Bei zu engem Satz klebt sie nur
   fuer einen Moment und loest sich sofort wieder, was aussieht, als
   bliebe die Seite kurz stehen. */
.weg { position: relative; padding: 0 0 clamp(110px, 24vw, 340px); }
.weg:last-child { padding-bottom: 0; }
.weg-punkt {
  position: absolute; left: -46px; top: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--off); border: 2px solid var(--stone);
  transition: border-color .438s var(--ease-quart), background .438s var(--ease-quart), transform .438s var(--ease-quart);
}
.alt .weg-punkt { background: var(--light); }
.weg.erreicht .weg-punkt { border-color: var(--black); background: var(--black); transform: scale(1.15); }
/* Die Ziffer ist ein gestalterisches Element, kein Etikett. */
.weg-nr {
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300;
  letter-spacing: -.04em; line-height: .9;
  color: var(--kobalt); margin-bottom: 4px;
}
.weg h3 { font-size: clamp(1.4rem,2.6vw,1.9rem); margin-bottom: 12px; }
.weg p {
  font-family: var(--font-prose); font-optical-sizing: auto;
  font-size: var(--text-flies); line-height: 1.62; color: var(--ink); text-wrap: pretty;
}
.weg .note { margin-top: 12px; font-style: italic; color: var(--ink); }
/* Nicht erreichte Stationen treten zurueck, ohne unlesbar zu werden */
.js .weg { opacity: .45; transition: opacity .625s var(--ease-quart); }
.js .weg.erreicht { opacity: 1; }
@media (max-width: 900px) { .achse { padding-left: 34px; } .weg-punkt { left: -34px; } }

/* ---------- Formularrueckmeldung ---------- */
.form-hinweis { font-size: .92rem; margin: 0; min-height: 1.2em; }
/* Der Honigtopf fuer Maschinen. Nicht display:none - manche Ausfueller
   ueberspringen Unsichtbares. Er liegt ausserhalb des Bildes und ist
   fuer Vorleseprogramme ueber aria-hidden am Elternabsatz weg. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-datenschutz { font-size: .92rem; margin: 0; line-height: 1.5; }
.form-datenschutz a { color: var(--kobalt); text-decoration: underline; text-underline-offset: .18em; }
.form-hinweis.fehler { color: var(--black); font-weight: 600; }
.form-hinweis.erfolg { color: var(--black); }
form.contact input[aria-invalid="true"],
form.contact textarea[aria-invalid="true"] { border-color: var(--black); border-width: 2px; }

@media (prefers-reduced-motion: reduce) {
  .js .weg { opacity: 1; }
  .achse-fuellung, .szene-bild img { transition: none; }
}

/* ===========================================================
   Die Lücke schliesst sich
   Zwei Woerter laufen beim Scrollen aufeinander zu. In der Mitte
   erscheint der Punkt der Wortmarke: die Marke ist das, was die
   Luecke schliesst. --luecke wird per JavaScript gesetzt (1 → 0).
   =========================================================== */
/* Kein Polster oben: die angeheftete Buehne fuehrt ihren Inhalt mittig
   im Bild und bringt die Luft selbst mit. Das Polster kaeme obendrauf
   und stuende als leeres Band zwischen den Kapiteln. Unten bleibt es,
   dort laeuft die Buehne aus. */
/* 106vh, und die Bewegung ist erst bei 80 Prozent der Strecke fertig:
   beides kuerzt den toten Weg, auf dem sich nichts mehr tut. */
/* 96 statt 106vh: die zehn Prozent waren leere Strecke am Ende, auf der
   die angeheftete Buehne nur noch stand. */
.luecke { position: relative; height: 96vh; padding-top: 0; }
.luecke-buehne {
  /* Die Buehne ist nur so hoch wie noetig: der Inhalt steht mittig, und
     die leeren Haelften darueber und darunter wachsen mit ihrer Hoehe.
     Der Versatz haelt sie dabei optisch in der Fenstermitte. */
  position: sticky; top: 16vh; height: clamp(400px, 66vh, 720px);
  display: grid; align-content: center; justify-items: center;
  text-align: center; padding: 0 24px;
}
.luecke-zeile {
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; max-width: 100%;
}
/* Buchstabenweise, wie an bymonolog.com gemessen: dort traegt jedes
   Zeichen eigene Deckkraft und eigenen Weg, gestaffelt von der Luecke
   nach aussen. inline-block ist noetig, an einem inline-Element greift
   transform nicht. Die Zeichen starten weit aussen, sind dort aber
   durchsichtig; overflow-x: clip haelt sie vom Seitenrand fern, ohne
   wie overflow: hidden einen Scrollbereich aufzumachen. */
.luecke-buehne { overflow-x: clip; }
/* Der Abgang: die Buehne verblasst und hebt sich leicht, waehrend die
   letzten Zeichen noch einrasten. Ohne ihn endete die Animation und die
   Flaeche stand danach unveraendert, bis das Anheften aufhoerte.
   --abgang schreibt app.js aus der Scrollposition. */
.luecke-buehne {
  opacity: calc(1 - var(--abgang, 0));
  transform: translate3d(0, calc(var(--abgang, 0) * -28px), 0);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .luecke-buehne { opacity: 1; transform: none; }
}
.luecke-wort .bst {
  display: inline-block;
  opacity: var(--z, 1);
  transform: translateX(calc((1 - var(--z, 1)) * var(--richtung, 0) * 64px));
}
.luecke-wort.ist-links  .bst { --richtung: -1; }
.luecke-wort.ist-rechts .bst { --richtung:  1; }
/* Das ganze Wort bleibt fuer Vorleseprogramme erhalten, die Einzelzeichen
   sind fuer sie ausgeblendet. Sonst wuerde buchstabiert. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Anders als sonst steht dieser Kicker nicht ueber einem Textblock,
   sondern allein auf einer bildschirmfuellenden Flaeche: die Woerter
   blenden sich erst beim Scrollen ein. In der ueblichen Groesse wirkt er
   dort verloren. Deshalb deutlich groesser und im Markenblau, damit er
   die Flaeche fuer den Moment allein tragen kann. */
.luecke .kicker {
  font-size: clamp(1rem, 1.9vw, 1.5rem); letter-spacing: .2em;
  color: var(--kobalt); margin-bottom: clamp(28px, 3.4vw, 44px);
}
.luecke-wort {
  font-family: var(--font-ui); font-weight: 600;
  /* Der vw-Anteil bindet bis rund 1260px Fensterbreite, dort ist die
     Zeile knapp. Darueber greift der Deckel, und der lag mit 7,5rem so
     tief, dass auf breiten Bildschirmen je Seite 225px leer blieben.
     Angehoben wirkt sich das nur oberhalb dieser Grenze aus. */
  font-size: clamp(1.9rem, 9.5vw, 9.5rem); line-height: 1; letter-spacing: -.03em;
  will-change: transform;
}
/* Startabstand: je Seite die halbe Luecke.
   Wortbreite und Spaltbreite teilen sich dieselbe Zeile, die nicht
   umbrechen darf. Groessere Schrift heisst deshalb zwingend kleinerer
   Spalt. Die Werte sind so gewaehlt, dass im offenen Zustand auf jeder
   Breite Rand bleibt: vorher ragten die Woerter auf dem Handy 33 px
   ueber beide Kanten hinaus, und zwar im zuerst sichtbaren Zustand. */
.luecke-wort.ist-links  { transform: translateX(calc(var(--luecke, 1) * -6vw)); }
.luecke-wort.ist-rechts { transform: translateX(calc(var(--luecke, 1) *  6vw)); }

/* Der Punkt aus dem Signet, erscheint erst beim Schliessen */
.luecke-punkt {
  width: clamp(12px, 1.8vw, 26px); aspect-ratio: 1; border-radius: 50%;
  background: var(--kobalt); flex: none;
  margin: 0 clamp(12px, 2vw, 32px);
  opacity: calc(1 - var(--luecke, 1) * 1.6);   /* kommt erst zum Schluss */
  transform: scale(calc(1 - var(--luecke, 1) * .5));
}
.luecke-nachsatz {
  margin-top: clamp(32px, 4.5vw, 58px);
  font-family: var(--font-prose); font-optical-sizing: auto;
  font-size: var(--text-flies); color: var(--ink);
  max-width: 34ch; text-wrap: pretty;
  opacity: calc(1 - var(--luecke, 1) * 1.8);
}

/* Querformat auf dem Telefon: die Buehne hat eine Mindesthoehe von
   400px, der Bildschirm ist dort aber nur rund 390px hoch - zusammen
   mit top: 16vh stand ihr unteres Drittel ausserhalb des Bildes und der
   Nachsatz war abgeschnitten. Auf flachen Schirmen darf sie kleiner
   werden, und der Abschnitt wird laenger, damit die Buchstaben trotzdem
   Strecke zum Zusammenlaufen haben. */
@media (max-height: 560px) and (min-width: 701px) {
  .luecke { height: 150vh; }
  .luecke-buehne { top: 10vh; height: min(76vh, 400px); }
}

@media (max-width: 700px) {
  .luecke { height: 190vh; }
  /* Schmale Bildschirme: die Woerter fuellen die Zeile fast allein, der
     Spalt bekommt nur, was uebrig bleibt. */
  .luecke-wort { font-size: clamp(1.9rem, 8vw, 3rem); }
  .luecke-wort.ist-links  { transform: translateX(calc(var(--luecke, 1) * -9vw)); }
  .luecke-wort.ist-rechts { transform: translateX(calc(var(--luecke, 1) *  9vw)); }
}

/* Ohne Bewegung: geschlossener Endzustand, keine leere Scrollstrecke */
@media (prefers-reduced-motion: reduce) {
  .luecke { height: auto; padding: clamp(96px,14vw,180px) 0; }
  .luecke-buehne { position: static; height: auto; }
  .luecke-wort.ist-links, .luecke-wort.ist-rechts { transform: none; }
  .luecke-punkt, .luecke-nachsatz { opacity: 1; transform: none; }
}

/* ===========================================================
   Auftakt: eine leere Flaeche, auf der nur die Wortmarke steht.
   Sie traegt die Scrollstrecke, ueber die der Schriftzug zusammenlaeuft.
   =========================================================== */
.auftakt {
  position: relative;
  min-height: 100dvh; background: var(--off);
  display: grid; align-content: end; justify-items: center;
  padding: 0 0 clamp(28px, 5vh, 56px);
}
/* Die Konstellation liegt hinter allem und faengt keine Klicks ab. */
/* Der Auftakt beginnt hell mit blauem Logo und faerbt sich beim Scrollen
   ins Markenblau, auf dem die Marke weiss steht. Beide Zustaende stehen
   so in der Vorgabe: der Ladebildschirm hell, der Intro-Bereich blau. */
#auftakt {
  background: color-mix(in srgb, var(--kobalt) calc(var(--blau, 0) * 100%), var(--off));
}

/* Die Regel bleibt fuer den Fall, dass die Konstellation zurueckkehrt.
   Ohne Leinwand im Markup greift sie ins Leere. */
.sterne { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.auftakt-hinweis {
  position: relative; z-index: 1;      /* ueber der Konstellation */
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  /* Dunkler als das uebrige Kleingedruckte: hinter dem Hinweis liegen
     Punkte und Linien. Auf Graphit faellt der Kontrast dort auf 2,2:1,
     auf diesem Ton bleiben 5,3:1 auch direkt ueber einem Punkt. */
  text-transform: uppercase; color: var(--ink);
  opacity: var(--hinweis, 1); transition: opacity .375s var(--ease-quart);
}
/* Ohne JavaScript gibt es keine Wortmarke, dann ist die leere Flaeche sinnlos */
html:not(.js-intro) .auftakt { display: none; }

/* Navigation tritt erst hervor, wenn der Auftakt durchlaufen ist */
.js-intro .nav { opacity: var(--nav-sicht, 0); transition: opacity .375s var(--ease-quart); }
/* Der Hinweis traegt seine Variable jetzt selbst */
.auftakt-hinweis { opacity: var(--hinweis, 1); transition: opacity .75s var(--ease-quart); }
/* Solange das Scrollen ruht, nicht dazu auffordern. Der Hinweis kommt
   genau in dem Moment, in dem er auch stimmt. */
.scroll-gesperrt .auftakt-hinweis { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js-intro .nav { opacity: 1; }
  .auftakt { display: none; }
}

/* ===========================================================
   Der Blickwinkel: ein Systembrett, das sich beim Scrollen dreht.

   Aufstellungsarbeit besteht aus einfachen Formen, deshalb braucht es
   hier keine 3D-Bibliothek. Das Brett liegt in der Perspektive, die
   Figuren stehen darauf. --dreh kommt aus dem Skript.

   Zwei Ebenen je Figur: .figur liegt flach auf dem Brett und traegt die
   Blickrichtung, .figur-steht richtet Koerper und Namen zur Kamera auf.
   =========================================================== */
/* Fest statt mitwachsend: auf schmalen Bildern deckelt eine Medienabfrage
   die Buehne auf 520px, und die Figuren ragen dort rund 87px darunter
   hinaus. Das Polster faengt diesen Ueberstand auf und darf deshalb nicht
   mitschrumpfen, gerade wo es ohnehin knapp ist. */
.blickwinkel { padding-bottom: max(48px, var(--kapitel-luft)); }
.blickwinkel h2 { font-size: clamp(2.3rem, 6.4vw, 5.6rem); max-width: 18ch; margin-top: 4px; line-height: .98; }
.blickwinkel .lead { margin-top: 20px; max-width: 58ch; }
/* Drei Saetze statt eines Absatzes. Sie tauchen nacheinander auf, die
   Staffelung macht app.js ueber die einzelnen reveal-Traeger. */
.blick-saetze { list-style: none; margin-top: 26px; max-width: 46ch; display: grid; gap: 14px; }
.blick-saetze li {
  position: relative; padding-left: 26px;
  font-size: var(--text-flies); line-height: 1.45; color: var(--ink);
}
/* Punkt, kein Strich: die Brand Bible fuehrt unter Do's ausdruecklich
   "Stichpunkte mit Punkt". */
.blick-saetze li::before {
  content: ''; position: absolute; left: 2px; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--kobalt);
}

.brett-buehne {
  perspective: 3000px;   /* flacher: die hinteren Figuren bleiben lesbar */
  margin-top: clamp(40px, 7vw, 90px);
  /* Nur der Deckel faellt, der vw-Anteil bleibt. Der ungenutzte Raum
     wurde auf einem breiten Bild gemessen (unten 144px, oben 218px frei);
     auf schmalen Bildern gibt es ihn nicht, dort ragen die Figuren sogar
     unter die Buehne hinaus. Ein kleinerer Faktor haette das verschaerft. */
  height: clamp(460px, 78vw, 820px);
  display: grid; place-items: center;
  overflow-x: clip;
}
.brett {
  position: relative;
  width: clamp(320px, 68vw, 860px); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(var(--dreh, 0deg));
}
.brett-flaeche {
  position: absolute; inset: 0; border-radius: 50%;
  /* Kraeftiger als vorher: die Bahn traegt die Aufstellung und war als
     Haarlinie kaum zu sehen. Basic Ad-On, wie die Vorgabe es fuer Linien
     fuehrt, aber eine Stufe dunkler, damit sie auf dem hellen Grund haelt. */
  border: 3px solid var(--stone);
  background: radial-gradient(circle at 50% 50%, rgba(27,50,180,.045), transparent 70%);
}
.brett-flaeche::after {
  content: ''; position: absolute; inset: 24%;
  border-radius: 50%; border: 2px dashed var(--line);
}

/* Liegt flach auf dem Brett */
.figur {
  position: absolute;
  left: calc(50% + var(--x)); top: calc(50% + var(--y));
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
}
/* Die Blickrichtung als Strahl mit Pfeilspitze ist auf Wunsch
   entfallen. Die Figuren stehen jetzt allein. */

/* Richtet sich auf: dreht die Brettneigung zurueck und folgt der Drehung */
.figur-steht {
  position: absolute; left: 50%; bottom: 0;
  transform-style: preserve-3d;
  transform: translateX(-50%) rotateZ(calc(-1 * var(--dreh, 0deg))) rotateX(-62deg);
  transform-origin: 50% 100%;
  /* Abstand zwischen Figur und ihrem Namen. Vorher 8px, die Namen klebten
     an den Fuessen. */
  display: grid; justify-items: center; gap: 16px;
}
.figur-koerper { display: block; }
.figur-koerper svg {
  width: clamp(30px, 4.6vw, 60px); height: auto;
  /* Die globale Regel svg { max-width: 100% } wuerde die Figur auf die
     Breite der Grid-Spalte stauchen. Bei kurzen Namen wie "HR" schrumpft
     sie dadurch auf ein Drittel. */
  max-width: none;
  /* Markenblau, nicht Schwarz: die Formensprache der Brand Bible steht in
     der Primaerfarbe. Der Schatten faellt entsprechend blaeulich. */
  fill: var(--kobalt);
  filter: drop-shadow(0 6px 10px rgba(27,50,180,.20));
}
.fg-fuss { fill: var(--line); }
/* Die Figur in der Mitte: dieselbe Form, in Weiss. Auf dem hellen Brett
   traegt sie eine Kontur im Markenblau, sonst waere sie nicht zu sehen.
   paint-order sorgt dafuer, dass der Rand aussen liegt und die Form
   nicht verschlankt. */
.figur.ist-zukunft .figur-koerper svg {
  fill: var(--basic);
  stroke: var(--kobalt); stroke-width: 2.2; paint-order: stroke fill;
  filter: drop-shadow(0 8px 14px rgba(27,50,180,.26));
}
.figur.ist-zukunft .fg-fuss { fill: var(--line); stroke: none; }
.figur.ist-zukunft .figur-name { color: var(--kobalt); }
.figur-name {
  font-size: clamp(.62rem, .9vw, .82rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}

@media (max-width: 720px) {
  .brett-buehne { perspective: 1400px; height: clamp(340px, 92vw, 520px); }
  .brett { width: 88vw; }
  .figur-name { font-size: .56rem; letter-spacing: .06em; }
}

/* Ohne Bewegung: das Brett steht still in einer leicht gedrehten Ruhelage */
@media (prefers-reduced-motion: reduce) {
  .brett { transform: rotateX(62deg) rotateZ(18deg); }
  .figur-steht { transform: translateX(-50%) rotateZ(-18deg) rotateX(-62deg); }
}

/* ===========================================================
   Die drei Saeulen und das Coaching fuer Privatpersonen
   =========================================================== */

/* Drei gleichwertige Spalten. Kein Rahmen, kein Schatten: die Trennung
   kommt aus der Haarlinie oben, wie bei den Haltungsbloecken. */
.saeulen {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
}
.saeule { border-top: 2px solid var(--kobalt); padding-top: 20px; }
.saeule h3 {
  font-size: clamp(1.32rem, 2vw, 1.72rem); line-height: 1.1;
  letter-spacing: -.01em; margin-bottom: 12px;
}
.saeule p { color: var(--ink); font-size: var(--text-flies); line-height: 1.62; }
@media (max-width: 900px) { .saeulen { grid-template-columns: 1fr; } }

/* Eigener Grund, damit sich der Abschnitt vom Unternehmensangebot
   darueber absetzt: hier sind Einzelne gemeint, nicht Organisationen. */
.coaching { background: var(--off); }
.coaching .offer-head { margin-bottom: clamp(36px, 4.6vw, 60px); }
.coaching .offer-head .sub { color: var(--kobalt); font-weight: 600; }




/* Die betonte Zeile im Hero steht auf dem abgedunkelten Foto. Reines
   Markenblau ergaebe dort 1,52:1, gemessen gegen den Grund hinter der
   Zeile. Deshalb die aufgehellte Stufe: 4,8:1. Ueberall sonst auf der
   Seite bleibt das Blau unveraendert. */
.hero-full h1 .hl { color: var(--kobalt-hell); }

/* Der Weg, den ein Foto beim Scrollen zuruecklegt, steht je Rahmen in
   zuschnitt.css. Das Werkzeug schreibt ihn zusammen mit dem passenden
   Bildausschnitt, damit beide nicht auseinanderlaufen. Hier steht
   deshalb nichts mehr; der Rueckfallwert liegt bei .pfoto img. */

/* ===========================================================
   Rechtsseiten: Impressum und Datenschutz
   =========================================================== */

/* Die Brand Bible fuehrt das Markenblau fuer Ueberschriften. Auf der
   Startseite tragen es einzelne hervorgehobene Woerter, der Rest bleibt
   schwarz; hier gibt es keine solche Hervorhebung, also traegt die
   Ueberschrift selbst die Farbe. 8,4:1 auf dem hellen Grund. */
.page-head h1 { color: var(--kobalt); }
.open-point h3 { color: var(--kobalt); }

/* --- Persoenliches Coaching -------------------------------------- */

.coaching { background: var(--off); }

/* Ein Fuehrungssatz statt zweier Absaetze: mittig, aber gross genug,
   dass er als Aussage gelesen wird und nicht als Fliesstext. */
.coach-lead {
  max-width: 40ch; margin: 0 auto; text-align: center; text-wrap: pretty;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.42;
  font-weight: 600; letter-spacing: -.012em;
}

/* Zwei Bloecke nebeneinander: links die Begruendung zum Lesen, rechts
   die Anliegen zum Ueberfliegen. Dieselbe Zweiteilung wie bei "Wer wir
   sind" und im Blickwinkel. */
.coach-paar {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 3.4vw, 60px);
  margin-top: clamp(46px, 6vw, 84px);
  align-items: start;
}
/* Gleicher Fall wie bei .karte-blau h3: in 1,8vw lag die Ueberschrift
   bei 1194px Fensterbreite unter dem Fliesstext. */
.coach-block h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem); color: var(--kobalt);
  margin-bottom: 14px;
}
.coach-block p { margin-top: 14px; line-height: 1.62; font-size: var(--text-flies); }
.coach-block p:first-of-type { margin-top: 0; }

/* Der Einstieg traegt noch den Ton des Fuehrungssatzes und leitet in den
   Abschnitt hinein: etwas groesser, und der senkrechte Strich bindet ihn
   an die Spalte, statt ihn als eigenen Block stehen zu lassen. */
.coach-einstieg {
  font-size: var(--text-flies); line-height: 1.58;
  padding-left: clamp(16px, 1.6vw, 22px);
  border-left: 2px solid var(--kobalt);
  margin-bottom: clamp(28px, 3.4vw, 42px);
}

/* Die Anliegen als blaue Flaeche: das einzige farbige Feld im Abschnitt.
   Es gibt der kuerzeren Spalte Gewicht, trennt Ueberfliegen vom Lesen
   und bringt das Markenblau in die Flaeche, wo es sonst nur in
   Ueberschriften und Knoepfen vorkommt. */
.coach-anliegen { /* traegt .karte-blau, siehe unten */ }
.coach-anliegen .punkte { gap: 13px; }
.coach-anliegen .punkte li::before { background: var(--basic); }

/* Der siebte Stichpunkt war keine Aufzaehlung, sondern die Oeffnung der
   Liste. Als Satz unter einer Trennlinie sagt er dasselbe ruhiger. */
.anliegen-offen {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid color-mix(in srgb, var(--basic) 30%, transparent);
  font-size: var(--text-flies); line-height: 1.5;
  color: color-mix(in srgb, var(--basic) 86%, var(--kobalt));
}

@media (max-width: 860px) { .coach-paar { grid-template-columns: 1fr; } }

/* Stichpunkte mit Punkt, wie die Brand Bible es fuehrt. */
.punkte { list-style: none; display: grid; gap: 9px; }
.punkte li { position: relative; padding-left: 22px; line-height: 1.5; font-size: var(--text-flies); }
.punkte li::before {
  content: ''; position: absolute; left: 2px; top: .6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kobalt);
}

/* Der Schluss wieder mittig: er fuehrt aus dem Abschnitt heraus zum
   Gespraech, so wie der Abschnitt mittig begonnen hat. */
.coach-schluss {
  max-width: 46rem; margin: clamp(46px, 6vw, 88px) auto 0; text-align: center;
}
.coach-schluss h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--kobalt); }
.coach-schluss p { margin-top: 14px; font-size: var(--text-flies); }
.coach-cta { margin-top: clamp(24px, 3vw, 36px); }

/* Der Knopf unter der dritten Station fuehrt zurueck zum Abschnitt
   fuer Privatpersonen. */
.weg-knopf { margin-top: 22px; }


/* --- Blickwinkel: Text und Brett nebeneinander -------------------- */

/* Vorher stand das Brett weit unter dem Text und wirkte abgehaengt.
   Jetzt Text links, Brett rechts auf gleicher Hoehe. */
.blick-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.5vw, 64px);
}
.blick-grid .brett-buehne {
  margin-top: 0;
  height: clamp(360px, 40vw, 620px);
}
/* Das Brett bemisst sich sonst am Fenster und lief aus der Spalte
   heraus, samt der Namen an seinem Rand. Jetzt an der Spalte, mit
   Luft fuer die Beschriftungen. */
.blick-grid .brett { width: min(100%, 560px); }

/* Text und Brett teilen sich eine Grundlinie. Nicht ueber einen festen
   Versatz: der haelt nur bei einer Fenstergroesse. Stattdessen sitzen
   beide Spalten unten buendig, und das Brett sitzt unten in seiner
   Buehne. Die Figuren ragen nach oben in die Buehne hinein, dort ist
   Platz. */
.blick-grid { align-items: end; }
.blick-grid .brett-buehne { align-items: end; }
/* Das Brett ist um 62 Grad gekippt: sein Kasten ist quadratisch, die
   gemalte Ellipse darin deutlich flacher und mittig. Unten bleibt also
   Luft im Kasten, und wie viel haengt von Groesse und Perspektive ab.
   Ein fester Prozentwert traegt darum nicht: bei 1440px sass das Brett
   16 Pixel zu hoch, bei 1100px 78 zu tief. app.js misst den Abstand
   und schreibt ihn hierher.
   translate statt transform, sonst ginge die Neigung verloren.
   --brett-tiefer sagt, wie weit das Brett unter dieser gemeinsamen
   Grundlinie stehen soll. Die Grundlinie ist der Ausgangspunkt, nicht
   das Ziel: app.js rechnet sie aus und legt diesen Wert obendrauf. */
.blick-grid .brett {
  --brett-tiefer: clamp(22px, 2.6vw, 40px);
  translate: 0 var(--brett-versatz, 0px);
}
/* Ohne die Textbreite der vollen Seite darf die Ueberschrift enger stehen. */
.blick-text h2 { max-width: 14ch; }
.blick-text .blick-saetze { max-width: 40ch; }

@media (max-width: 980px) {
  .blick-grid { grid-template-columns: 1fr; }
  .blick-grid .brett-buehne { height: clamp(340px, 82vw, 520px); }
}
/* Die Neigung von 62 Grad wirft die aeusseren Figuren ueber den Kasten
   hinaus: bei 375px Fensterbreite standen sie gemessen 36 Pixel links
   und 10 Pixel rechts im Nichts. Der Kasten selbst passte, nur seine
   Projektion nicht. Ein schmaleres Brett verkleinert beides im gleichen
   Verhaeltnis - 78 Prozent lassen auf dem schmalsten ueblichen Geraet
   Luft an beiden Seiten. */
@media (max-width: 560px) {
  .blick-grid .brett { width: min(78%, 560px); margin-inline: auto; }
}

/* Das Zeichen kehrt sich mit um: auf hellem Grund das blaue Quadrat, auf
   blauem das helle. Beide liegen uebereinander und werden ueberblendet,
   damit kein Nachladen mitten in der Bewegung noetig ist. */
.wm-wort .ist-zeichen > span { position: relative; display: inline-block; }
.wm-wort .ist-zeichen img {
  display: block; width: .8em; height: .8em; transform: translateY(.06em);
}
.wm-wort .ist-zeichen img.invers {
  position: absolute; inset: 0; opacity: var(--wm-hell, 0);
}

/* Der Scrollhinweis wechselt mit dem Grund. */
.auftakt-hinweis {
  color: color-mix(in srgb, var(--basic) calc(var(--blau, 0) * 100%), var(--ink));
}

/* Direkt nach der angehefteten Buehne der Chance. Deren untere Haelfte
   ist ohnehin leer, ein volles Abschnittspolster obendrauf ergibt einen
   Graben. */
#haltung { padding-top: clamp(20px, 2.4vw, 34px); }