/* ============================================================
   HB Partners — Variante „C Karte" (verfeinert), portiert aus
   outputs/hb-partners/varianten/c-karte/index.html (2026-08-28).
   Grundgedanke: Die Seite liest sich wie ein Kartenblatt aus dem
   Katasteramt — Rasterlinien, Flurstücks-Umrisse, Blattränder mit
   Monospace-Notizen, Pins. Gelb ist Markierungsfarbe, nie Fließtext.
   ============================================================ */

/* ------------------------------------------------------------
   0 — Schriften: selbst ausgeliefert (LG München I, Az. 3 O 17493/20).
   Source Serif 4 nur für h1/h2, Inter (variabel) für alles andere.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Source Serif 4";
  src:url("../fonts/sourceserif-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* ============================================================
   1 — Grundwerte
   ============================================================ */
:root{
  --gelb:        #F5CB1F;
  --gelb-matt:   rgba(245,203,31,.22);
  --schwarz:     #141414;
  --papier:      #F7F7F4;   /* technisches Papierweiss */
  --blatt:       #FFFFFF;
  --linie:       #DCDCD4;
  --linie-stark: #B4B4A9;
  --text:        #141414;
  --text-leise:  #4E4E47;   /* auf Papier ~7:1 — bewusst dunkel genug fuer Fliesstext */
  --dunkel-text: #F2F2EE;
  --dunkel-leise:#ABABA1;
  --rand:        clamp(20px, 4.4vw, 52px);
  --breite:      1180px;
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Nur fuer h1/h2. Der Rest bleibt serifenlos — die Kartensprache traegt C. */
  --serif: "Source Serif 4", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--schrift);
  font-size:clamp(16px, 0.55vw + 15px, 18px);
  line-height:1.68;
  color:var(--text);
  background-color:var(--papier);
  /* Der technische Grund: feines Millimeterraster statt Farbflaeche. */
  background-image:
    linear-gradient(to right, rgba(20,20,20,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,20,.045) 1px, transparent 1px);
  background-size:28px 28px;
  /* Sicherheitsnetz: dekorative Umrisse duerfen die Seite nie seitlich aufreissen.
     clip statt hidden — hidden macht den Body zum Scrollbehaelter und kann den
     klebenden Kopf aushebeln. */
  overflow-x:clip;
}

img{ max-width:100%; display:block; height:auto; }
h1,h2,h3{ margin:0; line-height:1.12; letter-spacing:-0.015em; font-weight:650; overflow-wrap:break-word; }
/* Serife nur hier. 600 statt 650: die Serife traegt schon von Haus aus mehr Gewicht
   als eine Grotesk, bei 650 wuerde sie klotzen statt zu wirken. */
h1,h2{ font-family:var(--serif); font-weight:600; }
h1{ font-size:clamp(2.15rem, 5.4vw, 3.8rem); letter-spacing:-0.018em; line-height:1.06; }
h2{ font-size:clamp(1.65rem, 3.2vw, 2.5rem); letter-spacing:-0.012em; line-height:1.14; }
h3{ font-size:clamp(1.12rem, 1.5vw, 1.42rem); }
p{ margin:0; overflow-wrap:break-word; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.huelle{ max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand); }
/* Sonst verschwindet der Anfang eines Abschnitts hinter dem klebenden Kopf. */
section[id], main[id]{ scroll-margin-top:88px; }
.mono{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }

/* Rubrik-Kopf: Monospace-Marginalie + Titel, wie eine Blattbeschriftung */
.augenbraue{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-leise); display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.augenbraue::before{
  content:""; width:22px; height:0; border-top:2px solid var(--gelb); flex:none;
}
.blei{ font-size:clamp(1.02rem, 1.2vw, 1.18rem); color:var(--text-leise); max-width:62ch; }

/* WordPress-Standardklasse — Menues und Widgets setzen sie voraus. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   2 — Sprungmarke und Fokus
   ============================================================ */
.sprungmarke{
  position:absolute; left:12px; top:-70px; z-index:100;
  background:var(--schwarz); color:#fff; padding:12px 18px;
  border-radius:2px; text-decoration:none; font-weight:600;
  transition:top .18s ease;
}
.sprungmarke:focus{ top:12px; }

/* Sichtbarer Fokus: schwarzer Ring (Kontrast) mit gelbem Hof (Marke).
   Gelb allein waere auf hellem Grund zu schwach. */
:focus-visible{
  outline:3px solid var(--schwarz);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(245,203,31,.5);
  border-radius:2px;
}
.terra :focus-visible, .fuss :focus-visible{ outline-color:var(--gelb); box-shadow:0 0 0 6px rgba(245,203,31,.28); }

/* ============================================================
   3 — Kopf und Navigation
   ============================================================ */
.kopf{
  position:sticky; top:0; z-index:50;
  background:rgba(247,247,244,.92);
  border-bottom:1px solid var(--linie);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
}
.kopf.gescrollt{ box-shadow:0 1px 0 var(--linie), 0 10px 24px -22px rgba(20,20,20,.5); }
/* Angemeldete sehen die WordPress-Leiste — der klebende Kopf muss darunter. */
body.admin-bar .kopf{ top:32px; }
@media (max-width:782px){ body.admin-bar .kopf{ top:46px; } }
.kopf-innen{
  max-width:var(--breite); margin-inline:auto; padding:10px var(--rand);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.marke{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  text-decoration:none; font-weight:600; padding:6px 2px;
}
.marke img{ max-height:44px; width:auto; }
.marke-feld{
  background:var(--gelb); color:var(--schwarz);
  font-weight:800; letter-spacing:.02em;
  padding:7px 10px; line-height:1; font-size:1.02rem;
}
.marke-wort{ font-family:var(--mono); font-size:.8rem; letter-spacing:.34em; text-transform:uppercase; }

.kopf-nav ul{ display:flex; align-items:center; gap:4px; }
.kopf-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  text-decoration:none; font-size:.95rem; color:var(--text-leise);
  border-bottom:2px solid transparent;
}
.kopf-nav a:hover{ color:var(--text); }
.kopf-nav a[aria-current]{ color:var(--text); border-bottom-color:var(--gelb); }

.nav-schalter{
  display:none; place-items:center;
  width:46px; height:46px; padding:0;
  background:transparent; border:1px solid var(--linie-stark); border-radius:2px;
  color:var(--text); cursor:pointer;
  transition:border-color .3s ease, background-color .3s ease;
}
/* Balken und Kreuz liegen UEBEREINANDER (beide in derselben Rasterzelle) und
   werden ein-/ausgeblendet. Mit display:none liesse sich nichts animieren. */
html.js .nav-schalter{ display:none; }
.nav-schalter svg{
  width:22px; height:22px; grid-area:1/1;
  transition:opacity .25s ease, transform .45s cubic-bezier(.4,1.4,.5,1);
}
.nav-schalter .kreuz{ opacity:0; transform:rotate(-90deg); }
.nav-schalter[aria-expanded="true"] .balken{ opacity:0; transform:rotate(90deg); }
.nav-schalter[aria-expanded="true"] .kreuz{ opacity:1; transform:rotate(0deg); }

/* ============================================================
   4 — Kartenblatt: Rahmen, Randnotizen, Bildplatte
   ============================================================ */
