/*
  FrXme Designsystem (ADR-0013 §6) – Design „Glas“, Standard seit 2026-10-22. Das frühere Design „Klassisch“ liegt in
  frxme-classic.css und wird später wählbar (Roadmap W-20).
  - Alles über Tokens (CSS-Variablen); helles und dunkles Thema, Standard „wie System“.
  - Systemschriften, keine Webfonts, keine fremden Quellen (CSP).
  - Status nie nur über Farbe: immer mit Text oder Symbol.
  - Glasoptik: durchscheinende Flächen, Lichtkante oben, großzügige Rundungen und ein ruhender
    Farbschleier hinter allem (nur eingebettete Dateien, keine Inline-Stile – die strenge CSP
    bleibt unverändert). Echte Hintergrundunschärfe (backdrop-filter) nur für Seitenleiste,
    Kopfzeile, Menüs, Dialoge und Überlagerungen; Karten und Tabellen sind halbtransparent ohne
    Unschärfe – jede Unschärfe kostet je Bild Rechenzeit, bei vielen Karten spürbar.
*/

/* ---------- Tokens ---------------------------------------------------------------------------------------------- */

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;

    --sidebar-width: 15.5rem;
    --topbar-height: 3.75rem;
    --content-max: 82rem;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 120ms;
    --duration: 220ms;

    /* Unschärfestufen der Glasflächen (unabhängig vom Thema) */
    --blur-panel: saturate(180%) blur(24px);
    --blur-chrome: saturate(190%) blur(22px);
    --blur-popover: saturate(200%) blur(36px);

    /* Helles Thema */
    --color-bg: #eef1f8;
    --color-bg-glow-1: rgba(109, 93, 252, 0.22);
    --color-bg-glow-2: rgba(43, 179, 192, 0.16);
    --color-bg-glow-3: rgba(64, 156, 255, 0.15);
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #eef0f5;
    --color-surface-hover: #f1f2f7;
    --color-border: #e3e5ec;
    --color-border-strong: #cfd3de;
    --color-text: #161925;
    --color-text-muted: #5b6172;
    --color-text-subtle: #646a7c;
    --color-accent: #5b4bf5;
    --color-accent-hover: #4a3be0;
    --color-accent-soft: #ecebfe;
    --color-accent-text: #ffffff;
    --color-ok: #0b7550;
    --color-ok-soft: #e3f5ee;
    --color-warn: #8f5300;
    --color-warn-soft: #fdf1dc;
    --color-danger: #c62f3e;
    --color-danger-soft: #fce8ea;
    --color-info: #2464d6;
    --color-info-soft: #e5eefc;
    --color-focus: #5b4bf5;
    --color-overlay: rgba(17, 20, 32, 0.42);
    --gradient-brand: linear-gradient(135deg, #6d5dfc 0%, #2bb3c0 100%);

    /* Glas (Flächen sind durchscheinend, Kanten fangen Licht, Schatten bleiben weich) */
    --glass-panel: linear-gradient(170deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.48));
    --glass-card: linear-gradient(170deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72));
    --glass-chrome: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.62));
    --glass-raised: linear-gradient(170deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
    --glass-input: rgba(255, 255, 255, 0.62);
    --glass-border: rgba(22, 25, 37, 0.10);
    --glass-edge: rgba(255, 255, 255, 0.92);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px -6px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.05), 0 24px 48px -20px rgba(16, 24, 40, 0.28);
    --shadow-glass: 0 1px 1px rgba(16, 24, 40, 0.04), 0 10px 26px -14px rgba(16, 24, 40, 0.26);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --color-bg: #0a0c12;
    --color-bg-glow-1: rgba(109, 93, 252, 0.30);
    --color-bg-glow-2: rgba(43, 179, 192, 0.20);
    --color-bg-glow-3: rgba(64, 156, 255, 0.22);
    --color-surface: #141721;
    --color-surface-raised: #1a1e2a;
    --color-surface-sunken: #10131b;
    --color-surface-hover: #1f2330;
    --color-border: #262b39;
    --color-border-strong: #343a4c;
    --color-text: #eceef4;
    --color-text-muted: #a3a9b9;
    --color-text-subtle: #8a91a4;
    --color-accent: #8a7dff;
    --color-accent-hover: #a094ff;
    --color-accent-soft: rgba(138, 125, 255, 0.16);
    --color-accent-text: #0c0e14;
    --color-ok: #3ccf91;
    --color-ok-soft: rgba(60, 207, 145, 0.14);
    --color-warn: #f2b14c;
    --color-warn-soft: rgba(242, 177, 76, 0.14);
    --color-danger: #ff6b78;
    --color-danger-soft: rgba(255, 107, 120, 0.14);
    --color-info: #6fa3ff;
    --color-info-soft: rgba(111, 163, 255, 0.14);
    --color-focus: #a094ff;
    --color-overlay: rgba(0, 0, 0, 0.55);

    /* Glas */
    --glass-panel: linear-gradient(170deg, rgba(40, 44, 58, 0.72), rgba(20, 23, 32, 0.54));
    --glass-card: linear-gradient(170deg, rgba(36, 40, 53, 0.84), rgba(22, 25, 35, 0.72));
    --glass-chrome: linear-gradient(180deg, rgba(34, 38, 50, 0.84), rgba(18, 21, 30, 0.64));
    --glass-raised: linear-gradient(170deg, rgba(46, 50, 66, 0.92), rgba(26, 29, 40, 0.80));
    --glass-input: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-edge: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 56px -24px rgba(0, 0, 0, 0.7);
    --shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 30px -16px rgba(0, 0, 0, 0.65);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --color-bg: #0a0c12;
        --color-bg-glow-1: rgba(109, 93, 252, 0.30);
        --color-bg-glow-2: rgba(43, 179, 192, 0.20);
        --color-bg-glow-3: rgba(64, 156, 255, 0.22);
        --color-surface: #141721;
        --color-surface-raised: #1a1e2a;
        --color-surface-sunken: #10131b;
        --color-surface-hover: #1f2330;
        --color-border: #262b39;
        --color-border-strong: #343a4c;
        --color-text: #eceef4;
        --color-text-muted: #a3a9b9;
        --color-text-subtle: #8a91a4;
        --color-accent: #8a7dff;
        --color-accent-hover: #a094ff;
        --color-accent-soft: rgba(138, 125, 255, 0.16);
        --color-accent-text: #0c0e14;
        --color-ok: #3ccf91;
        --color-ok-soft: rgba(60, 207, 145, 0.14);
        --color-warn: #f2b14c;
        --color-warn-soft: rgba(242, 177, 76, 0.14);
        --color-danger: #ff6b78;
        --color-danger-soft: rgba(255, 107, 120, 0.14);
        --color-info: #6fa3ff;
        --color-info-soft: rgba(111, 163, 255, 0.14);
        --color-focus: #a094ff;
        --color-overlay: rgba(0, 0, 0, 0.55);

        /* Glas */
        --glass-panel: linear-gradient(170deg, rgba(40, 44, 58, 0.72), rgba(20, 23, 32, 0.54));
        --glass-card: linear-gradient(170deg, rgba(36, 40, 53, 0.84), rgba(22, 25, 35, 0.72));
        --glass-chrome: linear-gradient(180deg, rgba(34, 38, 50, 0.84), rgba(18, 21, 30, 0.64));
        --glass-raised: linear-gradient(170deg, rgba(46, 50, 66, 0.92), rgba(26, 29, 40, 0.80));
        --glass-input: rgba(255, 255, 255, 0.07);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-edge: rgba(255, 255, 255, 0.16);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 56px -24px rgba(0, 0, 0, 0.7);
        --shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.3), 0 12px 30px -16px rgba(0, 0, 0, 0.65);

        color-scheme: dark;
    }
}

