@import url('./icons.css');

/* ── Farbpalette ──────────────────────────────────────────────────────────────
   Identisch mit den PDF-Berichten (Berichte/Gestaltung.cs) und nur hier definiert
   (docs/GESTALTUNG_WEB.md Abschnitt 1). Die drei Dimensionen bleiben getrennt:
   Zeitstatus über Farbe · Verbindlichkeit über Typografie · Prüferqualifikation
   über eine schwarz umrandete Plakette. Bernstein ist dem Zeitstatus "bald fällig"
   und dem Druckluftbehälter-Sonderhinweis vorbehalten. */
:root {
    --akzent: #0B4F62;          /* Petrol — alles Bedienbare, Überschriften, Struktur */
    --akzent-dunkel: #083B4A;   /* Zustand beim Überfahren */
    --akzent-hell: #E8F1F4;     /* Hinweisflächen */
    --alarm: #B3261E;           /* überfällig */
    --alarm-hell: #FBEAE8;
    --warn: #A85D00;            /* bald fällig */
    --warn-hell: #FDF2E3;
    --tinte: #111111;
    --meta: #4A4A4A;
    --linie: #D5D5D5;
    --flaeche: #F7F8F8;
}

/* Verweise im Inhalt: Akzent, unterstrichen. Besuchte Verweise nicht einfärben —
   Violett gehört nicht in diese Palette. */
a {
    color: var(--akzent);
}

a:visited {
    color: var(--akzent);
}

/* ── DevExpress-Komponenten auf die Palette umstellen ─────────────────────────
   Das Fluent-Theme bringt ein leuchtendes Blau als Akzent mit — das ist die
   Vorgabefarbe aus dem Projektgerüst, nicht unsere. Die Theme-Variablen werden
   hier überschrieben, damit Knöpfe und Bedienelemente Petrol tragen (kein Blau,
   kein Bootstrap-Standard; docs/GESTALTUNG_WEB.md 1.1). */
:root, .dxbl-root {
    --dxds-color-primary: var(--akzent);
    --dxds-color-primary-darken-10: var(--akzent-dunkel);
    --dxds-color-primary-darken-20: var(--akzent-dunkel);
    --dxds-color-content-accent-default-rest: var(--akzent);
    --dxds-color-background-accent-default-rest: var(--akzent);
    --dxds-color-border-accent-default-rest: var(--akzent);
    --dxds-color-background-accent-subtle-rest: var(--akzent-hell);
}

/* Handlungsauslösende DevExpress-Knöpfe (RenderStyle Primary). Die doppelte Klasse
   erhöht die Spezifität über die Theme-Regel, die dieselbe Variable setzt. */
.dxbl-btn.dxbl-btn-primary {
    --dxbl-btn-bg: var(--akzent);
    --dxbl-btn-border-color: var(--akzent);
    --dxbl-btn-hover-bg: var(--akzent-dunkel);
    --dxbl-btn-hover-border-color: var(--akzent-dunkel);
    --dxbl-btn-active-bg: var(--akzent-dunkel);
    --dxbl-btn-active-border-color: var(--akzent-dunkel);
}

/* Zweitrangige Aktionen: umrandete Variante in derselben Farbe. */
.dxbl-btn.dxbl-btn-secondary,
.dxbl-btn.dxbl-btn-outline-secondary {
    --dxbl-btn-color: var(--akzent);
    --dxbl-btn-border-color: var(--akzent);
    --dxbl-btn-hover-color: #fff;
    --dxbl-btn-hover-bg: var(--akzent);
    --dxbl-btn-hover-border-color: var(--akzent);
}

/* Textknöpfe (z. B. "Löschen") erben die Alarmfarbe des Themes; die Akzentvariante
   in Petrol. */
.dxbl-btn.dxbl-btn-text-primary,
.dxbl-btn.dxbl-btn-text-secondary {
    --dxbl-btn-color: var(--akzent);
    --dxbl-btn-hover-color: var(--akzent-dunkel);
}

/* Kein height/overflow auf html und body: Sonst scrollt ein verschachtelter Container
   statt des Dokuments, und mobile Browser blenden die Adressleiste nicht mehr aus.
   Die Vollbild-Schale braucht nur der Generator — sie sitzt in MainLayout (.page). */
