/* =========================================================================
   SysCheck – gemeinsames Designsystem (Dark-Mode-First)
   Alle Seiten laden diese Datei. Seitenspezifische Layouts bleiben in den
   jeweiligen <style>-Blöcken der Seite, nutzen aber ausschließlich die hier
   definierten Variablen.
   Raster: 8px. Abstände immer über --s*-Variablen.
   ========================================================================= */

:root {
    color-scheme: dark;

    /* Flächen – neutrales Dunkelblaugrau, kein reines Schwarz */
    --bg: #101419;
    --bg-soft: #141a21;
    --surface: #171d25;
    --surface-2: #1c232c;
    --surface-3: #222b35;
    --border: #283140;
    --border-strong: #38455a;

    /* Text */
    --text: #e7ecf3;
    --text-muted: #9dabbd;
    --text-dim: #78879b;
    --link: var(--accent-strong);
    --danger: var(--crit);
    --focus-ring: #a8caff;
    --form-border: #75869d;
    --skip-text: #101419;
    --skip-bg: #e7ecf3;

    /* Neutral/Blau = neutrale Information */
    --accent: #5b95ff;
    --accent-strong: #7fb0ff;
    --accent-ink: #0d1420;
    --accent-soft: #5b95ff1f;
    --accent-border: #5b95ff45;

    /* Status – sparsam und ausschließlich semantisch verwenden */
    --ok: #3fca8f;
    --ok-soft: #3fca8f1c;
    --ok-border: #3fca8f40;
    --warn: #eeb02e;
    --warn-soft: #eeb02e1c;
    --warn-border: #eeb02e40;
    --crit: #ff6470;
    --crit-soft: #ff64701c;
    --crit-border: #ff647045;
    --neutral: #8f9fb3;
    --neutral-soft: #8f9fb31c;
    --neutral-border: #8f9fb338;

    /* Abstandsraster (8px) */
    --s0: 4px;
    --s1: 8px;
    --s2: 16px;
    --s3: 24px;
    --s4: 32px;
    --s5: 40px;
    --s6: 48px;
    --s7: 64px;

    /* Form */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px #05070a66;
    --shadow-raised: 0 4px 14px #05070a80;
    --surface-highlight: #ffffff08;
    --button-shadow: #05070a55;
    --ok-hover-soft: #3fca8f2b;
    --crit-hover-soft: #ff64702b;
    --state-icon-bg: #ffffff0f;
    --crit-row-soft: #ff64700f;
    --overlay-soft: #00000012;
    --sticky-shadow: #00000033;
    --danger-border: #b42318;

    --gutter: var(--s2);
    --shell: 1120px;

    --font: Inter, "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg: #f4f7fb;
    --bg-soft: #edf2f7;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #eef3f8;
    --border: #d7e0ea;
    --border-strong: #b6c4d3;

    --text: #172235;
    --text-muted: #536174;
    --text-dim: #5c6c80;
    --link: #1f5fb8;
    --danger: #c23d4d;
    --focus-ring: #245dcc;
    --form-border: #b6c4d3;
    --skip-text: #ffffff;
    --skip-bg: #245dcc;

    --accent: #2f6fed;
    --accent-strong: #245dcc;
    --accent-ink: #ffffff;
    --accent-soft: #2f6fed14;
    --accent-border: #2f6fed52;

    --ok: #147a57;
    --ok-soft: #147a5714;
    --ok-border: #147a5745;
    --warn: #956000;
    --warn-soft: #95600014;
    --warn-border: #95600045;
    --crit: #c23d4d;
    --crit-soft: #c23d4d14;
    --crit-border: #c23d4d45;
    --neutral: #607086;
    --neutral-soft: #60708614;
    --neutral-border: #60708640;

    --shadow: 0 1px 3px #25364d18;
    --shadow-raised: 0 8px 24px #25364d20;
    --surface-highlight: #ffffffb8;
    --button-shadow: #25364d1c;
    --ok-hover-soft: #147a5722;
    --crit-hover-soft: #c23d4d22;
    --state-icon-bg: #ffffff80;
    --crit-row-soft: #c23d4d10;
    --overlay-soft: #25364d10;
    --sticky-shadow: #25364d24;
    --danger-border: #c23d4d;
}

:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- Basis ---------- */

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

