/* =============================================================
   PPM High Purity Metals · REPORT-LAYOUT
   Verbindliches Seitendesign für mehrseitige Berichte, Handbücher,
   Auditberichte und Richtlinien (A4 hoch, 794 × 1123 px @ 96 dpi).

   Abgeleitet vom Dokumenten-Kit (ui_kits/document/general.css):
   dieselbe Wortmarke, dieselbe Klassifizierungslogik (6-px-Linie +
   dunkler Akzenttext auf Weiß), dieselbe Fußzeilen-Systematik.

   Regeln:
   · Firmenname ist ausschließlich "PPM High Purity Metals GmbH".
   · Ist die Stufe nicht TLP:CLEAR, MUSS das Klassifizierungsbanner (.page-class)
     als Kopfzeile auf JEDER Seite stehen — Titelseite eingeschlossen. Bei
     TLP:CLEAR ist es optional (schwarze Linie, .cls--clear): entweder auf
     allen Seiten oder auf keiner. In der Fußzeile steht nie eine Kennzeichnung.
   · Die Schlussseite trägt statt der laufenden Fußzeile das Kolophon
     (.colophon) und wahlweise den Metadatenblock (.meta-card) oder nichts.
   · Dokumente ohne Titelseite tragen die Metadaten stattdessen im Dokument-
     kopf (.dochead) auf Seite 1; eine Schlussseite entfällt dann.
   · Alle Farben aus colors_and_type.css. Text auf Weiß ≥ 4,5:1,
     Text auf Markenblau ≥ 7:1.
   Artefaktspezifische Bausteine (Swatches, Demos, Specimen) liegen
   in der jeweiligen Artefakt-CSS und bauen hierauf auf.
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--neutral-100); font-family: var(--font-sans); color: var(--fg-2); -webkit-font-smoothing: antialiased; }

/* ---------- Blattstapel & A4-Blatt ---------------------------------- */
.deck { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 0 80px; }
.page { position: relative; width: 794px; height: 1123px; background: var(--neutral-0); color: var(--fg-2); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(36,62,73,0.10), 0 18px 50px rgba(36,62,73,0.16); }
.page__inner { position: relative; flex: 1; min-height: 0; margin: 56px 64px 30px; display: flex; flex-direction: column; }
.spacer { flex: 1; }

/* ---------- Klassifizierungsstufen ---------------------------------- */
/* Stufenklasse auf .deck (gilt für alle Seiten) oder auf einer Seite.  */
.cls--clear, .doc--clear { --cls-bar: var(--color-tlp-clear); --cls-fg: var(--color-tlp-fg-clear); --cls-on: var(--neutral-0); }
.cls--restricted, .cls--green, .doc--restricted { --cls-bar: var(--color-tlp-green); --cls-fg: var(--color-tlp-fg-green); --cls-on: var(--neutral-1000); }
.cls--confidential, .cls--amber, .doc--confidential { --cls-bar: var(--color-tlp-amber); --cls-fg: var(--color-tlp-fg-amber); --cls-on: var(--neutral-1000); }
.cls--strict, .cls--amber-strict, .doc--strict { --cls-bar: var(--color-tlp-amber-strict); --cls-fg: var(--color-tlp-fg-amber-strict); --cls-on: var(--neutral-1000); }
.cls--secret, .cls--red, .doc--secret { --cls-bar: var(--color-tlp-red); --cls-fg: var(--color-tlp-fg-red); --cls-on: var(--neutral-1000); }
.cls--airfreight, .cls--blue, .doc--airfreight { --cls-bar: var(--color-tlp-blue); --cls-fg: var(--color-tlp-fg-blue); --cls-on: var(--neutral-1000); }

