/* Modellstadt: Maße nach vectrfl.com (bar.md), Farben der Marke. Eine Schrift: Instrument Sans.
   Schriftgrößen: Auszeichnung 13 px (versal), Text 16–18 px, Vorspann 24 px, Titel 64–96 px; je Bildschirm drei. */
@font-face {
  font-family: 'Instrument Sans';
  src: url('../schrift/instrument-sans-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../schrift/instrument-sans-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --grund: #EFEADE;            /* gemessener Boden im Licht = Seitengrund */
  --papier: #F4F1E9;
  --weiss: #FFFDF8;
  --tinte: #14171C;
  --tinte-weich: #52565E;
  --kobalt: #1748D5;
  --orange-text: #C2410C;      /* Signalorange als Schrift auf hellem Grund (Kontrast) */
  --linie: rgba(20, 23, 28, 0.12);
  --glas: rgba(20, 23, 28, 0.08);
  --schrift: 'Instrument Sans', system-ui, sans-serif;
  --rand: clamp(16px, 2.8vw, 44px);
  --kopf: 80px;
  --kurve-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --kurve-ort: cubic-bezier(0.65, 0, 0.35, 1);
  --kurve-raus: cubic-bezier(0.7, 0, 0.84, 0);
  color-scheme: light;
}

/* Seitenwechsel zu den Unterseiten und zurück als Überblendung, der Kopf bleibt stehen (src/styles/rahmen.css) */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; }
html.umgeschnitten { background: var(--weiss); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font: 400 18px/1.45 var(--schrift);
  color: var(--tinte);
  background: transparent;
  overflow-x: clip;
}
h1, h2, h3, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 3px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sprunglink { position: fixed; left: var(--rand); top: 12px; z-index: 60; padding: 10px 16px; border-radius: 999px;
  background: var(--tinte); color: var(--weiss); font-size: 13px; text-decoration: none; transform: translateY(-160%); }
.sprunglink:focus-visible { transform: none; }
.auszeichnung { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Bühne ---------- */
.buehne, .standbilder { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 0; }
/* die Bühne kommt, während der Vorlader geht (0,3 s Überlappung): kein Loch, aber auch kein stehendes Doppelbild */
.buehne { display: block; opacity: 0; transition: opacity 700ms var(--kurve-ort) 150ms; }
.fertig .buehne { opacity: 1; }
.buehne.wechsel { opacity: 0; }                 /* ruhige Bewegung: Stationswechsel als kurze Überblendung */
.standbilder { display: none; background: var(--grund) center / cover no-repeat; transition: background-image 150ms; }
.ohne-3d .buehne { display: none; }
/* Namen an Dingen der Welt (namen.js): wie die Listenköpfe, mit Papierschein über der Welt */
.weltnamen { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.welt-name { position: absolute; left: 0; top: 0; opacity: 0; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: var(--tinte);
  text-shadow: 0 0 3px var(--grund), 0 0 8px var(--grund), 0 0 14px var(--grund); }
.ohne-3d .weltnamen { display: none; }
.ohne-3d .standbilder { display: block; }
.ohne-3d .standbilder::after {
  content: '3D nicht verfügbar'; position: absolute; left: var(--rand); bottom: 16px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-weich);
}
/* Übergang ins & (oberflaeche.js): Liste und Namen gehen zuerst, dann deckt Seitenweiß die Bühne; danach ist die Welt
   aus. Die Werte setzt der Scroll (--u-liste, --u-weiss). */
.reise-rahmen, .weltnamen { opacity: var(--u-liste, 1); }
.weissblende { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--weiss);
  opacity: var(--u-weiss, 0); }
.umgeschnitten .buehne, .umgeschnitten .standbilder, .umgeschnitten .reise-rahmen,
.umgeschnitten .weltnamen, .umgeschnitten .weissblende { visibility: hidden; }

/* ---------- Vorlader: im freien Teil des Helds unter dem Text (eigene Rasterzeile), deckt nichts zu.
   Zwei gepunktete Umlaufbahnen, gegeneinander gekippt, die hinteren Hälften blasser: das Zeichen steht im Raum. Die
   äußere füllt sich in Kobalt nach dem Ladefortschritt; Zeichen und Zahl liegen in derselben Zelle in der Mitte.
   Steht die Welt, gehen Bahnen und Zahl; das Zeichen fliegt mit dem Einflug auf das & des Werkhofs und geht erst,
   wenn es dort angekommen ist (vorlader.js, .folgt). ---------- */
