/* vorell, Vorschau nach dem Muster von Novaform. Eigener Aufbau, kein übernommener Quelltext.
   Runde 3: Switzer für alles, Geist Mono nur für Nummern; Grün als Hauptfarbe.
   Runde 4: Nummern, kleine Überschriften und Etiketten in einer Akzentfarbe (Bronze, von Elias am 21.10.2026 wieder erlaubt);
   das Spektrum nur noch im Hintergrund des Kopfs, im Vorlader (unverändert) und bei Linie und Form im Ablauf. */
:root {
  --fichte-tief: #0E2C26;
  --fichte: #17453B;
  --fichte-hell: #1F5A4C;
  --nacht: #06110E;
  --schnee: #F6F8F5;
  --graphit: #1B2522;
  --grau: #6A7570;
  --linie: rgba(27, 37, 34, .14);
  /* Spektrum: dieselben Töne wie der bewegte Hintergrund im Kopf */
  --s1: #4a3cff; --s2: #2fb6d8; --s3: #9be15d; --s4: #ffd23f; --s5: #ff7a2f; --s6: #e5243b;
  --spektrum: linear-gradient(90deg, var(--s1), var(--s2) 22%, var(--s3) 44%, var(--s4) 62%, var(--s5) 80%, var(--s6));
  --spektrum-tief: linear-gradient(90deg, #3a2fd0 0%, #1678c8 22%, #0f927a 45%, #6f9b1c 60%, #d0661a 80%, #c42036 100%);
  /* Bronze: Kontrast 4,1 zu #F6F8F5 und 4,4 zu #06110E, nachgerechnet nach WCAG-Formel am 21.10.2026 */
  --akzent: #A26D3A;
  --akzent-hell: #C99566;
  --rand: clamp(20px, 2.8vw, 40px);
  --sans: "Switzer", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--nacht); color: var(--graphit);
  font-family: var(--sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
/* Nummern in Monospace, alles andere Switzer */
.nr { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; font-weight: 400; font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; } /* Runde 6b: Wortgruppen ohne Umbruch, gesetzt von bau.py */
.klein { font-size: 13px; letter-spacing: .01em; font-weight: 500; }
.leise { opacity: .62; }
.etikett { color: var(--akzent); margin-bottom: 28px; font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.pfeil { text-decoration: none; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pfeil:hover { opacity: .7; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.punkt { color: var(--akzent); }
.akzent { color: var(--akzent); }

/* Knopf: Grund hell oder grün, Kante in Bronze */
.knopf {
  --grund: var(--schnee);
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--nacht); font-weight: 600; font-size: 15px;
  padding: 12px 21px; border-radius: 999px; white-space: nowrap; border: 1.5px solid transparent;
  background: var(--grund); border-color: var(--akzent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-color .45s ease, color .45s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(162,109,58,.8); }
.knopf-dunkel { --grund: var(--fichte-tief); color: var(--schnee); }
.knopf-gross { font-size: 18px; padding: 17px 29px; }

/* ---------- Vorlader ---------- */
.vorlader {
  position: fixed; inset: 0; z-index: 100; background: var(--nacht);
  display: grid; place-items: center; overflow: hidden;
}
html:not(.js) .vorlader, html.ruhig .vorlader { display: none; }
.vorlader-name { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; color: var(--schnee); font-weight: 600; font-size: 30px; letter-spacing: -.02em; }
.vorlader-name .klammer { width: 2px; height: 36px; background: var(--schnee); display: block; }
.vl-wort { display: inline-flex; overflow: hidden; }
/* Runde 11c: start() wartet jetzt auf load (seite.js); bis dahin bleibt der Name verborgen, statt still dazustehen und dann neu einzulaufen */
html.js:not(.ruhig) .vorlader:not(.los) .vorlader-name { visibility: hidden; }
.vl-wort .b { display: inline-block; }
.vorlader-linien { position: absolute; inset: 0; }
.vorlader-linien i {
  position: absolute; left: 0; right: 0; top: var(--y); height: 2px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--s1) 18%, var(--s2) 34%, var(--s3) 48%, var(--s4) 60%, var(--s5) 72%, var(--s6) 84%, transparent);
  opacity: .75;
}

/* ---------- Kopf (fixed) ---------- */
.kopf {
  position: fixed; inset: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden;
  color: var(--schnee); background: var(--nacht);
}
.spektrum { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kopf-schleier { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.kopf-innen-aus .kopf-inhalt { visibility: hidden; }

.kopf-inhalt { display: none; position: absolute; inset: 0; z-index: 2; padding: 0 var(--rand); }
.k1 { display: block; }
.zeilen .z { display: block; overflow: hidden; }
.zeilen .z > span { display: inline-block; }

/* Kopf 1 */
.k1 { --wort: min(27vw, 46vh); }
.k1-satz { position: absolute; left: var(--rand); bottom: calc(var(--wort) * .8 + 56px); max-width: 640px; }
.k1-satz h1 { font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 18px; }
.k1-satz h1 > span { white-space: nowrap; }
.k1-satz p { font-size: clamp(16px, 1.25vw, 19px); max-width: 520px; opacity: .86; }
.k1-satz .k1-beschr { margin-top: 18px; max-width: 500px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; opacity: 1; color: rgba(246,248,245,.68); }
/* Runde 11: Unterzeile „Messen. Bauen. Fahren.“ wieder im Kopf (Elias 22.10.2026); die 24-px-Regel aus Runde 10 ist zurückgenommen, Abstände wie Runde 9 */
.k1-beschr em { font-style: normal; font-weight: 500; color: var(--schnee); }
.k1-wort {
  /* Runde 4b: Logo L2 statt des gesetzten Worts. Im SVG (viewBox 2398 x 820, 1000 Einheiten je em) liegt die Grundlinie bei y = 760
     und die Tinte des v beginnt bei x = 42; daher Höhe .82em, Grundlinie .06em über der Bildunterkante, Tinte genau auf dem Rand. */
  position: absolute; left: var(--rand); bottom: 18px; display: block;
  font-size: var(--wort); line-height: 0; overflow: hidden; padding-bottom: .02em;
}
/* Grundlinie wie beim bisherigen Wort: .039em über der Unterkante der Zeile (am Bildschirmfoto r4-kopf-1440 gemessen, Unterkante der l bei 859 px) */
.k1-wort img { display: block; height: .82em; width: auto; max-width: none; margin: 0 0 -.021em -.042em; }
.k1-leistungen {
  position: absolute; right: var(--rand); bottom: 34px; width: clamp(240px, 22vw, 340px);
  list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(246,248,245,.22);
}
.k1-leistungen li { border-bottom: 1px solid rgba(246,248,245,.22); }
.k1-leistungen a { display: grid; gap: 4px; padding: 12px 0 13px; text-decoration: none; transition: padding .35s cubic-bezier(.2,.7,.2,1); }
.kennung { font-size: 13px; font-weight: 500; color: rgba(246,248,245,.66); letter-spacing: .01em; }
.kennung .nr { color: var(--akzent-hell); margin-right: 4px; }
.k1-frage { font-size: clamp(15px, 1.15vw, 18px); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.k1-leistungen a:hover { padding-left: 8px; }
@media (max-width: 1180px) and (min-width: 768px) { .k1-frage { display: none; } .k1-leistungen { width: 190px; } }

/* ---------- Bühne: fährt über den Kopf ---------- */
.kopf-platz { height: 100vh; height: 100svh; }
.buehne { position: relative; z-index: 5; }
.buehne > section:first-child { border-radius: 28px 28px 0 0; box-shadow: 0 -30px 60px rgba(0,0,0,.25); }
.ueber, .leistungen, .markt, .fuss { background: var(--schnee); }

/* Runde 4b: Leere unter dem Absatz bis zum Ablauf etwa halbiert (Kritiker Typografie 7); gemessen in pruefung/r4b-ergebnis.json */
.ueber { padding: clamp(100px, 13vw, 200px) var(--rand) clamp(40px, 4.5vw, 72px); text-align: center; }
.einfaerben {
  font-size: clamp(22px, 2.25vw, 34px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2;
  max-width: 1120px; margin: 0 auto; color: var(--graphit); text-wrap: balance;
}
.einfaerben em { font-style: italic; font-weight: 300; }
.einfaerben .w { color: #C2CAC5; }
html.ruhig .einfaerben .w, html:not(.js) .einfaerben .w { color: inherit; }
.datenblatt {
  margin-top: clamp(56px, 7vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.datenblatt > div, .datenblatt > a { padding: 22px 24px 26px; border-left: 1px solid var(--linie); display: flex; flex-direction: column; gap: 10px; }
.datenblatt > div:first-child, .datenblatt > a:first-child { border-left: 0; padding-left: 0; }
.datenblatt span.klein { color: var(--grau); }
.datenblatt strong { font-size: clamp(44px, 5vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.datenblatt-zwei { grid-template-columns: repeat(2, 1fr); }
.datenblatt-zwei a { text-decoration: none; }
.datenblatt-zwei a:hover .bezug { text-decoration: underline; text-underline-offset: 4px; }
.datenblatt .bezug { color: #3b4843; max-width: 420px; }

/* gestapelte Karten */
.leistungen { padding: clamp(40px, 6vw, 80px) var(--rand) clamp(90px, 10vw, 160px); --basis: 96px; --schritt: 66px; }
.leistungen h2, .markt h2 {
  font-size: clamp(52px, 10vw, 180px); font-weight: 600; letter-spacing: -.05em; line-height: .9; margin-bottom: clamp(40px, 5vw, 72px);
}
.aufbau .z { display: block; overflow: visible; padding-bottom: .04em; } /* Runde 4b: maskiert wird in .z-mask; hier abgeschnitten wurden Unterlängen */
.stapel { display: grid; gap: 40px; }
.karte {
  position: sticky; top: calc(var(--basis) + var(--i) * var(--schritt));
  height: calc(100vh - var(--basis) - 3 * var(--schritt) - 28px); min-height: 440px; max-height: 720px;
  background: #fff; border: 1px solid var(--linie); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; transform-origin: 50% 0;
  box-shadow: 0 -12px 40px rgba(14,44,38,.07);
}
.karte-reiter { flex: 0 0 var(--schritt); display: flex; justify-content: space-between; align-items: center; padding: 0 26px; border-bottom: 1px solid var(--linie); }
.karte-reiter .klein { font-size: 14px; }
.karte-reiter .nr { margin-right: 4px; color: var(--akzent); }
.karte-koerper { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; }
.karte-text { padding: clamp(26px, 3vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.karte-text h3 { font-size: clamp(28px, 3vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1.04; }
.karte-text p { color: #3b4843; max-width: 440px; margin-top: auto; } /* Runde 6c: Überschrift oben, Text und Link unten, kein Leerraum unter dem Link */
.karte-text .pfeil { margin-top: 12px; align-self: start; } /* Runde 6b (Kritiker Typografie 7): Link direkt unter dem Text statt ganz unten */
.karte-bild { position: relative; overflow: hidden; background: #EEF0EC; }
.karte-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.karte-schatten { position: absolute; inset: 0; background: var(--graphit); opacity: 0; pointer-events: none; }

/* ---------- Ablauf, Runde 8: Fassung b aus ablauf-neu/ (gemeinsam.css und b/b.css, Stand 22.10.2026) ----------
   Eigener Aufbau, kein Code von Neutomni. Dunkles Grün, leuchtende Spektrum-Linie, Form aus Glas (im Code gezeichnet, buehne.js).
   Die Überschrift steht in einer eigenen Zeile über den Spalten; Säulen, Linie und Form bleiben unterhalb dieser Zeile.
   Übernommen ohne die Regeln für body und .ab-platz (nur für die Einzelseite in ablauf-neu/). */
.ab { position: relative; background: var(--nacht); color: var(--schnee); }
.ab-strecke { position: relative; height: calc(100vh + 3200px); }
.ab-buehne {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--nacht);
  display: flex; flex-direction: column; padding: clamp(64px, 9vh, 96px) var(--rand) 18px;
}
/* Verlauf auf eigener, fester Ebene (ablauf-neu Runde 2: als Hintergrund der Bühne wurde er bei jedem Bild neu gemalt) */
.ab-buehne::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform;
  background: radial-gradient(110% 75% at 50% 58%, #0f2a23 0%, #091712 52%, var(--nacht) 100%); }
.ab-kopf {
  position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding-bottom: clamp(20px, 3vh, 34px);
}
.ab-titel { font-size: clamp(40px, 4.8vw, 80px); font-weight: 600; letter-spacing: -.045em; line-height: .95; color: var(--schnee); }
.ab-titel em { font-style: italic; font-weight: 300; letter-spacing: -.035em; }
.ab-satz { font-size: clamp(17px, 1.45vw, 23px); font-weight: 500; letter-spacing: -.015em; line-height: 1.25; max-width: 420px; color: rgba(246, 248, 245, .7); }
.ab-satz em { font-style: italic; font-weight: 300; color: var(--schnee); }
.ab-spalten { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; position: relative; z-index: 1; }
.ab-spalte { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
/* Säulen: vier Glasflächen wachsen beim Scrollen von unten, oben je eine feine Spektrumkante; über alle vier ergibt die Kante ein Spektrum */
.ab-saeule {
  position: absolute; inset: 0 7px; z-index: 0; pointer-events: none; clip-path: inset(var(--zu, 0px) 0 0 0);
  background: linear-gradient(180deg, rgba(246, 248, 245, .075) 0, rgba(246, 248, 245, .03) 160px, rgba(246, 248, 245, .015) 100%);
  box-shadow: inset 1px 0 0 rgba(246, 248, 245, .07), inset -1px 0 0 rgba(246, 248, 245, .07);
}
.ab-kante {
  position: absolute; left: 7px; right: 7px; top: 0; height: 1.5px; z-index: 0; pointer-events: none;
  transform: translateY(var(--zu, 0px)); will-change: transform;
  background: var(--spektrum); background-size: 400% 100%; background-position: calc(var(--i, 0) * 33.333%) 0;
  box-shadow: 0 0 12px rgba(155, 225, 93, .22);
}
.ab-spalte-kopf { position: absolute; left: 20px; top: 18px; z-index: 1; font-size: 14px; font-weight: 500; line-height: 1.5; opacity: var(--nr, 1); color: rgba(246, 248, 245, .8); }
.ab-spalte-kopf .nr { margin-right: 6px; color: var(--akzent-hell); }
.ab-fuss { position: relative; z-index: 1; padding: 20px 20px 22px; }
.ab-fuss h3 { display: flex; flex-direction: column; font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; margin-bottom: 14px;
  opacity: max(var(--aktiv, 1), .62); transition: opacity .6s ease; } /* Runde 8: .62 statt .55, kursive Zeile sonst 4,49 : 1 (gemessen, r8-ergebnis.json) */
.ab-fuss h3 em { font-style: italic; font-weight: 300; letter-spacing: -.025em; color: rgba(246, 248, 245, .86); }
/* Runde 8 (Kontrast): in ablauf-neu wurde der ganze Fuß noch nicht erreichter Spalten auf .55 gedimmt, der Fließtext lag damit bei
   rund 4 : 1 (Deckkraft .78 x .55, nachgerechnet nach WCAG). Jetzt dimmt nur die Überschrift; der Text bleibt mindestens bei .8. */
.ab-fuss p { font-size: 15px; line-height: 1.4; max-width: 300px; color: rgba(246, 248, 245, .78); opacity: max(var(--aktiv, 1), .8); transition: opacity .6s ease; }
.ab-zeichnung { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: hidden; will-change: transform; }
.ab-band { display: none; }
/* Glanz der gefahrenen Linie als eigene, einmal gezeichnete Ebene; aufgedeckt über die Breite (buehne.js) */
.ab-glanz { position: absolute; left: 0; top: 0; height: 100%; width: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.ab-glanz svg { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
/* Ruhige Fassung am Rechner (prefers-reduced-motion): nichts steht, nichts rollt; Linie ganz, Form an vier Stellen */
.ab-ruhig .ab-strecke { height: auto; }
.ab-ruhig .ab-buehne { position: relative; height: 100vh; min-height: 720px; }

/* Runde 8: Übergang helle Seite -> dunkler Ablauf -> helle Karten. Die hellen Flächen enden und beginnen mit derselben Rundung wie
   die Bühne oben (28 px); dahinter liegt der dunkle Grund der Seite, der in den Ablauf übergeht, statt einer harten waagrechten Kante. */
.buehne > section.ueber { position: relative; z-index: 1; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; } /* Spezifität über .buehne > section:first-child */
.leistungen { position: relative; z-index: 1; border-radius: 28px 28px 0 0; }
/* der dunkle Grund des Ablaufs reicht hinter beide Rundungen; sonst schien dort der stehende Kopf durch (gemessen am Handy, r8-390-02-ueber.png) */
.ab { margin: -28px 0; padding: 28px 0; }

/* Belege: dunkel, bleibt stehen, Inhalt wechselt */
/* Runde 5: Scrollweg 1575 px bei 900 px Höhe (Mitte zwischen 2070 und 1080 px, Auftrag Runde 5), (275 - 100) % von 900 px */
.belege { height: 275vh; position: relative; background: var(--nacht); color: var(--schnee); }
.belege-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; padding: 0 var(--rand); align-items: center; }
.streifen {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--nacht) 0%, rgba(6,17,14,.4) 45%, rgba(6,17,14,0) 100%),
    repeating-linear-gradient(90deg, rgba(246,248,245,0) 0 18px, rgba(246,248,245,.06) 18px 20px, rgba(246,248,245,0) 20px 44px),
    linear-gradient(0deg, rgba(23,69,59,.7), rgba(14,44,38,0) 60%);
}
.streifen::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%;
  background: linear-gradient(90deg, rgba(31,90,76,.9), rgba(162,109,58,.85) 55%, rgba(31,90,76,.9));
  filter: blur(70px); opacity: .22; animation: schimmer 14s ease-in-out infinite alternate;
}
@keyframes schimmer { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.belege .etikett, .belege .akzent { color: var(--akzent-hell); }
.belege-links { position: relative; }
/* Runde 4b: Überschrift von Elias (zwei Sätze) ist länger als „Kunden und Ergebnisse.“; kleiner gesetzt, damit sie neben der Karte steht */
.belege-links h2 { font-size: clamp(40px, 4.8vw, 84px); font-weight: 600; letter-spacing: -.045em; line-height: .98; }
/* Zeilenmasken der Überschriften: Unterlängen (g) und kursiver Überhang wurden abgeschnitten; Platz in der Maske, Lage unverändert */
.belege-links h2 em { display: block; } /* zweiter Satz beginnt eine eigene Zeile */
.aufbau .z-mask { padding: 0 .12em .14em 0; margin: 0 -.12em -.14em 0; }
.belege-zahl { margin-top: 36px; color: var(--akzent-hell); }
.belege-rechts { position: relative; height: min(70vh, 560px); }
.beleg {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: clamp(28px, 3.4vw, 52px); border: 1px solid rgba(246,248,245,.14); border-radius: 18px;
  background: rgba(14,44,38,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.beleg h3 { font-size: clamp(28px, 2.9vw, 46px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; }
.beleg p { color: rgba(246,248,245,.78); max-width: 560px; }
.beleg-wert { display: flex; align-items: baseline; gap: 16px; border-top: 1px solid rgba(246,248,245,.16); padding-top: 18px; position: relative; }
.beleg-wert::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 1px; background: var(--akzent); }
.beleg-stimme { margin: 0; }
.beleg-stimme blockquote { margin: 0; display: grid; gap: 16px; }
.beleg-stimme .stimme-satz { font-size: clamp(26px, 2.6vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; color: var(--schnee); max-width: none; text-indent: -.4em; }
.beleg-stimme blockquote p + p { font-size: clamp(16px, 1.2vw, 18px); }
.beleg-stimme figcaption { display: grid; gap: 2px; border-top: 1px solid rgba(246,248,245,.16); padding-top: 18px; position: relative; }
.beleg-stimme figcaption::before { content: ""; position: absolute; left: 0; top: -1px; width: 120px; height: 1px; background: var(--akzent); }
.beleg-stimme figcaption strong { font-weight: 600; font-size: 17px; }
.beleg-stimme figcaption span { font-size: 14px; color: rgba(246,248,245,.66); }
.beleg-wert strong { font-size: clamp(48px, 5vw, 84px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--schnee); font-variant-numeric: tabular-nums; }
.beleg .pfeil { align-self: start; }

/* Markt */
.markt { padding: clamp(100px, 12vw, 200px) var(--rand) clamp(100px, 12vw, 180px); }
.markt h2 { font-size: clamp(44px, 7.2vw, 128px); max-width: 1300px; }
.markt h2 .c { display: inline-block; }
.datenblatt-markt > div { gap: 14px; }
.datenblatt-markt p { color: #3b4843; max-width: 340px; }
.quelle { color: var(--grau); text-decoration: none; margin-top: auto; }
.quelle:hover { color: var(--graphit); text-decoration: underline; }

/* Schluss: Fenster auf den stehenden Kopf */
.schluss {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 120px var(--rand); color: var(--schnee); gap: 26px;
}
.schluss h2 { font-size: clamp(44px, 7.4vw, 132px); font-weight: 600; letter-spacing: -.045em; line-height: .95; max-width: 1200px; }
.schluss p { max-width: 560px; font-size: 19px; opacity: .88; }
.schluss-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 12px; }

/* Fuß */
.fuss { padding: 80px var(--rand) 28px; border-radius: 28px 28px 0 0; overflow: hidden; }
.fuss-oben { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.fuss-oben p { max-width: 380px; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.fuss ul a { text-decoration: none; }
/* Runde 13: Knopf „Cookie-Einstellungen“ sieht aus wie die Links daneben (bis zum Einbau der Messung unsichtbar, hidden im HTML) */
.fuss-cookie { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.fuss li[hidden] { display: none; }
.fuss ul a:hover { text-decoration: underline; }
.fuss-wort { font-weight: 700; font-size: 36vw; letter-spacing: -.055em; line-height: .78; margin: 0 0 0 -.045em; padding-top: .06em; white-space: nowrap; }
/* Runde 4b: Logo L2 (hell) an der Stelle des Worts; Ursprung des v im SVG bei x = 40, Ende des letzten l bei x = 2358, Grundlinie bei y = 760 von 820 */
.fuss-wort:has(img) { padding-top: .054em; } /* das Bild macht die Zeile um .006em höher; ausgeglichen, gemessen mit pruefung/r4b_lage.py */
.fuss-wort img { display: inline-block; height: .82em; width: auto; max-width: none; vertical-align: -.06em; margin: 0 -.04em 0 -.04em; }
.fuss-wort .punkt { letter-spacing: 0; color: var(--akzent); }
.fuss-copy { color: var(--grau); margin-top: 20px; }

body.ueber-kopf .unschaerfe { opacity: 1; }
body.ueber-kopf.im-ablauf .unschaerfe { opacity: 0; }
.unschaerfe {
  opacity: 0; transition: opacity .4s;
  position: fixed; left: 0; right: 0; bottom: 0; height: 72px; z-index: 30; pointer-events: none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent);
}

/* ---------- Stehende Leiste: drei Punkte links, Knopf rechts; die Punkte klappen beim Scrollen nach rechts zusammen ----------
   Die Werte --falt (0 bis 1, Punkte wandern zum Knopf) und --hell (0 bis 1, Menüleiste erscheint) setzt seite.js aus dem Scrollweg. */
.leiste {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start; padding: 28px var(--rand);
  --hell: 0;
}
.leiste > * { pointer-events: auto; }
.nav { font-size: 15px; font-weight: 500; color: var(--schnee); }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: start; }
.nav li { will-change: transform, opacity; position: relative; isolation: isolate; }
/* Runde 5b: jedes Wort wird erst zur Pille, dann überlappen die Pillen.
   Runde 6 (Elias): beim Zusammenlaufen bleiben sie weiß (::before); erst beim Zusammendrücken zum Ball blendet der Bronze-Ton darüber (::after).
   Runde 6b (Kritiker: Beige-Zwischenton): Bronze wird nicht überblendet, sondern wächst als Kreis aus der Mitte, erst wenn die Pille auf Ballgröße geschrumpft ist. */
.nav li::before, .nav li::after { content: ""; position: absolute; inset: -4px -10px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--r0, 999px) * (1 - var(--rund, 0)) + var(--rund, 0) * 50%); } /* Runde 6b: beim Zusammendrücken wird die Pille rund wie der Ball */
.nav li::before { opacity: var(--pille, 0); background: var(--schnee); box-shadow: 0 6px 16px -8px rgba(0,0,0,.6); }
/* Runde 7 (Elias): der Ball bleibt weiß, kein Bronze mehr */
.nav li::after { display: none; }
.nav a { text-decoration: none; opacity: .88; }
.nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.leiste-rechts { position: relative; isolation: isolate; display: flex; align-items: center; gap: 6px; padding: 5px; margin: -5px; border-radius: 999px; }
.leiste-grund {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--hell);
  background: rgba(246,248,245,.8); border: 1px solid var(--linie);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px -18px rgba(6,17,14,.45);
}
/* Runde 5: Menü-Knopf nur am Handy; am Desktop öffnet der Ball das Banner */
.menue-knopf {
  display: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--schnee); background: transparent; border: 0; cursor: pointer;
  align-items: center; gap: 10px; padding: 11px 16px 11px 18px; border-radius: 999px; transition: color .45s;
}
.menue-knopf i { position: relative; width: 14px; height: 11px; display: block; /* Runde 7: drei Linien, mittlere als Hintergrund */
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; transition: background-size .25s; }
.menue-knopf i::before, .menue-knopf i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.2,.7,.2,1), top .35s; }
.menue-knopf i::before { top: 0; } .menue-knopf i::after { top: 9.5px; }
.menue-knopf[aria-expanded="true"] i { background-size: 0 1.5px; }
.menue-knopf[aria-expanded="true"] i::before { top: 4.75px; transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] i::after { top: 4.75px; transform: rotate(-45deg); }
/* Platz rechts neben dem Knopf, in dem der Ball am Ende liegt */
.ball-platz { width: 38px; height: 38px; flex: 0 0 38px; margin-left: 4px; }
/* Der Ball: entsteht aus den drei Punkten, rollt durch den Knopf (liegt dabei unter ihm) und bleibt rechts daneben liegen.
   Lage und Drehung setzt seite.js aus dem Scrollweg; die Marke innen zeigt das Rollen. */
.ball {
  position: fixed; left: 0; top: 0; z-index: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer; pointer-events: none; opacity: 0; transform: translate(-100px, -100px) scale(0); background: none; --m: 0;
}
/* Runde 7 (Elias: der Ball darf weiß bleiben und geht bei der Ankunft in die drei Linien über).
   --m (0 bis 1) setzt seite.js aus dem Scrollweg, erst nachdem der Ball neben dem Knopf liegt; rückwärts genauso.
   .ball-dreh dreht sich beim Rollen (Marke zeigt das Rollen), .ball-linien dreht sich nie, damit die Linien waagrecht bleiben. */
.ball-dreh { position: absolute; inset: 0; border-radius: 50%; }
/* Runde 8 (Auftrag: Kerbe wirkte in b weiter wie ein Ausrufezeichen, r7-nav-ankunft-1440-b.jpg): statt eines Punkts über der Mitte ein
   flacher Bogen nahe am Rand, wie eine Naht; er dreht mit und zeigt das Rollen, bildet mit nichts darunter ein Zeichen und
   verschwindet im ersten Viertel des Übergangs */
.ball-dreh i { position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: rgba(14,44,38,.2);
  background: none; opacity: clamp(0, calc(1 - var(--m) * 4), 1); }
.ball-linien { position: absolute; inset: 0; pointer-events: none; }
.ball-linien b { position: absolute; left: 50%; top: 50%; display: block; transition: transform .35s cubic-bezier(.2,.7,.2,1); } /* nur das X überblendet; alles am Scrollweg folgt ohne Verzug */
.ball-linien b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: var(--fichte-tief); transition: background-color .35s; }
/* Schalter a (Standard): weißer Ball, die drei Linien wachsen in ihm aus der Mitte */
.menue-a .ball-dreh { background: radial-gradient(circle at 34% 30%, #fff 0, var(--schnee) 55%, #dde2dc 100%);
  box-shadow: 0 0 0 1px rgba(6,17,14,.07), 0 6px 16px -6px rgba(6,17,14,.55), inset 0 -2px 4px rgba(6,17,14,.12); }
.menue-a .ball-linien b { width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; opacity: var(--m); scale: var(--m) 1; }
.menue-a .ball-linien b:nth-child(1) { translate: 0 calc(-4.5px * var(--m)); }
.menue-a .ball-linien b:nth-child(3) { translate: 0 calc(4.5px * var(--m)); }
.menue-a.banner-auf .ball-linien b:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menue-a.banner-auf .ball-linien b:nth-child(2) { transform: scaleX(0); }
.menue-a.banner-auf .ball-linien b:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
/* Schalter b: der Ball selbst teilt sich in die drei Linien.
   Runde 8 (Auftrag: kurzer Klumpen beim Übergang, r7-nav-ankunft-1440-b.jpg): vorher wurden drei deckungsgleiche Scheiben zugleich
   flach und breit, dazwischen stand ein abgerundetes Viereck. Jetzt zwei getrennte Schritte, die Form bleibt dabei immer rund:
   --s (m 0 bis .55) der Ball zerfällt in drei kleine Punkte übereinander (wie die drei Punkte vom Anfang der Leiste),
   --z (m .55 bis 1) die Punkte ziehen sich waagrecht zu den Linien. Dunkel werden sie, während sie klein sind (unter 12,5 px). */
.menue-b .ball-linien b { --s: clamp(0, calc(var(--m) / .55), 1); --z: clamp(0, calc((var(--m) - .55) / .45), 1);
  --bw: calc(30px - 25px * var(--s) + 13px * var(--z)); --bh: calc(30px - 25px * var(--s) - 2.5px * var(--z));
  width: var(--bw); height: var(--bh); margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2); border-radius: 999px;
  background: radial-gradient(circle at 34% 30%, #fff 0, var(--schnee) 55%, #dde2dc 100%);
  box-shadow: 0 6px 16px -6px rgba(6,17,14,calc(.55 * (1 - var(--s)))); }
.menue-b .ball-linien b::after { opacity: clamp(0, calc((var(--s) - .7) / .3), 1); }
.menue-b .ball-linien b:nth-child(1) { translate: 0 calc(-6px * var(--s)); }
.menue-b .ball-linien b:nth-child(3) { translate: 0 calc(6px * var(--s)); }
.menue-b .ball-dreh { z-index: 1; }
.menue-b.banner-auf .ball-linien b::after { background-color: var(--schnee); }
.menue-b.banner-auf .ball-linien b:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-b.banner-auf .ball-linien b:nth-child(2) { transform: scaleX(0); }
.menue-b.banner-auf .ball-linien b:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.ball.da { pointer-events: auto; }
.ball:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.leiste-rechts .knopf { position: relative; z-index: 1; } /* Ball liegt zwischen Grund (−1) und Knopf (1): rollt unter dem Knopf durch */
/* Menü-Banner: wird vom Ball von oben heruntergezogen */
.banner {
  position: fixed; left: 0; right: 0; top: 0; z-index: 45; color: var(--schnee);
  background: linear-gradient(180deg, #0b1d18 0%, var(--nacht) 100%);
  border-bottom: 1px solid rgba(246,248,245,.12); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  transform: translateY(-101%); visibility: hidden;
}
.banner.offen, .banner.bewegt { visibility: visible; }
.banner-innen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 40px;
  padding: 118px var(--rand) 56px;
}
.banner-kopf { color: var(--akzent-hell); font-size: 13px; font-weight: 500; letter-spacing: .01em; margin-bottom: 18px; }
.banner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.banner ul a { text-decoration: none; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: rgba(246,248,245,.92); }
.banner ul a:hover { color: var(--schnee); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.banner-kontakt { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.banner-kontakt .knopf { --grund: var(--schnee); }
.banner-mail { color: rgba(246,248,245,.8); text-decoration: none; border-bottom: 1px solid rgba(246,248,245,.3); }
.banner-mail:hover { color: var(--schnee); }
html.banner-auf .leiste .knopf { --grund: var(--schnee); color: var(--nacht); }
html.banner-auf .leiste-grund { opacity: 0; transition: opacity .3s; }
.leiste .knopf { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background-color .45s ease, color .45s ease; }
.leiste.dunkel .knopf { --grund: var(--fichte-tief); color: var(--schnee); }

/* Runde 6 (Elias: Banner „ein wenig zu brav“): der Spektrum-Bogen aus dem Kopf läuft unten durch das Banner, weich und unscharf;
   ein dunkler Schleier von oben hält die Schrift lesbar. Selbst gebaut als Bänder je Spektrumfarbe, kein übernommener Quelltext. */
.banner { overflow: hidden; isolation: isolate; }
.banner::before { content: ""; position: absolute; left: -4%; right: -4%; top: 0; bottom: 0; z-index: -2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,0%29' stroke='%23e5243b' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,19%29' stroke='%23ff7a2f' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,38%29' stroke='%23ffd23f' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,57%29' stroke='%239be15d' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,76%29' stroke='%232fb6d8' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,95%29' stroke='%232a6cf0' stroke-width='26' fill='none'/%3E%3Cpath d='M-80,470 C300,470 700,456 960,424 C1160,398 1270,296 1520,80' transform='translate%280,114%29' stroke='%234a3cff' stroke-width='26' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; filter: blur(26px) saturate(.9); opacity: .68; }
/* Runde 9 (Elias: Streifen „ein bisschen milder“, Trennung Menü/Seite muss erkennbar bleiben): Bogen weicher, weniger satt, schwächer;
   dafür Unterkante des Banners etwas heller als vorher (.12), damit die Grenze zur Seite klar bleibt */
.banner { border-bottom-color: rgba(246,248,245,.2); }
.banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,17,14,.5) 0%, rgba(6,17,14,.2) 50%, rgba(6,17,14,0) 80%); }
.banner-innen { position: relative; padding-bottom: 120px; }
/* Runde 7: Logo oben links im offenen Banner, auf der Höhe der Leiste */
.banner-logo { position: absolute; left: var(--rand); top: 26px; z-index: 1; display: block; line-height: 0; }
.banner-logo img { height: 36px; width: auto; display: block; }
.banner ul a { text-shadow: 0 1px 14px rgba(6,17,14,.55); }

/* Runde 7: zwischen 768 und 1100 px passt „Termin vereinbaren“ nicht in die vierte Spalte (stand schon in Runde 6c 14 px über dem Rand bei 768);
   dort stehen drei Spalten und der Kontakt als eigene Zeile darunter */
@media (min-width: 768px) and (max-width: 1100px) {
  .banner-innen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .banner-kontakt { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .banner-kontakt .banner-kopf { flex-basis: 100%; margin-bottom: 0; }
}

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .karte-koerper { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .karte-text { gap: 12px; }
  .karte-text .pfeil { margin-top: 4px; }
  .belege-buehne { grid-template-columns: 1fr; align-content: center; gap: 28px; }
}
@media (max-width: 767px) {
  body { font-size: 16px; }
  /* Handy: schlichte Menüleiste rechts, von Anfang an */
  .nav { display: none; }
  .leiste { padding: 14px var(--rand); justify-content: flex-end; }
  /* Runde 5b (Kritiker Handy 7): sobald die Seite über dem Kopf liegt, hat die Leiste einen eigenen Grund über die ganze Breite,
     damit sie keine Überschrift halb überdeckt; Menü-Knopf und Knopf stehen darauf lesbar */
  .leiste::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: rgba(246,248,245,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie); }
  .leiste.dunkel::before { opacity: 1; }
  html.banner-auf .leiste::before { opacity: 0; }
  .buehne h2 { scroll-margin-top: 80px; }
  .menue-knopf { display: inline-flex; padding: 9px 12px 9px 14px; font-size: 14px; }
  .leiste.dunkel .menue-knopf { color: var(--graphit); }
  html.banner-auf .leiste .menue-knopf { color: var(--schnee); background: transparent; }
  .leiste .knopf { padding: 9px 15px; font-size: 14px; }
  .ball, .ball-platz { display: none; }
  .leiste-grund { opacity: 0; }
  .banner { max-height: 100vh; max-height: 100svh; overflow-y: auto; }
  .banner-innen { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding: 84px var(--rand) 130px; }
  .banner::before { top: 12%; } /* Runde 6: Spektrum unter der letzten Zeile */
  .banner-kontakt { grid-column: 1 / -1; }
  .banner-logo { top: 19px; }
  .banner-logo img { height: 26px; }
  /* Runde 7: offen steht links das Logo; der kleine Knopf weicht, das Banner hat „Termin vereinbaren“ groß (sonst stößt das Logo bei 320 px an den Menü-Knopf) */
  .leiste .knopf { transition: opacity .25s, visibility .25s, background-color .45s ease, color .45s ease; }
  html.banner-auf .leiste .knopf { opacity: 0; visibility: hidden; }
  .menue-knopf { order: 2; } /* Menü ganz rechts: bleibt beim Öffnen stehen, links wird Platz für das Logo */
  .banner ul a { font-size: 20px; }
  .k1 { --wort: 28vw; }
  .k1-satz { bottom: calc(var(--wort) * .8 + 44px); right: var(--rand); }
  .k1-satz .k1-beschr { font-size: 15px; margin-top: 12px; }
  .k1-leistungen { display: none; }
  .ueber { padding: 90px var(--rand) 40px; }
  .leistungen { --basis: 84px; --schritt: 48px; }
  .karte { min-height: 0; height: calc(100svh - var(--basis) - 3 * var(--schritt) - 16px); }
  .karte-reiter { padding: 0 18px; }
  .karte-koerper { grid-template-rows: 1fr auto; }
  .karte-bild { order: -1; min-height: 120px; }
  .karte-text { padding: 20px 20px 22px; }
  .karte-text h3 { font-size: 26px; }
  .karte-text p { font-size: 15px; }
  /* Ablauf auf dem Handy (Runde 8, aus ablauf-neu): ruhige Fassung, Schritte untereinander, darüber die ganze Linie mit der Form an vier Stellen */
  .ab-strecke { height: auto; }
  .ab-buehne { position: relative; height: auto; overflow: visible; padding: 64px var(--rand) 64px; }
  .ab-buehne::before { display: none; } /* lag über der nicht positionierten Leiste und verdeckte sie (ablauf-neu Runde 2b) */
  .ab-kopf { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 24px; }
  .ab-titel { font-size: clamp(36px, 10.5vw, 52px); }
  .ab-band { display: block; position: relative; z-index: 1; width: 100%; height: auto; margin: 0 0 18px; }
  .ab-spalten { grid-template-columns: 1fr; gap: 10px; }
  .ab-saeule { inset: 0; }
  .ab-kante { left: 0; right: 0; }
  .ab-spalte-kopf { position: static; padding: 18px 20px 0; }
  .ab-fuss { padding-top: 26px; }
  .ab-fuss p { max-width: none; }
  .ab-zeichnung, .ab-glanz { display: none; }
  .belege { height: auto; }
  .belege-buehne { position: relative; height: auto; padding: 90px var(--rand); }
  .belege-rechts { height: auto; display: grid; gap: 18px; }
  .beleg { position: relative; inset: auto; opacity: 1 !important; transform: none !important; }
  .belege-zahl { display: none; }
  .beleg-stimme .stimme-satz { font-size: 25px; }
  .fuss-oben { grid-template-columns: 1fr 1fr; }
  .fuss-oben > div:first-child { grid-column: 1 / -1; }
  .datenblatt { grid-template-columns: 1fr; }
  .datenblatt > div, .datenblatt > a { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); }
  .datenblatt > div:first-child, .datenblatt > a:first-child { border-top: 0; }
}

/* Ohne Bewegung: alles sofort sichtbar, nichts klebt im Weg; Ablauf im Endzustand */
html.ruhig .streifen::after { animation: none; }
html.ruhig .belege { height: auto; }
html.ruhig .belege-buehne { position: relative; height: auto; padding: 100px var(--rand); }
html.ruhig .belege-rechts { height: auto; display: grid; gap: 18px; }
html.ruhig .beleg { position: relative; inset: auto; }
html.ruhig .belege-zahl { display: none; }

/* Hervorhebung des letzten Teils (Switzer kursiv, leicht) */
h2 em, .unterzeile em { font-style: italic; font-weight: 300; letter-spacing: -.02em; }
.k1-satz .unterzeile { font-size: clamp(20px, 1.7vw, 26px); opacity: .92; letter-spacing: -.015em; font-weight: 500; }
.leistungen h2 { font-size: clamp(48px, 8.4vw, 150px); }
.belege-links h2 em, .schluss h2 em { font-weight: 300; }

/* Runde 5: deutsche Anführungszeichen, groß und typografisch gesetzt (Switzer, leicht, in Bronze) */
.az { color: var(--akzent); font-weight: 300; font-style: normal; letter-spacing: 0; }
.einfaerben .az, .einfaerben .az * { color: var(--akzent) !important; } /* GSAP färbt die Wörter inline ein; die Zeichen bleiben Bronze */
.einfaerben .az { font-size: 1.9em; line-height: 0; }
.einfaerben .az-auf { margin-right: .06em; vertical-align: -.02em; }
.einfaerben .az-zu { margin-left: .04em; vertical-align: -.32em; }
.kunden-kopf .az { color: var(--akzent-hell); font-size: 1.15em; line-height: 0; }
.kunden-kopf .az-auf { margin-right: .02em; }
.kunden-kopf .az-zu { margin-left: .02em; }

/* ---------- Runde 12a: kein Logo in der Leiste (Elias 22.10.2026, unterseiten/feedback-elias-r4.md Punkt 2) ----------
   Das Leistenlogo der Unterseiten aus Runde 11c samt seinen Regeln ist entfernt (Sicherung in alt-runde12a/seite.css); die Leiste der Unterseiten
   ist wieder dieselbe wie auf der Startseite. Zur Startseite führt das Logo im geöffneten Menü (.banner-logo).
   Fehler aus der Kritik (Runde 11c): unter 390 px lag .leiste-rechts (z-index 50) mit dem verborgenen Knopf über dem Banner-Logo (z-index 45);
   ein Tipp auf das Logo traf die Leiste und schloss nur das Menü. Im offenen Menü nimmt am Handy darum nur der Menü-Knopf Klicks an. */
@media (max-width: 767px) {
  html.banner-auf .leiste-rechts { pointer-events: none; }
  html.banner-auf .leiste-rechts .menue-knopf { pointer-events: auto; }
}
/* Runde 11c (gefunden mit pruefung/r11c/logo.py): der leere Kasten der Wörter oben links fing im offenen Menü den Klick auf das Banner-Logo ab
   (Leiste liegt über dem Banner). Nur die Wörter selbst nehmen Klicks an; verborgene Wörter (zum Ball geworden) nehmen keine an. */
.leiste > .nav { pointer-events: none; }
.leiste > .nav li { pointer-events: auto; }

/* ---------- Runde 12a: Effekte vorwärmen, solange der Vorlader steht (seite.js, Kommentar bei „vorwaerm“) ----------
   Der Halter liegt über dem Vorlader (z-index 100), ragt nur 4 px in den linken Rand und ist mit Deckkraft 0,01 auf dem dunklen Grund nicht zu sehen (höchstens 2 von 255 Helligkeitsstufen, gerechnet: 0,01 · 0,8 · (246 − 6)).
   Die Werte der Effekte sind dieselben wie an ihrer Stelle: Glas der Leiste (.leiste-grund), Unschärfe am unteren Rand (.unschaerfe).
   Nur diese beiden und die Glasform (buehne.js): bei ihnen verschwanden die langen Bilder, wenn der Effekt fehlte (pruefung/r12a/zustand.py).
   Kasten, Schimmer und Banner vorzuwärmen änderte an den langen Bildern weiter unten nichts (pruefung/r12a/tabelle-warp-v1.json) und kostet beim Laden Übersetzungszeit; sie sind darum nicht dabei. */
html:not(.js) .vorwaermen, html.ruhig .vorwaermen { display: none; }
.vorwaermen { position: fixed; left: -236px; top: 0; width: 240px; height: 520px; z-index: 101; pointer-events: none; }
.vorwaermen > i, .vorwaermen > svg { position: absolute; left: 0; width: 240px; display: block; opacity: .01; }
.vw-glas { top: 0; height: 44px; border-radius: 999px; background: rgba(246,248,245,.8); border: 1px solid var(--linie);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px -18px rgba(6,17,14,.45); }
.vw-unschaerfe { top: 52px; height: 72px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.vorwaermen > svg { top: 132px; height: auto; overflow: visible; }

/* ---------- Runde 12b: Ablauf am Handy nach dem Bedienmuster von Neutomni (Konzept bau/pruefung/konzept-handy-ablauf.md, Elias 22.10.2026) ----------
   Eigener Aufbau, kein Code, Text oder Bild von Neutomni. Gilt nur unter 768 px und nur mit der Klasse .ab-quer, die buehne.js setzt, wenn Bewegung
   erlaubt ist. Ohne Skript und bei reduzierter Bewegung bleibt die ruhige Fassung (Karten untereinander, Regeln oben im Handy-Block).
   Vier Felder bilden einen starren Streifen (Welt), den eine Kamera nach links schiebt (transform, buehne.js); Maße setzt buehne.js als Variablen:
   --q-s Abstand der Felder (W − 12), --q-f Feldbreite (W − 24), --q-welt Breite des Streifens, --q-kb Breite des Spektrums über alle Felder. */
@media (max-width: 767px) {
  .ab-quer .ab-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; padding: 0; display: block; isolation: isolate; }
  .ab-quer .ab-buehne::before { display: block; } /* mit isolation bleibt der Verlauf in der Bühne und liegt nicht über der Leiste */
  .ab-quer .ab-kopf { position: absolute; left: var(--rand); right: var(--rand); top: 84px; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
  .ab-quer .ab-titel { font-size: min(32px, 8.4vw); white-space: nowrap; }
  .ab-quer .ab-satz { font-size: 15px; line-height: 1.3; max-width: none; }
  .ab-quer .ab-band { display: none; }
  .ab-quer .ab-spalten { position: absolute; left: 0; top: var(--q-oben, 186px); bottom: 12px; width: var(--q-welt); display: block; gap: 0; z-index: 1; will-change: transform; }
  .ab-quer .ab-spalte { position: absolute; top: 0; bottom: 0; left: calc(12px + var(--i) * var(--q-s)); width: var(--q-f); }
  .ab-quer .ab-saeule { clip-path: none; }
  /* Kante: das Spektrum läuft in Weltkoordinaten über alle vier Felder, jedes Feld zeigt sein Stück (wie am Desktop sein Viertel) */
  .ab-quer .ab-kante { transform: none; background-size: var(--q-kb) 100%; background-position: calc(var(--i) * var(--q-s) * -1) 0; }
  .ab-quer .ab-spalte-kopf { position: absolute; left: 20px; top: 18px; padding: 0; opacity: 1; }
  .ab-quer .ab-fuss { padding: 20px 20px 22px; }
  .ab-quer .ab-fuss h3 { font-size: 26px; }
  .ab-quer .ab-fuss p { font-size: 15px; max-width: none; }
  .ab-quer .ab-szene { display: none; }
  /* Linie: zwei einmal gezeichnete Ebenen, aufgedeckt durch doppelte Verschiebung (Fenster und Inhalt gegenläufig), keine Breitenänderung je Bild */
  .ab-q-fenster { position: absolute; left: 0; overflow: hidden; z-index: 2; pointer-events: none; will-change: transform; }
  .ab-q-fenster svg { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
  .ab-q-form, .ab-q-funke { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; display: block; will-change: transform; }
  /* ruhige Fassung: jede Karte mit ihrer eigenen stehenden Szene (buehne.js, aufbauenRuhigHandy) */
  .ab-spalten { gap: 12px; }
  .ab-band { display: none; } /* das Band mit vier Formen fällt weg (Konzept, ruhige Fassung) */
  .ab-szene { display: block; width: 100%; height: auto; margin: 14px 0 -6px; position: relative; z-index: 1; }
}