html, body {
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

.main-content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

/* ── Ratgeberseiten ───────────────────────────────────────────────────────────
   Global statt scoped, weil sechs Seiten dieselbe Gestaltung teilen.
   Farben wie die Berichte, kein Text heller als var(--meta). */

.ratgeber {
    /* Linksbündig an der Navigation, nicht in der Restfläche zentriert. Seit 23.08.2026
       breiter (72 rem statt 44), damit die sechsspaltige Fristentabelle samt Spalte
       „Grundlage" sichtbar ist — Fließtext bleibt über eine eigene Regel unten bei 44 rem. */
    max-width: 72rem;
    margin: 0;
    padding: 0 0 3rem;
    color: var(--tinte);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.ratgeber h1 {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: var(--akzent);
}

.ratgeber h2 {
    font-size: 1.3125rem;
    margin: 2.25rem 0 0.5rem;
    color: var(--akzent);
}

.ratgeber .vorspann {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.ratgeber p {
    margin: 0 0 1rem;
}

.ratgeber ul,
.ratgeber ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.ratgeber li {
    margin-bottom: 0.375rem;
}

.ratgeber a {
    color: var(--akzent);
}

/* Fristentabelle der Übersicht — auf schmalen Geräten waagerecht scrollbar,
   damit die Seite selbst nicht seitlich geschoben werden muss. */
.ratgeber .tabellenrahmen {
    overflow-x: auto;
    margin: 0 0 1rem;
}

.ratgeber table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    font-size: 0.9375rem;
}

.ratgeber th,
.ratgeber td {
    text-align: left;
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.ratgeber thead th {
    border-bottom: 2px solid var(--tinte);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--meta);
    white-space: nowrap;
}

/* Petrol, kein Bernstein: Der Kasten ist lehrreich, keine Gefahr. Bernstein bleibt
   echten Warnungen vorbehalten — Druckluftbehälter-Sonderhinweis und
   Höchstfrist-Warnung (docs/AUFGABEN_C_AUSROLLEN_1.md C-0). */
.ratgeber .irrtum {
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    padding: 0.75rem 1rem 0.25rem;
    margin: 1rem 0 1.5rem;
}

.ratgeber .irrtum h2 {
    margin-top: 0;
    color: var(--akzent);
}

.ratgeber-abschluss {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
}

.ratgeber-abschluss .rechtshinweis {
    border-left: 4px solid var(--akzent);
    background: var(--akzent-hell);
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

.ratgeber-abschluss .knopf {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.25rem;
}

.ratgeber-abschluss .knopf:hover {
    background: var(--akzent-dunkel);
}

.ratgeber-liste {
    list-style: none;
    padding: 0;
}

.ratgeber-liste li {
    margin-bottom: 0.75rem;
}

/* ── Ratgeber, Ergänzungen 23.08.2026 (docs/AUFGABEN_RATGEBER_KORREKTUREN.md) ──────── */

/* Stand-Datum unter der Überschrift — dieselbe Lösung wie bei den Rechtstexten. */
.ratgeber .stand {
    margin: -0.5rem 0 1.25rem;
    color: var(--meta);
    font-size: 0.9rem;
}

/* Erste Spalte der Fristentabelle: ein Typ, mehrere Prüfungen. */
.ratgeber td.anlage {
    font-weight: 600;
    white-space: normal;
}

.ratgeber .tabellen-erklaerung {
    font-size: 0.9375rem;
    color: var(--meta);
}

/* Block „Im Original nachlesen" — ruhig gesetzt, die Verweise sind der Inhalt. */
.ratgeber .originalquellen {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linie);
}

.originalquellen h2 {
    margin-top: 0;
}

.originalquellen ul {
    list-style: none;
    padding: 0;
}

.originalquellen li {
    margin-bottom: 0.625rem;
}

.originalquellen .herausgeber {
    color: var(--meta);
}

.originalquellen .neutral {
    color: var(--meta);
    font-size: 0.875rem;
}

/* Druckregel wie auf der Startseite (STARTSEITE_KORREKTUREN.md D-2): Browser drucken
   Hintergrundflächen nicht — ohne diese Regel bleibt weiße Schrift auf weißem Papier übrig.
   Die Startseite hatte sie in ihrer eigenen Stilvorlage, die Ratgeberseiten nicht. */
@media print {
    .ratgeber-abschluss .knopf {
        background: none !important;
        color: var(--tinte) !important;
        border: 1.5px solid var(--tinte);
    }
}

/* ── Ratgeber, Breite (23.08.2026): Tabelle breit, Text lesbar ────────────────────────
   Befund von Johnna: Die Spalte „Grundlage" — die wichtigste — war am Bildschirm nur durch
   Scrollen im Rahmen erreichbar und im Ausdruck schlicht abgeschnitten. Der Artikel ist
   deshalb 72 rem breit; Fließtext, Listen und Kästen bleiben bei 44 rem Zeilenlänge — nur die Tabelle bricht aus der Lesespalte aus (Johnna, 23.08.2026). */
.ratgeber > p,
.ratgeber > ul,
.ratgeber > ol,
.ratgeber > h1,
.ratgeber > h2,
.ratgeber .irrtum,
.ratgeber .originalquellen,
.ratgeber-abschluss {
    max-width: 44rem;
}

.ratgeber table {
    min-width: 0;
    font-size: 0.875rem;
}

.ratgeber td a {
    white-space: nowrap;
}

/* Druck: kein Scrollrahmen — was nicht passt, wird sonst abgeschnitten. Die Übersicht
   druckt quer (@page in Ratgeber/Index.razor), die Tabelle schrumpft auf Seitenbreite. */
@media print {
    .ratgeber,
    .ratgeber > p,
    .ratgeber > ul,
    .ratgeber > ol,
    .ratgeber > h1,
    .ratgeber > h2,
    .ratgeber .irrtum,
    .ratgeber .originalquellen,
    .ratgeber-abschluss {
        max-width: none;
    }

    .ratgeber .tabellenrahmen {
        overflow: visible;
    }

    .ratgeber table {
        width: 100%;
        min-width: 0;
        font-size: 0.75rem;
    }

    .ratgeber th,
    .ratgeber td {
        padding: 0.3rem 0.4rem;
    }

    .ratgeber thead th {
        white-space: normal;
    }

    .ratgeber td a {
        white-space: normal;
        color: inherit;
        text-decoration: none;
    }

    .ratgeber tbody tr {
        break-inside: avoid;
    }
}

/* Prüfherkunft je Originalquelle (AUFGABEN_ASR_QUELLENPRUEFUNG.md): Fassung, Datum, ob am
   Originaltext gelesen — sichtbar unter dem Verweis, nicht im Tooltip. */
.originalquellen .pruefherkunft {
    display: block;
    margin-top: 0.1rem;
    color: var(--meta);
    font-size: 0.8125rem;
}

/* ── Belegziffern (docs/QUELLENBELEGE_FORM.md) ────────────────────────────────────────
   Die hochgestellte Zahl hinter einer Aussage. Ruhig gesetzt: Sie soll auffindbar sein, ohne
   den Satz zu zerreißen — wer nur liest, soll über sie hinweglesen können.

   Global und nicht in der Stilvorlage der Seite, weil die Ziffer von der Komponente
   Shared/Beleg.razor kommt; eine .razor.css der Seite erreicht fremdes Markup nicht. */
sup.beleg {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
    margin-left: 0.05em;
}

/* Komma zwischen zwei Belegziffern hintereinander — ohne es liest sich „1 2" als 12. */
sup.beleg-trenner {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

sup.beleg a {
    color: var(--akzent);
    font-weight: 700;
    text-decoration: none;
    padding: 0 0.08em;
}

sup.beleg a:hover,
sup.beleg a:focus {
    text-decoration: underline;
}

/* Die Regel, die das Ganze erst lesbar macht: Ohne sie ist eine fehlende Ziffer unsichtbar. */
.originalquellen .belegregel {
    font-size: 0.9375rem;
}

/* Nummerierte Belegliste. Die Nummern stehen im value-Attribut, weil die Liste Lücken hat:
   Belege, die im Text selbst stehen, fehlen hier — ihre Ziffer springt dorthin. */
.originalquellen .belegliste {
    padding-left: 1.6rem;
}

.originalquellen .belegliste li {
    margin-bottom: 0.625rem;
    padding-left: 0.2rem;
}

/* Kostenpflichtige Norm: kein Verweis, deshalb auch keine Verweisfarbe. Der frühere Zusatz
   „kostenpflichtig — der Verweis führt zur Produktseite" ist entfallen (23.08.2026); an seine
   Stelle tritt der Hinweis auf die kostenfreie Einsicht. */
.originalquellen .unverlinkt {
    font-weight: 600;
}

.originalquellen .einsicht {
    margin-top: 1.25rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--linie);
    font-size: 0.9375rem;
    color: var(--meta);
}

/* Druck: Die Ziffer muss auf Papier bleiben — schwarzweiß gedruckt und kopiert wird immer
   (docs/GESTALTUNGSVORGABEN.md). Farbe allein darf sie nie tragen; sie steht ohnehin
   hochgestellt und fett. */
@media print {
    sup.beleg a {
        color: inherit;
        text-decoration: none;
    }
}

/* ── Quellenblock auf der Startseite ──────────────────────────────────────────────────
   Befund vom 23.08.2026 beim Nachmessen: Der Block war 937 px breit statt 704, die
   Überschrift schwarz statt Petrol und der Trenner fehlte. Grund ist nicht ein vergessener
   Wert, sondern die Bauart — der Block kommt aus einer Kindkomponente, und die
   Stilvorlage einer Seite (Index.razor.css) erreicht fremdes Markup nicht (CLAUDE.md,
   Hinweis zu Scoped CSS). Die Werte stehen deshalb hier und gleichlautend mit
   „.startseite section + section" bzw. „.startseite h2". Wer dort etwas ändert, ändert es hier mit. */
.startseite .originalquellen {
    max-width: 44rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--linie);
}

.startseite .originalquellen h2 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--akzent);
}