.blatt{
  position:relative;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  grid-template-rows:18px auto;
  gap:6px;
  padding:10px;
  background:var(--blatt);
  border:1px solid var(--linie-stark);
}
/* Ecken-Passkreuze — die kleine Geste, die ein Bild zu einem Blatt macht. */
.blatt::before, .blatt::after{
  content:""; position:absolute; width:12px; height:12px; pointer-events:none;
  border:2px solid var(--gelb);
}
.blatt::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.blatt::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.blatt-rand{ font-family:var(--mono); color:var(--text-leise); font-size:.74rem; letter-spacing:.14em; display:flex; }
.blatt-rand--oben{ grid-column:2; grid-row:1; justify-content:space-between; align-items:center; }
.blatt-rand--links{
  grid-column:1; grid-row:2; justify-content:space-between;
  align-items:center; writing-mode:vertical-rl; transform:rotate(180deg); padding-block:4px;
  /* In vertikaler Schreibrichtung ist die Hauptachse einer Flex-Zeile bereits
     senkrecht — flex-direction:column haette die Ziffern quer durch die 22px-Spalte
     verteilt und abgeschnitten. */
  flex-direction:row-reverse;
}
.platte{ grid-column:2; grid-row:2; margin:0; min-height:0; }

/* Nur im Held UND nur zweispaltig: das Blatt fuellt die Texthoehe, die Bildplatte
   nimmt sich den Rest. Die Regel steht deshalb in der 861px-Stufe weiter unten.
   Einspaltig (Handy, Tablet hochkant) waere sie falsch: dort steht das Bild UNTER
   dem Text, hat also keine Nachbarhoehe zu treffen — gemessen wurde es 650 px hoch
   und schob alles nach unten. Dort gilt das feste Seitenverhaeltnis aus .platte-bild. */

.platte-bild{
  position:relative;
  /* isolation erzeugt den Stapelkontext — sonst rutscht die Platzhalterflaeche
     (z-index:-1) hinter den Seitenhintergrund und man sieht sie nie. */
  isolation:isolate;
  /* Das Verhaeltnis kommt vom BILD (hb_blatt, 'verhaeltnis'). 4:3 nur als Rueckfall. */
  aspect-ratio:var(--bild-verhaeltnis, 4/3); overflow:hidden; background:transparent;
}
.platte-img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease, transform 1.2s cubic-bezier(.22,.61,.36,1); }
.platte-bild.bild-fehlt .platte-img{ opacity:0; }

.platte-fehlt{
  position:absolute; inset:0; z-index:-1;
  display:grid; place-items:center; text-align:center; padding:12px;
  color:var(--text-leise);
  background-color:#EFEFE9;
  background-image:repeating-linear-gradient(45deg, rgba(20,20,20,.07) 0 2px, transparent 2px 11px);
}
.platte-fehlt span{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.8; }

.platte-netz{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.platte-fuss{ grid-column:2; margin-top:8px; color:var(--text-leise); font-size:.62rem; }

/* Umrisse und Pins in den Platten */
.netz-flur{ fill:var(--gelb-matt); stroke:var(--gelb); stroke-width:2.2; stroke-linejoin:round; }
.netz-flur--hell{ fill:rgba(255,255,255,.10); stroke:#FFFFFF; stroke-width:1.6; }
.netz-raster{ stroke:rgba(255,255,255,.42); stroke-width:.6; }

/* ============================================================
   5 — Held
   ============================================================ */
.held{ position:relative; overflow:hidden; padding-block:clamp(44px, 6.4vw, 88px) clamp(60px, 8.6vw, 120px); }
/* align-items:stretch statt center: die Bildspalte soll GENAU so hoch werden wie
   die Textspalte. Vorher standen 574 px Text neben 391 px Bild — 183 px Versatz,
   den man als „nicht synchron" sieht, ohne ihn benennen zu koennen (Roberts Befund
   2026-08-30, nachgemessen). Mit stretch traegt das Raster die Hoehe, nicht eine
   geratene Seitenverhaeltnis-Zahl. */
.held-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px, 4vw, 52px); align-items:stretch; }
.held-notiz{ display:none; }
.held-text{ position:relative; z-index:1; }
.held h1{ margin-bottom:22px; }
/* Der Markenakzent sitzt bewusst NICHT auf einem Schriftzeichen — gelbe Schrift
   auf hellem Grund hielte den Kontrastwert nie. Also ein Feld statt einer Farbe. */
.held-marke{ display:inline-block; width:.42em; height:.42em; background:var(--gelb); margin-left:.28em; vertical-align:.06em; }
.held-lead{ font-size:clamp(1.06rem, 1.4vw, 1.22rem); margin-bottom:14px; max-width:46ch; }
/* Die Marginalie im Held steht ueber einer schmaleren Spalte als die uebrigen
   Rubrik-Koepfe (die Bildspalte nimmt sich mehr Platz). Etwas enger gesetzt, damit
   sie einzeilig bleibt — umgebrochen zerfaellt die gelbe Anstrich-Linie optisch
   vom Text, den sie anstreicht. */