/* Klassifizierungsbanner in der Kopfzeile JEDER Seite — inkl. Titelseite.
   Aufbau: 6-px-Vollton in der TLP-Farbe über die ganze Blattbreite, darunter
   Schutzstufe (links) und TLP-Begriff (rechts) in --cls-fg auf Weiß, optional
   eine Zeile mit den Zugriffsberechtigten.
   Bei TLP:CLEAR ist das Banner optional: wird es gesetzt, trägt es die schwarze
   Linie und "TLP:CLEAR" und weist das Dokument aktiv als freigegeben aus —
   sinnvoll für Veröffentlichungen, die neben klassifizierten Fassungen laufen.
   Wird es weggelassen, bleibt der Seitenkopf leer; ein halbes Banner (Linie
   ohne Text oder Text ohne Linie) gibt es nicht. */
.page-class { flex: none; background: var(--neutral-0); border-bottom: 1px solid var(--border-2); }
.page-class .cc-rule { height: 6px; background: var(--cls-bar, var(--color-tlp-clear)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.page-class .cc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 7px 64px 6px; color: var(--cls-fg, var(--color-tlp-fg-clear)); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; font-variant-caps: all-small-caps; }
.page-class .cc-tlp { flex: none; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.page-class .cc-access { display: flex; gap: 8px; padding: 0 64px 8px; color: var(--cls-fg, var(--color-tlp-fg-clear)); font-size: 10px; line-height: 1.4; text-wrap: pretty; }
.page-class .cc-label { flex: none; font-weight: 700; letter-spacing: 0.08em; font-variant-caps: all-small-caps; }
.page-class .cc-label::after { content: ":"; }
.page-class .cc-names { font-weight: 600; min-width: 0; }
.page-class .cc-copy { flex: none; margin-left: auto; padding-left: 20px; white-space: nowrap; font-weight: 600; }
/* Seiten mit Banner: der Satzspiegel rückt nur noch um den Kopfabstand nach,
   die Bannerhöhe ergibt sich aus dem Fluss — auch bei Umbruch oder längerer
   Zugriffszeile. */
.page:has(.page-class) .page__inner { margin-top: 22px; }

/* ---------- Kolumnentitel & Fußzeile -------------------------------- */
.runhead { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border-2); margin-bottom: 30px; }
.runhead .rh-meta { font-size: 10px; letter-spacing: var(--tr-eyebrow); font-variant-caps: all-small-caps; font-weight: var(--w-bold); color: var(--neutral-600); text-align: right; }
.runfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 9px; border-top: 1px solid var(--border-2); font-size: 9.5px; letter-spacing: 0.04em; color: var(--neutral-600); font-weight: var(--w-semibold); }
.runfoot .pnum { font-variant-numeric: tabular-nums; color: var(--ppm-slate); font-weight: var(--w-bold); }

