/* Kindy Wissens-Hub. Marke laut Website: Poppins, Kindy-Blau, Navy.
   Lesetext in Source Sans 3, weil Poppins in langen Absätzen ermüdet. */

:root {
  --papier: #ffffff;
  --flaeche: #f3f5f8;
  --nebel: #eef2fe;
  --linie: #dfe5ec;
  /* Eigenes Token fuer die Linien der Karte, eingefuehrt am 20.09.2026. --linie
     traegt Panel-Raender und Trennstriche, die leise sein SOLLEN. Die Kanten der
     Karte sind dagegen ihre Aussage und fallen unter WCAG 1.4.11 (3:1 fuer
     grafische Objekte). Gemessen auf der gebauten Seite: #dfe5ec kam auf Weiss
     auf 1,27, die Kastenrahmen daneben auf 13,69, die Verbindungen waren also
     praktisch unsichtbar. Farbton und Saettigung sind unveraendert (H 212,
     S 25,5%), nur die Helligkeit ist niedriger: 3,44 auf --papier, 3,15 auf
     --flaeche (graues Band) und 3,07 auf --nebel (Kastenfuellung), gemessen auf
     allen drei Flaechen, weil die Karte spaeter in einem anderen Band stehen
     kann. Der Dunkelmodus-Wert #5076a5 kommt auf 3,85 / 3,56 / 3,24. Die Kaesten
     bleiben mit 13,69 deutlich staerker, die Hierarchie kippt also nicht. */
  --kartenlinie: #728dab;
  --tinte: #0f2434;
  --text: #354052;
  /* Abgedunkelt am 19.09.2026: #6d7c8f kam auf --nebel nur auf 3,81 und auf weiss
     auf 4,26, riss AA also auf fast jeder Seite (Teaser, <small>, Bildunterschriften).
     Farbton und Saettigung sind unveraendert (H 213,5, S 13,5%), nur die Helligkeit
     ist niedriger; der Abstand zu --text bleibt sichtbar. Gemessen auf allen drei
     Flaechen, die Text tragen: 5,27 / 4,82 / 4,71. Der Dunkelmodus-Wert #8fa2b5 hat
     mit mindestens 5,79 schon Reserve und bleibt. */
  --gedaempft: #606d7e;
  --blau: #00b3fc;
  /* Abgedunkelt am 20.09.2026, gleiche Rechnung wie bei --gedaempft: #0083bc kam
     auf weissem Grund nur auf 4,22 und auf --nebel auf 3,77. Es traegt JEDEN Link
     (Regel `a`), der Fehler lag also auf jeder Seite. Farbton und Saettigung sind
     unveraendert (H 198,2, S 100%), nur dunkler: 5,33 / 4,88 / 4,76 auf den drei
     Flaechen. Der Dunkelmodus-Wert #7ad6ff hat mit mindestens 9,33 Reserve. */
  --blau-dunkel: #0072a4;
  --navy: #092e55;
  --warn: #ff473d;
  /* Eigenes Paar fuer Knopfflaechen. Frueher lieh sich .knopf dafuer --navy, das
     aber gleichzeitig eine TEXTfarbe ist: im Dunkelmodus kippt --navy nach hell,
     und weisse Schrift darauf kam auf Kontrast 1,29. Flaeche und Schrift muessen
     zusammen kippen, deshalb stehen sie hier als Paar. */
  --knopf-flaeche: #092e55;
  --knopf-flaeche-hover: #06203c;
  --knopf-schrift: #ffffff;
  --kopf-hoehe: 64px;
  --mass: 70ch;
  --schrift-kopf: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --schrift-text: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0e1720;
    --flaeche: #131f2a;
    --nebel: #172737;
    --linie: #24354a;
    --kartenlinie: #5076a5;
    --tinte: #eef3f7;
    --text: #d7e0e8;
    --gedaempft: #8fa2b5;
    --blau: #33c3ff;
    --blau-dunkel: #7ad6ff;
    --navy: #cfe6f7;
    --knopf-flaeche: #33c3ff;
    --knopf-flaeche-hover: #7ad6ff;
    --knopf-schrift: #06202f;
  }
}
:root[data-theme="dark"] {
  --papier: #0e1720;
  --flaeche: #131f2a;
  --nebel: #172737;
  --linie: #24354a;
  --kartenlinie: #5076a5;
  --tinte: #eef3f7;
  --text: #d7e0e8;
  --gedaempft: #8fa2b5;
  --blau: #33c3ff;
  --blau-dunkel: #7ad6ff;
  --navy: #cfe6f7;
  --knopf-flaeche: #33c3ff;
  --knopf-flaeche-hover: #7ad6ff;
  --knopf-schrift: #06202f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.6;
}
a { color: var(--blau-dunkel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  color: var(--tinte);
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.01em; }
h2 { font-size: 1.4rem; margin-top: 2.4em; margin-bottom: 0.6em; }
h3 { font-size: 1.15rem; margin-top: 1.8em; margin-bottom: 0.4em; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin-bottom: 0.35em; }
strong { color: var(--tinte); font-weight: 600; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; background: var(--flaeche); padding: 0.05em 0.35em; border-radius: 4px; }
blockquote { margin: 1.2em 0; padding: 0.6em 1em; border-left: 3px solid var(--blau); background: var(--nebel); border-radius: 0 8px 8px 0; }
blockquote p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; border-radius: 8px; }
figure { margin: 1.5em 0; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1240px; margin: 0 auto; padding: 0 16px; height: var(--kopf-hoehe); display: flex; align-items: center; gap: 24px; }
.marke { font-family: var(--schrift-kopf); font-weight: 700; color: var(--tinte); text-decoration: none; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
/* Das Kindy-Icon steht inline im Kopf (siehe markeSvg in tools/kindy-wissenshub.js).
   Es traegt seine eigenen Markenfarben und kippt deshalb im Dunkelmodus NICHT mit.
   .marke-punkt ist der Rueckfall, wenn marke.svg fehlt. */
.marke-icon { width: 28px; height: 28px; display: block; flex: none; }
.marke-punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--blau); display: inline-block; }
.hauptnav { display: flex; }