/* ---------- Grundlagen ------------------------------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Farbschleier: langsam driftierende Verläufe hinter allem – Glas wirkt nur über etwas, das er bricht. */
body::before {
    content: "";
    position: fixed;
    inset: -12vmax;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34vmax 26vmax at 84% 4%, var(--color-bg-glow-1), transparent 62%),
        radial-gradient(32vmax 26vmax at 2% 96%, var(--color-bg-glow-2), transparent 62%),
        radial-gradient(30vmax 24vmax at 38% 46%, var(--color-bg-glow-3), transparent 66%);
}

/* Feines Korn, damit die Glasflächen nicht „plastisch“ wirken. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

p {
    margin: 0;
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

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

code, kbd, .mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

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

.icon {
    flex: none;
    display: block;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
    transition: top var(--duration) var(--ease-out);
}

.skip-link:focus {
    top: var(--space-3);
    color: var(--color-accent-text);
}

/* ---------- Rahmen: Seitenleiste, Kopfzeile, Inhalt ------------------------------------------------------------- */

.shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 100vh;
    padding: var(--space-3);
}

.sidebar {
    position: sticky;
    top: var(--space-3);
    height: calc(100vh - var(--space-3) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-panel);
    -webkit-backdrop-filter: var(--blur-panel);
    backdrop-filter: var(--blur-panel);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(109, 93, 252, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.brand-name {
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
}

.icon-button.sidebar__close {
    margin-left: auto;
    display: none;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.nav__item:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 70%, transparent);
    color: var(--color-text);
}

.nav__item:active {
    transform: scale(0.985);
}

.nav__item.active {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    font-weight: 600;
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-sm);
}