/* ---------- Wortmarke (CSS-Rekonstruktion, Exo 2) ------------------- */
.lockup { --rule: var(--ppm-grey); --tag: var(--ppm-grey); display: inline-flex; align-items: center; font-family: "Exo 2", var(--font-sans); font-weight: 600; color: var(--ppm-blue); line-height: 1; white-space: nowrap; }
.lockup .wm { font-size: 1em; line-height: 1; letter-spacing: 0.01em; }
.lockup .bar { display: inline-block; flex-shrink: 0; width: 0.054em; height: 0.70em; background: var(--rule); margin: 0 0.15em 0 0.16em; }
.lockup .tag { font-size: 0.224em; line-height: 1.04; color: var(--tag); font-weight: 600; letter-spacing: 0; text-transform: none; }
.lockup.is-light { color: #fff; --rule: #fff; --tag: #fff; }

/* ---------- Titelseite (optional) ------------------------------------
   Ein Bericht KANN mit einer Titelseite beginnen; kurze Vermerke und
   Aktennotizen dürfen direkt mit der Kapitelseite starten.

   Wann sie Pflicht wird: Sobald das Inhaltsverzeichnis auf einer eigenen
   Seite steht oder über mehr als eine Seite läuft, trägt das Dokument eine
   Titelseite. Umgekehrt: ein Dokument ohne eigenständiges Inhaltsverzeichnis
   braucht keine.

   Wird sie gesetzt, gilt genau dieses Muster (Vorbild: Corporate Design
   Manual) — es ist nicht variabel:
   · Vollflächiges Markenblau, Satzspiegel 64 px — keine Bilder, kein Verlauf.
   · Kopfbalken .topbar: weiße Wortmarke links, "PPM High Purity Metals GmbH"
     rechts, Haarlinie darunter. Der Firmenname steht hier immer voll aus.
   · Mitte .center: .kicker (Gattung, z. B. "Bericht"), h1 mit optionalem
     .thin-Untertitel, .sub mit einem Satz zum Zweck.
   · Fußbalken .botbar: Ausgabe/Datum links, .rule-motif mittig, Domain und
     Standort rechts.
   · Das Klassifizierungsbanner sitzt — wie auf jeder Seite — oben
     angeschlagen; die Titelseite trägt zusätzlich die Zugriffsberechtigten.
   Ohne Titelseite übernimmt die erste Kapitelseite Kolumnentitel und
   Fußzeile unverändert.                                                  */
.cover { background: var(--ppm-blue); color: #fff; }
.cover .page__inner { margin: 0; }
.cover .cover-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 64px; }
.cover:has(.page-class) .cover-grid { padding-top: 44px; }
.cover .topbar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 18px; }
.cover .topbar .meta { font-size: 10.5px; letter-spacing: var(--tr-eyebrow); font-variant-caps: all-small-caps; font-weight: 700; color: #fff; }
.cover .center { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cover .kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: #fff; margin: 0 0 22px; display: inline-flex; align-items: center; gap: 12px; }
.cover .kicker::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.5); }
.cover h1 { font-size: 72px; line-height: 0.98; font-weight: var(--w-bold); margin: 0; letter-spacing: -0.02em; color: #fff; }
.cover h1 .thin { font-weight: var(--w-regular); color: rgba(255,255,255,0.88); display: block; }
.cover .sub { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: #EAF1F6; max-width: 46ch; font-weight: var(--w-medium); }
.cover .botbar { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.45); padding-top: 18px; font-size: 11px; color: #EAF1F6; font-weight: var(--w-medium); }
.cover .botbar b { color: #fff; font-weight: var(--w-bold); }
.cover .rule-motif { display: flex; gap: 4px; align-items: center; }
.cover .rule-motif i { display: block; width: 2px; height: 18px; background: #fff; }

/* ---------- Dokumentkopf (Standard-Dokument) --------------------------
   Tritt an die Stelle der Titelseite: Dokumentart, Titel und die Pflicht-
   angaben stehen auf Seite 1 über dem Text. Nur Linien, kein Farbfeld.
   Die Angabenliste ist frei erweiterbar; Reihenfolge spaltenweise.      */
.dochead { flex: none; margin-bottom: 26px; }
.dochead .dh-kind { margin: 0 0 8px; font-size: 11px; letter-spacing: var(--tr-eyebrow); font-variant-caps: all-small-caps; font-weight: var(--w-bold); color: var(--ppm-blue); }
.dochead h1 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -0.01em; font-weight: var(--w-bold); color: var(--ppm-slate); text-wrap: pretty; }
.dochead h1 .thin { display: block; margin-top: 7px; font-size: 0.6em; line-height: 1.3; font-weight: var(--w-regular); letter-spacing: 0; color: var(--neutral-600); }
.dochead .dh-meta { margin-top: 20px; padding-top: 4px; border-top: 2px solid var(--ppm-blue); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.dochead .dh-meta .f { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-2); font-size: 11px; line-height: 1.5; }
.dochead .dh-meta .k { flex: none; width: 12ch; font-variant-caps: all-small-caps; letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold); color: var(--neutral-600); }
.dochead .dh-meta .v { min-width: 0; font-weight: var(--w-medium); color: var(--fg-2); }
.dochead .dh-meta .v.mono { font-family: var(--font-mono); font-size: 10.5px; }
.dochead .dh-meta .v.tnum { font-variant-numeric: tabular-nums; }
.dochead .dh-meta .f.wide { grid-column: 1 / -1; }

/* ---------- Kapitelkopf & Textebenen -------------------------------- */
.eyebrow { font-size: 11px; letter-spacing: var(--tr-eyebrow); font-variant-caps: all-small-caps; font-weight: var(--w-bold); color: var(--neutral-600); margin: 0; }
.chap-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.chap-num { font-family: "Exo 2", var(--font-sans); font-weight: 600; font-size: 26px; color: var(--neutral-400); line-height: 1; font-variant-numeric: tabular-nums; }
h1.chap-title { font-size: 30px; font-weight: var(--w-bold); color: var(--ppm-blue); margin: 0; letter-spacing: var(--tr-tight); line-height: 1.1; }
.chap-lead { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); font-weight: var(--w-medium); max-width: 62ch; margin: 14px 0 0; }
h2.sec { font-size: 13px; font-weight: var(--w-bold); color: var(--ppm-blue); margin: 30px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border-2); font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
h3.subsec { font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ppm-slate); margin: 0 0 6px; }
p { line-height: 1.6; }
.body { font-size: 12.5px; line-height: 1.62; color: var(--fg-2); font-weight: var(--w-medium); }
.muted { color: var(--neutral-600); }
code, .mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.flow > * + * { margin-top: 12px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cols-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* ---------- Tabellen (Berichtsstandard) ------------------------------
   Eine Tabellenform für alles: Markenblaue Kopfzeile in Kapitälchen über
   einer 1-px-Markenlinie, Haarlinien zwischen den Zeilen, Zebra auf
   --neutral-25, Zahlen als Tabellenziffern. Keine Vollrahmen, keine
   Farbflächen in den Zellen — Status kommt über .cell-tag.
   Mit .tbl-block umschlossen, damit Überschrift, Tabelle und Quelle
   zusammen umbrechen.                                                    */
.tbl-block { break-inside: avoid; flex: none; }
.tbl-block + .tbl-block { margin-top: 18px; }
.tbl-caption { display: flex; align-items: baseline; gap: 8px; font-size: 11px; margin: 0 0 7px; color: var(--ppm-slate); font-weight: var(--w-semibold); line-height: 1.4; }
.tbl-caption .no { flex: none; color: var(--ppm-blue); font-weight: var(--w-bold); font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rpt-table th { text-align: left; font-variant-caps: all-small-caps; letter-spacing: 0.04em; color: var(--ppm-blue); font-weight: var(--w-bold); padding: 7px 10px; border-bottom: 1px solid var(--ppm-blue); }
.rpt-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-2); color: var(--fg-1); font-weight: var(--w-medium); vertical-align: top; font-variant-numeric: tabular-nums; }
.rpt-table tbody tr:nth-child(even) td { background: var(--neutral-25); }
.rpt-table th.num, .rpt-table td.num { text-align: right; }
.rpt-table th.unit, .rpt-table td.unit { white-space: nowrap; }
.rpt-table td.mono { font-family: var(--font-mono); font-size: 10.5px; }
.rpt-table tfoot td { background: var(--neutral-0); border-top: 1px solid var(--ppm-blue); border-bottom: none; font-weight: var(--w-bold); color: var(--ppm-slate); }
/* Varianten */
.rpt-table--compact th, .rpt-table--compact td { padding: 4px 8px; font-size: 10.5px; }
.rpt-table--plain tbody tr:nth-child(even) td { background: transparent; }
.rpt-table--key { font-size: 11.5px; }
.rpt-table--key th { width: 34%; color: var(--ppm-slate); border-bottom: 1px solid var(--border-2); font-variant-caps: normal; letter-spacing: 0; }
.cell-tag { display: inline-block; padding: 1px 7px; border-radius: var(--r-2); font-size: 10px; font-weight: var(--w-bold); letter-spacing: 0.02em; }
.cell-tag--ok { background: var(--bg-success-soft); color: var(--accent-green); }
.cell-tag--warn { background: var(--bg-warning-soft); color: var(--color-tlp-fg-amber); }
.cell-tag--crit { background: var(--bg-danger-soft); color: var(--accent-red-dark); }
.tbl-note { font-size: 10px; color: var(--neutral-600); margin: 6px 0 0; line-height: 1.45; font-weight: var(--w-medium); }
.tbl-note b { color: var(--ppm-slate); font-weight: var(--w-bold); }

