:root {
    /* Nur helles Design – verhindert zusammen mit dem color-scheme-Meta-Tag
       in kopf.php das erzwungene Abdunkeln durch mobile Browser. */
    color-scheme: only light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-headline: Cambria, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #1f2937;
    background: #f3f5f7;
    line-height: 1.6;
    --primary: #0d5c54;
    --primary-dark: #0a423c;
    --primary-tint: #eaf3f1;
    --accent: #1d4ed8;
    --text: #1f2937;
    --muted: #475569;
    --border: #d8dee5;
    /* Bewusst knapp: viel Rundung an jeder Ecke ist einer der auffälligsten
       "generische KI-Landingpage"-Tells. Amtliche/redaktionelle Seiten
       wirken mit kantigeren Flächen eher wie ein Dokument als wie eine
       App – Rundung bleibt nur an Buttons/Eingaben spürbar. */
    --radius-sm: 0.2rem;
    --radius-md: 0.3rem;
    /* Breite des Captcha-Bildes. Muss zur Bildbreite in captcha.php passen
       ($breite = 220). Bild, Eingabefeld und der Knopf auf schmalen
       Schirmen richten sich danach, damit sie bündig abschließen. */
    --captcha-breite: 220px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f3f5f7;
    color: var(--text);
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

/* Anker-Ziele: Platz für den fixierten Header reservieren, sonst verdeckt
   der Header beim Springen zu #rechner/#infos/#kontakt die Überschrift. */
#rechner,
/* Alle Ziele, die aus Navigation oder Footer angesprungen werden. Ohne den
   Abstand landet die Überschrift unter dem klebenden Seitenkopf. */
#rechner,
#infos,
#uebersicht,
#kontakt-formular,
#kontakt {
    scroll-margin-top: 6.5rem;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    background: #10192b;
    color: #ffffff;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    border-top: 4px solid var(--primary);
    border-bottom: 1px solid #263043;
}

.brand a {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #ffffff;
}

.brand p {
    margin: 0.2rem 0 0;
    color: #a9b6c9;
    font-size: 0.9rem;
}

.primary-nav ul {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.primary-nav a {
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.95rem;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
    color: #ffffff;
}

main {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
    flex: 1;
}

.hero {
    padding: 0.5rem 0 1.25rem;
}

.hero p {
    max-width: 72ch;
    font-size: 1.05rem;
    margin: 0;
    color: var(--muted);
}

h1 {
    margin: 0 0 0.8rem;
    font-family: var(--font-headline);
    font-size: clamp(1.85rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    letter-spacing: normal;
}

h2 {
    margin: 0 0 0.7rem;
    font-family: var(--font-headline);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 700;
    color: #111827;
}

h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-headline);
    font-weight: 700;
    color: #111827;
}

.calc-card h2,
.info-section h2 {
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--primary-tint);
}

p,
li,
small {
    font-size: 1rem;
    color: var(--text);
}

.calc-card,
.info-section {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.6rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    margin-bottom: 1.25rem;
}

form {
    display: grid;
    gap: 1rem;
}

.form-row {
    display: grid;
    gap: 0.45rem;
}

.form-row--check {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.7rem;
}

label {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

select,
input[type="date"],
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #c2cbd6;
    border-radius: var(--radius-sm);
    background: #ffffff;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
}

textarea {
    resize: vertical;
}

/* Für Bots unsichtbares Feld gegen Spam (Kontaktformular). Bewusst nicht
   display:none, das ignorieren manche Bots gezielt. */
.feld-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* "Ich bin kein Roboter": klappt den Captcha-Bereich auf (siehe form.js).
   Bewusst OHNE eigenen Kasten: Der Haken ist ein technischer Zwischenschritt
   und keine Aussage, die der Absender trifft – er soll sich deshalb nicht
   stärker hervorheben als die Einwilligung darunter, die inhaltlich zählt.
   Optisch also eine normale Formularzeile wie jede andere. */
.captcha-start {
    /* Drei Spalten: Haken, Beschriftung, Status. Mit den geerbten zwei
       Spalten aus .form-row--check füllte die Beschriftung die gesamte
       Restbreite und drückte den Status in eine zweite Zeile. */
    grid-template-columns: auto auto 1fr;
    align-items: center;
}

.captcha-start label {
    font-weight: 600;
    cursor: pointer;
}