/* Themen-Menue. EIN Punkt im Kopf statt einer Reihe, die mit jeder Themenwelt laenger
   wird: die Kopfzeile bleibt gleich hoch und gleich breit, egal wie viele Bereiche
   dazukommen. <details>/<summary> traegt Tastatur und Auf/Zu ohne JavaScript. */
.themenmenue { position: static; }
.themenmenue > summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--schrift-kopf); font-size: 0.95rem; font-weight: 600;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap; list-style: none;
}
.themenmenue > summary::-webkit-details-marker { display: none; }
.themenmenue > summary:hover { background: var(--nebel); border-color: var(--blau); }
.themenmenue > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--blau) 45%, transparent); outline-offset: 2px; }
/* Wo bin ich: der Name der offenen Themenwelt steht neben der Schaltflaeche, damit die
   Orientierung nicht verloren geht, die vorher die markierte Zeile in der Reihe gab. */
.themenmenue-hier { font-weight: 500; color: var(--gedaempft); border-left: 1px solid var(--linie); padding-left: 8px; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.themenmenue-pfeil { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.6; }
.themenmenue[open] > summary { background: var(--papier); border-color: var(--blau); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 18%, transparent); }
.themenmenue[open] .themenmenue-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

.themenpanel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: 1px solid var(--linie);
  box-shadow: 0 18px 40px rgba(9, 46, 85, 0.14);
  max-height: calc(100vh - var(--kopf-hoehe)); overflow: auto;
}
.themenpanel-innen {
  max-width: 1240px; margin: 0 auto; padding: 24px 16px 28px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px;
}
.themenpanel h2 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 4px; }
.themenpanel section > p { margin: 0 0 12px; color: var(--gedaempft); font-size: 0.9rem; }
.themenpanel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.themenpanel li a {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  border: 1px solid transparent;
}
.themenpanel li a strong { display: block; font-family: var(--schrift-kopf); color: var(--tinte); font-weight: 600; }
.themenpanel li a small { display: block; color: var(--gedaempft); font-size: 0.88rem; margin-top: 2px; }
.themenpanel li a:hover { background: var(--flaeche); border-color: var(--linie); }
.themenpanel li a[aria-current="page"] { background: var(--nebel); border-color: var(--blau); box-shadow: inset 3px 0 0 var(--blau-dunkel); }
.suche { position: relative; margin-left: auto; }
.suche input { width: min(300px, 40vw); font: inherit; font-size: 0.95rem; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text); }
.suche input:focus { border-color: var(--blau); background: var(--papier); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 25%, transparent); }
.suche-ergebnisse { position: absolute; right: 0; top: calc(100% + 6px); width: min(520px, 92vw); background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 12px 32px rgba(9, 46, 85, 0.14); padding: 6px; max-height: 70vh; overflow: auto; }
.suche-ergebnisse a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--tinte); }
.suche-ergebnisse a:hover, .suche-ergebnisse a[aria-selected="true"] { background: var(--nebel); }
.suche-ergebnisse a small { display: block; color: var(--gedaempft); font-size: 0.85rem; }
.suche-ergebnisse .leer { padding: 10px; color: var(--gedaempft); }

