/* Kristall-Lesehuelle (01.11.2026): Dokumentation, spaeter Newsroom und Rechtliches.
   Laedt NACH kristall-tokens.css und kristall-seite.css (Kopf und Fuss der Unterseiten). Ruhige Leseseiten nach
   MASTER.md, Zeile «Doku, Newsroom, Recht»: Grund und Flaechen deckend, Karten mit einfarbigem Glasrand, Radius 12 px,
   Farbe nur als Licht (Kopf-Linie, aktive Marke, Fokus). Kein Spektrum auf Fliesstext.

   Die Doku-Themenseiten bringen je ein eigenes <style> mit und malen mit den Tokens aus docs-shell.css
   (--ink, --panel, --paper, --g1..3, --rule ...). Darum hebt diese Datei zuerst diese Tokens auf den Kristall-Grund:
   so folgen alle 75 Gestaltungen, ohne dass eine einzige Seite ihr Markup aendern muss. */

/* ---------- 1. Doku-Tokens auf Kristall (nur Bildschirm; der Druck behaelt seine helle Palette) ---------- */
@media screen {
  .ds.kd {
    --ink: var(--zl-k-nacht);           /* #020619 */
    --panel: #0c1021;                    /* Lesekarte */
    --raised: #10162b;                   /* Hover der Karten */
    --kd-aktiv: rgba(242, 242, 240, .05); /* aktive Zeile in Baum, Rail, Gruppenleiste: Kante + Text, Flaeche nur angedeutet */
    --paper: #f2f2f0;
    --g1: #b9bccb;                       /* 10.7:1 auf ink, 10.0:1 auf panel */
    --g2: #9a9db0;                       /* 7.4:1 auf ink, 7.0:1 auf panel */
    --g3: #8b8ea3;                       /* 6.2:1 auf ink, 5.8:1 auf panel */
    --rule: #30374e;
    --rule-soft: #252b40;
    --kd-linie: #252b40;                 /* Trennlinien */
    --kd-rand: #30374e;                  /* Kartenrand */
    --kd-rand-stark: var(--zl-k-glas-rand-stark);
    --kd-feld: #606579;                  /* Feldrand, 3.3:1 auf panel (UI >= 3) */
    --kd-kopf: var(--m-kopf-h, 73px);
    --kd-pad: var(--m-pad, clamp(16px, 4.4vw, 64px));
    --kd-mono: var(--mono, 'Geist Mono', ui-monospace, monospace);
    background: var(--ink);
    color: var(--paper);
    font-size: 17px;
    line-height: 1.65;
    overflow-x: clip;
  }
  /* stable wie landing-v4.css auf den uebrigen Kristall-Seiten: der Kopf springt beim Wechsel nicht um die Scrollbalkenbreite. */
  html:has(body.kd) { scrollbar-gutter: stable; background: var(--zl-k-nacht); scroll-padding-top: calc(var(--m-kopf-h, 73px) + 24px); }
}

/* Kopf und Fuss stehen in einem .k-seite-Rahmen (siehe tools/docs-build.mjs): nur dort gelten die Grundregeln der
   Unterseiten. Der Rahmen selbst traegt nichts. */
.kd-kopf, .kd-fuss { display: contents; }
.kd .kd-fuss .m-fuss { margin-top: 72px; }
.kd .kd-vh, .kd .dx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kd .kd-mono-t { font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }

