/* ═══════════════════════════════════════════════════════════════════════════
   NIS2 Suite — Erscheinungsbild
   Pfad: /var/www/dsb-eudsgvo.de/html/nis2/assets/css/suite.css

   EIN Design für die gesamte Anwendung: Start, Login, Admin, Wizard,
   Meine Assessments und Compliance Workspace.

   Bildsprache: Signalblau aus dem Markenzeichen (Schild: #004fff / #1500d4)
   mit weichen Lichtquellen im Hintergrund, milchige Ebenen (Glassmorphism),
   transparente Karten, feine Ränder mit Lichtkante, ruhige Typografie in
   Systemschrift, großzügige Abstände.

   Farbentscheid: Das vorherige Violett (#7c3aed) stand neben dem blau-roten
   Logo als zweiter, fremder Farbton — beide zogen die Aufmerksamkeit. Die
   tragende Akzentfarbe ist deshalb jetzt aus dem Logo selbst genommen; Rot
   und Gold des Schildes bleiben allein dem Markenzeichen vorbehalten, damit
   die Oberfläche ruhig bleibt.

   Technik: Alles hängt an `body.suite`. Die Datei wird nach style.css UND
   nach den Inline-Stilen der Bestandsseiten geladen und gewinnt zusätzlich
   über die höhere Spezifität — die Altregeln bleiben als Rückfallebene.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. Farbwelt ═══════════════════════════════════════════════════════════ */

body.suite {
    /* Akzente */
    --v-500: #3d7dff;   /* Signalblau, tragende Akzentfarbe (aus dem Logo) */
    --v-400: #74a4ff;
    --v-300: #b0cbff;
    --v-600: #1d4ed8;
    /* Weiss auf --v-500 (#3d7dff) ergibt 4,00:1 - unter AA. Fuer gefuellte
       Flaechen mit weisser Schrift gilt deshalb ein eigener, dunklerer Ton
       (6,49:1); --v-500 bleibt fuer Raender, Ringe und Lichtschein, wo es
       keine Textfarbe traegt. */
    --v-fill: #1c50e0;
    --s-control-line: rgba(255, 255, 255, .38);
    --v-glow: rgba(61, 125, 255, .45);

    --s-grad:       linear-gradient(135deg, #2b5cf0 0%, #0a72b8 100%);
    --s-grad-soft:  linear-gradient(135deg, rgba(61,125,255,.22) 0%, rgba(56,180,232,.10) 100%);
    --v-brand-end: var(--v-300);
    --v-link:      var(--v-400);

    /* Untergrund — nahezu schwarz mit Blaustich */
    --s-bg:      #05080f;
    --s-bg-2:    #0a1120;
    --s-solid:   #0f1828;

    /* Ebenen: transparent, nicht flächig */
    --s-surface:   rgba(255, 255, 255, .038);
    --s-surface-2: rgba(255, 255, 255, .065);
    --s-input:     rgba(255, 255, 255, .045);
    --s-glass:     saturate(150%) blur(22px);

    --s-text:   #eef3fc;
    --s-text-2: #a1b2cb;
    --s-text-3: #93a5be;

    /* Ränder mit leichter Lichtkante */
    --s-line:      rgba(255, 255, 255, .085);
    --s-line-soft: rgba(255, 255, 255, .05);
    --s-line-hard: rgba(255, 255, 255, .16);

    --s-ok:   #34d399;  --s-ok-bg:   rgba(52, 211, 153, .12);
    --s-warn: #fbbf24;  --s-warn-bg: rgba(251, 191, 36, .12);
    --s-bad:  #fb7185;  --s-bad-bg:  rgba(251, 113, 133, .12);
    --s-info: var(--v-400); --s-info-bg: rgba(116, 164, 255, .13);
    --s-pur:  #67e8f9;  --s-pur-bg:  rgba(103, 232, 249, .12);
    --s-mute-bg: rgba(255, 255, 255, .045);
    --s-on-accent: #06101d;   /* Text auf gefüllten Akzentflächen */

    --s-edge:      rgba(255, 255, 255, .16);
    --s-shadow:    0 1px 1px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.5);
    --s-shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --s-glow-btn:  0 6px 22px -4px var(--v-glow);

    --s-r-xs: 6px;  --s-r-sm: 10px;  --s-r: 14px;  --s-r-lg: 20px;
    --s-ease: cubic-bezier(.4, 0, .22, 1);

    /* Lichtquellen im Hintergrund */
    --s-aura:
        radial-gradient(62% 55% at 16% 20%, rgba(29, 78, 216, .42) 0%, transparent 72%),
        radial-gradient(58% 52% at 88% 42%, rgba(14, 165, 233, .26) 0%, transparent 70%),
        radial-gradient(70% 55% at 50% 92%, rgba(61, 125, 255, .20) 0%, transparent 72%),
        radial-gradient(90% 70% at 50% 50%, rgba(30, 64, 140, .14) 0%, transparent 78%);
}

