/* Cambium Pulse — Oberfläche im cambium-Design.
   Palette, Typografie und Abstände nach Brand Manual. Monochrom, Radius 3px,
   Weißraum vor Vollständigkeit. Farbe erscheint ausschließlich als Datensignal
   (Severity, Erreichbarkeit) und nie als Dekoration. */

@import url("fonts.css");

:root {
    --black: #000000;
    --white: #FFFFFF;
    --near-black: #0E0E0E;
    --deep-grey: #171717;
    --dark-grey: #383838;
    --mid-grey: #757575;
    --border-grey: #D8D8D8;
    --light-grey: #F4F4F4;
    --off-white: #FAF9F7;

    --font-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

    --radius: 3px;
    --gap: 80px;
    --page-margin: 60px;
    --max-content-width: 1180px;

    /* Datensignale. Kräftig, damit ein Befund auf einen Blick auffällt — aber
       nur als Datensignal, nie als Dekoration. Zwei Stufen je Farbe: die
       kräftige für Punkt, Rand und Fläche (WCAG 1.4.11, mindestens 3:1 auf
       Weiß), die dunkle für Text (mindestens 4,5:1). Rot und Grau erreichen
       beides mit einem Wert. LeitplankenTest rechnet beide nach. */
    --sig-kritisch: #DC2626;
    --sig-hoch: #EA580C;
    --sig-mittel: #D97706;
    --sig-niedrig: #64748B;
    --sig-ok: #16A34A;

    --sig-kritisch-text: #DC2626;
    --sig-hoch-text: #C2410C;
    --sig-mittel-text: #B45309;
    --sig-niedrig-text: #64748B;
    --sig-ok-text: #15803D;

    /* Hauchflächen hinter einem schweren Befund, nur im Zustandsstreifen. */
    --sig-kritisch-flaeche: #FEF2F2;
    --sig-hoch-flaeche: #FFF7ED;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--off-white);
    color: var(--dark-grey);
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--near-black);
    margin: 0 0 12px;
}

h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--near-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--mid-grey);
}

p {
    margin: 0 0 16px;
}

code, kbd, samp {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--light-grey);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 1px 5px;
}

/* ---------- Kopfzeile ---------- */

.topbar {
    background: var(--black);
    color: var(--white);
    border-bottom: 1px solid var(--black);
}

.topbar-inner {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 18px var(--page-margin);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.wortmarke {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--white);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/*
 * Die Wortmarke als Originaldatei, weiß auf Schwarz. Die Höhe steuert die
 * Größe, die Breite ergibt sich — das Seitenverhältnis der Datei bleibt damit
 * unangetastet. Verzerren wäre laut Brand Manual verboten, und eine feste
 * Breite tut nichts anderes.
 */
.wortmarke-logo {
    height: 22px;
    width: auto;
    display: block;
}

.wortmarke:hover {
    color: var(--white);
}

.wortmarke .produkt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--border-grey);
    border-left: 1px solid #383838;
    padding-left: 10px;
}

.topbar-meta {
    font-size: 12px;
    color: var(--border-grey);
    display: flex;
    align-items: center;
    gap: 18px;
}

.topbar-meta a {
    color: var(--border-grey);
}

.topbar-meta a:hover {
    color: var(--white);
}

.topbar-meta form {
    margin: 0;
}

/* ---------- Navigation ---------- */

.hauptnav {
    background: var(--white);
    border-bottom: 1px solid var(--border-grey);
}

.hauptnav ul {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--page-margin);
    list-style: none;
    display: flex;
    gap: 28px;
}

.hauptnav a {
    display: block;
    padding: 14px 0;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid-grey);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.hauptnav a:hover {
    color: var(--near-black);
}

.hauptnav a[aria-current="page"] {
    color: var(--near-black);
    border-bottom-color: var(--near-black);
}

/* ---------- Rumpf ---------- */

.inhalt {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 56px var(--page-margin) var(--gap);
}

.seitenkopf {
    margin-bottom: 40px;
}

.seitenkopf p {
    color: var(--mid-grey);
    margin: 0;
    max-width: 68ch;
}

.section-label {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid-grey);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-grey);
}

/* ---------- Karten und Kennzahlen ---------- */

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.card {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 24px;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(14, 14, 14, 0.04), 0 4px 16px rgba(14, 14, 14, 0.03);
}

.card-label {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid-grey);
    margin-bottom: 8px;
}