/* ---------- 2. Suchfeld (Baum und Uebersicht) ---------- */
.kd .kd-suche { position: relative; display: flex; align-items: center; max-width: 100%; }
.kd .kd-suche input {
  width: 100%; height: 52px; margin: 0; padding: 0 48px 0 42px;
  font: 400 17px/1.2 var(--m-font, 'Barlow', system-ui, sans-serif); letter-spacing: 0; color: var(--paper);
  background: var(--panel); border: 1px solid var(--kd-feld); border-radius: 10px;
  transition: border-color var(--zl-k-dauer) var(--zl-k-ease);
  -webkit-appearance: none; appearance: none;
}
.kd .kd-suche input::placeholder { color: var(--g1); opacity: 1; }
.kd .kd-suche input:hover { border-color: #7d8297; }
.kd .kd-suche input:focus-visible { outline: 2px solid var(--zl-k-akzent); outline-offset: 2px; border-color: var(--zl-k-akzent); }
.kd .kd-suche input::-webkit-search-cancel-button { filter: invert(.8); }
.kd .kd-lupe { position: absolute; left: 16px; width: 16px; height: 16px; fill: none; stroke: var(--g1); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; }
.kd .kd-taste {
  position: absolute; right: 14px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px;
  font: 400 13px/1 var(--kd-mono); color: var(--g1); background: #14192d; border: 1px solid #454b61; border-radius: 4px;
  pointer-events: none;
}
.kd .kd-suche input:focus + .kd-taste, .kd .kd-suche input:not(:placeholder-shown) + .kd-taste { display: none; }
/* Im Baum ohne Tastenhinweis: das Feld ist dort zu schmal fuer Platzhalter und Taste (Kritik r1). */
.kd .kd-seite .kd-suche input { height: 48px; padding: 0 12px 0 38px; font-size: 16px; }
.kd .kd-seite .kd-lupe { left: 13px; }
.kd .kd-seite .kd-taste { display: none; }

/* ---------- 3. Themenseite: Baum | Spalte | On this page ---------- */
.kd .kd-rahmen {
  display: grid; grid-template-columns: 240px minmax(0, 660px) minmax(140px, 1fr); column-gap: 48px; align-items: start;
  max-width: 1440px; margin: 0 auto; padding: var(--kd-kopf) var(--kd-pad) 0; box-sizing: border-box;
}

/* Baum */
.kd .kd-seite { position: sticky; top: calc(var(--kd-kopf) + 24px); min-width: 0; margin-top: 48px;
  border-right: 1px solid var(--kd-linie); padding-right: 24px; }
.kd .kd-baum {
  max-height: calc(100vh - var(--kd-kopf) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 0 0 24px;
  scrollbar-width: thin; scrollbar-color: #30374e transparent;
}
.kd .kd-baum-knopf { display: none; }
.kd .kd-zurueck {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 14px;
  font-size: 15px; color: var(--g1); text-decoration: none;
}
.kd .kd-zurueck:hover { color: var(--paper); }
.kd .kd-seite .kd-suche { margin-bottom: 22px; }
.kd .kd-themen { display: grid; gap: 0; }
.kd .kd-grp > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px;
  font-size: 15px; line-height: 1.4; color: var(--g1); cursor: pointer; list-style: none;
  transition: color var(--zl-k-dauer) var(--zl-k-ease);
}
.kd .kd-grp > summary::-webkit-details-marker { display: none; }
.kd .kd-grp > summary::after { content: "+"; flex: none; width: 14px; text-align: center; font: 400 12px/1 var(--kd-mono); color: var(--g1); }
.kd .kd-grp[open] > summary::after { content: "−"; }
.kd .kd-grp > summary:hover, .kd .kd-grp:has([aria-current]) > summary { color: var(--paper); }
.kd .kd-grp ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; }
.kd .kd-grp li a {
  display: block; padding: 7px 12px; border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
  font-size: 14px; line-height: 1.5; color: var(--g1); text-decoration: none;
  transition: color var(--zl-k-dauer) var(--zl-k-ease), background-color var(--zl-k-dauer) var(--zl-k-ease);
}
.kd .kd-grp li a:hover { color: var(--paper); }
.kd .kd-grp li a[aria-current="page"] { color: var(--paper); background: var(--kd-aktiv); border-left-color: var(--zl-k-akzent); }

