/* nj-hoffmann.de · Unterseiten, Impressum, Datenschutz, 404 · nach Entwurf 01-drehbuehne (Web Design Bot, 17.10.2026)
   Schriften, Farben und Handy-Menü kommen aus css/grund.css (vorher geladen).
   Muster: A-632 Seitenkopf stellt scharf (valmont Bau-Prompt 1), A-637 Kartenstapel (brilean Bau-Prompt 3),
   D-020 Blatt schiebt sich über den Seitenkopf, D-060 Abschnittskopf mit Linie, D-524 Ablauf mit aktivem Schritt,
   D-493 Stufenanzeige, D-078 Fenster, D-444 Social-Karte, D-525 Riesen-Wortmarke mit A-675, A-516 Fragen klappen auf,
   A-238 Parallax per Scroll-Zeitachse, A-028 Seitenwechsel per View Transitions, L-052 Handy-Menü. */


/* Seitenwechsel: Startseite und Unterseiten blenden über, die Figur (view-transition-name: noah-figur) wandert. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  /* nur Unterseiten */
  --rand: 64px; --kopf-h: 64px;
  --spalte: 62ch;
  --blatt-r: 28px;
  /* Stufe des Seitenkopfs: hell (Posen 1 und 3) oder dunkel (Posen 2 und 4), wie der Studiogrund im Bild */
  --b-wand: var(--grund); --b-kante: var(--kante); --b-mitte: var(--mitte); --b-boden: var(--boden);
  interpolate-size: allow-keywords;
}
:root[data-stufe="dunkel"] { --b-wand: var(--grund-dunkel); --b-kante: var(--kante-dunkel); --b-mitte: var(--mitte-dunkel); --b-boden: var(--boden-dunkel); }
@media (max-width: 1199px) { :root { --rand: 32px; } }
@media (max-width: 899px) { :root { --rand: 16px; --blatt-r: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); color: var(--graphit); scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
html:not(.ruhig) { scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.55 var(--text-schrift); background: var(--grund); overflow-x: clip; }
h1, h2, h3 { font-family: var(--kopf-schrift); font-weight: 700; line-height: 1.06;   /* Prata braucht mehr als Antonio (.92): Unter- und Oberlängen stießen an, Prüfer 19.10. */ margin: 0; letter-spacing: .005em; }
h2 { font-size: clamp(34px, 3.4vw, 54px); margin-bottom: 28px; text-wrap: balance; }
h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.1; margin-bottom: 12px; }
h4 { font: 700 clamp(22px, 1.8vw, 28px)/1 var(--kopf-schrift); margin: 0 0 10px; }
.abstand-24 { margin-top: 24px; } .abstand-40 { margin-top: 40px; } .abstand-72 { margin-top: 72px; } .unten-64 { margin-bottom: 64px; } .unten-40 { margin-bottom: 40px; }
caption { caption-side: bottom; text-align: left; padding: 14px 20px; font-size: 16px; color: var(--leise); }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
a { color: var(--petrol-text); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, .tabelle-huelle:focus-visible {
  outline: 2px solid var(--petrol-text); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; }
.leise { color: var(--leise); }

.sprung { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--graphit); color: var(--grund-hell); border-radius: 999px; }
.sprung:focus { top: 12px; }

/* Offene Angaben (Fragen an Noah, PLAN.md Abschnitt 12): sichtbar und zählbar */
.offen { display: block; padding: 12px 16px; border: 2px dashed var(--petrol); border-radius: 8px; color: var(--graphit); background: color-mix(in srgb, var(--grund-hell) 60%, transparent); font-size: 16px; }
.offen strong { color: var(--petrol-text); }

/* ---------- Knöpfe (pille, A-352) ---------- */
.knopf { position: relative; display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 12px 26px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--petrol); color: var(--grund-hell); font-weight: 700; text-decoration: none; }
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--petrol-hover); transform: translateY(101%); transition: transform .45s var(--kurve); }
.knopf:focus-visible::before { transform: none; }
@media (hover: hover) and (pointer: fine) { .knopf:hover::before { transform: none; } }
.knopf-hell, .flaeche-graphit a.knopf-hell, .insta-karte a.knopf-hell, .kontaktkarte a.knopf-hell { background: var(--petrol-hell); color: var(--graphit); }
.flaeche-graphit a.knopf:not(.knopf-hell) { color: var(--grund-hell); }
.knopf-hell::before { background: var(--grund-hell); }
.knopf-rand { background: transparent; color: var(--petrol-text); box-shadow: inset 0 0 0 2px var(--petrol); }
.knopf-rand::before { background: var(--petrol); }
.knopf-rand:focus-visible { color: var(--grund-hell); }
@media (hover: hover) and (pointer: fine) { .knopf-rand:hover { color: var(--grund-hell); } }
.knopf-satz { margin: 12px 0 0; font-size: 16px; color: var(--leise); line-height: 1.45; max-width: 30em; }

/* ---------- Kopfleiste (wie Startseite: D-459, L-048, D-115) ---------- */
.kopf { position: fixed; inset: 0 0 auto; height: var(--kopf-h); z-index: 30; display: flex; align-items: center; gap: 32px; padding: 0 var(--rand);
  transition: transform .35s var(--kurve), visibility 0s; }
.kopf::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; background: color-mix(in srgb, var(--b-wand) 78%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  transition: background-color .4s; }
.kopf.fest::before { background: color-mix(in srgb, var(--grund-hell) 90%, transparent); }
.wortmarke { font: 700 22px/1 var(--kopf-schrift); color: var(--graphit); text-decoration: none; padding-bottom: 4px; border-bottom: 3px solid var(--petrol); white-space: nowrap; }
.kopf-nav { display: flex; gap: 28px; margin: 0 auto; }
.kopf-nav a { color: var(--graphit); text-decoration: none; font-size: 16px; position: relative; padding: 6px 0; }
.kopf-nav a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--petrol);
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--kurve); }
.kopf-nav a[aria-current]::after, .kopf-nav a:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .kopf-nav a:hover::after { opacity: 1; transform: none; } }
.kopf-nav a[aria-current] { font-weight: 700; }
.pille { display: inline-block; line-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--petrol); color: var(--grund-hell); text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap; transition: background-color .45s var(--kurve); }
.pille:focus-visible { background: var(--petrol-hover); }
@media (hover: hover) and (pointer: fine) { .pille:hover { background: var(--petrol-hover); } }
.pille[aria-current] { background: transparent; color: var(--petrol-text); box-shadow: inset 0 0 0 2px var(--petrol); }