.metrics-row {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 1px 2px rgba(14, 14, 14, 0.04), 0 4px 16px rgba(14, 14, 14, 0.03);
}

.metric {
    flex: 1 1 180px;
    padding: 20px 24px;
    border-right: 1px solid var(--border-grey);
}

.metric:last-child {
    border-right: 0;
}

.metric-value {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--near-black);
    line-height: 1.2;
}

.metric-label {
    font-size: 12px;
    color: var(--mid-grey);
    margin-top: 4px;
}

.infobox {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 18px 22px;
    background: var(--off-white);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.infobox .zeichen {
    font-size: 16px;
    line-height: 1.6;
    color: var(--mid-grey);
}

.infobox p:last-child {
    margin-bottom: 0;
}

/* ---------- Tabellen ---------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--white);
}

.data-table th {
    background: var(--light-grey);
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid-grey);
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-grey);
}

.data-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-grey);
    color: var(--dark-grey);
}

.data-table tbody tr {
    transition: background-color 0.12s ease;
}

.data-table tbody tr:hover {
    background: var(--off-white);
}

.tabellen-huelle {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    overflow-x: auto;
}

.tabellen-huelle .data-table td:last-child,
.tabellen-huelle .data-table th:last-child {
    border-right: 0;
}

/* ---------- Formulare ---------- */

.formular {
    max-width: 420px;
}

.feld {
    margin-bottom: 20px;
}

.feld label {
    display: block;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid-grey);
    margin-bottom: 6px;
}

/* Checkboxen und Radioknöpfe sind ausgenommen: mit voller Breite, Rahmen und
   Innenabstand wurden sie zu einem breiten Kasten mit dem Häkchen in der Mitte. */
.feld input:not([type="checkbox"]):not([type="radio"]),
.feld select,
.feld textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--near-black);
    background: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 11px 13px;
}

.feld textarea {
    resize: vertical;
    line-height: 1.5;
}

.feld input:not([type="checkbox"]):not([type="radio"]):focus,
.feld select:focus,
.feld textarea:focus {
    outline: none;
    border-color: var(--near-black);
    box-shadow: inset 0 0 0 1px var(--near-black);
}

/* Unter einer Feldzeile steht ein Hinweis für sich und braucht Luft zum Folgenden. */
.formularzeile + p.hinweis,
.feld + p.hinweis {
    margin: -8px 0 20px;
}

/* Eine Beschriftung, die ein Häkchen umschließt, ist ein Satz und kein
   Feldtitel: normale Schrift, Häkchen links davor. */
.feld label:has(> input[type="checkbox"]),
.feld label:has(> input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--near-black);
    line-height: 1.5;
    cursor: pointer;
}

.feld label > input[type="checkbox"],
.feld label > input[type="radio"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    accent-color: var(--near-black);
}

/* Auch außerhalb eines Feldes, etwa unter einer Feldzeile. `div.meldung.hinweis`
   ist ein Meldungskasten und bleibt davon unberührt. */
.feld .hinweis,
p.hinweis {
    font-size: 12px;
    color: var(--mid-grey);
    margin: 6px 0 0;
}

.feld input.code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 24px;
    letter-spacing: 0.4em;
    text-align: center;
    padding: 14px 13px;
}

.knopf {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--near-black);
    border: 1px solid var(--near-black);
    border-radius: var(--radius);
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
}

.knopf:hover {
    background: var(--dark-grey);
    border-color: var(--dark-grey);
    color: var(--white);
}

/*
 * Ein gesperrter Knopf muss gesperrt aussehen. Ohne diese Regel steht der
 * Abschluss des Wartungslaufs schwarz und einladend da, während er nichts tut —
 * und der Nutzer klickt zweimal, bevor er den Satz daneben liest.
 */
.knopf:disabled,
.knopf[disabled] {
    background: var(--light-grey);
    border-color: var(--border-grey);
    color: var(--mid-grey);
    cursor: not-allowed;
}

.knopf:disabled:hover,
.knopf[disabled]:hover {
    background: var(--light-grey);
    border-color: var(--border-grey);
    color: var(--mid-grey);
}

.knopf.sekundaer {
    background: transparent;
    color: var(--near-black);
    border-color: var(--border-grey);
}

.knopf.sekundaer:hover {
    background: var(--light-grey);
    color: var(--near-black);
}