/* Muss nach den Komponenten greifen, die display setzen. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

p { margin: 0 0 var(--s2); color: var(--text-muted); line-height: 1.65; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
a:hover { color: var(--accent-strong); text-decoration: underline; }
}


code, kbd, pre, .command, .mono { font-family: var(--font-mono); }

hr { height: 1px; margin: var(--s3) 0; border: 0; background: var(--border); }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- Fokus: einheitlich und immer sichtbar ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* ---------- Layout ---------- */

.shell,
.wrap {
    width: min(var(--shell), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
}

.wrap { --shell: 520px; margin-block: var(--s7); }

header.top,
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
    padding: var(--s2) 0;
}

body > header,
header.top {
    position: relative;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}

/* Kopfzeilen, die selbst die Inhaltsbreite begrenzen, tragen nur eine Trennlinie. */
header.top.shell { background: transparent; }

main { padding-bottom: var(--s7); }

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.brand:hover { color: var(--text); text-decoration: none; }
}


.nav,
nav {
    display: flex;
    align-items: center;
    gap: var(--s0);
}

/* Buttons in der Navigation behalten ihr Button-Aussehen. */
.nav a:not(.button),
header nav a:not(.button) {
    margin: 0;
    padding: var(--s1) var(--s1);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.nav a:not(.button):hover,
header nav a:not(.button):hover {
    color: var(--text);
    background: var(--surface-2);
    text-decoration: none;
}
}


.nav a[aria-current="page"],
header nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* Account menu used by the shared authenticated header. */
.syscheck-profile-menu { position: relative; display: inline-block; }
.syscheck-profile-trigger {
    margin: 0;
    padding: var(--s1) var(--s1);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.syscheck-profile-menu:hover .syscheck-profile-trigger {
    color: var(--text);
    background: var(--surface-2);
}
.syscheck-profile-menu:hover .syscheck-profile-dropdown,
.syscheck-diagnosis-menu:hover .syscheck-diagnosis-dropdown { display: block !important; }
}
.syscheck-profile-menu:focus-within .syscheck-profile-trigger {
    color: var(--text);
    background: var(--surface-2);
}

.syscheck-diagnosis-menu:focus-within .syscheck-diagnosis-trigger,
.syscheck-diagnosis-trigger[aria-current="page"] {
    color: var(--text);
    background: var(--surface-2);
}

.syscheck-profile-dropdown {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: 0;
    display: none;
    min-width: 180px;
    padding: var(--s1);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-raised);
}
.syscheck-profile-menu.is-open .syscheck-profile-dropdown { display: block; }
.syscheck-profile-dropdown a {
    display: block;
    margin: 0;
    padding: var(--s1) 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.syscheck-diagnosis-dropdown a {
    display: block;
    margin: 0;
    padding: var(--s1) 12px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.syscheck-diagnosis-menu { position: relative; display: inline-block; }
.syscheck-diagnosis-trigger {
    margin: 0;
    padding: var(--s1) var(--s1);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}
.syscheck-diagnosis-dropdown {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: none;
    min-width: 180px;
    padding: var(--s1);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-raised);
}
.syscheck-diagnosis-menu[open] > .syscheck-diagnosis-dropdown { display: block; }
.syscheck-diagnosis-menu > summary { list-style: none; }
.syscheck-diagnosis-menu > summary::-webkit-details-marker { display: none; }
.syscheck-diagnosis-menu > summary::after { content: " ▾"; color: var(--text-dim); }
.footer-group { display: inline-flex; flex-direction: column; gap: var(--s0); margin-right: var(--s3); vertical-align: top; }
.footer-group strong { color: var(--text-muted); font-weight: 700; }
.footer-group a { display: block; }
@media (max-width: 720px) {
    .syscheck-diagnosis-dropdown { position: static; min-width: 0; margin-top: var(--s0); box-shadow: none; }
    .public-nav { flex-wrap: wrap; }
    .footer-group { margin-bottom: var(--s2); }
}

/* Public header: keep product navigation and account actions visually separate. */
.public-nav { gap: var(--s2); }
header .nav-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-left: var(--s3);
    padding-left: var(--s3);
    border-left: 1px solid var(--border);
}
.language-picker { display: inline-flex; flex: 0 0 auto; align-items: center; }
.language-picker select {
    width: 3.6rem;
    min-width: 3.6rem;
    padding: var(--s1) 22px var(--s1) 10px;
    border-radius: var(--radius-sm);
}
.nav-actions a.button-outline { min-height: 40px; }
.nav-actions a[href="/register.php"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.nav-actions a[href="/login.php"] { background: transparent; }
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .theme-icon-moon { display: none; }
.theme-toggle[data-theme="light"] .theme-icon-sun { display: none; }
.theme-toggle[data-theme="light"] .theme-icon-moon { display: block; }
.theme-standalone {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--s2);
}
.standalone-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2);
}
.standalone-brand-row .theme-standalone { margin-bottom: 0; }
.public-nav .syscheck-diagnosis-menu { margin-right: var(--s0); }
.public-nav .syscheck-diagnosis-trigger,
.public-nav > a { min-height: 40px; }
.public-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--s4);
    margin-top: var(--s2);
}
.public-footer .footer-group { margin: 0; }
.public-footer .footer-group a { padding: 2px 0; }
@media (max-width: 720px) {
    header.top { flex-wrap: wrap; }
    header.top > .public-nav { flex: 1 1 100%; justify-content: flex-start; }
    header .nav-actions {
        flex-basis: 100%;
        margin: var(--s1) 0 0;
        padding: var(--s1) 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
    .public-footer { gap: var(--s2); }
    .public-footer .footer-group { flex: 1 1 140px; margin-bottom: var(--s1); }
}
@media (hover: hover) and (pointer: fine) {
.syscheck-profile-dropdown a:hover,
.syscheck-diagnosis-dropdown a:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
}

/* Public header: a quiet product surface with a clear action group. */
.public-header .public-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s2);
}
/* Public pages may set a narrower .shell for readable article text. Keep the
   shared header and footer on the same outer frame as the landing page. */
