/* ==========================================================================
   Fassung 2 "Kanzlei": die Website als Publikation.
   Papier, Navy als Tinte, Haarlinien, Punktleitern, Marginalienspalte.
   Radius 0, keine Karten, keine Schatten. Motion-Stufe 1.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --n0: #F8FAFD; --n1: #ECF1F5; --n2: #D9E0E9; --n3: #B3BFCD; --n4: #7A95B3;
  --n5: #0066B3; --n6: #014F90; --n7: #013B6F; --n8: #012B51; --n9: #031C36;
  --n10: #031122; --n11: #020914;
  --ink-soft: #454E58; --ink-muted: #616A74; --licht: #9EC8F7; --weiss: #FFFFFF;

  --papier: var(--n0);
  --papier-2: var(--n1);
  --tinte: var(--n9);
  --tinte-2: var(--ink-soft);
  --meta: var(--ink-muted);
  --haarlinie: rgba(3, 28, 54, 0.14);
  --kapitel: var(--n7);
  --link: var(--n5);
  --link-hover: var(--n6);
  --cta-grund: var(--n7);
  --cta-text: #FFFFFF;
  --punktfarbe: var(--n4);
  --fehler: #A1312B; /* nur Formularfehler, keine Gestaltungsfarbe */

  --serif: "Literata Variable", "Literata", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin Variable", "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero: clamp(2.75rem, 1.5rem + 4.4vw, 6.5rem);
  --t-h1: clamp(2.125rem, 1.35rem + 2.3vw, 3.625rem);
  --t-h2: clamp(2rem, 1.4rem + 2.2vw, 3.75rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --t-h4: 1.1875rem;
  --t-kapitel: clamp(4rem, 2rem + 7vw, 9rem);
  --t-body: 1.125rem;
  --t-marginalie: 0.8125rem;
  --t-zitat: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);

  --rinne: 32px;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --breite: 1200px;
  --sektion: clamp(6rem, 5rem + 5vw, 10rem);
  --kopf-h: 68px;

  --dur: 200ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}
@supports (color: oklch(0.5 0.1 250)) {
  :root {
    --n0: oklch(0.985 0.004 251.5); --n1: oklch(0.955 0.008 251.5); --n2: oklch(0.905 0.014 251.5);
    --n3: oklch(0.800 0.024 251.5); --n4: oklch(0.660 0.055 251.5); --n5: oklch(0.504 0.145 251.5);
    --n6: oklch(0.425 0.125 251.5); --n7: oklch(0.351 0.105 251.5); --n8: oklch(0.285 0.082 251.5);
    --n9: oklch(0.225 0.060 251.5); --n10: oklch(0.175 0.042 251.5); --n11: oklch(0.135 0.030 251.5);
    --ink-soft: oklch(0.42 0.02 251.5); --ink-muted: oklch(0.52 0.02 251.5); --licht: oklch(0.82 0.08 251.5);
  }
}
@media (max-width: 1023px) {
  /* Mobil weniger Luft als am Schreibtisch, sonst stehen zwischen zwei Sektionen fast 200 px Leere */
  :root { --rinne: 20px; --kopf-h: 60px; --sektion: clamp(4.5rem, 3rem + 5vw, 7rem); }
}
/* Sehr breite Schirme: Satzspiegel und Grundschrift wachsen mit, die Seite bleibt eine Seite und kein Streifen in der Mitte */
@media (min-width: 1800px) {
  :root { --breite: 1320px; --rinne: 36px; --kopf-h: 72px; }
  html { font-size: 106.25%; }
}
@media (min-width: 2200px) {
  :root { --breite: 1480px; --rinne: 40px; --kopf-h: 80px; }
  html { font-size: 118.75%; }
}

/* Dunkle Flächen: Zitatband und Fußzeile */
.dunkel {
  --papier: var(--n8);
  --papier-2: var(--n9);
  --tinte: var(--n0);
  --tinte-2: var(--n3);
  --meta: var(--n4);
  --haarlinie: rgba(248, 250, 253, 0.16);
  --kapitel: var(--licht);
  --link: var(--licht);
  --link-hover: #FFFFFF;
  --cta-grund: var(--n0);
  --cta-text: var(--n9);
  --punktfarbe: rgba(248, 250, 253, 0.35);
  background: var(--papier);
  color: var(--tinte);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: calc(var(--kopf-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis: none;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.verzeichnis-offen { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--n5); outline-offset: 2px; }
.dunkel :focus-visible { outline-color: var(--licht); }
main:focus { outline: none; }
::selection { background: var(--n2); color: var(--n9); }

/* Sicherheitsnetz: keine Betonung in Überschriften */
h1 em, h2 em, h3 em, h1 b, h2 b, h3 b, h1 strong, h2 strong, h3 strong, h1 i, h2 i, h3 i { font-style: inherit; font-weight: inherit; color: inherit; }

.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprungmarke { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--n7); color: #fff; padding: 0.75rem 1rem; font-weight: 600; text-decoration: none; }
.sprungmarke:focus { top: 1rem; color: #fff; }

.zahl { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Typografie ---------- */
.h-titel, .h1, .h2, .h3, .h4, .kapitelziffer, .index__nr, .index__name, blockquote, .anlaesse__frage, .standorte__ort {
  font-family: var(--serif);
  font-optical-sizing: auto;
  color: var(--kapitel);
}
.h-titel { font-size: var(--t-hero); font-weight: 400; letter-spacing: -0.018em; line-height: 1.0; text-wrap: balance; }
/* Lange Komposita ("Budgetverschwendung", "Datenschutzerklärung") werden getrennt statt zerbrochen; kurze Wörter nie */
.h1 { font-size: var(--t-h1); font-weight: 400; letter-spacing: -0.016em; line-height: 1.06; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
.h1__dach {
  display: block;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--tinte-2);
  margin-bottom: 1.1rem;
}
.h2 { font-size: var(--t-h2); font-weight: 400; letter-spacing: -0.012em; line-height: 1.08; text-wrap: balance; }
.h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.006em; line-height: 1.2; }
.h4 { font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.004em; line-height: 1.3; }

.marginalie {
  font-family: var(--sans);
  font-size: var(--t-marginalie);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--meta);
  font-variant-numeric: tabular-nums lining-nums;
}
.kolumnentitel { font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); margin-bottom: 1.5rem; }
.vorspann { font-size: 1.25rem; line-height: 1.55; color: var(--tinte-2); max-width: 54ch; }
.vorspann--gross { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.4375rem); line-height: 1.5; }
.lesetext { max-width: 62ch; color: var(--tinte); }
.lesetext + .lesetext, .lesetext + .punkte, .punkte + .lesetext { margin-top: 1.1rem; }
.lesetext--auftakt { font-family: var(--serif); font-size: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem); line-height: 1.5; color: var(--kapitel); letter-spacing: -0.004em; }
.lesetext--schmal { margin-bottom: 2rem; color: var(--tinte-2); }
.lesetext--notiz { margin-top: 2rem; color: var(--tinte-2); }
.lesetext + .leiter { margin-top: 1.75rem; }

/* Silbentrennung nur, wo sie dem Satz hilft: keine Zweibuchstabenreste wie "ste-hen" */
.lesetext, .vorspann, .phasen, .anruf, .gruende, .felder, .faelle, .standorte, .register, .index__inhalt, .begriffe, .vergleich, .matrix, .punkte, .schritte, .initial {
  hyphenate-limit-chars: 10 4 4;
}

