/* visuellweb, Schale nach dem Umbau zum Flaggschiff (PLAN.md Abschnitte 4, 6, 7, 10; Bauer 02.10.2026).
   Seit 03.10.2026 Weiß als Grund mit Abschnitten als Blättern (PLAN.md Abschnitt 15, L-043, Schritt 1).
   Seit 03.10.2026 (PLAN.md 16, L-044) Silbergrau, Schwarz und Kobalt: Weiß mit Silber dominant, Schwarz sekundär,
   Kobalt Akzent. Die Variablennamen bleiben, nur die Werte wechseln ("pflaume" meint jetzt Schwarz, "hauch" Silber).
   Kobalt nie als Fläche eines Abschnitts, einer Karte, einer Folie oder eines Menüs (L-015). Auf Kobalt steht Weiß
   (5,30), nie Schwarz (3,53). Kobalt als Schrift nur auf Weiß und Silber hell, sonst Kobalt tief, auf Schwarz Kobalt hell.
   Hero, Fenster, Handy und Diashow wörtlich aus entwuerfe/05-fenster-diashow/index.html (Fassung nach Runde 2),
   die Klasse .ist-ruhig des Entwurfs ist hier die Medienabfrage prefers-reduced-motion.
   Diese Datei gehört der Schale und ist nach dem Bau eingefroren (SHA in STAND.md). Neue Klassen nur über den
   Dirigenten. Übersicht aller Klassen: quelle/KLASSEN.md. */

/* ---------- Schriften (lokal, SIL OFL, Lizenzen in fonts/) ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/playfair-display-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/playfair-display-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/playfair-display-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/cabin-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/cabin-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Farbrollen und Maße (PLAN.md Abschnitte 4, 10, 15 und 16.1) ---------- */
:root {
  /* Weiß ist der Grund (L-043). Seit 03.10.2026 (PLAN.md 16.1, L-044): hauch = Silber (Blätter), pfirsich und tief =
     Silber tief (höchstens ein kräftiges Blatt je Seite), hell = Silber hell (Fensterinneres, Felder), sekundaer = Schwarz,
     leise = Grau, akzent = Kobalt (-hell nur auf Schwarz, -tief für Hover der Knöpfe und Schrift auf Silber). */
  --dominant: #ffffff; --dominant-hauch: #eceef1; --dominant-pfirsich: #dfe2e6;
  --dominant-hell: #f6f7f8; --dominant-tief: #dfe2e6;
  --sekundaer: #111214; --sekundaer-karte: #1c1d21; --sekundaer-linie: #2c2e33;
  --leise: #565a62; --leise-hell: #b4b8bf;
  --akzent: #455ce9; --akzent-hell: #8c9cf5; --akzent-tief: #3a4fd6;
  --linie: #c9cdd3;   /* Grau Linie: nur Zierlinien ohne Bedeutung (1,60), nie Feldrahmen oder Schrift */
  --schrift-kopf: "Playfair Display", Georgia, "Times New Roman", serif;
  --schrift-text: "Cabin", "Segoe UI", Arial, sans-serif;
  --rand: clamp(16px, 4.5vw, 72px);          /* Seitenrand der Inhaltsabschnitte */
  --rand-schmal: clamp(16px, 1.7vw, 24px);   /* Randabschnitte (L-020): Inhalt reicht bis auf diesen Rand */
  --luecke: clamp(48px, 4.4vw, 80px);        /* Hero: Abstand Textspalte zu Fenster, die Kobalt-Linie überbrückt ihn (16.3: schmaler wegen der Fotospalte) */
  /* Abstände (L-016, Nachbesserung 02.10.2026): von der Unterkante des letzten Inhalts bis zur Oberkante des nächsten
     höchstens 120 px (Desktop) und 72 px (Handy), Verlaufszone eingerechnet. Abschnitte haben oben --abschnitt und
     unten nur --abschnitt-unten; nach einem Verlauf beginnt der Inhalt nach --nach-verlauf.
     Gleiche Fläche: 16 + 100 = 116 (1440) und 16 + 48 = 64 (390). Mit Verlauf: 16 + 76 + 16 = 108 und 16 + 32 + 12 = 60
     (Spiel für Zeilenhöhen und Klickflächen am Ende eines Abschnitts, etwa 12 px unter einem Textknopf). */
  /* Seit 03.10.2026 (PLAN.md 15.2): Abschnitte sind Blätter auf Weiß. Die Luft liegt innerhalb der Blätter. Plan:
     oben und unten je clamp(28px, 3.4vw, 48px), dazwischen --blatt-luecke, 48 + 16 + 48 = 112 (1440) und 28 + 8 + 28 = 64 (390).
     Gemessen (test/stellen.mjs) reichte das nicht: Versatzschatten, Textknöpfe und Bildzeilen am Ende eines Abschnitts
     tragen 12 bis 28 px eigene Luft. Darum unten weniger (34 px, Handy 16 px) und am Handy oben 24 px:
     34 + 16 + 48 = 98 (1440) und 16 + 8 + 24 = 48 (390), Spiel für diese Ränder bis 120/72 px (L-016).
     Verläufe zwischen hellen Abschnitten entfallen, darum gleicht --nach-verlauf dem oberen Innenrand. */
  --blatt-rand: clamp(8px, 1.4vw, 20px);      /* Abstand des Blatts zum Bildschirmrand */
  --blatt-innen: clamp(20px, 4.2vw, 60px);    /* Innenrand seitlich */
  --blatt-luecke: 16px;                       /* zwischen zwei Blättern (Handy 8 px) */
  --blatt-radius: 32px;                       /* D-311: Blatt 32, Kachel 24, Fenster 14, Bild innen 10 (Handy 20) */
  --abschnitt: clamp(24px, 3.4vw, 48px);
  --abschnitt-unten: clamp(16px, 2.4vw, 34px);
  --nach-verlauf: var(--abschnitt);
  /* freistehende Kopfleiste (Wunsch Noah 02.10.2026): Luft oben und seitlich, Kapsel --kopf-leiste hoch.
     --kopf-hoehe ist der Platz, den die Seite oben freihält: Luft + Leiste + 10 px darunter (Desktop 14 + 64 + 10). */
  --kopf-luft: 14px;
  --kopf-seite: 12px;
  --kopf-leiste: 64px;
  --kopf-hoehe: 88px;
  --stand: 6000ms;
  --ueb: 800ms;
  --kurve: cubic-bezier(.19, 1, .22, 1);
  --kurve-blende: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--dominant); color: var(--sekundaer);
  font: 400 18px/1.55 var(--schrift-text); overflow-wrap: break-word;
}
::selection { background: var(--sekundaer); color: var(--dominant); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
h1, h2 { font-family: var(--schrift-kopf); line-height: 1.06; letter-spacing: -.015em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h3, h4 { font-family: var(--schrift-text); font-weight: 600; font-size: 21px; line-height: 1.3; }
/* Fokusring zweifarbig (PLAN.md 16.1): Umriss 2 px Schwarz plus Ring 2 px Kobalt, auf Schwarz Umriss Weiß */
:focus-visible { outline: 2px solid var(--sekundaer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--akzent); border-radius: 4px; }
.flaeche--pflaume :focus-visible, .fuss :focus-visible, .menue :focus-visible { outline-color: var(--dominant); }
.nur-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--sekundaer); color: var(--dominant);
  padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.sprung:focus { top: 12px; }
/* offene Angabe: sichtbar gestrichelt, zählbar (Rezept prototyp-bau, Abschnitt 2) */
.offen { display: inline; padding: 1px 6px; border: 1.5px dashed var(--akzent-tief); border-radius: 4px; color: var(--sekundaer); }
.flaeche--pflaume .offen { border-color: var(--akzent-hell); color: var(--dominant); }

/* ---------- Schriftrollen ---------- */
/* Etikett mit Punkt als Abschnittskopf (D-213 abgewandelt, PLAN.md 15.2, seit 03.10.2026; vorher D-203 gesperrt):
   Punkt 8 px Koralle, 10 px Luft, Cabin 600 15 px, normale Schreibung, keine Sperrung. Alle Teile mit .oberzeile
   bekommen es ohne Änderung. flex mit fit-content: ohne Zeilen-Strut darüber (L-016). */
.oberzeile { display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 15px/1.3 var(--schrift-text);
  letter-spacing: 0; text-transform: none; }
.oberzeile::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
/* Schritt-Etikett „Schritt 01“ über einem Schritttitel (Prozess der Vorlage, PLAN.md 15.3 und 15.5) */
.schritt__etikett { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1.3 var(--schrift-text);
  letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.schritt__etikett::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
/* Abschnittsüberschrift groß und ruhig (PLAN.md 15.2): Playfair 400, eng gesetzt, ein Wort darf kursiv sein (D-206) */
.titel-gross { font-size: clamp(34px, 4.4vw, 64px); font-weight: 400; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.titel-mittel { font-size: clamp(32px, 3vw, 44px); }
/* D-024 Riesenzeile über die volle Breite */
.riesenzeile { font: 700 clamp(64px, 12.5vw, 196px)/.9 var(--schrift-kopf); letter-spacing: -.035em; }
.riesenzeile em { font-weight: 400; }
/* Antwortblock unter der h1 (40 bis 60 Wörter) und Einleitungen */
.antwort { max-width: 40em; font-size: 20px; line-height: 1.6; }
.fliesstext { max-width: 33em; }   /* höchstens rund 62 Zeichen je Zeile (PLAN.md 15.2) */
.fliesstext p + p, .fliesstext p + ul, .fliesstext ul + p { margin-top: 1em; }
.fliesstext h2 { margin: 1.6em 0 .5em; font-size: clamp(28px, 2.6vw, 36px); }
.fliesstext h3 { margin: 1.4em 0 .4em; }
.fliesstext ul, .fliesstext ol { margin: 0; padding-left: 1.2em; }
.fliesstext li + li { margin-top: .4em; }
.fliesstext a, .antwort a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 4px; }
/* Linkunterstreichung 3 px Koralle (L-018, Nachbesserung 02.10.2026); die Schriftfarbe bleibt lesbar */
:is(.fliesstext, .antwort, .abschluss__kontakt, .fuss__kontakt, .bildtext, .zustimmung, .projektkarte__status, .menue__schluss) a {
  text-decoration-line: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; }
/* Listenmarken in Koralle */
.fliesstext ul { list-style: square; }
.fliesstext li::marker { color: var(--akzent); }
.flaeche--pflaume .fliesstext a, .flaeche--pflaume .antwort a { color: var(--akzent-hell); }
.leise { color: var(--leise); }
.flaeche--pflaume .leise { color: var(--leise-hell); }

/* ---------- Flächen und Abschnitte (D-460 Flächentakt, D-310 Verläufe) ---------- */
.flaeche--hell { background: var(--dominant); }
.flaeche--heller { background: var(--dominant-hell); }
.flaeche--tief { background: var(--dominant-tief); }
.flaeche--pflaume { background: var(--sekundaer); color: var(--dominant); }
.abschnitt { position: relative; }
.abschnitt__innen { padding: var(--abschnitt) var(--rand) var(--abschnitt-unten); }

/* ---------- Blätter auf Weiß (D-488, D-311; PLAN.md 15.2, L-043, seit 03.10.2026) ----------
   Ab dem zweiten Abschnitt steht jeder Inhaltsabschnitt als Blatt auf dem weißen Grund: 32 px Radius (Handy 20 px),
   --blatt-rand zum Bildschirmrand, --blatt-luecke zwischen zwei Blättern, kein Schatten, keine Linie, die Farbe trennt.
   Neue Teile nehmen .blatt mit .blatt--hauch, .blatt--pfirsich oder .blatt--pflaume. Bestehende Teile werden ohne
   Änderung zu Blättern: flaeche--heller → Hauch, flaeche--tief → Pfirsichhell, flaeche--pflaume → Pflaume-Karte,
   flaeche--hell → Weiß ohne sichtbares Blatt (gleiche Maße, damit Ränder und Lücken überall gleich bleiben).
   Seitenköpfe, Hero, Datenzeile und Fuß stehen ohne Blatt auf Weiß. Innen gilt der Innenrand des Blatts als --rand. */
.blatt, .abschnitt:not(.seitenkopf) {
  --rand: var(--blatt-innen);
  --rand-schmal: clamp(10px, 1vw, 14px);   /* Randabschnitte (L-020) im Blatt: Inhalt bis knapp an den Blattrand, 97 % der Breite */
  margin: var(--blatt-luecke) var(--blatt-rand) 0; border-radius: var(--blatt-radius);
}
.blatt--hauch, .abschnitt.flaeche--heller:not(.seitenkopf) { background-color: var(--dominant-hauch); }
.blatt--pfirsich, .abschnitt.flaeche--tief:not(.seitenkopf) { background-color: var(--dominant-pfirsich); }
.blatt--pflaume, .abschnitt.flaeche--pflaume:not(.seitenkopf) { background-color: var(--sekundaer); color: var(--dominant); }
.abschnitt.flaeche--hell:not(.seitenkopf) { background-color: transparent; }
/* Seitenköpfe stehen auf Weiß, auch wenn ihr Teil noch eine helle Fläche nennt */
.seitenkopf:is(.flaeche--hell, .flaeche--heller, .flaeche--tief) { background-color: var(--dominant); }
/* Verläufe zwischen den Abschnitten entfallen: der Grund läuft durch (L-014 und L-034 gelten nicht für Blätter) */
.abschnitt > .verlauf { display: none; }
/* Vor dem Fuß: der Verlauf Weiß → Pflaume (D-310) beginnt direkt unter dem letzten Blatt, sein weißer Anfang ist die
   Lücke; gleich welche Fläche der letzte Abschnitt hat (34 + 76 = 110 px bis zum Fuß, L-016) */
.fuss > .verlauf { --von: var(--dominant); }
/* Pflaume-Karte: blendet beim Hereinscrollen von Hauch zu Pflaume über (A-113 „Fläche wird zur Karte“, Bau-Prompt
   brilean Nr. 4, an den Scrollweg gekoppelt). Die Karte selbst ist immer Pflaume; ein Deckel über ihr (::after) wechselt
   von Hauch zu Pflaume und verbirgt dabei den Inhalt, erst danach blendet er aus und gibt den Inhalt frei. So fällt kein
   Zwischenzustand unter 4,5 : 1, und Messungen sehen nie einen halben Ton. Rückfall und ruhige Fassung: sofort Pflaume,
   kein Deckel. */
@keyframes blatt-zur-karte { from { background-color: var(--dominant-hauch); } to { background-color: var(--sekundaer); } }
@keyframes karte-deckel-weg { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(.blatt--pflaume, .abschnitt.flaeche--pflaume:not(.seitenkopf)) { isolation: isolate; }
    :is(.blatt--pflaume, .abschnitt.flaeche--pflaume:not(.seitenkopf))::after { content: ""; position: absolute; inset: 0; z-index: 20;
      border-radius: inherit; pointer-events: none;
      animation: blatt-zur-karte linear both, karte-deckel-weg linear both; animation-timeline: view(), view();
      animation-range: entry 0% entry 15%, entry 15% entry 30%; }
  }
}
/* Randloser Abschnitt (L-020), Abnahme Runde 3 (03.10.2026): Text, Überschriften, Karten und Formulare stehen immer auf
   dem Innenrand (--rand, im Blatt 60 px bei 1440 und 20 px bei 390). Nur Linien und Spuren laufen um --spur weiter bis
   --rand-schmal: die Kobalt-Linie des Abschnittskopfs (.abschnittskopf__linie, ein eigenes Element, damit die Breite
   messbar ist), die Linien der Zeilenliste, die Zahlenleiste und die Linie der Zeitleiste. */
.abschnitt__innen--randlos { --spur: calc(var(--rand) - var(--rand-schmal)); padding-inline: var(--rand); }
.abschnitt__innen--randlos > .abschnittskopf { margin-inline: calc(-1 * var(--spur)); padding-inline: var(--spur); }
.abschnitt__innen--randlos :is(.zeilenliste, .zahlen:not(.zahlen--kacheln)) { margin-inline: calc(-1 * var(--spur)); }
.abschnitt__innen--randlos .zeilenliste__zeile { padding-inline: var(--spur); }
.abschnitt__innen--randlos .zahlen:not(.zahlen--kacheln) > .zahl:first-child { padding-left: var(--spur); }
.abschnitt__innen--randlos .zahlen:not(.zahlen--kacheln) > .zahl:last-child { padding-right: var(--spur); }
.abschnitt__innen--oben-knapp, .verlauf + .abschnitt__innen { padding-top: var(--nach-verlauf); }
/* Verlauf aus 13 Stufen zwischen zwei Grundfarben (D-310, L-014, L-034). Steht als erstes Kind im Abschnitt mit
   der Zielfarbe, so entsteht keine Lücke zwischen den Abschnitten. von-… und nach-… setzen die Farben.
   Er überlappt beide Nachbarn um 1 px (oben liegt er über der Kante des Vorgängers), damit an einer Kante auf einem
   Bruchteil-Pixel keine Haarlinie entsteht (Befund /anfrage, Runde 1). Höhe zählt zur Lücke (L-016). */
.verlauf {
  --von: var(--dominant); --nach: var(--sekundaer);
  position: relative; height: clamp(36px, 5.3vw, 76px); margin: -1px 0 -1px;
  background: linear-gradient(to bottom, var(--von) 0%,
    color-mix(in oklab, var(--von) 98.3%, var(--nach)) 8.3%, color-mix(in oklab, var(--von) 93.3%, var(--nach)) 16.7%,
    color-mix(in oklab, var(--von) 85.4%, var(--nach)) 25%, color-mix(in oklab, var(--von) 75%, var(--nach)) 33.3%,
    color-mix(in oklab, var(--von) 62.9%, var(--nach)) 41.7%, color-mix(in oklab, var(--von) 50%, var(--nach)) 50%,
    color-mix(in oklab, var(--von) 37.1%, var(--nach)) 58.3%, color-mix(in oklab, var(--von) 25%, var(--nach)) 66.7%,
    color-mix(in oklab, var(--von) 14.6%, var(--nach)) 75%, color-mix(in oklab, var(--von) 6.7%, var(--nach)) 83.3%,
    color-mix(in oklab, var(--von) 1.7%, var(--nach)) 91.7%, var(--nach) 100%);
}
.verlauf--kurz { height: clamp(28px, 3.4vw, 48px); }
.von-hell { --von: var(--dominant); } .von-heller { --von: var(--dominant-hell); }
.von-tief { --von: var(--dominant-tief); } .von-pflaume { --von: var(--sekundaer); }
.nach-hell { --nach: var(--dominant); } .nach-heller { --nach: var(--dominant-hell); }
.nach-tief { --nach: var(--dominant-tief); } .nach-pflaume { --nach: var(--sekundaer); }

/* D-060 Abschnittskopf als Zeile mit Linie über die Blattbreite, Link rechts */
.abschnittskopf {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px;
  padding-bottom: 22px; margin-bottom: clamp(28px, 3.4vw, 48px); border-bottom: 4px solid var(--akzent);   /* L-018 */
}
/* Die Linie als Element (randlose Abschnitte, Runde 3): ersetzt den Rand, läuft über die ganze Breite des Kopfs */
.abschnittskopf:has(> .abschnittskopf__linie) { position: relative; padding-bottom: 26px; border-bottom: 0; }
.abschnittskopf > .abschnittskopf__linie { position: absolute; left: 0; right: 0; bottom: 0; grid-column: auto; grid-row: auto;
  display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--akzent); pointer-events: none; }