@media (max-width: 1023px) {
  .kopf { justify-content: center; padding: 0 12px; }
  .kopf-nav, .kopf-kontakt { display: none; }
}
@media (max-width: 899px) {
  .kopf.weg { transform: translateY(calc(-100% - 28px)); visibility: hidden; transition: transform .35s var(--kurve), visibility 0s .35s; }
}

/* ---------- Seitenkopf mit Posen-Standbild (A-632) ---------- */
/* Desktop: Text links, Figur rechts auf dem Studioboden. Der Boden läuft als Verlauf über die volle Breite in derselben
   Lage wie im Bild (Stopps aus drehbuehne.css), darum bleibt der Bildrahmen unsichtbar. */
.seitenkopf {
  --fig-oben: calc(var(--kopf-h) + 12px);
  --fig-h: calc(max(620px, 100 * var(--vh)) - var(--fig-oben));
  --fig-b: calc(var(--fig-h) * .5625);
  position: relative; z-index: 0; height: calc(var(--fig-oben) + var(--fig-h)); overflow: clip;
  display: grid; grid-template-columns: var(--rand) minmax(0, 1fr) var(--fig-b) calc(var(--rand) + 4vw); column-gap: 0;
  background: linear-gradient(var(--b-wand) calc(var(--fig-oben) + var(--fig-h) * .48), var(--b-kante) calc(var(--fig-oben) + var(--fig-h) * .744),
    var(--b-mitte) calc(var(--fig-oben) + var(--fig-h) * .84), var(--b-boden) calc(var(--fig-oben) + var(--fig-h) * .93));
}
.seitenkopf-text { grid-column: 2; grid-row: 1; align-self: center; padding: var(--kopf-h) 48px 0 0; max-width: 760px; }
.seitenkopf h1 { font-size: clamp(42px, 4.6vw, 78px); line-height: 1.04; text-wrap: balance; }
.seitenkopf h1 .zeile { display: block; }
.seitenkopf-satz { margin: 28px 0 30px; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.4; max-width: 26em; padding-left: 18px; border-left: 6px solid var(--petrol); }
.figur-spalte { grid-column: 3; grid-row: 1; align-self: end; position: relative; height: var(--fig-h); }
.figur-hub { position: absolute; inset: 0; }
.figur-rahmen { position: absolute; inset: 0; margin: 0; view-transition-name: noah-figur; }
.figur-rahmen img { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.ki-hinweis { margin: 0; font-size: .8rem; line-height: 1.2; color: var(--leise); }
.figur-rahmen .ki-hinweis { position: absolute; right: 9%; bottom: 2.4%; white-space: nowrap; }

/* A-632: nur mit JavaScript, nur beim direkten Aufruf (beim Seitenwechsel kommt die Figur scharf herübergeflogen) */
.mit-js:not(.ruhig):not(.per-uebergang) .seitenkopf .figur-rahmen img { filter: blur(12px); transform: scale(1.05); }
.mit-js:not(.ruhig) .seitenkopf .figur-rahmen img { transition: filter .72s var(--sanft), transform .72s var(--sanft); }
.mit-js:not(.ruhig) .seitenkopf.bereit .figur-rahmen img { filter: none; transform: none; }
.mit-js:not(.ruhig) .seitenkopf-text > * { opacity: 0; transform: translateY(24px); transition: opacity .4s var(--sanft), transform .4s var(--sanft); }
.mit-js:not(.ruhig) .seitenkopf-text > :nth-child(2) { transition-delay: .08s; }
.mit-js:not(.ruhig) .seitenkopf-text > :nth-child(n+3) { transition-delay: .16s; }
.mit-js:not(.ruhig) .seitenkopf.bereit .seitenkopf-text > * { opacity: 1; transform: none; }
.mit-js:not(.ruhig) .seitenkopf .seitenkopf-text > :first-child { transition-delay: 0s; }

/* Handy unter 900 px: Figur oben mittig, Text darunter auf dem hellen Boden */
@media (max-width: 899px) {
  .seitenkopf { --fig-oben: calc(var(--kopf-h) + 4px); --fig-h: min(calc(50 * var(--vh)), 150vw); height: auto; display: flex; flex-direction: column; padding-bottom: calc(var(--blatt-r) + 36px);
    background: linear-gradient(var(--b-wand) calc(var(--fig-oben) + var(--fig-h) * .48), var(--b-kante) calc(var(--fig-oben) + var(--fig-h) * .744),
      var(--b-mitte) calc(var(--fig-oben) + var(--fig-h) * .84), var(--b-boden) calc(var(--fig-oben) + var(--fig-h) * .93)); }
  .figur-spalte { order: -1; flex: none; width: var(--fig-b); margin: var(--fig-oben) auto 0; }
  .seitenkopf-text { padding: 30px var(--rand) 0; max-width: none; }
  .seitenkopf h1 { font-size: clamp(34px, 10.4vw, 46px); }
  .seitenkopf-satz { margin: 18px 0 22px; font-size: 18px; border-left-width: 3px; padding-left: 12px; }
  .figur-rahmen .ki-hinweis { right: 0; bottom: -1.6em; }
  .mit-js:not(.ruhig):not(.per-uebergang) .seitenkopf .figur-rahmen img { filter: none; }
}

/* ---------- Blätter: der Inhalt schiebt sich über den Seitenkopf (D-020) ---------- */
.kopf-buehne { position: relative; }
.blatt { position: relative; z-index: 2; background: var(--grund); border-radius: var(--blatt-r) var(--blatt-r) 0 0;
  box-shadow: 0 -1px 0 rgb(35 33 30 / .06), 0 -18px 36px -26px rgb(35 33 30 / .32); }
/* Desktop mit Bewegung: der Seitenkopf bleibt stehen, das erste Blatt fährt darüber; die Figur steigt dabei langsamer */
@media (min-width: 900px) and (min-height: 600px) {
  html:not(.ruhig) .kopf-buehne > .seitenkopf { position: sticky; top: 0; }
  @supports (animation-timeline: scroll()) {
    html:not(.ruhig) .figur-hub { animation: figur-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 calc(100 * var(--vh)); }
    html:not(.ruhig) .seitenkopf-text { animation: text-zurueck linear both; animation-timeline: scroll(root block); animation-range: 0 calc(100 * var(--vh)); }
  }
}
@keyframes figur-parallax { to { transform: translateY(-7%); } }
@keyframes text-zurueck { to { transform: translateY(-12vh); } }
@media (max-width: 899px) { .blatt { margin-top: calc(-1 * var(--blatt-r)); } }

/* ---------- Abschnitte, Flächentakt (D-460) mit weichen Übergängen (L-014, L-034) ---------- */
.abschnitt { position: relative; padding: 64px var(--rand) 56px; scroll-margin-top: 80px; }
.blatt > .abschnitt:first-child { padding-top: 72px; padding-bottom: 72px; }
.flaeche-grund { --bg: var(--grund); }
.flaeche-dunkel { --bg: var(--grund-dunkel); }
.flaeche-graphit { --bg: var(--graphit); color: var(--grund); }
.flaeche-grund, .flaeche-dunkel, .flaeche-graphit { position: relative; isolation: isolate; background-color: var(--bg); margin-top: -1px; }
/* weicher Übergang von der vorigen Fläche als eigene Ebene hinter dem Inhalt (L-014, L-034) */
.von-grund::before, .von-dunkel::before, .von-graphit::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 120px;
  background: linear-gradient(var(--von), var(--bg)); pointer-events: none; }