/* ---------- Rahmen und Raster ---------- */
.rahmen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rinne); }
.raster > * { min-width: 0; grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .marg { grid-column: 1 / 4; }
  .haupt { grid-column: 4 / 12; }
  .haupt--weit { grid-column: 4 / 13; }
}
.marg__text { font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-2); margin-top: 0.75rem; max-width: 28ch; }
.marg__nr { display: block; font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); font-variant-numeric: tabular-nums lining-nums; margin-bottom: 0.4rem; }
.marg__titel { font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; line-height: 1.3; color: var(--kapitel); letter-spacing: -0.004em; text-wrap: balance; }
@media (min-width: 1024px) {
  .marg__klebe { position: sticky; top: 96px; padding-right: 1rem; }
}
@media (max-width: 1023px) {
  .marg { margin-bottom: 1.25rem; }
  .marg__text { max-width: 52ch; }
}

/* Sektionen */
.sektion { padding-block: var(--sektion); border-top: 1px solid var(--haarlinie); }
.sektion--eng { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.sektion--papier2 { background: var(--papier-2); }
.sektion > .rahmen + .rahmen { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.sektion .h2 + .vorspann { margin-top: 1.5rem; }
.sektion__weiter { margin-top: 2.5rem; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  height: var(--kopf-h);
  background: rgba(248, 250, 253, 0.94);
  border-bottom: 1px solid var(--haarlinie);
  view-transition-name: kopf;
}
@supports (backdrop-filter: blur(8px)) {
  .kopf { backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
}
.kopf__innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 2rem; }
.kopf__marke { flex-shrink: 0; display: flex; align-items: center; min-height: 44px; }
.kopf__marke img { height: 36px; width: auto; }
.kopf__nav { margin-inline: auto; }
.kopf__nav ul { display: flex; gap: 2rem; }
.kopf__nav a { color: var(--tinte); text-decoration: none; font-size: 0.9375rem; font-weight: 500; padding-block: 0.5rem; background: linear-gradient(var(--n7), var(--n7)) left bottom / 0 1px no-repeat; transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { background-size: 100% 1px; color: var(--n7); }
.kopf__rechts { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; }
.kopf__inhalt { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--tinte); text-decoration: none; font-size: 0.9375rem; font-weight: 600; }
.kopf__inhalt svg { width: 20px; height: 14px; }
.kopf__inhalt:hover { color: var(--n7); }
@media (max-width: 1023px) {
  .kopf__nav, .kopf .knopf--kopf { display: none; }
  .kopf__marke img { height: 30px; }
  .kopf__innen { justify-content: space-between; }
}

/* Schaltflächen */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6rem;
  background: var(--cta-grund); color: var(--cta-text);
  font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none; border: 1px solid var(--cta-grund);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.knopf:hover { background: var(--n6); border-color: var(--n6); color: #fff; }
.knopf--kopf { min-height: 44px; padding: 0 1.2rem; font-size: 0.9375rem; }
.pfeillink { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--link); text-decoration: none; min-height: 44px; }
.pfeillink svg { width: 16px; height: 10px; transition: transform var(--dur) var(--ease); }
.pfeillink svg[viewBox="0 0 10 16"] { width: 10px; height: 16px; }
.pfeillink:hover svg { transform: translateX(3px); }
.pfeillink:hover svg[viewBox="0 0 10 16"] { transform: translateY(3px); }

/* ---------- Fotos: Schwarzweiß hell, Navy-Tönung ---------- */
.foto { position: relative; }
.foto__rahmen { position: relative; overflow: hidden; background: var(--n2); isolation: isolate; }
.foto__rahmen img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(0.94) brightness(1.08); }
/* Schatten auf n9 begrenzen (lighten), danach Navy weich darüber (soft-light 35 %). */
.foto__rahmen::before, .foto__rahmen::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.foto__rahmen::before { background: var(--n9); mix-blend-mode: lighten; }
.foto__rahmen::after { background: var(--n7); mix-blend-mode: soft-light; opacity: 0.35; }
.foto--4-5 .foto__rahmen { aspect-ratio: 4 / 5; }
.foto--3-2 .foto__rahmen { aspect-ratio: 3 / 2; }
.foto--21-9 .foto__rahmen { aspect-ratio: 21 / 9; }
.foto--1-1 .foto__rahmen { aspect-ratio: 1 / 1; }
/* Kein Bild höher als der Schirm unter der Kopfleiste: Handy quer und sehr breite Schirme */
.foto__rahmen { max-height: calc(100svh - var(--kopf-h) - 1.5rem); }
.foto figcaption { margin-top: 0.7rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; color: var(--meta); }
.foto figcaption a { color: inherit; text-decoration-color: var(--haarlinie); }
.foto figcaption a:hover { color: var(--n7); }
@media (max-width: 1023px) {
  .foto--4-5 .foto__rahmen { aspect-ratio: 3 / 2; }
}

/* ---------- Titelseite (Start) ---------- */
.titelseite { padding-bottom: clamp(3rem, 2rem + 4vw, 7rem); }
.titelseite .raster { align-items: start; }
.titelseite__text { padding-top: clamp(2.5rem, 1rem + 5vw, 6.5rem); }
.titelseite__zeile {
  font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta);
  padding-bottom: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--haarlinie);
}
.titelseite__vorspann { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.titelseite__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.titelseite__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rinne); margin-top: clamp(3rem, 2rem + 3vw, 5.5rem); }
.titelseite__fakten > div { border-top: 1px solid var(--haarlinie); padding-top: 0.9rem; }
.titelseite__fakten dd { font-family: var(--serif); font-size: 1.0625rem; color: var(--kapitel); margin-top: 0.3rem; line-height: 1.35; }
.titelseite__bild .foto figcaption { text-align: left; }
@media (min-width: 1024px) {
  .titelseite__text { grid-column: 1 / 9; padding-right: 2rem; }
  .titelseite__bild { grid-column: 9 / 13; margin-right: calc((100vw - min(100vw - 2 * var(--rand), var(--breite))) / -2); }
  .titelseite__bild .foto figcaption { padding-left: 0; }
}
@media (max-width: 1023px) {
  .titelseite__bild { margin-top: 3rem; }
  .titelseite__fakten { grid-template-columns: 1fr; gap: 0; }
  .titelseite__fakten > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; padding-block: 0.8rem; }
  .titelseite__fakten dd { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .h-titel { font-size: clamp(2.75rem, 1rem + 4.6vw, 4.5rem); }
}
/* ---------- Kapitelziffer ---------- */
.kapitelziffer {
  display: block;
  font-size: var(--t-kapitel);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--kapitel);
  font-variant-numeric: lining-nums;
  font-variation-settings: "opsz" 72;
}
.kapitelziffer--sektion { font-size: clamp(3.5rem, 2rem + 4.5vw, 6.5rem); margin-bottom: 1rem; }

