/* =====================================================================
 * NODE64 – custom.css
 *
 * Duenne Schicht ueber Bootstrap 5.3 (Kapitel 4.2: lokal gehostet, kein
 * Build-Schritt). Angepasst wird ausschliesslich ueber CSS Custom Properties,
 * damit ein Bootstrap-Update nur ein Dateiaustausch bleibt.
 *
 * Palette (Kapitel 11):
 *   Akzent/Primaer     #f59c1a   CTAs, Links, aktive Zustaende
 *   Neutral-Dunkel     #272828   Logo-Text hell, dunkle Flaechen auf hell
 *   Dark-Mode-Grund    #0d0f12   Basis im Dark-Mode (an x64.de angelehnt)
 *   Hell/Weiss         #ffffff
 *
 * Barrierefreiheit: reines #f59c1a auf Weiss erreicht nur ~2,3:1 und ist als
 * Textfarbe im Light-Mode NICHT AA-tauglich. Deshalb gibt es --n64-accent-ink
 * (#9a5b00, ~5,5:1 auf Weiss) fuer Text/Links auf hellem Grund; die Flaeche
 * (Buttons, Badges) bleibt im Marken-Orange mit dunkler Schrift (~9:1).
 * ===================================================================== */

/* ---------- 1. Marken-Token ---------- */
:root {
    --n64-accent:        #f59c1a;
    --n64-accent-rgb:    245, 156, 26;
    --n64-accent-strong: #d9840b;
    --n64-accent-ink:    #9a5b00;
    --n64-neutral-dark:  #272828;
    --n64-dark-bg:       #0d0f12;
    --n64-dark-surface:  #14171c;
    --n64-dark-border:   #262a31;

    --bs-font-sans-serif: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ---------- 2. Light-Mode ---------- */
:root,
[data-bs-theme="light"] {
    --bs-primary:      var(--n64-accent);
    --bs-primary-rgb:  var(--n64-accent-rgb);

    --bs-link-color:            var(--n64-accent-ink);
    --bs-link-color-rgb:        154, 91, 0;
    --bs-link-hover-color:      #7d4a00;
    --bs-link-hover-color-rgb:  125, 74, 0;

    --bs-body-color:      var(--n64-neutral-dark);
    --bs-emphasis-color:  #111213;
    --bs-focus-ring-color: rgba(var(--n64-accent-rgb), 0.35);

    --n64-surface:      #ffffff;
    --n64-hero-glow:    rgba(var(--n64-accent-rgb), 0.10);
    --n64-accent-text:  var(--n64-accent-ink);
}

/* ---------- 3. Dark-Mode (Dark-first, Kapitel 11) ---------- */
[data-bs-theme="dark"] {
    --bs-body-bg:           var(--n64-dark-bg);
    --bs-body-bg-rgb:       13, 15, 18;
    --bs-body-color:        #dfe3e8;
    --bs-body-color-rgb:    223, 227, 232;
    --bs-emphasis-color:    #ffffff;
    --bs-secondary-color:   rgba(223, 227, 232, 0.72);
    --bs-tertiary-color:    rgba(223, 227, 232, 0.5);
    --bs-tertiary-bg:       #181b21;
    --bs-border-color:      var(--n64-dark-border);

    --bs-link-color:            var(--n64-accent);
    --bs-link-color-rgb:        var(--n64-accent-rgb);
    --bs-link-hover-color:      #ffb347;
    --bs-link-hover-color-rgb:  255, 179, 71;

    --n64-surface:      var(--n64-dark-surface);
    --n64-hero-glow:    rgba(var(--n64-accent-rgb), 0.14);
    --n64-accent-text:  var(--n64-accent);
}

/* ---------- 3b. Unterstreichungen (26.3) ----------
 *
 * **Das war kein Browser-Problem.** Bootstrap unterstreicht Links, aber ohne
 * Angabe zu Staerke und Abstand rendert jede Schriftgroesse ihre eigene Linie:
 * unter einer 0.8rem-Fussnote wirkt sie fett, unter einem Fliesstext duenn.
 * Deshalb hier einmal zentral, relativ zur Schriftgroesse.
 *
 * **Die Regel fuer Ausnahmen:** `text-decoration: none` ist erlaubt fuer
 * Navigation, Karten, Kacheln und alles, was wie ein Bedienelement aussieht -
 * dort traegt die Umgebung die Erkennbarkeit. Ein Link **im Fliesstext** wird
 * nie ohne Unterstreichung gesetzt: Farbe allein reicht nicht, wenn jemand
 * Farben schlecht unterscheidet. Wer eine neue Ausnahme braucht, schreibt den
 * Grund daneben.
 */
a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

/* ---------- 4. Komponenten im Markenbild ---------- */

/* Primaerbutton: Marken-Orange als Flaeche, dunkler Text (kontraststark). */
.btn-primary {
    --bs-btn-color:                 #0d0f12;
    --bs-btn-bg:                    var(--n64-accent);
    --bs-btn-border-color:          var(--n64-accent);
    --bs-btn-hover-color:           #0d0f12;
    --bs-btn-hover-bg:              var(--n64-accent-strong);
    --bs-btn-hover-border-color:    var(--n64-accent-strong);
    --bs-btn-active-color:          #0d0f12;
    --bs-btn-active-bg:             var(--n64-accent-strong);
    --bs-btn-active-border-color:   var(--n64-accent-strong);
    --bs-btn-disabled-color:        #0d0f12;
    --bs-btn-disabled-bg:           var(--n64-accent);
    --bs-btn-disabled-border-color: var(--n64-accent);
    --bs-btn-focus-shadow-rgb:      var(--n64-accent-rgb);
}

.btn-outline-primary {
    --bs-btn-color:               var(--n64-accent-text);
    --bs-btn-border-color:        var(--n64-accent);
    --bs-btn-hover-color:         #0d0f12;
    --bs-btn-hover-bg:            var(--n64-accent);
    --bs-btn-hover-border-color:  var(--n64-accent);
    --bs-btn-active-color:        #0d0f12;
    --bs-btn-active-bg:           var(--n64-accent);
    --bs-btn-active-border-color: var(--n64-accent);
    --bs-btn-focus-shadow-rgb:    var(--n64-accent-rgb);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg:    var(--n64-accent);
    --bs-dropdown-link-active-color: #0d0f12;
    --bs-dropdown-bg:                var(--n64-surface);
    --bs-dropdown-border-color:      var(--bs-border-color);
}

/* Die Umschalter sind Formulare – die Buttons darin sollen wie Menuepunkte wirken. */
.dropdown-menu form {
    margin: 0;
}

.n64-navbar {
    background-color: var(--bs-body-bg);
}

.n64-footer {
    background-color: var(--bs-tertiary-bg);
}

.n64-card {
    background-color: var(--n64-surface);
    border-color: var(--bs-border-color);
    transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.n64-card:hover {
    border-color: rgba(var(--n64-accent-rgb), 0.55);
}

.n64-card-icon {
    color: var(--n64-accent);
    font-size: 1.5rem;
    line-height: 1;
}

.n64-badge-accent {
    background-color: rgba(var(--n64-accent-rgb), 0.14);
    border: 1px solid rgba(var(--n64-accent-rgb), 0.4);
    color: var(--n64-accent-text);
    letter-spacing: 0.06em;
    font-weight: 600;
}

.n64-hero {
    background:
        radial-gradient(60rem 22rem at 50% -6rem, var(--n64-hero-glow), transparent 70%);
}

/* Lesbare Zeilenlaenge fuer Fliesstext. */
.n64-measure {
    max-width: 46rem;
}

.n64-flag {
    font-size: 1.05em;
    line-height: 1;
}

/* ---------- 5. Logo-Wechsel je Modus (Kapitel 7.2/11) ----------
   Beide SVGs stehen im Markup, sichtbar ist immer nur das passende –
   ohne JavaScript, ohne zweiten Request beim Umschalten. */
.n64-logo {
    height: 32px;
    width: auto;
}

.n64-logo-dark {
    display: none;
}

[data-bs-theme="dark"] .n64-logo-light {
    display: none;
}

[data-bs-theme="dark"] .n64-logo-dark {
    display: inline-block;
}

/* ---------- 5b. Sektionen & Bausteine der oeffentlichen Seiten ---------- */
.n64-section-alt {
    background-color: var(--bs-tertiary-bg);
}

.n64-trust {
    background:
        linear-gradient(180deg, rgba(var(--n64-accent-rgb), 0.06), transparent 60%),
        var(--bs-tertiary-bg);
}

.n64-cta {
    background-color: var(--bs-tertiary-bg);
}

.n64-measure-wide {
    max-width: 58rem;
}

.n64-flag-large {
    font-size: 2.5rem;
    line-height: 1;
}

.n64-badge-neutral {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    font-weight: 500;
}

/* "Bald verfuegbar" – bewusst neutral, damit es nicht wie ein CTA wirkt
   (Kapitel 15.11: kein Versprechen, kein Link). */
.n64-badge-soon {
    background-color: rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.08);
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.n64-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: rgba(var(--n64-accent-rgb), 0.15);
    color: var(--n64-accent-text);
    font-weight: 700;
    font-size: 0.9rem;
}

.n64-li-icon {
    color: var(--n64-accent);
}

.n64-accordion {
    --bs-accordion-bg: var(--n64-surface);
    --bs-accordion-active-bg: rgba(var(--n64-accent-rgb), 0.1);
    --bs-accordion-active-color: var(--bs-emphasis-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--n64-accent-rgb), 0.3);
    --bs-accordion-border-color: var(--bs-border-color);
}