.von-grund { --von: var(--grund); }
.von-dunkel { --von: var(--grund-dunkel); }
.von-graphit { --von: var(--graphit); }
.flaeche-graphit h2, .flaeche-graphit h3 { color: var(--grund-hell); }
.flaeche-graphit a { color: var(--petrol-hell); }
.flaeche-graphit a:focus-visible, .flaeche-graphit button:focus-visible, .flaeche-graphit summary:focus-visible { outline-color: var(--petrol-hell); }
.flaeche-graphit .leise, .flaeche-graphit .knopf-satz { color: var(--leise-dunkel); }

/* Abschnittskopf (D-060): Linie über die volle Breite, links ein Petrol-Band */
.kopflinie { display: block; width: calc(100% + 2 * var(--rand)); height: 56px; margin: 0 calc(-1 * var(--rand)) 48px; overflow: visible; }
.kl-band { fill: var(--petrol); transform-box: fill-box; transform-origin: left center; }
.kl-linie { fill: color-mix(in srgb, var(--graphit) 22%, transparent); }
.flaeche-graphit .kl-band { fill: var(--petrol-hell); }
.flaeche-graphit .kl-linie { fill: color-mix(in srgb, var(--grund) 22%, transparent); }
.blatt .kopflinie { margin-top: -24px; }
@media (max-width: 899px) { .kopflinie { height: 44px; } }   /* Petrol-Bänder 44 px (Petrol mindestens 5 %, L-018, nur schmale Bänder nach L-015) */

/* Zweispaltig: Text links, Beleg rechts */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.zweispaltig > * { min-width: 0; }
.text { max-width: var(--spalte); }
.antwort { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; max-width: 34em; }
.h2-klein { font-size: clamp(26px, 2.2vw, 32px); margin-bottom: 18px; }
.grenze { padding-left: 16px; border-left: 3px solid var(--petrol); }

/* Merkkarte neben dem Antwortblock, Wegekarte im Kontaktband, Fragekarte neben den Fragen */
.merk-karte { --pad: clamp(24px, 2.6vw, 36px); padding: var(--pad); border-radius: 14px; background: var(--grund-hell); border: 1px solid var(--kante); overflow: hidden; }
.wege-karte { padding: 24px 28px; border-radius: 0 0 12px 12px; background: var(--graphit-hell); border-top: 6px solid var(--petrol-hell); }
.frage-karte { margin-top: 28px; padding: 22px 24px; border-radius: 0 0 12px 12px; background: var(--grund-hell); border-top: 12px solid var(--petrol); max-width: 26em; }
.frage-karte p { margin-bottom: 10px; }
.frage-karte-titel { font: 700 22px/1.1 var(--kopf-schrift); }
.frage-karte a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* Kopfband der Karten: schmales Petrol-Band mit dem Titel (Fenster-Logik wie D-078) */
.merk-karte > .h2-klein { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 24px; padding: 22px var(--pad) 18px;
  background: var(--petrol); color: var(--grund-hell); }
.kontaktkarte > h2 { margin: calc(-1 * clamp(24px, 2.6vw, 38px)) calc(-1 * clamp(24px, 2.6vw, 38px)) 22px; padding: 20px clamp(24px, 2.6vw, 38px) 16px;
  background: var(--petrol); }
.insta-karte > .insta-kuerzel { margin: calc(-1 * clamp(22px, 2.4vw, 34px)) calc(-1 * clamp(22px, 2.4vw, 34px)) 22px; padding: 20px clamp(22px, 2.4vw, 34px) 16px;
  background: var(--petrol); }

/* Häkchenliste mit Petrol-Marken */
.marken { list-style: none; display: grid; gap: 14px; }
.marken li { position: relative; padding-left: 28px; }
.marken li::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; border-radius: 2px; background: var(--petrol); }
.flaeche-graphit .marken li::before { background: var(--petrol-hell); }

