/* Michel Rother, Finanzcoach in Chemnitz. Gestaltung der ganzen Website (Hülle, Etappe 1).
   Leitmotiv „Maßarbeit“: Hellblau wie das Hemd, Anzugblau wie der Stoff, Gold wie Naht und Manschettenknopf.
   Bewegung kommt aus bausteine/ (Preset RF, Tempo klar). Diese Datei wird nach Etappe 1 eingefroren (SHA in STAND.md);
   neue Klassen nur über den Dirigenten. Alle Klassen mit Markup stehen in quelle/KLASSEN.md.
   Schriften lokal aus schriften/ (OFL, Lizenz daneben), kein fremder Server. */

/* ---------- Schriften ---------- */
/* Seit 12.10.2026 (Wunsch Noah, aus dem Schriften-Dashboard): Prata für Überschriften, Source Sans 3 für Text.
   Vorher Marcellus, Lato und Cormorant Garamond (Menü). Prata hat nur einen Schnitt, Fettes kommt aus Source Sans 3. */
@font-face { font-family: "Prata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/prata-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schriften/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ---------- Farbrollen (PLAN.md Abschnitt 4, 71 / 21 / 5 + 3) ---------- */
:root {
  /* Dominant */
  --blauweiss: #f6f8fb; --weiss: #ffffff; --kuehl: #edf2f7;
  /* Sekundär */
  --hellblau: #cfdcea; --hellblau-tief: #bfd0e3; --anzug: #22395a; --schiefer: #4a5a70;
  /* Akzent 1 Gold, Akzent 2 Marine */
  --gold: #b08729; --gold-hell: #d4b25e; --gold-tief: #7d5f1c; --marine: #14243a;

  --dominant: var(--blauweiss); --sekundaer: var(--hellblau); --akzent: var(--gold); --akzent-2: var(--marine);

  --schrift-kopf: "Prata", "Didot", "Bodoni MT", Georgia, serif;
  --schrift-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Ein Maß für alles (D-208), fluide Abstände (D-333) */
  --mass: 8px;
  --rand: clamp(16px, 4vw, 64px);
  --spalt: clamp(16px, 2.2vw, 32px);
  --abschnitt: clamp(36px, 4.2vw, 60px);
  --kopf: 84px;
  --kopf-plus: 0px;                                  /* Kontaktzeile D-458, setzt html[data-kontaktzeile] */
  --kopf-gesamt: calc(var(--kopf) + var(--kopf-plus));
  --datenzeile: 112px;
  --radius: 14px;
  --stich: 6px; --luecke: 4px;                       /* Steppnaht: Strich 6, Lücke 4 */
  --naht-farbe: var(--gold);
  --fh: clamp(56px, 7.8vw, 112px);                   /* Hero-Überschrift „Zukunft“, wie Entwurf 01 */
  --nr: 1.1;                                          /* Naht unter der Zeilenoberkante in em (Grundlinie + 0,28 em) */

  color-scheme: light;
  font-family: var(--schrift-text);
  font-size: 19px; line-height: 1.6;
  color: var(--marine); background: var(--blauweiss);
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
}
html[data-kontaktzeile] { --kopf-plus: 36px; }
@media (max-width: 1023px) { :root { --kopf: 64px; } html[data-kontaktzeile] { --kopf-plus: 0px; } }
@media (max-width: 767px) { :root { font-size: 17px; --datenzeile: 0px; --fh: calc((100vw - 32px) / 8); } }

/* M-08 Seitenwechsel als kurze Blende (A-028) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .12s ease-out both b-aus; }
::view-transition-new(root) { animation: .16s ease-in .1s both b-ein; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--kopf-gesamt) + 24px); }
body { margin: 0; background: var(--blauweiss); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-family: var(--schrift-kopf); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-size: clamp(34px, 3.9vw, 56px); }
h3 { font-size: clamp(24px, 1.95vw, 28px); line-height: 1.2; }
p + p { margin-top: .8em; }
strong, b { font-weight: 700; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; border-radius: 4px; }
.abschnitt--dunkel :focus-visible, .fuss :focus-visible, .kontaktkarte--dunkel :focus-visible, .kopf[data-farbe="dunkel"] :focus-visible { outline-color: var(--gold-hell); }
::selection { background: var(--hellblau); color: var(--marine); }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--weiss); color: var(--marine); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 2px var(--marine); }
.sprung:focus { top: 12px; }
.innen { width: min(1320px, calc(100% - 2 * var(--rand))); margin-inline: auto; }
/* Telefonnummern immer in Lato mit gleich breiten Ziffern: in Marcellus sah die 0 wie ein O und die 1 wie ein I aus
   (Abnahme Runde 1, Befund 4). Gilt für Kontaktkarte, Infokarten, Kontaktzeile, Fuß und jeden anderen tel:-Link. */
a[href^="tel:"], .kontaktkarte__tel { font-family: var(--schrift-text); font-variant-numeric: lining-nums tabular-nums; }
/* Handy: lange deutsche Wörter trennen statt über den Rand laufen (Überschriften nicht, die passen über ihre Größe) */
@media (max-width: 767px) {
  body { overflow-wrap: break-word; } /*TESTHYPH*/
  h1, h2, h3, .knopf, .marke, .etikett { -webkit-hyphens: manual; hyphens: manual; }
  /* „Vermögensberatung“ ist in Marcellus 9,1 Schriftgrößen breit: so passt das längste Wort bei 320 px mit 16 px Rand */
  h2 { font-size: min(34px, calc((100vw - 2 * var(--rand)) / 9.6)); }
}
.lead { font-size: clamp(19px, 1.35vw, 22px); line-height: 1.55; max-width: 62ch; }
.leise { color: var(--schiefer); }
.text { max-width: 66ch; }

/* Offene Angaben (zählt rechtspruefung.mjs) und sichtbare Platzhalter */
.offen { background: #fff2c2; color: var(--marine); box-shadow: 0 0 0 2px #fff2c2; border-radius: 2px; font-size: max(16px, .88em); }
.platzhalter { display: inline-block; padding: 4px 10px; border: 1.5px dashed var(--schiefer); border-radius: 6px; background: var(--weiss); color: var(--marine); font-size: 16px; line-height: 1.45; }
.abschnitt--dunkel .platzhalter { background: transparent; border-color: var(--hellblau); color: var(--blauweiss); }

/* ---------- Abschnitte und Flächentakt (D-460) ---------- */
main > section { position: relative; overflow-x: clip; }   /* Paneele laufen bis an den Rand, nie darüber hinaus (kein Querscrollen) */
.abschnitt { padding-block: var(--abschnitt); background: var(--blauweiss); }
.abschnitt--kuehl { background: var(--kuehl); }
.abschnitt--weiss { background: var(--weiss); }
.abschnitt--dunkel { background: var(--anzug); color: var(--blauweiss); --naht-farbe: var(--gold-hell); }
.abschnitt--dunkel a { color: var(--blauweiss); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * .6); }

/* Etikett als eingenähtes Innenetikett (Marine-Plättchen wie in der Datenzeile) mit Manschettenknopf (Goldpunkt) */
.etikett { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; margin: 0 0 14px; padding: 6px 16px 6px 14px; border-radius: 4px; background: var(--marine);
  font: 700 14px/1.3 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); }
.etikett::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.abschnitt--dunkel .etikett, .fuss .etikett { color: var(--gold-hell); }
.abschnitt--dunkel .etikett::before, .fuss .etikett::before { background: var(--gold-hell); }

/* ---------- Die Naht ---------- */
/* SVG über die volle Breite: 2 px Linie, am Anfang ein Nahtband 120 × 6 px. Wird beim Hereinscrollen gezogen (M-02). */
.naht { display: block; width: calc(100% + 2 * var(--rand)); max-width: none; height: 8px; margin-inline: calc(-1 * var(--rand)); overflow: visible; color: var(--naht-farbe); }
.innen > .naht, .kopfzeile > .naht { width: calc(100vw - var(--scrollbar, 0px)); margin-left: calc(50% - 50vw + var(--scrollbar, 0px) / 2); margin-right: 0; }
.naht rect { fill: currentColor; }
.naht--kurz { width: 120px; margin: 0; }
/* Die Naht zieht sich über clip-path statt scaleX: ihr Kasten bleibt voll breit, so löst der Beobachter der Bausteine
   auch bei klassischer Bildlaufleiste aus (mit scaleX(0) war sie 0 px breit und lag bei x = −8 px, Hülle 24.09.2026) */
.b-js .naht[data-linie="waagrecht"] { transition: clip-path calc(var(--b-dauer, .6s) * 1.6) var(--b-kurve, ease); transition-delay: calc(var(--i, 0) * var(--b-versatz, .08s)); }
.b-js .naht[data-linie="waagrecht"]:not(.ist-da) { transform: none; clip-path: inset(0 100% 0 0); }
/* ---------- Borte: Nahtband an jedem Flächenwechsel (PLAN.md 15.9, Abnahme Runde 1, Befund 7) ----------
   Gold 12 px über die volle Breite, mittig eine Steppnaht in Blauweiß (1,5 px, Strich 6, Lücke 4). Ab 1680 px 10 px, damit
   jede Borte unter 20.000 px² bleibt; am Handy 10 px. Setzt das Bauskript von selbst: oben in jeden Abschnitt, dessen Fläche
   sich vom vorigen unterscheidet, oben in den Fuß, unten in den Seitenkopf (dort wird {{NAHT}} zur Borte), und als schmale
   Borte (8 px) oben in weiße Karten. Eine Borte ist ein Band, keine Fläche (L-015). Zieht sich beim Hereinscrollen. */
.borte, .seitenkopf .naht { --borte: 12px; display: block; height: var(--borte); background-color: var(--gold);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, var(--blauweiss) 4px 10px);
  background-size: 100% 1.5px; background-position: 0 50%; background-repeat: no-repeat; }
.borte { position: absolute; left: 0; right: 0; top: 0; z-index: 2; width: 100%; }
.seitenkopf .naht rect { display: none; }
.borte--karte { --borte: 8px; z-index: 3; border-radius: var(--radius) var(--radius) 0 0; background-size: 100% 1px; }
@media (min-width: 1680px) { .borte, .seitenkopf .naht { --borte: 10px; } }
@media (max-width: 767px) { .borte, .seitenkopf .naht { --borte: 10px; } .borte--karte { --borte: 6px; } }
/* Senkrechte Borte an der Kante Blauweiß | Hellblau (Personenkopf); am Handy liegt das Paneel oben, dann waagerecht darunter */
.borte--kante { top: 0; bottom: 0; left: 0; right: auto; width: var(--borte); height: 100%;
  background-image: repeating-linear-gradient(180deg, transparent 0 4px, var(--blauweiss) 4px 10px); background-size: 1.5px 100%; background-position: 50% 0; }
@media (max-width: 900px) { .borte--kante { top: auto; bottom: 0; right: 0; width: 100%; height: var(--borte);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, var(--blauweiss) 4px 10px); background-size: 100% 1.5px; background-position: 0 50%; } }
.b-js .borte--kante[data-linie="senkrecht"] { transition: clip-path calc(var(--b-dauer, .6s) * 1.6) var(--b-kurve, ease); }
.b-js .borte--kante[data-linie="senkrecht"]:not(.ist-da) { transform: none; clip-path: inset(0 0 100% 0); }
.b-js .borte[data-linie="waagrecht"] { transition: clip-path calc(var(--b-dauer, .6s) * 1.6) var(--b-kurve, ease); }
.b-js .borte[data-linie="waagrecht"]:not(.ist-da) { transform: none; clip-path: inset(0 100% 0 0); }

/* Goldrahmen um Personenfotos (PLAN.md 15.9): 4 px, 14 px Abstand zum Bild, aus vier Leisten (setzt das Bauskript in jeden
   .bildrahmen mit {{STEPP}}). Nur um Fotos von Menschen, nie um Karten. */
.goldrahmen { position: absolute; inset: -14px; }
.goldrahmen i { position: absolute; background: var(--naht-farbe); }
.goldrahmen i:nth-child(1) { left: 0; right: 0; top: 0; height: 4px; }
.goldrahmen i:nth-child(2) { left: 0; right: 0; bottom: 0; height: 4px; }
.goldrahmen i:nth-child(3) { left: 0; top: 0; bottom: 0; width: 4px; }
.goldrahmen i:nth-child(4) { right: 0; top: 0; bottom: 0; width: 4px; }
@media (max-width: 767px) { .goldrahmen { inset: -10px; } .goldrahmen i:nth-child(-n+2) { height: 3px; } .goldrahmen i:nth-child(n+3) { width: 3px; } }

/* Steppnaht als Rahmen um Bilder und Karten (Strich 6, Lücke 4) */
.stepp { position: absolute; inset: 10px; pointer-events: none; border-radius: calc(var(--radius) - 6px); --s: var(--naht-farbe);
  background:
    repeating-linear-gradient(90deg, var(--s) 0 var(--stich), transparent var(--stich) calc(var(--stich) + var(--luecke))) top left / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--s) 0 var(--stich), transparent var(--stich) calc(var(--stich) + var(--luecke))) bottom left / 100% 1.5px no-repeat,
    repeating-linear-gradient(180deg, var(--s) 0 var(--stich), transparent var(--stich) calc(var(--stich) + var(--luecke))) top left / 1.5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--s) 0 var(--stich), transparent var(--stich) calc(var(--stich) + var(--luecke))) top right / 1.5px 100% no-repeat; }
.stepp--aussen { inset: -12px; }
/* Eckrahmen wächst aus der Mitte (A-267): data-linie="rahmen" an .ecken, die vier Winkel laufen nach außen */
.ecken { position: absolute; inset: 0; pointer-events: none; --e: 48px; --d: 4px; --ef: var(--gold); }
.ecke { position: absolute; width: var(--e); height: var(--e); border: 0 solid var(--ef); transition: transform calc(var(--b-dauer, .6s) * 1.4) var(--b-kurve, ease); }
.ecke--lo { left: 0; top: 0; border-left-width: var(--d); border-top-width: var(--d); }
.ecke--ro { right: 0; top: 0; border-right-width: var(--d); border-top-width: var(--d); }
.ecke--lu { left: 0; bottom: 0; border-left-width: var(--d); border-bottom-width: var(--d); }
.ecke--ru { right: 0; bottom: 0; border-right-width: var(--d); border-bottom-width: var(--d); }
.b-js .ecken[data-linie="rahmen"]:not(.ist-da) .ecke--lo { transform: translate(28px, 28px); }
.b-js .ecken[data-linie="rahmen"]:not(.ist-da) .ecke--ro { transform: translate(-28px, 28px); }
.b-js .ecken[data-linie="rahmen"]:not(.ist-da) .ecke--lu { transform: translate(28px, -28px); }
.b-js .ecken[data-linie="rahmen"]:not(.ist-da) .ecke--ru { transform: translate(-28px, -28px); }

/* Auftritt von links und rechts (A-208 im Zickzack, Weg --b-weg, seit 01.10.2026 56 px statt 24 px). Endzustand ohne JS und bei weniger Bewegung. */
.b-js [data-auftritt][data-von="links"]:not(.ist-da) { transform: translateX(calc(-1 * var(--b-weg))); }
.b-js [data-auftritt][data-von="rechts"]:not(.ist-da) { transform: translateX(var(--b-weg)); }