.captcha-start input[type="checkbox"] {
    /* Größe bewusst NICHT überschrieben – das Kästchen ist genauso groß wie
       das der Einwilligung darunter (siehe input[type="checkbox"] oben).
       Nur der obere Rand entfällt: Er zentriert die Box dort auf der ersten
       Zeile eines mehrzeiligen Labels; hier ist die Zeile einzeilig und über
       align-items bereits mittig ausgerichtet. */
    margin: 0;
    cursor: pointer;
}

/* Statusanzeige rechts neben dem Haken ("Wird geprüft …", "Bestätigt"). */
.captcha-status {
    grid-column: 3;
    justify-self: end;
    min-width: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Auf schmalen Schirmen ist neben der Beschriftung kein Platz mehr für
   längere Meldungen – dort bekommt der Status eine eigene Zeile. */
@media (max-width: 560px) {
    /* Der Status bleibt bewusst in derselben Zeile wie die Beschriftung.
       In eine eigene Zeile gesetzt wird der Kasten doppelt so hoch, und
       der Haken sitzt dann oben statt mittig – das fiel als Versatz auf.
       Längere Meldungen brechen hier stattdessen um; dank align-items:
       center bleibt der Haken dabei senkrecht zentriert. */

    /* Neben dem Bild bleibt hier kein Platz, der Knopf rutscht darunter.
       Auf Bildbreite gezogen schließt er bündig mit ihm ab, statt schmal
       und verloren darunter zu stehen. */
    .captcha-neu {
        width: var(--captcha-breite);
        max-width: 100%;
    }
}

/* Gelöst: optisch identisch mit der Einwilligung darunter – gesetzter Haken
   in der normalen Hakenfarbe, keine Sonderfarbe, kein Statustext (siehe
   form.js). Der Haken allein sagt aus, dass der Schritt erledigt ist.
   Die Klasse bleibt nur für den Mauszeiger: Anklicken ist ab hier wirkungslos. */
.captcha-start--geloest input[type="checkbox"] {
    cursor: default;
}


/* Fehler: ebenfalls nur über die Textfarbe, passend zum gelösten Zustand. */
.captcha-start--fehler .captcha-status {
    color: #b91c1c;
    font-weight: 700;
}

.captcha-start.captcha-start--fehler label {
    color: #b91c1c;
}

/* Bild-Captcha im Kontaktformular (siehe captcha.php).
   Ohne Einrückung, damit der Bereich bündig mit den übrigen Formularfeldern
   beginnt. Seit die Haken-Zeile darüber keinen eigenen Kasten mehr hat,
   fluchtet der gesamte Captcha-Teil mit dem Rest des Formulars. */
.captcha-block {
    padding-left: 0;
    border-left: none;
}

/* Mit JavaScript startet der Bereich eingeklappt. Das geschieht bewusst hier
   im Stylesheet statt erst in form.js: Das Skript liegt am Seitenende, bis
   dahin wäre das Captcha schon kurz zu sehen und würde sichtbar wegspringen.
   Ohne JavaScript greift .mit-js nie – dann bleibt das Captcha regulär da. */
.mit-js .captcha-block {
    display: none;
}

.mit-js .captcha-block--auf {
    display: grid;
    animation: captcha-aufklappen 0.28s ease-out;
}

/* Aufklappen statt hartem Umspringen. max-height und overflow gelten nur
   während der Animation – danach hat der Bereich wieder seine normalen
   Maße, sodass z.B. Fokusrahmen nicht abgeschnitten werden. */
@keyframes captcha-aufklappen {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        max-height: 420px;
        overflow: hidden;
        transform: translateY(0);
    }
}

/* Wer Bewegung im System abgeschaltet hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
    .mit-js .captcha-block--auf {
        animation: none;
    }
}

/* Checkbox-Zeile ohne Verzögerung einblenden (im HTML steht sie auf hidden,
   damit sie ohne JavaScript nicht als funktionsloses Element auftaucht). */
.mit-js #captcha-start-zeile[hidden] {
    display: grid;
}

.captcha-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.15rem;
}