/*
 * Der schlichte Knopf: eine Aktion, die sich wie ein Link liest — in
 * Aktionsspalten, Filterleisten und der Blätterung.
 *
 * Die Vorgabe gilt hellem Grund, denn dort steht er zwanzigmal; auf dem
 * schwarzen Balken genau einmal. Bis 1.5.0 war es umgekehrt: die Klasse trug
 * das Grau der Kopfzeile, und in jeder Tabelle stand #D8D8D8 auf Weiß — ein
 * Kontrast von 1,43:1. Das ist nicht „dezent", das ist unlesbar; WCAG AA
 * verlangt 4,5:1. Wer wusste, dass dort etwas steht, hat es gefunden.
 */
.knopf.schlicht {
    background: none;
    border: 0;
    padding: 0;
    color: var(--near-black);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.knopf.schlicht:hover {
    background: none;
    color: var(--mid-grey);
}

/*
 * Auf dem schwarzen Balken andersherum, und ohne eigene Klasse im Markup: die
 * Kopfzeile ist die einzige dunkle Fläche im Dashboard, also darf sie das
 * selbst wissen. Eine Klasse, die jemand vergessen kann, ist genau die Art
 * Fehler, die hier gerade behoben wird.
 */
.topbar-meta .knopf.schlicht {
    color: var(--border-grey);
}

.topbar-meta .knopf.schlicht:hover {
    color: var(--white);
}

/*
 * Was einen Datensatz endgültig entfernt, trägt seine Wirkung im Zeigefinger:
 * beim Überfahren rot. Nicht dauerhaft rot — dann wäre die gefährlichste
 * Aktion die auffälligste auf der Seite, und Farbe ist hier Datensignal, keine
 * Dekoration.
 */
.knopf.schlicht.gefahr:hover,
.knopf.schlicht.gefahr:focus-visible {
    color: var(--sig-kritisch-text);
}

/*
 * Sichtbarer Fokus für die Tastatur. `currentColor` deshalb, weil dieselbe
 * Regel auf dem schwarzen Balken und auf Weiß gelten muss — ein fester Wert
 * wäre auf einer der beiden Flächen unsichtbar.
 */
.knopf:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 1px;
}

/* ---------- Meldungen ---------- */

.meldungen {
    margin-bottom: 28px;
    display: grid;
    gap: 10px;
}

.meldung {
    border: 1px solid var(--border-grey);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--white);
    padding: 12px 16px;
    font-size: 14px;
}

.meldung.erfolg {
    border-left-color: var(--sig-ok);
}

.meldung.fehler {
    border-left-color: var(--sig-kritisch);
}

.meldung.hinweis {
    border-left-color: var(--mid-grey);
}

/* ---------- Severity-Signale ---------- */

.signal {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark-grey);
    white-space: nowrap;
}

.signal::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mid-grey);
    flex: none;
}

.signal.kritisch::before { background: var(--sig-kritisch); }
.signal.hoch::before     { background: var(--sig-hoch); }
.signal.mittel::before   { background: var(--sig-mittel); }
.signal.niedrig::before  { background: var(--sig-niedrig); }
.signal.ok::before       { background: var(--sig-ok); }

/* ---------- Anmeldeseite ---------- */

.anmeldung {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--off-white);
}

.anmeldung-kopf {
    background: var(--black);
    padding: 24px var(--page-margin);
}

.anmeldung-rumpf {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 24px;
}

.anmeldung-karte {
    width: 100%;
    max-width: 420px;
}

.anmeldung-karte h1 {
    font-size: 28px;
    margin-bottom: 8px;
}

.anmeldung-karte .einleitung {
    color: var(--mid-grey);
    margin-bottom: 32px;
}

.qr-block {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    background: var(--white);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.qr-block img {
    width: 220px;
    height: 220px;
    display: block;
    margin: 0 auto 14px;
}

.geheimnis {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--near-black);
    word-break: break-all;
}

/* ---------- Fußzeile ---------- */

.doc-footer {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 14px var(--page-margin) 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--border-grey);
    font-size: 12px;
    color: var(--mid-grey);
}

.doc-footer a {
    color: var(--mid-grey);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 760px) {
    :root {
        --page-margin: 20px;
        --gap: 48px;
    }

    h1 {
        font-size: 28px;
    }

    .hauptnav ul {
        gap: 18px;
        overflow-x: auto;
    }

    .doc-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Kleintext, Code-Blöcke, Filterleiste ---------- */

.klein {
    font-size: 12px;
    color: var(--mid-grey);
    line-height: 1.5;
}

.snippet {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    background: var(--near-black);
    color: var(--white);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    background: var(--white);
    padding: 18px 20px;
    margin-bottom: 24px;
}

.filterleiste .feld {
    margin-bottom: 0;
    flex: 1 1 150px;
}

.filterleiste .feld input,
.filterleiste .feld select {
    width: 100%;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--near-black);
    background: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 9px 11px;
}