.held .augenbraue{ font-size:clamp(.6rem, .72vw, .7rem); letter-spacing:.13em; }
.held-text p + p{ margin-top:16px; }
.held-fliess{ color:var(--text-leise); max-width:50ch; font-size:.97rem; }
.held-knopfreihe{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* Der Fortsatz der Flurstueck-Kette — dieselbe Zeichnung, nur draussen auf dem
   Papier. Deckt die ganze Held-Flaeche ab und liegt HINTER dem Kartenblatt: was
   ueber dem Blatt liegt, verdeckt dessen weisser Grund, sichtbar bleibt nur der
   Ueberstand. Kein Beschnitt, keine Maske — und dadurch auf jedem Format richtig.

   ⚠️ visibility:hidden ist KEIN Versehen. Die Pfade stehen in den Koordinaten des
   Bildausschnitts; wo sie auf dem Bildschirm hingehoeren, setzt hb.js als Matrix
   auf .fortsatz-lage und vergibt danach `gesetzt`. Ohne diese Sperre saehe man
   ohne JavaScript dauerhaft einen Knaeuel Striche in der linken oberen Ecke. */
.held-fortsatz{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
  visibility:hidden;
  color:var(--linie-stark);
}
.held-fortsatz.gesetzt{ visibility:visible; }
/* Die Strichstaerken stehen in Bildausschnitts-Einheiten — dieselbe Skala wie
   drinnen, damit die Linie an der Blattkante nicht ploetzlich duenner wird. */
.fortsatz-flur{ stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; opacity:.85; }

.knopf{
  display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 24px;
  background:var(--schwarz); color:#fff; text-decoration:none;
  font-weight:600; font-size:1rem; border:1px solid var(--schwarz); border-radius:2px;
  cursor:pointer; transition:transform .2s ease, background-color .2s ease;
}
.knopf svg{ width:18px; height:18px; transition:transform .25s ease; }
.knopf:hover{ background:#000; transform:translateY(-2px); }
.knopf:hover svg{ transform:translateX(4px); }
.knopf--gelb{ background:var(--gelb); border-color:var(--gelb); color:var(--schwarz); }
.knopf--gelb:hover{ background:#E9BE12; border-color:#E9BE12; }
.knopf-neben{
  display:inline-flex; align-items:center; min-height:44px;
  /* Groesser geworden am 11.09.2026 auf Roberts Wunsch: .72rem → .78–.86rem.
     Die Nummer ist im Held der zweite Weg zum Kontakt und stand neben dem 52 px
     hohen Knopf wie eine Fussnote.

     ⚠️ NACH OBEN GEDECKELT, UND DIE SPERRUNG GING VON .14em AUF .08em ZURUECK — aus
     einem Layout-Grund, nicht aus Geschmack: Die Schrift ist nichtproportional, die
     Zeile hat 19 Zeichen, und daneben steht der Knopf. Gemessen am 11.09. bei 1440 px:
     Textspalte 430 px, Knopf 230 px, Abstand 14 px — fuer die Nummer bleiben 186 px.
     Bei .84rem/.14em waren es 189,5 px, die Zeile brach um, die Textspalte wuchs um
     62 px, und weil das Raster auf `stretch` steht, wurde das LUFTBILD daneben 62 px
     hoeher. Eine halbe Stufe Schriftgroesse hat also die Bildhoehe veraendert.
     Wer hier wieder hochdreht, misst bitte dieselben drei Zahlen nach. */
  font-family:var(--mono); font-size:clamp(.78rem, .3vw + .73rem, .86rem);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-leise); text-decoration:none; border-bottom:2px solid var(--gelb);
}
.knopf-neben:hover{ color:var(--text); background:var(--gelb-matt); }

/* ============================================================
   6 — Ablauf als Weg
   ============================================================ */
.ablauf{ padding-block:clamp(64px, 8.6vw, 124px); }
.ablauf-kopf{ max-width:70ch; margin-bottom:clamp(34px, 4vw, 54px); }
.ablauf-kopf h2{ margin-bottom:16px; }

.weg{ position:relative; }
.weg-linie{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.weg-pfad{ fill:none; stroke:var(--linie-stark); stroke-width:2; stroke-linecap:round; stroke-dasharray:none; }

.stationen{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:26px; }
.station-kopf{ display:flex; align-items:flex-start; justify-content:flex-start; }
.station-nr{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-leise); margin-bottom:6px; }
.station h3{ font-size:clamp(1.05rem, 1.3vw, 1.24rem); }
.station-text{ margin-top:8px; color:var(--text-leise); font-size:.95rem; -webkit-hyphens:auto; hyphens:auto; }

.pin{ width:40px; height:52px; display:block; overflow:visible; }
.pin-koerper{ fill:var(--schwarz); }
.pin-punkt{ fill:var(--gelb); }
.pin-nr{ font-family:var(--mono); font-size:12px; font-weight:700; fill:var(--gelb); }

/* ============================================================
   7 — Leistungen als aufgeschlagene Standortakten
   ============================================================ */
.leistungen{ padding-block:clamp(64px, 8.6vw, 124px); }
.leistungen-kopf{ max-width:70ch; margin-bottom:clamp(38px, 5vw, 62px); }
.akten{ display:grid; gap:clamp(28px, 4vw, 48px); }

.akte{ position:relative; padding-top:16px; }
.akte-reiter{
  position:absolute; top:0; left:22px; z-index:2;
  background:var(--blatt); color:var(--schwarz);
  border:1px solid var(--linie); border-bottom:0;
  box-shadow:inset 0 3px 0 var(--gelb);
  padding:7px 13px 6px; font-weight:700; font-size:.68rem; letter-spacing:.18em;
}
.akte-innen{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr);
  background:var(--blatt); border:1px solid var(--linie);
}
/* Die gestrichelte Mittellinie ist der Falz — daran erkennt man die aufgeschlagene Akte. */
.akte-innen::after{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  border-left:1px dashed var(--linie); display:none;
}
.akte-seite{ padding:clamp(18px, 2.6vw, 30px); min-width:0; }
.akte-seite--text{ display:flex; flex-direction:column; justify-content:center; }
.akte-seite--text h3{ margin-bottom:12px; }
.akte-seite--text p.akte-text{ color:var(--text-leise); -webkit-hyphens:auto; hyphens:auto; }

.praxis{
  margin-top:22px; padding:16px 18px;
  background:var(--papier); border:1px solid var(--linie);
  border-left:3px solid var(--gelb);
}
.praxis-kopf{ display:flex; align-items:center; gap:8px; color:var(--text-leise); margin-bottom:8px; font-size:.65rem; }
.praxis-kopf svg{ width:14px; height:14px; flex:none; }
.praxis-ort{ font-weight:650; font-size:1.02rem; }
.praxis-text{ color:var(--text-leise); font-size:.94rem; margin-top:2px; }

/* ============================================================
   8 — Zeichenerklaerung (Zielgruppen)
   ============================================================ */
.zielgruppen{ padding-block:clamp(64px, 8.6vw, 124px); }
.zielgruppen-kopf{ max-width:70ch; margin-bottom:clamp(30px, 4vw, 48px); }
.legende{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  background:var(--blatt); border:1px solid var(--linie-stark);
}
.legende-zeile{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; align-items:start;
  padding:clamp(20px, 2.4vw, 28px);
  border-bottom:1px solid var(--linie);
}
.legende-zeile:last-child{ border-bottom:0; }
.legende-symbol{
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--papier); border:1px solid var(--linie-stark); color:var(--schwarz);
}
.legende-symbol svg{ width:28px; height:28px; }
.legende-zeile h3{ margin-bottom:6px; }
.legende-zeile p{ color:var(--text-leise); font-size:.96rem; -webkit-hyphens:auto; hyphens:auto; }

/* ============================================================
   9 — Terra Vision (dunkles Blatt)
   ============================================================ */
.terra{
  background:var(--schwarz); color:var(--dunkel-text);
  padding-block:clamp(68px, 8.6vw, 128px);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:28px 28px;
}
.terra .augenbraue{ color:var(--dunkel-leise); }
/* align-items:start, nicht center: Die Tafel daneben ist deutlich höher als der
   Text. Zentriert schwebte der Titel in der Mitte der Sektion, oben klaffte Leere
   — gemessen 1095 px Abschnitt, Titel erst bei 470 px. */
.terra-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px, 4vw, 56px); align-items:start; }
.terra h2{ margin-bottom:18px; }
/* Der Satz, der die Aussage des Abschnitts trägt: hell, größer, direkt unter dem Titel. */
.terra-lead{ font-size:clamp(1.06rem, 1.4vw, 1.24rem); color:var(--dunkel-text); max-width:44ch; margin-top:16px; }
.terra-fliess{ color:var(--dunkel-leise); max-width:46ch; margin-top:18px; }

/* Das Kartenblatt im dunklen Abschnitt: heller Rahmen waere ein Fremdkoerper,
   also traegt es hier dieselbe Sprache in dunkel. */
.terra-blatt{ background:#1B1B18; border-color:#3A3A34; }
.terra-blatt .blatt-rand{ color:var(--dunkel-leise); }
.terra-blatt .platte-fuss{ color:var(--dunkel-leise); }

/* Der Ablauf als Reihe unter Text und Bild. Fuenf Stufen nebeneinander — waagerecht
   gelesen ist ein Weg ein Weg; untereinander waere es wieder eine Liste, und davon
   hat die Seite schon zwei. auto-fit statt fester Spaltenzahl: Wer einen sechsten
   Schritt eintraegt, bekommt ihn umgebrochen statt gequetscht. */
.tv-reihe{
  list-style:none; margin:clamp(34px, 4.4vw, 56px) 0 0; padding:0;
  display:grid; gap:1px; background:#33332E; border:1px solid #33332E;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.tv-stufe{ background:var(--schwarz); padding:18px 18px 20px; }
.tv-nr{
  display:inline-block; font-size:.66rem; letter-spacing:.1em;
  color:var(--gelb); margin-bottom:10px;
}
.tv-name{ font-weight:650; line-height:1.3; }
.tv-text{ color:var(--dunkel-leise); font-size:.84rem; margin-top:4px; }

/* Die Bilanz. Die erste Zahl ist die Aussage des Abschnitts (die Tage) und steht
   deutlich groesser als die uebrigen drei. */
.tv-bilanz{ margin-top:clamp(28px, 3.4vw, 44px); }
.tv-bilanz-kopf{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dunkel-leise); }
.tv-bilanz ul{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; gap:18px 32px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.tv-bilanz li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline; }
.tv-zahl{ font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.tv-bilanz li:first-child .tv-zahl{ font-size:2.8rem; color:var(--gelb); }
.tv-wofuer{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dunkel-leise); }
.tv-fuss{ margin-top:22px; color:var(--dunkel-leise); font-size:.8rem; max-width:70ch; }

/* ============================================================
   10 — Ueber uns
   ============================================================ */
.ueber{ padding-block:clamp(64px, 8.6vw, 124px); }
.ueber-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(30px, 4vw, 54px); align-items:center; }
.ueber h2{ margin-bottom:18px; }
.ueber-fliess{ color:var(--text-leise); max-width:56ch; margin-top:18px; }
.gruender{ display:grid; gap:14px; margin-top:28px; }
.gruender-karte{ background:var(--blatt); border:1px solid var(--linie-stark); border-left:3px solid var(--gelb); padding:16px 18px; }
.gruender-name{ font-weight:650; }
.gruender-rolle{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-leise); margin-top:4px; }

