/* ============================================================
   ONFLOW · Token-System
   ============================================================ */
:root{
  --tief:#0C3B38;      /* Grund: Hero, dunkle Bänder, Footer-Oberkante */
  --tiefer:#062523;    /* tiefste Fläche */
  --kalk:#F6F4EE;      /* Papier */
  --limette:#CBF546;   /* Signal — CTA, das eine hervorgehobene Wort, der Begleiter */
  --mint:#DCEFE2;      /* Flächenfarbe 01 */
  --himmel:#DAE6F2;    /* Flächenfarbe 02 */
  --pfirsich:#F7DFC6;  /* Flächenfarbe 03 */
  /* DUNKELGRÜN IST DAS EINZIGE DUNKEL. Was auf hellem Grund dunkel sein
     muss — Schrift, Konturen, Gerätemodelle — ist --tief (#0C3B38), dieselbe
     Farbe wie Hero, Bänder, Fuss und gezeichnete Linie. Damit besteht die
     Palette aus drei Farben: Tief, Limette, Papier.
     Kontrast auf Papier: 11.2:1, weit über AAA. Ein zweites Dunkel gibt es
     nicht — es wäre eine Farbe, von der niemand wüsste, wann sie gilt. */
  --nebel:#59665F;     /* Sekundärtext auf hell (5.0:1) */

  --grund:var(--kalk);
  --ink:var(--tief);
  --muted:var(--nebel);
  --hair:rgba(11,21,18,.14);
  --focus:var(--tief);
  --grau:rgba(11,21,18,.09);
  --grau-tief:rgba(11,21,18,.16);
  /* Eine Farbe, zwei Rollen: Fläche des Sekundärknopfs auf hellem Grund,
     Kante desselben Knopfs auf tiefem. Der Wert ist ausgerechnet, nicht
     geraten — --hair (18 % Papier) über --tief ergibt genau #365C59.
     Deckend notiert und nicht als rgba: Mit Alphawert läge die Kante am
     jeweiligen Bandhintergrund an und wanderte von Abschnitt zu Abschnitt. */
  --dunst:#365C59;
  /* Die Kante auf tiefem Grund braucht einen EIGENEN, helleren Wert: als
     Fläche auf Papier steht #365C59 bei 6.7:1, als Strich auf #0C3B38 nur bei
     1.67:1, und ein 2px-Strich verschwimmt zusätzlich auf ganzer Länge mit
     dem Grund. #7C918C bringt ihn auf 3.7:1 — gleiche Präsenz wie die Fläche
     gegenüber. Gleiche Zahl wäre gleicher Wert, nicht gleiches Aussehen. */
  --dunst-kante:#7C918C;

  --f:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-util:'IBM Plex Mono', ui-monospace, monospace;

  --fs-mega:clamp(3.1rem, 9.4vw, 8.2rem);
  --fs-h1:clamp(2.7rem, 6.8vw, 5.6rem);
  --fs-h2:clamp(2rem, 4.6vw, 3.7rem);
  --fs-h3:clamp(1.2rem, 2vw, 1.55rem);
  --fs-lead:clamp(1.1rem, 1.65vw, 1.45rem);
  --fs-body:1.06rem;
  --fs-sm:.9rem;
  --fs-eyebrow:.68rem;

  --ease:cubic-bezier(0.16, 1, 0.30, 1);
  --ease-aus:cubic-bezier(0.70, 0, 0.84, 0);
  --dur-micro:200ms;
  --dur-el:560ms;
  --dur-sec:620ms;

  --r:6px;
  --wrap:1320px;
  --gap:clamp(1.25rem,3vw,2.4rem);
  --kopf-h:74px;
  --kopf-luft:clamp(.5rem,1vw,.9rem);   /* Abstand des Kopfes vom oberen Rand */
}
[data-zone="tief"]{--grund:var(--tief);--ink:var(--kalk);--muted:rgba(246,244,238,.66);
  --hair:rgba(246,244,238,.18);--focus:var(--limette);
  --grau:rgba(246,244,238,.13);--grau-tief:rgba(246,244,238,.22);
  background:var(--tief);color:var(--kalk)}
/* Limette als Grund ist die Ausnahme, nicht die vierte Flächenfarbe: sie
   trägt genau einen Abschnitt, das Logoband. Wo sie liegt, kann nichts mehr
   limette hervorgehoben werden — kein <em> im Titel, kein gefüllter Knopf;
   beide verlören auf ihrem eigenen Ton das Signal. Ein Band ohne Handlung
   darin ist deshalb Absicht. Schrift wird tief: 9.8:1, gedämpft 5.3:1. */
[data-zone="limette"]{--grund:var(--limette);--ink:var(--tief);
  --muted:rgba(12,59,56,.72);--hair:rgba(12,59,56,.2);--focus:var(--tief);
  --grau:rgba(12,59,56,.1);--grau-tief:rgba(12,59,56,.18);
  background:var(--limette);color:var(--tief)}
[data-zone="mint"]{--grund:var(--mint);background:var(--mint)}
[data-zone="himmel"]{--grund:var(--himmel);background:var(--himmel)}
[data-zone="pfirsich"]{--grund:var(--pfirsich);background:var(--pfirsich)}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--kalk);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kalk);color:var(--tief);font-family:var(--f);
  font-size:var(--fs-body);line-height:1.5;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* TRENNEN NUR IM FLIESSTEXT, NICHT IN UEBERSCHRIFTEN.
   Im Fliesstext hilft die Trennung: schmale Spalte, lange deutsche Woerter,
   sonst reisst der Flattersatz Loecher. Nur soll kein Rest von drei, vier
   Buchstaben allein auf die naechste Zeile fallen — darum mindestens fuenf
   danach.
   In Ueberschriften ist sie ausgeschaltet, und zwar wegen `text-wrap:balance`:
   Balance sucht die kuerzeste laengste Zeile und nimmt dafuer JEDE erlaubte
   Trennung. Gemessen im Dialogtitel bei 390px: «Zusammenstellung besprechen»
   passt als zwei Woerter in 190 und 120 Punkte, balance zog aber
   «Zusammenstel-» / «lung besprechen» vor, weil 161 kleiner ist als 190.
   Strengere Grenzen halfen nicht, sie verschoben den Strich nur auf
   «Zusam-menstellung». Ohne Trennung bricht balance zwischen den Woertern —
   das ist die Zeile, die man lesen will.
   `overflow-wrap` bleibt als letzte Sicherung fuer den Fall, dass ein
   einzelnes Wort breiter ist als sein Kasten; geprueft bei 320 und 390px auf
   allen Seiten laeuft nichts ueber. */
p,li,dd{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 5;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--f);margin:0;text-wrap:balance;
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
h1{font-size:var(--fs-h1);font-weight:800;line-height:.94;letter-spacing:-.042em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1;letter-spacing:-.036em}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.02em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:normal}
/* MARKIERTER TEXT in beiden Fassungen. Auf hellem Grund limette Fläche mit
   tiefer Schrift — dieselbe Geste wie hinter einem hervorgehobenen Wort.
   AUF LIMETTEM GRUND umgekehrt: tiefe Fläche, limette Schrift; sonst läge
   Limette auf Limette und man sähe nicht, was man erwischt hat.
   Beide Paare sind dieselben zwei Farben, nur getauscht — 9.8:1 so wie so. */
::selection{background:var(--limette);color:var(--tief)}
[data-zone="limette"] ::selection{background:var(--tief);color:var(--limette)}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.narrow{max-width:58ch}
.section{padding-block:clamp(4rem,8.5vw,8rem);position:relative}
.section--tight{padding-block:clamp(2.75rem,5vw,4.5rem)}
/* Das Honigfeld. NICHT display:none — manche Bots ueberspringen, was so
   ausgezeichnet ist. Es steht ausserhalb des Bildes und ist fuer die
   Tastatur gesperrt (tabindex="-1" im Markup). */
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sr:focus{position:fixed;top:.6rem;left:.6rem;z-index:80;width:auto;height:auto;margin:0;clip:auto;
  background:var(--limette);color:var(--tief);padding:.7rem 1.1rem;border-radius:100px;font-weight:700}

.eyebrow{font-family:var(--f-util);font-size:var(--fs-eyebrow);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;color:var(--muted);margin:0 0 1.5rem;display:flex;align-items:center;gap:.85rem}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--limette);flex:none}
[data-zone="mint"] .eyebrow::before,[data-zone="himmel"] .eyebrow::before,[data-zone="pfirsich"] .eyebrow::before,
[data-zone="limette"] .eyebrow::before,
.section:not([data-zone]) .eyebrow::before{background:var(--tief)}
.lead{font-size:var(--fs-lead);line-height:1.38;color:var(--muted);max-width:44ch;letter-spacing:-.016em}
.meta{font-size:var(--fs-sm);color:var(--muted)}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
#view:focus{outline:none}

/* ---------- Die Linie ---------- */
/* Liegt im Dokument, nicht vor dem Bild: so verschiebt der Browser die
   Fläche beim Rollen selbst mit und das Gemalte klebt an seinem Ziel.
   Grösse und Ort setzt linie.js — siehe bandFuehren(). */
/* Die Leinwand liegt UNTER dem Kopf (50) — dann laeuft die Linie hinter dem
   Glas durch, statt an seiner Kante abzureissen. Nach oben geholt wird sie
   nur, wenn das Ziel im Kopf liegt oder ein Dialog offen ist; dort ist sie
   der Fokuszeiger und muss ueber ihm liegen (Dialog 56). linie.js setzt
   `data-oben`. */
#linie{position:absolute;top:0;left:0;z-index:49;pointer-events:none}
#linie[data-oben]{z-index:60}

/* ---------- Kopf ----------------------------------------------------------
   Der Kopf klebt nicht am oberen Rand, sondern schwebt darunter: beim
   Scrollen schiebt sich eine Glasfläche NUR hinter Logo, Navigation und
   Knopf, links und rechts gerundet, damit sie als Leiste erkennbar bleibt
   und nicht als angeschnittenes Band. Der Grund liegt darum auf .kopf__in
   (dem Inhalt) und nicht auf .kopf (dem Rahmen über die volle Breite). */
.kopf{position:fixed;top:var(--kopf-luft);left:0;right:0;z-index:50;color:var(--kalk)}
.kopf__in{display:flex;align-items:center;gap:1.4rem;min-height:var(--kopf-h);
  padding-inline:clamp(.9rem,1.8vw,1.5rem);border-radius:100px;
  border:1px solid transparent;
  transition:background-color 500ms var(--ease),border-color 500ms var(--ease),
             box-shadow 500ms var(--ease)}
/* Glas: durchlässig genug, dass die Seite darunter erkennbar bleibt, und
   trüb genug, dass die Schrift darauf trägt. `saturate` hält die Farben
   darunter kräftig — ohne wirkt Milchglas grau. */
.kopf[data-fest="true"] .kopf__in{
  background:rgba(12,59,56,.62);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border-color:rgba(246,244,238,.16);
  box-shadow:0 10px 30px rgba(6,37,35,.22)}
/* Der Knopf im Kopf ist die eine Ausnahme von «Knopfgrössen werden nicht je
   Ort angepasst»: er steht neben der Navigation und muss deren Schriftgrad
   tragen, sonst bekommt der Kopf zwei Gewichte. Eine Zeile, nie umbrechend.
   ZWEI KLASSEN IM WÄHLER, weil der Knopf im <nav> steht: `.nav a` setzt dort
   `border:0` und eine eigene Polsterung und schlägt `.btn` mit einer Klasse
   mehr — ohne das hier hätte der Knopf gar keine Kante. */
/* Abgesetzt von der Navigation: der Knopf ist kein vierter Menüpunkt,
   sondern die Handlung am Ende der Zeile. Das macht allein die Lücke davor —
   ein Vielfaches der Lücke zwischen den Punkten (.1rem). Kein Trennstrich:
   die umrandete Fläche ist schon eine Kante, eine zweite auf zwei Millimeter
   Abstand liest sich im schmalen Kopf als Trennwand statt als Absatz. */
.kopf .kopf__cta{font-size:.93rem;font-weight:600;padding:.5em 1.15em;
  white-space:nowrap;border:2px solid var(--kante);border-radius:100px;
  margin-left:clamp(.9rem,1.8vw,1.6rem)}
/* Der Unterstrich der Navigation gehört nicht auf eine Fläche. */
.kopf .kopf__cta::after{display:none}
.marke{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto}
.marke svg{height:16px;width:auto;display:block}
/* Die Marke ist die Fortschrittsanzeige: eine limettene Kopie liegt über
   der blassen und wird von links her freigegeben, ein Neuntel je Seite.
   Kein Buchstabe wird markiert — der Verlauf wandert durch. */
.marke__wort{position:relative;display:block}
.marke__fuell{position:absolute;left:0;top:0;bottom:0;overflow:hidden;
  width:var(--markefuell,0%);transition:width 900ms var(--ease)}
.marke__fuell svg{position:absolute;left:0;top:0}
.marke__fuell path{fill:var(--limette)}   /* nicht als Attribut — var() dort unsicher */
/* Der limette Punkt rechts der Marke ist entfernt — die Füllung im Wort
   trägt das Signal, ein zweites daneben verdoppelte es nur. */
.nav{display:flex;align-items:center;gap:.1rem}
.nav a,.nav button{font-family:var(--f);font-size:.93rem;font-weight:500;color:var(--kalk);background:none;
  border:0;padding:.6rem .85rem;text-decoration:none;position:relative;letter-spacing:-.012em}
.nav a::after,.nav button::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.42rem;height:2px;
  background:var(--limette);transform:scaleX(0);transform-origin:left;
  transition:transform 720ms var(--ease) 40ms}
/* Ohne Engine ist der eigene Strich der Hover-Zustand; mit Engine zeichnet
   ihn die Linie, und der eigene bleibt unten. Sonst zuckt er beim Zeigen kurz
   hoch, weil :hover sofort greift und `data-linie` erst nach der Verweildauer
   kommt. Der aufgeklappte Zustand ist kein Hover und bleibt. */
/* KEIN eigener Strich für den AUFGEKLAPPTEN Zustand: Das Flyout öffnet auf
   Hover, `aria-expanded` wechselt also mit der Maus — der Strich wäre eine
   zweite Linie neben der gezeichneten, dieselbe Geste zweimal erzählt.
   Ein Strich zeigt nur, WO MAN IST, nicht worauf die Maus liegt. Bleiben
   `data-aktiv` fürs aktive Angebot und `aria-current` für die aktive Seite. */
html:not(.linie) .nav a:hover::after,
html:not(.linie) .nav button:hover::after{
  transform:scaleX(1);transition:transform 300ms var(--ease)}
.nav .tlink::after,.flyout a::after{display:none}
/* KEIN STRICH IM KOPF — die Farbe genügt. Der aktive Punkt steht limette,
   und Limette heisst hier wie überall «hier ist etwas los». Der ::after
   BLEIBT im Markup: die gezeichnete Linie liest ihre Lage daraus ab
   (`linieMenu` in linie.js). Er wird nur nie ausgefahren. */
.nav a[aria-current="page"],#angebot-btn[data-aktiv="true"]{color:var(--limette)}
/* Der CTA im Kopf spricht dieselbe Sprache wie die Links in den vier
   Bändern: Wort plus Pfeil, kein Kissen — damit die gezeichnete Linie ihn
   SEIN kann statt ihn zu umrunden. Grösse und Polsterung erbt er von
   `.nav a`, damit er auf der Menüzeile sitzt. */
.nav .tlink{border-bottom:0;padding-bottom:0;font-weight:700;font-size:.93rem}
.nav__has{position:relative}
/* `pointer-events:none` im geschlossenen Zustand ist kein Beiwerk:
   `visibility:hidden` kommt VERZÖGERT (`visibility 0s 700ms`), damit die
   Klappe während ihrer Bewegung nach oben noch zu sehen ist. In diesen 700
   Millisekunden bliebe sie sonst anfassbar — und weil sie ein Kind von
   `.nav__has` ist, feuert das Betreten ihrer Fläche `pointerenter` auf der
   Schachtel und öffnet sie erneut. Was man nicht sehen soll, soll man auch
   nicht treffen. */
.flyout{position:absolute;top:calc(100% + .5rem);left:0;min-width:300px;background:var(--tiefer);
  border:1px solid rgba(246,244,238,.16);border-radius:var(--r);padding:.45rem;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  transition:opacity 260ms var(--ease),transform 700ms var(--ease),visibility 0s 700ms}
.flyout[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity 240ms var(--ease),transform 620ms var(--ease),visibility 0s}
.flyout a{display:flex;gap:.8rem;align-items:baseline;padding:.65rem .75rem;border-radius:4px;text-decoration:none}
/* Kein Hover-Feld hinter dem Eintrag: die gezeichnete Linie zeigt schon an,
   worauf gezeigt wird. Zwei Anzeigen für dieselbe Sache, und die schwächere
   verwischt die stärkere. */
/* Die Nummern sind zurückgenommen und werden erst beim Zeigen limette: Vier
   limette Nummern nebeneinander wären vier Signale gleichzeitig, und wo alles
   Signal ist, ist keines mehr eines. Im Ruhezustand ordnet die Nummer nur. */
.flyout .num{font-family:var(--f-util);font-size:.72rem;color:rgba(246,244,238,.5);
  transition:color 220ms var(--ease)}
.flyout a:hover .num,.flyout a:focus-visible .num{color:var(--limette)}

/* Die Seite, auf der man steht: Wort UND Nummer limette. Das ist derselbe
   Zustand wie oben im Menü, nur eine Ebene tiefer. */
.flyout a[aria-current="page"],
.flyout a[aria-current="page"] .num{color:var(--limette)}
/* ---------- Wischbare Flaechen --------------------------------------------
   OHNE DIESE REGEL GIBT ES AUF DEM TELEFON KEIN WISCHEN.
   Drei Bausteine blaettern per Wischen (initDia, initWand, initLeiseEine) und
   erkennen die Geste an `pointerdown`/`pointerup`. Bei der Voreinstellung
   `touch-action:auto` behaelt sich der Browser jede Richtung vor: Sobald er
   die Beruehrung als moegliches Scrollen beansprucht, schickt er
   `pointercancel` — und dann ist es kein Wischen mehr, sondern ein
   abgebrochener Zeiger. Die Griffe warteten auf ein `pointerup`, das nie kam.
   `pan-y` gibt ihm die Senkrechte (die Seite scrollt weiter wie gewohnt) und
   behaelt die Waagrechte fuer uns.
   Ein Kommentar in app.js berief sich seit jeher auf diese Regel — im Blatt
   stand sie nie. Geschrieben am 10.08.2026, nachdem gemeldet wurde, dass
   weder die Case-Kachel noch die Stimmen auf Wischen reagieren. */
.bild--dia,[data-folge],.leise{touch-action:pan-y}
.burger{display:none}
/* Den Schleier haengt app.js EINMAL in den Kopf, nicht je Fensterbreite.
   Am Schirm hat er nichts zu tun und darf auch kein leeres Kind in der
   Flex-Zeile des Kopfes sein — die Handyfassung schaltet ihn wieder an. */
.nav__schleier{display:none}

/* ---------- Knöpfe -------------------------------------------------------
   EINE Grundform, zwei Fassungen. Die Masse sind die Pille, die die
   gezeichnete Linie um einen Bandlink zieht — 20px neben und 13px über/unter
   der Schrift, voll gerundet. Damit tragen gezeichneter und gebauter Knopf
   dieselbe Form, und die Linie legt sich auf den Rand, statt einen zweiten
   daneben zu malen. In `em`, damit die Form beim Skalieren erhalten bleibt.

   Welche Fassung wie aussieht, entscheidet nicht der Autor, sondern der
   GRUND, auf dem sie steht — wie bei Schrift-, Linien- und Fokusfarbe. Am
   Knopf steht nur der Rang:

     .btn--primaer     limette gefüllt, tiefe Schrift — auf JEDEM Grund gleich
                       (Limette ist auf Papier wie auf Tief gut lesbar).
     .btn--sekundaer   auf hell: gefüllt, helle Schrift.
                       auf tief: nur umrandet; beim Zeigen kippt sie zur
                       hellen Fläche mit tiefer Schrift. (Gefüllt-Tief auf
                       tiefem Grund wäre unsichtbar — dort trägt die Kante.)

   Jede Fassung setzt nur drei Werte: --bg, --fg, --kante.
   (--kante, nicht --rand: --rand ist der Seitenrand als Länge.)
   Nie zwei gefüllte limette Knöpfe nebeneinander — zweimal «hier entlang»
   heisst nirgendwo entlang. */
.btn{--bg:transparent;--fg:var(--ink);--kante:transparent;
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f);
  font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:700;
  letter-spacing:-.014em;line-height:1.3;
  padding:.63em 1em;border:2px solid var(--kante);border-radius:100px;
  background:var(--bg);color:var(--fg);text-decoration:none;position:relative;
  cursor:pointer;
  transition:background-color 420ms var(--ease),color 420ms var(--ease),
             border-color 420ms var(--ease)}
/* Eine zweite GRÖSSE, kein zweiter Knopf: dieselbe Form, dieselben
   Fassungen, auf Lesegrösse gesetzt. Sie gehört dorthin, wo der Knopf mitten
   in einem Text steht und nicht am Ende einer Seite — in Schlagzeilennähe
   wäre er lauter als alles, was ihn begründet. Polsterung und Rundung stehen
   in `em` und gehen von selbst mit. */
.btn--klein{font-size:var(--fs-body)}
.btn span.pfeil{transition:transform 760ms var(--ease)}
.btn:hover span.pfeil{transform:translateX(5px);transition:transform 320ms var(--ease)}

.btn--primaer{--bg:var(--limette);--fg:var(--tief);--kante:var(--limette)}
/* KEIN Aufhellen beim Zeigen, solange der Begleiter läuft: Er legt sich um
   den Knopf und IST die Antwort; eine gleichzeitig umschlagende Fläche wäre
   eine zweite Antwort auf dieselbe Frage.
   Ohne Begleiter bleibt sie — bei «Bewegung reduzieren» und auf dem Telefon
   steigt die Linie aus (html trägt dann kein `.linie`), und ohne Rückfall
   hätte der Knopf dort gar keine Rückmeldung. Ebenso beim Sekundärknopf. */
html:not(.linie) .btn--primaer:hover{--bg:#DDFF6B;--kante:#DDFF6B}
/* Sekundär auf hellem Grund: gefüllt wie primär, aber in Nebelgrau statt
   Limette. Tief wäre zu laut — zwei fast gleich kräftige Flächen streiten um
   den Blick, und die Nebenhandlung gewinnt. Beim Zeigen wird die Fläche eine
   Spur heller, dieselbe Geste wie beim limetten Knopf. */
.btn--sekundaer{--bg:var(--dunst);--fg:var(--kalk);--kante:var(--dunst)}
.btn--sekundaer:hover{--bg:#43706C;--kante:#43706C}
/* Sekundär auf tiefem Grund: Eine graue Fläche wäre hier matt, also trägt
   die Kante, was sonst die Fläche trägt.
   Beim Zeigen ändert sich die Farbe NICHT — den Hover zeichnet die Linie:
   sie fährt limette genau auf dem grauen Rand entlang. Ein zusätzlicher
   Farbumschlag überdeckte diesen Moment, bevor die Runde fertig ist.
   Ohne Engine (Touch, reduzierte Bewegung) füllt sich der Knopf hell auf. */
[data-zone="tief"] .btn--sekundaer,.fuss .btn--sekundaer,
.kopf .btn--sekundaer,.krume .btn--sekundaer{
  --bg:transparent;--fg:var(--kalk);--kante:var(--dunst-kante)}
html:not(.linie) [data-zone="tief"] .btn--sekundaer:hover,
html:not(.linie) .fuss .btn--sekundaer:hover,
html:not(.linie) .kopf .btn--sekundaer:hover,
html:not(.linie) .krume .btn--sekundaer:hover{
  --bg:var(--kalk);--fg:var(--tief);--kante:var(--kalk)}
/* ---------- Der freistehende Textlink --------------------------------------
   Die Masse kommen von den Links in den vier Bändern — dort ist der grösste
   Auftritt dieses Elements, und dort wurde die Form gefunden.
   Kein Unterstrich: Er stammt aus der Zeit vor der gezeichneten Linie und
   läge beim Zeigen unter dem Markerstrich wie ein zweiter Boden.
   --zweit ist die leisere Fassung fürs zweite Ziel derselben Zeile: gleiche
   Grösse, gleiche Grundlinie — der Rang steckt in Gewicht und Deckung. */
.tlink{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-weight:700;font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.3}
/* DER MARKER ENDET AM WORT, NICHT UNTER DEM PFEIL.
   Der Markerstrich ist ein Verlauf auf dem <a>, der Pfeil ein Flex-Kind
   darin — ohne Zutun liefe die limette Fläche also unter ihn weiter. Ein
   Marker liegt unter WÖRTERN; der Pfeil ist ein Wegweiser, kein Wort.
   `--pfeilraum` hält seine Breite frei und wird von JEDER Marker-Regel
   abgezogen. Gesetzt nur, wenn wirklich ein Pfeil da ist (`:has`) — sonst
   endete der Strich mitten im letzten Wort; für alles andere, was dieselbe
   Regel teilt (`.textlink`, Links im Satz), greift der Rückfall 0px.
   1em ist die Breite des Pfeilzeichens, .45rem die Lücke des Flexverbunds;
   beides eher grosszügig — ein Marker, der einen Hauch zu früh endet, liest
   sich richtig, einer der unter den Pfeil greift nicht.
   WER EINE EIGENE MARKER-REGEL SCHREIBT, ZIEHT `--pfeilraum` MIT AB. */
.tlink:has(.pfeil){--pfeilraum:calc(1em + .45rem)}
.tlink--zweit{font-weight:500;opacity:.62;
  transition:color 220ms var(--ease),opacity 220ms var(--ease),
             background-size 620ms var(--ease)}
.tlink--zweit:hover,.tlink--zweit:focus-visible{opacity:1}

/* ---------- Hover eines Textlinks, hell wie dunkel ------------------------
   Auf tiefem Grund wird die Schrift limette. Auf hellem geht das nicht:
   Limette auf Papier ist kaum 1.4:1, das Wort verschwände beim Zeigen. Statt
   einer zweiten Signalfarbe wechselt Limette die ROLLE — vom Strich zur
   Fläche: ein Markerstrich wischt von links unter die Schrift, die Schrift
   selbst bleibt tintendunkel. Dieselbe Geste wie beim hervorgehobenen Wort
   in einer Überschrift, nur beim Zeigen statt fest.
   Ein Wort, eine Bedeutung: Limette heisst Interaktion — mal als Schrift,
   mal als Grund, je nachdem, was auf dem Grund lesbar ist. */
.tlink,.textlink,:where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal){
  --marker:var(--limette);
  background-image:linear-gradient(var(--marker),var(--marker));
  background-repeat:no-repeat;background-position:0 82%;background-size:0 .5em;
  transition:color 220ms var(--ease),background-size 620ms var(--ease)}
.tlink:hover,.tlink:focus-visible,
.textlink:hover,.textlink:focus-visible,
:where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal):hover,
:where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal):focus-visible{
  background-size:calc(100% - var(--pfeilraum,0px)) .5em}
/* Auf tiefem Grund trägt die Schrift das Signal, kein Marker. */
[data-zone="tief"] .tlink,.fuss .tlink,.krume .tlink,.kopf .tlink{--marker:transparent}
[data-zone="tief"] .tlink:hover,[data-zone="tief"] .tlink:focus-visible,
.fuss .tlink:hover,.krume .tlink:hover,
.kopf .tlink:hover,.kopf .tlink:focus-visible{color:var(--limette)}
/* Der Link IM Satz wechselt auf tiefem Grund NICHT die Schriftfarbe: Limette
   als Schrift, limetter Unterstrich und die vorbeikommende limette Linie
   wären dreimal dieselbe Farbe auf engstem Raum. Die Schrift bleibt kalk,
   das Signal übernimmt allein der von links anwachsende Strich.
   Und er wächst UNTER der Schrift, nicht hinter ihr: kalk auf Limette steht
   schlecht, ein Marker in Textmitte bleichte die Buchstaben aus. */
/* Der Hover kommt hier nicht aus einer Fläche, sondern aus dem Unterstrich
   selbst: beim Zeigen wird er dicker und rückt näher an die Schrift.
   Grund ist der Zeilenumbruch — ein Hintergrund gehört bei einem inline
   liegenden Element EINEM Kasten über alle Zeilen hinweg, der Marker wüchse
   also über die erste Zeile und liesse die zweite leer. `text-decoration`
   kennt Zeilen und folgt jedem Stück. Auf hellem Grund fängt
   `box-decoration-break` das ab. */
[data-zone="tief"] .textlink,.fuss .textlink,
[data-zone="tief"] :where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal){
  background-image:none;
  text-decoration-color:var(--limette);
  transition:text-decoration-thickness 220ms var(--ease),
             text-underline-offset 220ms var(--ease)}
[data-zone="tief"] .textlink:hover,.fuss .textlink:hover,
[data-zone="tief"] :where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal):hover,
[data-zone="tief"] :where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal):focus-visible{
  text-decoration-thickness:4px;text-underline-offset:.13em}

/* ---------- Der Link IM Satz ----------------------------------------------
   Ein anderes Tier als der freistehende Textlink: keine eigene Zeile, kein
   Pfeil, keine eigene Grösse — er ist ein Wort im Satz und muss die Zeile in
   Ruhe lassen. Erkennbar durch den Unterstrich, nicht durch Farbe: eine
   zweite Schriftfarbe zerhackt den Absatz, und Limette wäre auf Papier
   ohnehin nicht lesbar.
   Der Unterstrich sitzt tiefer als der voreingestellte und ist 2px stark,
   passend zur restlichen Strichstärke der Seite; beim Zeigen kommt derselbe
   Markerstrich wie beim freistehenden Link. */
.textlink,:where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal){
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.18em;text-decoration-skip-ink:auto;
  text-decoration-color:var(--tief);
  /* Bricht der Link um, malt der Browser den Marker sonst als EINEN Kasten
     über beide Zeilen — die erste bekäme alles, die zweite nichts. `clone`
     gibt jedem Zeilenstück seinen eigenen. */
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-zone="tief"] .textlink,
[data-zone="tief"] :where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal),
.fuss .textlink{text-decoration-color:var(--limette)}
/* DER KARTENLINK TRAEGT DIE PILLE SELBST, WENN NIEMAND SIE ZEICHNET.
   Er schliesst eine Karte ab (`/marke-schaerfen`, `/website`) und ist deren
   Handlung — kein Knopf, weil die eine limette Haupthandlung im Band weiter
   unten steht und zwei limette Flaechen sich gegenseitig aufheben. Beim
   Zeigen legt die begleitende Linie eine Pille um ihn; das ist die Kontur,
   die er von sich aus nicht hat.
   `html:not(.linie)` ist genau der Fall, in dem es dieses Zeigen nicht gibt:
   Die Engine startet nur bei `pointer:fine` und ohne reduzierte Bewegung. Auf
   dem Telefon steht der Link also dauerhaft ohne Kontur da — als fette Zeile
   mit Pfeil, mitten auf einer lauten limetten Flaeche.
   Dann malt er sich die Pille selbst. Es ist KEINE neue Form, sondern
   dieselbe, die die Linie sonst zieht — nur ruhend statt beim Zeigen.
   NUR fuer den Kartenlink, nicht fuer jeden `.tlink`: Im Gefuege der
   Startseite stehen mehrere Textlinks dicht beieinander, und sechs Pillen
   untereinander waeren eine Knopfleiste, kein Text.
   Der Markerstrich faellt weg — er laege quer im Innern der Pille. */
html:not(.linie) .tlink--tafel{
  border:2px solid currentColor;border-radius:100px;
  padding:.5em 1.1em;background-image:none}
.tlink .pfeil{display:inline-block;transition:transform 320ms var(--ease)}
.tlink:hover .pfeil,.tlink:focus-visible .pfeil{transform:translateX(.4em)}

/* Fassung mit Pfeil NACH UNTEN — für Sprünge innerhalb derselben Seite.
   Der Unterschied ist nicht Zierde: ein Pfeil nach rechts verspricht eine
   andere Seite, einer nach unten eine Stelle weiter unten auf dieser. */
.tlink--ab:hover .pfeil,.tlink--ab:focus-visible .pfeil{transform:translateY(.35em)}

/* Der Übergang von den Zetteln zur Antwort: die Aussage und darunter der
   Weg dorthin. Beides in einem Block, damit der Abstand zwischen Satz und
   Sprung fest ist und nicht am Zufall der Absatzabstände hängt. */
/* Satz und Pfeil stehen NEBENEINANDER, nicht an den beiden Enden der Zeile:
   Flex statt absoluter Lage, damit der Abstand am Satz hängt und nicht am
   Rand des Fensters. Sonst klafft auf breiten Schirmen ein halber Bildschirm
   dazwischen, und die beiden lesen sich als zwei Dinge statt als eines —
   Aussage und ihr Weg. */
/* Sprungziele der Pfeile aus den Angebotsseiten. Ohne den Abstand landet die
   Oberkante des Zielabschnitts unter dem schwebenden Kopf. Die Regel steht
   hier und nicht beim jeweiligen Abschnitt, weil sie zum Pfeil gehört, der
   sie braucht. */
[id="konzept"],[id="wege"],[id="weiche"]{
  scroll-margin-top:calc(var(--kopf-h) + var(--kopf-luft) + 1rem)}

/* z-index am BLOCK und nicht nur am SVG darin: Der Block trägt `data-reveal`,
   läuft also beim Hereinkommen eine Transform-Animation — und ein Element mit
   laufender Transform ist eine eigene Stapelebene. Ein z-index am Pfeil darin
   wird dadurch eingesperrt und kann den nächsten Abschnitt nicht überragen;
   der Pfeil verschwände hinter der limetten Fläche, sobald er sie erreicht. */
.hinunter{position:relative;z-index:5;width:fit-content;
  margin-top:clamp(3.6rem,7vw,6rem)}
/* Die Zeile IST der Weg — darum ein Link und kein Absatz mit einem Link
   darunter. Zwei Texte hintereinander, die dasselbe versprechen, liest
   niemand als eines. Ohne Unterlinie, weil der gezeichnete Schwung daneben
   deutlicher zeigt, wohin es geht, als ein Strich es könnte. */
.hinunter__satz{display:block;margin:0;max-width:18ch;
  font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.038em;
  line-height:1.08;color:inherit;text-decoration:none}

/* Der zweite Teil beginnt auf EINER EIGENEN ZEILE — er ist das Versprechen,
   und ein Versprechen, das mitten im Satz weiterläuft, wird überlesen. Als
   Block statt mit einem <br>, damit der Marker nur so breit wird wie die
   Wörter (`width:fit-content`) und nicht bis zum Rand der Fläche läuft. */
.hinunter__satz em{display:block;width:fit-content;font-style:normal;
  margin-top:.12em;
  background:linear-gradient(var(--limette),var(--limette)) no-repeat 0 88%/100% 34%;
  transition:background-size 320ms var(--ease),box-shadow 320ms var(--ease)}

/* Der Marker steht IMMER — er ist das Zeichen, dass hier etwas anfassbar
   ist, und ein Zeichen, das erst beim Zeigen erscheint, hilft dem nicht, der
   noch nicht gezeigt hat. Beim Zeigen WÄCHST er, statt zu erscheinen: über
   die ganze Zeilenhöhe, mit einem Rahmen aus derselben Farbe — wie ein
   Textmarker, den jemand ein zweites Mal darüberzieht. */
.hinunter__satz:hover em,.hinunter__satz:focus-visible em{background-size:100% 100%;
  box-shadow:0 0 0 .18em var(--limette)}

/* DER GROSSE SCHWUNG.
   Er steht rechts neben der Aussage, wo `max-width:26ch` die Fläche freilässt
   — er füllt also nichts zu, sondern nimmt Platz ein, der ohnehin da war.
   Der Überhang nach unten ist die eigentliche Aussage der Figur: Der Pfeil
   hört nicht am Abschnitt auf, sondern reicht in die limette Fläche hinein
   und überbrückt den Bruch zwischen beiden, statt ihn nur zu behaupten. Der
   Betrag wächst mit dem Fenster, sonst hinge er auf grossen Schirmen knapp
   unter der Kante und auf kleinen mitten im nächsten Text.
   Der z-index unten gehört dazu: sonst verschwindet genau das überhängende
   Stück hinter der limetten Fläche. */
