/* KI-Kompass 3.0 | Stand: 2026-09-15
   Gestaltungsquelle: zentrale /styles.css; --kc-* bleiben lokale Dokument-Aliasse.
   Abnahme: Klassenvertrag, 44px-Bedienflächen, eigenständiger Tabellen-Scroll,
   sichtbarer Fokus, reduzierte Bewegung, mobile Navigation und Drucklayout. */
:root {
  color-scheme: dark;
  --kc-bg: var(--x-bg, #2a2420);
  --kc-panel: var(--x-bg-raised, #2d2520);
  --kc-deep: var(--x-bg-sunken, #221e1a);
  --kc-text: var(--x-ink-bright, #e8d4a0);
  --kc-copy: var(--x-ink, #d4c5a9);
  --kc-accent: var(--x-cyan-doc, #7dd3e8);
  --kc-border: var(--x-line, #5a4d3f);
  --kc-soft: rgba(125, 211, 232, .08);
  --kc-radius: var(--x-radius, 10px);
  --kc-control-radius: var(--x-radius-sm, 6px);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-padding-top: 1.25rem; }
body { margin: 0; background: var(--kc-bg); color: var(--kc-copy); font: var(--x-fs-body, 15px)/var(--x-lh-prose, 1.65) var(--x-font-ui, system-ui, sans-serif); overflow-wrap: anywhere; }
a { color: var(--kc-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: rgba(125, 211, 232, .2); }
:focus-visible { outline: 3px solid var(--kc-accent); outline-offset: 4px; border-radius: .2rem; }
:target { scroll-margin-top: 1.5rem; }
img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.kc-skip { position: fixed; top: .5rem; left: 1rem; z-index: 1000; padding: .7rem 1rem; color: var(--kc-bg); background: var(--kc-accent); transform: translateY(-200%); }
.kc-skip:focus { transform: none; }

/* Rahmen und Orientierung */
.kc-fragment { max-width: 50rem; margin: 0 auto; padding: 2rem 1.25rem; }
.kc-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--kc-accent); font-weight: 700; text-decoration: none; letter-spacing: -.025em; }
.kc-version { padding: .2rem .6rem; border: 1px solid var(--kc-border); border-radius: var(--x-radius-pill, 20px); color: var(--kc-copy); font-size: var(--x-fs-ui, 12.5px); white-space: nowrap; }
.kc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin-left: auto; font-size: var(--x-fs-body-sm, 13.5px); }
.kc-actions > a { display: inline-flex; align-items: center; min-height: 44px; }
.kc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }
.kc-sidebar { position: sticky; top: 1rem; align-self: start; min-width: 0; max-height: calc(100vh - 2rem); padding: 1.5rem 0; overflow-y: auto; scrollbar-gutter: stable; }
.kc-sidebar summary { min-height: 44px; padding: .55rem .65rem; font-weight: 700; color: var(--kc-text); }
.kc-sidebar nav { padding: .5rem .3rem; font-size: var(--x-fs-body-sm, 13.5px); line-height: 1.45; }
.kc-sidebar nav a { display: flex; align-items: center; min-height: 44px; margin: .1rem 0; padding: .55rem .65rem; border-left: 3px solid transparent; border-radius: var(--kc-control-radius); color: var(--kc-copy); text-decoration: none; }
.kc-sidebar nav a:hover { background: var(--kc-soft); color: var(--kc-text); }
.kc-sidebar nav a[aria-current="page"] { border-left-color: var(--kc-accent); background: var(--kc-soft); color: var(--kc-accent); font-weight: 700; }
.kc-navgroup { margin: 1.1rem 0 .3rem; color: var(--kc-text); font-size: var(--x-fs-ui, 12.5px); font-weight: 720; }
.kc-navgroup:first-child { margin-top: .25rem; }
.kc-main { min-width: 0; width: 100%; max-width: 800px; padding: 2.2rem 0 4rem; }
.kc-breadcrumb { display: flex; flex-wrap: wrap; gap: .25rem .55rem; margin-bottom: 1.5rem; color: var(--kc-copy); font-size: var(--x-fs-ui, 12.5px); }
.kc-eyebrow { margin: .25rem 0 .55rem; color: var(--kc-accent); font-size: var(--x-fs-ui, 12.5px); font-weight: 700; letter-spacing: .04em; }
.kc-lead { color: var(--kc-text); font-size: var(--x-fs-lead, 16.5px); line-height: 1.6; }
.kc-meta { color: var(--kc-copy); font-size: var(--x-fs-ui, 12.5px); }
.kc-current-route { margin: 1.3rem 0; padding: .65rem 1rem; border-left: 3px solid var(--kc-accent); background: var(--kc-soft); font-size: var(--x-fs-body-sm, 13.5px); }
.kc-toc { margin: 1.75rem 0 2.5rem; padding: .4rem 1rem; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); background: var(--kc-deep); font-size: var(--x-fs-body, 15px); }
.kc-toc summary { min-height: 44px; padding: .55rem 0; color: var(--kc-text); font-weight: 650; }
.kc-toc ol { margin: .35rem 0 .8rem; padding-left: 1.35rem; }
.kc-toc li { padding: .2rem 0; }

/* Lesetext */
.kc-main h1 { margin: .3rem 0 1.2rem; color: var(--kc-text); font-size: clamp(1.8rem, 4.5vw, var(--x-fs-h1, 34px)); font-weight: 720; line-height: 1.14; letter-spacing: -.035em; text-wrap: balance; }
.kc-main h2 { margin: 2.8rem 0 .9rem; color: var(--kc-text); font-size: clamp(1.3rem, 3vw, var(--x-fs-h2, 24px)); line-height: 1.3; letter-spacing: -.02em; }
.kc-main h3 { margin: 1.9rem 0 .7rem; color: var(--kc-text); font-size: var(--x-fs-h3, 18px); line-height: 1.4; }
.kc-main h4 { margin: 1.5rem 0 .6rem; color: var(--kc-text); font-size: var(--x-fs-h4, 16px); }
.kc-article > :first-child { margin-top: 0; }
.kc-article p { margin: 0 0 1.15rem; }
.kc-article strong { color: var(--kc-text); font-weight: 700; }
.kc-article ul, .kc-article ol { margin: .7rem 0 1.35rem; padding-left: 1.4rem; }
.kc-article li { margin: .4rem 0; padding-left: .15rem; }
.kc-article li > p { margin-bottom: .55rem; }
.kc-article li::marker { color: var(--kc-text); }
.kc-article blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--kc-accent); background: var(--kc-soft); color: var(--kc-text); }
.kc-article blockquote > :last-child { margin-bottom: 0; }
.kc-article hr { margin: 2.3rem 0; border: 0; border-top: 1px solid var(--kc-border); }
.kc-article code { padding: .12em .3em; background: var(--kc-deep); border-radius: .25rem; font: .9em/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.kc-article pre { max-width: 100%; margin: 1.3rem 0; padding: 1rem; overflow-x: auto; background: var(--kc-deep); border: 1px solid var(--kc-border); border-radius: var(--kc-radius); }
.kc-article pre code { padding: 0; white-space: pre; }
.kc-table-scroll { max-width: 100%; margin: 1.4rem 0; overflow-x: auto; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); scrollbar-width: thin; }
.kc-article table { width: 100%; border-collapse: collapse; font-size: var(--x-fs-body, 15px); line-height: 1.55; }
.kc-table-scroll table { min-width: 36rem; }
.kc-article > table { display: block; max-width: 100%; margin: 1.4rem 0; overflow-x: auto; }
.kc-article th, .kc-article td { padding: .85rem 1rem; border-bottom: 1px solid var(--kc-border); text-align: left; vertical-align: top; }
.kc-article th { background: var(--kc-deep); color: var(--kc-text); font-weight: 700; }
.kc-article tr:last-child td { border-bottom: 0; }
.kc-article td { min-width: 8rem; }
.kc-article caption { padding: .7rem 1rem; color: var(--kc-text); text-align: left; font-weight: 650; }

/* Lesewege, verwandte Inhalte und Abbildungen */
.kc-route-picker, .kc-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.5rem 0 2rem; }
.kc-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-route-card, .kc-card { display: block; min-width: 0; min-height: 44px; padding: 1.15rem; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); background: var(--kc-panel); color: var(--kc-copy); text-decoration: none; transition: transform .15s, background .15s, border-color .15s; }
.kc-route-card:hover, .kc-card:hover { transform: translateY(-2px); border-color: var(--kc-accent); background: var(--kc-soft); text-decoration: none; }
.kc-route-card strong, .kc-card strong { display: block; margin: .2rem 0 .5rem; color: var(--kc-text); font-size: var(--x-fs-h4, 16px); line-height: 1.45; }
.kc-route-card small, .kc-card small { color: var(--kc-accent); font-size: var(--x-fs-ui, 12.5px); }
.kc-route-card p, .kc-card p { margin: .4rem 0 0; font-size: var(--x-fs-body-sm, 13.5px); line-height: 1.6; }
[aria-pressed="true"], .kc-route-card[aria-current="page"] { outline: 2px solid var(--kc-accent); outline-offset: -2px; background: var(--kc-soft); }
[aria-pressed="true"]:focus-visible, .kc-route-card[aria-current="page"]:focus-visible { outline: 3px solid var(--kc-accent); outline-offset: 4px; }
.kc-figure { margin: 2rem 0; padding: 1.15rem; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); background: var(--kc-deep); }
.kc-figure img { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; }
.kc-diagram-scroll { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--kc-accent) var(--kc-deep); }
.kc-diagram-scroll:focus-visible { outline: 3px solid var(--kc-accent); outline-offset: 3px; }
.kc-diagram-scroll img { min-width: var(--kc-diagram-min-width, 700px); }
.kc-diagram-scroll img[src$="h3-einsatzentscheidung.svg"] { --kc-diagram-min-width: 640px; }
.kc-diagram-scroll img[src$="h6-ausfall.svg"] { --kc-diagram-min-width: 440px; }
.kc-figure .kc-diagram-scrollhint { margin: .7rem 0; color: var(--kc-copy); font-size: var(--x-fs-body-sm, 13.5px); line-height: 1.6; }
.kc-figure figcaption { margin-top: 1rem; color: var(--kc-copy); font-size: var(--x-fs-body-sm, 13.5px); line-height: 1.6; }
.kc-figure details { margin-top: .75rem; font-size: var(--x-fs-body, 15px); }
.kc-figure summary { min-height: 44px; padding: .6rem 0; color: var(--kc-accent); }
.kc-notice, .kc-legacy { margin: 1.4rem 0; padding: 1rem 1.15rem; border-left: 3px solid var(--kc-text); background: var(--kc-deep); font-size: var(--x-fs-body, 15px); }
.kc-notice > :last-child, .kc-legacy > :last-child { margin-bottom: 0; }
.kc-button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--kc-border); border-radius: var(--kc-control-radius); background: var(--kc-panel); color: var(--kc-accent); font-size: var(--x-fs-ui, 12.5px); text-decoration: none; cursor: pointer; }
.kc-button:hover { border-color: var(--kc-accent); background: var(--kc-soft); }
.kc-pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--kc-border); }
.kc-pagination a { display: block; min-height: 44px; padding: .75rem 1rem; border: 1px solid var(--kc-border); border-radius: var(--kc-radius); font-size: var(--x-fs-body, 15px); }
.kc-pagination .kc-prev { grid-column: 1; text-align: left; }
.kc-pagination .kc-next { grid-column: 2; text-align: right; }
.kc-footer { max-width: 1280px; margin: 2.5rem auto 0; padding: 1.5rem 1.25rem; border-top: 1px solid var(--kc-border); color: var(--kc-copy); font-size: var(--x-fs-ui, 12.5px); }
.kc-footer a { display: inline-block; padding: .25rem .1rem; }