.abschnittskopf .oberzeile { margin-bottom: 12px; }
/* Köpfe ohne Etikett (Rechtsseiten, Anfrage): Koralle-Linie 6 px vor der Kennung (Schalen-Runde 02.10.2026, L-018).
   Köpfe mit Etikett tragen stattdessen dessen Punkt (seit 03.10.2026). */
.abschnittskopf:not(:has(.oberzeile)) > :first-child { position: relative; }
.abschnittskopf:not(:has(.oberzeile)) > :first-child::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: -14px; width: 6px; border-radius: 3px;
  background: var(--akzent); }   /* liegt im Innenrand (mindestens 20 px), die Kennung bleibt an ihrem Platz (L-020) */
.abschnittskopf__titel { max-width: 18em; }
/* Abschnittskopf zweispaltig ab 1024 px (D-032 abgewandelt, PLAN.md 15.2): Etikett links in der ersten von vier
   Spalten, Überschrift und Satz rechts über drei Spalten, Link rechts unten, darunter die Koralle-Linie. Etikett und
   h2 stehen im Teil in einem gemeinsamen <div>, das hier aufgelöst wird (display: contents). */
@media (min-width: 1024px) {
  .abschnittskopf:has(> :first-child > .oberzeile) {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px clamp(24px, 3vw, 48px); align-items: end; }
  .abschnittskopf:has(> :first-child > .oberzeile) > :first-child { display: contents; }
  .abschnittskopf:has(> :first-child > .oberzeile) > :first-child > .oberzeile { grid-column: 1; grid-row: 1; align-self: start;
    margin: .7em 0 0; }
  .abschnittskopf:has(> :first-child > .oberzeile) > :first-child > :not(.oberzeile) { grid-column: 2 / -1; grid-row: 1; }
  .abschnittskopf:has(> :first-child > .oberzeile) > :not(:first-child) { grid-column: 2 / -1; }
  .abschnittskopf:has(> :first-child > .oberzeile) > :is(a, button) { justify-self: end; }
  .abschnittskopf:has(> :first-child > .oberzeile) > .abschnittskopf__linie { grid-column: auto; grid-row: auto; }
}

/* Wortmaske (bausteine/bewegung.css, Abnahme Runde 3): Die Maske ließ unten nur 0,08 em Luft, die Unterlängen von g, p, y
   reichen in Playfair aber 0,25 em unter die Grundlinie (h1 „Leistungen“ gekappt). Jetzt 0,3 em Luft unten und 0,12 em
   oben (Umlautpunkte), beides mit negativem Rand, damit Zeilenabstand und Lage gleich bleiben. Der verdeckte Zustand
   schiebt das Wort dafür weiter (150 %), damit vor dem Auftritt nichts unter der Maske hervorschaut. */
.b-wort { padding-block: .12em .3em; margin-block: -.12em -.3em; }
.b-js [data-auftritt="maske"]:not(.ist-da) .b-wort > span { transform: translateY(150%); }
.b-js [data-auftritt="federn"]:not(.ist-da) .b-wort > span { transform: translateY(155%) rotate(6deg); }

/* ---------- Knöpfe, Pillen, Etiketten ---------- */
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 30px; border-radius: 999px;
  background: var(--akzent); color: var(--dominant); text-decoration: none; font-weight: 600; font-size: 17px;
  border: 0; cursor: pointer;
  transition: background-color .45s var(--kurve), transform .45s var(--kurve);
}
.knopf svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--kurve); }
.knopf:focus-visible { background: var(--akzent-tief); transform: rotate(-2deg) translateY(-2px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover { background: var(--akzent-tief); transform: rotate(-2deg) translateY(-2px); } }
.knopf:focus-visible svg { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) { .knopf:hover svg { transform: translateX(4px); } }
.knopf--klein { min-height: 46px; padding: 0 22px; font-size: 16px; }
/* Nebenknopf ohne Fläche, Rand in Schriftfarbe (auf Hell und auf Pflaume) */
.knopf--linie { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.knopf--linie:focus-visible { background: transparent; box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 0 2px var(--akzent); }
@media (hover: hover) and (pointer: fine) { .knopf--linie:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 0 2px var(--akzent); } }
.textknopf {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
  font-weight: 600; font-size: 17px;
}
.textknopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor;
  transform-origin: right; transition: transform .45s var(--kurve); }
.textknopf:focus-visible::after { transform: scaleX(.3); }
@media (hover: hover) and (pointer: fine) { .textknopf:hover::after { transform: scaleX(.3); } }
/* Radius 16 px statt 999 (Abnahme Runde 2): einzeilig bleibt die Pille eine Kapsel (Höhe bis 32 px), mehrzeilig wird sie
   ein gerundetes Rechteck, und der Text stößt nicht an die Rundung */
.pille { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 16px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pille--live { background: var(--akzent); color: var(--dominant); }
.pille--ruhig { box-shadow: inset 0 0 0 1.5px currentColor; }
.status-entwurf { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--leise); }
.status-entwurf::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .45em; border-radius: 50%; border: 1.5px solid currentColor; }
.flaeche--pflaume .status-entwurf { color: var(--leise-hell); }
.etikett { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  background: var(--akzent); color: var(--dominant); font-weight: 600; }

/* ---------- Kopfleiste D-103 als freistehende Kapsel (D-108, Wunsch Noah 02.10.2026) ----------
   Schwebt mit Luft zum Rand, eigener heller Grund mit Unschärfe (L-023: Deckkraft 86 %, blur), feiner Ring und
   ruhiger Schatten statt Glas. Nach dem Seitenkopf fest Pflaume (data-fest). Ersetzt den Schleier über Fotos. */