/* Mittelspalte. Seiten setzen .ds-main { max-width } fuer sich selbst; im Rahmen bestimmt das Raster die Breite. */
.ds.kd .kd-spalte { max-width: none; margin: 0; padding: 48px 0 0; min-width: 0; }
.kd .kd-krume { margin: 0 0 42px; }
.kd .kd-krume ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none;
  font: 400 12px/1.6 var(--kd-mono); color: var(--g1); }
.kd .kd-krume li { display: inline-flex; align-items: center; gap: 10px; }
.kd .kd-krume li + li::before { content: "/"; color: var(--g1); }
.kd .kd-krume a { color: var(--g1); text-decoration: none; }
.kd .kd-krume a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.kd .kd-krume [aria-current] { color: var(--g1); }

/* On this page */
.kd .kd-rail { min-width: 0; }
.kd nav.kd-rail { position: sticky; top: calc(var(--kd-kopf) + 24px); max-height: calc(100vh - var(--kd-kopf) - 24px); overflow-y: auto; padding: 0 0 24px; }
.kd .kd-rail-t { margin: 100px 0 18px; font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.kd .kd-rail ol { list-style: none; margin: 0; padding: 0; display: grid; }
.kd .kd-rail a {
  display: block; padding: 8px 0 8px 14px; border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
  font-size: 14px; line-height: 1.5; color: var(--g1); text-decoration: none;
  transition: color var(--zl-k-dauer) var(--zl-k-ease), background-color var(--zl-k-dauer) var(--zl-k-ease);
}
.kd .kd-rail a:hover { color: var(--paper); }
.kd .kd-rail a[aria-current="true"] { color: var(--paper); background: var(--kd-aktiv); border-left-color: var(--zl-k-akzent); }

/* Vorheriges / Naechstes und die Rueckmeldezeile */
.ds.kd .kd-nachbarn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: none; margin: 56px 0 0; padding: 30px 0 0;
  border-top: 1px solid var(--kd-linie); border-image: none;
}
.ds.kd .kd-nachbarn a {
  display: block; padding: 20px; background: var(--panel); border: 1px solid var(--kd-rand); border-radius: 12px;
  color: var(--paper); text-decoration: none; transition: border-color var(--zl-k-dauer) var(--zl-k-ease);
}
.ds.kd .kd-nachbarn a:hover { border-color: var(--kd-rand-stark); }
.ds.kd .kd-nachbarn i { display: block; margin-bottom: 12px; font: 400 12px/1.4 var(--kd-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--g1); font-style: normal; }
.ds.kd .kd-nachbarn b { display: block; font-size: 18px; line-height: 1.4; font-weight: 600; }
.ds.kd .kd-nachbarn .ds-next { text-align: left; }
.ds.kd .kd-fein { max-width: none; margin: 32px 0 0; padding: 0; font-size: 15px; line-height: 1.8; color: var(--g1); }
.ds.kd .kd-fein a { color: var(--zl-k-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--zl-k-link-unterstrich-farbe); }
.ds.kd .kd-fein a:hover { color: var(--zl-k-link-hover); text-decoration-color: currentColor; }

/* Diagramme im Kristall-Rahmen: Karte statt Haarlinienkasten, Titel als Mono-Etikett oben links. */
.ds.kd .doc-diagram { margin: 0; scroll-margin-top: calc(var(--kd-kopf) + 24px); }
.ds.kd .doc-diagram .dg-scroll {
  background: var(--panel); border: 1px solid var(--kd-rand); border-radius: 12px; padding: 20px;
  scrollbar-color: #727994 #171d30;
  --ink: var(--panel);                 /* mermaid malt Kantenetiketten in --ink: auf der Karte gleich dem Grund */
}
.ds.kd .doc-diagram .dg-titel { margin: 0 0 18px; font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.ds.kd .doc-diagram figcaption { margin-top: 14px; font-family: inherit; font-size: 13px; line-height: 1.65; letter-spacing: 0; color: var(--g1); max-width: 68ch; }
.ds.kd .doc-diagram .dg-text { margin-top: 12px; font-size: 14px; color: var(--zl-k-akzent); }
.ds.kd .doc-diagram .dg-text summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0; cursor: pointer;
  font: 400 14px/1.4 var(--m-font, 'Barlow', sans-serif); letter-spacing: 0; text-transform: none; color: var(--zl-k-akzent); }
