/* ═══════════════════════════════════════════════════════════════════════════
   BAYAT GmbH — Design-System
   Grundlage: KONZEPT.md §7 (Farben, Schrift) · Bauplan §2 („Rot trägt").

   Rot ist Fläche, nicht Zierat: ganze Sektionen liegen in #BD1523, darauf weiße
   Schrift, weiße Konturen, weiße Outline-Icons. Darunter liegt die Blaupause —
   ein Drahtgitter aus dünnen Linien bei ~6 % Deckkraft, in Karten, roten
   Sektionen und Knöpfen. Schaltflächen sind Pillen in Versalien mit Pfeil.
   Zweite Welt bleibt: wo gearbeitet wird, wird es Nacht (Bühnen, Herzstück).
   Kein Tailwind, kein Framework: alles hier, damit nichts von außen dazwischenfunkt.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('fonts/fonts.css');

/* ── 1 · Die Farben des Originals ──────────────────────────────────────────── */
:root{
  /* gemessen im Seiten-CSS der Altseite — nicht ersetzen */
  --rot:#BD1523;
  --rot-tief:#8E0E1A;          /* abgeleitet, nur für Verläufe und Hover */
  --anthrazit:#3C3C3A;
  --weiss:#FFFFFF;
  --hellgrau:#E5E5E5;          /* Sektionsflächen und Rahmen — nie Schriftfarbe */
  --schwarz:#000000;
  --nacht:#171715;             /* aus dem Anthrazit abgedunkelt, neutral, nicht blaustichig */
  --nacht-tief:#0E0E0D;

  /* Rollen — nur diese werden im Markup benutzt. Jede Sektionsklasse dreht sie. */
  --grund:var(--weiss);
  --grund-flaeche:var(--hellgrau);
  --text:var(--anthrazit);
  --text-leise:#666663;        /* eine Spur dunkler als frueher: auf --grund-flaeche
                                  (#E5E5E5) waren es 4,2:1, jetzt 4,6:1 (WCAG AA) */
  --linie:rgba(60,60,58,.18);
  --linie-stark:rgba(60,60,58,.42);
  --akzent:var(--rot);
  --auf-akzent:var(--weiss);

  /* Der Schleier des Kopfes: derselbe Ton wie der Grund, nur 88 % davon.
     Als eigener Wert statt color-mix — das liefert ein color(srgb …), an dem
     Kontrastmessungen und ältere Browser scheitern. */
  --grund-schleier:rgba(255,255,255,.88);

  /* Blaupause — die Handschrift. Weiße Linien; auf hellem Grund gedreht. */
  --blueprint:url('blueprint.svg');
  --blueprint-mass:360px;
  --blueprint-deckung:.085;
  --blueprint-filter:invert(1);

  /* Schrift */
  --f-kopf:'Archivo',system-ui,sans-serif;
  --f-text:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Maße */
  --bund:1240px;
  --rand:clamp(20px,4vw,56px);
  --sektion:clamp(72px,9vw,148px);
  /* Hub der Seitenköpfe: um so viel sitzt der Textblock jedes Hero höher als
     früher (Marcus, 24.09.: „50 bis 80 Pixel weiter nach oben"). Jeder Kopf
     rechnet ihn in sein unteres Padding; auf dem Handy nur die Hälfte. */
  --kopf-hub:64px;
  --satz:62ch;
  --h1:clamp(2.6rem,6.4vw,5.2rem);
  --h2:clamp(1.9rem,3.6vw,3.1rem);
  --h3:clamp(1.25rem,1.9vw,1.6rem);
  --radius:16px;                         /* Karten der Vorlage: weich, nicht rund */
  --radius-klein:10px;
  --pille:999px;
}
@media (max-width:699px){:root{--kopf-hub:32px}}

/* Nacht — als Klasse (Umschalter) und als Sektionszustand (Bühnen) */
:root.nacht,
.welt-nacht{
  --grund:var(--nacht);
  --grund-flaeche:var(--nacht-tief);
  --text:#EDEBE6;
  --text-leise:#9C9A94;
  --linie:rgba(237,235,230,.16);
  --linie-stark:rgba(237,235,230,.34);
  --auf-akzent:var(--weiss);
  --grund-schleier:rgba(23,23,21,.88);
  --blueprint-filter:none;
  --blueprint-deckung:.13;
}

/* ── 2 · Grundlagen ────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  /* overflow-x NUR hier, nie auf body oder Sektionen — sonst bricht position:sticky */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--grund);color:var(--text);
  font:400 clamp(1rem,.62vw + .86rem,1.125rem)/1.65 var(--f-text);
  transition:background .8s ease,color .8s ease;
  font-synthesis-weight:none;
}
h1,h2,h3,h4{font-family:var(--f-kopf);font-weight:800;line-height:1.04;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3);font-weight:600}
p{margin:0 0 1.1em;max-width:var(--satz)}
a{color:inherit}
img,svg,video{max-width:100%;height:auto;display:block}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
::selection{background:var(--akzent);color:var(--auf-akzent)}

.bund{max-width:var(--bund);margin-inline:auto;padding-inline:var(--rand)}
.sektion{padding-block:var(--sektion);position:relative}
.mono{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.leise{color:var(--text-leise)}

/* ── 3 · Die Blaupause ─────────────────────────────────────────────────────── */
/* Eine Kachel (360 px), überall dieselbe. Sie liegt als eigene Ebene UNTER dem
   Inhalt (z-index:-1 im eigenen Stapel), damit kein Text durch sie hindurchmuss. */
.blaupause,
.sektion--rot,
.karte,
.knopf{position:relative;isolation:isolate}

.blaupause::before,
.sektion--rot::before,
.karte::before,
.knopf::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--blueprint) 0 0/var(--blueprint-mass) repeat;
  opacity:var(--blueprint-deckung);
  filter:var(--blueprint-filter);
}