/* ── Helles Erscheinungsbild ─────────────────────────────────────────────── */
:root[data-theme="light"] body.suite {
    --v-500: #1d4ed8;  --v-400: #2563eb;  --v-300: #60a5fa;  --v-600: #1a44bd;
    --v-fill: #1a44bd;
    --s-control-line: rgba(16, 26, 43, .34);
    --v-glow: rgba(29, 78, 216, .28);
    --s-grad: linear-gradient(135deg, #1a44bd 0%, #0b74c4 100%);

    --s-bg:      #f4f7fd;
    --s-bg-2:    #ffffff;
    --s-solid:   #ffffff;

    --s-surface:   rgba(255, 255, 255, .52);
    --s-surface-2: rgba(255, 255, 255, .74);
    --s-input:     rgba(255, 255, 255, .92);

    --s-text:   #101a2b;
    --s-text-2: #4f5a6e;
    --s-text-3: #57627a;

    --s-line:      rgba(16, 26, 43, .10);
    --s-line-soft: rgba(16, 26, 43, .06);
    --s-line-hard: rgba(16, 26, 43, .20);

    --s-ok:   #036349;  --s-ok-bg:   rgba(3, 99, 73, .10);
    --s-warn: #b45309;  --s-warn-bg: rgba(180, 83, 9, .10);
    --s-bad:  #be123c;  --s-bad-bg:  rgba(190, 18, 60, .09);
    --s-info: #1a44bd;  --s-info-bg: rgba(26, 68, 189, .10);
    --s-pur:  #0369a1;  --s-pur-bg:  rgba(3, 105, 161, .10);
    --s-mute-bg: rgba(16, 26, 43, .045);
    --s-on-accent: #ffffff;

    --s-edge:      rgba(255, 255, 255, .85);
    --s-shadow:    0 1px 2px rgba(16,26,43,.05), 0 14px 40px -10px rgba(15, 40, 110, .16);
    --s-shadow-sm: 0 1px 2px rgba(16,26,43,.05), 0 6px 20px -10px rgba(15, 40, 110, .18);
    --s-glow-btn:  0 6px 20px -6px var(--v-glow);

    --s-aura:
        radial-gradient(62% 55% at 16% 20%, rgba(61, 125, 255, .26) 0%, transparent 72%),
        radial-gradient(58% 52% at 88% 42%, rgba(14, 165, 233, .20) 0%, transparent 70%),
        radial-gradient(70% 55% at 50% 92%, rgba(116, 164, 255, .15) 0%, transparent 72%),
        radial-gradient(120% 95% at 50% 45%, rgba(61, 125, 255, .17) 0%, transparent 80%);

    /* Auf hellem Grund muss der Verlauf ABdunkeln, nicht aufhellen. */
    --v-brand-end: var(--v-600);
    --v-link:      var(--v-600);
    --s-grad-soft: linear-gradient(135deg, rgba(61,125,255,.09) 0%, rgba(11,116,196,.035) 100%);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite {
        --v-500: #1d4ed8;  --v-400: #2563eb;  --v-300: #60a5fa;  --v-600: #1a44bd;
        --v-fill: #1a44bd;
        --s-control-line: rgba(16, 26, 43, .34);
        --v-glow: rgba(29, 78, 216, .28);
        --s-grad: linear-gradient(135deg, #1a44bd 0%, #0b74c4 100%);
        --s-bg: #f4f7fd;  --s-bg-2: #ffffff;  --s-solid: #ffffff;
        --s-surface: rgba(255,255,255,.52); --s-surface-2: rgba(255,255,255,.74);
        --s-input: rgba(255,255,255,.92);
        --s-text: #101a2b; --s-text-2: #4f5a6e; --s-text-3: #57627a;
        --s-line: rgba(16,26,43,.10); --s-line-soft: rgba(16,26,43,.06);
        --s-line-hard: rgba(16,26,43,.20);
        --s-ok: #036349;  --s-ok-bg: rgba(3,99,73,.10);
        --s-warn: #b45309; --s-warn-bg: rgba(180,83,9,.10);
        --s-bad: #be123c; --s-bad-bg: rgba(190,18,60,.09);
        --s-info: #1a44bd; --s-info-bg: rgba(26,68,189,.10);
        --s-pur: #0369a1; --s-pur-bg: rgba(3,105,161,.10);
        --s-mute-bg: rgba(16,26,43,.045);
        --s-on-accent: #ffffff;
        --s-shadow: 0 1px 2px rgba(16,26,43,.05), 0 14px 40px -10px rgba(15,40,110,.16);
        --s-edge: rgba(255,255,255,.85);
        --s-shadow-sm: 0 1px 2px rgba(16,26,43,.05), 0 6px 20px -10px rgba(15, 40, 110, .18);
        --s-glow-btn: 0 6px 20px -6px var(--v-glow);
        --s-aura:
            radial-gradient(62% 55% at 16% 20%, rgba(61,125,255,.26) 0%, transparent 72%),
            radial-gradient(58% 52% at 88% 42%, rgba(14,165,233,.20) 0%, transparent 70%),
            radial-gradient(70% 55% at 50% 92%, rgba(116,164,255,.15) 0%, transparent 72%),
            radial-gradient(120% 95% at 50% 45%, rgba(61,125,255,.17) 0%, transparent 80%);
        --v-brand-end: var(--v-600);
        --v-link:      var(--v-600);
        --s-grad-soft: linear-gradient(135deg, rgba(61,125,255,.09) 0%, rgba(11,116,196,.035) 100%);
    }
}

/* Tokens aus style.css im Scope neu belegen, damit Altseiten mitziehen */
body.suite {
    --bg-deep: var(--s-bg);        --bg-base: var(--s-bg);
    --bg-surface: var(--s-bg-2);   --bg-elevated: var(--s-bg-2);
    --bg-card: var(--s-surface);   --bg-card-hover: var(--s-surface-2);
    --bg-input: var(--s-input);
    --text-primary: var(--s-text); --text-secondary: var(--s-text-2);
    --text-muted: var(--s-text-3); --text-bright: var(--s-text);
    --text-accent: var(--v-400);
    --border-subtle: var(--s-line-soft); --border-light: var(--s-line);
    --border-medium: var(--s-line-hard); --border-glow: var(--v-glow);
    --success: var(--s-ok);  --warning: var(--s-warn);  --danger: var(--s-bad);
    /* --neon-blue wird an zehn Stellen per Inline-Stil als VERWEISFARBE
       benutzt. Es zeigte auf --v-400, im hellen Modus #2563eb - gemessen
       4,04:1 gegen die Kartenflaeche. Fuer Verweise gibt es --v-link. */
    --neon-blue: var(--v-link);   --neon-cyan: var(--s-ok);
    --neon-purple: var(--v-500); --neon-gold: var(--s-warn);
    --brand-400: var(--v-link);
    --radius-sm: var(--s-r-xs);  --radius: var(--s-r-sm);
    --radius-lg: var(--s-r);     --radius-xl: var(--s-r-lg);
    --grad-primary: var(--s-grad);
}

/* ══ 2. Grundlagen ═════════════════════════════════════════════════════════ */

body.suite {
    background: var(--s-bg);
    color: var(--s-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -.011em;
    min-height: 100vh;
    position: relative;
    /* Keine Ueberblendung am Rumpf: nur er blendete ueber, die Kind-
       elemente wechselten ihre Farbe sofort - fuer gut eine Drittel-
       sekunde stand heller Text auf hellem Grund. */
}

/* Lichtquellen liegen fest hinter dem Inhalt und scrollen nicht mit */
body.suite::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: var(--s-aura); pointer-events: none;
}

body.suite h1, body.suite h2, body.suite h3, body.suite h4 {
    letter-spacing: -.024em; font-weight: 600; color: var(--s-text);
}
/* Nur echte Inhaltsverweise einfärben. Zuvor galt `body.suite a` auch für
   Reiter, Zurück-Pfeil und Kartenlinks und überschrieb deren eigene
   Farben, weil es spezifischer ist als eine einzelne Klasse. */
body.suite a:not([class]) { color: var(--v-link); }
body.suite ::selection { background: rgba(61, 125, 255, .3); color: var(--s-text); }
body.suite .container, body.suite .container-wide {
    --s-pad-x: 1.5rem;
    max-width: 1240px; margin: 0 auto; padding: 2.1rem var(--s-pad-x) 3.5rem;
}
body.suite a:focus-visible, body.suite button:focus-visible,
body.suite select:focus-visible, body.suite input:focus-visible,
body.suite textarea:focus-visible, body.suite summary:focus-visible {
    outline: 2px solid var(--v-400); outline-offset: 2px; border-radius: var(--s-r-xs);
}

/* Kleine Auszeichnung über Überschriften, wie im Vorbild */

/* ══ 3. Kopfleiste ═════════════════════════════════════════════════════════ */

body.suite .topbar, body.suite .header {
    background: var(--s-bg);   /* Rueckfall fuer Engines ohne color-mix */
    background: color-mix(in srgb, var(--s-bg) 76%, transparent);
    -webkit-backdrop-filter: var(--s-glass);
    backdrop-filter: var(--s-glass);
    border-bottom: 1px solid var(--s-line-soft);
    box-shadow: none; position: sticky; top: 0; z-index: 40;
}
body.suite .topbar-inner, body.suite .header-inner {
    max-width: 1240px; margin: 0 auto; padding: .8rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.25rem; flex-wrap: nowrap;
}
body.suite .brand { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 0 1 auto; }
body.suite .brand > div { min-width: 0; }
body.suite .brand h1 { overflow: hidden; text-overflow: ellipsis; }
body.suite .brand h1 {
    font-size: 1.02rem; font-weight: 600; margin: 0; white-space: nowrap;
    background: linear-gradient(120deg, var(--s-text) 0%, var(--v-brand-end) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.suite .brand .sub {
    font-size: .735rem; color: var(--s-text-3); margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Kachel trug den Akzentverlauf und darin eine einfarbige Strichkontur.
   Das Markenzeichen ist jetzt selbst mehrfarbig (siehe suite_brand_mark) —
   ein gefüllter Verlauf darunter würde es erschlagen. Deshalb eine ruhige,
   leicht vertiefte Fläche, die in beiden Darstellungen trägt. */
body.suite .brand-icon {
    width: 36px; height: 36px; border-radius: var(--s-r-sm); flex: 0 0 36px;
    background: var(--s-surface-2); border: 1px solid var(--s-line);
    box-shadow: inset 0 1px 0 var(--s-edge), 0 6px 18px -10px var(--v-glow);
    display: flex; align-items: center; justify-content: center;
}
body.suite .brand-icon::after { display: none; }

/* Das Markenzeichen bringt eigene Farben mit und darf deshalb NICHT von den
   Regeln für Strichsymbole (currentColor, 55 % Breite) erfasst werden. */
body.suite .suite-mark {
    width: 24px; height: 24px; display: block; flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
body.suite .brand-icon .suite-mark { width: 25px; height: 25px; }

/* ── Helle Fassung der Wortmarke ──────────────────────────────────────────
   Die Wortmarken sind weiß. Statt sie im hellen Erscheinungsbild auf eine
   dunkle Platte zu legen, gibt es eine zweite Bilddatei, in der nur die
   Schrift nach Schwarz gekippt ist (app-nis2/bin/logo-lightmode.php). Welche
   gilt, weiß erst der Browser — also stehen beide im Markup und display:none
   nimmt die unpassende aus dem Baum. Der sichtbaren wird die Anzeigeart
   ausdrücklich wieder gesetzt, weil `revert` nur auf den Browserstandard
   zurückfällt, nicht auf die Regel der Seite. */
body.suite .suite-logo--onlight { display: none; }
:root[data-theme="light"] body.suite .suite-logo--ondark { display: none; }
:root[data-theme="light"] body.suite .suite-logo--onlight { display: inline-block; }
:root[data-theme="light"] body.suite .hero-logo.suite-logo--onlight { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .suite-logo--ondark { display: none; }
    :root:not([data-theme="dark"]) body.suite .suite-logo--onlight { display: inline-block; }
    :root:not([data-theme="dark"]) body.suite .hero-logo.suite-logo--onlight { display: block; }
}
/* Wo die Schrift schwarz vorliegt, ist der dunkle Träger überflüssig. Die
   Klasse steht doppelt, weil die Trägerregel weiter unten (`.topbar img`)
   sonst gewinnt: gemessen behielt die helle Fassung deren #121c33. */
:root[data-theme="light"] body.suite .suite-logo.suite-logo--onlight {
    background: none; border-color: transparent; box-shadow: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .suite-logo.suite-logo--onlight {
        background: none; border-color: transparent; box-shadow: none;
    }
}

/* Logo trägt einen eigenen hellen Träger, damit es in BEIDEN Darstellungen
   lesbar bleibt — auf Weiß war es zuvor praktisch unsichtbar. */
body.suite .topbar img, body.suite .header img, body.suite .header-logo {
    height: 34px; width: auto; border-radius: var(--s-r-xs);
    padding: .25rem .45rem; background: rgba(255, 255, 255, .06);
    border: 1px solid var(--s-line-soft);
}
:root[data-theme="light"] body.suite .topbar img,
:root[data-theme="light"] body.suite .header img,
:root[data-theme="light"] body.suite .header-logo {
    background: #121c33; border-color: transparent;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .topbar img,
    :root:not([data-theme="dark"]) body.suite .header img,
    :root:not([data-theme="dark"]) body.suite .header-logo {
        background: #121c33; border-color: transparent;
    }
}

/* Navigation: bricht nicht mehr um, weicht bei Platzmangel aus */
body.suite .nav-links, body.suite .header-right {
    display: flex; align-items: center; gap: .1rem;
    /* Einzeilig, solange es passt; die Marke gibt vorher nach.
       Erst unterhalb 900px bricht die Leiste bewusst um (s.u.). */
    flex-wrap: nowrap; justify-content: flex-end;
    flex: 0 0 auto; row-gap: .25rem;
}

body.suite .nav-links a, body.suite .header-right > a {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    color: var(--s-text-2); font-size: .855rem; font-weight: 450;
    padding: .45rem .7rem; border-radius: var(--s-r-sm);
    text-decoration: none; border: none; background: none;
    transition: color .2s var(--s-ease), background-color .2s var(--s-ease);
}
body.suite .nav-links a:hover, body.suite .header-right > a:hover {
    color: var(--s-text); background: var(--s-surface); transform: none;
}
body.suite .nav-links a svg, body.suite .header-right > a svg {
    width: 15px; height: 15px; opacity: .75;
}

/* Benutzerchip in der Kopfleiste */
body.suite .topbar .nav-links > span:first-child,
body.suite .header-right > div:first-child {
    display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
    padding: .35rem .7rem; margin-right: .3rem;
    font-size: .8rem; font-weight: 500; color: var(--s-text-2) !important;
    background: var(--s-mute-bg) !important;
    border: 1px solid var(--s-line-soft) !important;
    border-radius: var(--s-r-sm) !important;
}
body.suite .topbar .nav-links > span:first-child span,
body.suite .header-right > div:first-child span {
    background: var(--v-fill) !important; color: #fff !important;
    font-size: .625rem !important; font-weight: 700 !important;
    letter-spacing: .04em; padding: .1rem .4rem !important;
    border-radius: var(--s-r-xs) !important;
}

/* ══ 4. Umschalter hell/dunkel ═════════════════════════════════════════════ */

.suite-theme {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: .35rem; flex: 0 0 34px;
    border-radius: 50%; border: 1px solid var(--s-line);
    background: var(--s-surface); color: var(--s-text-2);
    cursor: pointer; transition: all .2s var(--s-ease);
}
.suite-theme:hover {
    color: var(--s-text); background: var(--s-surface-2); border-color: var(--s-line-hard);
}
.suite-theme svg { width: 16px; height: 16px; }
.suite-theme .suite-theme__sun  { display: none; }
.suite-theme .suite-theme__moon { display: block; }
:root[data-theme="light"] .suite-theme .suite-theme__sun  { display: block; }
:root[data-theme="light"] .suite-theme .suite-theme__moon { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .suite-theme .suite-theme__sun  { display: block; }
    :root:not([data-theme="dark"]) .suite-theme .suite-theme__moon { display: none; }
}
.suite-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    padding: .7rem 1.2rem; background: var(--s-solid); color: var(--s-text);
    border-radius: 0 0 var(--s-r) 0;
}
.suite-skip:focus { left: 0; }

/* ══ 5. Karten ═════════════════════════════════════════════════════════════ */

body.suite .card, body.suite .admin-card, body.suite .grc-card,
body.suite .feature-card, body.suite .product-card {
    position: relative;
    background: var(--s-surface);
    -webkit-backdrop-filter: var(--s-glass);
    backdrop-filter: var(--s-glass);
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-lg);
    padding: 1.6rem 1.7rem; margin-bottom: 1.15rem;
    box-shadow: var(--s-shadow-sm);
    animation: none;
}
/* Feine Lichtkante an der Oberseite — macht die Fläche plastisch,
   ohne einen harten Rahmen zu ziehen. */
body.suite .card::before, body.suite .admin-card::before,
body.suite .grc-card::before, body.suite .feature-card::before,
body.suite .grc-kpi::before, body.suite .stat-box::before,
body.suite .stat-card::before, body.suite .grc-mandate-row::before,
body.suite .login-card::after, body.suite .feat-card::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--s-edge), transparent);
    border-radius: var(--s-r-lg) var(--s-r-lg) 0 0; opacity: 1; display: block;
}
body.suite .card::after { display: none; }
body.suite .card:hover { transform: none; }
body.suite .admin-card h3 {
    font-size: 1.04rem; font-weight: 600; margin: 0 0 1.2rem;
    display: flex; align-items: center; gap: .6rem;
}

.grc-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.grc-card__title { font-size: 1.06rem; font-weight: 600; margin: 0; display: flex; align-items: baseline; gap: .6rem; }
.grc-card__hint { font-size: .8rem; color: var(--s-text-3); font-weight: 400; }
.grc-grid { display: grid; gap: 1.15rem; }
.grc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }

/* ══ 6. Kennzahlen ═════════════════════════════════════════════════════════ */

body.suite .stats-row, body.suite .stats-grid, body.suite .grc-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .85rem; margin-bottom: 1.7rem;
}
body.suite .stat-box, body.suite .stat-card, body.suite .grc-kpi {
    position: relative;
    background: var(--s-surface);
    -webkit-backdrop-filter: var(--s-glass);
    backdrop-filter: var(--s-glass);
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r); padding: 1.25rem 1.35rem;
    display: block; text-decoration: none; text-align: left;
    box-shadow: var(--s-shadow-sm);
    transition: transform .25s var(--s-ease), background-color .25s var(--s-ease);
}
body.suite a.grc-kpi:hover, body.suite .stat-box:hover, body.suite .stat-card:hover {
    background: var(--s-surface-2); transform: translateY(-2px);
}
/* Zahlen einheitlich — die Farbe steckt nicht mehr im Markup */
body.suite .stat-num, body.suite .stat-value, .grc-kpi__value {
    font-size: 2rem; font-weight: 600; line-height: 1.05;
    letter-spacing: -.035em; color: var(--s-text);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: .12rem;
    background: none; -webkit-text-fill-color: currentColor;
}
body.suite .stat-lbl, body.suite .stat-label, .grc-kpi__label {
    font-size: .70rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--s-text-3); font-weight: 600; margin-top: .55rem;
}
.grc-kpi__label { margin: 0 0 .6rem; }
.grc-kpi__unit { font-size: 1rem; font-weight: 500; color: var(--s-text-3); }
.grc-kpi__note { font-size: .78rem; color: var(--s-text-2); margin-top: .5rem; line-height: 1.45; }
.grc-kpi--ok   .grc-kpi__value { color: var(--s-ok); }
.grc-kpi--warn .grc-kpi__value { color: var(--s-warn); }
.grc-kpi--bad  .grc-kpi__value { color: var(--s-bad); }
/* Dieselbe Farbe wie das Abzeichen 'NIS2-betroffen' in der Mandantenliste. */
.grc-kpi--info .grc-kpi__value { color: var(--s-info); }
.grc-kpi--purple .grc-kpi__value { color: var(--s-pur); }
.grc-kpi--none .grc-kpi__value { color: var(--s-text-3); font-size: 1.12rem; font-weight: 500; }

/* ══ 7. Statusangaben ══════════════════════════════════════════════════════ */