.ds.kd .doc-diagram .dg-text summary:hover { color: var(--zl-k-cyan-hell); }
.ds.kd .doc-diagram .dg-text summary::-webkit-details-marker { display: none; }
.ds.kd .doc-diagram .dg-text summary::before { content: ""; width: 0; height: 0; margin-right: 8px; border-block: 4px solid transparent; border-left: 6px solid currentColor;
  transition: transform var(--zl-k-dauer) var(--zl-k-ease); }
.ds.kd .doc-diagram .dg-text[open] summary::before { transform: rotate(90deg); }

/* Fliesstext-Links der Themenseiten: immer unterstrichen (MASTER: Links im Text tragen die Linie). Nur Links ohne eigene
   Klasse in Absatz, Liste, Tabelle -- gestaltete Verweise (Karten, Knoepfe) behalten ihre Form. */
.ds.kd .kd-spalte :is(p, li, dd, td) > a:not([class]),
.ds.kd .kd-spalte :is(p, li, dd, td) > :is(b, strong, em, span) > a:not([class]) {
  color: var(--zl-k-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: var(--zl-k-link-unterstrich-farbe);
}
.ds.kd .kd-spalte :is(p, li, dd, td) > a:not([class]):hover { color: var(--zl-k-link-hover); text-decoration-color: currentColor; }
.ds.kd .doc-diagram .dg-text li { color: var(--g1); margin: 8px 0; }
.ds.kd .doc-diagram:focus-within .dg-scroll { border-color: var(--kd-rand-stark); }
/* Ab 900 px passt jedes Diagramm in die 660-px-Spalte statt waagrecht zu scrollen (Beschriftungen bleiben >= 10 px). */
@media (min-width: 900px) { .ds.kd .doc-diagram svg { min-width: 0; } }
/* Hochformat fuer schmale Bildschirme (docs-src/diagrams/<slug>.mobil.svg): breit das Querformat, schmal das Hochformat. */
.ds.kd .doc-diagram .dg-hoch { display: none; }
.ds.kd .doc-anatomy .da-plate { border-radius: 12px; }

/* ---------- 4. Uebersicht /docs ---------- */
.ds.kd .dx-main { max-width: 1440px; margin: 0 auto; padding: var(--kd-kopf) var(--kd-pad) 0; box-sizing: border-box; }
.kd .dx-head { display: grid; grid-template-columns: minmax(0, 1fr) 500px; align-items: center; gap: 64px; min-height: 488px; padding: 0; border: 0; }
.kd .dx-kopftext { min-width: 0; }
.kd .dx-kicker { margin: 0 0 20px; font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--zl-k-cyan-hell); }
.kd .dx-head h1 { margin: 0; font-size: 72px; font-weight: 600; letter-spacing: -.024em; line-height: 1.1; text-wrap: balance; }
.kd .dx-lede { margin: 20px 0 28px; max-width: 650px; font-size: 22px; line-height: 1.6; color: var(--g1); }
.kd .dx-search { display: flex; max-width: 650px; }
.kd .dx-count { min-height: 0; margin: 10px 0 0; font: 400 12px/1.5 var(--kd-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--g1); }
.kd .dx-count:empty { margin: 0; }
.kd .dx-bild { margin: 0; width: 100%; }
.kd .dx-bild img { display: block; width: 100%; height: auto; mix-blend-mode: screen;
  /* Blender-Render auf fast schwarzem Grund: screen loest den Grund, die weiche Ellipse die Bildkante. */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 70%, transparent 100%); }

