/* ============================================================
   Kontakt & Anfahrt — eigenes Stylesheet, Präfix ka-
   Grundfläche der Seite ist Dunkel: eine Karte lebt von ihren Linien,
   und --lime auf --pine ist die einzige Linienfarbe der Marke, die auf
   Dunkel trägt. Weiß ist hier die Ausnahme, nicht die Regel.

   Der Zeichenfortschritt der Karte steckt in EINER Variablen: --ka-p
   (0 bis 1) auf .ka-buehne. Routen, Höhenprofil und Zielmarke leiten
   alles daraus ab. Voreinstellung ist 1 — ohne JavaScript ist damit
   alles fertig gezeichnet, das Skript setzt erst zurück und fährt dann.
   ============================================================ */

/* ---------- Typo-Bausteine, die seite.css nicht mitbringt ----------
   Die .t-*-Klassen des Design-Systems liegen in site/tokens.css, das
   keine Seite einbindet. Statt sie global nachzuziehen (und damit jede
   bestehende Seite anzufassen) setzt diese Seite die zwei Stufen, die
   sie braucht, unter eigenem Namen. */
.ka-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;line-height:.86;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ka-mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}

/* Die .t-zahl-Klasse aus dem Design-System liegt ebenfalls nur in
   tokens.css — hier für die Kennzahl im Hero und die Kilometerspitze. */
.t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* `hidden` muss gewinnen — .btn bringt einen eigenen display-Wert mit. */
[hidden]{display:none !important}

/* ================= 00 · HERO — die Geländekarte als Bühne ================= */
/* Bewusst ohne .hero: seite.js hängt daran einen Parallax, der den Inhalt
   wegzieht. Die Karte soll stehen bleiben — sie kommt in Kapitel 01 an
   derselben Stelle wieder, und das ist das Echo der Seite. */
/* Höhe wie der Haus-Hero in seite.css. Vorher stand hier clamp(520px,88svh,940px):
   Der Inhalt sitzt unten, also wuchs oben nur Leerfläche — auf einem hohen Fenster
   rund 370 px dunkles Nichts zwischen Kopfzeile und Schlagzeile. Die Höhenlinien
   der Bühne tragen dort nichts, sie stehen bei 10 % Deckkraft. */
.ka-hero{position:relative;z-index:0;min-height:clamp(470px,66svh,700px);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--pine)}
.ka-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,32,21,.35) 0%,rgba(7,32,21,.1) 38%,rgba(6,26,17,.6) 76%,rgba(6,26,17,.93) 100%)}
.ka-hero-buehne{position:absolute;inset:0}
.ka-hero .hero-inhalt{position:relative;z-index:3}
/* `.hero h1` und `.sh-zahl` stehen in seite.css nur unter der Klasse .hero
   bzw. gar nicht — diese Bühne heißt bewusst anders (kein Parallax), also
   kommen beide hier her, wortgleich zu faq.css und mannschaften.css. */
.ka-hero h1{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:min(clamp(48px,8.6vw,150px),15svh);letter-spacing:-.055em;line-height:.84;
  color:#fff;margin:18px 0 0}
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:16ch}
/* Auf schmalen Fenstern versteckt seite.css die Hero-Knöpfe (.hero .hero-cta).
   Hier bleiben sie: Auf einer Kontaktseite ist der Anruf-Knopf am Telefon das
   Nützlichste, was der erste Bildschirm zu bieten hat. */

/* ---------- Die Karte selbst ---------- */
.ka-svg{position:absolute;inset:0;width:100%;height:100%}
.ka-buehne .ka-svg{position:static}