.public-header > .shell,
body > footer:has(.public-footer) .shell { --shell: 1120px; }
body > header:has(.public-nav) {
    padding-block: var(--s2) 0;
    border-bottom: 0;
    background: transparent;
}
header.top:has(.public-nav) {
    margin-top: var(--s2);
    padding: var(--s1) var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
body > header > .shell > .public-nav,
header.top > .public-nav {
    min-width: 0;
    padding: var(--s1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
header.top > .public-nav {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.public-nav .brand {
    gap: 10px;
    padding-inline: var(--s1);
    font-size: 1.08rem;
    letter-spacing: -.015em;
}
.public-nav .brand .mark,
.public-nav .brand .brand-logo {
    width: 34px;
    height: 34px;
}
.public-nav > a:not(.brand),
.public-nav .nav-actions a {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.public-nav > a:not(.brand) {
    padding-inline: 12px;
    border: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
    .public-nav > a:not(.brand):hover {
        border-color: var(--border);
        background: var(--surface-2);
        box-shadow: inset 0 -2px 0 var(--accent);
    }
}
header .public-nav .nav-actions {
    margin-left: auto;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.public-nav .nav-actions a.button-outline {
    min-height: 44px;
    border-radius: var(--radius-sm);
}
.public-nav .nav-actions a[href="/register.php"] {
    box-shadow: 0 1px 2px var(--button-shadow);
}
.public-nav .language-picker select {
    width: 3.5rem;
    min-width: 3.5rem;
    min-height: 44px;
    padding: var(--s1) 18px var(--s1) 9px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .public-nav > a:not(.brand),
    .public-nav .nav-actions a { transition: none; }
}
@media (max-width: 900px) {
    header.top:has(.public-nav) { flex-wrap: wrap; }
    header.top:has(.public-nav) > .public-nav {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 720px) {
    body > header > .shell > .public-nav,
    header.top > .public-nav { padding: var(--s1); }
    header .public-nav .nav-actions {
        flex-basis: 100%;
        margin: var(--s1) 0 0;
        padding: var(--s1) 0 0;
        border-width: 1px 0 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* Public footer: the counterpart to the framed public header. */
body > footer:has(.public-footer) {
    margin-top: var(--s6);
    padding: var(--s5) 0 var(--s3);
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.55;
}
body > footer:has(.public-footer) > .shell {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
body > footer:has(.public-footer) .public-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: var(--s4) var(--s5);
    width: 100%;
    margin: 0;
    padding: 0 0 var(--s4);
    border-bottom: 1px solid var(--border);
}
body > footer:has(.public-footer) .footer-group {
    display: flex;
    flex-direction: column;
    gap: var(--s0);
    min-width: 0;
    margin: 0;
}
body > footer:has(.public-footer) .footer-group strong {
    margin-bottom: var(--s1);
    color: var(--accent-strong);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}
body > footer:has(.public-footer) .footer-group a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem .5rem;
    margin-inline: -.5rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
    body > footer:has(.public-footer) .footer-group a:hover {
        color: var(--text);
        background: var(--surface-2);
        text-decoration: none;
    }
}
body > footer:has(.public-footer) .footer-group a:focus-visible {
    color: var(--text);
    background: var(--surface-2);
}
.related {
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.related h2 { margin-top: 0; }
.related ul { gap: var(--s1); }
.related a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .25rem var(--s1);
    border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) {
    .related a:hover { background: var(--surface-2); text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
    body > footer:has(.public-footer) .footer-group a { transition: none; }
}
@media (max-width: 600px) {
    body > footer:has(.public-footer) .public-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s3) var(--s4);
    }
}
@media (max-width: 420px) {
    body > footer:has(.public-footer) .public-footer { grid-template-columns: 1fr; }
}


/* ---------- Typografie ---------- */

h1 {
    margin: 0 0 var(--s1);
    color: var(--text);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

h2 { margin: 0 0 var(--s1); font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; }
h3 { margin: 0 0 var(--s1); font-size: .95rem; font-weight: 650; }
h4 { margin: 0 0 var(--s1); font-size: .88rem; font-weight: 650; }

.eyebrow,
.kicker {
    display: block;
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lead { max-width: 68ch; font-size: 1rem; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

.card {
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card > h2:first-child,
.card > h1:first-child { margin-top: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--s2);
}

/* ---------- Status: Badge, Pill, Punkt ---------- */

.badge,
.pill,
.tag,
.metric-status {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: var(--s0) var(--s1);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
a.pill:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
}


/* Semantische Zustände. Der Text benennt den Status immer selbst,
   Farbe und Punkt sind nur zusätzliche Signale. */
.badge,
.tag,
.pill.ready,
.metric-status { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }

.badge.pending { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.badge.failed { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-border); }

/* Explizite Tonangabe gewinnt über die kontextbezogenen Vorgaben. */
.is-ok, .pill.is-ok, .badge.is-ok, .tag.is-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
.is-warn, .pill.is-warn, .badge.is-warn, .tag.is-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.is-crit, .pill.is-crit, .badge.is-crit, .tag.is-crit { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-border); }
.is-neutral, .pill.is-neutral, .badge.is-neutral, .tag.is-neutral { color: var(--neutral); background: var(--neutral-soft); border-color: var(--neutral-border); }

.dot,
.badge::before,
.pill.status::before,
.pill.ready::before {
    width: 7px; height: 7px;
    flex: 0 0 auto;
    background: currentColor;
    border-radius: 50%;
    content: "";
}

/* ---------- Buttons ---------- */

.button,
.bulk-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s1);
    padding: var(--s1) var(--s2);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: 600 .92rem/1.4 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
.button:hover,
.bulk-delete:hover { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; }
}


.button:active { background: var(--surface-2); }

.button.primary,
.button-primary {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
.button.primary:hover,
.button-primary:hover { color: var(--accent-ink); background: var(--accent-strong); border-color: var(--accent-strong); }
}


.button.secondary,
.button-outline {
    color: var(--text);
    background: transparent;
    border-color: var(--border-strong);
}
@media (hover: hover) and (pointer: fine) {
.button.secondary:hover,
.button-outline:hover { background: var(--surface-2); }
}


.button.download { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
@media (hover: hover) and (pointer: fine) {
.button.download:hover { color: var(--ok); background: var(--ok-hover-soft); }
}


.button.danger,
.bulk-delete { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-border); }
@media (hover: hover) and (pointer: fine) {
.bulk-delete:hover { color: var(--crit); background: var(--crit-hover-soft); }
}


.button[disabled], .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.back {
    display: inline-flex;
    align-items: center;
    gap: var(--s0);
    margin-top: var(--s3);
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
}

.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s2);
    margin-top: var(--s3);
}

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

.field { margin: var(--s3) 0; }
.field:first-child { margin-top: 0; }

.field label,
label.field-label {
    display: block;
    margin-bottom: var(--s1);
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
}

.field small { display: block; margin: 0 0 var(--s1); color: var(--text-dim); font-size: .82rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], input[type="file"], input:not([type]), select, textarea {
    width: 100%;
    padding: var(--s1) 12px;
    color: var(--text);
    background: var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit;
    transition: border-color .15s ease, background .15s ease;
}

input::placeholder, textarea::placeholder { color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) {
input:hover,
select:hover,
textarea:hover { border-color: var(--neutral); }
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--surface); }

textarea { min-height: 88px; resize: vertical; font: .88rem/1.6 var(--font-mono); }

select {
    padding-right: var(--s4);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
}

input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="file"] { padding: var(--s1); color: var(--text-muted); }
input[type="file"]::file-selector-button {
    margin-right: var(--s2);
    padding: var(--s0) var(--s1);
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: 600 .85rem var(--font);
    cursor: pointer;
}

/* ---------- Meldungen und Zustände ---------- */

.notice, .warning, .error, .errors, .success, .empty, .state {
    display: flex;
    gap: var(--s1);
    margin: 0 0 var(--s2);
    padding: 12px var(--s2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .92rem;
}

.notice, .success { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
.warning { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.error, .errors { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-border); }
.errors ul { margin: 0; padding-left: var(--s2); }

/* Leerzustand */
.empty {
    display: grid;
    justify-items: start;
    gap: var(--s1);
    padding: var(--s5) var(--s3);
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}
.empty strong { display: block; color: var(--text); font-size: 1rem; }
.empty p { margin: 0; max-width: 60ch; }

/* Lade-/Verarbeitungszustand */
.state {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s2);
    padding: var(--s3);
    color: var(--text-muted);
    background: var(--surface);
}
.state strong { display: block; margin-bottom: var(--s0); color: var(--text); }
.state.is-ok, .state.is-warn, .state.is-crit { color: var(--text-muted); }
.state.is-ok { border-color: var(--ok-border); background: var(--ok-soft); }
.state.is-warn { border-color: var(--warn-border); background: var(--warn-soft); }
.state.is-crit { border-color: var(--crit-border); background: var(--crit-soft); }
.state.is-ok > strong, .state.is-ok .state-icon, .state.is-ok > div > strong { color: var(--ok); }
.state.is-warn > strong, .state.is-warn .state-icon, .state.is-warn > div > strong { color: var(--warn); }
.state.is-crit > strong, .state.is-crit .state-icon, .state.is-crit > div > strong { color: var(--crit); }

.state-icon {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    margin-top: 2px;
    background: var(--state-icon-bg);
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .8rem;
    font-weight: 700;
}

.spinner {
    width: 18px; height: 18px;
    margin-top: 3px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    display: grid;
    gap: var(--s1);
    margin-top: var(--s2);
}
.skeleton i {
    display: block;
    height: 10px;
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
    background-size: 200% 100%;
    border-radius: var(--radius-pill);
    animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton i:nth-child(2) { width: 80%; }
.skeleton i:nth-child(3) { width: 55%; }

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -60% 0; } }

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

.scroll, .table-wrap { overflow: auto; overscroll-behavior-x: contain; }

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

table { width: 100%; border-collapse: collapse; }

/* Mindestbreite nur oberhalb des Umbruchpunkts, damit .table--stack
   auf kleinen Displays wirklich umbrechen kann. */
@media (min-width: 721px) {
    .scroll > table { min-width: 560px; }
}

th, td {
    padding: 12px var(--s2);
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
    vertical-align: top;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--text-dim);
    background: var(--surface-2);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

tbody tr:last-child > * { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
tbody tr:hover { background: var(--surface-2); }
}


/* Kritische Zeilen zusätzlich am linken Rand markieren */
tbody tr.row-crit { background: var(--crit-row-soft); box-shadow: inset 3px 0 0 var(--crit); }
tbody tr.row-warn { box-shadow: inset 3px 0 0 var(--warn); }

/* Karten-Darstellung für Tabellen auf kleinen Displays.
   Nur Tabellen mit .table--stack werden umgebrochen; sehr breite
   Datentabellen bleiben bewusst horizontal scrollbar. */
@media (max-width: 720px) {
    .table--stack { min-width: 0; }
    .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table--stack tbody tr {
        display: block;
        padding: var(--s2);
        border-bottom: 1px solid var(--border);
    }
@media (hover: hover) and (pointer: fine) {
.table--stack tbody tr:hover { background: transparent; }
}

    .table--stack td {
        display: grid;
        grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
        gap: var(--s2);
        padding: var(--s0) 0;
        border: 0;
        overflow-wrap: anywhere;
    }
    .table--stack td::before {
        color: var(--text-dim);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        content: attr(data-label);
    }
    .table--stack td:not([data-label]) {
        display: flex;
        align-items: center;
        gap: var(--s2);
        padding-top: var(--s1);
    }
    .table--stack td:not([data-label])::before { content: none; }
    .table-wrap:has(.table--stack) { overflow: visible; }
}

/* ---------- Fakten- und KPI-Raster ---------- */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--s1);
}

.fact {
    min-width: 0;
    padding: 12px var(--s2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.fact small { display: block; color: var(--text-dim); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; }
.fact strong { display: block; margin-top: var(--s0); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
    gap: var(--s1);
}

.kpi {
    padding: 12px var(--s2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.kpi b { display: block; color: var(--text); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi span { color: var(--text-dim); font-size: .74rem; }

/* Statuszusammenfassung (oberste Ebene der Hierarchie) */
.status-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--s1);
    margin: 0 0 var(--s3);
    padding: 0;
    list-style: none;
}

.stat-tile {
    display: grid;
    gap: var(--s0);
    padding: var(--s2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--neutral);
    border-radius: var(--radius);
}
.stat-tile b { color: var(--text); font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.stat-tile span { display: flex; align-items: center; gap: var(--s1); color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.stat-tile small { color: var(--text-dim); font-size: .76rem; font-weight: 400; }
.stat-tile.ok { border-left-color: var(--ok); }
.stat-tile.ok b { color: var(--ok); }
.stat-tile.warn { border-left-color: var(--warn); }
.stat-tile.warn b { color: var(--warn); }
.stat-tile.crit { border-left-color: var(--crit); }
.stat-tile.crit b { color: var(--crit); }
.stat-tile.wide { grid-column: span 2; }
.stat-tile.wide b { font-size: 1rem; }
/* Kacheln mit Text statt Zahl brauchen keine Display-Größe. */
.stat-tile.text b { font-size: 1.05rem; line-height: 1.35; }

/* Werkzeugleiste: Suche, Filter, Sortierung – zurückhaltend gestaltet */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--s1);
    margin-bottom: var(--s2);
}
.toolbar .field { flex: 1 1 200px; margin: 0; }
.toolbar .field.compact { flex: 0 1 180px; }
.toolbar label { margin-bottom: var(--s0); font-size: .78rem; font-weight: 600; color: var(--text-dim); }
.toolbar input, .toolbar select { padding: var(--s1) 12px; font-size: .9rem; }
.toolbar .result-count { flex: 0 0 auto; margin: 0; padding-bottom: 10px; color: var(--text-dim); font-size: .82rem; }
.table-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
.table-sort:hover { color: var(--link); text-decoration: underline; }
}
.table-sort:focus-visible { color: var(--link); text-decoration: underline; }

.table-sort .sort-arrow { color: var(--text-dim); font-size: .86em; text-decoration: none; }
.table-sort.is-active .sort-arrow { color: var(--text); font-weight: 700; }

/* ---------- Prüfungsblöcke der Detailansicht ---------- */
/* Wird von result.php (live) und demo-result.php (Beispiel) genutzt. */

.metric { margin: var(--s2) 0; }
.metric > summary {
    margin: calc(-1 * var(--s1));
    padding: var(--s1);
    border-radius: var(--radius);
    list-style: none;
    cursor: pointer;
}
.metric > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
.metric > summary:hover { background: var(--surface-2); }
}

.metric-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s2); }
.metric-head h2 { margin: var(--s0) 0 0; }
.metric-content { padding-top: var(--s2); }
.summary { margin: 0 0 var(--s2); }