.sidebar__footer {
    margin-top: auto;
}

/* Unten in der Seitenleiste: Einstellungen und Verwaltung (W-21). */
.nav--footer {
    margin-bottom: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* Überschrift einer Gruppe (Seitenleiste, Menü der Einstellungen). */
.nav__heading {
    padding: var(--space-3) var(--space-3) var(--space-1);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.topbar {
    position: sticky;
    top: var(--space-3);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-3) 0 var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-chrome);
    -webkit-backdrop-filter: var(--blur-chrome);
    backdrop-filter: var(--blur-chrome);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
}

/* Spalt über der schwebenden Kopfzeile: abdecken, sonst läuft der Inhalt beim Scrollen sichtbar darüber. */
.topbar::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3) - 1px);
    right: calc(-1 * var(--space-3) - 1px);
    bottom: calc(100% + 1px);
    height: calc(var(--space-3) + 1px);
    background: var(--color-bg);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
    pointer-events: none;
}

.icon-button.topbar__menu {
    display: none;
}

.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.content {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-7);
    outline: none;
}

.sidebar-backdrop {
    display: none;
}

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

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.icon-button:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 75%, transparent);
    color: var(--color-text);
}

.icon-button:active {
    transform: scale(0.94);
}

/* Knöpfe in der Kopfzeile stehen auf Glas – wie die Werkzeugleisten der Apple-Oberflächen. */
.topbar__actions .icon-button {
    border-color: var(--glass-border);
    background: var(--glass-input);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.topbar__actions .icon-button:hover {
    border-color: color-mix(in srgb, var(--color-accent) 40%, var(--glass-border));
    background: color-mix(in srgb, var(--color-accent) 12%, var(--glass-input));
    color: var(--color-accent);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 2.375rem;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 82%, #fff) 0%, var(--color-accent) 62%);
    color: var(--color-accent-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px -8px color-mix(in srgb, var(--color-accent) 75%, transparent);
    transition: background var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast), filter var(--duration-fast);
}

.button:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 74%, #fff) 0%, var(--color-accent-hover) 62%);
    color: var(--color-accent-text);
    filter: saturate(1.05);
}

.button:active {
    transform: scale(0.98);
}

.button--secondary {
    background: var(--glass-raised);
    border-color: var(--glass-border);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-sm);
}

.button--secondary:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 55%, var(--glass-raised));
    color: var(--color-text);
    filter: none;
}

.kbd {
    display: inline-flex;
    align-items: center;
    height: 1.375rem;
    padding: 0 0.4rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--glass-input);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(26rem, 100%);
    height: 2.375rem;
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-input);
    color: var(--color-text-subtle);
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--shadow-sm);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}

.search-trigger:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--glass-border));
    background: color-mix(in srgb, var(--color-accent) 6%, var(--glass-input));
}

.search-trigger__text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-sunken) 55%, transparent);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.07);
}

.segmented__item {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-subtle);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.segmented__item:hover {
    color: var(--color-text);
}

.segmented__item:active {
    transform: scale(0.94);
}

.segmented__item[aria-pressed="true"] {
    background: var(--glass-raised);
    color: var(--color-text);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-edge);
}

/* Aufklappmenü auf Basis von <details> – ohne Skript bedienbar. */
.menu {
    position: relative;
}

.menu > summary {
    list-style: none;
}

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

.menu__current {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-2));
    z-index: 30;
    min-width: 11rem;
    padding: var(--space-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
    animation: pop-in var(--duration) var(--ease-out);
}

.menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.menu__item:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 75%, transparent);
}

.menu__item[aria-checked="true"] {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---------- Verbindung ------------------------------------------------------------------------------------------ */

.connection {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-input);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.connection__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.connection__time {
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.connection__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-text-subtle);
}

.connection--ok .connection__dot {
    background: var(--color-ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-ok) 50%, transparent);
    animation: pulse 2.4s var(--ease-out) infinite;
}

.connection--down {
    border-color: color-mix(in srgb, var(--color-danger) 35%, var(--glass-border));
    color: var(--color-danger);
}

.connection--down .connection__dot {
    background: var(--color-danger);
}

.connection--wait .connection__dot {
    animation: blink 1.2s ease-in-out infinite;
}

/* ---------- Seiten ---------------------------------------------------------------------------------------------- */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    animation: rise-in var(--duration) var(--ease-out);
}

.page-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    outline: none;
}