/* ---------- Knöpfe (M-05 invert) und Links (M-04 wisch, D-410) ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 28px; border-radius: 999px;
  font: 700 16px/1.2 var(--schrift-text); letter-spacing: .02em; text-decoration: none; text-align: center; white-space: nowrap; }
.knopf--gold { min-width: min(260px, 100%); --k-grund: var(--gold); --k-text: var(--marine); --k-hover-grund: var(--marine); --k-hover-text: var(--gold-hell); }
.knopf--marine { min-width: min(220px, 100%); --k-grund: var(--marine); --k-text: var(--blauweiss); --k-hover-grund: var(--blauweiss); --k-hover-text: var(--marine); }
:is(.abschnitt--dunkel, .fuss, .kontaktkarte--dunkel) .knopf--marine { --k-grund: var(--blauweiss); --k-text: var(--marine); --k-hover-grund: var(--anzug); --k-hover-text: var(--blauweiss); border-color: var(--blauweiss); }
:is(.abschnitt--dunkel, .fuss, .kontaktkarte--dunkel) .knopf--gold { --k-hover-grund: var(--blauweiss); --k-hover-text: var(--marine); border-color: var(--gold); }
/* Knöpfe behalten ihre Schriftfarbe auch in dunklen Flächen und Karten, deren Linkfarbe sonst gewinnt */
:is(.abschnitt--dunkel, .fuss, .kontaktkarte--dunkel) a.knopf { color: var(--k-text); }
:is(.abschnitt--dunkel, .fuss, .kontaktkarte--dunkel) a.knopf:is(:hover, :focus-visible) { color: var(--k-hover-text); }
.knopf--klein { min-width: 0; min-height: 44px; padding: 0 20px; font-size: 15px; }
.knopf--breit { width: 100%; }
.knopf .b-pfeil { display: none; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* Unter 400 px dürfen Knöpfe und Textknöpfe umbrechen: „Erstgespräch zu Versicherungen buchen“ drückte sonst mit
   nowrap die ganze Spalte über den Rand (Abnahme Runde 1, Befund 3) */
@media (max-width: 399px) {
  .knopf:not(.kopf__termin, .kopf__cta, .knopf--klein) { white-space: normal; min-width: 0; max-width: 100%; min-height: 56px; padding: 10px 22px; line-height: 1.3; }
  .textlink { white-space: normal; }
}
/* Unterstrich wischt in Gold (M-04). Als eigene Linie (::after) statt Farbverlauf im Hintergrund: der Verlauf galt in
   der Farbmessung als Goldfläche des ganzen Links. Der Text bleibt inline, darum sitzt der Link auch mitten im Satz
   auf der Grundlinie (die Bausteine legen ihn sonst in ein inline-block .b-zeile). */
[data-link="wisch"] { position: relative; background: none; text-decoration: none; --wisch: var(--gold); }
[data-link="wisch"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--wisch); pointer-events: none;
  transform: scaleX(0); transform-origin: right center; transition: transform var(--b-hover, .3s) var(--b-hover-kurve, ease); }
[data-link="wisch"]:is(:hover, :focus-visible)::after { transform: scaleX(1); transform-origin: left center; }
[data-link="wisch"] .b-zeile { display: inline; overflow: visible; vertical-align: baseline; line-height: inherit; padding: 0; margin: 0; }
[data-link="wisch"] .b-zeile > span { display: inline; }
:is(.abschnitt--dunkel, .fuss, .kontaktkarte--dunkel) [data-link="wisch"] { --wisch: var(--gold-hell); }
/* Textknopf mit Naht statt Pille (D-410), Pfeil rückt 1,5 px vor (A-363); die Naht ist ein Schatten, keine Fläche */
.textlink { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0 8px; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -1.5px 0 var(--naht-farbe); transition: box-shadow var(--b-hover, .3s) var(--b-hover-kurve, ease); }
.textlink::after { content: "→"; display: inline-block; transition: transform var(--b-hover, .3s) var(--b-hover-kurve, ease); }
.textlink:is(:hover, :focus-visible)::after { transform: translateX(1.5px); }
.textlink:hover { box-shadow: inset 0 -2.5px 0 var(--naht-farbe); }

/* ---------- Kopfleiste (D-459, D-108, D-123, D-115; Handy D-103, D-105) ---------- */
/* Nach dem Hero (und auf Seiten ohne Foto-Kopf) eine feste, volle Fläche: bei 97 % schien Text unter Wortmarke und
   Burger durch (Abnahme Runde 1, Befund 1). Durchsichtig nur mit data-ueber-foto. */
.kopf { position: fixed; left: 0; right: 0; top: 0; z-index: 40; color: var(--marine); background-color: var(--blauweiss); }
.kopf[data-leiste]:not([data-oben]):not([data-ueber-foto]) { box-shadow: 0 2px 0 var(--gold); }
.kopf[data-farbe="dunkel"] { background-color: var(--anzug); color: var(--blauweiss); }
.kopf[data-farbe="dunkel"]:not([data-oben]):not([data-ueber-foto]) { box-shadow: 0 2px 0 var(--gold-hell); }
/* Über dem Foto: keine eigene Fläche, Verlauf von oben plus 8 px Unschärfe (Handy: dichter Verlauf ohne Unschärfe) */
.kopf__glas, .kopf__verlauf { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 28px); pointer-events: none; opacity: 0; transition: opacity .3s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
.kopf__glas { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kopf__verlauf { background: linear-gradient(180deg, rgb(246 248 251 / .7) 0%, rgb(246 248 251 / .4) 55%, rgb(246 248 251 / 0) 100%); }
.kopf[data-ueber-foto] { background-color: transparent; }
.kopf[data-ueber-foto] :is(.kopf__glas, .kopf__verlauf) { opacity: 1; }
.kopf__innen { position: relative; z-index: 1; height: var(--kopf); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-inline: var(--rand); transform-origin: 50% 0; }
.marke { justify-self: start; display: inline-flex; flex-direction: column; gap: 5px; text-decoration: none; font: 400 24px/1 var(--schrift-kopf); letter-spacing: .01em; white-space: nowrap; }
.marke::after { content: ""; width: 40px; height: 1.5px; background: var(--gold); }
.kopf[data-farbe="dunkel"] .marke::after { background: var(--gold-hell); }
/* Marke mit MR-Zeichen (12.10.2026): Zeichen links, Name mit etwas Luft daneben, die Naht sitzt nur unter dem Namen */
.marke--zeichen { flex-direction: row; align-items: center; gap: 14px; }
.marke--zeichen::after { content: none; }
.marke__zeichen { flex: none; width: 56px; height: auto; transform-origin: 50% 50%; }
.marke__name { display: inline-flex; flex-direction: column; gap: 5px; }
.marke__name::after { content: ""; width: 40px; height: 1.5px; background: var(--gold); }
.kopf[data-farbe="dunkel"] .marke__name::after { background: var(--gold-hell); }
.kapsel { position: relative; display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 999px;
  background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--hellblau-tief); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kopf[data-farbe="dunkel"] .kapsel { background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(207 220 234 / .35); }
.kapsel a { position: relative; padding: 0 13px; border-radius: 999px; font-size: 16px; line-height: 39px; text-decoration: none; white-space: nowrap; }
.kapsel a:hover { background: rgb(207 220 234 / .45); }
.kopf[data-farbe="dunkel"] .kapsel a:hover { background: rgb(207 220 234 / .14); }
.kapsel a[aria-current="page"] { font-weight: 700; }
/* Aktiv-Punkt (D-115, A-326): ein Punkt, der zum Hover wandert; ohne JS steht er unter dem aktiven Link */
.kapsel__punkt { position: absolute; left: 0; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold); opacity: 0;
  transition: transform var(--b-hover, .3s) var(--b-kurve, ease), opacity var(--b-hover, .3s); }
.kopf[data-farbe="dunkel"] .kapsel__punkt { background: var(--gold-hell); }
html:not(.b-js) .kapsel a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold); }
.kopf__rechts { justify-self: end; display: flex; align-items: center; gap: 12px; }
.kopf__cta, .kopf__termin { min-width: 0; }
.kopf__cta { min-height: 48px; padding: 0 24px; font-size: 16px; }
.kopf__termin, .kopf__burger { display: none; }
.kopf__burger { width: 44px; height: 44px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: rgb(255 255 255 / .55); cursor: pointer; place-items: center; }
.kopf[data-farbe="dunkel"] .kopf__burger { background: transparent; }
.kopf__burger span { display: block; width: 18px; height: 1.5px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
/* Kontaktzeile über der Leiste (D-458), nur auf Unterseiten ohne Hero-Foto */
.kontaktzeile { display: none; }
html[data-kontaktzeile] .kontaktzeile { display: flex; justify-content: flex-end; gap: 28px; height: 36px; align-items: center; padding-inline: var(--rand); font-size: 15px; color: var(--schiefer); border-bottom: 1px solid var(--hellblau-tief); position: relative; z-index: 1; }
html[data-kontaktzeile] .kontaktzeile a { text-decoration: none; }
@media (max-width: 1199px) { .kapsel a { padding-inline: 10px; font-size: 15px; } .kopf__cta { padding: 0 18px; font-size: 15px; } .kopf .marke { font-size: 22px; } .kopf__innen { gap: 14px; } }
/* 1024 bis 1399 px (12.10.2026): Marke mit Zeichen, sechs Links und der lange Knopf passten nicht nebeneinander (Knopf lief
   rechts hinaus). Spalten nach Inhalt, Links enger, statt „Erstgespräch buchen“ der kurze Terminknopf. */
@media (min-width: 1024px) and (max-width: 1399.98px) {
  .kopf__innen { grid-template-columns: auto 1fr auto; gap: 12px; }
  .kapsel { justify-self: center; }
  .kapsel a { padding-inline: 8px; font-size: 14px; }
  .kopf .marke--zeichen { gap: 10px; font-size: 20px; }
  .kopf .marke__zeichen { width: 40px; }
  .kopf__cta { display: none; }
  .kopf__termin { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 15px; }
}
@media (max-width: 1023px) {
  .kapsel, .kopf__cta, .kontaktzeile { display: none !important; }
  .kopf__innen { grid-template-columns: 44px 1fr auto; padding-inline: 16px; gap: 8px; }
  .kopf__burger { display: grid; grid-column: 1; grid-row: 1; }
  .kopf .marke { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); align-items: center; font-size: 22px; }
  .kopf .marke::after, .kopf .marke__name::after { width: 32px; }
  /* mit Zeichen steht die Marke links neben dem Menüknopf statt mittig, sonst stößt der Name an „Termin“ */
  .kopf .marke--zeichen { position: static; transform: none; grid-column: 2; grid-row: 1; justify-self: start; gap: 8px; font-size: 19px; }
  .kopf .marke__zeichen { width: 36px; }
  .kopf__rechts { grid-column: 3; }
  .kopf__termin { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 15px; }
  .kopf__glas { display: none; }
  .kopf__verlauf { height: calc(100% + 20px); -webkit-mask-image: none; mask-image: none; background: linear-gradient(180deg, rgb(246 248 251 / .88) 0%, rgb(246 248 251 / .6) 55%, rgb(246 248 251 / 0) 100%); }
}
@media (max-width: 359px) {
  .kopf__termin { padding: 0; width: 44px; }
  .kopf__termin .kopf__termin-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.kopf__termin svg { display: none; }
@media (max-width: 359px) { .kopf__termin svg { display: block; } }

/* Drei Fassungen der Kopfleiste zum Vergleich (PLAN.md Frage 38), gewählt mit ?nav=a|b|c, gilt in der Sitzung
   (Kopfskript, sessionStorage „mr-nav“). Standard ist c (Noah, 26.09.2026: am Desktop Kopfleiste C, am Handy unverändert);
   a (Glaskapsel) und b bleiben zum Vergleich. b und c aus dem bestandenen Entwurf 02 (entwuerfe/02-hero-zuschnitt/index.html). Nach dem Hero haben alle drei die feste Fläche mit Goldkante. */
/* b: je Link eine Glaskapsel (D-108) mit feiner Steppnaht, beim Überfahren zieht sich eine Naht unter dem Wort */
html[data-nav="b"] .kapsel { gap: 8px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-nav="b"] .kapsel a { padding: 0 17px; line-height: 42px; background: rgb(246 248 251 / .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgb(20 36 58 / .06); transition: background-color var(--b-hover, .3s); }
html[data-nav="b"] .kapsel a::before { content: ""; position: absolute; inset: 3px; border: 1px dashed rgb(176 135 41 / .75); border-radius: 999px; pointer-events: none; }
html[data-nav="b"] .kapsel a::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 9px; width: auto; height: 1.5px; margin: 0; border-radius: 0; pointer-events: none;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
html[data-nav="b"] .kapsel a:is(:hover, :focus-visible) { background: rgb(255 255 255 / .94); }
html[data-nav="b"] .kapsel a:is(:hover, :focus-visible)::after { transform: none; }
html[data-nav="b"] .kapsel a[aria-current="page"]::after { transform: none; }
html[data-nav="b"] .kapsel__punkt { display: none; }
html[data-nav="b"] .kopf:not([data-ueber-foto]) .kapsel a { background: var(--weiss); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-nav="b"] .kopf__burger { border: 0; background: rgb(246 248 251 / .74); box-shadow: inset 0 0 0 1px rgb(176 135 41 / .75); }
@media (max-width: 1199px) { html[data-nav="b"] .kapsel { gap: 6px; } html[data-nav="b"] .kapsel a { padding: 0 12px; line-height: 40px; } html[data-nav="b"] .kapsel a::after { left: 12px; right: 12px; } }
/* c: nur Schrift (D-110, D-459), keine Fläche. Menüwörter in Cormorant Garamond 600, Versalien mit Sperrung; über dem Foto
   Verlauf von oben, 8 px Unschärfe (Desktop) und ein heller Lichthof um jedes Wort (L-023) */
html[data-nav="c"] .kapsel { gap: 2px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-nav="c"] .kapsel a { padding: 0 14px; font: 400 15px/44px var(--schrift-kopf); letter-spacing: .14em; text-transform: uppercase; background: none !important;
  text-shadow: 0 0 1px rgb(246 248 251 / .9), 0 0 10px rgb(246 248 251 / .85); }
html[data-nav="c"] .kapsel__punkt { bottom: 3px; }
html[data-nav="c"] .kopf[data-ueber-foto] .kopf__verlauf { background: linear-gradient(180deg, rgb(246 248 251 / .84) 0%, rgb(246 248 251 / .62) 55%, rgb(246 248 251 / 0) 100%); }
@media (max-width: 1199px) { html[data-nav="c"] .kapsel a { padding: 0 9px; font-size: 15px; letter-spacing: .1em; } }
@media (min-width: 1024px) and (max-width: 1399.98px) { html[data-nav="c"] .kapsel a { padding: 0 8px; font-size: 14px; letter-spacing: .08em; } }
/* Handy und Hochkant-Tablet (unter 1024 px) wie bisher: Menüknopf, Verlauf und aufklappendes Menü aus dem Grundaufbau (Noah, 26.09.2026) */
@media (max-width: 1023px) { html[data-nav="c"] .kopf[data-ueber-foto] .kopf__verlauf { background: linear-gradient(180deg, rgb(246 248 251 / .88) 0%, rgb(246 248 251 / .6) 55%, rgb(246 248 251 / 0) 100%); } }

/* Handy-Menü als Vollbild (D-105, M-10 blende): Blauweiß, große Links in Marcellus mit Ziffer und Naht */
#menue { --menue-grund: var(--blauweiss); --menue-text: var(--marine); align-content: start; padding: 0 var(--rand) 32px; overflow-y: auto; }
.menue__kopf { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 64px; }
.menue__zu { width: 44px; height: 44px; border: 1.5px solid var(--marine); border-radius: 50%; background: var(--weiss); cursor: pointer; font-size: 26px; line-height: 1; padding: 0; }
.menue__marke { text-align: center; font: 400 22px/1 var(--schrift-kopf); }
#menue ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
#menue li a { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 14px 0 12px; text-decoration: none; font: 400 clamp(30px, 8.4vw, 40px)/1.15 var(--schrift-kopf);
  box-shadow: inset 0 -1.5px 0 var(--gold); }
#menue li a[aria-current="page"] { color: var(--gold-tief); }
.menue__nr { font: 700 14px/1 var(--schrift-text); letter-spacing: .1em; color: var(--gold-tief); }
.menue__fuss { display: grid; gap: 14px; margin-top: 28px; }
.menue__fuss .knopf { width: 100%; }

/* ---------- Hero der Startseite (D-469 ein großes Foto, Endzustand wie Entwurf 01) ---------- */
.hero { position: relative; min-height: calc(100vh - var(--datenzeile)); min-height: calc(100svh - var(--datenzeile)); background: var(--blauweiss); overflow: hidden; }
/* Seit 01.10.2026 Bild 1 = Porträt vor der hellen Holzwand (hero-michel-holz). --holz ist der Ton dieser Wand, aus dem Foto
   gemessen (Median links neben Michel nach dem Aufhellen: 195 205 200); Verlauf und Grund des Heros nehmen ihn statt Blauweiß */
.hero { --holz: #c3cdc8; --holz-rgb: 195 205 200; }
.hero__foto { position: absolute; inset: 0; margin: 0; background: var(--holz) url("medien/hero-michel-holz-klein.jpg") center / cover no-repeat; }
/* Bild 1 (1600 × 672, dazu 2400 × 1008; bis 01.10.2026 v2 mit Fliege, seit 01.10.2026 Holzwand, seit 01.10.2026 b weiter gefasst: Kopf mit Luft bis unter
   die Sakkoknöpfe, Gesicht bei 63 bis 69 % der Breite, Wand aus der echten Wand verlängert statt hineingezoomt): Lage je Breite aus Entwurf 02, damit Michels Gesicht in der Bildfolge nie doppelt
   erscheint, der Scheitel Luft unter der Kopfleiste hat (L-031) und sein Arm nicht unter den Text reicht */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
@media (min-width: 768px) and (max-width: 1199px) { .hero__foto img { object-position: 60% 50%; } }
.hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--holz-rgb) / .92) 0%, rgb(var(--holz-rgb) / .55) 32%, rgb(var(--holz-rgb) / 0) 55%); }
.hero__inhalt { position: relative; z-index: 2; padding: max(calc(var(--kopf) + 24px), calc((100svh - var(--datenzeile)) * .45 - var(--fh) * var(--nr))) var(--rand) 48px; max-width: calc(46vw + var(--rand)); }
.hero__titel { margin: 0; font-weight: 400; }
.hero__z1 { position: relative; display: block; width: fit-content; font-size: var(--fh); line-height: 1; letter-spacing: -.005em; white-space: nowrap; }
.hero__naht { position: absolute; top: calc(var(--nr) * 1em - 1px); height: 2px; left: calc(-1 * var(--rand)); width: calc(var(--rand) + 100% + .3em); background: var(--gold); }
.hero__z2 { display: block; width: fit-content; margin-top: calc(var(--fh) * (var(--nr) - 1) + 24px); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.2; }
.hero__z3 { display: block; width: fit-content; margin-top: .55em; font: 400 clamp(16px, 1.35vw, 20px)/1.4 var(--schrift-text); letter-spacing: .04em; }
.hero__text { margin-top: 24px; max-width: 34ch; font-size: clamp(17px, 1.3vw, 20px); }
.hero .knopfreihe { margin-top: 28px; }
@media (max-width: 767px) {
  /* Handy: Text unter dem Foto auf dem Holzton, ganz unten weich ins Blauweiß der Datenzeile (L-014) */
  .hero { min-height: 0; overflow: visible; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--holz) 0, var(--holz) calc(100% - 64px), var(--blauweiss) 100%); transition: opacity .6s ease; }
  html.laeuft .hero::before { opacity: 0; }   /* im Intro bleibt der Grund Blauweiß wie am Desktop, danach blendet der Holzton ein */
  .hero__foto { position: relative; height: 62vh; height: 62svh; }
  .hero__foto img { object-position: 75% 50%; }   /* 01.10.2026 b: Bild 1 weiter gefasst, Sakko ganz im Bild, Gesicht nahe der Mitte */
  .hero__foto::after { background: linear-gradient(0deg, rgb(var(--holz-rgb) / 1) 0%, rgb(var(--holz-rgb) / .75) 12%, rgb(var(--holz-rgb) / 0) 42%); }
  .hero__inhalt { max-width: none; margin-top: calc(-1 * var(--fh) * var(--nr)); padding: 0 var(--rand) 28px; }
  .hero__naht { left: 0; width: calc(100vw - 2 * var(--rand)); }
  .hero__z2 { margin-top: calc(var(--fh) * (var(--nr) - 1) + 14px); font-size: 26px; }
  .hero__z3 { margin-top: .4em; }
  .hero__text { margin-top: 12px; max-width: none; }
  .hero .knopfreihe { margin-top: 16px; gap: 10px; }
  .hero .knopfreihe .knopf { flex: 1 1 auto; min-height: 52px; }
}

