/* ===========================================================================
   Vigilo

   Farben nach der validierten Referenzpalette: Flächen, Schrift und die
   Statusfarben (good/warning/serious/critical) sind übernommene Werte, keine
   geschätzten. Die Statusfarben sind reserviert – sie stehen nie für etwas
   anderes als einen Zustand.

   Farbe ist nirgends das einzige Signal: jeder Zustand trägt Symbol und Wort.
   Eine reine Rot-Grün-Ampel wäre für einen erheblichen Teil der Betrachter
   nicht unterscheidbar, und genau diese Unterscheidung ist der Zweck der Seite.

   Keine Fremdressourcen, keine Schriftdateien, kein Diagramm-Paket. Die
   Zentrale soll auch dann laden, wenn ringsum nichts mehr geht.
   =========================================================================== */

:root {
    color-scheme: light;

    /* Flächen und Schrift */
    --plane:        #f9f9f7;
    --surface:      #fcfcfb;
    --surface-sunk: #f0efec;
    --ink:          #0b0b0b;
    --ink-2:        #52514e;
    --ink-muted:    #898781;
    --line:         #e1e0d9;
    --axis:         #c3c2b7;
    --ring:         rgba(11, 11, 11, .10);

    /* Status – fest, nie für Serien verwendet */
    --good:     #0ca30c;
    --warning:  #fab219;
    --serious:  #ec835a;
    --critical: #d03b3b;

    /* Akzent für Verweise und Bedienelemente */
    --accent:       #2a78d6;
    --accent-hover: #256abf;

    --radius: 10px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
        color-scheme: dark;
        --plane:        #0d0d0d;
        --surface:      #1a1a19;
        --surface-sunk: #111110;
        --ink:          #ffffff;
        --ink-2:        #c3c2b7;
        --ink-muted:    #898781;
        --line:         #2c2c2a;
        --axis:         #383835;
        --ring:         rgba(255, 255, 255, .10);
        --accent:       #3987e5;
        --accent-hover: #5598e7;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --plane:        #0d0d0d;
    --surface:      #1a1a19;
    --surface-sunk: #111110;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --ink-muted:    #898781;
    --line:         #2c2c2a;
    --axis:         #383835;
    --ring:         rgba(255, 255, 255, .10);
    --accent:       #3987e5;
    --accent-hover: #5598e7;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--plane);
    -webkit-font-smoothing: antialiased;
}

body.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
     color: var(--ink-muted); margin: 0 0 14px; }

code {
    font-family: var(--mono);
    font-size: .9em;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}
code.klein { font-size: 11px; word-break: break-all; }

.muted { color: var(--ink-muted); }
.small { font-size: 13px; }
.block { display: block; }
.nowrap { white-space: nowrap; }
.zahl { font-variant-numeric: tabular-nums; text-align: right; }

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

.topbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--ink); text-decoration: none;
}
/* Das Auge. Nimmt über currentColor die Schriftfarbe an und stimmt damit in
   beiden Modi, ohne zweite Datei. */
.logo { flex: none; display: block; color: var(--ink); }
.brand .logo { margin-right: 2px; }
.card-brand .logo { margin: 0 auto 12px; }

.hauptnav { display: flex; gap: 4px; margin-right: auto; }
.hauptnav a {
    padding: 6px 12px; border-radius: 7px;
    color: var(--ink-2); text-decoration: none; font-size: 14px;
}
.hauptnav a:hover { background: var(--surface-sunk); color: var(--ink); }