.vorlader {
  align-self: stretch; width: 100%; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center; padding: 40px 0 28px;
  pointer-events: none; transition: visibility 0s linear 300ms;
}
.vorlader > * { grid-area: 1 / 1; transition: opacity 300ms var(--kurve-raus); }
.vorlader-ausweg { pointer-events: auto; }
.fertig .vorlader { visibility: hidden; }
.fertig .vorlader > * { opacity: 0; }
.fertig .vorlader.folgt { visibility: visible; }
.fertig .vorlader.folgt .vorlader-zeichen { opacity: 1; }
.vorlader-bahnen { width: 100%; height: 100%; max-height: 370px; overflow: visible; }
.vorlader-bahnen.hoch { display: none; }
.vorlader-zeichen { width: 64px; height: 64px; transition: opacity 300ms var(--kurve-raus); }
.bahn { fill: none; stroke: rgba(20, 23, 28, 0.5); stroke-width: 1.3; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 0.01 4.99; }
.bahn-aussen, .bahn-innen { stroke: url(#bahn-tiefe); }
.bahn-aussen { animation: wandern 16s linear infinite; }
.bahn-innen { animation: wandern 11s linear infinite reverse; }
/* stumpf: bei 0 % stand mit runder Kappe ein einzelner Punkt am Bahnende */
.bahn-voll { stroke: var(--kobalt); stroke-width: 2; stroke-linecap: butt; stroke-dasharray: var(--fortschritt, 0) 100;
  transition: stroke-dasharray 300ms linear; }
@keyframes wandern { to { stroke-dashoffset: -50; } }
.vorlader-text { font-size: 13px; letter-spacing: 0.08em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.vorlader-text, .vorlader-ausweg { transform: translateY(66px); white-space: nowrap; }   /* zwischen den Bahnen */
.haengt .vorlader-text { visibility: hidden; }
.vorlader-ausweg { display: none; font: inherit; font-size: 13px; color: var(--tinte); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.haengt .vorlader-ausweg { display: block; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--kopf); padding: 0 var(--rand);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; view-transition-name: kopf;
  transition: color 300ms var(--kurve-ort), background-color 300ms var(--kurve-ort);
}
/* Haarlinie des hellen Teils: blendet zu Beginn der Fahrt ins & ein, sobald der weiche Saum weg ist (--u-kante); so
   liest sich die Kante als Kopfkante, nicht als gekapptes Quadrat. Als eigene Ebene über dem Papierband */
.kopf::after { content: ''; position: absolute; inset: 100% 0 auto; height: 1px; pointer-events: none;
  background: rgb(227, 225, 221); opacity: var(--u-kante, 0); }
.kopf.ueber-dunkel::after { display: none; }
/* Unter dem Kopf läuft die Welt in Papier aus: sonst ragten Dächer, Bildschirme und Haltepunkte in die Ruhezone
   der Wortmarke (System-Kritik 06.10.: ein Bildschirm bis ans „M“). Am Kopf selbst, damit das Band beim Scrollen
   stehen bleibt; im hellen Teil hat der Kopf seine eigene Fläche. */
/* deckend bis 90 px (bis 72 px blieben der Wortmarke 0–4 px Reserve). Im Übergang ins & geht der weiche Saum weg
   (der Kopf trägt dann eigenen Grund, die Welt läuft ohne Maske darunter durch), und der Grund nimmt das Weiß des
   Zeichens an, dann das Seitenweiß: kein dunklerer Streifen über dem Weiß (Auftrags- und Handwerks-Kritik R12) */
.kopf::before { content: ''; position: absolute; inset: 0 0 auto; z-index: -1; pointer-events: none;
  --saum: calc(64px * var(--u-saum, 1));
  --band: color-mix(in srgb, color-mix(in srgb, rgb(239, 234, 222), var(--und-weiss, rgb(245, 241, 232))
    calc(var(--u-tief, 0) * 100%)), var(--weiss) calc(var(--u-weiss, 0) * 100%));
  height: calc(100% + var(--saum));
  background: linear-gradient(180deg, var(--band) 0, var(--band) calc(100% - var(--saum) * 54 / 64), transparent 100%); }
.umgeschnitten .kopf::before, .kopf.ueber-dunkel::before { display: none; }
.kopf-menue { display: none; }
.menue { display: none; }
.kopf-links { display: flex; gap: 8px; margin-left: -12px; }
.kopf-links a {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 16px 12px;
}
/* Ruhezone im 80-px-Kopf: oben und unten je mindestens die Quadrathöhe (rund 0,13 der Breite), also höchstens
   rund 200 px Breite; bei 216 px fehlten 2 px */
.kopf-marke { display: block; width: clamp(170px, 13.5vw, 196px); }
.kopf-marke img { width: 100%; height: auto; }
.marke-dunkel { display: none; }
.kopf-rechts { display: flex; gap: 10px; justify-content: flex-end; }
/* über den weißen Abschnitten eine eigene Fläche, sonst läuft die Schrift unter Marke und Pillen durch */
.umgeschnitten .kopf { background: var(--weiss); }   /* deckend: unscharf schien verdeckter Inhalt als Grauschleier
   durch (bis 9 % Helligkeit) */
/* deckend mit Haarlinie: ohne Kante schnitt der Kopf Inhalt an einer unsichtbaren Linie, durchscheinend stand
   die weiße Schrift darunter hinter der Navigation */
.kopf.ueber-dunkel { color: var(--weiss); background: var(--tinte); box-shadow: 0 1px 0 rgba(255, 253, 248, 0.12); }
.kopf.ueber-dunkel .marke-hell { display: none; }
.kopf.ueber-dunkel .marke-dunkel { display: block; }
.kopf.ueber-dunkel .pille-glas { background: rgba(255, 253, 248, 0.14); color: var(--weiss); }
.kopf.ueber-dunkel .pille-voll { background: var(--weiss); color: var(--tinte); }
.kopf.ueber-dunkel .kopf-menue { background: rgba(255, 253, 248, 0.14); color: var(--weiss); }

/* ---------- Pillen ---------- */
.pille {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms var(--kurve-ort), color 150ms var(--kurve-ort), transform 150ms var(--kurve-ort);
}
.pille span { transition: transform 150ms var(--kurve-ort); }
.pille:active { transform: scale(0.98); }
.pille-voll { background: var(--tinte); color: var(--weiss); }
.pille-glas { background: var(--glas); color: var(--tinte); backdrop-filter: blur(10px); }
.pille-hell { background: var(--weiss); color: var(--tinte); }
.textlink { font-size: 18px; text-underline-offset: 4px; }
.ablauf-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* Handy, heller Teil: Kontaktweg als feste Leiste; über dem Fuß weg, der hat seinen eigenen Knopf */
.handy-leiste { display: none; }
/* Hover nur, wo es einen Zeiger gibt: auf dem Handy bliebe der Zustand nach dem Tippen hängen */
@media (hover: hover) {
  .kopf-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pille:hover span { transform: translate(3px, -3px); }
  .pille-voll:hover { background: var(--kobalt); }
  .pille-glas:hover { background: rgba(20, 23, 28, 0.14); }
  .pille-hell:hover { background: var(--kobalt); color: var(--weiss); }
  .held-schritt a:hover { color: var(--kobalt); }
  .fuss-kacheln a:hover { background: rgba(255, 253, 248, 0.04); }
  .fuss-kacheln a:hover .pfeil { transform: translateX(4px); }
  .fuss-zeile a:hover { text-decoration: underline; }
}

/* ---------- Held: steht sofort da, die Zeilen steigen aus ihrer Maske ---------- */
main { position: relative; z-index: 1; }
.held {
  position: relative; height: 100svh; display: grid; justify-items: center; align-content: start; text-align: center;
  grid-template-rows: auto auto auto minmax(0, 1fr);     /* die letzte Zeile ist der freie Teil: dort lädt die Welt */
  padding: calc(var(--kopf) + clamp(24px, 6vh, 64px)) var(--rand) 0;
}
.held-titel { display: grid; font-size: clamp(44px, 6.67vw, 96px); font-weight: 500; line-height: 0.9;
  letter-spacing: -0.06em; text-wrap: balance; }   /* Grid: die Ränder der Zeilenmasken fallen nicht zusammen */
/* Maske mit Luft für Ober- und Unterlängen, ohne den Zeilenabstand zu ändern */
.zeile { display: block; overflow: hidden; padding: 0.12em 0 0.34em; margin: -0.12em 0 -0.34em; }
.zeile > span { display: block; animation: zeile-auf 0.75s var(--kurve-ein) 60ms both; }
.zeile + .zeile > span { animation-delay: 110ms; }
@keyframes zeile-auf { from { transform: translateY(125%); } }
.held-text { max-width: 700px; margin-top: 44px; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.22;
  text-wrap: balance; }
.held-schritt { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px;
  margin-top: 24px; font-size: 13px; letter-spacing: 0.04em; }
.held-schritt a { font-weight: 500; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px; }
.held-schritt > span:last-child { color: rgba(20, 23, 28, 0.76); }   /* auf Papier rund 7 : 1, Tinte-weich nur 4,6 */
/* liegt über der Stadt: schlichter Text mit einem Schein in Papierfarbe, kein Knopf (der nächste Schritt ist der Knopf) */
.held-hinweis {
  position: absolute; left: 0; right: 0; bottom: 28px; width: max-content; margin: 0 auto; padding-bottom: 6px;
  border-bottom: 1px solid currentColor; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
/* eigener Papiergrund statt Textschein: der Schein der Buchstaben lag über der Unterstreichung */
.held-hinweis::before { content: ''; position: absolute; inset: -18px -36px -14px; z-index: -1;
  background: radial-gradient(closest-side, var(--grund) 62%, rgba(239, 234, 222, 0)); }
/* erst wenn die Welt steht und die Kamera ruht (Einflug 2,55 s): vorher flog das Zeichen durch den Hinweis */
.js:not(.fertig) .held-hinweis { opacity: 0; }
.fertig .held-hinweis { animation: einblenden 0.9s var(--kurve-ein) 2400ms both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Reise ---------- */
.reise { position: relative; }
.reise-rahmen {
  position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none;
  display: flex; align-items: flex-end; padding: 0 var(--rand) clamp(24px, 6vh, 56px);
}
/* die Liste steht in der Welt, ohne Karte: zur Listenseite läuft die Welt in Dunst aus (wie bei der Vorlage),
   die Stationen liegen in den rechten zwei Dritteln (stationen.json, versatz) */
/* so viel, dass unter dem Text keine Fahrbahnmarkierung mehr schneidet, dichter verschenkte er das linke Drittel
   (Handwerks-Kritik 06.10., Runden 7 und 9) */
.reise-rahmen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(239, 234, 222, 0.76) 0%, rgba(239, 234, 222, 0.64) 30%,
    rgba(239, 234, 222, 0) 47%); }
.liste { width: min(440px, 100%); pointer-events: auto; }
/* Überzeile und Unterpunkte über dem Dunst dunkler als Tinte-weich: dort nur 4,7 : 1 */
.liste-kopf { font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px;
  color: rgba(20, 23, 28, 0.76); }
.liste-legende { margin-bottom: 12px; font-size: 16px; line-height: 1.4; color: var(--tinte); }
.liste-legende b { font-weight: 500; }
/* hängend: umbricht eine Zeile, beginnt die Folgezeile unter dem Text, nicht unter dem Zeichen */
.legende-zeile { display: block; padding-left: 23px; text-indent: -23px; }
.zeichen { display: inline-block; vertical-align: middle; margin: -3px 7px 0 0; }
.zeichen-strahl { width: 16px; height: 3px; border-radius: 2px; background: var(--kobalt); }
.zeichen-halt { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #FF5A1F; margin: -3px 9px 0 2px;
  background: radial-gradient(circle, #FF5A1F 0 2px, transparent 2.6px); }   /* 2 + 12 + 9 = Strich 16 + 7: Wörter fluchten */
.liste-punkt { display: grid; grid-template-columns: 40px 1fr; align-items: start; padding: 6px 0; }
.liste-nr {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 7px;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color 300ms var(--kurve-ort), box-shadow 300ms var(--kurve-ort);
}
.liste-titel { font-size: 13px; font-weight: 500; line-height: 32px; transform-origin: left center;
  transition: font-size 500ms var(--kurve-ein); }
.liste-inhalt {
  display: grid; grid-template-rows: 0fr; opacity: 0; position: relative; padding-left: 18px;
  transition: grid-template-rows 500ms var(--kurve-ein), opacity 300ms var(--kurve-ort);
}
.liste-inhalt > * { overflow: hidden; min-height: 0; }
.liste-inhalt p { font-size: 16px; line-height: 1.45; color: var(--tinte); text-wrap: pretty; }   /* kein Wort allein */
.liste-inhalt .liste-beispiele { display: flex; flex-wrap: wrap; column-gap: 14px; overflow: hidden; margin-top: 8px;
  font-size: 13px; color: rgba(20, 23, 28, 0.76); }
.liste-beispiele span, .legende-zeile { position: relative; }
.liste-beispiele span + span::before { content: '·'; position: absolute; left: -9px; }
.liste-inhalt::before, .liste-inhalt::after { content: ''; position: absolute; left: 0; top: 4px; width: 2px; border-radius: 2px; }
.liste-inhalt::before { bottom: 4px; background: var(--linie); }
.liste-inhalt::after { height: calc((100% - 8px) * var(--schritt, 0)); background: var(--tinte); }
.liste-punkt.aktiv .liste-nr { background: var(--weiss); box-shadow: 0 0 0 1px var(--linie); }
.liste-punkt.aktiv .liste-titel { font-size: 24px; }
.liste-punkt.aktiv .liste-inhalt { grid-template-rows: 1fr; opacity: 1; padding-bottom: 10px; }
.liste-punkt.aktiv .liste-inhalt > * { overflow: visible; }
/* Kurzer Weg (Deniz 05.10.: „weniger scrollwege“): je Station 60 svh. Am & steht die Welt 20 svh, dann 100 svh
   Übergang ins & (Benjamin 06.10.: der Schnitt war „zu abrupt“; bei 70 svh lag die ganze Einfahrt in rund 100 px,
   ein Reißschwenk statt einer Fahrt, Kritik R13): die Strecke beginnt 20 svh nach der Ankunft und endet, wo der
   Ablauf oben ankommt (.ablauf: −100 svh). */
.reise-schritt { height: 60svh; }
.reise-uebergang { height: 100svh; margin-top: -40svh; }
.reise-halt { height: 100svh; }

/* ---------- Ablauf ---------- */
.ablauf, .beides, .fragen { position: relative; z-index: 3; background: var(--weiss); }
.ablauf { padding: calc(var(--kopf) + clamp(24px, 4vh, 40px)) var(--rand) clamp(80px, 10vh, 120px); overflow-x: clip; }
/* liegt unter dem Ende der Reise; im Übergang ohne eigenen Grund (das Weiß kommt aus der Weißfläche), der Inhalt
   steigt erst aus dem fertigen Weiß auf (--u-inhalt) */
.js .ablauf { margin-top: -100svh; visibility: hidden; }
.js:not(.umgeschnitten) .ablauf { background: none; }
.js.ablauf-da .ablauf, .js.umgeschnitten .ablauf { visibility: visible; }
/* ohne Fahrt (ruhige Bewegung, ohne 3D) schiebt sich der Ablauf mit eigenem Weiß über die Bühne (oberflaeche.js) */
.js.ohne-fahrt .ablauf { background: var(--weiss); }
.js .ablauf > * { opacity: var(--u-inhalt, 1);
  transform: translateY(calc((1 - var(--u-inhalt, 1)) * 32px - var(--u-hub, 0px))); }
.abschnitt-titel { font-size: clamp(32px, 4.44vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.05em;
  max-width: 14em; text-wrap: balance; }
/* Symbol, Titel, Text je Karte auf gemeinsamen Zeilen: die Texte beginnen auf einer Linie */
.karten {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
  margin: clamp(48px, 8vh, 96px) 0 48px; perspective: 1000px;
}
.karte { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 24px 24px 12px;
  border-left: 1px solid var(--linie); }
.karte:last-child { border-right: 1px solid var(--linie); }
.karte-symbol { width: 96px; height: 96px; margin-bottom: 28px; overflow: visible; }
/* Symbole aus werkstatt/symbole.py: eine Isometrie, weiße Flächen verdecken, je Symbol eine Kobaltfläche */
.karte-symbol .strich { fill: none; stroke: var(--tinte); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.karte-symbol .strich-hell { stroke: var(--weiss); stroke-width: 2.5; }
.karte-symbol .flaeche { fill: var(--weiss); }
.karte-symbol .akzent { fill: var(--kobalt); }
.karte h3 { max-width: 11em; font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em;
  margin-bottom: 14px; text-wrap: balance; }
.karte-nr { display: block; margin-bottom: 10px; font-size: 18px; font-weight: 500; letter-spacing: 0;
  color: var(--kobalt); font-variant-numeric: tabular-nums; }
.karte p { font-size: 18px; line-height: 1.5; color: var(--tinte-weich); text-wrap: pretty; }

/* ---------- Bild und Text ---------- */
.beides, .fragen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.beides { align-items: center; padding: clamp(64px, 10vh, 120px) var(--rand); }
.beides-bild, .fragen-titel { grid-column: 1 / 3; margin-right: 25px; }
.beides-text, .fragen-liste { grid-column: 3 / 5; }
.beides-text { padding-left: 25px; }
.beides-bild { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; }
.beides-bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); }
.beides-text p { margin: 24px 0 32px; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--tinte-weich);
  text-wrap: pretty; }

/* ---------- Fragen ---------- */
/* gleicher Takt zwischen den Abschnitten (Knopf → Bild, Bild → Fragen, Fragen → Fuß je rund 180 px bei 900 px Höhe);
   oben weniger, weil der Titel 26 px tiefer auf der ersten Frage steht */
.fragen { padding: clamp(48px, 7vh, 90px) var(--rand) clamp(120px, 20vh, 200px); }
/* Versal-Oberkante auf der ersten Frage */
.fragen-titel { align-self: start; margin-top: 26px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 25px;
  font-size: 24px; font-weight: 500; letter-spacing: -0.04em; cursor: pointer; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--tinte)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23FFFDF8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 240ms var(--kurve-ort);
}
.frage[open] summary::after { transform: rotate(180deg); }
.frage-text { overflow: hidden; padding-left: 25px; }
.frage p { padding: 0 0 26px; max-width: 34em; font-size: 18px; line-height: 1.5; color: var(--tinte-weich);
  text-wrap: pretty; }

/* ---------- Fuß ---------- */
.fuss { position: relative; z-index: 3; background: var(--tinte); color: var(--weiss); overflow: hidden;
  padding: clamp(96px, 20vh, 200px) var(--rand) 0; }
.fuss-titel { font-size: clamp(34px, 5.56vw, 80px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; max-width: 12em;
  text-wrap: balance; }
.fuss-aufruf p { margin: 24px 0 36px; max-width: 30em; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.3;
  color: rgba(255, 253, 248, 0.72); }
.fuss-mail { color: var(--weiss); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Endbild am Seitenende: Kacheln, Wortmarke und Rechtszeile füllen den Bildschirm unter dem Kopf bis auf die Luft
   darüber. So fällt der Schnitt bei jeder Fensterhöhe in den Abstand vor den Kacheln, statt durch Knopf oder Titel
   (Handwerks-Kritik R10: Knopf mit 0 px Luft unter der Kopflinie bei 1440 × 900); der Abstand ist größer als die Luft,
   damit der Knopf ganz unter dem Kopf liegt */
.fuss-ende { --luft: 48px; display: flex; flex-direction: column; margin-top: clamp(64px, 10vh, 120px);
  min-height: calc(100svh - var(--kopf) - var(--luft)); padding-bottom: clamp(40px, 6vh, 52px); }
.fuss-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 253, 248, 0.16); border-bottom: 1px solid rgba(255, 253, 248, 0.16); }
.fuss-kacheln a {
  display: flex; justify-content: space-between; align-items: center; padding: 40px 24px; text-decoration: none;
  font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; letter-spacing: -0.02em;
  border-right: 1px solid rgba(255, 253, 248, 0.16); transition: background-color 150ms var(--kurve-ort);
}
.fuss-kacheln a:last-child { border-right: 0; }
.pfeil { flex: none; width: 40px; height: 40px; transition: transform 150ms var(--kurve-ort); }
.pfeil circle { fill: var(--kobalt); }
.pfeil path { fill: none; stroke: var(--weiss); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Ruhezone der Wortmarke (LOGO-SYSTEM.md): rundum mindestens die Höhe des Quadrats, auch zum Seitenrand. So groß, wie
   sie das erlaubt: sichtbar 0,97 der SVG-Breite, Quadrat 0,1265 davon; zum Rand die Quadrathöhe mit 10 % Puffer
   (1440 px: Rand 161 px bei 146 px Quadrat), oben und unten gut 15 % (die Bänder von 213 px schwammen) */
.fuss-wortmarke { --breite: calc(100vw * 0.8); width: var(--breite); margin: auto;   /* mittig im freien Raum */
  padding: calc(var(--breite) * 0.135) 0; }
.fuss-wortmarke img { width: 100%; height: auto; transform: translate(1.1%, var(--hub, 0%)); }
.fuss-zeile { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
  color: rgba(255, 253, 248, 0.6); }
.fuss-rechts { display: flex; gap: 20px; }
.fuss-zeile a { text-decoration: none; color: var(--weiss); }
/* hochkant am Desktop passt der ganze Fuß ins Bild: dort nicht strecken, sonst stünde die Wortmarke in einer Leere */
@media (min-width: 901px) and (orientation: portrait) { .fuss-ende { min-height: 0; } }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  .karte:nth-child(2) { border-right: 1px solid var(--linie); }
  .beides, .fragen { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .beides-bild, .fragen-titel, .beides-text, .fragen-liste { grid-column: auto; margin-right: 0; }
  .beides-text, .frage summary, .frage-text { padding-left: 0; }
  .frage summary { padding-right: 0; }
  .fragen-titel { margin-top: 0; }
}
@media (max-width: 767px) {
  :root { --kopf: 72px; --rand: 24px; }        /* Ruhezone der 170-px-Wortmarke: oben und unten je ~25 px */
  .kopf { grid-template-columns: auto 1fr; }
  .kopf-links, .kopf-rechts .pille { display: none; }
  .kopf-marke { width: 170px; }                 /* sichtbar ≥ 160 px (Mindestbreite laut Logo-System) */
  .kopf-menue { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
    font: inherit; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte);
    background: var(--glas); backdrop-filter: blur(10px); cursor: pointer; }   /* gefüllt ist nur der nächste Schritt */
  .menue:not([hidden]) { display: grid; gap: 4px; position: absolute; left: var(--rand); right: var(--rand);
    top: calc(var(--kopf) - 4px); padding: 14px; border-radius: 16px; background: var(--weiss);
    box-shadow: 0 0 0 1px var(--linie); }
  .menue a { padding: 12px 8px; font-size: 18px; text-decoration: none; color: var(--tinte); }
  .menue .pille { justify-content: center; margin-top: 6px; font-size: 13px; color: var(--weiss); }
  .held { padding-top: calc(var(--kopf) + 20px); }
  /* das Papierband endet über der Überschrift (hellte sonst ihre Oberkante auf), die Ruhezone der Wortmarke deckt es */
  .kopf::before { --saum: calc(20px * var(--u-saum, 1));
    background: linear-gradient(180deg, var(--band) 0, var(--band) calc(100% - var(--saum)), transparent 100%); }
  /* Maske unten nur so tief wie die Unterlängen: tiefer streifte das „g“ beim Aufsteigen die Unterzeile */
  .zeile { padding-bottom: 0.24em; margin-bottom: -0.24em; }
  .held-titel { font-size: 62px; letter-spacing: -0.055em; }   /* Messlatte 4: rund das Vierfache der Unterzeile */
  .vorlader { padding: 28px 0 20px; }
  .vorlader-bahnen.quer { display: none; }
  .vorlader-bahnen.hoch { display: block; }
  .vorlader-zeichen { width: 52px; height: 52px; }
  .vorlader-text, .vorlader-ausweg { transform: translateY(90px); }   /* unter der äußeren Bahn, nicht auf ihr */
  .held-text { font-size: 16px; margin-top: 18px; max-width: 30em; }
  /* ohne Pillen im Kopf ist der nächste Schritt hier der Knopf, kurz genug für eine Zeile */
  .nur-gross { display: none; }
  .held-schritt { flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
  .held-schritt a { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px;
    border-radius: 999px; background: var(--tinte); color: var(--weiss); text-decoration: none; }
  /* die Liste nimmt unten höchstens die Hälfte: oben steht das Motiv der Station, unten Dunst */
  .reise-rahmen { padding-bottom: 16px; }
  /* bis über die Legende dicht: darunter lag an Station 02 eine Fahrbahnmarkierung auf „durch“ */
  .reise-rahmen::before { background: linear-gradient(0deg, rgba(239, 234, 222, 0.88) 0%, rgba(239, 234, 222, 0.82) 48%,
    rgba(239, 234, 222, 0) 62%); }
  .liste-legende { margin-bottom: 6px; }
  /* die Liste lässt der Station mehr Höhe: Kopfzeile nur für Vorleser */
  .liste-kopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* auf dem Handy in einem Fluss, Trennpunkt wie bei den Beispielen */
  .liste-legende { display: flex; flex-wrap: wrap; column-gap: 12px; overflow: hidden; }
  .legende-zeile + .legende-zeile::before { content: '·'; position: absolute; left: -8px; }
  .liste-punkt { padding: 2px 0; }
  .liste-punkt.aktiv .liste-titel { font-size: 21px; }
  .karten { grid-template-columns: minmax(0, 1fr); }
  .karte { border-left: 0; border-right: 0 !important; border-top: 1px solid var(--linie); padding: 28px 0; }
  .karte:last-child { border-bottom: 1px solid var(--linie); }   /* schließt wie am Desktop mit einer Linie */
  .karte h3 { max-width: none; }
  /* Titel gegen Text im selben Schritt wie am Desktop (24 : 18) */
  .frage summary, .karte h3 { font-size: 22px; }
  .karte p, .frage p, .beides-text p, .karte-nr, .textlink { font-size: 16px; }
  /* knapper zum Knopf: am Seitenende stand die Mailadresse sonst halb unter dem Kopf */
  .fuss-ende { --luft: 32px; margin-top: 48px; }
  .fuss-kacheln { grid-template-columns: minmax(0, 1fr); }
  .fuss-kacheln a { border-right: 0; border-bottom: 1px solid rgba(255, 253, 248, 0.16); padding: 28px 0; }
  .fuss-zeile { flex-direction: column; }
  /* deckende Fläche mit Haarlinie wie der Kopf: ein Verlauf darüber ließ die letzte Zeile halb verblasst stehen
     (2 : 1, Auftrags-Kritik R8) */
  .handy-leiste { display: block; position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; pointer-events: none;
    padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--weiss); box-shadow: 0 -1px 0 var(--linie);
    transform: translateY(calc((1 - var(--u-leiste, 0)) * 100%)); transition: transform 400ms var(--kurve-ein); }
  /* steigt mit dem Ende des Übergangs auf (--u-leiste), über dem Fuß geht sie */
  .am-fuss .handy-leiste { transform: translateY(100%); }
  .handy-aufruf { display: flex; justify-content: center; pointer-events: auto; }
  /* die Leiste trägt den Knopf schon: unter den Karten bleibt nur der Textlink */
  .ablauf-weiter .pille { display: none; }
  /* als Textlink wie „Zusammenarbeit ansehen“: im Fluss, damit die Unterstreichung bis unter den Pfeil läuft */
  .beides-text .pille { display: inline; height: auto; padding: 0; background: none; color: var(--tinte);
    font-size: 16px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 4px; }
  .fragen { padding-bottom: 120px; }
}
/* schmale Telefone: Wortmarke bleibt 170 px (sichtbar ≥ 160), Rand und Knopf geben nach, damit zwischen beiden die
   Ruhezone (Quadrathöhe, 20 px) frei bleibt; bei 360 px sonst nur 3 px */
@media (max-width: 389px) {
  :root { --rand: 20px; }
  .kopf-menue { padding: 0 14px; letter-spacing: 0.04em; }
}

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .standbilder { transition: background-image 150ms linear !important; }
  .buehne { transition: opacity 75ms linear !important; }
}