/* ---------- Intro und Hero-Bildfolge (nur Startseite; Intro 01 „Vier Worte, eine Naht“, seit 01.10.2026 fünf Worte, Bildfolge 02 „Zuschnitt“) ----------
   Eingebaut aus entwuerfe/01-vier-worte-naht und entwuerfe/02-hero-zuschnitt (beide bestanden). Ablauf und Zeiten stehen
   in js/hero-folge.js. Die Klassen am <html> setzt das Kopfskript der Startseite vor dem ersten Bild:
   m-lauf (mit Intro), m-ohneintro (Folge ohne Intro), m-ruhig (weniger Bewegung oder Save-Data: nur Bild 1).
   Ohne JavaScript gilt nichts davon, dann steht Bild 1 mit Text. Bewegt werden nur transform und opacity. */
/* Hochkant-Tablets (768 × 1024 bis 1024 × 1366): Hero wie am Handy, Foto oben volle Breite, Text darunter.
   Im Hochformat nebeneinander stünde Michel in den Schnitten doppelt. js/hero-folge.js nutzt dieselbe Abfrage. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero { min-height: 0; overflow: visible; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--holz) 0, var(--holz) calc(100% - 64px), var(--blauweiss) 100%); transition: opacity .6s ease; }
  html.laeuft .hero::before { opacity: 0; }   /* im Intro bleibt der Grund Blauweiß wie am Desktop, danach blendet der Holzton ein */
  .hero__foto { position: relative; height: 62vh; height: 62svh; }
  .hero__foto img { object-position: 92% 50%; }   /* Michel links der Mitte: sein Gesicht steht links von dem auf der Bühne */
  .hero__foto::after { background: linear-gradient(0deg, rgb(var(--holz-rgb) / 1) 0%, rgb(var(--holz-rgb) / .75) 12%, rgb(var(--holz-rgb) / 0) 42%); }
  .hero__inhalt { max-width: none; margin-top: calc(-1 * var(--fh) * var(--nr)); padding: 0 var(--rand) 36px; }
  .hero__naht { left: 0; width: calc(100vw - 2 * var(--rand)); }
  .hero__z2 { margin-top: calc(var(--fh) * (var(--nr) - 1) + 16px); font-size: clamp(26px, 3.4vw, 34px); }
  .hero__z3 { margin-top: .45em; }
  .hero__text { margin-top: 14px; max-width: 40ch; }
  .hero .knopfreihe { margin-top: 20px; }
}
/* Intro: Wörter und Nähte liegen über der ganzen Fläche, das Wort „Zukunft“ ist die echte h1 */
:root { --f: 10vw; --naht-lauf: 3px; }
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { :root { --naht-lauf: 2px; } }
.intro-woerter, .intro-naehte { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; visibility: hidden; }
.laeuft .intro-woerter, .laeuft .intro-naehte { visibility: visible; }
.intro-woerter span { position: absolute; left: 0; top: 0; font: 400 var(--f)/1 var(--schrift-kopf); letter-spacing: -.005em; white-space: nowrap; color: var(--marine); opacity: 0; }
.intro-naht { position: absolute; left: 0; top: 0; width: 100%; height: var(--naht-lauf); background: var(--gold); transform-origin: 0 50%; opacity: 0; }
.intro-mess { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font: 400 100px/1 var(--schrift-kopf); }
/* Strudel in die Wortmarke (01.10.2026 c, Wunsch Noah, Ausnahme von L-010/L-026 nur hier). Alle Teile setzt js/hero-folge.js,
   nur während des Intros; ohne JS, bei weniger Bewegung und ohne Intro gibt es sie nicht. Die Buchstaben liegen über der
   Kopfleiste (sonst deckt ihr Verlauf sie zu), unter dem Knopf „Intro überspringen“. Bewegt: transform und opacity. */
.intro-strudel { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 42; overflow: hidden; pointer-events: none; visibility: hidden; }
.laeuft .intro-strudel { visibility: visible; }
.intro-zeichen { position: absolute; left: 0; top: 0; font: 400 var(--fr, 32px)/1 var(--schrift-kopf); letter-spacing: -.005em; white-space: pre; color: var(--marine); opacity: 0; will-change: transform, opacity; }
.intro-zeichen i { position: absolute; left: 0; top: 0; font-style: normal; color: var(--gold); opacity: 0; will-change: opacity; }
.intro-schein { position: absolute; z-index: -1; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgb(212 178 94 / .5), rgb(212 178 94 / .18) 55%, rgb(212 178 94 / 0)); }
.kopf .intro-marke-gold { position: absolute; margin: 0; color: var(--gold); pointer-events: none; opacity: 0; will-change: opacity; }
.intro-saum { position: absolute; left: 0; top: 0; height: 1.5px; background: var(--gold); pointer-events: none; opacity: 0; will-change: transform, opacity; }
.ueberspringen { position: fixed; z-index: 45; top: calc((var(--kopf) - 44px) / 2); right: var(--rand); display: none; height: 44px; padding: 0 18px;
  border: 1px solid rgb(20 36 58 / .4); border-radius: 22px; background: rgb(246 248 251 / .9); color: var(--marine); font: 16px/1 var(--schrift-text); letter-spacing: .02em; cursor: pointer; }
.ueberspringen span { position: relative; display: inline-block; padding: 4px 0; }
.ueberspringen span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.ueberspringen:is(:hover, :focus-visible) span::after { transform: scaleX(1); }
.ueberspringen:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }
.laeuft .ueberspringen { display: block; }
/* Handy: oben mittig steht während des Strudels die Wortmarke (sein Ziel), rechts oben läge der Knopf darüber. Darum dort
   unten mittig; er ist aus, bevor Satz und Knöpfe des Heros einblenden (js/hero-folge.js, Z.knopf). */
@media (max-width: 767px) { .ueberspringen { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); right: auto; left: 50%; transform: translateX(-50%); } }
.laeuft body { cursor: pointer; }
.laeuft :is(.kopf__innen, .datenzeile) { pointer-events: none; }
.laeuft :is(.kopf__glas, .kopf__verlauf) { transition: none !important; }
/* Feste Ebenen ab dem Vorzeichnen, auch nach dem Intro: sonst rechnet der Browser den Hero genau im Übergang neu */
html.m-lauf :is(.hero__z1, .hero__naht, .hero__z2, .hero__z3, .hero__text, .hero .knopfreihe, .intro-woerter span, .intro-naht) { will-change: transform, opacity; }
/* Wie in Entwurf 01: „Zukunft“ wächst von links oben, seine Naht von links. Die Rechnung im Skript setzt diese Ursprünge
   voraus; ohne sie stand das Wort im Aufstieg bis zu 56 px neben der Mitte und seine Naht rechts neben dem Wort */
html.m-lauf .hero__z1 { transform-origin: 0 0; }
html.m-lauf .hero__naht { transform-origin: 0 50%; }
html.m-lauf :is(.hero__foto, .kopf__innen, .kopf__glas, .kopf__verlauf, .datenzeile, .ueberspringen) { will-change: opacity; }
/* Ohne Intro ebenso eine eigene Ebene für das Foto: sonst zeichnet der Browser am Ende der Folge, wenn die Ebenen der Lagen
   wegfallen, die ganze Seite neu (gemessen 250 bis 300 ms ohne Bild bei 1440 px) */
html.m-ohneintro .hero__foto { will-change: opacity; }
/* Vorzeichnen: vor dem ersten Bild des Intros liegt alles einmal mit 0,5 % Deckkraft im Bild (auf Blauweiß nicht zu sehen) */
html.vorzeichnen :is(.hero, .datenzeile, .kopf__innen, .kopf__glas, .kopf__verlauf, .intro-woerter, .intro-naehte, .intro-strudel, .ueberspringen) { opacity: .005 !important; }
/* Bis das Intro sein erstes Bild zeichnet, bleibt die Fläche leer (kein Aufblitzen des Endzustands) */
html.m-lauf:not(.laeuft):not(.intro-fertig) :is(.hero, .datenzeile, .kopf__innen) { opacity: 0; }
.m-ruhig .hero, .m-ruhig .datenzeile { animation: ruhig-ein .7s ease-out both; }
@keyframes ruhig-ein { from { opacity: 0; } to { opacity: 1; } }

/* Bildfolge: Bildfeld rechts neben dem Text ([data-bildfolge]), Lagen und Linie setzt das Skript. Doppel-Verschiebung:
   die Lage fährt auf, das Bild darin gleich weit zurück, so steht das Bild und nur seine Kante wandert. */
.folge-feld { position: absolute; top: 0; bottom: 0; left: var(--feld-links, 46%); right: 0; overflow: hidden; pointer-events: none; }
.folge-lage { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.folge-lage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.folge-ueber { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
/* Wandflicken links der Naht: deckt Michels Arm aus Bild 1 ab, solange Bild 2 oder 3 im Feld steht (Ausschnitt desselben Fotos) */
.folge-flicken { position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0; background-repeat: no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px); mask-image: linear-gradient(90deg, transparent 0, #000 14px); }
/* Der Schnitt: Linie 3 px Gold, dahinter eine weiche Lichtkante in Gold hell (nur auf der Seite des neuen Bildes) */
.folge-linie { position: absolute; top: 0; bottom: 0; left: var(--feld-links, 46%); width: 3px; margin-left: -1.5px; background: var(--gold); opacity: 0; }
.folge-licht { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 40px; opacity: 0;
  background: linear-gradient(90deg, rgb(212 178 94 / 0) 0%, rgb(212 178 94 / .2) 40%, rgb(212 178 94 / .5) 75%, rgb(212 178 94 / .75) 100%); }
.folge-stepp { position: absolute; top: 0; bottom: 0; left: var(--feld-links, 46%); width: 1.5px; margin-left: -.75px; overflow: hidden; }
.folge-stepp i { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--gold) 0 6px, transparent 6px 10px); transform: translateY(-101%); }
.folge-marke { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; opacity: 0; overflow: visible; }
.folge-steuer { position: absolute; right: 24px; bottom: 28px; display: flex; align-items: center; height: 44px; padding-left: 16px; border-radius: 22px;
  background: var(--marine); pointer-events: auto; opacity: 0; }
.folge-punkte { display: flex; gap: 8px; }
.folge-punkte i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--hellblau-tief); }
.folge-punkte i.ist-jetzt { background: var(--gold); }
.folge-knopf { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gold-hell); cursor: pointer; }
.folge-knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: -2px; }
.folge-knopf svg { width: 18px; height: 18px; display: none; }
.folge-knopf[data-zeichen="pause"] .z-pause, .folge-knopf[data-zeichen="spiel"] .z-spiel, .folge-knopf[data-zeichen="nochmal"] .z-nochmal { display: block; }
/* Ebenen der Folge bleiben vom Aufbau bis zum Stillstand bestehen */
.folge-laeuft .folge-lage, .folge-laeuft .folge-lage img, .folge-laeuft .folge-linie, .folge-laeuft .folge-licht, .folge-laeuft .folge-marke, .folge-laeuft .folge-stepp i { will-change: transform, opacity; }
.folge-laeuft :is(.folge-flicken, .folge-steuer, .folge-stepp) { will-change: opacity; }
@media (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .folge-feld { left: 0; }
  .folge-ueber { bottom: auto; height: 62vh; height: 62svh; }
  .folge-linie, .folge-licht { left: 0; bottom: calc(var(--fh) * var(--nr) + 12px); }   /* enden über „Zukunft“, kreuzen nie die Schrift */
  .folge-licht { width: 28px; }
  .folge-stepp, .folge-flicken { display: none; }
  .folge-steuer { right: 24px; bottom: 24px; }
}
/* Weniger Bewegung: Das Kopfskript wählt dann die ruhige Fassung, die Folge wird nicht gebaut und das Intro läuft nicht
   (nur ?intro erzwingt es zum Prüfen). Hier fallen die übrigen Übergänge weg. */
@media (prefers-reduced-motion: reduce) { .m-ruhig .hero, .m-ruhig .datenzeile { animation: none; } .ueberspringen span::after { transition: none; } }

/* ---------- Datenzeile über die volle Breite (D-029) ---------- */
.datenzeile { background: var(--blauweiss); padding: 0; }
.datenzeile__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: var(--datenzeile); }
.datum { display: flex; align-items: center; gap: 18px; padding: 20px var(--spalt); border-left: 1px solid var(--hellblau-tief); }
.datum:first-child { border-left: 0; padding-left: 0; }
.datum dt, .plakette { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 32px; padding: 0 14px; border-radius: 4px;
  background: var(--marine); color: var(--gold-hell); font: 700 13px/1 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; }
.datum dd { margin: 0; font-size: 16px; line-height: 1.45; }
.datum dd a { font-weight: 700; }
.datum dd a[href^="tel:"] { white-space: nowrap; }   /* die Telefonnummer bricht bei keiner Breite um */
/* 1024 bis 1199 px: Plakette über dem Text, sonst bleiben neben der 140-px-Plakette nur gut 130 px für drei Zeilen */
@media (min-width: 1024px) and (max-width: 1199px) { .datum { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; } }
@media (max-width: 1023px) { .datenzeile__raster { grid-template-columns: minmax(0, 1fr); } .datum { border-left: 0; border-top: 1px solid var(--hellblau-tief); padding: 14px 0; gap: 14px; } .datum:first-child { border-top: 0; } .datum dt { min-width: 116px; padding: 0 8px; font-size: 12px; } }