.env-badge {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; padding: 1px 6px; border-radius: 999px;
    border: 1px solid var(--axis); color: var(--ink-muted);
    vertical-align: middle; white-space: nowrap;
}
.env-prod    { color: var(--ink); border-color: var(--ink-2); }
.env-staging { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.env-dev     { opacity: .75; }

.topbar-user { display: flex; align-items: center; gap: 10px; }
.avatar {
    display: grid; place-items: center; width: 32px; height: 32px;
    border-radius: 50%; background: var(--accent); color: #fff;
    font-size: 12px; font-weight: 600; flex: none;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta small { color: var(--ink-muted); font-size: 12px; }
.inline { display: inline; margin: 0; }

/* --- Seite -------------------------------------------------------------- */

.page { max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px; }
.page-head { margin-bottom: 20px; }
.page-head-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.brotkrumen { margin: 0 0 2px; font-size: 13px; color: var(--ink-muted); }

.segmented {
    display: inline-flex; border: 1px solid var(--line);
    border-radius: 8px; overflow: hidden; background: var(--surface);
}
.segmented a {
    padding: 6px 14px; font-size: 13px; color: var(--ink-2);
    text-decoration: none; border-right: 1px solid var(--line);
}
.segmented a:last-child { border-right: 0; }
.segmented a:hover { background: var(--surface-sunk); }
.segmented a.ist-aktiv { background: var(--accent); color: #fff; }

/* --- Kennzahlen --------------------------------------------------------- */

.kennzahlen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px; margin-bottom: 20px;
}
.kennzahl {
    padding: 16px 18px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
}
/* Proportionale Ziffern: tabular-nums lässt große Zahlen locker wirken. */
.kennzahl-wert { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; }
.kennzahl-wert.small-wert { font-size: 18px; }
.kennzahl-label { display: block; font-size: 13px; color: var(--ink-muted); }
.kennzahl.ist-kritisch { border-color: color-mix(in srgb, var(--critical) 55%, var(--line)); }
.kennzahl.ist-kritisch .kennzahl-wert { color: var(--critical); }
.kennzahl.ist-warnend  { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); }

/* --- Statuskacheln ------------------------------------------------------ */

.kacheln {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
    gap: 14px; margin-bottom: 22px;
}
.kachel {
    display: block; padding: 16px 18px 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--axis);
    border-radius: var(--radius);
    color: inherit; text-decoration: none;
}
.kachel:hover { border-color: var(--axis); box-shadow: 0 1px 3px var(--ring); }
.kachel-ok     { border-left-color: var(--good); }
.kachel-warn   { border-left-color: var(--warning); }
.kachel-crit   { border-left-color: var(--critical); }
.kachel-paused,
.kachel-unknown { border-left-color: var(--axis); }

.kachel-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
}
.kachel-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kachel-titel h2 {
    font-size: 16px; text-transform: none; letter-spacing: 0;
    color: var(--ink); margin: 0;
}

/* Zustand: Symbol + Wort, damit die Farbe nie allein trägt. */
.zustand {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    padding: 2px 9px; border-radius: 999px; border: 1px solid;
}
.zustand-symbol { font-size: 10px; line-height: 1; }
.zustand-gross { font-size: 14px; padding: 5px 14px; }
.zustand-ok      { color: var(--good);     border-color: color-mix(in srgb, var(--good) 45%, transparent);
                   background: color-mix(in srgb, var(--good) 10%, transparent); }
.zustand-warn    { color: var(--ink);      border-color: color-mix(in srgb, var(--warning) 60%, transparent);
                   background: color-mix(in srgb, var(--warning) 18%, transparent); }
.zustand-crit    { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 50%, transparent);
                   background: color-mix(in srgb, var(--critical) 10%, transparent); }
.zustand-paused,
.zustand-unknown { color: var(--ink-muted); border-color: var(--axis); }

.kachel-grund { margin: 8px 0 12px; font-size: 13px; color: var(--ink-2); }