.kopf {
  position: fixed; top: var(--kopf-luft); left: var(--kopf-seite); right: var(--kopf-seite); z-index: 50;
  max-width: 1880px; margin-inline: auto; height: var(--kopf-leiste); padding: 0 10px; /* L-021: Knopf 22 px vom Rand */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 999px;
  color: var(--sekundaer); background-color: rgb(236 238 241 / .92);   /* Silber 92 % auf Weiß (PLAN.md 16.2) */
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 0 0 1px var(--linie), 0 2px 6px -2px rgb(17 18 20 / .1), 0 16px 34px -18px rgb(17 18 20 / .34);
  transition: transform .45s var(--kurve), background-color .45s var(--kurve), color .45s var(--kurve), box-shadow .45s var(--kurve), visibility 0s;
}
/* über einem Foto (Meta kopf:bild) etwas dichter, damit Gesicht und Fenstergitter nicht durchscheinen */
.kopf--ueber-bild:not([data-fest]):not([data-menue-offen]) { background-color: rgb(236 238 241 / .94); }
.kopf[data-fest] { background-color: var(--sekundaer); color: var(--dominant);
  box-shadow: 0 0 0 1px var(--sekundaer-linie), 0 2px 6px -2px rgb(17 18 20 / .2), 0 16px 34px -16px rgb(17 18 20 / .5); }
.kopf[data-menue-offen] { color: var(--dominant); background-color: var(--sekundaer-karte); box-shadow: 0 0 0 1px var(--sekundaer-linie); }
.kopf[data-fest] :focus-visible, .kopf[data-menue-offen] :focus-visible { outline-color: var(--dominant); }
/* A-212 Leiste blendet beim Runterscrollen aus (Baustein setzt data-richtung). Verborgen heißt unbedienbar. Gleiche Regel
   wie bausteine/bewegung.css, nur weiter: Luft oben und Schatten verschwinden mit, ein einziger Wert vor und nach data-fest. */
.kopf[data-leiste~="verstecken"][data-richtung="runter"]:not(:focus-within):not([data-menue-offen]) {
  transform: translateY(calc(-100% - var(--kopf-luft) - 24px)); visibility: hidden;
  transition: transform .45s var(--kurve), background-color .45s var(--kurve), color .45s var(--kurve), box-shadow .45s var(--kurve), visibility 0s linear .45s;
}
.kopf:not([data-fest]) { transform: none; }
.kopf__links { display: flex; align-items: center; gap: 12px; justify-self: start; }
.kopf__menue {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent;
  display: grid; place-content: center; gap: 6px; cursor: pointer; padding: 0;
  transition: background-color .45s var(--kurve);
}
.kopf__menue span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .5s var(--kurve), opacity .3s ease; }
.kopf__menue:focus-visible { background: var(--dominant-tief); }
@media (hover: hover) and (pointer: fine) { .kopf__menue:hover { background: var(--dominant-tief); } }
.kopf[data-fest] .kopf__menue:focus-visible, .kopf[data-menue-offen] .kopf__menue:focus-visible { background: var(--sekundaer-karte); }
@media (hover: hover) and (pointer: fine) { .kopf[data-fest] .kopf__menue:hover, .kopf[data-menue-offen] .kopf__menue:hover { background: var(--sekundaer-karte); } }
.kopf__menue:focus-visible span:first-child { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .kopf__menue:hover span:first-child { transform: translateX(3px); } }
.kopf__menue:focus-visible span:last-child { transform: translateX(-3px); }
@media (hover: hover) and (pointer: fine) { .kopf__menue:hover span:last-child { transform: translateX(-3px); } }
/* offen: zwei Striche werden ein Kreuz (Bau-Prompt leome Nr. 4) */
.kopf__menue[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.kopf__nav { display: none; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
/* Menüpunkte in Playfair Display wie das Vollbild-Menü: 17 px (ab 1320 px 19 px), normal; die aktive Seite kursiv auf einer Kapsel
   mit Koralle-Punkt (wie .menue__link[aria-current]). Hover und Fokus: leichte Kapsel, der Text rollt kursiv nach. */
.kopf__nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px;
  border-radius: 999px; text-decoration: none; font: 400 17px/1.3 var(--schrift-kopf); letter-spacing: .005em; white-space: nowrap;
  font-variant-ligatures: common-ligatures; transition: background-color .3s var(--kurve-blende); }
.kopf__nav a:focus-visible { border-radius: 999px; }
.kopf__nav a:focus-visible { background-color: rgb(17 18 20 / .07); }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover { background-color: rgb(17 18 20 / .07); } }
.kopf[data-fest] .kopf__nav a:focus-visible { background-color: var(--sekundaer-karte); }
@media (hover: hover) and (pointer: fine) { .kopf[data-fest] .kopf__nav a:hover { background-color: var(--sekundaer-karte); } }
/* A-105 rollen: Text rollt nach oben, die kursive Kopie kommt von unten */
.kopf__nav .rolle { position: relative; display: block; overflow: hidden; padding: 0 .12em; margin: 0 -.12em; }
.kopf__nav a span span { display: block; transition: transform .45s var(--kurve); }
.kopf__nav a span span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; font-style: italic; }
.kopf__nav a:focus-visible span span { transform: translateY(-100%); }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover span span { transform: translateY(-100%); } }
/* D-115 aktive Seite: Kapsel, kursiv, Koralle-Punkt davor */
.kopf__nav a[aria-current="page"] { background-color: var(--dominant-tief); font-style: italic; }
.kopf[data-fest] .kopf__nav a[aria-current="page"] { background-color: var(--sekundaer-karte); }
.kopf__nav a[aria-current="page"]::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
.kopf[data-menue-offen] .kopf__nav { visibility: hidden; }
.kopf__marke { justify-self: center; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font: 700 26px/1 var(--schrift-kopf); letter-spacing: -.01em; }
.kopf__marke svg { width: 34px; height: 30px; flex: none; }
.marke__rahmen { fill: var(--dominant-hell); stroke: var(--sekundaer); }
.marke__leiste { fill: var(--akzent); stroke: var(--sekundaer); }
.marke__auge { fill: var(--dominant-hell); stroke: var(--sekundaer); }
.marke__iris { fill: var(--sekundaer); }
.marke__pupille { fill: var(--akzent); }
.kopf[data-fest] .marke__rahmen, .kopf[data-menue-offen] .marke__rahmen { fill: var(--sekundaer-karte); stroke: var(--dominant); }
.kopf[data-fest] .marke__leiste, .kopf[data-menue-offen] .marke__leiste { stroke: var(--dominant); }
.kopf[data-fest] .marke__auge, .kopf[data-menue-offen] .marke__auge { stroke: var(--dominant); }
.kopf__pille {
  justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border-radius: 999px; background: var(--akzent); color: var(--dominant); text-decoration: none;
  font-weight: 600; font-size: 16px; transition: background-color .45s var(--kurve), transform .45s var(--kurve);
}
.kopf__pille:focus-visible { background: var(--akzent-tief); transform: rotate(-2deg); }
@media (hover: hover) and (pointer: fine) { .kopf__pille:hover { background: var(--akzent-tief); transform: rotate(-2deg); } }
.kopf__pille svg { display: none; width: 22px; height: 22px; }
.kopf__pille .kurz { display: none; }
.kopf__pille[aria-current="page"] { box-shadow: 0 0 0 2px currentColor; }
@media (min-width: 1160px) { .kopf__nav { display: block; } .kopf__nav a { padding: 0 11px; } }
@media (min-width: 1320px) { .kopf__nav a { padding: 0 15px; font-size: 19px; } }

/* ---------- Vollbild-Menü D-483 mit A-652 (Bau-Prompt leome Nr. 4) und Bildfenster A-307 ---------- */
.menue {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--sekundaer); color: var(--dominant);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); visibility: hidden;
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1), visibility 0s linear 1s;
}
.menue.ist-offen { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible;
  transition: clip-path 1s cubic-bezier(.9, 0, .1, 1), visibility 0s; }
.menue__innen {
  min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  gap: 32px 6vw; padding: calc(var(--kopf-hoehe) + 24px) var(--rand) 28px;
}
.menue__liste { list-style: none; margin: 0; padding: 0; align-self: center; }
.menue__link {
  display: flex; align-items: baseline; gap: 18px; padding: 2px 0; overflow: hidden; text-decoration: none;
  font: 400 clamp(34px, calc(2.5vw + 2.5vh), 72px)/1.12 var(--schrift-kopf); letter-spacing: -.04em;
  transition: opacity .5s ease;
}
.menue__link > span { display: inline-block; transform: translateY(105%) rotate(5deg); transform-origin: left bottom;
  transition: transform .75s cubic-bezier(.7, 0, .3, 1); transition-delay: calc((5 - var(--i, 0)) * 50ms); }
.menue.ist-offen .menue__link > span { transform: none; transition-delay: calc(300ms + var(--i, 0) * 50ms); }
.menue__nr { font: 600 15px/1 var(--schrift-text); letter-spacing: .08em; color: var(--akzent-hell); }
.menue__link[aria-current="page"] .menue__wort { font-style: italic; }
.menue__link[aria-current="page"] .menue__wort::after { content: ""; display: inline-block; width: .16em; height: .16em; margin-left: .18em;
  border-radius: 50%; background: var(--akzent); vertical-align: .1em; }
/* Abnahme Runde 2 (03.10.2026): gedimmt .4 statt .15, Weiß auf Schwarz bleibt so bei 3,8 : 1 (vorher 1,5 : 1).
   Runde 3: nur das Wort wird durchsichtig; die Nummer bekommt eine eigene gedimmte Farbe (Kobalt hell 65 % auf Schwarz,
   3,7 : 1), mit .4 Deckkraft lag sie bei 2,16 : 1. */
@media (hover: hover) and (pointer: fine) { .menue__liste:has(.menue__link:hover) .menue__link:not(:hover) .menue__wort { opacity: .4; } }
/* Abnahme Runde 4: gedimmte Nummer 80 % Kobalt hell auf Schwarz, 5,0 : 1 (vorher 65 %, 3,74 : 1; Soll 4,5 bei 15 px) */
@media (hover: hover) and (pointer: fine) { .menue__liste:has(.menue__link:hover) .menue__link:not(:hover) .menue__nr { color: color-mix(in srgb, var(--akzent-hell) 80%, var(--sekundaer)); } }
.menue__fenster { display: none; }
.menue__schluss { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: space-between;
  padding-top: 20px; border-top: 1.5px solid var(--sekundaer-linie); font-size: 17px; }
.menue__schluss a { font-weight: 600; text-underline-offset: 4px; }
.menue__schluss span { color: var(--leise-hell); }
@media (min-width: 1024px) {
  .menue__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .menue__schluss { grid-column: 1 / -1; }
  .menue__fenster { display: block; align-self: center; }
  .menue__fenster .fenster { border-color: var(--dominant); }
  .menue__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;
    opacity: 0; transition: opacity .5s var(--kurve-blende); }
  .menue__bild.ist-aktiv { opacity: 1; }
}
@media (max-width: 479px) { .menue__schluss { flex-direction: column; align-items: flex-start; } }
/* ohne JavaScript bleibt das Menü zu, die Seitenliste steht im Fuß */
html:not(.js) .kopf__menue { visibility: hidden; }

