/* ═══════════════════════════════════════════════════════════════════
   Dokumentation (/docs) — klassisches Handbuch-Layout
   Owner 07.10.2026: „klassische Doku, so wie bei anderer Profi-Software“.
   Kopfleiste mit Suche · Kapitelbaum links (mit den Abschnitten der
   geöffneten Seite) · Text auf weißer Seite. Owner 08.10.2026: „Guide ist
   komisch geboxt und nicht so übersichtlich“, „brauchen wir das kleine Menü
   rechts?“ → keine Karte mehr, keine rechte Spalte. Token aus
   variables.css/primitives.css (UI-Vorlage), bewusst nicht die Landing-Optik.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --doc-kopf: var(--header-height);  /* Höhe des App-Kopfs: 70 px, unter 768 px zweizeilig 120 px (header.css) —
                                          fest 70 px verdeckte auf dem Handy Menü und Suche */
    --doc-reiter: 48px;    /* zweite Leiste: Reiter, Suche, Zur App */
    --doc-navi: 280px;
    /* Raumnutzung (Owner 11.10.2026): Inhaltsblock breit für Tabellen, Bilder
       und Abbildungen; Fließtext bleibt bei lesbarer Zeilenlänge. */
    --doc-block: 1040px;
    --doc-text: 800px;
}

html { scroll-padding-top: calc(var(--doc-kopf) + var(--doc-reiter) + 16px); }
body.doc {
    margin: 0; background: var(--n-0); color: var(--text);
    /* Owner 07.10.2026: „Schriftgrößen im Guide evtl. bisschen größer“ — 16 statt 15 px */
    font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.7;
}

/* ── Kopf: derselbe wie in der App (components/header.html, volle
   Fassung, header.css: position fixed, 70 px) ── */
body.doc { padding-top: var(--doc-kopf); }

/* ── Zweite Leiste: Reiter, Suche, Zur App ─────────────────────── */
.doc-leiste {
    position: sticky; top: var(--doc-kopf); z-index: 25; height: var(--doc-reiter);
    display: flex; align-items: center; gap: var(--s-4); padding: 0 28px;
    background: var(--n-0); border-bottom: 1px solid var(--bd);
}
.doc-leiste__menue { display: none; border: 0; background: none; font-size: 22px; color: var(--text-2); padding: 4px; }