.grc-badge, body.suite .status-badge, body.suite .risk-badge,
body.suite .badge, body.suite .tab-count {
    display: inline-flex; align-items: center; gap: .34rem;
    padding: .2rem .52rem; border-radius: var(--s-r-xs);
    font-size: .745rem; font-weight: 550; line-height: 1.35;
    border: 1px solid var(--s-line-soft); white-space: nowrap;
    background: var(--s-mute-bg); color: var(--s-text-2);
    text-transform: none; letter-spacing: -.005em;
}
.grc-badge__icon { font-size: .78em; opacity: .9; }
.grc-badge--success { color: var(--s-ok);   background: var(--s-ok-bg);   border-color: color-mix(in srgb, var(--s-ok) 26%, transparent); }
.grc-badge--warning { color: var(--s-warn); background: var(--s-warn-bg); border-color: color-mix(in srgb, var(--s-warn) 26%, transparent); }
.grc-badge--danger  { color: var(--s-bad);  background: var(--s-bad-bg);  border-color: color-mix(in srgb, var(--s-bad) 26%, transparent); }
.grc-badge--info    { color: var(--s-info); background: var(--s-info-bg); border-color: color-mix(in srgb, var(--s-info) 26%, transparent); }
.grc-badge--purple  { color: var(--s-pur);  background: var(--s-pur-bg);  border-color: color-mix(in srgb, var(--s-pur) 26%, transparent); }
.grc-badge--muted   { color: var(--s-text-3); background: var(--s-mute-bg); border-color: var(--s-line-soft); }

/* ══ 8. Schaltflächen ══════════════════════════════════════════════════════ */

body.suite .btn, body.suite .btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .58rem 1.15rem;
    font-size: .875rem; font-weight: 550; letter-spacing: -.01em;
    border-radius: var(--s-r-sm); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; text-transform: none;
    background: none; box-shadow: none;
    transition: all .2s var(--s-ease);
}
body.suite .btn::before, body.suite .btn::after { display: none; }
body.suite .btn:hover { transform: none; }
body.suite .btn-primary, body.suite .btn-hero, body.suite .btn-xl {
    background: var(--s-grad); color: #fff; border: none; box-shadow: var(--s-glow-btn);
}
body.suite .btn-primary:hover { filter: brightness(1.1); box-shadow: 0 8px 26px -4px var(--v-glow); }
body.suite .btn-outline {
    background: var(--s-surface); color: var(--s-text); border-color: var(--s-line);
}
body.suite .btn-outline:hover { background: var(--s-surface-2); border-color: var(--s-line-hard); }
body.suite .btn-ghost { background: none; color: var(--s-text-2); }
body.suite .btn-ghost:hover { background: var(--s-surface); color: var(--s-text); }
/* .btn-success und .btn-green sind in dieser Anwendung AUSNAHMSLOS primaere
   Handlungen ("Abschliessen", "Speichern", "Anlegen", "Senden") - kein
   Statusmerkmal. Als gefuellte Flaeche brachen sie den violetten Akzent an
   der jeweils wichtigsten Schaltflaeche der Seite. Gruen bleibt den
   Zustandsabzeichen vorbehalten. */
body.suite .btn-success, body.suite .btn-green {
    background: var(--s-grad); color: #fff; box-shadow: var(--s-glow-btn); border-color: transparent;
}
body.suite .btn-danger,  body.suite .btn-red   { background: var(--s-bad); color: var(--s-on-accent); }
body.suite .btn-blue   { background: var(--v-fill); color: #fff; }
body.suite .btn-yellow { background: var(--s-warn); color: var(--s-on-accent); }
body.suite .btn-sm { padding: .38rem .78rem; font-size: .8rem; }
body.suite .btn-icon {
    width: 32px; height: 32px; padding: 0; border-radius: var(--s-r-xs);
    border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-text-2);
}
body.suite .btn-icon:hover { background: var(--s-surface-2); color: var(--s-text); }
body.suite .btn-download:hover { color: var(--s-ok); }
body.suite .btn-send:hover     { color: var(--v-400); }
body.suite .btn-delete:hover   { color: var(--s-bad); }
body.suite .btn-disabled { cursor: not-allowed; }
body.suite .btn-logout, body.suite .nav-links a[href*="logout"] { color: var(--s-bad) !important; }

/* ══ 9. Formularelemente ═══════════════════════════════════════════════════ */

body.suite input:not([type]), body.suite input[type=text], body.suite input[type=email], body.suite input[type=tel],
body.suite input[type=url], body.suite input[type=date], body.suite input[type=password],
body.suite input[type=number], body.suite input[type=search],
body.suite select, body.suite textarea,
body.suite .form-input, body.suite .fancy-select {
    width: 100%; padding: .6rem .9rem;
    background: var(--s-input); border: 1px solid var(--s-line);
    border-radius: var(--s-r-sm); color: var(--s-text);
    font: inherit; font-size: .875rem; line-height: 1.45;
    -webkit-appearance: none; appearance: none;
    transition: border-color .18s var(--s-ease), box-shadow .18s var(--s-ease);
}
body.suite input::placeholder, body.suite textarea::placeholder { color: var(--s-text-3); }
body.suite select, body.suite .fancy-select {
    padding-right: 2.3rem; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23a1b2cb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
body.suite select option { background: var(--s-solid); color: var(--s-text); }
body.suite input:focus, body.suite select:focus, body.suite textarea:focus {
    border-color: var(--v-400);
    box-shadow: 0 0 0 3.5px rgba(61, 125, 255, .22);
}
/* Diese Regel hatte dieselbe Spezifitaet (0,2,2) wie die allgemeine
   :focus-visible-Regel weiter oben, stand aber spaeter - ihr `outline: none`
   loeschte damit die eigene Fokusregel des Designsystems fuer JEDES Feld der
   Anwendung. Uebrig blieb ein Schleier aus box-shadow, den der Kontrastmodus
   gar nicht zeichnet: dort war die Tastaturposition unsichtbar.
   Der Ring gehoert an das bedienbare Element - bei den Antwortpillen also an
   das <label>, nicht an das 17px-Radio darin. */
body.suite input:focus-visible,
body.suite select:focus-visible,
body.suite textarea:focus-visible {
    outline: 2px solid var(--v-400);
    outline-offset: 2px;
}
body.suite label:has(> input[type="radio"]:focus-visible),
body.suite label:has(> input[type="checkbox"]:focus-visible),
body.suite .radio-pills label:has(input:focus-visible),
body.suite .sector-card:has(input:focus-visible) {
    outline: 2px solid var(--v-400);
    outline-offset: 2px;
}
/* Der Ring am Radio selbst waere dann doppelt gemoppelt. */
body.suite label:has(> input:focus-visible) > input:focus-visible {
    outline: none;
}
body.suite textarea { min-height: 5rem; resize: vertical; }
/* Nur SCHLICHTE Beschriftungen. `body.suite label` (0,1,2) schlug zuvor
   `.sector-card` (0,1,0) und machte aus der Flex-Karte einen Block: das
   Symbol stand in einer eigenen Zeile, der Umbruch begann links vom
   Optionsfeld, und die geerbte Aussenkante verzog das Raster (senkrecht
   13,6 px gegen waagerecht 8 px). Karten, Pillen und andere Bauteile, die
   ein <label> als Huelle nutzen, bringen ihre eigene Gestaltung mit. */
/* Abschnittsueberschrift gegen Feldbeschriftung: im Assistenten trugen
   "Hauptsektor", "Teilsektor" und "Unternehmensgroesse & Schwellenwerte"
   dieselbe Auszeichnung wie "Mitarbeiterzahl" - der Aufbau der Seite war
   damit nicht zu lesen. Ueberschriften sind jetzt auch Ueberschriften (h3),
   nicht nur groesser. */
body.suite .abschnitt-titel {
    font-size: .95rem; font-weight: 650; color: var(--s-text);
    letter-spacing: -.01em; text-transform: none;
    margin: 1.9rem 0 .85rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--s-edge);
}
body.suite .abschnitt-titel:first-child { margin-top: 0; }

body.suite label:not([class]), body.suite .fl, body.suite .field-label {
    font-size: .8rem; font-weight: 500; color: var(--s-text-2);
    display: block; margin-bottom: .35rem;
}
/* Die Pillen sind zwar klassenlose <label>, aber Bauteile - siehe Abschnitt 28. */
body.suite .sector-card { margin-bottom: 0; }
/* Optionsfelder und Ankreuzfelder werden SELBST gezeichnet.
   Mit der Browserdarstellung (accent-color) zeichnete Chromium im dunklen
   Erscheinungsbild einen olivgruenen Ring um eine dunkle Scheibe - die
   Umkehrfarbe des Violett - und unausgewaehlte Felder sahen ausgewaehlt aus.
   Das Erscheinungsbild darf nicht davon abhaengen, wie ein Browser sich die
   Kontrastfarbe ausrechnet. */
body.suite input[type=checkbox], body.suite input[type=radio] {
    -webkit-appearance: none; appearance: none;
    width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
    margin: 0; display: inline-block; position: relative; cursor: pointer;
    /* --s-line-hard ist im Dunkeln nur rgba(255,255,255,.16) - der Ring war
       auf der Pille praktisch unsichtbar und das Feld wirkte wie eine
       Vollscheibe. Ein Bedienelement braucht eine erkennbare Kontur. */
    border: 1.5px solid var(--s-control-line);
    /* Transparent statt eigener Flaeche: mit --s-bg-2 war das Innere dunkler
       als die Pille darum und las sich weiterhin als "gefuellt". */
    background: transparent;
    transition: border-color .15s var(--s-ease), background-color .15s var(--s-ease);
}
body.suite input[type=radio]    { border-radius: 50%; }
body.suite input[type=checkbox] { border-radius: var(--s-r-xs); }
body.suite input[type=checkbox]:hover, body.suite input[type=radio]:hover {
    border-color: var(--v-400);
}
body.suite input[type=radio]:checked, body.suite input[type=checkbox]:checked {
    border-color: var(--v-500); background: var(--v-500);
}
body.suite input[type=radio]:checked::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: #fff;
}
body.suite input[type=checkbox]:checked::after {
    content: ''; position: absolute; inset: 0;
    background: no-repeat center / 74% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
body.suite input[type=file] { font-size: .82rem; color: var(--s-text-2); padding: .35rem 0; }
body.suite input[type=file]::file-selector-button {
    margin-right: .7rem; padding: .42rem .85rem;
    border: 1px solid var(--s-line); border-radius: var(--s-r-sm);
    background: var(--s-surface); color: var(--s-text);
    font: inherit; font-size: .84rem; cursor: pointer;
}
/* color-scheme steuert, wie der Browser Optionsfelder, Ankreuzfelder,
   Bildlaufleisten und Datumswaehler zeichnet. In ui.php steht
   <meta name="color-scheme" content="dark light"> - das folgt der
   SYSTEMEINSTELLUNG. Wer die App auf dunkel stellt, waehrend das System hell
   ist, bekam weiss gefuellte Optionsfelder, die aussahen wie angekreuzt.
   Die getroffene Wahl muss auch hier gelten. */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body.suite input[type=date] { color-scheme: inherit; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite input[type=date] { color-scheme: light; }
}

body.suite .form-grid, .grc-form {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem 1.1rem;
}
body.suite .form-grid .full, .grc-form__full { grid-column: 1 / -1; }
.grc-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.grc-field label { margin-bottom: 0; }
.grc-field__help { font-size: .755rem; color: var(--s-text-3); line-height: 1.45; }
.grc-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.3rem; }

body.suite .filter-bar, .grc-filters {
    display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
    padding: .9rem 1rem; margin-bottom: 1.35rem;
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r);
}
body.suite .filter-bar select, body.suite .filter-bar input,
body.suite .grc-filters select { width: auto; min-width: 9.5rem; }
body.suite .grc-filters input[type=text],
body.suite .grc-filters input:not([type]) { width: auto; flex: 1; min-width: 11rem; }
body.suite .filter-bar input[type=text] { flex: 1; min-width: 12rem; }

/* ══ 10. Reiter ════════════════════════════════════════════════════════════ */

body.suite .admin-tabs, .grc-tabs {
    display: flex; gap: .15rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--s-line-soft);
    margin-bottom: 1.6rem; background: none;
}
body.suite .admin-tab, .grc-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .68rem .95rem .78rem;
    font-size: .88rem; font-weight: 450;
    color: var(--s-text-3); text-decoration: none;
    background: none; border: none; border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: color .2s var(--s-ease);
}
body.suite .admin-tab:hover, .grc-tab:hover { color: var(--s-text); background: none; }
body.suite .admin-tab.active, .grc-tab.is-active {
    color: var(--s-text); border-bottom-color: var(--v-500); background: none;
}
.grc-tab__icon { opacity: .55; font-size: .9em; }
.grc-tab.is-active .grc-tab__icon { opacity: 1; color: var(--v-400); }
body.suite .admin-tab.active .tab-count {
    background: var(--s-info-bg); color: var(--s-info);
    border-color: color-mix(in srgb, var(--s-info) 26%, transparent);
}