/* ---------- Abschnittskopf als Zeile mit Linie (D-060) ---------- */
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.kopfzeile > .naht { grid-column: 1 / -1; margin-top: 10px; }
/* Abschnittsnummer als Etikett-Kachel ({{NR:02}}, PLAN.md 15.9): Marine-Plättchen wie ein eingenähtes Innenetikett mit
   Steppnaht innen, Ziffer in Gold hell (Kontrast 7,69). Ziffer in Lato wie das Etikett: in Marcellus las sich „01“ als „OI“.
   Erstes Kind einer .kopfzeile (links neben Etikett und Titel) oder direkt vor dem .etikett eines Abschnitts. Gezählt
   werden die Abschnitte nach dem Seitenkopf; nicht auf Start und Rechtsseiten. {{NR:03:klein}} = 56 px (Themenraster). */
.schnittnr { position: relative; display: grid; place-items: center; width: 108px; height: 108px; margin: 0 0 16px; border-radius: 4px;
  background: var(--marine); color: var(--gold-hell); font: 700 44px/1 var(--schrift-text); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.schnittnr::after { content: ""; position: absolute; inset: 6px; border: 1px dashed rgb(212 178 94 / .7); border-radius: 2px; pointer-events: none; }
.schnittnr--klein { width: 56px; height: 56px; margin: 0; font-size: 22px; }
.schnittnr--klein::after { inset: 4px; }
.kopfzeile:has(> .schnittnr) { grid-template-columns: auto minmax(0, 1fr) auto; }
.kopfzeile > .schnittnr { grid-row: 1; align-self: end; margin: 0 8px 6px 0; }
.leistung__ziffer text { font-family: var(--schrift-kopf); font-size: 118px; letter-spacing: -.02em; fill: currentColor; }
.kopfzeile .etikett { margin-bottom: 10px; }
.kopfzeile__zusatz { grid-column: 1 / -1; margin-top: 6px; max-width: 70ch; }
.kopfzeile__zusatz--zwei { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px clamp(32px, 6vw, 112px); align-items: start; }
.randnotiz { padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); font-size: 17px; color: var(--schiefer); }
@media (max-width: 900px) { .kopfzeile__zusatz--zwei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .kopfzeile { grid-template-columns: minmax(0, 1fr); } .kopfzeile > .textlink { justify-self: start; }
  .kopfzeile:has(> .schnittnr) { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; } .kopfzeile:has(> .schnittnr) > .textlink { grid-column: 1 / -1; }
  .schnittnr:not(.schnittnr--klein) { width: 72px; height: 72px; margin-bottom: 12px; font-size: 30px; }
  .kopfzeile > .schnittnr { margin: 0 0 4px; } }
.antwortblock { max-width: 68ch; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; }

/* ---------- Raster wie ein Schnittmuster (D-027) mit Kreidemarken (D-084) ---------- */
.raster { position: relative; }
.raster__linien { position: absolute; inset: 0; pointer-events: none; }
.raster__linie { position: absolute; top: 0; bottom: 0; width: 1px; left: calc(var(--x) * 25%); background: var(--hellblau-tief); }
.raster__linie[style*="--x:4"] { left: auto; right: 0; }
.kreide { position: absolute; width: 15px; height: 15px; margin: -7px 0 0 -7px; left: calc(var(--x) * 25%); top: var(--y, 0); color: var(--hellblau-tief); }
.kreide:last-child { left: auto; right: -7px; }
@media (max-width: 767px) { .raster__linie:nth-child(2), .raster__linie:nth-child(4), .kreide[style*="--x:1"], .kreide[style*="--x:3"] { display: none; } }

/* ---------- Vier Felder (Start) ---------- */
.felder { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feld { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 28px clamp(18px, 2vw, 32px) 32px; text-decoration: none; }
.feld::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hellblau); transform: translateX(-101%); transition: transform var(--b-hover, .3s) var(--b-kurve, ease); }
.feld[data-von="rechts"]::before { transform: translateX(101%); }
.feld[data-von="oben"]::before { transform: translateY(-101%); }
.feld[data-von="unten"]::before { transform: translateY(101%); }
.feld:is(:hover, :focus-within)::before { transform: none; }
/* Beim Eintritt setzt seite.js kurz .ist-start: Fläche ohne Übergang an die Eintrittskante, auch wenn :hover schon greift */
.feld.ist-start::before { transition: none; transform: translateX(-101%); }
.feld.ist-start[data-von="rechts"]::before { transform: translateX(101%); }
.feld.ist-start[data-von="oben"]::before { transform: translateY(-101%); }
.feld.ist-start[data-von="unten"]::before { transform: translateY(101%); }
.feld__ziffer { width: 255px; height: 210px; margin-left: -9px; color: var(--gold); transition: color var(--b-hover, .3s); }
@media (min-width: 1101px) { .feld__ziffer { width: 289px; height: 238px; } }
.feld__ziffer text { font-family: var(--schrift-kopf); font-size: 118px; letter-spacing: -.02em; fill: currentColor; }
.feld:is(:hover, :focus-within) .feld__ziffer { color: var(--gold-tief); }
.feld h3 { font-size: clamp(26px, 2.1vw, 32px); }
.feld p { font-size: 17px; line-height: 1.6; }
.feld .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .felder { grid-template-columns: minmax(0, 1fr); }
  .feld { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: center; padding: 22px 18px 24px; border-top: 1px solid var(--hellblau-tief); }
  .feld:first-child { border-top: 0; }
  .feld__ziffer { width: 112px; height: 92px; margin: 0 0 0 -4px; }
  .feld > :not(.feld__ziffer, h3) { grid-column: 1 / -1; }
  .raster__linie[style*="--x:2"], .kreide[style*="--x:2"] { display: none; }
}

/* ---------- Zickzack (Bild und Text) mit Porträt auf Hellblau-Paneel ---------- */
.zickzack { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.zickzack--gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.zickzack--gespiegelt > :first-child { order: 2; }
.portraet { position: relative; padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; }
.portraet::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(-1 * var(--rand) - 50vw); background: var(--hellblau); z-index: 0; }
.zickzack--gespiegelt .portraet { padding: clamp(24px, 3vw, 44px) 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px); }
.zickzack--gespiegelt .portraet::before { left: 0; right: calc(-1 * var(--rand) - 50vw); }
.bildrahmen { position: relative; z-index: 1; border-radius: var(--radius); background: var(--kuehl) var(--klein, none) center / cover no-repeat; }
.bildrahmen img, .bildrahmen video { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.bildrahmen .stepp { --s: var(--naht-farbe); }
.bildrahmen--hell .stepp { --s: var(--weiss); }
.meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--hellblau-tief); }
.meta > div { padding: 14px 16px 0 0; }
.meta > div + div { padding-left: 16px; border-left: 1px solid var(--hellblau-tief); }
.meta dt { font: 700 13px/1.3 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-tief); }
.meta dd { margin: 6px 0 0; font-size: 17px; line-height: 1.45; }
@media (max-width: 900px) {
  .zickzack, .zickzack--gespiegelt { grid-template-columns: minmax(0, 1fr); }
  .zickzack--gespiegelt > :first-child { order: 0; }
  .portraet { max-width: 520px; }
  /* gespiegelt wie ungespiegelt: das Paneel läuft nach links aus, nie nach rechts (sonst 161 px Querscrollen am Handy) */
  .zickzack--gespiegelt .portraet { padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; }
  .zickzack--gespiegelt .portraet::before { left: calc(-1 * var(--rand) - 50vw); right: 0; }
  .meta { grid-template-columns: minmax(0, 1fr); }
  .meta > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--hellblau-tief); padding-bottom: 12px; }
}

/* ---------- Ablauf in Schritten an der Mittelnaht (D-462); waagrecht für Karriere und Erstgespräch ---------- */
.ablauf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.5vw, 36px); }
.ablauf__naht { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--gold); }
.schritt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.schritt__nr { grid-column: 2; justify-self: center; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--marine); color: var(--gold-hell);
  font: 700 24px/1 var(--schrift-text); font-variant-numeric: lining-nums; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--kuehl); }
.schritt__karte { position: relative; grid-column: 3; grid-row: 1; padding: 26px 30px 28px; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--hellblau-tief); }
.schritt:nth-child(odd of .schritt) .schritt__karte { grid-column: 1; }
.schritt__karte h3 { font-size: clamp(24px, 1.9vw, 28px); margin-bottom: 8px; }
.schritt__karte p { font-size: 17px; }
@media (min-width: 768px) { .ablauf { gap: 0; } .ablauf:not(.ablauf--waagrecht) .schritt + .schritt { margin-top: -36px; } }
.abschnitt:not(.abschnitt--kuehl) .schritt__nr { box-shadow: 0 0 0 6px var(--blauweiss); }
@media (max-width: 767px) {
  .ablauf__naht { left: 32px; }
  .schritt { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
  .schritt__nr { grid-column: 1; width: 64px; height: 64px; }
  .schritt__karte, .schritt:nth-child(odd of .schritt) .schritt__karte { grid-column: 2; padding: 20px 20px 22px; }
}
.ablauf--waagrecht { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--spalt); }
.ablauf--waagrecht .ablauf__naht { left: 0; right: 0; top: 32px; bottom: auto; width: auto; height: 2px; margin: 0; }
.ablauf--waagrecht .schritt { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.ablauf--waagrecht .schritt__nr { grid-column: 1; justify-self: start; }
.ablauf--waagrecht .schritt__karte, .ablauf--waagrecht .schritt:nth-child(odd of .schritt) .schritt__karte { grid-column: 1; grid-row: 2; }
@media (max-width: 767px) { .ablauf--waagrecht { grid-template-columns: minmax(0, 1fr); } .ablauf--waagrecht .ablauf__naht { left: 32px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; margin-left: -1px; }
  .ablauf--waagrecht .schritt { grid-template-columns: 64px minmax(0, 1fr); } .ablauf--waagrecht .schritt__karte, .ablauf--waagrecht .schritt:nth-child(odd of .schritt) .schritt__karte { grid-column: 2; grid-row: 1; } }

/* ---------- Dunkles Band mit stummem Loop ---------- */
.band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.band__text h2 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 18px; }
.band__zitat { margin: 22px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold-hell); font: 400 clamp(22px, 1.8vw, 28px)/1.35 var(--schrift-kopf); }
.band__zitat cite { display: block; margin-top: 8px; font: 400 16px/1.4 var(--schrift-text); font-style: normal; color: var(--hellblau); }
.band__hinweis { display: flex; gap: 14px; align-items: baseline; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgb(207 220 234 / .3); }
.band__hinweis::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-hell); transform: translateY(-1px); }
.band__hinweis p { font-size: 17px; }
@media (max-width: 900px) { .band { grid-template-columns: minmax(0, 1fr); } }

/* Stummer Loop als Bildkachel (AF-22 entschärft): Standbild immer, Video nur beim Hinscrollen, Pausenknopf */
.loop { position: relative; justify-self: center; width: min(100%, 440px); margin: 0; padding: 14px; }
.loop__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--kuehl); }
.loop__bild img, .loop__bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loop__bild video { opacity: 0; transition: opacity .4s ease; }
.loop.laeuft .loop__bild video { opacity: 1; }
.loop .stepp { inset: 0; border-radius: calc(var(--radius) + 8px); }
.loop__pause { position: absolute; right: 26px; bottom: 26px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--marine); color: var(--gold-hell); cursor: pointer; }
.loop__pause[hidden] { display: none; }
.loop__pause svg { width: 18px; height: 18px; }
.loop__pause .zeichen-spiel { display: none; }
.loop__pause[aria-pressed="true"] .zeichen-pause { display: none; }
.loop__pause[aria-pressed="true"] .zeichen-spiel { display: block; }
.loop__pause:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.loop figcaption { margin-top: 12px; font-size: 15px; color: var(--hellblau); text-align: center; }
@media (prefers-reduced-motion: reduce) { .loop__bild video { display: none; } }

/* ---------- Karten: Stimmen (D-441, D-057), Info- und Kontaktkarten ---------- */
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); }
.stimme { position: relative; overflow: clip; display: flex; flex-direction: column; gap: 18px; min-height: 230px; padding: 40px 36px 34px; border-radius: var(--radius); background: var(--weiss);
  box-shadow: 0 0 0 8px var(--weiss), 0 0 0 9px var(--hellblau-tief); margin: 9px; }
.stimme__zeichen { width: 56px; height: 44px; color: var(--gold); }
.stimme blockquote { font: 400 clamp(21px, 1.6vw, 24px)/1.4 var(--schrift-kopf); }
.stimme__quelle { margin-top: auto; font-size: 16px; color: var(--schiefer); }
@media (max-width: 1023px) { .stimmen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stimme { min-height: 0; } }
@media (max-width: 767px) { .stimmen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; }
  .stimme { scroll-snap-align: start; padding: 30px 24px 26px; } }
.infokarte, .kontaktkarte { position: relative; overflow: clip; padding: 36px 32px 34px; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--hellblau-tief); }   /* clip: die Karten-Borte folgt den runden Ecken */
.infokarte h3, .kontaktkarte h3 { margin-bottom: 12px; }
.kontaktkarte__tel { display: inline-block; margin: 6px 0 18px; font: 400 clamp(26px, 2.2vw, 32px)/1.2 var(--schrift-kopf); text-decoration: none; }
.kontaktkarte--dunkel { background: var(--anzug); color: var(--blauweiss); box-shadow: none; --naht-farbe: var(--gold-hell); }
.kontaktkarte--dunkel a { color: var(--blauweiss); }
.kontaktkarte--dunkel .etikett { color: var(--gold-hell); }
.kontaktkarte--dunkel .etikett::before { background: var(--gold-hell); }
.kontaktkarte .knopf { width: 100%; }
.adresse { font-style: normal; }

/* ---------- Fragen als Zeilenausklapper (D-419, M-07) ---------- */
.fragen { border-top: 1.5px solid var(--hellblau-tief); }
.frage { border-bottom: 1.5px solid var(--hellblau-tief); transition: background-color var(--b-hover, .3s); }
.frage:has(> [aria-expanded="true"]) { background: var(--hellblau); }
.frage__knopf { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 20px; align-items: center; width: 100%; padding: 22px 16px 22px 4px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 clamp(21px, 1.6vw, 25px)/1.3 var(--schrift-kopf); color: var(--marine); }
/* Nummernkreis vor der Frage (Marine, wie im Ablauf): .frage__knopf--nr mit <span class="frage__nr"> */
.frage__knopf--nr { grid-template-columns: 48px minmax(0, 1fr) 32px; }
.frage__nr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--marine); color: var(--gold-hell); font: 700 18px/1 var(--schrift-text); font-variant-numeric: lining-nums; }   /* Lato: in Marcellus las sich „1“ als „I“ (Abnahme Runde 1) */
@media (max-width: 767px) { .frage__knopf--nr { grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 14px; } .frage__nr { width: 40px; height: 40px; font-size: 18px; } }
.frage__plus { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); transition: transform var(--b-hover, .3s) var(--b-kurve, ease), background-color var(--b-hover, .3s); }
.frage__plus::before, .frage__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--marine); }
.frage__plus::after { transform: rotate(90deg); }
[aria-expanded="true"] > .frage__plus { transform: rotate(45deg); background: var(--marine); }
[aria-expanded="true"] > .frage__plus::before, [aria-expanded="true"] > .frage__plus::after { background: var(--blauweiss); }
.frage__antwort { padding: 0 64px 24px 4px; font-size: 18px; max-width: 76ch; }
html:not(.b-js) .b-klapp { grid-template-rows: 1fr; }
.fragen-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 1023px) { .fragen-layout { grid-template-columns: minmax(0, 1fr); } .frage__antwort { padding-right: 8px; } }
/* Sprungleiste mit durchlaufender Linie (D-416) */
.sprungleiste { position: sticky; top: calc(var(--kopf-gesamt) + 2px); z-index: 10; background: var(--blauweiss); border-bottom: 1.5px solid var(--hellblau-tief); }
/* Am Desktop brechen die Einträge um statt zu scrollen, alle bleiben sichtbar; der Text des ersten fluchtet mit dem Text
   darunter (−18 px = Innenabstand des Links). Am Handy waagerecht wischbar, ein Verlauf am rechten Rand zeigt, dass es
   weitergeht (seite.js setzt data-ende, sobald das Ende erreicht ist). Abnahme Runde 1, Befund 6. */