.n64-footer-heading {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color);
}

.n64-footer-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

.n64-footer-link:hover,
.n64-footer-link:focus-visible {
    color: var(--n64-accent-text);
    text-decoration: underline;
}

/* ---------- 5c. Preisseite ---------- */
.n64-card-featured {
    border-color: rgba(var(--n64-accent-rgb), 0.65);
    box-shadow: 0 0 0 1px rgba(var(--n64-accent-rgb), 0.2);
}

.n64-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Monats-/Jahres-Umschalter: reine CSS-Loesung ueber eine echte Checkbox.
   Kein JavaScript (CSP erlaubt kein Inline-Script) und kein Reload. */
.n64-pricing-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.n64-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.n64-pricing-toggle-track {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.6rem;
    border-radius: 1rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease-in-out;
}

.n64-pricing-toggle-knob {
    position: absolute;
    top: 0.15rem;
    left: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: var(--n64-accent);
    transition: transform 0.15s ease-in-out;
}

.n64-pricing-toggle-option {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.n64-pricing-toggle-monthly {
    color: var(--bs-emphasis-color);
    font-weight: 700;
}

.n64-pricing-switch:checked ~ * .n64-pricing-toggle-knob {
    transform: translateX(1.4rem);
}

.n64-pricing-switch:checked ~ * .n64-pricing-toggle-monthly {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.n64-pricing-switch:checked ~ * .n64-pricing-toggle-yearly {
    color: var(--bs-emphasis-color);
    font-weight: 700;
}

.n64-pricing-switch:focus-visible ~ * .n64-pricing-toggle-track {
    outline: 2px solid var(--n64-accent);
    outline-offset: 2px;
}

/* Standard ist die Monatsansicht; die Jahresansicht blendet die Checkbox ein. */
.n64-price-yearly {
    display: none;
}

.n64-pricing-switch:checked ~ * .n64-price-monthly {
    display: none;
}

.n64-pricing-switch:checked ~ * .n64-price-yearly {
    display: inline;
}

.n64-table th,
.n64-table td {
    border-color: var(--bs-border-color);
}

/* ---------- 5d. Kontakt & Rechtsseiten ---------- */

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Bewusst NICHT display:none – manche Bots ignorieren solche Felder. */
.n64-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.n64-prose p {
    margin-bottom: 1rem;
}

.n64-prose h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.n64-prose h2:first-child {
    margin-top: 0;
}

.n64-alert-draft {
    background-color: rgba(var(--n64-accent-rgb), 0.1);
    border: 1px solid rgba(var(--n64-accent-rgb), 0.4);
    color: var(--bs-body-color);
}

.n64-alert-note {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
}

/* ---------- 5d2. Dashboard-Shell (Kapitel 19.1) ----------
   Topbar oben fest, darunter Sidebar links und Inhalt rechts. Der
   eingeklappte Zustand haengt am <body>-Attribut, das der Server aus dem
   Cookie rendert – so klappt beim Laden nichts sichtbar zusammen. */
.n64-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bs-tertiary-bg);
}

.n64-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--bs-body-bg);
}

.n64-app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.n64-sidebar {
    flex: 0 0 15rem;
    width: 15rem;
    border-right: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    position: sticky;
    top: 3.5rem;
    align-self: flex-start;
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    transition: flex-basis 0.15s ease-in-out, width 0.15s ease-in-out;
}

.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar {
    flex-basis: 4rem;
    width: 4rem;
}

.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar .n64-nav-label {
    display: none;
}

.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar .n64-nav-link,
.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar .n64-sidebar-toggle {
    justify-content: center;
}

.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar .n64-sidebar-toggle i {
    transform: rotate(180deg);
}

.n64-app-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 1rem 3rem;
}

@media (min-width: 992px) {
    .n64-app-main {
        padding: 1.75rem 1.75rem 4rem;
    }
}

.n64-nav {
    padding: 0.75rem 0.5rem;
}

.n64-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 0.5rem;
    padding: 0.55rem 0.75rem;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.n64-nav-link:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.n64-nav-link.active {
    background-color: rgba(var(--n64-accent-rgb), 0.14);
    color: var(--n64-accent-text);
    font-weight: 600;
}

.n64-nav-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* --- Unterpunkte der Navigation (Phase 50.1/50.2) ----------------------
   Eingerueckt statt eingerahmt: Die Zugehoerigkeit soll man sehen, ohne dass
   ein zweites Menue entsteht. Die senkrechte Linie ersetzt Aufzaehlungszeichen
   und bleibt ruhig genug, um den aktiven Hauptpunkt nicht zu ueberstimmen. */
/* --- Sonar-Karte in der Anwendung (Phase 50.3) -------------------------
   Dieselben Regeln wie im eigenstaendigen SVG (sonarmap_stile()), hier fuer
   die eingebettete Karte. Der Ankerring und der wandernde Punkt muessen an
   BEIDEN Orten stehen: Die Datei laedt kein Stylesheet, die Seite kein
   <style> aus dem SVG. */