.page-intro {
    color: var(--color-text-muted);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 32rem;
    margin: var(--space-7) auto;
    padding: var(--space-6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-card);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
    text-align: center;
    animation: rise-in var(--duration) var(--ease-out);
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.empty-state--warning .empty-state__icon {
    background: color-mix(in srgb, var(--color-warn) 18%, transparent);
    color: var(--color-warn);
}

.empty-state--danger .empty-state__icon {
    background: color-mix(in srgb, var(--color-danger) 18%, transparent);
    color: var(--color-danger);
}

.empty-state__title {
    font-size: var(--text-lg);
}

.empty-state__text {
    color: var(--color-text-muted);
}

.empty-state__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ---------- Formulare und Hinweise ------------------------------------------------------------------------------ */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.field__input {
    height: 2.75rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-input);
    color: var(--color-text);
    font: inherit;
    box-shadow: inset 0 1px 0 var(--glass-edge);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
}

/* Aufgeklappte Liste einer Auswahl: Das Feld ist durchscheinend, die Liste des Systems übernimmt das nicht und bliebe sonst
   weiß mit heller Schrift (dunkles Thema unter Windows) – deshalb deckend in den Farben des Themas. */
select.field__input option {
    background: var(--color-surface-raised);
    color: var(--color-text);
}

.field__input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--glass-raised);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent), inset 0 1px 0 var(--glass-edge);
}

.button--block {
    width: 100%;
    height: 2.75rem;
}

.alert {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    text-align: left;
}

.alert .icon {
    margin-top: 2px;
}

.alert--danger {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);
    color: var(--color-danger);
}

.alert--warning {
    background: color-mix(in srgb, var(--color-warn) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warn) 32%, transparent);
    color: var(--color-warn);
}

.alert--info {
    background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-info) 32%, transparent);
    color: var(--color-info);
}

.alert--ok {
    background: color-mix(in srgb, var(--color-ok) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-ok) 32%, transparent);
    color: var(--color-ok);
}

/* Formular in einer Zeile, umbrechend (Konfiguration: neuer Schlüssel). */
.form--inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.form--inline .field {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Breite Tabellen (Konfiguration): eigener waagerechter Bildlauf statt abgeschnittener Spalten; lange Schlüssel umbrechen. */
.table-scroll {
    overflow-x: auto;
}

.table--wrap td:first-child {
    overflow-wrap: anywhere;
}

.table--wrap td.table__actions {
    white-space: nowrap;
}

.alert__code {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--glass-input);
    color: var(--color-text);
    word-break: break-all;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ---------- Anmeldung und schlichtes Layout --------------------------------------------------------------------- */

.plain {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.plain__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
}

.plain__content {
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--space-5) var(--space-4) var(--space-7);
    outline: none;
}

.login {
    width: min(25rem, 100%);
    animation: rise-in var(--duration) var(--ease-out);
}

.login__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-panel);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}

.login__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: 0 10px 26px -8px rgba(109, 93, 252, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.login__title {
    font-size: var(--text-xl);
}

.login__intro {
    margin-top: calc(-1 * var(--space-3));
    color: var(--color-text-muted);
}

/* ---------- Konto ----------------------------------------------------------------------------------------------- */

.avatar {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 12px -6px rgba(109, 93, 252, 0.6);
}

.avatar--large {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--text-md);
}

.menu__panel--wide {
    min-width: 16rem;
}

.account__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
}

.account__name {
    font-weight: 600;
}

.account__pseudonym {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* Kontomenü: Trennlinie unter Name und Pseudonym; Einträge linksbündig, Symbol vor dem Text. */
.account-menu .account__head {
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--glass-border);
}

.account-menu .menu__item {
    justify-content: flex-start;
    gap: var(--space-3);
}

.account__signout {
    margin: var(--space-1) 0 0;
}

.menu__item {
    color: var(--color-text);
    text-decoration: none;
}

/* ---------- Dashboard ------------------------------------------------------------------------------------------ */