/* ── 4 · Sektionen: Rot trägt ──────────────────────────────────────────────── */
/* Vollflächig rot, weiße Schrift, weiße Konturen. Weiß auf #BD1523 = 6,4:1. */
.sektion--rot{
  --grund:var(--rot);
  --grund-flaeche:var(--rot-tief);
  --text:var(--weiss);
  --text-leise:rgba(255,255,255,.82);   /* 4,6:1 auf Rot — noch AA */
  --linie:rgba(255,255,255,.55);
  --linie-stark:rgba(255,255,255,.72);
  --akzent:var(--weiss);
  --auf-akzent:var(--rot);
  --blueprint-filter:none;
  /* 17 % waren auf Rot praktisch unsichtbar — die Skizze in den Kacheln war
     da, aber niemand konnte sie sehen. */
  --blueprint-deckung:.32;
  /* Die Kachel laeuft auf Rot deutlich groesser: bei 360 px wiederholte
     sie sich so oft, dass sie als Rauschen las statt als Zeichnung. */
  --blueprint-mass:620px;
  background:var(--rot);color:var(--weiss);
}
/* Jede Gewerkeseite bringt ihre eigene Zeichnung mit — Gleisquerschnitt,
   Grabenprofil, Wandaufbau. Der Pfad ist relativ zu DIESER Datei. */
.sektion--rot[data-blaupause="gleisbau"]{--blueprint:url('blueprint/gleisbau.svg')}
.sektion--rot[data-blaupause="vegetationsarbeiten"]{--blueprint:url('blueprint/vegetationsarbeiten.svg')}
.sektion--rot[data-blaupause="tiefbau"]{--blueprint:url('blueprint/tiefbau.svg')}
.sektion--rot[data-blaupause="hochbau"]{--blueprint:url('blueprint/hochbau.svg')}
.sektion--rot[data-blaupause="garten-landschaftsbau"]{--blueprint:url('blueprint/garten-landschaftsbau.svg')}
.sektion--rot[data-blaupause="baulogistik"]{--blueprint:url('blueprint/baulogistik.svg')}
.sektion--rot[data-blaupause="ablauf"]{--blueprint:url('blueprint/ablauf.svg')}

/* Seiten ohne eigene Angabe an der Sektion erben die Blaupause der Seite. Die
   Gewerkeseiten setzen sie weiterhin an der Sektion selbst — deshalb greift
   die Seitenregel nur dort, wo nichts anderes steht (:not). */