/* Prüffragen (Automationen): drei echte Fragen der alten Seite, groß gesetzt */
.pruef-fragen { list-style: none; display: grid; gap: 0; border-top: 2px solid color-mix(in srgb, var(--graphit) 18%, transparent); }
.pruef-fragen li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 2px solid color-mix(in srgb, var(--graphit) 18%, transparent);
  font: 700 clamp(22px, 1.9vw, 28px)/1.1 var(--kopf-schrift); }
.pruef-fragen li::before { content: "?"; color: var(--petrol-text); font-size: 1.3em; line-height: .8; }

/* ---------- Kartenstapel (A-637, brilean Bau-Prompt 3) ---------- */
.stapel { list-style: none; display: grid; gap: 24px; }
.stapel-karte { --i: 0; position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 56px; align-items: start;
  padding: 40px clamp(24px, 3.4vw, 52px) 44px; border-radius: 0 0 18px 18px; background: var(--grund-hell); border: 1px solid var(--kante); border-top: 24px solid var(--petrol);
  transform-origin: 50% 0; }
.stapel-karte h3 { font-size: clamp(30px, 3vw, 46px); margin: 0; text-wrap: balance; }
.stapel-karte p:last-child { margin-bottom: 0; }
.stapel-karte .klein { font-size: 16px; color: var(--leise); }
.stapel-karte.dunkel { background: var(--graphit); color: var(--grund); border-color: var(--graphit); border-top-color: var(--petrol-hell); }
.stapel-karte.dunkel h3 { color: var(--grund-hell); }
.stapel-karte.dunkel .klein { color: var(--leise-dunkel); }
.stapel-karte.dunkel a { color: var(--petrol-hell); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 14px; }
.chips li { padding: 6px 14px; border-radius: 0 6px 6px 0; background: var(--grund); border-left: 8px solid var(--petrol); font-size: 16px; }
.stapel-ende { height: 0; }
@media (min-width: 900px) and (min-height: 600px) {
  html.mit-js:not(.ruhig) .stapel-karte { position: sticky; top: calc(var(--kopf-h) + 32px + var(--i) * 22px); will-change: transform; }
  html.mit-js:not(.ruhig) .stapel-ende { height: 8vh; }   /* 26vh ließ nach dem Stapel ein leeres Band von rund 350 px (L-016, Prüfer 19.10.) */
}

/* ---------- Ablauf mit aktivem Schritt (D-524), Verben statt Nummern ---------- */
.ablauf { list-style: none; position: relative; display: grid; gap: 0; margin-left: 8px; }
.ablauf::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: color-mix(in srgb, var(--leise-dunkel) 45%, transparent); }
.ablauf::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--petrol-hell); transform-origin: top; transform: scaleY(var(--fuellung, 1)); transition: transform .5s var(--kurve); }
.ablauf li { position: relative; padding: 0 0 52px 44px; color: var(--grund); transition: color .4s; }
.ablauf li:last-child { padding-bottom: 0; }
.ablauf li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--graphit); box-shadow: inset 0 0 0 3px var(--petrol-hell); transition: background-color .4s; }
.ablauf h3 { font-size: clamp(30px, 3vw, 44px); transition: color .4s; }
.ablauf p { max-width: 46ch; margin: 0; }
/* gedimmt bleibt lesbar: Leise auf Dunkel 6,4 : 1 auf Graphit (nie unter 4,5 : 1) */
.mit-js:not(.ruhig) .ablauf.lebt li { color: var(--leise-dunkel); }
.mit-js:not(.ruhig) .ablauf.lebt li h3 { color: var(--leise-dunkel); }
.mit-js:not(.ruhig) .ablauf.lebt li.aktiv, .mit-js:not(.ruhig) .ablauf.lebt li.aktiv h3 { color: var(--grund-hell); }
.ablauf li.aktiv::before, .ablauf li.erledigt::before { background: var(--petrol-hell); }
.ablauf-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px 80px; align-items: start; }
.ablauf-raster .text { position: sticky; top: 120px; }

/* ---------- Gesprächsband (Telefon-Assistent): ein Anruf von links nach rechts ---------- */
.gespraech { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; margin-top: 12px; }
.gespraech::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 6px; background: var(--petrol); transform-origin: left; }
.gespraech li { position: relative; padding: 40px 28px 0 0; }
.gespraech li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 4px var(--petrol); }

.gespraech p { font-size: 16px; margin: 0; }
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .gespraech::before { animation: linie-zeichnen linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}
@keyframes linie-zeichnen { from { transform: scaleX(0); } }

/* ---------- Stufenanzeige (D-493): wo die Daten bleiben ---------- */
.stufen { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; position: relative; padding-top: 52px; }
.stufen::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--petrol-hell), color-mix(in srgb, var(--petrol-hell) 30%, var(--graphit-hell))); transform-origin: left; }
.stufen li { position: relative; }
.stufe-karte { padding: 24px 24px 26px; border-radius: 12px; background: var(--graphit-hell); }
.stufe-karte.ueblich { box-shadow: inset 0 0 0 2px var(--petrol-hell); }
.stufen li.stufe-karte::before { left: 24px; }
.stufen li::before { content: ""; position: absolute; left: 0; top: -48px; width: 24px; height: 24px; border-radius: 50%; background: var(--graphit); box-shadow: inset 0 0 0 4px var(--petrol-hell); }
.stufen li.ueblich::before { background: var(--petrol-hell); }
.stufen h3 { font-size: clamp(26px, 2.4vw, 36px); }
.stufen .marke { display: inline-block; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--petrol-hell); }
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .stufen::before { animation: linie-zeichnen linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}

/* ---------- Fenster für Bildschirmfotos (D-078) ---------- */
.fenster { margin: 0; }
.fenster-leiste { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; background: var(--petrol); border-radius: 10px 10px 0 0; color: var(--grund-hell); font-size: 13px; }
.fenster-leiste i { width: 8px; height: 8px; border-radius: 50%; background: var(--grund-hell); opacity: .75; }
.fenster-leiste span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster-bild { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 16px; background: var(--grund-hell); border: 8px solid var(--petrol); border-top: 0; border-radius: 0 0 10px 10px;
  box-shadow: 12px 12px 0 -2px var(--petrol); color: var(--leise); font-size: 16px; text-align: center; }