/* Er hängt am ENDE DES SATZES und nicht am Rand der Fläche: `.hinunter` ist
   nur so breit wie der Text (`width:fit-content`), `left:100%` sitzt also
   unmittelbar dahinter. Damit bleibt der Abstand gleich, egal wie breit das
   Fenster ist. */
.hinunter__schwung{position:absolute;left:100%;z-index:5;pointer-events:none;
  margin-left:clamp(1rem,3vw,2.5rem);
  width:clamp(104px,15vw,215px);height:auto;
  color:var(--tief);transform:rotate(6deg)}

/* DER ÜBERHANG WIRD GERECHNET, NICHT GESCHÄTZT. Der erste Term ist genau das
   `padding-block` von `.section`, der zweite, wie weit die Spitze DARUNTER
   liegt — sie steht also 7rem tief im nächsten, limetten Feld. Ändert sich das
   Raster, wandert der Pfeil mit, statt in der Luft oder mitten im nächsten
   Text zu enden.
   7rem und nicht weniger: Der Pfeil soll die Kante nicht streifen, sondern
   sichtbar überschreiten, sonst liest er sich als Verzierung am
   Abschnittsende statt als Weg in den nächsten.
   Beim Zeigen bewegt er sich NICHT — der Satz hat mit dem Marker schon eine
   eigene Antwort darauf, und ein Pfeil, der auf jede Handbewegung reagiert,
   wirkt lose. */
.hinunter__schwung{bottom:calc(-1 * (clamp(4rem,8.5vw,8rem) + 7rem))}
/* DER PFEIL HEBT SICH, NICHT DER ABSCHNITT.
   Er ragt in den nächsten Abschnitt hinein und muss über dessen Fläche
   liegen. Der z-index darf dafür NICHT am Abschnitt stehen:
     · `.section:not([data-zone])` hat eine deckende Papierfläche (sie deckt
       die feste Bühne ab). Über 2 malt sie sich über das Wasserzeichen, und
       der Schriftzug verschwindet auf ganzer Abschnittshöhe.
     · Unter 2 wird der Abschnitt zu einem eigenen Stapel, und die Zettel
       darin (z-index 3) gelten nur noch innerhalb davon — das Wasserzeichen
       schimmert dann über Mint, Himmel und Pfirsich.
   Steigt nur der Pfeil, fällt beides weg. Der Wert steht oben bei
   `.hinunter__schwung`, damit er nicht an zwei Orten gepflegt wird. */

/* Er zeichnet sich, sobald ER selbst im Bild ist — nicht schon, wenn der
   Block darüber hereinkommt: Der Pfeil hängt tief unter dem Text, und die
   Zeichnung liefe unbemerkt ab. Darum ein eigener Beobachter in app.js
   (`initHinunter`), der `.zieht` erst setzt, wenn genug von der Kurve zu
   sehen ist.
   GRUNDZUSTAND IST SICHTBAR: Ohne JavaScript steht der Pfeil einfach da; erst
   das Skript setzt `.bereit` und nimmt ihn weg, um ihn gleich darauf zu
   ziehen. Umgekehrt bliebe er ohne Skript für immer unsichtbar.
   Die Spitze wird gezogen wie der Bogen und setzt 40ms vor dessen Ende an —
   eingeblendet erschiene sie mit einer sichtbaren Lücke danach. */
.hinunter__schwung.bereit .hinunter__bogen,
.hinunter__schwung.bereit .hinunter__spitze{stroke-dasharray:1;stroke-dashoffset:1}
.hinunter__schwung.zieht .hinunter__bogen{animation:schwungZiehen 820ms var(--ease) forwards}
.hinunter__schwung.zieht .hinunter__spitze{animation:schwungZiehenSpitze 260ms var(--ease) 780ms forwards}
@keyframes schwungZiehen{to{stroke-dashoffset:0}}
@keyframes schwungZiehenSpitze{to{stroke-dashoffset:0}}

/* Auf schmalen Schirmen steht der Satz über die volle Breite — daneben ist
   kein Platz mehr. Dort rutscht der Schwung unter den Link und wird kleiner;
   der Überhang bleibt, er ist der Sinn der Figur. */
/* Schmal: der Satz nimmt die Breite, daneben ist kein Platz. Der Pfeil
   rückt unter den Satz, bleibt aber im Überhang — der ist der Sinn der
   Figur, nicht seine Grösse. */
@media (max-width:760px){
  .hinunter{width:auto}
  .hinunter__schwung{left:auto;right:clamp(0px,6vw,60px);margin-left:0;
    /* SCHMAL MUSS DER PFEIL KUERZER WERDEN, NICHT NUR TIEFER HAENGEN.
       Er ist absolut gesetzt und haengt an `bottom` — die Spitze also am
       Wert, der Anfang bei Spitze minus Hoehe. Und die Hoehe folgt der
       Breite: viewBox 180x262, Verhaeltnis 1.456. Bei 84px waren das 122px.
       Am Schirm ist beides folgenlos, weil er in der freien Spalte NEBEN dem
       Satz steht. Schmal gibt es die Spalte nicht: Er liegt ueber der vollen
       Textbreite, und dann kollidiert er entweder unten mit der Schlagzeile
       des naechsten Abschnitts (zu langer Ueberhang) oder oben mit dem Satz,
       aus dem er kommt (zu kurzer). Beides ist passiert.
       Also die Hoehe verkleinern: 72px Breite sind 105px Hoehe. Damit geht
       die Rechnung auf — der naechste Abschnitt laesst oben
       clamp(4.5rem,10vw,9.5rem) frei, bei 360px also 72px:
         Spitze  51px unter der Abschnittskante  ->  21px ueber der Schlagzeile
         Anfang  18px unter dem Satz
       Die Polsterung im Wert ist die von `.section` — und zwar die aus dem
       spaeteren Ueberschreibungsblock (4.5rem/10vw/9.5rem), nicht die vom
       Dateianfang. Die Grundregel oben rechnet noch mit der alten; am Schirm
       faellt der Unterschied nicht auf, hier schon. */
    width:72px;transform:rotate(3deg);
    bottom:calc(-1 * (clamp(4.5rem,10vw,9.5rem) + 3.2rem))}

  /* DER PFEIL HAENGT AM FELD, WENN ES EINES GIBT.
     Die Rechnung oben geht davon aus, dass der Sprungsatz das LETZTE Stueck
     im Abschnitt ist — dann liegt seine Unterkante an der Abschnittskante und
     der Ueberhang landet in der Flaeche darunter. Auf /marke-schaerfen folgt
     dem Sprung aber noch der Passt-nicht-Absatz. Am Satz aufgehaengt hing der
     Pfeil quer ueber diesem Absatz und zeigte mitten in den Text.
     Steht ein `.hinunterfeld` um beide, wird dessen Unterkante der Anker:
     `.hinunter` gibt schmal seinen Bezug ab. Die Werte oben bleiben, wie sie
     sind — es aendert sich nur, WORAN sie gemessen werden.
     Der z-index wandert mit, sonst verschwaende der Ueberhang hinter der
     Flaeche des naechsten Abschnitts. */
  .hinunterfeld{position:relative;z-index:5}
  .hinunterfeld .hinunter{position:static;z-index:auto}
}

/* Fassung mit STEHENDEM Markerstrich statt Unterstrich — für den seltenen
   Fall, dass MEHRERE Links dicht in einem Absatz liegen und der übliche tiefe
   Strich den Text zerhacken würde (Startseite, die vier Kompetenzen im
   Gefüge-Absatz). Es ist genau der Strich, den ein `.tlink` beim Zeigen
   bekommt, hier schon im Ruhezustand, weil ein Link im Satz sonst keinen
   Anhaltspunkt hat; beim Zeigen wächst er wie beim `.tlink--marker`.
   Ein halbes Em, kein Haarstrich: 3px Limette auf Papier liest sich als
   Verunreinigung, ein halbes Em als Marker.
   NUR auf hellem Grund — auf tief gäbe es Limette auf Limette; die Regel
   darunter stellt dort den Unterstrich zurück, damit ein falsch gesetzter
   Link nicht unsichtbar wird.
   DIE WÄHLER-LÄNGE IST KEIN ZUFALL: Die Grundregel oben trägt drei `:not()`,
   eine einzelne Klasse käme dagegen nicht an. */
:where(p,li,dd,figcaption) a.textlink--limette:not(.btn):not(.tlink):not(.kanal){
  text-decoration:none;background-size:100% .5em}
/* Der wachsende Strich ist der RÜCKFALL, nicht die Regel: Der Begleiter
   kreist diese Links ein wie ein hervorgehobenes Wort, und ein gleichzeitig
   wachsender Marker wäre eine zweite Geste für dieselbe Aussage.
   `html:not(.linie)` heisst «keine Linie da» — kein feiner Zeiger oder
   reduzierte Bewegung; ohne den Rückfall hätte der Link dort gar keinen
   Hover-Zustand.
   `:focus-visible` bleibt UNGETEILT: Die Linie folgt dem Zeiger, nicht dem
   Tastaturfokus. Wer sich durch die Seite tabbt, braucht den Strich immer. */
html:not(.linie) :where(p,li,dd,figcaption) a.textlink--limette:not(.btn):not(.tlink):not(.kanal):hover,
:where(p,li,dd,figcaption) a.textlink--limette:not(.btn):not(.tlink):not(.kanal):focus-visible{
  background-size:100% .78em}
[data-zone="tief"] :where(p,li,dd,figcaption) a.textlink--limette:not(.btn):not(.tlink):not(.kanal),
[data-zone="limette"] :where(p,li,dd,figcaption) a.textlink--limette:not(.btn):not(.tlink):not(.kanal){
  text-decoration:underline}

/* ---------- Rechtstexte: Impressum und Datenschutz -----------------------
   Ein Rechtstext wird nicht überflogen, sondern nachgeschlagen — er braucht
   eine GLIEDERUNG, die man sieht, keine Schlagzeile, die ruft.
   Die Stufen tragen, was sie sagen: h2 die beiden Teile, h3 die nummerierten
   Kapitel, h4 die Unterkapitel. Die Grade sind eng gestaffelt, damit ein
   Kapitel nicht lauter wird als der Text, den es ankündigt — den Unterschied
   machen die Abstände, nicht die Grösse.
   `scroll-margin-top` ist kein Beiwerk: Der Kopf schwebt fest über der Seite,
   und ohne den Abstand landet ein Sprung aus dem Inhaltsverzeichnis mit der
   Überschrift unter dem Glas. */
.rechtstext h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;margin:clamp(3rem,6vw,4.5rem) 0 1.2rem;padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--hair)}
.rechtstext>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-size:clamp(1.08rem,1.5vw,1.28rem);font-weight:700;letter-spacing:-.018em;
  line-height:1.25;margin:2.4rem 0 .7rem}
.rechtstext h4{font-size:1.02rem;font-weight:700;letter-spacing:-.012em;
  line-height:1.3;margin:1.7rem 0 .5rem;color:var(--ink)}
.rechtstext :is(h2,h3,h4){scroll-margin-top:7rem}
.rechtstext p{margin:0 0 .9rem;line-height:1.65}
.rechtstext ul,.rechtstext ol{margin:0 0 1.1rem;padding-left:1.2rem}
.rechtstext li{margin:0 0 .35rem;line-height:1.6}

/* ---------- Musterseite /design -----------------------------------------
   Nur für die Musterseite. Sie zeigt die Bausteine, darum braucht sie ein
   paar Hilfsklassen zum Beschriften — die dürfen nirgends sonst auftauchen. */
.dp-tag{display:block;font-family:var(--f-util);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.dp-zeile{padding:1.6rem 0;border-top:1px solid var(--hair)}
.dp-zeile .dp-tag{margin:0 0 .8rem}
.dp-reihe{display:flex;flex-wrap:wrap;gap:2rem 2.6rem;align-items:flex-start}
.dp-farbe b{display:block;font-family:var(--f-util);font-size:.8rem;margin-top:.7rem}
.dp-farbe code{font-size:.78rem;color:var(--muted)}
.dp-farbe span:last-child{display:block;font-size:var(--fs-sm);color:var(--muted);margin-top:.25rem}
.dp-feld{display:block;height:96px;border-radius:var(--r);border:1px solid var(--hair)}
code{font-family:var(--f-util);font-size:.86em}

/* ---------- Hero ---------- */
.hero{min-height:94svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:calc(var(--kopf-h) + 5rem) clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.hero h1{max-width:14ch;font-size:var(--fs-mega);letter-spacing:-.048em}
.hero h1 em{color:var(--limette)}
/* DAS HERVORGEHOBENE WORT — allgemein, nicht je Stelle.
   Auch im `<p>`, und das ist kein Zugeständnis: Mehrere Schlagzeilen dieser
   Website sind aus gutem Grund keine Überschrift, sondern ein Absatz — der
   Abschnitt hat seine Überschrift schon im Etikett darüber, ein zweites h2
   daneben wäre eine Gliederungsebene, die es nicht gibt.
   DIE MARKE GEHÖRT INS STYLESHEET, NIE ALS `style="…"` ANS ELEMENT: Die Linie
   kreist hervorgehobene Wörter ein und sucht dafür nach Regeln, nicht nach
   Aussehen — am Element gesetzt sieht die Marke richtig aus und ist für alles
   andere unsichtbar.
   Ein `<em>` im Fliesstext gibt es auf dieser Website nicht; es ist
   ausschliesslich die Marke (`em{font-style:normal}` ganz oben). Darum ist
   die weite Wahl hier sicher.
   Limette wechselt die Rolle wie überall: auf hellem Grund liegt sie als
   Fläche HINTER dem Wort (als Schrift wäre sie auf Papier kaum 1.4:1), auf
   tiefem Grund IST sie die Schrift.
   `box-decoration-break:clone` ist Pflicht: Bricht das Wort um, bekäme sonst
   nur das erste Stück eine runde Ecke und der Rest hinge als Balken daran.
   Nur h1 und h2 — ein h3 ist ein Zwischentitel, dort wäre die Fläche lauter
   als der Abschnitt, den sie einleitet.
   Die Sonderfassungen weiter unten (.auftakt, .abschluss__frage, .zitat)
   stehen später und mit höherer Spezifität, sie gewinnen also weiterhin. */
:where(h1,h2,p) em{background:var(--limette);padding:0 .12em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
[data-zone="tief"] :where(h1,h2,p) em{background:none;padding:0;color:var(--limette)}
/* AUF LIMETTEM GRUND WIRD DIE MARKE ZU EINEM STÜCK TIEFER ZONE: tiefe Fläche,
   limette Schrift.
   Die Fläche muss tief sein, weil alles andere hell wäre — Limette auf
   Limette ist nichts, Papier auf Limette fast nichts (keine 1.4:1); das ergäbe
   keinen Umriss, sondern einen Schatten.
   Die SCHRIFT darin ist limette und nicht Papier, und das ist der Punkt: Auf
   einer tiefen Fläche ist Limette überall auf dieser Website die Schrift. Die
   Marke ist damit kein neues Rezept, sondern ein ausgeschnittenes Stück tiefe
   Zone — das Wort behält seine Farbe und wechselt nur den Grund unter sich.
   9.8:1.
   Damit gibt es die Marke in drei Fassungen, und in allen dreien sagt Limette
   dasselbe: auf Papier die Fläche hinter dem Wort, auf tief die Schrift, auf
   Limette die Schrift auf einer tiefen Insel. */
[data-zone="limette"] :where(h1,h2,p) em{background:var(--tief);color:var(--limette);
  padding:0 .12em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Die Zeile im Hero liegt über einem Foto, nicht über einer Fläche: --muted
   (66 % Deckung) verschwindet dort. Voll deckendes Papierweiss, dafür klein
   und gesperrt — Kontrast über Helligkeit, nicht über Grösse. */
.hero .eyebrow{color:var(--kalk)}
.eyebrow--unter{margin:clamp(1.4rem,2.6vw,2.1rem) 0 0}
.hero__zeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2.4rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.hero__scroll{font-family:var(--f-util);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,244,238,.5);display:flex;align-items:center;gap:.7rem;margin-top:2.5rem}
/* Der Pfeil behält die Strichstärke der Haarlinie: 1 Einheit im 12er-viewBox,
   auf 12px Breite gezeichnet. Grösser wäre er ein Knopf, und ein Knopf ist er
   nicht — die Handlung ist das Scrollen selbst. */
.hero__scroll svg{flex:0 0 auto;width:12px;height:30px;fill:none;stroke:currentColor;
  stroke-width:1;stroke-linecap:square;stroke-linejoin:miter}
.zeile{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.zeile>span{display:block;transform:translateY(105%);transition:transform 1050ms var(--ease)}
.geladen .zeile>span{transform:none}
.geladen .zeile:nth-child(2)>span{transition-delay:80ms}
.geladen .zeile:nth-child(3)>span{transition-delay:160ms}

/* ---------- Kennzahlenband ----------
   Die Zahlen stehen als GRUPPE in der Mitte, nicht auf vier Vierteln verteilt:
   Vier Spalten zu 1fr teilen die Inhaltsbreite starr auf und schieben jede
   Zahl an den linken Rand ihres Viertels — dazwischen klafft der Rest, und das
   Band liest sich als Tabelle statt als eine Aussage. So bestimmt der Inhalt
   die Breite, `justify-content` setzt die Gruppe mittig, und der Weissraum
   liegt aussen statt in den Lücken. */
.zahlen{--spalt:clamp(2.5rem,6vw,7rem);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.6rem,2.4vw,2.6rem) var(--spalt)}
/* Keine HÖCHSTbreite am Block: Die Beschriftung ist mit 16ch schon gedeckelt,
   die Zahl darüber kann bei drei Ziffern breiter werden — ein Deckel am Block
   liesse sie überlaufen.
   Eine MINDESTbreite dagegen schon, und sie leistet zwei Dinge: Die vier
   Blöcke stehen gleich breit da statt 159·129·159·159, und weil sie gleich
   breit sind, bricht die Zeile gleichmässig um — zwei und zwei oder alle vier
   untereinander. Ungleich breit ergab auf 360px ein 2+1+1. */
.zahlen>div{flex:0 1 auto;min-width:10rem}
/* `tabular-nums` wäre die saubere Lösung gegen das Zappeln im Zähler und ist
   hier WIRKUNGSLOS: Diese DM-Sans-Fassung kennt das Merkmal nicht (bei 96px
   gemessen: vier Nullen 267px, vier Einsen 124px, mit und ohne Eigenschaft
   gleich). Die Zeile bleibt stehen, weil sie richtig ist und beim
   Schriftwechsel von selbst greift; bis dahin hält `platzHalten()` in app.js
   den Platz. Wer die Schrift tauscht, misst nach und kann das dort vermutlich
   ausbauen. */
.kennzahl{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800;letter-spacing:-.05em;
  line-height:.9;color:var(--tief);display:block;font-variant-numeric:tabular-nums}
.kennzahl+span{display:block;font-size:var(--fs-sm);color:var(--nebel);margin-top:.7rem}
/* Der Text steht mittig im Block — Folge des reservierten Platzes: Reserviert
   wird der breiteste ZWISCHENSTAND, und der ist breiter als die Endzahl
   («2’000» gegen «2’898»: 34px). Links gesetzt hinge dieser Rest als Loch
   hinter genau einer Zahl; mittig verteilt er sich auf beide Seiten. */
.zahlen>div{text-align:center}

/* ---------- Stationen: siehe «Die vier Aufgaben» weiter unten ---------- */
.stationen{list-style:none;margin:0;padding:0}
.hinweis{font-size:var(--fs-lead);color:var(--muted);max-width:32ch;margin:0}

/* ---------- Brotkrume — der Balken unter der Bühne -----------------------
   Der Weg von der Startseite bis hierher, in einer Zeile auf der tiefsten
   Fläche der Seite.
   Er sitzt direkt unter dem Hero und ist die untere Kante der Bühne: --tiefer
   ist dunkler als der Hero darüber und dunkler als jeder Abschnitt darunter,
   der Balken schliesst das Bühnenbild also ab, statt ein eigenes Band zu
   eröffnen. Darum trägt er weder Linie noch Rahmen — die Kante entsteht aus
   dem Farbsprung.
   Die Schrift ist die der Etiketten: Mono, klein, gesperrt, versal — dieselbe
   Sprache wie «Angebot 01» im Hero darüber, und der Grund, warum die Zeile
   trotz voller Breite nicht laut wird. Die Halte davor stehen gedämpft, der
   aktuelle in vollem Papierton: Der Weg wird zum Ziel hin heller, statt dass
   der Ort eine Auszeichnung bräuchte.
   Limette bleibt Interaktion: Sie liegt im Strich, der beim Zeigen unter einem
   Halt aufwächst — dieselbe Geste wie in der Kopfnavigation, mit der die Krume
   ein Paar bildet. Die einzige ruhende Limette ist die Nummer des
   Angebotshalts; sie steht so schon im Flyout des Kopfes. */
/* --focus muss mit: Der Balken ist tief, trägt aber kein [data-zone] — ohne
   die Zeile bliebe der Fokusrahmen der Grundwert --tief, also dunkel auf der
   dunkelsten Fläche der Seite. */
/* position/z-index wegen der Klappe: Sie hängt unter dem Balken und damit
   über dem Abschnitt darunter — und dort liegen Bilder auf z-index 3. Sechs
   ist die höchste Zahl im Inhalt und bleibt weit unter Kopf (50) und
   Linie (60). */
.krume{background:var(--tiefer);color:var(--kalk);--muted:rgba(246,244,238,.62);
  --hair:rgba(246,244,238,.18);--focus:var(--limette);position:relative;z-index:6}
.krume__in{padding-block:1.05rem}
.krume__spur{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:.25rem .55rem;font-family:var(--f-util);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.5}
.krume__spur>li{display:flex;align-items:center;gap:.55rem}
/* Der Trenner ist GEZEICHNET und nicht geschrieben: Ein Zeichen im `content`
   wird von manchen Vorlesern mitgesprochen («Marketing Schrägstrich planen»),
   zwei Kanten sind stumm. Der Winkel zeigt in die Leserichtung.
   Er hängt HINTEN am vorigen Halt und nicht vorn am nächsten, obwohl beides
   gleich aussieht: Beim Halt mit Klappe wäre er sonst Teil von dessen Kasten,
   und die Klappe richtete sich am Trennzeichen statt am Wort aus. */
.krume__spur>li:not(:last-child)::after{content:'';flex:none;width:.34em;height:.34em;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);opacity:.42;margin-left:.15rem}
.krume__link,.krume__ordner{color:rgba(246,244,238,.62);display:flex;align-items:center;gap:.55rem}
/* Der Halt ohne eigene Seite ist ein Knopf und muss aussehen wie die Halte
   daneben: Der Browser gibt einem <button> sonst seine eigene Schrift, seinen
   eigenen Grund und ein Polster. */
button.krume__ordner{font:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer}
/* Der Wähler ist so lang, weil die Grundregel für Links im Satz drei :not()
   trägt — die Halte stehen in <li>, und `.krume a` allein käme dagegen nicht
   an. Derselbe Fall wie im Fuss. */
.krume :where(li) a:not(.btn):not(.tlink):not(.kanal){text-decoration:none;background-image:none}
/* Der Strich wächst von links wie unter den Menüpunkten im Kopf — und wie
   dort liegt er als eigene Fläche UNTER der Schrift und nicht als Unterstrich
   an ihr: In Versalien mit .16em Sperrung sässe eine `text-decoration` zu nah
   und liefe rechts über den Zwischenraum des letzten Buchstabens hinaus.
   Beim Knopf hängt der Strich am WORT und nicht am Knopf: Ein Strich, der
   unter dem Winkel durchläuft, unterstreicht ein Zeichen statt eines Wortes. */
.krume__link,button.krume__ordner>span:not(.krume__winkel){position:relative}
.krume__link,button.krume__ordner{transition:color 240ms var(--ease)}
/* right:.16em ist genau die Sperrung: Sie liegt auch HINTER dem letzten
   Buchstaben, und ohne den Abzug ragte der Strich um einen Zwischenraum über
   das Wort hinaus — bei .68rem gut sichtbar. */
.krume__link::after,button.krume__ordner>span:not(.krume__winkel)::after{
  content:'';position:absolute;left:0;right:.16em;
  bottom:-.42em;height:2px;
  background:var(--limette);transform:scaleX(0);transform-origin:left;
  transition:transform 620ms var(--ease)}
.krume__link:hover,.krume__link:focus-visible,
button.krume__ordner:hover,button.krume__ordner:focus-visible,
.krume__has:hover button.krume__ordner{color:var(--kalk)}
/* Der eigene Strich nur, wenn KEINE Linie läuft — dieselbe Regel wie im Kopf
   und aus demselben Grund: Mit Engine zeichnet die Linie diesen Strich, und
   der eigene führe daneben limette aus. Dieselbe Geste, zweimal erzählt.
   `:focus-visible` bleibt ungeteilt: Die Linie folgt dem Zeiger, nicht dem
   Tastaturfokus. */
html:not(.linie) .krume__link:hover::after,
.krume__link:focus-visible::after,
html:not(.linie) button.krume__ordner:hover>span::after,
button.krume__ordner:focus-visible>span::after,
html:not(.linie) .krume__has:hover button.krume__ordner>span::after{
  transform:scaleX(1);transition:transform 300ms var(--ease)}
/* Der Halt mit Klappe darunter — dieselbe .flyout wie im Kopf, damit es
   nicht zwei Sorten Klappe gibt. Der Winkel sagt, dass hier etwas aufgeht
   und nicht weitergegangen wird: Er zeigt nach unten, während der Trenner
   daneben nach rechts zeigt. */
.krume__has{position:relative}
button.krume__ordner{padding-bottom:0}
.krume__winkel{flex:none;width:.32em;height:.32em;margin-left:-.1rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-.06em,-.06em);
  transition:transform 300ms var(--ease),opacity 240ms var(--ease);opacity:.7}
.krume__has:hover .krume__winkel,button.krume__ordner[aria-expanded="true"] .krume__winkel{opacity:1}
button.krume__ordner[aria-expanded="true"] .krume__winkel{
  transform:rotate(225deg) translate(-.06em,-.06em)}
/* Die Klappe hängt am Balken, nicht am Kopf: Sie öffnet unter der tiefsten
   Fläche der Seite auf hellen Grund, darum trägt sie ihre eigene Kante schon
   im Kopf-CSS. Hier braucht sie nur den Ort. */
/* 1.05rem ist genau die untere Polsterung des Balkens: Die Klappe hängt damit
   an dessen Unterkante und nicht irgendwo darunter — sie ist ein Teil des
   Balkens, kein Kasten daneben. */
.krume__klappe{top:calc(100% + 1.05rem);min-width:min(320px,calc(100vw - 3rem))}
.krume__klappe a{font-size:.93rem;letter-spacing:-.012em;text-transform:none;
  font-family:var(--f);color:var(--kalk)}
/* Die Seite, auf der man ohnehin steht, tritt in der Klappe zurück — sie ist
   kein Weg mehr, sondern der Ort. */
.krume__klappe a[aria-current="page"]{opacity:.45}
/* Ohne Skript gibt es niemanden, der die Klappe öffnet — dann steht sie offen
   in der Zeile, wie im Handymenü. Der Weg darf nicht davon abhängen, dass ein
   Skript läuft; «Angebot» wäre sonst genau die Sackgasse, die der Knopf
   verhindern soll. */
html:not(.js) .krume__klappe{position:static;opacity:1;visibility:visible;transform:none;
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;background:none;border:0;padding:0;min-width:0}
html:not(.js) .krume__winkel{display:none}
/* Auf dem Telefon hängt die Klappe nicht am Wort, sondern am Balken: An einem
   Wort, das schon in der Bildmitte steht, liefe sie rechts hinaus.
   `position:static` am Halt gibt sie an `.krume` weiter — von dort spannt sie
   über die Inhaltsbreite, und `top:100%` ist die Unterkante des Balkens. */
@media (max-width:700px){
  .krume__has{position:static}
  .krume__klappe{top:100%;left:1.25rem;right:1.25rem;min-width:0}
}
/* Der Halt, auf dem man steht: voller Papierton, eine Spur kräftiger — und
   kein Link, weil er auf sich selbst zeigen würde. */
.krume__jetzt{color:var(--kalk);font-weight:500}
.krume__nr{color:var(--limette)}
/* Seiten ausserhalb des Angebots haben keine Nummer; dort trägt ein Punkt die
   Marke. Zwei Formen, eine Aussage: hier stehen Sie. */
.krume__punkt{flex:none;width:6px;height:6px;border-radius:50%;background:var(--limette)}

/* ---------- Bausteine ---------- */
.karte{background:var(--grund);border:1px solid var(--hair);border-radius:14px;padding:clamp(1.5rem,2.6vw,2.3rem);
  transition:transform 900ms var(--ease) 60ms}
.karte:hover{transform:translateY(-4px);transition:transform 420ms var(--ease)}
.karte h3{margin-bottom:.7rem}
.karte p:last-child{margin-bottom:0}
.karte--mint{background:var(--mint);border-color:transparent}
.karte--himmel{background:var(--himmel);border-color:transparent}
.karte--pfirsich{background:var(--pfirsich);border-color:transparent}

/* ---------- Zettel — der Vorschlag, der noch nicht Preisliste ist ----------
   Eine Karte behauptet Ordnung, ein Zettel behauptet Arbeit. Die Bündel sind
   Vorschläge und keine Menükarte — darum liegen sie schief, in den drei
   Flächentönen und mit einem Schatten. Limette kommt nicht vor: sie bedeutet
   Handlung, und ein Zettel ist keine.
   ZWEITEILIG, UND ZWAR NOTWENDIG: Das <li> nimmt den Auftritt (`data-reveal`
   setzt dort seine eigene `animation`), das Blatt darin dreht und schwebt.
   Beides auf einem Knoten hiesse zwei `animation`-Eigenschaften am selben
   Element — die spätere gewinnt, und der Auftritt fiele ersatzlos aus.
   Beim Zeigen wird das Schweben PAUSIERT, nicht abgeschaltet: `animation:none`
   liesse den Zettel auf seine Grundlage zurückspringen. Gehoben wird er über
   den Schatten, denn ein zweiter `transform` käme gegen die laufende
   Animation ohnehin nicht an. */
/* Der z-index muss am <li> stehen und nicht am Zettel darin: Das <li> trägt
   `data-reveal`, läuft also eine Transform-Animation mit `fill:both` — und die
   bleibt danach angewendet. Damit ist das <li> dauerhaft eine eigene
   Stapelebene, und der z-index 3 des Zettels gilt nur noch INNERHALB davon;
   global stünde das <li> auf «auto» und damit unter dem Wasserzeichen
   (z-index 2). Dieselbe Sache wie beim Pfeil eine Regel weiter oben. */
.postits>li{position:relative;z-index:3}
.postits{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.7rem,3.6vw,3rem)}
.postit{--dreh:0deg;--amp:.28rem;--dur:8s;--del:0s;
  height:100%;display:flex;flex-direction:column;gap:1rem;
  background:var(--mint);color:var(--tief);border-radius:2px;
  padding:clamp(1.5rem,2.5vw,2.2rem);
  /* Zwei Lagen, nicht eine: die enge Lage setzt den Zettel auf die Seite, die
     weite hebt ihn davon ab. Mit nur einer weichen Lage sah er aus, als
     schwebe er über allem, ohne je aufzuliegen. */
  box-shadow:0 2px 5px rgba(6,37,35,.11),0 16px 34px rgba(6,37,35,.15);
  transform:rotate(var(--dreh));
  animation:zettel-schweben var(--dur) ease-in-out infinite;animation-delay:var(--del);
  transition:box-shadow 520ms var(--ease)}
.postit:hover{animation-play-state:paused;
  box-shadow:0 3px 8px rgba(6,37,35,.12),0 30px 54px rgba(6,37,35,.22);z-index:4}
.postit h3{margin:0}
.postit p{margin:0;color:var(--nebel)}
/* Der Absender am Kopf des Zettels. Ohne ihn liest sich die Wand als sechs
   Aufgaben, die auch die eigenen sein könnten. Derselbe Strich wie beim
   `.eyebrow`, nur kürzer: eine Beschriftung, keine Abschnittsmarke. Der
   negative Rand nimmt die 1rem Spaltenlücke wieder heraus — Marke und Titel
   gehören zusammen. */
.postit__marke{display:flex;align-items:center;gap:.55rem;margin:0 0 -.5rem;
  font-family:var(--f-util);font-size:.62rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nebel)}
.postit__marke::before{content:'';width:16px;height:2px;background:var(--tief);flex:none}
/* Die Marke sitzt am Fuss des Zettels, auf einer Linie, egal wie lang der Text
   darüber ist — `margin-top:auto` in der Spalte. */
.postit .chips{margin-top:auto;padding-top:.3rem}
/* Auf einer Farbfläche liest sich eine Umrandung als Loch und eine hellere
   Fläche als aufgeklebt. Also Papier statt Kante. */
.postit .chip{background:var(--kalk);border-color:transparent;color:var(--nebel)}
.postit--mint{background:var(--mint)}
.postit--himmel{background:var(--himmel)}
.postit--pfirsich{background:var(--pfirsich)}
/* Sechs Sätze für sechs Zettel — gewürfelt, nicht gerechnet. Sobald die Dauern
   ein gemeinsames Vielfaches haben, kommt die Wand im Takt zur Deckung, und
   aus Bewegung wird Mechanik. Dieselbe Regel wie bei den Köpfen in .avatare. */
.postits>li:nth-child(1) .postit{--dreh:-1.6deg;--dur:9.3s;--del:-2.1s;--amp:.26rem}
.postits>li:nth-child(2) .postit{--dreh:1.1deg;--dur:7.4s;--del:-5.3s;--amp:.31rem}
.postits>li:nth-child(3) .postit{--dreh:-.7deg;--dur:10.6s;--del:-.8s;--amp:.22rem}
.postits>li:nth-child(4) .postit{--dreh:1.8deg;--dur:8.1s;--del:-4.4s;--amp:.29rem}
.postits>li:nth-child(5) .postit{--dreh:-1.2deg;--dur:11.2s;--del:-1.6s;--amp:.24rem}
.postits>li:nth-child(6) .postit{--dreh:.8deg;--dur:6.9s;--del:-3.7s;--amp:.33rem}
/* Keine Pendelbewegung auf einer Achse: eine kleine schiefe Schlaufe, bei der
   sich auch der Winkel leicht mitbewegt — ein Zettel, der an einer Ecke hängt,
   schwingt nicht senkrecht. */
@keyframes zettel-schweben{
  0%  {transform:rotate(var(--dreh)) translate(0,var(--amp))}
  28% {transform:rotate(calc(var(--dreh) * .55)) translate(calc(var(--amp) * .3),calc(var(--amp) * -.45))}
  55% {transform:rotate(calc(var(--dreh) * 1.25)) translate(calc(var(--amp) * -.2),calc(var(--amp) * -1))}
  79% {transform:rotate(calc(var(--dreh) * .8)) translate(calc(var(--amp) * -.35),calc(var(--amp) * -.25))}
  100%{transform:rotate(var(--dreh)) translate(0,var(--amp))}
}
/* Der globale Riegel am Dateiende setzt die Dauer auf .001ms — bei einer
   endlosen Schleife hiesse das Zittern statt Stillstand. */
@media (prefers-reduced-motion:reduce){.postit{animation:none !important}}