.kd .dx-raster { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 40px; border-top: 1px solid var(--kd-linie); }
.kd .dx-leiste { position: relative; }
.kd .dx-leiste-inner { position: sticky; top: calc(var(--kd-kopf) + 24px); padding: 38px 20px 24px 0; border-right: 1px solid var(--kd-linie); }
.kd .dx-leiste-t { margin: 0 0 16px; font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }
.kd .dx-leiste ul { list-style: none; margin: 0; padding: 0; display: grid; }
.kd .dx-leiste a {
  display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-left: 2px solid transparent; border-radius: 0 5px 5px 0;
  font-size: 16px; color: var(--g1); text-decoration: none;
  transition: color var(--zl-k-dauer) var(--zl-k-ease), background-color var(--zl-k-dauer) var(--zl-k-ease);
}
.kd .dx-leiste a:hover { color: var(--paper); }
.kd .dx-leiste a[aria-current="true"] { color: var(--paper); background: var(--kd-aktiv); border-left-color: var(--zl-k-akzent); }
.kd .dx-inhalt { min-width: 0; }

.ds.kd .dx-grp { margin: 40px 0 0; padding: 48px 0 0; border-top: 1px solid var(--kd-linie); scroll-margin-top: calc(var(--kd-kopf) + 24px); }
.ds.kd .dx-grp:first-child { margin-top: 0; border-top: 0; }
.kd .dx-grp-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 20px; }
.ds.kd .dx-grp h2 { margin: 0; font: 600 28px/1.2 var(--m-font, 'Barlow', sans-serif); letter-spacing: -.024em; text-transform: none; color: var(--paper); }
.kd .dx-grp-zahl { flex: none; white-space: nowrap; font: 400 12px/1.6 var(--kd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--g1); }

.ds.kd .dx-grp ul, .ds.kd .dx-results ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ds.kd .dx-grp a, .ds.kd .dx-results a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 10px; height: 100%; min-height: 118px; box-sizing: border-box;
  padding: 16px 18px; background: var(--panel); border: 1px solid var(--kd-rand); border-radius: 12px;
  color: var(--paper); text-decoration: none;
  transition: border-color var(--zl-k-dauer) var(--zl-k-ease), background-color var(--zl-k-dauer) var(--zl-k-ease);
}
.ds.kd .dx-grp a:hover, .ds.kd .dx-results a:hover { border-color: var(--kd-rand-stark); background: var(--raised); }
.ds.kd .dx-grp a:focus-visible, .ds.kd .dx-results a:focus-visible { outline: 2px solid var(--zl-k-akzent); outline-offset: 2px; }
.ds.kd .dx-grp b, .ds.kd .dx-results b { grid-column: 1; grid-row: 1; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.kd .kd-pfeil { grid-column: 2; grid-row: 1; width: 14px; height: 14px; margin-top: 4px; fill: none; stroke: var(--g1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--zl-k-dauer) var(--zl-k-ease), stroke var(--zl-k-dauer) var(--zl-k-ease); }
.kd .dx-grp a:hover .kd-pfeil { stroke: var(--paper); transform: translateX(2px); }
.ds.kd .dx-grp span, .ds.kd .dx-results span {
  grid-column: 1 / -1; margin-top: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 15px; line-height: 1.45; color: var(--g1);
}
.ds.kd .dx-results { padding: 40px 0 0; }
.ds.kd .dx-results i { grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; font: 400 11px/1.3 var(--kd-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--g1); font-style: normal; }
.ds.kd .dx-results i ~ b { grid-row: 2; }
.ds.kd .dx-results span { -webkit-line-clamp: 3; line-clamp: 3; }
.ds.kd .dx-results mark { background: rgba(var(--zl-k-akzent-rgb), .28); color: var(--paper); border-radius: 2px; }
.ds.kd .dx-none { color: var(--g1); font-size: 17px; }
.ds.kd .dx-main > .kd-fein { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--kd-linie); }