/* Spalten */
.inhalt { max-width: 1240px; margin: 0 auto; padding: 32px 16px 64px; }
.lesespalte { max-width: var(--mass); }
.lesespalte.breit { max-width: 980px; }
.hero { padding: 24px 0 8px; }
.hero h1 { max-width: 20ch; }
.hero-text { font-size: 1.2rem; color: var(--gedaempft); max-width: 60ch; margin-top: 0.8em; }
.thema-kopf { padding-bottom: 8px; }
.zurueck { font-size: 0.95rem; margin-bottom: 0.4em; }
.zurueck a { text-decoration: none; color: var(--gedaempft); }

/* Startseite */
.thema { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.thema h2 { margin-top: 0; font-size: 1.6rem; }
.thema h2 a { color: inherit; text-decoration: none; }
.thema h2 a:hover { color: var(--blau-dunkel); }
.thema > p { max-width: 64ch; }
.einstieg-titel { font-family: var(--schrift-kopf); font-size: 0.9rem; font-weight: 600; color: var(--tinte); margin-bottom: 0.3em; }
.einstieg { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.einstieg li a { display: inline-block; padding: 8px 14px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; color: var(--tinte); font-family: var(--schrift-kopf); font-size: 0.9rem; font-weight: 500; }
.einstieg li a:hover { border-color: var(--blau); color: var(--blau-dunkel); }
.themen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin-top: 8px; }
.thema-klein h2 { font-size: 1.25rem; }
.anzahl { color: var(--gedaempft); font-size: 0.95rem; }

/* Karte
   Die Karte steht ueber die volle Containerbreite (1132 px), nicht mehr in einer
   2fr-Spalte neben "Zuerst lesen": dort wurde der 1016er viewBox auf 728 px
   gestaucht, also alles auf 72 Prozent. Die Beschriftungen der Linien liegen
   deshalb nicht mehr auf den Linien, sondern als Liste darunter. */
.karte { margin: 24px 0 8px; position: relative; }
.karte-flaeche { position: relative; }
.karte svg { width: 100%; height: auto; display: block; font-family: var(--schrift-kopf); }
.karte figcaption { color: var(--gedaempft); font-size: 0.95rem; margin-top: 12px; }
.nur-schmal { display: none; }
.kante { fill: none; stroke: var(--kartenlinie); stroke-width: 1.75; transition: stroke 120ms ease, stroke-width 120ms ease; }
#pfeil path { fill: var(--kartenlinie); }
.karte.aktiv .kante { stroke: color-mix(in srgb, var(--kartenlinie) 60%, transparent); }
.karte.aktiv .kante.an { stroke: var(--blau); stroke-width: 2.5; }
.knoten { cursor: pointer; }
.knoten rect { fill: var(--nebel); stroke: var(--navy); stroke-width: 1.25; transition: fill 120ms ease, stroke 120ms ease; }
.knoten:hover rect, .knoten:focus-visible rect { fill: var(--papier); stroke: var(--blau); stroke-width: 2; }
.knoten:focus-visible { outline: none; }
.knoten-titel { fill: var(--tinte); font-size: 17px; font-weight: 600; }
.knoten-kurz { fill: var(--gedaempft); font-family: var(--schrift-text); font-size: 13px; }
.karte.aktiv .knoten:not(.an):not(:hover) rect { opacity: 0.55; }
.karte.aktiv .knoten:not(.an):not(:hover) text { opacity: 0.55; }

/* Erklaerung am Kasten. Sie haengt direkt unter (oder ueber) dem ueberfahrenen
   Kasten, weil die vollstaendige Liste unter der Karte bei kleinem Fenster
   ausserhalb des Sichtfelds steht. Baut hub.js aus derselben Liste. */
.karte-tipp {
  position: absolute; z-index: 2; max-width: 340px;
  background: var(--papier); border: 1px solid var(--blau); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(9, 46, 85, 0.18);
  padding: 12px 16px; pointer-events: none;
  font-size: 1rem; line-height: 1.45;
}
.karte-tipp[hidden] { display: none; }
.karte-tipp p { margin: 0 0 8px; font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); }
.karte-tipp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.karte-tipp li { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.karte-tipp .tipp-pfeil { color: var(--blau-dunkel); font-weight: 700; }
.karte-tipp b { font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); }
.karte-tipp small { color: var(--gedaempft); font-size: 1em; }