.page-header--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.page-meta {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.page-alert {
    margin-bottom: var(--space-5);
}

.muted {
    color: var(--color-text-subtle);
}

/* Statuskennzeichen */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 1.5rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); }
.badge--neutral { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* Großer Zustand oben */
.hero {
    --tone: var(--color-text-subtle);
    --tone-soft: var(--color-surface-sunken);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: center;
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(40rem 12rem at 0% 0%, color-mix(in srgb, var(--tone-soft) 72%, transparent), transparent 70%),
        var(--glass-card);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    animation: rise-in var(--duration) var(--ease-out);
}

.hero--ok { --tone: var(--color-ok); --tone-soft: var(--color-ok-soft); }
.hero--warn { --tone: var(--color-warn); --tone-soft: var(--color-warn-soft); }
.hero--danger { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }

.hero__mark {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: var(--radius-lg);
    background: var(--tone-soft);
    color: var(--tone);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 0 6px color-mix(in srgb, var(--tone-soft) 60%, transparent);
}

.hero__eyebrow {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__title {
    font-size: var(--text-xl);
    color: var(--tone);
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.hero__version {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.hero__reasons {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--glass-border);
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.hero__reasons li {
    display: flex;
    gap: var(--space-2);
}

.hero__reasons .icon {
    margin-top: 3px;
    color: var(--tone);
}

/* Raster */
.grid {
    display: grid;
    gap: var(--space-4);
}

.grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.grid--detail {
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* Karten */
.card {
    --tone: var(--color-border-strong);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-card);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    transition: box-shadow var(--duration), border-color var(--duration), transform var(--duration) var(--ease-out);
    animation: rise-in var(--duration) var(--ease-out) backwards;
}

/* Lichtkante am oberen Rand – der Glanz, den echtes Glas wirft. */
.card::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
    pointer-events: none;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--tone);
    opacity: 0.85;
}

.card:hover {
    border-color: color-mix(in srgb, var(--color-accent) 26%, var(--glass-border));
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}

/* Anheben nur, wo die Karte wirklich wohin führt – sonst sähe jede Infokarte und jedes Widget klickbar aus. */
.card:has(> .card__link):hover {
    transform: translateY(-2px);
}

.card--ok { --tone: var(--color-ok); }
.card--warn { --tone: var(--color-warn); }
.card--danger { --tone: var(--color-danger); }
.card--info { --tone: var(--color-info); }

.card--wide {
    grid-column: 1 / -1;
}

.grid--cards > .card:nth-child(2) { animation-delay: 30ms; }
.grid--cards > .card:nth-child(3) { animation-delay: 60ms; }
.grid--cards > .card:nth-child(4) { animation-delay: 90ms; }
.grid--cards > .card:nth-child(5) { animation-delay: 120ms; }
.grid--cards > .card:nth-child(6) { animation-delay: 150ms; }
.grid--cards > .card:nth-child(n+7) { animation-delay: 180ms; }

.card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-sunken) 60%, transparent);
    color: var(--color-text-muted);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.card__title {
    font-size: var(--text-md);
    font-weight: 650;
}

.card__status {
    margin-left: auto;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card__lead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.card__text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.card__link .icon {
    transition: transform var(--duration-fast);
}

.card__link:hover .icon {
    transform: translateX(3px);
}

.metric {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.metric__value {
    font-size: var(--text-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.metric__unit {
    color: var(--color-text-subtle);
    font-weight: 600;
}

/* Ein Kästchen je Modul */
.meter {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.meter__cell {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
}

.meter__cell--ok { background: var(--color-ok); border-color: transparent; }
.meter__cell--danger { background: var(--color-danger); border-color: transparent; }
.meter__cell--info { background: var(--color-info); border-color: transparent; }

/* Begriff und Wert */
.facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
}

.facts dt {
    color: var(--color-text-subtle);
}

.facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hash {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.issues,
.plain-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.issues li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.pulse-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-info);
    animation: blink 1.2s ease-in-out infinite;
}

/* Ladeplatzhalter */
.card--skeleton {
    min-height: 9rem;
}

.skeleton {
    display: block;
    height: 0.75rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-surface-sunken) 55%, transparent) 25%, color-mix(in srgb, var(--color-surface-hover) 55%, transparent) 50%, color-mix(in srgb, var(--color-surface-sunken) 55%, transparent) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
}

.skeleton--title { width: 40%; height: 1rem; }
.skeleton--short { width: 60%; }
.skeleton--row { height: 2.75rem; margin: var(--space-2) var(--space-4); }

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

/* ---------- Modulliste ------------------------------------------------------------------------------------------ */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.search-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(22rem, 100%);
    height: 2.375rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-input);
    color: var(--color-text-subtle);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.search-field:focus-within {
    border-color: var(--color-accent);
    background: var(--glass-raised);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent), inset 0 1px 0 var(--glass-edge);
}

.search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    outline: none;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-input);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-edge);
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.filter-chip:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--glass-border));
}

.filter-chip:active {
    transform: scale(0.97);
}

.filter-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-accent);
}

.filter-chip__count {
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-sunken) 70%, transparent);
    font-size: var(--text-xs);
    text-align: center;
}

.table-card {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-card);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    animation: rise-in var(--duration) var(--ease-out);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--glass-border);
    background: color-mix(in srgb, var(--color-surface-sunken) 55%, transparent);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--glass-border);
    vertical-align: middle;
}

.table tr:last-child td {
    border-bottom: 0;
}

.table__row {
    transition: background var(--duration-fast);
}

.table__row:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 70%, transparent);
}

.table__primary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}

.table__title {
    display: block;
    color: var(--color-text);
    font-weight: 600;
}