/* ── Prüffristen-Rechner auf /ratgeber (20.09.2026, docs/PRUEFFRISTEN_RECHNER_TEIL1.md) ──
   Schlichtes HTML-Formular, kein JavaScript. Petrol wie alles Bedienbare; der Kasten nimmt
   dieselbe Hinweisfläche wie „.irrtum", weil er einlädt und nicht warnt. */
.ratgeber .rechner {
    max-width: 60rem;
    margin: 1.5rem 0 1.75rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--akzent-hell);
    border-left: 4px solid var(--akzent);
}

.ratgeber .rechner h2 {
    margin: 0 0 0.75rem;
}

.ratgeber .rechner fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
    min-width: 0;
}

.ratgeber .rechner legend {
    padding: 0;
    margin-bottom: 0.375rem;
    font-weight: 600;
}

/* Spalten füllen sich von selbst; unter 18 rem je Spalte bleibt genau eine übrig — auf dem
   Handy stehen die Kästchen damit einspaltig, ohne eigene Umbruchregel. */
.ratgeber .rechner .kaestchen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.125rem 1.5rem;
}

.ratgeber .rechner label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    /* Fingergroß: Die Briefempfänger kommen per QR-Code, also mit dem Telefon. */
    padding: 0.4375rem 0;
    cursor: pointer;
}