/* ---------- Startseite: Seitenkopf mit Hero und Datenzeile ---------- */
.start-kopf { position: relative; }
.hero {
  position: relative; min-height: 86vh; overflow-x: clip;
  /* Textspalte wächst mit der Breite (Runde 2, Befund 2): 32vw, mindestens 330, höchstens 480 px. Rand, Lücke und
     Handyspalte wachsen ebenfalls mit vw, das Fenster bleibt so zweispaltig überall rund 1,4-mal so breit wie die
     Textspalte (vorher fest 400 px bis 1240 px, dort war das Fenster kaum breiter als der Text). */
  /* 16.3 (03.10.2026): drei Spalten Foto, Text, Diashow. Das Foto läuft bündig an den linken Bildschirmrand, darum
     ohne linken Rand; Foto zu Text 24 px, Text zu Fenster --luecke. Ab 1280 Foto 17vw, darunter 15vw. */
  /* Nachbesserung 03.10.2026 (Noah: „ETWAS GRÖßER ES HÄNGT SO IN DER LUFT“): Foto 19vw (bis 340 px), höchstens so hoch,
     dass es von der Datenzeile bis unter die Kopfleiste reicht; Textspalte 26,8vw statt 28vw, damit das Fenster bei
     1440 px mindestens 540 px breit bleibt. Ab 1024 bis 1279 px 16vw (Fenster bei 1024 mindestens 380 px). */
  --hero-unten: 28px;
  --foto-b: min(clamp(150px, 19vw, 340px), calc((86vh - 120px) * .435));
  display: grid; column-gap: 0; align-items: center; padding: 108px 0 var(--hero-unten);
  grid-template-columns: var(--foto-b) 24px minmax(0, clamp(300px, 26.8vw, 440px)) var(--luecke) minmax(0, 1fr);
}
.hero__foto { grid-column: 1; grid-row: 1; }
.hero__text { grid-column: 3; grid-row: 1; padding-bottom: 24px; }
.hero > .diashow { grid-column: 5; grid-row: 1; }
/* Noahs Foto (L-044): fester Zuschnitt 87 : 200, kein Filter, keine Bewegung, liegt nie hinter Inhalten. Geerdet
   (03.10.2026): der Fuß sitzt bündig auf der Datenzeile (ab 1024 px) bzw. auf der Unterkante der Textzeile (darunter).
   Weich ins Weiß: oben 0 bis 16 % (vorher 6 %, die Kante wirkte hart), rechts ab 80 %, unten ab 88 %. Das Gesicht
   (x 40 bis 72 %, y 22 bis 40 %) bleibt deckend. */
.hero__foto { margin: 0 0 calc(-1 * var(--hero-unten)); align-self: end; }
.hero__foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 87 / 200; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 7%, #000 16%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 80%, transparent 100%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 7%, #000 16%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
@media (min-width: 1024px) and (max-width: 1279px) { .hero { --foto-b: min(16vw, calc((86vh - 120px) * .435)); } }
/* Textspalte (Befund 7): der Name groß als Teil der Marke, die Koralle-Linie führt von ihm zum Fenster.
   Keine Oberzeile, kein markiertes Kursivwort, ein Knopf und ein Textknopf. */
.titel { margin: 0; font-weight: 700; }
.titel__name { display: block; font: 700 clamp(46px, 5.2vw, 76px)/.98 var(--schrift-kopf); letter-spacing: -.02em; }
.titel__vorname { display: block; }
.titel__nachname { display: flex; align-items: center; }
.titel__nachname::after {
  content: ""; flex: 1 1 auto; min-width: 48px; height: 8px; margin: .08em calc(-1 * var(--luecke)) 0 .32em;
  border-radius: 4px 0 0 4px; background: var(--akzent);
}
.titel__fach { display: block; margin-top: 18px; font: italic 400 clamp(24px, 2.3vw, 34px)/1.2 var(--schrift-kopf); letter-spacing: -.005em; }
.hero__satz { margin: 22px 0 0; max-width: 25em; font-size: 19px; line-height: 1.55; }
.hero__satz em { font-style: italic; }

/* ---------- Diashow im Markenfenster ---------- */
.diashow { position: relative; min-width: 0; container: diashow / inline-size; }
.diashow:focus-visible { outline-offset: 6px; }
/* Raster der Diashow (Befunde 1 bis 3): Fenster links, Handy in einer eigenen Spalte rechts daneben. Das Handy ragt
   nur --handy-ueber über den rechten Fensterrahmen, nie über das Bild (Folie 2 hat ihren Namen über die volle Breite)
   und steht --handy-tief unter dem Fenster. Bildzeile und Linien stehen unter dem Fenster, nie unter dem Handy. */
.diashow__raster {
  --handy-b: clamp(84px, 9vw, 136px);
  --handy-ueber: 2px;                       /* nur über den Rahmen (2,5 px), nie über das Bild */
  --handy-rand: clamp(16px, 1.7vw, 24px);
  --handy-tief: 40px;
  --handy-sx: 16px;
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) calc(var(--handy-b) - var(--handy-ueber) + var(--handy-rand));
  grid-template-areas: "buehne handy" "bild ." "steuer .";
}
.diashow__buehne { grid-area: buehne; position: relative; z-index: 1; }
.fenster-ort { position: relative; }
/* D-443 harter Versatzschatten in Kobalt. Abnahme Runde 5 (04.10.2026, L-046, Noah: „Überall schmaler“): an jedem
   Fenster, Handy, Porträt, jeder Karte und Abschluss-Karte EIN Maß, höchstens 20 px und rund 6 % der Breite des
   Fensters, kleine Fenster also weniger. Der Versatz steht als Außenabstand, nicht als transform: Prozent beim
   Außenabstand beziehen sich immer auf die Breite des umgebenden Orts (.fenster-ort, .karte-ort …), oben wie seitlich.
   Keine Seite setzt einen eigenen Versatz. */
:root { --schatten-max: 20px; --schatten-anteil: 6%;
  /* Platz für den Schatten links unten am Ort oder seinem Rahmen: dasselbe Maß, Prozent hier von der Breite des Rahmens */
  --schatten-platz: min(var(--schatten-max), var(--schatten-anteil)); }
@media (max-width: 599px) { :root { --schatten-max: 12px; } }   /* Handy: schmale Fenster, schmale Kante */
.fenster__schatten, .handy__schatten, .person__schatten, .abschluss__schatten, .karte__schatten, .partner-handy__schatten {
  --schatten: min(var(--schatten-max), var(--schatten-anteil));
  margin: var(--schatten) var(--schatten) calc(-1 * var(--schatten)) calc(-1 * var(--schatten)); }
.fenster__schatten, .handy__schatten { position: absolute; inset: 0; background: var(--akzent); }
.fenster__schatten { border-radius: 14px; }
.fenster {
  position: relative; background: var(--dominant-hell);
  border: 2.5px solid var(--sekundaer); border-radius: 14px; overflow: hidden;
  container: fenster / inline-size;
}
.fenster__leiste {
  --auge-lid: var(--akzent);
  display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 14px 0 16px;
  background: var(--akzent); border-bottom: 2.5px solid var(--sekundaer);
}
.fenster__auge { width: 40px; height: 24px; flex: none; overflow: visible; }
#auge-lid-oben, #auge-lid-unten { transition: transform .5s var(--kurve); }
#auge-lid.ist-offen #auge-lid-oben { transform: translateY(-18px); }
#auge-lid.ist-offen #auge-lid-unten { transform: translateY(14px); }
.fenster__adresse {
  display: grid; flex: 0 1 300px; min-width: 0; height: 28px; align-items: center;
  padding: 0 14px; border-radius: 999px; background: var(--dominant-hell); border: 1.5px solid var(--sekundaer);
  font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--sekundaer);
}
.adresse { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.adresse.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .45s ease .35s, visibility 0s; }
.fenster__pause {
  position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 32px;
  padding: 0 12px 0 0; border: 0; background: transparent; cursor: pointer; color: var(--dominant);   /* Weiß auf der Kobalt-Leiste (5,30) */
  font-weight: 600; font-size: 14px; display: none;
}
.js .fenster__pause { display: inline-flex; }
.fenster__pause::before { content: ""; position: absolute; inset: -6px -6px -6px -6px; } /* Klickfläche ≥ 44 px */
.pause__kreis {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sekundaer); color: var(--dominant);
  display: grid; place-items: center; transition: color .45s var(--kurve);
}
.pause__kreis svg { width: 14px; height: 14px; }
/* Befund 5: der sichtbare Text („Pause“ oder „Weiter“) ist der zugängliche Name, ergänzt um „Diashow“ für
   Bildschirmleser. Kein aria-pressed, weil die Beschriftung mit dem Zustand wechselt. */
.pause__kreis .symbol-weiter { display: none; }
.fenster__pause[data-angehalten="true"] .symbol-halt { display: none; }
.fenster__pause[data-angehalten="true"] .symbol-weiter { display: block; }
.fenster__pause:focus-visible .pause__kreis { color: var(--akzent-hell); }
@media (hover: hover) and (pointer: fine) { .fenster__pause:hover .pause__kreis { color: var(--akzent-hell); } }
.pause__text .text-weiter { display: none; }
.fenster__pause[data-angehalten="true"] .text-halt { display: none; }
.fenster__pause[data-angehalten="true"] .text-weiter { display: inline; }

.fenster__inhalt { position: relative; aspect-ratio: 16 / 10; background: var(--dominant-hell); }
.fenster__inhalt > img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.folie { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.folie img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.folie.ist-aktiv { opacity: 1; visibility: visible; z-index: 2; transition: opacity var(--ueb) var(--kurve-blende); }
.folie.ist-vorher { opacity: 1; visibility: visible; z-index: 1; }
/* KI-Hinweis (Runde 2, Befund 1): in der Fensterleiste direkt neben der Adresse, nie auf dem Bild. Auf dem Bild
   lag er bei Folie 8 über dem Schriftzug „NOTHNAGEL“ im Film der gezeigten Seite. Je Folie ein Element, leer bei
   Folien ohne KI-Inhalt (dann nicht angezeigt, die Adresse behält ihre Breite). Ist das Fenster schmaler als
   640 px, steht die Kurzform („KI-Film“, „KI-bearbeitet“), die Langform bleibt für Bildschirmleser im alt-Text. */
.fenster__ki {
  display: none; flex: none; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--sekundaer); color: var(--dominant); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.fenster__ki.ist-aktiv:not(:empty) { display: inline-flex; animation: ki-ein .45s ease .35s both; }
@keyframes ki-ein { from { opacity: 0; } to { opacity: 1; } }
.fenster__ki .kurz { display: none; }
@container fenster (max-width: 639px) {
  .fenster__ki .lang { display: none; }
  .fenster__ki .kurz { display: inline; }
}
/* Sehr schmale Fenster (Abnahme Runde 3, L-045): passt der Hinweis nicht mehr neben die Adresse, rückt er in eine
   zweite Zeile der Leiste und darf selbst umbrechen; er wird nie vom Fensterrand abgeschnitten. */
@container fenster (max-width: 380px) {
  .fenster__leiste:has(> .fenster__ki.ist-aktiv:not(:empty)) { flex-wrap: wrap; height: auto; min-height: 44px; padding-block: 8px; row-gap: 6px; }
  .fenster__ki { max-width: 100%; height: auto; min-height: 24px; padding: 4px 10px; border-radius: 12px; line-height: 1.2; white-space: normal; }
}

/* Handyansicht D-009: steht neben dem Fenster. Sein Schatten liegt hinter dem Fenster (z-index 0 gegen 1),
   über dem Bild liegt also nur der Rand des Handys. */
.handy-ort { grid-area: handy; position: relative; align-self: end; width: var(--handy-b);
  margin: 0 0 calc(-1 * var(--handy-tief)) calc(-1 * var(--handy-ueber)); }
.handy__schatten { z-index: 0; border-radius: 22px; }
.handy {
  position: relative; z-index: 2; aspect-ratio: 780 / 1688; padding: 6px; border-radius: 22px; background: var(--sekundaer);
}
.handy__leiste { position: absolute; z-index: 3; inset: 0 0 auto 0; height: 14px; background: var(--akzent);
  border-bottom: 1.5px solid var(--sekundaer); }
.handy__schirm { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: var(--dominant-hell); }
.handy__bild { position: absolute; inset: 14px 0 0 0; width: 100%; height: calc(100% - 14px); object-fit: cover; object-position: top;
  opacity: 0; visibility: hidden; }
.handy__bild.ist-aktiv { opacity: 1; visibility: visible; z-index: 2; transition: opacity var(--ueb) var(--kurve-blende); }
.handy__bild.ist-vorher { opacity: 1; visibility: visible; z-index: 1; }

/* Steuerung: Linien A-515 und Zähler */
/* Linien stehen unter dem Fenster in der Spalte des Fensters, nie unter dem Handy (Befund 1). Reicht die Breite
   nicht für Linien und Zähler, entfällt der Zähler (Container-Abfrage), die zwölf Linien bleiben. */
.steuerung { grid-area: steuer; display: none; align-items: center; justify-content: flex-start; gap: 10px; min-height: 40px;
  margin-top: 8px; container: steuerung / inline-size; }
.js .steuerung { display: flex; }
.punkte { list-style: none; margin: 0; padding: 0; display: flex; }
.punkt {
  position: relative; display: block; width: 24px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.punkt__spur { position: absolute; left: 3px; right: 3px; top: 14px; height: 3px; border-radius: 2px; background: var(--leise); overflow: hidden; }
.punkt.ist-aktiv .punkt__spur { background: var(--sekundaer); }
.punkt__fuellung { position: absolute; inset: 0; background: var(--akzent); transform: scaleX(0); transform-origin: left center; }
.punkt.ist-aktiv .punkt__fuellung { animation: fuellen var(--stand) linear forwards; }
.diashow[data-halt] .punkt.ist-aktiv .punkt__fuellung { animation-play-state: paused; }
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.punkt__marke { position: absolute; left: 50%; top: 23px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--sekundaer); opacity: 0; transform: translateY(6px); transition: transform .6s var(--kurve), opacity .3s ease; }
.punkt.ist-aktiv .punkt__marke { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .punkt:hover .punkt__spur { background: var(--sekundaer); } }
.zaehler { margin: 0; white-space: nowrap; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--leise); }
.zaehler b { color: var(--sekundaer); font-weight: 600; }
@container steuerung (max-width: 349px) { .zaehler { display: none; } }