.table__sub {
    display: block;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.table__primary:hover .table__title {
    color: var(--color-accent);
}

.module-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.module-icon--system { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info); }
.module-icon--plugin { background: color-mix(in srgb, var(--color-warn) 16%, transparent); color: var(--color-warn); }

/* ---------- Moduldetails ---------------------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

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

.detail-header {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-bottom: var(--space-5);
    animation: rise-in var(--duration) var(--ease-out);
}

.detail-header__icon.module-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-lg);
}

.detail-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.detail-header__description {
    max-width: 48rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

.link-list,
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.link-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-input);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    box-shadow: inset 0 1px 0 var(--glass-edge);
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.link-pill:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--glass-border));
    background: color-mix(in srgb, var(--color-accent) 12%, var(--glass-input));
    color: var(--color-accent);
}

.chip--neutral {
    background: color-mix(in srgb, var(--color-surface-sunken) 70%, transparent);
    color: var(--color-text-muted);
}

.relations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--space-5);
}

.subhead {
    margin: var(--space-2) 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subhead:first-child {
    margin-top: 0;
}

/* ---------- Anpassbare Übersicht (Widgets wie auf dem Homescreen) ---------------------------------------------- */

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--space-4);
}

.widget {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--radius-lg);
    transition: transform var(--duration) var(--ease-out), opacity var(--duration);
}

.widget--small { grid-column: span 1; }
.widget--medium { grid-column: span 2; }
.widget--large { grid-column: 1 / -1; }

.widget__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.widget__body > .card,
.widget__body > .hero {
    flex: 1;
    margin-bottom: 0;
}

/* Anpassen-Modus: leichtes Wackeln wie auf dem Homescreen, gestrichelter Rahmen, Werkzeugleiste */
.dashboard--editing .widget:not(.widget-add) {
    outline: 2px dashed color-mix(in srgb, var(--color-accent) 45%, transparent);
    outline-offset: 3px;
    cursor: grab;
    animation: wiggle 0.5s ease-in-out infinite alternate;
}

.dashboard--editing .widget:nth-child(2n) {
    animation-delay: -0.25s;
}

.dashboard--editing .widget__body {
    pointer-events: none;
    user-select: none;
}

.widget--dragging {
    opacity: 0.45;
    animation: none !important;
    transform: scale(0.97);
}

.widget__chrome {
    position: absolute;
    top: -0.85rem;
    right: var(--space-3);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-edge);
    cursor: default;
}

.widget__handle {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-text-subtle);
    cursor: grab;
}

.widget__tool {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.widget__tool:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-surface-hover) 75%, transparent);
    color: var(--color-text);
}

.widget__tool:disabled {
    opacity: 0.35;
    cursor: default;
}

.widget__tool--remove {
    background: color-mix(in srgb, var(--color-danger) 16%, transparent);
    color: var(--color-danger);
}

.widget__tool--remove:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
}

.widget__sizes {
    display: inline-flex;
    margin: 0 2px;
    padding: 2px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-sunken) 60%, transparent);
}

.widget__size {
    min-width: 1.6rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.widget__size[aria-pressed="true"] {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.widget-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 9rem;
    border: 2px dashed color-mix(in srgb, var(--color-border-strong) 70%, transparent);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.widget-add:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent);
}

.widget-add__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.module-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.module-strip__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-input);
    font-size: var(--text-sm);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.module-strip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Katalog: Blatt von unten bzw. rechts */
.sheet {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(36rem, calc(100vh - 2rem));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    animation: sheet-in var(--duration) var(--ease-out);
}

.sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--glass-border);
}

.sheet__title {
    font-size: var(--text-lg);
}

.sheet__empty {
    padding: var(--space-5);
    color: var(--color-text-muted);
}

.catalog {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    overflow-y: auto;
    list-style: none;
}

.catalog__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-input);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 var(--glass-edge);
    transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
}

.catalog__item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 45%, var(--glass-border));
    background: color-mix(in srgb, var(--color-accent) 12%, var(--glass-input));
}

.catalog__item:active {
    transform: scale(0.99);
}

.catalog__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
}

.catalog__title {
    font-weight: 600;
}

.catalog__description {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.catalog__add {
    color: var(--color-accent);
}

@keyframes wiggle {
    from { transform: rotate(-0.35deg); }
    to { transform: rotate(0.35deg); }
}

@keyframes sheet-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 72rem) {
    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

    .widget--small,
    .widget--medium {
        grid-column: auto;
    }

    .sheet {
        right: 0;
        bottom: 0;
        width: 100vw;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
}

/* ---------- Befehlspalette -------------------------------------------------------------------------------------- */

.palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--color-overlay);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
    animation: fade-in var(--duration-fast) ease-out;
}