/* ══ 11. Tabellen ══════════════════════════════════════════════════════════ */

body.suite .data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
body.suite .data-table th {
    text-align: left; padding: .6rem .75rem; background: none;
    font-size: .70rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .09em; color: var(--s-text-3);
    border-bottom: 1px solid var(--s-line);
}
body.suite .data-table td {
    padding: .72rem .75rem; border-bottom: 1px solid var(--s-line-soft); color: var(--s-text);
}
body.suite .data-table tr:last-child td { border-bottom: none; }
body.suite .data-table tbody tr:hover { background: var(--s-mute-bg); }
body.suite .actions-cell, body.suite .actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
/* Zahlenspalten mit gleichmäßiger Ziffernbreite */
body.suite .data-table td b, body.suite .data-table td strong { font-variant-numeric: tabular-nums; }

/* ══ 12. Hinweise ══════════════════════════════════════════════════════════ */

body.suite .notice, body.suite .alert {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .9rem 1.1rem; margin-bottom: 1.15rem;
    border-radius: var(--s-r-sm); border: 1px solid var(--s-line-soft);
    background: var(--s-mute-bg); font-size: .875rem; color: var(--s-text);
}
body.suite .notice-success, body.suite .alert-success { background: var(--s-ok-bg);  border-color: color-mix(in srgb, var(--s-ok) 26%, transparent); }
body.suite .notice-danger,  body.suite .alert-danger  { background: var(--s-bad-bg); border-color: color-mix(in srgb, var(--s-bad) 26%, transparent); }
body.suite .notice-info,    body.suite .alert-info    { background: var(--s-info-bg); border-color: color-mix(in srgb, var(--s-info) 26%, transparent); }
body.suite .notice-icon { flex: 0 0 auto; opacity: .9; }

/* ══ 13. Personenchips ═════════════════════════════════════════════════════ */

body.suite .team-chips, body.suite .colleague-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
body.suite .team-chip, body.suite .colleague-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; font-size: .82rem;
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-sm); color: var(--s-text);
}

/* ══ 14. Modale ════════════════════════════════════════════════════════════ */

body.suite .modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10, 7, 16, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; padding: 1.5rem;
}
body.suite .modal-overlay.open { display: flex; }
body.suite .modal-box {
    background: var(--s-solid); border: 1px solid var(--s-line);
    border-radius: var(--s-r-lg); padding: 1.8rem;
    max-width: 620px; width: 100%; max-height: 88vh; overflow-y: auto;
    box-shadow: var(--s-shadow); position: relative;
}
body.suite .modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--s-line); background: var(--s-surface);
    color: var(--s-text-2); cursor: pointer;
}

/* ══ 15. Startseite ════════════════════════════════════════════════════════ */

body.suite .hero {
    text-align: center; padding: 4rem 1.5rem 3rem;
    border-radius: var(--s-r-lg);
    background: var(--s-grad-soft);
    border: 1px solid var(--s-line-soft);
    margin-bottom: 1.6rem; position: relative; overflow: hidden;
}
body.suite .hero::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
body.suite .hero h1, body.suite .hero h2, body.suite .hero-title {
    font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; margin: 0 0 1.1rem;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--s-text) 0%, var(--v-brand-end) 60%, var(--v-link) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.suite .hero p, body.suite .hero-sub {
    font-size: 1.02rem; color: var(--s-text-2); max-width: 44rem;
    margin: 0 auto 1.9rem; line-height: 1.65;
}

/* ══ 16. Wizard ════════════════════════════════════════════════════════════ */

body.suite .progress-wrap {
    background: var(--s-bg);
    background: color-mix(in srgb, var(--s-bg) 80%, transparent);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
    border-bottom: 1px solid var(--s-line-soft); padding: .9rem 0;
}
body.suite .progress-track { background: var(--s-mute-bg); height: 4px; border-radius: 99px; }
body.suite .progress-fill  { background: var(--s-grad); height: 100%; border-radius: 99px; }
body.suite .step-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; color: var(--s-text-3);
}
body.suite .step-dot.active { background: var(--s-grad); color: #fff; border-color: transparent; box-shadow: var(--s-glow-btn); }
body.suite .step-dot.done   { background: var(--s-ok-bg); color: var(--s-ok); border-color: transparent; }
body.suite .q-block { padding: 1.15rem 0; border-bottom: 1px solid var(--s-line-soft); }
body.suite .radio-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
body.suite .radio-pills label {
    padding: .45rem .9rem; border-radius: var(--s-r-sm);
    border: 1px solid var(--s-line); background: var(--s-surface);
    font-size: .85rem; cursor: pointer; margin: 0;
}

/* ══ 17. Workspace ═════════════════════════════════════════════════════════ */

.grc-mandatebar {
    background: var(--s-bg);
    background: color-mix(in srgb, var(--s-bg) 76%, transparent);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
    border-bottom: 1px solid var(--s-line-soft);
    position: sticky; top: 0; z-index: 20;
}
.grc-mandatebar__inner {
    max-width: 1240px; margin: 0 auto; padding: 1.2rem 1.5rem 0;
    display: flex; flex-direction: column; gap: .95rem;
}
.grc-mandatebar__id { display: flex; align-items: center; gap: .9rem; }
.grc-mandatebar__name { font-size: 1.55rem; font-weight: 600; letter-spacing: -.028em; line-height: 1.15; }
.grc-mandatebar__meta { font-size: .8rem; color: var(--s-text-3); margin-top: .15rem; }
.grc-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    border: 1px solid var(--s-line); background: var(--s-surface);
    color: var(--s-text-2); text-decoration: none; font-size: 1rem;
    transition: all .2s var(--s-ease);
}
.grc-back:hover { color: var(--s-text); background: var(--s-surface-2); }

.grc-details {
    border: 1px solid var(--s-line-soft); border-radius: var(--s-r);
    background: var(--s-mute-bg); margin-top: 1rem; overflow: hidden;
}
.grc-details > summary {
    cursor: pointer; padding: .85rem 1rem; font-size: .875rem; font-weight: 500;
    color: var(--s-text-2); list-style: none; display: flex; align-items: center; gap: .6rem;
}
.grc-details > summary:hover { background: var(--s-surface); }
.grc-details > summary::-webkit-details-marker { display: none; }
.grc-details > summary::before {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px;
    border-right: 1.5px solid var(--s-text-3); border-bottom: 1.5px solid var(--s-text-3);
    transform: rotate(-45deg); transition: transform .2s var(--s-ease);
}
.grc-details[open] > summary::before { transform: rotate(45deg); }
.grc-details[open] > summary { border-bottom: 1px solid var(--s-line-soft); }
.grc-details > *:not(summary) { padding: 1.15rem 1.2rem; }

.grc-item { border-bottom: 1px solid var(--s-line-soft); }
.grc-item:last-child { border-bottom: none; }
.grc-item > summary {
    /* 69 Massnahmenzeilen ohne jede Andeutung, dass sie sich oeffnen lassen -
       nur Zeigerform und Hoverflaeche verrieten die Hauptinteraktion des
       Moduls. Dasselbe Winkelzeichen wie bei .grc-details. */
    display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto auto .9rem;
    align-items: center; gap: .9rem; padding: .85rem .35rem;
    cursor: pointer; list-style: none; border-radius: var(--s-r-sm);
    transition: background-color .18s var(--s-ease);
}
.grc-item > summary:hover { background: var(--s-surface); }
.grc-item > summary::-webkit-details-marker { display: none; }
.grc-item > summary::after {
    content: ''; justify-self: end; width: 7px; height: 7px;
    border-right: 1.5px solid var(--s-text-3); border-bottom: 1.5px solid var(--s-text-3);
    transform: rotate(-45deg); transition: transform .2s var(--s-ease);
}
.grc-item[open] > summary::after { transform: rotate(45deg); }
.grc-item__code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .70rem; font-weight: 500; color: var(--s-text-3);
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-xs); padding: .2rem .3rem; text-align: center;
}
.grc-item__title { font-size: .9rem; font-weight: 450; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grc-item__body { padding: .3rem .35rem 1.6rem; }
.grc-item__lead { font-size: .875rem; color: var(--s-text-2); line-height: 1.6; margin: 0 0 1.15rem; max-width: 62ch; }
.grc-sub {
    font-size: .70rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .09em; color: var(--s-text-3); margin: 1.6rem 0 .7rem;
}
.grc-sub:first-child { margin-top: 0; }

.grc-group { margin-top: 2rem; }
.grc-group:first-of-type { margin-top: .4rem; }
.grc-group__head {
    display: flex; align-items: baseline; gap: .6rem;
    padding-bottom: .55rem; margin-bottom: .25rem; border-bottom: 1px solid var(--s-line);
}
.grc-group__title { font-size: .95rem; font-weight: 600; }
.grc-group__count { font-size: .78rem; color: var(--s-text-3); }

.grc-steps { display: flex; flex-direction: column; gap: .55rem; }
.grc-step {
    display: flex; align-items: flex-start; gap: .9rem; padding: .95rem 1.05rem;
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-left: 2.5px solid var(--s-line-hard); border-radius: var(--s-r-sm);
    text-decoration: none; transition: background-color .2s var(--s-ease);
}
a.grc-step:hover { background: var(--s-surface-2); }
.grc-step--kritisch { border-left-color: var(--s-bad); }
.grc-step--hoch     { border-left-color: var(--s-warn); }
.grc-step--mittel   { border-left-color: var(--v-400); }
.grc-step--niedrig  { border-left-color: var(--s-text-3); }
.grc-step__rank { flex: 0 0 1.4rem; font-size: .875rem; font-weight: 600; color: var(--s-text-3); font-variant-numeric: tabular-nums; }
.grc-step__body { flex: 1; min-width: 0; }
.grc-step__title { font-size: .9rem; font-weight: 500; margin-bottom: .3rem; }
.grc-step__meta { font-size: .78rem; color: var(--s-text-2); display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.grc-step__why { font-size: .78rem; color: var(--s-text-3); margin-top: .35rem; line-height: 1.45; }

.grc-mandates { display: grid; gap: .55rem; }
.grc-mandate-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center; gap: 1.1rem; padding: 1.05rem 1.25rem;
    background: var(--s-surface);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
    border: 1px solid var(--s-line-soft); border-radius: var(--s-r);
    text-decoration: none;
    transition: background-color .2s var(--s-ease), transform .2s var(--s-ease);
}
.grc-mandate-row:hover { background: var(--s-surface-2); transform: translateY(-2px); }
.grc-mandate-row__name { font-size: .96rem; font-weight: 550; color: var(--s-text); }
.grc-mandate-row__meta { font-size: .79rem; color: var(--s-text-3); margin-top: .22rem; }
.grc-mandate-row__stat { font-size: .8rem; color: var(--s-text-2); text-align: right; white-space: nowrap; }
.grc-company-group { margin-bottom: 2rem; }
.grc-company-group__title {
    font-size: .70rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--s-text-3); margin: 0 0 .7rem .1rem; font-weight: 600;
}

.grc-empty { text-align: center; padding: 3.4rem 1.5rem; }
.grc-empty__mark { font-size: 1.7rem; color: var(--v-400); opacity: .45; margin-bottom: .9rem; }
.grc-empty__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .55rem; }
.grc-empty__text { font-size: .875rem; color: var(--s-text-2); max-width: 34rem; margin: 0 auto 1.6rem; line-height: 1.65; }

.grc-dl { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: .55rem 1.4rem; font-size: .855rem; line-height: 1.55; }
.grc-dl dt { color: var(--s-text-3); }
.grc-dl dd { margin: 0; color: var(--s-text); }

.grc-bar { height: 5px; background: var(--s-mute-bg); border-radius: 99px; overflow: hidden; }
.grc-bar__fill { height: 100%; border-radius: 99px; transition: width .5s var(--s-ease); }
.grc-meter { margin-bottom: 1rem; }
.grc-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .35rem; }
.grc-meter__label { font-size: .85rem; }
.grc-meter__value { font-size: .8rem; font-weight: 550; white-space: nowrap; font-variant-numeric: tabular-nums; }

.grc-pagination { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.4rem 0 .2rem; font-size: .82rem; color: var(--s-text-3); }
.grc-pagination a { color: var(--v-link); text-decoration: none; }