/* ---------- Abbildungen ---------------------------------------------- */
.figure { break-inside: avoid; flex: none; }
.figure .frame { border: 1px solid var(--border-2); border-radius: var(--r-card); background: var(--neutral-25); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.figure .frame img, .figure .frame svg { max-width: 100%; height: auto; display: block; }
.figure .fig-caption { display: flex; align-items: baseline; gap: 8px; font-size: 10.5px; color: var(--neutral-600); margin: 7px 0 0; line-height: 1.45; font-weight: var(--w-medium); }
.figure .fig-caption .no { flex: none; color: var(--ppm-blue); font-weight: var(--w-bold); font-variant-caps: all-small-caps; letter-spacing: 0.06em; }

/* ---------- Freigabe- und Ablehnungsmarke -----------------------------
   Runder Vollton mit weißem Glyph: grün mit Haken für „so ist es richtig",
   rot mit Kreuz für „so nicht". Ausschließlich für Beurteilungen —
   Do/Don't-Beispiele, Prüfergebnisse, Checklisten. Nie als Dekoration und
   nie in anderen Farben. Markup:
     <span class="mark mark--do"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>
     <span class="mark mark--dont"><svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></span>
   Größe über --mark-size (Standard 16 px); der Glyph skaliert mit.        */
.mark { --mark-size: 16px; flex-shrink: 0; width: var(--mark-size); height: var(--mark-size); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mark svg { width: calc(var(--mark-size) * 0.69); height: calc(var(--mark-size) * 0.69); stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark--do { background: var(--accent-green); }
.mark--dont { background: var(--accent-red-dark); }
.mark--lg { --mark-size: 24px; }

/* ---------- Do / Don't-Kacheln ----------------------------------------
   Zwei Spalten, je Kachel eine Beispielfläche und eine Bildunterschrift mit
   Marke. Die Oberkante der Unterschrift trägt die Farbe der Beurteilung.  */
.dd { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dd .tile { border: 1px solid var(--border-2); border-radius: var(--r-card); overflow: hidden; }
.dd .tile .stage { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--neutral-25); padding: 12px; }
.dd .tile .cap { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-2); font-size: 11px; line-height: 1.4; color: var(--fg-2); font-weight: var(--w-medium); }
.dd .do .cap { border-top-color: var(--accent-green); }
.dd .dont .cap { border-top-color: var(--accent-red-dark); }
/* Kurzschreibweise innerhalb der Kacheln: <span class="tag"> erbt die Marke. */
.dd .tag { --mark-size: 16px; flex-shrink: 0; width: var(--mark-size); height: var(--mark-size); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dd .tag svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dd .do .tag { background: var(--accent-green); }
.dd .dont .tag { background: var(--accent-red-dark); }

/* ---------- Merksatz / Hinweis ---------------------------------------
   Einziges zulässiges Hervorhebungsmuster im Fließtext: 2-px-Markenlinie
   links (Signaturelement der Wortmarke), kein Farbfeld, kein Icon.        */
.note { border-left: 2px solid var(--ppm-grey); padding: 2px 0 2px 14px; font-size: 12px; line-height: 1.55; color: var(--fg-2); font-weight: var(--w-medium); }
.note--brand { border-left-color: var(--ppm-blue); }
.note .note-label { display: block; font-size: 10px; font-variant-caps: all-small-caps; letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold); color: var(--ppm-blue); margin-bottom: 2px; }

/* ---------- Freigabe & Unterschriften --------------------------------
   Zwei bis drei Felder in einer Zeile: Rolle, Unterschriftenlinie, Name
   und Funktion. Nur für Dokumente, die eine Freigabe tragen müssen.     */
.signrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 28px; break-inside: avoid; }
.signrow.is-2 { grid-template-columns: repeat(2, 1fr); }
.signrow .sig { display: flex; flex-direction: column; gap: 7px; }
.signrow .sig .role { font-size: 10px; font-variant-caps: all-small-caps; letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold); color: var(--ppm-blue); }
.signrow .sig .line { height: 36px; border-bottom: 1px solid var(--fg-2); }
.signrow .sig .who { font-size: 10.5px; line-height: 1.45; font-weight: var(--w-medium); color: var(--neutral-600); }
.signrow .sig .who b { display: block; color: var(--fg-2); font-weight: var(--w-bold); }

