/*
 * NBBV-Design für die Schiri-App. Wird nach Stefans <style>-Block in index.html geladen und
 * überschreibt ihn, statt ihn umzuschreiben: So lassen sich neue Stände aus dem Original
 * weiter mit tools/upstream-uebernehmen.sh übernehmen, ohne dass jede Stilzeile kollidiert.
 *
 * 1. Stefans Variablen (--bg, --accent …) auf unsere Tokens aus shared/nbbv.css legen
 * 2. Schrift: überall Source Sans 3 statt Barlow, keine Großbuchstaben-Überschriften
 * 3. Formen und Bausteine wie in SR-Abrechnung und Kalender-Abo (5px-Radius, Buttons nach Rolle)
 */

/* ── 1. Farben ──────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;
    --nbbv-header-max: 680px;
    --bg: #fff;
    --surface: #fff;
    --ink: var(--nbbv-text);
    --muted: var(--nbbv-muted);
    --line: var(--nbbv-line);
    --accent: var(--nbbv-navy);
    --accent-soft: var(--nbbv-note-bg);
    --accent-ink: #fff;
    --ok: var(--nbbv-ok);
    --ok-bg: var(--nbbv-ok-bg);
    --err: var(--nbbv-danger);
    --err-bg: var(--nbbv-danger-bg);
    --shadow: none;
}

/* ── 2. Schrift ─────────────────────────────────────────────────────────── */
body {
    font-family: var(--nbbv-font);
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* Stefan setzt Barlow Condensed je Baustein; hier einmal für alle zurück auf die Seitenschrift */
.wrap *, #bottomNav *, #ruleOverlay * {
    font-family: inherit !important;
}
h1, h2, h3, .disp, .eyebrow, .cat-btn, .counter, .ans, .pill, .subnav button,
.fact .lbl, .qnr, .feedback .verdict {
    text-transform: none;
    letter-spacing: normal;
}
h1, h2, h3 { color: var(--nbbv-navy); }
h1 { line-height: 1.2; }
.eyebrow { color: var(--nbbv-muted); font-weight: 600; }
.sub { margin: 6px 0 0; }

/* ── 3. Aufbau ──────────────────────────────────────────────────────────── */
.wrap { padding: 8px 12px calc(96px + env(safe-area-inset-bottom)); }
/* Jeder Bereich beginnt mit der orangen Linie wie die Abschnitte der anderen Dienste */
.wrap > section { padding-top: 14px; border-top: 2px solid var(--nbbv-orange); }
#scr-home { border-top: 0; padding-top: 0; }


/* Buttons: components.css begrenzt Breite und färbt Schrift weiß – für Kacheln und Listen aufheben */
button, a.tile, a.nav-btn {
    min-width: 0;
    max-width: none;
    color: var(--ink);
    font-weight: inherit;
    line-height: inherit;
    border-radius: var(--nbbv-radius);
}
button:hover { opacity: 1; }
/* Buttons nach Rolle aus shared/components.css (.btn-primary, .btn-secondary, .btn-outline, .btn-small.btn-danger).
   Orange und Dunkelblau hier noch einmal, weil Stefans button-Regel (nach components.css geladen) Rahmen
   und Farbe überschreibt. */
.btn-primary, a.btn-primary {
    background: var(--nbbv-orange);
    border: 2px solid var(--nbbv-orange);
    color: var(--nbbv-navy);
    font-weight: 600;
}
.btn-secondary {
    background: var(--nbbv-navy);
    border: 2px solid var(--nbbv-navy);
    color: #fff;
    font-weight: 600;
}
.btn-primary:hover, .btn-secondary:hover { opacity: .85; }
.result-actions button, #btnAbort { min-width: 160px; }
.btn-rules { margin-top: 14px; }

.card, .mode-card, .train-btn, .tile, .fact, .art-item, .hist-item, .rev-item,
.feedback, .guide-note, .search, .sig-pages img, .rule-dialog, .rule-signal, .cat-switch {
    border-radius: var(--nbbv-radius);
}
.card { box-shadow: none; }