/* Suche */
.doc-suche { position: relative; flex: 0 1 300px; min-width: 200px; margin-left: auto; }
.doc-suche > .bi-search { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 14px; }
.doc-suche input {
    width: 100%; height: 36px; padding: 0 36px 0 34px; font: inherit; font-size: var(--fs-sm);
    border: 1px solid var(--bd-strong); border-radius: var(--r-md); background: var(--bg-sunken); color: var(--text);
}
.doc-suche input:focus { outline: none; background: var(--n-0); border-color: var(--b-500); box-shadow: 0 0 0 3px rgba(66, 116, 165, .18); }
.doc-suche__taste {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font: 600 11px/1 'Inter', sans-serif; color: var(--text-3); background: var(--n-0);
    border: 1px solid var(--bd); border-radius: 4px; padding: 3px 6px;
}
.doc-suche__treffer {
    position: absolute; top: 42px; left: 0; right: 0; max-height: 70vh; overflow: auto;
    background: var(--n-0); border: 1px solid var(--bd); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 6px;
}
.doc-suche__treffer a { display: block; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); }
.doc-suche__treffer a:hover, .doc-suche__treffer a.is-gewaehlt { background: var(--b-50); }
.doc-suche__treffer b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.doc-suche__treffer small { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.doc-suche__treffer mark { background: #fff1a8; padding: 0 1px; border-radius: 2px; }
.doc-suche__leer { padding: 10px; font-size: var(--fs-sm); color: var(--text-3); }


/* ── Reiter (wie BESS-NoiseCheck /hilfe), in der zweiten Leiste ── */
.doc-reiter { display: flex; gap: 4px; height: 100%; overflow-x: auto; }
.doc-reiter a {
    display: flex; align-items: center; padding: 0 9px; font-size: var(--fs-base); font-weight: 500;
    color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.doc-reiter a:hover { color: var(--text); }
.doc-reiter a.is-aktiv { color: var(--b-600); border-bottom-color: var(--b-500); font-weight: 600; }

/* ── Rahmen ─────────────────────────────────────────────────────── */
.doc-rahmen {
    display: grid; grid-template-columns: var(--doc-navi) minmax(0, 1fr);
    max-width: 1600px; margin: 0 auto;
}

/* ── Kapitelbaum ────────────────────────────────────────────────── */
.doc-navi {
    position: sticky; top: calc(var(--doc-kopf) + var(--doc-reiter)); align-self: start;
    height: calc(100vh - var(--doc-kopf) - var(--doc-reiter)); overflow-y: auto;
    padding: var(--s-4) var(--s-3) 48px;
    font-size: var(--fs-base); line-height: 1.45;
    border-right: 1px solid var(--bd);
}
/* Abschnitte der geöffneten Seite (aus der früheren rechten Spalte) */
.doc-navi .doc-navi__abschnitte { margin: 2px 0 6px 18px; padding-left: 8px; border-left: 1px solid var(--bd); font-size: var(--fs-sm); }
.doc-navi__abschnitte a { padding: 3px 8px; color: var(--text-3); }
.doc-navi__abschnitte .doc-navi__nr { min-width: 26px; font-weight: 400; }
/* Glossar: Buchstaben als Leiste */
.doc-navi .doc-navi__abschnitte--buchstaben { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 2px; }
.doc-navi__abschnitte--buchstaben + .doc-navi__abschnitte { margin-top: 0; }
.doc-navi__abschnitte--buchstaben a { padding: 2px 7px; font-weight: 600; }
.doc-navi__abschnitte a.is-aktiv { color: var(--b-700); font-weight: 600; background: var(--b-50); }
.doc-navi ul { list-style: none; margin: 0; padding: 0; }
.doc-navi ul ul { margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--bd); }
.doc-navi a, .doc-navi__leer {
    display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: var(--r-sm);
    color: var(--text-2); text-decoration: none;
}
.doc-navi a:hover { background: var(--bg-sunken); color: var(--text); }
.doc-navi li.is-aktiv > a { background: var(--b-50); color: var(--b-700); font-weight: 600; }
.doc-navi__leer { color: var(--n-400, #94a3b8); cursor: default; }
.doc-navi__nr { flex: 0 0 auto; min-width: 26px; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.doc-navi li.is-aktiv > a .doc-navi__nr { color: var(--b-600); }
.doc-navi__name { flex: 1; }
.doc-navi__extern { font-size: 11px; color: var(--text-3); }
/* Unterkapitel nur unter dem geöffneten Kapitel zeigen */
.doc-navi li:not(.is-offen) > ul { display: none; }
.doc-navi__start {
    font-weight: 600; color: var(--text) !important; margin-bottom: var(--s-2);
}
.doc-navi__start.is-aktiv { background: var(--b-50); }
.doc-navi__teil { margin-top: var(--s-4); }
.doc-navi__teil.is-aktiv > .doc-navi__teilkopf { color: var(--b-600); }
.doc-navi__teilkopf {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-3); padding: 0 8px 6px;
}

/* ── Text ───────────────────────────────────────────────────────── */
/* Text direkt auf der weißen Seite (Owner 08.10.2026: „komisch geboxt“ —
   vorher weiße Karte mit Rahmen auf hellgrauem Grund). */
/* Die Textspalte als EIN Block mittig neben dem Baum; alle Teile beginnen an
   derselben linken Kante (Owner 11.10.2026: Spacing der Startseite — vorher wurde
   jedes Element mit eigener Breite für sich zentriert). */
.doc-text { min-width: 0; width: 100%; box-sizing: border-box; max-width: calc(var(--doc-block) + 112px); justify-self: center; padding: 32px 56px 64px; }
/* Ein Block, mittig im Platz neben dem Baum; alle Teile mit derselben
   linken Kante. Fließtext schmaler, Tabellen und Bilder voll breit. */
.doc-text > * { max-width: var(--doc-block); }
.doc-inhalt > p, .doc-inhalt > ul, .doc-inhalt > ol, .doc-inhalt > h2, .doc-inhalt > h3, .doc-inhalt > h4,
.doc-inhalt > blockquote, .doc-inhalt > pre, .doc-inhalt > .doc-kurz, .doc-inhalt > .guide-warn,
.doc-inhalt > details > p, .doc-inhalt > details > ul, .doc-inhalt > details > ol,
.doc-einleitung { max-width: var(--doc-text); }
/* Bilder stehen im Markdown in einem eigenen Absatz — der darf voll breit sein */
.doc-inhalt > p:has(> img) { max-width: var(--doc-block); }
.doc-pfad { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-3); }
.doc-pfad a { color: var(--text-3); text-decoration: none; }
.doc-pfad a:hover { color: var(--b-600); text-decoration: underline; }
.doc-pfad .bi { font-size: 10px; }
.doc-pfad__drucken {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
    color: var(--text-3); font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: 0;
}
.doc-pfad__drucken .bi { font-size: 13px; }
.doc-pfad__drucken:hover { color: var(--b-600); }
.doc-pfad > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 860px) {
    .doc-pfad__drucken { font-size: 0; }          /* nur das Symbol */
    .doc-pfad__drucken .bi { font-size: 15px; }
    .doc-text { padding: 20px 16px 48px; }
}
.doc-titel { font-size: 2rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(--s-4); color: var(--n-900, #0f172a); }
.doc-titel__nr { color: var(--b-500); margin-right: 14px; font-variant-numeric: tabular-nums; }
.doc-einleitung { font-size: 1.05rem; color: var(--text-2); }

.doc-inhalt h2 {
    font-size: 1.45rem; line-height: 1.3; font-weight: 700; margin: 2.2em 0 .6em; color: var(--n-900, #0f172a);
}
.doc-inhalt > h2:first-child { border-top: 0; margin-top: .4em; padding-top: 0; }
.doc-inhalt h3 { font-size: 1.18rem; font-weight: 650; margin: 1.8em 0 .4em; color: var(--n-900, #0f172a); }
.doc-inhalt h4 { font-size: 1rem; font-weight: 650; margin: 1.4em 0 .3em; }
.doc-inhalt p, .doc-inhalt ul, .doc-inhalt ol { margin: 0 0 1em; }
.doc-inhalt li { margin: .2em 0; }
.doc-inhalt a { color: var(--b-600); text-decoration: underline; text-decoration-color: rgba(53, 96, 138, .35); text-underline-offset: 2px; }
.doc-inhalt a:hover { text-decoration-color: currentColor; }
.doc-inhalt code { font-size: .88em; background: var(--bg-sunken-2); padding: 1px 5px; border-radius: 4px; }
.doc-inhalt pre { background: var(--n-50); border: 1px solid var(--bd); border-radius: var(--r-md); padding: 12px 14px; overflow: auto; }
.doc-inhalt blockquote {
    margin: 0 0 1em; padding: 10px 14px; border-left: 3px solid var(--b-500);
    background: var(--b-50); color: var(--b-700); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.doc-inhalt blockquote p:last-child { margin-bottom: 0; }
.doc-inhalt hr { border: 0; border-top: 1px solid var(--bd); margin: 2em 0; }
.doc-inhalt img { max-width: 100%; height: auto; border: 1px solid var(--bd); border-radius: var(--r-md); }
.doc-tabelle { overflow-x: auto; margin: 0 0 1.2em; }
.doc-inhalt table { border-collapse: collapse; font-size: var(--fs-base); min-width: 100%; }
.doc-inhalt th, .doc-inhalt td { border-bottom: 1px solid var(--bd); padding: 7px 10px; text-align: left; vertical-align: top; }
.doc-inhalt th { background: var(--bg-sunken); font-weight: 600; color: var(--text-2); border-bottom-color: var(--bd-strong); }
/* Kurzfassung am Kapitelanfang (docs_renderer: <div class="doc-kurz">) —
   allgemeinverständlicher Einstieg vor den nummerierten Abschnitten */
.doc-inhalt .doc-kurz {
    margin: 0 0 1.8em; padding: 2px 0 2px 18px; border-left: 3px solid var(--b-500);
    font-size: 1.06rem; line-height: 1.65; color: var(--text);
}
.doc-inhalt .doc-kurz > :last-child { margin-bottom: 0; }
.doc-inhalt .doc-kurz__titel {
    margin: 0 0 4px !important; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--b-600);
}
/* Glossar-Vorschau an Fachbegriffen (docs.js glossarVorschau) */
.doc-inhalt a[aria-describedby="doc-gtipp"] { text-decoration-color: currentColor; }
.doc-gtipp {
    position: absolute; z-index: 40; width: min(360px, calc(100vw - 24px));
    padding: 12px 14px; background: var(--n-0); border: 1px solid var(--bd); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16); font-size: var(--fs-sm); line-height: 1.55; color: var(--text);
}
.doc-gtipp b { display: block; margin-bottom: 4px; }
.doc-gtipp p { margin: 0 0 6px; color: var(--text-2); }
.doc-gtipp a { color: var(--b-600); font-weight: 600; text-decoration: none; }
.doc-gtipp a:hover { text-decoration: underline; }
@media print { .doc-gtipp { display: none !important; } }

/* Verweise */
.doc-ref-offen { color: var(--text-3); border-bottom: 1px dotted var(--text-3); cursor: help; }
.doc-ref-fehlt { color: var(--err); border-bottom: 1px dashed var(--err); cursor: help; }

/* Sonderformate der Texte (aus guide.html übernommen, gleiche Klassen im
   Markdown; der Guide behält seine eigene Fassung bis zur Umstellung) */
.doc-inhalt .guide-warn {
    border-left: 4px solid var(--warn-bd); background: var(--warn-bg); color: #4a3609;
    padding: 14px 18px; margin: 20px 0 24px; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.doc-inhalt .guide-warn > :first-child { margin-top: 0; }
.doc-inhalt .guide-warn > :last-child { margin-bottom: 0; }
/* Vertiefung: <details markdown="1" class="guide-deep"> */
.doc-inhalt details.guide-deep {
    border: 1px solid var(--bd); background: var(--bg-sunken); border-radius: var(--r-lg);
    margin: 8px 0 22px; padding: 0 16px;
}
.doc-inhalt details.guide-deep > summary {
    cursor: pointer; margin: 0 -16px; padding: 11px 16px; font-weight: 600; font-size: var(--fs-sm);
    color: var(--b-600); list-style: none; user-select: none;
}
.doc-inhalt details.guide-deep > summary::-webkit-details-marker { display: none; }
.doc-inhalt details.guide-deep > summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .15s ease; }
.doc-inhalt details.guide-deep[open] > summary::before { transform: rotate(90deg); }
.doc-inhalt details.guide-deep[open] > summary { margin-bottom: 14px; border-bottom: 1px solid var(--bd); }
.doc-inhalt details.guide-deep > *:last-child { margin-bottom: 14px; }
.doc-inhalt details.guide-deep p, .doc-inhalt details.guide-deep li,
.doc-inhalt details.guide-deep td, .doc-inhalt details.guide-deep th { font-size: .92rem; }
/* Ablauf: md_in_html legt den Inhalt in <p> — Flex-Kinder sind <p> (Nummer) und <div> (Text) */
.doc-inhalt .guide-flow { margin: 22px 0 26px; border: 1px solid var(--bd); border-radius: var(--r-lg); background: var(--n-0); padding: 6px 18px; }
.doc-inhalt .guide-flow-step { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bd); }
.doc-inhalt .guide-flow-step:last-child { border-bottom: none; }
.doc-inhalt .guide-flow-step > p:first-child { flex: 0 0 26px; margin: 0; }
.doc-inhalt .guide-flow-n {
    display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--b-500); color: #fff;
    font-size: .8rem; font-weight: 700; line-height: 26px; text-align: center;
}
.doc-inhalt .guide-flow-step > div { flex: 1 1 auto; min-width: 0; }
.doc-inhalt .guide-flow-step p { margin: 0; font-size: .95rem; }
.doc-inhalt .guide-flow-step a { font-weight: 600; }
/* Abbildungen */
.doc-inhalt figure.guide-fig { margin: 24px 0; padding: 14px 16px 12px; border: 1px solid var(--bd); background: var(--n-0); border-radius: var(--r-lg); text-align: center; }
.doc-inhalt figure.guide-fig svg { display: block; margin: 0 auto; max-width: 620px; width: 100%; height: auto; }
.doc-inhalt figure.guide-fig.wide svg { max-width: 940px; }
.doc-inhalt figure.guide-fig figcaption { margin: 10px auto 0; font-size: .82rem; line-height: 1.5; color: var(--text-3); max-width: 600px; }
.doc-inhalt figure.guide-fig img { max-width: 100%; width: 100%; margin: 0 auto; }

/* Vor/Zurück: eine Textzeile (Owner 11.10.2026: die Karten „können weg
   oder viel kleiner“) */
.doc-blaettern {
    display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 48px; padding-top: 14px;
    border-top: 1px solid var(--bd); font-size: var(--fs-sm);
}
.doc-blaettern a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); text-decoration: none; }
.doc-blaettern a:hover { color: var(--b-600); }
.doc-blaettern__nach { margin-left: auto; text-align: right; }

/* Startseite: Einstiege nach Anliegen */
.doc-einstiege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; margin: var(--s-5, 20px) 0 var(--s-2); }
.doc-einstieg { border: 1px solid var(--bd); border-top: 3px solid var(--b-500); border-radius: var(--r-lg); padding: var(--s-4); background: var(--n-0); }
.doc-einstieg h2 { font-size: var(--fs-md); font-weight: 700; margin: 0 0 6px; color: var(--n-900, #0f172a); }
.doc-einstieg p { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-2); margin: 0 0 10px; }
.doc-einstieg ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.doc-einstieg li { margin: 3px 0; }
.doc-einstieg a { color: var(--b-600); text-decoration: none; font-weight: 500; }
.doc-einstieg a:hover { text-decoration: underline; }
.doc-einstieg .doc-navi__nr { display: inline-block; min-width: 34px; color: var(--text-3); }
.doc-verzeichnis__titel { font-size: 1.25rem; font-weight: 700; margin: 2em 0 0; color: var(--n-900, #0f172a); }

/* Startseite: Inhaltsverzeichnis */
/* Spalten statt Raster: Teile fließen ohne Lücken untereinander (ein kurzer Teil
   neben einem langen ließ im Raster große Leerflächen, 11.10.2026). */
.doc-verzeichnis { columns: 2; column-gap: var(--s-4); margin-top: var(--s-4); }
.doc-verzeichnis > .doc-verzeichnis__teil { break-inside: avoid; margin-bottom: var(--s-4); }
.doc-verzeichnis__teil { border: 1px solid var(--bd); border-radius: var(--r-lg); padding: var(--s-4); }
.doc-verzeichnis__teil h2 { font-size: var(--fs-md); margin: 0 0 var(--s-2); }
.doc-verzeichnis__teil h2 .doc-titel__nr { display: block; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 2px; }
.doc-verzeichnis ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.doc-verzeichnis ul ul { margin-left: 34px; }
.doc-verzeichnis li { margin: 4px 0; display: block; }
.doc-verzeichnis a { color: var(--text); text-decoration: none; }
.doc-verzeichnis a:hover { color: var(--b-600); text-decoration: underline; }
.doc-verzeichnis .doc-navi__nr { display: inline-block; min-width: 34px; }
.doc-verzeichnis__leer { color: var(--text-3); }
.doc-verzeichnis__leer em { font-style: normal; font-size: var(--fs-xs); }

/* ── Schmal ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .doc-leiste { padding: 0 12px; gap: 8px; }
    .doc-leiste__menue { display: block; }
    .doc-reiter, .doc-suche__taste { display: none; }
    .doc-suche { margin-left: 0; flex: 1; }
    .doc-rahmen { grid-template-columns: minmax(0, 1fr); }
    .doc-navi {
        /* Höhe ausdrücklich: aus top + bottom abgeleitet wurde das Menü auf
           Telefonen so hoch wie sein Inhalt (1 300 px) und ließ sich nicht
           scrollen — Einträge unterhalb des Bildschirmrands waren nicht
           erreichbar (11.10.2026). dvh folgt der ein-/ausfahrenden Adressleiste. */
        position: fixed; top: var(--doc-kopf); left: 0; bottom: auto; width: min(320px, 86vw);
        height: calc(100vh - var(--doc-kopf) - var(--doc-reiter));
        height: calc(100dvh - var(--doc-kopf) - var(--doc-reiter));
        background: var(--n-0); z-index: 25; transform: translateX(-102%); transition: transform .2s ease;
        box-shadow: 8px 0 24px rgba(15, 23, 42, .12);
    }
    body.doc-navi-offen .doc-navi { transform: none; }
    .doc-text { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-4) 16px 64px; }
    .doc-navi { top: calc(var(--doc-kopf) + var(--doc-reiter)); }
    .doc-titel { font-size: 1.6rem; }
    .doc-einstiege { grid-template-columns: minmax(0, 1fr); }
    .doc-verzeichnis { columns: 1; }
}

/* ── Druck ──────────────────────────────────────────────────────── */
@media print {
    .header, .doc-leiste, .doc-navi, .doc-blaettern, .doc-pfad { display: none !important; }
    body.doc { background: #fff; padding-top: 0; }
    .doc-text { margin: 0; border: 0; box-shadow: none; padding: 0; }
    .doc-rahmen { display: block; }
    .doc-text { padding: 0; }
    .doc-text > * { max-width: none; }
    .doc-inhalt a { color: inherit; text-decoration: none; }
    .doc-inhalt h2 { break-after: avoid; }
}

/* ── Qualitätssicherung (Kap. D, docs_qa.py) ─────────────────────────
   Prüfläufe der Engine: Stand, Bilanz, Übersicht je Gruppe, Fälle zum
   Aufklappen. Urteilsfarben: bestanden = ok, dokumentiert = warn,
   nicht bestanden = err, Modellgrenze = neutral. */
.doc-inhalt .qa-meldung {
    display: flex; gap: 10px; align-items: baseline; margin: 0 0 var(--s-4);
    padding: 10px 14px; border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-sm); line-height: 1.5;
}
.qa-meldung--ok { background: var(--ok-bg); border-color: var(--ok-bd); color: #0b5e41; }
.qa-meldung--warn { background: var(--warn-bg); border-color: var(--warn-bd); color: #7c3a06; }
.qa-meldung--info { background: var(--b-50); border-color: var(--b-100); color: var(--text); }
.qa-meldung a { margin-left: 6px; }

.doc-inhalt .qa-fakten {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--s-5);
    background: var(--bd); border: 1px solid var(--bd); border-radius: var(--r-lg); overflow: hidden;
}
.qa-fakten > div { background: var(--n-0); padding: 10px 14px; min-width: 0; }
.qa-fakten dt { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.qa-fakten dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.qa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.qa-klein { font-size: 12px; color: var(--text-2); }
.doc-inhalt .qa-klein-text { font-size: var(--fs-sm); color: var(--text-2); }

/* Bilanz */
.doc-inhalt .qa-bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 10px; }
.qa-kachel {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r-lg);
    border: 1px solid var(--bd); background: var(--n-0); border-top: 4px solid var(--n-300);
}
.qa-kachel__zahl { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.qa-kachel__name { font-weight: 600; font-size: var(--fs-sm); }
.qa-kachel__text { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.qa-kachel--bestanden { border-top-color: var(--ok); } .qa-kachel--bestanden .qa-kachel__zahl { color: var(--ok); }
.qa-kachel--dokumentiert { border-top-color: #f59e0b; } .qa-kachel--dokumentiert .qa-kachel__zahl { color: var(--warn); }
.qa-kachel--nicht_bestanden { border-top-color: var(--err); } .qa-kachel--nicht_bestanden .qa-kachel__zahl { color: var(--err); }
.qa-kachel--modellgrenze .qa-kachel__zahl { color: var(--text-2); }
.doc-inhalt .qa-balken { display: flex; gap: 2px; height: 8px; margin: 0 0 var(--s-5); border-radius: 4px; overflow: hidden; }
.qa-balken__teil--bestanden { background: var(--ok); }
.qa-balken__teil--dokumentiert { background: #f59e0b; }
.qa-balken__teil--nicht_bestanden { background: var(--err); }
.qa-balken__teil--modellgrenze { background: var(--n-400); }

/* Übersicht: eine Zeile je Gruppe, ein Feld je Fall */
.doc-inhalt .qa-matrix { border: 1px solid var(--bd); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 var(--s-6); }
.qa-matrix__kopf {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 14px;
    background: var(--bg-sunken); border-bottom: 1px solid var(--bd); font-weight: 600; font-size: var(--fs-sm);
}
.qa-matrix__kopf span { font-weight: 400; color: var(--text-3); font-size: 12px; }
.qa-matrix__zeile { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 14px; }
.qa-matrix__zeile + .qa-matrix__zeile { border-top: 1px solid var(--n-100); }
.doc-inhalt .qa-matrix__gruppe { color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.qa-matrix__gruppe b { display: inline-block; width: 18px; color: var(--b-600); }
.qa-matrix__gruppe:hover { color: var(--b-600); }
.qa-matrix__faelle { display: flex; flex-wrap: wrap; gap: 5px; }
.doc-inhalt .qa-chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 26px; padding: 0 6px;
    border-radius: 6px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none;
    border: 1px solid; transition: transform var(--transition-fast, .12s);
}
.qa-chip:hover { transform: translateY(-1px); }
.doc-inhalt .qa-chip--bestanden { background: var(--ok); border-color: var(--ok); color: #fff; }
.doc-inhalt .qa-chip--dokumentiert { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.doc-inhalt .qa-chip--nicht_bestanden { background: var(--err); border-color: var(--err); color: #fff; }
.doc-inhalt .qa-chip--modellgrenze { background: var(--n-500); border-color: var(--n-500); color: #fff; }

/* Urteil als Plakette, Gruppenkopf */
.qa-urteil { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.qa-urteil--bestanden, .qa-mini--bestanden { background: var(--ok-bg); color: #0b5e41; }
.qa-urteil--dokumentiert, .qa-mini--dokumentiert { background: var(--warn-bg); color: #7c3a06; }
.qa-urteil--nicht_bestanden, .qa-mini--nicht_bestanden { background: var(--err-bg); color: var(--err); }
.qa-urteil--modellgrenze, .qa-mini--modellgrenze { background: var(--n-100); color: var(--text-2); }
.qa-mini { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.doc-inhalt .qa-gruppe__kopf { font-size: 12.5px; color: var(--text-3); margin: -4px 0 8px; }

/* Fälle */
.doc-inhalt .qa-gruppe { border: 1px solid var(--bd); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 var(--s-5); }
.qa-fall + .qa-fall { border-top: 1px solid var(--n-100); }
.qa-fall { border-left: 3px solid transparent; }
.qa-fall--bestanden { border-left-color: var(--ok); }
.qa-fall--dokumentiert { border-left-color: #f59e0b; }
.qa-fall--nicht_bestanden { border-left-color: var(--err); }
.qa-fall--modellgrenze { border-left-color: var(--n-400); }
.qa-fall > summary {
    display: grid; grid-template-columns: 14px 46px minmax(0, 1fr) minmax(0, .8fr) auto; gap: 10px; align-items: center;
    padding: 9px 14px; cursor: pointer; list-style: none; font-size: var(--fs-sm);
}
.qa-fall > summary::-webkit-details-marker { display: none; }
.qa-fall > summary::before {
    content: "\F285"; font-family: bootstrap-icons; font-size: 11px; color: var(--text-3); transition: transform .15s;
}
.qa-fall[open] > summary::before { transform: rotate(90deg); }
.qa-fall > summary:hover { background: var(--bg-sunken); }
.qa-fall__nr { font-weight: 700; color: var(--text); background: none; padding: 0; }
.qa-fall__titel { font-weight: 500; color: var(--text); }
.qa-fall__ref { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-fall[open] { background: #fcfdfe; }
.qa-fall__inhalt { padding: 2px 16px 16px 42px; }
.doc-inhalt .qa-beschreibung { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-2); max-width: var(--doc-text); }
.doc-inhalt .qa-hinweis { margin: 0 0 10px; font-size: 12.5px; color: var(--text-3); }
.qa-bekannt, .qa-fehler {
    margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.5; max-width: var(--doc-text);
}
.qa-bekannt { background: var(--warn-bg); border: 1px solid var(--warn-bd); color: #5c2d05; }
.qa-fehler { background: var(--err-bg); border: 1px solid var(--err-bd); color: var(--err); }

.qa-abbildungen { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 12px; align-items: flex-start; }
.doc-inhalt .qa-abb { margin: 0; flex: 0 1 340px; min-width: 0; }
.doc-inhalt .qa-abb--breit { flex: 1 1 100%; }
.qa-abb figcaption { font-size: 11.5px; color: var(--text-3); margin: 0 0 4px; text-align: left; }
.doc-inhalt .qa-abb img { width: 100%; max-width: 340px; border: 1px solid var(--bd); border-radius: var(--r-md); display: block; }
.qa-grundriss { width: 100%; max-width: 340px; display: block; background: #f8fafc; border: 1px solid var(--bd); border-radius: var(--r-md); }
.qa-g-pv { fill: var(--b-500); fill-opacity: .35; stroke: var(--b-500); }
.qa-g-pv-linie { stroke: var(--b-500); stroke-width: 4; fill: none; }
.qa-g-aus { fill: #fff; stroke: #94a3b8; stroke-dasharray: 3 2; }
.qa-g-hin { stroke: #334155; stroke-width: 2.5; fill: none; }
.qa-g-hin--zu { fill: #33415555; }
.qa-g-bp { fill: #dc2626; stroke: #fff; stroke-width: 1.5; }
.qa-g-nr { font: 700 9px/1 'Inter', sans-serif; fill: #fff; text-anchor: middle; }
.qa-g-ort { fill: #dc2626; }
.qa-g-hilfslinie { stroke: #dc2626; stroke-width: 1; }
.qa-g-nord { font-size: 10px; fill: #94a3b8; }
/* Legende und Betrachterliste unter den Grafiken (Owner 11.10.2026, #32: Legenden fehlten) */
.qa-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 4px; font-size: 11.5px; color: var(--text-2); }
.qa-legende__eintrag { display: inline-flex; align-items: center; gap: 5px; }
.qa-legende__zeichen { width: 12px; height: 10px; border-radius: 2px; flex: none; }
.qa-legende__zeichen--pv { background: rgba(66, 116, 165, .35); border: 1px solid var(--b-500); }
.qa-legende__zeichen--hin { background: #33415555; border: 2px solid #334155; }
.qa-legende__zeichen--aus { background: #fff; border: 1px dashed #94a3b8; }
.qa-legende__zeichen--bp { width: 10px; border-radius: 50%; background: #dc2626; }
.qa-legende__zeichen--ref { background: #94a3b8; }
.qa-legende__zeichen--eng { background: var(--b-500); }
.qa-legende__zeichen--mehr { background: #dc2626; }
.qa-nr {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 16px; height: 16px; margin-right: 6px; border-radius: 50%;
    background: #dc2626; color: #fff; font: 700 10px/1 'Inter', sans-serif;
}
.doc-inhalt .qa-bp-liste { list-style: none; margin: 2px 0 0; padding: 0; font-size: 12px; color: var(--text-2); }
.doc-inhalt .qa-bp-liste li { display: flex; align-items: center; margin: 2px 0; }
.qa-tage__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--text-2); margin: 12px 0 3px; }
.qa-tage__kopf strong { color: var(--text); font-weight: 600; }
.qa-tage__zahlen { color: var(--text-3); font-variant-numeric: tabular-nums; }
.qa-tage { width: 100%; max-width: 730px; height: 62px; display: block; }
.qa-t-ref { fill: #94a3b8; } .qa-t-ref--mehr { fill: #dc2626; }
.qa-t-eng { fill: var(--b-500); }
.qa-t-monat { stroke: #e2e8f0; } .qa-t-achse { stroke: #64748b; }
.qa-monate { display: grid; max-width: 730px; font-size: 10px; color: var(--text-3); }
.qa-monate span { padding-left: 2px; border-left: 1px solid #e2e8f0; }

.doc-inhalt .qa-tabelle { overflow-x: auto; margin: 0 0 4px; }
.doc-inhalt .qa-tabelle table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0; }
.doc-inhalt .qa-tabelle th { text-align: left; font-weight: 600; color: var(--text-3); font-size: 11.5px; padding: 5px 8px; border-bottom: 1px solid var(--bd); background: none; }
.doc-inhalt .qa-tabelle td { padding: 4px 8px; border-bottom: 1px solid var(--n-100); vertical-align: top; }
.qa-tabelle .qa-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qa-tabelle .qa-tol { color: var(--text-3); white-space: nowrap; }
.qa-zeichen { width: 18px; }
.qa-zeile--ok .qa-zeichen { color: var(--ok); }
.qa-zeile--dok { background: #fffdf3; } .qa-zeile--dok .qa-zeichen { color: #f59e0b; }
.qa-zeile--fehl { background: #fff6f7; } .qa-zeile--fehl .qa-zeichen { color: var(--err); }
.qa-gezeigt td { background: var(--b-50); }

@media (max-width: 860px) {
    .doc-inhalt .qa-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .qa-matrix__zeile { grid-template-columns: 1fr; gap: 6px; }
    .qa-fall > summary { grid-template-columns: 14px 42px minmax(0, 1fr) auto; }
    .qa-fall__ref { display: none; }
    .qa-fall__inhalt { padding-left: 16px; }
}
@media print {
    .qa-fall > summary::before { display: none; }
    .qa-fall:not([open]) .qa-fall__inhalt { display: none; }
}