/* ---------- Metadaten (Dokumentenlenkung) -----------------------------
   Eine Form für alle Metadaten — Schlussseite eines Berichts wie Dokument-
   kopf: 2-px-Markenlinie, darunter je Zeile Feldname in Kapitälchen und
   Wert, getrennt durch Haarlinien. Kein Farbfeld, keine Karte. Überschrift
   frei wählbar; verbindlich sind `tlp`, `author` und `date created`.
   Lange Werte (UIDs) stehen mit .wide über beide Spalten.               */
.meta-card { background: none; border: 0; padding: 0; }
.meta-card .meta-title { font-size: 15px; font-weight: var(--w-bold); color: var(--ppm-slate); margin: 0 0 8px; letter-spacing: var(--tr-tight); }
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; padding-top: 4px; border-top: 2px solid var(--ppm-blue); font-size: 11px; line-height: 1.5; }
.meta-grid .f { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--border-2); text-wrap: pretty; }
.meta-grid .f.wide { grid-column: 1 / -1; }
.meta-grid .k { flex: none; width: 12ch; font-variant-caps: all-small-caps; letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold); color: var(--neutral-600); }
.meta-grid .v { min-width: 0; color: var(--fg-2); font-weight: var(--w-medium); word-break: break-word; }
.meta-grid .v.tnum { font-variant-numeric: tabular-nums; }
.meta-grid .v.mono { font-family: var(--font-mono); font-size: 10.5px; }