/* Was zwischen zwei Kaesten fliesst: in Fliesstextgroesse, und in beide
   Richtungen mit der Karte verbunden (Kasten ueberfahren hebt seine Zeilen
   hervor, Zeile ueberfahren hebt ihre Linie hervor). */
.karte-kanten {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px;
}
.karte-kanten li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  padding: 8px 12px; border-radius: 8px; border-left: 3px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.karte-kanten .kante-paar { display: inline-flex; align-items: baseline; gap: 8px; }
.karte-kanten b { font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); font-size: 0.98rem; }
.karte-kanten .kante-pfeil { color: var(--gedaempft); }
.karte-kanten small { color: var(--gedaempft); font-size: 0.98rem; }
.karte-kanten small::before { content: "· "; }
.karte.aktiv .karte-kanten li { opacity: 0.55; }
.karte.aktiv .karte-kanten li.an { opacity: 1; background: var(--nebel); border-left-color: var(--blau); }

/* Themenwelt */
.einstieg-block h2, .wegweiser h2, .pfade h2, .module h2 { font-size: 1.5rem; }
.fragen { list-style: none; padding: 0; counter-reset: frage; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 6px 32px; }
.fragen li { counter-increment: frage; display: grid; grid-template-columns: 2ch 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.fragen li::before { content: counter(frage); font-family: var(--schrift-kopf); font-weight: 600; color: var(--blau-dunkel); }
.fragen li a, .fragen li > span { grid-column: 2; font-family: var(--schrift-kopf); font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--tinte); }
.fragen li a:hover { color: var(--blau-dunkel); }
.fragen li small { grid-column: 2; color: var(--gedaempft); font-size: 0.92rem; line-height: 1.4; }
.pfadliste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pfadliste li { padding: 14px 16px; border: 1px solid var(--linie); border-radius: 12px; }
.pfadliste li a { font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); text-decoration: none; display: block; }
.pfadliste li a:hover { color: var(--blau-dunkel); }
.pfadliste li small { color: var(--gedaempft); }
.module { margin-top: 12px; }
.modul { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 8px 40px; padding: 24px 0; border-top: 1px solid var(--linie); }
.modul h3 { margin-top: 0; font-size: 1.15rem; }
.modul > p { grid-column: 1; color: var(--gedaempft); font-size: 0.98rem; }
.modul .artikelliste { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.artikelliste { list-style: none; padding: 0; }
.artikelliste li { padding: 6px 0; border-bottom: 1px dashed var(--linie); }
.artikelliste li a { text-decoration: none; color: var(--tinte); }
.artikelliste li a:hover { color: var(--blau-dunkel); text-decoration: underline; }
.artikelliste li.geplant { color: var(--gedaempft); }
.artikelliste li.geplant em { font-size: 0.85rem; margin-left: 6px; color: var(--warn); font-style: normal; }
.artikelliste.zweispaltig { columns: 2; column-gap: 40px; }
.artikelliste.zweispaltig li { break-inside: avoid; }
.artikelliste.kompakt li { font-size: 0.95rem; padding: 4px 0; border: 0; }
/* Gleiche Fehlerklasse wie in der Hauptnavigation: #0083bc auf Weiss sind 4,22:1 bei
   0,95rem, also unter AA. Der aktive Eintrag war der am schlechtesten lesbare der Liste. */
.artikelliste.kompakt li[aria-current="page"] a { color: var(--navy); font-weight: 600; }

/* Lernpfad */
.pfad-schritte { padding-left: 0; list-style: none; counter-reset: schritt; margin-top: 1.5em; }
.pfad-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linie); }
.pfad-schritte li::before { content: counter(schritt); font-family: var(--schrift-kopf); font-weight: 600; color: var(--blau-dunkel); }
.pfad-schritte li a { font-family: var(--schrift-kopf); font-weight: 500; color: var(--tinte); text-decoration: none; }
.pfad-schritte li a:hover { color: var(--blau-dunkel); }