.filterleiste .knoepfe {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.blaetterung {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--mid-grey);
}

.formularzeile {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.formular.breit {
    max-width: none;
}

/* Mehrere kleine Formulare nebeneinander in einer Tabellenzelle — jedes trägt
   sein eigenes CSRF-Feld, deshalb geht das nicht als ein Formular. */
.knopfzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.knopfzeile form {
    margin: 0;
}

/* Ein Einmal-Link ist lang und hat keine Leerzeichen. Ohne diese Klasse
   schiebt er die ganze Seite in die Breite. */
.umbruch {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
}

/* ---------- Diagramme ---------- */

.diagramm {
    position: relative;
    height: 220px;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    background: var(--white);
    padding: 16px 18px;
    margin-bottom: 20px;
}

.diagramm.hoch {
    height: 300px;
}

.diagramm-leer::after {
    content: "Noch keine Messwerte für diesen Zeitraum.";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--mid-grey);
}

.diagramm-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 10px;
}

/* ---------- Sicherheitslücken ---------- */

.luecke {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    background: var(--white);
    padding: 20px 22px;
    margin-bottom: 14px;
}

.luecke-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}

.luecke-titel {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--near-black);
    flex: 1 1 320px;
}

.luecke-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    align-items: baseline;
}

.luecke-status {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 2px 8px;
    color: var(--mid-grey);
}

.luecke-status.offen {
    color: var(--near-black);
    border-color: var(--near-black);
}

.luecke-status.behoben {
    color: var(--sig-ok-text);
    border-color: var(--sig-ok);
}

/* ---------- Changelog ----------
   Eine Seite, die am Stück gelesen wird. Deshalb schmaler als der übrige
   Inhalt: eine Zeile über die volle Breite von 1180 px findet man mit dem Auge
   am Ende nicht mehr zurück. */

.changelog {
    max-width: 72ch;
}

.changelog-fassung {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
}

.changelog-trenner {
    border: 0;
    border-top: 1px solid var(--border-grey);
    margin: 40px 0 0;
}

.changelog-liste {
    margin: 0 0 16px;
    padding-left: 20px;
}

.changelog-liste li {
    margin-bottom: 12px;
}

/* ---------- Abstandshilfen ----------
   Die Content-Security-Policy erlaubt kein style-Attribut, deshalb bekommt jeder
   Abstand eine Klasse statt Inline-CSS. */

.abstand-oben { margin-top: 28px; }
.abstand-unten { margin-bottom: 28px; }
.abstand-oben-gross { margin-top: 56px; }

/* Text, dessen Zeilenumbrüche etwas bedeuten — die Wartungshinweise einer Site
   sind eine Liste, die jemand als Liste geschrieben hat. `pre-line` statt `pre`:
   umgebrochen wird weiter am Rand, sonst liefe eine lange Zeile aus der Karte. */
.mehrzeilig {
    white-space: pre-line;
}

/* Alpine blendet Elemente mit x-cloak bis zur Initialisierung aus. */
[x-cloak] {
    display: none !important;
}

/* ---------- Bericht je Kunde ----------
   Wird gelesen und gedruckt. Beides muss ohne Nacharbeit gut aussehen, denn ein
   Nachweis, der erst in einem Textprogramm zurechtgerückt werden muss, wird
   nicht verschickt. */

.report-kopf {
    border-bottom: 2px solid var(--near-black);
    padding-bottom: 20px;
    margin-bottom: 36px;
}

.report-kopf h1 {
    margin-bottom: 6px;
}

.report-zeitraum {
    color: var(--mid-grey);
    font-size: 14px;
}

.report-block {
    margin-bottom: 44px;
}

.report-site {
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

.report-site h3 {
    margin: 0 0 4px;
}

.report-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px 24px;
    margin: 20px 0 0;
}