.flaeche-graphit .fenster-bild { box-shadow: 12px 12px 0 -2px var(--petrol-hell); }
.fenster-bild.mit-bild { padding: 0; overflow: hidden; }
.fenster-bild.mit-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* Nachgebaute Ansicht statt Bildschirmfoto (Fragen 12.5 und 12.6): echtes HTML, als Beispiel beschriftet */
.fenster-bild.mit-ansicht { display: flex; flex-direction: column; justify-content: center; align-items: stretch; place-items: stretch; gap: 12px; padding: clamp(14px, 3vw, 28px); text-align: left; color: var(--graphit); font-size: 16px; line-height: 1.45; }
.ansicht-titel { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.ansicht-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ansicht-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #fff; border-radius: 6px; }
.ansicht-marke { flex: none; padding: 2px 10px; border: 1.5px solid var(--petrol); border-radius: 4px; color: var(--petrol-text); font-size: 13px; font-weight: 700; }
.ansicht-frage { margin: 0; padding: 10px 14px; background: #fff; border-radius: 6px; font-weight: 700; }
.ansicht-antwort { margin: 0; }
.ansicht-quelle { margin: 0; padding-top: 8px; border-top: 1.5px solid var(--kante); color: var(--petrol-text); font-size: 16px; }
.ansicht-tabelle { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
.ansicht-tabelle thead th { padding: 0 10px; font: 700 12px/1.3 var(--text-schrift); letter-spacing: 0; text-align: left; color: var(--leise); background: none; border: 0; }
.ansicht-tabelle tbody td { padding: 8px 10px; background: #fff; border: 0; }
.ansicht-tabelle td:first-child { border-radius: 6px 0 0 6px; font-weight: 700; }
.ansicht-tabelle td:last-child { border-radius: 0 6px 6px 0; color: var(--petrol-text); }
@media (max-width: 599px) { .ansicht-tabelle th:nth-child(3), .ansicht-tabelle td:nth-child(3) { display: none; } }
.kontaktkarte .zusage { margin: 16px 0 0; color: var(--grund-hell); font-weight: 700; }
.fenster figcaption { margin-top: 18px; font-size: 16px; line-height: 1.5; }
/* Parallax der Fenster (A-238): sie steigen beim Vorbeiscrollen etwas schneller als der Text */
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .schwebt { animation: schweben linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes schweben { from { transform: translateY(40px); } to { transform: translateY(-40px); } }

/* Board oben auf Webdesign: gebaute Websites wie auf einer Pinnwand, leicht schräg angeheftet (Noah, 18.10.) */
.board-flaeche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(20px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
.board-karte { --dreh: -1.6deg; position: relative; transform: rotate(var(--dreh)); transition: transform .5s var(--kurve); }
.board-karte:nth-child(3n+2) { --dreh: 1.2deg; } .board-karte:nth-child(3n) { --dreh: -.6deg; } .board-karte:nth-child(4) { --dreh: 1.4deg; }
.board-karte::before { content: ""; position: absolute; top: -9px; left: 50%; z-index: 2; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--petrol); box-shadow: 0 2px 0 var(--graphit); }
.board-karte > a { color: inherit; text-decoration: none; }
.board-karte > a { display: block; }
.board-karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border: 6px solid var(--petrol); border-top: 0; background: var(--grund-hell); }
.board-name { display: block; padding: 10px 2px 0; font-weight: 700; font-size: 17px; }
.board-name em { margin-left: 6px; font-style: normal; font-weight: 400; font-size: 14px; color: var(--petrol-text); }
.board-karte:focus-within { transform: rotate(0deg) translateY(-6px); }
@media (hover: hover) and (pointer: fine) { .board-karte:hover { transform: rotate(0deg) translateY(-6px); } }
.board-karte a:focus-visible { outline: 3px solid var(--petrol); outline-offset: 6px; }
/* eine einzelne Karte in der letzten Reihe steht mittig, nicht verloren links (sieben Karten seit Drawert, 19.10.) */
.board-karte:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 1099px) { .board-flaeche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-karte:last-child:nth-child(3n+1) { grid-column: auto; }
  .board-karte:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(20px, 2.6vw, 40px)) / 2); } }
@media (max-width: 599px) { .board-flaeche { grid-template-columns: 1fr; } .board-karte:last-child:nth-child(n) { grid-column: auto; width: auto; } .board-karte, .board-karte:nth-child(n) { --dreh: 0deg; } }
@media (prefers-reduced-motion: reduce) { .board-karte { transition: none; } }

/* Beispiele im Zickzack: Fenster und Text wechseln die Seite */
.beispiele { display: grid; gap: 88px; }
.beispiel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px 64px; align-items: center; }
.beispiel:nth-child(even) .fenster { order: 2; }
.beispiel h3 { font-size: clamp(28px, 2.6vw, 40px); }
.beispiel .text { max-width: 44ch; }

/* Schichtbild (Second Brain): fünf Schichten als Stapel */
.schicht-zeichen { display: block; width: 100%; max-width: 220px; height: auto; margin-top: 18px; }
.schicht-zeichen rect { fill: none; stroke: var(--petrol); stroke-width: 2; }
.schicht-zeichen rect.an { fill: var(--petrol); }
.stapel-karte.dunkel .schicht-zeichen rect { stroke: var(--petrol-hell); }
.stapel-karte.dunkel .schicht-zeichen rect.an { fill: var(--petrol-hell); }