/* Bildzeile in der Spalte des Fensters: das Handy steht nie über ihr, auch ohne JavaScript (Befund 2) */
.bildzeile { grid-area: bild; display: grid; margin-top: 34px; padding-right: calc(var(--handy-sx) + 16px); }
.bildtext { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.bildtext.ist-aktiv { opacity: 1; visibility: visible; transition: opacity .45s ease .35s, visibility 0s; }
.bildtext__name { margin: 0; font: 700 clamp(22px, 1.9vw, 26px)/1.2 var(--schrift-kopf); letter-spacing: -.005em; }
.bildtext__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; font-size: 16px; color: var(--leise); }
/* Pille „live“ und Link bleiben in einer Zeile, sonst überdeckt der umbrochene Link die Pille (Vorprüfung 320 px) */
.bildtext__status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bildtext__status .status-entwurf { white-space: normal; }
.bildtext a { color: var(--akzent-tief); font-weight: 600; text-underline-offset: 3px; }
.bildtext a:focus-visible { color: var(--sekundaer); }
@media (hover: hover) and (pointer: fine) { .bildtext a:hover { color: var(--sekundaer); } }

/* ---------- Datenzeile D-029 über die volle Breite (PLAN.md Abschnitte 4 und 7) ----------
   Pfirsichhell tief, Rauten in Koralle als Trenner, oben und unten je eine Koralle-Linie 6 px, Schrift Pflaume. */
.datenzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 14px var(--rand);
  background: var(--dominant-tief); color: var(--sekundaer); list-style: none; font-size: 16px;
  border-block: 6px solid var(--akzent);
}
.datenzeile li { display: inline-flex; align-items: center; }
.datenzeile li + li::before { content: ""; flex: none; width: 10px; height: 10px; margin: 0 22px; border-radius: 2px; background: var(--akzent); transform: rotate(45deg); }
.datenzeile a { font-weight: 600; text-decoration-color: var(--akzent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.datenzeile a:focus-visible { text-decoration-color: var(--sekundaer); }
@media (hover: hover) and (pointer: fine) { .datenzeile a:hover { text-decoration-color: var(--sekundaer); } }
.datenzeile--unten { margin-top: 0; }   /* am Ende eines Abschnitts, sieht aus wie die Datenzeile */

/* ---------- Kleine Fenster (Projektkarten, Zeitleiste, Seitenköpfe) ---------- */
.fenster--klein { border-radius: 12px; }
/* Fensterleisten 44 px (L-018, Nachbesserung 02.10.2026). Die Adresse ist eine Pille von mindestens 24 px Höhe in
   einer Zeile: zu lange Adressen enden mit …, nie ein Umbruch im Wort (Befund ueber-mich, leistungen, Runde 1). */
.fenster__adresse > span:not(.fenster__punkt) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster--klein .fenster__leiste { height: 44px; gap: 10px; padding: 0 10px 0 12px; }
.fenster--klein .fenster__auge { width: 32px; height: 20px; }
.fenster--klein .fenster__adresse { flex: 1 1 auto; height: 26px; padding: 0 10px; font-size: 13px; }
.fenster--klein .fenster__ki { height: 22px; padding: 0 8px; }
.fenster--klein .fenster__inhalt img, .fenster__bild { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.fenster--mini { border-width: 2px; border-radius: 10px; }
.fenster--mini .fenster__leiste { height: 44px; gap: 8px; padding: 0 9px; border-bottom-width: 2px; }
.fenster--mini .fenster__auge { width: 28px; height: 17px; }
.fenster--mini .fenster__adresse { flex: 1 1 auto; height: 24px; padding: 0 9px; border-width: 1.5px; font-size: 13px; }
.fenster__punkt { width: 54%; height: 8px; border-radius: 4px; background: var(--dominant-hell); border: 1px solid var(--sekundaer); }
/* Adresse, die auch in der Kurzform nicht in die Pille passt (seite.js, Abnahme Runde 4): kein … */
.adresse--punkt { display: flex; align-items: center; text-overflow: clip; }
/* Abnahme Runde 5: statt eines leeren Platzhalterbalkens keine Pille; der Wortlaut bleibt für Bildschirmleser (nur-sr) */
.fenster__adresse:has(> .adresse--punkt) { border-color: transparent; background: transparent; color: var(--dominant); }   /* Wortlaut nur für Bildschirmleser, Weiß auf Kobalt */
.flaeche--pflaume .fenster { border-color: var(--dominant); }
.flaeche--pflaume .fenster__leiste { border-bottom-color: var(--dominant); }
/* Versatzschatten D-443 an kleinen Fenstern (Stellschraube PLAN.md Abschnitt 4) */
.fenster-ort--klein > .fenster__schatten { border-radius: 12px; }
.fenster-ort--mini > .fenster__schatten { border-radius: 10px; }

/* ---------- Startseite 2: Arbeiten-Band (D-516 mit D-024, A-659, A-660; Bau-Prompt pinterest Nr. 2) ---------- */
.band { position: relative; overflow-x: clip; }
/* klebt unter der Kopfleiste (top), darum oben nur der knappe Abstand nach dem Verlauf (L-016) */
.band__buehne {
  position: sticky; top: var(--kopf-hoehe); min-height: 60vh; display: grid; align-content: center; gap: 24px;
  padding: var(--abschnitt) var(--rand) 40px;   /* Innenrand des Blatts oben und seitlich (Abnahme Runde 2: --rand statt --rand-schmal) */
}
.band__titel {
  font: italic 400 clamp(96px, 23vw, 360px)/.86 var(--schrift-kopf); letter-spacing: -.045em; margin-left: -.03em;
  white-space: nowrap; color: var(--dominant);
}
.band__text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; max-width: 100%; order: -1; }
.band__text p { max-width: 30em; font-size: 20px; line-height: 1.5; }
.band__reihe {
  position: relative; z-index: 2; list-style: none; margin: -24vh 0 0; padding: 0 var(--rand) var(--abschnitt-unten);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); align-items: start;
}
.band__reihe > li:nth-child(1) { --dreh: 10deg; }
.band__reihe > li:nth-child(2) { --dreh: 15deg; margin-top: 40px; }
.band__reihe > li:nth-child(3) { --dreh: -20deg; }
.band__reihe > li:nth-child(4) { --dreh: -5deg; margin-top: 40px; }
/* Projektkarte: Markenfenster mit Bildschirmfoto, Name, Branche, Leitmotiv, Status */
.projektkarte { position: relative; display: grid; gap: 14px; padding: 12px 12px 26px; border-radius: 16px; background: var(--sekundaer-karte);
  color: var(--dominant); transform-origin: 50% 50%; }
.projektkarte__kante { position: absolute; left: 18px; right: 18px; bottom: 0; height: 8px; border-radius: 4px 4px 0 0; background: var(--akzent); }
.projektkarte .fenster { border-color: var(--sekundaer); }
.projektkarte .fenster__leiste { height: 44px; border-bottom-color: var(--sekundaer); }
.projektkarte .fenster-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.projektkarte__text { display: grid; gap: 6px; padding: 0 6px; }
.projektkarte__name { font: 700 clamp(22px, 1.7vw, 26px)/1.15 var(--schrift-kopf); letter-spacing: -.01em; }
.projektkarte__art { font-size: 16px; color: var(--leise-hell); }
.projektkarte__motiv { font-size: 16px; line-height: 1.45; }
.projektkarte__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; font-size: 16px; }
.projektkarte__status a { color: var(--akzent-hell); font-weight: 600; text-underline-offset: 3px; }
.projektkarte__status .status-entwurf { color: var(--leise-hell); }
/* Livebau ohne freigegebene Arbeit: Hinweis statt leerer Liste (zusammenbauen.mjs, Marke keine-arbeit) */
.hinweis-leer { grid-column: 1 / -1; max-width: 40em; padding: 22px 26px; border: 1.5px dashed currentColor; border-radius: 16px;
  list-style: none; font-size: 18px; line-height: 1.5; }

/* ---------- Startseite 3: Arbeitsweise als Zeitleiste D-119 (A-216 kritzel, A-235) ---------- */
.zeitleiste { position: relative; }
.zeitleiste__linie { position: absolute; z-index: 2; left: calc(-1 * var(--spur, var(--rand-schmal))); right: auto; top: 40px;
  width: calc(100% + 2 * var(--spur, var(--rand-schmal))); height: 12px; overflow: visible; pointer-events: none; }
.zeitleiste__linie path { fill: none; stroke: var(--akzent); stroke-width: 6; stroke-linecap: round; }
.zeitleiste__schritte { position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px clamp(16px, 1.6vw, 24px); }
.schritt { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; align-content: start;
  padding: 14px 14px 18px 20px; border-radius: 14px; background: var(--dominant-hell); }
.schritt__kante { position: absolute; left: 0; top: 14px; bottom: 14px; width: 8px; border-radius: 0 3px 3px 0; background: var(--akzent); }
.schritt__marke {
  position: relative; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px;
  background: var(--dominant-tief); box-shadow: inset 0 0 0 3px var(--akzent);
  font: 700 26px/1 var(--schrift-kopf); color: var(--sekundaer); font-variant-numeric: lining-nums;
  transition: background-color .5s var(--kurve) calc(var(--i, 0) * .26s + .2s), color .5s var(--kurve) calc(var(--i, 0) * .26s + .2s);
}
/* Stufenmarke füllt sich, wenn die Linie sie erreicht (die Linie zeichnet sich in 1,8 s über sechs Spalten) */
.zeitleiste:has(.zeitleiste__linie.ist-da) .schritt__marke,
html:not(.b-js) .schritt__marke { background: var(--akzent); color: var(--dominant); }
.schritt__titel { font: 600 21px/1.3 var(--schrift-text); }
.schritt__text { font-size: 16px; line-height: 1.5; }
.schritt__bild { margin: 6px 0 12px 12px; }
.schritt__bild figcaption { margin-top: 18px; font-size: 15px; line-height: 1.4; color: var(--leise); }
/* Planblatt im Fenster: Farbrollen und Schriftpaar aus PLAN.md Abschnitt 4 als echtes Zwischenergebnis */
.planblatt { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto; }
.planblatt__farbe { display: flex; align-items: flex-end; padding: 6px; font-size: 12px; font-weight: 600; line-height: 1.1; }
.planblatt__farbe:nth-child(1) { background: var(--dominant-hauch); color: var(--sekundaer); }   /* zeigt PLAN.md 16.1: Silber #eceef1 */
.planblatt__farbe:nth-child(2) { background: var(--sekundaer); color: var(--dominant); }
/* Abnahme Runde 5 (L-015, L-046): Kobalt als kleines Farbmuster statt als ganze Spalte (vorher 208 × 363 px Fläche) */
.planblatt__farbe:nth-child(3) { background: var(--dominant-hell); color: var(--sekundaer); flex-direction: column; align-items: flex-start;
  justify-content: flex-end; gap: 6px; }
.planblatt__farbe:nth-child(3)::before { content: ""; flex: none; width: min(48px, 45%); aspect-ratio: 1; border-radius: 4px; background: var(--akzent); }
.planblatt__schrift { grid-column: 1 / -1; padding: 5px 8px; background: var(--dominant-hell); border-top: 1px solid var(--sekundaer);
  font: 400 14px/1.2 var(--schrift-kopf); }
.planblatt__schrift span { font-family: var(--schrift-text); }
/* Text im Mini-Fenster wird nie angeschnitten (Abnahme Runde 3, L-045): Planblatt und Protokoll stehen im Fluss, das
   Fenster behält 16 : 10 als Mindesthöhe und wächst mit dem Text; unter 220 px Fensterbreite stehen die drei Farben
   untereinander, damit „#455ce9“ ganz lesbar bleibt. */