/* Kacheln wie die Auswahl-Kacheln der SR-Abrechnung */
.tile, .mode-card, .train-btn, .art-item {
    background: #fff;
    border: 1px solid var(--nbbv-line);
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.tile:hover, .mode-card:hover, .train-btn:hover:not(:disabled), .art-item:hover {
    border-color: var(--nbbv-navy);
    background: var(--nbbv-soft);
    transform: none;
}
.tile .disp, .mode-card .disp, .train-btn .disp { color: var(--nbbv-navy); font-weight: 700; }
.modes, .training { gap: 8px; }

/* Katalog-Umschalter und Unternavigation: aktiv dunkelblau */
.cat-switch { border: 1px solid var(--nbbv-line); }
.cat-btn { font-weight: 600; color: var(--nbbv-muted); }
.cat-btn.active { background: var(--nbbv-navy); color: #fff; }
.cat-btn:not(.active):hover { color: var(--nbbv-navy); background: var(--nbbv-soft); }
/* Unternavigation Nachschlagen (Regelwerk, Änderungen 2026, Interpretationen, Handzeichen, Anschreibebogen, Protest)
   als Auswahl-Kacheln wie die Verkehrsmittel in der SR-Abrechnung: 3 + 3, am Handy 2 + 2 + 2, aktiv dunkelblau */
.subnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 8px; }
.subnav button {
    padding: 10px 6px;
    font-weight: 600;
    color: var(--nbbv-navy);
    background: #fff;
    border: 1px solid var(--nbbv-input-line);
    border-radius: var(--nbbv-radius);
}
.subnav button.active { background: var(--nbbv-navy); border-color: var(--nbbv-navy); color: #fff; }
.subnav button:not(.active):hover { background: var(--nbbv-soft); border-color: var(--nbbv-navy); color: var(--nbbv-navy); }
@media (max-width: 600px) {
    .subnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Zahlen, Fortschritt, Quiz */
.rules-note .fact { background: #fff; border-top: 3px solid var(--nbbv-orange); }
.fact .num { font-weight: 700; color: var(--nbbv-navy); }
.bar { background: var(--nbbv-soft-2); }
.bar i { background: var(--nbbv-orange); }
.counter { font-weight: 700; color: var(--nbbv-navy); }
.qtext { font-weight: 400; }
.ans { font-weight: 700; border: 1px solid var(--nbbv-input-line); background: #fff; }
.ans:hover:not(:disabled) { border-color: var(--nbbv-navy); background: var(--nbbv-soft); }
.ans:disabled { opacity: 1; }
/* Touch-Geräte: der Hover-Zustand bleibt nach dem Antippen hängen und läge im Prüfungsmodus sonst auf
   derselben Stelle der nächsten Frage. Dort nur ein kurzes Aufleuchten beim Antippen. */
@media (hover: none) {
    .ans:hover:not(:disabled) { border-color: var(--nbbv-input-line); background: #fff; }
}
.ans:active:not(:disabled) { background: var(--nbbv-soft-2); border-color: var(--nbbv-navy); }   /* components.css blendet deaktivierte Buttons ab; hier soll die Auflösung gut lesbar bleiben */
.pill { font-weight: 600; }
.result-hero .big { font-weight: 700; color: var(--nbbv-navy); }
.search { padding: 6px 8px; border: 1px solid var(--nbbv-input-line); }   /* Höhe und Rahmen wie alle Felder (shared/components.css) */
.search:focus-visible { outline: 2px solid var(--nbbv-orange); border-color: var(--nbbv-input-line); }

/* Leitfaden: Hinweise wie .info-box */
.guide-h { color: var(--nbbv-navy); }
.guide-steps li::marker { color: var(--nbbv-orange); }
.guide-note { background: var(--nbbv-soft); border: 1px solid var(--nbbv-line); border-left: 4px solid var(--nbbv-navy); }

/* Verweise auf Regelartikel */
.rule-link { color: var(--nbbv-navy); font-weight: 600; }
.rule-link:hover { color: var(--nbbv-orange); }
.rule-link:focus-visible { outline-color: var(--nbbv-orange); }
.rule-head .disp { color: var(--nbbv-navy); font-weight: 700; }
.rule-close { color: var(--nbbv-navy); font-size: 1.8rem; padding: 2px 12px; }
.rule-close:hover { background: var(--nbbv-soft); }
.rule-text mark, .art-item .snippet mark { background: var(--nbbv-note-bg); }

/* Untere Leiste: aktiv dunkelblau mit oranger Linie */
#bottomNav { border-top: 1px solid var(--nbbv-line); box-shadow: 0 -2px 12px rgba(0, 46, 72, 0.08);   /* wie --nbbv-shadow, nach oben */ }
.nav-btn { position: relative; color: var(--nbbv-muted); text-decoration: none; }
.nav-btn.active { color: var(--nbbv-navy); }
.nav-btn.active::before {
    content: "";
    position: absolute;
    top: -7px; left: 25%; right: 25%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--nbbv-orange);
}
.nav-btn:hover { color: var(--nbbv-navy); }

/* Fußzeile aus shared/components.css; Hinweis auf das Original etwas zurückgenommen */
.site-footer { margin-top: 32px; }
.footer-credit { color: var(--nbbv-muted-2); }
.footer-credit a { font-weight: 400; }
/* Während eines Quiz steht im footer des Quiz-Bereichs nur der Abbrechen-Knopf */
#scr-quiz footer { margin-top: 20px; }



/* ── 4. Startseite ──────────────────────────────────────────────────────── */
/* Schlicht wie die SR-Abrechnung: nur zwei Blöcke (Regeltest, Nachschlagen), Kacheln ohne Symbole */
.home-h { margin: 20px 0 8px; }
#scr-home .home-h:first-child { margin-top: 12px; }
#scr-home .cat-switch { margin-top: 0; }
.home-tiles { margin-top: 8px; gap: 8px; }
.home-tiles .tile { justify-content: center; min-height: 68px; padding: 12px 14px; }
/* Weg zur Regeltest-Seite mit allen Übungsarten */
.home-tiles .tile-more { position: relative; padding-right: 40px; }
.tile-more::after {
    content: "›";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nbbv-navy);
    font-size: 1.8em;
    line-height: 1;
}

/* Anleitung Offline-Nutzung am Ende der Startseite (Baustein aus components.css) */
#offlineHilfe { margin-top: 24px; }
.collapsible-toggle { color: var(--nbbv-navy); font-weight: 600; }
#offlineHilfe .info-box p { margin: 4px 0; }

/* ── 5. Lern- und Prüfungsmodus (Startseite und Regeltest-Seite) ────────── */
/* Hell getönt mit farbiger Kante (wie .info-box), damit sie sich vom dunkelblau gefüllten
   Umschalter darüber absetzen. Lernen blau, Prüfung orange. */
#tileLern, #btnLern, #tilePruef, #btnPruef { border-left-width: 4px; }
#tileLern, #tilePruef { min-height: 80px; }
#tileLern, #btnLern { background: var(--nbbv-soft-2); border-color: var(--nbbv-line); border-left-color: var(--nbbv-navy); }
#tilePruef, #btnPruef { background: var(--nbbv-note-bg); border-color: var(--nbbv-note-line); border-left-color: var(--nbbv-orange); }
#tilePruef .disp, #btnPruef .disp { color: var(--nbbv-note-text); }
#tileLern small, #tilePruef small, #btnLern p, #btnPruef p { color: var(--nbbv-text); }
#tileLern:hover, #btnLern:hover { background: var(--nbbv-soft-2); border-color: var(--nbbv-navy); }
#tilePruef:hover, #btnPruef:hover { background: var(--nbbv-note-bg); border-color: var(--nbbv-orange); }

/* ── 6. Regeltest-Seite und Auswertung: Farbakzente ─────────────────────── */
/* Ergebnis und Verlauf: grüne bzw. rote Kante je nach Bestehen (Farben wie die Pillen) */
.result-hero { border-top: 4px solid var(--nbbv-navy); }
.result-hero:has(.pill-ok:not([hidden])) { border-top-color: var(--nbbv-ok); }
.result-hero:has(.pill-err:not([hidden])) { border-top-color: var(--nbbv-danger); }
.hist-item { border-left: 4px solid var(--nbbv-line); }
.hist-item:has(.pill-ok) { border-left-color: var(--nbbv-ok); }
.hist-item:has(.pill-err) { border-left-color: var(--nbbv-danger); }

/* ── Regeltext (formatRule in index.html): Nummern in eigener Spalte, Absätze statt PDF-Zeilen ── */
.rule-text { white-space: normal; line-height: 1.5; overflow-x: visible; }
.rule-text p { margin: 0 0 6px; }
.rt-h { display: flex; gap: .6em; margin: 16px 0 6px; color: var(--nbbv-navy); }
.rule-text > .rt-h:first-child { margin-top: 0; }
/* Nummernspalte so breit wie nötig, mindestens für 36.2.1; nur lange Nummern (B.8.6.14) machen sie breiter */
.rt-clause { display: grid; grid-template-columns: minmax(3.4em, max-content) minmax(0, 1fr); gap: 0 .6em; margin: 0 0 8px; }
.rt-num { font-weight: 600; color: var(--nbbv-navy); font-variant-numeric: tabular-nums; }
.rt-body > :last-child, .rt-plain > :last-child { margin-bottom: 0; }
.rt-plain { margin: 0 0 8px; }
/* Alle Aufzählungen gleich: Punkt in Orange, Buchstaben (a, b, c) an derselben Stelle */
.rt-list { list-style: none; margin: 2px 0 8px; padding: 0; }
.rt-list li { position: relative; margin: 0 0 4px; padding-left: 1.4em; }
.rt-list li::before { content: ""; position: absolute; left: .35em; top: .62em; width: .38em; height: .38em; border-radius: 50%; background: var(--nbbv-orange); }
.rt-list li:has(.rt-label)::before { content: none; }
.rt-label { position: absolute; left: 0; font-weight: 600; color: var(--nbbv-navy); }
.rt-note { padding: 8px 10px; background: var(--nbbv-soft); border-left: 3px solid var(--nbbv-line); font-size: var(--nbbv-fs-small); }
.rt-caption { color: var(--nbbv-muted); font-size: var(--nbbv-fs-small); font-style: italic; }
.rt-mark { background: var(--nbbv-note-bg); box-shadow: 0 0 0 4px var(--nbbv-note-bg); border-radius: var(--nbbv-radius); }
.rule-text mark { padding: 0 1px; }

/* ── 7. Regelwerk: Artikel klappen in der Liste auf (statt Dialog) ───────── */
.art-list li.open .art-item { border-color: var(--nbbv-navy); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--nbbv-soft); }
.art-list li.open .snippet { display: none; }   /* Vorschau ist offen überflüssig */
.art-body {
    padding: 14px 16px 16px;
    border: 1px solid var(--nbbv-navy);
    border-top: 0;
    border-radius: 0 0 var(--nbbv-radius) var(--nbbv-radius);
    overflow: hidden;   /* umschließt das rechts schwebende Handzeichen */
}
.art-close { display: block; margin: 14px 0 0; padding: 6px 14px; }

/* Regel-Dialog (Artikel-Links in Quiz und Leitfaden): solange er offen ist, steht der Hintergrund still.
   Wischen auf dem Rand bewegt nichts, im Text scrollt nur der Dialog und reicht das Scrollen nicht weiter. */
html:has(#ruleOverlay.open) { overflow: hidden; }
#ruleOverlay { overscroll-behavior: contain; touch-action: none; }
.rule-body { overscroll-behavior: contain; touch-action: pan-y; }


/* ── 8. Abbildungen vergrößern (Handzeichen, Anschreibebogen) ───────────── */
.sig-pages img, .rule-signal { cursor: zoom-in; }
#zoomOverlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--nbbv-navy); overscroll-behavior: contain; }
html:has(#zoomOverlay:not([hidden])) { overflow: hidden; }
.zoom-stage { flex: 1; overflow: auto; display: flex; padding: 12px; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.zoom-stage img { display: block; flex: none; height: auto; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--nbbv-radius); cursor: zoom-in; }
#zoomOverlay.zoomed .zoom-stage img { max-width: none; max-height: none; width: 200%; align-self: flex-start; margin: 0; cursor: zoom-out; }
@media (min-width: 900px) { #zoomOverlay.zoomed .zoom-stage img { width: 140%; } }
.zoom-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--nbbv-navy); font-size: 1.8rem; line-height: 1; }
.zoom-hint { margin: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); color: #fff; text-align: center; }

/* ── 9. Navigation am Desktop: Reiter unter dem Seitenkopf ──────────────────
   Am Handy bleibt die Leiste unten (Daumen). Ab 960px steht dieselbe Navigation als Reiterleiste direkt
   unter dem Seitenkopf – so breit wie der Inhalt, läuft mit dem Kopf mit (das Skript am Ende von
   index.html hängt #bottomNav dafür in den Kopf). Aktiver Reiter dunkelblau mit oranger Linie. */
@media (min-width: 960px) {
    #bottomNav {
        position: static;
        padding: 0;
        border-top: 1px solid var(--nbbv-line);
        background: #fff;
        box-shadow: none;
    }
    #bottomNav .nav-inner { max-width: var(--nbbv-header-max); margin: 0 auto; padding: 0 12px; gap: 4px; }
    .nav-btn {
        flex: none;
        flex-direction: row;
        gap: 8px;
        padding: 10px 14px 9px;
        border-radius: 0;
        border-bottom: 3px solid transparent;
        font-size: 1em;
        color: var(--nbbv-muted);
    }
    .nav-btn svg { width: 20px; height: 20px; }
    .nav-btn:hover { color: var(--nbbv-navy); background: var(--nbbv-soft); }
    .nav-btn.active { color: var(--nbbv-navy); border-bottom-color: var(--nbbv-orange); }
    .nav-btn.active::before { display: none; }
    .nav-extern { margin-left: auto; }   /* verlässt die App: rechts abgesetzt */
    .wrap { padding-bottom: 32px; }
}

/* Hinweis unter dem Katalog-Fortschritt (Regeltest-Seite) */
.status-hint { margin: 6px 0 0; color: var(--nbbv-muted); }

@media (max-width: 600px) {
    /* Handzeichen über dem Artikeltext statt daneben, sonst bleibt am Handy nur eine schmale Textspalte */
    .rule-signal { float: none; display: block; width: 170px; max-width: 60%; margin: 0 auto 12px; }
}

/* ── Schriftgrößen: nur die Stufen der anderen Dienste ───────────────────────
   Stefan rechnet in rem (bezogen auf 16px) mit vielen Zwischenstufen. Hier alles auf die Stufen aus
   shared/nbbv.css relativ zur Grundschrift aus shared/components.css (16 / 15 / 14px):
   klein = --nbbv-fs-small · normal = 1em · groß = --nbbv-fs-lg · Titel = --nbbv-fs-title */
.eyebrow, .mode-card p, .train-btn small, .tile small, .fact .lbl, .prog-head .nums, .prog-sub,
.art-item .snippet, .pill, .qnr, .rev-item .qnr, .errchip, .rule-src, .nav-btn,
.status-hint, .art-close, .zoom-hint {
    font-size: var(--nbbv-fs-small);
}
.cat-btn, .subnav button, .guide-steps li, .guide-note, .hist-item, .rev-a, .feedback .expl,
.result-sub, .verdict-pill, .nextrow .btn-primary, .rule-text, .rt-h, .collapsible-toggle {
    font-size: 1em;
}
.tile .disp, .mode-card .disp, .train-btn .disp, .home-h, .guide-h, .review h2, .rule-head .disp,
.counter, .qtext, .ans, .feedback .verdict {
    font-size: var(--nbbv-fs-lg);
}
/* Stefans Überschriften „Katalog-Fortschritt“ und „Deine letzten Durchläufe“ haben die Größe inline */
#progBlock h2.disp, #historyBlock h2.disp { font-size: var(--nbbv-fs-lg) !important; }
h1, .fact .num { font-size: var(--nbbv-fs-title); }
.result-hero .big { font-size: 2.4em; }   /* einzige Anzeigegröße: das Ergebnis */
/* verschachtelt: relativ zum Elternteil, ergibt „klein“ bzw. „groß“ */
.counter small { font-size: .74em; }
.result-hero .big small { font-size: .5em; }

/* ── 10. Regelinterpretationen (interpretationen.js) ────────────────────────
   Einträge wie Karten: Nummer in Dunkelblau, Herkunft als kleine Marke. Was 2026 geändert wurde (im PDF gelb),
   bekommt eine orange Kante und die Marke „geändert 2026“, damit man es beim Durchblättern sofort sieht. */
.ip-entry { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--nbbv-line); border-left: 4px solid var(--nbbv-navy); border-radius: var(--nbbv-radius); background: #fff; line-height: 1.5; }
.ip-entry-neu { border-left-color: var(--nbbv-orange); }
.ip-entry p { margin: 0 0 6px; }
.ip-entry > :last-child { margin-bottom: 0; }
.ip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 6px; }
.ip-nr { font-weight: 700; color: var(--nbbv-navy); font-variant-numeric: tabular-nums; }
.ip-badge { padding: 0 8px; border-radius: var(--nbbv-radius-pill); background: var(--nbbv-soft-2); color: var(--nbbv-navy); font-size: var(--nbbv-fs-small); font-weight: 600; }
.ip-dbb { background: var(--nbbv-soft); border: 1px solid var(--nbbv-line); }
.ip-neu { background: var(--nbbv-note-bg); color: var(--nbbv-note-text); }
.ip-lab { color: var(--nbbv-navy); font-weight: 600; }
.ip-fig { margin: 8px 0; }
.ip-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--nbbv-line); border-radius: var(--nbbv-radius); background: #fff; cursor: zoom-in; }
.ip-fig figcaption { margin-top: 4px; color: var(--nbbv-muted); font-size: var(--nbbv-fs-small); font-style: italic; }
.ip-sub { margin: 16px 0 8px; color: var(--nbbv-navy); }
.ip-sub-1 { font-size: var(--nbbv-fs-lg); }
.ip-body > .ip-sub:first-child, .ip-list > .ip-sub:first-child { margin-top: 0; }
.ip-hinweis { margin: 0 0 12px; }
.ip-filter { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 2px; cursor: pointer; }
.ip-laden { padding: 16px 0; color: var(--nbbv-muted); list-style: none; }
/* im Regelwerk unter dem Artikeltext */
.ip-artikel { margin: 16px 0 0; }
.ip-artikel .ip-list { padding: 4px 0 0; }
/* Regeltest: Link zu den Interpretationen unter der Auflösung */
.ip-quiz { margin-top: 6px; }
/* Prüfungsmodus: Restzeit */
.timechip { font-variant-numeric: tabular-nums; }

/* ── 11. Änderungen 2026 (aenderungen.js) ───────────────────────────────────
   Gleicher Aufbau wie die Interpretationen; der neue Regeltext ist gesetzt wie im Regelwerk.
   Die eigentliche Änderung (im PDF gelb) wird hell orange hinterlegt. */
#aeList { margin-top: 16px; }   /* gleicher Abstand unter dem Einstiegstext wie das Suchfeld bei den Interpretationen */
.ae-g { background: var(--nbbv-note-bg); box-shadow: 0 0 0 3px var(--nbbv-note-bg); border-radius: 2px; }
.ae-teil + .ae-teil { margin-top: 18px; }
.ae-h { margin: 0 0 8px; color: var(--nbbv-navy); font-size: var(--nbbv-fs-lg); }
.ae-teil > p { margin: 0 0 8px; }
.ae-gap { margin: 0 0 8px; color: var(--nbbv-muted); }
.ae-links { margin: 14px 0 0; }
.ae-hinweis { margin: 0 0 12px; }
.art-title .ip-badge { margin-left: 8px; white-space: nowrap; }
.rt-hinweis { margin: 0 0 12px; }