.grc-comment { padding: .75rem .95rem; margin-bottom: .45rem; background: var(--s-mute-bg); border: 1px solid var(--s-line-soft); border-radius: var(--s-r-sm); }
.grc-comment__meta { font-size: .74rem; color: var(--s-text-3); margin-bottom: .3rem; }
.grc-comment__body { font-size: .855rem; line-height: 1.55; }
.grc-link-row {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    padding: .6rem .75rem; margin-bottom: .3rem;
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-sm); font-size: .855rem;
}
.grc-link-row__main { flex: 1; min-width: 10rem; }

/* ══ 18. Fußzeile ══════════════════════════════════════════════════════════ */

body.suite .footer {
    border-top: 1px solid var(--s-line-soft); background: none;
    padding: 1.8rem 0; margin-top: 1.5rem; text-align: center;
    font-size: .78rem; color: var(--s-text-3);
}

/* ══ 19. Anmeldeseite ══════════════════════════════════════════════════════ */

body.suite {
    --skeuo-bg-base: var(--s-bg);       --skeuo-bg-panel: var(--s-surface);
    --skeuo-bg-recessed: var(--s-input);--skeuo-cyan: var(--v-400);
    --skeuo-cyan-bright: var(--v-300);  --skeuo-green: var(--s-ok);
    --skeuo-orange: var(--s-warn);      --skeuo-text: var(--s-text);
    --skeuo-text-muted: var(--s-text-3);--skeuo-border-soft: var(--s-line-soft);
    --skeuo-border-recessed: var(--s-line);
    --skeuo-edge-top: transparent;      --skeuo-edge-bottom: transparent;
    --skeuo-edge-top-strong: transparent; --skeuo-bg-vignette: transparent;
}
/* Die Anmeldeseite bringt eine eigene, 430px breite Spalte mit
   (login.php:164). Zentriert wird deshalb der Seitenkoerper, nicht die
   Spalte - sonst legen sich Hintergrund und Lichtquellen nur ueber den
   schmalen Streifen. */
body.suite .login-wrapper { background: none; margin: 0 auto; }
/* Klasse statt :has() - dieselbe Wirkung, aber ohne Abhaengigkeit von
   einer erst seit 2023 verbreiteten Selektorfunktion. */
body.suite.suite-centered {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 2.5rem 1.25rem;
}
body.suite .security-badge {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem; line-height: 1.4; text-align: left;
}
body.suite .noise, body.suite .hairline, body.suite .led-stack, body.suite .led { display: none; }
body.suite .login-card {
    background: var(--s-surface);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
    border: 1px solid var(--s-line-soft); border-radius: var(--s-r-lg);
    box-shadow: var(--s-shadow);
}

/* .login-panel-top trug dieselbe Gestaltung wie die Karte und umschloss damit
   als zweiter, gleich aussehender Rahmen genau ein Kind: .logo-wrapper. Da es
   keinen Innenabstand hat (gemessen 368x182 um 315x172), lagen beide Raender
   praktisch aufeinander - ein Doppelrahmen ohne Zweck. Der aeussere faellt
   weg; der innere bleibt, weil die weisse Wortmarke im hellen Erscheinungs-
   bild einen dunklen Traeger braucht. Das Rasterlayout bleibt unberuehrt. */
body.suite .login-panel-top {
    background: none; border: none; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Ohne den aeusseren Rahmen stand der Traeger schmaler als die Eingabefelder
   darunter - als Rasterelement war er nur so breit wie sein Inhalt. */
body.suite .login-panel-top > .logo-wrapper { justify-self: stretch; width: 100%; }
body.suite .login-card::before, body.suite .login-card::after,
body.suite .login-panel-top::before, body.suite .login-panel-top::after { display: none; }
body.suite .skeuo-label {
    font-size: .70rem; font-weight: 600; color: var(--s-text-3);
    text-transform: uppercase; letter-spacing: .09em; text-shadow: none;
}
body.suite .input-wrapper { box-shadow: none; background: none; border: none; padding: 0; }
body.suite .login-card .form-input {
    background: var(--s-input); border: 1px solid var(--s-line);
    border-radius: var(--s-r-sm); box-shadow: none; color: var(--s-text);
    padding: .7rem .95rem .7rem 2.5rem;
}
body.suite .login-card .form-input:focus {
    border-color: var(--v-400); box-shadow: 0 0 0 3.5px rgba(61,125,255,.22);
}
body.suite .field-icon { color: var(--s-text-3); opacity: .9; }
body.suite .btn-login {
    background: var(--s-grad); color: #fff; border: none;
    border-radius: var(--s-r-sm); box-shadow: var(--s-glow-btn);
    font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    padding: .85rem 1.2rem; font-size: .82rem;
}
body.suite .btn-login::before, body.suite .btn-login::after { display: none; }
body.suite .btn-login:hover { filter: brightness(1.1); transform: none; }
body.suite .security-badge {
    background: var(--s-mute-bg); border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-xs); color: var(--s-text-3); box-shadow: none; font-size: .75rem;
}
body.suite .login-footer { color: var(--s-text-3); font-size: .78rem; }
body.suite .pw-toggle { color: var(--s-text-3); background: none; border: none; }
body.suite .pw-toggle:hover { color: var(--s-text); }

/* ══ 20. Responsiv ═════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    body.suite .brand .sub { display: none; }
}
@media (max-width: 900px) {
        body.suite .container, body.suite .container-wide { --s-pad-x: 1.25rem; padding: 1.5rem var(--s-pad-x) 2.5rem; }
    body.suite .topbar-inner, body.suite .header-inner { padding: .75rem 1.25rem; }
    .grc-mandatebar__inner { padding: .95rem 1.25rem 0; }
    body.suite .topbar-inner, body.suite .header-inner { flex-wrap: wrap; gap: .7rem; }
    body.suite .nav-links, body.suite .header-right {
        width: 100%; justify-content: flex-start; flex-wrap: wrap;
    }
    .grc-mandatebar__inner { padding: .95rem 1rem 0; }
    .grc-mandatebar__name { font-size: 1.28rem; }
    .grc-mandate-row { grid-template-columns: 1fr; gap: .55rem; }
    .grc-mandate-row__stat { text-align: left; }
    body.suite .admin-tabs, .grc-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .grc-item > summary { grid-template-columns: 3.9rem minmax(0,1fr); row-gap: .5rem; }
    .grc-item > summary > .grc-badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 620px) {
    body.suite .stats-row, body.suite .stats-grid, body.suite .grc-kpis { grid-template-columns: 1fr 1fr; }
    body.suite .form-grid, .grc-form { grid-template-columns: 1fr; }
    .grc-dl { grid-template-columns: 1fr; gap: .2rem .8rem; }
    .grc-dl dd { margin-bottom: .5rem; }
    body.suite .card, body.suite .admin-card, body.suite .grc-card { padding: 1.2rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    body.suite *, body.suite *::before, body.suite *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
}

/* ══ 21. Nachträge aus der Sichtprüfung ═══════════════════════════════════ */

/* Aktionsreihe auf der Startseite */
body.suite .start-actions {
    display: flex; gap: .7rem; justify-content: center;
    flex-wrap: wrap; margin: 1.4rem 0 2.2rem;
}
body.suite .btn-lg { padding: .78rem 1.5rem; font-size: .92rem; }
body.suite .start-actions__debug {
    border: 1px dashed var(--s-line-hard); color: var(--s-text-3);
}

/* Der Hero-Titel folgte noch der alten türkisen Verlaufsvorgabe aus
   style.css. Hier gilt die violette Farbwelt. */
body.suite .hero h1, body.suite .hero h2, body.suite .hero-title, body.suite h1.hero-title {
    background: linear-gradient(120deg, var(--s-text) 0%, var(--v-brand-end) 60%, var(--v-link) 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Kennzahlen liegen auf durchscheinenden Flächen. Ohne eigenen Grund
   schlägt die Hintergrundbeleuchtung ungleichmäßig durch und lässt
   nebeneinanderliegende Karten unterschiedlich wirken. Ein sehr leichter
   Eigengrund gleicht das aus, ohne die Transparenz aufzugeben. */
body.suite .stat-box, body.suite .stat-card, body.suite .grc-kpi,
body.suite .card, body.suite .admin-card, body.suite .grc-card {
    background-color: var(--s-bg);
    background-color: color-mix(in srgb, var(--s-bg) 55%, transparent);
    background-image: linear-gradient(180deg, var(--s-surface), var(--s-surface));
}

/* Zahlen in Listen einheitlich, nie als Code ausgezeichnet */
body.suite .score-mono, body.suite .score, body.suite td b {
    font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Laufende Nummern dürfen nicht abgeschnitten werden */
body.suite .data-table td:first-child, body.suite .data-table th:first-child {
    white-space: nowrap; overflow: visible; text-overflow: clip;
    min-width: 3.2rem; color: var(--s-text-3);
}

/* Statuswerte, die aus der Datenbank kommen, tragen teils englische
   Schlüssel. Bis sie übersetzt sind, wenigstens einheitlich auszeichnen. */
body.suite .status-badge { text-transform: none; }

/* Hervorgehobene Produktkarte trug noch den türkisen Rahmen der Altfassung */
body.suite .feat-card, body.suite .feat-card.featured {
    background-color: var(--s-bg);
    background-color: color-mix(in srgb, var(--s-bg) 55%, transparent);
    background-image: linear-gradient(180deg, var(--s-surface), var(--s-surface));
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-lg);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
}
body.suite .feat-card.featured {
    border-color: color-mix(in srgb, var(--v-500) 40%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-500) 18%, transparent), var(--s-shadow-sm);
}
body.suite .feat-card.featured::before {
    background: var(--s-grad); color: #fff;
    letter-spacing: .08em; font-weight: 600;
}

/* ── Verweis-Komponenten setzen ihre Textfarbe selbst ─────────────────────
   Ganze Karten und Zeilen sind <a>-Elemente. Ohne eigene Farbe würden sie
   die Standardfarbe des Browsers für Verweise erben (kräftiges Blau). */
body.suite a.grc-step,
body.suite a.grc-mandate-row,
body.suite a.grc-kpi,
body.suite a.grc-back,
body.suite a.grc-tab,
body.suite a.stat-box,
body.suite a.stat-card,
body.suite a.feat-card { color: var(--s-text); }

body.suite .grc-step__title,
body.suite .grc-mandate-row__name { color: var(--s-text); }
body.suite .grc-step__meta,
body.suite .grc-mandate-row__stat { color: var(--s-text-2); }
body.suite .grc-step__why,
body.suite .grc-mandate-row__meta { color: var(--s-text-3); }
body.suite a.grc-back { color: var(--s-text-2); }
body.suite a.grc-tab  { color: var(--s-text-3); }
body.suite a.grc-tab.is-active { color: var(--s-text); }


/* ══ 22. "Meine Assessments" — eigene Klassennamen dieser Seite ═══════════
   Sie verwendet als einzige .header-nav/.header-left/.header-title statt
   .nav-links/.brand. Ohne Aufnahme in die Selektorlisten behielt sie ihre
   fest verdrahteten Dunkelmodus-Farben und war im hellen Modus unlesbar. */

body.suite .header-nav {
    display: flex; align-items: center; gap: .1rem;
    flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
body.suite .header-nav::-webkit-scrollbar { display: none; }
body.suite .header-nav > a {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    color: var(--s-text-2); font-size: .855rem; font-weight: 450;
    padding: .45rem .7rem; border-radius: var(--s-r-sm); text-decoration: none;
}
body.suite .header-nav > a:hover { color: var(--s-text); background: var(--s-surface); }
body.suite .header-left { display: flex; align-items: center; gap: .85rem; min-width: 0; }
body.suite .header-title {
    font-size: 1.02rem; font-weight: 600; color: var(--s-text);
    background: none; -webkit-text-fill-color: currentColor;
}
body.suite .header-subtitle { font-size: .735rem; color: var(--s-text-3); }
body.suite .company-name    { color: var(--s-text); }
body.suite .company-contact { color: var(--s-text-2); }
body.suite .tenant-name     { color: var(--v-link); }
body.suite .risk-na         { color: var(--s-text-3); }
body.suite .status-icon, body.suite .risk-dot { opacity: .95; }



/* Umschalter auf der Anmeldeseite */
/* Umschalter gehört an den Bildschirmrand, nicht in die Anmeldekarte */
.suite-theme-corner { position: fixed; top: 1.25rem; right: 1.5rem; z-index: 60; }


/* ══ 23. Anmeldeseite — Nacharbeiten aus der Sichtpruefung ════════════════ */

/* Das Logo ist eine helle Wortmarke. Im hellen Erscheinungsbild stand sie
   weiss auf weiss. Sie bekommt denselben dunklen Traeger wie in der
   Kopfleiste — und verliert den tuerkisen Schlagschatten der Altfassung. */
body.suite .logo-wrapper {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r); padding: 1.1rem 1rem .9rem;
}
body.suite .logo-wrapper img { filter: none; }
:root[data-theme="light"] body.suite .logo-wrapper {
    background: #121c33; border-color: transparent;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .logo-wrapper {
        background: #121c33; border-color: transparent;
    }
}
/* Liegt die Wortmarke in schwarzer Schrift vor, entfällt die dunkle Platte —
   und damit auch der Grund, die Beschriftung darunter hell zu setzen. */
