/* ═══════════════════════════════════════════════════════════════════════
   wirtschaftsrecht-meisenheim.de — Rechtsanwalt Tobias Süsser
   Helles Editorial mit dunklen Kontrastflächen.
   Begründung und Farbwerte: .claude/skills/law-firm-web-design/
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften, lokal ─────────────────────────────────────────────────── */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('/assets/fonts/newsreader.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 700;
  font-display:swap;src:url('/assets/fonts/newsreader-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('/assets/fonts/archivo.woff2') format('woff2')}

/* ── Token ────────────────────────────────────────────────────────────── */
:root{
  /* Flächen und Tinte */
  --paper:#f3f1ed;
  --paper-2:#e9e6e0;
  --ink:#14161b;
  --ink-2:#4a4f58;
  --ink-3:#5c616a;

  /* Marke */
  --navy:#002060;
  --link:#1e4b8f;
  --bronze:#9a7b4f;        /* nur Linien und Marken, nie Text */
  --bronze-ink:#6f5733;
  --on-navy:#f3f1ed;
  --on-navy-2:#c3cbdd;
  /* Bühne: Nachtblau als Grund unter dem behandelten Foto, Champagner
     als einzige warme Linie. Gemessen auf dem Foto: Papier 5,61:1,
     Champagner nur 2,80:1 — er trägt dort niemals Schrift. */
  --nacht:#0c1220;
  --champ:#c5a880;

  /* Raum */
  --breit:1180px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --gut:clamp(2rem,4.5vw,4.5rem);
  --sec:clamp(3.5rem,6.5vw,6rem);
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem;

  /* Schrift */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --grotesk:'Archivo',system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;
  --t-display:clamp(2.5rem,1.55rem + 3.8vw,4.75rem);    /*  40 → 76 */
  --t-titel:clamp(1.75rem,1.35rem + 1.6vw,2.5rem);      /*  28 → 40 */
  --t-unter:clamp(1.3125rem,1.19rem + .5vw,1.625rem);   /*  21 → 26 */
  --t-fuehrung:clamp(1.1875rem,1.11rem + .3vw,1.375rem);/*  19 → 22 */
  --t-text:1.0625rem;   /* 17 */
  --t-klein:.9375rem;   /* 15 */
  --t-marke:.75rem;     /* 12 */

  /* Bewegung */
  --ease:cubic-bezier(.22,1,.36,1);
  --schnell:160ms;
  --ruhig:280ms;
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-text);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
p{margin:0 0 var(--s2);text-wrap:pretty}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance}
ul{margin:0;padding:0}

a{color:var(--link);text-decoration:none;overflow-wrap:break-word}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--link);outline-offset:3px;border-radius:2px}
/* Auf dunklem Grund wäre der Ring in --link (#1e4b8f) auf #002060 nur
   1,87:1 — praktisch unsichtbar. Dort in Papierfarbe, 13,53:1. */
.feld a:focus-visible{outline-color:var(--on-navy)}

.sprung{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--on-navy);font-family:var(--grotesk);
  font-size:var(--t-klein);padding:.75rem 1.25rem}
.sprung:focus{left:0}

/* Die linke Kante des Satzspiegels — auch für Elemente, die aus dem
   Container ausbrechen. So fluchtet alles auf einer Achse. */
.spalte{max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad)}
.flucht{padding-left:max(var(--pad),calc((100vw - var(--breit))/2 + var(--pad)))}

/* ── Schriftrollen ────────────────────────────────────────────────────── */
.marke{
  font-family:var(--grotesk);font-size:var(--t-marke);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin:0 0 var(--s3);line-height:1.45}

.display{
  font-size:var(--t-display);line-height:1.02;letter-spacing:-.026em;
  font-variation-settings:'opsz' 72;margin:0 0 var(--s3)}
.titel{
  font-size:var(--t-titel);line-height:1.14;letter-spacing:-.018em;
  font-variation-settings:'opsz' 40;margin:0 0 var(--s3)}
.fuehrung{
  font-size:var(--t-fuehrung);line-height:1.5;color:var(--ink-2);margin:0;
  max-width:46ch}   /* gestapelt fehlt die Bildspalte als Begrenzung */
.lauf{max-width:58ch;color:var(--ink-2)}

/* Zahlen und Rufnummern laufen in der Grotesk mit Tabellenziffern. */
.ziffern{font-family:var(--grotesk);font-variant-numeric:tabular-nums}

/* ── Kopfzeile ──────────────────────────────────────────────────────────
   Jede der fuenf Seiten mit Kopfzeile traegt `kopf kopf--buehne`, seit
   alle sechs Seiten dunkel oeffnen. Der fruehere Papiergrund mit
   schwarzer Unterkante war damit unerreichbar und ist am 23.09.2026
   entfallen. Mit der Umstellung aller durchlaufenden Trennlinien auf
   den Haarstrich sind am selben Tag auch die beiden Linientoken
   --rule und --rule-firm ohne Verwendung geblieben und aus dem
   Stylesheet genommen. Beide stehen weiter in der Farbkarte. */
.kopf{background:none}
.kopf__bar{
  max-width:var(--breit);margin-inline:auto;padding:var(--s3) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.kopf__logo{display:inline-flex;align-items:center;min-height:2.75rem}
.kopf__logo img{height:2rem;width:auto}
.kopf__nav{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.25rem)}
.kopf__nav a{
  font-family:var(--grotesk);font-size:var(--t-klein);font-weight:500;
  letter-spacing:.01em;color:var(--ink-2);
  display:inline-flex;align-items:center;min-height:2.75rem;  /* 44px Antippfläche */
  border-bottom:1px solid transparent;
  transition:color var(--schnell) var(--ease),
             border-color var(--schnell) var(--ease)}
.kopf__nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--bronze)}
@media (hover:hover){.kopf__nav a:hover{color:var(--ink);border-bottom-color:var(--bronze)}}

/* ── Menüleiste am unteren Rand (Telefon) ──────────────────────────────
   Oben ist die Navigation auf einem Telefon die am schlechtesten
   erreichbare Stelle: eine Hand, Daumen am unteren Drittel. Die Leiste
   wandert deshalb an den unteren Rand — dieselbe Navigation, dasselbe
   Element im Quelltext, nur anders gesetzt. Kein zweites Menü, keine
   doppelten Sprungmarken.

   Zur Notch: Die Seite setzt bewusst KEIN viewport-fit=cover. Damit rückt
   der Browser den Inhalt von selbst unter Dynamic Island und Kameraloch
   und über den Home-Indikator; env(safe-area-inset-*) liefert dann 0. Die
   env()-Angaben stehen trotzdem hier — sie kosten nichts und greifen
   sofort, falls die Seite später randlos gehen soll. Zusätzlich steht die
   Wortmarke links statt mittig: dort, wo der Ausschnitt sitzt, steht so
   oder so nichts. */