.kachel-werte { display: flex; gap: 22px; margin: 0; flex-wrap: wrap; }
.kachel-werte dt { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.kachel-werte dd { margin: 0; font-size: 14px; font-weight: 500; }

/* --- Der Herzschlag ----------------------------------------------------- */

/*
   Die Kurve läuft, solange Lebenszeichen ankommen, und wird zur geraden Linie,
   sobald der Heartbeat überfällig ist. Flatline heißt hier buchstäblich, was es
   in der Medizin heißt – das ist die Aussage, nicht Dekoration.
*/
.puls {
    height: 46px; margin: 4px 0 2px;
    overflow: hidden; border-radius: 6px;
    background: var(--surface-sunk);
    position: relative;
}
.puls svg { width: 200%; height: 100%; display: block; }

.puls-linie {
    fill: none;
    stroke: var(--axis);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.puls-ok   .puls-linie { stroke: var(--good); }
.puls-warn .puls-linie { stroke: var(--warning); }
.puls-crit .puls-linie { stroke: var(--critical); }

/* Der Zug ist zweimal aneinandergehängt; um genau eine Zuglänge zu schieben
   ergibt eine nahtlose Schleife ohne sichtbare Sprungstelle. */
.puls:not(.puls-still) svg { animation: puls-lauf 2.4s linear infinite; }
.puls-warn:not(.puls-still) svg { animation-duration: 1.4s; }

@keyframes puls-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Bei Ausfall bleibt die Nulllinie stehen und atmet nur schwach – sichtbar
   "kein Signal" statt "vielleicht kaputt". */
.puls-still .puls-linie { animation: puls-flach 2s ease-in-out infinite; }

@keyframes puls-flach {
    0%, 100% { opacity: .45; }
    50%      { opacity: .8; }
}

/* Wer Bewegung reduziert haben will, bekommt eine ruhige Kurve. Die Aussage
   bleibt erhalten: Kurve heißt lebendig, gerade Linie heißt tot. */
@media (prefers-reduced-motion: reduce) {
    .puls svg,
    .puls-still .puls-linie { animation: none; }
}

/* --- Heartbeat-Streifen und Verläufe ------------------------------------ */

.streifen { display: flex; gap: 2px; align-items: stretch; height: 40px; }
.streifen-balken {
    flex: 1; border-radius: 2px; min-width: 2px;
    background: var(--good);
}
.streifen-balken.ist-luecke { background: var(--critical); opacity: .55; }

.verlauf {
    display: flex; gap: 2px; align-items: flex-end;
    height: 60px; padding-top: 4px;
}
.verlauf-hoch { height: 90px; }
.verlauf-balken {
    flex: 1; min-width: 2px; border-radius: 3px 3px 0 0;
    background: var(--accent);
}
.verlauf-balken.ist-leer { background: var(--line); }

/* --- Flächen und Tabellen ----------------------------------------------- */

.panel {
    padding: 18px 20px; margin-bottom: 14px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }

.facts { display: grid; grid-template-columns: minmax(min(120px, 100%), auto) 1fr; gap: 8px 20px; margin: 0; }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.facts dd.meldung { display: block; word-break: break-word; }

/* Breite Inhalte scrollen in ihrem eigenen Kasten – die Seite selbst darf
   niemals waagerecht scrollen. */
.tabelle-huelle { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
    text-align: left; font-size: 11px; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-muted); font-weight: 600;
    padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--surface-sunk); }
.tabelle-dicht td, .tabelle-dicht th { padding: 5px 10px; }
.zelle-breit { min-width: 260px; }
.fehler-titel { font-weight: 600; }
.signatur-text {
    font-family: var(--mono); font-size: 12px; color: var(--ink-2);
    word-break: break-all; margin: 4px 0 0;
}

/* Schweregrade – abgeleitet aus der Statuspalette, immer mit Wort. */
.grad {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap;
}
.grad-exception,
.grad-fatal   { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 50%, transparent);
                background: color-mix(in srgb, var(--critical) 12%, transparent); }
.grad-error   { color: var(--ink); border-color: color-mix(in srgb, var(--serious) 65%, transparent);
                background: color-mix(in srgb, var(--serious) 18%, transparent); }
.grad-warning { color: var(--ink); border-color: color-mix(in srgb, var(--warning) 65%, transparent);
                background: color-mix(in srgb, var(--warning) 18%, transparent); }