.report-fakt .wert {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.report-fakt .bezeichnung {
    color: var(--mid-grey);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.report-hinweis {
    color: var(--mid-grey);
    font-size: 13px;
}

/* Ein einzelner Wartungslauf mit seinem Versionsbericht. Abgesetzt durch eine
   Linie und nicht durch einen Rahmen: im Bericht stehen davon mehrere
   hintereinander, und geschachtelte Kästen werden auf Papier zur Leiter. */
.report-lauf {
    border-top: 1px solid var(--border-grey);
    padding-top: 14px;
    margin-top: 18px;
}

/* Leistungsliste des Pakets im Bericht: kompakt, zweispaltig, wo Platz ist. */
.report-leistungen {
    margin: 6px 0 14px;
    padding-left: 18px;
    columns: 2;
    column-gap: 32px;
}

.report-leistungen li {
    margin-bottom: 3px;
    break-inside: avoid;
}

@media (max-width: 720px) {
    .report-leistungen {
        columns: 1;
    }
}

/* ---------- Druck ----------
   Alles, was auf Papier nichts verloren hat, verschwindet: Navigation,
   Kopfleiste, Formulare, Knöpfe. Übrig bleibt der Bericht. */

@media print {
    .topbar,
    .hauptnav,
    .bereichsnav,
    .verwaltung-nav,
    .sprungleiste,
    .doc-footer,
    .meldungen,
    .filterleiste,
    .knopf,
    .nicht-drucken {
        display: none !important;
    }

    html,
    body {
        background: var(--white);
        color: var(--black);
        font-size: 10.5pt;
    }

    .inhalt {
        max-width: none;
        margin: 0;
        padding: 0;
    }

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

    /* Eine Site gehört zusammen auf eine Seite, solange sie darauf passt. */
    .report-site,
    .report-lauf,
    .report-block {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-block h2 {
        break-after: avoid;
        page-break-after: avoid;
    }

    .data-table {
        font-size: 9pt;
    }

    thead {
        display: table-header-group;
    }

    tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Rahmen bleiben, Flächen nicht: gefüllte Flächen fressen Toner und
       erscheinen je nach Drucker als graue Suppe. */
    .card,
    .report-site,
    .metric {
        background: none;
        border-color: var(--border-grey);
    }
}

/* ---------- Befundliste (automatische Aktualisierung) ---------- */

.befundliste {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.befundliste li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid var(--border-grey);
    font-size: 14px;
    line-height: 1.5;
}

.befundliste li:first-child {
    border-top: 0;
}

.befundliste .signal {
    flex: 0 0 auto;
}

/* ---------- Passkeys ---------- */

/*
 * Der Passkey-Teil der Anmeldung und die Verwaltung teilen sich diesen Block.
 * Er trägt nur Abstand — sichtbar wird der Knopf erst, wenn das Skript
 * festgestellt hat, dass der Browser Passkeys überhaupt kennt. Bis dahin steht
 * er auf hidden, und ein Angebot, das nicht funktioniert, erscheint gar nicht
 * erst.
 */
.passkey-block {
    margin-top: 28px;
}

/*
 * Die Trennung zwischen Passwort und Passkey. Das Wort sitzt auf der Linie,
 * ohne dass ein Element dafür nötig wäre: die Linie entsteht als Rahmen des
 * Absatzes, das Wort deckt sie mit dem Kartenhintergrund ab.
 */
.passkey-oder {
    border-top: 1px solid var(--border-grey);
    margin: 0 0 24px;
    text-align: center;
    line-height: 0;
}

.passkey-oder span {
    background: var(--white);
    padding: 0 12px;
    font-size: 12px;
    color: var(--mid-grey);
    text-transform: lowercase;
}

/* ---------- Wartungs-Cockpit ---------- */

/*
 * Die Aufgabenliste eines Wartungslaufs. Eine Zeile je Aufgabe, Checkbox links,
 * Titel in einem Satz, darunter eine Zeile Kontext.
 *
 * Abgehakte Aufgaben bleiben stehen und rutschen nicht weg. Eine Liste, die
 * sich unter der Hand umsortiert, kostet bei jedem Haken einen Moment der
 * Orientierung — und der Fortschritt steht ohnehin oben als Zahl.
 */
.aufgabe {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    border: 1px solid var(--border-grey);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 10px;
    background: var(--white);
}

.aufgabe.erledigt {
    background: var(--light-grey);
    border-color: var(--light-grey);
}

.aufgabe.erledigt .aufgabe-titel {
    color: var(--mid-grey);
    text-decoration: line-through;
}

.aufgabe input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex: none;
    cursor: pointer;
    accent-color: var(--near-black);
}

.aufgabe-rumpf {
    flex: 1;
    min-width: 0;
}

.aufgabe-titel {
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--near-black);
    cursor: pointer;
    display: block;
}

.aufgabe-kontext {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mid-grey);
    margin-top: 5px;
}

