/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · theme: custom (Desert) · enrichment: E5 · nav: N9 · footer: Ft2 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
html { scrollbar-color: var(--color-rule) var(--color-paper); accent-color: var(--color-accent); caret-color: var(--color-sand); }
::selection { background: var(--color-accent-field); color: var(--color-ink); }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius);
}
.nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.innen { max-width: 1180px; margin: 0 auto; padding-inline: clamp(1rem, 4.4vw, 4rem); }
.mono {
  font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500;
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.h1 {
  font-family: var(--font-display); font-variation-settings: "wdth" 112, "wght" 650;
  font-size: var(--text-display); line-height: .98; letter-spacing: -.012em;
}
.h2 {
  font-family: var(--font-display); font-variation-settings: "wdth" 118, "wght" 600;
  font-size: var(--text-2xl); line-height: 1.04; letter-spacing: -.005em; hyphens: manual;
}
.mono.klein { text-transform: none; letter-spacing: .04em; }
.lede { color: var(--color-ink-soft); max-width: 46ch; }
.text { color: var(--color-ink-soft); max-width: var(--measure); }
.text + .text { margin-top: var(--space-md); }

/* ---------- Kopfzeile (N9, am Rand ausgerichtet) ---------- */
.kopfzeile {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-lg) clamp(1rem, 3vw, 2.5rem);
}
.kopfzeile .marke img { height: 30px; width: auto; }
.kopfzeile nav { display: flex; align-items: center; gap: clamp(var(--space-md), 2.4vw, var(--space-xl)); }
.kopfzeile nav a { white-space: nowrap; color: var(--color-ink-soft); padding-block: var(--space-xs); }
.nav-link { font-size: var(--text-sm); font-weight: 500; letter-spacing: .01em; }
.kopfzeile nav a:hover { color: var(--color-ink); }
.kopfzeile .sprache { border: var(--rule); border-radius: var(--radius); padding: var(--space-2xs) var(--space-sm); }
.kopfzeile .kontakt { display: inline-flex; align-items: center; gap: var(--space-xs); }
.kontakt svg { width: 18px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- Bühne: Punktwolke im Kopf ---------- */
.buehne { position: relative; }
.js .buehne { height: 170vh; }   /* Scrollweg der Kamerafahrt: 70 vh (Felix 2026-10-25: kürzer, vorher 140 vh) */
.buehne-rahmen { position: relative; height: 92vh; height: 92svh; min-height: 560px; overflow: hidden; }
.js .buehne-rahmen { position: sticky; top: 0; height: 100vh; height: 100svh; }
.buehne-gl, .buehne-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne-bild { object-fit: cover; transition: opacity 700ms var(--ease-out); }
.buehne-gl { opacity: 0; transition: opacity 900ms var(--ease-out); }
.gl-bereit .buehne-gl { opacity: 1; }
.gl-bereit .buehne-bild { opacity: 0; }
.ohne-gl .buehne-gl { display: none; }
.buehne-schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--color-paper) 78%, transparent) 0%,
                           color-mix(in oklch, var(--color-paper) 35%, transparent) 42%, transparent 66%),
    linear-gradient(0deg, var(--color-paper) 0%, transparent 26%),
    linear-gradient(180deg, color-mix(in oklch, var(--color-paper) 70%, transparent) 0%, transparent 18%);
  opacity: calc(1 - var(--p, 0) * .7);
}
.buehne-text {
  position: absolute; inset: auto 0 clamp(4.5rem, 13vh, 8.5rem) 0; z-index: 1;
  opacity: clamp(0, calc(1 - var(--p, 0) * 3.2), 1);
  transform: translateY(calc(var(--p, 0) * -48px));
}
.buehne-text .lede { margin-top: var(--space-xl); text-shadow: 0 1px 14px var(--color-paper), 0 0 4px var(--color-paper); }
.buehne-karte .mono { text-shadow: 0 1px 10px var(--color-paper); }
.buehne-karte {
  position: absolute; inset: auto 0 clamp(3.5rem, 11vh, 7rem) 0; z-index: 1; pointer-events: none;
  opacity: clamp(0, calc((var(--p, 0) - .62) * 3.6), 1);
  transform: translateY(calc((1 - var(--p, 0)) * 24px));
}
.buehne-satz {
  font-family: var(--font-display); font-variation-settings: "wdth" 118, "wght" 600;
  font-size: var(--text-2xl); line-height: 1.04; max-width: 18ch;
}
.buehne-karte .mono { margin-top: var(--space-md); color: var(--color-ink-soft); max-width: 60ch; }
.buehne-quelle {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: var(--space-md); z-index: 1;
  max-width: 52ch; margin: 0; text-align: right; font-size: var(--text-xs); color: var(--color-neutral);
}
.buehne-quelle a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--color-rule); }
.kopf .h1, .buehne .h1 { max-width: none; }
.sprung { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-2xl); }
.sprung a { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-xs);
  border-bottom: 1px solid var(--color-accent); padding-bottom: var(--space-2xs); }