.kennzahlen{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-top:34px; border-top:1px solid var(--linie-stark); }
.kennzahl{ padding:18px 0; border-bottom:1px solid var(--linie); }
.kennzahl-wert{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.kennzahl-wert .zahl{ color:var(--schwarz); }
.kennzahl-text{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-leise); margin-top:10px; }

/* ============================================================
   11 — Kontakt
   ============================================================ */
.kontakt{ padding-block:clamp(64px, 8.6vw, 124px); }
.kontakt-kopf{ max-width:70ch; margin-bottom:clamp(32px, 4vw, 52px); }
.kontakt-kopf h2{ margin-bottom:16px; }
/* stretch statt start: die Kontaktkarte und das Formular sind zwei Kaesten
   nebeneinander — enden sie auf verschiedenen Hoehen, wirkt die Zeile schief.
   Gemessen 2026-08-30: 22 px Versatz bei 1440 px, 97 px bei 900 px. */
.kontakt-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px, 3.5vw, 46px); align-items:stretch; }

.kontaktkarte{
  background:var(--blatt); border:1px solid var(--linie-stark); padding:clamp(20px, 2.6vw, 28px);
  display:flex; flex-direction:column;
}
.kontaktkarte h3{ margin-bottom:16px; font-size:1.08rem; }
.kontakt-zeile{ display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--linie); }
.kontakt-zeile:first-of-type{ border-top:0; }
.kontakt-zeile svg{ width:20px; height:20px; color:var(--text-leise); margin-top:3px; }
.kontakt-zeile a{ text-decoration:none; border-bottom:2px solid var(--gelb); display:inline-flex; align-items:center; min-height:44px; }
.kontakt-zeile a:hover{ background:var(--gelb-matt); }
/* Die schematische Karte nimmt sich den Rest der Hoehe — so fuellt der linke
   Kasten genau bis zur Unterkante des Formulars, ohne dass irgendwo Luft entsteht. */
.kontakt-mini{
  margin-top:20px; border:1px solid var(--linie-stark); position:relative; overflow:hidden;
  flex:1 1 auto; min-height:clamp(150px, 18vw, 230px);
  /* Das Raster als Hintergrund statt im SVG: es skaliert in jedem Seitenverhaeltnis
     gleich und kann nicht verrutschen. */
  background-color:var(--papier);
  background-image:
    linear-gradient(to right, rgba(20,20,20,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,20,.09) 1px, transparent 1px);
  background-size:34px 34px;
  display:grid; place-items:center;
}
/* `meet` statt `slice`: die Zeichnung passt sich ein, statt beschnitten zu werden.
   Etwas Rand ringsum ist gewollt — sie liegt wie ein Ausschnitt auf dem Raster. */
.kontakt-mini-riss{ width:88%; height:auto; max-height:78%; }

/* DAS FOTO DES BESPRECHUNGSORTS — seit 19.09.2026 an der Stelle der Schemakarte.
   ⚠️ `contain`, nie `cover`. Der Kasten waechst mit der Resthoehe des Kontakt-
   kastens, sein Seitenverhaeltnis ist also unbekannt; mit `cover` wuerde das Bild
   je nach Bildschirm anders beschnitten — auf dem Handy waere vom Eingang womoeglich
   nur noch Wand zu sehen. Stehende Anweisung seit 11.09.: kein Bild auf einer
   Kundenseite wird beschnitten, Rasterruhe entsteht ueber Weissraum.
   Das Papierraster des Kastens bleibt als Rand stehen — das Foto liegt darauf wie
   ein eingeklebter Abzug, dieselbe Sprache wie die Akten weiter oben. */
.kontakt-mini-foto{ margin:20px 0 0; padding:14px 14px 30px; }
.kontakt-mini-bild{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block; background:var(--papier);
}
.kontakt-mini-fuss{
  position:absolute; left:12px; bottom:10px;
  font-size:.6rem; color:var(--text-leise);
}

/* Das Formular ist der Ort, an dem die Seite ihr Geld verdient — es bekommt
   deshalb eine eigene Behandlung: ein Kopf, der sagt worum es geht, klare
   Feldkanten und eine gelbe Markierung am aktiven Feld (dieselbe Sprache wie
   die markierten Flurstuecke auf den Karten). Ueberarbeitet 2026-08-30. */
.formular{
  background:var(--blatt); border:1px solid var(--linie-stark);
  padding:clamp(22px, 2.8vw, 34px);
  display:flex; flex-direction:column;
}
.formular-kopf{ margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--linie); }
.formular-kopf h3{ font-size:1.08rem; margin-bottom:6px; }
.formular-kopf p{ color:var(--text-leise); font-size:.92rem; }