:root[data-theme="light"] body.suite .logo-wrapper--onlight,
:root:not([data-theme="dark"]) body.suite .logo-wrapper--onlight {
    background: rgba(16, 26, 43, .04); border-color: var(--s-line-soft);
}
:root[data-theme="light"] body.suite .logo-wrapper--onlight .skeuo-label,
:root:not([data-theme="dark"]) body.suite .logo-wrapper--onlight .skeuo-label {
    color: var(--s-text-3);
}

/* Sicherheitshinweis lief aus seinem Kasten: Zeichen oben, Text zweizeilig. */
body.suite .security-badge {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .8rem; line-height: 1.35;
    white-space: normal; text-align: left;
}
body.suite .security-badge svg { flex: 0 0 auto; filter: none; }

/* Die Anmeldekarte trug die Lichtkante nicht — ausgerechnet die
   prominenteste Karte der Anwendung war vom eigenen Prinzip ausgenommen. */
body.suite .login-card { position: relative; }
body.suite .login-card::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
    display: block; border-radius: var(--s-r-lg) var(--s-r-lg) 0 0;
}
:root[data-theme="light"] body.suite .login-card::after { opacity: 0; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .login-card::after { opacity: 0; }
}

/* Breite Tabellen behalten ihre Mindestbreite und werden waagerecht
   gescrollt, statt Inhalte abzuschneiden. */
body.suite .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.suite .table-scroll > table { min-width: 1040px; }
body.suite .table-scroll::-webkit-scrollbar { height: 8px; }
body.suite .table-scroll::-webkit-scrollbar-thumb {
    background: var(--s-line-hard); border-radius: 99px;
}

/* ══ 24. Reste der Vorgängergestaltung auf der Startseite ═════════════════ */

/* Das diagonale Eckband stammt aus der alten Aufmachung. Ein Abzeichen im
   Kartenkopf sagt dasselbe, ohne die Karte zu überlagern. */
body.suite .feat-card.featured::after {
    content: 'Empfohlen';
    position: absolute; top: .9rem; right: .9rem; left: auto; bottom: auto;
    width: auto; height: auto; inset: auto .9rem auto auto;
    transform: none; padding: .2rem .55rem;
    background: var(--s-info-bg); color: var(--s-info);
    border: 1px solid color-mix(in srgb, var(--s-info) 26%, transparent);
    border-radius: var(--s-r-xs);
    font-size: .7rem; font-weight: 600; letter-spacing: 0;
    text-transform: none; display: block;
}
/* Das diagonale Band der Altfassung abschalten */
body.suite .feat-card.featured::before {
    content: ''; transform: none; padding: 0; background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    inset: 0 0 auto 0; height: 1px; width: auto; color: transparent;
    font-size: 0; border: none; border-radius: var(--s-r-lg) var(--s-r-lg) 0 0;
}
/* Zeichenplättchen der Produktkarten trugen noch die blaue Tönung */
body.suite .feat-icon, body.suite .cat-icon {
    background: var(--s-grad) !important;
    color: #fff; border-radius: var(--s-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
}
/* Gestrichelte Sonderform gibt es sonst nirgends */
body.suite .start-actions__debug { border-style: solid; }


/* ══ 25. Nacharbeiten aus der unabhaengigen Pruefung ══════════════════════ */

/* Die eigene Grundregel fuer .risk-badge hatte die Bedeutungsfarben
   ueberschrieben - alle Risikostufen erschienen im selben Grau. */
body.suite .risk-badge.risk-high     { color: var(--s-bad);  background: var(--s-bad-bg);  border-color: color-mix(in srgb, var(--s-bad) 26%, transparent); }
body.suite .risk-badge.risk-medium   { color: var(--s-warn); background: var(--s-warn-bg); border-color: color-mix(in srgb, var(--s-warn) 26%, transparent); }
body.suite .risk-badge.risk-elevated { color: var(--s-warn); background: var(--s-warn-bg); border-color: color-mix(in srgb, var(--s-warn) 26%, transparent); }
body.suite .risk-badge.risk-low      { color: var(--s-ok);   background: var(--s-ok-bg);   border-color: color-mix(in srgb, var(--s-ok) 26%, transparent); }
body.suite .status-badge.status-done { color: var(--s-ok);   background: var(--s-ok-bg);   border-color: color-mix(in srgb, var(--s-ok) 26%, transparent); }
body.suite .status-badge.status-open { color: var(--s-warn); background: var(--s-warn-bg); border-color: color-mix(in srgb, var(--s-warn) 26%, transparent); }

/* Dieselbe Kennzahl trug drei Schriftarten: JetBrains Mono im Admin,
   Courier New in "Meine Assessments", Systemschrift im Workspace. */
body.suite .stat-num, body.suite .stat-value, body.suite .grc-kpi__value {
    font-family: inherit;
}

/* Die Ausweichzeile "nicht erhoben" stand mit halber Groesse neben ihren
   Geschwistern und liess die Reihe unruhig wirken. */
.grc-kpi--none .grc-kpi__value { font-size: 1.35rem; }

/* "Random Test" ist ein aktiver Verweis - er darf nicht wie ein
   deaktiviertes Element aussehen. */
body.suite .start-actions__debug { color: var(--s-text-2); border-color: var(--s-line); }

/* Leerzustandszeichen: das Ringzeichen wirkte wie ein fehlendes Glyph. */
.grc-empty__mark { font-size: 1.5rem; font-weight: 300; }

/* Suchfeld mit vorangestelltem Zeichen. Das Zeichen gehört NEBEN das Feld,
   nicht in dessen placeholder-Attribut - dort zerbricht es das Markup. */
body.suite .search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 12rem; }
body.suite .search-field__icon {
    position: absolute; left: .75rem; color: var(--s-text-3); pointer-events: none;
}
body.suite .search-field input { padding-left: 2.2rem; }

/* ══ 26. Assistent — Sektorauswahl und Schrittanzeiger ════════════════════
   style.css verdrahtet für .sector-card einen dunklen Schieferverlauf.
   Im hellen Erscheinungsbild stand dadurch dunkle Schrift auf dunkler
   Kachel mitten auf weißer Seite — gemessen 1,21:1. Das ist der
   Pflichtschritt der Sektorwahl, also der Hauptweg der Anwendung. */

body.suite .sector-card,
body.suite.assessment-step-qa .sector-card {
    background: var(--s-surface);
    background-image: none;
    border: 1px solid var(--s-line);
    border-radius: var(--s-r-sm);
    box-shadow: none;
    color: var(--s-text);
    transition: background-color .18s var(--s-ease), border-color .18s var(--s-ease);
}
body.suite .sector-card:hover,
body.suite.assessment-step-qa .sector-card:hover {
    background: var(--s-surface-2); background-image: none;
    border-color: var(--s-line-hard); transform: none; box-shadow: none;
}
body.suite .sector-card.selected,
body.suite.assessment-step-qa .sector-card.selected {
    background: var(--s-info-bg); background-image: none;
    border-color: var(--v-500);
    box-shadow: 0 0 0 1px var(--v-500);
}
body.suite .sec-label { color: var(--s-text); }
body.suite .sec-icon  { color: var(--s-text-2); }
body.suite .sec-annex {
    background: var(--s-mute-bg); color: var(--s-text-3);
    border: 1px solid var(--s-line-soft);
}
body.suite .sec-nace { color: var(--s-text-3); }

/* Türkise Reste der Vorgängergestaltung am Schrittanzeiger */
body.suite .step-dot.done   { box-shadow: none; }
body.suite .step-dot.active { box-shadow: var(--s-glow-btn); }
body.suite .step-dot.active::after { display: none; content: none; }

/* Neun fest verdrahtete Kategoriefarben im Assistenten: sie umgehen das
   Farbsystem und sind in keinem Erscheinungsbild geprüft. */
body.suite .cat-icon[style], body.suite .q-cat-chip[style] {
    background: var(--s-info-bg) !important;
    color: var(--s-info) !important;
    border: 1px solid color-mix(in srgb, var(--s-info) 26%, transparent);
}

/* Grün ist eine Zustandsfarbe. Im Admin wurde sie als Handlungsfarbe für
   "Anlegen"/"Speichern" benutzt - dieselbe Handlung ist anderswo violett. */
body.suite .admin-card .btn-green,
body.suite .form-grid .btn-green,
body.suite .actions-cell .btn-green {
    background: var(--s-grad); color: #fff; box-shadow: var(--s-glow-btn);
}

/* Warnpille lag im Hellen bei 4,39:1 gegen die getönte Fläche */
:root[data-theme="light"] body.suite { --s-warn: #9a4404; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite { --s-warn: #9a4404; }
}


/* ══ 27. Symbole ══════════════════════════════════════════════════════════
   Die Anwendung nutzte an rund 90 Stellen farbige Emoji. Die folgen keinem
   Erscheinungsbild, sind auf jedem Betriebssystem anders breit und lassen
   jede Oberflaeche billig wirken. Ersetzt durch Strichgrafik in
   currentColor (includes/icons.php). Deshalb braucht es hier genau EINE
   Grundregel plus wenige Ausnahmen fuer runde Behaelter.                   */

body.suite .suite-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.145em;
    overflow: visible;
}

/* Freistehende Symbole in gefuellten Plaettchen fuellen diese nicht randlos. */
body.suite .brand-icon .suite-icon,
body.suite .feat-icon  .suite-icon,
body.suite .cat-icon   .suite-icon {
    width: 55%; height: 55%; vertical-align: 0; stroke-width: 1.7;
}
body.suite .step-dot .suite-icon { width: 1.05em; height: 1.05em; vertical-align: 0; }

/* Hinweisfelder: das Symbol sitzt optisch auf der ersten Zeile. */
body.suite .notice-icon .suite-icon { width: 1.2em; height: 1.2em; vertical-align: -.24em; }

/* Sektorkarten: das Symbol ist ein gewoehnliches Flex-Element, damit der
   Abstand der Karte (gap) links wie rechts davon gleich gross ausfaellt.
   Als feste Spalte mit text-align sass es sichtbar dichter am Text. */
body.suite .sec-icon {
    width: auto; flex: 0 0 auto; display: inline-flex; align-items: center;
    font-size: 1.08rem; color: var(--s-text-3);
}
body.suite .sector-card.selected .sec-icon,
body.suite .sector-card:has(input:checked) .sec-icon { color: var(--v-link); }

/* Antwortpillen: Symbol darf die Zeilenhoehe nicht aufblaehen. */
body.suite .radio-pills label .suite-icon { width: .95em; height: .95em; vertical-align: -.12em; }

/* Reiter, Abzeichen, Statusanzeigen erben Groesse aus ihrer Schriftgroesse. */
body.suite .grc-tab__icon .suite-icon,
body.suite .grc-badge__icon .suite-icon,
body.suite .status-icon .suite-icon { width: 1em; height: 1em; }

/* Symbol vor Beschriftung in Schaltflaechen: gleicher Abstand ueberall. */
body.suite .btn .suite-icon { margin-right: .12em; }

/* Leere Listen: das Symbol traegt die Aussage, es darf gross sein. */
body.suite .grc-empty .suite-icon,
body.suite .empty-state .icon .suite-icon,
body.suite .icon > .suite-icon { width: 2.4rem; height: 2.4rem; stroke-width: 1.3; opacity: .5; }

/* Dateisymbole in Nachweislisten stehen neben Text und bleiben ruhig. */
body.suite .grc-link-row .suite-icon { color: var(--s-text-3); }


/* ══ 28. Fragebogen des Standard-Assessments ═══════════════════════════════
   style.css ab Zeile 480 traegt ein VOLLSTAENDIG eigenes, fest dunkles
   Designsystem fuer die Fragenschritte (.assessment-step-qa). suite.css hat
   es bisher nur teilweise erreicht: `body.suite .q-block` setzte Innenabstand
   und Trennlinie, aber KEINEN Hintergrund - der dunkelblaue Verlauf blieb
   stehen. Im hellen Modus stand dunkler Text darauf: 1,39:1. Der Fragebogen,
   das Kernstueck der Anwendung, war unlesbar.                                */

body.suite.assessment-step-qa .card,
body.suite.assessment-step-qa .card::after {
    background: var(--s-surface);
    background-image: none;
    border-color: var(--s-line-soft);
}
body.suite.assessment-step-qa .card::after { display: none; }