/* Hinweis unter „Wo wird gearbeitet?" (freigegeben 21.09.2026). Zurueckhaltend: Er fuehrt
   die Auswahl, er ist nicht selbst eine. Etwas Luft nach unten, damit er nicht am ersten
   Kaestchen klebt. */
.ratgeber .rechner .ortshinweis {
    margin: 0 0 0.625rem;
    color: var(--meta);
    font-size: 0.9375rem;
}

.ratgeber .rechner input[type="checkbox"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.1875rem 0 0;
    accent-color: var(--akzent);
}

.ratgeber .rechner .knopf {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 0.25rem;
    background: var(--akzent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ratgeber .rechner .knopf:hover {
    background: var(--akzent-dunkel);
}

/* Sprungziel des Formulars (action="/ratgeber#ergebnis"): etwas Luft nach oben. */
.ratgeber .ergebnis {
    scroll-margin-top: 1rem;
}

.ratgeber .ergebnis h3 {
    font-size: 1.125rem;
    margin: 1.75rem 0 0.375rem;
}

.ratgeber .ergebnis .auswahl a {
    margin-left: 0.75rem;
    white-space: nowrap;
}

.ratgeber .katalogstand {
    margin: 0 0 0.5rem;
    color: var(--meta);
    font-size: 0.9rem;
}

/* Höchstwert-Hinweis direkt an der Zeile — eigene Zeile in der Zelle, kein Tooltip. */
.ratgeber .zeilenhinweis {
    display: block;
    margin-top: 0.25rem;
    color: var(--meta);
    font-size: 0.8125rem;
}

.ratgeber .fristen-grundsatz {
    max-width: 44rem;
    font-weight: 600;
}

.ratgeber .ergebnis > p {
    max-width: 44rem;
}

/* Handy: Tabellenzeilen werden Karten, kein waagerechtes Scrollen. Der Kopf fällt weg, jede
   Zelle nennt ihre Spalte selbst (data-label). In der vollständigen Tabelle gibt es die
   verbundene Zelle „Anlage" dann nicht mehr — die Karte trägt den Namen aus data-anlage.

   NUR „screen" (20.09.2026): A4 hoch ist im Druck rund 50 rem breit, also schmaler als diese
   Schwelle — ohne die Einschränkung druckte die Tabelle als Kartenstapel. */
@media screen and (max-width: 52rem) {
    .ratgeber .tabellenrahmen {
        overflow-x: visible;
    }

    .ratgeber table.fristen,
    .ratgeber table.fristen tbody,
    .ratgeber table.fristen tr,
    .ratgeber table.fristen td {
        display: block;
        width: auto;
    }

    .ratgeber table.fristen thead,
    .ratgeber table.fristen td.anlage {
        display: none;
    }

    .ratgeber table.fristen tr {
        margin: 0 0 0.75rem;
        padding: 0.625rem 0.75rem;
        border: 1px solid var(--linie);
        border-radius: 0.25rem;
        background: #fff;
    }

    .ratgeber table.fristen tr[data-anlage]::before {
        content: attr(data-anlage);
        display: block;
        margin-bottom: 0.375rem;
        font-weight: 700;
        color: var(--akzent);
    }

    .ratgeber table.fristen td {
        padding: 0.1875rem 0;
        border: 0;
        overflow-wrap: anywhere;
    }

    .ratgeber table.fristen td::before {
        content: attr(data-label);
        display: block;
        color: var(--meta);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .ratgeber table.fristen td[data-label="Prüfung"] {
        font-weight: 600;
    }

    .ratgeber td a {
        white-space: normal;
    }
}

/* Druck: Das Formular ist auf Papier nutzlos; die Tabelle bleibt Tabelle. */
@media print {
    .ratgeber .rechner,
    .ratgeber .ergebnis .auswahl a {
        display: none;
    }
}

/* ── Umzug des Rechners auf eine eigene Seite (20.09.2026) ────────────────────────────
   docs/PRUEFFRISTEN_RECHNER_EIGENE_SEITE.md */

/* Hinweiskasten auf /ratgeber. Erbt Rahmen und Flaeche von .irrtum; hier nur der Knopf,
   der im Kasten kompakter sitzt als der grosse am Seitenende. */
.ratgeber .rechner-hinweis p:last-child {
    margin-bottom: 0.75rem;
}

.ratgeber .rechner-hinweis .knopf {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.25rem;
}

.ratgeber .rechner-hinweis .knopf:hover {
    background: var(--akzent-dunkel);
}

/* ── Weg in den Generator (docs/PRUEFFRISTEN_RECHNER_TEIL2.md A) ───────────────────────
   Der eine gefuellte Knopf im Ergebnis: Bis hierher endet der Rechner mit Wissen, und das
   ist der Schritt, der daraus einen Plan macht. Der halbe Satz daneben steht bewusst
   daneben und nicht darunter — er gehoert zum Knopf und sagt, dass noch nichts passiert. */
.ratgeber .uebernahmezeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    margin: 1.5rem 0 1rem;
}

.ratgeber .uebernahmeknopf {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.ratgeber .uebernahmeknopf:hover {
    background: var(--akzent-dunkel);
}

.ratgeber .uebernahme-hinweis {
    flex: 1 1 14rem;
    color: var(--meta);
    font-size: 0.9375rem;
}

/* Zeile auf der Rechnerseite, solange nichts gewaehlt ist: der Weg zur vollstaendigen
   Tabelle. Zurueckhaltend — sie ist ein Hinweis, kein zweiter Aufruf zum Handeln. */
.ratgeber .alle-fristen {
    margin: 1.5rem 0;
    color: var(--meta);
}

/* Verweis auf den Rechner im Schlussblock der vier Fachseiten. */
.ratgeber-abschluss .rechnerverweis {
    margin: 0 0 1rem;
    font-weight: 600;
}

@media print {
    .ratgeber .rechner-hinweis,
    .ratgeber-abschluss .rechnerverweis {
        display: none;
    }
}

/* ── Kleine Runde (20.09.2026, docs/KLEINE_RUNDE_RECHNER.md) ──────────────────────────── */

/* Druckknopf — zweitrangig: umrandet, Petrol, nie gefüllt. Der gefüllte Knopf bleibt dem
   einen Haupthandgriff der Seite vorbehalten.

   OHNE JAVASCRIPT UNSICHTBAR: Ein Knopf, der nichts tut, ist schlimmer als keiner. Er ist
   deshalb von Haus aus verborgen, und erst wartungsheft.js setzt „mit-js" an <html>. So herum
   und nicht umgekehrt — fällt das Skript aus, fehlt ein Knopf, aber es steht kein toter da. */
.druckzeile {
    display: none;
    margin: 0.75rem 0 1rem;
}

.mit-js .druckzeile {
    display: block;
}

.druckknopf {
    padding: 0.5rem 1.125rem;
    background: #fff;
    color: var(--akzent);
    border: 1.5px solid var(--akzent);
    border-radius: 0.25rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.druckknopf:hover,
.druckknopf:focus-visible {
    background: var(--akzent-hell);
}

.druckknopf:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
}

/* Begriffe „Wer darf prüfen?" — <details>, zugeklappt nur der Begriff. */
.ratgeber .begriffe {
    max-width: 44rem;
    margin: 2rem 0;
}

.ratgeber .begriffe h2 {
    margin-top: 0;
}

.ratgeber .begriffe details {
    border-bottom: 1px solid var(--linie);
    scroll-margin-top: 1rem;
}

.ratgeber .begriffe details:first-of-type {
    border-top: 1px solid var(--linie);
}

.ratgeber .begriffe summary {
    padding: 0.625rem 0;
    font-weight: 700;
    color: var(--akzent);
    cursor: pointer;
}

.ratgeber .begriffe summary:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

.ratgeber .begriffe details p {
    margin: 0 0 0.75rem;
}

/* Angesprungen aus der Spalte „Wer darf prüfen": kurz kenntlich, welcher Eintrag gemeint ist.
   Zweites Merkmal neben der Fläche ist der Balken — nie Farbe allein. */
.ratgeber .begriffe details:target {
    background: var(--akzent-hell);
    box-shadow: -4px 0 0 var(--akzent);
}

.ratgeber .begriffe .beleg-vor-ort {
    font-size: 0.875rem;
    color: var(--meta);
}

.ratgeber .begriffe .beleg-vor-ort .pruefherkunft {
    display: block;
}

/* Verweis aus der Tabelle auf den Begriff: als Verweis erkennbar, aber leiser als die
   Quellenverweise daneben — gepunktet statt durchgezogen. Bricht um wie gewöhnlicher Text;
   „.ratgeber td a" hält sonst zusammen, und die Angaben sind lang. */
.ratgeber td a.begriff {
    white-space: normal;
    text-decoration-style: dotted;
    text-underline-offset: 0.15em;
}

/* ── Druckansicht ───────────────────────────────────────────────────────────────────────
   docs/KLEINE_RUNDE_RECHNER.md (Teil A) und docs/DRUCKANSICHT_UEBERARBEITUNG.md — nach zwei
   Probeausdrucken auf Papier vom 20.09.2026 überarbeitet.

   Gilt für /ratgeber immer und für die Rechnerseite mit Auswahl (Klasse „druckansicht" am
   Artikel). EINE Gestaltung für beide Blätter: gleiche Schrift, gleiche Zeilenhöhe, gleiche
   Spaltenlogik, gleicher Kopf und Fuß — im ersten Probedruck sahen sie verschieden aus.

   Gedruckt wird eine ERLAUBTE LISTE, nicht alles außer einer verbotenen: Was der Seite später
   hinzugefügt wird, landet so nicht von selbst auf dem Papier.

   Auf dem Blatt: Logo · Titel · bei der Prüfliste „Gewählt: …" · Stand · Tabelle · fester Satz ·
   bei der Prüfliste der Hinweis auf weitere Pflichten · Begriffslegende · Fußnoten · Adresse,
   Schlusszeile, Druckdatum und Katalogversion · „Seite X von Y" im Blattrand. */

/* Am Bildschirm unsichtbar: alles, was nur für das Papier da ist. */
.nur-druck,
.nur-druck-zelle,
.druckmarke,
.druck-stand,
.druckanhang {
    display: none;
}

@media print {
    /* Seitenzahl im Blattrand, auf jedem Blatt — auch auf dem einzigen. Randfelder („margin
       boxes") kann Chrome/Edge seit Version 131; ein Browser, der sie nicht kennt, lässt die
       Zeile weg und druckt sonst unverändert. Bewusst für jeden Ausdruck der Anwendung: Eine
       Seitenzahl schadet nirgends, und „@page" lässt sich nicht auf eine Seite begrenzen, ohne
       einen Umbruch zu erzwingen (der Versuch mit einer benannten Seite ergab am 20.09.2026
       ein leeres erstes Blatt). */
    @page {
        margin: 12mm 12mm 15mm;

        @bottom-right {
            content: "Seite " counter(page) " von " counter(pages);
            font-family: "Segoe UI", Arial, "Liberation Sans", sans-serif;
            font-size: 8pt;
            color: #000;
        }
    }

    /* Der Seitenrahmen ist am Bildschirm ein Flex-Gerüst mit „min-height: 100vh". Im Druck
       ist 100vh eine Blatthöhe: Die Seite war damit immer ein Blatt plus Abstände lang, und
       die letzte Zeile der Fußzeile fiel auf ein zweites (gemessen am gedruckten PDF). Flex
       bricht außerdem schlecht um. „body" davor hebt die Regel über die Stilvorlage des
       Layouts, die später geladen wird. */
    body .huelle:has(.druckansicht),
    body .huelle:has(.druckansicht) .inhaltsspalte {
        display: block;
        min-height: 0;
        padding: 0;
    }

    body .huelle:has(.druckansicht) .inhaltsspalte > main {
        padding: 0;
    }

    /* Navigation und Seitenfuß sind auf Papier nutzlos. */
    .huelle:has(.druckansicht) .seitenleiste,
    .huelle:has(.druckansicht) .rechts-fuss,
    .testband {
        display: none;
    }

    /* Grundschrift des Blatts: 9,5 pt — auf Armlänge lesbar. Alles darunter erbt; nur Titel,
       Legende, Fußnoten und Fußzeile weichen ab. */
    .ratgeber.druckansicht {
        position: relative;
        max-width: none;
        padding: 0;
        color: #000;
        font-size: 9.5pt;
        line-height: 1.4;
    }

    .ratgeber.druckansicht > * {
        display: none;
    }

    .ratgeber.druckansicht > h1,
    .ratgeber.druckansicht > .druckmarke,
    .ratgeber.druckansicht > .druck-stand,
    .ratgeber.druckansicht > .tabellenrahmen,
    .ratgeber.druckansicht > .ergebnis,
    .ratgeber.druckansicht > .druckanhang {
        display: block;
    }

    .ratgeber.druckansicht .nur-bildschirm,
    .ratgeber.druckansicht .katalogstand {
        display: none;
    }

    .ratgeber.druckansicht .nur-druck {
        display: inline;
    }

    .ratgeber.druckansicht .nur-druck-zelle {
        display: table-cell;
    }

    .ratgeber.druckansicht .druck-stand {
        display: block;
    }

    /* ── Kopf: Titel links, Marke rechts auf gleicher Höhe (Abschnitt F) ──
       Der Name steht als Text neben der Bildmarke, nicht in ihr (Nachbesserung Punkt 4):
       Die Grafik bleibt schriftlos, und der Name kommt aus der Schrift des Dokuments. */
    .ratgeber.druckansicht > .druckmarke {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 2mm;
    }

    .ratgeber.druckansicht .druckmarke-name {
        font-size: 8pt;
        color: #000;
        white-space: nowrap;
    }

    .ratgeber.druckansicht .drucklogo {
        height: 11mm;           /* Marke.HoeheMm */
        width: auto;
    }

    /* Rechnerseite: Der Titel des Blatts ist „Ihre Prüffristen" mit der Auswahlzeile — die
       Frage aus der H1 ist auf der fertigen Liste beantwortet. */
    .ratgeber.druckansicht:has(> .ergebnis) > h1 {
        display: none;
    }

    .ratgeber.druckansicht > h1,
    .ratgeber.druckansicht .ergebnis h2 {
        min-height: 11mm;       /* der Titel ist so hoch wie das Logo daneben */
        max-width: none;
        margin: 0 0 1mm;
        padding-right: 48mm;    /* Platz für Name und Bildmarke */
        font-size: 16pt;
        line-height: 1.2;
        color: #000;
    }

    .ratgeber.druckansicht .ergebnis .auswahl {
        max-width: none;
        margin: 0 0 1mm;
        padding-right: 48mm;
        font-size: 9.5pt;
        color: #000;
    }

    .ratgeber.druckansicht .druck-stand {
        max-width: none;
        margin: 0 0 3mm;
        font-size: 8pt;
        color: #000;
    }

    /* ── Tabelle ── */
    .ratgeber.druckansicht .ergebnis h3 {
        margin: 4mm 0 1mm;
        font-size: 10.5pt;
        color: #000;
        /* Die Überschrift einer Anlagengruppe bleibt bei ihrer ersten Zeile. */
        break-after: avoid;
        page-break-after: avoid;
    }

    .ratgeber.druckansicht .ergebnis h3 a {
        color: inherit;
        text-decoration: none;
    }

    .ratgeber.druckansicht .tabellenrahmen {
        margin: 0 0 2mm;
        overflow: visible;
    }

    .ratgeber.druckansicht table.fristen {
        width: 100%;
        min-width: 0;
        table-layout: fixed;    /* die Breiten unten gelten, nicht der längste Zelleninhalt */
        border-collapse: collapse;
        font-size: 9pt;
        line-height: 1.4;
    }

    .ratgeber.druckansicht thead {
        display: table-header-group;    /* wiederholt sich auf Folgeseiten */
        break-after: avoid;
        page-break-after: avoid;
    }

    .ratgeber.druckansicht tbody tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Kein volles Gitter: waagerechte Linien zwischen den Zeilen, eine kräftige unter dem Kopf
       und zwischen den Anlagengruppen. Dafür mehr Luft in der Zeile. */
    .ratgeber.druckansicht table.fristen th,
    .ratgeber.druckansicht table.fristen td {
        padding: 1.3mm 1.5mm;
        border: 0;
        /* Trennlinie aus Berichte/Gestaltung.CssVariablen — dieselbe wie in den PDFs
           (docs/OPTIK_RUNDE.md, Punkt 1). War 0,4 pt Schwarz. */
        border-bottom: var(--linienstaerke) solid var(--trennlinie);
        background: none;
        color: #000;
        vertical-align: top;
        text-align: left;
        white-space: normal;
        /* „break-word", nicht „anywhere": Letzteres erlaubt dem Browser, eine Spalte auf
           Buchstabenbreite zu stauchen — „Richtwert" stand im ersten Probedruck als
           „Ric / htw / ert" da. */
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .ratgeber.druckansicht table.fristen thead th {
        border-bottom: 1.2pt solid #000;
        font-size: 8pt;
        letter-spacing: 0.02em;
    }

    .ratgeber.druckansicht table.fristen tr.gruppenanfang td {
        border-top: 1.2pt solid #000;
    }

    /* Die verbundene Zelle „Anlage" reicht über ihre Gruppe; ihre Unterkante ist die
       Gruppengrenze der nächsten Zeile. */
    .ratgeber.druckansicht table.fristen td.anlage {
        font-weight: 700;
        border-bottom: 0;
    }

    .ratgeber.druckansicht table.fristen tbody tr:last-child td {
        border-bottom: 1.2pt solid #000;
    }

    /* Spalte „Art" entfällt im Druck — die Verbindlichkeit steht hinter der Frist. */
    .ratgeber.druckansicht .sp-art {
        display: none;
    }

    /* Spaltenbreiten. „Frist" so breit, dass „alle 12 Monate" nicht umbricht; der Platz der
       entfallenen Spalte geht an „Prüfung" und „Wer darf prüfen". Übersicht: fünf Spalten.
       Prüfliste: vier und zwei zum Eintragen. */
    .ratgeber.druckansicht .sp-anlage { width: 18%; }
    .ratgeber.druckansicht .sp-pruefung { width: 24%; }
    .ratgeber.druckansicht .sp-frist { width: 16%; }
    .ratgeber.druckansicht .sp-wer { width: 19%; }
    .ratgeber.druckansicht .sp-grundlage { width: 23%; }

    .ratgeber.druckansicht .ergebnis .sp-pruefung { width: 22%; }
    .ratgeber.druckansicht .ergebnis .sp-frist { width: 16%; }
    .ratgeber.druckansicht .ergebnis .sp-wer { width: 18%; }
    .ratgeber.druckansicht .ergebnis .sp-grundlage { width: 22%; }
    .ratgeber.druckansicht .ergebnis .sp-eintrag { width: 11%; }

    /* Verbindlichkeit hinter der Frist: Gedankenstrich und Wort bleiben beisammen — ein
       Strich allein am Zeilenende liest sich wie ein Minus. Die Frist selbst bricht NICHT
       per „nowrap": „vor jeder Verwendung" lief damit im Probedruck in die Nachbarspalte. */
    .ratgeber.druckansicht .sp-frist .zusammen {
        white-space: nowrap;
    }

    /* Zum Eintragen von Hand: leer, mit einer senkrechten Linie abgesetzt und hoch genug für
       eine Handschrift. */
    .ratgeber.druckansicht table.fristen .sp-eintrag {
        border-left: var(--linienstaerke) solid var(--schreiblinie);
    }

    /* Schreibspalten: Linie zum Beschreiben — die Schreiblinie, dunkler als die Trennlinie. */
    .ratgeber.druckansicht table.fristen td.sp-eintrag {
        height: 13mm;
        border-bottom-color: var(--schreiblinie);
    }

    /* Höchstfrist: fett UND unterstrichen (docs/GESTALTUNG_WEB.md 1.3) — Verbindlichkeit wird
       typografisch ausgedrückt, nie farbig, und übersteht deshalb Schwarzweißdruck und Kopie. */
    .ratgeber.druckansicht table.fristen td strong {
        font-weight: 700;
        text-decoration: underline;
    }

    .ratgeber.druckansicht .zeilenhinweis {
        margin-top: 0.8mm;
        color: #000;
        font-size: 8pt;
    }

    /* Verweise ohne Unterstreichung und ohne Farbe. Die Adressen der Quellen stehen bewusst
       NICHT in Klammern dahinter: In der schmalen Spalte „Grundlage" zerrisse eine Adresse
       jede Zeile. */
    .ratgeber.druckansicht a {
        color: inherit;
        text-decoration: none;
        white-space: normal;
    }

    /* ── Unter der Tabelle (Druckanhang.razor) ── */
    .ratgeber.druckansicht .druckanhang p {
        max-width: none;
        margin: 0 0 1.5mm;
    }

    .ratgeber.druckansicht .druck-grundsatz {
        font-weight: 600;
        break-inside: avoid;
    }

    .ratgeber.druckansicht .druckanhang sup {
        font-size: 0.7em;
        line-height: 0;
    }

    .ratgeber.druckansicht .drucklegende {
        margin: 2mm 0 0;
        line-height: 1.3;
    }

    .ratgeber.druckansicht .drucklegende h2 {
        margin: 0 0 1mm;
        font-size: 9.5pt;
        color: #000;
        break-after: avoid;
        page-break-after: avoid;
    }

    .ratgeber.druckansicht .drucklegende p {
        font-size: 8pt;
        margin-bottom: 1mm;
        break-inside: avoid;
    }

    .ratgeber.druckansicht .druckfussnoten {
        margin: 2mm 0 0;
        line-height: 1.3;
        padding-left: 5mm;
        font-size: 7.5pt;
        break-inside: avoid;
    }

    .ratgeber.druckansicht .druckfuss {
        margin-top: 2mm;
        padding-top: 1mm;
        line-height: 1.3;
        border-top: 0.4pt solid #000;
        font-size: 7.5pt;
        break-inside: avoid;
    }

    .ratgeber.druckansicht .druckfuss p {
        margin: 0 0 0.8mm;
    }

    .ratgeber.druckansicht .druckadresse {
        overflow-wrap: anywhere;
    }
}

/* ── Druck der Fachseiten: Marke und Druckfuß (docs/KORREKTURRUNDE_FACHSEITEN.md 1) ──────
   Die Fachseiten drucken den ganzen Artikel, anders als die Druckansichten von /ratgeber und
   der Prüfliste. Dieselbe Marke wie dort (Drucklogo): oben rechts am Artikel, 11 mm, der Name
   als Text daneben. Das Markup liegt in RatgeberAbschluss — jede Ratgeberseite bekommt es.
   Am Bildschirm unsichtbar; die Druckansichten blenden den Abschluss ohnehin aus. */
.fachdruck {
    display: none;
}

@media print {
    .ratgeber:not(.druckansicht) {
        position: relative;
    }

    .ratgeber:not(.druckansicht) > h1 {
        min-height: 11mm;       /* so hoch wie die Marke daneben */
        padding-right: 48mm;    /* Platz für Name und Bildmarke — wie auf /ratgeber */
    }

    .ratgeber:not(.druckansicht) .fachdruck {
        display: block;
    }

    .ratgeber:not(.druckansicht) .fachdruck > .druckmarke {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 2mm;
    }

    .ratgeber:not(.druckansicht) .fachdruck .druckmarke-name {
        font-size: 8pt;
        color: #000;
        white-space: nowrap;
    }

    .ratgeber:not(.druckansicht) .fachdruck .drucklogo {
        height: 11mm;           /* Marke.HoeheMm */
        width: auto;
    }

    /* Druckfuß wie auf /ratgeber: Adresse und Druckdatum unter einer Haarlinie. */
    .ratgeber:not(.druckansicht) .fachdruck-fuss {
        margin-top: 2mm;
        padding-top: 1mm;
        line-height: 1.3;
        border-top: 0.4pt solid #000;
        font-size: 7.5pt;
        color: #000;
        break-inside: avoid;
    }

    .ratgeber:not(.druckansicht) .fachdruck-fuss p {
        margin: 0 0 0.8mm;
    }

    .ratgeber:not(.druckansicht) .fachdruck-fuss .druckadresse {
        overflow-wrap: anywhere;
    }

    /* Seitenleiste und Seitenfuß der Website sind auf Papier nutzlos — wie bei den
       Druckansichten. Ohne das stünde oben links die farbige Wort-Bild-Marke samt Navigation
       und oben rechts die Druckmarke. Das Flex-Gerüst weicht aus demselben Grund wie dort. */
    body .huelle:has(.fachdruck),
    body .huelle:has(.fachdruck) .inhaltsspalte {
        display: block;
        min-height: 0;
        padding: 0;
    }

    body .huelle:has(.fachdruck) .inhaltsspalte > main {
        padding: 0;
    }

    .huelle:has(.fachdruck) .seitenleiste,
    .huelle:has(.fachdruck) .rechts-fuss {
        display: none;
    }
}

/* ── Hinweiskasten nie über den Seitenumbruch (docs/OPTIK_RUNDE.md, Punkt 2) ──────────────────
   Gemeinsame Stelle für alle Ratgeberseiten: der Kasten aus RatgeberAbschluss. Bis 22.09.2026
   stand er auf /ratgeber/druckbehaelter und /ratgeber/tore-und-tueren halb auf Blatt 2, halb auf
   Blatt 3. Er ist kürzer als ein Blatt; passt er nicht mehr auf das laufende, rückt er ganz auf
   das nächste. */
@media print {
    .ratgeber-abschluss .rechtshinweis {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}