.grad-notice,
.grad-info,
.grad-debug   { color: var(--ink-muted); border-color: var(--axis); }

.stacktrace {
    font-family: var(--mono); font-size: 12px; line-height: 1.5;
    background: var(--surface-sunk); border: 1px solid var(--line);
    border-radius: 8px; padding: 12px; overflow-x: auto; margin: 0;
}

/* --- Filterzeile -------------------------------------------------------- */

.filterzeile {
    display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 16px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius);
}
.filterzeile label { display: flex; flex-direction: column; gap: 3px; }
.filterzeile label span { font-size: 11px; text-transform: uppercase;
                          letter-spacing: .04em; color: var(--ink-muted); }
.filter-suche { flex: 1; min-width: 160px; }

select, input[type="search"], input[type="email"], input[type="password"], input[type="text"] {
    padding: 7px 10px; font: inherit; font-size: 14px;
    color: var(--ink); background: var(--surface-sunk);
    border: 1px solid var(--line); border-radius: 7px;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- Bedienelemente ----------------------------------------------------- */

.btn {
    display: inline-block; padding: 8px 15px; font: inherit; font-size: 14px;
    font-weight: 500; text-align: center; text-decoration: none;
    border: 1px solid transparent; border-radius: 7px; cursor: pointer;
}
.btn-block { display: block; width: 100%; margin-top: 12px; padding: 10px 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary { background: var(--surface-sunk); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--axis); }
.btn-quiet { background: transparent; color: var(--ink-muted); border-color: var(--line); }
.btn-quiet:hover { color: var(--ink); }

/* --- Anmeldekarte ------------------------------------------------------- */

.card-shell {
    width: 100%; max-width: 380px; padding: 32px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.card-brand { text-align: center; margin-bottom: 26px; }
.card-brand h1 { font-size: 20px; }
.card-brand p { margin: 2px 0 0; font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack label { font-size: 13px; color: var(--ink-muted); margin-top: 8px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0;
           color: var(--ink-muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

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

.flash, .notice {
    padding: 12px 14px; margin-bottom: 16px;
    background: var(--surface); border: 1px solid var(--line);
    border-left-width: 3px; border-radius: 8px; font-size: 14px;
}
.flash-error { border-left-color: var(--critical); }
.flash-info  { border-left-color: var(--accent); }
.notice      { border-left-color: var(--accent); }
.notice-warn { border-left-color: var(--warning); }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { margin: 6px 0; }

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

.footer {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    max-width: 1180px; margin: 0 auto; padding: 16px 24px 32px;
    font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line);
}

/* ===========================================================================
   Vollresponsiv (Briefing Punkt 13)

   Benutzbar von 320 px bis Breitbild – nicht "bricht nicht kaputt", sondern
   lesbar und bedienbar ohne Zoomen. Ein Kontrollmonitor wird gebraucht, wenn
   etwas kaputt ist, und das ist selten der Moment am Schreibtisch.

   Geprüft bei 320, 375, 768, 1024 und 1440 px.
   =========================================================================== */

/* Sicherheitsnetz: die Seite selbst scrollt niemals waagerecht. Breite Inhalte
   scrollen in ihrem eigenen Kasten – siehe .tabelle-huelle und .stacktrace. */
html { overflow-x: hidden; }

img, svg, video, canvas { max-width: 100%; }

/* Lange Zeichenketten ohne Trennmöglichkeit – Signaturen, URLs, Klassennamen –
   sprengen sonst jedes schmale Layout. */
.meldung, .signatur-text, .fehler-titel, .facts dd { overflow-wrap: anywhere; }

/* --- ab Tablet ----------------------------------------------------------- */

@media (max-width: 1024px) {
    .page, .footer { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 768px) {
    .page-head-row { flex-direction: column; align-items: stretch; }
    .segmented { align-self: flex-start; }

    /* Schlüssel-Wert-Listen untereinander statt in zwei engen Spalten. */
    .facts { grid-template-columns: 1fr; gap: 2px 0; }
    .facts dt { margin-top: 10px; font-size: 12px; text-transform: uppercase;
                letter-spacing: .04em; }
    .facts dt:first-child { margin-top: 0; }

    .kachel-werte { gap: 16px; }
}

/* --- Telefon ------------------------------------------------------------- */

@media (max-width: 560px) {
    body { font-size: 16px; }   /* iOS zoomt Eingabefelder unter 16px hinein */

    .topbar {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 14px;
    }
    .brand { font-size: 15px; }

    /* Navigation in eine eigene, volle Zeile – sonst quetscht sie sich
       zwischen Markenzeichen und Benutzer. */
    .hauptnav {
        order: 3;
        width: 100%;
        margin-right: 0;
        border-top: 1px solid var(--line);
        padding-top: 6px;
    }
    .hauptnav a { flex: 1; text-align: center; padding: 10px 12px; }

    .topbar-user { margin-left: auto; }
    .user-meta { display: none; }   /* Name steht im Avatar-Titel */

    .page, .footer { padding-left: 14px; padding-right: 14px; }
    .page { padding-top: 18px; padding-bottom: 40px; }

    h1 { font-size: 21px; }

    .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kennzahl { padding: 12px 14px; }
    .kennzahl-wert { font-size: 26px; }

    .kachel { padding: 14px; }
    .kachel-kopf { flex-direction: column; gap: 8px; }
    .kachel-werte { gap: 14px; }
    .kachel-werte dd { font-size: 15px; }

    .panel { padding: 14px 15px; }

    /* Filterzeile: jedes Feld über die volle Breite, sonst stehen dort acht
       halbe Steuerelemente nebeneinander. */
    .filterzeile { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
    .filterzeile label { width: 100%; }
    .filterzeile select,
    .filterzeile input { width: 100%; }
    .filterzeile .btn { width: 100%; }

    .card-shell { padding: 24px 20px; }

    .footer { flex-direction: column; gap: 4px; }

    /* Der Streifen bleibt lesbar: 60 Balken zu je 2 px plus Abstand passen auch
       auf 320 px, aber flacher wirkt er ruhiger. */
    .streifen { height: 32px; }
    .verlauf { height: 48px; }
    .verlauf-hoch { height: 70px; }
    .puls { height: 40px; }
}

@media (max-width: 400px) {
    .kennzahlen { grid-template-columns: 1fr 1fr; }
    .kennzahl-wert { font-size: 23px; }
    .zelle-breit { min-width: 200px; }
}

/* --- Touch --------------------------------------------------------------- */

/* Auf Zeigegeräten ohne feine Auflösung brauchen Bedienelemente eine
   Trefferfläche von mindestens 44 px. Am Telefon wird dieses Dashboard
   angeschaut, wenn es darauf ankommt. */
@media (pointer: coarse) {
    .btn, .segmented a, .hauptnav a, select, input[type="search"],
    input[type="email"], input[type="password"], input[type="text"] {
        min-height: 44px;
    }
    .btn, .segmented a, .hauptnav a { display: inline-flex; align-items: center;
                                      justify-content: center; }
    .tabelle td, .tabelle th { padding-top: 11px; padding-bottom: 11px; }
    .tabelle-dicht td, .tabelle-dicht th { padding-top: 9px; padding-bottom: 9px; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
    .topbar, .footer, .filterzeile, .segmented { display: none; }
    .panel, .kachel { break-inside: avoid; border-color: #999; }
    .puls svg { animation: none; }
}

/* --- Vorfälle ------------------------------------------------------------ */

.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.notizform { max-width: 640px; }

.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li {
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--line);
    position: relative;
}
.zeitleiste li::before {
    content: ""; position: absolute; left: -5px; top: 14px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--axis);
}
.zeitleiste li:first-child::before { background: var(--accent); }
.zeitleiste-zeit {
    display: block; font-size: 12px; color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .aktionen .btn { width: 100%; }
    .aktionen form { width: 100%; display: block; }
}

/* --- Regeln -------------------------------------------------------------- */

.kette { margin: 0; padding-left: 22px; }
.kette li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.kette li:last-child { border-bottom: 0; }
.kette-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }

/* --- Notschalter --------------------------------------------------------- */

.notschalter-lage { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.notschalter-lage p { margin: 0; flex: 1; min-width: 220px; }

/* Der Not-Aus ist der einzige Knopf, der laut sein darf. */
.btn-notaus {
    background: var(--critical); color: #fff; font-weight: 600;
    padding: 12px 22px;
}
.btn-notaus:hover { filter: brightness(1.08); }

.scharf-form { width: 100%; margin-top: 6px; }
.scharf-form label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 4px; }
.scharf-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.scharf-zeile input { flex: 1; min-width: 160px; }

@media (max-width: 560px) {
    .notschalter-lage { flex-direction: column; }
    .btn-notaus { width: 100%; }
    .scharf-zeile input, .scharf-zeile .btn { width: 100%; }
}

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

.formular { max-width: 620px; }
.feld { margin-bottom: 20px; }
.feld > label, .feld legend {
    display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px;
}
.feld input[type="text"], .feld select { width: 100%; }
.feld .hinweis { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 4px; }

.feld-wahl { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.feld-wahl legend { padding: 0 6px; }

.wahl { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.wahl + .wahl { border-top: 1px solid var(--line); }
.wahl input { margin-top: 3px; flex: none; }
.wahl-text { flex: 1; }

.panel-warnung { border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); }

@media (max-width: 560px) {
    .feld .btn { width: 100%; margin-bottom: 8px; }
}

/* --- Das Auge im Hintergrund --------------------------------------------- */

/*
   Ein Hauch, mehr nicht: das Zeichen soll die Fläche beleben, ohne dass man es
   bewusst wahrnimmt. Man bemerkt es eher, wenn es fehlt, als wenn es da ist.

   Bewusst schwächer als ein übliches Wasserzeichen. Frei stehender Text – vor
   allem in .page-head – steht unmittelbar davor, und die Statusfarben müssen
   das Lauteste auf dieser Seite bleiben. Rot heißt Ausfall; ein Zierelement,
   das damit konkurriert, hat seinen Zweck verfehlt.

   Der umschließende Kasten fängt die Überbreite ab: das Auge ist bei schmalen
   Fenstern breiter als der Bildschirm, und ohne overflow:hidden entstünde
   waagerechtes Scrollen.
*/
.hintergrund-auge {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    display: grid;
    place-items: center;
    color: var(--ink);
}

.hintergrund-auge svg {
    width: min(150vh, 190vw, 1500px);
    height: auto;
    opacity: .015;
    /* Etwas nach unten gerückt, damit die Pupille nicht hinter der Kopfzeile
       sitzt, wo sie mit den Bedienelementen um Aufmerksamkeit ringt. */
    transform: translateY(4vh);
}

/* Im Dunkelmodus etwas mehr: helle Linien auf dunklem Grund treten schwächer
   hervor als dunkle auf hellem, dieselbe Zahl wirkt dort blasser. */
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .hintergrund-auge svg { opacity: .025; }
}
:root[data-theme="dark"] .hintergrund-auge svg { opacity: .025; }

/* Anmeldeseite: mittig statt versetzt – dort gibt es keine Kopfzeile, hinter
   der die Pupille verschwinden müsste. */
body.centered .hintergrund-auge svg { opacity: .022; transform: none; }

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) body.centered .hintergrund-auge svg { opacity: .035; }
}

/* Inhalt gehört darüber. */
.topbar, .page, .footer, .card-shell { position: relative; z-index: 1; }

@media print {
    .hintergrund-auge { display: none; }
}