.feld{ margin-bottom:20px; position:relative; }
.feld-paar{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 20px; }
label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-leise); margin-bottom:8px;
}
/* Pflichtfelder ohne Sternchen-Wildwuchs: ein Wort sagt es einmal, oben. */
.feld--pflicht label::after{
  content:"Pflichtfeld"; float:right; letter-spacing:.1em; opacity:.62; text-transform:none;
  font-size:.62rem;
}
input[type="text"], input[type="email"], input[type="tel"], textarea{
  width:100%; min-height:54px; padding:15px 16px;
  /* 16px ist Pflicht: darunter zoomt iOS beim Antippen in das Feld hinein. */
  font-size:16px; font-family:inherit; line-height:1.5; color:var(--text);
  background:var(--papier);
  border:1px solid var(--linie-stark);
  /* Die linke Kante ist der Platz fuer die gelbe Markierung beim Tippen. */
  border-left:3px solid var(--linie-stark);
  border-radius:2px;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
textarea{ min-height:150px; resize:vertical; }
input:hover, textarea:hover{ border-color:var(--text-leise); }
input:focus, textarea:focus{
  background:#fff;
  border-color:var(--linie-stark); border-left-color:var(--gelb);
  box-shadow:inset 0 0 0 1px var(--linie-stark);
}
/* Ein Feld, das schon etwas enthaelt, bleibt markiert — man sieht auf einen Blick,
   was ausgefuellt ist. */
input:not(:placeholder-shown), textarea:not(:placeholder-shown){ border-left-color:var(--gelb); background:#fff; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Formular-Bots ein Feld wie jedes andere. */
.hb-falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.einwilligung{
  display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; align-items:start;
  margin:4px 0 24px; padding:16px 18px;
  background:var(--papier); border:1px solid var(--linie);
}
.einwilligung input{ width:24px; height:24px; margin:2px 0 0; accent-color:var(--schwarz); }
.einwilligung label{
  font-family:var(--schrift); font-size:.9rem; letter-spacing:0; text-transform:none;
  color:var(--text-leise); line-height:1.55; margin:0; min-height:44px;
}
.formular .knopf{ width:100%; justify-content:center; min-height:56px; font-size:1.02rem; }
.formular-fuss{ margin-top:14px; font-size:.82rem; color:var(--text-leise); text-align:center; }
.formular-fuss a{ text-decoration:none; border-bottom:2px solid var(--gelb); }

.formular-hinweis{
  margin-top:16px; padding:14px 16px; font-size:.92rem;
  background:var(--gelb-matt); border-left:3px solid var(--gelb); color:var(--text);
}
.formular-hinweis:empty{ display:none; }
.knopf[disabled]{ opacity:.55; cursor:progress; transform:none; }

/* ============================================================
   12 — Fusszeile
   ============================================================ */
.fuss{ background:var(--schwarz); color:var(--dunkel-text); padding-block:clamp(40px, 5vw, 64px); }
.fuss-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; }
.fuss-nav ul{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.fuss-nav a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; color:var(--dunkel-text); border-bottom:2px solid transparent; }
.fuss-nav a:hover{ border-bottom-color:var(--gelb); }
.fuss-notiz{ margin-top:32px; padding-top:20px; border-top:1px solid #33332E; color:var(--dunkel-leise); font-size:.8rem; }

/* ============================================================
   13 — Unterseiten (Impressum, Datenschutz) und 404
   ============================================================ */
.seite{ padding-block:clamp(44px, 6vw, 88px); }
.seite-kopf{ max-width:76ch; margin-bottom:clamp(26px, 3vw, 40px); }
.seite-kopf h1{ font-size:clamp(1.9rem, 4vw, 3rem); }
.seite-inhalt{
  max-width:76ch; background:var(--blatt); border:1px solid var(--linie);
  padding:clamp(22px, 3.4vw, 44px);
}
.seite-inhalt h2{ font-size:clamp(1.25rem, 2vw, 1.6rem); margin:1.9em 0 .55em; }
.seite-inhalt h2:first-child{ margin-top:0; }
.seite-inhalt h3{ font-size:1.08rem; margin:1.5em 0 .45em; }
.seite-inhalt p{ margin:0 0 1em; }
.seite-inhalt ul, .seite-inhalt ol{ margin:0 0 1em; padding-left:1.35em; }
.seite-inhalt ul{ list-style:disc; }
.seite-inhalt ol{ list-style:decimal; }
.seite-inhalt li{ margin-bottom:.4em; }
.seite-inhalt a{ text-decoration:none; border-bottom:2px solid var(--gelb); }
.seite-inhalt a:hover{ background:var(--gelb-matt); }
/* Hinweiskasten der Agentur auf Rechtsseiten: was noch fehlt, soll beim
   Draufschauen auffallen — nicht erst, wenn jemand abmahnt. Bewusst auffaellig
   und bewusst als „Hinweis der Agentur" gekennzeichnet, damit klar ist, dass er
   vor dem Livegang verschwindet. */
.hb-hinweis{
  margin:0 0 1.8em; padding:14px 16px;
  background:var(--gelb-matt); border-left:3px solid var(--gelb);
  font-size:.94rem; line-height:1.6;
}
.hb-hinweis strong{ display:block; margin-bottom:2px; }

.seite-inhalt p + h2{ margin-top:1.9em; }
/* ⚠️ HIER STAND `br + br{ display:none }` — und hat den halben Adressblock
   verschluckt. Der Nachbar-Selektor `+` betrachtet nur ELEMENTE, Textknoten
   zaehlen nicht: in `A<br>B<br>C` ist das zweite <br> ein direkter Nachbar des
   ersten. Die Regel gegen doppelte Leerzeilen traf also JEDEN Umbruch ausser dem
   ersten — im Impressum stand „RE GbRArnold-Zweig-Straße 3313189 Berlin".
   Gemessen am 2026-08-30 auf der Live-Seite. Nicht wieder einbauen. */

.seite-fragen{ max-width:76ch; margin-top:22px; color:var(--text-leise); font-size:.95rem; }
.seite-fragen a{ text-decoration:none; border-bottom:2px solid var(--gelb); }
.seite-fragen a:hover{ background:var(--gelb-matt); }

/* ============================================================
   14 — Bewegung
   ============================================================ */
/* Ruhiger Takt (Roberts Wunsch 2026-08-30): die Auftritte liefen vorher in .7 s
   ab und wirkten hektisch. 1.15 s ist langsam genug, dass man die Bewegung als
   Bewegung wahrnimmt, und kurz genug, dass niemand auf Inhalt wartet. Wer den
   Abschnitt schnell durchscrollt, sieht ihn trotzdem fertig — das Sicherheitsnetz
   in hb.js zeigt nach 1.8 s alles, was im Bild steht. */
/* Takt (vierte Runde 2026-08-30). Vorher standen hier 2,2 s / 3,4 s — so langsam,
   dass das Auge die Bewegung gar nicht mehr als Bewegung las: Die Seite wirkte
   still, obwohl staendig etwas lief. Jetzt kuerzer, dafuer VIELFAELTIGER (Anflug
   aus wechselnden Richtungen, gestaffelte Listen) und mit scrollgebundener
   Bewegung (data-parallax in hb.js), die nicht einmalig ablaeuft, sondern
   solange laeuft, wie gescrollt wird.
     Auftritt allgemein 1.3s · im Held 1.9s · Umrisse 2.2s / im Held 3.0s
     Pins 1.2s · Balken 1.9s · Zahlen 2.2s (in hb.js)
   Die Auftritte WIEDERHOLEN sich beim Zurueckscrollen. */
html.js .auf{
  opacity:0; transform:translateY(22px);
  /* Weiche Kurve statt `ease`: langsam anfahren, lange ausrollen. Das ist der
     Unterschied zwischen „es bewegt sich" und „es gleitet". */
  transition:opacity 2s cubic-bezier(.16,.68,.28,1), transform 2s cubic-bezier(.16,.68,.28,1);
}

/* Der Held bekommt mehr Zeit als der Rest: er ist das Erste, was jemand sieht,
   und laeuft nicht gegen einen Scroll an. Roberts Wunsch 2026-08-30 („vor allem
   auf der Hero"). Blatt und Text kommen leicht versetzt — das Bild fuehrt. */
html.js .held .auf{
  transform:translateY(30px);
  transition:opacity 3.4s cubic-bezier(.16,.68,.28,1), transform 3.4s cubic-bezier(.16,.68,.28,1);
}
/* ⚠️ DIESE ZWEI ZAHLEN SIND DER STARTSCHUSS FUER DIE UMRISSE.
   hb.js wartet das Ende DIESER Einblendung ab, bevor sich die Flurstuecke
   zeichnen (nachDemEinblenden). Wer hier hochdreht, verschiebt die Umrisse mit:
   1,0 + 3,4 = das Bild steht bei 4,4 s, die Zeichnung laeuft danach.
   Vorher 1,8 + 4,6 = 6,4 s — und die Umrisse waren da schon fast durch, weil
   sie ab Sekunde 0 hinter der noch durchsichtigen Karte liefen. */
html.js .held .blatt.auf{ transition-delay:1s; }
/* ⚠️ DER FORTSATZ MUSS EXAKT DEN GLEICHEN TAKT HABEN WIE DAS BLATT.
   Waehrend der Einblendung schiebt `.held .auf` beide um 30 px nach oben. Das Blatt
   traegt das Luftbild, der Fortsatz die Fortsetzung derselben Linien — laufen die
   zwei Bewegungen auch nur 100 ms auseinander, wandert die Linie an der Blattkante
   sichtbar gegeneinander. Gleiche Dauer, gleicher Vorlauf, gleiche Kurve. */
html.js .held .held-fortsatz.auf{ transition-delay:1s; }
html.js .auf.sichtbar{ opacity:1; transform:none; }

/* E-Mail-Adressen und Telefonnummern nie mitten im Wort umbrechen.
   
   ⚠️ Der Bruch passierte NICHT am @, sondern am BINDESTRICH: Browser duerfen nach
   einem Bindestrich umbrechen, und „hb-partners.de" hat einen. Auf dem Handy stand
   deshalb „kontakt@hb-" in der einen und „partners.de" in der naechsten Zeile.
   Robert am 31.08.: „Mir waere es lieber, wenn die komplette E-Mail auf einer
   Zeile ist."
   Die Adresse rueckt jetzt als Ganzes in die naechste Zeile, statt zu zerfallen.
   Vor dem Vorbild dieser Regel gewarnt: `nowrap` auf beliebigem Text erzeugt
   Querlauf. Hier ist es sicher, weil die laengste Adresse im Bestand deutlich
   schmaler ist als der schmalste Bildschirm — bei laengeren Adressen stattdessen
   die Schriftgroesse an dieser Stelle senken, nicht den Bruch wieder erlauben. */
a[href^="mailto:"], a[href^="tel:"]{ white-space:nowrap; }

/* Kontakt: erst die Ueberschrift, dann die Karten.
   
   ⚠️ Gemessen 31.08.: Der Kopf (.kontakt-kopf.text-auf) staffelt seine Zeilen bis
   0,9 s, waehrend Karte und Formular daneben bei 0 s starten — der Beobachter
   loest jedes .auf-Element einzeln aus, und beide Spalten kreuzen die Schwelle
   fast gleichzeitig. Sichtbar war deshalb: Formular da, Ueberschrift kommt nach.
   Robert: „Zuerst kommt das Kontaktformular und dann die Ueberschrift. Das soll
   ja genau andersrum sein."
   Die Verzoegerung steht bewusst NUR am .sichtbar-Zustand — beim Herausscrollen
   soll nichts nachhaengen. Und sie sitzt im CSS statt im JS, damit ein Ausfall
   des Skripts hier nichts verstecken kann. */
/* 1,5 s ist KEIN Gefuehlswert: die laengste Staffel in .text-auf steht bei 1,3 s
   (nth-child(n+4)). Der Kontakt-Kopf hat heute drei Zeilen und braucht nur 0,9 s —
   wer eine vierte hinzufuegt, verschiebt ihn auf 1,3 s. Die Karte muss deshalb
   hinter dem MAXIMUM liegen, nicht hinter dem heutigen Fall.
   scripts/pruefungen/kontakt-reihenfolge.mjs rechnet genau das nach. */
html.js .kontakt-raster > .auf.sichtbar{ transition-delay:1.05s; }
html.js .kontakt-raster > .auf.sichtbar:nth-child(2){ transition-delay:1.3s; }
/* Traeger, der nur zeichnen soll, aber nicht selbst einblendet. */
html.js .auf--still{ opacity:1; transform:none; transition:none; }

/* Anflug aus wechselnden Richtungen: alle 19 Auftritte kamen vorher von unten,
   und Gleichfoermigkeit liest sich als Stillstand. Die Akten kommen abwechselnd
   von links und rechts — das folgt der Leserichtung des Wechsel-Layouts.

   ⚠️ DER BEHAELTER MUSS SEITLICH ABSCHNEIDEN. Ohne das verbreitert eine um 46 px
   verschobene Akte die ganze Seite: bei 820 px Fenster wurden daraus 830 px, die
   Akten ragten links und rechts heraus — genau das, was Robert als „die Website
   ist versetzt" gesehen hat (2026-08-30).
   `clip` statt `hidden`, weil `hidden` die andere Achse zu `auto` zwingt und der
   Akten-Reiter oben abgeschnitten wuerde. */
.akten{ overflow-x:clip; }
html.js .auf--links{ transform:translate3d(-34px, 14px, 0); }
html.js .auf--rechts{ transform:translate3d(34px, 14px, 0); }
html.js .auf--links.sichtbar, html.js .auf--rechts.sichtbar{ transform:none; }

/* Am Handy stehen die Akten ohnehin untereinander — dort waere der seitliche
   Anflug nur Unruhe und braeuchte Platz, den es nicht gibt. */
@media (max-width: 860px){
  html.js .auf--links, html.js .auf--rechts{ transform:translate3d(0, 22px, 0); }
}

/* Zeilen einer Liste kommen nacheinander statt als Block. */
html.js .legende-zeile{ transition-delay:calc(var(--nr, 0) * .34s); }

/* TEXTE TRETEN AUF — bisher bewegten sich nur Kaesten und Bilder, waehrend jede
   Ueberschrift und jeder Fliesstext still dastand (Roberts Befund 2026-08-30:
   „keine Scrollanimationen bei den Texten").

   Bewusst DREI verschiedene Bewegungen statt einer, gestaffelt von oben nach unten:
     · die Marginalie schiebt sich von links ein — in dieselbe Richtung, in die
       ihre gelbe Anstrich-Linie zeigt
     · die Ueberschrift kommt von unten
     · der Fliesstext blendet nur auf, ohne sich zu bewegen (er ist der ruhige Teil)
   So wirkt der Abschnitt aufgebaut statt eingeblendet. */
html.js .text-auf > *{
  opacity:0;
  transition:opacity 1.7s cubic-bezier(.16,.68,.28,1), transform 1.7s cubic-bezier(.16,.68,.28,1);
}
html.js .text-auf > .augenbraue{ transform:translate3d(-22px, 0, 0); }
html.js .text-auf > h2, html.js .text-auf > h3{ transform:translate3d(0, 20px, 0); }
html.js .text-auf > p, html.js .text-auf > div{ transform:translate3d(0, 12px, 0); }

html.js .text-auf.sichtbar > *{ opacity:1; transform:none; }
html.js .text-auf.sichtbar > *:nth-child(1){ transition-delay:.08s; }
html.js .text-auf.sichtbar > *:nth-child(2){ transition-delay:.34s; }
html.js .text-auf.sichtbar > *:nth-child(3){ transition-delay:.6s; }
html.js .text-auf.sichtbar > *:nth-child(n+4){ transition-delay:.86s; }

/* Die Akten-Texte haengen an ihrer Akte, nicht an einem eigenen Beobachter —
   sie treten auf, sobald die Akte sichtbar wird. */
html.js .akte.sichtbar .text-auf > *{ opacity:1; transform:none; }
html.js .akte.sichtbar .text-auf > *:nth-child(1){ transition-delay:.22s; }
html.js .akte.sichtbar .text-auf > *:nth-child(2){ transition-delay:.34s; }
html.js .akte.sichtbar .text-auf > *:nth-child(3){ transition-delay:.46s; }

@media (prefers-reduced-motion: reduce){
  html.js .text-auf > *{ transform:none; transition:opacity .8s ease; }
  html.js .text-auf.sichtbar > *, html.js .akte.sichtbar .text-auf > *{ opacity:1; }
}

/* DER HELD BAUT SICH AUF. Bisher trat dort nur das Bild-Blatt an — Ueberschrift,
   Absaetze und Knoepfe standen sofort fertig da. Beim Oeffnen der Seite passierte
   also fast nichts, und genau das las sich als „die Animationen laufen nicht"
   (Roberts Befund 2026-08-30). Jetzt kommt der Text Zeile fuer Zeile, das Bild
   fuehrt weiter. */
html.js .held-text > *{
  opacity:0; transform:translate3d(0, 16px, 0);
  transition:opacity 2.2s cubic-bezier(.16,.68,.28,1), transform 2.2s cubic-bezier(.16,.68,.28,1);
}
html.js .held-text.aufgebaut > *{ opacity:1; transform:none; }
html.js .held-text.aufgebaut > *:nth-child(1){ transition-delay:0s; }
html.js .held-text.aufgebaut > *:nth-child(2){ transition-delay:.8s; }
html.js .held-text.aufgebaut > *:nth-child(3){ transition-delay:1.6s; }
html.js .held-text.aufgebaut > *:nth-child(4){ transition-delay:2.5s; }
html.js .held-text.aufgebaut > *:nth-child(n+5){ transition-delay:3.3s; }
@media (prefers-reduced-motion: reduce){
  html.js .held-text > *{ opacity:1; transform:none; transition:none; }
}

html.js .station:nth-child(2){ transition-delay:.42s; }
html.js .station:nth-child(3){ transition-delay:.84s; }
html.js .station:nth-child(4){ transition-delay:1.26s; }

/* Die Umrisse zeichnen sich sichtbar — das ist der Kern der Kartensprache und
   darf sich Zeit nehmen. */
.zeichnen-pfad{ transition:stroke-dashoffset 3400ms cubic-bezier(.16,.68,.28,1); }
/* Im Held zeichnen sich die Flurstuecke besonders ruhig — sie sind dort die
   eigentliche Geste, nicht Beiwerk. */
/* 6500ms stammten aus der Zeit, als diese Bewegung hinter der noch
   durchsichtigen Karte lief und kuenstlich gestreckt war, damit ueberhaupt
   noch etwas davon zu sehen war. Jetzt startet sie erst, wenn das Bild steht —
   4800ms sind dann sichtbare 4,8 Sekunden statt kaschierter. */
.held .zeichnen-pfad{ transition-duration:4800ms; }

/* SVG-Pins: Die Position steht im transform-ATTRIBUT des aeusseren <g>.
   Animiert wird das innere <g> per CSS — sonst ueberschreibt die CSS-transform
   das Attribut und alle Pins sitzen auf 0,0. */
html.js .pin-anim, html.js .netz-pin-anim{ opacity:0; transform:translateY(-16px); }
html.js .sichtbar .pin-anim, html.js .sichtbar .netz-pin-anim{
  opacity:1; transform:none;
  transition:opacity 1.8s ease, transform 2.4s cubic-bezier(.2,1.28,.4,1);
}
html.js .sichtbar .netz-pin-anim{ transition-delay:1s; }
html.js .held .sichtbar .netz-pin-anim{ transition-delay:1.5s; }


@media (hover:hover){
  .platte-bild:hover .platte-img{ transform:scale(1.03); }
}
/* Auch das Heranfahren des Bildes ruhiger — 1.2 s wirkte wie ein Ruck. */
.platte-img{ transition:opacity .5s ease, transform 2.2s cubic-bezier(.16,.68,.28,1); }

/* „Bewegung reduzieren" heisst NICHT „gar nichts mehr".
   Die Einstellung richtet sich gegen VERSCHIEBUNG — Dinge, die durchs Bild
   fahren, koennen Schwindel ausloesen. Ein sanftes Ein- und Ausblenden ist davon
   nicht gemeint (WCAG 2.3.3 spricht von Bewegung, nicht von Deckkraft).
   Vorher schaltete dieser Block ALLES ab; wer die Einstellung im System hat, sah
   eine voellig statische Seite und konnte zu Recht sagen „da laeuft nichts".
   Jetzt: keine Verschiebung, kein Parallax, kein Zaehlen — aber weiterhin ein
   ruhiges Auf- und Zublenden. */
@media (prefers-reduced-motion: reduce){
  html.js .auf{
    opacity:0; transform:none;
    transition:opacity .8s ease;
  }
  html.js .auf.sichtbar{ opacity:1; transform:none; }
  html.js .auf--links, html.js .auf--rechts{ transform:none; }
  html.js .held-text > *{ opacity:0; transform:none; transition:opacity .8s ease; }
  html.js .held-text.aufgebaut > *{ opacity:1; }

  /* Diese hier bleiben aus: sie BEWEGEN wirklich etwas. */
  html.js .kopf-nav, html.js .kopf-nav li, .nav-schalter svg{ transition:none; }
  html.js .kopf-nav li{ opacity:1; transform:none; }
  html.js .pin-anim, html.js .netz-pin-anim{ opacity:1; transform:none; transition:none; }
  .zeichnen-pfad{ transition:none; }
  .platte-img, .knopf, .knopf svg{ transition:none; }
  .platte-bild:hover .platte-img{ transform:none; }
}

/* ============================================================
   15 — Breitenstufen
   ============================================================ */
@media (max-width: 860px){
  /* Das Menue faehrt auf wie ein Blatt, das aufgeklappt wird: die Flaeche waechst
     von oben, die Punkte kommen einer nach dem anderen nach. `display:none` waere
     hart und liesse sich nicht animieren — deshalb Hoehe 0 plus visibility, was
     Tastatur und Vorlesehilfen genauso zuverlaessig aussperrt. */
  .kopf-nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--papier); border-bottom:1px solid var(--linie);
    padding:8px var(--rand) 18px;
  }
  html.js .kopf-nav{
    display:block;
    overflow:hidden;
    max-height:0; opacity:0; visibility:hidden;
    padding-block:0;
    border-bottom-color:transparent;
    transition:max-height .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease,
               padding-block .5s cubic-bezier(.22,.61,.36,1), visibility 0s linear .5s;
  }
  html.js .kopf-nav.offen{
    max-height:60vh; opacity:1; visibility:visible;
    padding-block:8px 18px;
    border-bottom-color:var(--linie);
    transition:max-height .55s cubic-bezier(.22,.61,.36,1), opacity .35s ease,
               padding-block .55s cubic-bezier(.22,.61,.36,1), visibility 0s;
    box-shadow:0 18px 30px -26px rgba(20,20,20,.65);
  }
  .kopf-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .kopf-nav a{ min-height:50px; padding:0 4px; border-bottom:1px solid var(--linie); }
  .kopf-nav li:last-child a{ border-bottom:0; }

  /* Die Punkte kommen gestaffelt nach — kurz genug, dass das Menue trotzdem
     sofort bedienbar wirkt. */
  html.js .kopf-nav li{
    opacity:0; transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease;
  }
  html.js .kopf-nav.offen li{ opacity:1; transform:none; }
  html.js .kopf-nav.offen li:nth-child(1){ transition-delay:.12s; }
  html.js .kopf-nav.offen li:nth-child(2){ transition-delay:.19s; }
  html.js .kopf-nav.offen li:nth-child(3){ transition-delay:.26s; }
  html.js .kopf-nav.offen li:nth-child(4){ transition-delay:.33s; }
  html.js .kopf-nav.offen li:nth-child(n+5){ transition-delay:.4s; }

  html.js .nav-schalter{ display:grid; }
  .nav-schalter[aria-expanded="true"]{ border-color:var(--schwarz); background:var(--gelb-matt); }

  /* Am Handy kommt zuerst das Bild (Roberts Wunsch 2026-08-30): der Held wirkt
     ueber das Luftbild, nicht ueber drei Absaetze Text. Nur die ANZEIGE-Reihenfolge
     dreht sich — im Quelltext steht die Ueberschrift weiter vorn, damit Vorlesehilfen
     und Suchmaschinen die Seite unveraendert lesen. */
  .held .blatt{ order:-1; margin-bottom:6px; }
  .held-text{ order:1; }

  /* Der Weg laeuft am Handy senkrecht an der linken Kante entlang. */
  .station{ display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:16px; align-items:start; }
  .station-kopf{ padding-top:2px; justify-content:center; }
  .pin{ width:34px; height:44px; }
}