.n64-map-anchor {
    stroke: var(--n64-ok-color, #1f7a4d);
    stroke-width: 2.4;
}

.n64-map-ping {
    fill: #fff;
    stroke: var(--n64-accent, #f59c1a);
    stroke-width: 1;
}

@media (prefers-reduced-motion: reduce) {
    .n64-map-ping {
        display: none;
    }
}

.n64-nav-sub {
    margin: 0.15rem 0 0.35rem 1.6rem;
    padding-left: 0.65rem;
    border-left: 2px solid var(--bs-border-color);
}

.n64-nav-sublink {
    padding: 0.3rem 0.6rem;
    font-size: 0.875rem;
}

/* Eingeklappte Sidebar: Ohne Beschriftung blieben leere Kaestchen stehen -
   also verschwinden die Unterpunkte mit ihr. Erreichbar bleiben sie ueber die
   Reiter der Seite selbst. */
.n64-app[data-n64-sidebar="collapsed"] .n64-sidebar .n64-nav-sub {
    display: none;
}

.n64-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.n64-offcanvas {
    width: 16rem;
    background-color: var(--bs-body-bg);
}

.n64-search .form-control:disabled,
.n64-search .input-group-text {
    background-color: var(--bs-tertiary-bg);
}

.n64-page-header {
    margin-bottom: 1.25rem;
}

.n64-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.n64-empty-icon {
    font-size: 2.25rem;
    line-height: 1;
    color: var(--n64-accent);
}

/* ---------- 5d3. Dashboard-Inhalte (Kapitel 19.3–19.6) ----------
   Severity- und Status-Farben stehen als CSS-Variablen, damit auch die
   Charts sie lesen koennen (app.js) – ohne Inline-Styles. */
:root {
    --n64-sev-critical-color: #9b1c21;
    --n64-sev-high-color:     #b85310;
    --n64-sev-medium-color:   #8f6300;
    --n64-sev-low-color:      #4a6b7c;
    --n64-sev-info-color:     #5c6470;

    /* Typfarben (26.2). Sie beantworten eine ANDERE Frage als die Severity:
       nicht "wie schlimm", sondern "worum geht es" - Schwachstelle, Haertung,
       Empfehlung, Integritaet, Abweichung. Deshalb stehen sie neben der
       Severity und ersetzen sie nicht. Gedaempft gewaehlt, damit die
       Dringlichkeitsfarbe die lautere von beiden bleibt. */
    --n64-type-cve-color:          #8a2b6b;
    --n64-type-hardening-color:    #1f5e8f;
    --n64-type-bestpractice-color: #1f7a4d;
    --n64-type-integrity-color:    #5f4899;
    --n64-type-drift-color:        #5c6470;
    --n64-ok-color:           #1f7a4d;
    --n64-chart-grid:         rgba(39, 40, 40, 0.12);
    --n64-chart-text:         #5c6470;
}

[data-bs-theme="dark"] {
    --n64-sev-critical-color: #ef4a52;
    --n64-sev-high-color:     #ff9147;
    --n64-sev-medium-color:   #f5c451;
    --n64-sev-low-color:      #8fb8cc;
    --n64-sev-info-color:     #9aa1ab;

    --n64-type-cve-color:          #e78fd0;
    --n64-type-hardening-color:    #7fbaf0;
    --n64-type-bestpractice-color: #4ad295;
    --n64-type-integrity-color:    #b9a2f0;
    --n64-type-drift-color:        #9aa1ab;
    --n64-ok-color:           #4ad295;
    --n64-chart-grid:         rgba(223, 227, 232, 0.12);
    --n64-chart-text:         #9aa1ab;
}

.n64-sev-critical { color: var(--n64-sev-critical-color); }
.n64-sev-high     { color: var(--n64-sev-high-color); }
.n64-sev-medium   { color: var(--n64-sev-medium-color); }
.n64-sev-low      { color: var(--n64-sev-low-color); }
.n64-sev-info     { color: var(--n64-sev-info-color); }

.n64-badge-sev,
.n64-badge-state,
.n64-badge-dev {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid currentColor;
    font-weight: 600;
    font-size: 0.7rem;
}

/* „Kritisch" wird gefuellt (26.2).
   Rot und Orange liegen als Farben zwangslaeufig nah beieinander - in der
   hellen Darstellung waren sie mit 1.01:1 praktisch gleich hell. Die Fuellung
   ist deshalb der eigentliche Unterschied: Sie wirkt auch dann, wenn jemand
   Farben schlecht unterscheidet oder das Bild ausgedruckt wird. */
.n64-badge-sev.n64-sev-critical {
    background-color: var(--n64-sev-critical-color);
    border-color: var(--n64-sev-critical-color);
    color: #ffffff;
}

/* Dringlichkeit (42.3) - die dritte Aussage neben Typ und Schwere.
   Bewusst eine ANDERE Form als die Schwere-Abzeichen: gefuellt statt
   umrandet, mit Symbol. Zwei Abzeichen nebeneinander, die gleich aussehen
   und Verschiedenes sagen, sind schlimmer als eines. */
.n64-badge-urgency {
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* „Sofort" ist die einzige Stufe, die eine Mail ausloest (42.5) - sie ist
   auch die einzige, die gefuellt kraeftig auftritt. Waeren es drei, waere
   keine davon ein Signal. */
.n64-urgency-sofort {
    background-color: var(--n64-sev-critical-color);
    border-color: var(--n64-sev-critical-color);
    color: #ffffff;
}

.n64-urgency-hoch {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--n64-sev-high-color);
    color: var(--n64-sev-high-color);
}

.n64-urgency-erhoeht {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* „Was zuerst" (42.4). Die Nummer traegt die Rangfolge - sie ist der
   ganze Punkt der Liste und deshalb das erste, was das Auge findet. */
.n64-next-num {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.n64-urgency-text {
    color: var(--n64-sev-critical-color);
    font-weight: 600;
}

/* Rueckfall (43.5). Keine eigene Farbe, nur Gewicht: Die Zeile traegt
   schon Typ, Schwere, Status und ggf. Dringlichkeit - eine fuenfte Farbe
   machte aus der Liste ein Mosaik. */
.n64-rueckfall {
    font-weight: 600;
    color: var(--n64-sev-medium-color);
}

/* Die Quellenangabe an der Zeile (28.5). Klein, aber nicht versteckt: Eine
   Aussage ohne Beleg ist eine Behauptung. */
.n64-quelle {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.n64-state-open     { color: var(--n64-sev-high-color); }
.n64-state-verify   { color: var(--n64-sev-medium-color); }
.n64-state-fixed    { color: var(--n64-ok-color); }
.n64-state-reopened { color: var(--n64-sev-critical-color); }
.n64-state-accepted,
.n64-state-snoozed  { color: var(--bs-secondary-color); }

.n64-dev-online   { color: var(--n64-ok-color); }
.n64-dev-overdue  { color: var(--n64-sev-medium-color); }
.n64-dev-offline  { color: var(--n64-sev-critical-color); }
.n64-dev-disabled { color: var(--bs-secondary-color); }

.n64-dev-inactive { color: var(--bs-secondary-color); }

/* Löschen-Bereich auf der Geräte-Detailseite */
.n64-card-danger {
    border-color: rgba(209, 56, 61, 0.45);
}

[data-bs-theme="dark"] .n64-card-danger {
    border-color: rgba(255, 107, 111, 0.4);
}

.n64-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 auto;
}

/* Klickbare KPI-Kachel (19.3: Drill-down) */
.n64-kpi-card {
    text-decoration: none;
    color: inherit;
}

.n64-kpi-card:hover {
    border-color: rgba(var(--n64-accent-rgb), 0.55);
}

/* Finding-Liste */
.n64-finding-list {
    display: flex;
    flex-direction: column;
}

/* Typ-Klassen (26.2): faerben Symbol und Beschriftung. */
.n64-type-cve          { color: var(--n64-type-cve-color); }
.n64-type-hardening    { color: var(--n64-type-hardening-color); }
.n64-type-bestpractice { color: var(--n64-type-bestpractice-color); }
.n64-type-integrity    { color: var(--n64-type-integrity-color); }
.n64-type-drift        { color: var(--n64-type-drift-color); }

/* Der Streifen links traegt die TYP-Farbe, das Symbol daneben die Severity.
   So sieht man im Vorbeigehen beides, ohne dass eine Farbe zwei Bedeutungen
   tragen muss. Die Breite bleibt auch ohne Farbe erkennbar - Farbe ist nie
   das einzige Merkmal, daneben stehen Symbol und Text.

   Wichtig: Die Typklasse faerbt sonst den ganzen Zeilentext. Deshalb setzt
   die Zeile ihre Textfarbe ausdruecklich zurueck und nimmt vom Typ nur die
   Randfarbe - zwei Klassen schlagen dabei die eine der Typklasse. */
.n64-finding-row {
    padding: 0.7rem 0.25rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
}

.n64-finding-row.n64-type-cve          { border-left-color: var(--n64-type-cve-color);          color: inherit; }
.n64-finding-row.n64-type-hardening    { border-left-color: var(--n64-type-hardening-color);    color: inherit; }
.n64-finding-row.n64-type-bestpractice { border-left-color: var(--n64-type-bestpractice-color); color: inherit; }
.n64-finding-row.n64-type-integrity    { border-left-color: var(--n64-type-integrity-color);    color: inherit; }
.n64-finding-row.n64-type-drift        { border-left-color: var(--n64-type-drift-color);        color: inherit; }

.n64-finding-row:last-child {
    border-bottom: 0;
}

.n64-finding-row:hover {
    background-color: var(--bs-tertiary-bg);
}

.n64-finding-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    background-color: var(--bs-tertiary-bg);
}

.n64-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 0.6rem;
    background-color: rgba(var(--n64-accent-rgb), 0.12);
    color: var(--n64-accent);
}

.n64-device-icon-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.3rem;
}

/* Lieferketten-Baustein (Phase 25a). Eigene Klasse statt eines Inline-Styles:
   Die Inhaltssicherheitsrichtlinie laesst keine zu (28.2). */
.n64-supply-icon {
    font-size: 2rem;
    color: var(--n64-accent);
}

/* Sonar-Weltkarte (Phase 23).

   Serverseitig erzeugtes SVG, deshalb reicht hier reines CSS - keine
   Kartenbibliothek, kein Nachladen, kein JavaScript. Die Farben kommen aus
   den Bootstrap-Variablen, damit die Karte in beiden Erscheinungsbildern
   ohne eigene Sonderregel funktioniert. */
.n64-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    background-color: var(--bs-tertiary-bg);
}

.n64-map-land {
    fill: var(--bs-secondary-bg);
    stroke: var(--bs-body-bg);
    stroke-width: 0.5;
    fill-rule: evenodd;
}