.captcha-bild {
    display: block;
    width: var(--captcha-breite);
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Der Knopf soll neben dem Bild nicht wie der Absende-Button wirken –
   deshalb dezent und schmaler als die Haupt-Aktion. */
/* Bewusst zurückgenommen gegenüber "Nachricht senden", aber nicht weiß:
   Auf der weißen Karte wäre ein weißer Knopf mit hellgrauem Rahmen kaum
   als Knopf zu erkennen. */
.captcha-neu {
    padding: 0.5rem 0.85rem;
    background: var(--primary-tint);
    color: var(--primary-dark);
    border: 1px solid #cfe4e1;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.captcha-neu:hover,
.captcha-neu:focus-visible {
    filter: none;
    background: #d9ebe8;
    border-color: var(--primary);
}

/* Genau so breit wie das Bild darüber – die beiden gehören zusammen und
   schließen dadurch bündig ab. Auf sehr schmalen Schirmen verhindert
   max-width, dass Bild und Feld über den Rand hinauslaufen. */
#kontakt-captcha {
    width: var(--captcha-breite);
    max-width: 100%;
    letter-spacing: 0.25em;
    font-size: 1.1rem;
    text-transform: uppercase;
}

input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    /* Seitenränder ausdrücklich auf 0: Browser geben Checkboxen von Haus aus
       einen linken und rechten Rand (in Chrome 4px/3px). Dadurch stand die
       Box als einziges Element des Formulars eingerückt, während Labels,
       Eingabefelder und Button bündig an der linken Kante beginnen.
       Der obere Rand bleibt – er zentriert die Box optisch auf der ersten
       Textzeile des Labels. */
    margin: 0.2rem 0 0;
    accent-color: var(--primary);
}

.form-row--check label {
    font-weight: 500;
    color: var(--text);
}

/* Pflicht-Bestätigung im Kontaktformular ("Datenschutzerklärung zur Kenntnis
   genommen"). Vom übrigen Formular abgesetzt, damit sie als eigener Schritt
   gelesen wird und nicht als weiteres Eingabefeld – aber bewusst NICHT
   kleiner gesetzt: Was man bestätigen soll, muss lesbar sein. */
.kenntnisnahme {
    margin-top: 0.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.kenntnisnahme label {
    line-height: 1.5;
    max-width: 62ch;
}

/* Hilfetexte unter Eingabefeldern zurücknehmen, damit sie nicht mit dem
   eigentlichen Inhalt konkurrieren (Rechner wie Kontaktformular). */
.form-row small {
    font-size: 0.9rem;
    color: var(--muted);
}

select:focus,
input[type="date"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
input[type="checkbox"]:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(29, 78, 216, 0.3);
    outline-offset: 2px;
}

details {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: 0.9rem 1rem;
}

summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.95rem;
}

summary:hover {
    color: var(--primary-dark);
}

button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

button:hover,
button:focus-visible,
.btn:hover,
.btn:focus-visible {
    filter: brightness(1.12);
}