/* Das Gelände — als FLÄCHE, nicht als Drahtgitter.

   Jede Höhenstufe ist ein Pfad aus geschlossenen Ringen und deckt alles ab,
   was über ihr liegt. Zwölf davon übereinander, jede mit schwacher Füllung,
   ergeben eine durchgehende Tönung: Täler bleiben dunkel, Höhen werden hell.
   Even-Odd, damit eine Senke innerhalb einer Kuppe wieder ausgespart wird.
   Derselbe Pfad trägt zusätzlich die Höhenlinie als Kante.

   Farbe ist --mint, ein fast unbuntes Hellgrau-Grün. Nicht --lime: Das ist
   die Farbe von Weg 1, und ein Gelände in der Farbe des Wegs lässt den Weg
   darin verschwinden. Getrennt wird nach FARBE, nicht nur nach Helligkeit. */
.ka-hoehen{fill-rule:evenodd}
/* Der Rand des Blattes — eine Haarlinie, damit die Karte als Tafel liegt
   und nicht ausfranst. */
.ka-blattrand{fill:none;stroke:var(--mint);stroke-opacity:.16;stroke-width:1;
  vector-effect:non-scaling-stroke}
.ka-stufe{fill:var(--mint);fill-opacity:.036;
  stroke:var(--mint);stroke-opacity:calc(.07 + .09 * var(--h));
  stroke-width:calc(.7px + .3px * var(--h));
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* Die 100er sind die Zähllinien: Sie tragen die Meterzahl und dürfen als
   Einzige als Linie auffallen. */
.ka-stufe.ka-zaehl{stroke-opacity:calc(.24 + .20 * var(--h));
  stroke-width:calc(1.4px + .6px * var(--h))}
.ka-hoehen-marken text{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.10em;fill:var(--mint);fill-opacity:.55;text-anchor:middle;
  paint-order:stroke;stroke:var(--pine);stroke-width:6px;stroke-opacity:.95;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Im Hero OHNE Füllung: Dort liegen nur die 100er-Stufen, und als Flächen
   werden daraus drei große, formlose Kleckse hinter der Schlagzeile. Als
   reine Linien sind sie das, was sie dort sein sollen — Textur. */
.ka-svg-buehne .ka-stufe{fill:none;stroke-opacity:.1;stroke-width:1.1px}

/* Der Wald. Dunkler als das getönte Gelände, nicht heller — Wald ist die
   geschlossene, schwere Fläche, und die Wege laufen sichtbar an ihm entlang
   und zwischen den Beständen hindurch. Genau das erklärt ihren Verlauf. */
.ka-wald path{fill:var(--pine);fill-opacity:.34;stroke:none}

/* Die Straßen sind Orientierung, nicht Aussage — sie bleiben unter den zwei
   Wegen. Nur die Autobahn tritt hervor, weil beide Wege von ihr abgehen. */
.ka-strassen path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;stroke:#fff}
.ka-s-a{stroke-opacity:.26;stroke-width:3.4}
.ka-s-b{stroke-opacity:.14;stroke-width:1.7}
.ka-s-c{stroke-opacity:.10;stroke-width:1.3}
.ka-s-d{stroke-opacity:.07;stroke-width:1}

/* Die zwei Wege. Weg 1 in --lime, Weg 2 in Weiß — beide Farben stehen im
   Design-System, und auf Dunkel sind sie ohne Legende auseinanderzuhalten.

   Ohne Strichmuster: Die Linien stehen fertig da. Das Zeichnen setzt erst
   kontakt.js, und zwar mit einer in BILDSCHIRMPIXELN gemessenen Länge.
   Grund: `vector-effect:non-scaling-stroke` lässt den Browser das
   Strichmuster im Bildschirmraum rechnen, `pathLength` normiert aber im
   Benutzerraum. Solange die Karte verkleinert dargestellt wird, passen die
   beiden nicht zusammen und die Linie hört zu früh auf. */
.ka-routen path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.4;
  vector-effect:non-scaling-stroke}
.ka-routen .ka-route[data-weg="a"]{stroke:var(--lime)}
.ka-routen .ka-route[data-weg="b"]{stroke:#fff}
/* Die Hülle in der Grundfläche stellt die Wege frei — sie laufen sonst mit
   jeder Höhenlinie zusammen, die sie kreuzen. */
.ka-routen .ka-route-huelle{stroke:var(--pine);stroke-width:7.5;stroke-opacity:.9}

.ka-orte circle{fill:#fff;fill-opacity:.85}
.ka-ort-klein{fill-opacity:.45}
/* Die Größen hier sind Kartenraum, nicht Pixel. Seit der enge Ausschnitt
   gilt (626 Einheiten breit) liegt der Maßstab zwischen 0,69 auf dem Telefon
   und 0,94 am Schreibtisch — vorher war er 0,43 bis 0,78. Alle Schrift- und
   Markengrößen sind darauf neu gerechnet; 16 landet am Schreibtisch bei rund
   15 px, und das ist die Untergrenze für Ortsnamen. */
.ka-ort-name{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:.04em;fill:#fff;fill-opacity:.9;
  paint-order:stroke;stroke:var(--pine);stroke-width:5px;stroke-opacity:.85;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ka-ort-name-klein{font-size:13px;fill-opacity:.55;font-weight:600}
.ka-ort-links{text-anchor:end}
.ka-orte circle{paint-order:stroke;stroke:var(--pine);stroke-width:3px;vector-effect:non-scaling-stroke}

/* Die Ausfahrten sind Schilder, keine Punkte: gefüllte Raute in der Farbe
   ihres Wegs, Nummer dunkel darin. Vorher war die Raute nur umrandet — die
   Route lief mitten hindurch, und man sah weder das eine noch das andere. */
.ka-ausfahrt-raute{fill:#fff;stroke:var(--pine);stroke-width:3;
  vector-effect:non-scaling-stroke;paint-order:stroke}
.ka-ausfahrt[data-weg="a"] .ka-ausfahrt-raute{fill:var(--lime)}
.ka-ausfahrt-nr{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
  fill:var(--pine);text-anchor:middle;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ka-ausfahrt[data-weg="a"] .ka-ausfahrt-nr{fill:var(--pine)}

/* Die Zielmarke ist der Punkt, auf den die ganze Karte zuläuft — sie ist
   deshalb das kräftigste Zeichen darauf: das Wappen, dasselbe Bild wie in der
   Kopfleiste. Es wächst erst, wenn beide Linien angekommen sind: das Ende der
   einen Bewegung, nicht eine zweite. Der kleine Hof-Punkt darunter markiert
   den exakten Ort und bleibt als Marke stehen, falls das Bild nicht lädt.
   Responsiv skaliert die GRUPPE (.ka-ziel, transform-origin steht im SVG) —
   die Wachstums-Animation liegt auf dem Bild selbst, sonst überschriebe die
   eine transform die andere. */
.ka-ziel-hof{r:5;fill:var(--lime);stroke:var(--pine);stroke-width:3;
  vector-effect:non-scaling-stroke;paint-order:stroke}
.ka-ziel-wappen{transform-box:fill-box;transform-origin:center;
  transform:scale(calc(.35 + .65 * var(--ka-p,1)));
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.ka-ziel-ring{r:28;fill:none;stroke:var(--lime);stroke-width:2.2;vector-effect:non-scaling-stroke;
  stroke-opacity:calc(var(--ka-p,1) * .6);transform-box:fill-box;transform-origin:center;
  transform:scale(calc(.5 + .5 * var(--ka-p,1)))}

/* Zeilenhöhe der Versalüberschriften.
   Die Seite setzt zweizeilige Schlagzeilen aus dem Backend — und sobald in
   Zeile 2 ein Ä/Ö/Ü steht („genügen", „Schritt für Schritt"), stoßen dessen
   Punkte bei line-height:.9 in die Grundlinie der Zeile darüber. Das ist
   dieselbe Falle wie bei .h1-zeile im Hero, nur ohne Beschnitt. Weil das
   Sekretariat jede dieser Zeilen ändern darf, ist die Lösung strukturell:
   .98 lässt die Punkte frei und bleibt für Versalien immer noch eng
   Gemessen statt geschätzt (vier Zeilenhöhen nebeneinander gerendert,
   30 px, Space Grotesk 700): bei .90, .98 UND 1.02 berühren die Punkte
   die Zeile darüber noch. Erst 1.06 hält sie frei. Sichtbarer Abstand
   ist dann 1.06 − .72 Versalhöhe = .34em — für Versalien immer noch eng.
   Dieselbe Falle steckt in .kapitel-kopf h2 (line-height:.9) aus
   seite.css: Sie zeigt sich nur, wenn Zeile 2 mit einem Umlaut anfängt.
   Die Regel steht am DATEIENDE: Die Einzelregeln der Abschnitte setzen
   line-height:.9 und haben dieselbe Spezifität — wer zuletzt kommt, gewinnt. */
/* ================= 01 · DIE ZWEI WEGE ================= */
.ka-weg{background:var(--pine);padding-top:var(--luft);padding-bottom:var(--luft)}
.ka-weg .kapitel-kopf h2{text-wrap:balance}

/* Randlos: die Karte läuft bis an den Fensterrand, ohne 8-px-Rest. */
.ka-buehne{position:relative;margin:8px calc(var(--inset) * -1) 0;background:var(--pine)}
/* Die Karte passt vollständig hinein (siehe preserveAspectRatio im
   Template). Auf breiten Fenstern bleibt links und rechts dunkle Fläche —
   das ist Absicht: die Fahnen sitzen darin, und eine Karte, die bis in die
   Ecken läuft, hat keinen Rand, an dem das Auge zur Ruhe kommt. */
.ka-karte-feld{position:relative;height:min(86svh,900px);overflow:hidden;
  border-top:1px solid var(--hairline-dunkel);border-bottom:1px solid var(--hairline-dunkel)}
.ka-buehne .ka-svg{width:100%;height:100%}

/* Die zwei Fahnen oben links: Ausfahrtsnummer, Kilometer, Höhe. */
.ka-fahnen{position:absolute;left:var(--inset);top:26px;display:flex;flex-direction:column;gap:10px;z-index:2}
.ka-fahne{display:flex;align-items:center;gap:12px;background:rgba(7,48,31,.72);
  backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
  border:1px solid var(--hairline-dunkel);padding:9px 16px 9px 10px}
.ka-fahne-nr{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;width:30px;text-align:center;padding:3px 0;
  border:1px solid currentColor;color:#fff}
.ka-fahne[data-weg="a"] .ka-fahne-nr{color:var(--lime)}
.ka-fahne-txt{display:flex;flex-direction:column;gap:2px}
.ka-fahne-txt b{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ka-fahne-txt em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums}

/* ---------- Das Höhenprofil ---------- */
.ka-profil{padding:22px var(--inset) 0}
.ka-profil-titel{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.ka-profil-titel span{color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:none;font-weight:400}
.ka-profil-svg{width:100%;height:clamp(96px,14svh,150px);overflow:visible}
.ka-profil-raster line{stroke:#fff;stroke-opacity:.1;stroke-width:1;vector-effect:non-scaling-stroke}
/* Das Profil wird aufgedeckt, nicht nachgezogen — mit derselben Maske wie
   die Fläche darunter, damit beide exakt gleich weit sind. Ein Strichmuster
   ginge hier gar nicht: Das Diagramm ist mit preserveAspectRatio="none"
   waagrecht gedehnt, ein im Benutzerraum normierter Strich deckt davon nur
   rund drei Viertel ab und die Linie erreicht das Ende nie. */
.ka-profil-linie{fill:none;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;
  clip-path:inset(0 calc(100% - 100% * var(--ka-p,1)) 0 0)}
.ka-profil-linie[data-weg="a"]{stroke:var(--lime)}
.ka-profil-linie[data-weg="b"]{stroke:#fff}
/* Die Fläche unter der Linie wird aufgedeckt, nicht eingeblendet. */
.ka-profil-flaeche{clip-path:inset(0 calc(100% - 100% * var(--ka-p,1)) 0 0)}
.ka-profil-flaeche[data-weg="a"]{fill:var(--lime);fill-opacity:.14}
.ka-profil-flaeche[data-weg="b"]{fill:#fff;fill-opacity:.07}
.ka-profil-feld{position:relative}
.ka-profil-skala li{position:absolute;right:0;transform:translateY(-50%);
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  color:rgba(255,255,255,.34);font-variant-numeric:tabular-nums;
  background:var(--pine);padding-left:8px;pointer-events:none}
.ka-profil-achse{display:flex;justify-content:space-between;margin-top:10px;
  font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.32)}

/* ---------- Die zwei Schrittlisten ---------- */
.ka-listen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;padding-top:var(--luft)}
.ka-liste header{border-top:1px solid var(--hairline-dunkel);padding-top:20px}
.ka-liste-marke{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ka-liste-marke span{color:var(--pine);background:var(--lime);padding:4px 9px}
.ka-liste[data-weg="b"] .ka-liste-marke span{color:var(--pine);background:#fff}
.ka-liste h3{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.8vw,38px);letter-spacing:-.03em;line-height:.98;color:#fff;margin:14px 0 18px}
.ka-liste-zahlen{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;padding-bottom:22px}
.ka-liste-zahlen b{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;
  letter-spacing:-.03em;color:var(--lime);font-variant-numeric:tabular-nums}
.ka-liste[data-weg="b"] .ka-liste-zahlen b{color:#fff}
.ka-liste-zahlen span{font-size:12.5px;color:rgba(255,255,255,.5);margin-right:8px}
.ka-schritte{counter-reset:none}
.ka-schritte li{display:flex;gap:18px;align-items:flex-start;color:rgba(255,255,255,.86);
  font-size:16.5px;line-height:1.5;padding:14px 0;border-top:1px solid var(--hairline-dunkel)}
.ka-schritt-nr{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.4);padding-top:5px;flex:none;font-variant-numeric:tabular-nums}

/* seite.css setzt nur ul{list-style:none} — ein <ol> bringt seine eigenen
   Nummern mit und stünde neben den Schrittnummern ein zweites Mal da. */
.ka-schritte{list-style:none}

/* ---------- Die Ruhe: das Schild ---------- */
.ka-schild{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;
  padding:calc(var(--luft) * 1.6) 0 var(--luft);color:rgba(255,255,255,.5);font-size:15px}
.ka-schild-tafel{display:inline-flex;align-items:center;gap:20px;background:#6B4A2A;
  color:#fff;padding:16px 34px 16px 22px}
.ka-schild-svg{width:34px;height:20px;fill:#fff;flex:none}
.ka-schild-loch{fill:#6B4A2A}
.ka-schild-tafel b{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.4vw,30px);
  font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.ka-quelle{font-size:12px;line-height:1.6;color:rgba(255,255,255,.34);max-width:70ch;
  border-top:1px solid var(--hairline-dunkel);padding-top:16px}


/* ================= 02 · ANSCHRIFT UND KONTAKT ================= */
/* Die Mint-Fläche der Seite. Bis 20.08.2026 hing sie mit einer negativen
   Oberkante in ein Luftbild hinein und trug die Durchwahl als Riesenzahl —
   Bild und Zahl sind weg, also auch die Überlappung: Sie hätte sich in die
   dunkle Karte darüber geschoben. */
.ka-klappe{position:relative;padding:var(--luft) var(--inset);background:var(--mint)}
.ka-klappe-inhalt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;
  align-items:start}
.ka-klappe-links h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.6vw,52px);letter-spacing:-.045em;line-height:.9;color:var(--tinte);
  padding-bottom:30px}
.ka-daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 28px;align-items:baseline}
.ka-daten dt{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:16px 0 0;
  border-top:1px solid rgba(20,35,27,.12)}
.ka-daten dd{font-size:17px;line-height:1.5;color:var(--tinte);padding:16px 0 16px;
  border-top:1px solid rgba(20,35,27,.12)}
.ka-daten dt:first-of-type,.ka-daten dd:first-of-type{border-top:0}
.ka-daten a{color:var(--gruen);background-image:linear-gradient(var(--gruen),var(--gruen));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .22s ease-out,color .22s ease-out}
.ka-daten a:hover,.ka-daten a:focus-visible{background-size:100% 1px;color:var(--tanne)}
.ka-weiter::after{content:" →";transition:padding-left .22s ease-out}
.ka-weiter:hover::after{padding-left:4px}
.ka-traeger{margin-top:var(--luft-s);padding-top:16px;border-top:1px solid rgba(20,35,27,.12);
  font-size:12.5px;color:var(--muted)}

/* ---------- Navi und QR ----------
   Stand bis 20.08.2026 im Fahrplan-Kapitel und war dort die Mint-Fläche in
   einer weißen Sektion. Jetzt sitzt sie in der Mint-Fläche selbst — also
   umgekehrt: Weiß auf Mint, sonst verschwindet der Kasten in seinem Grund. */
.ka-navi{background:#fff;padding:34px 30px}
.ka-navi-adresse{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:-.02em;color:var(--tinte)}
.ka-navi-koord{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.06em;color:var(--gruen);font-variant-numeric:tabular-nums;margin-top:6px}
.ka-navi-text{font-size:15px;line-height:1.55;color:var(--sekundaer);margin-top:16px}
.ka-navi-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ka-navi .btn-ghost{border-color:var(--gruen);color:var(--gruen)}
.ka-navi .btn-ghost:hover{background:var(--gruen);color:#fff}

/* ================= 03 · SCHREIB UNS ================= */
.ka-form-sektion{background:#fff;padding:var(--luft) var(--inset);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:start;
  scroll-margin-top:150px}
.ka-form-kopf{grid-column:1 / -1;max-width:52ch}
.ka-form-kopf h2{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.2vw,60px);letter-spacing:-.045em;line-height:.9;color:var(--tinte)}
.ka-form-kopf .lead{margin-top:16px;font-size:18px;font-weight:300;line-height:1.55;color:var(--sekundaer)}
.ka-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.ka-feld{display:flex;flex-direction:column;gap:8px}
.ka-feld-breit{grid-column:1 / -1}
.ka-feld label,.ka-zustimmung label{font-family:'Space Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ka-feld label em{font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:400;
  font-family:'Hanken Grotesk',sans-serif;font-size:12.5px}
.ka-feld input,.ka-feld textarea{font-family:'Hanken Grotesk',sans-serif;font-size:16.5px;
  color:var(--tinte);background:#fff;border:0;border-bottom:1px solid var(--hairline);
  padding:12px 2px;border-radius:0;transition:border-color .22s ease-out}
.ka-feld textarea{resize:vertical;line-height:1.55}
.ka-feld input:hover,.ka-feld textarea:hover{border-color:var(--sekundaer)}
.ka-feld input:focus,.ka-feld textarea:focus{outline:0;border-color:var(--gruen);border-bottom-width:2px;
  padding-bottom:11px}
.ka-feld.ist-fehler input,.ka-feld.ist-fehler textarea{border-color:var(--live)}
.ka-fehler{font-size:13px;color:var(--live)}
.ka-zustimmung{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;
  align-items:start;padding-top:8px}
.ka-zustimmung input{width:20px;height:20px;accent-color:var(--gruen);margin-top:2px}
.ka-zustimmung label{letter-spacing:.02em;text-transform:none;font-weight:400;font-size:14.5px;
  font-family:'Hanken Grotesk',sans-serif;color:var(--sekundaer);line-height:1.5}
.ka-zustimmung .ka-fehler{grid-column:2}
.ka-absenden{grid-column:1 / -1;padding-top:8px}
.ka-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ka-form-fehler{grid-column:1 / -1;background:rgba(255,90,77,.1);border-left:3px solid var(--live);
  padding:14px 18px;font-size:15px;color:var(--tinte)}
.ka-danke{background:var(--mint);border-left:3px solid var(--gruen);padding:22px 26px;
  font-size:17px;line-height:1.55;color:var(--tinte)}
.ka-form-aus{font-size:16.5px;line-height:1.6;color:var(--sekundaer)}
.ka-marginalie{border-top:1px solid var(--hairline);padding-top:18px}
.ka-marginalie p{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:32ch}

/* ============================================================
   SCHMALE FENSTER
   Nicht „wird gestapelt": Die Karte bleibt randlos und behält ihre
   Höhe, die Fahnen wandern unter sie, und die zwei Schrittlisten werden
   untereinander gelesen statt nebeneinander verglichen.
   ============================================================ */
@media (max-width:1100px){
  .ka-form-sektion{grid-template-columns:minmax(0,1fr);gap:40px}
  .ka-marginalie{border-top:0;border-left:3px solid var(--lime);padding:0 0 0 18px}
}
@media (max-width:900px){
  .ka-listen{grid-template-columns:minmax(0,1fr);gap:44px}
  .ka-klappe-inhalt{grid-template-columns:minmax(0,1fr);gap:34px}
  .ka-karte-feld{height:min(72svh,640px)}
  /* Die Fahnen sitzen jetzt unter der Karte statt darauf — auf schmalen
     Fenstern verdecken sie sonst genau die Ausfahrt, die sie erklären. */
  .ka-fahnen{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;padding:14px var(--inset) 0}
  .ka-fahne{flex:1 1 220px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* Karte kleiner heißt: Marken etwas größer. transform-origin steht je
     Marke im SVG, sonst würde das Skalieren sie von ihrem Ort wegschieben. */
  .ka-ort-name{font-size:18px}
  .ka-ort-name-klein{font-size:15px}
  .ka-ausfahrt-nr{font-size:15px}
  .ka-hoehen-marken text{font-size:14px;stroke-width:6px}
  .ka-ausfahrt{transform:scale(1.12)}
  .ka-ziel{transform:scale(1.27)}
}
@media (max-width:560px){
  .ka-hero{min-height:clamp(480px,80svh,720px)}
  .ka-form{grid-template-columns:minmax(0,1fr)}
  .ka-karte-feld{height:66svh}
  .ka-profil-svg{height:110px}
  .ka-schild-tafel{padding:13px 22px 13px 16px;gap:14px}
  .ka-liste-zahlen{gap:4px 14px}
  .ka-ort-name{font-size:21px}
  .ka-ort-name-klein{display:none}
  .ka-hoehen-marken text{font-size:16px;stroke-width:7px}
  .ka-ausfahrt{transform:scale(1.3)}
  .ka-ausfahrt-nr{font-size:17px}
  .ka-ziel{transform:scale(1.1)}
  .ka-strassen .ka-s-d{display:none}
}

/* ============================================================
   BEWEGUNG AUS
   Die Zeichnung springt auf ihren Endzustand: beide Routen stehen
   vollständig da, das Höhenprofil ebenso. Die Seite verliert nichts
   außer Zeit — alle Zahlen und alle Schritte sind Text.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ka-buehne{--ka-p:1 !important}
  .ka-routen path{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .ka-profil-flaeche,.ka-profil-linie{clip-path:none !important}
  .ka-ziel-wappen,.ka-ziel-ring{transform:none !important}
  .ka-ziel-ring{stroke-opacity:.55 !important}
  .ka-daten a,.ka-feld input,.ka-feld textarea{transition:none}
}

/* `hidden` verliert gegen .btn{display:inline-flex} aus seite.css — der
   Kopierknopf bliebe sonst sichtbar und täte nichts (Falle aus dem
   PROMPT_Register). */
.ka-navi .btn[hidden]{display:none}

/* ============================================================
   ZEILENHÖHE DER VERSALÜBERSCHRIFTEN — siehe Kommentar oben bei 01.
   Muss nach allen Abschnittsregeln stehen.
   ============================================================ */
.ka-klappe-links h2,.ka-form-kopf h2,
.ka-weg .kapitel-kopf h2,.ka-liste h3{line-height:1.06}