@media (min-width: 861px){
  .held-raster{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
  .held .blatt{ height:100%; grid-template-rows:18px minmax(0,1fr); }
  .held .platte{ display:flex; flex-direction:column; }
  .held .platte-bild{
    aspect-ratio:auto;
    flex:1 1 auto;
    /* Damit es bei kurzem Text nicht zum Briefschlitz wird. */
    min-height:clamp(260px, 26vw, 460px);
  }
  .stationen{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
  .station-kopf{ height:120px; align-items:flex-start; justify-content:center; padding-top:6px; }
  .akte-innen{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .akte-innen::after{ display:block; }
  .akte:nth-child(even) .akte-seite--bild{ order:2; }
  .legende{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .legende-zeile:nth-child(odd){ border-right:1px solid var(--linie); }
  .legende-zeile:nth-last-child(-n+2){ border-bottom:0; }
  .terra-raster{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .ueber-raster{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .kontakt-raster{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
  .kennzahlen{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .kennzahl{ padding:22px 18px 22px 0; }
  .feld-paar{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .fuss-raster{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .fuss-nav ul{ justify-content:flex-end; }
  .gruender{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (min-width: 1120px){
  /* Randnotiz wie am Kartenblatt — feste Spaltenbreite, damit sie nie ueberlaeuft. */
  .held-raster{ grid-template-columns:26px minmax(0,1fr) minmax(0,1.2fr); }
  .held-notiz{
    display:block; writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--text-leise); white-space:nowrap; align-self:center;
  }
}

/* Der Notfall: sichtbar machen, wenn ein Uebergang nie lief.
   Als KLASSE, nicht als Inline-Stil — ein Inline-Stil schlaegt jede Regel und
   liess sich nie wieder abnehmen; ein einmal so gerettetes Element konnte danach
   auch beim Scrollen nicht mehr animieren (gemessen 31.08.).
   Die Spezifitaet muss ueber html.js .auf{opacity:0} liegen, sonst rettet sie nichts. */
html.js .auf.notfall-sichtbar,
html.js .held-text > .notfall-sichtbar,
html.js .text-auf > .notfall-sichtbar{
  opacity:1 !important;
  transform:none !important;
}

/* Traeger der scrollgebundenen Bewegung. `will-change` sagt dem Browser, dass
   sich hier etwas bewegt — er legt die Flaeche dann auf eine eigene Ebene und
   muss beim Scrollen nicht neu zeichnen. */
/* Der Ueberstand oben und unten IST der Spielraum der Bewegung. Mit -6% blieben
   nur ~19 px, der Versatz wollte aber bis 55 px — das Bild rutschte aus dem Rahmen.
   Jetzt mehr Luft; zusaetzlich deckelt hb.js den Versatz auf genau diesen Wert. */
/* Der Versatz kommt als Variable --schub aus hb.js. So kann jede Regel ihr
   eigenes transform behalten und trotzdem mitwandern — vorher schrieb der
   Parallax ein Inline-transform und loeschte damit den Auftritt der Armatur. */
.platte-schub{
  position:absolute; inset:-11% 0; will-change:transform;
  transform:translate3d(0, var(--schub, 0px), 0);
}
.platte-schub .platte-img{ width:100%; height:100%; object-fit:cover; }
/* Der Fortsatz bekommt AUSDRUECKLICH keinen Parallax (frueher .held-schatten mit
   data-parallax="0.14"): Er muss mit dem Luftbild zusammenkleben, sonst laeuft die
   Linie beim Scrollen an der Blattkante auseinander — genau der Bruch, den diese
   Ebene beseitigt. Seine Bewegung ist die Zeichnung selbst. */
@media (prefers-reduced-motion: reduce){
  .platte-schub{ position:absolute; inset:0; will-change:auto; transform:none !important; }
}

/* ============================================================
   16 — Einwilligungs-Banner
   Liegt unten und nimmt die Seite nicht gefangen: kein Dunkelfilter,
   kein gesperrtes Scrollen. Wer ihn ignoriert, kann die Seite lesen —
   solange nichts einwilligungspflichtig laeuft, ist das auch richtig.
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--blatt); border-top:1px solid var(--linie-stark);
  box-shadow:0 -18px 40px -34px rgba(20,20,20,.7);
}
.cookie-banner[hidden]{ display:none; }
html.js .cookie-banner{
  transform:translateY(110%);
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js .cookie-banner.zeigt{ transform:none; }

.cookie-innen{
  max-width:var(--breite); margin-inline:auto;
  padding:clamp(16px, 2.4vw, 24px) var(--rand);
  display:grid; gap:16px; align-items:center;
}
.cookie-text p + p{ margin-top:8px; }
.cookie-text > p:not(.augenbraue):not(.cookie-klein){ color:var(--text-leise); max-width:70ch; font-size:.96rem; }
.cookie-klein{ font-size:.86rem; color:var(--text-leise); }
.cookie-klein a{ text-decoration:none; border-bottom:2px solid var(--gelb); }
.cookie-klein a:hover{ background:var(--gelb-matt); }

.cookie-knoepfe{ display:flex; flex-wrap:wrap; gap:10px; }
/* „Ablehnen" muss genauso leicht zu treffen sein wie „Einverstanden" —
   gleiche Groesse, gleiche Ebene. Ein versteckter Ablehnen-Knopf waere
   keine freie Einwilligung. */
.knopf--schlicht{
  background:transparent; color:var(--text); border-color:var(--linie-stark);
}
.knopf--schlicht:hover{ background:var(--papier); border-color:var(--text); }
.cookie-knoepfe .knopf{ flex:1 1 auto; justify-content:center; min-width:170px; }

@media (min-width: 861px){
  .cookie-innen{ grid-template-columns:minmax(0,1fr) auto; gap:32px; }
  .cookie-knoepfe .knopf{ flex:0 0 auto; }
}
@media (prefers-reduced-motion: reduce){
  html.js .cookie-banner{ transform:none; transition:none; }
}

/* Besprechungsort im Kontaktblock — die Beschriftung traegt die Trennung
   zwischen Sitz (Impressum) und Ort der Termine. Klein, aber nicht unauffaellig:
   wer sie ueberliest, haelt den Club fuer einen zweiten Firmensitz. */
.kontakt-etikett{
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  /* Fester Wert statt --gedaempft: Die Variable ergibt auf dem weissen
     Kontaktkasten 4,47:1 — und WCAG AA verlangt bei dieser Groesse 4,5:1.
     Knapp daneben ist nicht bestanden. Im Browser nachgerechnet: #627173
     ergibt 5,09:1 und ist vom urspruenglichen Ton kaum zu unterscheiden. */
  color:#627173;
}
.kontakt-treffpunkt strong{font-weight:650}