.aufgabe-kontext a {
    color: var(--near-black);
}

/* Die Pflichtmarke. Kein Farbsignal: sie sagt „geht nicht ohne", nicht „Gefahr". */
.aufgabe-pflicht {
    font-family: var(--font-head);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid-grey);
    border: 1px solid var(--border-grey);
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 8px;
    white-space: nowrap;
}

/*
 * Das Paket als Marke in Listen. Monochrom — welches Paket eine Site hat, ist
 * eine Angabe und kein Zustand, und Farbe bleibt in diesem Dashboard dem
 * Datensignal vorbehalten.
 */
/*
 * Nur für Hilfsmittel sichtbar. Ein Auswahlfeld in einer Tabellenspalte trägt
 * seine Überschrift schon in der Kopfzeile — ein Screenreader liest die aber
 * nicht bei jeder Zeile mit, und „Standard (A)" allein sagt dort nichts.
 */
.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Die Klassenauswahl steht in einer Tabelle, nicht in einem .feld — dort wäre
 * sie über die volle Breite gezogen. Deshalb eine eigene, schmale Regel.
 */
.klassenwahl {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--near-black);
    background: var(--white);
    border: 1px solid var(--border-grey);
    border-radius: 4px;
    padding: 5px 8px;
    max-width: 100%;
}

.klassenwahl:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.badge {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark-grey);
    background: var(--light-grey);
    border-radius: 3px;
    padding: 3px 8px;
    white-space: nowrap;
}

.badge.stark {
    color: var(--white);
    background: var(--near-black);
}

/* Der Fortschritt als Zahl, nicht als Balken: „7 von 9" sagt mehr als ein Streifen. */
.fortschritt {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--near-black);
    white-space: nowrap;
}

.lauf-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Die Gruppenüberschrift innerhalb der Aufgabenliste. */
.aufgabe-gruppe {
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid-grey);
    margin: 22px 0 10px;
}

.aufgabe-gruppe:first-child {
    margin-top: 0;
}

/* Die Unternavigation der Wartungsseiten. */

/* =====================================================================
   Auf einen Blick: Zustand, Zähler, Signalkacheln (1.22.0)

   Farbe bleibt Datensignal. Neu ist nur, dass sie dort, wo ein Befund
   steht, deutlich genug ist, um beim Überfliegen aufzufallen — und dass
   sie dort fehlt, wo nichts ist. Grau heißt „nichts zu tun" oder „wissen
   wir nicht", nie „in Ordnung".
   ===================================================================== */

/* Der Signalpunkt, freistehend. `.signal::before` ist derselbe Punkt mit Text. */
.punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mid-grey);
    flex: none;
    vertical-align: middle;
}

.punkt.kritisch { background: var(--sig-kritisch); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }
.punkt.hoch     { background: var(--sig-hoch); }
.punkt.mittel   { background: var(--sig-mittel); }
.punkt.niedrig  { background: var(--border-grey); }
.punkt.ok       { background: var(--sig-ok); }

/* ---------- Zähler am Hauptmenü ---------- */

.hauptnav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.zaehler {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 16px;
    text-align: center;
    color: var(--white);
    background: var(--mid-grey);
}

.zaehler.kritisch { background: var(--sig-kritisch); }
.zaehler.hoch     { background: var(--sig-hoch-text); }
.zaehler.mittel   { background: var(--sig-mittel-text); }

/* ---------- Unternavigation eines Bereichs ---------- */

.bereichsnav {
    background: var(--off-white);
    border-bottom: 1px solid var(--border-grey);
}

.bereichsnav ul {
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 var(--page-margin);
    list-style: none;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.bereichsnav a {
    display: block;
    padding: 10px 12px;
    font-family: var(--font-head);
    font-size: 12px;
    font-weight: 600;
    color: var(--mid-grey);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.bereichsnav a:hover {
    color: var(--near-black);
}

.bereichsnav a[aria-current="page"] {
    color: var(--near-black);
    border-bottom-color: var(--near-black);
}

/* ---------- Zustandsstreifen einer Site ---------- */

.zustand {
    list-style: none;
    margin: -16px 0 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zustand-pille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border-grey);
    border-left: 4px solid var(--border-grey);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 13px;
    line-height: 1.4;
    color: var(--dark-grey);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.zustand-pille:hover {
    color: var(--near-black);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 14, 14, 0.06);
}

.zustand-bereich {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid-grey);
}