/* Schmale Ansichten; der Generator steuert das open-Attribut des Menüs. */
@media (max-width: 900px) {
  .kc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 840px; }
  .kc-sidebar { position: static; max-height: none; padding: .85rem 0 0; overflow: visible; }
  .kc-sidebar > details { border: 1px solid var(--kc-border); border-radius: var(--kc-radius); background: var(--kc-deep); }
  .kc-sidebar nav { padding: .5rem .8rem 1rem; }
  .kc-sidebar summary { padding: .65rem .85rem; }
  .kc-main { max-width: 800px; padding-top: 1.6rem; }
}
@media (max-width: 600px) {
  body { font-size: var(--x-fs-body, 15px); line-height: var(--x-lh-prose, 1.65); }
  .kc-actions { gap: .4rem; }
  .kc-layout { padding: 0 1rem; }
  .kc-main { padding-bottom: 2rem; }
  .kc-route-picker, .kc-card-grid { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .kc-main h2 { margin-top: 2.15rem; }
  .kc-article blockquote, .kc-notice, .kc-legacy { padding: .85rem 1rem; }
  .kc-figure { padding: .8rem; }
  .kc-pagination { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .kc-pagination .kc-next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  [aria-current="page"], [aria-pressed="true"] { outline: 2px solid Highlight; }
  .kc-card, .kc-route-card, .kc-button, .kc-notice { border: 1px solid CanvasText; }
}

/* Druck: Lesetext bleibt vollständig; keine klebende Seitennavigation. */
@media print {
  :root { color-scheme: light; --kc-bg: #fff; --kc-panel: #fff; --kc-deep: #fff; --kc-text: #111; --kc-copy: #222; --kc-accent: #111; --kc-border: #aaa; --kc-soft: transparent; }
  @page { margin: 18mm 16mm; }
  body { font-size: 10pt; line-height: 1.5; }
  .kc-skip, .kc-sidebar, .kc-actions, .kc-pagination, .kc-button { display: none !important; }
  .kc-route-picker { display: block; margin: 5mm 0; }
  .kc-route-card { transform: none; display: block; margin: 0 0 3mm; padding: 3mm; border-color: #aaa; background: #fff; color: #111; text-decoration: none; break-inside: avoid; }
  .kc-route-card strong, .kc-route-card small { color: #111; }
  .kc-layout { display: block; max-width: none; padding: 0; }
  .kc-main { width: 100%; max-width: none; padding: 6mm 0 0; }
  .kc-main h1 { font-size: 25pt; }
  .kc-main h2 { margin-top: 9mm; font-size: 16pt; }
  .kc-main h3 { font-size: 12pt; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a { color: #111; text-decoration: underline; }
  .kc-toc, .kc-current-route, .kc-figure, .kc-notice, .kc-legacy { border-color: #aaa; background: #fff; }
  .kc-table-scroll { overflow: visible; max-width: none; border-radius: 0; }
  .kc-table-scroll table, .kc-article table { display: table; width: 100%; min-width: 0; font-size: 8.5pt; }
  .kc-article th, .kc-article td { min-width: 0; padding: 2mm; }
  .kc-article tr { break-inside: avoid; }
  .kc-article thead { display: table-header-group; }
  .kc-article pre { white-space: pre-wrap; overflow: visible; }
  .kc-article pre code { white-space: pre-wrap; }
  .kc-figure img { max-width: 140mm; max-height: 190mm; object-fit: contain; }
  .kc-diagram-scroll { overflow: visible; }
  .kc-diagram-scroll img { min-width: 0; }
  .kc-diagram-scrollhint { display: none; }
  .kc-figure details > *, .kc-toc details > * { display: block; }
  details::details-content { display: block; content-visibility: visible; }
  .kc-footer { padding-bottom: 0; }
}
/* Prüfnotiz: Klassenvertrag und Quellfarben abgeglichen; keine Fremdschriften,
   kein JavaScript und keine Netzwerkabhängigkeit hinzugefügt. Browser-, 360px-,
   Tastatur- und Druckprüfung folgen nach Einbindung in den generierten Seiten. */
/* Druckkorrektur 2026-09-11: Alle drei Lesewege samt Schrittfolgen bleiben als
   untereinanderstehende Blöcke sichtbar. Pagination bleibt ausgeblendet; H3
   Abschnitt 6 nennt H4/H6 und den anschließenden H5-Schritt im Lesetext. */
/* Diagrammkorrektur 2026-09-11: Wrapper .kc-diagram-scroll braucht tabindex=0,
   role=region und aria-describedby zum sichtbaren .kc-diagram-scrollhint.
   Labelgrundgröße 18px; SVG-viewBox-Breiten A 884.998, H3 788.316, H6 554.
   Mindestbreiten 700/640/440px ergeben 14.24/14.61/14.30px Text statt Verkleinerung
   auf Mobilbreite. Vollständige Textalternative und Vergrößerungslink beibehalten.
   Druck hebt nur diese Mindestbreiten auf, damit die Grafik auf das Papier passt. */