@media (max-width:640px){
  .kopf__bar{
    flex-direction:column;align-items:flex-start;gap:var(--s2);
    padding:var(--s2) var(--pad);
    padding-top:calc(var(--s2) + env(safe-area-inset-top));
    padding-left:max(var(--pad),env(safe-area-inset-left));
    padding-right:max(var(--pad),env(safe-area-inset-right))}
  .kopf__logo img{height:1.75rem}

  /* Die Navigation bleibt oben und ohne Fläche. Eine feste Leiste am unteren
     Rand wäre mit einer Hand besser erreichbar, sah aber nach Baukasten aus
     — auf Weisung des Auftraggebers zurückgenommen. */
  .kopf__nav{width:100%;justify-content:space-between;gap:var(--s1)}
  .kopf__nav a{min-height:2.75rem}
}

/* ── Bühne: dunkler Auftakt der Startseite ─────────────────────────────
   Der warme Ton erreicht auf Papier nur 2,00:1 und kann dort nichts tragen.
   Glanz braucht einen dunklen Grund — deshalb öffnet die Startseite dunkel
   und wird darunter hell. Das Foto ist behandelt, nicht überdeckt: kein
   Schleier, sondern Tonwertkurve, Duotone und ein Abwedeln der Schriftseite
   (project/werkzeug/bildbehandlung.py). Auf dem Foto trägt nur Papierweiß
   Schrift; der Champagnerton bleibt Linie. */
.buehne{
  position:relative;isolation:isolate;background:var(--nacht);
  min-height:clamp(31rem,88svh,54rem);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden}
/* Die gefasste Naht: der Strich hellt zur Mitte hin auf und liest sich als
   Lichtkante statt als gemalter Streifen. Gemessen von #c5a880 an den
   Raendern auf #fbf3cf in der Mitte - 21 Helligkeitspunkte.
   Freigegeben am 22.09.2026 als benannte Ausnahme von der Regel "ein
   Verlauf steht nur in der Marke". Die Regel zielt auf Flaechen: auf einem
   Strich von 1 px kann keine Flaeche entstehen. Sie gilt nur fuer die
   beiden Hell-Dunkel-Grenzen der Seite, nirgends sonst. */
.buehne::after,.feld--abschluss::before{
  content:"";position:absolute;inset:auto 0 0;height:1px;z-index:1;
  background:linear-gradient(90deg,
    var(--champ) 0%, #c9a227 34%, #fbf3cf 50%, #c9a227 66%, var(--champ) 100%)}
.feld--abschluss::before{inset:0 0 auto;z-index:2}
.buehne__bild{position:absolute;inset:0;z-index:-1;margin:0}
.buehne__bild img{width:100%;height:100%;object-fit:cover;object-position:46% 54%}
.buehne__wort{
  padding-block:calc(var(--sec) * .85);
  padding-right:var(--pad);max-width:64rem}
/* Ein Block fuer beide Traeger auf dunklem Grund. Bis zum 23.09.2026
   standen .buehne__strich und .feld__strich als zwei byteweise gleiche
   Bloecke im Stylesheet. */
.buehne__strich,.feld__strich{
  display:block;width:3.25rem;height:1px;background:var(--champ);
  margin-bottom:var(--s3)}
.buehne .marke{color:var(--on-navy)}
/* Auch im dunklen Feld. Dort stand bis zum 22.09.2026 keine
   Auszeichnungszeile, seit die Fehlerseite ein einziger Block ist schon -
   und sie trug die Tinte des hellen Grundes, gemessen 2,45:1. */
.feld .marke{color:var(--on-navy)}
/* .titel gehoert dazu, seit die drei Textseiten eine Buehne tragen. Ihre
   Ueberschriften sind `titel`, nicht `display` - und standen dadurch in
   Tinte auf dunklem Grund, also fast unsichtbar. */
.buehne .display,.buehne .titel,.buehne .fuehrung{color:var(--on-navy)}
.buehne .display{margin-bottom:var(--s3)}
/* Der Führungssatz darf auf der Bühne breiter laufen als im hellen Satz:
   46ch ließen ihn in der weiten Fläche als schmale Säule stehen. */
.buehne .fuehrung{max-width:58ch}
@media (max-width:900px){
  .buehne{min-height:clamp(30rem,84svh,44rem)}
  .buehne__wort{padding-inline:var(--pad);padding-block:calc(var(--sec) * .7)}
}

/* Kurzes Fenster: der Auftakt wird enger gesetzt, statt über den Bildschirm
   hinauszuwachsen. Gemessen bei 320 × 480 — dort war der Inhalt der Bühne
   493 px hoch. Kein Mindesthöhenproblem, ein Inhaltsproblem.

   Die Bedingung lautete bis zum 22.09.2026 `max-width:640px and
   max-height:640px` und traf damit genau den Fall nicht, für den sie
   gedacht war: **Ein quer gehaltenes Telefon ist breit und kurz.**
   Gemessen bei 844 × 320 blieb die Bühne bei 480 px stehen — dem
   Fußpunkt ihrer `clamp()` —, während der Inhalt 441 px brauchte und das
   Fenster nur 320 px bot. Die Höhe allein ist das Merkmal, nicht die
   Breite. */
@media (max-height:560px){
  /* Der Fußpunkt der Mindesthöhe fällt weg. In einem 320 px hohen Fenster
     sind 30 rem Mindesthöhe kein Schutz, sondern zusätzliche Leere. */
  .buehne,.buehne--raum,.buehne--seite{min-height:auto}
  .buehne__wort{padding-block:var(--s3)}
  .buehne__strich{margin-bottom:var(--s2)}
  .buehne .marke{margin-bottom:var(--s2)}
  .buehne .display,.buehne .titel{
    font-size:clamp(1.75rem,1.1rem + 3.2vw,2.5rem);
    margin-bottom:var(--s2)}
  .buehne .fuehrung{font-size:var(--t-text);line-height:1.42}
}

/* Kopfzeile über der Bühne: keine Fläche, keine Trennlinie, Negativmarke. */
.kopf--buehne{
  position:absolute;inset:0 0 auto;z-index:2;
  background:none;border-bottom:0}
.kopf--buehne .kopf__nav a{color:var(--on-navy)}
.kopf--buehne .kopf__nav a[aria-current="page"]{
  color:var(--on-navy);border-bottom-color:var(--champ)}
.kopf--buehne a:focus-visible{outline-color:var(--on-navy)}
@media (hover:hover){
  .kopf--buehne .kopf__nav a:hover{
    color:var(--on-navy);border-bottom-color:var(--champ)}
}

/* ── Auftakt ───────────────────────────────────────────────────────────
   Der Auftakt — Worte auf der Achse, Bild am Rand — ist am 22.09.2026
   entfallen. Er war die Eröffnung der Kontaktseite, der letzten Seite, die
   ihn noch trug. Sie öffnet jetzt wie Startseite und Kanzlei mit einer
   randlosen Bühne, gespiegelt: Schrift rechts, Himmel links. */

/* ── Rechtsgebiete: gleichwertig, nur durch Haarlinien getrennt ─────────
   Die drei dürfen nicht unterschiedlich gewichtet werden. Damit sie
   trotzdem nicht als drei gleiche Sektionen lesen, ist ihr Innenabstand
   enger als der der übrigen Abschnitte: die Gruppe wird dichter und steht
   als ein Register zwischen dem offenen Auftakt und den offenen Zeilen.
   Der Kontrast entsteht aus Dichte, nicht aus Hierarchie. */
.gebiete{padding-block:calc(var(--sec) * .35)}
.gebiet{padding-block:calc(var(--sec) * .62)}
/* Bis zum 23.09.2026 trennte hier eine durchlaufende graue Linie. Die
   drei Gebiete sind benannte Abschnitte mit eigener Ueberschrift und
   tragen deshalb denselben Haarstrich wie jeder andere Abschnitt. */
.gebiet__reihe{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:var(--gut);align-items:stretch;
  max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad)}
/* Gleichwertig heißt nicht gleichförmig. Der mittlere Block ist gespiegelt:
   gleiche Fläche, gleiche Größen, gleiches Gewicht — aber die Achse springt
   einmal, damit die drei nicht als dieselbe Sektion dreimal lesen. In der
   Quelltextfolge bleibt Titel vor Stimmen. */
.gebiet--gespiegelt .gebiet__reihe{
  grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr)}