/* Ruhende Verbindung: sichtbar, aber ohne Anspruch auf Aufmerksamkeit. */
.n64-map-arc {
    fill: none;
    stroke: var(--n64-accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.38;
}

/* Laufende Messung. Bewusst ueber die Deckkraft und die Staerke abgehoben
   und nicht ueber eine zweite Farbe: Die Karte hat schon genug zu sagen. */
.n64-map-arc-active {
    stroke-width: 1.9;
    opacity: 0.95;
}

.n64-map-probe {
    fill: var(--n64-accent);
    stroke: var(--bs-body-bg);
    stroke-width: 1.2;
}

/* Sonde ohne aktuelle Verbindung - grau statt unsichtbar: Dass sie da ist
   und gerade nichts meldet, ist eine Information. */
.n64-map-probe-idle {
    fill: var(--bs-secondary-color);
}

.n64-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.n64-map-key {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    vertical-align: -0.05rem;
}

.n64-map-key-active { background-color: var(--n64-accent); }
.n64-map-key-idle   { background-color: var(--bs-secondary-color); }

/* --- Phase 35: Karte, Abzeichen, Anker --------------------------------- */

/* Antippbare Punkte und Boegen (35.3).

   Die Verweise sind gewoehnliche `<a>` innerhalb des SVG - kein JavaScript,
   und damit auch mit der Tastatur erreichbar. Genau deshalb braucht der
   Tastaturfokus hier eine SICHTBARE Marke: Ohne sie waere die Karte zwar
   bedienbar, aber niemand saehe, wo er gerade steht. */
.n64-map a {
    cursor: pointer;
}

.n64-map a:focus-visible circle,
.n64-map a:focus-visible path {
    outline: 2px solid var(--n64-accent);
    outline-offset: 2px;
}

.n64-map a:hover circle {
    fill: var(--n64-accent);
    stroke-width: 2;
}

.n64-map a:hover path {
    stroke-width: 2.6;
}

/* Die Filterleiste der Vollbildkarte. Ein Rahmen genuegt: Was darin steht,
   sind Links, und Links sollen wie Links aussehen und nicht wie ein
   Bedienfeld, das etwas anderes tut. */
.n64-map-filter {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.75rem;
}

/* Eine geratene Angabe (35.2). Gestrichelt und ohne Fuellung - dieselbe
   Bildsprache wie bei "bald verfuegbar" oben, und aus demselben Grund: Was
   nicht belegt ist, soll auch nicht so aussehen. */
.n64-badge-guess {
    background-color: transparent;
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.n64-badge-anchor {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--n64-accent);
    color: var(--bs-body-color);
    font-weight: 500;
}

/* Zeitgebundene Abzeichen. Kein Warnton - es ist keine Warnung, sondern eine
   Auskunft: Hier hilft Fleiss nicht weiter. */
.n64-badge-time {
    background-color: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-weight: 400;
    font-size: 0.7rem;
}

.n64-badge-icon {
    color: var(--bs-secondary-color);
    font-size: 1.25rem;
    line-height: 1;
    width: 1.5rem;
    text-align: center;
}

.n64-badge-icon.n64-badge-earned {
    color: var(--n64-accent);
}

/* Der Fortschrittsbalken ist absichtlich duenn: Er ist die Nebenauskunft zur
   Zahl daneben, nicht der Hauptdarsteller. */
.n64-badge-bar {
    display: block;
    height: 0.25rem;
    max-width: 14rem;
    background-color: var(--bs-tertiary-bg);
}

.n64-badge-bar .progress-bar {
    display: block;
    height: 100%;
    background-color: var(--n64-accent);
}

/* Die Stationsliste eines Traceroutes sitzt in einer Tabellenzeile und
   braucht dort ihren eigenen Innenabstand - die Zelle hat keinen. */
.n64-hop-list {
    padding: 0 0.75rem;
}

.n64-hop-list > summary {
    cursor: pointer;
}

/* Distributions-Symbole (Phase 22).

   Die Logos sind eingebettete SVG und folgen ueber `fill: currentColor` der
   Farbe des Rahmens - genau wie die Icon-Schrift daneben, damit beide im
   hellen wie im dunklen Erscheinungsbild gleich sitzen. Etwas kleiner als
   die Bootstrap-Icons gesetzt, weil die Markenzeichen die Flaeche staerker
   ausfuellen als ein Strich-Icon und sonst gedrungen wirken. */
.n64-distro-icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
}

.n64-device-icon .n64-distro-icon {
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: 0;
}

.n64-device-icon-lg .n64-distro-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.min-w-0 { min-width: 0; }

/* Remediation-Block (23.1) */
.n64-remediation {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.9rem;
}

.n64-code {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.8rem;
    line-height: 1.6;
    overflow-x: auto;
    margin-bottom: 0;
    color: var(--bs-body-color);
}


/* --- Messformular: nur die passenden Felder (34.3) ---------------------
   Gesteuert ueber `:has()` am Formular: Was zur gewaehlten Messart nicht
   gehoert, verschwindet. **Ohne JavaScript**, wie der Preisumschalter -
   und wo `:has()` fehlt (aeltere Browser), sind schlicht alle Felder da.
   Das ist unschoen, aber nicht kaputt: Die Pruefung im Server verwirft
   ohnehin, was nicht zur Messart gehoert. */