/* ---------- 5. Schmalere Bildschirme ---------- */
@media (max-width: 1199px) {
  .kd .kd-rahmen { grid-template-columns: 220px minmax(0, 660px); column-gap: 32px; padding-inline: 40px; }
  .kd .kd-rail { display: none; }
  .kd .dx-head { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .ds.kd .dx-grp ul, .ds.kd .dx-results ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .kd .dx-raster { display: block; }
  .kd .dx-leiste { border-right: 0; }
  .kd .dx-leiste-inner { position: static; padding: 20px 0; border-right: 0; }
  .kd .dx-leiste-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .kd .dx-leiste ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .kd .dx-leiste ul::-webkit-scrollbar { display: none; }
  .kd .dx-leiste a { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--kd-rand); border-radius: 20px; white-space: nowrap; }
  .kd .dx-leiste a[aria-current="true"] { border-color: var(--zl-k-akzent); border-radius: 20px; }
  .ds.kd .dx-grp:first-child { padding-top: 28px; }
}
@media (max-width: 899px) {
  .kd .kd-rahmen { display: block; padding: var(--kd-kopf) 20px 0; }
  .kd .kd-seite { position: static; margin-top: 24px; border-right: 0; padding: 0; }
  .kd .kd-baum { max-height: none; overflow: visible; padding: 0; border: 1px solid #454b61; border-radius: 8px; background: var(--panel); }
  .kd .kd-baum-knopf { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 16px; color: var(--paper); }
  .kd .kd-baum-knopf::-webkit-details-marker { display: none; }
  .kd .kd-baum-knopf i { width: 7px; height: 7px; border-right: 1px solid var(--g1); border-bottom: 1px solid var(--g1); transform: translateY(-2px) rotate(45deg); transition: transform var(--zl-k-dauer) var(--zl-k-ease); }
  .kd .kd-baum[open] .kd-baum-knopf i { transform: translateY(2px) rotate(-135deg); }
  .kd .kd-baum[open] { padding: 0 16px 12px; }
  .kd .kd-baum[open] .kd-baum-knopf { margin: 0 -16px 8px; }
  .ds.kd .kd-spalte { padding-top: 28px; }
  .kd .kd-krume { margin-bottom: 32px; }
  .kd .kd-krume ol { font-size: 11px; gap: 4px 8px; }
  .kd .kd-krume li { gap: 8px; }
  .ds.kd .kd-nachbarn { grid-template-columns: 1fr; gap: 12px; }
  .ds.kd .doc-diagram .dg-scroll { padding: 16px; }
  .ds.kd .doc-diagram:has(.dg-hoch) .dg-quer { display: none; }
  .ds.kd .doc-diagram .dg-hoch { display: block; width: 100%; height: auto; }
  .ds.kd .dx-main { padding: var(--kd-kopf) 20px 0; }
  .kd .kd-taste { display: none; }
  .kd .dx-head { display: block; min-height: 0; padding: 40px 0; }
  .kd .dx-bild { display: none; }
  .kd .dx-head h1 { font-size: 46px; }
  .kd .dx-lede { font-size: 20px; }
  .ds.kd .dx-grp ul, .ds.kd .dx-results ul { grid-template-columns: minmax(0, 1fr); }
  .ds.kd .dx-grp h2 { font-size: 25px; }
  .kd .dx-grp-zahl { font-size: 11px; }
  .ds.kd .dx-main > .kd-fein { font-size: 14px; }
}

/* ---------- 6. Ruhe und Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  .kd *, .kd *::before, .kd *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .kd .kd-kopf, .kd .kd-fuss, .kd .kd-seite, .kd .kd-rail, .kd .kd-krume, .kd .dx-leiste, .kd .dx-bild, .kd .dx-search, .kd .m-top, .kd .m-fuss, .kd .skip { display: none !important; }
  .kd .kd-rahmen, .kd .dx-raster { display: block; padding: 0; }
  .ds.kd .dx-main { padding: 0; }
}
@media (forced-colors: active) {
  .kd .kd-grp li a[aria-current="page"]::before, .kd .dx-leiste a[aria-current="true"]::before { background: CanvasText; }
  .kd .kd-rail a[aria-current="true"] { border-left-color: CanvasText; }
}