body.suite .q-block,
body.suite.assessment-step-qa .q-block {
    background: transparent;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--s-line-soft);
    border-radius: 0;
    padding: 1.15rem 0;
    box-shadow: none;
}
body.suite.assessment-step-qa .q-block:hover {
    background: transparent; background-image: none;
    border-color: var(--s-line-soft);
}
/* Beantwortet: ein ruhiger Streifen am linken Rand statt einer gruenen
   Flaeche - Farbe ist hier nicht das einzige Merkmal, die Pille zeigt die
   Antwort im Klartext. */
body.suite.assessment-step-qa .q-block.answered {
    background: transparent; background-image: none;
    border-bottom-color: var(--s-line-soft);
    box-shadow: inset 2px 0 0 var(--s-ok);
    padding-left: .85rem;
}

body.suite .q-label { color: var(--s-text); font-size: .93rem; line-height: 1.55; }
body.suite .q-num {
    background: var(--s-info-bg); color: var(--v-link);
    border: 1px solid var(--s-line); border-radius: var(--s-r-xs);
    font-size: .72rem; font-weight: 600; padding: .1rem .4rem; margin-right: .5rem;
}
body.suite .q-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .7rem; }
body.suite .tag,
body.suite .tag.iso,
body.suite .tag.w {
    background: var(--s-mute-bg); color: var(--s-text-3);
    border: 1px solid var(--s-line-soft); border-radius: var(--s-r-xs);
    font-size: .68rem; letter-spacing: .01em; padding: .12rem .42rem;
    text-shadow: none; box-shadow: none;
}
body.suite .tag.iso { color: var(--v-link); background: var(--s-info-bg); }

/* ── Antwortpillen ─────────────────────────────────────────────────────── */
body.suite .radio-pills label {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .9rem; border-radius: var(--s-r-sm);
    border: 1px solid var(--s-line); background: var(--s-surface);
    background-image: none; color: var(--s-text-2);
    font-size: .85rem; font-weight: 500; cursor: pointer; margin: 0;
    transform: none; box-shadow: none;
    transition: background-color .15s var(--s-ease), border-color .15s var(--s-ease), color .15s var(--s-ease);
}
body.suite .radio-pills label:hover {
    background: var(--s-surface-2); background-image: none;
    border-color: var(--s-line-hard); color: var(--s-text);
    transform: none; box-shadow: none;
}
/* Der Knopf war per display:none versteckt, bis die allgemeine Formularregel
   ihn mit display:inline-block zurueckholte. Sichtbar bleiben soll er - aber
   mit Abstand zum Text, nicht daran klebend. */
body.suite .radio-pills input[type=radio] { margin: 0; flex: 0 0 auto; }
body.suite .radio-pills label:has(input:checked) input[type=radio] {
    border-color: currentColor; background: currentColor;
}
body.suite .radio-pills label:has(input:checked) input[type=radio]::after {
    background: var(--s-bg-2);
}
/* Symbol und Wort stehen gemeinsam im <span>; der Abstand der Pille wirkt
   nur zwischen Knopf und <span>, nicht darin. */
body.suite .radio-pills label > span {
    display: inline-flex; align-items: center; gap: .35rem;
}

/* Neutrale Auswahl ueberall dort, wo eine Antwort keine Wertung ist -
   etwa "Ist das Unternehmen KRITIS-Betreiber? Nein" im Basis-Check. */
body.suite .radio-pills label:has(input:checked) {
    background: var(--s-info-bg); background-image: none;
    border-color: var(--v-500); color: var(--s-text);
    box-shadow: 0 0 0 1px var(--v-500); transform: none;
}

/* Bedeutungsfarben NUR im Reifegrad-Fragebogen, wo "Nein" wirklich eine
   Luecke bezeichnet. Ausserhalb faerbte style.css jede Antwort mit dem Wert
   "nein" alarmrot - auch die voellig neutrale Normalantwort. */
body.suite.assessment-step-qa .radio-pills label:has(input[value="ja"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="alle"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="monatlich"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="regelmaessig"]:checked) {
    background: var(--s-ok-bg); background-image: none;
    border-color: var(--s-ok); color: var(--s-ok);
    box-shadow: 0 0 0 1px var(--s-ok);
}
body.suite.assessment-step-qa .radio-pills label:has(input[value="teilweise"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="geplant"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="gelegentlich"]:checked),
body.suite.assessment-step-qa .radio-pills label:has(input[value="unklar"]:checked) {
    background: var(--s-warn-bg); background-image: none;
    border-color: var(--s-warn); color: var(--s-warn);
    box-shadow: 0 0 0 1px var(--s-warn);
}
body.suite.assessment-step-qa .radio-pills label:has(input[value="nein"]:checked) {
    background: var(--s-bad-bg); background-image: none;
    border-color: var(--s-bad); color: var(--s-bad);
    box-shadow: 0 0 0 1px var(--s-bad);
}


/* ══ 29. Reste der alten Himmelblau/Türkis-Palette ═════════════════════════
   suite.css hatte den Fortschrittsbalken zwar eingefaerbt, aber nur dessen
   `background`. Der tuerkise Schlagschatten und der gruene "Kometenkopf" im
   Pseudoelement blieben stehen - ausgerechnet am prominentesten Anzeiger
   beider Assistenten.                                                       */

body.suite .progress-fill {
    background: var(--s-grad);
    box-shadow: 0 0 12px -2px var(--v-glow);
}
body.suite .progress-fill::after {
    background: radial-gradient(circle at right, var(--v-glow) 0%, transparent 70%);
}

/* Der Abschluss eines Assistenten ist kein "Erfolg", sondern die primaere
   Handlung. Gruen bzw. Rot als Flaechenfarbe brach den violetten Akzent
   genau an der wichtigsten Schaltflaeche der Seite. Gruen bleibt dort, wo es
   etwas BEDEUTET (Statusabzeichen), nicht als Handlungsfarbe. */
/* (Die frueher hier stehende Sonderregel fuer btn-xl/btn-lg ist entfallen -
   sie machte die Farbe einer Schaltflaeche davon abhaengig, ob ein
   Groessenzusatz gesetzt war.) */


/* ══ 30. Nacharbeiten aus der vierten Pruefrunde ═══════════════════════════ */

/* Tenant-Logos in Icon-Kacheln brauchen im hellen Modus einen Traeger.
   Das Hero-Logo bleibt frei, damit hinter der Wortmarke keine zusaetzliche
   Platte liegt.                                                             */
:root[data-theme="light"] body.suite .brand-icon img {
    background: linear-gradient(160deg, #16233d, #0d1730);
    border-radius: var(--s-r); border: 1px solid rgba(255, 255, 255, .07);
    padding: .9rem 1.2rem; box-sizing: content-box;
    box-shadow: 0 10px 30px -14px rgba(15, 40, 110, .5);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body.suite .brand-icon img {
        background: linear-gradient(160deg, #16233d, #0d1730);
        border-radius: var(--s-r); border: 1px solid rgba(255, 255, 255, .07);
        padding: .9rem 1.2rem; box-sizing: content-box;
        box-shadow: 0 10px 30px -14px rgba(15, 40, 110, .5);
    }
}

/* Kennzahlen einer Reihe hatten dieselbe Klasse in drei Schriftgroessen
   (32 / 21,6 / 16,8 px) - eine echte Null las sich dadurch als "keine
   Daten". Der Wert bestimmt die Bedeutung, nicht die Groesse.               */
body.suite .grc-kpi__value,
body.suite .stat-value,
body.suite .stat-num {
    font-size: 1.75rem; font-weight: 600; line-height: 1.15;
    letter-spacing: -.02em; font-family: inherit;
}
body.suite .grc-kpi__value[style],
body.suite .stat-value[style] { font-size: 1.75rem !important; }

/* Fehlerseite: die Marke war ein Ausrufezeichen als Text bei 45 % Deckkraft
   und der Knopf klebte an der Vorgangsnummer.                               */
body.suite .grc-empty__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; font-size: 1.6rem;
    color: var(--s-text-2); opacity: .85; margin-bottom: .35rem;
}
body.suite .grc-empty__mark .suite-icon { width: 2.2rem; height: 2.2rem; stroke-width: 1.4; }
body.suite .grc-card__hint { margin-bottom: 1.4rem; }

/* Eine Schaltflaeche muss als Flaeche erkennbar sein. btn-ghost war reiner
   Text ohne Rahmen und stand neben umrandeten Knoepfen.                     */
body.suite .btn-ghost {
    border: 1px solid var(--s-line-hard);
    background: transparent; color: var(--s-text);
}
body.suite .btn-ghost:hover {
    background: var(--s-surface-2); border-color: var(--v-400); color: var(--s-text);
}

/* Kopfleisten auf EIN Mass. "Meine Assessments" nutzte .header ohne inneren
   Rahmen und brachte eigene Abstaende mit: 69 px hoch gegen 100 px ueberall
   sonst, Logo buendig am Fensterrand statt in der Inhaltsspalte. Der innere
   Rahmen ist jetzt im Markup vorhanden; hier faellt die doppelte Polsterung
   weg, damit beide Leisten identisch messen.                                */
/* .header war display:flex mit eigenen Abstaenden, .topbar ist ein Block mit
   .85rem/2rem Polsterung und einem zentrierten inneren Rahmen. Gleiche Werte,
   gleiche Bauweise - sonst messen die Leisten 77 gegen 104 px. */
body.suite .header { display: block; padding: .85rem 2rem; }
body.suite .header-inner { width: 100%; }
body.suite .topbar-inner, body.suite .header-inner { min-height: 74px; }

/* Der Abmeldelink war auf einer Seite eine umrandete rote Pille, sonst roter
   Text. Eine Handlung, eine Darstellung. */
body.suite .btn-logout {
    border: 0 !important; background: transparent !important;
    padding: .35rem .55rem; border-radius: var(--s-r-xs);
}
body.suite .btn-logout:hover { background: var(--s-bad-bg) !important; }

/* Ein Titel, eine Groesse. Der Assistent setzte seine Ueberschrift auf 32 px
   und machte seine Kopfleiste damit 131 px hoch - 30 px mehr als jede andere
   Seite. Beim Seitenwechsel sprang die gesamte Oberflaeche.                  */
body.suite .topbar-inner h1,
body.suite .header-inner h1,
body.suite .header-title {
    font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em;
    line-height: 1.3; margin: 0;
}
body.suite .topbar-inner .sub,
body.suite .header-subtitle {
    font-size: .735rem; color: var(--s-text-3); margin-top: .1rem; line-height: 1.35;
}
/* Gleiche Bauhoehe unabhaengig davon, wieviel Inhalt die Leiste traegt. */
body.suite .topbar-inner, body.suite .header-inner { min-height: 76px; }

/* Die Assessmenttabelle traegt bis zu neun Spalten und ist mit 1400 px breiter
   als die Inhaltsspalte. Sie scrollt in ihrem eigenen Behaelter - die Spalte
   "Aktionen" (PDF, Mail, Loeschen) lag dadurch auf JEDER Desktopbreite
   ausserhalb des Sichtfelds. Sie bleibt jetzt am rechten Rand stehen.       */
body.suite .table-scroll { position: relative; }
/* :not([colspan]) grenzt auf die schmale Aktionsspalte ein - ohne das traf
   die Regel auch die aufgeklappte Mailzeile, deren einzige Zelle ueber die
   ganze Tabelle geht und ebenfalls td:last-child ist. */
body.suite .table-scroll table th:last-child:not([colspan]),
body.suite .table-scroll table td:last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 2;
    background: var(--s-solid);
    box-shadow: -10px 0 14px -10px rgba(0, 0, 0, .5);
}
body.suite .table-scroll table tr:hover td:last-child:not([colspan]) { background: var(--s-surface-2); }

/* Ergebnismarke des Basis-Checks */
body.suite .result-mark { display: inline-flex; }
body.suite .result-mark .suite-icon { width: 3.5rem; height: 3.5rem; stroke-width: 1.3; }

/* ══ 31. Versandzeile der Assessmentliste ══════════════════════════════════
   Das Eingabefeld fuer die Empfaengeradresse trug einen fest verdrahteten
   dunklen Verlauf mit !important und color-scheme:dark. Im hellen Modus
   stand dort fast schwarzer Text auf fast schwarzem Grund - rund 1,3:1.
   Genau die Zeile, ueber die der fertige Bericht an den Kunden geht.        */
body.suite .mail-inline-input {
    background: var(--s-input) !important;
    background-image: none !important;
    border: 1px solid var(--s-line) !important;
    color: var(--s-text) !important;
    color-scheme: inherit;
}
body.suite .mail-inline-input::placeholder { color: var(--s-text-3); }
body.suite .mail-inline-input:focus {
    border-color: var(--v-400) !important;
    box-shadow: 0 0 0 3.5px rgba(61, 125, 255, .22);
}