/* ---------- Anlass-Index (Signature) ---------- */
.anlaesse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rinne); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.anlaesse__eintrag { position: relative; border-top: 1px solid var(--haarlinie); min-width: 0; }
.anlaesse__eintrag:nth-last-child(-n + 2) { border-bottom: 1px solid var(--haarlinie); }
.anlaesse__eintrag::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--n7);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur) var(--ease);
}
.anlaesse__eintrag:hover::after, .anlaesse__eintrag:focus-within::after { transform: scaleX(1); }
.anlaesse a { display: block; padding: 1.5rem 0 1.6rem; text-decoration: none; color: inherit; }
.anlaesse a:focus-visible { outline-offset: -2px; }
.anlaesse__frage { display: block; font-size: var(--t-h3); font-weight: 400; line-height: 1.22; letter-spacing: -0.006em; text-wrap: balance; }
.anlaesse__weg { display: block; margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.5; color: var(--tinte-2); }
.anlaesse__weg svg { display: inline-block; vertical-align: middle; margin-left: 0.5rem; width: 16px; height: 10px; color: var(--n5); transition: transform var(--dur) var(--ease); }
.anlaesse a:hover .anlaesse__weg svg { transform: translateX(4px); }
.anlaesse__auch { color: var(--meta); }
@media (max-width: 767px) {
  .anlaesse { grid-template-columns: 1fr; }
  .anlaesse__eintrag:nth-last-child(2) { border-bottom: 0; }
}

/* ---------- Punktleiter (Index, Verzeichnis, verwandte Kapitel) ---------- */
.leiter li { min-width: 0; }
.leiter__zeile {
  display: flex; align-items: baseline; align-items: last baseline; gap: 0.6rem;
  padding: 0.65rem 0; text-decoration: none; color: var(--tinte);
  min-height: 44px;
}
.leiter__name { font-size: 1.0625rem; font-weight: 500; min-width: 0; line-height: 1.4; hyphens: manual; text-wrap: balance; }
.leiter__punkte { flex: 1 1 2rem; min-width: 1.5rem; border-bottom: 1px dotted var(--punktfarbe); transform: translateY(-0.28em); transition: border-color var(--dur) var(--ease); }
.leiter__nr { flex-shrink: 0; font-size: 0.9375rem; font-weight: 600; color: var(--kapitel); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; }
.leiter__zeile:hover { color: var(--n7); }
.leiter__zeile:hover .leiter__punkte, .leiter__zeile:focus-visible .leiter__punkte, .leiter__zeile[aria-current="page"] .leiter__punkte { border-bottom-style: solid; border-bottom-color: var(--n7); }
.leiter__kurz { font-size: 0.9375rem; line-height: 1.5; color: var(--tinte-2); margin: -0.25rem 4rem 0.6rem 0; max-width: 60ch; }
.leiter--gross .leiter__name { font-family: var(--serif); font-size: 1.3125rem; font-weight: 400; line-height: 1.3; color: var(--kapitel); }
.leiter--gross li { border-top: 1px solid var(--haarlinie); }
.leiter--gross li:last-child { border-bottom: 1px solid var(--haarlinie); }

/* ---------- Leistungsindex (Signature) ---------- */
.index { counter-reset: kap; }
.index__kapitel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--rinne); padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-top: 1px solid var(--haarlinie); }
.index__kapitel:last-child { border-bottom: 1px solid var(--haarlinie); }
.index__nr { grid-column: 1 / 4; font-size: var(--t-kapitel); line-height: 0.85; letter-spacing: -0.03em; font-variation-settings: "opsz" 72; }
.index__inhalt { grid-column: 4 / 13; min-width: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--rinne); align-items: start; }
.index__name { font-size: var(--t-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.006em; grid-column: 1; text-wrap: balance; }
.index__text { grid-column: 1; margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-2); max-width: 36ch; }
.index__inhalt .leiter { grid-column: 2; grid-row: 1 / span 2; }
.index__inhalt .leiter li + li { border-top: 1px solid transparent; }
@media (max-width: 1023px) {
  .index__kapitel { display: block; }
  .index__nr { display: block; font-size: clamp(3.5rem, 2.5rem + 4vw, 5rem); margin-bottom: 0.75rem; }
}
/* Tablet hochkant: Kapiteltext links, Punktleiter rechts wie am Schreibtisch; erst auf dem Handy untereinander */
@media (max-width: 767px) {
  .index__inhalt { display: block; }
  .index__inhalt .leiter { margin-top: 1.25rem; }
}

/* ---------- Haltung (Start, Kapitel 01) ---------- */
.haltung .raster { align-items: start; row-gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.haltung__kopf .vorspann { margin-top: 1.5rem; }
.haltung__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rinne); }
.initial { border-top: 1px solid var(--haarlinie); padding-top: 1.25rem; min-width: 0; }
.initial__wort { font-family: var(--serif); font-size: 2.25rem; line-height: 1.1; color: var(--kapitel); letter-spacing: -0.012em; margin-bottom: 1rem; }
.initial .h4 { margin-bottom: 0.5rem; }
.initial p:last-child { font-size: 1rem; line-height: 1.6; color: var(--tinte-2); }
.haltung__region { font-size: 1rem; color: var(--tinte-2); max-width: 70ch; }
@media (min-width: 1024px) {
  .haltung .marg { grid-row: 1 / span 2; }
  .haltung__kopf { grid-column: 4 / 9; padding-top: 0.5rem; }
  .haltung__bild { grid-column: 9 / 13; margin-right: calc((100vw - min(100vw - 2 * var(--rand), var(--breite))) / -2); }
  .haltung__spalten { grid-column: 4 / 13; }
  .haltung__region { grid-column: 4 / 11; }
}
@media (max-width: 767px) {
  .haltung__spalten { grid-template-columns: 1fr; }
}

/* ---------- Zitatband (dunkel) ---------- */
.zitatband { padding-block: clamp(4.5rem, 3.5rem + 4vw, 8rem); position: relative; }
.zitatband .marg .marginalie { color: var(--meta); }
.zitatband__figur { min-width: 0; }
.zitatband blockquote p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--t-zitat); line-height: 1.3; color: var(--n0);
  max-width: 34ch; text-wrap: pretty;
}
.zitatband blockquote p::before { content: "\201E"; }
.zitatband blockquote p::after { content: "\201C"; }
.zitatband figcaption { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--haarlinie); max-width: 34rem; color: var(--n3); }
.zitatband__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0 var(--rinne); margin-top: 2.75rem; border-top: 1px solid var(--haarlinie); }
.zitatband__links li { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--haarlinie); }
.zitatband__nr { font-family: var(--serif); font-size: 1.125rem; color: var(--n4); min-width: 1rem; }
.zitatband__links a { display: flex; align-items: center; flex: 1; min-height: 44px; padding-block: 0.4rem; color: var(--licht); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; text-decoration-color: rgba(158, 200, 247, 0.4); }
.zitatband__links a:hover { color: #fff; text-decoration-color: #fff; }
@media (min-width: 1024px) {
  .zitatband__figur, .zitatband__links { grid-column: 4 / 12; }
}

/* ---------- Logo-Raster mit Haarlinien ---------- */
.logos__gruppe { margin-bottom: 1rem; }
.logos__gruppe + .logoraster, .logoraster + .logos__gruppe { margin-top: 0; }
.logoraster + .logos__gruppe { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.logoraster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--haarlinie); border-left: 1px solid var(--haarlinie); }
.logoraster--partner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.logoraster__zelle { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1.25rem 0.875rem; border-right: 1px solid var(--haarlinie); border-bottom: 1px solid var(--haarlinie); min-width: 0; transition: background-color var(--dur) var(--ease); }
.logoraster__zelle:not(.logoraster__zelle--text):hover { background: var(--n1); }
.logoraster__zelle img { width: min(var(--lw), 100%); height: auto; max-height: 72px; object-fit: contain; opacity: 0.92; transition: opacity var(--dur) var(--ease); }
.logoraster__zelle:hover img { opacity: 1; }
.logoraster__zelle--text { grid-column: span 3; aspect-ratio: auto; place-items: center start; padding: 1.25rem 1.5rem; }
.logoraster__zelle--text p { font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--tinte-2); max-width: 30ch; }
.logoraster__zelle--mobil { display: none; }
@media (max-width: 1023px) {
  .logoraster, .logoraster--partner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logoraster__zelle { padding: 0.9rem 0.6rem; }
  .logoraster__zelle--text p { font-size: 1rem; }
  .logoraster__zelle--mobil { display: grid; grid-column: span 1; aspect-ratio: auto; }
  .logoraster__zelle--mobil p { font-size: 0.875rem; font-family: var(--sans); }
}
@media (max-width: 599px) {
  .logoraster, .logoraster--partner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logoraster__zelle--text { grid-column: span 1; padding: 0.9rem 1rem; }
  .logoraster__zelle--text p { font-size: 0.875rem; }
  .logoraster__zelle img { width: min(calc(var(--lw) * 0.9), 100%); }
}