.sprungleiste ul { list-style: none; margin: 0 0 0 -18px; padding: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.sprungleiste a { position: relative; display: block; padding: 16px 18px 14px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.sprungleiste a::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: var(--gold); pointer-events: none;
  transform: scaleX(0); transform-origin: left center; transition: transform var(--b-hover, .3s) var(--b-kurve, ease); }
@media (max-width: 767px) {
  .sprungleiste { margin-inline: calc(-1 * var(--rand)); }
  .sprungleiste ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0; padding: 0 calc(var(--rand) - 12px); }
  .sprungleiste a { padding-inline: 12px; }
  .sprungleiste a::after { left: 12px; right: 12px; }
  .sprungleiste ul::-webkit-scrollbar { display: none; }
  .sprungleiste::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 56px; pointer-events: none;
    background: linear-gradient(90deg, rgb(246 248 251 / 0), var(--blauweiss) 80%); transition: opacity var(--b-hover, .3s); }
  .sprungleiste[data-ende]::after { opacity: 0; }
}
.sprungleiste a:is(:hover, [aria-current="true"])::after { transform: none; }

/* ---------- Buchungskarte (D-413) mit ZEEG-Platzhalter und Terminarten (D-411) ---------- */
.buchung { position: relative; padding: clamp(28px, 3vw, 44px); border-radius: 6px; background: var(--weiss); box-shadow: 0 0 0 1px var(--hellblau-tief); }
.buchung .ecken { inset: -2px; }
.buchung__schild { margin-bottom: 20px; }
.buchung__kalender { position: relative; min-height: 260px; }
.buchung__kalender iframe { width: 100%; min-height: 640px; border: 0; }
@media (max-width: 599px) { .buchung__kalender iframe { min-height: 820px; } }   /* am Handy steht der Monat unter der Beschreibung */
/* Buchung auf der Startseite (12.10.2026): vor dem Klick nur Frage, Themen und ein Satz, kein Wochenraster; danach der
   echte Kalender, so hoch wie ZEEG meldet (js/zeeg.js), darum hier keine Mindesthöhe von 640/820 px */
.buchung--start { padding: clamp(22px, 2.4vw, 36px); }
.buchung--start .buchung__frage { font: 400 clamp(20px, 1.7vw, 24px)/1.25 var(--schrift-kopf); margin-bottom: 16px; }
.pillen--wahl { gap: 10px; margin-bottom: 18px; }
.buchung .pillen--wahl .pille { min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--blauweiss); font-size: 16px; }
.buchung .pillen--wahl .pille:hover { background: var(--weiss); }
.buchung--start .buchung__kalender { min-height: 0; margin: 4px calc(-1 * clamp(10px, 1.4vw, 20px)) 0; }
.buchung--start .buchung__kalender iframe { display: block; min-height: 420px; height: 680px; transition: height .25s ease; }
.buchung--start .buchung__hinweis { margin-top: 14px; font-size: 14px; }
[data-zeeg-reihe][hidden] { display: none; }
.buchung__alternative { font-size: 17px; }
.buchung__alternative a { font-weight: 700; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .buchung--start .buchung__kalender iframe { transition: none; } }
@media (max-width: 599px) {
  .buchung .pillen--wahl { gap: 8px; }
  .buchung .pillen--wahl .pille { min-height: 42px; padding: 0 13px; font-size: 15px; }
  .buchung--start .buchung__kalender iframe { min-height: 420px; }
}
.buchung__hinweis { margin-top: 22px; font-size: 16px; color: var(--schiefer); max-width: 60ch; }
.buchung__meldung { margin-top: 12px; font-weight: 700; }
.buchung__thema { margin-bottom: 14px; font-weight: 700; }
.buchung.wechselt .buchung__kalender > :not(iframe) { opacity: 0; transition: opacity .3s ease; }
.pillen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.pille { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--marine); color: var(--blauweiss); font-size: 16px; font-weight: 700; }
.pille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hell); }
/* In der Buchungskarte sind die Terminarten nur Hinweise, keine Knöpfe: eckig, ohne Fläche, normale Schrift */
.buchung .pille { min-height: 32px; padding: 0 12px; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--hellblau-tief); color: var(--schiefer); font-weight: 400; font-size: 16px; cursor: default; }
.buchung .pille::before { width: 6px; height: 6px; background: var(--gold); }
/* Terminarten aus ZEEG (12.10.2026): wählbar, gewählt = Marine mit Goldpunkt */
.buchung__frage { margin-bottom: 12px; font-weight: 700; color: var(--marine); }
.buchung button.pille, .buchung a.pille { font: inherit; font-size: 16px; cursor: pointer; text-decoration: none; border: 0; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.buchung button.pille:hover, .buchung a.pille:hover { box-shadow: inset 0 0 0 1px var(--marine); color: var(--marine); }
.buchung button.pille[aria-pressed="true"] { background: var(--marine); color: var(--blauweiss); box-shadow: none; font-weight: 700; }
.buchung button.pille[aria-pressed="true"]::before { background: var(--gold-hell); }
.buchung button.pille:focus-visible, .buchung a.pille:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.woche__tag { display: grid; gap: 8px; align-content: start; }
.woche__kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hellblau-tief); font: 700 15px/1 var(--schrift-text); letter-spacing: .06em; }
.woche__marke { width: 8px; height: 40px; border-radius: 2px; background: var(--gold); }
/* Neutral (Abnahme Runde 1): alle Felder gleich, gestrichelt und ohne Füllung, damit nichts nach „belegt“ oder „frei“ aussieht */
.woche__fenster { height: 34px; border-radius: 6px; border: 1px dashed var(--hellblau-tief); background: transparent; }
.buchung--vorschau .woche__fenster { height: 26px; }
@media (max-width: 480px) { .woche { gap: 6px; } .woche__kopf { flex-direction: column; align-items: flex-start; gap: 6px; } .woche__marke { height: 24px; } }
.abschluss { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
@media (max-width: 1023px) { .abschluss { grid-template-columns: minmax(0, 1fr); } }

/* ---------- KI-Video im Abschnitt „Erstgespräch“ (01.10.2026, Wunsch Noah; js/termin-video.js) ----------
   Startseite #buchen und erstgespraech #termin. Michel läuft vom rechten Rand ins Bild und zeigt nach links unten auf den
   Terminkalender. Breit: Text bzw. Ablauf und Kalender links, Michel rechts, unten bündig mit dem Abschnitt (die nächste
   Borte schneidet ihn ab Oberschenkel ab). Schmal (Handy, Hochkant-Tablet, 768 bis 1023 px quer): Text, darunter Michel als
   Quadrat am rechten Rand, direkt darunter der Kalender, dessen Oberkante ihn ab Oberschenkel abschneidet.
   Box höchstens 500 CSS-px hoch, das Quellbild ist 720 px hoch: bei Gerätepixel 1 nie hochgerechnet.
   Ohne JavaScript, bei weniger Bewegung, Datensparen und im zweiten Aufruf der Sitzung steht das Schlussbild. Das Skript
   setzt am Desktop die Box genau (--tv-x, --tv-y, --tv-b, --tv-h, .tv-gesetzt) aus der Silhouette über alle Videobilder;
   ohne Skript gilt die Näherung unten. tv-spielt: das Video wird gleich laufen, bis dahin ist die Fläche leer. */
.abschnitt--film { position: relative; overflow: clip; }
.abschnitt--film .abschluss > :not(.termin-film) { position: relative; z-index: 1; }
.termin-film { --film-h: clamp(300px, 31vw, 460px); pointer-events: none; }
.termin-film__box { position: absolute; z-index: 0; bottom: 0; height: var(--film-h); aspect-ratio: 16 / 9; right: calc(16px - .336 * var(--film-h) * 16 / 9); }
.termin-film__ende, .termin-film__bild, .termin-film__quelle { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; }
.termin-film__ende img { display: block; width: 100%; height: 100%; }
.termin-film__quelle { opacity: 0; }
.tv-spielt .termin-film__ende { opacity: 0; }
.tv-gesetzt .termin-film__box { left: var(--tv-x); top: var(--tv-y); width: var(--tv-b); height: var(--tv-h); right: auto; bottom: auto; }
/* Kennzeichnung nach Art. 50 Abs. 4 KI-VO (L-037): klein, ohne Schild, an einer Stelle, an der in keinem Videobild Michel steht.
   Breit: untere linke Ecke der Box auf dem Boden des Abschnitts; schmal: obere linke Ecke des Quadrats. */
.termin-film__ki { position: absolute; z-index: 1; margin: 0; font: 400 .8125rem/1.2 var(--schrift-text); letter-spacing: .02em; color: var(--marine);
  text-shadow: 0 0 2px var(--blauweiss), 0 0 6px var(--blauweiss); transition: opacity .3s ease-out; white-space: nowrap;
  left: calc(100% - 4px - .664 * var(--film-h) * 16 / 9); bottom: 12px; }
.tv-gesetzt .termin-film__ki { left: var(--tv-ki-x); top: var(--tv-ki-y); bottom: auto; }
.tv-spielt:not(.tv-an) .termin-film__ki { opacity: 0; }
.abschnitt--kuehl .termin-film__ki { text-shadow: 0 0 2px var(--kuehl), 0 0 6px var(--kuehl); }
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1025px) {
  .abschluss--film { --film-spalte: clamp(300px, 30vw, 460px); grid-template-columns: minmax(0, 1fr) var(--film-spalte);
    grid-template-areas: "a a" "c f"; gap: 36px 40px; align-items: end; }
  .abschluss--film > :first-child { grid-area: a; }
  .abschluss--film > .buchung { grid-area: c; }
  .abschluss--film > .termin-film { grid-area: f; align-self: stretch; }
}
/* Startseite (12.10.2026): Text und Buchung links untereinander, Michel rechts daneben; der Kalender braucht die Breite */
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1025px) {
  /* Karte über die volle Breite: ab gut 1100 px Rahmenbreite stellt ZEEG Monat und Uhrzeiten nebeneinander (600 px hoch),
     schmaler kommt eine lange Liste untereinander (gemessen 12.10.2026) */
  .abschluss--film:not(.abschluss--film-oben) { grid-template-areas: "a f" "c c"; row-gap: 0; align-items: end; }
  .abschluss--film:not(.abschluss--film-oben) > :first-child { align-self: end; padding-bottom: 32px; }
  .abschluss--film:not(.abschluss--film-oben) > .termin-film { min-height: clamp(300px, 31vw, 460px); }
}
@media (max-width: 1023px), (max-width: 1024px) and (orientation: portrait) {
  .abschluss--film { row-gap: 0; }
  .abschluss--film > :first-child { margin-bottom: 20px; }
  .termin-film { position: relative; justify-self: end; width: min(100vw, 480px); aspect-ratio: 1; margin-right: calc(-1 * var(--rand)); }
  .termin-film__box, .tv-gesetzt .termin-film__box { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .termin-film__ki, .tv-gesetzt .termin-film__ki { left: 12px; top: 10px; bottom: auto; }
  /* Startseite: Michel kleiner, damit die Buchung schneller im Bild ist (12.10.2026) */
  #buchen .termin-film { width: min(72vw, 330px); }
  #buchen .abschluss--film > :first-child { margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .termin-film__ki { transition: none; } }

/* ---------- Formulare (Kontakt, Erstgespräch); Versand erst mit dem Livegang ---------- */
.formular { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
.formular__voll { grid-column: 1 / -1; }
.eingabe { display: grid; gap: 8px; }
.eingabe label, .eingabe__name { font-weight: 700; font-size: 16px; }
.eingabe__pflicht { color: var(--gold-tief); font-weight: 700; }
.eingabe input, .eingabe textarea, .eingabe select { width: 100%; min-height: 54px; padding: 12px 16px; border: 1.5px solid var(--hellblau-tief); border-radius: 10px; background: var(--weiss); font-size: 17px; }
.eingabe textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.eingabe :is(input, textarea, select):hover { border-color: var(--schiefer); }
.eingabe :is(input, textarea, select):focus-visible { outline: 2px solid var(--marine); outline-offset: 1px; border-color: var(--marine); }
.eingabe [aria-invalid="true"] { border-color: #a3392b; }
.eingabe__hinweis { font-size: 16px; color: var(--schiefer); }
.eingabe__fehler { font-size: 16px; font-weight: 700; color: #a3392b; }
.eingabe__fehler:empty { display: none; }
.haken { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; }
.haken input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--marine); }
.honig { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* an Ort und Stelle versteckt statt weit links: sonst gilt der Abschnitt als waagerechte Spur */
.formular__hinweis { font-size: 16px; color: var(--schiefer); }
.formular__fuss { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.rueckmeldung { grid-column: 1 / -1; padding: 20px 24px; border-radius: 10px; background: var(--weiss); box-shadow: inset 4px 0 0 var(--gold), 0 0 0 1px var(--hellblau-tief);
  opacity: 0; transform: translateY(-1em); transition: opacity var(--b-hover, .3s), transform var(--b-dauer, .6s) var(--b-kurve, ease); }
.rueckmeldung.ist-da { opacity: 1; transform: none; }
.rueckmeldung[hidden] { display: none; }
@media (max-width: 767px) { .formular { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Seitenkopf der Unterseiten, Personenkopf (D-469 hoch), Teamkopf ---------- */
/* Der Seitenkopf endet mit seiner Borte genau am Flächenwechsel (PLAN.md 15.9): {{NAHT}} im Seitenkopf wird hier zur Borte,
   der Abschnitt danach bekommt keine zweite. */
.seitenkopf { padding: calc(var(--kopf-gesamt) + clamp(40px, 5vw, 72px)) 0 0; background: var(--blauweiss); }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.seitenkopf h1, .personenkopf h1, .teamkopf h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.06; margin-bottom: 22px; }
/* Name mit Unterstrichen (_vrmgnsbrtr_) als eigene Zeile mit Luft: bei Zeilenhöhe 1,06 lagen die Unterstriche auf den
   Oberlängen der Zeile darunter (Abnahme final, Befund 1, 26.09.2026) */
.h1-name { display: block; margin-bottom: .16em; }
/* Handy: das längste Wort einer h1 („Vermögensberatung“, 9,1 Schriftgrößen breit) passt bei 320 px mit 16 px Rand */
@media (max-width: 767px) { .seitenkopf h1, .personenkopf h1, .teamkopf h1, .recht h1, .fehlerseite h1 { font-size: min(40px, calc((100vw - 2 * var(--rand)) / 9.6)); } }
.seitenkopf .naht { margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 1023px) { .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); } }
.personenkopf { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 100svh; background: var(--blauweiss); }
.personenkopf__text { align-self: center; padding: calc(var(--kopf) + 40px) clamp(24px, 4vw, 72px) 56px var(--rand); }
.personenkopf__bild { position: relative; background: var(--hellblau); padding: calc(var(--kopf) + 24px) var(--rand) 48px clamp(24px, 3vw, 48px); display: grid; align-items: center; }
.personenkopf__bild .bildrahmen { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .personenkopf { grid-template-columns: minmax(0, 1fr); min-height: 0; } .personenkopf__bild { order: -1; padding: calc(var(--kopf) + 16px) var(--rand) 32px; } .personenkopf__text { padding: 32px var(--rand) 48px; } }
.teamkopf { position: relative; background: var(--blauweiss); }
.teamkopf__foto { position: relative; margin: 0; aspect-ratio: 16 / 9; max-height: 88svh; width: 100%; overflow: hidden; background: var(--kuehl) var(--klein, none) center / cover no-repeat; }
.teamkopf__foto img { width: 100%; height: 100%; object-fit: cover; }
.teamkopf__text { padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
@media (max-width: 767px) { .teamkopf__foto { aspect-ratio: 4 / 3; } }

/* ---------- Leistungen als Liste mit klebenden Randtiteln (D-068) ---------- */
.leistung { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); padding-block: var(--abschnitt); border-top: 1.5px solid var(--hellblau-tief); }
.leistung__rand { overflow: clip; position: sticky; top: calc(var(--kopf-gesamt) + 80px); align-self: start; padding: 20px 28px 32px; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--hellblau-tief); }
.leistung__nr { display: block; font: 400 clamp(64px, 6vw, 96px)/1 var(--schrift-kopf); color: var(--marine); }
/* goldene SVG-Ziffer im Randtitel ({{RANDZIFFER:01}}), wie die vier Felder der Startseite */
.leistung__ziffer { display: block; width: 240px; height: 198px; margin: -8px 0 -12px -10px; color: var(--gold); }   /* viewBox 170 × 140, Ziffer 1,41-fach */
.leistung__rand h2 { font-size: clamp(32px, 3vw, 44px); margin-top: 10px; }
.leistung__block + .leistung__block { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--hellblau-tief); }
.leistung__block h3 { margin-bottom: 12px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste li { position: relative; padding-left: 26px; }
.liste li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); }
@media (max-width: 900px) { .leistung { grid-template-columns: minmax(0, 1fr); } .leistung__rand { position: relative; top: 0; } .leistung__ziffer { width: 136px; height: 112px; margin-bottom: -6px; } }

/* ---------- Team: kompakte Zeilen (D-421, A-301 über data-karten="zurueck") ---------- */
.teamliste { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--hellblau-tief); }
.teamzeile { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1.5px solid var(--hellblau-tief); }
.teamzeile__foto { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--hellblau); box-shadow: 0 0 0 3px var(--weiss), 0 0 0 4.5px var(--gold); }
.teamzeile__foto img { width: 100%; height: 100%; object-fit: cover; }
.teamzeile__foto--leer { display: grid; place-items: center; color: var(--schiefer); font: 400 28px/1 var(--schrift-kopf); box-shadow: 0 0 0 3px var(--weiss), 0 0 0 4.5px var(--hellblau-tief); }
.teamzeile__name { font: 400 clamp(24px, 2vw, 30px)/1.2 var(--schrift-kopf); }
.teamzeile__rolle { font-size: 16px; color: var(--schiefer); }
@media (max-width: 600px) { .teamzeile { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; } .teamzeile__foto { width: 64px; height: 64px; } .teamzeile > :last-child:not(:nth-child(2)) { grid-column: 2; } }