.fenster__inhalt:has(> .planblatt, > .protokoll) { display: grid; container-type: inline-size; }
.fenster__inhalt > :is(.planblatt, .protokoll) { position: relative; inset: auto; }
@container (max-width: 220px) {
  .planblatt { grid-template-columns: 1fr; grid-template-rows: none; }
  .planblatt__farbe { padding: 4px 8px; }
  .planblatt__farbe:nth-child(3) { flex-direction: row; align-items: center; }
  .planblatt__farbe:nth-child(3)::before { width: 14px; }
  ol.protokoll > li { display: block; }
  ol.protokoll time { margin-right: .3em; }
  .protokoll { hyphens: auto; overflow-wrap: break-word; }
}
/* In der Zeitleiste stehen sechs Fenster nebeneinander: unter 220 px Fensterbreite sind alle quadratisch, damit Planblatt
   und Protokoll ohne Schnitt hineinpassen und die Reihe gleich hoch bleibt. */
@container fenster (max-width: 220px) {
  .zeitleiste .fenster__inhalt { aspect-ratio: 1 / 1; }
}
/* Protokoll im Fenster: echte Änderungen an dieser Website (git-Protokoll) */
.protokoll { position: absolute; inset: 0; list-style: none; margin: 0; padding: 8px 10px; display: grid; align-content: start; gap: 6px;
  font-size: 12px; line-height: 1.3; }
.protokoll li { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--dominant-tief); }
.protokoll time { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--akzent-tief); }

/* ---------- Startseite 4: Person mit Haltungssatz D-467, Zeile D-421 und Farbwand D-332 ---------- */
.person { display: grid; grid-template-columns: minmax(0, clamp(220px, 21vw, 330px)) minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 3.6vw, 56px); align-items: start; }
.person__bild { margin: 0 0 var(--schatten-platz) var(--schatten-platz); position: relative; }
.person__schatten { position: absolute; inset: 0; border-radius: 14px; background: var(--akzent); }
/* L-031: auf der Startseite das ganze Foto (noah-voll, Scheitel bei 22 % der Bildhöhe) unten angelegt, so bleiben im
   4:5-Ausschnitt rund 8 % Luft über dem Scheitel. Bei den 4:5-Zuschnitten (noah-480 …) wirkt die Lage nicht. */
.person__bild img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 100%; border-radius: 14px;
  border: 2.5px solid var(--sekundaer); }
.person__zeile { font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.person__zeile b { color: var(--akzent-tief); font-weight: 600; }
.person__text { display: grid; gap: 20px; align-content: start; }
.haltung { margin: 6px 0 0; padding: 18px 0 0; border-top: 4px solid var(--akzent); }
.haltung p { font: italic 400 clamp(26px, 2.4vw, 34px)/1.25 var(--schrift-kopf); }
.haltung footer { margin-top: 10px; font-size: 15px; color: var(--leise); }
.farbwand__titel { font: 700 clamp(28px, 2.4vw, 34px)/1.1 var(--schrift-kopf); margin-bottom: 18px; }
.farbwand__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.farbfeld { display: grid; gap: 6px; }
.farbfeld__fenster { display: grid; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--sekundaer); }
.farbfeld__leiste { height: 16px; background: var(--akzent); border-bottom: 1.5px solid var(--sekundaer); }
.farbfeld__farben { display: grid; grid-template-columns: 1.2fr 1fr .6fr; height: 32px; }
.farbfeld__farben i { background: var(--f); }
.farbfeld__schrift { font-size: 13px; line-height: 1.3; color: var(--leise); }
.farbfeld__name { font-size: 15px; font-weight: 600; line-height: 1.25; }

/* ---------- Abschluss D-447 als Karte (D-021) mit Linien-Ornament ---------- */
.abschluss-ort { position: relative; margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
.abschluss__schatten { position: absolute; inset: 0; border-radius: 20px; background: var(--akzent); }
.abschluss {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px clamp(28px, 4vw, 64px);
  padding: clamp(28px, 4vw, 64px); border-radius: 20px; background: var(--dominant-hell); border: 2.5px solid var(--sekundaer); overflow: hidden;
}
.abschluss__ornament { display: block; width: min(100%, 420px); height: auto; margin-top: 4px; overflow: visible; pointer-events: none; }
.abschluss__ornament path { fill: none; stroke: var(--akzent); stroke-width: 6; stroke-linecap: round; }
.abschluss__text { position: relative; display: grid; gap: 22px; align-content: start; }
.abschluss__titel { font-size: clamp(40px, 5.4vw, 84px); line-height: 1; letter-spacing: -.03em; }
.abschluss__kontakt { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 17px; }
.abschluss__kontakt a { font-weight: 600; text-underline-offset: 4px; }
.abschluss__seite { position: relative; display: grid; gap: 22px; align-content: start; }
.abschluss__schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: schritt; }
.abschluss__schritte li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: baseline; font-size: 16px; line-height: 1.45; }
.abschluss__schritte li::before { counter-increment: schritt; content: counter(schritt); display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px; background: var(--akzent); color: var(--dominant); font: 700 17px/1 var(--schrift-kopf); align-self: start; }
.abschluss__schritte b { display: block; font-weight: 600; }
.fenster--auge .fenster__inhalt { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.fenster--auge .fenster__inhalt svg { width: 46%; height: auto; }

/* ---------- Auftritt für Blöcke mit Versatzschatten (data-ein, seite.js) ----------
   bausteine/bewegung.css setzt in der ruhigen Fassung transform an allen Nachkommen von [data-auftritt] auf none
   (mit !important) und legte so die Versatzschatten hinter Fenster und Porträt. Darum für solche Blöcke die Klasse
   auftritt mit data-ein: bewegt wird nur das äußere Element (aus seite-partner.css, Bauer B1, übernommen). */
.js .auftritt { transition: opacity .7s var(--kurve), transform .7s var(--kurve); transition-delay: calc(var(--i, 0) * 70ms); }
.js .auftritt:not(.ist-da) { opacity: 0; transform: translateY(24px); }
/* An den Scrollweg gekoppelt (L-034, Nachbesserung 02.10.2026): wo der Browser animation-timeline kann, setzt
   seite.js die Klasse scroll-zeit an <html>. Blöcke, die beim Laden schon im Bild stehen (ist-sofort), treten wie
   bisher einmal auf; alle übrigen folgen dem Scrollweg, ohne Sprung. Seit dem Audit vom 05.11.2026 nur noch über den Weg, ohne Deckkraft: der Start mit .45 senkte die Schrift unter 4,5 : 1 (axe color-contrast auf /leistungen), schon .9 reichte für Weiß auf Kobalt nicht. */
@keyframes auftritt-weg { from { transform: translateY(32px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scroll-zeit .auftritt:not(.ist-sofort) { opacity: 1; transform: none; transition: none;
      animation: auftritt-weg linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

/* ---------- Seitenkopf der Unterseiten (D-024, D-469, D-459) ---------- */
.seitenkopf { --seitenkopf-unten: 16px;   /* danach Verlauf und --nach-verlauf: 16 + 76 + 16 (L-016) */
  position: relative; padding: calc(var(--kopf-hoehe) + clamp(24px, 4vw, 56px)) var(--rand-schmal) var(--seitenkopf-unten); }
/* Datenzeile als letztes Kind des Seitenkopfs liegt bündig auf seiner Unterkante (auch datenzeile--seitenkopf) */
.seitenkopf > .datenzeile:last-child { margin-bottom: calc(-1 * var(--seitenkopf-unten)); }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px clamp(28px, 4vw, 64px); align-items: end;
  margin-top: clamp(20px, 2.4vw, 36px); padding-inline: calc(var(--rand) - var(--rand-schmal)); }
.seitenkopf__text { display: grid; gap: 22px; align-content: start; }
.seitenkopf__bild { position: relative; margin: 0; }

/* ---------- Bausteine für Unterseiten ---------- */
.raster { display: grid; gap: clamp(16px, 2vw, 28px); margin-block: 0; }   /* ohne die 1em einer Liste (L-016) */
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* D-014 versetzte Spalten: jede zweite Karte rückt nach unten (ab 768 px) */
@media (min-width: 768px) { .raster--versetzt > :nth-child(2n) { margin-top: clamp(40px, 6vw, 96px); } }
/* D-017 Filtersatz: Pillen als Knöpfe mit aria-pressed */
.filter { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.filter__pille { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; color: inherit; font-weight: 600; font-size: 16px;
  transition: background-color .45s var(--kurve), color .45s var(--kurve); }
.filter__pille[aria-pressed="true"] { background: var(--sekundaer); border-color: var(--sekundaer); color: var(--dominant); }
.filter__pille:focus-visible { box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) { .filter__pille:hover { box-shadow: inset 0 0 0 1.5px currentColor; } }
/* Karte: Hell heller auf Hell, Pflaume Karte auf Pflaume, Kante Koralle höchstens 8 px (L-015) */
/* Kante 8 px unten in Koralle an jeder Karte (L-018 über schmale Formen, L-015), als Innenschatten, damit ::before
   und ::after den Seiten bleiben */
.karte { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) calc(clamp(20px, 2.2vw, 30px) + 8px); border-radius: 16px;
  background: var(--dominant-hell); border: 1.5px solid var(--sekundaer); box-shadow: inset 0 -8px 0 var(--akzent); }
.flaeche--heller .karte { background: var(--dominant); }
.flaeche--pflaume .karte { background: var(--sekundaer-karte); border-color: var(--sekundaer-linie); }
.karte--kante { border-left: 8px solid var(--akzent); }
/* Nummern- und Stufenmarken 64 px: Kobalt mit Ziffer in Weiß (5,30), auch auf dunklen Karten (L-018, PLAN.md 16.1) */
.karte__nr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--akzent);
  font: 700 28px/1 var(--schrift-kopf); font-variant-numeric: lining-nums; }
:is(.karte, .flaeche--pflaume .karte, .karte--dunkel) .karte__nr, .karte__nr { color: var(--dominant); }
.karte__titel { font: 600 21px/1.3 var(--schrift-text); }
.karte__text { font-size: 17px; line-height: 1.55; }
.karte__fenster { margin: 0 0 6px; }
/* D-060 und D-032: nummerierte Liste mit Linien von Rand zu Rand */
.zeilenliste { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid currentColor; }
.zeilenliste__zeile { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 12px clamp(20px, 2.4vw, 40px);
  align-items: start; padding: 22px 0; border-bottom: 1.5px solid currentColor; }
.zeilenliste__nr { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--akzent);
  font: 700 28px/1 var(--schrift-kopf); color: var(--dominant); font-variant-numeric: lining-nums; }
.flaeche--pflaume .zeilenliste__nr { color: var(--dominant); }
.zeilenliste__titel { font: 600 21px/1.3 var(--schrift-text); }
.zeilenliste__text { font-size: 17px; line-height: 1.55; }
.zeilenliste__bild { margin: 0; }
/* Zahlenleiste (D-029 mit Ziffern) */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0;
  border-block: 1.5px solid currentColor; }
.zahl { display: grid; gap: 6px; padding: 22px clamp(14px, 1.6vw, 24px); }
.zahl + .zahl { border-left: 1.5px solid currentColor; }
.zahl__wert { font: 700 clamp(40px, 4vw, 60px)/1 var(--schrift-kopf); font-variant-numeric: lining-nums tabular-nums; }
.zahl__wert em { font-style: normal; color: var(--akzent-tief); }
.flaeche--pflaume .zahl__wert em { color: var(--akzent-hell); }
.zahl__text { font-size: 16px; line-height: 1.4; }
/* Zahlenkacheln (D-522/D-523 stark abgewandelt, Bau-Prompt logistik-bau-2026-10 Nr. 5, PLAN.md 15.3): vier gleich große
   Kacheln in einer Reihe, drei Hauch und eine Pfirsichhell, Radius 24 px, Ziffer in Playfair 400 Koralle tief mit
   6-px-Koralle-Strich darunter, statisch ohne Zähler. Handy 2 × 2. */
.zahlen--kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-block: 0; }
.zahlen--kacheln .zahl { gap: 14px; align-content: start; padding: clamp(20px, 2.4vw, 34px); border-radius: 24px; background: var(--dominant-hauch); }
.zahlen--kacheln .zahl:nth-child(2) { background: var(--dominant-pfirsich); }
.zahlen--kacheln .zahl + .zahl { border: 0; }
.zahlen--kacheln .zahl__wert { width: fit-content; padding-bottom: 12px; border-bottom: 6px solid var(--akzent);
  font: 400 clamp(56px, 6vw, 96px)/1 var(--schrift-kopf); color: var(--akzent-tief); }