/* ---------- Register der Nachweise (Tabelle) ---------- */
.register-rahmen { min-width: 0; }
.register { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.register thead th { text-align: left; font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); padding: 0 1rem 0.8rem 0; border-bottom: 1px solid var(--n7); }
.register tbody th, .register td { text-align: left; vertical-align: top; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--haarlinie); font-weight: 400; }
.register tbody tr { transition: background-color var(--dur) var(--ease); }
.register tbody tr:hover { background: var(--n1); }
.register tbody th { width: 38%; padding-left: 0.5rem; }
.register thead th:first-child { padding-left: 0.5rem; }
.register__titel { display: block; font-family: var(--serif); font-size: 1.1875rem; font-weight: 500; color: var(--kapitel); line-height: 1.3; }
.register__text { display: block; margin-top: 0.3rem; color: var(--tinte-2); font-size: 0.875rem; }
.register__beleg { text-align: right !important; white-space: nowrap; }
.register__beleg a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.75rem; }
.register__leise { color: var(--meta); }
.register--klein .register__titel { font-size: 1.0625rem; }
.grundlagen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rinne); margin-top: 2rem; }
.grundlagen > div { border-top: 1px solid var(--haarlinie); padding-top: 0.9rem; }
.grundlagen dd { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--tinte-2); }
@media (max-width: 1023px) {
  .register thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .register, .register tbody, .register tr, .register th, .register td { display: block; width: 100%; }
  .register tbody tr { border-top: 1px solid var(--n7); padding: 1.1rem 0 0.6rem; }
  .register tbody tr:hover { background: none; }
  .register tbody th { width: 100%; padding: 0 0 0.75rem; border-bottom: 0; }
  .register td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dotted var(--haarlinie); }
  .register td::before { content: attr(data-label); font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); }
  .register td:last-child { border-bottom: 0; }
  .register__beleg { text-align: left !important; white-space: normal; }
  .register__beleg:empty { display: none; }
  .grundlagen { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Standorte ---------- */
.standorte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rinne); margin-top: 2.5rem; }
.standorte__block { border-top: 1px solid var(--haarlinie); padding-top: 1rem; min-width: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-2); }
.standorte__ort { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: 1.1; margin: 0.6rem 0 0.75rem; letter-spacing: -0.01em; }
.standorte__firma { color: var(--tinte); font-weight: 600; margin-bottom: 0.4rem; }
.standorte__block p + p { margin-top: 0.4rem; }
.standorte__leise { color: var(--meta); }
@media (max-width: 767px) {
  .standorte { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Das Haus (Start) ---------- */
.haus .raster { align-items: start; row-gap: 3rem; }
.haus__text .marginalie { margin-bottom: 1.25rem; }
.haus__text .vorspann { margin-top: 1.5rem; }
@media (min-width: 1024px) {
  .haus__bild { grid-column: 1 / 5; margin-left: calc((100vw - min(100vw - 2 * var(--rand), var(--breite))) / -2); }
  .haus__text { grid-column: 6 / 13; padding-top: 1rem; }
  .haus .standorte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Kleiner Schreibtisch: schmaleres Bild, damit drei Ortsnamen nebeneinander passen und "Wendelstein" nicht bricht */
@media (min-width: 1024px) and (max-width: 1279px) {
  .haus__bild { grid-column: 1 / 4; }
  .haus__text { grid-column: 5 / 13; }
}

/* ---------- Erstgespräch und Formular ---------- */
.erstgespraech .vorspann { margin-top: 1.25rem; }
.formular { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.formular__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem var(--rinne); }
/* Tablet und kleiner Schreibtisch: Name und Kontakt nebeneinander, das Anliegen in voller Breite, sonst wird die Auswahl abgeschnitten */
@media (min-width: 768px) and (max-width: 1279px) {
  .formular__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular__reihe .feld--auswahl { grid-column: 1 / -1; }
}
.feld { display: block; min-width: 0; }
.feld__name { display: block; font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); margin-bottom: 0.25rem; }
.feld input, .feld select, .feld textarea {
  display: block; width: 100%; font: inherit; font-size: 1.0625rem; color: var(--tinte);
  background: transparent; border: 0; border-bottom: 1px solid var(--n3); border-radius: 0;
  padding: 0.6rem 0 0.55rem; min-height: 48px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.feld textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.feld select { padding-right: 1.75rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23013B6F' stroke-width='1.4'/%3E%3C/svg%3E") right 0.25rem center / 12px 12px no-repeat; cursor: pointer; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-bottom-color: var(--n5); box-shadow: 0 1px 0 0 var(--n5); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; }
.feld--voll { margin-top: 1.75rem; }
.feld input:user-invalid, .feld textarea:user-invalid, .feld select:user-invalid { border-bottom-color: var(--fehler); box-shadow: 0 1px 0 0 var(--fehler); }
.feld:has(:user-invalid) .feld__name { color: var(--fehler); }
.feld:has(:user-invalid) .feld__name::after { content: ", bitte ausfüllen"; font-weight: 500; letter-spacing: 0.02em; }
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.formular__hinweis { font-size: 0.875rem; line-height: 1.5; color: var(--meta); max-width: 46ch; }
.erreichbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rinne); margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.erreichbar > div { border-top: 1px solid var(--haarlinie); padding-top: 0.9rem; min-width: 0; }
.erreichbar dd { margin-top: 0.35rem; font-family: var(--serif); font-size: 1.1875rem; color: var(--kapitel); line-height: 1.35; }
.erreichbar dd a { color: inherit; text-decoration-color: var(--haarlinie); }
@media (max-width: 767px) {
  .formular__reihe, .erreichbar { grid-template-columns: 1fr; }
  .erreichbar { gap: 1rem; }
}

/* ---------- Kapitelkopf (Detail- und Anhangseiten) ---------- */
.kapitelkopf { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.kapitelkopf .raster { align-items: start; row-gap: 2rem; }
.kapitelkopf__marg { min-width: 0; }
.kapitelkopf__text .vorspann { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.pfad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); margin-bottom: 1.5rem; }
.pfad a { color: var(--meta); text-decoration-color: var(--haarlinie); }
@media (max-width: 1023px), (pointer: coarse) {
  .pfad { margin-bottom: 1rem; }
  .pfad a { display: inline-flex; align-items: center; min-height: 44px; }
}
.pfad a:hover { color: var(--n7); }
.pfad span[aria-hidden] { color: var(--n3); }
.kapitelkopf__meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rinne); margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.kapitelkopf__meta > div { border-top: 1px solid var(--haarlinie); padding-top: 0.85rem; min-width: 0; }
.kapitelkopf__meta dd { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.5; color: var(--tinte); overflow-wrap: anywhere; }
.kapitelkopf__meta dd a { color: var(--link); }
.kapitelkopf__panorama { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 1024px) {
  .kapitelkopf__marg { grid-column: 1 / 4; grid-row: 1 / span 2; }
  .kapitelkopf__text { grid-column: 4 / 10; }
  .kapitelkopf__bild { grid-column: 10 / 13; grid-row: 1 / span 2; margin-right: calc((100vw - min(100vw - 2 * var(--rand), var(--breite))) / -2); }
  .kapitelkopf__meta { grid-column: 4 / 13; }
  .kapitelkopf--ohnebild .kapitelkopf__text, .kapitelkopf--index .kapitelkopf__text { grid-column: 4 / 12; }
  .kapitelkopf .kapitelziffer { margin-top: -0.06em; }
  .kapitelkopf__bild .foto--3-2 .foto__rahmen { aspect-ratio: 4 / 5; }
}
@media (max-width: 1023px) {
  .kapitelkopf__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; margin-top: 0.5rem; }
  .kapitelkopf .kapitelziffer { font-size: clamp(3.5rem, 2rem + 6vw, 5.5rem); }
}
@media (max-width: 599px) {
  .kapitelkopf__meta { grid-template-columns: 1fr; row-gap: 0; }
  .kapitelkopf__meta > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 0.8rem; }
  .kapitelkopf__meta > div:last-child { border-bottom: 1px solid var(--haarlinie); }
  .kapitelkopf__meta dd { margin-top: 0; overflow-wrap: break-word; }
}