/* ---------- Zeitleiste (Werdegang, nur mit Daten von Michel) ---------- */
.zeitleiste { position: relative; list-style: none; margin: 0; padding: 0 0 0 40px; display: grid; gap: 22px; }
.zeitleiste__naht { position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--gold); }
.zeitleiste li:not(.zeitleiste__naht) { position: relative; }   /* sonst hebt es das absolute der Naht auf */
.zeitleiste__punkt { position: absolute; left: -36px; top: .35em; width: 16px; height: 16px; border-radius: 50%; background: var(--marine); box-shadow: 0 0 0 4px var(--blauweiss); }

/* ---------- Abschluss-Band auf Unterseiten ---------- */
.bandzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.bandzeile h2 { max-width: 22ch; }

/* ---------- Rechtsseiten und 404 ---------- */
.recht { padding: calc(var(--kopf-gesamt) + 56px) var(--rand) var(--abschnitt); max-width: calc(76ch + 2 * var(--rand)); margin-inline: auto; }
.recht h1 { font-size: clamp(38px, 4.4vw, 60px); margin-bottom: 18px; }
.recht .etikett { font-size: 14px; }   /* sonst griff .recht p (18 px) auf das Etikett */
/* Handy bis 360 px: „Datenschutzerklärung“, „Finanzanlagenvermittlungsverordnung“ und lange Adressen wie www.versicherungsombudsmann.de laufen sonst über den Rand */
.recht :is(h1, p, li, dd) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.recht a[href^="http"] { overflow-wrap: anywhere; }
.recht h2 { font-size: clamp(26px, 2.3vw, 34px); margin: 44px 0 12px; }
.recht h3 { font-size: 22px; margin: 28px 0 8px; }
.recht p, .recht li { font-size: 18px; }
.recht ul:not(.sprungleiste ul) { padding-left: 22px; margin: 8px 0; }
.recht .naht { margin: 10px 0 8px; }
.rechtsliste { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 28px; margin: 0 0 28px; }
/* dt mindestens 14 px und in jedem Zustand Kontrast ≥ 4,5: Gold tief auf Blauweiß, Weiß, Blauweiß kühl (5,29 bis 5,96);
   im geöffneten Aufklapper (Hellblau, dort nur 4,28) und auf Anzugblau andere Farben (Abnahme Runde 1, Befund 5) */
.rechtsliste dt { font: 700 14px/1.4 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-tief); padding-top: 4px; }
.frage:has(> [aria-expanded="true"]) .rechtsliste dt, .feld:is(:hover, :focus-within) .rechtsliste dt { color: var(--marine); }
:is(.abschnitt--dunkel, .kontaktkarte--dunkel, .fuss) .rechtsliste dt { color: var(--gold-hell); }
/* Abschnittsnummern der Rechtsseiten („1.“) in Lato: in Marcellus sah die 1 wie ein I aus. Die Nummer setzt das Bauskript
   in <span class="recht__nr">, sobald eine h2 mit „1.“ bis „99.“ beginnt. */
.recht__nr { font-family: var(--schrift-text); font-weight: 700; font-size: .82em; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; }
.rechtsliste dd { margin: 0; }
@media (max-width: 640px) { .rechtsliste { grid-template-columns: minmax(0, 1fr); gap: 2px; } .rechtsliste dd { margin-bottom: 14px; } }
.fehlerseite { min-height: 80svh; display: grid; align-content: center; justify-items: start; gap: 22px; padding: calc(var(--kopf-gesamt) + 48px) var(--rand) 72px; }
.fehlerseite h1 { font-size: clamp(40px, 5vw, 72px); }
.riss { width: min(520px, 100%); height: 60px; color: var(--gold); }

/* ---------- Fußzeile als Linienraster (D-043) ---------- */
.fuss { position: relative; background: var(--anzug); color: var(--blauweiss); padding: 0 0 28px; --naht-farbe: var(--gold-hell); }
.fuss a { color: var(--blauweiss); }
.fuss > .naht { width: 100%; margin: 0; }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding-top: 56px; }
.fuss__raster > div { padding: 0 var(--spalt) 36px; border-left: 1px solid rgb(212 178 94 / .45); }
.fuss__raster > div:first-child { padding-left: 0; border-left: 0; }
.fuss h2 { font: 700 13px/1.3 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss ul + h2 { margin-top: 24px; }
.fuss p, .fuss li { font-size: 16px; line-height: 1.55; }
.fuss .marke { font-size: 28px; margin-bottom: 16px; }
.fuss .marke::after { background: var(--gold-hell); }
.monogramm { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border: 1.5px solid var(--gold-hell); border-radius: 50%; font: 400 20px/1 var(--schrift-kopf); letter-spacing: .06em; color: var(--gold-hell); }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgb(212 178 94 / .45); font-size: 16px; color: var(--hellblau); }
.fuss .offen { background: #fff2c2; color: var(--marine); }
.fuss__hinweis { margin: 14px 0 0; }   /* letzte Zeile: Webdesign und Betrieb von visuellweb.de (P22), Schrift und Farbe wie die Rechtslinks */
@media (max-width: 1023px) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fuss__raster > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 600px) { .fuss__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; padding-top: 40px; } .fuss__raster > div { padding: 0 0 28px; border-left: 0; } .fuss__raster > div:nth-child(-n+2) { grid-column: 1 / -1; } .fuss__unten .knopf { width: 100%; } }

/* ---------- Bausteine der Nachbesserung (Abnahme Runde 1, 26.09.2026). Markup in quelle/KLASSEN.md ---------- */

/* Teamkopf flach: Gruppenfoto niedriger, h1 steht bei 1440 × 900 im ersten Bildschirm; Köpfe mit Luft (L-031) */
.teamkopf--flach .teamkopf__foto { aspect-ratio: auto; height: clamp(360px, 58svh, 600px); max-height: none; }
.teamkopf--flach .teamkopf__foto img { object-position: 50% 45%; }
.teamkopf--flach .teamkopf__text { padding-top: clamp(28px, 3vw, 44px); }
@media (max-width: 767px) { .teamkopf--flach .teamkopf__foto { height: auto; aspect-ratio: 4 / 3; } }

/* Zickzack, das wirklich abwechselt: Band, Abschluss und Fragen-Layout auch gespiegelt (Bild oder Karte links, Text rechts).
   Am Handy steht wieder der Text zuerst. .zickzack--gespiegelt gibt es schon (Bild rechts). */
@media (min-width: 901px) {
  .band--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .band--gespiegelt > :first-child { order: 2; }
}
@media (min-width: 1024px) {
  .abschluss--gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .abschluss--gespiegelt > :first-child { order: 2; }
  .fragen-layout--gespiegelt { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .fragen-layout--gespiegelt > :first-child { order: 2; }
}

/* Kompaktes Themenraster (Fragen): 2 × 2 Karten, je Thema eine Frage, kleine Etikett-Kachel ({{NR:03:klein}});
   am Handy eine Spalte. Die Karte bekommt oben ihre Borte vom Bauskript. */
.themenraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); }
.thema { position: relative; overflow: clip; display: flex; flex-direction: column; gap: 16px; padding: 32px 30px 26px; border-radius: var(--radius); background: var(--weiss); box-shadow: 0 0 0 1px var(--hellblau-tief); }
.thema__kopf { display: flex; align-items: center; gap: 16px; }
.thema__kopf h3 { font-size: clamp(24px, 2vw, 30px); }
.thema .frage { margin-inline: -30px; padding-inline: 26px 14px; border-bottom: 0; border-top: 1.5px solid var(--hellblau-tief); }
.thema .frage__knopf { padding-block: 16px; font-size: clamp(20px, 1.5vw, 23px); }
.thema .frage__antwort { padding: 0 8px 18px 4px; font-size: 17px; }
.thema > .textlink { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .themenraster { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 767px) { .thema { padding: 24px 20px 20px; gap: 12px; } .thema .frage { margin-inline: -20px; padding-inline: 16px 8px; } .thema__kopf h3 { font-size: 24px; } }

/* Leistungen: Spaltenraster (D-027) an den Kanten der Randtitel-Spalte, Kreidemarken (D-084) an jeder Kreuzung von Raster
   und Trennlinie, Hellblau-Streifen hinter der klebenden Titelspalte (D-068). {{RASTER:leistungen}} als erstes Kind von
   .leistungsliste, darin die .leistung-Artikel. Der Streifen ist schmal (88 px), damit Hellblau nicht über 30 % kommt. */
.leistungsliste { position: relative; --lg: clamp(28px, 5vw, 96px); }
.leistungsliste .leistung { position: relative; z-index: 1; gap: var(--lg); }
.leistungsliste__streifen { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--rand)); width: calc(var(--rand) + 88px); background: var(--hellblau); pointer-events: none; }
.leistungsliste .raster__linie[style*="--x:1"], .leistungsliste .kreide[style*="--x:1"] { left: calc((100% - var(--lg)) / 3 + var(--lg) / 2); }
.leistungsliste :is(.raster__linie, .kreide):is([style*="--x:2"], [style*="--x:3"]) { display: none; }
.leistungsliste .leistung::before, .leistungsliste .leistung::after { content: ""; position: absolute; top: -8px; width: 15px; height: 15px; margin-left: -7px; pointer-events: none;
  background: linear-gradient(var(--hellblau-tief), var(--hellblau-tief)) center / 1.5px 100% no-repeat, linear-gradient(var(--hellblau-tief), var(--hellblau-tief)) center / 100% 1.5px no-repeat; }
.leistungsliste .leistung::before { left: 0; }
.leistungsliste .leistung::after { left: calc((100% - var(--lg)) / 3 + var(--lg) / 2); }
@media (max-width: 900px) {
  .leistungsliste__streifen, .leistungsliste .raster__linien, .leistungsliste .leistung::after { display: none; }
}

/* Wischband mit sichtbarem Hinweis (Referenzen-Karten): .wischband__bahn ist die Wischfläche (tabindex="0", role="region",
   aria-label), darunter „zurück“ und „weiter“. seite.js blendet die Steuerung nur ein, wenn es etwas zu wischen gibt
   (data-wischbar), und schaltet die Knöpfe am Anfang und Ende ab. Verlauf am rechten Rand, solange es weitergeht. */
.wischband { position: relative; --wisch-grund: var(--blauweiss); }
.abschnitt--kuehl .wischband { --wisch-grund: var(--kuehl); }
.abschnitt--weiss .wischband { --wisch-grund: var(--weiss); }
.wischband__bahn:focus-visible { outline: 2px solid var(--marine); outline-offset: 4px; border-radius: 6px; }
.wischband__steuer { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.wischband[data-wischbar] .wischband__steuer { display: flex; }
.wischband__knopf { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--marine); border-radius: 999px; background: var(--weiss); color: var(--marine); font: 700 16px/1 var(--schrift-text); cursor: pointer; }
.wischband__knopf:hover:not([disabled]) { background: var(--marine); color: var(--blauweiss); }
.wischband__knopf[disabled] { border-color: var(--hellblau-tief); color: var(--schiefer); cursor: default; }
.wischband__hinweis { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 16px; line-height: 1.3; color: var(--schiefer); }
@media (max-width: 379px) { .wischband__hinweis { display: none; } .wischband__knopf { padding: 0 14px; } }
.wischband[data-wischbar]:not([data-ende])::after { content: ""; position: absolute; top: 0; right: calc(-1 * var(--rand)); bottom: 58px; width: 56px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--wisch-grund) 85%); }

/* Abschlussband (Kontakt): weißes Band zwischen zwei Borten, Inhalt in einem Steppnaht-Rahmen; hebt sich von „Anfahrt“
   (Blauweiß) ohne neue Farbe ab. <section class="abschnitt abschnitt--weiss abschlussband"> */
.abschlussband__rahmen { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 96px); align-items: center; padding: clamp(28px, 4vw, 56px); }
.abschlussband__rahmen > .stepp { inset: 0; border-radius: 6px; }
.abschlussband h2 { font-size: clamp(34px, 4vw, 60px); }
.abschlussband .knopfreihe { justify-content: flex-end; }
@media (max-width: 900px) { .abschlussband__rahmen { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; } .abschlussband .knopfreihe { justify-content: flex-start; } }

/* Pflichtangaben offen, ohne Aufklappen (Erstinformation): Zeilen mit Begriff links und Angabe rechts */
.pflichtliste { margin: 0; border-top: 1.5px solid var(--hellblau-tief); }
.pflichtliste > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--hellblau-tief); }
.pflichtliste dt { font: 700 14px/1.45 var(--schrift-text); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-tief); padding-top: 4px; }
.pflichtliste dd { margin: 0; font-size: 18px; }
.pflichtliste dd + dd { grid-column: 2; }
:is(.abschnitt--dunkel, .kontaktkarte--dunkel) .pflichtliste dt { color: var(--gold-hell); }
@media (max-width: 767px) { .pflichtliste > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } .pflichtliste dd + dd { grid-column: 1; } .pflichtliste dd { font-size: 17px; } }

/* ---------- Ruhige Fassung (eigene Teile; die Bausteine regeln ihre selbst) ---------- */
@media (prefers-reduced-motion: reduce) {
  .ecke, .feld::before, .feld__ziffer, .frage, .frage__plus, .textlink, .textlink::after, .kapsel__punkt, .kopf__glas, .kopf__verlauf, .rueckmeldung, .sprungleiste a::after, [data-link="wisch"]::after, .loop__bild video { transition: none !important; }
  .b-js :is(.naht, .borte)[data-linie] { clip-path: none !important; }
  .b-js .ecken[data-linie="rahmen"] .ecke { transform: none !important; }
  .rueckmeldung { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Abstände nach dem einen Maß (D-208), statt style-Attributen in den Teilen ---------- */
.luft-1 { margin-top: 14px; }
.luft-2 { margin-top: 20px; }
.luft-3 { margin-top: 28px; }
.luft-4 { margin-top: 44px; }

/* ---------- Handy: dichter, damit die Startseite unter 9.000 px bleibt (PLAN.md Abschnitt 7) ---------- */
@media (max-width: 767px) {
  .portraet, .zickzack--gespiegelt .portraet { max-width: 300px; padding: 20px 20px 20px 0; }
  .loop { width: min(100%, 320px); }
  .schritt__karte h3 { font-size: 22px; }
  .schritt__karte p, .feld p { font-size: 16px; }
  .buchung--vorschau .buchung__hinweis { display: none; }
  .buchung--vorschau .woche__fenster { height: 20px; }
  .fuss .monogramm { display: none; }
  .kopfzeile { margin-bottom: 28px; }
  .feld .textlink { display: none; }              /* das ganze Feld ist der Link */
  .feld h3::after { content: " →"; font-family: var(--schrift-text); font-size: 18px; color: var(--gold-tief); }
  .meta > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px 0 !important; }
  .meta dd { margin: 0; }
  .loop { width: min(100%, 290px); }
  .antwortblock { font-size: 17px; }
  .kontaktkarte, .infokarte { padding: 28px 22px 26px; }
  .ablauf { gap: 14px; }
  .schritt__karte, .schritt:nth-child(odd of .schritt) .schritt__karte { padding: 16px 18px 18px; }
  .frage__knopf { padding: 16px 8px 16px 4px; font-size: 20px; }
  .datum { padding: 10px 0; }
  .fuss__raster > div:first-child p { font-size: 16px; }
  .fuss .marke { margin-bottom: 10px; }
}

/* ---------- Veredelung (30.09.2026, Wunsch Noah über den Dirigenten): Lichtkante, Stichnaht, Kapitelziffern, Kartenhub ----------
   Keine neue Farbe: der Glanz ist ein warmes Weiß, Kanten und Ziffern Gold.
   Bewegung nur einmal (Naht beim Hereinscrollen) oder bei Interaktion (Glanz, Hub), nie in Schleife (L-029). Hover nur mit
   (hover: hover), Fokus mit :focus-visible. Ruhige Fassung am Ende des Blocks: Endzustand, kein Glanz, kein Hub. */

/* 1 Stoffstruktur: am 30.09.2026 auf Wunsch von Noah entfernt („Karo-Hintergrund sieht schlecht aus“), die Flächen sind
   wieder glatt. */

/* 4 Die Naht als Stich: 2 px, Strich 6, Lücke 4. Beim Hereinscrollen läuft sie von links ein (clip-path, wie bisher), dabei
   ziehen sich die Einstiche (1,5 px) zu Stichen zusammen. Einmal, danach steht sie. Ohne JS und in Ruhe: fertige Stichlinie. */
.naht__stich { stroke: currentColor; fill: currentColor; stroke-width: 2; stroke-dasharray: var(--stich) var(--luecke); }   /* fill wirkt am Strich nicht, die Messung liest aber fill */
.seitenkopf .naht .naht__stich { display: none; }
.b-js .naht[data-linie="waagrecht"] .naht__stich {
  transition: stroke-dasharray calc(var(--b-dauer, .6s) * 1.3) var(--b-kurve, ease) calc(var(--b-dauer, .6s) * .8 + var(--i, 0) * var(--b-versatz, .08s)); }
.b-js .naht[data-linie="waagrecht"]:not(.ist-da) .naht__stich { stroke-dasharray: 1.5 8.5; }

/* 3 Lichtkante: ein schmaler Glanzstreif läuft einmal über den Goldknopf, wenn die Maus ihn trifft oder er den Fokus bekommt,
   wie Licht auf einem Manschettenknopf. Liegt zwischen Knopffläche und Schrift (isolation im Knopf). */
.knopf--gold { position: relative; isolation: isolate; overflow: hidden; }
.knopf--gold::after { content: ""; position: absolute; z-index: -1; top: -2px; bottom: -2px; left: 0; width: 42%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgb(212 178 94 / 0) 10%, rgb(222 190 110 / .55) 38%, rgb(255 246 222 / .8) 50%, rgb(222 190 110 / .55) 62%, rgb(212 178 94 / 0) 90%);
  transform: translateX(-130%) skewX(-18deg); }