body[data-blaupause="gleisbau"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/gleisbau.svg')}
body[data-blaupause="vegetationsarbeiten"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/vegetationsarbeiten.svg')}
body[data-blaupause="tiefbau"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/tiefbau.svg')}
body[data-blaupause="hochbau"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/hochbau.svg')}
body[data-blaupause="garten-landschaftsbau"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/garten-landschaftsbau.svg')}
body[data-blaupause="baulogistik"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/baulogistik.svg')}
body[data-blaupause="ablauf"] .sektion--rot:not([data-blaupause]){--blueprint:url('blueprint/ablauf.svg')}
/* Glatt rot, ohne Zeichnung dahinter: dort, wo die Sektion selbst schon eine
   Zeichnung traegt (Einsatzgebiet auf Referenzen) — zwei Linienbilder
   uebereinander lasen sich als Muster. */
.sektion--glatt::before{content:none}
.sektion--hell{
  --grund:var(--weiss);
  --grund-flaeche:var(--hellgrau);
  --text:var(--anthrazit);
  --text-leise:#666663;
  --linie:rgba(60,60,58,.18);
  --linie-stark:rgba(60,60,58,.42);
  --akzent:var(--rot);
  --auf-akzent:var(--weiss);
  --blueprint-filter:invert(1);
  --blueprint-deckung:.085;
  background:var(--weiss);color:var(--anthrazit);
}
.sektion--flaeche{background:var(--grund-flaeche)}
/* ── Grauer Grund ──────────────────────────────────────────────────────────
   Zwischen zwei schwarzen Abschnitten fehlte jede Kante: das Scroll-Stueck
   endete schwarz, der nächste Abschnitt begann schwarz, und dazwischen stand
   graue Schrift auf Schwarz. Diese Variante trennt beides und bleibt dunkel
   genug, damit die roten Kacheln darauf stehen. */
.sektion--grau{
  --grund:#35353B;
  --grund-flaeche:#404047;
  --text:#F2F1EE;
  --text-leise:#B9B7B1;
  --linie:rgba(242,241,238,.20);
  --linie-stark:rgba(242,241,238,.40);
  --akzent:var(--rot);
  --auf-akzent:var(--weiss);
  --blueprint-filter:none;
  --blueprint-deckung:.10;
  background:var(--grund);color:var(--text);
}

.sektion--nacht{
  --grund:var(--nacht);
  --grund-flaeche:var(--nacht-tief);
  --text:#EDEBE6;
  --text-leise:#9C9A94;
  --linie:rgba(237,235,230,.16);
  --linie-stark:rgba(237,235,230,.34);
  --akzent:var(--rot);
  --auf-akzent:var(--weiss);
  --blueprint-filter:none;
  --blueprint-deckung:.13;
  background:var(--nacht);color:#EDEBE6;
}

/* Foto oder Film als Hintergrund. Das Foto bleibt ein Foto — es läuft bei
   86 % und wird NICHT mehr flächig zugedeckt. Lesbar wird die Schrift dort,
   wo sie steht: der Schleier trägt links (Textspalte) und nimmt zur rechten
   Bildkante auf null ab. Rechnung gegen den schlimmsten Fall, ein reinweißes
   Foto (255) auf --nacht:
     Deckung .86 → Bildwert 222 · Schleier .66 → 80 → Weiß 8,1:1 · leise 7,0:1
                              · Schleier .56 → 101 → Weiß 5,8:1 · leise 5,1:1
   Unter der Textspalte liegt der Schleier deshalb nie unter .56; rechts ab
   90 % Breite steht das Foto ungedämpft. Schmale Fenster (< 900 px) haben
   keine Textspalte — dort deckt ein gleichmäßiger Schleier, dafür läuft das
   Bild bei .80. Wer Schrift einmal mittig setzt, überschreibt --bild-schleier. */
.sektion--bild{
  --grund:var(--nacht);
  --grund-flaeche:var(--nacht-tief);
  --text:var(--weiss);
  --text-leise:rgba(255,255,255,.9);   /* 4,7:1 selbst in der hellsten Ecke */
  --linie:rgba(255,255,255,.34);
  --linie-stark:rgba(255,255,255,.6);
  --akzent:var(--weiss);
  --auf-akzent:var(--nacht);
  --blueprint-filter:none;
  --blueprint-deckung:.07;
  --bild-deckung:.86;
  --bild-schleier:
    linear-gradient(to right,
      rgba(6,6,5,.68) 0%,rgba(6,6,5,.66) 42%,rgba(6,6,5,.56) 56%,
      rgba(6,6,5,.26) 74%,rgba(6,6,5,0) 90%),
    linear-gradient(to top,
      rgba(6,6,5,.30) 0%,rgba(6,6,5,.12) 30%,rgba(6,6,5,0) 58%);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--nacht);color:var(--text);
}
/* Schmales Fenster: die Schrift läuft über die volle Breite, eine freie
   rechte Bildhälfte gibt es nicht mehr. Dann deckt der Schleier gleichmäßig
   — dafür läuft das Bild etwas verhaltener. .80/.62 → 7,2:1 (Weiß). */
@media (max-width:899px){
  .sektion--bild{
    --bild-deckung:.80;
    --bild-schleier:linear-gradient(to top,
      rgba(6,6,5,.66) 0%,rgba(6,6,5,.62) 46%,rgba(6,6,5,.58) 100%);
  }
}
/* Das Bild selbst: eigene Ebene ganz unten, nie im Textfluss. */
.sektion--bild>img,
.sektion--bild>video,
.sektion--bild>picture{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:var(--bild-deckung);
}
/* Der Schleier: darüber, aber unter allem Inhalt — und nie anklickbar. */
.sektion--bild::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--bild-schleier);
}
.sektion--bild>.bund{position:relative;z-index:1}
/* Weicher Schatten hinter der Schrift — die zweite Sicherung neben dem
   Schleier, damit ein heller Fleck im Foto keine Zeile verschluckt. Er sitzt
   nur an der Schrift, nie an den Pillen: die tragen ihre eigene Fläche. */
.sektion--bild :is(h1,h2,h3,p,li,figcaption,label){
  text-shadow:0 1px 3px rgba(6,6,5,.5),0 2px 20px rgba(6,6,5,.4);
}
.sektion--bild .knopf,
.sektion--bild .knopf *{text-shadow:none}

/* Der Kicker jeder Hauptsektion: ein Schlagwort, davor ein kurzer Strich. */
.station{display:flex;align-items:center;gap:.7em;margin-bottom:1.1em;color:var(--text-leise)}
.station::before{content:"";width:26px;height:1px;background:var(--akzent);flex:none}
.station b{color:var(--akzent);font-weight:500}

/* ── 5 · Bemaßung: die Handschrift an Sektionsübergängen ───────────────────── */
/* <p class="bemassung">Sperrpause 04:00 – 09:00</p> — dünne Maßlinie mit
   Maßpfeilen an beiden Enden, die Beschriftung darunter in Monospace. */
.bemassung{
  position:relative;display:block;
  margin-block:clamp(30px,5vw,64px);padding-top:1em;
  border-top:1px solid color-mix(in srgb,currentColor 42%,transparent);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-leise);text-align:center;max-width:none;
}
.bemassung::before,
.bemassung::after{
  content:"";position:absolute;top:-4.5px;width:10px;height:8px;
  background:currentColor;opacity:.6;
}
.bemassung::before{left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.bemassung::after{right:0;clip-path:polygon(100% 50%,0 0,0 100%)}
.bemassung--links{text-align:left}

/* ── 6 · Rhythmus statt Stapel ─────────────────────────────────────────────── */
.bahn{max-width:var(--satz)}
.split{display:grid;gap:clamp(28px,4vw,68px);grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:7fr 5fr;align-items:start}
  .split--um{grid-template-columns:5fr 7fr}
}
.versatz{display:grid;gap:clamp(20px,2.6vw,40px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:900px){
  /* Karten sitzen auf verschiedenen Höhen — nie in einer Reihe, nie 4+1 */
  .versatz>*:nth-child(2n){transform:translateY(38px)}
}
/* Vier Kästen bleiben zu viert. `auto-fit` rechnet die Spaltenzahl aus der
   Mindestbreite aus und landet bei 1240 px Bund auf drei Spalten — der vierte
   Kasten rutschte allein in die nächste Reihe (3+1). Hier steht die Spaltenzahl
   deshalb fest: vier ab 1000 px, darunter zwei (nie 2+1+1), ganz schmal einer.
   Zwei Reihen à zwei sind erlaubt, ein Einzelgänger nie. */
.versatz--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1099px){.versatz--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.versatz--vier{grid-template-columns:minmax(0,1fr)}}
/* Zwei Kästen je Reihe — für lange Karten (Stellenangebote), die nebeneinander
   zu viert unlesbar schmal würden. Ab 860 px zwei, darunter einer. Der Versatz
   entfällt hier: zwei hohe Karten nebeneinander sollen oben bündig stehen. */
.versatz--zwei{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
/* Karten in diesem Raster stehen als Paar nebeneinander — ungleiche Hoehen
   lesen sich als Treppe. Nur Karten strecken; freie Inhalte bleiben oben. */
.versatz--zwei:has(> .karte){align-items:stretch}
@media (max-width:859px){.versatz--zwei{grid-template-columns:minmax(0,1fr)}}
@media (min-width:900px){.versatz--zwei>*:nth-child(2n){transform:none}}

/* ── 7 · Karten wie in der Vorlage ─────────────────────────────────────────── */
/* Weiche Ecken, 1 px Kontur (auf Rot weiß), Blaupause innen, Platz für ein
   Outline-Icon oben mittig, Titel, zwei Zeilen. */
.karte{
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,34px);
  transition:border-color .3s ease,transform .3s ease;
}
.karte:hover{border-color:var(--akzent);transform:translateY(-3px)}
/* Weisse Karten auf weissem Grund haben nur ihren Rahmen — auf dem Bildschirm
   verschwinden sie darin. Diese Variante bekommt eine eigene, ruhige
   Grundflaeche. */
.karte--flaeche{background:#EFEEEB;border-color:rgba(60,60,58,.16)}
.nacht .karte--flaeche{background:#232326;border-color:rgba(237,235,230,.18)}
/* ── Karten auf Rot: schwarz und ohne Muster ────────────────────────────
   Vorher lag die Blaupause zweimal uebereinander — einmal als Grund der
   roten Sektion, einmal in jeder Karte. Das ergab ein unruhiges Feld, in
   dem beide Muster gegeneinander liefen. Jetzt traegt nur die Sektion das
   Muster; die Karten stehen als ruhige dunkle Flaechen darauf. */
.sektion--rot .karte{
  background:rgba(12,12,11,.92);
  border-color:rgba(255,255,255,.16);
}
.sektion--rot .karte::before{content:none}
.sektion--rot .karte:hover{border-color:rgba(255,255,255,.45)}
/* Der Text in der Karte steht jetzt auf Schwarz, nicht mehr auf Rot. */
.sektion--rot .karte{--text-leise:rgba(255,255,255,.76)}

/* Rote Kachel auf dunklem Grund — die sechs Gewerke auf der Startseite. Die
   Sektion liegt dort auf Nacht; rot ist nur noch die einzelne Kachel. Sie dreht
   ihre Farbrollen deshalb selbst um, damit Icon, Kicker und Text weiß stehen. */
.karte--rot{
  --grund:var(--rot);
  --grund-flaeche:var(--rot-tief);
  --text:var(--weiss);
  --text-leise:rgba(255,255,255,.84);
  --linie:rgba(255,255,255,.32);
  --linie-stark:rgba(255,255,255,.6);
  --akzent:var(--weiss);
  --auf-akzent:var(--rot);
  --blueprint-filter:none;
  --blueprint-deckung:.17;
  color:var(--weiss);border-color:rgba(255,255,255,.3);
}
.karte--rot,
.sektion--rot .karte--rot,
.sektion--nacht .karte--rot{background:var(--rot)}
.karte--rot:hover{border-color:var(--weiss);background:var(--rot-tief)}

/* Jedes Gewerk bringt seine eigene Zeichnung mit. Die Kachel läuft kleiner als
   sonst (300 statt 360 px), sonst stünde in einer Karte nur ein Ausschnitt.
   Der Pfad ist relativ zu DIESER Datei (assets/), nicht zur Seite. */
.karte[data-blaupause]{--blueprint-mass:300px}
.karte[data-blaupause="gleisbau"]{--blueprint:url('blueprint/gleisbau.svg')}
.karte[data-blaupause="vegetationsarbeiten"]{--blueprint:url('blueprint/vegetationsarbeiten.svg')}
.karte[data-blaupause="tiefbau"]{--blueprint:url('blueprint/tiefbau.svg')}
.karte[data-blaupause="ablauf"]{--blueprint:url('blueprint/ablauf.svg')}
.karte[data-blaupause="hochbau"]{--blueprint:url('blueprint/hochbau.svg')}
.karte[data-blaupause="garten-landschaftsbau"]{--blueprint:url('blueprint/garten-landschaftsbau.svg')}
.karte[data-blaupause="baulogistik"]{--blueprint:url('blueprint/baulogistik.svg')}

.karte-icon{
  display:block;width:38px;height:38px;margin:0 auto 1em;
  color:var(--akzent);fill:none;stroke:currentColor;stroke-width:1.5;
}
.karte:has(.karte-icon),.karte--mitte{text-align:center}
/* Vier Karten nebeneinander sind rund 250 px breit. Zentriert bricht der Text
   darin auf sechs, sieben Zeilen um: die Karte wird dreimal so hoch wie noetig
   und liest sich als in die Laenge gezogen. Ab vier Spalten steht der Text
   deshalb linksbuendig und enger. */
@media (min-width:1100px){
  .versatz--vier .karte,
  .versatz--vier .karte:has(.karte-icon){
    text-align:left;
    padding:clamp(18px,1.9vw,26px);
  }
  .versatz--vier .karte h3{font-size:1.06rem;line-height:1.24;margin-bottom:.45em}
  .versatz--vier .karte p{font-size:.94rem;line-height:1.52;margin:0}
  .versatz--vier .karte .karte-icon{margin-inline:0}
}
.karte:has(.karte-icon) p,.karte--mitte p{margin-inline:auto}

/* Icons allgemein: <svg class="icon"><use href="assets/icons.svg#gleisbau"/></svg> */
.icon{
  width:1.5em;height:1.5em;display:inline-block;vertical-align:middle;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;
}
.icon--gross{width:38px;height:38px}

/* ── 8 · Knöpfe: Pille, Versalien, Pfeil ───────────────────────────────────── */
.knopf{
  display:inline-flex;align-items:center;gap:.7em;max-width:100%;text-align:center;
  padding:.95em 1.9em;border-radius:var(--pille);line-height:1.2;
  font-family:var(--f-kopf);font-weight:700;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--akzent);color:var(--auf-akzent);border:1px solid var(--akzent);
  transition:background-color .28s ease,color .28s ease,border-color .28s ease;
}
.knopf::before{--blueprint-mass:180px;--blueprint-filter:none;--blueprint-deckung:.09}
.knopf>*{position:relative}
/* Der Pfeil gehört zur Handlung, nicht zum Schalter — darum nur an Verweisen. */
a.knopf::after{content:"›";font-size:1.3em;line-height:0;transform:translateY(-.05em);
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
a.knopf:hover::after{transform:translate(.24em,-.05em)}
.knopf:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}

.knopf--leer{background:transparent;color:var(--text);border-color:var(--linie-stark)}
.knopf--leer:hover{background:var(--akzent);color:var(--auf-akzent);border-color:var(--akzent)}

/* Auf roter Fläche kehrt sich alles um: weiße Pille → weiße Kontur */
.sektion--rot .knopf:hover{background:transparent;color:var(--weiss);border-color:var(--weiss)}
.sektion--rot .knopf--leer{background:transparent;color:var(--weiss);border-color:var(--linie-stark)}
.sektion--rot .knopf--leer:hover{background:var(--weiss);color:var(--rot);border-color:var(--weiss)}

/* Auf einem Bild ebenso: weiße Pille → weiße Kontur */
.sektion--bild .knopf:hover{background:transparent;color:var(--weiss);border-color:var(--weiss)}
.sektion--bild .knopf--leer{background:transparent;color:var(--weiss);border-color:var(--linie-stark)}
.sektion--bild .knopf--leer:hover{background:var(--weiss);color:var(--nacht);border-color:var(--weiss)}

/* Im Kopf sitzt der Schalter enger */
.kopf .knopf{padding:.62em 1.25em;font-size:.74rem}
/* Lange Beschriftungen dürfen auf schmalen Geräten umbrechen, nie überstehen */
@media (max-width:560px){
  .knopf{padding:.85em 1.4em;font-size:.8rem;letter-spacing:.1em}
}

/* ── 9 · Bühnen ────────────────────────────────────────────────────────────── */
.buehne{position:relative;background:var(--nacht);color:#EDEBE6;overflow:hidden}
.buehne canvas{position:absolute;inset:0;width:100%;height:100%}
.buehne-text{position:relative;z-index:2}
/* Text über der Szene bekommt IMMER einen Schleier — nie direkt auf dem Bild */
.schleier{background:color-mix(in srgb,var(--nacht) 72%,transparent);
  backdrop-filter:blur(2px);padding:clamp(18px,2.4vw,32px);border-radius:var(--radius-klein)}

/* Scroll-gekoppeltes Stück: lange Strecke, klebende Bühne */
.stueck{position:relative}
.stueck-buehne{position:sticky;top:0;height:100svh;display:grid}
.stueck-strecke{height:620vh}
.stueck-strecke--kurz{height:420vh}

/* Ersatz, wenn kein WebGL da ist: dieselbe Aussage, flach — nie eine leere Bühne */
.kein-webgl .nur-3d{display:none}
.ersatz-2d{display:none}
.kein-webgl .ersatz-2d{display:block}
/* … und dann darf die Strecke nicht mehr fünf Bildschirme lang sein. Ohne WebGL
   steht ein Standbild in der klebenden Bühne; die lange Strecke bliebe aber
   stehen, und man scrollte minutenlang an einem unbewegten Bild vorbei. Auf
   Inhaltshöhe zusammengezogen zeigt die Bühne das Ersatzbild einmal, dann geht
   es weiter.
   !important ist hier nötig, nicht bequem: die Seiten setzen ihre eigenen
   Streckenlängen SPÄTER (#kolonne 520vh im Seiten-<style>, ID-Selektor;
   .stueck-etappe 320vh) und würden diese Regel sonst überschreiben. */
html.kein-webgl .stueck-strecke,
html.kein-webgl .stueck-strecke--kurz{height:auto!important}

/* ── 10 · Reveals ──────────────────────────────────────────────────────────── */
/* Ohne JS ist alles sichtbar — nichts wird per CSS vorversteckt. */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].da{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}

/* ── 11 · Der Seitenwechsel ────────────────────────────────────────────────── */
.wechsel{
  position:fixed;inset:0;z-index:9000;background:var(--rot);
  transform:translateY(100%);pointer-events:none;
}
.wechsel.zu{transform:translateY(0);transition:transform .22s cubic-bezier(.65,0,.35,1)}
.wechsel.auf{transform:translateY(-100%);transition:transform .26s cubic-bezier(.65,0,.35,1)}

/* ── 12 · Kopf ─────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky;top:0;z-index:50;background:var(--grund-schleier);
  backdrop-filter:blur(8px);border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
.kopf.gescrollt{border-bottom-color:var(--linie)}
.kopf-innen{display:flex;align-items:center;gap:clamp(16px,3vw,42px);
  max-width:var(--bund);margin-inline:auto;padding:14px var(--rand)}
.kopf-marke{display:flex;align-items:center;gap:.7em;text-decoration:none;color:var(--text)}
.kopf-marke svg{width:26px;height:auto;flex:none}
.kopf-marke b{font-family:var(--f-kopf);font-weight:800;letter-spacing:.06em;font-size:1.05rem}
.kopf nav{display:flex;gap:clamp(12px,1.8vw,28px);margin-left:auto;align-items:center}
.kopf nav a{text-decoration:none;font-size:.96rem;padding:.4em 0;position:relative;color:inherit}
.kopf nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--akzent);transition:right .28s ease}
.kopf nav a:hover::after,.kopf nav a[aria-current]::after{right:0}

/* ── 12b · Untermenü „Leistungen" ──────────────────────────────────────────── */
/* Ein Auslöser, drei Wege hinein: Zeiger (Hover), Tastatur (:focus-within) und
   Finger (Schalter setzt .auf). Der Schalter trägt aria-expanded, das Feld eine
   id — ohne beides wäre es für Screenreader eine Ansammlung loser Verweise.
   Kein display:none im geschlossenen Zustand: visibility+opacity lassen sich
   überblenden, und der Tabstopp fällt mit visibility:hidden trotzdem weg. */
.nav-gruppe{position:relative;display:flex;align-items:center;gap:.15em;padding-block:10px}
.nav-auf{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:1.7em;height:1.7em;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;cursor:pointer;font:inherit;
}
.nav-auf svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease}
.nav-gruppe.auf .nav-auf svg{transform:rotate(180deg)}
.nav-unter{
  position:absolute;top:100%;left:-12px;z-index:60;min-width:16rem;
  display:grid;padding:8px;
  background:var(--grund);border:1px solid var(--linie);border-radius:var(--radius-klein);
  box-shadow:0 20px 46px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nav-gruppe:hover .nav-unter,
.nav-gruppe:focus-within .nav-unter,
.nav-gruppe.auf .nav-unter{opacity:1;visibility:visible;transform:none}
/* Die Verweise darin sind Zeilen, keine Reiter: kein mitlaufender Strich. */
.kopf nav .nav-unter a{padding:.55em .8em;border-radius:8px;font-size:.92rem;
  white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.kopf nav .nav-unter a::after{display:none}
.kopf nav .nav-unter a:hover,
.kopf nav .nav-unter a:focus-visible{background:var(--grund-flaeche);color:var(--akzent)}
.kopf nav .nav-unter a[aria-current]{color:var(--akzent);font-weight:600}

/* Schmales Fenster: bisher war die Kopf-Leiste hier ganz ausgeblendet — auf dem
   Telefon gab es also überhaupt keine Navigation, und ein Untermenü liefe dort
   ins Leere. Sie rückt jetzt als EINE seitlich schiebbare Zeile unter die Marke;
   der Kopf wächst dadurch um rund eine Zeile, nicht um einen ganzen Block.
   Das Untermenü schwebt hier nicht (ein schwebendes Feld würde vom seitlichen
   Schieben abgeschnitten): seine sechs Verweise reihen sich per display:contents
   direkt hinter „Leistungen" in dieselbe Zeile ein. Geöffnet wird ausschließlich
   über den Schalter — Hover gibt es auf dem Finger nicht. */
@media (max-width:900px){
  .kopf-innen{flex-wrap:wrap;gap:10px}
  .kopf nav{width:100%;order:3;margin-left:0;flex-wrap:nowrap;gap:0 18px;
    padding-top:4px;border-top:1px solid var(--linie);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    /* Die Kante blendet aus statt abzuschneiden — so sieht man, dass die
       Leiste weitergeht und sich schieben lässt. */
    -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
    mask-image:linear-gradient(to right,#000 86%,transparent)}
  .kopf nav::-webkit-scrollbar{display:none}
  .kopf nav>a,.nav-gruppe>a{flex:none;white-space:nowrap;padding-block:.62em}
  .nav-gruppe{flex-wrap:nowrap;gap:0 14px;padding-block:0}
  .nav-auf{width:44px;height:44px;margin-inline-start:-9px}
  .nav-unter{position:static;min-width:0;margin:0;padding:0;border:0;
    background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;
    display:none}
  .nav-gruppe.auf .nav-unter{display:contents}
  /* Ohne Schalter kein Aufklappen: Hover und Fokus dürfen hier nichts öffnen. */
  .nav-gruppe:hover .nav-unter,
  .nav-gruppe:focus-within .nav-unter{display:none}
  .nav-gruppe.auf:hover .nav-unter,
  .nav-gruppe.auf:focus-within .nav-unter{display:contents}
  /* Die sechs Gewerke reihen sich hinter „Leistungen" ein — kleiner, leiser
     und hinter einem senkrechten Strich, damit sie nicht wie Hauptpunkte
     aussehen. */
  .kopf nav .nav-unter a{flex:none;white-space:nowrap;padding:.62em 0;
    border-radius:0;font-size:.88rem;color:var(--text-leise)}
  .kopf nav .nav-unter a:first-child{border-left:1px solid var(--linie);
    padding-left:14px;margin-left:-2px}
  .kopf nav .nav-unter a:hover,
  .kopf nav .nav-unter a:focus-visible{background:none;color:var(--akzent)}
  .kopf nav .nav-unter a[aria-current]{color:var(--akzent)}
}

/* ── 13 · Fuß ──────────────────────────────────────────────────────────────── */
/* Der Fuß liegt auf Nacht — dann müssen auch seine Rollen die der Nacht sein.
   Mit dem hellen Grauton standen die Spaltentitel bei 3,4:1 dunkel auf dunkel. */
.fuss{background:var(--nacht);color:#EDEBE6;--text-leise:#9C9A94}
.fuss a{color:inherit}
.fuss-raster{display:grid;gap:clamp(24px,3vw,52px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-block:var(--sektion) 28px}

/* ── 14 · Reduzierte Bewegung: dämpfen, nie abschalten ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  body{transition:none}
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-reveal].da{transition:opacity .3s ease}
  .karte{transition:border-color .2s ease}
  .karte:hover{transform:none}
  a.knopf::after,a.knopf:hover::after{transform:translateY(-.05em);transition:none}
  .wechsel.zu,.wechsel.auf{transition:opacity .2s ease;transform:none;opacity:0}
  .wechsel.zu{opacity:1}
  .stueck-strecke{height:340vh}
  .stueck-strecke--kurz{height:260vh}
}

/* ── 15 · Brücke (befristet) ───────────────────────────────────────────────── */
/* Das Seiten-CSS einiger Unterseiten rechnet im padding noch mit der Breite der
   alten Leiste am linken Rand. Diese Variable gibt es nicht mehr; ohne die vier
   Zeilen hier fiele dort der ganze Innenabstand auf null. Sobald der
   HTML-Durchgang die Rechnung entfernt hat, kann dieser Abschnitt ersatzlos weg. */
body .hero-innen{padding:0 var(--rand) calc(clamp(44px,8vh,108px) + var(--kopf-hub))}
body .sp-hud{padding:clamp(20px,4vh,64px) var(--rand)}
body .gs-innen{padding:clamp(16px,3.4vh,46px) var(--rand) clamp(18px,4vh,52px)}
body .hb-innen{padding:clamp(14px,3vh,40px) var(--rand) clamp(18px,4vh,50px)}

/* ── 16 · Bildgalerie: groß ansehen, zoomen, verschieben ───────────────────── */
/* Ein Auslöser ist ein echter Schalter (.lupe) um das Bild — nur so lässt sich
   die Galerie mit der Tastatur öffnen. Der Rahmen selbst wird von
   assets/galerie.js einmal je Seite gebaut; hier steht nur, wie er aussieht.
   Er liegt über dem Cookie-Banner (9998) und über dem Kopf (50). */
.lupe{
  position:relative;display:block;width:100%;padding:0;margin:0;border:0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:zoom-in;
  border-radius:var(--radius-klein);overflow:hidden;
}
.lupe>img{display:block;width:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lupe:hover>img,.lupe:focus-visible>img{transform:scale(1.035)}
.lupe-zeichen{
  position:absolute;top:.6rem;right:.6rem;z-index:2;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(23,23,21,.62);color:#fff;border-radius:8px;
  opacity:0;transform:scale(.9);
  transition:opacity .3s ease,transform .3s ease;
}
.lupe:hover .lupe-zeichen,.lupe:focus-visible .lupe-zeichen{opacity:1;transform:none}
.lupe-zeichen svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.gal{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
  background:rgba(10,10,9,.965);backdrop-filter:blur(4px);color:#EDEBE6}
.gal[hidden]{display:none}
.gal-buehne{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:4.6rem 1rem .5rem;touch-action:none}
.gal-halter{max-width:min(94vw,1500px);max-height:100%;
  transform-origin:center center;will-change:transform;cursor:zoom-in;
  transition:transform .18s cubic-bezier(.16,1,.3,1)}
.gal-halter.ist-gross{cursor:grab}
.gal-halter.zieht{cursor:grabbing;transition:none}
.gal-bild{display:block;max-width:100%;max-height:68vh;width:auto;height:auto;
  object-fit:contain;user-select:none;-webkit-user-drag:none;border-radius:2px}

.gal-x{position:absolute;top:1rem;right:1rem;z-index:3}
.gal-x,.gal-pfeil,.gal-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;min-width:46px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#EDEBE6;border-radius:var(--radius-klein);cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease}
.gal-x:hover,.gal-pfeil:hover,.gal-knopf:hover:not(:disabled){background:var(--rot);border-color:var(--rot)}
.gal-knopf:disabled{opacity:.34;cursor:not-allowed}
.gal-x svg,.gal-pfeil svg,.gal-knopf svg{width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.gal-zurueck{left:.75rem}.gal-vor{right:.75rem}
@media (min-width:768px){.gal-zurueck{left:1.5rem}.gal-vor{right:1.5rem}}

.gal-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.14)}
.gal-titel{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.gal-titel strong{font-family:var(--f-kopf);font-weight:800;font-size:1.02rem;line-height:1.2}
.gal-titel span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;opacity:.66}
.gal-werkzeug{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.gal-zahl{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  min-width:4.4rem;text-align:center;font-variant-numeric:tabular-nums;opacity:.82}


.gal-band{display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;
  padding:.7rem 1rem 1rem;scrollbar-width:thin}
.gal-band button{flex:none;width:78px;height:56px;padding:0;cursor:pointer;
  background:none;border:2px solid transparent;border-radius:4px;overflow:hidden;
  opacity:.5;transition:opacity .25s ease,border-color .25s ease}
.gal-band button img{width:100%;height:100%;object-fit:cover;display:block}
.gal-band button:hover{opacity:.85}
.gal-band button[aria-selected="true"]{opacity:1;border-color:var(--rot)}

@media (max-width:600px){
  .gal-buehne{padding:4rem .5rem .25rem}
  .gal-bild{max-height:58vh}
  .gal-titel strong{font-size:.92rem}
  .gal-band button{width:62px;height:46px}
}
/* Dämpfen, nie abschalten: das Bild springt ohne Weg, gezoomt wird weiter. */
@media (prefers-reduced-motion:reduce){
  .gal-halter{transition:none}
  .lupe>img,.lupe:hover>img,.lupe:focus-visible>img{transform:none;transition:none}
  .lupe-zeichen{transition:opacity .2s ease}
}

/* ── 18 · Linienbilder ─────────────────────────────────────────────────────
   Weisse Zeichnung auf Markenrot: die Handschrift der Blaupause, wie im
   Ladeauftritt. Jede Unterseite bekommt ihr eigenes Motiv — der Oberbau im
   Schnitt, das Grabenprofil, der Wandaufbau. Das Bild zeichnet sich beim
   Vorbeiscrollen selbst und arbeitet danach leise weiter.

   Der Kniff, der alles einfach macht: jeder Pfad traegt pathLength="100".
   Damit ist die Strichlaenge in CSS immer 100 — unabhaengig davon, wie lang
   die Linie wirklich ist. Kein Skript muss etwas messen. */
.linienbild{display:block;width:100%;height:auto;overflow:visible}
.js .linienbild [data-zeichnen]{
  stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.05s cubic-bezier(.32,.72,.28,1);
  transition-delay:calc(var(--v,0) * 1ms)}
.linienbild.gezeichnet [data-zeichnen]{stroke-dashoffset:0}
/* Was keine Linie ist (Kreise als Punkte, Fuellungen), blendet nur auf. */
.js .linienbild [data-auf]{opacity:0;transition:opacity .5s ease;
  transition-delay:calc(var(--v,0) * 1ms)}
.linienbild.gezeichnet [data-auf]{opacity:1}

/* Die Bewegung NACH dem Zeichnen. Sie beginnt erst, wenn die Linien stehen —
   sonst zappelt ein halb gezeichnetes Bild. */
.linienbild.gezeichnet .lb-pendel{animation:lb-pendel 4.6s 1.3s ease-in-out infinite;
  transform-box:fill-box;transform-origin:var(--dreh,50% 50%)}
@keyframes lb-pendel{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.linienbild.gezeichnet .lb-heben{animation:lb-heben 5.2s 1.3s ease-in-out infinite}
@keyframes lb-heben{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.linienbild.gezeichnet .lb-fahren{animation:lb-fahren 7s 1.3s ease-in-out infinite}
@keyframes lb-fahren{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
.linienbild.gezeichnet .lb-blinken{animation:lb-blinken 2.1s 1.3s ease-in-out infinite}
@keyframes lb-blinken{0%,100%{stroke-opacity:.22}50%{stroke-opacity:.95}}
.linienbild.gezeichnet .lb-rieseln{animation:lb-rieseln 3.4s 1.3s linear infinite}
@keyframes lb-rieseln{from{stroke-dashoffset:0}to{stroke-dashoffset:-12}}

/* Der Rahmen, in dem so ein Bild sitzt: Markenrot, Blaupause darunter —
   dieselbe Mechanik wie bei Karten und roten Sektionen (Abschnitt 3). */
.schnittbild{position:relative;isolation:isolate;overflow:hidden;
  background:var(--rot);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,38px);--blueprint-mass:300px}
.schnittbild::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:var(--blueprint) 0 0/var(--blueprint-mass) repeat;
  opacity:var(--blueprint-deckung);filter:var(--blueprint-filter)}
.schnittbild[data-blaupause="gleisbau"]{--blueprint:url('blueprint/gleisbau.svg')}
.schnittbild[data-blaupause="vegetationsarbeiten"]{--blueprint:url('blueprint/vegetationsarbeiten.svg')}
.schnittbild[data-blaupause="tiefbau"]{--blueprint:url('blueprint/tiefbau.svg')}
.schnittbild[data-blaupause="hochbau"]{--blueprint:url('blueprint/hochbau.svg')}
.schnittbild[data-blaupause="garten-landschaftsbau"]{--blueprint:url('blueprint/garten-landschaftsbau.svg')}
.schnittbild[data-blaupause="baulogistik"]{--blueprint:url('blueprint/baulogistik.svg')}
.schnittbild figcaption{margin:1.1em 0 0;color:#fff;opacity:.86;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.7}
.schnittbild .lb-titel{display:block;color:#fff;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:.7;margin-bottom:1.1em}

/* Daempfen, nie abschalten: die Zeichnung steht sofort, das Nachspiel ruht. */
@media (prefers-reduced-motion:reduce){
  .js .linienbild [data-zeichnen]{transition-duration:.01ms;stroke-dashoffset:0}
  .js .linienbild [data-auf]{transition-duration:.01ms;opacity:1}
  .linienbild.gezeichnet .lb-pendel,.linienbild.gezeichnet .lb-heben,.linienbild.gezeichnet .lb-fahren,
  .linienbild.gezeichnet .lb-rieseln{animation:none}
  .linienbild.gezeichnet .lb-blinken{animation:lb-blinken 4.2s ease-in-out infinite}
}

/* ── 19 · Räumliche Hero-Fotos ─────────────────────────────────────────────
   Ein Foto mit Tiefenkarte bekommt Raum: Nahes wandert, Fernes bleibt.
   Das Canvas liegt an derselben Stelle wie das Foto — darüber der Schleier
   (::after) und der Text, beide unverändert.

   Das Foto verschwindet erst, wenn der Ersatz nachweislich zeichnet: Die
   Klasse `hat-tiefe` setzt das Skript selbst, nachdem das erste Bild
   gerechnet ist. Ohne WebGL, bei einem Shader-Fehler oder wenn die Karte
   fehlt, bleibt schlicht das Foto stehen. */
.sektion--bild > canvas.hero-tiefe{
  position:absolute;inset:0;z-index:-2;display:block;
  width:100%;height:100%;object-fit:cover;
  opacity:var(--bild-deckung);
}
.sektion--bild.hat-tiefe > img{opacity:0}
/* Der Wechsel ist nichts, was jemand sehen soll — er passiert einmal beim
   Laden und geht in der Einblendung der Seite unter. */
.sektion--bild > img{transition:opacity .45s ease}

/* ── 20 · Die Marke aus Messpunkten ────────────────────────────────────────
   Eine Fläche, auf der sich das Logo oder der Schriftzug aus zehntausenden
   Punkten setzt (assets/marke-punkte.js). Ohne WebGL bleibt die Zeichnung
   darunter stehen — dieselbe Marke, nur ohne Bewegung.

   Die Leinwand wird erst eingehängt, wenn wirklich gerechnet wird. Vorher
   trägt `.mp-ersatz` die Fläche, danach blendet sie weg. */
.mp-buehne{
  position:relative;display:block;width:100%;
  /* Feste Hoehe, nicht Mindesthoehe: die Leinwand misst sich am Kasten,
     und ein Kasten, der spaeter waechst, verschiebt die Marke aus der
     Mitte. */
  height:clamp(320px,52vh,560px);
  overflow:hidden;isolation:isolate;
}
.mp-buehne canvas.mp-leinwand{
  position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1;
}
.mp-ersatz{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
  width:min(52%,420px);height:auto;opacity:.92;
  transition:opacity .6s ease;pointer-events:none;
}
.mp-ersatz.weg{opacity:0}
/* Eine Zeile darunter sagt, was zu sehen ist — sie steht im Fluss, nicht
   über der Fläche, und bleibt auch ohne Bewegung stehen. */
.mp-zeile{
  position:absolute;left:0;right:0;bottom:clamp(14px,2.4vh,26px);z-index:2;
  text-align:center;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  /* Gedämpft, nicht abgeschaltet: das Skript verlängert seine Runde selbst. */
  .mp-ersatz{transition-duration:1.4s}
}

/* Die Leinwand des Seitenkopfs (assets/hero-buehne.js) liegt an derselben
   Stelle wie das Foto — darüber der Schleier (::after) und der Text. Ohne
   diese Regel steht sie als Block im Fluss, schiebt den Text nach unten und
   zeigt ein verzerrtes Bild. Die Startseite bringt dieselbe Regel mit; hier
   steht sie für alle übrigen Seitenköpfe. */
.sektion--bild > canvas.hero-leinwand{
  position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;
}
/* Und das Foto muss DAHINTER liegen. Ohne diese Zeile steht es mit
   z-index auto über der Leinwand: die Bühne rechnet, man sieht sie nur
   nicht — genau das war auf den Gewerkeseiten der Fall. Sichtbar bleibt
   das Foto trotzdem, denn die Leinwand ist dort durchsichtig, wo sie die
   Bildtexturen nicht bekommen hat. */
.sektion--bild[data-hero-buehne] > img{z-index:-3}


/* ── 21 · Tag/Nacht-Schalter ───────────────────────────────────────────────
   Vorher stand dort das Wort „Nacht" in einer Knopfhülle — zwischen den
   Menüpunkten las es sich wie ein weiterer Menüpunkt. Jetzt ein Zeichen:
   Mond, solange es hell ist (das ist das Ziel des Klicks), Sonne im
   Nachtbild. Beide liegen im selben SVG; getauscht wird über die Klasse
   `nacht` auf <html>. */
.schalter-welt{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  border:1px solid var(--linie-stark);border-radius:50%;
  background:none;color:var(--text);cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.schalter-welt:hover{border-color:var(--akzent);transform:rotate(-12deg)}
.schalter-welt:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.schalter-welt svg{width:19px;height:19px;display:block}
.schalter-welt .sw-mond{fill:currentColor}
.schalter-welt .sw-sonne{display:none;fill:currentColor;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.schalter-welt .sw-sonne circle{fill:currentColor;stroke:none}
.nacht .schalter-welt .sw-mond{display:none}
.nacht .schalter-welt .sw-sonne{display:block}
@media (prefers-reduced-motion:reduce){
  .schalter-welt:hover{transform:none}
}


/* ── 22 · Seitenkopf mit der Punktmarke ────────────────────────────────────
   Die Fläche liegt HINTER der Schrift, nicht daneben: die Marke setzt sich
   groß im Hintergrund, der Text steht darauf. Ohne diese Regel stünde die
   Leinwand als Block im Fluss und schöbe den Text nach unten. */
.hero-marke{
  position:relative;min-height:min(78svh,700px);
  display:grid;align-items:end;overflow:hidden;isolation:isolate;
}
/* Die Marke steht in der rechten Bildhälfte, nicht mittig: sonst läuft sie
   durch die Überschrift. Auf schmalen Fenstern rutscht sie nach oben, wo der
   Text noch nicht steht. */
.hero-marke .mp-buehne--kopf{
  position:absolute;inset:0 0 0 auto;width:min(58%,720px);z-index:-1;height:auto;
  opacity:1;
}
@media (max-width:860px){
  .hero-marke .mp-buehne--kopf{inset:0 0 auto 0;width:100%;height:52%}
}
/* Ein Schleier von unten hält die Schrift lesbar, ohne die Marke zu löschen. */
.hero-marke::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,11,.94) 0%,rgba(12,12,11,.55) 34%,
    rgba(12,12,11,0) 68%);
}
.hero-marke .hero-innen{
  position:relative;z-index:2;width:100%;
  max-width:var(--bund);margin-inline:auto;
  padding:0 var(--rand) calc(clamp(48px,8vh,104px) + var(--kopf-hub));
}
.hero-marke h1{max-width:16ch;margin-bottom:.34em}
.hero-marke .zeile{max-width:52ch}
.hero-marke .mp-ersatz{width:min(38%,340px)}


/* ── 23 · Seitenkopf mit dem Logo als 3D-Modell ────────────────────────────
   Referenzen und Kontakt (geruest.hero_logo): derselbe Kopf wie auf den
   Gewerkeseiten — Foto mit Tiefe aus assets/hero-buehne.js, darin das Logo
   als Punktmodell (data-hero-form="logo"). Foto, Schleier und Farbrollen
   kommen aus .sektion--bild (§4), der Abstand unten aus .hero-innen (§15). */
.hero-logo{min-height:min(86svh,780px);display:grid;align-items:end}
.hero-logo .hero-innen{position:relative;z-index:2;width:100%;
  max-width:var(--bund);margin-inline:auto}
.hero-logo h1{max-width:15ch;margin-bottom:.34em}
.hero-logo .zeile{max-width:54ch}
.hero-logo .tasten{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.9rem}