/* ---------- Lesekörper mit Marginalien ---------- */
.lesekoerper { border-top: 1px solid var(--haarlinie); }
.abschnitt { padding-block: clamp(3rem, 2.25rem + 3vw, 5.5rem); border-top: 1px solid var(--haarlinie); }
.lesekoerper > .abschnitt:first-child { border-top: 0; }
.abschnitt .raster { align-items: stretch; }
.zitatband + .abschnitt { border-top: 0; }

/* Punkte, Sätze, Schritte */
.punkte { margin-top: 1.25rem; max-width: 62ch; }
.punkte li { position: relative; padding: 0.7rem 0 0.7rem 2rem; border-top: 1px solid var(--haarlinie); }
.punkte li:last-child { border-bottom: 1px solid var(--haarlinie); }
.punkte li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 0.9rem; height: 1px; background: var(--n5); }
.punkte--klein li { padding: 0.5rem 0 0.5rem 1.4rem; font-size: 0.9375rem; line-height: 1.5; }
.punkte--klein li::before { width: 0.6rem; top: 1.3em; }

.saetze { counter-reset: s; }
.saetze li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--haarlinie); font-family: var(--serif); font-size: var(--t-h3); line-height: 1.3; color: var(--kapitel); letter-spacing: -0.006em; }
.saetze li:last-child { border-bottom: 1px solid var(--haarlinie); }
.saetze__nr { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--meta); font-variant-numeric: tabular-nums; }
.saetze--klein li { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; color: var(--tinte); padding: 0.85rem 0; grid-template-columns: 2.25rem minmax(0, 1fr); }

.schritte li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0 1rem; padding: 1.25rem 0; border-top: 1px solid var(--haarlinie); }
.schritte li:last-child { border-bottom: 1px solid var(--haarlinie); }
.schritte__nr { font-family: var(--serif); font-size: 2.75rem; line-height: 0.9; color: var(--kapitel); font-variation-settings: "opsz" 72; }
.schritte .h4 { margin-bottom: 0.35rem; }
.schritte p { color: var(--tinte-2); }
@media (max-width: 599px) {
  .schritte li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0 0.75rem; }
  .schritte__nr { font-size: 2.25rem; }
}

/* Gründe, Wege, Erwartungen */
.gruende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--rinne); }
.gruende > div { border-top: 1px solid var(--haarlinie); padding: 1.25rem 0 1.5rem; min-width: 0; }
.gruende dd { margin-top: 0.5rem; color: var(--tinte-2); font-size: 1rem; line-height: 1.6; }
.gruende--eins { grid-template-columns: 1fr; }
.gruende--eins > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--rinne); }
.gruende--eins dd { margin-top: 0; }
.gruende--drei { grid-template-columns: 1fr; }
.lesetext--auftakt + .gruende { margin-top: 2rem; }
@media (max-width: 767px) {
  .gruende { grid-template-columns: 1fr; }
  .gruende--eins > div { grid-template-columns: 1fr; gap: 0.5rem; }
}
.regel { margin-top: 2rem; padding: 1.5rem 0 0 1.5rem; border-left: 2px solid var(--n7); font-family: var(--serif); font-size: var(--t-h3); line-height: 1.3; color: var(--kapitel); max-width: 34ch; }

/* Begriffe (Immobilien: Standort, Kapital ...) */
.begriffe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--n7); }
.begriffe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.begriffe li { padding: 0.9rem 1rem 0.9rem 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); color: var(--kapitel); min-width: 0; }
.begriffe li + li { padding-left: 1rem; border-left: 1px solid var(--haarlinie); }
.begriffe__nr { display: block; font-family: var(--sans); font-size: var(--t-marginalie); font-weight: 600; color: var(--meta); margin-bottom: 0.35rem; }
@media (max-width: 767px) {
  .begriffe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .begriffe--drei { grid-template-columns: 1fr; }
  .begriffe li:nth-child(3) { border-left: 0; padding-left: 0; }
  .begriffe li:nth-child(n + 3) { border-top: 1px solid var(--haarlinie); }
  .begriffe--drei li { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--haarlinie); }
  .begriffe--drei li:first-child { border-top: 0; }
}

/* Blöcke als Marginalien (Hausverwaltung, Grundsätze) */
.abschnitt--bloecke { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.abschnitt__einleitung { margin-bottom: 1.5rem; }
.abschnitt__einleitung .lesetext { margin-top: 1rem; }
.bloecke { counter-reset: b; }
.block { padding-block: 1.6rem; }
.bloecke > .block { border-top: 1px solid var(--haarlinie); }
.block .marg__titel { font-size: 1.125rem; }
.block .lesetext { font-size: 1.0625rem; }
@media (min-width: 1024px) {
  .bloecke > .block .haupt { padding-top: 1.35rem; }
}
@media (max-width: 1023px) {
  .block .marg { margin-bottom: 0.6rem; }
}

/* Vier Phasen (Immobilien) */
.phasen, .anruf, .gruende, .felder, .faelle, .standorte, .register, .index__inhalt, .begriffe, .vergleich, .matrix { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.phasen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--rinne); min-width: 0; }
.phasen__eintrag { border-top: 1px solid var(--n7); padding-top: 1rem; min-width: 0; }
.phasen__nr { display: block; font-family: var(--serif); font-size: clamp(3rem, 2rem + 3vw, 4.75rem); line-height: 1; color: var(--kapitel); font-variation-settings: "opsz" 72; margin-bottom: 1rem; }
.phasen__eintrag .h4 { margin-bottom: 0.5rem; }
.phasen__eintrag > p { font-size: 0.9375rem; line-height: 1.55; color: var(--tinte-2); }
.phasen .punkte { margin-top: 1rem; }
@media (min-width: 1024px) { .phasen { grid-column: 4 / 13; } }
@media (max-width: 1023px) {
  .phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}