/* Artikel */
.artikel-raster { display: grid; grid-template-columns: 220px minmax(0, var(--mass)) 200px; gap: 48px; align-items: start; }
.seitenleiste { position: sticky; top: calc(var(--kopf-hoehe) + 24px); font-size: 0.95rem; }
.seitenleiste-titel { font-family: var(--schrift-kopf); font-size: 0.85rem; margin-bottom: 0.2em; }
.seitenleiste-titel a { color: var(--gedaempft); text-decoration: none; }
.seitenleiste-modul { font-family: var(--schrift-kopf); font-weight: 600; margin-bottom: 0.6em; }
.seitenleiste-modul a { color: var(--tinte); text-decoration: none; }
.artikel-kopf { margin-bottom: 1.5em; }
.artikel-meta { color: var(--gedaempft); font-size: 0.9rem; display: flex; gap: 16px; margin-bottom: 0.5em; }
.artikel h2 { padding-top: 0.2em; }
.artikel h2::before { content: ""; display: block; width: 36px; height: 3px; background: var(--blau); border-radius: 2px; margin-bottom: 10px; }
.tabelle { overflow-x: auto; margin: 1.2em 0; }
.artikel table { border-collapse: collapse; width: 100%; font-size: 0.98rem; }
.artikel th, .artikel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.artikel th { font-family: var(--schrift-kopf); font-size: 0.85rem; font-weight: 600; color: var(--tinte); background: var(--flaeche); }
.toc { position: sticky; top: calc(var(--kopf-hoehe) + 24px); font-size: 0.9rem; }
.toc p { font-family: var(--schrift-kopf); font-weight: 600; font-size: 0.85rem; color: var(--tinte); margin-bottom: 0.4em; }
.toc ol { list-style: none; padding: 0; border-left: 2px solid var(--linie); }
.toc li { margin: 0; }
.toc a { display: block; padding: 4px 12px; color: var(--gedaempft); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover, .toc a.an { color: var(--blau-dunkel); border-left-color: var(--blau); }
.bild { margin: 1.4em 0 1.8em; }
/* Hoechstbreite statt "so breit wie die Spalte": seit die Lesespalte ohne
   Seitenleiste den freien Platz nimmt, waere ein Bild sonst mitgewachsen. Drei
   Entscheidungen, jede gegen einen gemessenen Fehlgriff:
   - Nur eine Breite, KEINE Hoehe. Eine Hoehenkappe von 560px hat 120 von 158
     Bildern des Hilfe-Center-Spiegels unter 1:1 geschrumpft und ihren Text
     unscharf gemacht.
   - Kein `width` ueberhaupt, weder `100%` noch `auto`. `100%` zerrt die kleinen
     Spiegel-Bilder hoch; `auto` schlaegt die width/height-Attribute aus dem
     Markup (Autorenregel vor Praesentationshinweis) und zeigt die eigenen
     Aufnahmen dadurch doppelt so gross. Die beiden Quellen haben verschiedene
     Aufloesungen: die eigenen Aufnahmen sind 2x (der Generator schreibt ihnen
     die halben Masse ins Markup), die Spiegel-Bilder 1x-Uploads ohne Masse.
   - `.artikel p img` statt `.artikel p > img`, damit ein kuenftiger kb-Pull,
     der seine Bilder in einen Link packt, nicht durchfaellt. */
.bild img, .artikel p img {
  display: block; height: auto;
  max-width: min(100%, 560px);
  border: 1px solid var(--linie); border-radius: 10px; background: var(--papier);
}
/* Bilder aus dem Hilfe-Center-Spiegel stehen ohne <figure> in einem eigenen Absatz. */
.artikel p img { margin: 1.4em 0; }
.bild figcaption { color: var(--gedaempft); font-size: 0.9rem; margin-top: 8px; line-height: 1.4; }
.bild-folgt { margin: 1.2em 0; padding: 14px 16px; border: 1px dashed var(--warn); border-radius: 10px; color: var(--gedaempft); font-size: 0.95rem; }
.bild-folgt span { display: inline-block; font-family: var(--schrift-kopf); font-weight: 600; color: var(--warn); margin-right: 10px; }

/* Lupe: Detailansicht eines Bildes ueber der Seite (hub.js). Ohne JavaScript oder
   ohne <dialog> passiert nichts Besonderes -- der Link auf die Bilddatei, den der
   Generator um jede Aufnahme legt, oeffnet sie dann wie bisher in einem neuen Tab.
   Die Farben stehen hier bewusst fest und nicht als Token: die Flaeche hinter dem
   Bild ist in beiden Modi dunkel, sonst leuchtet im Hellmodus ein weisser Rahmen. */
.lupe-ziel { cursor: zoom-in; }
.lupe-ziel:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
/* Kein `width/height: auto` hier: die UA-Regel fuer <dialog> ist `fit-content`,
   und mit `auto` streckt `inset: 0` den Kasten auf den ganzen Viewport, die
   Auto-Margins werden 0 und das Bild haengt oben statt mittig. */
dialog.lupe {
  border: 0; padding: 0; margin: auto; background: transparent; color: #eef3f7;
  max-width: 96vw; max-height: 96vh; overflow: visible;
}
dialog.lupe::backdrop { background: rgba(6, 22, 40, 0.86); }
.lupe-rahmen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lupe-rahmen img {
  display: block; width: auto; height: auto; max-width: 96vw; max-height: 84vh;
  border-radius: 10px; background: #ffffff; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.lupe-text { margin: 0; max-width: 70ch; text-align: center; font-size: 0.95rem; line-height: 1.45; }
.lupe-zu {
  position: fixed; top: 14px; right: 18px; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(6, 22, 40, 0.7); color: #ffffff; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.lupe-zu:hover { background: rgba(6, 22, 40, 0.95); }
.lupe-zu:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
@media (max-width: 720px) {
  /* Auf dem Telefon ist das Bild 96vw breit, ein am Viewport festgemachter Knopf
     laege also auf seiner oberen rechten Ecke und verdeckte Bildinhalt. Hier
     steht er ueber dem Bild in der Reihe. */
  .lupe-zu { position: static; display: block; margin: 0 0 8px auto; }
  .lupe-rahmen img { max-height: 76vh; }
}
/* Bildvorrat: nur in der Redaktionsansicht (--intern). Bilder, die der Spiegel des
   Hilfe-Centers trug und die dieser Artikel verdeckt; sie werden angeboten, nicht gesetzt. */
.bildvorrat { margin: 2em 0 1em; border: 1px solid var(--linie); border-radius: 12px; background: var(--nebel); }
.bildvorrat > details > summary { cursor: pointer; padding: 12px 16px; font-size: 0.95rem; color: var(--text); }
.bildvorrat > details > summary strong { font-family: var(--schrift-kopf); color: var(--tinte); }
.bildvorrat > details[open] > summary { border-bottom: 1px solid var(--linie); }
.bildvorrat p { margin: 12px 16px; font-size: 0.9rem; color: var(--gedaempft); }
.bildvorrat code { overflow-wrap: anywhere; word-break: normal; }
.bildvorrat .befehl { display: block; padding: 10px 12px; background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; font-size: 0.8rem; line-height: 1.5; }
.vorrat-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.vorrat-bild { margin: 0; }
.vorrat-bild img { width: 100%; height: 110px; object-fit: cover; object-position: top left; border: 1px solid var(--linie); border-radius: 8px; background: var(--papier); display: block; }
.vorrat-bild figcaption { margin-top: 5px; font-size: 0.72rem; color: var(--gedaempft); word-break: break-all; line-height: 1.3; }

/* Video-Vorschaltflaeche. Das Original ist ein YouTube-<iframe> aus dem
   Hilfe-Center-Spiegel, das beim Oeffnen der Seite an Google gegangen waere; der
   Generator ersetzt es. Bewusst ohne Vorschaubild von YouTube: i.ytimg.com waere
   derselbe Abruf, nur kleiner. */
.video { margin: 1.5em 0; }
.video-start {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; max-width: 560px; padding: 32px 24px; cursor: pointer;
  font: inherit; text-align: center; color: var(--text);
  background: var(--nebel); border: 1px solid var(--linie); border-radius: 12px;
}
.video-start:hover { border-color: var(--blau); }
.video-start:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.video-play {
  width: 56px; height: 56px; border-radius: 50%; background: var(--knopf-flaeche);
  position: relative; flex: none;
}
.video-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--knopf-schrift);
}
.video-titel { font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); }
.video-start-text { font-size: 0.92rem; color: var(--blau-dunkel); }
/* Steht bewusst NEBEN dem Knopf (per aria-describedby verbunden): im Knopf waere der
   Satz Teil des zugaenglichen Namens und der waere zwei Saetze lang. */