.liste{list-style:none;margin:0;padding:0}
.liste li{padding:.8rem 0 .8rem 1.9rem;position:relative;border-bottom:1px solid var(--hair);font-size:1.04rem}
.liste li:last-child{border-bottom:0}
.liste li::before{content:'';position:absolute;left:0;top:1.4rem;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--limette)}
.section:not([data-zone="tief"]) .liste li::before{border-color:var(--tief)}/* ---------- .liste--haken: die Punkte werden beim Lesen abgehakt -----------
   Nur für Aufzählungen, deren Punkte am Schluss ALLE geliefert sind — eine
   Inhaltsliste, keine Auswahl.
   Der Haken wird auf das Feld GESETZT, nicht aus ihm ausgeschnitten: ein Zug
   mit runden Enden, der über die rechte obere Ecke hinausläuft, so wie man auf
   Papier abhakt. Bei 12px Kantenlänge bleibt innen kein Haken übrig, der noch
   als Haken zu erkennen wäre — nur eine Kerbe.
   Er liegt als MASKE über einer Fläche in --ink und nicht als
   `background-image`: so nimmt er die Schriftfarbe des Abschnitts mit und
   stimmt auf Papier wie auf Limette wie auf tiefem Grund. Die SVG steht inline
   — es gibt keinen Build und keine zweite Datei.
   Riegel wie beim Strang: ohne `animation-timeline` und bei
   `prefers-reduced-motion` erscheint der Haken GAR NICHT (nicht etwa
   dauerhaft) — eine Liste, die ohne Zutun schon abgehakt ist, behauptet etwas
   anderes als eine leere. *//* Das Feld WEICHT dem Haken, es bekommt ihn nicht eingesetzt: Es schrumpft
   weg, der Haken wächst an seiner Stelle auf, mittig über der Stelle, an der
   es stand. Eine offene Zeile trägt ein Kästchen, eine erledigte einen Haken —
   die beiden Zeichen kommen sich nie in die Quere.
   Der Haken wächst aus dem Knick heraus (`transform-origin`), nicht aus seiner
   Mitte: Ein Häkchen wird unten angesetzt und nach oben weggezogen. */@supports (animation-timeline:view()){
  }
@keyframes haken-feld-weg{to{opacity:0;transform:scale(.5)}}
/* Der Haken kommt mit einem kurzen Überschwung — ein Häkchen wird gesetzt,
   nicht eingeblendet. */
@keyframes haken-setzen{
  0%  {opacity:0;transform:scale(.35)}
  62% {opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}
.chip{font-family:var(--f-util);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--hair);border-radius:100px;padding:.48rem 1rem;color:var(--muted)}

/* ---------- Das Gefüge: vier Felder und ihre Verbindungen ------------------
   Ein Diagramm und keine Aufzählung: vier Kästen, sechs Linien dazwischen,
   jedes Feld mit jedem verbunden. Die Aussage steckt in den Linien.

   GEZEICHNET, NICHT GESETZT. Die Ovale sind keine <ellipse>, sondern Pfade,
   deren Radius sich glatt wellt, die irgendwo anfangen und über den eigenen
   Anfang hinauslaufen — zweimal übereinander mit verschiedenem Rauschen: der
   Doppelstrich einer Hand. Runde Formen und kein Kasten, weil ein Kasten ein
   Fach ist und Fächer das Gegenteil der Aussage sind. Die Pfade sind einmal
   deterministisch erzeugt und stehen fest in der Seite; es läuft nichts zur
   Laufzeit, es gibt keinen Build.

   Limette füllt hier vier Formen — die einzige Stelle, an der die Signalfarbe
   eine Form füllt, statt einen Abschnittsgrund zu geben. Die Mitte ist davon
   ausgenommen und dunkel: sie ist nicht das fünfte gleiche Feld, sondern das,
   was die vier zusammen ergeben. Der Preis jeder Ausnahme gilt auch hier: kein
   Knopf und kein Link in dieser Zeichnung, sonst hätte das Signal nichts mehr,
   wovon es sich abhebt. Kante und Wort stehen darum fest auf --tief statt auf
   --ink — der Grund unter ihnen ist immer limette, unabhängig von der Zone.

   Alles in EINEM <svg> mit viewBox und ohne feste Masse: die Schrift skaliert
   mit der Zeichnung, statt bei 400px Breite aus den Ovalen zu laufen.
   Reihenfolge: erst die Linien, dann die vier Felder mit deckender Füllung
   darüber, zuletzt die Mitte — so brauchen die Linien keine berechneten
   Endpunkte, sie verschwinden unter den Flächen.

   Zwei Bewegungen, beide klein genug, um beim Danebenlesen nicht zu stören:
   Jedes Feld schwebt auf einer eigenen kleinen Schlaufe (eigene Dauer, eigener
   Anfang, eigene Weite; die Dauern haben absichtlich kein gemeinsames
   Vielfaches, damit die vier nie wieder zur Deckung kommen). Die Mitte schwebt
   am langsamsten und am kleinsten: der ruhige Punkt.
   Über jede Verbindung wandert ein kleiner Kreis, Umriss in der Farbe der
   gezeichneten Linie auf hellem Grund (--tief/--ink, NICHT Limette — Limette
   hiesse Interaktion, und hier ist nichts anklickbar), Fläche in Papier. Er
   läuft auf der kurzen wie auf der langen Verbindung gleich lange.
   Bei `prefers-reduced-motion` steht alles still und der Kreis verschwindet. */
/* ---------- Zeichnung ------------------------------------------------------
   Eine freistehende Handzeichnung an einem Bildplatz — dort, wo ein Foto nicht
   sagen kann, worum es geht.
   Sie steht FREI auf dem Grund, nicht auf einer Platte: `.bild` brächte einen
   grauen Kasten mit, und ein Rahmen um eine Zeichnung ist ein Rahmen um etwas,
   das keinen braucht.
   `position:relative;z-index:3` ist Pflicht: Das Wasserzeichen `#geist` liegt
   auf z 2, und ein `<svg>` steht nicht in `img,.bild,.case{z-index:3}` — ohne
   das malt der Geist durch jede Fläche der Zeichnung.
   Und die Zeichnung trägt ihr `data-reveal` SELBST: Liegt es auf einem
   Vorfahren, endet dessen Einblenden auf `transform:matrix(1,0,0,1,0,0)`, und
   eine Identitätsmatrix ist immer noch ein Stapelkontext — dann hilft auch
   z-index:3 nichts mehr. Beim Nachmessen meldet `elementFromPoint` die ganze
   Zeit die Zeichnung als oberstes Element, weil es `pointer-events:none`
   ignoriert: den Pixeln glauben, nicht dem DOM. */
.zeichnung{position:relative;z-index:3;display:grid;justify-items:center}
/* Zwei Fassungen im selben Rahmen: der gemalte Canvas (bewegt, erzählt einen
   Ablauf) und das feste SVG (steht ohne Skript da). Der Canvas malt keinen
   Grund — die Fläche darunter scheint durch, richtig so. Seine Höhe setzt das
   Skript aus der Breite (680:440). */
canvas.onflow-canvas{display:block;width:100%}
.z-bild{display:block;width:100%;height:auto;overflow:visible}
.z-bild .z-zug{fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.z-bild .z-duenn{stroke-width:1.5;stroke-opacity:.5}
.z-bild .z-flaeche{fill:var(--kalk)}
.z-bild .z-voll{fill:var(--ink);stroke:none}
.z-bild .z-hell{fill:var(--kalk);stroke:none}
/* Flächenfarbe statt nur Umriss: ohne sie bleibt die Zeichnung ein Umriss
   unter Umrissen. Sie ist nicht Schmuck — auf /website tragen Pfirsich und
   Himmel die MENSCHEN, Papier die Systeme. Mint fehlt mit Absicht: auf
   Limette wäre es Grün auf Grün. */
.z-bild .z-ton-pfirsich{fill:var(--pfirsich)}
.z-bild .z-ton-himmel{fill:var(--himmel)}
/* Die dunkle Mitte: dieselbe Regel wie beim mittleren Oval im Gefüge — das
   Ergebnis darf nicht aussehen wie eines der Teile, die zu ihm führen. */
.z-bild .z-mitte{fill:var(--tief)}
.z-bild .z-wort{fill:var(--ink);font-size:13px;font-weight:600;text-anchor:middle}
.z-bild .z-wort--gross{font-size:18px;font-weight:700}
.z-bild .z-wort--hell{fill:var(--kalk)}
/* Ein Punkt, der einer Linie entlangläuft, heisst auf dieser Seite «hier
   bewegt sich etwas» — dieselbe Sprache wie im Gefüge, nur ohne Bremsen und
   Warten: dort ist «es kommt an» die Aussage, hier «es hört nicht auf».
   `.z-lauf` setzt selbst eine Füllung und steht NACH den Tönen; der Ton eines
   laufenden Punkts braucht darum eine eigene, stärkere Regel. */
.z-bild .z-lauf{fill:var(--kalk);stroke:var(--ink);stroke-width:2}
.z-bild .z-lauf.z-ton-pfirsich{fill:var(--pfirsich)}
.z-bild .z-lauf.z-ton-himmel{fill:var(--himmel)}
/* Der Takt: Speichen zeigen, dass etwas verbunden IST — erst er zeigt, dass
   drinnen gearbeitet wird. */
@keyframes z-takt{0%,100%{opacity:.22} 45%{opacity:1}}
.z-bild .z-takt{animation:z-takt 1.8s ease-in-out infinite}
.z-bild .z-takt:nth-of-type(2){animation-delay:.3s}
.z-bild .z-takt:nth-of-type(3){animation-delay:.6s}
/* Ein Blatt liegt schief, ein Gerät steht im Lot. Im Lot wäre die Seite ein
   Diagrammkasten; ein Hauch aus der Achse macht sie zu Papier — derselbe
   Griff wie beim Zettel. */
.z-bild .z-blatt{transform:rotate(-1.3deg);transform-origin:center}
@media (prefers-reduced-motion: reduce){
  .z-bild .z-lauf{display:none}
  /* Der Takt hält auf VOLL an, nicht auf blass: ein Balken, der bei 22 %
     stehenbleibt, sieht aus wie ein Defekt und nicht wie Ruhe. */
  .z-bild .z-takt{animation:none;opacity:1}
}

/* ---------- .ansage --------------------------------------------------------
   Der erste Satz eines Absatzes, eine Stufe grösser und in voller
   Schriftfarbe; der Rest folgt gedämpft. Für lange Fliesstexte in einer Spalte
   — sechs Zeilen `--muted` am Stück sind eine Wand, auf farbigem Grund erst
   recht. Nicht `.lead`: das ist die Einleitung eines Heros und bringt eigene
   Breite und Farbe mit. */
.ansage{font-size:clamp(1.15rem,1.6vw,1.42rem);line-height:1.34;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:.7rem}

/* Die Trennlinien der Liste sind `--hair`, und `--hair` ist auf der
   Signalfarbe das Schwächste, was die Seite hat — auf Limette also
   kräftiger, sonst trägt die Liste ihren Inhalt in einer Linie, die man
   nicht sieht. */
[data-zone="limette"] .liste li{border-bottom-color:rgba(12,59,56,.32)}

.gefuege{margin:0}
.gefuege svg{display:block;width:100%;height:auto;font-family:var(--f);overflow:visible}
.gefuege .naht{stroke:var(--ink);stroke-opacity:.4;stroke-width:2;fill:none;stroke-linecap:round}
/* Der Wanderer auf den Nähten: ein Kreis, Umriss in der Textfarbe, Fläche in
   Papier — er deckt die Naht ab, über die er läuft, statt sie zu verdicken.
   Bewegung und Takt stehen nicht hier, sondern im <animateMotion> im SVG: Nur
   SMIL kann den Mittelpunkt auf einen Pfad setzen, ohne dass die Koordinaten
   in ein anderes Bezugssystem kippen. */
.gefuege .puls{fill:var(--kalk);stroke:var(--ink);stroke-opacity:.55;stroke-width:2}
.gefuege .feld{animation:gefuege-schweben var(--dur,8s) ease-in-out infinite;
  animation-delay:var(--del,0s)}
.gefuege .fuell{fill:var(--limette)}
.gefuege .kante{fill:none;stroke:var(--tief);stroke-opacity:.62;stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.gefuege .kante--zwei{stroke-opacity:.28;stroke-width:1.4}
.gefuege .wort{fill:var(--tief);font-size:21px;font-weight:600;letter-spacing:-.01em;
  text-anchor:middle;dominant-baseline:central}
/* Die Mitte kehrt um: dunkel gefüllt, Schrift und Kante in Papierfarbe. Kein
   zweiter Ton neben den vier Ovalen, sondern ihr Gegenteil — vier gleiche
   Felder und ein Ergebnis, das anders aussieht als seine Teile. Auf tiefem
   Grund liegt die Kante hell und darf kräftiger sein als auf limette, sonst
   verschwindet sie im Grund. */
.gefuege .feld--mitte .fuell{fill:var(--tief)}
.gefuege .feld--mitte .kante{stroke:var(--kalk);stroke-opacity:.72;stroke-width:2.4}
.gefuege .feld--mitte .kante--zwei{stroke-opacity:.3;stroke-width:1.6}
.gefuege .feld--mitte .wort{fill:var(--kalk);font-size:27px;font-weight:700;
  letter-spacing:-.02em}
.gefuege figcaption{margin-top:1.4rem;font-size:var(--fs-sm);color:var(--muted);max-width:40ch}
@keyframes gefuege-schweben{
  0%  {transform:translate(0, calc(var(--amp,3) * 1px))}
  27% {transform:translate(calc(var(--amp,3) * .45px), calc(var(--amp,3) * -.5px))}
  53% {transform:translate(calc(var(--amp,3) * -.18px), calc(var(--amp,3) * -1px))}
  78% {transform:translate(calc(var(--amp,3) * -.5px), calc(var(--amp,3) * -.22px))}
  100%{transform:translate(0, calc(var(--amp,3) * 1px))}
}
@media (prefers-reduced-motion:reduce){
  .gefuege .feld{animation:none}
  .gefuege .puls{display:none}}/* ---------- Strang: ein Faden mit Halten ----------------------------------
   Der Ablauf als Faden, nicht als Kachelreihe: drei Halte auf einer Linie,
   jeder mit seinem Punkt — Punkt, Linie, Punkt sagt «nacheinander», ohne dass
   ein Pfeil es dazusagen muss. Dieselbe Sprache wie der Faden durch die vier
   Bänder auf der Startseite, nur waagrecht.
   DIE LINIE GEHÖRT ZUM HALT und läuft von seinem Punkt bis zum nächsten
   (Spaltenbreite plus Lücke); der letzte Halt hat keine. So braucht kein
   Element die Gesamtbreite zu kennen, und das Raster darf umbrechen.
   Beim Lesen füllt sich der Faden von Grau auf Voll (`animation-timeline:
   view()`), hier als Verlauf von links nach rechts. Zwei Riegel davor:
   `@supports`, weil ältere Browser sonst eine halbfertige Linie zeigen, und
   `prefers-reduced-motion`. Ohne beides steht der Faden ruhig in --hair.
   Unter 1080px kippt alles: die Halte stapeln, der Faden läuft senkrecht die
   linke Kante hinunter. *//* Die Nummer steht ÜBER dem Faden, nicht darunter: Sie beziffert den Halt, und
   ein Halt wird angeschrieben, bevor man ihn erreicht. Absolut gesetzt, damit
   der Faden auf einer Höhe bleibt, egal wie lang die Nummer ist. --kopf ist
   der Platz, den sie oberhalb der Linie beansprucht. */.strang__halt{position:relative;
  padding-top:calc(var(--kopf) + var(--punkt) + clamp(1.2rem,2.2vw,1.8rem))}
.strang__nr{position:absolute;top:0;left:0;margin:0}
.strang__halt::before{content:'';position:absolute;top:calc(var(--kopf) + var(--punkt)/2 - 1px);
  left:calc(var(--punkt)/2);right:calc(-1 * var(--gap) - var(--punkt)/2);height:2px;
  background:var(--hair)}
.strang__halt:last-child::before{display:none}
.strang__halt::after{content:'';position:absolute;top:var(--kopf);left:0;
  width:var(--punkt);height:var(--punkt);border-radius:50%;
  background:var(--grund);border:3px solid var(--ink)}/* Der Punkt ist die Marke des Halts — der Strich vor dem Etikett wäre eine
   zweite, und zwei Marken übereinander lesen sich als Unordnung. *//* ---- Der Takt des Strangs: Häkchen, Strecke, Häkchen, Strecke, Häkchen ----
   Faden und Häkchen laufen nach einer GEMEINSAMEN Uhr: `view-timeline-name` am
   `.strang`, alles darin hängt sich mit `animation-timeline:--strang` daran.
   Notwendig, weil die drei Halte NEBENeinander stehen — ihre Zeilen liegen auf
   derselben Höhe, und mit je eigener `view()`-Uhr würden Teil 01, 02 und 03 im
   selben Moment abgehakt.
   Der Fahrplan, in Prozent der gemeinsamen Uhr (cover, in vh gemessen):
     38–49  die drei Häkchen von Teil 01, im Abstand von 3vh
     52–60  der Faden läuft von Halt 01 nach Halt 02
     63–74  die drei Häkchen von Teil 02
     77–85  der Faden läuft von Halt 02 nach Halt 03
     88–99  die drei Häkchen von Teil 03
   Erst abarbeiten, dann weitergehen — die Bewegung erzählt die Reihenfolge,
   die im Text steht.
   DIE WERTE HÄNGEN AN DER HÖHE: Der Strang ist rund 54vh hoch; was zu spät
   kommt, läuft oben unter der Bühne durch, was zu früh kommt, unten aus dem
   Bild. Wer den Inhalt der Halte verlängert, rechnet den Fahrplan nach. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1081px){.strang__halt::before{
      background:linear-gradient(90deg,var(--ink) 0 50%,var(--hair) 50% 100%);
      background-size:200% 100%;background-position:100% 0;
      animation:strang-fuellen linear both;animation-timeline:--strang;
      animation-range:cover 52vh cover 60vh}
    .strang__halt:nth-child(2)::before{animation-range:cover 77vh cover 85vh}
    /* --takt ist der Einsatz des Halts, --n die Zeile darin. Nicht --i: das
       trägt der Halt schon für den Auftritt (data-reveal), und es würde in die
       Zeilen hinein vererbt. */
    .strang__halt{--takt:38}
    .strang__halt:nth-child(2){--takt:63}
    .strang__halt:nth-child(3){--takt:88}}
}
@keyframes strang-fuellen{to{background-position:0 0}}
@media (max-width:1080px){/* Gestapelt läuft der Faden senkrecht die linke Kante hinunter. Die Nummer
     kehrt in den Fluss zurück — absolut gesetzt läge sie auf dem Faden. */.strang__halt{padding-top:0;padding-left:calc(var(--punkt) + 1.4rem)}
  .strang__nr{position:static;margin-bottom:.5rem}
  .strang__halt::before{top:var(--punkt);left:calc(var(--punkt)/2 - 1px);right:auto;
    width:2px;height:calc(100% + clamp(1.8rem,4vw,2.6rem) - var(--punkt));
    background:var(--hair);animation:none}
  .strang__halt::after{top:0}
}

.raster{display:grid;gap:var(--gap)}
.raster--2{grid-template-columns:repeat(2,1fr)}
.raster--3{grid-template-columns:repeat(3,1fr)}
/* ---------- Die drei Belege auf dem Telefon --------------------------------
   Untereinander sind drei Hochformate drei Bildschirme — am Fuss einer Seite,
   auf der die Handlung schon darueber steht. Nebeneinander in einer Schiene
   sind es einer: eine Kachel im Bild, die naechste angeschnitten, gewischt
   wird nativ mit Rastpunkten.
   Nur hier und nicht an `.raster--3` allgemein: Ein Dreierraster ist sonst
   Text, und Text wischt man nicht.
   Auf /cases bleibt alles, wie es ist — dort ist die Wand der Inhalt der
   Seite und nicht ihr Beleg.
   `.raster.cv` und nicht nur `.cv`: Die Regel muss die Spaltenangabe des
   Rasters schlagen, die weiter unten im Blatt steht. */
/* Dieselbe Schiene traegt auch die drei Anfragen auf /kontakt (`.fw`). Es
   ist derselbe Fall: drei gleichrangige Karten, von denen einspaltig jede
   ihre volle Laenge bekommt — untereinander werden daraus drei Bildschirme,
   und die dritte sieht niemand mehr. Nebeneinander ist die Wahl in einer
   Geste da. Dort sind es `.karte` statt `.case`, sonst nichts. */
@media (max-width:640px){
  .raster.cv,.raster.fw{
    display:flex;gap:.9rem;min-width:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--rand) * -1);
    padding-inline:var(--rand);
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .raster.cv::-webkit-scrollbar,.raster.fw::-webkit-scrollbar{display:none}
  .raster.cv>.case,.raster.fw>.karte{flex:0 0 78%;scroll-snap-align:center}
}
.raster--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.split--breit{grid-template-columns:1.2fr .8fr}
/* Ein Hauch breiter links — NUR wo eine lange Schlagzeile sonst mit
   Trennstrich bricht. «Vier Kompetenzen.» braucht bei --fs-h2 rund 573px und
   bekam in der halben Spalte 549; bei 1.1fr passt die Zeile von 900 bis 1440px
   überall mit Luft.
   DAS GEHÖRT INS STYLESHEET, NIE ALS `style=""` ANS ELEMENT: Ein Inline-Wert
   schlüge die 900px-Regel, die `.split` auf eine Spalte umbricht — auf dem
   Telefon stünden Schlagzeile und Zeichnung dann nebeneinander. */
.split--schlagzeile{grid-template-columns:1.1fr .9fr}
.klebrig{position:sticky;top:calc(var(--kopf-h) + var(--kopf-luft) + 4rem)}

/* ---------- Weiche: zwei Wege, von denen einer gilt ----------
   Der Unterschied zu `.raster--2` ist inhaltlich, nicht gestalterisch. Zwei
   Karten nebeneinander sind eine Tabelle: gleiche Breite, gleiche Höhe, Zeile
   auf Zeile — der Blick springt hin und her und WIEGT AB. Richtig, wo man
   vergleichen soll (zwei Pakete, zwei Preise); falsch, wo der Leser längst
   weiss, welcher der beiden Fälle seiner ist — dort erzeugt der Vergleich eine
   Frage, die er nicht hat.
   Die Weiche stapelt darum: Jeder Weg nimmt die ganze Breite, trägt sein Bild
   und seine eigene Handlung, dazwischen steht «oder». Nacheinander statt
   gegeneinander.
   Der zweite Weg ist gespiegelt (--kehr): Lägen beide Bilder rechts, stünde
   doch wieder eine Spalte da — und die Spalte ist der Anfang der Tabelle. */
.weiche{display:grid;gap:clamp(2.6rem,5vw,4.2rem)}
.weiche__weg{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.weiche__weg--kehr .weiche__wort{order:2}
/* Dieselbe Luft unter der Zeile wie in der Karte — ohne sie klebt der erste
   Satz an der Schlagzeile, weil hier kein Kasten mehr drumherum steht. */
.weiche__wort h3{margin-bottom:.7rem}
/* Linie · «oder» · Linie. Das ist keine Trennlinie zwischen zwei Abschnitten,
   sondern die Entscheidung selbst — darum steht das Wort mitten darin und
   nicht darüber. currentColor, damit die Kante auf jedem Grund stimmt. */
.weiche__oder{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(1rem,3vw,1.8rem);margin:0;
  font-family:var(--f-util);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase}
.weiche__oder::before,.weiche__oder::after{content:"";height:1px;
  background:currentColor;opacity:.3}
@media (max-width:900px){
  /* Gestapelt steht das Bild über dem Wort — es sagt schneller als der erste
     Satz, um welchen der beiden Fälle es geht. Die Spiegelung entfällt: in
     einer Spalte gibt es keine Seite, auf die man wechseln könnte. */
  .weiche__weg{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2rem)}
  .weiche__weg .weiche__wort,
  .weiche__weg--kehr .weiche__wort{order:2}
}

/* Der Grund ist deckend, nicht durchscheinend. Ein Platzhalter steht für ein
   Bild, und ein Bild ist undurchsichtig — mit einem Alphawert schimmerte das
   Wasserzeichen hindurch und der Kasten sah aus, als läge er hinter der Seite
   statt darauf. */