.zahlen--kacheln .zahl__text { font-size: 17px; line-height: 1.45; }
/* Häufige Fragen (A-516), Wortlaut der Fragen = FAQPage-Schema, liest zusammenbauen.mjs aus */
.fragen { border-top: 1.5px solid currentColor; }
.frage { border-bottom: 1.5px solid currentColor; }
.frage__titel { display: grid; grid-template-columns: 1fr 40px; gap: 20px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none;
  font: 600 20px/1.35 var(--schrift-text); }
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::after { content: ""; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(var(--dominant), var(--dominant)) center / 14px 2px no-repeat, linear-gradient(var(--dominant), var(--dominant)) center / 2px 14px no-repeat, var(--akzent);
  transition: transform .45s var(--kurve); }
.frage[open] .frage__titel::after { transform: rotate(45deg); }
.frage__antwort { max-width: 46em; padding: 0 0 24px; font-size: 17px; line-height: 1.6; }
.frage__antwort p + p { margin-top: .8em; }
.frage[open] .frage__antwort { animation: frage-auf .45s var(--kurve); }
@keyframes frage-auf { from { opacity: 0; transform: translateY(-8px); } }
/* Leitsatz-Band (D-467, A-113 Bau-Prompt brilean Nr. 4): Wörter hellen auf, Startdeckkraft 0,45 */
.leitsatz { font: 400 clamp(32px, 3.4vw, 48px)/1.2 var(--schrift-kopf); max-width: 22em; }
.leitsatz__wort { opacity: .45; transition: opacity .4s ease; }
.leitsatz__wort.ist-hell { opacity: 1; }
/* Formular (Anfrage, Bewerbung) */
.formular { display: grid; gap: 22px; max-width: 760px; }
.formular__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.feld { display: grid; gap: 8px; }
.feld__name { font-weight: 600; font-size: 17px; }
.feld__name small { font-weight: 400; color: var(--leise); font-size: 15px; }
.feld__eingabe { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--sekundaer);
  background: var(--dominant-hell); color: var(--sekundaer); font: 400 17px/1.4 var(--schrift-text); }
textarea.feld__eingabe { min-height: 160px; resize: vertical; }
.feld__eingabe:focus-visible { border-radius: 10px; }
.feld__hinweis { font-size: 16px; color: var(--leise); }
.feld__fehler { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 600; color: var(--akzent-tief); }
.feld__fehler::before { content: "!"; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--akzent-tief); color: var(--dominant-hell); font-size: 13px; }
.feld__fehler[hidden] { display: none; }
.auswahl { display: flex; flex-wrap: wrap; gap: 10px; border: 0; margin: 0; padding: 0; }
.auswahl legend { margin-bottom: 10px; font-weight: 600; font-size: 17px; }
.auswahl__pille { position: relative; display: inline-flex; }
.auswahl__pille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auswahl__pille span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--sekundaer); background: var(--dominant-hell); font-weight: 600; font-size: 16px; cursor: pointer; }
.auswahl__pille input:checked + span { background: var(--sekundaer); color: var(--dominant); }
.auswahl__pille input:focus-visible + span { outline: 2px solid var(--sekundaer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--akzent); }
.zustimmung { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 16px; line-height: 1.5; }
.zustimmung input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--sekundaer); }
.zustimmung a { color: var(--akzent-tief); font-weight: 600; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.honig input { font-size: 16px; }
.meldung { padding: 16px 20px; border-radius: 12px; border: 1.5px solid var(--sekundaer); background: var(--dominant-hell); }

/* ---------- Fuß: Pflaume, Riesen-Wortmarke D-025/D-484 ---------- */
.fuss { background: var(--sekundaer); color: var(--dominant); }
/* 12-px-Oberkante in Koralle am Beginn der Pflaume-Fläche, nach dem Verlauf (Schalen-Runde 02.10.2026, L-018) */
.fuss__oben { border-top: 12px solid var(--akzent); }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 64px);
  padding: clamp(20px, 2vw, 28px) var(--rand) clamp(16px, 1.6vw, 24px); }
.fuss__satz { font: 400 clamp(22px, 1.8vw, 26px)/1.25 var(--schrift-kopf); max-width: 22em; }
.fuss__satz em { font-style: italic; }
.fuss__kontakt { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; font-size: 17px; }
.fuss__kontakt a { font-weight: 600; text-underline-offset: 4px; }
/* Link mit kleinem Symbol davor (03.10.2026, Instagram in Fuß, Abschluss und Datenzeile von /anfrage): Symbol als
   inline-SVG in currentColor, die Unterstreichung bleibt am Text */
.mit-symbol { display: inline-flex; align-items: center; gap: .4em; }
.symbol-instagram { flex: none; width: 1.05em; height: 1.05em; }
.fuss__titel { margin-bottom: 8px; font: 600 14px/1.3 var(--schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--leise-hell); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.fuss__liste a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; font-weight: 600; }
.fuss__liste a:focus-visible { color: var(--akzent-hell); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .fuss__liste a:hover { color: var(--akzent-hell); text-decoration: underline; text-underline-offset: 4px; } }
.fuss__partner { display: grid; gap: 10px; align-content: start; }
.fuss__partner p { color: var(--leise-hell); font-size: 16px; }
.fuss__partner a { justify-self: start; }
.fuss__wortmarke { padding: 0 var(--rand-schmal); }
.fuss__wortmarke img { width: 100%; height: auto; }
.fuss__recht { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding: 14px var(--rand) 18px;
  font-size: 16px; color: var(--leise-hell); }
.fuss__recht ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fuss__recht a { color: var(--dominant); text-underline-offset: 3px; }

/* ---------- Bewegung: Arbeiten-Band an den Scrollweg gekoppelt (animation-timeline: view()), Rückfall einmal ---------- */
@keyframes karte-faellt { from { transform: translateY(15%) scale(1.15) rotate(var(--dreh, 0deg)); } to { transform: none; } }
/* A-660 ohne Unschärfe: nur die Riesenüberschrift tritt zurück (opacity, transform), Absatz und Knopf bleiben lesbar */
@keyframes band-zurueck { to { opacity: .4; transform: scale(.94) translateY(-3%); } }
@keyframes band-text-weg { to { opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band { timeline-scope: --band-karten; }
    .band__reihe { view-timeline: --band-karten block; }
    .band__titel { transform-origin: 0 100%; animation: band-zurueck linear both; animation-timeline: --band-karten; animation-range: entry 30% cover 55%; }
    /* Etikett und Knopf über der Riesenzeile kleben mit der Bühne; sie treten aus, bevor die Karten sie erreichen (Abnahme
       Runde 2: das Etikett rutschte unter die erste Karte, ein Kobalt-Punkt blieb allein stehen). Ausgeblendet, wenn die
       Oberkante der Kartenreihe 190 px unter dem oberen Bildschirmrand steht; das klebende Etikett endet bei 158 (1024) bis 171 px (1440). */
    @media (min-width: 768px) {
      .band__text { animation: band-text-weg linear both; animation-timeline: --band-karten;
        animation-range: cover calc(100vh - 330px) cover calc(100vh - 190px); }
      .band__text:focus-within { animation: none; }
    }
    .projektkarte { animation: karte-faellt both; animation-timing-function: cubic-bezier(.19, 1, .22, 1);
      animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
  /* ohne Scroll-Zeitleiste: Karten erscheinen einmal (L-029) */
  @supports not (animation-timeline: view()) {
    .js .projektkarte[data-ein] { transition: transform .9s var(--kurve), opacity .9s var(--kurve); transition-delay: calc(var(--i, 0) * 60ms); }
    .js .projektkarte[data-ein]:not(.ist-da) { opacity: 0; transform: translateY(40px) rotate(calc(var(--dreh, 0deg) / 3)); }
  }
}

/* ---------- Breiten ---------- */
@media (max-width: 1199px) {
  .zeitleiste__linie { display: none; }
  .zeitleiste__schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritt__marke { background: var(--akzent); color: var(--dominant); }
  .person { grid-template-columns: minmax(0, clamp(200px, 26vw, 300px)) minmax(0, 1fr); }
  .farbwand { grid-column: 1 / -1; }
  .farbwand__liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fuss__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss__oben > :first-child { grid-column: 1 / -1; }
  .zeilenliste__zeile { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr); }
  .zeilenliste__nr { width: 52px; height: 52px; font-size: 24px; }
  .zeilenliste__bild { grid-column: 2 / -1; max-width: 360px; }
}
/* Bis 1023 px gestapelt: Text oben, Fenster in voller Breite, Handy unter der rechten Fensterecke (Befund 1) */
@media (max-width: 1023px) {
  .hero { display: block; min-height: 0; padding: 104px 0 24px; }
  .hero__text { padding: 0 var(--rand) 40px; }
  /* 16.3: obere Zeile zweispaltig, Foto links bündig am Rand, oben bündig mit dem Namen; Diashow darunter */
  .hero__foto { display: none; }
  @media (min-width: 360px) {
    .hero { display: grid; --foto-b: clamp(140px, 21vw, 210px); grid-template-columns: var(--foto-b) minmax(0, 1fr); align-items: start; }
    .hero__foto { display: block; grid-column: 1; align-self: end; margin-bottom: 2px; }   /* 2 px Luft zum Fenster: das Intro lässt das Foto erst erscheinen, wenn nichts es kreuzt */
    .hero__text { grid-column: 2; padding-left: 24px; }
    .hero > .diashow { grid-column: 1 / -1; grid-row: 2; }
  }
  .titel__name { font-size: clamp(44px, 7vw, 66px); }
  .titel__nachname::after { margin-right: calc(-1 * var(--rand)); border-radius: 3px 0 0 3px; }
  .titel__fach { font-size: clamp(22px, 3.4vw, 30px); margin-top: 14px; }
  .diashow { padding: 0 var(--rand); }
  .diashow__raster {
    --handy-b: clamp(70px, 14cqw, 128px);
    --handy-sx: 8px;
    --handy-hoch: 2px;                          /* ragt nur über den unteren Rahmen, nie über das Bild */
    grid-template-columns: minmax(0, 1fr) calc(var(--handy-b) + var(--handy-sx) + 14px);
    grid-template-areas: "buehne buehne" "bild handy" "steuer steuer";
  }
  .diashow__buehne { margin-left: 8px; }
  .fenster__leiste { padding-right: 10px; }
  .handy-ort { align-self: start; justify-self: end; margin: calc(-1 * var(--handy-hoch)) 0 0 0; }
  .handy__schatten { border-radius: 16px; }
  .handy { padding: 4px; border-radius: 16px; }
  .handy__schirm { border-radius: 12px; }
  .bildzeile { margin-top: 20px; padding-right: 0; }
  .steuerung { margin-top: 14px; }
  .datenzeile { margin-top: 8px; }
  .band__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; margin-top: -30vh; }
  .band__reihe > li:nth-child(4) { margin-top: 0; }
  .band__reihe > li:nth-child(3) { margin-top: -40px; }
  .abschluss { grid-template-columns: minmax(0, 1fr); }
  .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
  .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container diashow (min-width: 560px) {
  @media (max-width: 1023px) {
    .diashow__raster { grid-template-areas: "buehne buehne" "bild handy" "steuer handy"; }
  }
}
@media (max-width: 767px) {
  /* Handy: keine klebende Bühne (Handwerksregel 6), Überschrift ohne Unschärfe, Drehung halbiert (Bau-Prompt) */
  .band__buehne { position: relative; top: 0; min-height: 0; padding-top: var(--nach-verlauf); padding-bottom: 24px; }
  .band__titel { font-size: clamp(76px, 25vw, 150px); }
  .band__text { order: 0; }
  .band__reihe { grid-template-columns: minmax(0, 1fr); margin-top: 0; gap: 24px; }
  .band__reihe > li:nth-child(n) { margin-top: 0; }
  .band__reihe > li:nth-child(1) { --dreh: 5deg; } .band__reihe > li:nth-child(2) { --dreh: 8deg; }
  .band__reihe > li:nth-child(3) { --dreh: -10deg; } .band__reihe > li:nth-child(4) { --dreh: -3deg; }
  .zeitleiste__schritte { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 0; }
  .zeitleiste__schritte { gap: 16px; }
  .schritt { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: none; column-gap: 16px; row-gap: 8px; }
  .schritt__marke { width: 56px; height: 56px; grid-row: 1 / span 3; font-size: 24px; }
  .schritt__bild { max-width: 240px; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person__bild { max-width: 300px; }
  .farbwand__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeilenliste__zeile { grid-template-columns: 44px minmax(0, 1fr); }
  .zeilenliste__nr { width: 44px; height: 44px; font-size: 22px; border-radius: 10px; }
  .zeilenliste__text, .zeilenliste__bild { grid-column: 2 / -1; }
  .raster--2, .raster--3, .raster--4, .formular__reihe { grid-template-columns: minmax(0, 1fr); }
  .zahl + .zahl { border-left: 0; border-top: 1.5px solid currentColor; }
  .zahlen--kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .zahlen--kacheln .zahl + .zahl { border: 0; }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .band__titel { animation: none; }   /* am Handy liegt nichts über der Bühne, sie bleibt lesbar */
      .projektkarte { animation-range: entry 0% cover 35%; }
    }
  }
  @keyframes karte-faellt { from { transform: translateY(15%) scale(1.1) rotate(var(--dreh, 0deg)); } to { transform: none; } }
}
@media (max-width: 599px) {
  /* Kapsel am Handy: 10 px Luft oben, 8 px seitlich, 54 px hoch; frei bleiben 10 + 54 = 64 px wie bisher */
  :root { --kopf-luft: 10px; --kopf-seite: 8px; --kopf-leiste: 54px; --kopf-hoehe: 64px; --blatt-luecke: 8px; --blatt-radius: 20px; }
  .oberzeile { font-size: 14px; }
  .oberzeile::before { width: 7px; height: 7px; }
  .verlauf { height: 32px; }
  .verlauf--kurz { height: 24px; }
  body { font-size: 17px; }
  .kopf { padding: 0 5px; }
  .kopf__marke { font-size: 22px; gap: 8px; }
  .kopf__marke svg { width: 28px; height: 25px; }
  .kopf__pille { padding: 0 16px; font-size: 15px; }
  .kopf__pille .lang { display: none; }
  .kopf__pille .kurz { display: inline; }
  .hero { padding-top: 88px; --foto-b: clamp(80px, 24vw, 140px); }   /* 25vw bricht bei 390 „Erzählen Sie mir davon“ um */
  .hero__text { padding-bottom: 32px; }
  .titel__name { font-size: clamp(40px, 11.6vw, 46px); }
  .titel__nachname::after { height: 4px; min-width: 36px; border-radius: 2px 0 0 2px; }
  .etikett { min-height: 32px; padding: 0 14px; font-size: 15px; }
  .titel__fach { font-size: 22px; margin-top: 10px; }
  .hero__satz { font-size: 17px; margin-top: 16px; }
  .knoepfe { margin-top: 22px; gap: 8px 22px; }
  .knopf { min-height: 54px; padding: 0 24px; }
  .fenster__leiste { height: 36px; gap: 10px; padding-left: 10px; }
  .fenster__adresse { flex: 1 1 auto; }
  .zaehler { font-size: 14px; }
  .handy__leiste { height: 9px; border-bottom-width: 1px; }
  .handy__bild { inset: 9px 0 0 0; height: calc(100% - 9px); }
  .fenster__auge { width: 32px; height: 20px; }
  .fenster__adresse { height: 24px; font-size: 14px; padding: 0 10px; }
  .pause__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fenster__pause { padding: 0; }
  .pause__kreis { width: 28px; height: 28px; }
  .fenster__ki { height: 22px; padding: 0 8px; }
  .bildzeile { margin-top: 16px; }
  /* Koralle am Handy höchstens 9 % (Schalen-Runde 02.10.2026, L-018): auf der Startseite entfallen am Handy die
     Versatzschatten von Handy, Porträt und Abschluss-Karte */
  .diashow .handy__schatten, main:has(> .start-kopf) :is(.person__schatten, .abschluss__schatten) { display: none; }
  .abschluss-ort { margin: 0 0 var(--schatten-platz) var(--schatten-platz); }
  /* Koralle am Handy höchstens 9 %: Leisten der kleinen Fenster etwas niedriger, Farbfeld-Leiste schmal */
  .fenster--klein .fenster__leiste { height: 40px; }
  .fenster--mini .fenster__leiste { height: 36px; }
  .farbfeld__leiste { height: 10px; }
  main:has(> .start-kopf) .abschluss-ort { margin: 0; }
  .bildtext__name { font-size: clamp(19px, 5.6vw, 22px); }
  .bildtext__zeile { font-size: 16px; }
  /* gestapelt, Rauten als Listenmarken, das Etikett ohne Koralle-Fläche (Vorgabe Dirigent 02.10.2026) */
  .datenzeile { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .datenzeile li::before, .datenzeile li + li::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 12px 0 1px; border-radius: 2px; background: var(--akzent); transform: rotate(45deg); }
  .datenzeile .datenzeile__etikett::before { display: none; }
  .datenzeile .etikett { background: transparent; color: var(--sekundaer); box-shadow: inset 0 0 0 1.5px var(--sekundaer); }
  .etikett { white-space: nowrap; }
  .band__text p { font-size: 18px; }
  .antwort { font-size: 18px; }
  /* .titel-gross: keine eigene Handygröße mehr (Abnahme Runde 5), die Grundregel clamp(34px, 4.4vw, 64px) läuft ohne Sprung bei 600 px durch */
  .riesenzeile { font-size: clamp(56px, 17vw, 96px); }
  .menue__link { gap: 12px; }
  .schritt__bild figcaption { font-size: 16px; }
  .protokoll { font-size: 16px; gap: 8px; padding: 10px 12px; }
  .farbfeld__name { font-size: 16px; }
}
/* 16.3: neben dem Fotostreifen bleiben bei 360 bis 389 px rund 233 bis 250 px, der Knopf passt so in eine Zeile */
@media (min-width: 360px) and (max-width: 389px) { .hero .knopf { padding-inline: 14px; gap: 8px; } }
/* Foto am Handy (360 bis 767 px, Abnahme Runde 2, PLAN.md 16.3): oben bündig mit dem Namen und zugleich geerdet. Die Box
   reicht über die ganze obere Rasterzeile, vom Namen bis 2 px über die Diashow (die 2 px Luft braucht das Intro), statt
   unten in der Zeile zu hängen (vorher 163 px Weiß über dem Foto). Das Bild füllt sie mit object-fit: cover; weil die Box
   schmaler ist als der Zuschnitt 87 : 200, fällt seitlich etwas weg, nie oben oder unten. object-position 70 % hält das
   Gesicht ganz im deckenden Teil (bei 390 x 17 bis 73 %, bei 360 x 9 bis 73 %), die Maske läuft rechts erst ab 88 % aus. */