/* Frage, Antwort, Quelle als Schema */
.schema { display: grid; gap: 14px; max-width: 560px; }
.schema-frage, .schema-antwort { padding: 16px 20px; border-radius: 14px; font-size: 17px; }
.schema-frage { justify-self: end; background: var(--graphit); color: var(--grund-hell); border-bottom-right-radius: 4px; max-width: 85%; }
.schema-antwort { background: var(--grund-hell); border: 1px solid var(--kante); border-bottom-left-radius: 4px; max-width: 92%; }
.schema-quelle { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 12px; border-radius: 0 6px 6px 0; background: var(--grund); border-left: 4px solid var(--petrol); font-size: 16px; font-weight: 700; color: var(--petrol-text); }
.schema-hinweis { font-size: 16px; color: var(--leise); margin: 6px 0 0; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; border-radius: 12px; border: 1px solid var(--kante); background: var(--grund-hell); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--kante); }
thead th { font: 700 20px/1.1 var(--kopf-schrift); background: var(--petrol); color: var(--grund-hell); border-bottom: 4px solid var(--graphit); letter-spacing: .01em; padding-top: 18px; padding-bottom: 18px; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 700; }
/* Handy: Tabellen passen in die Breite (Trennung statt abgeschnittener Spalte „Auftragsverarbe…“, Prüfer mobil 19.10.) */
@media (max-width: 599px) { th, td { padding: 12px 12px; hyphens: auto; overflow-wrap: anywhere; } thead th { font-size: 18px; } }

/* ---------- Häufige Fragen (A-516) ---------- */
.fragen { display: grid; gap: 0; border-top: 2px solid color-mix(in srgb, var(--graphit) 20%, transparent); }
.fragen-gruppe + .fragen-gruppe { margin-top: 48px; }
.fragen details { border-bottom: 2px solid color-mix(in srgb, var(--graphit) 20%, transparent); }
.fragen summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 700 clamp(21px, 1.7vw, 26px)/1.15 var(--kopf-schrift); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 18px; height: 18px; background:
  linear-gradient(var(--petrol), var(--petrol)) center / 18px 3px no-repeat, linear-gradient(var(--petrol), var(--petrol)) center / 3px 18px no-repeat; transition: transform .45s var(--kurve); }
.fragen details[open] summary::after { transform: rotate(135deg); }
.fragen details > div { padding: 0 0 22px; max-width: 70ch; }
.fragen details > div p:last-child { margin: 0; }
.fragen details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--kurve), content-visibility .5s allow-discrete; }
.fragen details[open]::details-content { block-size: auto; }

/* ---------- Kontaktband am Ende der Leistungsseiten (Graphit, randlos) ---------- */
.kontaktband { position: relative; padding: 96px var(--rand) 96px; }
.kontaktband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: var(--petrol); }
.kontaktband h2 { font-size: clamp(40px, 5.2vw, 80px); max-width: 15ch; }
.kontaktband .zweispaltig { align-items: end; }
.kontakt-wege { display: grid; gap: 10px; font-size: 19px; }
.kontakt-wege a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- Über mich ---------- */
.weg { list-style: none; display: grid; gap: 0; position: relative; padding-left: 36px; }
.weg::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--graphit) 25%, transparent); }
.weg li { position: relative; padding-bottom: 34px; }
.weg li:last-child { padding-bottom: 0; }
.weg li::before { content: ""; position: absolute; left: -36px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--grund-dunkel); box-shadow: inset 0 0 0 3px var(--petrol); }
.weg h3 { font-size: clamp(24px, 2vw, 30px); }
.weg p { margin: 0; }
.insta-karte { background: var(--graphit); color: var(--grund); border-radius: 14px; padding: clamp(22px, 2.4vw, 34px); overflow: hidden; }
.insta-kuerzel { font: 700 clamp(26px, 2.6vw, 38px)/1 var(--kopf-schrift); overflow-wrap: anywhere; margin-bottom: 22px; color: var(--grund-hell); }
.wochenstreifen { margin: 0 0 24px; display: grid; gap: 10px; }
.wochenstreifen div { display: grid; grid-template-columns: 6.4em 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--graphit-hell); }
.wochenstreifen dt { color: var(--petrol-hell); font-weight: 700; }
.wochenstreifen dd { margin: 0; }
.insta-karte a.knopf:focus-visible { outline-color: var(--petrol-hell); }
.haltung { font: 700 clamp(30px, 3.2vw, 50px)/1.02 var(--kopf-schrift); max-width: 18ch; margin: 0 0 28px; text-wrap: balance; }
.haltung em { font-style: normal; color: var(--petrol-text); }

/* ---------- Kontakt: Formular und Karte ---------- */
.formular { display: grid; gap: 22px; }
.feld { display: grid; gap: 8px; }
.feld label, .feld legend { font-weight: 700; font-size: 17px; }
.feld .pflicht { font-weight: 400; color: var(--leise); }
.feld input, .feld textarea { width: 100%; min-height: 52px; padding: 13px 16px; border: 2px solid #7d7f87; border-radius: 10px; background: var(--grund-hell); color: var(--graphit);
  font: 400 17px/1.45 var(--text-schrift); transition: border-color .3s; }