.bild{position:relative;background:#E5E2DA;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9}
[data-zone="tief"] .bild{background:#17423F}
.bild span{font-family:var(--f-util);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.bild--hoch{aspect-ratio:4/5}
.bild--quadrat{aspect-ratio:1/1}
/* 7:10 wie die Kacheln der Wand. Die drei Belege auf den Angebotsseiten
   zeigen jetzt dasselbe Format wie /cases — es ist dasselbe Material, und
   zwei Zuschnitte desselben Bildes nebeneinander lesen sich wie zwei
   verschiedene Arbeiten. */
.bild--kachel{aspect-ratio:7/10}
/* Ein echtes Bild füllt den Kasten und wird beschnitten, nie verzerrt. Absolut
   statt im Fluss, weil `.bild` ein zentrierender Flexkasten ist: Darin zöge ein
   img mit anderem Seitenverhältnis den Kasten auf, und die `aspect-ratio` wäre
   nur noch ein Mindestmass. Gleiche Mechanik wie bei `.bild--dia`. */
.bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Mit <picture> davor (AVIF, JPEG als Rückfall) ist das img kein direktes Kind
   mehr — die Hülle übernimmt das Absolute, tragen muss weiterhin der Kasten. */
.bild>picture{position:absolute;inset:0;display:block}
.bild>picture>img{width:100%;height:100%;object-fit:cover}
/* ---------- Fotowand: zwei Spalten, versetzt ----------
   Vier gleich hohe Rechtecke nebeneinander lesen sich als Tabelle. Hier stehen
   zwei Spalten, die rechte um eine gute Bildhöhe tiefer angesetzt, und die
   Bilder tragen verschiedene Seitenverhältnisse — so beginnt und endet keine
   Reihe auf derselben Linie.
   DER VERSATZ SITZT AUF DER SPALTE, nicht auf den Bildern: So bleibt er
   erhalten, wenn ein Bild ein anderes Format bekommt oder eines dazukommt.
   Auch auf dem Handy zweispaltig — untereinander wären es vier Bildschirme vor
   dem Formular, und die Wand wäre ein Stapel statt einer Wand. */
.fotowand{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.fotowand>div{display:grid;gap:var(--gap);align-content:start}
/* Der Versatz der zweiten Spalte ist ein PROZENTSATZ, kein vw-Wert: Margin in
   Prozent rechnet gegen die Breite des Rasterfelds, also gegen die Kachel
   selbst, und bleibt damit im selben Verhältnis zu den Bildern. Ein vw-Wert tat
   das nicht — in einem `.split` bekommt die Wand nur die halbe Fensterbreite,
   und der Versatz lief mit dem Fenster davon.
   44% ist gut die halbe Höhe einer 4:3-Kachel: genug, dass die Spalten sichtbar
   gegeneinander stehen, wenig genug, dass sie dasselbe Bildfeld bleiben. */
.fotowand>div:last-child{margin-top:44%}/* ---------- Streifen: der Schieber ---------------------------------------
   Kein Skript, keine Bibliothek: eine Reihe, die überläuft, mit Rastpunkten.
   Wischen, Trackpad, Umschalt+Rad und Tastatur können das von Haus aus, und es
   funktioniert, bevor JavaScript geladen hat. Die Kacheln sind in vw bemessen,
   damit rechts immer die nächste angeschnitten steht — der ganze Hinweis, dass
   es weitergeht, ohne Pfeilknöpfe.
   Die Bildlaufleiste bleibt SICHTBAR: sie ist die einzige ehrliche Anzeige,
   wie weit der Streifen reicht. */.streifen--breit>*{flex:0 0 min(88vw,760px)}
.case{position:relative;display:block;border-radius:14px;overflow:hidden}

.case .bild{border-radius:0;transition:transform 1500ms var(--ease)}
.case:hover .bild{transform:scale(1.04)}
/* z-index 4, weil «Solide Flächen» weiter unten img/.bild/.case auf 3 hebt.
   Ohne das läge das Bild über seiner eigenen Beschriftung — auf den
   Platzhalter-Kacheln unsichtbar, sobald ein echtes Bild drin liegt fatal. */
.case__scrim{position:absolute;inset:auto 0 0 0;z-index:4;padding:clamp(1.3rem,2.6vw,2.2rem);
  background:linear-gradient(0deg,rgba(6,37,35,.94),rgba(6,37,35,.55) 55%,rgba(6,37,35,0));color:var(--kalk)}
.case__scrim h2,.case__scrim h3{font-size:clamp(1.2rem,2.1vw,1.9rem);margin-bottom:.3rem;max-width:26ch;color:var(--kalk)}
/* --zeilenhoehe steht als eigenes Token da, weil die Punkt-Reihe darauf
   ausgerichtet wird — wer den Wert ändert, verschiebt sonst die Punkte, ohne es
   zu merken. 1.28 statt der 1.5 aus dem Fliesstext: Ein zweizeiliger Firmenname
   ist keine Textspalte, sondern eine Beschriftung; bei 1.5 lasen die beiden
   Zeilen als zwei Angaben. */
/* Auf dem .case, nicht auf dem Schleier: die Punkt-Reihe hängt am .case und
   käme sonst nicht an den Wert. */
.case{--zeilenhoehe:1.28}
.case__scrim p{margin:0;font-size:var(--fs-sm);line-height:var(--zeilenhoehe);
  color:rgba(246,244,238,.76)}/* ---------- Case mit Bildfolge (.case--dia) ----------
   Ein Case, drei Blickwinkel: Die Bilder liegen deckungsgleich übereinander,
   eine Beschriftung steht über allen dreien und bleibt stehen. Bewegt wird nur
   `opacity` — das läuft auf dem Compositor und kostet kein Layout.
   Bewusst kein `.streifen`: Dort wäre jedes Bild eine eigene Kachel mit eigener
   Beschriftung, das läse sich als drei Cases statt als einer.
   Alles hängt an `.case--dia`, damit die übrigen Kacheln und die Musterseite
   unberührt bleiben. *//* ---------- .faelle — die freie Wand ------------------------------------
   Die Cases-Liste ist eine Wand, keine Spalte — und kein Raster: Jede Reihe ist
   einzeln gesetzt, keine gleicht der anderen. Ein Motiv, das sich wiederholt,
   liest man ab der zweiten Runde als Regel statt als Arbeiten.
   Nicht global auf `.case`, weil die Musterseite dieselbe Klasse im `.streifen`
   benutzt, dort aber mit eigenem Verhältnis und schmalerem Schleier.

   Eine Reihe bringt zwei Zahlen mit, beide als Vielfaches der Inhaltsbreite:
     --f  ihre Breite. 0.78 zieht sie deutlich in den Satzspiegel hinein, 1.30
          lässt sie links UND rechts darüber hinaustreten. Jede Reihe ist auf
          die Seitenmitte zentriert — mit --f wandert also die Silhouette der
          Wand, und das ist der Zweck der Übung.
     --h  ihre Höhe.
   Aus beiden wird das `aspect-ratio`, die Höhe folgt damit der TATSÄCHLICHEN
   Breite der Reihe. Wo das Fenster schmaler ist als --wrap × --f (bei 1.30
   unterhalb von rund 1760px), schrumpft die Reihe im Verhältnis mit, statt aus
   dem Verhältnis zu fallen; unter ~1400px steht wieder alles auf einer Kante.

   Die Kacheln sind Flex-Kinder mit `flex:var(--k) 1 0`. Eine Kachel hat keine
   Grösse, sie hat ein GEWICHT — [1.25, 1] heisst «zwei Kacheln, die linke ein
   Viertel breiter». Welche Breite und welches Seitenverhältnis daraus je Kachel
   wird, rechnet cases.php aus und schreibt es dort auch hin.

   Eine Arbeit mehr oder weniger verschiebt nur, wo die Liste endet: Die letzte
   Reihe hat eine Kachel weniger, die übrigen wachsen in den Platz, und der Fuss
   der Wand bleibt zu.

   `100%` als Deckel und NICHT `100vw`: vw enthält den Scrollbalken, und eine
   Reihe, die --f ausreizt, liefe damit 15px quer aus der Seite. *//* min-width:0, sonst fällt ein Flex-Kind nie unter die Breite seines Inhalts:
   eine lange Schlagzeile im Schleier zöge die Kachel breiter, als ihr Gewicht
   ihr zusteht, und die ganze Reihe liefe über. *//* Der Stapel mischt die Grössen INNERHALB einer Reihe: zwei oder drei Kacheln
   übereinander, die zusammen so hoch sind wie die grosse Kachel daneben. Ohne
   ihn käme die Vielfalt nur aus verschieden breiten Spalten — und die kostet
   Breite, die auf 1341px keine Reihe mehr hat (drei Spalten 1:1.9 liessen die
   schmalste auf 314px fallen).
   Er nimmt die Stelle einer Spalte ein und trägt darum --k; seine Kacheln
   teilen die Höhe über --kv.
   DER EIGENE SELEKTOR FÜR DIE KACHELN DARIN IST PFLICHT: --k vererbt sich vom
   Stapel nach unten, `flex:var(--k) 1 0` an der Kachel legte in der Senkrechten
   also das Spaltengewicht als Höhengewicht aus. *//* Die Höhe kommt von der Reihe, nicht vom Bild — sonst kämpfen zwei
   Massangaben gegeneinander und die Reihe verliert. *//* ---------- wo die Reihen umbrechen ------------------------------------
   Eine Reihe wird schmaler mit dem Fenster, ihre Kachelzahl aber nicht — und
   irgendwann ist die schmalste Kachel zu schmal für eine Schlagzeile. Die
   Grenze liegt bei 350px; darunter bricht der Satz vier- und fünfmal um und der
   Schleier frisst die Kachel auf.
   Was dabei NICHT aufgegeben wird, ist die eigene Breite der Reihe: Die
   Silhouette der Wand ist der Zweck der Komposition und überlebt bis 900px.
   Umgebrochen wird innen, nicht aussen. */

/* Eine Grenze statt zweier, seit keine Reihe mehr als drei Spalten hat: Die
   Vielfalt kommt aus den Stapeln, und die kosten keine Breite. Massgebend ist
   die schmalste Spalte der dichtesten Reihe — bei 1341px ist jede Reihe
   höchstens 1301px breit, und dort steht sie auf 379px.
   Unterhalb LÖSEN SICH DIE STAPEL AUF (`display:contents` — die Kacheln werden
   direkte Kinder der Reihe, ohne dass ein Kasten dazwischen stehen bleibt), und
   die Reihe bricht auf zwei Kacheln je Zeile um. Ihre eigene Breite behält sie.
   Bei ungerader Kachelzahl bleibt eine allein auf der letzten Zeile und nimmt
   die volle Reihenbreite. Sie bekommt dafür das Verhältnis des Schnitts (19:11)
   statt auf die Höhe einer halben Zeile gestreckt zu werden — auf 4:3 wäre sie
   doppelt so hoch wie die beiden über ihr und läse sich als eigener
   Abschnitt. */
@media (max-width:1340px){/* Muss NACH den beiden oben stehen und zwei Klassen tragen: sonst schlägt
     `.faelle__stapel .case` die Regel, und die allein stehende Kachel ist
     genau dann in einem Stapel, wenn die Reihe mit einem endet. */}
/* Ab hier gibt es keine Breite mehr zu verteilen: die Reihen geben ihre
   eigene Breite auf und stehen wieder alle auf der Inhaltsbreite. */
/* Auf dem Telefon hört die Wand auf: Zwei Kacheln nebeneinander wären auf
   390px je 175px breit, und in 175px passt keine Schlagzeile. Also eine Spalte
   und das Hochformat, für das die Schnitte schon da sind.
   `flex:0 0 auto` ist hier PFLICHT: In der Spalte liegt die Hauptachse
   senkrecht, das `flex-basis` der Umbruchregeln oben wäre also eine HÖHE, und
   `flex-grow` zöge die Kachel darüber hinaus — die `aspect-ratio` käme nie zum
   Zug.
   Die Umbruchregeln oben müssen dafür ausdrücklich zurückgenommen werden, und
   zwar mit IHREM Selektor: `.faelle__stapel .case` schlägt `.faelle .case`, ein
   knapper Rücksetzer greift nicht. */

/* ---------- .wand — das Verzeichnis der Arbeiten ------------------------
   Ablösung des Kachelwerks auf /cases. `.faelle` bleibt vorerst stehen:
   /kontakt benutzt `.bild--dia` weiter.

   DAS FORMAT KOMMT VOM MATERIAL. Die Case-Medien sind Slider-Beiträge im
   Hochformat 7:10, Bilder wie Videos. Also tragen alle Kacheln dieses
   Verhältnis, und es gibt nur eine Kachelgrösse: Ein Wechsel aus quer und
   hochkant lebt davon, dass es Querformate gibt, und ein Video lässt sich nicht
   beschneiden, ohne dass die Mitte wegläuft.

   Drei Spalten, jede eine Stufe tiefer angesetzt: 0 · zwei Schritte · ein
   Schritt. Damit steht in einer Reihe keine Kachel auf derselben Ober- oder
   Unterkante wie ihre Nachbarin. Der Schritt ist derselbe Wert wie der Versatz
   der Teamkarten auf /ueber-uns (`clamp(2rem,4vw,3.4rem)`) — Menschen und
   Arbeiten tragen denselben Takt.

   DIE STUFE SITZT IN `translate`, NICHT IN `margin-top`. Ein Aussenabstand
   blähte die Rasterzeile um die grösste Stufe auf; der Abstand in der Spalte
   wäre dann Rasterabstand PLUS Stufe, und das Sammeln (unten) käme nie auf dem
   Rasterabstand an. `translate` verschiebt nur das Gemalte. Der Preis: Die Wand
   hängt unten um zwei Stufen über, dafür steht `padding-bottom`.
   Und `translate` ist die EIGENE Eigenschaft, nicht `transform` — das Sammeln
   animiert `transform`, beides an einer Eigenschaft ginge nicht.

   Feste Stufe je Spalte, nicht wandernd: Eine wandernde Stufe liesse den
   Abstand in einer Spalte von Reihe zu Reihe um den Stufensprung schwanken, und
   schwankende Abstände sind das Gegenteil eines Endzustands, auf den das
   Sammeln zuläuft.

   `align-items:start` ist Pflicht: Ohne das zieht das Raster jede Kachel auf
   die Höhe ihrer Reihe. Das Bild behielte sein 7:10, der Kasten würde höher,
   und der Schleier — er hängt am unteren Rand des Kastens — rutschte unter das
   Bild und schwebte über dem Seitengrund. */
.wand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,2.4vw,2rem);align-items:start}
@media (min-width:1001px){
  .wand{--stufe:clamp(2rem,4vw,3.4rem);padding-bottom:calc(var(--stufe) * 2)}
  .wand>*:nth-child(3n+2){translate:0 calc(var(--stufe) * 2)}
  .wand>*:nth-child(3n+3){translate:0 var(--stufe)}
}
@media (max-width:1000px){.wand{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wand{grid-template-columns:1fr;gap:1.6rem}}

.wand__k{margin:0;--kachel-pad:clamp(1.1rem,1.8vw,1.5rem)}
.wand__k .bild{aspect-ratio:7/10;height:auto}
/* Der Schleier muss auch über einem hellen Motiv tragen — unter den Medien
   sind Logos auf Weiss. Derselbe Verlauf wie im Kachelwerk, samt der
   eigenen Zeile für die Punkte darunter (siehe .folge__punkte). */
.wand__k .case__scrim{padding:clamp(2.2rem,5vw,3.6rem) var(--kachel-pad)
    calc(var(--kachel-pad) + 1.9rem);
  background:linear-gradient(0deg,rgba(6,37,35,.96) 0%,rgba(6,37,35,.9) 34%,
    rgba(6,37,35,.5) 68%,rgba(6,37,35,0) 100%)}
.wand__k .case__scrim h2{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;margin-bottom:.35rem;max-width:22ch}
.wand__k .case__scrim p{font-size:var(--fs-sm)}

/* ---------- .folge — Bilder und Videos einer Kachel ----------
   Alle Blätter liegen deckungsgleich; sichtbar ist, was `.an` trägt.
   Ohne Skript ist das erste Blatt zu sehen und sonst nichts — anders als bei
   `.bild--dia` gibt es hier KEINE Keyframes als Ersatz: Eine Folge aus Bildern
   und Videos lässt sich ohne Skript nicht ehrlich abspielen, und ein Video, das
   ohne Zutun im Kreis liefe, wäre schlimmer als ein Standbild. */
.folge{display:block}
.folge__blatt{position:absolute;inset:0;opacity:0;
  transition:opacity 600ms var(--ease)}
.folge__blatt:first-child{opacity:1}
.js .folge__blatt:first-child{opacity:0}
.js .folge__blatt.an{opacity:1}
.folge__blatt picture{position:absolute;inset:0;display:block}
.folge__blatt img,.folge__blatt video{width:100%;height:100%;object-fit:cover;
  display:block}
/* Das Video liegt über seinem Plakat und ist erst da, wenn es geladen ist.
   `opacity` und nicht `display`: ein Video, das erst beim Einblenden ins
   Layout kommt, ruckt einmal sichtbar. */
/* z-index ausdrücklich, statt sich auf die Reihenfolge im Markup zu verlassen.
   Zwei deckungsgleiche, absolut gesetzte Elemente ohne z-index werden in
   Markup-Reihenfolge gezeichnet, das Video läge also ohnehin oben — in der
   Praxis blieb trotzdem das Plakat sichtbar und der laufende Film unsichtbar
   darunter. Was sich als brüchig erweist, schreibt man besser hin. */
.folge__blatt video{position:absolute;inset:0;z-index:1;opacity:0;
  transition:opacity 300ms linear}
.folge__blatt video.laeuft{opacity:1}
/* UND DAS PLAKAT GEHT WEG, sobald der Film läuft.
   Beide liegen deckungsgleich und absolut; wer sich darauf verlässt, dass das
   spätere im Markup oben liegt, baut auf eine Regel, die schon ein `opacity` am
   falschen Ort umwirft — der Film lief dann die ganze Zeit unsichtbar unter
   seinem eigenen ersten Bild. Also ausdrücklich wegblenden statt überdecken;
   das Plakat hat nichts mehr zu tun, sobald der Film ein Bild zeigt.
   DIE MARKE SITZT AM BLATT, nicht am Video: Von einem Geschwister aus rückwärts
   zu wählen (`video.laeuft ~ picture`) geht in CSS nicht, das Plakat steht ja
   davor. */
.folge__blatt.laeuft picture{opacity:0;transition:opacity 200ms linear}

/* DER ABSPIELKNOPF. Bei «Bewegung reduzieren» und im Datensparmodus läuft
   absichtlich kein Video von selbst — dann sieht man nur das Plakat und hält es
   für ein Standbild. Der Knopf macht das Angebot sichtbar.
   Darum steht er NUR dann da (Klasse `zeigt`, gesetzt von `initWand`) und nicht
   als Dauerzeichen auf jedem Film: Wo das Video ohnehin gleich losläuft, wäre
   er ein Blinken vor dem Bild.
   Rund, dunkel, halbdurchsichtig — dieselbe Sprache wie die Blätterwinkel
   (`.folge__weg`), damit die Kachel nicht zwei Gestaltungen für dasselbe Ding
   hat. Er sitzt in der Mitte, weil dort niemand blättert: Die Winkel liegen
   aussen, die Punkte unten rechts. */
.folge__ab{position:absolute;z-index:4;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.86);
  width:clamp(3rem,4.4vw,3.9rem);aspect-ratio:1;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(6,37,35,.72);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  opacity:0;pointer-events:none;
  transition:opacity 260ms var(--ease),transform 260ms var(--ease),
             background 200ms linear}
.folge__ab.zeigt{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.folge__ab:hover{background:rgba(6,37,35,.9);color:var(--limette)}
.folge__ab:focus-visible{outline:2px solid var(--limette);outline-offset:3px}
.folge__ab svg{width:45%;height:45%;fill:currentColor;
  /* Das Dreieck wiegt optisch links schwerer als rechts; ein Hauch nach
     rechts lässt es im Kreis mittig SITZEN statt mittig zu MESSEN. */
  margin-left:6%}
@media (prefers-reduced-motion:reduce){
  .folge__ab{transition:opacity 260ms linear}
  .folge__ab,.folge__ab.zeigt{transform:translate(-50%,-50%)}
}

/* QUERFORMAT. Desktop-Aufnahmen werden EINGEPASST und nicht beschnitten: Ein
   16:9-Bild auf 7:10 zugeschnitten zeigt einen Streifen aus der Mitte, und bei
   einer Website ist gerade der Rand die Aussage. Der Grund ringsum ist die
   tiefste Fläche der Seite, damit der Rand wie eine Bühne aussieht und nicht
   wie ein Fehler. */
.wand__k--quer .bild{background:var(--tiefer)}
.wand__k--quer .folge__blatt img,
.wand__k--quer .folge__blatt video{object-fit:contain}

/* Die Punkte SAGEN den Stand, die Winkel BLÄTTERN — dieselbe Arbeitsteilung
   wie im Kachelwerk. Ihr Platz ist eine eigene Zeile UNTER der Beschriftung:
   Im Hochformat ist die Zeile des Kundennamens voll, dort liefen die Punkte
   mitten hinein; über dem Bild wiederum verschwinden drei helle Ringe auf einem
   weissen Logo. Der Schleier ist der einzige Ort mit garantiertem Kontrast —
   die Kachel wird dafür rund 30px höher.
   Beides baut `initWand()`; ohne Skript gibt es keine Folge und also auch
   nichts zu bedienen. */
.folge__punkte{--dia-punkt:9px;--dia-flaeche:2rem;
  position:absolute;z-index:5;display:flex;align-items:center;
  bottom:var(--kachel-pad);right:var(--kachel-pad);
  margin:calc((var(--dia-punkt) - var(--dia-flaeche)) / 2)}
.folge__punkt{width:var(--dia-flaeche);height:var(--dia-flaeche);display:grid;
  place-items:center;padding:0;border:0;background:transparent;cursor:pointer}
.folge__punkt::before{content:'';width:var(--dia-punkt);height:var(--dia-punkt);
  border-radius:50%;border:2px solid rgba(246,244,238,.75);background:transparent;
  transition:background var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.folge__punkt:hover::before{border-color:var(--limette)}
.folge__punkt.an::before{border-color:var(--limette);background:var(--limette)}
.folge__punkt:focus-visible{outline:2px solid var(--limette);outline-offset:-4px}

/* DIE WINKEL STEHEN DA, WO NICHT GEZEIGT WERDEN KANN.
   Sie hingen frueher ganz an `(hover:hover) and (pointer:fine)` und traten
   erst hervor, wenn der Zeiger auf der Kachel lag. Auf dem Telefon gab es sie
   damit gar nicht — dort ist Wischen der einzige Weg vorwaerts, und dass man
   wischen kann, sagt einem niemand. Die Punkte zeigen nur, WO man ist.
   Jetzt tragen alle dieselbe Gestalt, und nur ihr Auftreten unterscheidet
   sich: Wo ein Zeiger ist, kommen sie beim Zeigen auf der Kachel und halten
   das Bild sonst frei. Wo keiner ist, stehen sie. Ruhend etwas dunkler, damit
   sie auf jedem Bild lesbar sind — beim Zeigen ist die Kachel schon
   hervorgehoben, im Stand ist sie es nicht.
   Auf dem Telefon 44 Punkte statt 2.6rem: Das ist das Mass fuer einen
   Daumen, und hier ist er das Werkzeug. */
.folge__weg{display:block}
.folge__weg button{position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  width:2.6rem;height:2.6rem;display:grid;place-items:center;padding:0;
  border:0;background:rgba(6,37,35,.72);color:var(--kalk);cursor:pointer;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease),
    background var(--dur-micro) var(--ease)}
.folge__zurueck{left:clamp(.7rem,1.2vw,1.1rem)}
.folge__vor{right:clamp(.7rem,1.2vw,1.1rem)}
.folge__weg svg{width:1rem;height:1rem;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:square}
.folge__weg button:focus-visible{opacity:1;outline:2px solid var(--limette);outline-offset:2px}

@media (hover:hover) and (pointer:fine){
  .folge__weg button{opacity:0}
  .wand__k:hover .folge__weg button,
  .wand__k:focus-within .folge__weg button{opacity:1}
  .folge__weg button:hover{color:var(--limette);background:rgba(6,37,35,.86)}
}
/* KLEINER ZU SEHEN, GROSS ZU TREFFEN.
   Die Platte darf zurueckhaltender sein — sie liegt auf dem Bild und soll es
   nicht zerteilen. Der Bereich, den ein Daumen trifft, darf es nicht: 34
   Punkte sind zum Sehen genug und zum Treffen zu wenig.
   Also beides trennen. Der Knopf bleibt 44 Punkte gross und wird unsichtbar,
   die sichtbare Platte ist ein `::before` darin. Der Winkel braucht dann
   `position`, sonst laege die Platte als gesetztes Kind ueber ihm. */
@media (hover:none){
  .folge__weg button{opacity:1;width:44px;height:44px;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .folge__weg button::before{content:'';position:absolute;inset:5px;
    background:rgba(6,37,35,.82);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .folge__weg svg{position:relative;width:.85rem;height:.85rem}
  .folge__weg button:active::before{background:rgba(6,37,35,.94)}
  .folge__weg button:active{color:var(--limette)}
}

/* ---------- Das Sammeln beim Scrollen ----------
   Unten, noch ausserhalb des Bildschirms, liegen die Kacheln weit auseinander;
   beim Runterscrollen rücken sie zusammen, bis in der Spalte nur noch der
   Rasterabstand bleibt (rund 300px gegen 32px).
   Die Mechanik: Jede Kachel hat ihre EIGENE Uhr, zwei Kacheln übereinander
   stehen also an verschiedenen Punkten desselben Wegs — die untere ist weniger
   weit, steht darum tiefer, und der Abstand ist grösser als am Ende. Fertig
   gesammelt ist eine Kachel nach 60 % ihres Wegs durchs Fenster, also etwa auf
   halber Bildschirmhöhe: darüber steht die Wand ruhig und eng, darunter
   arbeitet sie. Über den ganzen Weg verteilt wäre das Sammeln nie abgeschlossen
   und der enge Zustand nie zu sehen.
   Kein Skript und kein Scroll-Horcher: `animation-timeline:view()` läuft auf
   dem Compositor, rückwärts beim Zurückscrollen, und nur beim Scrollen. Ein
   Scroll-Ereignis je Kachel wäre bei sechsunddreissig Kacheln das Gegenteil.
   DAS @supports IST PFLICHT: Ein Browser, der `animation` kann, aber
   `animation-timeline` nicht, ignoriert nur die Zeile mit der Uhr — und spielt
   die Keyframes als gewöhnliche Zeitanimation ab. Aus dem Sammeln würde ein
   Zappeln, das von selbst losgeht.
   Nur ab 1001px, also nur bei drei Spalten: Bei zweien greift der Zähler `3n+…`
   nicht mehr auf Spalten, sondern quer durchs Raster — zwei Kacheln übereinander
   bekämen verschiedene Beträge, und wo die untere den kleineren trägt, schöbe
   sie sich in die obere. */
/* ---------- Ersatz ohne Scroll-Zeitachse ----------------------------------
   Firefox kann `animation-timeline:view()` nicht. Der @supports-Block
   darunter faellt dort ersatzlos aus — ohne Zutun stuende die Wand sofort in
   ihrer engen Endlage.
   Den Ersatz fahert app.js (initWandSammeln) und schreibt das `transform`
   je Kachel selbst; hier stehen nur noch die Wege, damit die Werte an EINER
   Stelle liegen und nicht doppelt gepflegt werden.
   Ein Uebergang steht bewusst NICHT dabei: Was dem Scrollstand folgt, darf
   nicht zusaetzlich nachfedern — der Wert ist in jedem Bild schon der
   richtige.
   `--weit` bleibt an `.wand>*` und nicht an einer eigenen Klasse: Die
   Vorlage liest dieselben drei Werte, es ist also dieselbe Quelle. */
@media (prefers-reduced-motion:no-preference) and (min-width:1001px){
  html.ohne-zeitachse .wand>*:nth-child(3n+1){--weit:300px}
  html.ohne-zeitachse .wand>*:nth-child(3n+2){--weit:460px}
  html.ohne-zeitachse .wand>*:nth-child(3n+3){--weit:380px}
}

@keyframes wand-sammeln{
  from{transform:translateY(var(--weit))}
  to{transform:translateY(0)}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1001px){
    .wand>*{animation:wand-sammeln linear both;animation-timeline:view();
      animation-range:cover 0% cover 60%}
    .wand>*:nth-child(3n+1){--weit:300px}
    .wand>*:nth-child(3n+2){--weit:460px}
    .wand>*:nth-child(3n+3){--weit:380px}}}/* Das erste Bild liegt einfach da; die beiden darüber blenden sich
   nacheinander ein, so dass am Ende des Zyklus wieder das erste frei liegt.
   Diese Keyframes sind der Weg OHNE Skript — mit Skript übernimmt `initDia()`
   und schaltet sie über `.hand` ab. Kein `.in`-Gatter davor: Das käme vom
   Reveal-Beobachter, und der läuft ohne Skript gar nicht — die Folge stünde im
   skriptlosen Fall für immer still. */@keyframes dia-2{0%,30%{opacity:0}33.3%,66.6%{opacity:1}70%,100%{opacity:0}}
@keyframes dia-3{0%,63.3%{opacity:0}66.6%,96.6%{opacity:1}100%{opacity:0}}/* Ohne Skript liefen alle Kacheln der Wand im selben Zyklus und damit im
   Gleichschritt. Ein negativer Verzug setzt die Folge phasenverschoben ein; er
   gilt für beide Bilder gleich, die bleiben also untereinander in Takt. Mit
   Skript übernimmt `initDia()` und streut feiner.
   DER VERZUG STEHT AN DER KACHEL, nicht in einem `:nth-child`: Seit die Kacheln
   Kinder ihrer Reihe sind, zählte `nth-child` in jeder Reihe neu an — und weil
   jede Reihe zwei bis vier Kacheln hat, blendete die Wand reihenweise doch
   wieder im Gleichschritt. cases.php zählt über die ganze Wand durch. *//* Hat initDia() in app.js übernommen, schweigen die Keyframes und das aktive
   Bild trägt `.an`. Diese Regeln müssen nach den obigen stehen — gleiche
   Gewichtung, es entscheidet die Reihenfolge. *//* Zwei Bedienungen, zwei Aufgaben: Die Punkte SAGEN den Stand, die Winkel
   BLÄTTERN. Ein Pfeil sagt nie, wie viele Bilder es sind; ein 10px-Punkt ist
   kein Ziel für «eins weiter». Darum beide.
   Die Punkt-Reihe: ein Punkt je Bild, der aktive gefüllt — wie viele Bilder es
   sind und das wievielte man sieht, in einem.
   Rechts UNTEN, nicht oben: Dort liegt der Schleier und damit ein sicher tiefer
   Grund, und die Reihe steht auf derselben Grundlinie wie die Beschriftung,
   statt in einer zweiten Ecke eine zweite Bedienung aufzumachen (die
   Beschriftung ist auf 26ch begrenzt — rechts ist frei).
   Sie sitzt im `.case`, nicht im `.bild` — sonst zöge sie der Zoom beim
   Überfahren mit. app.js baut sie, damit es sie nur gibt, wenn sie auch etwas
   tut (ab zwei Bildern).
   Ring und Füllung sind dieselbe Sprache wie in `.liste--haken`: offen heisst
   noch nicht, gefüllt heisst jetzt. *//* Der Punkt ist 10px, die Trefferfläche 2.2rem — auf dem Telefon wird geklickt,
   was da ist, und nicht was man sieht (gleiche Rechnung wie bei den
   Stimmen-Knöpfen). Die Fläche ist unsichtbar und darf darum nicht ausrichten:
   Der negative Aussenabstand von einer halben Differenz zieht sie wieder
   heraus, so dass der PUNKT auf dem Rand der Beschriftung sitzt und nicht sein
   Kasten. *//* Vor und zurück. Links und rechts im Bild, auf halber Höhe — also über dem
   Bild und nicht über der Beschriftung, die ganz unten sitzt.
   Sie erscheinen erst, wenn der Zeiger auf der Kachel steht. Das ist der Preis
   dafür, dass sie einen Grund tragen dürfen: Eine dauerhafte dunkle Platte auf
   jedem der 39 Bilder wäre das Schwerste im Verzeichnis; für den Moment des
   Zeigens ist sie schlicht das, was den Winkel auch über einem weissen Mockup
   lesbar macht.
   Nur wo es einen Zeiger gibt: Auf dem Telefon wird gewischt, und eine Platte,
   die nie hervortritt, läge dort bloss auf dem Bild. */@media (hover:hover) and (pointer:fine){.dia__zurueck{left:clamp(.8rem,1.6vw,1.4rem)}
  .dia__vor{right:clamp(.8rem,1.6vw,1.4rem)}/* Auch beim Tasten-Fokus hervortreten — sonst blättert man auf etwas
     Unsichtbarem. `:focus-within` am Kasten deckt beide Knöpfe ab. */}/* Der Schleier muss hier auch über einer weissen Fläche tragen — Bild 2 ist
   ein Logo mit heller Hälfte. Gemessen: mit dem normalen Verlauf stand die
   Überschrift bei 1.53:1, mit diesem bei 4.78:1. *//* --kachel-pad steht auf dem .case und nicht im padding-Kurzschreiben, weil
   ZWEI Sachen daran hängen: der Textrand des Schleiers und die Höhe der
   Punkt-Reihe. Getrennt notiert liefen sie beim nächsten Ändern auseinander. *//* `.faelle__gross` ist der Rest der alten Grössenklassen und der einzige, der
   noch gebraucht wird: Es gibt keine vier Kachelformate mehr, aber weiterhin
   zwei Schriftgrade, und die Grenze liegt dort, wo 26ch im grösseren Grad noch
   in die Kachel passen — ab 560px gerechneter Breite. Welche Kachel das ist,
   entscheidet die Rechnung in cases.php; die Klasse wird dort gesetzt und nicht
   von Hand vergeben. *//* Die Schlagzeile wächst mit der Kachel. Ein Grad für alle hiesse: auf der
   kleinen Kachel bricht der Satz fünfmal um, auf der breiten steht er
   verloren klein in der Ecke. *//* Platz für die Punkte, sonst läuft die unterste Textzeile unter sie hindurch.
   Nur die Absätze weichen aus, nicht die Schlagzeile: Die steht eine Zeile
   höher und kommt den Punkten nie nahe.
   Fest auf drei Punkte gerechnet, auch wo eine Kachel nur zwei hat — ein je
   Kachel anderer Textrand läse sich als Fehler. In der Wand schrumpfen Punkt
   und Trefferfläche mit: 5.8rem wären auf der schmalsten Kachel (354px) fast
   ein Drittel der Zeile. *//* Die Punkte sitzen auf der untersten TEXTZEILE, nicht auf der Polsterkante:
   Die MITTE des Punkts trifft die Mitte des Zeilenkastens. Der Kasten ist
   --fs-sm × --zeilenhoehe hoch und seine Unterkante liegt auf dem Textrand,
   seine Mitte also eine halbe Zeilenhöhe darüber — und der Punkt muss um seinen
   halben Durchmesser zurück. Bündig zum Textrand stünde er 4px unter der Mitte
   der Zeile daneben und läse sich als abgerutscht.
   Damit hängt die Lage an denselben zwei Werten wie die Zeile selbst; wer Grad
   oder Zeilenhöhe ändert, verschiebt die Punkte mit. */
/* ---------- Logoband ----------------------------------------------------
   GLEICHE HÖHE, NICHT GLEICHE BREITE. Die Dateien kommen auf eine einheitliche
   optische Höhe getrimmt (57 Einheiten im viewBox), und das ist bei fremden
   Marken das Einzige, was man vereinheitlichen darf: In gleich breite Kästen
   gepresst wird ein schmales Signet riesig und ein breiter Schriftzug winzig.
   Darum steht hier eine Höhe und sonst nichts — die Breite bringt jedes Logo
   selbst mit.
   Sechs Spalten sind kein Zufall: Bei achtzehn Logos gehen sie glatt auf, und
   eine angebrochene letzte Reihe sieht aus wie ein Kunde, der fehlt. Zurzeit
   sind es 24 Einträge (die vierte Reihe sind Platzhalter, siehe inc/logos.php)
   — auch 24 gehen bei 6, 4 und 3 Spalten glatt auf. */
.logos{display:grid;align-items:center;justify-items:center;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.6rem) clamp(1.2rem,2.6vw,2.4rem)}
/* In dieser Grösse stösst das breiteste Logo an die Spalte. Darum nicht
   `width:auto` mit Höhe, sondern die volle Spalte und `object-fit:contain`:
   Die Höhe ist das Ziel, die Spalte die Grenze, und wo beides kollidiert,
   gewinnt die Spalte — statt dass ein breiter Schriftzug gestaucht wird. */
/* Auf 90 % zurückgenommen — HÖHE UND SPALTENBREITE. Nur eines von beiden
   verschöbe bloss, welche der zwei Grenzen greift, und die breiten Schriftzüge
   blieben gleich gross, während alle anderen schrumpfen.
   `--mass` ist die optische Korrektur einzelner Logos; sie steht je Eintrag in
   `inc/logos.php` und wird in home.php als Stilangabe an das Bild geschrieben.
   Sieben Logos tragen eine, weil die gelieferte Zeichnung optisch grösser oder
   kleiner wirkt, als die Höhe im viewBox verspricht.
   SIE MUSS AUF BEIDE MASSE WIRKEN, aus demselben Grund wie die 90 % darüber. */
.logos img{width:calc(90% * var(--mass,1));
  height:calc(clamp(46.8px,5.22vw,72px) * var(--mass,1));
  object-fit:contain;display:block}
@media (max-width:900px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Die Logos blenden ein ----------------------------------------
   Eine Welle von links nach rechts: Die sechs Spalten starten leicht versetzt,
   so läuft die Bewegung einmal quer über das Band, statt dass achtzehn Marken
   gleichzeitig aufblinken.
   Gefahren über `animation-timeline:view()` und NICHT über den
   Reveal-Beobachter: Der meldet nur, was tatsächlich durchs Bild gelaufen ist —
   wer den Scrollbalken zieht, überspringt das Band, und die Logos blieben
   dauerhaft unsichtbar. Eine Scroll-Zeitachse kennt immer ihren Stand, auch
   nach einem Sprung.
   Ohne Unterstützung und bei reduzierter Bewegung passiert nichts: Die Logos
   stehen dann einfach da. Darum wird `opacity:0` NUR innerhalb dieses Blocks
   gesetzt. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Die Zeitachse gehört dem BAND, nicht dem einzelnen Logo. Mit `view()` je
       Bild wäre das Bild selbst der Bezug — rund 70px hoch, die Einblendung
       nach 37px Scrollweg vorbei und der Versatz zwischen den Spalten im
       einstelligen Pixelbereich: alle sechs sprängen innerhalb von ~50px von 0
       auf 1, von einer Welle bliebe nichts. Am Band gemessen sind es gut
       200px, auf die sich die sechs Spalten verteilen. */
    .logos{view-timeline-name:--logoband;view-timeline-axis:block}
    .logos img{animation:logoAn linear both;animation-timeline:--logoband;
      animation-range:entry 8% entry 62%}
    .logos img:nth-child(6n+2){animation-range:entry 15% entry 69%}
    .logos img:nth-child(6n+3){animation-range:entry 22% entry 76%}
    .logos img:nth-child(6n+4){animation-range:entry 29% entry 83%}
    .logos img:nth-child(6n+5){animation-range:entry 36% entry 90%}
    .logos img:nth-child(6n+6){animation-range:entry 43% entry 97%}
  }
}
@keyframes logoAn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  to{opacity:1;transform:none}
}

.zitat{margin:0}
.zitat blockquote{margin:0;font-size:clamp(1.8rem,4.4vw,3.4rem);font-weight:700;line-height:1.06;
  letter-spacing:-.038em;max-width:19ch}
.zitat blockquote em{color:var(--limette)}
.section:not([data-zone="tief"]) .zitat blockquote em{background:var(--limette);padding:0 .12em;border-radius:3px}
.zitat figcaption{margin-top:1.3rem;font-family:var(--f-util);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- Stimmen: der Zitat-Schieber ---------------------------------
   Kein zweites Zitat-Aussehen — innen steckt dieselbe `.zitat`, nur in einem
   Stapel. Alle Stimmen liegen in derselben Rasterzelle übereinander; der Kasten
   ist damit so hoch wie die längste und wackelt beim Weiterschalten nicht.
   Bewegt wird nur `opacity`: läuft auf dem Compositor und kostet kein Layout.
   `visibility` schaltet MIT, sonst lägen achtzehn unsichtbare Zitate im
   Vorlesefluss und in der Tabulatorreihenfolge. */
/* ---------- Der leise Entwurf (.leise) -----------------------------------
   Zweiter Vorschlag für die Kundenstimmen, siehe seiten/stimmen-leise.php.
   Kein Kasten, keine Fläche, keine Überlappung: Die Zitate stehen als Text auf
   dem tiefen Grund, getrennt von Weissraum und einer Haarlinie. Damit gibt es
   nichts, was etwas verdecken könnte, und der Abschnitt wiegt ungefähr so viel
   wie ein Absatz Fliesstext.

   RASTER, NICHT SPALTEN — und alle Stellen exakt gleich hoch. Spalten liessen
   jede Stimme in ihrer natürlichen Höhe stehen, was schöner aussieht und hier
   unbrauchbar ist: Die Stimmen werden im Betrieb getauscht, und mit ungleichen
   Höhen verschiebt ein längerer Satz alles darunter, samt der Haarlinie über
   der nächsten Stimme. Ändern soll sich NUR der Inhalt unter der Linie; die
   Linien selbst dürfen sich nie bewegen.
   `grid-auto-rows:1fr` in einem Raster ohne feste Höhe gibt allen Zeilen die
   Höhe der vollsten — jede Stelle ist damit ein festes Fach.

   Alle Stimmen liegen im Halbdunkel, und das ist der AUSGANGSZUSTAND, kein
   Hover-Effekt: Der Abschnitt liegt im Dämmer, erst wer hinzeigt, macht Licht.
   Darum steht die Dämpfung am Element selbst und wird beim Zeigen zurück-
   genommen — die anderen zu dimmen zeigte am Anfang eine helle Wand. */
/* Drei Spalten, zwei Zeilen: sechs Stimmen. Drei Zeilen waren eine Wand, die
   man überfliegt; zwei liest man. Die Anzahl steht in seiten/home.php
   ($wieviele), nicht hier. */
.leise{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:clamp(1.8rem,3.4vw,3rem) clamp(2rem,4vw,4rem);margin:0}
.leise__stimme{margin:0;padding-top:1.2rem;border-top:1px solid var(--hair);
  opacity:.63;transition:opacity 380ms var(--ease),border-color 380ms var(--ease)}

/* Der Inhalt füllt das Fach, die Zuschreibung sitzt unten. Dadurch stehen
   die Namen zeilenweise auf einer Linie — bei ungleich langen Zitaten das
   einzige, was die Reihe noch zusammenhält. */
.leise__inhalt{display:flex;flex-direction:column;height:100%}
.leise__stimme blockquote{margin:0 0 .9rem;font-size:1.06rem;line-height:1.5;
  letter-spacing:-.012em;text-wrap:pretty}
.leise__stimme figcaption{margin-top:auto}

/* Name und Firma in einer Zeile, sehr leise. Die Firma ist das, was der
   Leser wiedererkennt — der Name steht davor, weil ihn jemand gesagt hat. */
.leise figcaption{font-family:var(--f-util);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1.55}
.leise figcaption b{display:block;font-weight:500;
  color:var(--ink)}

/* Das eine hervorgehobene Wort ist der einzige Farbakzent im Abschnitt —
   auf tiefem Grund als Schrift, wie überall. */
.leise em{color:var(--limette);font-style:normal}

/* DIE LAMPE. Zeigt man auf eine Stimme, wird sie voll hell — und die
   gezeichnete Linie fährt in die Haarlinie über ihr und leuchtet dort (Zieltyp
   `oberkante` in linie.js). Die eigene Haarlinie tritt dabei zurück, sonst
   lägen zwei Striche übereinander und der Schein wirkte stumpf.
   Nur mit feinem Zeiger; auf dem Telefon gibt es kein «daneben», dort ist
   alles hell. */
@media (hover:hover) and (pointer:fine){
  /* `animation:none` ist nötig, weil eine laufende Animation sonst die
     Deckkraft aus den Keyframes durchsetzt und der Hover wirkungslos
     bliebe — fasst jemand mitten ins Flackern, gewinnt die Hand. */
  .leise .leise__stimme:hover{opacity:1;border-top-color:transparent;animation:none}
}
@media (hover:none),(pointer:coarse){.leise__stimme{opacity:1}}
@media (max-width:1000px){.leise{grid-template-columns:repeat(2,1fr)}}
/* ---------- Auf dem Telefon steht EINE Stimme ------------------------------
   Sechs Zitate untereinander waren 1050px, also mehr als eine Bildhoehe, und
   der Roehren-Tausch faende irgendwo ausserhalb des Bildes statt. Eine
   Schiene zum Wischen war der erste Versuch und der falsche: Sie zeigte
   dieselben sechs und ersetzte dabei das Flackern durch ein Wischen — also
   genau die Geste, die den Abschnitt auf dem Schirm ausmacht.
   Jetzt steht EINE Stimme da und wechselt wie dort: Die Haarlinie darueber
   zuendet wie eine Leuchtstoffroehre, und im Flackerlicht steht ein anderer
   Satz. Wischen loest denselben Wechsel aus — es ueberspringt nur das Warten.
   Die uebrigen fuenf Stellen bleiben im Baum (bei Querformat ueber 620px ist
   die Wand wieder da) und werden nur ausgeblendet; ihre Zitate wandern in den
   Vorrat, damit auf dem Telefon ALLE erreichbar sind und nicht nur die eine
   Handvoll, die der Server ins Feld gelegt hat.
   Die feste Zeilenhoehe aus hoeheMessen() bleibt in Kraft — darum weiter
   `grid` und nicht `block`: Ohne sie springt bei jedem Wechsel alles
   darunter. */
@media (max-width:620px){
  .leise{grid-template-columns:1fr;grid-auto-flow:row}
  .leise__stimme:not(:first-child){display:none}
  .leise__stimme{opacity:1}
}

/* ---------- Der Wechsel: eine Leuchtstoffröhre startet -------------------
   Alle paar Sekunden tauscht eine Stelle ihre Stimme gegen eine aus dem Vorrat
   (`initLeise` in app.js). Damit das nicht wie ein Datenfehler aussieht, bekommt
   der Wechsel eine Ursache: Die Haarlinie über der Stelle flackert an wie eine
   Leuchtstoffröhre, und im Flackerlicht steht dann ein anderer Satz. Erst das
   Licht, dann der Inhalt.
   Die flackernde Linie ist ein ::before ÜBER der Haarlinie, nicht die Haarlinie
   selbst: Eine `border-color` kann keinen Schein werfen, ein eigenes Element
   schon (`box-shadow`).
   Schein und Strich sitzen fest am Element; bewegt wird nur die Deckkraft.
   Wandert der `box-shadow` durch die Keyframes mit, zieht der Schein nach,
   während der Strich schon aus ist — eine Röhre schaltet aber HART. */
.leise__stimme{position:relative}
.leise__stimme::before{content:'';position:absolute;left:0;right:0;top:-1px;
  height:1px;background:var(--limette);pointer-events:none;opacity:0;
  box-shadow:0 0 16px 2px rgba(203,245,70,.7)}
.leise__stimme[data-flackern]::before{animation:leiseRoehre 1400ms linear forwards}

/* Eine startende Leuchtstoffröhre: zwei kurze Zündversuche mit sauberer
   Dunkelheit dazwischen, ein dritter, der noch einmal einbricht, dann steht das
   Licht — und geht am Ende ruhig aus. Jeder Wert steht DOPPELT (Anfang und Ende
   des Halts), damit die Wechsel hart sind statt weich; `linear` sorgt dafür,
   dass keine Beschleunigungskurve sie wieder verschleift. */
@keyframes leiseRoehre{
  0%,4%     {opacity:0}
  5%,7%     {opacity:1}
  8%,16%    {opacity:0}
  17%,20%   {opacity:.85}
  21%,27%   {opacity:0}
  28%,31%   {opacity:1}
  32%,34%   {opacity:.12}
  35%       {opacity:1}
  100%      {opacity:0}
}
/* Das Licht fällt auf den Text: Die Stelle hellt im selben Takt auf. Ohne das
   hinge die Röhre über einer Stimme, die sich nicht darum kümmert, und der
   Wechsel wirkte wieder wie ein Datenfehler statt wie Beleuchtung. Etwas
   gedämpfter als der Strich — Papier wirft nicht so hart zurück wie eine
   Röhre. */
.leise__stimme[data-flackern]{animation:leiseLicht 1400ms linear}
@keyframes leiseLicht{
  0%,16%    {opacity:.63}
  17%,20%   {opacity:.82}
  21%,27%   {opacity:.6}
  28%,31%   {opacity:.95}
  32%,34%   {opacity:.64}
  35%       {opacity:1}
  100%      {opacity:.63}
}
/* DIESELBE ROEHRE, ABER SIE GEHT AM ENDE NICHT AUS.
   Der letzte Schritt oben faehrt von 1 zurueck auf .63 — das ist der
   Ruhezustand der WAND: neun Stimmen im Halbdunkel, aus dem der Zeiger eine
   heraushebt. Auf dem Telefon steht nur eine Stimme da, und die liegt nicht
   im Dämmer, sondern voll im Licht (`.leise__stimme{opacity:1}`). Dort waere
   das Ausblenden am Schluss ein Abdunkeln ohne Grund — und danach ein Sprung
   zurueck auf voll, sobald die Animation endet.
   Der Takt bleibt bis auf den Schlusswert derselbe, damit der Wechsel im
   dunklen Abschnitt zwischen den Zuendversuchen verborgen bleibt. */
@keyframes leiseLichtAn{
  0%,16%    {opacity:.63}
  17%,20%   {opacity:.82}
  21%,27%   {opacity:.6}
  28%,31%   {opacity:.95}
  32%,34%   {opacity:.64}
  35%,100%  {opacity:1}
}
/* MUSS HINTER DER GRUNDREGEL STEHEN. Beide Waehler wiegen gleich viel
   (eine Klasse, ein Attribut) — dann entscheidet die Reihenfolge im Blatt.
   Im Telefonblock weiter oben stand die Regel zwar, griff aber nie: die
   Grundregel kam danach und gewann. Nur der Name wechselt, Dauer und Kurve
   bleiben. */
@media (max-width:620px){
  .leise__stimme[data-flackern]{animation-name:leiseLichtAn}
}

/* Die Überblendung des Textes. Sie braucht keine Höhenkorrektur mehr: alle
   Fächer sind gleich hoch, der Satz darüber bleibt also stehen, egal wie
   lang der neue Satz ist. */
.leise__inhalt{transition:opacity 220ms var(--ease)}
.leise__stimme[data-wechsel] .leise__inhalt{opacity:0}

/* Wer keine Bewegung will, bekommt weder Flackern noch Überblendung —
   das Skript hört auf dieselbe Abfrage und tauscht dann gar nicht. */
@media (prefers-reduced-motion:reduce){
  .leise__stimme::before{display:none}
  .leise__inhalt{transition:none}
}

/* ---------- DAS KONZEPT: Gliederung und Blatt ----------------------------
   Links ein Inhaltsverzeichnis, rechts ein Blatt Papier. Auf Limette, also ohne
   Mint/Himmel/Pfirsich — auf der Signalfarbe sind das keine Farben mehr. Was
   trennt, ist Papier gegen Limette.
   Was hier NICHT steht, ist die halbe Miete: keine Tafeln um die Gruppen, keine
   Pillen um die Einträge, keine Rahmen, keine Kapseln. Jede dieser Umrandungen
   wäre eine zweite Kante um etwas, das sich schon durch Abstand und Schriftgrad
   unterscheidet — in Summe machen sie aus dem Abschnitt ein Bedienfeld. */
.konzept{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* --- Die Gliederung --- */
/* Die Schiene läuft neben ALLEN drei Teilen durch, nicht je Teil einmal:
   Sie ist die Achse, an der die neun Bausteine hängen, und eine Achse, die
   dreimal neu anfängt, ist keine. Der Einzug macht ihr Platz. */
.konzept__liste{position:relative;padding-left:clamp(1.1rem,2.2vw,1.7rem)}
.konzept__schiene{position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;
  background:rgba(12,59,56,.2);border-radius:2px}
.konzept__marke{position:absolute;left:-1px;width:4px;border-radius:2px;
  background:var(--tief);opacity:0;
  transition:transform 480ms var(--ease),height 480ms var(--ease),
             opacity 300ms var(--ease)}
.konzept__marke[data-auf]{opacity:1}

/* Zeichnet die Linie mit, ist die CSS-Marke unsichtbar — aber NICHT weg. Sie
   ist das Ziel, an dem die Linie ihre Lage abliest; mit `display:none` hätte sie
   keine Masse mehr, die Linie bekäme ein Rechteck aus lauter Nullen und flöge in
   die linke obere Ecke des Dokuments. Also nur die Farbe weg: Die Marke steht
   weiter an ihrem Platz und misst sich, sichtbar ist allein der Strich. */
.konzept--gezeichnet .konzept__marke{background:none;transition:none}

/* Der Zeiger bekommt eine eigene Sprache, weil die Linie jetzt anderswo
   gebraucht wird: die Zeile rückt nach und unterstreicht sich. Tief und
   nicht limette — ein limetter Strich auf limettem Grund ist keiner. */
.konzept__kopf:hover,.konzept__wahl:hover{
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.22em;text-decoration-color:var(--tief)}
.konzept__teil+.konzept__teil{margin-top:clamp(1.8rem,3.4vw,2.8rem)}

/* Kopf und Eintrag sind DIESELBE Zeile in zwei Graden. Ein Kopf, der anders
   gebaut wäre als seine Einträge, liest sich als anderes Ding — er ist aber
   nur der Eintrag darüber. */
.konzept__kopf,.konzept__wahl{display:block;width:100%;text-align:left;
  background:none;border:0;padding:.5rem 0;color:inherit;cursor:pointer;
  font-family:inherit;transition:transform 320ms var(--ease)}
.konzept__kopf:hover,.konzept__wahl:hover{transform:translateX(.4rem)}

.konzept__kopf{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding-bottom:.7rem;margin-bottom:.5rem;
  border-bottom:1px solid rgba(12,59,56,.22)}
.konzept__nr{font-family:var(--f-util);font-size:.66rem;letter-spacing:.14em;
  opacity:.55}
.konzept__name{font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:700;
  letter-spacing:-.03em}
.konzept__was{font-size:.88rem;font-weight:500;opacity:.6}

.konzept__stuecke{list-style:none;margin:0;padding:0}
.konzept__wahl{font-size:clamp(1rem,1.8vw,1.16rem);font-weight:600;
  letter-spacing:-.014em;line-height:1.35}

/* Der gewählte Eintrag wird NICHT hinterlegt. Ein gefüllter Balken davor ist so
   schwer wie eine Karte und macht aus einer Zeile ein Feld — und weil er die
   volle Breite nimmt, springt das Auge bei jedem Wechsel auf einen neuen Block,
   statt einer neuen Zeile zu folgen. Es sagt die Marke auf der Schiene; die
   Zeile selbst rückt nur nach und wird satter. */
.konzept__wahl[aria-pressed="true"],.konzept__kopf[aria-pressed="true"]{
  transform:translateX(.45rem)}
.konzept__wahl[aria-pressed="true"]{font-weight:700}

/* --- Das Blatt --- */
/* Es klebt beim Scrollen: Wer unten in der Gliederung etwas antippt, hat das
   Blatt sonst längst über dem Bildrand. Der Abstand nach oben ist der
   schwebende Kopf. */
.konzept__blatt{position:sticky;top:calc(var(--kopf-h) + var(--kopf-luft) + 1.5rem);
  background:var(--kalk);color:var(--tief);border-radius:var(--r);
  padding:clamp(1.6rem,3.4vw,2.8rem);
  scroll-margin-top:calc(var(--kopf-h) + var(--kopf-luft) + 1rem);
  overflow:hidden}
.konzept__karte>*{margin-block:0 .9rem}
.konzept__karte>*:last-child{margin-bottom:0}
.konzept__karte h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.1;margin-top:.35rem}
.konzept__sagt{font-size:clamp(1.05rem,2vw,1.24rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.3;max-width:38ch}
.konzept__karte p{line-height:1.55}
.konzept__fall{border-top:1px solid var(--hair);padding-top:1.1rem}

/* Der Wechsel: das Blatt fährt auf die neue Höhe (Skript setzt sie), der
   Text blendet dabei durch. Ohne die Höhenfahrt sprang die Fläche bei jedem
   Klick um mehrere hundert Pixel — das war der Grund für die Unruhe, nicht
   die Farbe. */
.konzept__blatt{transition:height 460ms var(--ease)}
.konzept__karte:not([hidden]){animation:blattEin 420ms var(--ease)}
@keyframes blattEin{from{opacity:0;transform:translateY(10px)}}

/* --- Vor und zurück --- */
/* Am Fuss des Blattes, durch eine Haarlinie abgesetzt: Es gehört zum Blatt,
   ist aber nicht sein Inhalt. Beide Schritte tragen den Titel des Nachbarn —
   ein «Weiter», das nicht sagt wohin, ist eine Zumutung. */
.konzept__weiter{display:flex;justify-content:space-between;gap:1rem;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--hair)}
.konzept__schritt{display:flex;align-items:center;gap:.6rem;
  background:none;border:0;padding:.35rem 0;cursor:pointer;color:inherit;
  font-family:inherit;text-align:left;max-width:48%;
  transition:opacity 260ms var(--ease)}
.konzept__schritt--vor{text-align:right}
.konzept__schritt[disabled]{opacity:.28;cursor:default}
.konzept__schrittwort{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.konzept__schrittart{font-family:var(--f-util);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.konzept__schrittwort>[data-wort]{font-size:.95rem;font-weight:600;
  letter-spacing:-.014em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konzept__pfeil{flex:0 0 auto;font-size:1.05rem;line-height:1;
  transition:transform 320ms var(--ease)}
.konzept__schritt:not([disabled]):hover .konzept__pfeil{transform:translateX(-.3em)}
.konzept__schritt--vor:not([disabled]):hover .konzept__pfeil{transform:translateX(.3em)}

/* --- Der Ausgang aus dem Abschnitt --- */
/* Über die volle Breite und durch eine Haarlinie abgesetzt: Der Ausgang gehört
   zum ganzen Abschnitt und nicht zur schmalen linken Spalte — dort läse sich
   der blosse Link in der Ecke einer sehr grossen limetten Fläche als Rest statt
   als Angebot.
   Satz und Weg stehen nebeneinander, solange Platz ist; der Weg rechts, wo das
   Auge nach dem Lesen herauskommt. */
.ausgang{display:flex;align-items:end;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid rgba(12,59,56,.22)}
/* Kurz und darum gross: Vier Wörter und eine Frage vertragen den Grad einer
   Schlagzeile — ein langer Absatz hätte hier wie ein Nachtrag gewirkt. */
.ausgang__satz{margin:0;max-width:20ch;
  font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:700;
  letter-spacing:-.036em;line-height:1.06}
.ausgang__satz em{display:block;font-style:normal;width:fit-content;
  background:linear-gradient(var(--tief),var(--tief)) no-repeat 0 100%/100% 3px}
/* Ohne Unterlinie: Auf limettem Grund tragen Textlinks sonst eine, hier
   markiert ihn aber die gezeichnete Linie, sobald der Zeiger in den Ausgang
   fährt — und der Pfeil sagt den Rest. Zwei Zeichen für dasselbe sind eines
   zu viel. */
.ausgang__weg{margin:0;flex:0 0 auto}
[data-zone="limette"] .ausgang__weg .tlink{text-decoration:none}
@media (max-width:760px){.ausgang{align-items:start}}

@media (max-width:900px){
  .konzept{grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.4rem)}
  .konzept__blatt{position:static}
}
@media (prefers-reduced-motion:reduce){
  .konzept__karte:not([hidden]){animation:none}
  .konzept__blatt{transition:none}
  .konzept__kopf:hover,.konzept__wahl:hover{transform:none}
}

/* ---------- ZWEI WEGE (.wege) --------------------------------------------
   Der Umfang-Abschnitt auf /marke-schaerfen. Zwei Spalten, ruhig gesetzt. Keine
   Karten, keine Rahmen: Was die beiden trennt, ist der Abstand zwischen ihnen
   und der kurze Strich über jeder.
   Der Strich ist eine LEERE RINNE. Beim Zeigen fährt die begleitende Linie
   hinein und füllt sie — dieselbe Geste wie unter einem Eingabefeld und unter
   einem Menüpunkt. Darum bleibt sie grau: Das Schwarz bringt die Linie mit,
   sonst wären es zwei Striche übereinander. */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2.6rem,5vw,4.2rem)}
.wege__weg{transition:opacity 380ms var(--ease)}
/* Über die volle Breite der Spalte, nicht als kurzer Stummel: So ist sie die
   Oberkante der Spalte und trennt die beiden Wege auch ohne Rahmen. Und die
   Linie hat eine Strecke, die diesen Namen verdient — über 2.6rem wäre ihr
   Einfahren kaum zu sehen. */
.wege__rinne{display:block;width:100%;height:2px;border-radius:2px;
  background:var(--hair);margin-bottom:1.2rem}
.wege h3{margin:0 0 .5rem;font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.15}
.wege__dauer{font-family:var(--f-util);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.wege .liste{margin-top:1.4rem}

/* Die andere Spalte tritt zurueck, solange man auf einer steht. Nicht mehr
   als ein Schritt: Sie soll leiser werden, nicht verschwinden — verglichen
   wird ja weiterhin. */
@media (hover:hover) and (pointer:fine){
  .wege:has(.wege__weg:hover) .wege__weg:not(:hover){opacity:.45}
}

/* Ohne feinen Zeiger gibt es keine begleitende Linie, die die Rinne fuellen
   koennte — dort ist sie von Anfang an voll. */
@media (hover:none),(pointer:coarse){
  .wege__rinne{background:var(--tief)}
}

/* Ohne Unterlinie — wie beim Ausgang auf /marketing-planen. Auf limettem Grund
   tragen Textlinks sonst eine feine; hier markiert sie die begleitende Linie,
   die sich beim Zeigen als Pille darumlegt, und der Pfeil sagt den Rest.
   DIE SPEZIFITÄT MUSS DIE ZONENREGEL SCHLAGEN, die weiter unten im Stylesheet
   steht — sonst gewinnt sie über die Reihenfolge. */
[data-zone="limette"] .wege .tlink{text-decoration:none}

@media (max-width:820px){.wege{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wege__weg{transition:none}}

/* ---------- DAS NETZ (.netz) ---------------------------------------------
   Der Baukasten auf /marketing-umsetzen: links zwölf Massnahmen, rechts sechs
   Ziele, dazwischen gezeichnete Fäden; beide Seiten wirken aufeinander.
   Drei Entscheide tragen das Ganze:
     1. GLEICH HOHE ZEILEN statt verschieden breiter Pillen. Eine Wolke kann man
        nicht überfliegen, eine Liste schon.
     2. KEINE HAARLINIE JE ZEILE. Zwölf Striche unter zwölf Wörtern ergeben ein
        Liniengitter, in dem die Wörter untergehen. Getrennt wird durch die drei
        Gruppen; die Zeile selbst ist eine Fläche, die beim Zeigen erscheint.
     3. DAS ERGEBNIS STEHT RECHTS UNTER DEN ZIELEN — in dem Raum, der ohnehin
        leer ist, weil sechs Zeilen kürzer sind als zwölf. Der Abschnitt wird
        dadurch nicht höher, und das Ergebnis liegt auf Augenhöhe mit dem, was
        man antippt. */
.netz{position:relative;margin-top:clamp(1.5rem,3vw,2.4rem)}
.netz__paar{position:relative;display:grid;
  grid-template-columns:minmax(0,.92fr) clamp(3rem,7vw,6.5rem) minmax(0,1.08fr);
  align-items:start}

/* Die Faeden liegen ueber beiden Spalten und nehmen keine Klicks an. */
.netz__faden{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;z-index:2;color:var(--tief)}
.netz__faden path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  opacity:.85}
/* Die Spur wird nie gezeichnet: Sie ist nur die Strecke, auf der die
   begleitende Linie faehrt. Sichtbar bleibt sie trotzdem im Sinne des
   Layouts — mit display:none haette sie keine Masse, und die Linie faende
   sie nicht. */
.netz__faden .netz__spur{stroke:none;fill:none}
@keyframes netzZieh{to{stroke-dashoffset:0}}

.netz__spalte{position:relative;z-index:1}
.netz__frage{margin:0 0 .2rem;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;
  letter-spacing:-.026em;line-height:1.2}
.netz__oder{margin:0 0 1.1rem;color:var(--muted);font-size:.88rem}

.netz__gruppe{margin-bottom:.9rem}
.netz__gk{display:flex;align-items:center;gap:.55rem;margin:0 0 .25rem;
  padding-left:.55rem;font-family:var(--f-util);font-size:.58rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.netz__gk::after{content:'';flex:1 1 auto;height:1px;background:var(--hair)}

.netz__zeile,.netz__b{display:flex;align-items:center;gap:.5rem;width:100%;
  background:none;border:0;border-radius:7px;padding:.44rem .55rem;
  cursor:pointer;color:inherit;font-family:inherit;font-size:.96rem;
  text-align:left;position:relative;
  transition:opacity 300ms var(--ease),background 220ms var(--ease),
             color 220ms var(--ease)}
.netz__zeile:hover,.netz__b:hover{background:rgba(12,59,56,.07)}
/* Ein Spalt zwischen den Zeilen. Ohne ihn wachsen zwei gewählte Nachbarn zu
   EINEM Block zusammen, und aus zwei Entscheiden wird optisch einer. Drei Pixel
   genügen: Sie trennen die Flächen, ohne die Liste auseinanderzuziehen. */
.netz__zeile+.netz__zeile,.netz__b+.netz__b{margin-top:3px}
.netz__wort{flex:1 1 auto;min-width:0}
.netz__b b{flex:1 1 auto;font-size:.98rem;font-weight:700;letter-spacing:-.02em}
.netz__nr{font-family:var(--f-util);font-size:.58rem;letter-spacing:.1em;
  color:var(--muted)}

/* Der Punkt ist der Anschluss: dort setzt der Faden an. Links sitzt er
   rechts (dort geht der Faden weg), rechts links. */
.netz__punkt{flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  border:2px solid var(--tief);background:var(--grund);
  transition:background 240ms var(--ease),transform 240ms var(--ease),
             border-color 240ms var(--ease)}
.netz--rechts .netz__zeile,.netz--rechts .netz__b{flex-direction:row}
.netz__zeile{flex-direction:row}
.netz__zeile[data-an] .netz__punkt,.netz__b[data-an] .netz__punkt{
  background:var(--tief);transform:scale(1.25)}
.netz__zeile[aria-pressed="true"],.netz__b[aria-pressed="true"]{
  background:var(--tief);color:var(--kalk)}
.netz__zeile[aria-pressed="true"] .netz__punkt,
.netz__b[aria-pressed="true"] .netz__punkt{background:var(--limette);
  border-color:var(--limette)}
.netz__b[aria-pressed="true"] .netz__nr{color:rgba(246,244,238,.62)}

/* Ein kleines Kreuz am rechten Rand, sobald ein Ziel gewählt ist. Ohne das
   sieht man zwar, DASS etwas gewählt ist, aber nicht, dass derselbe Klick es
   auch wieder löst — die Zeile sähe aus wie ein Zustand und nicht wie ein
   Schalter. Nur im gewählten Zustand: An elf nicht gewählten Zeilen wären elf
   Kreuze ein Feld voller Angebote, etwas wegzunehmen, das gar nicht da ist.
   `aria-hidden` über das Pseudo-Element: Für Tastatur und Vorlesegerät sagt
   `aria-pressed` bereits alles, ein zusätzliches «mal» wäre Lärm. */
.netz__b[aria-pressed="true"]::after{content:'×';margin-left:.5rem;
  font-size:1.15rem;line-height:1;opacity:.5;
  transition:opacity 200ms var(--ease)}
.netz__b[aria-pressed="true"]:hover::after{opacity:1}
.netz__zeile[data-tot],.netz__b[data-tot]{opacity:.25;cursor:default}
.netz__zeile[data-tot]:hover,.netz__b[data-tot]:hover{background:none}
.netz__ziele{border-top:1px solid var(--hair);padding-top:.35rem}

/* --- Das Ergebnis --- */
/* Die einzige gefuellte Flaeche im Abschnitt und damit unuebersehbar. Vorher
   war es ein Absatz unter einer Linie und las sich als Fussnote. */
.netz__ergebnis{margin-top:clamp(1.1rem,2.2vw,1.8rem);border-radius:var(--r);
  background:var(--tief);color:var(--kalk);padding:clamp(1.2rem,2.6vw,1.8rem);
  transition:opacity 320ms var(--ease)}
/* Kein Rahmen um die Antwort: Eine Kontur um einen Kasten, der ohnehin eine
   Kante hat, wäre eine zweite Linie um dieselbe Form. Die begleitende Linie
   fährt stattdessen VON DER GEWÄHLTEN ZEILE in die Antwort hinein — sie zeigt
   den Weg, statt das Ziel zu umranden. */

/* KEIN Etikett über dem Titel. Eine Versalienzeile «Unser Vorschlag» sagt
   nichts, was die Fläche nicht schon sagt: Sie ist die einzige gefüllte weit
   und breit, also offensichtlich die Antwort. Was sie braucht, ist die NUMMER,
   und die steht oben rechts, wo sie ordnet statt aufzuhalten. */
.netz__ergebnis{position:relative}
.netz__nummer{position:absolute;top:clamp(1.2rem,2.6vw,1.8rem);
  right:clamp(1.2rem,2.6vw,1.8rem);
  font-family:var(--f-util);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,244,238,.42)}
.netz__ergebnis h3{margin:0 0 .35rem;padding-right:4.5rem;font-size:clamp(1.3rem,2.8vw,2.1rem);
  font-weight:700;letter-spacing:-.034em;line-height:1.08}
.netz__ergebnis p{margin:0;line-height:1.5;color:rgba(246,244,238,.78);font-size:.95rem}
.netz__lead{margin:0 0 .8rem !important;color:var(--limette) !important;
  font-size:1rem;font-weight:600;letter-spacing:-.018em;line-height:1.3}
.netz__preis{margin-top:.9rem !important;font-weight:600;color:var(--kalk) !important}
.netz__dazu{margin-top:.5rem !important;font-size:.85rem;
  color:rgba(246,244,238,.62) !important}
.netz__dazu b{color:var(--limette);font-weight:600}
/* Der leere Zustand und die Zwischenmeldung sind weg: Der Vorschlag
   erscheint erst, wenn es genau einer ist. Ein gestrichelter Kasten, der
   eine Bedienung erklaert, die man beim ersten Ueberfahren selbst
   herausfindet, ist ein Kasten zu viel. */
.netz__weg{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.3rem}
.netz__reset{background:none;border:0;padding:0;cursor:pointer;
  color:rgba(246,244,238,.66);font-family:var(--f-util);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:underline;
  text-underline-offset:.25em;transition:color 220ms var(--ease)}
.netz__reset:hover{color:var(--limette)}

/* Ohne Skript stehen alle sechs Buendel ausgeschrieben da. */
/* Diese Regel muss VOR der nächsten stehen und die Anzeigeart schlagen: Ein
   eigenes `display` im CSS überstimmt die Voreinstellung `display:none`, die das
   `hidden`-Attribut mitbringt — die Fassung ohne Skript stünde sonst trotz
   `hidden` weiter auf der Seite. */
.netz__ohne[hidden]{display:none}
.netz__ohne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem)}
.netz__ohne h3{margin:0 0 .3rem;font-size:1.1rem;font-weight:700;letter-spacing:-.024em}
.netz__ohne p{margin:0 0 .6rem;color:var(--muted);font-size:.93rem;line-height:1.5}

@media (max-width:820px){
  .netz__paar{grid-template-columns:1fr;gap:1.8rem}
  .netz__faden{display:none}
  .netz__ohne{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .netz__faden path{animation:none !important;stroke-dashoffset:0 !important}
}

/* ---------- DAS NETZ AUF DEM TELEFON --------------------------------------
   Am Schirm liegt der Sinn in den FAEDEN zwischen zwoelf Massnahmen und sechs
   Zielen. Einspaltig gibt es die nicht (die Zeichenflaeche misst dort 0x0),
   und uebrig blieben achtzehn Knoepfe untereinander. Ein Umschalter mit
   klebender Ergebnisleiste war der erste Versuch — bedienbar, aber immer noch
   ein Werkzeug fuer einen Schirm.
   Jetzt wird die Frage gestellt, die der Baustein ohnehin beantwortet:
   Welches Ziel wollen Sie erreichen? Darunter die sechs Buendel als
   Akkordeon. Sechs Titel auf einen Blick — das ist der Punkt, denn wer
   waehlen soll, muss sehen, was zur Wahl steht; eine Schiene haette fuenf
   davon versteckt.
   Die zwoelf Massnahmen und das Eingrenzen fallen weg. Sie sind ein
   Werkzeug fuer den Schirm; auf dem Telefon stehen sie da, wo sie hingehoeren
   — als Inhalt des Buendels, das man aufklappt.
   Die Antwort ist tief wie am Schirm (`.netz__ergebnis`): Auf dieser hellen
   Seite ist ein tiefer Kasten die Antwort, und daran aendert die Breite
   nichts.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  .netz__paar{display:none}

  .nm{min-width:0}
  .nm__frage{font-size:clamp(1.25rem,5vw,1.6rem);font-weight:700;
    letter-spacing:-.02em;line-height:1.2;margin:0 0 clamp(1rem,3vw,1.4rem)}
  .nm__liste{list-style:none;margin:0;padding:0}
  .nm__liste>li{border-top:1px solid var(--hair)}
  .nm__liste>li.nm__li--offen{border-top-color:transparent}

  .nm__zeile{
    display:flex;align-items:baseline;gap:.8rem;width:100%;min-height:44px;
    background:none;border:0;text-align:left;cursor:pointer;
    color:inherit;font:inherit;padding:.9rem 0;
    scroll-margin-top:calc(var(--kopf-h) + var(--kopf-luft) + .8rem);
  }
  .nm__nr{font-family:var(--f-util);font-size:.72rem;letter-spacing:.14em;
    opacity:.5;flex:none}
  .nm__titel{font-size:1.06rem;font-weight:700;line-height:1.25}
  .nm__winkel{margin-left:auto;flex:none;align-self:center;
    width:.5rem;height:.5rem;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);
    transition:transform 260ms var(--ease);opacity:.55}
  [aria-expanded="true"]>.nm__winkel{transform:rotate(-135deg);opacity:1}

  /* Offene Zeile und Antwort sind ein Stueck — wie beim Konzept. */
  .nm__zeile[aria-expanded="true"]{
    background:var(--tief);color:var(--kalk);
    border-radius:var(--r) var(--r) 0 0;
    padding:clamp(1rem,3.5vw,1.3rem) clamp(1.1rem,4vw,1.5rem) .6rem;
    margin-top:.2rem;
  }
  .nm__fach:empty{display:none}
  .nm__karte{
    background:var(--tief);color:var(--kalk);
    border-radius:0 0 var(--r) var(--r);
    padding:0 clamp(1.1rem,4vw,1.5rem) clamp(1.2rem,4vw,1.6rem);
    margin:0 0 .9rem;
  }
  .nm__karte>*{margin:0 0 .8rem}
  .nm__karte>*:last-child{margin-bottom:0}
  .nm__lead{font-weight:700}
  .nm__mass{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .5rem;
    font-family:var(--f-util);font-size:.74rem;letter-spacing:.1em;
    text-transform:uppercase;opacity:.75}
  .nm__mass li::after{content:' ·';opacity:.5}
  .nm__mass li:last-child::after{content:''}
  .nm__preis{font-size:var(--fs-sm);opacity:.8}
  @media (prefers-reduced-motion:no-preference){
    .nm__karte{animation:blattEin 320ms var(--ease)}
  }
}
@media (min-width:901px){.nm{display:none}}

/* ---------- DAS KONZEPT AUF DEM TELEFON -----------------------------------
   Am Schirm ist es ein Zweispalter: links das Verzeichnis, rechts das Blatt.
   Einspaltig geht diese Figur nicht auf — gemessen standen vierzehn Knoepfe
   oben und die Antwort begann 584px darunter. Man tippte und sah nichts
   passieren.
   Eine Schiene zum Wischen war der zweite Versuch und auch der falsche: Alle
   zwoelf Karten nebeneinander sind zwoelf Karten in voller Laenge, und der
   Abschnitt wurde 3230px hoch — knapp vier Bildschirme, in denen nichts
   uebersichtlicher wurde.
   Jetzt ein Akkordeon. Zugeklappt sind es zwoelf Zeilen, also eine Seite, die
   man ueberblickt; die Antwort oeffnet sich UNTER der Zeile, die man antippt,
   und schliesst die vorige. Damit ist der Weg von der Frage zur Antwort null,
   und die Laenge des Abschnitts richtet sich danach, wieviel man wissen will.
   Die Karten wandern dafuer aus dem Blatt in das Fach unter ihrer Zeile —
   umgehaengt, nicht kopiert; es gibt sie weiterhin genau einmal.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  .konzept__liste,.konzept__blatt{display:none}

  /* `min-width:0`, weil `.km` ein Rasterkind von `.konzept` ist: Die
     selbsttaetige Mindestbreite eines Rasterkindes ist die seines Inhalts. */
  .km,.km__teil{min-width:0}
  .km__teil{margin-top:clamp(1.6rem,4.5vw,2.2rem)}
  .km__teil:first-child{margin-top:0}

  .km__kopf,.km__wahl{
    display:flex;align-items:baseline;gap:.7rem;width:100%;
    background:none;border:0;text-align:left;cursor:pointer;
    color:inherit;font:inherit;
  }
  .km__kopf{padding:.15rem 0 .55rem}
  .km__nr{font-family:var(--f-util);font-size:.75rem;letter-spacing:.14em;opacity:.55}
  .km__name{font-size:clamp(1.35rem,5.5vw,1.7rem);font-weight:800;
    letter-spacing:-.03em;line-height:1.15}
  .km__was{font-size:var(--fs-sm);color:var(--muted)}

  .km__stuecke{list-style:none;margin:0;padding:0}
  .km__stuecke>li{border-top:1px solid var(--hair)}
  .km__wahl{padding:.85rem 0;font-size:1.02rem;min-height:44px}

  /* Das Zeichen sagt, dass sich etwas oeffnet — und was gerade offen ist.
     Ein Winkel und kein Plus: Er dreht sich, statt sich zu verwandeln, und
     dieselbe Form zeigt schon in der Brotkrume nach vorn. */
  .km__winkel{margin-left:auto;flex:none;align-self:center;
    width:.5rem;height:.5rem;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);
    transition:transform 260ms var(--ease);opacity:.6}
  [aria-expanded="true"]>.km__winkel{transform:rotate(-135deg);opacity:1}

  /* DIE OFFENE ZEILE GEHOERT ZU IHRER KARTE.
     Zugeklappt sind die Zeilen blosser Text auf dem Grund — das ist die
     Entscheidung des Abschnitts (keine Pillen, keine Rahmen, siehe oben bei
     `.konzept`). Aufgeklappt aber standen Zeile und Karte als zwei lose
     Stuecke da: die Zeile auf Limette, darunter mit Abstand ein Blatt.
     Die offene Zeile nimmt darum denselben Grund wie die Karte und schliesst
     ohne Fuge an sie an — oben gerundet, unten gerade. Aus zweien wird eines,
     und man sieht auf einen Blick, wozu die Antwort gehoert.
     Nur die OFFENE: Alle Zeilen einzukapseln waere die Tafel-Fassung, die der
     Abschnitt am Schirm ausdruecklich nicht hat. */
  .km__kopf[aria-expanded="true"],
  .km__wahl[aria-expanded="true"]{
    background:var(--kalk);color:var(--tief);
    border-radius:var(--r) var(--r) 0 0;
    padding-inline:clamp(1.1rem,4vw,1.6rem);
    margin-top:.2rem;
  }
  /* Die Teil-Zeile hat zugeklappt fast keine Polsterung nach oben — sie ist
     dort eine Ueberschrift im Fluss, und der Abstand kommt vom Abschnitt.
     Als Kasten braucht sie ihn selbst, und wegen des groesseren Grades mehr
     als die kleinen Zeilen (die stehen mit ihren .85rem richtig). Ohne das
     klebt «Analyse» an der Oberkante des Papiers. */
  .km__kopf[aria-expanded="true"]{
    padding-block:clamp(1.15rem,4.5vw,1.5rem) .7rem;
  }
  /* Die Haarlinie ueber der offenen Zeile weg — sonst liegt ein Strich auf
     der Papierkante. Ueber eine Klasse und nicht ueber `:has()`: Das kennt
     nicht jeder Browser, den diese Seite bedienen soll, und ein Strich quer
     ueber die Karte waere ein sichtbarer Fehler statt einer fehlenden
     Feinheit. app.js setzt sie. */
  .km__stuecke>li.km__li--offen{border-top-color:transparent}

  /* Das Fach ist leer, solange nichts offen ist — dann nimmt es auch keinen
     Platz. */
  .km__fach:empty{display:none}
  .km__fach .konzept__karte{
    background:var(--kalk);color:var(--tief);
    border-radius:0 0 var(--r) var(--r);
    padding:0 clamp(1.1rem,4vw,1.6rem) clamp(1.2rem,4vw,1.6rem);
    margin:0 0 .8rem;
  }

  /* Damit die angetippte Zeile nicht unter der schwebenden Kopfleiste
     landet, wenn app.js sie nach oben holt. */
  .km__kopf,.km__wahl{scroll-margin-top:calc(var(--kopf-h) + var(--kopf-luft) + .8rem)}
  @media (prefers-reduced-motion:no-preference){
    .km__fach .konzept__karte{animation:blattEin 320ms var(--ease)}
  }
}
@media (min-width:901px){.km{display:none}}