@media (max-width: 599px) { .phasen { grid-template-columns: 1fr; } }

/* Fünfzehn Felder */
.abschnitt--felder .block { border-top: 1px solid var(--haarlinie); }
.felder { min-width: 0; }
.felder__eintrag { display: grid; grid-template-columns: 3rem minmax(0, 2fr) minmax(0, 3fr); gap: 0 1.25rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px dotted var(--haarlinie); }
.felder__eintrag:last-child { border-bottom: 0; }
.felder__nr { font-family: var(--serif); font-size: 1.375rem; color: var(--kapitel); font-variant-numeric: lining-nums tabular-nums; }
.felder__titel { font-weight: 600; color: var(--tinte); }
.felder__text { color: var(--tinte-2); font-size: 0.9375rem; line-height: 1.55; }
@media (min-width: 1024px) { .felder { grid-column: 4 / 13; } }
@media (max-width: 767px) {
  .felder__eintrag { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .felder__text { grid-column: 2; margin-top: 0.2rem; }
}

/* Anonymisierte Umsetzungen */
.faelle li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--rinne); padding: 1.4rem 0; border-top: 1px solid var(--haarlinie); }
.faelle li:last-child { border-bottom: 1px solid var(--haarlinie); }
.faelle__branche { font-size: 0.9375rem; color: var(--tinte); font-weight: 500; line-height: 1.45; }
.faelle__branche .marginalie { display: block; margin-bottom: 0.3rem; }
.faelle .h4 { margin-bottom: 0.4rem; }
.faelle p:not(.faelle__branche) { color: var(--tinte-2); font-size: 1rem; }
@media (max-width: 767px) { .faelle li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Telefonassistent */
.anruf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--rinne); counter-reset: a; }
.anruf li { position: relative; border-top: 1px solid var(--n7); padding-top: 1rem; min-width: 0; }
.anruf__nr { display: block; font-family: var(--serif); font-size: 2.25rem; line-height: 1; color: var(--kapitel); margin-bottom: 0.75rem; }
.anruf .h4 { margin-bottom: 0.4rem; }
.anruf p { font-size: 0.9375rem; color: var(--tinte-2); line-height: 1.55; }
.notiz { margin-top: 2.5rem; padding: 1.25rem 0 0; border-top: 1px dotted var(--n4); max-width: 62ch; }
.notiz .marginalie { margin-bottom: 0.4rem; }
.notiz p:last-child { color: var(--tinte-2); }
@media (max-width: 1023px) { .anruf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 599px) { .anruf { grid-template-columns: 1fr; } }

/* Deckungsmatrix (Signature, Gewerbe) */
.matrix-rahmen { min-width: 0; overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.matrix thead th { font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); text-align: center; padding: 0 0.75rem 0.9rem; border-bottom: 1px solid var(--n7); vertical-align: bottom; }
.matrix thead th:first-child { text-align: left; padding-left: 0; }
.matrix tbody th { text-align: left; font-weight: 500; padding: 0.8rem 0.75rem 0.8rem 0; border-bottom: 1px solid var(--haarlinie); color: var(--tinte); }
.matrix td { text-align: center; padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--haarlinie); transition: background-color var(--dur) var(--ease); }
.matrix__nr { display: inline-block; width: 2.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--meta); font-variant-numeric: tabular-nums; }
.matrix__punkt { display: inline-block; width: 9px; height: 9px; background: var(--n7); transform: rotate(45deg); }
.matrix tbody tr:hover th, .matrix tbody tr:hover td { background: var(--n1); }
.matrix:has(td:nth-child(2):hover) tr > :nth-child(2),
.matrix:has(td:nth-child(3):hover) tr > :nth-child(3),
.matrix:has(td:nth-child(4):hover) tr > :nth-child(4) { background: var(--n1); }
.matrix td:hover { background: var(--n2) !important; }
.matrix td:hover .matrix__punkt { background: var(--n5); }
/* Handy: Spaltenköpfe stehen senkrecht wie in einer gedruckten Matrix, die Sparte bekommt die Breite und bleibt ungetrennt */
@media (max-width: 599px) {
  .matrix thead th:not(:first-child) {
    writing-mode: vertical-rl; transform: rotate(180deg);
    white-space: nowrap; text-align: left; vertical-align: top;
    width: 2.75rem; padding: 0.9rem 0 0; font-size: 0.75rem; letter-spacing: 0.04em; line-height: 2.75rem;
  }
  .matrix td { width: 2.75rem; padding-inline: 0; }
  .matrix tbody th { padding-right: 0.5rem; padding-left: 1.9rem; text-indent: -1.9rem; line-height: 1.4; hyphens: manual; }
  .matrix__nr { width: 1.9rem; text-indent: 0; }
}
@media (max-width: 374px) {
  .matrix tbody th { padding-left: 0; text-indent: 0; hyphens: auto; -webkit-hyphens: auto; }
  .matrix__nr { display: block; }
}

/* Vergleich als Tabelle */
.vergleich { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 1rem var(--rinne) 1rem 0; border-bottom: 1px solid var(--haarlinie); font-size: 1rem; line-height: 1.55; }
.vergleich td + td, .vergleich th + th { padding-left: var(--rinne); border-left: 1px solid var(--haarlinie); }
.vergleich thead th { font-family: var(--serif); font-size: var(--t-h3); font-weight: 400; color: var(--kapitel); border-bottom: 1px solid var(--n7); padding-bottom: 1rem; }
.vergleich td:first-child { color: var(--tinte-2); }
.vergleich tfoot td { font-family: var(--serif); font-size: 1.375rem; color: var(--kapitel); border-bottom: 0; padding-top: 1.25rem; }
.vergleich tfoot td:first-child { color: var(--tinte-2); }
/* Handy: zwei Spalten à 150 px wären nur Silbentrennung. Jede Zeile wird ein Paar, die Spaltennamen stehen als Marginalie davor. */
@media (max-width: 599px) {
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich td { display: block; width: 100%; }
  .vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vergleich tbody tr { padding: 1rem 0 1.1rem; border-top: 1px solid var(--haarlinie); }
  .vergleich tbody tr:first-child { border-top: 1px solid var(--n7); }
  .vergleich tbody td, .vergleich tbody td + td { padding: 0; border: 0; }
  .vergleich tbody td + td { margin-top: 0.85rem; padding-left: 0.9rem; border-left: 2px solid var(--n7); }
  .vergleich tbody td::before { content: attr(data-label); display: block; margin-bottom: 0.2rem; font-size: var(--t-marginalie); font-weight: 600; letter-spacing: 0.06em; color: var(--meta); }
  .vergleich tfoot { display: table; width: 100%; table-layout: fixed; border-top: 1px solid var(--n7); }
  .vergleich tfoot tr { display: table-row; }
  .vergleich tfoot td { display: table-cell; font-size: 1.1875rem; padding-right: 0.75rem; }
  .vergleich tfoot td + td { padding-left: 0.9rem; }
}