.palette {
    position: fixed;
    left: 50%;
    top: 12vh;
    z-index: 61;
    width: min(38rem, calc(100vw - 2rem));
    transform: translateX(-50%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
    overflow: hidden;
    animation: palette-in var(--duration) var(--ease-out);
}

.palette__search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--glass-border);
    color: var(--color-text-subtle);
}

.palette__input {
    flex: 1;
    min-width: 0;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-lg);
    outline: none;
}

.palette__results {
    max-height: min(24rem, 60vh);
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    list-style: none;
}

.palette__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    cursor: pointer;
}

.palette__item--active {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
}

.palette__label {
    flex: 1;
    color: var(--color-text);
    font-weight: 500;
}

.palette__hint {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.palette__empty {
    padding: var(--space-5);
    color: var(--color-text-subtle);
    text-align: center;
}

/* ---------- Neu verbinden der Sitzung (ersetzt die eingebaute Anzeige von Blazor) -------------------------------- */

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    width: min(22rem, calc(100vw - 2rem));
    margin: 18vh auto;
    padding: var(--space-6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    background: var(--glass-raised);
    -webkit-backdrop-filter: var(--blur-popover);
    backdrop-filter: var(--blur-popover);
    color: var(--color-text);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
}

#components-reconnect-modal[open] {
    animation: palette-in var(--duration) var(--ease-out);
}

#components-reconnect-modal::backdrop {
    background: var(--color-overlay);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.components-rejoining-animation {
    position: relative;
    width: 4rem;
    height: 4rem;
}

.components-rejoining-animation div {
    position: absolute;
    inset: 0;
    border: 3px solid var(--color-accent);
    border-radius: var(--radius-full);
    opacity: 0;
    animation: ripple 1.6s var(--ease-out) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.8s;
}

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

@keyframes rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes palette-in {
    from { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

#components-reconnect-modal[open] {
    animation-name: pop-in;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-ok) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes blink {
    50% { opacity: 0.3; }
}

@keyframes ripple {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

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

    /* Kürzer reicht nicht: Anheben und Eindrücken springen sonst ohne Übergang. */
    .card:hover,
    .nav__item:active,
    .icon-button:active,
    .button:active,
    .segmented__item:active,
    .filter-chip:active,
    .catalog__item:active {
        transform: none;
    }
}

/* Ohne Hintergrundunschärfe (alte oder eingeschränkte Browser, abgeschaltete GPU): Glas deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root,
    :root[data-theme] {
        --glass-panel: var(--color-surface);
        --glass-chrome: var(--color-surface);
        --glass-raised: var(--color-surface-raised);
        --glass-card: var(--color-surface);
    }
}

/* ---------- Schmale Bildschirme --------------------------------------------------------------------------------- */

@media (max-width: 64rem) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: fixed;
        inset: var(--space-3) auto var(--space-3) var(--space-3);
        z-index: 50;
        height: auto;
        width: min(var(--sidebar-width), 85vw);
        background: var(--glass-panel);
        box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-edge);
        transform: translateX(calc(-100% - var(--space-3) * 2));
        transition: transform var(--duration) var(--ease-out);
    }

    .shell--menu-open .sidebar {
        transform: none;
    }

    .shell--menu-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: var(--color-overlay);
        -webkit-backdrop-filter: saturate(140%) blur(18px);
        backdrop-filter: saturate(140%) blur(18px);
        animation: fade-in var(--duration-fast) ease-out;
    }

    .icon-button.sidebar__close,
    .icon-button.topbar__menu {
        display: inline-flex;
    }

    .topbar {
        padding: 0 var(--space-3);
    }

    .content {
        padding: var(--space-5) var(--space-4) var(--space-6);
    }
}

@media (max-width: 40rem) {
    .table__hide-sm {
        display: none;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-5);
    }
}

@media (max-width: 36rem) {
    .search-trigger__text,
    .search-trigger .kbd {
        display: none;
    }

    .search-trigger {
        width: auto;
    }

    .page-title {
        font-size: var(--text-xl);
    }
}

/* Konten (W-04): Kontoseite, Benutzerverwaltung */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.field__hint {
    margin: 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-input);
    box-shadow: inset 0 1px 0 var(--glass-edge);
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
}

.settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--space-4);
    align-items: start;
}

.account-card,
.editor {
    margin-bottom: var(--space-5);
}

.card__body > .card__title {
    margin-bottom: var(--space-3);
}

.alert__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.alert p {
    margin: 0;
}

.button--small {
    height: 1.875rem;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

.button--danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 82%, #fff) 0%, var(--color-danger) 62%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 16px -8px color-mix(in srgb, var(--color-danger) 75%, transparent);
}

.button--danger:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-danger) 74%, #fff) 0%, color-mix(in srgb, var(--color-danger) 92%, #000) 62%);
    color: #fff;
    filter: none;
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.table__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
}