/* ---------- DER DIALOG (.dlg) --------------------------------------------
   Die Anfrage direkt aus dem Ergebnis heraus, ohne Seitenwechsel: Wer eine
   Zusammenstellung gebaut hat, soll sie nicht auf der nächsten Seite noch
   einmal beschreiben müssen. Das Formular ist dasselbe wie auf /kontakt
   (dieselbe Klasse, dieselbe Prüfung) — nur die Nachricht ist vorgeschrieben.
   `<dialog>` und nicht ein selbstgebautes Fenster: Der Browser bringt
   Fokusfalle, Escape, Hintergrund-Sperre und die Rolle für Vorlesegeräte von
   selbst mit. */
/* NICHT modal, und das hat einen Preis. Ein `showModal()`-Dialog liegt in der
   Top-Layer des Browsers — über allem, auch über der Zeichenfläche der
   begleitenden Linie (z-index 60). Die Linie wäre dort unsichtbar, und
   ausgerechnet im Formular, wo sie die Unterlinie der Felder ist, fehlte sie.
   Also `show()` plus eigener Grund, eigenes Escape und `inert` auf dem Rest der
   Seite. Was der Browser sonst mitbrächte, steht damit in `initDialog`. */
/* UNTER der gezeichneten Linie (#linie liegt auf 60), und das ist Absicht: Der
   Begleiter ist im offenen Dialog nicht Dekoration, sondern der Fokus-Zeiger —
   er fährt in die Unterlinie des Feldes und in den Kreis des Schliessknopfs.
   Läge er darunter, wäre er im Dialog gar nicht zu sehen.
   Dass die Linie NUR noch Ziele im Dialog annimmt, solange er offen ist, regelt
   `LINIE.nurIn()` — nicht die Stapelung. */
.dlg{position:fixed;inset:0;margin:auto;z-index:56;
  width:min(100% - 2rem, 46rem);height:fit-content;max-height:86vh;
  padding:0;border:0;border-radius:var(--r);
  background:var(--kalk);color:var(--tief);overflow:auto}