.gebiet--gespiegelt .gebiet__reihe > :first-child{order:2}
.gebiet--gespiegelt .stimmen{order:1;text-align:right}
.gebiet--gespiegelt .stimmen li{text-indent:0;margin-inline:0}
.gebiet--gespiegelt .stimmen li:nth-child(2){margin-right:clamp(0px,4vw,3.5rem)}
.gebiet--gespiegelt .stimmen li:nth-child(3){margin-right:clamp(0px,2vw,1.75rem)}
@media (max-width:900px){
  .gebiet__reihe,.gebiet--gespiegelt .gebiet__reihe{
    grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .gebiet--gespiegelt .gebiet__reihe > :first-child{order:1}
  .gebiet--gespiegelt .stimmen{order:2;text-align:left}
  .gebiet--gespiegelt .stimmen li{text-indent:-.42em}
  .gebiet--gespiegelt .stimmen li:nth-child(2){
    margin-right:0;margin-left:clamp(0px,4vw,3.5rem)}
  .gebiet--gespiegelt .stimmen li:nth-child(3){
    margin-right:0;margin-left:clamp(0px,2vw,1.75rem)}
}

/* ── Mandantenstimmen ─────────────────────────────────────────────────── */
.stimmen{
  list-style:none;display:flex;flex-direction:column;gap:var(--s2);
  height:100%;justify-content:space-between}
.stimmen li{
  font-style:italic;font-weight:600;font-size:var(--t-unter);line-height:1.34;
  color:var(--link);font-variation-settings:'opsz' 26;
  text-indent:-.42em}                      /* hängende Anführung */
.stimmen li:nth-child(2){margin-left:clamp(0px,4vw,3.5rem)}
.stimmen li:nth-child(3){margin-left:clamp(0px,2vw,1.75rem)}
@media (max-width:900px){
  .stimmen{height:auto;justify-content:flex-start;gap:var(--s3)}
}

/* Die Stimmen treffen nacheinander ein, während die Sektion ins Bild
   läuft. Reines CSS über die Scroll-Zeitachse. Ohne Unterstützung und bei
   prefers-reduced-motion stehen sie einfach da. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .stimmen li{animation:stimme linear both;animation-timeline:view()}
    .stimmen li:nth-child(1){animation-range:entry 2% entry 60%}
    .stimmen li:nth-child(2){animation-range:entry 10% entry 72%}
    .stimmen li:nth-child(3){animation-range:entry 18% entry 84%}
    .stufe,.fazit{animation:stimme linear both;animation-timeline:view()}
    .stufe:nth-child(1){animation-range:entry 4% entry 62%}
    .stufe:nth-child(2){animation-range:entry 14% entry 76%}
    .fazit{animation-range:entry 22% entry 88%}
    @keyframes stimme{
      from{opacity:0;transform:translateY(.75rem)}
      to{opacity:1;transform:none}}
  }
}

/* ── Zeilen an Haarlinien: die Merkmale auf der Startseite ───────────── */
.zeilen{background:var(--paper-2);padding-block:var(--sec)}
.zeile{
  max-width:var(--breit);margin-inline:auto;padding:var(--s4) var(--pad);
  display:grid;grid-template-columns:minmax(0,18.75rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline}
.zeile__begriff{
  font-size:var(--t-unter);line-height:1.22;letter-spacing:-.014em;
  font-variation-settings:'opsz' 26;margin:0}
.zeile p{margin:0;color:var(--ink-2);max-width:58ch}
@media (max-width:700px){
  .zeile{grid-template-columns:minmax(0,1fr);gap:var(--s1);padding-block:var(--s3)}
}

/* ── Bühne der Kanzleiseite ────────────────────────────────────────────
   Randlos wie die Startseite, Schrift im Bild. Zwei Umwege lagen davor:
   eine geteilte Bühne, bei der das Foto nur 33 Prozent der Fläche trug -
   das war das Düstere -, und eine Fassung mit dem Foto oben und der
   Schrift darunter, die optisch eine eigene Kopfleiste erzeugte.

   Was beide Male fehlte, war die richtige Messgröße. Nicht der Mittelwert
   entscheidet, sondern das Verhältnis: Die Bühne der Startseite hat einen
   Median von 0,0227 und einen hellsten Punkt von 0,1029 - sie ist gar
   nicht hell, sie ist kontrastreich. Die Stufen wirken hell, weil alles
   um sie herum dunkel ist.

   Das Kanzleifoto ist auf dasselbe Verhältnis gebracht: Gamma 2,2 statt
   1,70 senkt die Gebäudemasse, Deckel 0,52 statt 0,68 hält den hellsten
   Himmelspunkt bei 0,1104. Gemessen Median 0,0211 gegen 0,0227 der
   Startseite. Papierweiß erreicht selbst auf dem hellsten Punkt 5,76:1 -
   Schrift darf damit überall stehen.

   Einheitlich, nicht einförmig: dieselbe Anlage, ein anderes Motiv, ein
   anderer Beschnitt. */
.buehne--kanzlei .buehne__bild img{object-position:50% 12%}

/* ── Der Raum: eine Buehne mitten auf der Seite ───────────────────────
   Die Kanzleiseite fuehrt von aussen nach innen: das Gebaeude als
   Auftakt, dann der Raum, dann die Person. Deshalb steht hier eine
   zweite Buehne und keine helle Flaeche.

   Sie ist flacher als eine Seitenbuehne - 62 statt 88 svh -, weil sie
   kein Auftakt ist, sondern eine Station. Volle Hoehe mitten auf der
   Seite liest sich als zweiter Seitenanfang.

   Warum hier kein Portraet steht, obwohl es naheliegt: gemessen erreicht
   das Sakko #303878 auf dem behandelten Raumbild 1,0 bis 2,7:1, auf dem
   unbehandelten 1,0 bis 2,7:1 - der Raum ist tonal derselbe Bereich wie
   ein dunkelblauer Anzug. Auf Markenblau waren es 1,43:1, weshalb der
   Freisteller auf Papier steht. Der Raum aendert daran nichts. Das
   Portraet bleibt deshalb im hellen Abschnitt darunter, wo es 8,59:1
   erreicht. */
.buehne--raum{min-height:clamp(26rem,62svh,38rem)}
/* Zwei Naehte, weil die Raumbuehne zwei Grenzen hat: Sie steht mitten auf
   der Seite und stoesst oben wie unten an eine helle Flaeche. Die anderen
   Buehnen stehen am Seitenanfang, dort waere eine obere Naht eine
   Goldlinie bei y 0. */
.buehne--raum::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;z-index:2;
  background:linear-gradient(90deg,
    var(--champ) 0%, #c9a227 34%, #fbf3cf 50%, #c9a227 66%, var(--champ) 100%)}
.buehne--raum .buehne__bild img{object-position:50% 50%}
/* Die Lampen sind die hellsten Punkte des Motivs und liegen bei x 40 bis
   80 Prozent. Freigehalten wird die Schriftseite nicht ueber die Breite
   des Textblocks, sondern im Bild selbst: Das Abwedeln reicht hier bis
   78 Prozent der Breite statt der ueblichen 58 und setzt tiefer an.

   Eine Breitenangabe am Textblock waere hier falsch gewesen und war es
   zunaechst auch: `.buehne__wort` traegt die Einrueckung der Flucht als
   padding-left, und bei `box-sizing:border-box` zieht eine max-width die
   Einrueckung ab. Bei 1920 px blieben so 33 Zeichen je Zeile statt der
   geforderten 45 bis 75. Die Zeilenlaenge gehoert an den Absatz. */
.buehne--raum .fuehrung{max-width:54ch}
@media (max-width:900px){
  .buehne--raum{min-height:clamp(22rem,58svh,32rem)}
  /* Gemessen bei 390 px: sichtbar ist ein Ausschnitt von 39 Prozent der
     Bildbreite. Zentriert zeigt er die Kaffeemaschine, also die
     unauffaelligste Stelle. Bei 30 Prozent stehen Pflanze, Stehlampe und
     die Fischgrat-Front des Sideboards im Bild - das, was den Raum
     ausmacht. */
  .buehne--raum .buehne__bild img{object-position:30% 50%}
}

/* ── Bühne der Kontaktseite ────────────────────────────────────────────
   Dieselbe Anlage, gespiegelt. Das Fassadenmotiv hat seinen hellen Himmel
   links und die Gebäudemasse rechts — genau umgekehrt zur Kanzleiseite.
   Die Schrift wechselt deshalb auf die rechte Seite, das Abwedeln mit ihr.
   So bleibt der Himmel als heller Akzent offen, statt unter der Schrift
   abgedunkelt zu werden.

   Gemessen am unbehandelten Motiv: links Median 0,8986, rechts 0,5725 —
   die dunkle Masse liegt rechts. Einheitlich, nicht einförmig: dritte
   Bühne, dritter Beschnitt, erste Spiegelung. */
.buehne--kontakt .buehne__wort{
  margin-left:auto;
  padding-inline-start:var(--gut);
  padding-inline-end:max(var(--pad),calc((100vw - var(--breit))/2 + var(--pad)));
  /* Gemessen: die Überschrift braucht 789 px, um zweizeilig zu brechen.
     Mit 64,8 px Innenabstand links und 170 px rechts ergibt das eine
     Spalte von 1024 px. Enger gesetzt bricht sie dreizeilig. */
  max-width:min(64rem,84%)}
/* Die Überschrift bekommt keine eigene Breitenbegrenzung: gemessen bricht
   sie in der Spalte von selbst zweizeilig wie auf den anderen Bühnen. Eine
   Angabe in ch rechnet bei 76 px Schriftgröße zu eng und erzwang drei. */
.buehne--kontakt .fuehrung{max-width:44ch}
@media (max-width:820px){
  .buehne--kontakt .buehne__wort{
    margin-left:0;max-width:none;
    padding-inline:var(--pad)}
  .buehne--kontakt .fuehrung{max-width:none}
}

/* ── Werdegang: zwei Stationen als versetztes Paar ────────────────────────
   Die Jahre stehen im Satz, nicht in einer eigenen Spalte — sonst bliebe
   links eine leere Rasterspalte stehen und die Seite läse sich als
   Lebenslauf. Die zweite Station rückt nach rechts und nach unten, dasselbe
   Versatz-Idiom wie bei den Mandantenstimmen. Das Fazit steht darunter als
   eigene Stimme über einem Strich, wie im dunklen Feld. */
.werdegang{background:var(--paper-2);padding-block:var(--sec)}
.stufen{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
/* 56ch: gemessener Wert des Projekts — 62ch ergaben in Newsreader bis zu
   86 Zeichen. Bindet erst einspaltig, im Paar begrenzt die Spalte. */
.stufe{margin:0;color:var(--ink-2);max-width:56ch}
.stufe:nth-child(2){margin-top:clamp(0px,5vw,4rem)}
.fazit{
  font-style:italic;font-weight:600;font-size:var(--t-unter);line-height:1.34;
  font-variation-settings:'opsz' 26;color:var(--ink);
  max-width:42ch;margin:var(--s5) 0 0}
/* Bronze traegt hier keine Schrift, sondern eine Linie — auf Papier
   erreicht der Ton nur 3,50:1 und darf nie Text tragen. */
/* Der Haarstrich ueber einer Auszeichnungszeile. Auf dunklem Grund traegt
   er Champagner (.buehne__strich, .feld__strich), auf hellem Bronze -
   dieselbe Geometrie, 3,25 rem auf 1 px. `.fazit__strich` war dieselbe
   Regel unter einem eigenen Namen und ist hier aufgegangen, statt dass
   eine vierte Fassung dazukommt. */
/* Ein Element, nicht vier: dieselbe Deklaration traegt den Haarstrich
   ueberall auf hellem Grund. Die beiden Pseudoelemente stehen hier mit
   drin, damit die Geometrie an genau einer Stelle steht — im Lesetext
   und in der Randspalte der Kontaktseite gibt es kein eigenes Element,
   das man auszeichnen koennte, ohne sechs Rechtstexte anzufassen. */
.strich,.fazit__strich,
.lesen__text h2::before,
.lesen--kontakt .lesen__neben::before,
.gebiet .titel::before,
.zeile__begriff::before{
  display:block;width:3.25rem;height:1px;background:var(--bronze);
  margin-bottom:var(--s3)}
.lesen__text h2::before,
.lesen--kontakt .lesen__neben::before,
.gebiet .titel::before,
.zeile__begriff::before{content:""}
@media (max-width:900px){
  .stufen{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .stufe:nth-child(2){margin-top:0}
  .fazit{margin-top:var(--s4)}
}

/* ── Dunkles Feld ─────────────────────────────────────────────────────── */
/* Die Naht zum Bildband: dieselbe Haarlinie, die schon die Unterkante der
   Bühne setzt. Ohne sie stößt das helle Foto ohne Übergang auf das Blau,
   während die andere Hell-Dunkel-Grenze der Seite eine Linie trägt. */
.feld{
  background:var(--navy);color:var(--on-navy);
  padding-block:var(--sec);position:relative;overflow:hidden}
/* Der Abschluss steht auf einem Motiv, nicht auf einer Flaeche - dieselbe
   Sprache wie die drei Buehnen, eine Blende tiefer.

   Er ist keine zweite Buehne. Gemessen traegt er Text von y 108 bis y 1000
   bei 1040 px Hoehe, und dabei nicht nur Papierweiss, sondern das gedimmte
   #c3cbdd fuer Fuehrungssatz, Anschrift und Verwaltungszeile. Dessen
   Grenze fuer 4,5:1 liegt bei L 0,0934 statt 0,1568. Ein Buehnenmotiv mit
   hellstem Punkt bei 0,10 bis 0,15 wuerde die Verwaltungszeile brechen.

   Deshalb Deckel 0,42 in der Behandlung: der hellste ueberhaupt
   erreichbare Ton liegt damit bei L 0,0749. Das ist eine Zusage aus dem
   Verfahren, nicht aus der Messung eines einzelnen Bildes - kein Pixel
   kann sie verletzen. Gemessen am eingesetzten Motiv: hellster Punkt
   0,0698, gedimmtes Weiss also 5,39:1.

   Das Motiv ist ein Detail, kein Blick: Handlauf und Quaderwand am
   Eingang. Ein zweiter Blick auf dieselbe Treppe stuende auf der
   Startseite zweimal untereinander.

   Als CSS-Hintergrund, nicht als <img>: er ist Dekoration, traegt keine
   Aussage, braucht keinen Alternativtext - und so bleibt der Baustein in
   allen sechs Seiten unveraendert. */
.feld--abschluss{
  background-color:var(--navy);
  background-image:url('/assets/abschluss-grund.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* Die Marke eröffnet das Feld. Sie steht nur hier und nur auf dunklem
   Grund: Gold erreicht auf Papier 1,86:1 und könnte dort nichts tragen.
   Die Breite ist an den Satzspiegel gebunden, nicht an die Fensterbreite -
   sie soll groß wirken, nicht mitwachsen. */
.feld--marke{padding-top:calc(var(--sec) * 1.15)}
.signet{display:block;margin:0 auto clamp(2.5rem,6vw,5rem);
  width:clamp(13rem,26vw,24rem);height:auto;position:relative;z-index:1}

/* ── Abschluss: ein Baustein für alle sechs Seiten ─────────────────────
   Bis zum 22.09.2026 standen hier zwei Dinge übereinander: ein dunkles
   Feld mit Einladung, Telefon und E-Mail, darunter eine helle Fußzeile mit
   Marke, Anschrift, denselben beiden Wegen und den Seitenlinks. Telefon
   und E-Mail standen dadurch zweimal auf einer Seite, die Marke in einer
   dritten Fassung.

   Jetzt trägt ein Block beides. Die Reihenfolge ist die Rangfolge: Marke,
   Einladung, Anschrift — dann eine Haarlinie, und darunter leise die
   Verwaltung. Die Einladung soll die Verwaltungszeile anführen, nicht
   neben ihr stehen. */
.abschluss__leiste{
  position:relative;z-index:1;
  max-width:var(--breit);margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding-inline:var(--pad);padding-top:var(--s4);
  border-top:1px solid rgba(243,241,237,.22);
  display:grid;grid-template-columns:1fr auto auto;
  gap:var(--s3) clamp(2rem,6vw,5rem);align-items:start}
.abschluss__leiste nav{display:flex;flex-direction:column;align-items:flex-start}
.abschluss__leiste nav a,.abschluss__fein{
  font-family:var(--grotesk);font-size:var(--t-klein);color:var(--on-navy-2)}
.abschluss__leiste nav a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  border-bottom:1px solid transparent;
  transition:color var(--schnell) var(--ease),
             border-color var(--schnell) var(--ease)}
@media (hover:hover){
  .abschluss__leiste nav a:hover{color:var(--on-navy);border-bottom-color:var(--champ)}
}
.abschluss__fein{font-size:var(--t-marke);line-height:1.6;color:var(--on-navy-2)}
.abschluss__fein a{color:inherit}
/* Die Anschrift steht oben bei der Einladung, nicht unten in der
   Verwaltung: sie gehört zum Angebot, nicht zum Kleingedruckten. */
.anschrift{font-style:normal;color:var(--on-navy-2);font-size:var(--t-text);
  line-height:1.6;margin:var(--s4) 0 0}
.feld .wege{margin-top:var(--s3)}
@media (max-width:820px){
  .abschluss__leiste{grid-template-columns:1fr 1fr;gap:var(--s4) var(--gut)}
  .abschluss__fein{grid-column:1 / -1}
}
@media (max-width:520px){
  .abschluss__leiste{grid-template-columns:1fr}
}
/* Der Text steht ueber dem Bildgrund, nicht darunter. */
.feld--abschluss .feld__wort{position:relative;z-index:1}
.feld--abschluss{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
/* Der Abschluss wiederholt nicht, was die Seite schon sagt.

   .feld--schlicht - ohne Einladung, mit Anschrift: Fehlerseite. Die Luft
   der Startseite wirkt dort als Leere, deshalb enger gesetzt.

   .feld--knapp - ohne Einladung und ohne Anschrift: Kontakt, Impressum,
   Datenschutzerklaerung. Diese drei Seiten fuehren die Anschrift im
   Inhalt, auf der Kontaktseite als Thema, in den beiden anderen als
   Pflichtangabe. Zweimal dieselbe Adresse in einem Bildschirm liest sich
   als Fehler, nicht als Service. Dort bleiben Marke und Verwaltung. */
.feld--schlicht,.feld--knapp{padding-top:var(--sec)}
.feld--schlicht .signet,.feld--knapp .signet{
  width:clamp(11rem,20vw,17rem);margin-bottom:clamp(1.75rem,4vw,3rem)}
.feld--schlicht .anschrift{margin-top:0}
.feld--schlicht .abschluss__leiste{margin-top:clamp(2.25rem,4.5vw,3.25rem)}
.feld--knapp{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
.feld--knapp .abschluss__leiste{margin-top:0;border-top:0;padding-top:0}

/* ── Die Fehlerseite ist ein einziger Block ───────────────────────────
   Bis zum 22.09.2026 trug sie zwei getrennte Bereiche: ein Band mit der
   Fehlermeldung und darunter den Abschluss - mit der Marke und den
   Seitenlinks zweimal auf einer Seite, oben in der Kopfzeile und unten
   in der Verwaltungszeile.

   Jetzt ist der Abschluss nach oben verlaengert und traegt die Meldung
   mit. Kopfzeile und Sprunglink sind entfallen: Es gibt nichts zu
   ueberspringen, und die Marke steht als Signet ohnehin im Block. Auf
   diese Seite kommt niemand beim Blaettern, sie braucht keine
   Seitenanlage, sondern eine Aussage.

   Die Ueberschrift traegt `titel` statt `display`. Die grosse Form
   gehoert den drei Hauptseiten, die etwas eroeffnen. Eine Fehlerseite
   eroeffnet nichts. */
.feld--fehler{
  padding-top:clamp(2.5rem,6vw,4rem);
  padding-bottom:calc(clamp(1.75rem,4vw,2.5rem) + env(safe-area-inset-bottom,0px))}
/* Der Block ist so hoch wie sein Inhalt, nicht wie das Fenster.
   Die erste Fassung hatte `min-height:100svh` und schob die
   Verwaltungszeile mit `margin-top:auto` ans Fensterende. Das riss eine
   Luecke zwischen Meldung und Menue, und es zog den Bildgrund auf: Der
   Abschlussgrund ist hochformatig (620 x 941) und musste auf einem
   breiten flachen Block 2,3-fach hochskaliert werden - sichtbar als
   gezogenes Bild.

   Damit auf hohen Fenstern unter dem Block kein heller Streifen steht,
   traegt die Seite selbst den dunklen Grund: `body.fehlerseite`. */
body.fehlerseite{background:var(--navy)}
/* Keine Naht: Sie markiert die Grenze zweier vollflaechiger Bereiche.
   Hier gibt es nur einen. */
.feld--fehler::before{display:none}
/* Und ein liegendes Motiv statt des hochformatigen Abschlussgrundes -
   dasselbe Buecherband wie auf Impressum und Datenschutzerklaerung. Es
   ist 1,49:1 und passt damit zum Seitenverhaeltnis dieses Blocks. Das
   Band der beiden anderen Textseiten (3,48:1) taugt hier nicht: Auf einem
   1,5:1-Block muesste es zweifach vergroessert werden, aus 1672 px Breite
   wuerden 3344 - sichtbar als aufgezogenes Bild. Dasselbe galt fuer den
   hochformatigen Abschlussgrund, der hier zuerst stand. */
.feld--fehler{background-image:url('/assets/kanzlei-buecher-voll.webp')}
.feld--fehler .signet{margin-bottom:clamp(1.5rem,4vw,2.75rem)}
.feld--fehler .anschrift{margin-top:var(--s4)}
/* Die Verwaltungszeile sitzt am Fuss des Fensters, nicht direkt unter
   dem Text - sonst steht der Block in der Mitte und die Zeile klebt
   daran. */
.feld--fehler .abschluss__leiste{padding-top:clamp(1.75rem,4vw,2.75rem)}
@media (max-width:520px){
  .feld--fehler .signet{width:clamp(8.5rem,34vw,11rem)}
}

@media (max-width:900px){
  /* Die Bodenfreiheit von 11,5 rem stammt aus der Zeit, als die Figur am
     unteren Blockrand stand. Sie sitzt jetzt in der Reihe - die Freiheit
     gehoert dorthin, sonst haengen unter der Verwaltungszeile 184 px Leere. */
  .feld--abschluss{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
}
.feld__reihe{
  position:relative;z-index:1;
  max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad)}
.feld__wort{max-width:min(52%,34rem)}
.feld .titel{color:var(--on-navy)}
/* Derselbe Champagnerstrich wie auf der Bühne: die beiden dunklen Flächen
   der Website sprechen dieselbe Sprache. Auf Markenblau erreicht der Ton
   6,75:1 und dürfte hier sogar Text tragen — er bleibt trotzdem Linie und
   ein einziger Akzent, damit aus Wärme keine Fläche wird. */
.feld p{color:var(--on-navy-2);max-width:44ch}
.wege{display:flex;flex-direction:column;align-items:flex-start;
  /* Kein Abstand zwischen den beiden Zeilen. Jede traegt bereits 2,75 rem
     Antippflaeche - das ist der Abstand, und mehr vertraegt der Block
     nicht, ohne dass Telefon und E-Mail aus der Anschrift herausfallen.
     44 px Grundlinienabstand statt 44 plus Zwischenraum. */
  gap:0;margin-top:var(--s3)}
/* Wege und Anschrift standen am Vormittag des 22.09.2026 bei 25,4 px, der
   Fuehrungssatz darueber bei 17. Das Groesste wird zuerst gelesen - hier
   war es das Nachgeordnete. Beide sind dann heruntergesetzt worden, die
   Wege auf 22 px und die Anschrift auf 17.

   Am Abend desselben Tages auf Weisung des Auftraggebers auch die Wege
   auf 17 px. Meine Begruendung fuer die Stufe dazwischen war, dass Wege
   Handlungen sind und die Anschrift eine Angabe. Dagegen steht, dass
   Anschrift, Telefon und E-Mail *ein* Block sind - eine Adresse mit drei
   Zeilen. Eine Stufe mitten darin trennt, was zusammengehoert. Die
   Unterscheidung traegt jetzt der Unterstrich, nicht die Groesse und
   nicht das Gewicht: Auch die 500 sind gefallen, sie setzten die beiden
   Zeilen zusaetzlich ab. Die Antippflaeche von 2,75 rem bleibt
   unberuehrt - sie ist die Untergrenze des Zeilenabstands, nicht eine
   Gestaltungsentscheidung. */
.wege a{
  font-family:var(--grotesk);font-size:var(--t-text);font-weight:400;
  color:var(--on-navy);border-bottom:1px solid rgba(243,241,237,.34);
  display:inline-flex;align-items:flex-end;min-height:2.75rem;padding-bottom:.3rem;
  transition:border-color var(--schnell) var(--ease)}
@media (hover:hover){.wege a:hover{border-bottom-color:var(--on-navy)}}

@media (max-width:900px){
  /* Die Bodenfreiheit von 11,5 rem und die eigene Groesse der Figur sind
     entfallen: seit dem Umbau zum Abschluss ist jedes .feld ein Fussbereich,
     die Figur steht auf dem Telefon nicht mehr. Beide Regeln hielten dort
     184 px leere Flaeche offen. */
  .feld__wort{max-width:none}
  .wege a{overflow-wrap:anywhere}
}

/* ── Lesetext: Impressum, Datenschutz, Fehlerseite ────────────────────── */
.lesen{padding-block:var(--sec)}
.lesen__satz{
  max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad)}
/* Gemessen, nicht geschätzt: 62ch ergaben in Newsreader bis zu 86 Zeichen.
   56ch bleiben in jeder geprüften Breite unter 80. */
.lesen__text{max-width:56ch}
.lesen__text p,.lesen__neben p{color:var(--ink-2)}
.lesen__text a,.lesen__neben a{color:var(--link)}
@media (hover:hover){.lesen__text a:hover,.lesen__neben a:hover{color:var(--bronze-ink)}}
.lesen__text h2{
  font-size:var(--t-unter);line-height:1.24;letter-spacing:-.012em;
  font-variation-settings:'opsz' 26;color:var(--ink);
  margin:var(--s5) 0 var(--s2)}
.lesen__text h2:first-of-type{margin-top:var(--s5)}
.lesen__text h3,.lesen__neben h3{
  font-family:var(--grotesk);font-size:var(--t-klein);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  margin:var(--s4) 0 var(--s1)}
.lesen__text ul{
  list-style:none;display:flex;flex-direction:column;gap:var(--s1);
  margin:0 0 var(--s2)}
.lesen__text ul li{padding-left:1.15rem;position:relative;color:var(--ink-2)}
.lesen__text ul li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.45rem;height:1px;background:var(--bronze)}
.stand{font-family:var(--grotesk);font-size:var(--t-marke);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-top:var(--s5)}

/* Kontaktseite: dieselbe Leseachse, aber zweispaltig. Das Impressum braucht
   eine Spalte, die Kontaktseite hat dafür zu wenig Text — sie ließ die halbe
   Fensterbreite leer. Die Randspalte setzt auf derselben Linie an wie der
   Titel: gleicher Abstand, gleiche Haarlinie. */
.lesen__neben{max-width:56ch}
.lesen--kontakt .lesen__neben h3:first-child{margin-top:0}
.lesen--kontakt .lesen__neben{margin-top:var(--s5)}
@media (min-width:900px){
  .lesen--kontakt .lesen__satz{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);
    gap:var(--gut);align-items:start}
  .lesen--kontakt .lesen__neben{margin-top:var(--s5)}
}

/* ── Fußzeile ─────────────────────────────────────────────────────────
   Die helle Fußzeile ist am 22.09.2026 entfallen. Sie trug Marke,
   Anschrift, Telefon, E-Mail und die Seitenlinks — Telefon und E-Mail
   standen damit zweimal auf derselben Seite, die Marke in einer dritten
   Fassung. Alles davon liegt jetzt im dunklen Abschluss, siehe
   `.feld--abschluss` weiter oben. */

/* ── Bewegung abschaltbar ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Person: Text auf der Achse, Freisteller rechts ───────────────────── */
/* Grund für den Freisteller. Markenblau scheidet aus: das Sakko misst
   #303878 und erreicht darauf nur 1,43:1 — die Gestalt verschwände.
   Auf dem dunkleren Papierton sind es 8,59:1. */
.person{background:var(--paper-2);padding-block:var(--sec)}
.person__reihe{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--gut);align-items:end;
  max-width:var(--breit);margin-inline:auto;padding-inline:var(--pad)}
.person__bild{margin:0;justify-self:end;max-width:22.5rem;width:100%}
.person__bild img{width:100%;height:auto}
@media (max-width:820px){
  .person__reihe{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
  .person__bild{justify-self:start;max-width:17.5rem;order:-1}
}

/* ── Kopf einer Textseite: die kleine Buehne ──────────────────────────
   Bis zum 22.09.2026 trugen Impressum, Datenschutzerklaerung und
   Fehlerseite einen hellen Seitenkopf, waehrend die drei Hauptseiten
   dunkel oeffneten. Jetzt oeffnen alle sechs dunkel.

   Kuerzer als die anderen: 44 statt 62 oder 88 svh. Es sind Textseiten,
   kein Auftakt - die Bilder sind hier Anlass zum Weiterlesen, nicht zum
   Verweilen.

   Ein gemeinsames Motiv fuer alle drei. Es sind die nachgeordneten
   Seiten, und dort ist Gleichheit richtig; ein Wechsel haette ihnen ein
   Gewicht gegeben, das sie nicht haben. */
.buehne--seite{min-height:clamp(17rem,44svh,25rem)}
.buehne--seite .buehne__bild img{object-position:50% 50%}
.buehne--seite .fuehrung{max-width:52ch}
/* Die Fuehrungssaetze von Impressum und Datenschutzerklaerung fuehren
   Adressen mit. Sie tragen hier Papierweiss, nicht den Linkton
   --link-navy der Farbkarte: Gemessen erreicht #a8bedd auf diesem Grund
   nur 3,32:1, es
   braeuchte eine Grundluminanz unter 0,073. Papierweiss kommt auf
   5,43:1. Der Unterstrich macht sie als Link kenntlich - auf dunklem
   Grund traegt die Farbe allein die Unterscheidung ohnehin nicht. */
.buehne--seite .fuehrung a{color:var(--on-navy);
  border-bottom:1px solid rgba(243,241,237,.45)}
@media (hover:hover){
  .buehne--seite .fuehrung a:hover{border-bottom-color:var(--champ)}
}
/* Die Kopfzeile steht ohne eigene Flaeche ueber dem Band und nimmt
   deshalb keinen Platz ein. Bei den hohen Buehnen ist das folgenlos, hier
   nicht: Gemessen bei 390 px bricht die Navigation um, reicht bis y 120 -
   und der Champagnerstrich der Buehne stand bei y 89. Die Schrift des
   Bandes braucht einen garantierten Abstand von oben, keine Mindesthoehe.
   Eine Mindesthoehe waechst nach unten, das Problem sitzt oben. */
.buehne--seite .buehne__wort{padding-top:clamp(7rem,20vw,9.5rem)}
@media (max-width:900px){
  .buehne--seite{min-height:clamp(15rem,40svh,21rem)}
  .buehne--seite .buehne__wort{padding-top:clamp(8.5rem,26vw,10rem)}
}

/* ═══ Bewegung ═════════════════════════════════════════════════════════
   Alles hier ist reines CSS — kein JavaScript, keine Bibliothek. Jeder
   Ablauf ist in @media (prefers-reduced-motion:no-preference) gekapselt,
   zusätzlich zur Abschaltung weiter oben. Ohne Bewegung steht die Seite
   vollständig und unverändert da; Bewegung ist Zugabe, nie Träger.

   Was NICHT vorkommt: Scroll-Jacking, Parallax, Dauerbewegung, animierte
   Bilder, animierte Überschriften als Selbstzweck, Effekte auf Hover, die
   den Text verschieben. */

/* ── Seitenwechsel ────────────────────────────────────────────────────
   Seitenübergreifende View Transitions: die sechs Seiten blenden
   ineinander, statt weiß aufzublitzen, und die Wortmarke bleibt dabei
   stehen, statt mitzublenden. Zwei Zeilen, kein Skript, in Browsern ohne
   Unterstützung passiert schlicht ein normaler Seitenwechsel. */
@view-transition{navigation:auto}

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:340ms;animation-timing-function:var(--ease)}
  /* Die Marke ist auf jeder Seite dieselbe — sie wird über den Wechsel
     hinweg fortgeschrieben statt aus- und wieder eingeblendet. */
  .kopf__logo img{view-transition-name:marke}
}

/* ── Auftakt: die Bühne baut sich auf ─────────────────────────────────
   Der Strich zieht sich, dann treten Marke, Titel und Führungssatz nach.
   Kurz, gestaffelt, einmalig. Das Bild bleibt unangetastet — es ist das
   größte Element und darf die Darstellung nicht verzögern. */
@media (prefers-reduced-motion:no-preference){
  @keyframes strich-zieht{from{width:0}to{width:3.25rem}}
  @keyframes tritt-auf{
    from{opacity:0;transform:translateY(.6rem)}
    to{opacity:1;transform:none}}

  .buehne__strich{animation:strich-zieht 620ms var(--ease) both}
  .buehne .marke{animation:tritt-auf 560ms var(--ease) 120ms both}
  .buehne .display{animation:tritt-auf 640ms var(--ease) 200ms both}
  .buehne .fuehrung{animation:tritt-auf 640ms var(--ease) 300ms both}
}

/* ── Die Marke tritt ein ──────────────────────────────────────────────
   Sie steigt beim Heranscrollen an ihren Platz und nimmt dabei ihre
   Deckkraft an. Scrollgesteuert, nicht zeitgesteuert: sie folgt der Hand
   des Lesers, statt eigenmaechtig zu laufen. Nur ein kurzer Weg und die
   Deckkraft, kein Massstabswechsel - ein wachsendes Logo waere der
   Effekt, den dieses Projekt vermeidet. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .signet{
      animation:marke-tritt-ein linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 64%}
    @keyframes marke-tritt-ein{
      from{opacity:0;transform:translateY(1.25rem)}
      to{opacity:1;transform:none}}
  }
}

/* ── Linien, die sich ziehen ──────────────────────────────────────────
   Der Unterstrich wächst von links, statt schlagartig die Farbe zu
   wechseln. Er liegt als Hintergrundbild über der ruhenden Haarlinie und
   verschiebt deshalb keinen Text — das ist der Grund für background-size
   statt eines zweiten Rahmens. */
@media (hover:hover){
  .wege a,.kopf__nav a{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0% 1px;
    transition:background-size var(--ruhig) var(--ease),
               color var(--schnell) var(--ease),
               border-color var(--schnell) var(--ease)}
  .wege a:hover,.kopf__nav a:hover{
    background-size:100% 1px}
  /* Auf dunklem Grund zieht die Linie in Champagner, auf hellem in Tinte. */
  .wege a{color:var(--on-navy)}
  .feld .wege a:hover{background-image:linear-gradient(var(--champ),var(--champ))}
  .kopf--buehne .kopf__nav a:hover{
    background-image:linear-gradient(var(--champ),var(--champ))}
}