@keyframes lichtkante { 0% { opacity: 1; transform: translateX(-130%) skewX(-18deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(300%) skewX(-18deg); } }
@media (hover: hover) { .knopf--gold:hover::after { animation: lichtkante 1s cubic-bezier(.45, .05, .3, 1) 1 both; } }
.knopf--gold:focus-visible::after { animation: lichtkante 1s cubic-bezier(.45, .05, .3, 1) 1 both; }
/* dieselbe Lichtkante über die goldene Karten-Borte, wenn die Karte gehoben wird (siehe 9) */
.borte--karte { overflow: hidden; }
.borte--karte::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 24%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgb(255 250 235 / 0), rgb(255 250 235 / .8) 50%, rgb(255 250 235 / 0)); transform: translateX(-110%); }
@keyframes lichtkante-band { 0% { opacity: 1; transform: translateX(-110%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(440%); } }

/* 6 Kapitelziffern (Felder der Startseite, Randtitel der Leistungen, Ablauf der Startseite). Vom 30.09. bis 01.10.2026 nur
   als Goldkontur; seit 01.10.2026 wieder in Gold gefüllt (Noah: Akzent mindestens 5 %, L-018; die Kontur trug kaum Fläche).
   Die feine Kontur in Gold tief bleibt als Kante, damit die Ziffer graviert statt flach wirkt (viewBox 170 × 140). */
.feld__ziffer text, .leistung__ziffer text, .kapitelziffer text { fill: currentColor; stroke: var(--gold-tief); stroke-width: .6; stroke-linejoin: round; paint-order: stroke; }
.kapitelziffer { display: block; width: 112px; height: 92px; margin: -14px 0 2px -6px; color: var(--gold); }   /* unten ohne Zug: die Unterlänge der „03“ reicht bis y = 134 */
.kapitelziffer text { font-family: var(--schrift-kopf); font-size: 118px; letter-spacing: -.02em; stroke-width: 2; }
/* Randnotiz in Kapitälchen (Marcellus in Versalien, gesperrt), davor ein kurzer Goldfaden */
.kapitelnotiz { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 14px/1.3 var(--schrift-kopf); letter-spacing: .16em; text-transform: uppercase; color: var(--schiefer); }
.kapitelnotiz::before { content: ""; flex: none; width: 22px; height: 1.5px; background: var(--gold); }
.feld .kapitelnotiz { margin-top: -6px; }
.schritt__karte .kapitelnotiz { margin-bottom: 10px; }
@media (max-width: 900px) { .leistung__ziffer text { stroke-width: 1.9; } }
@media (max-width: 767px) {
  .feld__ziffer { grid-row: 1 / span 2; }
  .feld__ziffer text { stroke-width: 3; }
  .feld .kapitelnotiz { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
  .feld h3 { grid-column: 2; grid-row: 2; align-self: start; }
  .schritt__karte .kapitelziffer { display: none; }   /* am Handy steht der Nummernkreis direkt daneben, zweimal dieselbe Zahl wäre zu viel */
  .kapitelnotiz { gap: 8px; letter-spacing: .08em; }
  .kapitelnotiz::before { width: 14px; }
}

/* 9 Karten heben sich beim Hover um 3 px (A-356 ohne Neigung): Schatten tiefer und weicher, goldene Kante sichtbar.
   Hub über die eigene Eigenschaft translate, so bleibt transform beim Auftritt (Bausteine) die einzige Quelle dafür. */
.schritt__karte, .infokarte, .kontaktkarte, .thema { box-shadow: 0 0 0 1px var(--hellblau-tief), 0 3px 8px -6px rgb(20 36 58 / .16); }
.kontaktkarte--dunkel { box-shadow: 0 3px 8px -6px rgb(20 36 58 / .3); }
.stimme { box-shadow: 0 0 0 8px var(--weiss), 0 0 0 9px var(--hellblau-tief), 0 12px 16px -14px rgb(20 36 58 / .2); }
:is(.schritt__karte, .infokarte, .kontaktkarte, .thema, .stimme) { transition: translate var(--b-hover, .3s) var(--b-kurve, ease), box-shadow var(--b-hover, .3s) var(--b-kurve, ease); }
.b-js :is(.schritt__karte, .infokarte, .kontaktkarte, .thema, .stimme)[data-auftritt] {
  transition: opacity var(--b-dauer) var(--b-kurve), transform var(--b-dauer) var(--b-kurve), filter calc(var(--b-dauer) * 1.4) var(--b-kurve),
    translate var(--b-hover, .3s) var(--b-kurve, ease), box-shadow var(--b-hover, .3s) var(--b-kurve, ease);
  transition-delay: calc(var(--i, 0) * var(--b-versatz)), calc(var(--i, 0) * var(--b-versatz)), calc(var(--i, 0) * var(--b-versatz)), 0s, 0s; }
@media (hover: hover) {
  :is(.schritt__karte, .infokarte, .kontaktkarte, .thema):hover { translate: 0 -3px;
    box-shadow: 0 0 0 1.5px var(--gold), 0 18px 34px -18px rgb(20 36 58 / .34), 0 6px 12px -8px rgb(20 36 58 / .16); }
  .kontaktkarte--dunkel:hover { box-shadow: 0 0 0 1.5px var(--gold-hell), 0 18px 34px -18px rgb(20 36 58 / .5), 0 6px 12px -8px rgb(20 36 58 / .25); }
  .stimme:hover { translate: 0 -3px; box-shadow: 0 0 0 8px var(--weiss), 0 0 0 9.5px var(--gold), 0 24px 36px -22px rgb(20 36 58 / .34); }
  :is(.infokarte, .kontaktkarte, .thema, .stimme):hover > .borte--karte::after { animation: lichtkante-band 1.1s cubic-bezier(.45, .05, .3, 1) 1 both; }
}
:is(.schritt__karte, .infokarte, .kontaktkarte, .thema):has(:focus-visible) { translate: 0 -3px;
  box-shadow: 0 0 0 1.5px var(--gold), 0 18px 34px -18px rgb(20 36 58 / .34), 0 6px 12px -8px rgb(20 36 58 / .16); }
.kontaktkarte--dunkel:has(:focus-visible) { box-shadow: 0 0 0 1.5px var(--gold-hell), 0 18px 34px -18px rgb(20 36 58 / .5); }
.stimme:has(:focus-visible) { translate: 0 -3px; box-shadow: 0 0 0 8px var(--weiss), 0 0 0 9.5px var(--gold), 0 24px 36px -22px rgb(20 36 58 / .34); }
:is(.infokarte, .kontaktkarte, .thema, .stimme):has(:focus-visible) > .borte--karte::after { animation: lichtkante-band 1.1s cubic-bezier(.45, .05, .3, 1) 1 both; }

/* Ruhige Fassung der Veredelung: Naht sofort als Stichlinie, kein Glanz, kein Hub (Kante und Schatten bleiben als Rückmeldung) */
@media (prefers-reduced-motion: reduce) {
  .naht__stich { transition: none !important; stroke-dasharray: var(--stich) var(--luecke) !important; }
  .knopf--gold::after, .borte--karte::after { display: none; animation: none !important; }
  :is(.schritt__karte, .infokarte, .kontaktkarte, .thema, .stimme) { translate: none !important; transition: none !important; }
}

/* ---------- Bewegung edel (01.10.2026, Noah: „zu lasch“, dann „klasse, edel“, wie Uhrenmanufaktur oder Privatbank) ----------
   Weniger, aber gebaute Bewegungen. Nur transform, opacity und (bei Bildern) ein weicher Unschärfe-Auftakt, keine Federn,
   kein Drehen. Kurve cubic-bezier(.2, .7, .2, 1), 0,95 bis 1,4 s. Die Hülle setzt die Tokens für alle Auftritte (M-01):
   Weg 56 px statt 16, Dauer 0,95 s statt 0,6, Staffel 0,1 s. Was js/seite.js zusätzlich setzt (Abschnitt „Bewegung edel“):
   1 h2 außerhalb des Startbilds: Zeilen steigen hinter ihrer Grundlinie auf (A-130 ohne Kippen, Wortmasken aus bewegung.css,
     je Zeile 0,12 s später).
   2 Kapitelziffern gleiten aus ihrer Maske (A-114 als Ziffer), danach leichte Parallaxe beim Scrollen (±18 px, M-09).
   3 Inhaltsbilder kommen aus der Unschärfe und zoomen von 1,05 auf 1 zurück (A-011, A-236), erst wenn sie dekodiert sind.
   4 Karten einer Reihe gestaffelt (A-047, A-208); Goldfaden der Kapitelnotiz zeichnet sich nach (A-235).
   Ohne JavaScript steht alles (alles hängt an .b-js), bei weniger Bewegung der Endzustand (bewegung.css und unten). */
html[data-tempo] { --b-dauer: .95s; --b-weg: 56px; --b-versatz: .1s; --b-kurve: cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 767px) { html[data-tempo] { --b-weg: 40px; } }
/* 1 Zeilen aus der Maske: länger als die Karten, damit die Schrift ruhig steigt */
.b-js h2[data-auftritt="maske"] .b-wort > span { transition-duration: 1.1s; }
/* 2 Kapitelziffern */
.b-js [data-auftritt="ziffer"] { opacity: 1; transform: none; }
.b-js [data-auftritt="ziffer"] text { transition: transform 1.2s var(--b-kurve), opacity .8s var(--b-kurve); transition-delay: calc(var(--i, 0) * var(--b-versatz) + .1s); }
.b-js [data-auftritt="ziffer"]:not(.ist-da) text { transform: translateY(112px); opacity: 0; }
/* 3 Bilder */
.b-js [data-bild] img { transition: opacity .9s var(--b-kurve), scale 1.4s var(--b-kurve), filter 1.1s var(--b-kurve); }
.b-js [data-bild]:not(.ist-da) img { opacity: 0; scale: 1.05; filter: blur(10px); }
/* 4 Goldfaden der Kapitelnotiz */
.b-js [data-auftritt] .kapitelnotiz::before { transform-origin: 0 50%; transition: transform 1s var(--b-kurve) calc(var(--i, 0) * var(--b-versatz) + .35s); }
.b-js [data-auftritt]:not(.ist-da) .kapitelnotiz::before { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .b-js [data-bild] img { opacity: 1 !important; scale: none !important; filter: none !important; transition: none !important; }
  .b-js [data-auftritt] .kapitelnotiz::before { transform: none !important; transition: none !important; }
  [data-parallaxe] { translate: none !important; }
}

/* ---------- Runde 01.10.2026 (Kundengespräch, Wunsch Michel über Noah): fünf Felder, Kreislauf der fünf Schritte,
   Teamband mit Instagram-Kurzansicht und Teamvideo, Teamseite mit neuem Foto, Sponsoring, Veranstaltungen.
   Keine neue Farbe, glatte Flächen (L-038), jede Bewegung einmal und mit ruhiger Fassung. Markup in quelle/KLASSEN.md ---------- */

/* Fünf Felder (Start): ab 1240 px fünf Spalten an sechs Rasterlinien, darunter drei oben und zwei unten, am Handy wie bisher */
.raster--fuenf .raster__linie { left: calc(var(--x) * 20%); }
.raster--fuenf .raster__linie[style*="--x:4"] { left: 80%; right: auto; }
.raster--fuenf .raster__linie[style*="--x:5"] { left: auto; right: 0; }
.raster--fuenf .kreide { left: calc(var(--x) * 20%); }
.raster--fuenf .kreide:last-child { left: auto; right: -7px; }
.felder--fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.felder--fuenf .feld__ziffer { width: 250px; height: 206px; }
.felder--fuenf .feld h3 { font-size: clamp(24px, 1.9vw, 30px); }
.felder--fuenf .kapitelnotiz { min-height: 2.6em; align-items: flex-start; }   /* zweizeilige Notiz (Geldanlage, Versorgung): Überschriften bleiben auf einer Linie */
.felder--fuenf .kapitelnotiz::before { margin-top: .6em; }
@media (max-width: 767px) { .felder--fuenf .kapitelnotiz { min-height: 0; } }
@media (max-width: 1239px) {
  .felder--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .felder--fuenf .feld { grid-column: span 2; }
  .felder--fuenf .feld:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--hellblau-tief); }
  .raster--fuenf .raster__linie:not([style*="--x:0"], [style*="--x:5"]), .raster--fuenf .kreide:not([style*="--x:0"], [style*="--x:5"]) { display: none; }
}
@media (max-width: 767px) {
  .felder--fuenf { grid-template-columns: minmax(0, 1fr); }
  .felder--fuenf .feld, .felder--fuenf .feld:nth-child(n+4) { grid-column: auto; }
  .felder--fuenf .feld__ziffer { width: 112px; height: 92px; }
}

/* Kreislauf der fünf Schritte (Start #ablauf, Erstgespräch #schritte): breit vier Karten um einen goldenen Kreis, Schritt 5
   als goldene Scheibe in der Mitte, Verbindungslinien von der Karte zum Nummernpunkt auf dem Kreis; schmal untereinander an
   einer senkrechten Goldlinie. Auftritt: Kreis zeichnet sich, Schritte 1 bis 4 nacheinander, zuletzt die Mitte (js/seite.js). */