.note {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.fehler,
.warnung,
.hinweis {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    margin: 0.8rem 0 1rem;
    font-size: 0.95rem;
}

.fehler {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.warnung {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.hinweis {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.ergebnis {
    display: grid;
    gap: 0.85rem;
    padding: 0.25rem 0 0.2rem;
}

.frist {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin: 0;
    padding: 0.9rem 1.1rem;
    background: var(--primary-tint);
    border: 1px solid #cfe4e1;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
}

.faellig {
    font-weight: 700;
    margin: 0;
}

.quelle-box {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.begruendung,
.quelle {
    margin: 0;
}

.quelle {
    font-size: 0.85rem;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.info-section ul {
    padding-left: 1.25rem;
    margin: 0.75rem 0 0;
}

.info-section li {
    margin-bottom: 0.6rem;
}

/* Mehrere Abschnitte (H2 + Absätze + optionales Bild) in einer Artikel-
   /Unterseite, siehe includes/unterseite.php und includes/seiten.php. */
.artikel-text h2 {
    margin-top: 1.75rem;
}

.artikel-text h2:first-child {
    margin-top: 0;
}

.artikel-text p + p {
    margin-top: 0.75rem;
}

.artikel-figur {
    margin: 0.9rem 0 1.25rem;
    max-width: 560px;
}

.artikel-figur img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.artikel-figur figcaption {
    margin-top: 0.45rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--primary-tint);
    font-size: 0.85rem;
    color: var(--muted);
}

/* Auf breiten Schirmen rückt die Illustration neben den Text des
   Abschnitts, statt ihn zu unterbrechen – wirkt redaktioneller. */
@media (min-width: 860px) {
    .artikel-figur {
        float: right;
        width: 42%;
        margin: 0.35rem 0 1rem 1.5rem;
    }

    /* Nächste Zwischenüberschrift bricht die Umfließung sauber ab. */
    .artikel-text h2 {
        clear: both;
    }
}

/* ---------------------------------------------------------------
   Neu für die Prüffristen-Unterseiten (includes/unterseite.php)
   --------------------------------------------------------------- */

.tabelle-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
}

.tabelle-prueffristen {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabelle-prueffristen th,
.tabelle-prueffristen td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.tabelle-prueffristen th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.tabelle-prueffristen td.quelle {
    font-size: 0.85rem;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.badge-ungeprueft {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9a3412;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.rechner-links {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.site-footer {
    background: #10192b;
    color: #cbd5e1;
    padding: 2rem 1.25rem;
    margin-top: auto;
}

/* Drei Spalten: Kontakt und Einordnung, die Einstiege, die Pflichtangaben.
   Der Fließtext links bekommt weiterhin genug Breite, um in zwei statt fünf
   Zeilen zu passen – das war der Höhentreiber des alten Vier-Spalters. */
.footer-content {
    max-width: 980px;
    margin: 0 auto 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 1.75rem 2.5rem;
    align-items: start;
}

.footer-kontakt p {
    max-width: 56ch;
}

.footer-hinweis {
    font-size: 0.9rem;
    color: #a9b6c9;
}

.footer-links h3 {
    margin: 0 0 0.75rem;
    color: #ffffff;
    line-height: 1.35;
}


.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.footer-links a {
    color: #94a3b8;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #ffffff;
}

footer p {
    margin: 0;
    color: #94a3b8;
}

.footer-bottom {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 1.25rem;
    border-top: 1px solid #263043;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
}

footer .copyright,
footer .regelwerk-stand {
    text-align: left;
    color: #7c8aa0;
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 720px) {
    .site-header {
        justify-content: space-between;
        text-align: left;
    }

    .primary-nav ul {
        justify-content: flex-start;
        width: 100%;
    }

    main {
        padding: 1.1rem 1rem 2rem;
    }

    .calc-card,
    .info-section {
        padding: 1.25rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links ul {
        justify-items: start;
    }

    .footer-bottom {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding: 0.75rem 1.25rem;
    }

    .brand p {
        display: none;
    }

    .frist {
        font-size: 1.5rem;
    }
}

/* ---------------------------------------------------------------
   Geräteverzeichnis (includes/verzeichnis.php, static/js/verzeichnis.js)
   --------------------------------------------------------------- */

/* Tabellenbeschriftung nur für Screenreader – die sichtbare Zuordnung
   leistet die H3 direkt darüber, für die Vorlesereihenfolge fehlt sie aber. */
.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Zweispaltig: links die mitlaufende Navigation, rechts der Inhalt.
   Der Umschaltpunkt liegt bei 1000px – darunter reicht die Breite von
   main (980px) nicht mehr für zwei sinnvolle Spalten. */
.verzeichnis-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.25rem;
    /* KEIN align-items: start hier. Die Spalten müssen auf volle Zeilenhöhe
       gestreckt bleiben (Grid-Standard), sonst ist das <aside> nur so hoch
       wie sein Inhalt – und ein sticky-Element wandert nie weiter, als sein
       Elternelement reicht. Die Leiste würde dann sofort wieder mit nach
       oben verschwinden. */
}

/* Das aside füllt die ganze Spaltenhöhe; nur der Inhalt darin klebt. */
.verzeichnis-seitenleiste {
    height: 100%;
}

.verzeichnis-sticky {
    position: sticky;
    /* Der Seitenkopf klebt selbst oben (siehe .site-header), die Leiste
       muss darunter beginnen. */
    top: 6.75rem;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 1.1rem;
}

.verzeichnis-suche {
    display: grid;
    gap: 0.45rem;
}

.verzeichnis-suche input[type="search"] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid #c2cbd6;
    border-radius: var(--radius-sm);
    background: #ffffff;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text);
}

/* Reserviert die Zeile für die Trefferanzahl, damit die Liste beim Tippen
   nicht um eine Zeilenhöhe springt. */
.verzeichnis-suche .note {
    min-height: 1.3rem;
    margin: 0;
}

.verzeichnis-baum ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.verzeichnis-baum__gruppen {
    margin-top: 0.9rem;
}

.verzeichnis-baum li {
    margin: 0;
}

.verzeichnis-baum a {
    display: block;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
    text-decoration: none;
}

.verzeichnis-baum a:hover,
.verzeichnis-baum a:focus-visible {
    background: var(--primary-tint);
    color: var(--primary-dark);
}

.verzeichnis-baum__gruppe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.7rem;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.88rem;
}

.verzeichnis-baum__gruppen > li:first-child .verzeichnis-baum__gruppe {
    margin-top: 0;
}

.verzeichnis-baum__anzahl {
    flex: none;
    min-width: 1.4rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-sm);
    background: var(--primary-tint);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

/* Die Geräteliste einer Gruppe rückt ein und bekommt eine Führungslinie,
   damit die Hierarchie ohne Aufklappmechanik lesbar bleibt. */
.verzeichnis-baum__geraete {
    margin-left: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border);
}

/* Gerät, das gerade im Lesebereich steht (siehe verzeichnis.js). */
.verzeichnis-baum [data-nav-geraet].ist-aktiv > a {
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-weight: 700;
    box-shadow: inset 2px 0 0 var(--primary);
}

/* Kapitelkopf einer Gerätegruppe. Zieht sich über die Polsterung der
   .info-section hinaus bis an die Kartenkante, damit die Gruppe beim
   Scrollen als eigener Abschnitt lesbar ist und nicht als weiterer
   gleichförmiger Block. */
.gruppe-kopf {
    margin: -1.6rem -1.6rem 1.5rem;
    padding: 1.3rem 1.6rem 1.4rem;
    background: var(--primary-tint);
    border-bottom: 1px solid #cfe4e1;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.gruppe-kopf h2 {
    margin: 0.25rem 0 0;
}

.gruppe-zaehler {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.gruppe-einleitung {
    margin: 0.6rem 0 0;
    max-width: 68ch;
}

/* Gruppenbild als durchgehendes Band unter dem Kapitelkopf – bewusst nicht
   die umfließende .artikel-figur, weil darunter Tabellen folgen. */
.gruppe-bild {
    margin: -1.5rem -1.6rem 1.75rem;
}

.gruppe-bild img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border);
}

.gruppe-bild figcaption {
    margin: 0.6rem 1.6rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--primary-tint);
    font-size: 0.85rem;
    color: var(--muted);
}

.geraet {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
    /* Der Seitenkopf klebt oben. Ohne diesen Abstand landet die Überschrift
       beim Ankersprung darunter und ist unsichtbar. */
    scroll-margin-top: 6.5rem;
}

.geraet h3 {
    margin-top: 0;
}

/* Einordnung als Marke neben dem Gerätenamen statt als eigene graue Zeile –
   sonst steht 38-mal dieselbe Konstruktion im selben Ton unter der
   Überschrift. */
.badge-art {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.12rem 0.5rem;
    vertical-align: 0.14em;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-tint);
    border: 1px solid #cfe4e1;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.geraet-kurz {
    font-weight: 600;
    color: #0f172a;
}

/* Kompakte Schwester von .frist: Die Zahl ist der Grund für den Besuch und
   bekommt deshalb dasselbe Gestaltungsmittel wie das Rechnerergebnis, nur
   eine Nummer kleiner. */
.geraet-frist {
    display: grid;
    gap: 0.3rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.95rem;
    background: var(--primary-tint);
    border: 1px solid #cfe4e1;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
}

.geraet-frist__wert {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-dark);
}

.geraet-frist__zusatz {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Fundstelle einmal unter der Tabelle statt in jeder Zeile. */
.geraet-quelle {
    margin: -0.35rem 0 0;
}

.geraet-text p + p {
    margin-top: 0.75rem;
}

.geraet-synonyme {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Weiterführende Links je Gerät auf die Bereichs- und Art-Seiten. Bewusst
   zurückgenommen gesetzt: Sie sollen den Eintrag abschließen, nicht mit
   dem Rechner-Link in der Tabelle um Aufmerksamkeit konkurrieren. */
.geraet-vertiefung {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--muted);
}

/* Gruppierte Seitenübersicht (includes/seiten-liste.php).

   Bewusst Mehrspaltensatz statt Grid: Ein Grid ordnet die Gruppen in Zeilen,
   und die Zeilenhöhe richtet sich nach der längsten Gruppe. Weil "Nach
   Einsatzbereich" deutlich mehr Einträge hat als die übrigen, entstand
   darunter toter Raum und die letzte Gruppe rutschte in eine neue Zeile –
   sichtbar als großes Loch im Block. Im Mehrspaltensatz fließen die Gruppen
   nacheinander und füllen die Spalten ohne Zeilenraster.

   Zwei Spalten statt drei: gemessen ergeben drei schmale Spalten 404px
   Blockhöhe mit bis zu 330px Leerraum, zwei breite dagegen 304px mit
   höchstens 99px. Breitere Spalten brechen die sprechenden Linktexte
   außerdem seltener um. */
.seiten-liste {
    columns: 300px 2;
    column-gap: 1.75rem;
    margin-top: 1rem;
}

.seiten-liste__gruppe {
    /* Eine Gruppe darf nicht mitten in der Liste umbrechen. */
    break-inside: avoid;
    margin-bottom: 1.25rem;
}

.seiten-liste__gruppe h3 {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.seiten-liste ul {
    margin: 0;
    padding-left: 1.1rem;
}

.seiten-liste li {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

/* Die Seite, auf der man gerade ist, verschwindet nicht aus der Liste,
   sondern wird markiert – sonst sucht man einen Punkt, den es dort scheinbar
   nicht gibt. Der Marker sitzt im Listenpunkt selbst, damit die Einrückung
   der übrigen Einträge unverändert bleibt. */
.seiten-liste .ist-aktuell {
    list-style: none;
    margin-left: -1.1rem;
    padding-left: 1.1rem;
    position: relative;
}

.seiten-liste .ist-aktuell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--primary);
}

.seiten-liste .ist-aktuell > a {
    font-weight: 700;
    color: var(--primary-dark);
    text-decoration: none;
}

.verzeichnis-gruppe {
    scroll-margin-top: 6.5rem;
}

#verzeichnis {
    scroll-margin-top: 6.5rem;
}

/* Das Filter-JavaScript blendet Einträge, ganze Gruppen und die zugehörigen
   Sprungmarken per hidden-Attribut aus. Explizit, damit keine spätere
   display-Regel das Attribut aushebelt. */
.geraet[hidden],
.verzeichnis-gruppe[hidden],
.verzeichnis-baum [data-nav-gruppe][hidden],
.verzeichnis-baum [data-nav-geraet][hidden] {
    display: none;
}

/* Unter 720px setzt style.css die Polsterung von .info-section auf 1.25rem
   herunter. Kapitelkopf und Gruppenbild ziehen sich per negativem Rand bis
   an die Kartenkante – der Wert muss deshalb mitgeführt werden, sonst
   ragen beide über die Karte hinaus. */
@media (max-width: 720px) {
    .gruppe-kopf {
        margin: -1.25rem -1.25rem 1.25rem;
        padding: 1.1rem 1.25rem 1.2rem;
    }

    .gruppe-bild {
        margin: -1.25rem -1.25rem 1.5rem;
    }

    .gruppe-bild figcaption {
        margin: 0.6rem 1.25rem 0;
    }
}

/* Zurück-nach-oben nur dort, wo die Seitenleiste nicht mitläuft. Auf
   breiten Schirmen ist die Leiste immer erreichbar und der Knopf wäre
   nur Ballast. */
.verzeichnis-hoch {
    display: none;
}

@media (max-width: 999px) {
    /* Eine Spalte: die Navigation wird zum Block über dem Inhalt und hört
       auf zu kleben – als klebender Balken würde sie auf kleinen Schirmen
       zu viel Höhe kosten. */
    .verzeichnis-layout {
        display: block;
    }

    .verzeichnis-sticky {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 1.25rem;
    }

    /* Die vollständige Geräteliste wäre hier länger als der Inhalt, zu dem
       sie führt. Es bleiben die Gruppen, gesetzt als umbrechende Chips. */
    .verzeichnis-baum__geraete {
        display: none;
    }

    .verzeichnis-baum__gruppen {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .verzeichnis-baum__gruppe {
        margin-top: 0;
        padding: 0.45rem 0.8rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
    }

    .verzeichnis-hoch {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 9;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.7rem 1rem;
        border: 1px solid var(--primary-dark);
        border-radius: var(--radius-md);
        background: var(--primary);
        color: #ffffff;
        font-family: inherit;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
    }

    .verzeichnis-hoch[hidden] {
        display: none;
    }
}