.sprung a:hover { color: var(--color-accent-text); }
.standbild .buehne-gl { opacity: 1; transition: none; }
.standbild .buehne-bild { display: none; }
.standbild .buehne-text, .standbild .buehne-schleier, .standbild .buehne-quelle,
.standbild .kopfzeile, .standbild .buehne-karte { display: none; }

/* ---------- Abschnitte ---------- */
.band { padding-block: var(--space-4xl); }
.band + .band { border-top: var(--rule); }
.zweispaltig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-2xl); align-items: start; }
.zweispaltig > .links { grid-column: span 5; }
.zweispaltig > .rechts { grid-column: span 7; }
.zweispaltig > .rechts .text:first-child { margin-top: .4em; }

/* ---------- Systemkarte ---------- */
.abschnitt-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); align-items: start; }
.abschnitt-kopf > .h2 { grid-column: span 6; }
.abschnitt-kopf > div { grid-column: span 6; }
.karte-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); align-items: end; }
.karte-kopf .h2 { grid-column: span 6; }
.karte-kopf .text { grid-column: span 6; }
.karte { margin-top: var(--space-3xl); }
.karte svg { width: 100%; height: auto; }
.k-box     { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
.k-box-kern{ fill: var(--color-paper-3); }
.k-box-an  { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.k-titel   { fill: var(--color-ink); font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.k-sub     { fill: var(--color-neutral); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.k-nr      { fill: var(--color-accent-text); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 10.5px; letter-spacing: .08em; }
.k-kopf    { fill: var(--color-ink); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.k-kopf-sub{ fill: var(--color-neutral); font-family: var(--font-body); font-size: 13px; }
.k-kante   { fill: none; stroke: var(--color-rule); stroke-width: 1.25; }
.k-kante-an{ fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.k-punkt   { fill: var(--color-accent); }
.k-folge   { fill: none; stroke: var(--color-neutral); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.k-icon    { fill: none; stroke: var(--color-sand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.k-gruppe, .k-kanten { transition: opacity var(--dur) var(--ease-out); }
.karte.dimmen .k-gruppe:not(.an), .karte.dimmen .k-kanten:not(.an) { opacity: .28; }
.k-gruppe.an .k-box-an, .k-kanten.an .k-kante-an { opacity: 1; }
.k-gruppe a { cursor: pointer; }
.karte-liste { display: none; }
.karte-legende { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-lg); color: var(--color-neutral); font-size: var(--text-sm); }
.karte-geschichte { margin-top: var(--space-3xl); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
.karte-geschichte .text { grid-column: 4 / span 7; }

/* ---------- Navigation: dunkel, die drei Routen leuchten ---------- */
.nav-band { background: var(--color-paper-2); }
.nav-logo { display: block; width: min(300px, 70%); height: auto; margin: 0 0 var(--space-lg) -4px; }
.profile-bild { margin: 0; }
.profile-bild svg { width: 100%; height: auto; }
.r-kontur  { fill: none; stroke: var(--color-rule); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.r-fluss   { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: .45; }
.r-schnell { fill: none; stroke: var(--color-neutral); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .8; }
.r-adv     { fill: none; stroke: var(--color-nav-adv); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.r-moto    { fill: none; stroke: var(--color-nav-moto); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.r-bike    { fill: none; stroke: var(--color-nav-bike); stroke-width: 3.5; stroke-dasharray: .5 8; stroke-linecap: round; }
.r-glut    { stroke-width: 9; stroke-dasharray: none; opacity: .45; }
.r-bike.r-glut { opacity: .35; }
.r-punkt   { fill: var(--color-ink); }
.r-punkt-hell { fill: var(--color-sand); }
.r-text    { fill: var(--color-ink); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 600; font-size: 11px; letter-spacing: .05em; }
.r-text-adv  { fill: var(--color-nav-adv); }
.r-text-moto { fill: var(--color-nav-moto); }
.r-text-bike { fill: var(--color-nav-bike); }
.r-text-leise { fill: var(--color-neutral); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 10.5px; letter-spacing: .05em; }
.r-ziel    { fill: var(--color-ink); font-family: var(--font-display); font-variation-settings: "wdth" 130, "wght" 700; font-size: 18px; }
.legende { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.legende li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.legende svg { width: 44px; height: 12px; }
.legende b { font-weight: 600; }
.legende span { color: var(--color-ink-soft); }
.merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-2xl); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; border-top: var(--rule); }
.merkmale li { padding: var(--space-md) 0; border-bottom: var(--rule); }
.merkmale b { display: block; font-weight: 600; }
.merkmale span { color: var(--color-ink-soft); font-size: var(--text-sm); }
.nav-band .zahl { color: var(--color-sand); }
.werte { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-2xl); }
.zahl { font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 400; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.was { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-soft); }
.abschnitt-kopf .werte { margin-top: var(--space-xl); }
.abschnitt-kopf .was { max-width: 38ch; }

/* Routen zeichnen sich entlang ihres Wegs: Maske mit wanderndem Strich, 4,8 s (Felix 2026-10-25) */
.r-maske { fill: none; stroke: white; stroke-width: 22; stroke-linecap: butt; stroke-linejoin: round; }
.js .profile-bild .r-maske { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 4.8s cubic-bezier(.45, 0, .25, 1) .4s; }
.js .profile-bild .r-maske-schnell { transition-duration: 1.4s; transition-delay: 0s; }
.js .profile-bild.sichtbar .r-maske { stroke-dashoffset: 0; }
.js .profile-bild .r-beschriftung { opacity: 0; transition: opacity .8s ease 4.4s; }
.js .profile-bild.sichtbar .r-beschriftung { opacity: 1; }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 48px; padding: 0 var(--space-lg); white-space: nowrap;
  border: 1px solid currentColor; border-radius: var(--radius); font-weight: 500;
}
button.knopf { font-family: inherit; line-height: inherit; color: inherit; background: transparent; cursor: pointer; }
.knopf:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.knopf:active { transform: translateY(1px); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-2xl); }

/* ---------- Messen ---------- */
.schritte { list-style: none; margin: var(--space-3xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.schritte li { border-top: var(--rule); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.schritte h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.schritte p { font-size: var(--text-sm); color: var(--color-ink-soft); }
.schritte .mono { color: var(--color-accent-text); }
.p-linie   { fill: none; stroke: var(--color-rule); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.p-sand    { fill: none; stroke: var(--color-sand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-strahl  { fill: none; stroke: var(--color-accent); stroke-width: 1; opacity: .55; }
.p-fuell   { fill: var(--color-paper-3); stroke: var(--color-ink-soft); stroke-width: 1.25; stroke-linejoin: round; }
.p-tinte   { fill: none; stroke: var(--color-ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-punkt-a { fill: var(--color-accent); }
.p-text    { fill: var(--color-neutral); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 11px; letter-spacing: .05em; }
.p-text-a  { fill: var(--color-accent-text); }
.p-text-s  { fill: var(--color-sand); }
.p-gestrichelt { stroke-dasharray: 4 4; }
.p-felge   { fill: none; stroke: var(--color-neutral); stroke-width: .9; }
.p-gabel   { fill: none; stroke: var(--color-ink-soft); stroke-width: 3; stroke-linecap: round; }
.p-glied-rand { fill: none; stroke: color-mix(in oklch, var(--color-neutral) 55%, transparent); stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; }
.p-glied   { fill: none; stroke: var(--color-paper-3); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.p-stiefel { fill: var(--color-paper-2); stroke: var(--color-ink-soft); stroke-width: 1; stroke-linejoin: round; }
.p-band    { fill: none; stroke: var(--color-accent-text); stroke-width: 1.6; }

.abbildung { margin: var(--space-4xl) 0 0; }
.abbildung svg { width: 100%; height: auto; }
.abbildung figcaption { margin-top: var(--space-lg); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
.abbildung figcaption .h2 { grid-column: span 5; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.abbildung figcaption .text { grid-column: span 7; font-size: var(--text-sm); }
.liefern { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: var(--rule); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
.liefern .h2 { grid-column: span 5; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.liefern .text { grid-column: span 7; }
.kleingedruckt { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); }
.q-erde   { fill: var(--color-paper-2); }
.q-figur { position: relative; }
.q-steuerung { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.knopf-klein { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.knopf:disabled { opacity: .4; cursor: default; }
.knopf:disabled:hover { background: transparent; color: inherit; border-color: currentColor; }
.knopf[hidden] { display: none; }
.q-bild { position: relative; }
.q-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.q-svg { position: relative; z-index: 1; width: 100%; height: auto; }
.q-raster path { fill: none; stroke: var(--color-rule); stroke-width: .6; opacity: .45; }
.q-achse path { stroke: var(--color-neutral); stroke-width: 1; }
.q-achse-text { fill: var(--color-neutral); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 10.5px; letter-spacing: .05em; }
.q-schraffur { opacity: .55; }
.q-schraffur-linie { stroke: var(--color-rule); stroke-width: 1; }
/* Motorrad: Maschine hell umrissen, Fahrer zurückgenommen, Scanner in Petrol */
.q-fahrer, .q-helm { fill: var(--color-paper-3); stroke: color-mix(in oklch, var(--color-neutral) 55%, transparent); stroke-width: 1; }
.q-glied-rand { fill: none; stroke: color-mix(in oklch, var(--color-neutral) 55%, transparent); stroke-width: 8.5; stroke-linecap: round; stroke-linejoin: round; }
.q-glied   { fill: none; stroke: var(--color-paper-3); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.q-brillenband { fill: none; stroke: var(--color-accent-text); stroke-width: 2.5; }
.q-stiefel { fill: var(--color-paper-2); stroke: var(--color-ink-soft); stroke-width: 1; }
.q-raste   { fill: var(--color-neutral); }
.q-rad     { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1.4; }
.q-stollen { stroke: var(--color-neutral); stroke-width: 1.6; }
.q-blech   { fill: var(--color-paper-2); stroke: var(--color-ink-soft); stroke-width: 1.1; }
.q-strich  { fill: none; stroke: var(--color-ink-soft); stroke-width: 1.6; stroke-linecap: round; }
.q-schild  { fill: var(--color-ink-soft); }
.q-schild-band { fill: var(--color-accent-field); }
.q-rueck, .q-blinker { fill: var(--color-sand-deep); }
.q-koffer  { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.4; }
.q-naht    { stroke: var(--color-neutral); stroke-width: 1; }
.q-schloss { fill: var(--color-neutral); }
.q-sensor-fenster { fill: var(--color-paper); opacity: .7; }
.q-sensor-puls { fill: none; stroke: var(--color-accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: q-puls 2.4s var(--ease-out) infinite; }
@keyframes q-puls { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.q-licht-rahmen { fill: none; stroke: var(--color-sand); stroke-width: 1.5; stroke-dasharray: 7 6; }
.q-halb { transform-box: fill-box; }
.q-halb-l { transform-origin: right center; }
.q-halb-r { transform-origin: left center; }
.q-zahl { font-variant-numeric: tabular-nums; }
.q-warn, .q-warn-ring { transform-box: fill-box; transform-origin: center; }
.q-warn-ring { fill: none; stroke: var(--color-sand-deep); stroke-width: 2; opacity: 0; }
.q-punkt-marke { fill: var(--color-ink-soft); }
.q-profil { stroke-dasharray: 1; }
.q-profil { fill: none; stroke: var(--color-ink-soft); stroke-width: 1.25; stroke-linejoin: round; opacity: .6; }
.q-ext    { fill: none; stroke: var(--color-ink-soft); stroke-width: .75; stroke-dasharray: 2 3; opacity: .7; }
.q-text { fill: var(--color-ink-soft); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 12px; letter-spacing: .05em; }
.q-mass { fill: var(--color-ink); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 600; font-size: 13px; letter-spacing: .05em; }
.q-masslinie { fill: none; stroke: var(--color-ink-soft); stroke-width: 1; }
.q-licht-text { fill: var(--color-sand); }
.q-warn    { fill: var(--color-sand-deep); }
.q-warn-text { fill: var(--color-sand); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 600; font-size: 12px; letter-spacing: .05em; }
.q-sensor  { fill: var(--color-accent); }

.l-z1 { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round; }
.l-z2 { fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-dasharray: 10 6; }
.l-z3 { fill: none; stroke: var(--color-sand); stroke-width: 3.5; stroke-linecap: round; }
.l-z4 { fill: none; stroke: var(--color-sand); stroke-width: 3.5; stroke-dasharray: 3 7; stroke-linecap: round; }

.bild-breit { overflow-x: auto; overscroll-behavior-x: contain; }
.wisch { display: none; margin-top: var(--space-xs); color: var(--color-neutral); font-size: var(--text-xs); }
.hinweis { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule); display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); color: var(--color-neutral); font-size: var(--text-sm); }

/* ---------- Pilot ---------- */
.kontakt-band { position: relative; overflow: hidden; }
.kontakt-band .innen { position: relative; z-index: 1; }
.kontakt-kontur { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kontakt-band .h2 { max-width: 16ch; font-size: clamp(2.2rem, .6rem + 3.4vw, 3.3rem); }
.kontakt-band .text { margin-top: var(--space-lg); }

/* ---------- Fußzeile (Ft2, eine Zeile) ---------- */
.fuss { border-top: var(--rule); }
.fuss .innen { font-size: var(--text-sm); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-block: var(--space-xl); color: var(--color-neutral); }
.fuss img { height: 20px; width: auto; }
.fuss .links { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.fuss a { white-space: nowrap; }
.fuss a:hover { color: var(--color-ink); }

/* ---------- Rechtliches ---------- */
.recht { padding-top: clamp(7rem, 16vh, 9rem); padding-bottom: var(--space-4xl); }
.recht .innen { max-width: calc(70ch + 8rem); }
.recht h1 { font-family: var(--font-display); font-variation-settings: "wdth" 118, "wght" 600; font-size: var(--text-2xl); line-height: 1.05; }
.recht h2 { font-size: var(--text-base); font-weight: 600; margin-top: var(--space-2xl); }
.recht p, .recht li { color: var(--color-ink-soft); margin-top: var(--space-sm); }
.recht ul { padding-left: 1.2em; }
.platzhalter { background: var(--color-paper-3); color: var(--color-sand); padding: 0 .3em; border-radius: var(--radius); }

/* ---------- Responsiv ---------- */
@media (max-width: 1099px) {
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .karte svg { display: none; }
  .karte-legende { display: none; }
  .karte-liste { display: grid; gap: var(--space-2xl); }
  .karte-liste section { border-top: var(--rule); padding-top: var(--space-md); }
  .karte-liste h3 { font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 600; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-text); }
  .karte-liste ol { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-md); }
  .karte-liste li b { display: block; font-weight: 600; }
  .karte-liste li span { color: var(--color-ink-soft); font-size: var(--text-sm); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin-top: var(--space-2xs); }
  .chips i { font-style: normal; font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: var(--text-xs); letter-spacing: .06em; color: var(--color-accent-text); border: 1px solid var(--color-rule); border-radius: var(--radius); padding: 0 var(--space-xs); }
}
@media (max-width: 899px) {
  .zweispaltig, .karte-kopf, .karte-geschichte, .abschnitt-kopf,
  .abbildung figcaption { grid-template-columns: minmax(0, 1fr); }
  .zweispaltig > .links, .zweispaltig > .rechts,
  .karte-kopf .h2, .karte-kopf .text, .karte-geschichte .text,
  .abbildung figcaption .h2, .abbildung figcaption .text,
  .liefern .h2, .liefern .text,
  .abschnitt-kopf > .h2, .abschnitt-kopf > div { grid-column: 1 / -1; }
  .band { padding-block: var(--space-3xl); }
  .merkmale { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .h1 { font-size: clamp(2rem, 10.2vw, 2.75rem); font-variation-settings: "wdth" 100, "wght" 650; }
  .h2 { font-variation-settings: "wdth" 104, "wght" 600; -webkit-hyphens: auto; hyphens: auto; }
}
@media (max-width: 699px) {
  .buehne-schleier {
    background:
      linear-gradient(0deg, var(--color-paper) 0%, color-mix(in oklch, var(--color-paper) 82%, transparent) 42%, transparent 72%),
      linear-gradient(180deg, color-mix(in oklch, var(--color-paper) 70%, transparent) 0%, transparent 16%);
  }
  .buehne-quelle { left: clamp(1rem, 3vw, 2.5rem); text-align: left; }
  .bild-breit svg { min-width: 720px; }
  .bild-breit .q-bild { min-width: 720px; }   /* Leinwand liegt über der SVG und muss mit ihr breit werden */
  .bild-mittel svg { min-width: 560px; }
  .wisch { display: block; }
}
@media (max-width: 599px) {
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .kopfzeile nav .breit { display: none; }
  .kopfzeile .kontakt span { display: none; }   /* am Handy nur das Briefsymbol */
  .kopfzeile .kontakt { padding: var(--space-xs); }
  .abbildung { margin-top: var(--space-3xl); }
  .knopf { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .buehne { height: auto; }
  .js .buehne-rahmen { position: relative; height: 92svh; }
  .buehne-karte { display: none; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* Schichtstapel „Sechs Schichten, ein Datensatz“ (js/schichten.js) — großes Bild in „Vom Scan zum Wegekataster“ */
.s3-oben { margin-top: var(--space-3xl); }
.schritte-text { margin-top: var(--space-2xl); gap: var(--space-lg) var(--space-xl); }
.s3-bild { position: relative; aspect-ratio: 16 / 10; background: #080d14; border-radius: 4px; overflow: hidden; }
.s3-standbild, .s3-gl, .s3-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s3-standbild { object-fit: cover; opacity: .85; transition: opacity 700ms var(--ease-out); }
.s3-gl { opacity: 0; transition: opacity 900ms var(--ease-out); }
.s3-svg { pointer-events: none; overflow: visible; }
.s3-bereit .s3-gl { opacity: 1; }
.s3-bereit .s3-standbild { opacity: 0; }
.s3-ohne-gl .s3-gl, .s3-ohne-gl .s3-nochmal { display: none; }
.s3-linie { fill: none; stroke: var(--color-ink-soft); stroke-width: 1; opacity: .7; }
.s3-nr, .s3-lieferung { fill: var(--color-sand); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 12px; letter-spacing: .06em; }
.s3-lieferung { font-size: 13px; }
.s3-nr, .s3-quelle, .s3-lieferung { paint-order: stroke; stroke: #080d14; stroke-width: 4px; stroke-linejoin: round; }   /* lesbar auch über dem Stapel */
.s3-quelle { fill: var(--color-neutral); font-family: var(--font-mono); font-variation-settings: "wdth" 75, "wght" 500; font-size: 10.5px; letter-spacing: .05em; }
@media (max-width: 640px) { .s3-bild { aspect-ratio: 4 / 5; } }