/* Der Absendeknopf war auf 32x32 festgelegt, trug aber die Beschriftung
   "Senden" - der Text stand sichtbar ausserhalb seiner Flaeche und verdeckte
   das Symbol. Ein Knopf mit Text waechst mit dem Text. */
body.suite .btn-send { width: auto; min-width: 2rem; padding: .38rem .8rem; overflow: visible; }
body.suite .btn-send.btn-icon { width: auto; }

/* ══ 32. Gemeinsame Navigationsleiste ══════════════════════════════════════ */

body.suite .nav-links { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
body.suite .nav-links > a {
    padding: .4rem .7rem; border-radius: var(--s-r-xs);
    font-size: .845rem; color: var(--s-text-2); text-decoration: none;
    white-space: nowrap;
}
body.suite .nav-links > a:hover { color: var(--s-text); background: var(--s-mute-bg); }
body.suite .nav-links > a.is-active { color: var(--s-text); background: var(--s-info-bg); }
/* Vollstaendig festgelegt, nicht der Ladereihenfolge ueberlassen: die
   Assessmentliste bindet style.css gar nicht ein, alle uebrigen Seiten schon -
   die Plakette sah dadurch auf einer von sieben Seiten anders aus. */
body.suite .nav-links .nav-user,
body.suite .nav-user {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-right: .5rem; padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--s-line-soft);
    background: var(--s-mute-bg);
    font-size: .8rem; color: var(--s-text-2); white-space: nowrap;
}
body.suite .nav-user .suite-icon { color: var(--s-text-3); }
body.suite .nav-links > a.btn-logout { display: inline-flex; align-items: center; gap: .35rem; }

/* Bei schmalen Fenstern bricht die Leiste um, statt hinter den Rand zu laufen. */
@media (max-width: 1100px) {
    body.suite .topbar-inner, body.suite .header-inner { flex-wrap: wrap; row-gap: .6rem; }
    body.suite .nav-links { justify-content: flex-start; }
    body.suite .nav-user { order: -1; }
}

/* Der Markenblock darf die Leistenhoehe nicht bestimmen. Auf "Meine
   Assessments" brachen Titel und Untertitel auf zwei bzw. drei Zeilen um und
   machten die Kopfleiste 130 px hoch statt 104 - beim Seitenwechsel sprang
   die ganze Oberflaeche. Lieber kuerzen als umbrechen.                       */
body.suite .brand, body.suite .header-left { min-width: 0; flex: 1 1 auto; }
body.suite .brand > div, body.suite .header-left > div { min-width: 0; }
body.suite .topbar-inner h1, body.suite .header-inner h1, body.suite .header-title,
body.suite .topbar-inner .sub, body.suite .header-subtitle {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══ 33. Nacharbeiten aus der sechsten Pruefrunde ══════════════════════════ */

/* Der Risikopunkt war nur in nis2-tests/index.php definiert. nis2RiskBadge()
   liefert ihn aber ueberall - im Admin blieb ein 0x0-Element samt Luecke
   stehen. Ein gemeinsamer Baustein gehoert ins gemeinsame Stylesheet.       */
body.suite .risk-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .18rem .6rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
}
body.suite .risk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
body.suite .dot-green  { background: var(--s-ok); }
body.suite .dot-orange { background: var(--s-warn); }
body.suite .dot-yellow { background: var(--s-warn); }
body.suite .dot-red    { background: var(--s-bad); }
body.suite .risk-low    { color: var(--s-ok);   background: var(--s-ok-bg);   border-color: color-mix(in srgb, var(--s-ok) 30%, transparent); }
body.suite .risk-medium { color: var(--s-warn); background: var(--s-warn-bg); border-color: color-mix(in srgb, var(--s-warn) 30%, transparent); }
body.suite .risk-high   { color: var(--s-bad);  background: var(--s-bad-bg);  border-color: color-mix(in srgb, var(--s-bad) 30%, transparent); }
body.suite .risk-na {
    color: var(--s-text-3); font-size: .76rem; white-space: nowrap;
}

/* Frueher hart nowrap, weil wrap die Zeilen auf 95px trieb. Hart nowrap
   erzwingt aber eine Mindestbreite von 310px fuer die Aktionsspalte - die
   Firmentabelle lief damit ueber ihren Behaelter, die dritte Schaltflaeche
   lag ausserhalb und war nur per Seitwaertslauf erreichbar.
   `wrap` mit `min-width: max-content` am Behaelter waere derselbe Zwang.
   Also: umbrechen DUERFEN, aber nur wenn es sonst nicht geht - die uebrigen
   drei Reiter haben genug Platz und bleiben einzeilig (gemessen). */
body.suite .actions, body.suite .actions-cell {
    display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
    row-gap: .3rem;
}

/* ══ 34. Ergebnisseite des Standard-Assessments ════════════════════════════
   style.css enthaelt KEINE einzige Regel fuer das helle Erscheinungsbild
   (0 Treffer auf data-theme, suite.css hat 25). Die Ergebnisseite - das
   Dokument, das der Kunde am Ende der elfschrittigen Analyse liest - trug
   deshalb im hellen Modus einen fest verdrahteten dunklen Marineverlauf mit
   dunkler Schrift darauf: gemessen 1,21:1. Die Einstufung und ihre
   Begruendung waren schlicht nicht zu entziffern.                           */

body.suite .result-hero {
    background: var(--s-surface);
    background-image: none;
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r-lg);
    -webkit-backdrop-filter: var(--s-glass); backdrop-filter: var(--s-glass);
    box-shadow: var(--s-shadow-sm);
    color: var(--s-text);
    overflow: hidden;
}
body.suite .result-hero::before { display: none; }

body.suite .result-class {
    background: var(--s-surface-2);
    background-image: none;
    border: 1px solid var(--s-line-soft);
    border-radius: var(--s-r);
    color: var(--s-text);
    text-align: left;
}
body.suite .result-class strong { color: var(--s-text); }
body.suite .result-class li,
body.suite .result-class p { color: var(--s-text-2); }

body.suite .score-ring-text,
body.suite .score-val { color: var(--s-text); }
body.suite .score-unit { color: var(--s-text-3); letter-spacing: .08em; }
body.suite .score-ring-bg { stroke: var(--s-line); }

body.suite .cat-bar-wrap { background: var(--s-mute-bg); }
body.suite .cat-label { color: var(--s-text); }
body.suite .cat-pct   { color: var(--s-text-2); font-variant-numeric: tabular-nums; }

body.suite .gap-item {
    background: var(--s-surface);
    background-image: none;
    border: 1px solid var(--s-line-soft);
    border-left: 3px solid var(--s-warn);
    border-radius: var(--s-r-sm);
    color: var(--s-text);
}
body.suite .gap-prio { color: var(--s-text-3); }

body.suite .score-chip {
    background: var(--s-mute-bg); color: var(--s-text-2);
    border: 1px solid var(--s-line-soft);
}

/* Der Hero zieht sich mit negativem Aussenabstand ueber die Container-
   polsterung. Die betraegt bei schmalen Fenstern nur noch 1,25rem - der
   feste -1.5rem lief dann 4 px ueber den Rand hinaus. */
/* Der Hero ragte 24px ueber die Kartenkante hinaus - zu wenig, um als
   bewusste Vollbreite zu lesen, genug, um wie ein Versatz zu wirken. Jetzt
   steht seine linke Kante auf derselben Linie wie die der Karten darunter. */
body.suite .hero { margin-left: 0; margin-right: 0; }

/* ══ 35. Nacharbeiten aus der achten Pruefrunde ════════════════════════════ */

/* Deaktivierte Schaltflaechen lagen bei 1,63:1 - man sah nicht einmal, dass
   dort ueberhaupt etwas steht. WCAG nimmt inaktive Elemente formal aus; ein
   Bedienelement, das man nicht erkennt, ist trotzdem ein Mangel. 0,6 statt
   0,35 ergibt rund 6:1 im Dunkeln und 4,5:1 im Hellen.                       */
body.suite .btn-disabled,
body.suite .btn[disabled],
body.suite button[disabled] {
    /* Durchsichtigkeit war der falsche Hebel: opacity daempft Text UND Flaeche
       gleichzeitig, gemessen kam 2,57:1 (dunkel) bzw. 2,07:1 (hell) heraus -
       der Knopf war praktisch nicht zu entziffern. Stattdessen eine eigene,
       gedaempfte aber volldeckende Farbgebung. Zusaetzlich zeigt die
       zurueckgenommene Umrandung den Zustand, damit nicht die Farbe allein
       ihn traegt. */
    opacity: 1 !important;
    color: var(--s-text-3) !important;
    background: color-mix(in srgb, var(--s-text-3) 10%, transparent) !important;
    border: 1px dashed color-mix(in srgb, var(--s-text-3) 34%, transparent) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Der Grund einer gesperrten Handlung stand nur im title-Attribut und war
   damit weder per Tastatur noch am Touchgeraet erreichbar. */
body.suite .btn-sm[title][style*="opacity"] { opacity: .6 !important; }

/* Offene Schrittpunkte lagen bei 2,39:1 - der Ring war kaum zu sehen. */
body.suite .step-dot {
    border-color: var(--s-control-line);
    color: var(--s-text-2);
}

/* Die Spur des Fortschrittsbalkens lag bei 1,07:1 - man sah den erreichten
   Teil, aber nicht die Gesamtlaenge. */
body.suite .progress-track,
body.suite .progress-wrap .progress-track {
    background: var(--s-mute-bg);
    border: 1px solid var(--s-line-soft);
}

/* ══ 36. Nacharbeiten aus der neunten Pruefrunde ═══════════════════════════ */

/* Die klebende Aktionsspalte trug eine DECKENDE Flaeche und schnitt damit
   einen weissen Riegel aus der Glaskarte - obwohl die Tabellen inzwischen
   gar nicht mehr ueberlaufen. Sie klebt nur noch dort, wo sie gebraucht
   wird: wenn der Behaelter schmaler ist als die Tabelle.                    */
body.suite .table-scroll table th:last-child:not([colspan]),
body.suite .table-scroll table td:last-child:not([colspan]) {
    position: static;
    background: transparent;
    box-shadow: none;
}
@media (max-width: 1100px) {
    body.suite .table-scroll table th:last-child:not([colspan]),
    body.suite .table-scroll table td:last-child:not([colspan]) {
        position: sticky; right: 0; z-index: 2;
        background: var(--s-solid);
        box-shadow: -10px 0 14px -10px rgba(0, 0, 0, .5);
    }
}

/* Auswahlfelder in den Fragenschritten sassen linksbuendig ueber die volle
   Kartenbreite, die Antwortpillen daneben rechtsbuendig - innerhalb einer
   Karte zwei Antwortgeometrien. Beide sitzen jetzt in derselben Spalte. */
body.suite.assessment-step-qa .q-block .fancy-select {
    max-width: 22rem; margin-left: auto; display: block;
}

/* Wortwerte in der Kennzahlenreihe: 2rem sprengt die Grundlinie, sobald der
   Text umbricht. Eine Regel statt Inline-Ausnahmen. */
body.suite .grc-kpi__value--wort {
    font-size: 1.05rem !important; font-weight: 600; line-height: 1.35;
}

/* Beide Aufklapper tragen denselben Chevron - "Mandant archivieren" zeigte
   das schwarze Browserdreieck, weil die Regel nur an .grc-details hing. */
body.suite details > summary { list-style: none; }
body.suite details > summary::-webkit-details-marker { display: none; }

/* Die Beschriftung unter dem Logo liegt auf der IMMER dunklen Logoplatte,
   erbte im hellen Modus aber die helle Grauton-Variable: gemessen 2,74:1.
   Auf dunklem Grund gehoert ein heller Ton - unabhaengig vom Modus.        */
body.suite .logo-wrapper .skeuo-label,
body.suite .logo-subtitle.skeuo-label {
    color: #a1b2cb;
}

/* Erzeugte Testdatensaetze tragen "[TESTDATEN]" im Firmennamen. Damit sie in
   den Listen nicht wie echte Kundendaten aussehen, werden sie zusaetzlich
   zurueckgenommen dargestellt. */
body.suite .testdaten-zeile { opacity: .72; }
body.suite .testdaten-marke {
    display: inline-block; margin-right: .4rem; padding: .05rem .35rem;
    border-radius: var(--s-r-xs); border: 1px solid var(--s-warn);
    color: var(--s-warn); font-size: .64rem; font-weight: 700; letter-spacing: .04em;
}

/* Feldbezogene Fehlermeldung direkt am Eingabefeld. */
body.suite .feld-fehler {
    display: block; margin-top: .3rem;
    font-size: .78rem; color: var(--s-bad);
}
body.suite input[aria-invalid="true"], body.suite select[aria-invalid="true"] {
    border-color: var(--s-bad);
}