.dlg__grund{position:fixed;inset:0;z-index:55;background:rgba(12,59,56,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
@media (prefers-reduced-motion:no-preference){
  .dlg__grund{animation:dlgGrund 240ms var(--ease)}
  @keyframes dlgGrund{from{opacity:0}}
}

/* Das Textfeld wächst mit seinem Inhalt, statt zu rollen: Eine Bildlaufleiste
   in einem Feld, neben dem Platz frei ist, sieht nach Formular-Baukasten aus —
   und man sieht nicht, was man geschrieben hat. Die Höhe setzt das Skript; der
   Deckel greift nur auf kleinen Schirmen. */
.dlg textarea{overflow:hidden;resize:none;max-height:46vh}
.dlg__in{padding:clamp(1.6rem,4vw,2.8rem)}
.dlg__kopf{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem}
.dlg__kopf h3{margin:.2rem 0 0;font-size:clamp(1.3rem,2.8vw,2rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.1;flex:1 1 auto}
/* Das Kreuz ist eine Zeichnung, kein `&#215;`. Ein Schriftzeichen sitzt in der
   Zeile, wo die Schrift es hinsetzt, und `place-items:center` zentriert dann den
   Zeilenkasten samt der schiefen Lage darin — daher stand das Kreuz im Kreis
   daneben. Zwei Linien in einem quadratischen viewBox sind von sich aus
   mittig. */
.dlg__zu{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid var(--hair);background:none;cursor:pointer;color:inherit;
  display:grid;place-items:center;padding:0;
  transition:background 220ms var(--ease)}
.dlg__zu svg{display:block;width:.82rem;height:.82rem;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dlg__zu:hover{background:rgba(12,59,56,.07)}
@media (prefers-reduced-motion:no-preference){
  .dlg[open]{animation:dlgAuf 320ms var(--ease)}
  @keyframes dlgAuf{from{opacity:0;transform:translateY(14px)}}
}

/* ---------- Formular ---------- */
.feld{margin-bottom:1.6rem;position:relative}
.feld label{display:block;font-family:var(--f-util);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5rem}
/* «(optional)» gehört zum Label und trägt darum dessen Schrift: Mono,
   versalisiert, gleicher Grad, gleiche Sperrung — die Klammern sagen schon, dass
   es ein Zusatz ist. Zwei Schriften in einer Zeile von zwei Wörtern wären eine
   zu viel.
   Und er wird NICHT abgeblendet: --muted steht auf Papier bei 5.0:1, schon 25 %
   Deckkraft weniger drücken den Zusatz unter 3.5:1 — und ob ein Feld ausgefüllt
   werden muss, ist keine Angabe zum Erraten. Der Unterschied liegt im Wort,
   nicht im Ton. */
.feld .opt{font:inherit;letter-spacing:inherit;color:inherit}
.feld input,.feld textarea{width:100%;font-family:var(--f);font-size:1.06rem;color:var(--ink);background:transparent;
  border:0;border-bottom:2px solid var(--hair);padding:.7rem 0;border-radius:0;
  transition:border-color 500ms var(--ease)}
.feld textarea{resize:vertical;min-height:6rem}
.feld:focus-within input,.feld:focus-within textarea{border-bottom-color:var(--limette)}
.section:not([data-zone="tief"]) .feld:focus-within input,
.section:not([data-zone="tief"]) .feld:focus-within textarea{border-bottom-color:var(--tief)}
.feld input:focus,.feld textarea:focus{outline:none}
/* Die aktive Linie zeichnet die Schlange; die ruhende Haarlinie bleibt */
/* Solange die Linie noch unterwegs zum Feld ist, bleibt die Fokusfarbe aus:
   sonst steht der Strich schon da, bevor die Linie ankommt, und es sieht aus,
   als sei sie ihm hinterhergelaufen. `dlg--wartet` nimmt app.js weg, sobald
   `linie:da` meldet, dass der Umriss fertig ist. Ohne Engine wird die Klasse gar
   nicht erst gesetzt. */
.dlg--wartet .feld:focus-within input,
.dlg--wartet .feld:focus-within textarea{border-bottom-color:var(--hair)}
.feld input[data-linie],.feld textarea[data-linie],
.feld:focus-within input[data-linie],.feld:focus-within textarea[data-linie],
.section:not([data-zone="tief"]) .feld:focus-within input[data-linie],
.section:not([data-zone="tief"]) .feld:focus-within textarea[data-linie]{border-bottom-color:var(--hair)}
.feld:focus-within label{color:var(--ink)}
.fehler{display:block;font-size:var(--fs-sm);color:#9C3311;margin-top:.5rem}
[data-zone="tief"] .fehler{color:#F0B24A}
.feld[data-invalid="true"] input,.feld[data-invalid="true"] textarea{border-bottom-color:#9C3311}
fieldset{border:0;padding:0;margin:0 0 1.6rem}
legend{font-family:var(--f-util);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;padding:0}
.radios{display:flex;flex-wrap:wrap;gap:.5rem}
/* Die ganze Marke ist die Schaltfläche, nicht nur das versteckte Radio —
   der Zeiger muss das auch sagen. */
.radio{position:relative;cursor:pointer}
.radio input{cursor:pointer}
.radio input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.radio span{display:block;font-size:.93rem;font-weight:500;border:1px solid var(--hair);border-radius:100px;
  padding:.55rem 1.05rem;color:var(--muted);transition:all 380ms var(--ease)}
.radio input:checked+span{color:var(--tief);border-color:var(--limette);background:var(--limette)}
/* Der eigene Rand BLEIBT stehen, solange die Linie ihn nachzieht. Durchsichtig
   geschaltet verschwände er in dem Moment, in dem die Linie erst losfährt: Die
   Marke stünde eine halbe Sekunde ganz ohne Kontur da, und was danach kommt,
   sähe aus wie ein Ersatz statt wie ein Nachziehen. Die Linie läuft ohnehin
   genau auf dem Rand und deckt ihn Stück für Stück zu — man sieht das Grau also
   nur dort, wo sie noch nicht war. */
.radio input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.erfolg{border-left:3px solid var(--limette);padding:.3rem 0 .3rem 1.4rem}
.erfolg h3{margin-bottom:.5rem}
.erfolg p{color:var(--muted);margin:0}

/* ---------- Die Wortbühne: die Wortmarke trägt jede Seite ----------
   Sie liegt ausschliesslich hinter den dunklen Hero-Bändern. Kein
   Fliesstext liegt je auf ihr — Lesbarkeit bleibt unangetastet. */
#buehne{position:fixed;inset:0;z-index:0;background:var(--tief);overflow:hidden;pointer-events:none}
#buehne .parallaxe{position:absolute;inset:0;will-change:transform}
/* Lage und Auftreten des Wortes stehen weiter unten — dort gelten sie für
   beide Ebenen gemeinsam (Bühne und Wasserzeichen). */
#buehne .platte{fill:#08302E}
#buehne .schleier{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,59,56,.72) 0%,rgba(12,59,56,.14) 20%,
  rgba(12,59,56,.34) 46%,rgba(12,59,56,.86) 74%,var(--tief) 94%)}
/* Der Hero gibt die Bühne frei; alle übrigen Bänder decken sie ab. */
.hero[data-zone="tief"]{background:transparent}
.section:not([data-zone]){background:var(--kalk)}
#view>*{position:relative}

/* Aktiver Buchstabe in der Kopf-Wortmarke */

/* Bildquellen-Umschalter */

/* ---------- Footer -------------------------------------------------------
   Vier Stufen: der Ruf, die Übersicht, die Rechtszeile, die Wortmarke.
   Wie `#view` über die Bühne gehoben — sonst malt die feste Bühne (z 0) über
   den Fuss, weil ein Element ohne Position darunter einsortiert wird.
   z-index 3 und nicht 1: Das Wasserzeichen (#geist) liegt fest auf 2, und ein
   hoher Fuss bekäme sonst Fotoflächen hereingeschoben, die bei jedem Halt
   anders liegen. */
.fuss{background:var(--tiefer);color:var(--kalk);position:relative;z-index:3;overflow:hidden}
.fuss a{color:rgba(246,244,238,.68);text-decoration:none}
.fuss a:hover{color:var(--limette)}
.fuss .stern{color:var(--limette)}

/* 1 · Der Ruf — die letzte Gelegenheit, und nur eine.
   Kein gefüllter Knopf: Die Haupthandlung gehört der Seite darüber, und der
   Fuss steht auf jeder einzelnen. Ein `.tlink` wird auf tiefem Grund beim
   Zeigen limette — dieselbe Geste wie überall sonst. */
.fuss__ruf{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:1.6rem 3rem;padding-block:clamp(3rem,5vw,4.6rem)}
.fuss__ruf h2{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:700;letter-spacing:-.035em;
  line-height:1.06;max-width:18ch}
.fuss .eyebrow{color:rgba(246,244,238,.5)}
.fuss__ruf .eyebrow{margin:0 0 1rem}
.fuss__wege{display:flex;flex-wrap:wrap;gap:.4rem 2rem;align-items:baseline}

/* 2 · Die Übersicht — vier Gruppen auf der Kante des übrigen Seitenrasters. */
.fuss__raster{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;gap:2.6rem 2rem;
  padding-block:clamp(2.4rem,3.4vw,3rem);border-top:1px solid rgba(246,244,238,.14)}
.fuss__gruppe .eyebrow{margin:0 0 1.1rem}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:.62rem;font-size:var(--fs-sm)}
.fuss__liste a,.fuss__adresse a{display:inline-flex;gap:.6rem;align-items:baseline}
/* Kein Unterstrich im Fuss: Hier ist fast alles ein Link, und zwanzig Striche
   untereinander sind ein Zaun. Erkennbar wird der Link durch seinen Ort und beim
   Zeigen durch Limette, wie in der Kopfnavigation.
   Der Wähler ist so lang, weil die Grundregel für Links im Satz drei `:not()`
   trägt; `.fuss a` allein käme dagegen nicht an. */
.fuss :where(li,p) a:not(.btn):not(.tlink):not(.kanal){text-decoration:none;background-image:none}
.fuss__liste .num{font-family:var(--f-util);font-size:.66rem;letter-spacing:.1em;
  color:rgba(246,244,238,.34)}
.fuss__adresse{font-size:var(--fs-sm);color:rgba(246,244,238,.68);line-height:1.55;margin:.9rem 0 0}
/* Nummer und Mailadresse sind die meistgesuchte Zeile im ganzen Fuss —
   sie stehen darum grösser als die Navigationslisten daneben. */
.fuss__gross{font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
.fuss__gross a{color:var(--kalk)}
.fuss .kanaele{gap:.9rem}
.fuss .kanal small{color:rgba(246,244,238,.5)}

/* 3 · Die Rechtszeile — Impressum, Cookie-Einstellungen, Jahr.
   `.fuss__rechts` ist selbst ein Flexkasten und nicht bloss rechtsbündig: Dort
   stehen ZWEI Dinge, und im reinen Textfluss stiessen Link und Knopf ohne
   Abstand aneinander. Dieselbe Fuge wie die Zeile, damit die Gruppe rechts nicht
   enger sitzt als der Rest. */
.fuss__zeile{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;
  padding-block:1.5rem;font-size:.82rem;color:rgba(246,244,238,.52);
  border-top:1px solid rgba(246,244,238,.14)}
.fuss__rechts{margin-left:auto;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  align-items:baseline}

/* 4 · Die Wortmarke als Abschluss — riesig, sehr leise, unten angeschnitten.
   Dieselbe Zeichnung wie im Kopf: Die Seite beginnt und endet mit demselben
   Wort. Nicht anklickbar und für Vorlesegeräte nicht vorhanden — das Wort steht
   schon als Marke im Kopf, ein zweites Mal wäre es nur Lärm. */
.fuss__marke{margin-top:.4rem;pointer-events:none}
/* DER BESCHNITT IST EIN ANTEIL, KEINE LAENGE.
   Die Marke soll unten angeschnitten sein — aber ueberall gleich stark. Mit
   `clamp(2.4rem,6vw,6.5rem)` gewann auf dem Telefon die Untergrenze: 38px
   Beschnitt auf 62px Hoehe, also blieben 24px stehen (38 %), waehrend bei
   1440px 124 von 211px zu sehen waren (59 %).
   Ein Prozentwert rechnet gegen die BREITE des Kastens, und die Hoehe der
   Marke haengt an derselben Breite (Verhaeltnis 283.03:45.18, also 0.1596).
   6.5 % der Breite sind damit 41 % der Hoehe — genau der Anteil, der am
   Schirm schon vorher weg war: 1320 x 6.5 % = 85.8px gegen die 86.4px von
   vorher. Die Schirmfassung bleibt also, das Telefon zieht nach. */
.fuss__marke svg{display:block;width:100%;height:auto;color:var(--kalk);opacity:.07;
  margin-bottom:-6.5%}
/* AUF DEM TELEFON BRAUCHT SIE MEHR, NICHT WENIGER.
   Die Deckkraft ist dieselbe, die Flaeche nicht: Bei 1440px ist die Marke
   211px hoch und ihre Striche rund 30px breit — bei 390px sind es 56px Hoehe
   und 8px Strich. Dieselben 7 % tragen dort nicht mehr, und unten im Fuss war
   praktisch nichts zu sehen.
   Zwei Handgriffe, beide klein: Sie geht bis an die Blattkanten (das sind
   40px mehr Breite und damit ein Sechstel mehr Hoehe), und die Deckkraft
   steigt auf 12 %. Beschnitten wird sie weiterhin nicht — gemessen sind 99 %
   von ihr im Bild; es fehlte an Wirkung, nicht an Flaeche. */
@media (max-width:760px){
  /* `width` MUSS mit: Der Kasten traegt auch `.wrap`, und das setzt eine feste
     Breite — ein negativer Rand haette sie nur verschoben, nicht verbreitert. */
  /* Die Deckkraft bleibt bei den 7 % des Schirms — sie war kurz auf 12 %
     hochgesetzt, bevor klar war, dass es am Beschnitt lag und nicht an der
     Staerke. Ueberall derselbe Wert. */
  .fuss__marke{width:100%;margin-inline:0}
}
/* Die Haltepunkte stehen hier und nicht unten im Sammelblock: vier Spalten
   werden zu zweien, dann zu einer. `.fuss__rechts` gibt seine rechte Kante
   erst weiter unten auf (640px) — das steht dort. */
@media (max-width:900px){.fuss__raster{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fuss__raster{grid-template-columns:1fr}}

/* ---------- Bewegung ---------- */
/* Der letzte Halt ist `none`, nicht `translate3d(0,0,0)`: Mit `both` bleibt das
   letzte Bild stehen — und ein stehengebliebenes `transform` ist eine eigene
   Stapelebene. Jeder Knopf in einem eingeblendeten Block wäre damit wieder unter
   dem Wasserzeichen gefangen. `none` löst die Ebene nach dem Auftritt wieder
   auf; sichtbar ist kein Unterschied. */
/* DER AUFTRITT IST EIN AUFBLENDEN, KEIN SPRUNG.
   Vorher: 30px hoch, bei 58 % vier Pixel ueber die Ruhelage hinaus, dann
   zurueck. Der Ueberschwung ist der langsamste Teil der Bewegung und liegt
   am Ende — genau dort, wo ein verlorenes Bild auffaellt; er las sich als
   Wippen und war bei Last als Ruckeln zu sehen.
   Vorbild ist jetzt das Logoband, das schon immer der ruhigste Auftritt der
   Seite war: ein kurzer Weg und ein Aufblenden, sonst nichts (`logoAn`, 14px
   und keine Umkehr). Der Weg schrumpft darum von 30 auf 14 Pixel, der
   Ueberschwung faellt weg.
   Die Skalierung des Logobandes (.94) wird NICHT uebernommen: Ein Signet
   gewinnt dadurch, ein Textblock verliert — Schrift, die waehrend des
   Auftritts skaliert, wird unscharf und wirkt schwerer, nicht leichter.
   Die Dauer geht mit: 860ms waren fuer 30px mit Umkehr gerechnet; fuer 14px
   ohne waeren sie eine lange, fast stehende Bewegung. --dur-sec wird
   ausschliesslich hier verwendet, der Wert hat also keine Nebenwirkung. */
@keyframes ankunft{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
[data-reveal]{opacity:0}
[data-reveal].in{animation:ankunft var(--dur-sec) var(--ease) both;animation-delay:calc(var(--i,0) * 75ms)}
/* KEIN z-index hier — und das ist der Punkt. Mit einem eigenen z-index wäre
   `#view` eine eigene Stapelebene, und nichts darin käme je über das
   Wasserzeichen (#geist, z 2): Der Geist läge auch auf jedem Knopf und jedem
   Bild. Ohne z-index bleibt `#view` durchlässig, und einzelne Flächen dürfen
   sich selbst über den Geist heben (siehe «Solide Flächen»).
   Über die feste Bühne (z 0) kommt der Inhalt trotzdem: `#view>*` ist
   `position:relative` und steht im Dokument nach der Bühne — gleiche Ebene,
   spätere Reihenfolge gewinnt. */
#view{position:relative}

/* ---------- Solide Flächen -----------------------------------------------
   Was eine eigene Fläche mitbringt — ein gefüllter Knopf, ein Bild, eine Kachel
   —, ist undurchsichtig gemeint. Das Wasserzeichen darüber macht daraus eine
   Folie: Das ONFLOW schimmert quer über Limette und Foto und nimmt beiden die
   Kante. Der Geist gehört auf leere Fläche, nicht auf belegte.
   Geist-Knöpfe bleiben absichtlich aussen vor — die sind durchsichtig gemeint,
   dort soll er durchscheinen. */
.btn--primaer,.btn--sekundaer,
.radio input:checked+span,
img,.bild,.case,.postit{position:relative;z-index:3}
/* DAS FORMULAR MUSS SELBST HOCH, nicht nur der Knopf darin — die Falle, die in
   diesem Projekt am häufigsten zuschnappt: Ein z-index wirkt nur innerhalb des
   Stapelkontexts, in dem das Element steht. Das Formular trägt `data-reveal`,
   und `animation:ankunft … both` lässt eine Transformation stehen, die einen
   EIGENEN Stapelkontext aufmacht. Der `z-index:3` des Knopfes gilt damit nur
   noch innerhalb des Formulars; nach aussen liegt das ganze Formular unter dem
   Wasserzeichen.
   DER RIEGEL GEHÖRT AN DAS ELEMENT, DAS DEN KONTEXT ERZEUGT. */
.js-form{position:relative;z-index:3}
/* `.karte` gehört ausdrücklich NICHT dazu (siehe unten). Der Unterschied: Das
   Blatt der Lupe liegt auf limettem Grund und ist selbst Papier, hat also eine
   eigene Farbe — ohne den Riegel zöge der Geist quer darüber und liesse ein
   blasses Feld in der Ecke stehen. */
/* `.karte` gehört ausdrücklich NICHT dazu: Ihr Grund ist --grund, also genau
   die Farbe der Seite — unsichtbar, solange das Wasserzeichen gleichmässig
   darüberzieht. Hebt man sie heraus, blockiert sie es, und plötzlich steht ein
   blasses Rechteck im Bild, dessen Kanten man nur sieht, weil ringsum der Geist
   läuft und darin nicht.
   EINE FLÄCHE DARF NUR DANN ÜBER DEN GEIST, WENN SIE EINE EIGENE FARBE HAT. */
/* Auf tiefem Grund ist der Sekundärknopf nur umrandet, also durchsichtig
   gemeint — dort darf der Geist wieder durch. */
[data-zone="tief"] .btn--sekundaer,.fuss .btn--sekundaer,
.kopf .btn--sekundaer,.krume .btn--sekundaer{z-index:auto}

/* ==========================================================================
   ÜBERSCHREIBUNGEN v4 · «laut, aber lesbar»
   Kühnheit entsteht aus Massstab, harten Kanten und ganzen Flächen —
   nie auf Kosten von Kontrast, Zeilenlänge oder Hierarchie.
   ========================================================================== */
:root{
  --fs-mega:clamp(3.4rem, 12.4vw, 11rem);
  --fs-h1:clamp(2.9rem, 7.6vw, 6.6rem);
  --fs-h2:clamp(2.2rem, 5.8vw, 4.6rem);
  --fs-h3:clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-lead:clamp(1.12rem, 1.75vw, 1.55rem);
  --r:0px;
  --wrap:1320px;
  --rand:max(1.25rem, calc(50vw - var(--wrap)/2));
  /* Antritt sofort, dann ein langes Ausrollen statt eines Anhaltens */
  --wease:cubic-bezier(.11,.87,.15,1);
}
h1{font-weight:800;letter-spacing:-.052em;line-height:.9}
h2{font-weight:800;letter-spacing:-.046em;line-height:.94}
h3{font-weight:700;letter-spacing:-.028em}
.hero h1{max-width:none;letter-spacing:-.058em}
.eyebrow{font-size:.72rem;letter-spacing:.3em;margin-bottom:2rem}
.eyebrow::before{width:52px;height:3px}
.section{padding-block:clamp(4.5rem,10vw,9.5rem)}

/* Alles Kastige wird kantig — nur der Knopf bleibt rund. */
.karte,.bild,.case,.station,.flyout,.erfolg{border-radius:0}
.karte{border:0;border-top:3px solid var(--tief);padding-inline:0;padding-top:1.6rem}
.karte:hover{transform:none}
[data-zone="tief"] .karte{border-top-color:var(--limette)}
.karte--mint,.karte--himmel,.karte--pfirsich{padding:clamp(1.5rem,2.6vw,2.3rem);border-top:0}

/* ---------- Ganzflächen-Band: Vollbreite statt Kachel ---------- */
.vollband{margin-inline:calc(50% - 50vw);width:100vw;
  padding-inline:var(--rand);border-block:2px solid var(--tief)}

/* ---------- Kennzahlen als Signalband ---------- */
/* Nur noch Grund, Breite und Polsterung — die Anordnung steht oben beim
   Kennzahlenband und nicht ein zweites Mal hier. */
.zahlen{margin-inline:calc(50% - 50vw);width:100vw;background:var(--limette);
  padding:clamp(1.8rem,4vw,3.2rem) var(--rand)}
.kennzahl{font-size:clamp(2.8rem,7.4vw,6rem);font-weight:800;letter-spacing:-.06em}
.kennzahl+span{color:rgba(11,21,18,.7);font-weight:500;max-width:16ch}
.section--tight{padding-block:0}

/* ---------- Die vier Aufgaben: vier Farbräume, ganze Breite ----------
   Vier tiefe Felder statt blasser Pastelle: Über die volle Breite braucht Farbe
   Gewicht, und das Wasserzeichen legt sich über helle Flächen wie Schmutz. Die
   Reihe wandert von Grün über Petrol ins Blau — der Farbverlauf erzählt den Weg
   mit.
   Alle tragen `data-zone="tief"`, damit Fliesstext, Links und Fokusfarben ohne
   Sonderregeln stimmen. */
.stationen{display:block;margin-inline:calc(50% - 50vw);width:100vw}
.station{--feld:var(--tief);
  display:grid;align-items:stretch;min-height:0;position:relative;
  grid-template-columns:clamp(4rem,9vw,10rem) minmax(0,1fr) minmax(0,32rem);
  gap:clamp(1rem,2.6vw,3.4rem);
  padding:clamp(2.4rem,5vw,4.4rem) var(--rand);
  background:var(--feld);
  transform:none !important}
/* Abwechselnd tief und hell, damit die Schriftfarbe von Band zu Band
   kippt — vier gleich helle Felder hintereinander lesen sich als ein
   langer Block, der Wechsel gibt der Folge Takt. */
/* Alle vier tief, die Reihe wird von Band zu Band dunkler: Grün, Teal, Petrol,
   fast schwarz. Limette kommt hier NICHT als Fläche vor — sie gehört der
   Interaktion. Genau dadurch sprechen die gezeichnete Linie und der Hover
   dieselbe Sprache: Auf tiefem Grund ist die Linie limette, und der Link wird
   es beim Zeigen auch. */
.station--1{--feld:#1C6B58}
.station--2{--feld:#0E4C50}
.station--3{--feld:#0B3648}
.station--4{--feld:#062523}
/* Firefox rundet Bandhöhen auf Subpixel — an der Fuge zwischen zwei Bändern
   blitzt dann der helle Seitengrund als Haarlinie durch (Chrome fügt die Kanten
   zusammen, dort sieht man es nicht). Jedes Band zieht seine eigene Farbe 1px
   über die Fuge nach oben. NUR nach oben: nach unten würde Band 04 eine dunkle
   Linie in den hellen Abschluss malen. Ein Schlagschatten verändert kein Layout
   und erzeugt keine Bildlaufleiste. */
.station + .station{box-shadow:0 -1px 0 0 var(--feld)}

/* Der Faden: eine Linie durch alle vier Bänder, damit sie als eine Folge lesbar
   sind — ohne Davor/Danach-Etiketten. Er läuft über die ganze BANDHÖHE, nicht
   nur über den Inhalt: sonst reisst er in der Polsterung zwischen zwei Bändern
   ab und verbindet gar nichts. Die Ziffer stanzt sich mit ihrem eigenen
   Feldhintergrund ein Loch hinein. */
.station{--faden:calc(var(--rand) + clamp(4rem,9vw,10rem)/2 - 1px)}
.station::before{content:'';position:absolute;top:0;bottom:0;left:var(--faden);
  width:2px;background:var(--ink);opacity:.32}
/* Der Faden läuft jetzt schon aus dem Auftakt herein — im ersten Band
   beginnt er also oben, nicht auf halber Höhe. */
.station:first-child::before{top:0}

/* ---------- Der Auftakt der Folge ----------------------------------------
   Spiegelbild des Abschlusses: Dort endet der Faden in einem Punkt, hier beginnt
   er in einem — gleiches Raster, gleicher --faden, gleiche Punktgrösse, nur
   läuft der Faden nach UNTEN weg statt von oben zu kommen.
   Der Gewinn ist nicht der Punkt, sondern die KANTE: Die Schlagzeile steht in
   derselben Spalte wie «Marketing planen» in den Bändern. Am Seitenrand
   begonnen, fingen Auftakt und Folge an zwei verschiedenen Stellen an.
   Der Punkt sitzt auf halber Höhe (`align-self`), die Schrift steht unten
   bündig: So liegt der Fadenanfang auf der optischen Mitte des Blocks und die
   Zeilen sitzen trotzdem auf einer Linie. */
.auftakt{--faden:calc(var(--rand) + clamp(4rem,9vw,10rem)/2 - 1px);
  display:grid;align-items:end;position:relative;
  grid-template-columns:clamp(4rem,9vw,10rem) minmax(0,1fr) minmax(0,25rem);
  gap:clamp(1rem,2.6vw,3.4rem);
  padding:clamp(2.5rem,5vw,4.5rem) var(--rand) clamp(2.5rem,5vw,4rem);
  margin-inline:calc(50% - 50vw);width:100vw}
.auftakt::before{content:'';position:absolute;top:50%;bottom:0;left:var(--faden);
  width:2px;background:currentColor;opacity:.32}
.auftakt__punkt{justify-self:center;align-self:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--limette);box-shadow:0 0 0 3px currentColor;
  position:relative;z-index:2}
.auftakt h2{margin:0}
/* Dasselbe hervorgehobene Wort wie unten im Abschluss — die Folge bekommt
   damit oben und unten dieselbe Klammer. */
.auftakt h2 em{background:var(--limette);padding:0 .1em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.auftakt .hinweis{margin:0}
@media (max-width:900px){
  .auftakt{grid-template-columns:clamp(4rem,9vw,10rem) minmax(0,1fr);
    row-gap:clamp(1rem,2.4vw,1.6rem)}
  .auftakt .hinweis{grid-column:2}
}
/* Kein Halt beim letzten Band: der Faden läuft in den Abschluss weiter und
   endet erst dort. */
.station:last-child::before{bottom:0}

/* ---------- Der Abschluss der Folge --------------------------------------
   Das fünfte Glied der Kette: dasselbe Raster, derselbe Faden, aber ohne Ziffer
   und auf hellem Grund. Nach dem dunkelsten Band ist der Wechsel ins Helle der
   Schlusspunkt der Reihe — eine kleine zentrierte Zeile sähe nach vier
   ganzseitigen Bändern aus, als hätte man sie vergessen, und sie trägt
   ausgerechnet den Satz für jemanden, der sich in keinem der vier Felder
   wiedererkennt.
   Der Faden endet in einem Punkt statt abzureissen — die Folge hat damit ein
   Ziel, und es ist der Knopf. */
.abschluss{--faden:calc(var(--rand) + clamp(4rem,9vw,10rem)/2 - 1px);
  display:grid;align-items:center;position:relative;
  grid-template-columns:clamp(4rem,9vw,10rem) minmax(0,1fr) minmax(0,25rem);
  gap:clamp(1rem,2.6vw,3.4rem);
  padding:clamp(3rem,6vw,5rem) var(--rand);
  margin-inline:calc(50% - 50vw);width:100vw;
  background:var(--kalk);color:var(--tief)}
.abschluss::before{content:'';position:absolute;top:0;bottom:50%;left:var(--faden);
  width:2px;background:currentColor;opacity:.32}
/* Das Fadenende ist ein Ziel, kein Abriss: limetter Kern, Ring in der
   Fadenfarbe. Limette allein wäre auf Kalk bei 1.3:1 nicht zu sehen — der Ring
   gibt ihr die Kante, und weil er aus `currentColor` kommt, wächst er mit
   derselben Zeitachse ein wie der Faden darüber. 18px statt 13: Der Kern muss
   den Ring noch tragen können, ohne zum Aufzählungspunkt zu schrumpfen. */
.abschluss__punkt{justify-self:center;width:18px;height:18px;border-radius:50%;
  background:var(--limette);box-shadow:0 0 0 3px currentColor;
  position:relative;z-index:2;transition:transform 320ms var(--ease)}
.abschluss__frage{font-size:clamp(1.5rem,3.1vw,2.5rem);font-weight:700;letter-spacing:-.038em;
  line-height:1.05;margin:0 0 clamp(1.4rem,2.4vw,2rem);max-width:12ch}
/* Dasselbe hervorgehobene Wort wie in der Überschrift, mit der dieser Abschnitt
   oben aufmacht — die Folge bekommt damit eine Klammer statt eines Nachsatzes.
   Kleiner als dort, und mehr als dieses eine Wort trägt der Abschluss an Farbe
   nicht. */
.abschluss__frage em{background:var(--limette);padding:0 .12em;border-radius:4px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Der Umbruch steht als <br> im Text — die Breitenbegrenzung würde sonst
   ein zweites Mal umbrechen und die limette Zeile zerreissen. */
.abschluss__frage--zwei{max-width:none}
.abschluss__text p{margin:0;color:var(--nebel);font-size:var(--fs-lead);
  line-height:1.4;max-width:36ch}
/* Wortgleich mit den Links in den Bändern (`.station .tlink`) — nur schwarz
   statt kalk, weil der Grund hier hell ist. Kein `padding-bottom` und kein
   Unterstrich: Die Linie misst die Pille an der Schriftmitte, ein höherer Kasten
   setzt sie aus der Mitte.
   Der Farbwechsel nach Limette lässt sich als einziges nicht übernehmen — auf
   Kalk kommt Limette auf rund 1.3:1. Hier tragen der Pfeil und die gezeichnete
   Pille den Zustand. */
/* Grösse und Gewicht kommen vom Grundwert .tlink — hier nur die Farbe für
   den hellen Grund und die Ausrichtung im Raster. */
.abschluss__cta{align-self:start;color:var(--tief)}

/* Der ganze Abschluss ist die Schaltfläche — angefasst wird zwar nur der Link,
   aber ein Band aus drei Spalten, das auf den Zeiger gar nicht reagiert, wirkt
   tot. Beim Überfahren wächst der Markerstrich unter dem Wort an, der Pfeil
   rückt vor und der Punkt am Fadenende zieht leicht an: dieselben drei Gesten,
   die der Link ohnehin kennt, nur mit grösserem Einzugsgebiet.
   Nur bei echtem Zeiger — auf dem Touchgerät gäbe es keinen Weg zurück aus
   diesem Zustand. */
@media (hover:hover){
  .abschluss:hover .abschluss__cta{background-size:calc(100% - var(--pfeilraum,0px)) .5em}
  .abschluss:hover .abschluss__cta .pfeil{transform:translateX(.4em)}
  .abschluss:hover .abschluss__punkt{transform:scale(1.22)}
}

/* Der Faden füllt sich beim Lesen -----------------------------------------
   Kein neues Element, nur eine Aufgabe für eines, das ohnehin da liegt. Limette
   bleibt aussen vor — sie gehört der Berührung, und ein Band, das schon
   leuchtet, bevor der Zeiger ankommt, nimmt dem Zeigen seine Wirkung.
   DIE FÜLLSTELLE IST DIE BILDMITTE. Jedes Stück hängt an seiner EIGENEN
   Zeitachse, und der Bereich «cover 50vh bis 100% − 50vh» heisst genau: beginne,
   wenn meine Oberkante die Bildmitte erreicht, und sei fertig, wenn meine
   Unterkante dort ankommt. Weil die Unterkante eines Bandes die Oberkante des
   nächsten ist, schliessen die vier Stücke lückenlos aneinander an — ohne dass
   irgendwo Bandhöhen angenommen werden müssten. Dieselbe Regel trägt die Ziffer:
   Sie sitzt mitten im Band und hellt genau dann auf, wenn die Füllung bei ihr
   ankommt.
   (EINE Zeitachse der ganzen Liste in Viertel zu teilen geht nicht: Der
   «contain»-Bereich einer Liste, die höher als das Bild ist, ist kurz — nach
   500px wäre alles voll.)
   Gerechnet wird das vom Browser: Eine scroll-getriebene Animation läuft auf dem
   Compositor und kann der Seite nicht hinterherhinken. Ohne Unterstützung oder
   bei reduzierter Bewegung bleibt alles wie zuvor — der Faden gleichmässig, die
   Ziffern hell. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .station::after{content:'';position:absolute;top:0;bottom:0;left:var(--faden);
      width:2px;background:var(--ink);z-index:0;
      transform-origin:top;transform:scaleY(0);
      animation:fadenFuellen linear both;
      animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
    .station:first-child::after{top:0}
    /* Der Auftakt füllt als Erstes — die Folge beginnt sichtbar. */
    .auftakt::after{content:'';position:absolute;top:50%;bottom:0;left:var(--faden);
      width:2px;background:currentColor;z-index:0;
      transform-origin:top;transform:scaleY(0);
      animation:fadenFuellen linear both;
      animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
    .station:last-child::after{bottom:0}
    /* Der Abschluss ist das letzte Stück: die Füllung kommt genau dann an,
       wenn der Knopf auf Bildmitte steht. */
    .abschluss::after{content:'';position:absolute;top:0;bottom:50%;left:var(--faden);
      width:2px;background:currentColor;z-index:0;
      transform-origin:top;transform:scaleY(0);
      animation:fadenFuellen linear both;
      animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
    .abschluss__punkt{color:color-mix(in srgb, currentColor 40%, transparent);
      animation:zifferHell linear both;
      animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
    /* Die Ziffer stanzt ihr Loch auch in die Füllung — sie muss darüber
       liegen, und ::after zeichnet von sich aus nach dem Inhalt. */
    .station__num{position:relative;z-index:2;
      color:color-mix(in srgb, var(--ink) 40%, transparent);
      animation:zifferHell linear both;
      animation-timeline:view();animation-range:cover 50vh cover calc(100% - 50vh)}
  }
}
@keyframes fadenFuellen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Die Ziffer sitzt in der Mitte ihres Bandes — sie hellt auf, wenn die
   Füllung dort ankommt, und bleibt danach hell: alles Gelesene leuchtet. */
@keyframes zifferHell{
  0%{color:color-mix(in srgb, var(--ink) 40%, transparent)}
  55%,100%{color:var(--ink)}
}
.station__num{display:flex;align-items:center;justify-content:center;align-self:stretch;
  color:var(--ink)}
.station__num b{position:relative;font-family:var(--f);
  font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:800;
  line-height:1;letter-spacing:-.05em;padding:.34em 0;background:var(--feld)}

/* Alle vier Titel auf einer Zeile. Sie sind eine Reihe, und eine Reihe liest
   sich nur dann als eine, wenn die Zeilen gleich hoch stehen — ein einzelner
   Umbruch bei «Marketing umsetzen» schöbe dessen Links tiefer als die der
   Nachbarn. Darum kein `max-width`; auf schmalen Bildschirmen greift die
   Mobilregel weiter unten und darf umbrechen. */
.station h3{font-size:clamp(1.9rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.05em;
  line-height:.92;margin:0 0 clamp(2rem,3.4vw,3.2rem);color:var(--ink);max-width:14ch}
@media (min-width:1080px){
  .station h3{max-width:none;white-space:nowrap}
  /* Die rechte Spalte tritt zurück, damit zwischen dem längsten Titel
     («Marketing umsetzen», rund 560px) und der Beschreibung eine ehrliche Lücke
     bleibt. Bei 32rem stünden die beiden auf breiten Schirmen nur 40px
     auseinander — das überlappt zwar nicht, liest sich aber als Kollision. Mit
     25rem sind es überall mindestens 130px. */
  .station,.auftakt{grid-template-columns:clamp(4rem,9vw,10rem) minmax(0,1fr) minmax(0,25rem)}
}
/* Ohne Unterstrich — in den Bändern zieht die Linie selbst um den Link, ein
   zweiter Strich darunter wäre einer zu viel.
   Beim Zeigen wird der Link limette: dieselbe Farbe, in der die Linie auf tiefem
   Grund ohnehin ihre Pille darum zieht. KEINE Füllung — eine gefüllte Pille und
   die gezeichnete Kontur sind zwei Systeme, die ihre Farbe unabhängig wählen,
   und sie stossen sich oder verschlucken einander. Eine Farbe, eine Geste. */
/* Zwei Wege aus jedem Band: erst lesen, dann anfragen. Der erste Link führt auf
   die Detailseite und ist der Hauptweg — er steht vorn, ist grösser und trägt
   die geführte Linie. Der zweite springt direkt ins Formular und wählt das Thema
   gleich mit; er ist die Abkürzung für jemanden, der schon weiss, was er will,
   und darf leiser sein. */
/* Beide Wege gleich gross und auf einer Grundlinie — der Rang liegt im
   Gewicht und in der Deckkraft, nicht in der Schriftgrösse. Zwei
   verschieden grosse Zeilen nebeneinander sahen aus, als stünden sie
   versehentlich zusammen. */
.station__wege{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem clamp(1.4rem,3vw,2.6rem)}
/* Grösse, Gewicht, Pfeil und Hover stehen jetzt am Grundwert .tlink — hier
   bleibt nur, was mit dem Band zu tun hat: die Ausrichtung im Raster. */
.station .tlink{align-self:start}
.station__text{align-self:start}
.station__text p{color:var(--ink);max-width:30ch;
  font-size:clamp(1.12rem,1.85vw,1.6rem);line-height:1.34;margin:0}

@media (max-width:900px){
  .station,.auftakt{grid-template-columns:clamp(3rem,14vw,5rem) minmax(0,1fr);gap:1rem 1.2rem}
  .station__text{grid-column:2;margin-top:1.6rem}
  .station,.abschluss,.auftakt{--faden:calc(var(--rand) + clamp(3rem,14vw,5rem)/2 - 1px)}
  /* align-items bleibt zentriert: der Faden endet bei 50 % der Höhe, und
     genau dort muss auch der Punkt sitzen. Auf «start» gestellt lief der
     Faden am Punkt vorbei bis unter den Knopf. */
  .abschluss{grid-template-columns:clamp(3rem,14vw,5rem) minmax(0,1fr);gap:1rem 1.2rem}
  .abschluss__text{grid-column:2;margin-top:1.6rem}
  /* Der Text rutscht hier in eine zweite Zeile — der Punkt muss über beide gehen,
     sonst zentriert er sich in der ersten und der Faden läuft an ihm vorbei.
     `span 2` und nicht `1 / -1`: Die Zeilen sind implizit, und -1 zeigt dann auf
     die erste Linie, nicht auf die letzte. */
  .abschluss__punkt{grid-row:1 / span 2;align-self:center}
}

/* ---------- Zitat: Vollflächen-Aussage ---------- */
.zitat blockquote{font-size:clamp(2.1rem,6.2vw,5.2rem);font-weight:800;line-height:1;
  letter-spacing:-.05em;max-width:17ch}
.zitat blockquote em{color:var(--limette)}/* ---------- Schritte: Nummern als Grafik ---------- *//* ---------- Listen ---------- */
.liste li{padding-block:1.05rem;font-size:1.08rem}
.liste li::before{width:12px;height:12px;border-width:3px;border-radius:0;top:1.55rem}

/* ---------- Band-Sektionen ---------- */
/* ---------- Einwilligung --------------------------------------------------
   Ein Balken am unteren Rand, mehr nicht. Keine Fläche über der Seite, kein
   Abdunkeln, kein Zwang: Wer nicht entscheiden will, liest weiter — der
   Unterschied zwischen einer Frage und einer Erpressung.
   z-index 70: über der Kopfzeile (50), unter dem Sprunglink (80), der bei
   Tastaturbedienung als Erstes erreichbar bleiben muss.
   Tiefer Grund mit `--ink:--kalk`, damit die Knöpfe darin die Fassung für dunkle
   Abschnitte nehmen (umrandet statt gefüllt) — dafür sind die Token da, es
   braucht keine Sonderfarben.
   Bei Bewegungsreduktion fährt nichts herein, es steht einfach da. */
/* DAS GEGENSTÜCK ZUM KOPF, nicht ein Balken am Fuss. Der Kopf ist eine
   schwebende Leiste aus Glas am oberen Rand — das hier ist dieselbe Leiste am
   unteren, mit denselben Werten (rgba des tiefen Tons, blur 18, saturate 150,
   Haarrand in Kalk; ohne `saturate` wirkt Milchglas grau).
   Es liegt also NICHT auf der Seite, sondern die Seite scheint hindurch — und es
   hört an den Seitenrändern auf, statt die ganze Breite zu nehmen: Ein Kasten
   von Kante zu Kante ist eine zweite Fusszeile, einer der schwebt ist eine
   Nachfrage.
   Der Radius ist 14px und nicht die 100px des Kopfes: Der trägt eine Zeile,
   dieser zwei bis drei, und eine Pille um einen Absatz ist eine Lüge über seinen
   Inhalt. */
/* Seitlich hält `.wrap` am Markup den Abstand — genau wie beim Kopf, damit
   die zwei Leisten auf derselben Fluchtlinie stehen. Hier nur der Abstand
   nach unten, und der ist derselbe wie der des Kopfes nach oben. */
.zustimmung{position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding-bottom:clamp(1rem,2.4vw,2rem);
  color:var(--kalk);pointer-events:none;
  /* Der Satz steht heller als sonstiger Kleintext (.9 statt .66/.72): Das Glas ist
     durchsichtig, und über einem limetten Abschnitt liegt darunter die hellste
     Fläche der Seite — gedämpfte Schrift käme dort auf rund 3.5:1. Mit .9 über
     einem Glas von .78 sind es über 5:1. */
  --ink:var(--kalk);--muted:rgba(246,244,238,.9);--hair:rgba(246,244,238,.22);
  --focus:var(--limette);
  animation:zustimmung-herein .34s var(--ease) both}
@keyframes zustimmung-herein{from{transform:translateY(105%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.zustimmung{animation:none}}
.zustimmung__in{pointer-events:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem clamp(1rem,2.4vw,2.2rem);
  padding:clamp(.75rem,1.5vw,1rem) clamp(1rem,2vw,1.5rem);
  border-radius:14px;border:1px solid rgba(246,244,238,.16);
  background:rgba(12,59,56,.78);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 8px 30px rgba(6,37,35,.28)}
/* Ohne Weichzeichner wäre 72 % zu durchsichtig — dann trägt der Ton allein.
   Kein `@supports not`, weil ältere Browser die Regel darin oft auch nicht
   verstehen; umgekehrt herum ist es sicher. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .zustimmung__in{background:rgba(6,37,35,.94)}
}
.zustimmung__satz{margin:0;flex:1 1 26rem;font-size:var(--fs-sm);
  line-height:1.45;color:var(--muted);max-width:70ch}
.zustimmung__satz a{color:var(--kalk);text-decoration:underline;
  text-underline-offset:.18em}
/* Die zwei Knöpfe gleich schwer und nebeneinander. Sie brechen erst um, wenn
   die Zeile es verlangt — nie untereinander, solange sie nebeneinander
   passen: übereinander liest sich der obere als der gemeinte. */
/* `align-items:center` ist hier nicht Kosmetik: Ohne das streckt der Flexverbund
   beide Knöpfe auf die Höhe des grösseren, und «Ablehnen» wäre trotz kleinerer
   Schrift genauso hoch wie «Einverstanden» — die Grösse, die es tragen soll,
   käme gar nicht an. So behält jeder seine eigene Höhe und sie stehen auf einer
   Mittellinie. */
.zustimmung__weg{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
/* «Ablehnen» trägt die umrandete Fassung — dieselbe wie der Kontakt-Knopf im
   Kopf: durchsichtig, Rand in `--dunst-kante`. Sie steht hier ausdrücklich, weil
   das Banner in keiner der Regeln für dunklen Grund aufgezählt ist
   (`[data-zone="tief"], .fuss, .kopf, .krume`) — es ist eine eigene Fläche, und
   `.btn--sekundaer` fiele darum auf die helle, gefüllte Fassung zurück.
   Nur DIESER Knopf, nicht beide: «Einverstanden» bleibt gefüllt, damit sich die
   zwei unterscheiden.
   Damit ist Ablehnen leiser als Einverstanden, und genau das bemängeln
   Aufsichtsbehörden an Einwilligungsbannern. Zurück zu zwei gleichen Knöpfen
   heisst: diesen Block löschen. */
.zustimmung [data-zustimmung="noetig"]{--bg:transparent;--kante:var(--dunst-kante);
  /* Und kleiner: dieselben Masse wie `.kopf .kopf__cta`, damit «Ablehnen» und der
     Kontakt-Knopf im Kopf wirklich derselbe Knopf sind — .93rem, Gewicht 600,
     engere Polsterung.
     Das ist eine SCOPED Ausnahme und keine dritte Grösse im Vorrat: Der Kopf hat
     seine eigene aus demselben Grund (eine Leiste von 74px Höhe trägt keinen
     Knopf in Lesegrösse), und dieses Banner ist die zweite schmale Leiste der
     Seite. Wer sie global macht, hat die dritte Grösse, die CLAUDE.md
     ausschliesst. */
  font-size:.93rem;font-weight:600;padding:.5em 1.15em}
html:not(.linie) .zustimmung [data-zustimmung="noetig"]:hover{
  --bg:var(--kalk);--fg:var(--tief);--kante:var(--kalk)}

/* «Einverstanden» soll der Knopf sein, auf den man klickt — also der stärkste
   Kontrast auf dem dunklen Glas: PAPIER, nicht Limette.
   Limette geht hier nicht: Auf der Startseite steht im ersten Bild schon ein
   gefüllter limetter Knopf, und die Hausregel lässt genau einen je Bildschirm zu
   — eine Haupthandlung, sonst heisst «hier entlang» nirgends mehr etwas. Papier
   auf tiefem Glas ist ohnehin der grössere Sprung: die hellste Fläche gegen die
   dunkelste. Neu ist die Farbe nicht — es ist genau der Zustand, den ein
   umrandeter Knopf auf dunklem Grund beim Zeigen annimmt (`--bg:var(--kalk)`).
   Beim Zeigen wird er limette: Limette heisst Interaktion, und ein Hover IST
   Interaktion — als ruhende Fläche käme sie nicht vor.
   Grad 1rem: zwischen dem Kopf-Knopf (.93) und der Lesegrösse (1.06). */
.zustimmung [data-zustimmung="alle"]{
  --bg:var(--kalk);--fg:var(--tief);--kante:var(--kalk);
  font-size:1rem}
html:not(.linie) .zustimmung [data-zustimmung="alle"]:hover{
  --bg:var(--limette);--fg:var(--tief);--kante:var(--limette)}
/* KEINE STRECKUNG AUF SCHMALEN SCHIRMEN.
   Hier stand `width:100%` mit `flex:1 1 0` an den Knoepfen — beide zogen sich
   damit auf die halbe Zeile. Das kostete zweierlei: Ein Knopf ueber die
   ganze Breite ist eine Flaeche und kein Ziel (dieselbe Ueberlegung wie beim
   Kontakt-Knopf im Handymenue), und der Groessenunterschied zwischen
   «Ablehnen» und «Einverstanden» verschwand — bei 390px waren es 154 gegen
   152 Pixel, bei 560px 239 gegen 237. Genau den Unterschied setzt der Block
   weiter oben mit Absicht.
   Noetig war es nie: Zusammen brauchen die beiden 261px, und selbst auf
   360px stehen 320px zur Verfuegung. Sie behalten also ihre eigene Breite,
   und wenn der Satz darueber umbricht, ruecken sie als Gruppe eine Zeile
   tiefer. */

/* Der Weg zurück im Fuss. Ein Knopf, der wie der Rest der Rechtszeile
   aussieht — er ist keine Handlung der Seite, sondern eine Auskunft. */
.fuss__wieder{font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:.18em;
  opacity:.72;transition:opacity var(--dur-micro) var(--ease)}
.fuss__wieder:hover,.fuss__wieder:focus-visible{opacity:1}

/* ---------- Stimmen-Schieber -----------------------------------------------
   EINE Aussage, gross, gestapelt — dort, wo eine einzelne Stimme etwas belegen
   soll. Der Gegensatz zur `.leise`-Wand auf der Startseite: Die zeigt mehrere
   auf einmal und beantwortet «können die das?» durch Menge, hier steht eine da
   und wird gelesen.
   Kein Porträt: Neben einer grossen Aussage ist ein kleines Bild kein Mensch,
   sondern ein Fleck. */
.stimmen{position:relative}
.stimmen__spur{list-style:none;margin:0;padding:0;display:grid}
.stimme{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity var(--dur-el) var(--ease),visibility 0s linear var(--dur-el)}
.stimme.an{opacity:1;visibility:visible;transition-delay:0s,0s}

/* Der Grad hängt an der LÄNGE (`stimmeGrad()` in inc/stimmen.php): Kurze
   Aussagen dürfen gross sein, lange müssen kleiner werden, sonst füllt eine
   einzige Stimme den halben Bildschirm und alle anderen hinterlassen ein Loch
   darunter. Die Zeilenbreite wächst mit — kleiner Grad auf enger Spalte wäre
   eine Textsäule, kein Zitat.
   `.stimmen` steht in jedem dieser Wähler davor: eine Klasse mehr als beim
   Vollflächen-Grad von `.zitat blockquote`, und gewinnt damit unabhängig von der
   Reihenfolge in dieser Datei. */
.stimmen .zitat blockquote{font-weight:800;letter-spacing:-.042em;line-height:1.04}
.stimmen .stimme--gross blockquote{font-size:clamp(1.75rem,4.1vw,3rem);max-width:24ch}
.stimmen .stimme--mittel blockquote{font-size:clamp(1.55rem,3.4vw,2.5rem);max-width:27ch}
.stimmen .stimme--klein blockquote{font-size:clamp(1.4rem,3vw,2.15rem);max-width:29ch}

/* Der Teil, der NICHT von der Zusammenarbeit handelt, tritt zurück: Auf
   /ueber-uns steht die ganze Aussage da, gelesen werden soll aber der Satz über
   das Team. Gedämpft statt weggeschnitten — der Wortlaut bleibt vollständig, und
   der Leser sieht, dass er nichts unterschlagen bekommt. Kein zweiter
   Farbakzent: das eine limette Wort bleibt das eine. */
.stimmen .stimme__neben{color:var(--muted)}

/* Der Name trägt die Stimme — im Text-Grad, nicht in der Kleinschrift der
   Funktion. Ohne Bild ist er das einzige Gesicht. */
.stimmen .zitat figcaption{display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem clamp(.8rem,1.6vw,1.4rem);margin-top:clamp(1.4rem,2.6vw,2.2rem);
  font-family:var(--f);font-size:var(--fs-body);letter-spacing:0;text-transform:none}
.stimmen .zitat figcaption b{font-weight:700;color:var(--ink)}
.stimmen .zitat figcaption span{font-family:var(--f-util);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* Vor und zurück — die Knöpfe baut app.js in diese Zeile.
   Ohne Kasten und ohne Trennlinie: Zwei umrandete Quadrate neben einem Zitat
   wären das Schwerste im Abschnitt, obwohl sie nur weiterblättern. Zwei Winkel,
   gedämpft, beim Zeigen voll da und in die eigene Richtung gerückt — dieselbe
   Geste wie der Pfeil im `.tlink`. Punkte wären falsch: Es sind zehn Stimmen,
   und zehn Punkte sagen «zehn» so laut wie ein Zähler, nur breiter.
   Die Trefffläche bleibt 2.6rem, obwohl man sie nicht sieht — auf dem Telefon
   wird geklickt, was da ist, nicht was man sieht. */
.stimmen__weg{display:flex;align-items:center;gap:.1rem;
  margin-top:clamp(.2rem,.8vw,.6rem);margin-left:-.65rem}
.stimmen__weg button{width:2.6rem;height:2.6rem;display:grid;place-items:center;padding:0;
  border:0;background:transparent;color:inherit;opacity:.55;cursor:pointer;
  transition:opacity var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease)}
.stimmen__weg button:hover,.stimmen__weg button:focus-visible{opacity:1}
/* Der angefahrene Winkel wird limette — dieselbe Antwort, die jeder Link auf
   tiefem Grund gibt: Dort ist Limette die Schrift. Auf hellem Grund wäre sie als
   Schrift kaum 1.4:1, darum ist die Regel an die ZONE gebunden und nicht an den
   Knopf. */
/* Der Winkel färbt sich NICHT selbst um. Limette wird er dadurch, dass die
   Linie ihn nachzieht — sie zeichnet auf tiefem Grund limette, und weil sie
   genau auf ihm liegt, ist er es dann auch. Färbte er sich zusätzlich selbst,
   wäre er schon limette, bevor die Linie ankommt, und ihr Eintreffen sagte
   nichts mehr.
   Ohne Engine färbt er sich weiter selbst — da kommt keine Linie, die es für ihn
   täte. Beim Tastaturfokus ebenfalls. */
html:not(.linie) [data-zone="tief"] .stimmen__weg button:hover{color:var(--limette)}
[data-zone="tief"] .stimmen__weg button:focus-visible{color:var(--limette)}
/* Der gezeichnete Winkel BLEIBT stehen — die Linie fährt hinein und legt sich
   darauf, statt ihn abzulösen. Anders als beim Menüpunkt, dessen Strich
   zurückweicht: Dort ist der Strich der ZUSTAND, und zwei davon wären zwei
   Aussagen. Der Winkel ist der Knopf selbst — nimmt man ihn weg, ist während des
   Anflugs gar nichts mehr da, wohin man zeigen könnte. */
/* Das Verschieben nur OHNE Engine. Läuft der Begleiter, legt er eine Pille um
   den Winkel — rückt der im selben Moment um drei Pixel zur Seite, nimmt die
   Linie ihren Umriss neu und zeichnet ihn ein zweites Mal. Mit Engine ist die
   Pille die Bewegung, ohne sie ist es der Versatz. */
html:not(.linie) .stimmen__weg .stimmen__zurueck:hover{transform:translateX(-.2rem)}
html:not(.linie) .stimmen__weg .stimmen__vor:hover{transform:translateX(.2rem)}
.stimmen__weg button:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.stimmen__weg svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
@media (prefers-reduced-motion:reduce){
  .stimme{transition:none}
  .stimmen__weg button{transition:opacity var(--dur-micro) var(--ease)}
  .stimmen__weg button:hover{transform:none}
}

.band h2{font-size:clamp(2.4rem,6.4vw,5rem);max-width:14ch}
.band p{font-size:var(--fs-lead);max-width:48ch}

/* ---------- Cases ---------- */
.case__scrim h2,.case__scrim h3{font-size:clamp(1.35rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.04em}

/* ---------- Bildfelder kantig ---------- */
.bild{border-radius:0}

@media (max-width:560px){
  /* Kein .zahlen hier: der @media-Block für 1000px steht WEITER UNTEN in der
     Datei und hätte jede Regel von hier überstimmt — die alte einspaltige
     Fassung war genau deshalb toter Text. Das Band regelt sich dort. */
  .station,.abschluss,.auftakt{grid-template-columns:1fr}
  .station>*,.abschluss>*,.auftakt>*{grid-column:1 !important}
  .abschluss__punkt,.auftakt__punkt{display:none}
  .abschluss::before,.abschluss::after{display:none}
  /* Der Auftakt bleibt — er trägt die Schlagzeile. Nur Punkt und Faden gehen,
     wie beim Abschluss auch: Hier ist das Raster einspaltig, die Ziffernspalte
     gibt es nicht mehr, und die Linie stünde an einer Kante, die kein Inhalt
     mehr hat. Eine Linie, die nichts mehr verbindet, ist keine Führung, sondern
     ein Strich. */
  .auftakt::before,.auftakt::after,
  .station::before,.station::after{display:none}
  .auftakt{padding-bottom:clamp(1.6rem,4vw,2.4rem)}
}

/* ---------- Seitenwechsel ohne Deckel: das Wort bleibt sichtbar ----------
   Der Inhalt löst sich auf, die Bühne wird frei, das Wort gleitet zum
   nächsten Buchstaben — und der neue Inhalt setzt sich darauf ab. */

/* ==========================================================================
   v6 · Das Wort liegt hinter der GANZEN Seite
   Zwei Ebenen derselben Geometrie, immer deckungsgleich:
   – die Bühne (z 0): Duoton-Fotos, sichtbar durch die dunklen Hero-Bänder
   – das Wasserzeichen (z 2): dieselben Buchstaben als Differenz-Ebene über
     allen hellen Flächen. Dadurch verschwindet das Wort an keiner
     Scrollposition — und der Seitenwechsel bleibt ein durchgehender Zug.
   ========================================================================== */
#buehne .wort,#geist .wort{position:absolute;top:0;left:50%;width:240vw;
  transform:translateX(-50%) translateX(var(--wx,64vw)) translateY(-17%);
  transition:transform var(--wdauer,1600ms) var(--wease)}

/* Wie in der ersten Fassung: das Wort liegt zurückgenommen und dunkel da
   und kommt beim Seitenwechsel nach vorn, während es zum nächsten
   Buchstaben zieht. Es taucht auf, statt aufzuspringen. */
#buehne .wort g{opacity:.24;filter:grayscale(1) contrast(1.5) brightness(.52);
  transition:opacity calc(var(--wdauer,1600ms) * .68) var(--wease),
             filter  calc(var(--wdauer,1600ms) * .8) var(--wease)}
#buehne.hot .wort g{opacity:1;filter:grayscale(1) contrast(1.2) brightness(.94)}
#buehne .wort svg,#geist svg{width:100%;height:auto;display:block}
/* Auf schmalen Schirmen muss das Wort breiter liegen, damit ein Buchstabe
   das Bild noch füllt — und zwar auf beiden Ebenen gleich, sonst laufen
   Bühne und Wasserzeichen auseinander. */
@media (max-width:900px){#buehne .wort,#geist .wort{width:400vw}}

#geist{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  transition:opacity 1000ms var(--wease)}
/* EINE Ebene für beide Gründe. Zwei Fassungen übereinander (Duoton von Tief
   nach Papier und umgekehrt), zwischen denen an der Bandgrenze umgeblendet
   wird, sind deutlicher zu sehen als das Wasserzeichen selbst: Mitten im
   Scrollen kippt im Hintergrund etwas, ohne sichtbaren Grund.
   Die dunkle Fassung bleibt darum überall stehen. Sie verschwindet auf tiefem
   Grund nicht, weil die Buchstaben kein einfarbiger Ton sind, sondern die
   Bühnenbilder im Duoton — auch dort tragen sie Zeichnung, nur von unten heraus.
   `data-grund` bleibt trotzdem in Gebrauch: Auf tiefem Grund braucht es etwas
   mehr Deckkraft. Nur die Stärke wechselt, nicht mehr die Fassung. */
#geist .geist-lage{position:absolute;inset:0;transition:opacity 700ms var(--ease)}
#geist .geist-lage.dunkel{opacity:.085}
body[data-grund="dunkel"] #geist .geist-lage.dunkel{opacity:.11}

/* Im Hero trägt die Bühne selbst — dort tritt der Geist ganz zurück. */
body.oben #geist{opacity:0}
@media (max-width:900px){
  #geist .geist-lage.dunkel{opacity:.07}
  body[data-grund="dunkel"] #geist .geist-lage.dunkel{opacity:.09}}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .raster--4{grid-template-columns:repeat(2,1fr)}
  /* Vier Zahlen brechen auf zwei mal zwei — ein sauberes Quadrat. Vier
     nebeneinander werden auf 1000px so schmal, dass «Jahre Berufserfahrung im
     Team» vierzeilig umbricht und neben einer einzeiligen Nachbarin steht.
     Der Bruch wird ERZWUNGEN und nicht dem Umbruch überlassen: frei laufend
     ergäbe sich irgendwann 3+1, und die eine allein stehende Zahl in der Mitte
     der zweiten Zeile sieht nach Versehen aus.
     Erzwungen über das FELD und nicht über die Blockbreite: Ein `flex-basis:50%`
     machte aus jedem Block einen 460px breiten Kasten mit 159px Inhalt am linken
     Rand — also genau die Vierteltabelle, nur in Hälften. Stattdessen wird das
     Inhaltsfeld auf 30rem verengt: Zwei Blöcke passen nebeneinander, drei nicht,
     die Blöcke behalten ihre Inhaltsbreite und `justify-content:center` setzt
     jede Zeile mittig.
     Das trägt bis aufs Telefon durch: Unter rund 420px reicht das Feld auch für
     zwei nicht mehr, und die Zahlen stehen einzeln untereinander — ohne eigene
     Regel dafür. */
  .zahlen{--spalt:clamp(1.5rem,4vw,3rem);gap:2rem var(--spalt);
    padding-inline:max(var(--rand), calc(50% - 15rem))}
}
@media (max-width:900px){
  .raster--3{grid-template-columns:repeat(2,1fr)}
  .postits{grid-template-columns:repeat(2,1fr)}
  .split,.split--breit,.split--schlagzeile{grid-template-columns:1fr}
  .klebrig{position:static}
  .stationen{grid-template-columns:1fr}
  /* ---------- Das Menue auf dem Telefon ------------------------------------
     Eine TAFEL, die von rechts hereinfaehrt — dort, wo der Knopf steht, mit
     dem sie geoeffnet wird. Sie beginnt unter dem schwebenden Kopf und reicht
     bis zum Boden: Der Kopf bleibt sichtbar, also bleibt auch der Weg hinaus
     sichtbar, und es braucht kein zweites Kreuz in der Tafel.
     Sie ist IMMER im Baum und faehrt hinaus, statt zu verschwinden —
     `display:none` laesst sich nicht bewegen. Verborgen wird sie ueber
     `visibility`, damit nichts darin anfassbar oder vorlesbar bleibt; die
     Verzoegerung haelt sie waehrend der Ausfahrt noch sichtbar. */
  .kopf .nav{display:none}
  .kopf .nav--mobil{display:flex}
  .burger{display:inline-flex;align-items:center;margin-left:auto;background:none;border:0;color:var(--kalk);
    font-family:var(--f);font-size:.95rem;font-weight:700;padding:.6rem .2rem;min-height:44px}
  .nav--mobil{
    position:fixed;inset:calc(var(--kopf-h) + var(--kopf-luft)) 0 0 auto;
    width:min(88vw,24rem);z-index:45;
    background:var(--tiefer);border-left:1px solid rgba(246,244,238,.16);
    flex-direction:column;align-items:stretch;gap:0;
    padding:clamp(1.4rem,6vw,2.2rem) clamp(1.25rem,5vw,1.8rem)
            calc(1.6rem + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform 420ms var(--ease),visibility 0s 420ms;
  }
  .nav--mobil[data-open="true"]{
    transform:none;visibility:visible;
    transition:transform 420ms var(--ease),visibility 0s;
  }

  /* Der Schleier liegt NEBEN der Tafel im Baum (app.js haengt ihn an den
     Koerper), nicht als Pseudoelement darin: Sonst waere ein Tippen darauf
     ein Tippen auf die Tafel selbst, und der Griff, der beim Klick nach
     draussen schliesst, sieht es nie. */
  /* ÜBER DIE GANZE SEITE, nicht erst unter dem Kopf: Sonst bleibt oben ein
     ungedaempfter Streifen stehen, und Wortmarke und «Schliessen» sitzen auf
     einem helleren Grund als alles darunter — das liest sich als Fehler.
     Der Kopf liegt auf z-index 50 und damit ohnehin ueber dem Schleier; er
     bleibt also voll lesbar, waehrend die Seite dahinter zurueckgeht. */
  .nav__schleier{
    display:block;position:fixed;inset:0;z-index:44;
    background:rgba(7,32,30,.55);opacity:0;pointer-events:none;
    transition:opacity 420ms var(--ease);
  }
  .nav__schleier[data-an]{opacity:1;pointer-events:auto}

  /* Die Seite dahinter steht still, solange die Tafel offen ist — sonst
     scrollt sie unter ihr weg, und beim Schliessen ist man woanders. */
  html.menue-offen{overflow:hidden}

  /* SOLANGE DIE TAFEL OFFEN IST, TRAEGT DER KOPF KEIN GLAS.
     Nicht aus Geschmack: `backdrop-filter` macht ein Element zum Bezugsrahmen
     fuer `position:fixed`-Kinder, und die Tafel liegt in `.kopf__in`. Sobald
     das Glas anliegt — also nach dem ersten Scrollen (`data-fest="true"`) —
     bezieht sich `inset:… 0 0 auto` nicht mehr auf das Fenster, sondern auf
     die Kopfzeile: Die Tafel schrumpfte von 762 auf 49 Pixel und war
     unbedienbar. Gemessen bei 390px, Scrollstand 900.
     Der Waehler traegt `.kopf[data-fest="true"]` mit, weil die Glasregel drei
     Klassen wiegt und eine kuerzere Regel nicht dagegen ankaeme.
     Die Fuellung bleibt: Nur die Unschaerfe geht, und die Seite dahinter ist
     ohnehin vom Schleier gedaempft. */
  html.menue-offen .kopf[data-fest="true"] .kopf__in{
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }

  /* ---- Die Eintraege ----
     Gross und linksbuendig, in derselben Schrift wie die Schlagzeilen — ein
     Menue ist auf dem Telefon eine Seite fuer sich und keine Leiste. Kein
     `width:100%`: Der Treffer soll so breit sein wie das Wort. */
  .nav--mobil a,.nav--mobil button{
    padding:.55rem 0;width:auto;text-align:left;
    font-size:clamp(1.45rem,6.5vw,1.9rem);font-weight:800;
    letter-spacing:-.03em;line-height:1.12;
  }
  /* Der Auftritt: die Eintraege ruecken einer nach dem anderen nach. --i
     setzt app.js in Dokumentfolge. Bei reduzierter Bewegung stehen sie
     einfach da. */
  .nav--mobil a,.nav--mobil .nav__wort{
    opacity:0;transform:translateX(1.2rem);
    transition:opacity 320ms var(--ease),transform 420ms var(--ease);
  }
  .nav--mobil[data-open="true"] a,
  .nav--mobil[data-open="true"] .nav__wort{
    opacity:1;transform:none;
    transition-delay:calc(120ms + var(--i,0) * 45ms);
  }
  @media (prefers-reduced-motion:reduce){
    .nav--mobil{transition:none}
    .nav--mobil a,.nav--mobil .nav__wort{transition:none;opacity:1;transform:none}
  }

  /* ---- «Angebot» ist auf dem Telefon eine BESCHRIFTUNG, kein Schalter ----
     Die Klappe steht hier ohnehin offen. Ein Schalter, der nur zumachen
     kann, was schon offen ist, kostet einen Tipp und bringt nichts — und
     genau daran hing der Fehler: Die Grundregel von `.flyout` setzt
     `pointer-events:none`, die Handyfassung hob das nicht auf. Die vier
     Angebote waren sichtbar und trotzdem tot, bis jemand auf «Angebot»
     tippte. app.js nimmt den Knopf aus der Tabulatorfolge und gibt der
     Schachtel den Namen. */
  .nav--mobil .nav__has>button{
    pointer-events:none;
    font-family:var(--f-util);font-size:.72rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);padding:.2rem 0 .4rem;
  }
  .nav--mobil .flyout{
    position:static;opacity:1;visibility:visible;pointer-events:auto;
    transform:none;background:none;border:0;padding:0;min-width:0;
    transition:none;
  }
  .nav--mobil .flyout a{padding:.55rem 0;gap:.9rem;align-items:baseline}
  .nav--mobil .flyout .num{font-size:.78rem}

  /* Eine Haarlinie trennt die vier Angebote vom Rest — nicht eine je Zeile,
     sondern eine je Gruppe. */
  .nav--mobil .nav__has{padding-bottom:.9rem;margin-bottom:.9rem;
    border-bottom:1px solid rgba(246,244,238,.16)}

  /* ---- Die Handlung ----
     NICHT ueber die volle Breite: Ein Knopf, der die ganze Zeile nimmt, ist
     eine Flaeche und kein Ziel — und er saehe schwerer aus als die
     Haupthandlung der Seite darunter.
     Und NICHT an den Fuss der Tafel (`margin-top:auto`): Dort liegt das
     Einwilligungsbanner darueber, das bis zur Entscheidung fest am unteren
     Rand klebt — ein Erstbesucher kaeme nie an den Knopf. Er steht darum
     direkt unter den Eintraegen. */
  .nav--mobil .kopf__cta{
    margin-top:clamp(1.6rem,5vw,2.4rem);align-self:flex-start;width:auto;
    font-size:1rem;font-weight:700;padding:.65em 1.3em;
    letter-spacing:normal;
  }
  .nav--mobil .tlink{margin:.9rem 0 0;font-size:1.1rem}
}
/* ---------- Am schmalen Ende ----------------------------------------------
   Zwei Stellen, die unter 400px nicht mehr aufgehen. Gemessen, nicht
   geschaetzt — der Inhalt ist dort 280px (bei 320) bis 335px (bei 375) breit.

   1. DER HERO-KNOPF. «Kennenlerngespraech vereinbaren» braucht einzeilig
      328px; verfuegbar sind 280 / 304 / 320 / 335. Er lief also auf JEDER
      Telefonbreite zwei- bis dreizeilig um, und ein Kissen mit drei Zeilen
      Text ist keine Pille mehr.
      Zuerst die Polsterung: 1.3em auf beiden Seiten sind bei 16.8px Grad
      44px, die fuer nichts gebraucht werden — .95em spart 14px. Das allein
      reicht ab 360px. Darunter kommt der Grad mit: `clamp` bindet ihn an die
      Fensterbreite, aber nur bis 1.05rem, damit er ab 390px wieder der
      normale ist. `nowrap`, weil ein Knopf keinen Umbruch haben soll —
      passt er nicht, ist der Grad falsch und nicht die Zeile.
      Beide Knoepfe zusammen, nicht nur der gefuellte: Zwei Knoepfe
      untereinander in verschiedenen Schriftgraden lesen sich als Fehler.

   2. DIE KENNZAHLEN. Sie brauchen zu zweit 2 x 10rem plus 1.5rem Fuge, also
      344px — mehr, als bis 375px zur Verfuegung steht. Darum standen sie ab
      375px abwaerts einzeln untereinander, und aus vier Zahlen wurden vier
      Bildschirme. Mit 8rem Mindestbreite und 1rem Fuge sind es 272px, und
      damit stehen sie ueberall zu zweit — auch auf 320. Die Beschriftung
      darunter bricht dafuer auf drei Zeilen um; ein Quadrat aus vier Zahlen
      liest sich besser als eine Spalte aus vier. */
@media (max-width:400px){
  .hero .btn{font-size:clamp(.88rem,4.6vw,1.05rem);padding-inline:.95em;white-space:nowrap}
}

/* DAS QUADRAT WIRD GESETZT, NICHT ERHOFFT.
   Die Zeile oben ist ein Flexverbund, und darin richtet sich die Breite eines
   Blocks nach seiner Beschriftung. Eine Mindestbreite gleicht das nur an,
   solange keine Beschriftung darueber hinauswaechst — «Jahre Berufserfahrung
   im Team» tut es, «Projekte umgesetzt» nicht. Auf 360px ergab das 2+1+1:
   oben zwei, darunter zwei einzelne, mittig. Das liest sich als Fehler, weil
   die Reihe ohne Grund abbricht.
   Zwei feste Spalten kennen das Problem nicht: Was hineinpasst, entscheidet
   nicht mehr der laengste Text. `min-width:0` gehoert dazu — die selbsttaetige
   Mindestbreite eines Rasterkindes ist die seines Inhalts, und die haette
   genau denselben Umbruch zurueckgeholt. */
@media (max-width:480px){
  .zahlen{--spalt:1rem;display:grid;grid-template-columns:1fr 1fr;
    justify-items:center;align-items:start}
  .zahlen>div{min-width:0}
}

@media (max-width:640px){
  .raster--2,.raster--3,.raster--4,.postits{grid-template-columns:1fr}
  .hero{min-height:auto;padding-block:calc(var(--kopf-h) + 3rem) 2.5rem}
  .fuss__rechts{margin-left:0}
}

/* ---------- Teamkarten: die Menschen im Hochformat ----------------------
   Jeder Mensch trägt eine eigene Fläche. Bei einer Agentur sind die Leute das
   Produkt, und ein Kreis von 90 Pixeln zeigt keinen Menschen, sondern eine
   Marke.

   DAMIT IST DIE REGEL «Menschen sind rund, Flächen kantig» EINGESCHRÄNKT (so
   auch in CLAUDE.md): Rund bleiben die KLEINEN Köpfe (.avatare) und der
   Initialenkreis ohne Foto (.person__kreis). Wo ein Porträt gross genug ist, um
   ein Mensch zu sein, ist es eine Fläche — der Kreis war nie das Argument, die
   Grösse war es.

   EINE Fassung, kein Modifikator: Ein zweiter Kartentyp lädt sofort den dritten
   ein — dieselbe Regel wie bei den Knopfgrössen.

   Kein Rahmen, kein Schatten, keine Rundung, kein Verlauf: Die Flächen stehen
   nebeneinander und werden vom Grund zusammengehalten, nicht von Kanten.
   Limette bleibt der einzige Akzent — sie IST der Grund, also liegt in der Karte
   keine weitere.

   Die Schriftgrade sind die bestehenden Token: der Name auf --fs-h3 fett und
   eng, die Rolle auf --fs-sm, die Wege darunter. Der Sprung vom Namen zum Rest
   ist der ganze Aufbau.

   KONTRAST AUF LIMETTE, nachgerechnet: --ink (#0C3B38) auf #CBF546 steht bei
   9.8:1 — für Name und Wege reicht das mit Abstand. --muted auf Limette liegt
   dagegen bei 4.67:1 und nicht bei den 5.3:1, die weiter oben in dieser Datei
   stehen: über AA, aber nur um 0.17, und für die Rolle zu knapp. Sie steht darum
   nicht auf --muted, sondern auf 82 % --ink über dem Grund — 6.1:1, und immer
   noch deutlich leiser als der Name. Nachgedunkelt, nicht den Grund aufgehellt:
   Die Limette ist die Aussage des Abschnitts.

   Linksbündig, immer: Unter einem Kreis gibt es keine linke Kante, unter einer
   Fläche schon. */
.tk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,2.4vw,2rem);list-style:none;margin:0;padding:0}
.tk__karte{min-width:0;position:relative}

/* Das Bild füllt die Karte in voller Breite. `width`/`height` am <img> stehen
   für das Seitenverhältnis der Vorlage im Markup — hier gilt der Ausschnitt der
   Fläche, darum ausdrücklich 100/100. Ohne das schlägt der Masshinweis aus dem
   Markup durch.
   --pos ist die Gesichtsmitte aus inc/team.php: Ein 4:5- oder 3:4-Ausschnitt aus
   einem Quadrat schneidet nur seitlich, also entscheidet dieser eine Wert, ob
   jemand seine Wange behält. */
.tk__bild{display:block;position:relative;z-index:3;overflow:hidden;
  background:var(--grau);line-height:0;aspect-ratio:3/4}
.tk__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50%) 50%;
  transition:transform 760ms var(--ease)}
/* EINE Bewegung, nicht zwei: das Bild wächst leicht, sonst passiert nichts.
   :focus-within steht daneben, damit die Tastatur dasselbe sieht wie der
   Zeiger — die drei Wege in der Karte sind Sprungziele. */
.tk__karte:hover .tk__bild img,
.tk__karte:focus-within .tk__bild img{transform:scale(1.04)}

.tk__name{font-size:var(--fs-h3);font-weight:700;line-height:1.06;
  letter-spacing:-.032em;color:var(--ink)}
.tk__rolle{font-size:var(--fs-sm);font-weight:400;line-height:1.3;
  color:color-mix(in srgb, var(--ink) 82%, var(--grund));margin:.34rem 0 0}
/* Die Wege dürfen dem Namen nicht ins Gehege kommen: klein, in einer Zeile, der
   Trenner GEZEICHNET und nicht geschrieben — ein Mittelpunkt im `content` wird
   von manchen Vorlesern mitgesprochen, zwei Kanten sind still (dieselbe Regel
   wie in der Brotkrume).
   Unterlinie im Ruhezustand, weil auf limettem Grund kein Marker liegen darf —
   der wäre limette auf limette. */
/* ENG GENUG FUER DREI WEGE NEBENEINANDER. Gemessen ist die Kartenspalte je
   nach Fenster 223 bis 313 Punkte breit; Adresse, Direktwahl und LinkedIn
   brauchten mit den alten Abstaenden rund 285. Auf mittleren Fenstern fiel
   LinkedIn darum allein in die zweite Zeile.
   Der Platz kommt aus den Abstaenden und einem Hauch Schriftgroesse, nicht
   aus einer Kuerzung: Die Adresse ist die Adresse. */
.tk__wege{margin:.72rem 0 0;font-size:.78rem;line-height:1.55;
  display:flex;flex-wrap:wrap;gap:0}
/* Die Direktwahl traegt Leerzeichen und bricht sonst in sich selbst um —
   «055 511» in der einen Zeile, «10 01» in der naechsten. */
.tk__wege a{white-space:nowrap}
/* KEIN STRICH IM RUHEZUSTAND — den zeichnet der Begleiter beim Zeigen. Und
   zwar als ::after und nicht als `text-decoration`: Die hat keine abfragbare
   Geometrie, die Linie kann sie also nicht treffen und läge daneben — zwei
   Striche auf zwei Höhen.
   Es gilt dasselbe wie im Kopf und in der Brotkrume: Der Strich IST der
   Hover-Zustand, und den macht die Linie.
   Zwei Ausnahmen, beide keine Zier: OHNE Engine (Touch, reduzierte Bewegung)
   gibt es kein Zeigen — dort wären die Wege sonst nicht als Links zu erkennen,
   und auf limettem Grund ist die Unterlinie die einzige mögliche Auszeichnung.
   Und beim Tastaturfokus, weil die Linie dem Zeiger folgt und nicht dem Fokus. */
/* DIE DREI :not() SIND KEIN ZIERRAT, SIE SIND DAS GEWICHT. Die Regel «Links auf
   limettem Grund tragen eine Unterlinie» weiter unten trägt sie und kommt damit
   auf 0,4,1 — eine schlichte `.tk__wege a` (0,1,1) kommt dagegen nicht an, und
   der Strich bliebe trotz `none` stehen. Mit `[data-zone="limette"]` davor sind
   es 0,5,1, und das gewinnt unabhängig von der Reihenfolge im Blatt.
   WER DEN TEAMKARTEN ETWAS NEUES GIBT, PRÜFT ZUERST, OB EINE ZONENREGEL DIESELBE
   EIGENSCHAFT SCHON SETZT. */
.tk__wege a{color:var(--ink);text-decoration:none}
[data-zone="limette"] .tk__wege a:not(.btn):not(.tlink):not(.kanal){text-decoration:none}
html:not(.linie) [data-zone="limette"] .tk__wege a:not(.btn):not(.tlink):not(.kanal),
html:not(.linie) .tk__wege a{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.2em}
html:not(.linie) .tk__wege a:hover{text-decoration-thickness:2px}
[data-zone="limette"] .tk__wege a:not(.btn):not(.tlink):not(.kanal):focus-visible,
.tk__wege a:focus-visible{text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:.2em}
/* DER STRICH HAENGT AM WEG DAVOR.
   Vorher stand er links am jeweils naechsten Weg. Bricht die Zeile dann doch
   einmal um — auf dem schmalsten Fenster reicht der Platz auch eng nicht —,
   wandert der Strich mit und die zweite Zeile beginnt mit «| LinkedIn». Ein
   Trennzeichen, das eine Zeile anfuehrt, liest sich als abgeschnitten.
   Rechts am Weg davor bleibt er, wo er hingehoert: Die zweite Zeile beginnt
   mit dem Wort. */
.tk__wege a:not(:last-child){position:relative;margin-right:.5rem;padding-right:.5rem}
.tk__wege a:not(:last-child)::after{content:'';position:absolute;right:0;top:.26em;bottom:.26em;
  width:1px;background:var(--ink);opacity:.35}

/* DIE KERBE ist der Baustein: Der Text schiebt sich über die untere Bildkante
   und nimmt nur 80 % der Kartenbreite ein, damit die untere rechte Bildecke
   stehen bleibt. Ohne diese Verschmälerung sieht man die Kerbe NICHT — die
   Fläche trägt den Grundton, liegt also unsichtbar auf dem gleichfarbigen Grund,
   und das Ganze liest sich als bloss kürzeres Foto.
   Die Fläche darunter ist der ABSCHNITTSGRUND, kein Kasten und kein Verlauf —
   sie schneidet unten links eine Kerbe ins Bild. Schrift direkt auf dem Foto
   wäre bei sechs verschiedenen Hintergründen nicht zu verantworten.
   `z-index:4`, weil jedes img auf dieser Seite auf 3 liegt (siehe «Solide
   Flächen»); ohne den Wert stünde der Text im DOM richtig und wäre trotzdem
   unter dem Bild gemalt. */
.tk{--kerbe:clamp(3.1rem,6.2vw,4.7rem)}
.tk__text{position:relative;z-index:4;background:var(--grund);
  width:80%;margin-top:calc(var(--kerbe) * -1);padding:1.15rem 1.4rem 0 0}
@media (max-width:620px){.tk__text{width:88%}}

/* Der Versatz der mittleren Spalte gibt der Reihe einen Takt, ohne dass ein
   Mauerwerk daraus wird: EINE Spalte tiefer, immer dieselbe, und nur dort, wo
   drei Spalten stehen. Bei zwei oder einer Spalte fiele der Versatz auf die
   falschen Karten und die Reihenfolge wäre nicht mehr abzulesen. */
@media (min-width:1001px){
  .tk>li:nth-child(3n+2){margin-top:clamp(2rem,4vw,3.4rem)}
}
@media (max-width:1000px){.tk{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2rem)}}
/* Eine Spalte, volle Breite, das Bild bleibt die Hauptsache. Anders als bei
   .crew ist das hier richtig: dort machten zwei Spalten die Köpfe zu gross,
   hier IST die Grösse der Zweck. */
@media (max-width:620px){.tk{grid-template-columns:1fr;gap:2.8rem}}

@media (prefers-reduced-motion:reduce){
  .tk__bild img{transition:none}
  .tk__karte:hover .tk__bild img,
  .tk__karte:focus-within .tk__bild img{transform:none}
}

/* ---------- Person: wer da spricht ----------
   Kopfzeile einer Karte, in der jemand in der Ich-Form spricht: Kreis mit
   Initialen, Name, Rolle. Bei den Ausgangslagen Initialen und KEIN Foto — sie
   sind aus vielen Erstgesprächen verdichtet, nicht von einem Kunden
   abgeschrieben; ein Porträt würde ein Zitat behaupten, das so nie gefallen ist.
   Wo echte Köpfe hingehören, stehen sie als `.crew` (mit Namen) oder als
   `.avatare` (ohne) — nicht in dieser Zeile. */
.person{display:flex;align-items:center;gap:.85rem;margin-bottom:1.25rem}
.person__kreis{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;
  display:grid;place-items:center;background:var(--tief);color:var(--kalk);
  font-family:var(--f-util);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.person__wer{min-width:0;font-size:var(--fs-sm);line-height:1.2}
.person__wer b{display:block}
.person__wer span{display:block;color:var(--muted);font-size:.8rem;margin-top:.2rem}
/* Das Etikett am Namen. Es steht IN der Karte und nicht nur im Vorspann: Wer
   quer liest, sieht sonst ein Porträt-Zitat mit Namen und Alter und hält es für
   einen echten Kunden. Klein genug, um nicht zu stören, deutlich genug, um die
   Frage gar nicht erst aufkommen zu lassen. */
/* Der Selektor führt .person__wer mit: sonst gewinnt die Zeile darüber
   (.person__wer span{display:block}) und aus dem Etikett wird ein Balken. */
.person__wer .person__tag{display:inline-block;margin-left:.45rem;vertical-align:.1em;
  font-family:var(--f-util);font-size:.58rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--grau-tief);border-radius:100px;padding:.22em .6em}/* ---------- Avatare: das Team ohne Namen ---------------------------------
   Dieselben Köpfe wie in `.crew`, aber als überlappende Reihe und ohne einen
   einzigen Namen: Hier geht es nicht darum, wer wofür zuständig ist, sondern nur
   darum, dass am anderen Ende Menschen sitzen.
   ACHTUNG: steht zurzeit auf KEINER echten Seite, nur auf /design. Der Baustein
   bleibt im Vorrat — wer ihn wieder braucht, nimmt ihn von hier, statt eine
   zweite Sorte Köpfe zu bauen. Die Liste steht in inc/team.php und nicht zweimal
   im Markup.
   Der Ring ist --grund und nicht Weiss: Er schneidet den Kopf aus dem Abschnitt
   aus, in dem er gerade liegt, und funktioniert darum auf hellem wie auf tiefem
   Grund ohne zweite Fassung.
   Der z-index ist von Hand gestapelt, weil «Solide Flächen» weiter oben jedes
   img auf 3 hebt: Ohne eigene Ebene je Kopf entschiede die Dokumentfolge, und
   der gezeigte Kopf käme beim Zeigen nicht nach vorne.
   Die Bewegung ist keine Reihe, sondern ein Wasserglas: Jeder Kopf hat eine
   eigene Dauer, einen eigenen Anfang, eine eigene Weite und einen eigenen
   Ruhepunkt über oder unter der Linie, dazu leicht verschiedene Grössen. Alle
   gleich zu bewegen ergibt eine Welle — sauber getaktet und darum maschinell;
   so ist jeder für sich unterwegs und die Gruppe kommt nie wieder zur Deckung
   (die Dauern haben absichtlich kein gemeinsames Vielfaches). Die Wege bleiben
   winzig: Die Blasen sollen auffallen, wenn man hinsieht, und nicht, wenn man
   daneben liest.
   Bei `prefers-reduced-motion` steht alles still — der globale Riegel am
   Dateiende setzt die Dauer auf .001ms, was bei einer endlosen Schleife Zittern
   hiesse, darum hier ausdrücklich `animation:none`. *//* Sechs Sätze für sechs Köpfe; die zwei weiteren, falls das Team wächst. Die
   Werte sind gewürfelt und nicht gerechnet — sobald sie einem Muster folgen,
   sieht man das Muster. *//* Kein Hin und Her auf einer Achse: die Bahn ist eine kleine, schiefe Schlaufe,
   damit auch zwei Köpfe mit ähnlicher Dauer nicht gleich aussehen. */
@keyframes avatar-blubbern{
  0%  {transform:translate(0, var(--amp,.3rem))}
  27% {transform:translate(calc(var(--amp,.3rem) * .42), calc(var(--amp,.3rem) * -.5))}
  53% {transform:translate(calc(var(--amp,.3rem) * -.15), calc(var(--amp,.3rem) * -1))}
  78% {transform:translate(calc(var(--amp,.3rem) * -.45), calc(var(--amp,.3rem) * -.2))}
  100%{transform:translate(0, var(--amp,.3rem))}
}

/* ---------- Kanal: Zeichen, Name, Adresse ----------
   Der Weg auf einen eigenen Social-Kanal. Das Zeichen steht FREI — ohne Kachel,
   ohne Kreis: In einem Quadrat wäre es eine zweite Fläche neben Bild und Karte,
   und zwei davon nebeneinander lesen sich wie Knöpfe, die keine sind. Ohne
   Kasten ist die Strichzeichnung, was sie ist: ein Zeichen vor einem Namen, in
   derselben Tinte wie die Schrift.
   Ohne Fläche braucht der Hover ein anderes Mittel — es ist das der ganzen Seite
   auf hellem Grund: der limette Marker wächst unter dem Namen. Er liegt allein
   am <b>, nicht am Link: Über Zeichen und zwei Zeilen hinweg wäre er ein Balken
   statt eines Strichs. Darum bleibt der Marker der normalen Textlinks am <a>
   weiterhin abgeschaltet. */
.kanaele{display:flex;flex-wrap:wrap;gap:1.5rem 2.6rem;list-style:none;margin:clamp(2rem,3.4vw,3rem) 0 0;padding:0}
.kanal{display:flex;align-items:center;gap:.7rem;text-decoration:none;background-image:none}
.kanal__zeichen{flex:none;display:grid;place-items:center;color:var(--tief);
  transition:color 240ms var(--ease)}
.kanal svg{width:1.75rem;height:1.75rem;display:block}
.kanal b{display:inline-block;font-size:1.06rem;line-height:1.2;letter-spacing:-.01em;
  background-image:linear-gradient(var(--limette),var(--limette));
  background-repeat:no-repeat;background-position:0 82%;background-size:0 .5em;
  transition:background-size 620ms var(--ease),color 240ms var(--ease)}
.kanal:hover b,.kanal:focus-visible b{background-size:100% .5em}
/* AUF TIEFEM GRUND ANTWORTET DER KANAL MIT SCHRIFT, NICHT MIT FLÄCHE — genau
   die Regel, die für jeden Link auf dunklem Grund gilt: Limette liest sich dort
   mühelos, auf Papier ginge das nicht (kaum 1.4:1), darum wechselt sie dort die
   Rolle und wird zur Fläche unter dem Wort.
   DAS ZEICHEN GEHT MIT: Es ist als SVG nachgezeichnet und erbt die Textfarbe —
   der ganze Weg antwortet also mit einer Geste statt mit einer halben.
   `.fuss` steht mit in der Wahl, weil er kein `data-zone` trägt, aber derselbe
   tiefe Grund ist. */
.fuss .kanal:hover b,.fuss .kanal:focus-visible b,
[data-zone="tief"] .kanal:hover b,[data-zone="tief"] .kanal:focus-visible b{
  background-size:0 .5em;color:var(--limette)}
.fuss .kanal:hover .kanal__zeichen,.fuss .kanal:focus-visible .kanal__zeichen,
[data-zone="tief"] .kanal:hover .kanal__zeichen,
[data-zone="tief"] .kanal:focus-visible .kanal__zeichen{color:var(--limette)}
.kanal small{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}

/* ---------- Partnerschaften ---------------------------------------------
   Eine Fussnote, kein Abschnitt: Haarlinie darüber, kleiner Grad, und der Name
   trägt dieselbe wachsende Limettenmarke wie `.kanal b` — es ist derselbe Fall
   (ein Weg nach draussen, der beim Zeigen antwortet), also dieselbe Geste und
   keine zweite Erfindung.
   KEINE ABZEICHEN: Die drei kommen aus drei fremden Gestaltungssystemen, und
   Googles darf nicht umgefärbt werden — eine einfarbige Reihe ist damit
   unmöglich, und drei Kästen mit eigenen Farben und Sperrflächen machen die
   Zeile unruhig. Ausführlich in `inc/partner.php`. */
.partner{border-top:1px solid var(--hair);
  margin-top:clamp(2.6rem,5vw,4.5rem);padding-top:clamp(1.5rem,2.6vw,2.2rem)}
.partner .eyebrow{margin-bottom:clamp(1rem,1.8vw,1.4rem)}
.partner__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:1.6rem clamp(2.2rem,4.5vw,4.2rem)}
/* Angeglichen wird die optische MASSE, nicht die Höhe: Das fast quadratische
   Google-Abzeichen bringt seinen eigenen Rahmen mit und erschlüge auf gleicher
   Höhe die beiden Wortmarken daneben. `--f` steht je Zeichen in inc/partner.php.
   `line-height:0`, damit unter dem Bild keine Textzeile mitrechnet und die Reihe
   wirklich auf einer Mitte sitzt. */
.partner__weg{display:block;line-height:0}
.partner__weg img{display:block;width:auto;
  height:calc(clamp(1.9rem,2.6vw,2.3rem) * var(--f,1));
  transition:opacity 260ms var(--ease)}
/* Kein limetter Marker beim Zeigen: Limette heisst hier Interaktion, aber
   hinter einem fremden Abzeichen wäre sie eine Fläche unter fremder Marke.
   Ein leiser Rückzug der Deckkraft sagt dasselbe und fasst nichts an. */
.partner__weg:hover img,.partner__weg:focus-visible img{opacity:.68}
/* Der Link im Listenpunkt bekommt von der Grundregel einen Unterstrich — und
   der sitzt unter der KLEINEN Zeile, weil `text-decoration` am Anker die
   unterste Zeile trifft, nicht den Namen. Zurückgenommen wird er im selben
   Muster wie bei `.krume` und `.fuss`: ein auf den Baustein begrenzter Selektor
   mit derselben Gewichtung, statt `.partner__weg` in alle sechzehn Stellen der
   Ausnahmeliste `:not(.btn):not(.tlink):not(.kanal)` einzutragen. */
.partner :where(li) a:not(.btn):not(.tlink):not(.kanal){
  text-decoration:none;background-image:none}

/* ---------- Gerät: der eigene Kanal, wie er wirklich aussieht ----------
   Was im Gerät steht, ist ein echtes Bildschirmfoto aus @onflow_agentur
   (assets/bilder/social/) — NICHTS an dieser Oberfläche ist gezeichnet, keine
   Zahl daran erfunden. Ein nachgebauter Screenshot mit erfundenen Herzchen und
   Zahlen behauptete etwas, das es nicht gibt.
   Die Rundung ist die Ausnahme zu «Flächen kantig»: Das Gerät ist keine Fläche
   der Seite, sondern ein abgebildeter Gegenstand. Ein Foto eines Telefons hätte
   dieselben Ecken. Die Ausnahme endet am Rahmen.
   Die Masse folgen dem Gerät des Screenshots (1206 × 2622): Schirm im
   Seitenverhältnis des Bildes, Insel und Tasten in Prozent davon — so stimmen
   sie in jeder Grösse, ohne zweiten Satz Werte. */
.geraet{position:relative;width:100%;max-width:320px;margin:0 auto;
  background:var(--tief);padding:.55rem;border-radius:2.7rem;
  box-shadow:inset 0 0 0 1px rgba(246,244,238,.16),
             0 3px 4px rgba(11,21,18,.14),
             0 42px 64px -34px rgba(11,21,18,.52)}
.geraet__schirm{position:relative;display:block;overflow:hidden;
  border-radius:2.2rem;background:#fff;aspect-ratio:1206/2622}
.geraet__schirm>picture{position:absolute;inset:0;display:block}
.geraet__schirm img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center}
/* Die Insel fehlt im Bildschirmfoto — iOS legt sie über das Bild, nicht hinein.
   Ohne sie sähe der Rahmen aus wie ein Telefon von vorgestern. Sie sitzt IM
   Schirm, nicht im Rahmen: sonst hinge ihr Abstand an der Polsterung statt am
   Bild. Die Werte sind die des Geräts, in Prozent des Schirms: 125 × 36 pt
   Insel, 11 pt unter der Kante, auf 402 × 874 pt.
   `z-index:4` ist Pflicht: «Solide Flächen» hebt jedes img auf 3, und ohne
   eigenen Wert läge die Insel unter dem Bild — im DOM vorhanden und nirgends
   sichtbar. */
.geraet__insel{position:absolute;top:1.3%;left:50%;transform:translateX(-50%);
  width:31%;height:4.1%;z-index:4;background:var(--tief);border-radius:99px}
/* Tasten: zwei Nasen auf der Kante, keine Zeichnung daneben. Sie stehen
   nur 2px über den Rahmen hinaus — mehr wäre Modellbau. */
.geraet::before,.geraet::after{content:"";position:absolute;width:2px;
  background:var(--tief);border-radius:2px}
.geraet::before{left:-2px;top:23%;height:13%}
.geraet::after{right:-2px;top:27%;height:10%}

/* ---------- Kontaktband: die Daten auf limettem Grund --------------------
   Der Abschluss von /kontakt.
   DER HALT KOMMT VOM GRUND SELBST und nicht von einem Kasten darum: Eine Platte
   im Band hielte den Inhalt zwar, machte aber aus dem Abschluss der Seite ein
   Möbel. Limette hält ihn auch — und sagt zusätzlich, worum es geht: Der
   Abschnitt besteht nur aus Handlungen (anrufen, schreiben, hinfahren), und
   Limette ist die Farbe der Handlung. Was das kostet, steht bei
   `[data-zone="limette"]` weiter oben: kein <em>, kein gefüllter Knopf, und die
   Links tragen eine Unterlinie statt eines Markers.

   Zwei Spalten, und die Trennung ist inhaltlich: LINKS wen man erreicht — die
   Nummer und die Mailadresse. RECHTS wo wir sind — das Haus, der Ort, und
   darunter die Adresse mit dem Weg dorthin. Die Adresse steht UNTER den Bildern,
   weil man zuerst sieht, wohin man kommt, und dann liest, wie es heisst.

   Die linke Spalte hat nur zwei Zeilen und ist damit viel kürzer als die rechte.
   Sie steht darum MITTIG (`justify-content:center`) und nicht oben bündig: Eine
   kurze Spalte oben bündig neben einer langen sieht abgeschnitten aus, mittig
   sieht sie gesetzt aus. Die rechte behält `space-between` — sie bestimmt
   ohnehin die Höhe, aber falls sie einmal die kürzere ist, fällt die Adresse
   trotzdem an den Fuss.

   Keine einzige Linie im Abschnitt: Zwei Blöcke links vom Bild, zwei rechts, das
   reicht als Gliederung. Eine senkrechte zwischen den Spalten wäre ein halber
   Kasten.

   Die Nummer steht im Grad einer Schlagzeile, weil der Abschnitt keine hat: Ein
   Anruf ist hier die kürzeste Handlung, also führt er. `white-space:nowrap` ist
   PFLICHT — eine Telefonnummer, die nach «+41 555 111» umbricht, ist keine
   Nummer mehr, sondern zwei. Beschriftungen gibt es keine: Eine Nummer und eine
   Adresse erkennt man an ihrer Form.

   Die Bilder sind KEIN eigener Baustein — es ist die `.fotowand`, dieselbe wie
   neben dem Formular. Sie braucht `width:100%`: In einer Flex-Spalte mit
   `align-items:flex-start` schrumpft sonst jedes Kind auf seine Inhaltsbreite,
   und aus der Wand würden zwei Briefmarken.

   Der Baustein setzt selbst KEINE Farbe: Er gehört in einen Abschnitt mit
   `data-zone="limette"` und nimmt Schrift und Linkfassung von dort. */
/* ---------- Die Naht: Formular und Kontaktband ohne klare Kante -----------
   Die beiden Abschnitte am Fuss von /kontakt sind EINE Sache und sollen auch so
   aussehen: Die Fotowand des Formularabschnitts hängt über die Kante ins limette
   Band hinein und näht die beiden zusammen. Die Kante ist noch da — sie läuft
   nur nicht mehr durch.
   --ragen ist der Überhang. Er steht auf `:root`, weil ihn ZWEI Abschnitte
   brauchen: Der obere zieht die Wand um --naht-pad + --ragen nach unten, der
   untere hält oben genau so viel Platz frei. Geändert wird er damit an einer
   Stelle für beide.
   Unter 900px ist er KLEIN, nicht 0. Dort bricht `.split` auf eine Spalte um
   und die Wand liegt unter dem Formular, direkt über der Telefonnummer — der
   grosse Überhang fiele ihr auf die Zeile. Ganz ohne Überhang endete die Wand
   aber sauber auf der Kante, und die Naht, um die es hier geht, gäbe es
   einspaltig als einzige Stelle nicht.
   Ein Fingerbreit genügt: Es ragt ohnehin nur die rechte Spalte hinein, weil
   sie um 44% versetzt beginnt und damit die tiefere von beiden ist. Und auf
   die Zeile fällt nichts, weil `.kontaktband` seinen oberen Freiraum aus
   demselben Wert rechnet — wächst der Überhang, rückt die Nummer mit.
   `align-self:end` ist der Hebel: Ein negativer `margin-bottom` verschiebt ein
   Element nicht, er sagt dem Raster nur, es sei kürzer. Erst zusammen mit der
   Ausrichtung an der Unterkante wandert die Wand wirklich hinunter. */
:root{--ragen:clamp(1.25rem,4vw,2rem)}
@media (min-width:901px){:root{--ragen:clamp(3.5rem,7vw,7rem)}}
.naht{--naht-pad:clamp(2rem,4vw,3.5rem);padding-bottom:var(--naht-pad)}
.naht .fotowand{align-self:end;position:relative;z-index:3;
  margin-bottom:calc(-1 * (var(--naht-pad) + var(--ragen)))}
/* Oben so viel Luft, wie die Wand hereinragt, plus ein Abstand — sonst
   stünde die Adresse im Bild. Unten nur das Nötige: das Band soll niedrig
   sein, es trägt nur noch die Kontaktdaten. */
.kontaktband{padding-top:calc(var(--ragen) + clamp(1.6rem,3.4vw,2.8rem));
  padding-bottom:clamp(2.75rem,5vw,4.5rem)}

.kontakt{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:stretch}
.kontakt__wer,.kontakt__wo{display:flex;flex-direction:column;align-items:flex-start}
.kontakt__wer{justify-content:center}
/* Die beiden Spalten schliessen unten miteinander ab: Die Mailzeile endet auf
   derselben Linie wie «Zu uns navigieren». Die linke Spalte ist die höhere und
   setzte damit selbst den Boden der Zeile — sie konnte sich an nichts
   ausrichten, sie WAR die Ausrichtung.
   `height:0` nimmt sie aus der Höhenrechnung: Die Zeile ist jetzt so hoch wie
   die Adressspalte, die linke hängt mit `align-self:end` an deren Unterkante und
   wächst von dort nach oben. Platz dafür ist da — das Band hält oben ohnehin den
   Überhang der Fotowand frei.
   Nur ab 901px, denn erst dort steht die Wand daneben statt darüber. */
@media (min-width:901px){
  .kontakt{align-items:end}
  .kontakt__wer{height:0;justify-content:flex-end}
}
.kontakt__wo{justify-content:space-between;gap:clamp(2rem,4vw,3.2rem)}
.kontakt__nr{margin:0;font-size:clamp(2.4rem,6.2vw,5.4rem);font-weight:800;
  letter-spacing:-.05em;line-height:.95;white-space:nowrap}
.kontakt__mail{margin:1rem 0 0;font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:600;
  letter-spacing:-.03em}
/* Der Link erbt den Grad seiner Zeile, statt ihn je Stelle hinzuschreiben. */
.kontakt__nr .tlink,.kontakt__mail .tlink,.kontakt__ort .tlink{font-size:inherit}
/* Die Unterlinie auf limettem Grund ist auf 1px festgelegt (siehe «Links auf
   limettem Grund»). Unter einer 83px-Zahl ist das ein Haar, das man für einen
   Rest hält — hier wächst sie mit der Schrift statt mit dem Bildschirm. */
.kontakt__nr .tlink{text-decoration-thickness:.035em;text-underline-offset:.14em}
.kontakt__mail .tlink{text-decoration-thickness:.06em}
.kontakt__ort{margin:0;font-size:var(--fs-lead);line-height:1.5}
.kontakt__ort .tlink{margin-top:.9rem}
.kontakt__wo .fotowand{width:100%}
/* Gestapelt: erst wie man uns erreicht, dann wo wir sind. Die Nummer bleibt
   auch hier einzeilig — der clamp fällt weit genug. */
@media (max-width:760px){
  .kontakt{grid-template-columns:1fr;gap:clamp(2.4rem,8vw,3.4rem)}
}

/* ---------- Textlink mit stehendem Marker ----------
   Normal wächst der limette Marker erst beim Zeigen (siehe «Hover eines
   Textlinks»). `.tlink--marker` zeigt ihn schon im Ruhezustand: für Links, die
   auf einer farbigen Fläche liegen und dort nicht als Schrift untergehen dürfen.
   Der Hover bleibt trotzdem eine Änderung — der Strich wird höher.
   NUR auf hellem Grund; auf tief und auf limette trägt die Schrift das Signal
   selbst. */
.tlink--marker{background-size:calc(100% - var(--pfeilraum,0px)) .5em}
.tlink--marker:hover,.tlink--marker:focus-visible{
  background-size:calc(100% - var(--pfeilraum,0px)) .78em}

/* ---------- Links auf limettem Grund ----------
   Der Marker kann hier nicht limette sein, er wäre unsichtbar, und tief als
   Fläche würde die Schrift verschlucken. Also eine feine Unterlinie, die beim
   Zeigen deckend wird — dieselbe Rolle, anderes Mittel. */
[data-zone="limette"] .tlink,
[data-zone="limette"] :where(p,li,dd,figcaption) a:not(.btn):not(.tlink):not(.kanal){--marker:transparent;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:rgba(12,59,56,.38);transition:text-decoration-color 220ms var(--ease)}
[data-zone="limette"] a:hover,[data-zone="limette"] a:focus-visible{text-decoration-color:var(--tief)}
/* DER FREISTEHENDE TEXTLINK BRAUCHT AUF LIMETTE KEINE UNTERLINIE.
   Die Regel darüber gilt weiter für Links IM SATZ — die stehen mitten im
   Fliesstext und hätten sonst nichts, was sie vom Text daneben unterscheidet.
   Ein `.tlink` steht dagegen frei, in eigener Zeile, und trägt einen PFEIL. Der
   sagt schon alles; eine Unterlinie darunter erzählt dasselbe ein zweites Mal,
   und auf einem Grund, der ohnehin laut ist, wird aus zwei Signalen Unruhe.
   Beim Zeigen übernimmt der Begleiter: Er legt sich als Pille um den Link, weil
   der keine eigene Kontur hat, und zeichnet auf limettem Grund tief.
   AUCH OHNE ENGINE NICHT. Hier stand einmal ein Rückfall: ohne Linie — Touch,
   reduzierte Bewegung — kommt die Unterlinie zurück, damit der Link etwas
   Ruhendes hat. Die Überlegung war falsch, und zwar zweifach. Erstens hat er
   etwas Ruhendes: den Pfeil, eigene Zeile, eigenes Gewicht. Zweitens traf der
   Rückfall genau die Geräte, auf denen es gar kein Zeigen gibt — auf dem
   Telefon war die Unterlinie also nicht die Ausnahme, sondern der Normalfall,
   und der freistehende Link sah dort dauerhaft anders aus als am Schirm.
   Der Link im Satz behält seine Unterlinie (Regel darüber): Der hat wirklich
   nichts anderes. */
[data-zone="limette"] .tlink{text-decoration:none}
[data-zone="limette"] .tlink:focus-visible{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;
    transition-duration:120ms !important;transition-delay:0ms !important}
  [data-reveal]{opacity:1 !important;animation:none !important;transform:none !important}
  .zeile>span{transform:none !important}
  #linie{display:none}
  #geist{display:none}
  #buehne .wort{transition:none}
  body,body a,body button{cursor:auto}
}