/* Preisangabe (Website und SEO) */
.preis { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: var(--rinne); }
.preis__kopf { border-top: 2px solid var(--n7); padding-top: 1.25rem; }
.preis__betrag { font-family: var(--serif); font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 1; color: var(--kapitel); letter-spacing: -0.03em; margin: 0.75rem 0 0.5rem; font-variant-numeric: lining-nums; }
.preis__zusatz { color: var(--tinte-2); max-width: 26ch; margin-bottom: 2rem; }
.preis__liste { border-top: 1px solid var(--haarlinie); padding-top: 1.25rem; }
.preis__liste .marginalie { margin-bottom: 0.5rem; }
@media (max-width: 767px) { .preis { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Budgetfresser */
.budget li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--haarlinie); font-size: 1.125rem; }
.budget li:last-child { border-bottom: 1px solid var(--haarlinie); }
.budget__nr { font-family: var(--serif); font-size: 2.5rem; line-height: 0.9; color: var(--kapitel); }

/* Fragen */
.fragen { border-top: 1px solid var(--haarlinie); }
.frage { border-bottom: 1px solid var(--haarlinie); }
.frage summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.2rem 0; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.3125rem; line-height: 1.3; color: var(--kapitel); min-height: 44px; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage p { padding: 0 3rem 1.4rem 0; color: var(--tinte-2); max-width: 62ch; }

/* Referenz */
.referenz .marginalie { margin-bottom: 0.6rem; }

/* Verwandte Kapitel und Blättern */
.abschnitt--verwandt { padding-bottom: 0; }
.blaettern { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--n7); }
.blaettern__link { display: block; padding: 1.5rem 0 clamp(3rem, 2rem + 3vw, 5rem); text-decoration: none; color: var(--kapitel); min-width: 0; }
.blaettern__link--nach { text-align: right; border-left: 1px solid var(--haarlinie); padding-left: 1.5rem; }
.blaettern__link--vor { padding-right: 1.5rem; }
.blaettern__titel { display: block; margin-top: 0.4rem; font-family: var(--serif); font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.625rem); line-height: 1.25; text-wrap: balance; }
@media (max-width: 599px) {
  .blaettern { grid-template-columns: 1fr; }
  .blaettern__link { padding: 1.25rem 0; }
  .blaettern__link--nach { text-align: left; border-left: 0; border-top: 1px solid var(--haarlinie); padding-left: 0; padding-bottom: 3rem; }
}
.blaettern__link:hover .blaettern__titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Kontakt: Koordinaten */
.koordinaten { display: flex; gap: 2.5rem; margin-top: 1.75rem; }
.koordinaten dd { font-family: var(--serif); font-size: 1.375rem; color: var(--kapitel); margin-top: 0.2rem; }

/* Recht */
.angaben { margin-top: 1.25rem; max-width: 62ch; }
.angaben > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--haarlinie); }
.angaben > div:last-child { border-bottom: 1px solid var(--haarlinie); }
.angaben dt { font-size: 0.9375rem; color: var(--meta); font-weight: 500; }
.angaben dd { font-size: 1rem; }
@media (max-width: 599px) { .angaben > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.nachweisliste { margin: 1.25rem 0 1.5rem; max-width: 72ch; }
.nachweisliste li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--haarlinie); font-size: 0.9375rem; line-height: 1.5; }
.nachweisliste li:last-child { border-bottom: 1px solid var(--haarlinie); }
.nachweisliste li span:first-child { color: var(--tinte-2); }
@media (max-width: 599px) { .nachweisliste li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* Datenschutz: Zwischentitel in die Marginalienspalte, nummeriert */
.datenschutz { padding-block: 0 var(--sektion); border-top: 1px solid var(--haarlinie); padding-top: clamp(3rem, 2rem + 3vw, 5rem); counter-reset: ds; }
.recht-text { max-width: 62ch; font-size: 1.0625rem; }
.recht-text p, .recht-text ul, .recht-text ol { margin-bottom: 1rem; }
.recht-text ul { list-style: disc; padding-left: 1.25rem; }
.recht-text ol { list-style: decimal; padding-left: 1.25rem; }
.recht-text h2 { text-wrap: balance; counter-increment: ds; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--kapitel); margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--haarlinie); }

.recht-text h3, .recht-text h4 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--tinte); }
.recht-text a { word-break: break-word; }


/* ---------- Inhaltsverzeichnis als Blatt (Overlay) ---------- */
.verzeichnis {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(248, 250, 253, 0.97);
  overflow-y: auto; overscroll-behavior: contain;
  view-transition-name: verzeichnis;
}
@supports (backdrop-filter: blur(8px)) {
  .verzeichnis { background: rgba(248, 250, 253, 0.985); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
.verzeichnis[hidden] { display: none; }
.verzeichnis__kopf { position: sticky; top: 0; z-index: 1; height: var(--kopf-h); border-bottom: 1px solid var(--haarlinie); background: rgba(248, 250, 253, 0.98); }
.verzeichnis__kopfinnen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.verzeichnis__zu { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--tinte); }
.verzeichnis__zu svg { width: 14px; height: 14px; }
.verzeichnis__zu:hover { color: var(--n7); }
.verzeichnis__blatt { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); padding-block: clamp(2rem, 1.5rem + 3vw, 4.5rem) 4rem; }
.verzeichnis__titel { font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: 400; color: var(--kapitel); line-height: 1.1; margin: 0.5rem 0 2rem; letter-spacing: -0.012em; }
.vz-kapitel > li { border-top: 1px solid var(--haarlinie); }
.vz-kapitel > li:last-child { border-bottom: 1px solid var(--haarlinie); }
.vz-kapitel summary { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 1rem 0 0.6rem; list-style: none; cursor: pointer; min-height: 44px; }
.vz-kapitel summary::-webkit-details-marker { display: none; }
.vz-kapitel__nr { font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--kapitel); font-variant-numeric: lining-nums; }
.vz-kapitel__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); color: var(--kapitel); line-height: 1.25; }
.vz-kapitel__pfeil { width: 12px; height: 12px; color: var(--meta); transition: transform var(--dur) var(--ease); align-self: center; }
.vz-kapitel details[open] .vz-kapitel__pfeil { transform: rotate(180deg); }
.vz-kapitel .leiter { padding: 0 0 0.9rem 4rem; }
.vz-kapitel .leiter__zeile { padding: 0.4rem 0; min-height: 36px; }
.vz-kapitel .leiter__name { font-size: 1rem; }
.verzeichnis__spalte--neben > .marginalie { margin-bottom: 0.75rem; }
.verzeichnis__spalte--neben > .marginalie:not(:first-child) { margin-top: 2.5rem; }
.vz-anlaesse li { border-top: 1px solid var(--haarlinie); }
.vz-anlaesse li:last-child { border-bottom: 1px solid var(--haarlinie); }
.vz-anlaesse a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; min-height: 44px; text-decoration: none; color: var(--tinte); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.35; }
.vz-anlaesse a:hover { color: var(--n7); }
.vz-anlaesse__weg { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--kapitel); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.leiter--anhang .leiter__zeile { padding: 0.45rem 0; min-height: 40px; }
.leiter--anhang .leiter__name { font-size: 1rem; }
.vz-fuss { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.vz-fuss p { font-size: 0.875rem; line-height: 1.5; color: var(--tinte-2); }
.vz-fuss p a { font-weight: 600; color: var(--tinte); text-decoration: none; }
@media (min-width: 1024px) {
  .vz-kapitel summary { pointer-events: none; cursor: default; }
  .vz-kapitel__pfeil { display: none; }
}
@media (max-width: 1023px) {
  .verzeichnis__blatt { grid-template-columns: 1fr; gap: 3rem; }
  .vz-kapitel .leiter { padding-left: 0; }
  .vz-kapitel summary { grid-template-columns: 2.75rem minmax(0, 1fr) auto; padding: 0.9rem 0; }
  .vz-kapitel__nr { font-size: 1.375rem; }
}

/* ---------- Lightbox ---------- */
.leuchte { width: min(100vw - 2rem, 980px); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: var(--n0); color: var(--tinte); overflow: hidden; }
.leuchte::backdrop { background: rgba(3, 17, 34, 0.78); }
.leuchte__blatt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 2rem); }
.leuchte__kopf { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--haarlinie); }
.leuchte__zu { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.9375rem; font-weight: 600; }
.leuchte__zu svg { width: 14px; height: 14px; }
.leuchte__figur { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; padding: 1.25rem; min-height: 0; overflow: auto; }
.leuchte__figur img { width: 100%; height: auto; max-height: calc(100dvh - 12rem); object-fit: contain; background: var(--n1); border: 1px solid var(--haarlinie); }
.leuchte__figur figcaption { align-self: end; }
.leuchte__titel { display: block; font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--kapitel); }
.leuchte__zeile { display: block; margin-top: 0.6rem; color: var(--tinte-2); font-size: 0.9375rem; }
.leuchte__nav { display: flex; justify-content: space-between; padding: 0.5rem 1.25rem; border-top: 1px solid var(--haarlinie); }
.leuchte__nav button { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-size: 0.9375rem; font-weight: 600; color: var(--link); }
.leuchte__nav button svg { width: 16px; height: 10px; }
.leuchte__kurz { display: none; }
@media (max-width: 599px) { .leuchte__lang { display: none; } .leuchte__kurz { display: inline; } }
.leuchte__nav button:hover { color: var(--n6); }
@media (max-width: 767px) {
  .leuchte__figur { grid-template-columns: 1fr; }
  .leuchte__figur img { max-height: calc(100dvh - 17rem); }
  .leuchte__nav button { font-size: 0.875rem; }
}