.n64-mform:has(#m-type option[value="ping"]:checked) .n64-mfield:not([data-types~="ping"]) { display: none; }
.n64-mform:has(#m-type option[value="mtr"]:checked) .n64-mfield:not([data-types~="mtr"]) { display: none; }
.n64-mform:has(#m-type option[value="traceroute"]:checked) .n64-mfield:not([data-types~="traceroute"]) { display: none; }
.n64-mform:has(#m-type option[value="dns"]:checked) .n64-mfield:not([data-types~="dns"]) { display: none; }
.n64-mform:has(#m-type option[value="http"]:checked) .n64-mfield:not([data-types~="http"]) { display: none; }
.n64-mform:has(#m-type option[value="tls"]:checked) .n64-mfield:not([data-types~="tls"]) { display: none; }
.n64-mform:has(#m-type option[value="port"]:checked) .n64-mfield:not([data-types~="port"]) { display: none; }
.n64-mform:has(#m-type option[value="ntp"]:checked) .n64-mfield:not([data-types~="ntp"]) { display: none; }
.n64-mform:has(#m-type option[value="pmtu"]:checked) .n64-mfield:not([data-types~="pmtu"]) { display: none; }

/* --- Livesuche (27.1/27.2) --------------------------------------------
   Die Vorschlagsliste haengt am Formular, nicht am Dokument: So bleibt sie
   beim Scrollen an ihrem Feld und braucht keine Positionsrechnerei. */
.n64-search {
    position: relative;
}

.n64-suggest {
    position: absolute;
    z-index: 1030;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background-color: var(--n64-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    max-height: 70vh;
    overflow-y: auto;
}

.n64-suggest [role="option"] a {
    display: block;
    padding: 0.4rem 0.55rem;
    border-radius: 0.35rem;
    text-decoration: none;
    color: inherit;
}

.n64-suggest [role="option"].aktiv a,
.n64-suggest [role="option"] a:hover,
.n64-suggest [role="option"] a:focus-visible {
    background-color: rgba(var(--n64-accent-rgb), 0.12);
}

.n64-suggest-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.n64-suggest-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.n64-search-hit {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0.2rem 0;
}

.n64-search-hit:hover .n64-suggest-title,
.n64-search-hit:hover {
    color: var(--n64-accent-text);
}

/* Zitierte Originalbeschreibung (28.4). Abgesetzt, damit auf einen Blick
   klar ist: Das ist nicht unser Text, sondern der der Datenbank. */
.n64-quote {
    border-left: 3px solid var(--bs-border-color);
    padding: 0.6rem 0 0.6rem 0.9rem;
    margin: 0;
}

.n64-quote blockquote {
    margin: 0;
    font-size: 0.92rem;
}

/* Einordnung des Compliance-Standes (29.2). Die Farbe folgt derselben
   Semantik wie die Severity-Farben - gruen heisst hier nicht „schoen",
   sondern „nichts Kritisches offen". */
.n64-level-exemplary { color: var(--n64-ok-color, #1f7a4d); }
.n64-level-good      { color: var(--n64-ok-color, #1f7a4d); }
.n64-level-fair      { color: var(--n64-sev-medium-color); }
.n64-level-weak      { color: var(--n64-sev-high-color); }
.n64-level-unknown   { color: var(--n64-sev-info-color); }

/* --- Verdeckte Inhalte (27.4) -----------------------------------------
   **Das ist eine Mattscheibe, kein Schloss.** Das Schloss sitzt auf dem
   Server: plan_blur_text() ersetzt den Text, bevor er das Haus verlaesst -
   im Quelltext steht nur Fuellmaterial. Diese Regeln sorgen nur dafuer,
   dass es auch nach Fuellmaterial aussieht und niemand versucht, es zu
   markieren und zu kopieren. */
.n64-locked {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    color: var(--bs-secondary-color);
}

/* Wer Bewegung reduziert haben will, will auch keine Unschaerfe-Spielerei -
   der Inhalt bleibt trotzdem unlesbar, weil er gar nicht da ist. */
@media (prefers-reduced-motion: reduce) {
    .n64-locked {
        filter: blur(3px);
    }
}

/* Kopier-Knopf am Codeblock (26.1). Der Knopf sitzt IM Block oben rechts;
   der Block bekommt dafuer rechts Platz, damit der Knopf nie auf dem Text
   liegt - auch nicht bei einer langen ersten Zeile. */
.n64-code-wrap {
    position: relative;
}

.n64-code-wrap .n64-code {
    padding-right: 6.5rem;
}

.n64-code-copy {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    opacity: 0.75;
}

.n64-code-copy:hover,
.n64-code-copy:focus-visible {
    opacity: 1;
}

.n64-alert-risk {
    background-color: rgba(var(--n64-accent-rgb), 0.1);
    border: 1px solid rgba(var(--n64-accent-rgb), 0.45);
    color: var(--bs-body-color);
}

.n64-alert-demo {
    background-color: var(--bs-tertiary-bg);
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-body-color);
}

.n64-success-line { color: var(--n64-ok-color); }

.n64-filter-label {
    min-width: 5.5rem;
}

/* Charts brauchen eine feste Hoehe, sonst wachsen sie endlos. */
.n64-chart-box {
    position: relative;
    height: 13rem;
}

/* ---------- 5e. Fehlerseiten ---------- */
.n64-error-code {
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--n64-accent);
    margin-bottom: 0;
}

/* ---------- 6. Fokus & Sprungmarke ---------- */
:focus-visible {
    outline: 2px solid var(--n64-accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--n64-accent);
    color: #0d0f12;
    font-weight: 600;
}

/* ---------- 7. Bewegung reduzieren, wenn gewuenscht ---------- */
@media (prefers-reduced-motion: reduce) {
    .n64-card {
        transition: none;
    }
}

/* ---------- 5f. Team, 2FA und Konto (Kapitel 19.8/19.14) ---------- */

/* QR-Code für die Authenticator-App: Der Code kommt als SVG mit schwarzen
   Modulen. Im Dark-Mode braucht er deshalb eine helle Fläche, sonst ist er
   nicht scanbar. */
.n64-qr {
    display: inline-block;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    line-height: 0;
}

.n64-qr svg {
    display: block;
    width: 190px;
    height: 190px;
}

/* Das Secret zum Abtippen – Ziffernblöcke sollen nicht umbrechen. */
.n64-secret {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    word-break: break-all;
}

/* Code-Eingaben (TOTP, Recovery): gross, monospace, luftig. */
.n64-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
}

.n64-settings-link {
    color: inherit;
    text-decoration: none;
}

.n64-settings-link:hover .fw-semibold {
    color: var(--n64-accent-text);
}

/* Widerrufene API-Keys bleiben sichtbar, treten aber zurück (Kapitel 22.3). */
.n64-row-muted {
    opacity: 0.55;
}

/* ---------- 5g. Glocke mit Alarm-Feed (Kapitel 21.6) ---------- */
.n64-bell-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    padding: 0.15rem 0.3rem;
    border-radius: 1rem;
    background-color: var(--n64-sev-critical-color);
    color: #ffffff;
    font-size: 0.65rem;
    line-height: 1;
}

.n64-bell-menu {
    /* Auf sehr schmalen Bildschirmen darf das Dropdown nicht breiter werden
       als das Fenster – sonst entsteht genau der waagerechte Scrollbalken,
       den Kapitel 8 ausschliesst. min-width steht bei einem Konflikt ueber
       max-width, deshalb ist AUCH die Untergrenze gedeckelt. */
    min-width: min(20rem, calc(100vw - 1.5rem));
    max-width: min(22rem, calc(100vw - 1.5rem));
}

.n64-bell-unseen {
    background-color: rgba(var(--n64-accent-rgb), 0.08);
}

/* ---------- 5h. Betreiber-Bereich (Kapitel 24) ----------
   Deutlich als Betreiber-Sache markiert: Wer hier etwas aendert, aendert es
   fuer alle Konten. Der Marken-Akzent bleibt CTA-Farbe, deshalb hier eine
   neutrale, aber unuebersehbare Auszeichnung. */
.n64-badge-operator {
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--n64-sev-high-color);
    color: var(--n64-sev-high-color);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: lowercase;
}

/* Katalogpflege (24.3): Die Severity-Auswahl steht in einer Tabellenzelle
   neben einem Knopf. Ohne Breitenbegrenzung zieht das Select die Spalte
   auseinander und die Tabelle scrollt schon auf dem Notebook waagerecht. */
.n64-select-narrow {
    max-width: 11rem;
    min-width: 7rem;
}

/* ---------- 5i. Responsive-Feinschliff (Kapitel 8, Phase 10) ----------
   Lange, nicht umbrechbare Zeichenketten – Paketnamen, CVE-Kennungen,
   Key-Praefixe, E-Mail-Adressen – sind der haeufigste Grund fuer einen
   waagerechten Scrollbalken auf schmalen Bildschirmen. Inline-Code darf
   deshalb ueberall umbrechen; Bloecke (.n64-code) scrollen weiterhin in sich
   selbst, weil dort die Zeilenstruktur zum Inhalt gehoert. */
code {
    overflow-wrap: anywhere;
}

/* Tabellenzellen mit freiem Text (Namen, Adressen, Ziele) desgleichen. */
.table td,
.table th {
    overflow-wrap: anywhere;
}

/* Bloecke behalten ihre Zeilenstruktur; nur Inline-Code bricht um. */
.n64-code code {
    overflow-wrap: normal;
}

/* Muster-Widerrufsformular (17.8): als zitierter Block abgesetzt, damit man
   ihn am Stueck erkennt und kopieren kann. */
.n64-withdrawal-form {
    border-left: 3px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.925rem;
}

/* ---------- 5j. Hilfe-Bereich (Kapitel 30) ----------
   Eine Dokumentation wird gelesen, nicht ueberflogen: begrenzte Zeilenlaenge,
   ruhiger Rhythmus zwischen den Abschnitten, Code deutlich abgesetzt. Die
   Navigation steht auf schmalen Bildschirmen ueber dem Text - eine
   Seitenleiste, die man erst wegklicken muss, um lesen zu koennen, hilft
   niemandem. */
.n64-docs-nav {
    font-size: 0.9375rem;
}

.n64-docs-home {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-decoration: none;
}

.n64-docs-group {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.n64-docs-link {
    border-left: 2px solid transparent;
    color: var(--bs-body-color);
    display: block;
    padding: 0.25rem 0 0.25rem 0.75rem;
    text-decoration: none;
}

.n64-docs-link:hover {
    border-left-color: var(--bs-border-color);
    color: var(--n64-accent-text);
}

.n64-docs-link.active {
    border-left-color: var(--n64-accent-text);
    color: var(--n64-accent-text);
    font-weight: 600;
}

@media (min-width: 992px) {
    .n64-docs-nav,
    .n64-doc-toc {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        position: sticky;
        top: 5rem;
    }
}

/* Der Textkoerper. max-width statt Spaltenbreite allein: Auf sehr breiten
   Schirmen wuerde die mittlere Spalte sonst 120 Zeichen lang. */
.n64-doc {
    max-width: 42rem;
}

.n64-doc h2 {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    margin-top: 2.5rem;
}

.n64-doc h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    margin-top: 1.75rem;
}

.n64-doc p,
.n64-doc ul,
.n64-doc ol {
    line-height: 1.7;
    margin-bottom: 1rem;
}

.n64-doc li {
    margin-bottom: 0.35rem;
}

.n64-doc .n64-code {
    margin-bottom: 1.25rem;
    margin-top: 1rem;
}

.n64-doc-note {
    background-color: var(--bs-tertiary-bg);
    border-left: 3px solid var(--n64-accent-text);
    border-radius: 0 0.375rem 0.375rem 0;
    margin: 1.5rem 0;
    padding: 0.875rem 1rem;
}

.n64-doc-note p:last-child,
.n64-doc-note ul:last-child {
    margin-bottom: 0;
}

.n64-doc-table {
    font-size: 0.9375rem;
}

/* Die Sprungmarke erscheint erst beim Ueberfahren der Ueberschrift - sichtbar
   genug zum Verlinken, leise genug zum Lesen. */
.n64-anchor {
    color: var(--bs-secondary-color);
    opacity: 0;
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
}

.n64-doc h2:hover .n64-anchor,
.n64-doc h3:hover .n64-anchor,
.n64-anchor:focus {
    opacity: 1;
}

.n64-doc-pager-link {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
}

.n64-doc-pager-link:hover {
    border-color: var(--n64-accent-text);
}

.n64-docs-search {
    max-width: 34rem;
}

/* =======================================================================
   Die interaktive Sonar-Karte (Phase 55)
   =======================================================================

   Die Farben stehen als Variablen, weil das Skript sie liest: Helles und
   dunkles Thema kommen so ohne zweite Farbtabelle im JavaScript aus.

   Orange Sonden, blaue Anker - ausdruecklich so gewuenscht. Die beiden gehen
   auch bei Rot-Gruen-Schwaeche auseinander (Orange und Blau unterscheiden sich
   in der Helligkeit, nicht nur im Farbton). */
.n64-karte {
    --n64-map-sea: #eef1f5;
    --n64-map-land: #d3d9e2;
    --n64-map-border: #ffffff;
    --n64-map-probe: #f59c1a;
    --n64-map-anchor: #2f7fe0;
    --n64-map-idle: #98a2b3;
    --n64-map-label: #1a2230;
    --n64-map-label-bg: rgba(255, 255, 255, .88);

    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--n64-map-sea);
    aspect-ratio: 720 / 284;
    min-height: 320px;
}

/* **22.08.2026: Zwei Regeln, keine traf je zu.** Beide fragten nach
   `[data-theme]` - dieses Attribut setzt die Anwendung nirgends, sie setzt
   `data-bs-theme` (Kapitel 7). Die erste Regel steckte zusaetzlich in einer
   `prefers-color-scheme`-Abfrage, die hier nichts zu suchen hat:
   `theme_attribute()` rendert `data-bs-theme` serverseitig immer schon als
   konkretes "light" oder "dark" (bei "auto" per Vorgabe dunkel, das
   Inline-Skript im Kopf korrigiert vor dem ersten Bild auf die
   Systemvorliebe) - wenn die Karte erscheint, steht die Entscheidung schon
   fest. Ergebnis des Fehlers: Die Karte folgte ausschliesslich der
   Systemeinstellung und ignorierte die im Dashboard getroffene Wahl -
   stellte jemand von Hand auf hell um, blieb die Karte dunkel, und
   umgekehrt. Dieselbe Regel wie ueberall sonst im Stylesheet. */
[data-bs-theme="dark"] .n64-karte {
    --n64-map-sea: #0b1220;
    --n64-map-land: #243044;
    --n64-map-border: #38455c;
    --n64-map-anchor: #4a9eff;
    --n64-map-idle: #6b7684;
    --n64-map-label: #e8ecf3;
    --n64-map-label-bg: rgba(11, 18, 32, .85);
}

/* Vor dem Umschalten liegt das Standbild oben, die Leinwand ist unsichtbar.
   Erst wenn das Skript die Daten hat, drehen sich die beiden um - geht etwas
   schief, bleibt es beim Standbild. */
.n64-karte-flaeche,
.n64-karte-werkzeug,
.n64-karte-tafel,
.n64-karte-legende {
    display: none;
}

.n64-karte-standbild {
    padding: .75rem;
}

.n64-karte-standbild svg {
    width: 100%;
    height: auto;
    display: block;
}

.n64-karte-bereit .n64-karte-standbild {
    display: none;
}

.n64-karte-bereit .n64-karte-flaeche {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.n64-karte-bereit .n64-karte-werkzeug,
.n64-karte-bereit .n64-karte-legende {
    display: flex;
}

.n64-karte-bereit .n64-karte-tafel:not([hidden]) {
    display: block;
}

/* --- Overlay-Bedienung -------------------------------------------------
   Halbtransparent und mit Weichzeichner dahinter: Die Karte soll durchscheinen,
   sonst schneidet die Leiste ein Loch ins Bild. */
.n64-karte-werkzeug {
    position: absolute;
    top: .6rem;
    z-index: 2;
    gap: .4rem;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 1.2rem);
}

.n64-karte-werkzeug-links {
    left: .6rem;
}

.n64-karte-werkzeug-rechts {
    right: .6rem;
    align-items: flex-end;
    flex-direction: row;
}

.n64-karte-gruppe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .3rem .45rem;
    border-radius: .5rem;
    background: var(--n64-map-label-bg);
    backdrop-filter: blur(6px);
    max-width: 100%;
}

.n64-karte-beschriftung {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    color: var(--n64-map-label);
    margin-right: .2rem;
}

.n64-karte-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .2rem .5rem;
    border: 1px solid transparent;
    border-radius: .35rem;
    background: transparent;
    color: var(--n64-map-label);
    font-size: .8rem;
    line-height: 1.4;
    text-decoration: none;
}

.n64-karte-werkzeug-rechts .n64-karte-knopf {
    background: var(--n64-map-label-bg);
    backdrop-filter: blur(6px);
    min-width: 2.2rem;
    min-height: 2.2rem;
}

.n64-karte-knopf:hover,
.n64-karte-knopf:focus-visible {
    border-color: currentColor;
    color: var(--n64-map-label);
}

.n64-karte-knopf.active {
    background: rgba(var(--n64-accent-rgb), .22);
    border-color: rgba(var(--n64-accent-rgb), .5);
    font-weight: 600;
}

/* --- Die Tafel zur gewaehlten Sonde ------------------------------------ */
.n64-karte-tafel {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 2;
    width: min(19rem, calc(100% - 1.2rem));
    max-height: min(60%, 22rem);
    overflow-y: auto;
    padding: .7rem .85rem;
    border-radius: .5rem;
    background: var(--n64-map-label-bg);
    backdrop-filter: blur(6px);
    color: var(--n64-map-label);
    font-size: .85rem;
}

.n64-karte-name {
    font-weight: 600;
    margin: 0 0 .15rem;
}

.n64-karte-meta {
    margin: 0 0 .3rem;
    opacity: .75;
    font-size: .78rem;
}

.n64-karte-titel {
    margin: .6rem 0 .25rem;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}

.n64-karte-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
}

.n64-karte-liste li {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    padding: .18rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, .18);
}

.n64-karte-liste em {
    font-style: normal;
    opacity: .6;
}

/* --- Legende ----------------------------------------------------------- */
.n64-karte-legende {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    z-index: 2;
    gap: .8rem;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: .5rem;
    background: var(--n64-map-label-bg);
    backdrop-filter: blur(6px);
    color: var(--n64-map-label);
    font-size: .75rem;
}

.n64-karte-punkt {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: baseline;
}

.n64-karte-punkt-sonde { background: var(--n64-map-probe); }
.n64-karte-punkt-anker { background: var(--n64-map-anchor); }
.n64-karte-punkt-still { background: var(--n64-map-idle); }

/* --- Vollbild (55.1) ---------------------------------------------------
   Die Fullscreen-API gibt dem Element den ganzen Bildschirm. Das
   Seitenverhaeltnis muss dann weg, sonst blieben oben und unten Balken. */
.n64-karte:fullscreen {
    aspect-ratio: auto;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* --- Modul-Symbole an der Geraetekachel (57.1) -------------------------
   Ein Geraet kann an der Sicherheitspruefung teilnehmen, am Messnetz, an
   beidem oder an keinem von beidem. Zwei Symbole sagen das auf einen Blick,
   wo vier Woerter keinen Platz haetten.

   **Ein abgeschaltetes Modul verschwindet nicht, es wird blass.** Waere es
   weg, saehe ein Geraet ohne Sicherheitspruefung wieder aus wie jedes andere
   - genau der Zustand, den Phase 43 abgestellt hat. Blass heisst: Es gibt
   dieses Modul, und hier ist es aus.

   Die Farbe kommt aus `--n64-accent-ink`, nicht aus `--n64-accent`: Das
   Orange ist als Textfarbe im hellen Modus nicht AA-tauglich (siehe Kopf
   dieser Datei), und ein Symbol ist Text. */
.n64-modul-icons        { line-height: 1; }
.n64-modul-icons i      { font-size: 1.05rem; line-height: 1; }
.n64-modul-icons i.small { font-size: .9rem; }
/* **Aktiv ist gruen, nicht orange** (58.2). Orange ist in diesem Werkzeug
   die Akzentfarbe fuer „hier ist etwas zu tun"; ein laufendes Modul ist das
   Gegenteil davon. Gruen sagt: laeuft. */
.n64-modul-an           { color: var(--n64-ok-color, #1f7a4d); }
.n64-modul-aus          { color: var(--n64-sev-info-color); opacity: .45; }
.n64-modul-anker        { color: var(--n64-accent-ink); }

[data-bs-theme="dark"] .n64-modul-an    { color: #46c98b; }
[data-bs-theme="dark"] .n64-modul-anker { color: var(--n64-accent); }

/* **Die Sonde pulsiert, solange sie misst** (58.2). Sie ist das einzige
   Modul, das dauernd etwas TUT - die Sicherheitspruefung laeuft alle paar
   Minuten, das Messnetz staendig. Ein ruhiger Puls sagt genau das.

   **Abschaltbar, und zwar vom Betriebssystem aus.** Wer weniger Bewegung
   eingestellt hat, bekommt keine - Schmuck, der sich nicht abstellen laesst,
   ist kein Schmuck mehr (dieselbe Regel wie beim wandernden Punkt auf der
   Sonar-Karte, 50.3). */
@keyframes n64-sonde-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.n64-modul-puls { animation: n64-sonde-puls 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .n64-modul-puls { animation: none; }
}

/* --- Ein Geraet ohne jedes Modul (57.1) --------------------------------
   Es meldet sich, es ist da, und es tut nichts. Das ist kein Fehler und
   auch kein Normalzustand - es ist ein Zustand, der eine Entscheidung
   braucht. Deshalb bekommt die Karte einen ruhigen Hinweis statt einer
   leeren Flaeche, wo sonst Befunde stehen. */
.n64-karte-stumm .card-body { background: var(--bs-tertiary-bg); }


/* --- Zustandsrahmen an der Geraetekachel (58.3) ------------------------
   Der Filter „alle / verbunden / wartet / abgeschaltet" ist entfallen: Bei
   einer Handvoll Geraeten ist Filtern mehr Arbeit als Hinsehen, und bei
   vielen sortiert man in der Tabelle. An seine Stelle tritt die Farbe des
   Rahmens - sie sagt dasselbe, ohne dass man etwas anklicken muss.

   **Nur die Ausnahmen bekommen eine Farbe.** Ein Geraet, das laeuft, sieht
   aus wie bisher; faerbte man auch das ein, waeren wieder alle Kacheln bunt
   und keine faellt auf. */
.n64-karte-wartet   { border-left: 4px solid var(--n64-sev-medium-color); }
.n64-karte-inaktiv  { border-left: 4px solid var(--n64-sev-info-color); }
.n64-karte-abgeschaltet { border-left: 4px solid var(--bs-secondary-color); opacity: .85; }

/* Die Legende unten auf der Geraeteseite. */
.n64-legende { border-top: 1px solid var(--bs-border-color); }
.n64-legende .n64-bubble {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    vertical-align: -1px;
}
.n64-bubble-wartet       { background: var(--n64-sev-medium-color); }
.n64-bubble-inaktiv      { background: var(--n64-sev-info-color); }
.n64-bubble-abgeschaltet { background: var(--bs-secondary-color); }

/* --- Fortschrittsbalken ohne Inline-Stil (58.10) -----------------------
   **Warum das sein muss.** Die Inhaltssicherheitsrichtlinie erlaubt
   `style-src 'self'` und ausdruecklich KEIN `'unsafe-inline'` (28.2). Ein
   `style="width: 73%"` am Balken wird vom Browser verworfen - der Balken
   stand deshalb ueberall auf seiner Grundbreite, und zwar seit es ihn gibt.
   Aufgefallen ist es am 19.08.2026 an der Compliance-Seite; betroffen waren
   vier Stellen (Fuellstaende, Messwerte, Sonar-Abzeichen, Compliance).

   **Und die Farbe sagt jetzt dasselbe wie die Laenge.** Von Rot bei 0 % zu
   Gruen bei 100 %, in Schritten von 5 %. Der Farbton laeuft linear von 0 nach
   120 Grad - dieselbe Zahl in zwei Formen, damit man den Stand auch aus dem
   Augenwinkel sieht.

   Erzeugt in 21 Stufen statt in 101: Feiner braucht es niemand, und die Datei
   bleibt lesbar. */
.n64-bar-0 { width: 0%; background-color: hsl(0, 62%, 38%); }
.n64-bar-5 { width: 5%; background-color: hsl(6, 62%, 38%); }
.n64-bar-10 { width: 10%; background-color: hsl(12, 62%, 38%); }
.n64-bar-15 { width: 15%; background-color: hsl(18, 62%, 38%); }
.n64-bar-20 { width: 20%; background-color: hsl(24, 62%, 38%); }
.n64-bar-25 { width: 25%; background-color: hsl(30, 62%, 38%); }
.n64-bar-30 { width: 30%; background-color: hsl(36, 62%, 38%); }
.n64-bar-35 { width: 35%; background-color: hsl(42, 62%, 38%); }
.n64-bar-40 { width: 40%; background-color: hsl(48, 62%, 38%); }
.n64-bar-45 { width: 45%; background-color: hsl(54, 62%, 38%); }
.n64-bar-50 { width: 50%; background-color: hsl(60, 62%, 38%); }
.n64-bar-55 { width: 55%; background-color: hsl(66, 62%, 38%); }
.n64-bar-60 { width: 60%; background-color: hsl(72, 62%, 38%); }
.n64-bar-65 { width: 65%; background-color: hsl(78, 62%, 38%); }
.n64-bar-70 { width: 70%; background-color: hsl(84, 62%, 38%); }
.n64-bar-75 { width: 75%; background-color: hsl(90, 62%, 38%); }
.n64-bar-80 { width: 80%; background-color: hsl(96, 62%, 38%); }
.n64-bar-85 { width: 85%; background-color: hsl(102, 62%, 38%); }
.n64-bar-90 { width: 90%; background-color: hsl(108, 62%, 38%); }
.n64-bar-95 { width: 95%; background-color: hsl(114, 62%, 38%); }
.n64-bar-100 { width: 100%; background-color: hsl(120, 62%, 38%); }

[data-bs-theme="dark"] .progress-bar[class*="n64-bar-"] { filter: brightness(1.25); }

/* Ein Balken bei 0 % waere unsichtbar - ein Haarstrich zeigt, dass es ihn
   gibt und dass er leer ist. Das ist ein Unterschied zu „keine Daten". */
.n64-bar-0 { width: 2px; }

/* Fuellstaende tragen ihre Farbe aus der Schwelle, nicht aus dem Verlauf:
   Bei einem Fuellstand ist VIEL schlecht und nicht gut (58.10). Deshalb hier
   nur die Breite. */
.n64-fuell-0 { width: 0%; }
.n64-fuell-5 { width: 5%; }
.n64-fuell-10 { width: 10%; }
.n64-fuell-15 { width: 15%; }
.n64-fuell-20 { width: 20%; }
.n64-fuell-25 { width: 25%; }
.n64-fuell-30 { width: 30%; }
.n64-fuell-35 { width: 35%; }
.n64-fuell-40 { width: 40%; }
.n64-fuell-45 { width: 45%; }
.n64-fuell-50 { width: 50%; }
.n64-fuell-55 { width: 55%; }
.n64-fuell-60 { width: 60%; }
.n64-fuell-65 { width: 65%; }
.n64-fuell-70 { width: 70%; }
.n64-fuell-75 { width: 75%; }
.n64-fuell-80 { width: 80%; }
.n64-fuell-85 { width: 85%; }
.n64-fuell-90 { width: 90%; }
.n64-fuell-95 { width: 95%; }
.n64-fuell-100 { width: 100%; }
.n64-fuell-0 { width: 2px; }

.n64-progress-schmal { height: .4rem; }

/* --- Der gruene Haken am Erledigten (58.11) ---------------------------
   Gruen wie „bestanden" anderswo im Werkzeug, nicht wie die Akzentfarbe:
   Es ist eine Aussage ueber den Zustand, keine Aufforderung. */
.n64-erledigt-haken { color: var(--n64-ok-color, #1f7a4d); }

/* --- Kleine Hilfsklassen statt Inline-Stilen (58.10) -------------------
   Die Inhaltssicherheitsrichtlinie erlaubt `style-src 'self'` und kein
   `'unsafe-inline'` (28.2) - jedes `style="…"` im Markup verwirft der
   Browser kommentarlos. Bei einem Fortschrittsbalken faellt das auf; bei
   `tabular-nums` merkt es niemand, und die Ziffern springen einfach.

   **Die Vorlagen fuer E-Mails sind ausgenommen.** Dort sind Inline-Stile
   nicht nur erlaubt, sondern noetig: Mailprogramme werfen Stilbloecke weg,
   und eine Richtlinie fuer Webseiten gilt fuer eine Mail ohnehin nicht. */
.n64-ziffern      { font-variant-numeric: tabular-nums; }
.n64-progress-duenn { height: .5rem; }
.n64-mw-25        { min-width: 2.5rem; }
.n64-mw-50        { min-width: 5rem; }
.n64-mw-90        { min-width: 9rem; }
.n64-maxw-28      { max-width: 28rem; }

/* Aufklappbare Themenkarte (Phase 87).

   Die Geraeteseite hatte fuer jedes Thema eine eigene Bauform. Jetzt ist es
   ueberall dieselbe Karte: zugeklappt eine Zeile mit Zustand und Antwort,
   aufgeklappt alles, was vorher auf einer eigenen Seite stand.

   Der Browser malt vor `<summary>` ein Dreieck. Es steht an der falschen
   Stelle (ganz links, vor dem Zustandssymbol) und sagt dasselbe wie der
   Pfeil rechts - also weg damit, in beiden Schreibweisen. */
.n64-thema > summary {
    cursor: pointer;
    list-style: none;
}

.n64-thema > summary::-webkit-details-marker {
    display: none;
}

/* Die Karte hat als `<details>` keinen eigenen Innenabstand mehr - die beiden
   `card-body` darin bringen ihn mit. */
.n64-thema > summary:hover .n64-thema-mehr {
    text-decoration: underline;
}

/* Der Pfeil dreht sich beim Aufklappen. Das ist die einzige Bewegung auf der
   Seite, und wer Bewegung abgeschaltet hat, bekommt sie nicht. */
.n64-thema-pfeil {
    transition: transform 0.15s ease;
}

.n64-thema[open] > summary .n64-thema-pfeil {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .n64-thema-pfeil {
        transition: none;
    }
}

/* Tastaturbedienung sichtbar machen: `<summary>` bekommt den Fokusring der
   Karte, nicht einen um die Textzeile darin. */
.n64-thema > summary:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: inherit;
}

/* Karten IN einer Themenkarte (Phase 87).

   Die Teilstuecke bringen ihre eigenen Karten mit - sie standen frueher als
   eigene Seiten da. Zwei Rahmen ineinander sehen aus wie ein Fehler, also
   verliert der innere seinen Rahmen und seinen Schatten. Der aeussere haelt
   die Karte zusammen, die inneren nur noch die Abstaende. */
.n64-thema .card {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.n64-thema .card > .card-body {
    padding-left: 0;
    padding-right: 0;
}

/* Der zweite `card-body` der Themenkarte selbst ist davon ausgenommen - er
   traegt den Innenabstand des aufgeklappten Teils. */
.n64-thema > .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Der Verlässlichkeitsbalken in der Merkmalstabelle (Phase 88).

   **Er hatte gar keine Regel** und stand damit auf Bootstrap-Vorgabe: volle
   Breite, 1rem hoch. In einer Tabellenspalte neben einer Zahl ist das ein
   Balken, der die Spalte sprengt. Und er war ausserdem immer leer - die Breite
   kam aus einem `style`-Attribut, und die Inhaltssicherheitsrichtlinie
   verwirft Inline-Styles. Die Breite kommt jetzt aus `.n64-bar-*`. */
.n64-konfidenz {
    width: 5rem;
    height: 0.5rem;
}

/* Eine Zeile auf der oeffentlichen Timbre-Seite, die nicht ueber die halbe
   Seite laufen soll. Stand als `style="max-width: 28rem"` da - und wurde aus
   demselben Grund verworfen wie der Balken oben. */
.n64-timbre-zeile {
    max-width: 28rem;
}

/* Der einklappbare Filterkasten der Karte (Phase 93).

   Er ist ein Werkzeug, kein Rahmen: Auf einem schmalen Bildschirm nahm er die
   halbe Karte ein, und wer nur schauen will, will schauen. Zugeklappt bleibt
   ein Knopf mit der Zahl der greifenden Filter - sonst wuesste niemand, warum
   die Karte leer ist. */
.n64-karte-filter > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.n64-karte-filter > summary::-webkit-details-marker {
    display: none;
}

/* Die Zahl der greifenden Filter - klein, aber nicht zu uebersehen. */
.n64-karte-filter-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .25rem;
    border-radius: .6rem;
    background: var(--n64-accent, #f59c1a);
    color: #0d0f12;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Zugeklappt soll der Kasten nicht mehr Platz belegen als sein Knopf. */
.n64-karte-filter:not([open]) {
    display: inline-block;
    width: auto;
}

/* --- 93.4: Der Laufzeitverlauf einer Ping-Messreihe -----------------------
   Balken aus Klassen, nicht aus `style`: Die Sicherheitsrichtlinie erlaubt
   `style-src 'self'`, und ein eingebettetes `style="width:…"` wird
   stillschweigend verworfen. Das ist in diesem Projekt schon zweimal
   passiert - zuletzt bei den Timbre-Balken in Phase 87.

   Die Hoehe kommt hier von `n64-bar-*` (dieselben Stufen wie ueberall,
   Fuenferschritte), gedreht: Beim Fortschrittsbalken ist es die Breite,
   hier die Hoehe. Deshalb `align-items: flex-end` - ein Balken waechst von
   unten. */
.n64-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 3rem;
    padding: 0.125rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
}

.n64-spark {
    display: block;
    flex: 0 0 3px;
    min-height: 1px;
    border-radius: 1px;
}

.n64-spark.n64-bar-0   { height:   2%; }
.n64-spark.n64-bar-5   { height:   5%; }
.n64-spark.n64-bar-10  { height:  10%; }
.n64-spark.n64-bar-15  { height:  15%; }
.n64-spark.n64-bar-20  { height:  20%; }
.n64-spark.n64-bar-25  { height:  25%; }
.n64-spark.n64-bar-30  { height:  30%; }
.n64-spark.n64-bar-35  { height:  35%; }
.n64-spark.n64-bar-40  { height:  40%; }
.n64-spark.n64-bar-45  { height:  45%; }
.n64-spark.n64-bar-50  { height:  50%; }
.n64-spark.n64-bar-55  { height:  55%; }
.n64-spark.n64-bar-60  { height:  60%; }
.n64-spark.n64-bar-65  { height:  65%; }
.n64-spark.n64-bar-70  { height:  70%; }
.n64-spark.n64-bar-75  { height:  75%; }
.n64-spark.n64-bar-80  { height:  80%; }
.n64-spark.n64-bar-85  { height:  85%; }
.n64-spark.n64-bar-90  { height:  90%; }
.n64-spark.n64-bar-95  { height:  95%; }
.n64-spark.n64-bar-100 { height: 100%; }

.n64-spark-ok      { background: var(--bs-primary); }
.n64-spark-verlust { background: var(--bs-warning); }

/* **Ein Ausfall ist keine Null-Laufzeit.** Er bekommt volle Hoehe in der
   Warnfarbe - ein niedriger Balken saehe aus wie eine blitzschnelle
   Antwort, und das ist das Gegenteil dessen, was passiert ist. */
.n64-spark-aus {
    height: 100% !important;
    background: repeating-linear-gradient(
        45deg,
        var(--bs-danger) 0 2px,
        transparent 2px 4px
    );
}

/* Ein Sprung, den es beim vorigen Lauf so nicht gab. */
.n64-hop-wechsel {
    border-left: 3px solid var(--bs-warning);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}