/* Aufklapp-Indikator; identisch für serverseitige und per Skript
   erzeugte Blöcke (.section-collapse-title). */
.metric > summary::after,
.section-collapse-title::after {
    flex: 0 0 auto;
    align-self: center;
    color: var(--text-dim);
    font-size: .8rem;
    transition: transform .15s ease;
    content: "▾";
}
.metric[open] > summary::after,
details[open] > .section-collapse-title::after { transform: rotate(180deg); }
.section-collapse-title { display: flex; justify-content: space-between; gap: var(--s2); font-size: 1.05rem; font-weight: 650; }

.metric-group { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.metric-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.metric-group h3 { margin: 0 0 var(--s2); color: var(--text-dim); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.metric-subgroup { margin: var(--s2) 0; padding: var(--s2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.metric-subgroup h4 { margin: 0 0 var(--s1); color: var(--text-muted); font-size: .82rem; }
.metric-subgroup ul { margin: 0; padding-left: var(--s3); color: var(--text-muted); }
.metric-subgroup li { padding: 2px 0; font-size: .86rem; }

.adapter-list { display: grid; gap: var(--s2); }
/* Karten mit wenigen Werten dürfen nebeneinander stehen. */
.adapter-list--compact { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.adapter-card { padding: var(--s2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.adapter-title { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.adapter-title h4 { margin: 0; font-size: .95rem; }
.adapter-title span { padding: 4px 8px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.adapter-card .empty { padding: 0; background: transparent; border: 0; font-size: .86rem; }
.adapter-card .fact { background: var(--surface); }

.dns-list { display: grid; gap: var(--s1); }
.dns-entry { margin: 0; padding: 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.dns-entry summary { display: flex; justify-content: space-between; gap: var(--s2); padding: 12px var(--s2); list-style: none; cursor: pointer; }
.dns-entry summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
.dns-entry summary:hover { background: var(--surface-3); }
}

.dns-entry summary span { color: var(--text-dim); font-size: .8rem; }
.dns-entry .scroll { padding: 0 var(--s2) var(--s1); }

/* Sehr breite Datentabelle: bleibt bewusst horizontal scrollbar. */
.metric-laufende_prozesse .scroll > table { min-width: 1200px; }
.metric-laufende_prozesse th { white-space: nowrap; }

/* Ausklappbares Rohdaten-/Zusatzpanel */
.panel { margin: var(--s5) 0; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--border); }
.panel > summary { color: var(--text-muted); font-size: .92rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
.panel > summary:hover { color: var(--text); }
}

.panel > summary::after { color: var(--text-dim); content: " ▾"; }
.panel[open] > summary::after { content: " ▴"; }
.panel > .raw { margin-top: var(--s2); }

/* ---------- Details / Rohdaten ---------- */

details { border-radius: var(--radius-lg); }

summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

.raw {
    margin: 0;
    max-height: 380px;
    overflow: auto;
    padding: var(--s2);
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: .78rem/1.6 var(--font-mono);
    white-space: pre-wrap;
    tab-size: 4;
}

.command {
    display: block;
    overflow: auto;
    padding: var(--s0) var(--s1);
    color: var(--text-dim);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .74rem;
    white-space: nowrap;
}

/* ---------- Vom Backend nachgeladene Bausteine (Profilmenü, Bulk-Aktionen) --- */

.bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--s1);
    margin-bottom: var(--s1);
    padding: var(--s1) var(--s2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.bulk-actions label { color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.bulk-upload {
    margin-left: auto;
    padding: 9px 14px;
    color: var(--accent-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.bulk-upload:hover { color: var(--accent-ink); background: var(--accent-strong); text-decoration: none; }
}

.bulk-delete { margin-left: 0; }

.batch-select, #select-all { width: 16px; height: 16px; accent-color: var(--accent); }

.results-table th:last-child, .results-table td:last-child { white-space: nowrap; }

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Breakpoints ---------- */

@media (max-width: 1024px) {
    :root { --gutter: var(--s2); }
}

@media (max-width: 768px) {
    .status-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-tile.wide { grid-column: span 2; }
}

@media (max-width: 420px) {
    :root { --gutter: 12px; }
    .toolbar .field, .toolbar .field.compact { flex: 1 1 100%; }
    .stat-tile b { font-size: 1.4rem; }
}