.feld textarea { min-height: 180px; resize: vertical; }
@media (hover: hover) and (pointer: fine) { .feld input:hover, .feld textarea:hover { border-color: var(--graphit); } }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--petrol); }
.feld .fehler { margin: 0; font-size: 16px; color: #8a1f12; font-weight: 700; }
.feld .fehler:empty { display: none; }
.feld [aria-invalid="true"] { border-color: #8a1f12; }
fieldset.feld { border: 0; margin: 0; padding: 0; min-width: 0; }
.themen-wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.themen-wahl label { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 2px #7d7f87; font-weight: 700; font-size: 16px; transition: background-color .3s, color .3s, box-shadow .3s; }
.themen-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.themen-wahl input:checked + span { color: var(--grund-hell); }
.themen-wahl label:has(input:checked) { background: var(--petrol); box-shadow: inset 0 0 0 2px var(--petrol); color: var(--grund-hell); }
.themen-wahl label:has(input:focus-visible) { outline: 2px solid var(--petrol-text); outline-offset: 3px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.honig input { font-size: 16px; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.formular button.knopf { border: 0; cursor: pointer; font: 700 17px/1 var(--text-schrift); }
.formular-meldung { margin: 0; font-weight: 700; color: var(--petrol-text); min-height: 1.5em; }
.formular-recht { font-size: 16px; color: var(--leise); margin: 0; }
.formular button.knopf:disabled { cursor: progress; background: var(--petrol-hover); }
.formular-ersatz { padding: 18px 20px; border-left: 6px solid var(--petrol); background: color-mix(in srgb, var(--grund-hell) 70%, transparent); border-radius: 0 10px 10px 0; }
.formular-ersatz p { margin: 0 0 12px; }
.formular-ersatz .ersatz-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.formular-ersatz[hidden], .formular-erfolg[hidden], .formular[hidden] { display: none; }
.formular-erfolg { padding: 28px clamp(20px, 2.4vw, 32px); border-left: 6px solid var(--petrol); background: var(--grund-hell); border-radius: 0 14px 14px 0; }
.formular-erfolg h3 { margin-bottom: 14px; }
.formular-erfolg p { margin: 0; }
.formular-erfolg:focus-visible { outline: 2px solid var(--petrol-text); outline-offset: 3px; }
.kontaktkarte { background: var(--graphit); color: var(--grund); border-radius: 14px; padding: clamp(24px, 2.6vw, 38px); overflow: hidden; }
.kontaktkarte h2 { color: var(--grund-hell); font-size: clamp(30px, 2.8vw, 42px); margin-bottom: 20px; }
.kontaktkarte dl { margin: 0 0 22px; display: grid; gap: 14px; }
.kontaktkarte dt { font-size: 16px; color: var(--leise-dunkel); }
.kontaktkarte dd { margin: 0; font-size: 19px; font-weight: 700; }
.kontaktkarte a { color: var(--petrol-hell); display: inline-flex; align-items: center; min-height: 32px; }
.kontaktkarte a:focus-visible { outline-color: var(--petrol-hell); }
.kontaktkarte .offen { color: var(--grund); border-color: var(--petrol-hell); background: var(--graphit-hell); }
.kontaktkarte .offen strong { color: var(--petrol-hell); }
.danach { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; position: relative; padding-top: 44px; }
.danach::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; background: var(--petrol); transform-origin: left; }
.danach li { position: relative; }
.schritt-karte { padding: 24px 24px 26px; background: var(--grund); border: 1px solid var(--kante-dunkel); border-bottom: 10px solid var(--petrol); border-radius: 12px 12px 0 0; }
.danach li.schritt-karte::before { left: 24px; }
.danach li::before { content: ""; position: absolute; left: 0; top: -42px; width: 20px; height: 20px; border-radius: 50%; background: var(--grund-dunkel); box-shadow: inset 0 0 0 4px var(--petrol); }
.danach h3 { font-size: clamp(24px, 2.2vw, 32px); }
.danach p { margin: 0; }
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .danach::before { animation: linie-zeichnen linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
}

/* ---------- Auftritte beim Scrollen: an den Scrollweg gekoppelt (view()), sonst per Klasse ---------- */
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .auftritt { animation: auftritt linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
  html.mit-js:not(.ruhig) .kl-band { animation: linie-zeichnen linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
}
@keyframes auftritt { from { opacity: .45; transform: translateY(48px); } }
html.mit-js.ohne-sda:not(.ruhig) .auftritt { transition: opacity .9s var(--kurve), transform .9s var(--kurve); }
html.mit-js.ohne-sda:not(.ruhig) .auftritt:not(.sichtbar) { opacity: .45; transform: translateY(48px); }

/* ---------- Fuß mit Riesen-Wortmarke (D-525, Füllung A-675) ---------- */
.fuss { position: relative; z-index: 3; background: var(--graphit); color: var(--leise-dunkel); padding: 0 var(--rand) 28px; }
.fuss-band { height: 40px; margin: 0 calc(-1 * var(--rand)); background: var(--petrol); }
.riesenmarke { position: relative; margin: 0; padding: 40px 0 8px; font: 700 calc((100vw - 2 * var(--rand)) / 10.4)/.95 var(--kopf-schrift);   /* Prata: Name 10,0 em breit (vorher Antonio 8,6) */ white-space: nowrap; color: var(--leise-dunkel); letter-spacing: 0; }
.riesenmarke::after { content: attr(data-text); position: absolute; left: 0; top: 40px; color: var(--grund-hell); clip-path: inset(0 0 0 0); }
@supports (animation-timeline: view()) {
  html.mit-js:not(.ruhig) .riesenmarke::after { animation: marke-fuellen linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
}
@keyframes marke-fuellen { from { clip-path: inset(0 100% 0 0); } }
.fuss-zeilen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; padding-top: 28px; border-top: 1px solid var(--graphit-hell); font-size: 16px; }
.fuss-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.fuss a { color: var(--grund); display: inline-flex; align-items: center; min-height: 32px; }
.fuss a:focus-visible { outline-color: var(--petrol-hell); }
.fuss-kontakt { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; }
.fuss-recht { grid-column: 1 / -1; margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font-size: 16px; color: var(--leise-dunkel); }
.fuss-recht a { color: var(--leise-dunkel); min-height: 24px; }

/* ---------- Kompakt und Handy ---------- */
@media (max-width: 1199px) {
  .zweispaltig { gap: 28px 44px; }
  .stapel-karte { gap: 16px 36px; }
  .beispiel { gap: 28px 40px; }
  .ablauf-raster { gap: 32px 48px; }
}
@media (max-width: 899px) {
  .abschnitt { padding: 44px var(--rand) 28px; }
  .blatt > .abschnitt:first-child { padding-top: 48px; padding-bottom: 40px; }
  .kopflinie { margin-bottom: 36px; }
  .zweispaltig, .ablauf-raster, .beispiel { grid-template-columns: minmax(0, 1fr); }
  .ablauf-raster .text { position: static; }
  .beispiel:nth-child(even) .fenster { order: 0; }
  .beispiele { gap: 64px; }
  .stapel-karte { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 30px; }
  .gespraech, .stufen, .danach { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; }
  .gespraech::before, .stufen::before, .danach::before { left: 10px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: top; }
  .gespraech li, .stufen li, .danach li { padding: 0 0 0 44px; }
  .gespraech li::before, .stufen li::before, .danach li::before { top: 2px; left: 0; }
  .stufen li::before { left: -1px; }
  .stufen li.stufe-karte, .danach li.schritt-karte { padding: 22px 20px 24px 52px; }
  .stufen li.stufe-karte::before, .danach li.schritt-karte::before { left: 16px; top: 24px; }
  .stufen::before, .danach::before { left: 26px; }
  @supports (animation-timeline: view()) {
    html.mit-js:not(.ruhig) .gespraech::before, html.mit-js:not(.ruhig) .stufen::before, html.mit-js:not(.ruhig) .danach::before { animation-name: linie-senkrecht; }
  }
  .kontaktband { padding: 72px var(--rand) 76px; }
  .fuss-zeilen { grid-template-columns: minmax(0, 1fr); }
  .fuss-kontakt { justify-content: flex-start; }
  .riesenmarke { padding-top: 28px; }
  .riesenmarke::after { top: 28px; }
  th, td { padding: 12px 14px; }
}
@keyframes linie-senkrecht { from { transform: scaleY(0); } }

/* ---------- Ruhige Fassung: alles steht, nichts klebt, nichts blendet ---------- */
::view-transition-group(noah-figur) { animation-duration: .8s; animation-timing-function: cubic-bezier(.19, 1, .22, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .kopf, .kopf::before, .knopf::before, .menue-knopf span, .kopf-nav a::after, .menue-panel, .menue-flaeche, .menue-links a, .menue-kante path,
  .fragen summary::after, .ablauf::after, .ablauf li, .ablauf h3, .pille { transition: none !important; }
  .fragen details::details-content { transition: none; }
}
html.ruhig .kopf, html.ruhig .kopf::before, html.ruhig .knopf::before, html.ruhig .menue-panel, html.ruhig .menue-flaeche, html.ruhig .menue-links a,
html.ruhig .menue-kante path, html.ruhig .fragen summary::after, html.ruhig .pille { transition: none !important; }
html.ruhig .fragen details::details-content { transition: none; }

/* ---------- Textseiten: Impressum, Datenschutz, Danke, Fehler, 404 ---------- */
.textseite { padding-top: var(--kopf-h); }
.textseite-inhalt { padding-top: 48px; padding-bottom: 88px; min-height: calc(70 * var(--vh)); }
.textseite h1 { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.04; margin: 0 0 32px; overflow-wrap: break-word; hyphens: manual; }
.textseite .antwort { margin-bottom: 28px; }
.recht { max-width: var(--spalte); }
.recht h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 44px 0 14px; scroll-margin-top: 96px; overflow-wrap: break-word; hyphens: manual; }
.recht h2:first-child { margin-top: 0; }
.recht p { overflow-wrap: break-word; }
.recht-einleitung { max-width: 38em; }
.textseite-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 8px 0 0; }
@media (max-width: 899px) {
  .textseite-inhalt { padding-top: 32px; padding-bottom: 56px; }
}

/* D-126 Strichleiste als Schnellnavigation (Werkzeugkasten, Vorbild RN; Noah 18.10. für /webdesign/): je Abschnitt ein
   kurzer senkrechter Strich am rechten Rand, beim Überfahren oder per Tastatur die Namen in Versalien daneben, der
   aktive Abschnitt mit Petrol-Strich. Nur am Desktop. Namen auf hellem Schild, damit sie auf jeder Fläche lesbar
   bleiben; über dunklen Flächen hellt js/strichleiste.js die Striche auf. */
.strichleiste { display: none; }
@media (min-width: 1200px) {
  .strichleiste { display: block; position: fixed; right: clamp(14px, 1.6vw, 26px); top: 50%; z-index: 25; transform: translateY(-50%); }
  .strichleiste ul { display: grid; gap: 14px; width: 35px; margin: 0; padding: 0; list-style: none; }
  .strichleiste a { position: relative; display: flex; justify-content: center; height: 18px; color: var(--graphit); text-decoration: none; }
  .strichleiste a::before { content: ""; width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--graphit) 35%, transparent); transition: background .3s, box-shadow .3s; }
  .strichleiste a[aria-current]::before { background: var(--petrol); box-shadow: 0 0 0 1.5px var(--grund-hell); }
  .strichleiste span { position: absolute; right: 100%; top: 50%; padding: 4px 10px 4px 8px; margin-right: 4px; border-radius: 3px; white-space: nowrap;
    background: var(--grund-hell); font: 700 12px/1 var(--text-schrift); letter-spacing: .14em; text-transform: uppercase;
    opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .3s, transform .45s var(--kurve); }
  .strichleiste:focus-within span { opacity: 1; transform: translate(0, -50%); color: color-mix(in srgb, var(--graphit) 55%, var(--grund-hell)); }
  @media (hover: hover) and (pointer: fine) { .strichleiste:hover span { opacity: 1; transform: translate(0, -50%); color: color-mix(in srgb, var(--graphit) 55%, var(--grund-hell)); } }
  .strichleiste:focus-within a[aria-current] span, .strichleiste a:focus-visible span { color: var(--graphit); }
  @media (hover: hover) and (pointer: fine) { .strichleiste:hover a[aria-current] span, .strichleiste a:hover span { color: var(--graphit); } }
  .strichleiste li:nth-child(2) span { transition-delay: .03s; } .strichleiste li:nth-child(3) span { transition-delay: .06s; }
  .strichleiste li:nth-child(4) span { transition-delay: .09s; } .strichleiste li:nth-child(5) span { transition-delay: .12s; } .strichleiste li:nth-child(6) span { transition-delay: .15s; }
  .strichleiste a:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 3px; }
  .strichleiste.auf-dunkel a::before { background: color-mix(in srgb, var(--grund-hell) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .strichleiste span, .strichleiste a::before { transition: none; } }
html.ruhig .strichleiste span, html.ruhig .strichleiste a::before { transition: none; }