/* Kolophon — kräftige Markenlinie, Wortmarke, Revisionsstand. Nur auf der
   Schlussseite; ersetzt dort die laufende Fußzeile.                       */
.colophon { margin-top: auto; border-top: 2px solid var(--ppm-blue); padding: 14px 0 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.colophon .rev { text-align: right; font-size: 10px; line-height: 1.5; color: var(--neutral-600); font-weight: var(--w-medium); font-variant-numeric: tabular-nums; }
.colophon .rev b { display: block; color: var(--ppm-slate); font-weight: var(--w-bold); font-size: 10.5px; letter-spacing: 0.06em; font-variant-caps: all-small-caps; }

/* ---------- Inhaltsverzeichnis ---------------------------------------
   Eine Zeile je Eintrag: Nummer, Titel, Punktlinie, optionale Beschreibung,
   Seitenzahl. Zweite Ebene mit .lvl-2 (eingerückt, kleiner, ohne Linie).   */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-2); }
.toc .n { font-family: "Exo 2", var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ppm-blue); width: 26px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.toc .t { font-size: 14px; font-weight: var(--w-semibold); color: var(--ppm-slate); }
.toc .d { font-size: 11.5px; color: var(--neutral-600); font-weight: var(--w-medium); }
.toc .dots { flex: 1; border-bottom: 1px dotted var(--neutral-300); transform: translateY(-3px); }
.toc .pg { font-size: 12px; color: var(--ppm-slate); font-variant-numeric: tabular-nums; font-weight: var(--w-bold); }
.toc li.lvl-2 { padding: 6px 0 6px 26px; border-bottom: none; }
.toc li.lvl-2 .n { width: 30px; font-size: 11px; color: var(--neutral-600); }
.toc li.lvl-2 .t { font-size: 12px; font-weight: var(--w-medium); color: var(--fg-2); }
.toc li.lvl-2 .pg { font-size: 11px; font-weight: var(--w-semibold); color: var(--neutral-600); }
.toc .part { display: block; padding: 20px 0 8px; font-size: 10.5px; font-variant-caps: all-small-caps; letter-spacing: var(--tr-eyebrow); font-weight: var(--w-bold); color: var(--ppm-blue); border-bottom: none; }