.video-hinweis { margin-top: 8px; font-size: 0.88rem; color: var(--gedaempft); line-height: 1.4; max-width: 56ch; }
.video iframe { display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }

/* Kontaktweg am Artikelende. Bewusst kein eingebettetes Ticket-Formular: das waere
   ein neuer offener Eingang, die Mailadresse ist keiner. */
.kontakt { margin: 2.5em 0 0; padding: 20px 22px; background: var(--nebel); border: 1px solid var(--linie); border-radius: 12px; }
.kontakt h2 { margin: 0 0 8px; font-size: 1.1rem; color: var(--tinte); }
.kontakt p { margin: 0 0 8px; color: var(--text); font-size: 0.95rem; }
.kontakt p:last-child { margin-bottom: 0; }

.pfad-nav { margin: 1.5em 0; padding: 12px 16px; background: var(--nebel); border-radius: 12px; font-size: 0.95rem; }
.pfad-nav p { margin: 0 0 6px; color: var(--gedaempft); }
.pfad-nav-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pfad-nav-links a { font-family: var(--schrift-kopf); font-weight: 500; text-decoration: none; }

/* Suche */
.suchergebnisse { list-style: none; padding: 0; }
.suchergebnisse li { padding: 12px 0; border-top: 1px solid var(--linie); }
.suchergebnisse a { font-family: var(--schrift-kopf); font-weight: 600; text-decoration: none; color: var(--tinte); }
.suchergebnisse small { display: block; color: var(--gedaempft); }