@media (min-width: 360px) and (max-width: 767px) {
  .hero__foto { align-self: stretch; }
  .hero__foto img { height: 100%; aspect-ratio: auto; object-position: 70% 0;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 4%, #000 9%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, rgba(0,0,0,.55) 4%, #000 9%, #000 90%, transparent 100%); }
}
@media (max-width: 359px) {
  /* Abnahme Runde 4: die Mailadresse im Abschluss passt bei 320 px mit sichtbarem Innenrand (vorher 3,3 px beschnitten) */
  .abschluss { padding: 24px 22px; }
  .abschluss__kontakt { font-size: 15px; }
  .kopf__pille { width: 44px; padding: 0; justify-content: center; }
  .kopf__pille .kurz { display: none; }
  .kopf__pille svg { display: block; }
  .kopf__marke { font-size: 20px; }
}

/* ---------- Handy luftiger (07.10.2026, Noah: „es wirkt zu gedrückt“) ----------
   Vorher: Satz und Knopf im Hero teilten sich die Zeile mit dem Fotostreifen (254 px Text bei 390), Schritte und
   Leistungen rückten Text und Bild hinter die Nummernspalte (72 px Einzug in einem Blatt mit 28 px Rand), und zwischen
   zwei Blättern lagen 48 px. Jetzt: Foto nur neben dem Namen, Satz und Knöpfe in voller Breite; Nummer und Titel in
   einer Zeile, Text und Bild darunter in voller Breite; zwischen den Blättern 64 px (L-016: höchstens 72). */
@media (max-width: 767px) {
  .schritt { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
  .schritt__marke { grid-row: 1; width: 48px; height: 48px; font-size: 22px; align-self: center; }
  .schritt__titel { grid-column: 2; grid-row: 1; align-self: center; }
  .schritt__text, .schritt__bild { grid-column: 1 / -1; }
  .schritt__bild { max-width: none; }
  .zeilenliste__nr, .zeilenliste__titel { align-self: center; }
  .zeilenliste__text, .zeilenliste__bild { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  :root { --abschnitt: 28px; --abschnitt-unten: 20px; --blatt-luecke: 12px; }
}
@media (min-width: 360px) and (max-width: 599px) {
  .hero { --foto-b: 31vw; grid-template-columns: var(--foto-b) minmax(0, 1fr); }
  .hero__text { display: contents; }
  .hero__foto { grid-row: 1; margin: 0; position: relative; min-height: 200px; }
  .hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 62% 4%; }
  .titel { grid-column: 2; grid-row: 1; align-self: center; padding: 8px var(--rand) 8px 18px; }
  .hero__satz { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 22px 0 0; padding-inline: var(--rand); }
  .hero .knoepfe { grid-column: 1 / -1; grid-row: 3; margin: 24px 0 40px; padding-inline: var(--rand); }
  .hero .knopf { padding-inline: 24px; }
  .hero > .diashow { grid-row: 4; }
}

/* ---------- Ruhige Fassung (prefers-reduced-motion): alles steht, nichts klebt, Endzustand sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  .folie.ist-aktiv, .handy__bild.ist-aktiv, .bildtext, .bildtext.ist-aktiv, .adresse, .adresse.ist-aktiv,
  .punkt__marke, .menue, .menue.ist-offen, .menue__link, .menue__link > span, .menue__bild, .schritt__marke,
  .kopf, .kopf__menue, .kopf__menue span, .kopf__nav a, .kopf__nav a span span, .kopf__pille,
  .knopf, .knopf svg, .textknopf::after, .frage__titel::after, .leitsatz__wort, .filter__pille { transition: none; }
  .fenster__ki.ist-aktiv:not(:empty), .frage[open] .frage__antwort { animation: none; }
  .diashow[data-halt] .punkt.ist-aktiv .punkt__fuellung { animation: none; transform: none; }
  .knopf:focus-visible, .kopf__pille:focus-visible { transform: none; }
  @media (hover: hover) and (pointer: fine) { .kopf__pille:hover, .knopf:hover { transform: none; } }
  /* auch der Pfeil und die Striche des Menüknopfs bleiben stehen (Vorprüfung P1: Zeiger über einem Knopf beim Scrollen) */
  .knopf:focus-visible svg, .kopf__menue:focus-visible span { transform: none; }
  @media (hover: hover) and (pointer: fine) { .knopf:hover svg, .kopf__menue:hover span { transform: none; } }
  .kopf__nav a:focus-visible span span { transform: none; text-decoration: underline; }
  @media (hover: hover) and (pointer: fine) { .kopf__nav a:hover span span { transform: none; text-decoration: underline; } }
  /* die Kapsel verschwindet beim Runterscrollen ohne Fahrt (die Regel oben bringt ihren eigenen Übergang mit) */
  .kopf[data-leiste~="verstecken"][data-richtung="runter"]:not(:focus-within):not([data-menue-offen]) { transition: none; }
  .menue { clip-path: none; }
  .menue__link > span { transform: none; }
  .band__buehne { position: relative; top: 0; min-height: 0; padding-top: var(--nach-verlauf); padding-bottom: 32px; gap: 16px; }
  .band__titel { font-size: clamp(76px, 20vw, 300px); }
  .band__reihe { margin-top: 0; }
  .schritt__marke { background: var(--akzent); color: var(--dominant); }
  .leitsatz__wort { opacity: 1; }
  .js .auftritt, .js .auftritt:not(.ist-da) { transition: none; opacity: 1; transform: none; }
}

/* Standbild der Diashow ?zeit= (Prüfhilfe aus Entwurf 05) */
.ist-standbild .folie, .ist-standbild .handy__bild, .ist-standbild .bildtext, .ist-standbild .adresse,
.ist-standbild .punkt__marke { transition: none !important; }
.ist-standbild .fenster__ki.ist-aktiv:not(:empty) { animation: none; }

/* Druck am Knopf (Skill bewegung, Vorprüfung P25): am Handy die einzige Rückmeldung. scale statt transform, damit
   Hover und Skripte ihr transform behalten. Ruhige Fassung ohne Druck. */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .kopf__pille { transition: background-color .45s var(--kurve), transform .45s var(--kurve), scale 160ms cubic-bezier(.16, 1, .3, 1); }
  .filter__pille { transition: background-color .45s var(--kurve), color .45s var(--kurve), scale 160ms cubic-bezier(.16, 1, .3, 1); }
  .knopf:active, .kopf__pille:active, .filter__pille:active, .kopf__nav a:active { scale: .97; }
}