.kreislauf { --r: clamp(170px, 15vw, 220px); --g: clamp(28px, 3vw, 48px); --mitte: calc(var(--r) * 1.24); margin-top: 8px; }
.kreislauf__schritte { position: relative; list-style: none; margin: 0; padding: 0; height: calc(var(--r) * 2 + 150px); }
.kreislauf__schritt { margin: 0; }
.kreislauf__nr { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--marine); color: var(--gold-hell); font: 400 26px/1 var(--schrift-kopf); box-shadow: 0 0 0 6px var(--kuehl); }
.abschnitt--weiss .kreislauf__nr { box-shadow: 0 0 0 6px var(--weiss); }
.kreislauf__text h3 { font-size: clamp(24px, 2vw, 30px); }
.kreislauf__text p { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--schiefer); }
@media (min-width: 900px) {
  .kreislauf__schritt:not(.kreislauf__schritt--5) { position: absolute; width: calc(50% - var(--r) - var(--g)); }
  .kreislauf__schritt--1, .kreislauf__schritt--2 { left: 0; text-align: right; }
  .kreislauf__schritt--3, .kreislauf__schritt--4 { right: 0; }
  /* oben in jeder Karte die goldene Kapitelziffer (wie im Ablauf vorher), die Überschrift darunter liegt auf Höhe des Punkts */
  .kreislauf { --kz: 80px; }
  .kreislauf .kapitelziffer { margin-bottom: 0; }
  .kreislauf__schritt--1 .kapitelziffer, .kreislauf__schritt--2 .kapitelziffer { margin-left: auto; margin-right: -6px; }
  .kreislauf__schritt--1, .kreislauf__schritt--4 { top: calc(50% - var(--r) * .7071 - 22px - var(--kz)); }
  .kreislauf__schritt--2, .kreislauf__schritt--3 { top: calc(50% + var(--r) * .7071 - 22px - var(--kz)); }
  /* Nummernpunkt auf dem Kreis, schräg oben links, oben rechts, unten rechts, unten links (im Uhrzeigersinn) */
  /* breit trägt die Kapitelziffer die Nummer, der Punkt auf dem Kreis ist ein goldener Knopf mit Ring */
  .kreislauf__schritt:not(.kreislauf__schritt--5) > .kreislauf__nr { position: absolute; top: calc(22px + var(--kz)); margin-top: -28px; z-index: 2; font-size: 0; color: var(--marine); background: var(--gold); box-shadow: 0 0 0 6px var(--kuehl), inset 0 0 0 1px var(--gold-tief); scale: .5; }
  .abschnitt--weiss .kreislauf__schritt:not(.kreislauf__schritt--5) > .kreislauf__nr { box-shadow: 0 0 0 6px var(--weiss), inset 0 0 0 1px var(--gold-tief); }
  .kreislauf__schritt--1 > .kreislauf__nr, .kreislauf__schritt--2 > .kreislauf__nr { left: calc(100% + var(--g) + var(--r) * .2929 - 28px); }
  .kreislauf__schritt--3 > .kreislauf__nr, .kreislauf__schritt--4 > .kreislauf__nr { right: calc(100% + var(--g) + var(--r) * .2929 - 28px); }
  /* Verbindungslinie Karte → Punkt */
  .kreislauf__schritt:not(.kreislauf__schritt--5)::after { content: ""; position: absolute; top: calc(21px + var(--kz)); height: 1.5px; width: calc(var(--g) + var(--r) * .2929 - 40px); background: var(--gold); }
  .kreislauf__schritt--1::after, .kreislauf__schritt--2::after { left: calc(100% + 8px); transform-origin: 0 50%; }
  .kreislauf__schritt--3::after, .kreislauf__schritt--4::after { right: calc(100% + 8px); transform-origin: 100% 50%; }
  .kreislauf__schritt--5 { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); }
  .kreislauf__kreis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: scaleX(-1) rotate(-45deg); }   /* Start oben links, gegen den Uhrzeigersinn */
  .kreislauf__mitte { position: absolute; left: 50%; top: 50%; width: var(--mitte); height: var(--mitte); margin: calc(var(--mitte) / -2) 0 0 calc(var(--mitte) / -2);
    display: grid; place-content: center; justify-items: center; gap: 8px; padding: 0 calc(var(--mitte) * .14); border-radius: 50%; background: var(--gold); color: var(--marine); text-align: center;
    box-shadow: 0 18px 40px -22px rgb(20 36 58 / .55), inset 0 0 0 1px var(--gold-tief); }
  .kreislauf__mitte .kreislauf__nr { width: 44px; height: 44px; font-size: 22px; box-shadow: none; }
  .kreislauf__mitte h3 { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.15; }
  .kreislauf__mitte p { margin-top: 6px; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45; color: var(--marine); }
}
.kreislauf__kreis circle { fill: none; stroke: var(--gold); stroke-width: .7; stroke-dasharray: 1; stroke-dashoffset: 0; }   /* ohne non-scaling-stroke: sonst rechnet pathLength nicht */
@media (max-width: 899px) {
  .kreislauf__schritte { height: auto; display: grid; gap: 22px; }
  .kreislauf__schritte::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 60px; width: 1.5px; background: var(--gold); transform-origin: 50% 0; }
  .kreislauf__schritt { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
  .kreislauf__kreis, .kreislauf .kapitelziffer { display: none; }
  .kreislauf__schritt--5 { display: block; }
  .kreislauf__mitte { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 18px 20px 0; border-radius: 14px; background: var(--gold); color: var(--marine); }
  .kreislauf__mitte .kreislauf__nr { box-shadow: none; margin-left: 0; }
  .kreislauf__mitte p { color: var(--marine); }
  .kreislauf__text h3 { font-size: 23px; }
  .kreislauf__text p { font-size: 16px; }
}
/* Auftritt (nur mit JS und ohne „weniger Bewegung“; js/seite.js setzt data-kreis="wartet", im Bild dann "an") */
.kreislauf[data-kreis] .kreislauf__kreis circle { transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1); }
.kreislauf[data-kreis] .kreislauf__schritt:not(.kreislauf__schritt--5), .kreislauf[data-kreis] .kreislauf__mitte { transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1), scale .8s cubic-bezier(.2, .7, .2, 1); }
.kreislauf[data-kreis] .kreislauf__schritt::after, .kreislauf[data-kreis] .kreislauf__schritte::before { transition: scale .7s cubic-bezier(.2, .7, .2, 1); }
.kreislauf[data-kreis] .kreislauf__schritt--1 { transition-delay: .25s; } .kreislauf[data-kreis] .kreislauf__schritt--1::after { transition-delay: .45s; }
.kreislauf[data-kreis] .kreislauf__schritt--2 { transition-delay: .55s; } .kreislauf[data-kreis] .kreislauf__schritt--2::after { transition-delay: .75s; }
.kreislauf[data-kreis] .kreislauf__schritt--3 { transition-delay: .85s; } .kreislauf[data-kreis] .kreislauf__schritt--3::after { transition-delay: 1.05s; }
.kreislauf[data-kreis] .kreislauf__schritt--4 { transition-delay: 1.15s; } .kreislauf[data-kreis] .kreislauf__schritt--4::after { transition-delay: 1.35s; }
.kreislauf[data-kreis] .kreislauf__mitte { transition-delay: 1.45s; }
.kreislauf[data-kreis="wartet"] .kreislauf__kreis circle { stroke-dashoffset: 1; }
.kreislauf[data-kreis="wartet"] .kreislauf__schritt:not(.kreislauf__schritt--5) { opacity: .45; translate: 0 16px; }
.kreislauf[data-kreis="wartet"] .kreislauf__schritt::after { scale: 0 1; }
.kreislauf[data-kreis="wartet"] .kreislauf__schritte::before { scale: 1 0; }
.kreislauf[data-kreis="wartet"] .kreislauf__mitte { opacity: .45; scale: .92; }
@media (prefers-reduced-motion: reduce) {
  .kreislauf[data-kreis] *, .kreislauf[data-kreis] *::after, .kreislauf[data-kreis] .kreislauf__schritte::before { transition: none !important; opacity: 1 !important; translate: none !important; scale: none !important; stroke-dashoffset: 0 !important; }
}

/* Teamband der Startseite: Unterzeile, Instagram-Kurzansicht (statisch, eigene Kopien), Teamvideo hochkant */
.band__unterzeile { margin-top: -6px; font: 700 15px/1.3 var(--schrift-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hell); }
.band--team { align-items: start; }
.insta__kopf .textlink { font-size: 17px; }
.insta__handle { margin-left: 6px; color: var(--gold-hell); font-weight: 400; }
.insta__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin: 16px 0 0; padding: 0; list-style: none; }
.insta__raster a { position: relative; display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 1; background: rgb(207 220 234 / .12); }
.insta__raster img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.insta__raster a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgb(212 178 94 / 0); transition: box-shadow .3s; }
@media (hover: hover) { .insta__raster a:hover img { scale: 1.05; } .insta__raster a:hover::after { box-shadow: inset 0 0 0 2px var(--gold-hell); } }
.insta__raster a:focus-visible img { scale: 1.05; }
.insta__raster a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--gold-hell); }
.insta { max-width: 560px; }
.insta__hinweis { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--hellblau); }
.band--team .knopfreihe { gap: 12px 28px; }
.loop--hoch { width: min(100%, 380px); }
/* 01.10.2026 b (Noah: Teamband kürzer): ein Satz statt drei, drei statt sechs Bilder, Titel kleiner, Abstände enger. Der
   Film bleibt 380 px breit (675 px hoch, nicht höher als der Text) und steht mittig neben dem Text. Handy: Film 240 px. */
.band--team { align-items: center; }
.band--team .band__text h2 { font-size: clamp(36px, 4.2vw, 60px); margin-bottom: 12px; }
.band--team .band__hinweis { margin-top: 20px; padding-top: 16px; }
.band--team .insta__raster { margin-top: 12px; }
.loop--hoch .loop__bild { aspect-ratio: 704 / 1248; background: var(--anzug); }
@media (max-width: 767px) { .loop.loop--hoch { width: min(100%, 300px); } .insta__raster { max-width: none; gap: 8px; } .band--team .loop.loop--hoch { width: min(100%, 240px); justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .insta__raster img { transition: none; } }

/* Team-Seitenkopf mit dem Foto vom Bürostuhl (Schwarzweiß, dunkler Grund): Ausschnitt oben, damit die Köpfe Luft unter der
   Leiste haben und Michel vorn ganz zu sehen ist (L-031). Unterzeile in der h1 („by Michel Rother“) */
.teamkopf--stuhl .teamkopf__foto { background-color: #3c3d3f; }
.teamkopf--stuhl .teamkopf__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 16%; pointer-events: none;
  background: linear-gradient(to bottom, rgb(246 248 251 / 0) 0%, rgb(246 248 251 / .6) 55%, var(--blauweiss) 100%); }   /* weicher Übergang ins Blauweiß statt harter Bildkante (Noah, 12.10.2026) */
.teamkopf--stuhl .teamkopf__foto img { object-position: 50% 100%; }   /* Grund oben ist verlängert: unten bündig, damit Michels Kinn im Bild bleibt */
.h1-unterzeile { display: block; margin-top: 14px; font: 700 clamp(15px, 1.2vw, 18px)/1.3 var(--schrift-text); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-tief); }
.teambild-breit { margin: 0; padding: 14px; }
.teambild-breit .bildrahmen img { aspect-ratio: 2 / 1; width: 100%; object-fit: cover; }

/* Sponsoring (Über mich) und Termine (Veranstaltungen): Karten mit Feldern für Logo, Foto und Text, bis zur Lieferung
   gestrichelte Platzhalter */
.sponsorkarten, .terminkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); margin: 0; padding: 0; list-style: none; }
.sponsorkarte, .terminkarte { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hellblau-tief); border-radius: var(--radius); background: var(--weiss); box-shadow: 0 14px 30px -24px rgb(20 36 58 / .45); }
.abschnitt--weiss .sponsorkarte { background: var(--blauweiss); }
.sponsorkarte__logo { display: grid; place-items: center; height: 120px; margin: 18px 18px 0; border: 1.5px dashed var(--hellblau-tief); border-radius: 10px; }
.sponsorkarte__foto, .terminkarte__foto { display: grid; place-items: center; aspect-ratio: 3 / 2; background: var(--kuehl); border-bottom: 3px solid var(--gold); }
.sponsorkarte__foto { margin: 14px 18px 0; border: 1.5px dashed var(--hellblau-tief); border-radius: 10px; }
.sponsorkarte__text, .terminkarte__text { display: grid; gap: 10px; padding: 18px 22px 24px; }
.sponsorkarte__text h3, .terminkarte__text h3 { font-size: 22px; }
.terminkarte__datum { font: 700 14px/1.3 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tief); }
@media (max-width: 900px) { .sponsorkarten, .terminkarten { grid-template-columns: minmax(0, 1fr); } }

/* Fotogalerie (Veranstaltungen): ein großes Feld und vier kleine, am Handy zwei Spalten */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.galerie__feld { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--hellblau-tief); border-radius: 12px; background: var(--kuehl); }
.galerie__feld--gross { grid-column: span 2; grid-row: span 2; border-color: var(--gold); }
@media (max-width: 767px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Brotkrumen (Unterseite einer Unterseite, Veranstaltungen) */
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--schiefer); }
.brotkrumen li + li::before { content: "/"; margin-right: 10px; color: var(--gold); }
.brotkrumen a { color: var(--marine); }

/* ---------- Druck (Abnahme Runde 1, Befund 5; gilt für alle Seiten) ----------
   Alle Aufklapper offen, alle Auftritte im Endzustand; Kopfleiste, Menü, Sprungleisten, Pausenknöpfe, Wischsteuerung und
   Intro fallen weg. Schrift Marine auf Weiß ohne Flächen (spart Tinte, bleibt lesbar); fremde Links mit Adresse. */
@media print {
  @page { margin: 16mm 14mm; }
  :root { font-size: 11.5pt; }
  *, *::before, *::after { color: #14243a !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  .kopf, #menue, .sprung, .sprungleiste, .ueberspringen, .intro-woerter, .intro-naehte, .intro-strudel, .intro-mess, .loop__pause, .folge-feld, .folge-steuer,
  .wischband__steuer, .borte, .goldrahmen, .ecken, .stepp, .kapsel__punkt, .frage__plus, video, [data-zeeg-laden], .fuss__unten .knopf, .raster__linien,
  .termin-film__bild { display: none !important; }
  .termin-film__ende { opacity: 1 !important; }
  .b-klapp { grid-template-rows: 1fr !important; }
  .b-klapp > * { overflow: visible !important; }
  [data-auftritt], [data-auftritt] *, [data-linie], .hero *, .datenzeile, .naht { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  main > section, .seitenkopf, .abschnitt, .personenkopf__text, .personenkopf__bild, .recht { padding-top: 10pt !important; padding-bottom: 10pt !important; min-height: 0 !important; }
  .hero, .personenkopf { min-height: 0 !important; }
  .hero__foto, .teamkopf__foto { position: relative !important; height: 70mm !important; }
  .wischband__bahn, .stimmen { overflow: visible !important; display: block !important; }
  .stimme { margin: 0 0 8pt !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  img, .bildrahmen, .karte, .infokarte, .kontaktkarte, .thema { break-inside: avoid; }
  .knopf { min-height: 0 !important; padding: 3pt 8pt !important; border: 1px solid #14243a !important; }
  .etikett, .schnittnr, .pille, .datum dt { border: 1px solid #14243a; }
  .offen { outline: 1px dashed #14243a; }
  .fuss { border-top: 1px solid #14243a; padding-top: 10pt !important; }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding-top: 0 !important; }
  .fuss__raster > div { border: 0 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")" !important; position: static !important; display: inline !important; width: auto !important; height: auto !important;
    transform: none !important; margin: 0 !important; font-size: .85em; font-weight: 400; overflow-wrap: anywhere; }
}

/* ---------- Unterseiten ohne Nummerierung (Wunsch Noah, 07.10.2026) ----------
   Auf allen Unterseiten (body.unterseite, gesetzt in quelle/zusammenbauen.mjs) keine Aufzählungsziffern mehr:
   Abschnittsnummern, große Goldziffern, Fragen-, Rechts- und Schrittnummern. Die Zahlen in Schritt- und Kreislaufpunkten
   entfernt zusammenbauen.mjs, die Punkte bleiben als Goldpunkt auf der Linie. Menünummern entfallen überall. */
.menue__nr { display: none; }
/* ohne Ziffer nur noch eine Spalte, sonst landet der Menütext in der 48-px-Ziffernspalte und bricht buchstabenweise um (Befund Design-Prüfer, 13.10.2026) */
#menue li a { grid-template-columns: 1fr; }
.unterseite .schnittnr, .unterseite .recht__nr, .unterseite .frage__nr,
.unterseite .leistung__ziffer, .unterseite .kapitelziffer, .unterseite .kreislauf__mitte .kreislauf__nr { display: none; }
.unterseite .kopfzeile:has(> .schnittnr) { grid-template-columns: minmax(0, 1fr) auto; }
.unterseite .frage__knopf--nr { grid-template-columns: minmax(0, 1fr) 32px; }
.unterseite .schritt__nr { width: 20px; height: 20px; margin-top: 22px; background: var(--gold); }
@media (max-width: 767px) {
  .unterseite .frage__knopf--nr { grid-template-columns: minmax(0, 1fr) 32px; }
  .unterseite .schritt__nr { width: 20px; height: 20px; margin: 22px 0 0 22px; }
  .unterseite .kreislauf__nr { width: 20px; height: 20px; margin-top: 18px; justify-self: center; background: var(--gold); }
  .unterseite .kreislauf__mitte { grid-template-columns: minmax(0, 1fr); padding-left: 20px; }
}