/* Fuß */
.fuss { border-top: 1px solid var(--linie); color: var(--gedaempft); font-size: 0.9rem; }
.fuss-innen { max-width: 1240px; margin: 0 auto; padding: 24px 16px; }
.fuss p { margin: 0 0 4px; }
.fuss-recht { margin-top: 10px; }

/* Klein */
@media (max-width: 1080px) {
  .artikel-raster { grid-template-columns: minmax(0, var(--mass)); gap: 24px; }
  .seitenleiste, .toc { position: static; }
  .artikel { order: 1; }
  .toc { display: none; }
  .seitenleiste { order: 2; border-top: 1px solid var(--linie); padding-top: 16px; }
}
@media (max-width: 720px) {
  body { font-size: 1.05rem; }
  /* Der Kopf bricht auf zwei Zeilen um: Marke und Suche oben, die Themen darunter
     als waagerecht scrollbare Reihe. Vorher stand hier `display: none` auf der
     Navigation, ohne Ersatz: auf dem Telefon gab es damit ueberhaupt keine
     Navigation, nur Logo und Suchfeld. */
  /* Auf dem Telefon steht die Marke mit der Themen-Schaltflaeche in der ersten Zeile,
     das Suchfeld in voller Breite darunter. Die aufgeklappte Uebersicht laeuft ueber die
     ganze Breite und wird einspaltig. */
  .kopf-innen { gap: 10px 12px; flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .marke { order: 1; font-size: 1.05rem; }
  .marke-icon { width: 22px; height: 22px; }
  .hauptnav { order: 2; margin-left: auto; }
  .suche { order: 3; flex: 0 0 100%; margin-left: 0; }
  .themenmenue > summary { padding: 7px 12px; font-size: 0.9rem; }
  .themenmenue-hier { display: none; }
  .themenpanel-innen { grid-template-columns: 1fr; gap: 20px; padding: 18px 16px 22px; }
  .suche input { width: 100%; }
  .modul { grid-template-columns: 1fr; }
  .modul .artikelliste { grid-column: 1; grid-row: auto; }
  .artikelliste.zweispaltig { columns: 1; }
  .karte svg { min-width: 960px; }
  .karte-flaeche { overflow-x: auto; }
  .karte-kanten { grid-template-columns: 1fr; }
  /* Umgebrochen steht der Trennpunkt am Zeilenanfang und sieht aus wie ein Aufzaehlungszeichen. */
  .karte-kanten small::before { content: none; }
  .nur-schmal { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- Zonen
   Seiten bestehen aus Bändern über die volle Breite; jedes Band trägt einen
   Container. Panels sind umrandete Flächen ohne Schatten. */
.inhalt { max-width: none; padding: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.band { padding: 48px 0; }
.band + .band { border-top: 1px solid var(--linie); }
.band-grau { background: var(--flaeche); }
.band-hero { background: var(--nebel); padding: 56px 0 48px; }
.band-hero.band-schmal { padding: 40px 0 32px; }
.band-hero h1 { max-width: 22ch; }
.band-hero .hero-text { margin-top: 0.8em; margin-bottom: 0; color: var(--text); }
.band-titel { font-size: 1.5rem; margin: 0 0 8px; }
.band-text { color: var(--gedaempft); margin-bottom: 20px; }

.suche-gross { max-width: 720px; margin: 20px 0 8px; }
.suche-gross input { width: 100%; font-size: 1.15rem; padding: 16px 20px; border-radius: 14px; background: var(--papier); border: 1px solid var(--linie); }
.suche-gross .suche-ergebnisse { left: 0; right: auto; width: 100%; }

.panel { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; padding: 28px 28px 24px; }
.band-grau .panel { background: var(--papier); }
.panel h2 { margin-top: 0; font-size: 1.35rem; }
.panel h3 { margin-top: 0; font-size: 1rem; color: var(--gedaempft); font-weight: 600; margin-bottom: 12px; }
.panel-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.panel-thema { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px; padding: 32px; }
.panel-kopf h2 { font-size: 1.75rem; }
.panel-kopf p { color: var(--text); }
.knopf { display: inline-block; font-family: var(--schrift-kopf); font-weight: 600; font-size: 0.95rem; color: var(--knopf-schrift); background: var(--knopf-flaeche); padding: 10px 18px; border-radius: 10px; text-decoration: none; }
.knopf:hover { background: var(--knopf-flaeche-hover); color: var(--knopf-schrift); }
.panel-klein .artikelliste { margin: 8px 0 12px; }
.panel-klein .alle { font-family: var(--schrift-kopf); font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.panel-klein h2 a { color: inherit; text-decoration: none; }
.panel-klein h2 a:hover { color: var(--blau-dunkel); }

.teaserliste { list-style: none; padding: 0; margin: 0; }
.teaserliste li { border-top: 1px solid var(--linie); }
.teaserliste li:first-child { border-top: 0; }
.teaserliste a { display: block; padding: 10px 0; text-decoration: none; color: var(--text); }
.teaserliste a strong { display: block; font-family: var(--schrift-kopf); font-weight: 600; color: var(--tinte); font-size: 1rem; }
.teaserliste a:hover strong { color: var(--blau-dunkel); }
.teaserliste a span { display: block; font-size: 0.95rem; color: var(--gedaempft); line-height: 1.45; margin-top: 2px; }

.panel-einstieg .teaserliste { columns: 2; column-gap: 40px; }
.panel-einstieg .teaserliste li { break-inside: avoid; }

.wegweiser h2 { margin-top: 0; font-size: 1.5rem; }
.wegweiser > p { color: var(--gedaempft); margin-bottom: 20px; }
.fragen li { background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.fragen { gap: 12px; }

.pfade h2 { margin-top: 0; }
.pfadliste li { background: var(--papier); }

.modul { display: block; padding: 24px; border-top: 1px solid var(--linie); }
.modul h3 { color: var(--tinte); font-size: 1.15rem; }
.modul > p { color: var(--gedaempft); font-size: 0.98rem; }
.modul .artikelliste { margin: 0; }

/* Artikel: feste Bereiche, damit ein Artikel ohne Seitenleiste nicht in die schmale Spalte fällt */
.artikel-raster { grid-template-columns: 220px minmax(0, var(--mass)) 200px; grid-template-areas: "seite artikel toc"; padding: 40px 0 64px; }
.artikel-raster.ohne-seitenleiste { grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "artikel toc"; }
/* Ohne Seitenleiste blieb die Lesespalte trotzdem auf --mass stehen: zwischen Text
   und Inhaltsverzeichnis lag ein leeres Drittel. Sie nimmt jetzt den freien Platz.
   Bilder wachsen dabei NICHT mit, sie haben ihre eigene Hoechstbreite (.bild img);
   die Detailansicht liegt in der Lupe. */
.artikel-raster.ohne-seitenleiste .lesespalte { max-width: none; }
.seitenleiste { grid-area: seite; }
.artikel { grid-area: artikel; }
.toc { grid-area: toc; }

@media (max-width: 1080px) {
  .artikel-raster, .artikel-raster.ohne-seitenleiste { grid-template-columns: minmax(0, var(--mass)); grid-template-areas: "artikel" "seite"; }
  .panel-thema { grid-template-columns: 1fr; }
  .panel-einstieg .teaserliste { columns: 1; }
}
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .band { padding: 32px 0; }
  .panel { padding: 20px; }
  .fragen { grid-template-columns: 1fr; }
}