/* Als Zelle bleibt sie eine Tabellenzelle; mit display: flex verrutscht sie gegenüber den anderen Zellen der Zeile. */
td.table__actions {
    display: table-cell;
    text-align: end;
}

td.table__actions > * + * {
    margin-inline-start: var(--space-2);
}

.account__signout {
    margin: 0;
}

.account__signout .menu__item,
.menu__item .icon {
    flex: none;
}
.table__row--clickable {
    cursor: pointer;
    transition: background var(--duration-fast);
}

.table__row--clickable:hover {
    background: color-mix(in srgb, var(--color-surface-hover) 70%, transparent);
}

.table__row--clickable:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.table__row--clickable .table__actions {
    cursor: default;
}
/* Homescreen (W-05): geänderte Werte leuchten kurz auf (WUI-0001 §11) */
.widget--changed > .widget__body > * {
    animation: widget-changed 2s var(--ease-out);
}

@keyframes widget-changed {
    0% {
        box-shadow: 0 0 0 3px var(--color-accent-soft), var(--shadow-sm);
    }

    100% {
        box-shadow: var(--shadow-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .widget--changed > .widget__body > * {
        animation: none;
        outline: 2px solid var(--color-accent-soft);
    }
}
/* W-10: Plugins */
.plugin-list {
    display: grid;
    gap: var(--space-4);
}

.plugin__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.plugin__head .card__title {
    margin: 0;
}

.plugin .check {
    margin-bottom: var(--space-2);
}

/* Neustartregel (W-23, W-24): Regel, Stand und Formular untereinander; Hilfe zur Frist unter dem Wert. */
.restart {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.restart .subhead {
    margin: var(--space-2) 0 0;
}

.restart dd .field__hint {
    display: block;
    margin-top: var(--space-1);
}

/* Einstellungen (W-21): eigenes Menü links, Bereich rechts; schmal erst das Menü, dann der Bereich mit „zurück“. */
.settings-page {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.settings-nav {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-5));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-card);
    box-shadow: var(--shadow-glass), inset 0 1px 0 var(--glass-edge);
}

.settings-nav__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-nav__group .nav__heading {
    padding-top: var(--space-2);
}

.settings-nav__switch {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-1);
    border-top: 1px solid var(--color-border);
}

.settings-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.settings-page__body > .page-header {
    margin-bottom: var(--space-2);
}

.settings-page__back {
    display: none;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
}

/* Schalter (role="switch") */
.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.switch:disabled {
    cursor: progress;
    opacity: 0.7;
}

.switch__track {
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    transition: background var(--duration-fast);
}

.switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    border-radius: var(--radius-full);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform var(--duration-fast);
}

.switch[aria-checked="true"] .switch__track {
    background: var(--color-accent);
}

.switch[aria-checked="true"] .switch__thumb {
    transform: translateX(1rem);
}

.switch:focus-visible .switch__track {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .switch__track,
    .switch__thumb {
        transition: none;
    }
}

@media (max-width: 64rem) {
    .settings-page {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .settings-nav {
        position: static;
    }

    .settings-page--index .settings-page__body {
        order: -1;
    }

    .settings-page:not(.settings-page--index) .settings-nav,
    .settings-page--index .settings-page__pick {
        display: none;
    }

    .settings-page__back {
        display: inline-flex;
    }
}

/* Formulare der Einstellungen (W-21): Karten untereinander, Felder nebeneinander, wo Platz ist. */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-4);
}

.settings-form textarea.field__input {
    min-height: 5rem;
    resize: vertical;
}

/* Kennzeichnung der Instanz (W-21): Farbe je Art, nie nur über Farbe – die Art steht als Text dabei. */
.instance-label {
    --instance: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 22rem;
    height: 1.75rem;
    padding: 0 var(--space-3);
    border: 1px solid color-mix(in srgb, var(--instance) 45%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--instance) 16%, transparent);
    color: var(--instance);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instance-label strong {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.instance-label--danger { --instance: var(--color-danger); }
.instance-label--warn { --instance: var(--color-warn); }
.instance-label--info { --instance: var(--color-info); }
.instance-label--ok { --instance: var(--color-ok); }

/* Anmeldeseite: Hinweis und Links (W-21) */
.login__notice {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Fußzeile mit Impressum und Datenschutz (W-21) – auf jeder Seite, unten. */
.legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: auto;
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
}

.legal-footer a {
    color: var(--color-text-muted);
}

.legal-footer a:hover {
    color: var(--color-text);
}

@media (max-width: 36rem) {
    .topbar .instance-label span {
        display: none;
    }
}

/* Eigene display-Regeln dürfen das Attribut hidden nicht aushebeln. */
[hidden] { display: none !important; }