/* ---------- Weitere Verzeichnisse ------------------------------------
   Tabellen-, Abbildungs- und Anlagenverzeichnis. Gleiche Mechanik wie das
   Inhaltsverzeichnis, aber ohne Kapitelnummer-Spalte und enger gesetzt.    */
.dir { list-style: none; margin: 0; padding: 0; }
.dir li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border-2); font-size: 11.5px; }
.dir .no { flex: none; min-width: 62px; color: var(--ppm-blue); font-weight: var(--w-bold); font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
.dir .t { color: var(--fg-2); font-weight: var(--w-medium); }
.dir .dots { flex: 1; border-bottom: 1px dotted var(--neutral-300); transform: translateY(-3px); }
.dir .pg { color: var(--ppm-slate); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }

/* ---------- Glossar & Abkürzungen ------------------------------------
   Glossar: Begriff fett in Slate, Definition darunter oder daneben; nach
   Anfangsbuchstaben gruppiert (.gl-letter). Abkürzungsverzeichnis: enge
   zweispaltige Liste, Kürzel in Source Code Pro.                          */
.glossary { display: grid; grid-template-columns: 190px 1fr; gap: 10px 20px; font-size: 11.5px; line-height: 1.5; }
.glossary .term { color: var(--ppm-slate); font-weight: var(--w-bold); text-wrap: pretty; }
.glossary .term .alt { display: block; font-weight: var(--w-medium); color: var(--neutral-600); font-size: 10.5px; }
.glossary .def { color: var(--fg-2); font-weight: var(--w-medium); text-wrap: pretty; }
.glossary .gl-letter { grid-column: 1 / -1; font-family: "Exo 2", var(--font-sans); font-weight: 600; font-size: 13px; color: var(--ppm-blue); padding-bottom: 4px; border-bottom: 1px solid var(--border-2); margin-top: 6px; }
.glossary .gl-letter:first-child { margin-top: 0; }
.glossary--stacked { grid-template-columns: 1fr 1fr; }
.glossary--stacked .term { grid-column: auto; }

.abbr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; font-size: 11.5px; line-height: 1.45; }
.abbr-list .row { display: flex; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--border-2); }
.abbr-list .ab { flex: none; min-width: 64px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ppm-blue); font-weight: 600; }
.abbr-list .ex { color: var(--fg-2); font-weight: var(--w-medium); }

/* ---------- Quellen & Fußnoten ---------------------------------------- */
.refs { list-style: none; counter-reset: ref; margin: 0; padding: 0; font-size: 11px; line-height: 1.5; }
.refs li { counter-increment: ref; display: flex; gap: 10px; padding: 5px 0; color: var(--fg-2); font-weight: var(--w-medium); }
.refs li::before { content: "[" counter(ref) "]"; flex: none; font-family: var(--font-mono); font-size: 10px; color: var(--ppm-blue); padding-top: 1px; }
.refs .src { color: var(--neutral-600); }
.fnref { font-family: var(--font-mono); font-size: 0.72em; vertical-align: super; color: var(--ppm-blue); }

/* ---------- Druck ---------------------------------------------------- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: #fff; }
  .deck { gap: 0; padding: 0; }
  .page { box-shadow: none; break-after: page; page-break-after: always; margin: 0; }
  .page:last-child { break-after: auto; page-break-after: auto; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}