/* ---------- Fußzeile ---------- */
.fuss { padding-block: clamp(4rem, 3rem + 3vw, 6rem) 2rem; font-size: 0.9375rem; line-height: 1.6; }
.fuss__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--haarlinie); }
.fuss__logo { height: 38px; width: auto; }
.fuss__claim { max-width: 46ch; color: var(--n3); font-family: var(--serif); font-size: 1.125rem; line-height: 1.45; }
.fuss__bloecke { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr); gap: var(--rinne); padding-block: 2.5rem; }
.fuss__block .marginalie { margin-bottom: 0.9rem; color: var(--n4); }
.fuss__block address, .fuss__block p { color: var(--n2); }
.fuss__block p { margin-top: 0.9rem; }
.fuss a { color: var(--n0); text-decoration-color: rgba(248, 250, 253, 0.3); }
.fuss a:hover { color: #fff; text-decoration-color: #fff; }
.fuss__leise { color: var(--n3); }
.fuss__liste li + li { margin-top: 0.35rem; }
.fuss__liste--zwei a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); }
.fuss__liste a { text-decoration: none; }
@media (max-width: 1023px), (pointer: coarse) {
  .fuss__liste li + li { margin-top: 0; }
  .fuss__liste a { display: flex; align-items: center; min-height: 44px; }
  .fuss__liste--zwei a { display: grid; align-items: center; }
}
.fuss__liste a:hover { text-decoration: underline; }
.fuss__liste--zwei { columns: 2; column-gap: var(--rinne); }
.fuss__liste--zwei li { break-inside: avoid; }
.fuss__nr { color: var(--n4); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.fuss__kolophon { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--haarlinie); font-size: 0.8125rem; color: var(--n4); padding-bottom: 1rem; }
@media (max-width: 1279px) {
  .fuss__bloecke { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .fuss__block--breit { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 599px) {
  .fuss__bloecke { grid-template-columns: 1fr; }
  .fuss__block--breit { grid-row: auto; }
  .fuss__liste--zwei { columns: 1; }
}

/* ---------- Bewegung: Reveal, nur mit JavaScript und ohne reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  html.js .logoraster [data-reveal] { transition-delay: calc(var(--i, 0) * 30ms); }
  html.js [data-reveal].ist-da { opacity: 1; transform: none; }
  .foto--einblenden img { animation: einblenden 600ms var(--ease) both; }
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Seitenwechsel per View Transition: der Inhalt fährt 12 px auf. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 160ms var(--ease) both vt-aus; }
  ::view-transition-new(root) { animation: 220ms var(--ease) both vt-ein; }
  /* Inhaltsverzeichnis: fährt wie ein Blatt von oben ein. */
  ::view-transition-new(verzeichnis) { animation: 260ms var(--ease) both blatt-ein; }
  ::view-transition-old(verzeichnis) { animation: 220ms var(--ease) both blatt-aus; }
  html.vt-blatt::view-transition-old(root), html.vt-blatt::view-transition-new(root) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; transform: translateY(12px); } }
@keyframes blatt-ein { from { transform: translateY(-100%); } }
@keyframes blatt-aus { to { transform: translateY(-100%); } }

/* Druck */
@media print {
  .kopf, .verzeichnis, .erstgespraech, .blaettern { display: none !important; }
  .foto__rahmen::before, .foto__rahmen::after { display: none; }
  body { font-size: 11pt; }
}

/* Ortsnamen nie trennen, lieber kleiner setzen */
.standorte__ort { hyphens: none; -webkit-hyphens: none; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); }
.register td { hyphens: manual; }

/* Handy quer: wenig Höhe, Titel und Vorspann gehören in den ersten Schirm und nicht hinter die Vorschauleiste */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
  .titelseite__text { padding-top: 1.5rem; }
  .titelseite__zeile { margin-bottom: 1.25rem; padding-bottom: 0.75rem; }
  .h-titel { font-size: 2.75rem; }
  .titelseite__vorspann { margin-top: 1rem; }
  .kapitelkopf { padding-top: 1.5rem; }
  .kapitelkopf .raster { row-gap: 1rem; }
  .kapitelkopf .kapitelziffer { font-size: 3rem; }
  .pfad { margin-bottom: 0.5rem; }
  .kolumnentitel { margin-bottom: 0.75rem; }
}

/* Zweitschrift: am Schreibtisch 15 px als leise Stimme, auf Handy und Tablet nie unter 16 px */
@media (max-width: 1023px) {
  .marg__text, .index__text, .leiter__kurz, .phasen__eintrag > p, .anruf p, .felder__text,
  .grundlagen dd, .register__text, .vergleich td, .vergleich th, .initial p:last-child,
  .standorte__block, .kapitelkopf__meta dd, .anlaesse__weg, .faelle p:not(.faelle__branche), .gruende dd { font-size: 1rem; }
  .formular__hinweis { font-size: 0.9375rem; }
}