.zustand-pille.kritisch { border-left-color: var(--sig-kritisch); background: var(--sig-kritisch-flaeche); }
.zustand-pille.hoch     { border-left-color: var(--sig-hoch); background: var(--sig-hoch-flaeche); }
.zustand-pille.mittel   { border-left-color: var(--sig-mittel); }
.zustand-pille.ok       { border-left-color: var(--sig-ok); }

.zustand-pille.kritisch .zustand-text { color: var(--sig-kritisch-text); font-weight: 700; }
.zustand-pille.hoch .zustand-text     { color: var(--sig-hoch-text); font-weight: 700; }

/* ---------- Kacheln mit Befund ---------- */

.metric {
    position: relative;
}

.metric.befund::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--mid-grey);
}

.metric.befund.kritisch::before { background: var(--sig-kritisch); }
.metric.befund.hoch::before     { background: var(--sig-hoch); }
.metric.befund.mittel::before   { background: var(--sig-mittel); }

.metric.befund.kritisch .metric-value { color: var(--sig-kritisch-text); }
.metric.befund.hoch .metric-value     { color: var(--sig-hoch-text); }
.metric.befund.mittel .metric-value   { color: var(--sig-mittel-text); }

.metric:not(.befund) .metric-value {
    color: var(--mid-grey);
}

.metric:first-child:not(.befund) .metric-value {
    color: var(--near-black);
}

/* ---------- Site-Karten der Übersicht ---------- */

.site-karte {
    border-top: 3px solid var(--border-grey);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.site-karte:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(14, 14, 14, 0.04), 0 10px 28px rgba(14, 14, 14, 0.07);
}

.site-karte.kritisch { border-top-color: var(--sig-kritisch); }
.site-karte.hoch     { border-top-color: var(--sig-hoch); }
.site-karte.mittel   { border-top-color: var(--sig-mittel); }
.site-karte.ok       { border-top-color: var(--sig-ok); }

/* ---------- Site-Verwaltung: Sprungnavigation und Gruppen ---------- */

.verwaltung {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.verwaltung-nav {
    position: sticky;
    top: 24px;
    font-size: 13px;
}

.verwaltung-nav ul {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.verwaltung-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: var(--radius);
    color: var(--dark-grey);
    text-decoration: none;
}

.verwaltung-nav a:hover {
    background: var(--light-grey);
    color: var(--near-black);
}

.verwaltung-nav-gruppe,
.gruppe {
    font-family: var(--font-head);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid-grey);
    margin-bottom: 6px;
}

.gruppe {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
}

.gruppe:not(:first-child) {
    margin-top: 48px;
}

.gruppe::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-grey);
}

.card-titel {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--near-black);
    margin: 0 0 14px;
}

.verwaltung-inhalt .card:target {
    box-shadow: 0 0 0 2px var(--near-black);
}

/* ---------- Aufklappbare Karten ---------- */

details.card > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

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

details.card > summary::after {
    content: "+";
    font-size: 20px;
    font-weight: 400;
    color: var(--mid-grey);
    transition: transform 0.2s ease;
}

details.card[open] > summary {
    margin-bottom: 14px;
}

details.card[open] > summary::after {
    transform: rotate(45deg);
}

.gefahrzone {
    border-color: rgba(220, 38, 38, 0.35);
}

.gefahrzone > summary {
    color: var(--sig-kritisch-text);
}

/* ---------- Sprungleiste auf langen Seiten ---------- */

.sprungleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -16px 0 40px;
}

.sprungleiste a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px solid var(--border-grey);
    border-radius: 999px;
    background: var(--white);
    font-size: 13px;
    color: var(--dark-grey);
    text-decoration: none;
}

.sprungleiste a:hover {
    border-color: var(--near-black);
    color: var(--near-black);
}

[id] {
    scroll-margin-top: 24px;
}

@media (max-width: 900px) {
    .verwaltung {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .verwaltung-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        margin-bottom: 24px;
    }

    .verwaltung-nav-gruppe {
        display: none;
    }

    .verwaltung-nav ul {
        display: contents;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }

    .site-karte:hover,
    .zustand-pille:hover {
        transform: none;
    }
}