/* =====================================================================================================
   Atrium – Designsystem „Plankopf“ (siehe Atrium/DESIGN.md)

   Leitidee: Atrium ist ein präzises Zeichenblatt. Die Arbeitsfläche ist warmes Papier, der Inhalt liegt
   als weißes Blatt darauf – Haarlinien statt Schatten, Graphit als Tinte. Farbe erscheint nur, wo man
   klicken kann (Tuscheblau) oder wo ein Zustand etwas aussagt (Moos, Ocker, Ziegel).

   LADEREIHENFOLGE (App.razor): MudBlazor.min.css → app.css → Atrium.Web.styles.css. Bei gleicher
   Spezifität gewinnt diese Datei; !important steht nur noch dort, wo MudBlazor selbst !important setzt.

   Gliederung: 1 Tokens · 2 Schriften · 3 Basis · 4 MudBlazor-Anpassungen · 5 Rahmen · 6 Bauteile ·
               7 Hilfsklassen · 8 Zeilenklick · 9 Erhaltene Verträge (IMP-007 u. a.) · 10 Druck

   Farbwerte: einzige Quelle neben Components/Theming/AtriumTokens.cs (DesignTokenSyncTests prüft beide).
   ===================================================================================================== */

/* ---------------------------------------------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------------------------------------------- */
:root {
    --atr-canvas: #F2F0EC;
    --atr-sheet: #FFFFFF;
    --atr-surface-subtle: #F8F6F3;
    --atr-surface-sunken: #F5F3EF;
    --atr-nav-active: #E6E1D8;
    --atr-border: #E8E4DC;
    --atr-border-strong: #D8D2C7;
    --atr-text: #262A2B;
    --atr-text-2: #6A645B;
    --atr-text-3: #8F877D;
    --atr-primary: #262A2B;
    --atr-primary-hover: #3A3F40;
    --atr-on-primary: #FFFFFF;
    --atr-accent: #2D5F9A;
    --atr-accent-hover: #244D7D;
    --atr-accent-bg: #E3ECF6;
    --atr-success: #2F6B45;
    --atr-success-bg: #E5EFE7;
    --atr-warning: #8A5A0B;
    --atr-warning-bg: #F6EBD5;
    --atr-danger: #A63A2A;
    --atr-danger-bg: #F7E1DC;
    --atr-info: #5E584F;
    --atr-info-bg: #ECE8E1;
    --atr-risk-green: #3E8E5E;
    --atr-risk-amber: #C68A1E;
    --atr-risk-red: #C24A36;
    --atr-logo-ink: #262A2B;
    --atr-logo-stone: #8F877D;

    /* Schrift */
    --atr-font: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --atr-font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Raster (4 px) */
    --atr-space-1: 4px;
    --atr-space-2: 8px;
    --atr-space-3: 12px;
    --atr-space-4: 16px;
    --atr-space-5: 20px;
    --atr-space-6: 24px;
    --atr-space-8: 32px;
    --atr-space-10: 40px;
    --atr-space-12: 48px;
    --atr-space-16: 64px;

    /* Formen */
    --atr-radius-sheet: 12px;
    --atr-radius-card: 10px;
    --atr-radius-control: 8px;
    --atr-radius-chip: 6px;

    /* Maximalbreiten (ersetzen elf Einzelwerte) */
    --atr-width-form: 560px;
    --atr-width-form-wide: 760px;
    --atr-width-prose: 820px;

    /* Tiefe: nur Schwebendes trägt Schatten */
    --atr-shadow-popover: 0 12px 32px -12px rgba(38, 42, 43, .24), 0 2px 6px rgba(38, 42, 43, .07);
    --atr-shadow-dialog: 0 32px 64px -24px rgba(20, 22, 23, .36), 0 4px 12px rgba(20, 22, 23, .08);
    --atr-focus-ring: 0 0 0 3px color-mix(in srgb, var(--atr-accent) 22%, transparent);

    /* Bewegung */
    --atr-ease: cubic-bezier(.2, .7, .2, 1);
    --atr-dur-fast: 150ms;
    --atr-dur: 200ms;
}

[data-theme="dark"] {
    --atr-canvas: #141617;
    --atr-sheet: #1C1F20;
    --atr-surface-subtle: #232627;
    --atr-surface-sunken: #181A1B;
    --atr-nav-active: #262A2B;
    --atr-border: #2B2F30;
    --atr-border-strong: #3A3F40;
    --atr-text: #EDEAE4;
    --atr-text-2: #A9A296;
    --atr-text-3: #7F786E;
    --atr-primary: #EDEAE4;
    --atr-primary-hover: #FFFFFF;
    --atr-on-primary: #1C1F20;
    --atr-accent: #8EB6E4;
    --atr-accent-hover: #A9C8EC;
    --atr-accent-bg: #1C2A3B;
    --atr-success: #86C9A0;
    --atr-success-bg: #1E3226;
    --atr-warning: #E6B866;
    --atr-warning-bg: #372B16;
    --atr-danger: #F0998A;
    --atr-danger-bg: #3D221D;
    --atr-info: #CBC4B9;
    --atr-info-bg: #2A2C2C;
    --atr-risk-green: #4FA374;
    --atr-risk-amber: #D9A03A;
    --atr-risk-red: #D8604B;
    --atr-logo-ink: #EDEAE4;
    --atr-logo-stone: #8F877D;

    --atr-shadow-popover: 0 16px 36px -12px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3);
    --atr-shadow-dialog: 0 32px 64px -24px rgba(0, 0, 0, .7), 0 4px 12px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------------------------------------------
   2 · SCHRIFTEN – lokal eingebunden (CSP font-src 'self'; DSGVO: kein Abruf bei Google).
   Geist/Geist Mono, SIL Open Font License (wwwroot/fonts/geist/OFL.txt), npm-Paket geist@1.7.2.
   Der Preload in App.razor nutzt exakt dieselbe URL.
   --------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: "Geist";
    src: url("fonts/geist/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("fonts/geist/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------------------------------
   3 · BASIS
   --------------------------------------------------------------------------------------------------- */
html, body {
    font-family: var(--atr-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Vor dem ersten Rendern (kein Prerender) hat MudBlazor noch keine Palette geschrieben – ohne diese Zeile
   blitzt die Seite im Dunkelmodus kurz weiß auf. */
html { background: var(--atr-canvas); }
body { background: var(--atr-canvas); color: var(--atr-text); }

::selection { background: color-mix(in srgb, var(--atr-accent) 22%, transparent); }

/* Treffer-Hervorhebung (Suche): leichte Tuscheblau-Tönung statt Textmarker-Gelb. */
mark { background: var(--atr-accent-bg); color: inherit; padding: 0 1px; border-radius: 2px; }

/* Einheitlicher Tastatur-Fokus (WCAG 2.4.7) – Tuscheblau, weil Fokus ein Bedienzustand ist. */
:focus-visible { outline: 2px solid var(--atr-accent); outline-offset: 2px; }

/* Links: Tuscheblau heißt „bedienbar“. Unterstreichung beim Überfahren. */
a:not(.mud-nav-link):not(.mud-button-root):not(.atrium-brand):not(.atrium-plain-link) {
    color: var(--atr-accent);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

a:not(.mud-nav-link):not(.mud-button-root):not(.atrium-brand):not(.atrium-plain-link):hover {
    color: var(--atr-accent-hover);
    text-decoration: underline;
}

h1:focus { outline: none; }

.num, .atrium-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
code, kbd, samp { font-family: var(--atr-font-mono); font-size: .875em; }
.atrium-id { font-family: var(--atr-font-mono); font-variant-numeric: tabular-nums; font-size: .9em; letter-spacing: -.01em; }
.atrium-muted { color: var(--atr-text-2); }

/* Schlanke Scrollbalken in beiden Designs */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--atr-text-3) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--atr-text-3) 45%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--atr-text-3); background-clip: content-box; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--mud-palette-success); }
.invalid { outline: 1px solid var(--mud-palette-error); }
.validation-message { color: var(--mud-palette-error); }

/* ---------------------------------------------------------------------------------------------------
   4 · MUDBLAZOR-ANPASSUNGEN
   --------------------------------------------------------------------------------------------------- */

/* --- Flächen: Haarlinie statt Schatten. Karten reagieren NICHT auf Überfahren – eine Karte, die sich
       hebt, verspricht eine Handlung, die es meist nicht gibt. --- */
.mud-paper { transition: border-color var(--atr-dur-fast) ease, background-color var(--atr-dur-fast) ease; }
.mud-paper.mud-paper-outlined {
    border-radius: var(--atr-radius-card);
    border-color: var(--atr-border);
    box-shadow: none;
}
/* Eingebettete Flächen (Inline-Bearbeiten/Sub-Panels) wirken abgesenkt statt als zweite Karte. */
.mud-paper.mud-paper-outlined .mud-paper.mud-paper-outlined { border-radius: var(--atr-radius-control); }
.mud-divider { border-color: var(--atr-border); }

/* --- Knöpfe: flach, klare Radien. Icon-Knöpfe bewusst als abgerundete Quadrate. --- */
.mud-button-root { border-radius: var(--atr-radius-control); }
.mud-button-root.mud-icon-button { border-radius: var(--atr-radius-control); }
.mud-button-root.mud-fab { border-radius: 14px; }
.mud-button-root[class*="-size-medium"]:not(.mud-icon-button) { min-height: 40px; }
[class*="mud-button-group"][class*="-size-small"] .mud-button-root { min-height: 0; }
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active { box-shadow: none; }
.mud-button-root { transition: background-color var(--atr-dur-fast) ease, border-color var(--atr-dur-fast) ease, color var(--atr-dur-fast) ease, transform 80ms ease; }
.mud-button-root:not(:disabled):active { transform: translateY(.5px); }
.mud-button-filled.mud-button-filled-primary:hover:not(:disabled) { background-color: var(--atr-primary-hover); }
.mud-button-outlined { border-color: var(--atr-border-strong); }
.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-primary { color: var(--atr-text); border-color: var(--atr-border-strong); background-color: var(--atr-sheet); }
.mud-button-outlined.mud-button-outlined-default:hover:not(:disabled),
.mud-button-outlined.mud-button-outlined-primary:hover:not(:disabled) { background-color: var(--atr-surface-subtle); border-color: color-mix(in srgb, var(--atr-text-3) 70%, var(--atr-border-strong)); }
.mud-button-text.mud-button-text-default:hover:not(:disabled),
.mud-button-text.mud-button-text-primary:hover:not(:disabled) { background-color: color-mix(in srgb, var(--atr-text) 6%, transparent); }
.mud-icon-button:hover:not(:disabled) { background-color: color-mix(in srgb, var(--atr-text) 7%, transparent); }
/* Löschen/Stornieren (Color.Error) bleibt rot, aber ruhig: Text/Umriss statt voller Fläche. */
.mud-button-outlined.mud-button-outlined-error { border-color: color-mix(in srgb, var(--atr-danger) 45%, transparent); background-color: var(--atr-sheet); }
.mud-button-outlined.mud-button-outlined-error:hover:not(:disabled),
.mud-button-text.mud-button-text-error:hover:not(:disabled) { background-color: var(--atr-danger-bg); }

/* --- Links (MudLink nimmt standardmäßig Primary = Graphit). Links sind bedienbar → Tuscheblau. --- */
.mud-link.mud-primary-text { color: var(--atr-accent) !important; }
.mud-link.mud-primary-text:hover { color: var(--atr-accent-hover) !important; }
.mud-link { text-underline-offset: 3px; }

/* --- Eingabefelder: 8 px Radius, warme Umrandung, Fokus in Tuscheblau mit weichem Ring. --- */
/* MudBlazor setzt auf jedes Feld die Klasse mud-typography-subtitle1 – im Plankopf eine halbfette Panel-
   Überschrift. Feldwerte und Platzhalter bleiben normal gewichtet (Fließtext-Stufe). */
.mud-input.mud-typography-subtitle1 { font-weight: var(--mud-typography-body1-weight); letter-spacing: normal; }
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--atr-radius-control);
    border-color: var(--atr-border-strong);
    transition: border-color var(--atr-dur-fast) ease, box-shadow var(--atr-dur-fast) ease;
}
.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border { border-color: color-mix(in srgb, var(--atr-text-3) 80%, var(--atr-border-strong)); }
.mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-shrink > .mud-input-outlined-border {
    border-width: 1px;
    border-color: var(--atr-accent);
    box-shadow: var(--atr-focus-ring);
}
.mud-input.mud-input-outlined.mud-input-error .mud-input-outlined-border { border-color: var(--mud-palette-error); }
.mud-input-label { color: var(--atr-text-2); }
.mud-input-control.mud-input-control-helper-container .mud-input-helper-text { color: var(--atr-text-2); }

/* --- Chips: 6 px Radius, gleiche Höhe. Kleine Statuschips einheitlich GETÖNT (Text + Fläche aus
       derselben Farbe), gleichgültig ob im Markup Filled oder Text steht – vorher drei Looks für
       dieselbe Aussage. Umriss-Chips bleiben Merkmals-Plaketten („abrechnungsrelevant“). --- */
.mud-chip { font-weight: 500; }
.mud-chip.mud-chip-size-small { border-radius: var(--atr-radius-chip); height: 24px; font-size: 12px; padding: 0 8px; }
.mud-chip.mud-chip-size-medium { border-radius: var(--atr-radius-chip); }
.mud-chip-filled.mud-chip-color-default,
.mud-chip-text.mud-chip-color-default { background-color: var(--atr-info-bg); color: var(--atr-text); }
.mud-chip-filled.mud-chip-color-success,
.mud-chip-text.mud-chip-color-success { background-color: var(--atr-success-bg); color: var(--atr-success); }
.mud-chip-filled.mud-chip-color-warning,
.mud-chip-text.mud-chip-color-warning { background-color: var(--atr-warning-bg); color: var(--atr-warning); }
.mud-chip-filled.mud-chip-color-error,
.mud-chip-text.mud-chip-color-error { background-color: var(--atr-danger-bg); color: var(--atr-danger); }
.mud-chip-filled.mud-chip-color-info,
.mud-chip-text.mud-chip-color-info,
.mud-chip-filled.mud-chip-color-secondary,
.mud-chip-text.mud-chip-color-secondary { background-color: var(--atr-info-bg); color: var(--atr-info); }
.mud-chip-filled.mud-chip-color-tertiary,
.mud-chip-text.mud-chip-color-tertiary { background-color: var(--atr-accent-bg); color: var(--atr-accent); }
.mud-chip-text.mud-chip-color-primary { background-color: color-mix(in srgb, var(--atr-text) 8%, transparent); color: var(--atr-text); }
.mud-chip-outlined { border-color: color-mix(in srgb, currentColor 35%, transparent); }

/* --- Hinweise (MudAlert): Radius 10, ruhige Tönung. Outlined bekommt eine leichte Fläche, damit
       Hinweise sich vom Blatt lösen, ohne zu schreien. Filled (Wartung, Acting Tenant) bleibt kräftig. --- */
.mud-alert { border-radius: var(--atr-radius-card); }
.mud-alert-outlined-info { background-color: color-mix(in srgb, var(--atr-info-bg) 55%, var(--atr-sheet)); border-color: var(--atr-border-strong); color: var(--atr-text); }
.mud-alert-outlined-info .mud-alert-icon { color: var(--atr-info); }
.mud-alert-outlined-success { background-color: color-mix(in srgb, var(--atr-success-bg) 55%, var(--atr-sheet)); }
.mud-alert-outlined-warning { background-color: color-mix(in srgb, var(--atr-warning-bg) 55%, var(--atr-sheet)); }
.mud-alert-outlined-error { background-color: color-mix(in srgb, var(--atr-danger-bg) 55%, var(--atr-sheet)); }
.mud-alert-text-info { background-color: var(--atr-info-bg); color: var(--atr-text); }
.mud-alert-text-info .mud-alert-icon { color: var(--atr-info); }
.mud-alert-text-success { background-color: var(--atr-success-bg); }
.mud-alert-text-warning { background-color: var(--atr-warning-bg); }
.mud-alert-text-error { background-color: var(--atr-danger-bg); }

/* --- Tabellen: ruhiger Kopf, tabellarische Ziffern, Haarlinien. Hover NUR bei klickbaren Zeilen
       (Abschnitt 8) – die frühere globale Tönung versprach Klicks, die es nicht gab. --- */
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell {
    font-weight: 500;
    font-size: .75rem;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--atr-text-2);
    background-color: transparent;
}
.mud-table-cell, td, th { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mud-table-root .mud-table-row { min-height: 44px; }
/* Kompakte, symmetrische Zellenpolsterung (statt MudBlazors 16/24 px) – schafft Breite für die breiten Listen.
   !important, weil MudBlazors Dichte-Regel spezifischer ist und logische Eigenschaften (padding-inline) setzt. */
.mud-table-root .mud-table-cell { padding-left: 12px !important; padding-right: 12px !important; padding-inline: 12px !important; border-bottom-color: var(--atr-border); }
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover,
.mud-table-hover .mud-table-container table tbody tr:hover { background-color: transparent; }
.mud-simple-table table * tr > td, .mud-simple-table table * tr th { border-bottom-color: var(--atr-border); }
.mud-simple-table table * tr th { color: var(--atr-text-2); font-weight: 500; font-size: .75rem; }

/* --- Reiter (MudTabs): keine Versalien, Unterstrich in Tuscheblau. --- */
.mud-tabs .mud-tab { text-transform: none; font-weight: 500; letter-spacing: normal; color: var(--atr-text-2); min-width: 0; }
.mud-tabs .mud-tab:hover { color: var(--atr-text); }
.mud-tabs .mud-tab.mud-tab-active { font-weight: 600; color: var(--atr-text); }
.mud-tab-slider { background: var(--atr-accent); }
.mud-tabs-tabbar { border-bottom: 1px solid var(--atr-border); background: transparent; }

/* --- Menüs, Popover, Auswahllisten: schwebend → Haarlinie + weicher Schatten. --- */
.mud-popover.mud-popover-open:not(.mud-tooltip) {
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius-card);
    box-shadow: var(--atr-shadow-popover);
    background-color: var(--atr-sheet);
}
.mud-menu-item, .mud-list-item-clickable { border-radius: 6px; }
.mud-popover .mud-list { padding: 4px; }
.mud-popover .mud-list .mud-list-item { border-radius: 6px; }

/* --- Tooltip: Graphit-Etikett. --- */
.mud-tooltip { background-color: #262A2B; color: #F2F0EC; font-size: .75rem; border-radius: 6px; padding: 5px 8px; box-shadow: none; }
[data-theme="dark"] .mud-tooltip { background-color: #EDEAE4; color: #1C1F20; }

/* --- Dialoge: größerer Radius, Dialogschatten (MudBlazor verdrahtet seinen eigenen fest). --- */
.mud-dialog-container .mud-dialog {
    border-radius: 14px;
    box-shadow: var(--atr-shadow-dialog);
    border: 1px solid var(--atr-border);
    background-color: var(--atr-sheet);
}
.mud-dialog .mud-dialog-title { padding: 20px 24px 8px; }
.mud-dialog .mud-dialog-content { padding: 8px 24px; }
.mud-dialog .mud-dialog-actions { padding: 12px 24px 20px; gap: 8px; }

/* --- Snackbar: Etikett mit Popover-Schatten. --- */
.mud-snackbar { border-radius: var(--atr-radius-card); box-shadow: var(--atr-shadow-popover); }

/* --- Ausklappflächen: flach mit Haarlinie. --- */
.mud-expand-panel { border: 1px solid var(--atr-border); box-shadow: none; }
.mud-expansion-panels .mud-expand-panel:not(:first-child) { margin-top: -1px; }
.mud-expansion-panels > .mud-expand-panel:first-child { border-top-left-radius: var(--atr-radius-card); border-top-right-radius: var(--atr-radius-card); }
.mud-expansion-panels > .mud-expand-panel:last-child { border-bottom-left-radius: var(--atr-radius-card); border-bottom-right-radius: var(--atr-radius-card); }

/* --- Schalter: Aus-Zustand muss sich vom Blatt abheben (WCAG 1.4.11, ≥ 3:1). --- */
.mud-switch-span .mud-switch-track { background-color: var(--atr-text-3); opacity: 1; }
.mud-switch-base.mud-checked + .mud-switch-track { opacity: .6; }
.mud-switch-base:not(.mud-checked) .mud-switch-thumb-small,
.mud-switch-base:not(.mud-checked) .mud-switch-thumb-medium,
.mud-switch-base:not(.mud-checked) .mud-switch-thumb-large { background-color: #FFFFFF; box-shadow: 0 0 0 1px rgba(38, 42, 43, .18), 0 1px 2px rgba(38, 42, 43, .24); }

/* --- Avatare: abgerundete Quadrate wie die Icon-Knöpfe. --- */
.mud-avatar { border-radius: var(--atr-radius-control); }

/* --- Hauptnavigation (MudNavMenu im Drawer) --- */
.mud-navmenu .mud-nav-link {
    border-radius: var(--atr-radius-control);
    margin: 1px 8px 1px 10px;
    padding: 6px 8px 6px 10px;
    min-height: 34px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-drawer-text);
    border-inline-end: none;
    transition: background-color var(--atr-dur-fast) ease, color var(--atr-dur-fast) ease;
}
.mud-navmenu .mud-nav-link { display: flex; align-items: center; }
.mud-navmenu .mud-nav-link .mud-nav-link-icon { flex: none; align-self: center; font-size: 1.125rem; width: 1.125rem; height: 1.125rem; margin-top: 0; color: var(--atr-text-3); margin-inline-end: 10px; }
.mud-navmenu .mud-nav-link .mud-nav-link-text { font-weight: 500; margin-inline-start: 0; }
.mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: color-mix(in srgb, var(--atr-text) 5%, transparent); color: var(--atr-text); }
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--atr-nav-active);
    color: var(--atr-text);
    border-inline-end: none;
}
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text { font-weight: 600; letter-spacing: -0.012em; }
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--atr-accent); }
/* Gruppenköpfe (MudNavGroup) als ruhige Rubriken */
.mud-navmenu .mud-nav-group > .mud-nav-link { min-height: 30px; margin-top: 10px; color: var(--atr-text-2); }
.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-size: .8125rem; font-weight: 600; }
.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-icon { color: var(--atr-text-3); }
.mud-navmenu .mud-typography-overline { letter-spacing: .08em; opacity: .85; }
/* IMP-013: aktive Gruppe dezent – Icon im Akzent, Titel voll. */
.atrium-nav-group-active > .mud-nav-link > .mud-nav-link-text { color: var(--atr-text); }
.atrium-nav-group-active > .mud-nav-link .mud-nav-link-icon { color: var(--atr-accent); }
.atrium-nav-utility { border-top: 1px solid var(--atr-border); padding-top: 6px; margin-top: 10px; }

/* ---------------------------------------------------------------------------------------------------
   5 · RAHMEN (Shell): Seitenleiste + Kopfleiste auf Papier, Inhalt als weißes Blatt
   --------------------------------------------------------------------------------------------------- */
.mud-appbar.atrium-appbar { background-color: var(--atr-canvas); color: var(--atr-text); border-bottom: none; }
/* MudBlazor schrumpft die Leiste unter 600 px auf 7/8 bzw. 3/4 – das unterschritte 44-px-Tippziele. */
.atrium-appbar .mud-toolbar-appbar { height: var(--mud-appbar-height); }
.mud-main-content { padding-top: var(--mud-appbar-height); }

.mud-drawer.atrium-navigation-drawer {
    background-color: var(--atr-canvas);
    border-right: none;
    box-shadow: none;
}
.atrium-drawer-brand {
    display: flex;
    align-items: center;
    height: var(--mud-appbar-height);
    padding: 0 20px;
    flex: 0 0 auto;
}
.atrium-drawer-legal {
    margin-top: auto;
    padding: 16px 20px 18px;
    display: flex; gap: 14px; flex-wrap: wrap;
    font-size: .75rem;
}
.atrium-drawer-legal a { color: var(--atr-text-3); text-decoration: none; }
.atrium-drawer-legal a:hover, .atrium-drawer-legal a:focus-visible { color: var(--atr-text); text-decoration: underline; }
.atrium-brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; border-radius: 6px; }
.atrium-brand:focus-visible { outline: 2px solid var(--atr-accent); outline-offset: 3px; }
.atrium-brand svg { display: block; height: 28px; width: auto; }
.atrium-appbar-brand { margin-inline: 4px 8px; }
.atrium-appbar-brand svg { height: 24px; }
.atrium-platform-label { margin-inline-start: 4px; color: var(--atr-text-2); font-weight: 500; }
/* Konto-Menü: Kopf mit Name und Anmeldename */
.atrium-account-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 6px; min-width: 220px; }
.atrium-account-name { font-weight: 600; font-size: .875rem; color: var(--atr-text); }
.atrium-account-mail { font-size: .75rem; color: var(--atr-text-2); overflow-wrap: anywhere; }
.atrium-account-popover .mud-menu-item .mud-icon-root { color: var(--atr-text-3); }

/* Das Blatt: ab md (960 px) liegt der Inhalt als weiße Fläche auf dem Papier. */
.atrium-main-content {
    min-height: 100%;
    scroll-margin-top: calc(var(--mud-appbar-height) + 8px);
    background-color: var(--atr-sheet);
}
@media (min-width: 960px) {
    .atrium-main-content {
        margin: 0 8px 8px 0;
        border: 1px solid var(--atr-border);
        border-radius: var(--atr-radius-sheet);
        min-height: calc(100dvh - var(--mud-appbar-height) - 8px);
    }
    .mud-layout:not(.mud-drawer-open-responsive-md-left) .atrium-main-content { margin-left: 8px; }
    .atrium-main-content > .mud-alert:first-child { border-top-left-radius: calc(var(--atr-radius-sheet) - 1px); border-top-right-radius: calc(var(--atr-radius-sheet) - 1px); }
}
@media (max-width: 959.98px) {
    .atrium-main-content { background-color: var(--atr-canvas); }
}
.atrium-main-content:focus { outline: none; }
.atrium-main-content > .mud-alert { border-radius: 0; }

/* Kopfleiste: kompakte 40-px-Symbolknöpfe (vorher 48 px). Bei 390 px mit laufendem Timer lief das Konto-Menü
   sonst 7 px aus dem Bild. Auf Touch-Geräten greift weiterhin die 44-px-Regel (pointer: coarse). */
.atrium-appbar .mud-icon-button { padding: 8px; }
.atrium-appbar .mud-icon-button .mud-icon-root { font-size: 1.375rem; width: 1.375rem; height: 1.375rem; }

/* Kopfleiste: Suchfeld mit Lupe und Kürzel-Hinweis */
.atrium-appbar-search {
    height: 36px;
    border: 1px solid var(--atr-border-strong);
    border-radius: var(--atr-radius-control);
    padding: 0 44px 0 34px;
    min-width: 240px;
    font: inherit;
    font-size: .875rem;
    background: var(--atr-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F877D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 16px 16px;
    color: var(--atr-text);
    transition: border-color var(--atr-dur-fast), box-shadow var(--atr-dur-fast);
}
.atrium-appbar-search::placeholder { color: var(--atr-text-3); }
.atrium-appbar-search:focus { border-color: var(--atr-accent); box-shadow: var(--atr-focus-ring); outline: none; }
.atrium-header-search { position: relative; }
.atrium-search-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: 500 .6875rem/1 var(--atr-font);
    color: var(--atr-text-2);
    border: 1px solid var(--atr-border);
    border-radius: 5px;
    padding: 3px 5px;
    pointer-events: none;
    background: var(--atr-surface-subtle);
}
.atrium-header-search:focus-within .atrium-search-hint { display: none; }

/* Seitenkopf (PageHeader) */
.atrium-page-head { margin-bottom: 24px; }
.atrium-page-title.mud-typography {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--atr-text);
}

/* ---------------------------------------------------------------------------------------------------
   6 · BAUTEILE (global, wo Scoped CSS nicht greift)
   --------------------------------------------------------------------------------------------------- */

/* Globale Ladeanzeige: schmaler Fortschrittsbalken am oberen Rand (erscheint verzögert). */
.atrium-busybar { position: fixed; inset: 0 0 auto 0; z-index: 2000; height: 3px; }
.atrium-busybar .mud-progress-linear { height: 3px; border-radius: 0; }

/* Markdown in Diskussionsbeiträgen: kompakte Abstände. */
.atrium-md > :first-child { margin-top: 0; }
.atrium-md > :last-child { margin-bottom: 0; }
.atrium-md p { margin: 0 0 .4rem; }
.atrium-md ul, .atrium-md ol { margin: .2rem 0 .4rem; padding-left: 1.4rem; }
.atrium-md code { background: var(--atr-surface-sunken); padding: .05rem .3rem; border-radius: 4px; font-size: .85em; font-family: var(--atr-font-mono); }
.atrium-md pre { background: var(--atr-surface-sunken); padding: .5rem .6rem; border-radius: 6px; overflow-x: auto; }
.atrium-md pre code { background: none; padding: 0; }
.atrium-md blockquote { margin: .3rem 0; padding: .4rem .7rem; border-radius: var(--atr-radius-chip); background: var(--atr-surface-sunken); color: var(--atr-text-2); }
.atrium-md a { color: var(--atr-accent); }

/* Rechner-Ergebnistabellen der Tools-Seite (rohe <table class="tools-result">). */
.tools-result th { padding: 6px 10px !important; white-space: nowrap; vertical-align: bottom; }
.tools-result td { padding: 5px 10px !important; vertical-align: middle; }

/* IMP-014: Projektnavigation — sieben Kernbereiche in der Leiste, fünf Fachgruppen im „Projektbereiche"-Menü. */
.atrium-projnav .mud-button-root:focus-visible { outline: 2px solid var(--atr-accent); outline-offset: 2px; }
/* „Sie sind hier": aktiver Fachbereich als Statushinweis (nicht interaktiv). */
.atrium-projnav-current { pointer-events: none; }
.atrium-projnav-menu .atrium-projnav-group-head {
    padding: 8px 16px 2px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--atr-text-2);
}
.atrium-projnav-menu .atrium-projnav-group-head:not(:first-child) { border-top: 1px solid var(--atr-border); margin-top: 4px; }
/* Aktiver Untereintrag: über Text-Gewicht UND Akzentkante markiert (nicht allein Farbe). */
.atrium-projnav-menu .atrium-projnav-item-active {
    font-weight: 700;
    border-inline-start: 2px solid var(--atr-accent);
    background-color: var(--atr-nav-active);
}
.atrium-projnav-menu { max-width: min(92vw, 340px); max-height: 70vh; overflow-y: auto; }

/* Listen-Tabellen in Karten: Kopfzeile leicht getönt, Tabelle bündig in der Karte. Gilt ausdrücklich für
   .atrium-table-card und für jede Tabelle, die direkt in einer umrandeten Karte liegt – vorher schwebte sie dort
   mit 8 px Innenabstand (Class="pa-2") in der Karte, 27 Mal auf 20 Seiten. */
.mud-paper.atrium-table-card,
.mud-paper-outlined:has(> .mud-table) { overflow: hidden; }
.mud-paper-outlined > .mud-table.pa-2 { padding: 0 !important; }
.atrium-table-card .mud-table-head,
.mud-paper-outlined > .mud-table .mud-table-head { background-color: var(--atr-surface-subtle); }
.atrium-table-card .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell,
.mud-paper-outlined > .mud-table .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: none; }
/* Löschen in Listen: ruhig (Stein), bis die Zeile berührt wird – sonst stehen dreißig rote Papierkörbe
   untereinander und jede Liste wirkt wie ein Warnhinweis. Symbol und zugänglicher Name tragen die Bedeutung;
   Rot kommt beim Überfahren und beim Tastaturfokus der Zeile. MudBlazor setzt .mud-error-text mit !important. */
.mud-table-body .mud-table-row .mud-icon-button.mud-error-text:not(:disabled) { color: var(--atr-text-3) !important; }
.mud-table-body .mud-table-row:hover .mud-icon-button.mud-error-text:not(:disabled),
.mud-table-body .mud-table-row:focus-within .mud-icon-button.mud-error-text:not(:disabled) { color: var(--atr-danger) !important; }
/* Lange Zahlen-Spaltenköpfe dürfen umbrechen (sonst erzwingen „Offene Forderungen“ & Co. Querscrollen). */
.mud-table-root .mud-table-head .mud-table-cell.atrium-th-wrap { white-space: normal; min-width: 5.5rem; vertical-align: bottom; }
.atrium-table-card > .mud-simple-table { background: transparent; }
.atrium-table-card > .mud-simple-table table thead tr th { background-color: var(--atr-surface-subtle); }
.atrium-table-card > .mud-simple-table table tbody tr:last-child td { border-bottom: none; }
.mud-simple-table tbody tr .mud-icon-button.mud-error-text:not(:disabled) { color: var(--atr-text-3) !important; }
.mud-simple-table tbody tr:hover .mud-icon-button.mud-error-text:not(:disabled),
.mud-simple-table tbody tr:focus-within .mud-icon-button.mud-error-text:not(:disabled) { color: var(--atr-danger) !important; }
.mud-table-row.is-selected,
.mud-table .mud-table-body .mud-table-row.is-selected { background-color: var(--atr-accent-bg); }

/* Segmentwahl (Monat/Woche/Tag, Zeiträume): ein ruhiger Rahmen, die aktive Wahl als Fläche statt Farbe.
   Der Zustand steht zusätzlich in aria-pressed. */
.atrium-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--atr-border-strong);
    border-radius: var(--atr-radius-control);
    background: var(--atr-sheet);
}
.atrium-segmented .mud-button-root {
    min-height: 34px;
    padding: 4px 12px;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--atr-text-2);
    font-weight: 500;
    background: transparent;
}
.atrium-segmented .mud-button-root:hover:not(.is-active) { background: var(--atr-surface-subtle); color: var(--atr-text); }
.atrium-segmented .mud-button-root.is-active { background: var(--atr-nav-active); color: var(--atr-text); font-weight: 600; }
/* Anzahl je Segment (Filter „Offen 3“): leiser als die Bezeichnung, tabellarische Ziffern. */
.atrium-seg-count { margin-inline-start: 6px; font-size: .75rem; font-weight: 500; color: var(--atr-text-2); font-variant-numeric: tabular-nums; }
.atrium-segmented .mud-button-root.is-active .atrium-seg-count { color: var(--atr-text); }

/* Übersichtskacheln (Administration, Plattform): jede Kachel ist als Ganzes ein Link auf einen Arbeitsbereich.
   Haarlinien auf dem Blatt; Farbe erst beim Überfahren/Fokus (Tuscheblau = bedienbar). Vorher standen dort
   Karten mit je einem gefüllten „Öffnen“-Knopf – elf gleich laute Hauptaktionen auf einer Seite. */
.atrium-hub-group + .atrium-hub-group { margin-top: 32px; }
.atrium-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.atrium-hub-tile {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: 16px 44px 16px 16px;
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius-card);
    background: var(--atr-sheet);
    color: var(--atr-text);
    text-decoration: none;
    transition: border-color var(--atr-dur-fast) ease, background-color var(--atr-dur-fast) ease;
}
.atrium-hub-tile.is-action { padding-right: 16px; }
a.atrium-hub-tile:hover {
    border-color: color-mix(in srgb, var(--atr-text-3) 60%, var(--atr-border));
    background: var(--atr-surface-subtle);
    color: var(--atr-text);
    text-decoration: none;
}
a.atrium-hub-tile:focus-visible { outline: 2px solid var(--atr-accent); outline-offset: 2px; }
.atrium-hub-tile__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius-control);
    background: var(--atr-surface-sunken);
}
.atrium-hub-tile__icon .mud-icon-root { color: var(--atr-text-2); font-size: 1.25rem; }
a.atrium-hub-tile:hover .atrium-hub-tile__icon .mud-icon-root,
a.atrium-hub-tile:focus-visible .atrium-hub-tile__icon .mud-icon-root { color: var(--atr-accent); }
.atrium-hub-tile__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.atrium-hub-tile__title { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.atrium-hub-tile__text { font-size: .8125rem; line-height: 1.5; color: var(--atr-text-2); }
.atrium-hub-tile__action { margin-top: 8px; }
.atrium-hub-tile__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.atrium-hub-tile__meta > .mud-chip { margin: 0; }
/* Pfeil wie bei den verlinkten Kennzahl-Kacheln: dezent, beim Überfahren deutlicher. */
.atrium-hub-tile__go {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--atr-text-3);
    border-top: 1.5px solid var(--atr-text-3);
    transform: rotate(45deg);
    transition: transform var(--atr-dur-fast) ease, border-color var(--atr-dur-fast) ease;
}
@media (prefers-reduced-motion: reduce) {
    .atrium-hub-tile, .atrium-hub-tile__go { transition: none; }
}
a.atrium-hub-tile:hover .atrium-hub-tile__go,
a.atrium-hub-tile:focus-visible .atrium-hub-tile__go { border-color: var(--atr-accent); transform: translateX(2px) rotate(45deg); }

/* Kennzahlreihe aus StatTile-Kacheln. */
.atrium-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 599.98px) {
    .atrium-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* Höchstens drei je Zeile – für sechs Kacheln (3 + 3 statt 5 + 1). */
.atrium-stat-row.cols-3 { grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - 32px) / 3)), 1fr)); }
@media (max-width: 599.98px) {
    .atrium-stat-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Werkzeugleiste über Listen: Filter, Zeitraum, Aktionen – bricht um, statt zu überlaufen. */
.atrium-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.atrium-toolbar > * { flex: 0 1 auto; min-width: 0; }
.atrium-toolbar > .atrium-toolbar__spacer { flex: 1 1 auto; }
/* Suchfeld, das mitwachsen darf: als Hülle, weil MudBlazor Style/Class auf das innere Feld legt. */
.atrium-toolbar > .atrium-toolbar__grow { flex: 1 1 360px; max-width: 520px; }
.atrium-toolbar__meta { font-size: .8125rem; color: var(--atr-text-2); }
/* Knöpfe in Werkzeugleisten (auch Kalender) so hoch wie Felder und Segmentwahl – vorher 24, 28, 36 und 40 px
   nebeneinander. */
.atrium-toolbar > .mud-button-root:not(.mud-icon-button),
.cal-toolbar > .mud-button-root:not(.mud-icon-button) { min-height: 40px; }
.atrium-toolbar__meta strong { color: var(--atr-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Abschnittskopf (Projektbereiche, Listen): Titel links, Aktionen rechts, bricht um statt zu überlaufen.
   Der Titel hat überall dieselbe Stufe – vorher mal subtitle1, mal subtitle2, mal h6. */
.atrium-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 12px;
}
.atrium-section-head > .mud-link, .atrium-section-head > a { flex: none; white-space: nowrap; }
.atrium-section-head > .mud-typography:first-child {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.006em;
    color: var(--atr-text);
}

/* Erklärender Hinweistext unter dem Seitenkopf: gedämpft, lesbare Zeilenlänge. */
.atrium-note { max-width: 80ch; margin: -8px 0 20px; font-size: .8125rem; line-height: 1.5; color: var(--atr-text-2); }

/* Abgesenkte Fläche für Inline-Bearbeitung (ersetzt background-gray). */
.mud-paper.atr-sunken { background-color: var(--atr-surface-sunken); }
.atrium-cell-title { font-weight: 500; color: var(--atr-text); overflow-wrap: break-word; }
.atrium-cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.atrium-cell-sub { font-size: .75rem; line-height: 1.45; color: var(--atr-text-2); overflow-wrap: break-word; }
.atrium-overdue { color: var(--atr-danger); font-weight: 500; }
/* Mehrere Plaketten in einer Zelle als EIN Block – in der gestapelten Handy-Tabelle sonst über die Breite verteilt. */
.atrium-chip-row { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px; }
.atrium-chip-row > .mud-chip { margin: 0; }
/* Wert mit Zustand (negativer Deckungsbeitrag, offene Forderung, über Budget): Ton UND Gewicht –
   das Vorzeichen bzw. der Text trägt die Aussage mit, nie die Farbe allein. */
.atrium-value-danger { color: var(--atr-danger); font-weight: 500; }
.atrium-value-warning { color: var(--atr-warning); font-weight: 500; }
/* Priorität in Listen: Normal/Niedrig ruhig, Hoch/Dringend fallen auf (Gewicht UND Farbe). */
.atrium-prio { font-size: .8125rem; color: var(--atr-text-2); }
.atrium-prio.prio-high { color: var(--atr-warning); font-weight: 600; }
.atrium-prio.prio-urgent { color: var(--atr-danger); font-weight: 600; }

/* Aktive Filter aus der Adresszeile (z. B. von Dashboard-Kennzahlen) – sichtbar und einzeln entfernbar. */
.atrium-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.atrium-filterbar__label { font-size: .8125rem; color: var(--atr-text-2); }
.mud-button-root.atrium-filter-chip { border-radius: 999px; min-height: 28px; padding: 0 10px 0 12px; background: var(--atr-accent-bg); border-color: color-mix(in srgb, var(--atr-accent) 30%, transparent); color: var(--atr-accent); }
.mud-button-root.atrium-filter-chip:hover { background: color-mix(in srgb, var(--atr-accent) 14%, var(--atr-sheet)); }

/* Plankopf (Projektdetail): Nummer als Plan-Kennung, Status und Risiko in einer Zeile; Löschen abgesetzt. */
.plankopf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.plankopf-nr {
    font-size: .8125rem;
    color: var(--atr-text-2);
    padding: 2px 8px;
    border: 1px solid var(--atr-border-strong);
    border-radius: var(--atr-radius-chip);
    background: var(--atr-surface-sunken);
    line-height: 1.4;
}
.plankopf-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 4px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--atr-border);
}
.plankopf-chain { margin-top: 18px; padding-inline: 2px; }

/* Projektnavigation als ruhige Reiterleiste: Text mit Unterstrich (Tuscheblau) statt gefüllter Knöpfe. */
.atrium-projnav { gap: 2px; border-bottom: 1px solid var(--atr-border); }
.atrium-projnav .mud-button-root.atrium-projnav-tab,
.atrium-projnav .atrium-projnav-more .mud-button-root {
    border-radius: 0;
    min-height: 40px;
    padding: 0 10px;
    color: var(--atr-text-2);
    font-weight: 500;
    box-shadow: inset 0 -2px 0 transparent;
}
@media (min-width: 600px) and (max-width: 1279.98px) {
    .atrium-projnav .mud-button-root.atrium-projnav-tab,
    .atrium-projnav .atrium-projnav-more .mud-button-root { padding: 0 6px; min-width: 0; font-size: .8125rem; }
}
.atrium-projnav .mud-button-root.atrium-projnav-tab:hover,
.atrium-projnav .atrium-projnav-more .mud-button-root:hover {
    color: var(--atr-text);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--atr-border-strong);
}
.atrium-projnav .mud-button-root.atrium-projnav-tab--active,
.atrium-projnav .atrium-projnav-more.atrium-projnav-tab--active .mud-button-root {
    color: var(--atr-text);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--atr-accent);
}

/* Wartezustand (HoldCard): getönte Warnfläche mit Icon-Kachel – Referenzmuster für Statuskarten. */
.mud-paper.atrium-hold {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--atr-radius-card);
    border: 1px solid color-mix(in srgb, var(--atr-warning) 22%, transparent);
    background: color-mix(in srgb, var(--atr-warning-bg) 70%, var(--atr-sheet));
}
.atrium-hold__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--atr-radius-control);
    background: var(--atr-warning-bg);
    color: var(--atr-warning);
    border: 1px solid color-mix(in srgb, var(--atr-warning) 25%, transparent);
}
.atrium-hold__body { flex: 1 1 auto; min-width: 0; }
.atrium-hold__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
@media (max-width: 599.98px) {
    .mud-paper.atrium-hold { padding: 14px; gap: 10px; }
    .atrium-hold__icon { width: 30px; height: 30px; }
}

/* Fehlergrenze */
.blazor-error-boundary {
    background: var(--atr-danger-bg);
    color: var(--atr-danger);
    border: 1px solid color-mix(in srgb, var(--atr-danger) 40%, transparent);
    border-radius: var(--atr-radius-card);
    padding: 1rem 1.25rem;
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; }

/* ---------------------------------------------------------------------------------------------------
   6b · ANMELDUNG (Login, Zwei-Faktor) – global statt scoped, damit BEIDE Seiten dieselbe Gestaltung tragen
   (vorher galt das CSS nur für Login.razor, die 2FA-Seite blieb ungestylt). Die Seiten laufen über
   EmptyLayout ohne MudThemeProvider; Hell/Dunkel kommt über data-theme aus dem frühen Skript in App.razor.
   --------------------------------------------------------------------------------------------------- */
.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--atr-canvas);
    font-family: var(--atr-font);
    color: var(--atr-text);
}
.auth-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 24px; }

.auth .card {
    width: min(1040px, 100%);
    min-height: 600px;
    background: var(--atr-sheet);
    border: 1px solid var(--atr-border);
    border-radius: 16px;
    box-shadow: var(--atr-shadow-dialog);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
}
/* Zwei-Faktor: nur das Formular – schmale, einspaltige Karte. */
.auth .card:not(:has(.brand)) { width: min(480px, 100%); min-height: 0; grid-template-columns: 1fr; }

/* Markenpanel: Graphit mit feinem Zeichenraster – das Blatt, bevor die Arbeit beginnt. */
.auth .brand {
    position: relative;
    padding: 52px 52px 44px;
    color: #F2F0EC;
    background: #262A2B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    --atr-logo-ink: #FFFFFF;
    --atr-logo-stone: #FFFFFF;
}
.auth .brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(242, 240, 236, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 240, 236, .07) 1px, transparent 1px),
        linear-gradient(rgba(242, 240, 236, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 240, 236, .035) 1px, transparent 1px);
    background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
    -webkit-mask-image: radial-gradient(120% 100% at 85% 0%, #000 25%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 85% 0%, #000 25%, transparent 78%);
}
.auth .brand > * { position: relative; z-index: 1; }
.auth .logo svg { height: 34px; width: auto; display: block; }
.auth .pitch { margin-top: auto; }
.auth .brand h1 { font-size: 2rem; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; margin: 0 0 14px; color: #FFFFFF; }
.auth .brand p { color: rgba(242, 240, 236, .68); font-size: 1rem; line-height: 1.6; max-width: 34ch; margin: 0; }
.auth .features { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; padding: 0; }
.auth .features li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: .92rem; color: rgba(242, 240, 236, .84); }
.auth .features .dot {
    width: 24px; height: 24px; border-radius: 6px; flex: none;
    background: rgba(199, 185, 165, .12); border: 1px solid rgba(199, 185, 165, .28);
    display: flex; align-items: center; justify-content: center;
}
.auth .features .dot svg { width: 13px; height: 13px; stroke: #C7B9A5; fill: none; }
.auth .copy { font-size: .8rem; color: rgba(242, 240, 236, .42); margin-top: 28px; }

/* Formularpanel */
.auth .panel { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; }
.auth .head { margin-bottom: 28px; }
.auth .panel h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.auth .panel .sub { color: var(--atr-text-2); margin: 6px 0 0; font-size: .95rem; }

.auth .field { margin-bottom: 18px; }
.auth .field label { display: block; font-size: .8125rem; font-weight: 500; color: var(--atr-text); margin-bottom: 6px; }
.auth .input-wrap { position: relative; }
.auth .input-wrap .lead {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; stroke: var(--atr-text-3); fill: none; pointer-events: none;
}
.auth .lf-input {
    width: 100%; height: 46px; padding: 0 14px 0 42px;
    border: 1px solid var(--atr-border-strong); background: var(--atr-sheet);
    border-radius: var(--atr-radius-control); font: inherit; font-size: .95rem; color: var(--atr-text);
    box-sizing: border-box;
    transition: border-color var(--atr-dur-fast), box-shadow var(--atr-dur-fast);
}
.auth .card:not(:has(.brand)) .lf-input { padding-left: 14px; font-family: var(--atr-font-mono); letter-spacing: .12em; }
.auth .lf-input.has-toggle { padding-right: 44px; }
.auth .lf-input::placeholder { color: var(--atr-text-3); }
.auth .lf-input:focus { outline: none; border-color: var(--atr-accent); box-shadow: var(--atr-focus-ring); }
.auth .toggle-pw {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; color: var(--atr-text-2); display: flex;
}
.auth .toggle-pw:hover { color: var(--atr-text); background: var(--atr-surface-subtle); }
.auth .toggle-pw svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }

.auth .row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; }
.auth .remember { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--atr-text-2); cursor: pointer; margin-bottom: 18px; }
.auth .row .remember { margin-bottom: 0; }
.auth .remember input { width: 16px; height: 16px; accent-color: var(--atr-primary); }

.auth .btn,
.auth .btn-primary {
    width: 100%; height: 46px; border: none; border-radius: var(--atr-radius-control); cursor: pointer;
    background: var(--atr-primary); color: var(--atr-on-primary);
    font: inherit; font-size: .95rem; font-weight: 600;
    transition: background-color var(--atr-dur-fast), transform 80ms;
}
.auth .btn:hover, .auth .btn-primary:hover { background: var(--atr-primary-hover); }
.auth .btn:active, .auth .btn-primary:active { transform: translateY(.5px); }

.auth .login-error {
    background: var(--atr-danger-bg);
    color: var(--atr-danger);
    border: 1px solid color-mix(in srgb, var(--atr-danger) 30%, transparent);
    padding: .6rem .75rem; border-radius: var(--atr-radius-control); font-size: .85rem; margin-bottom: 1rem;
}
.auth .login-val { color: var(--atr-danger); font-size: .78rem; display: block; margin-top: 5px; }

.auth .alt { margin-top: 18px; text-align: center; font-size: .86rem; color: var(--atr-text-2); }
.auth .alt a { font-weight: 600; }
.auth .alt .sep { margin: 0 6px; color: var(--atr-border-strong); }

/* „Passwort vergessen?“ — aufklappbarer Hinweis ohne JS (statisches SSR). */
.auth .forgot { margin-top: 14px; font-size: .86rem; color: var(--atr-text-2); text-align: center; }
.auth .forgot summary { cursor: pointer; display: inline-block; list-style: none; color: var(--atr-accent); font-weight: 500; }
.auth .forgot summary::-webkit-details-marker { display: none; }
.auth .forgot summary:focus-visible { outline: none; box-shadow: var(--atr-focus-ring); border-radius: 4px; }
.auth .forgot[open] { padding: 12px 14px; background: var(--atr-surface-sunken); border: 1px solid var(--atr-border); border-radius: var(--atr-radius-card); text-align: left; }
.auth .forgot[open] summary { margin-bottom: 6px; }
.auth .forgot p { margin: 4px 0 0; line-height: 1.55; }
.auth .forgot a { font-weight: 600; white-space: nowrap; }
.auth .forgot .sep { margin: 0 6px; color: var(--atr-border-strong); }

.auth .legal { margin-top: 22px; text-align: center; font-size: .78rem; color: var(--atr-text-3); }
.auth .legal a { color: var(--atr-text-2); }
.auth .legal .sep { margin: 0 6px; color: var(--atr-border-strong); }

.auth .demo {
    margin-top: 28px; padding: 16px 18px;
    background: var(--atr-surface-sunken); border: 1px solid var(--atr-border);
    border-radius: var(--atr-radius-card); font-size: .84rem; color: var(--atr-text-2); line-height: 1.65;
}
.auth .demo .demo-title { font-weight: 600; color: var(--atr-text); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth .demo .acct { margin-top: 4px; }
.auth .demo .acct b { color: var(--atr-text); font-weight: 600; }
.auth .badge { font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: var(--atr-radius-chip); background: var(--atr-accent-bg); color: var(--atr-accent); }

/* Wartungsleiste (ganz oben, volle Breite, für alle sichtbar) */
.auth .maint-bar {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 28px;
    background: var(--atr-warning-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--atr-warning) 30%, transparent);
    color: var(--atr-text);
}
.auth .maint-bar.sev-info { background: var(--atr-info-bg); border-bottom-color: var(--atr-border-strong); }
.auth .maint-bar.sev-kritisch { background: var(--atr-danger-bg); border-bottom-color: color-mix(in srgb, var(--atr-danger) 35%, transparent); }
.auth .maint-bar-icon { width: 22px; height: 22px; flex: none; margin-top: 1px; stroke: var(--atr-warning); }
.auth .maint-bar.sev-info .maint-bar-icon { stroke: var(--atr-info); }
.auth .maint-bar.sev-kritisch .maint-bar-icon { stroke: var(--atr-danger); }
.auth .maint-bar-body { min-width: 0; }
.auth .maint-bar-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.auth .maint-bar-title { font-weight: 600; font-size: .95rem; }
.auth .maint-bar-time { font-size: .85rem; color: var(--atr-text-2); font-variant-numeric: tabular-nums; }
.auth .maint-bar-detail { font-size: .85rem; color: var(--atr-text); opacity: .85; margin-top: 3px; white-space: pre-line; line-height: 1.5; }

/* Neuigkeiten: ruhige Schaltfläche unten rechts; Klick öffnet eine Schublade (reines CSS, statisches SSR).
   Bewusst nicht vertikal mittig: Ab 820 px abwärts ist die Karte einspaltig, dann lag der Knopf über dem
   rechten Ende der Eingabefelder und verdeckte den Passwort-Schalter (UI/UX-Audit). */
.auth .news-fab {
    position: fixed; right: 20px; bottom: 20px;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--atr-sheet); border: 1px solid var(--atr-border-strong);
    color: var(--atr-text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 40;
    box-shadow: var(--atr-shadow-popover);
    transition: opacity .2s, background-color .15s;
}
.auth .news-fab:hover { background: var(--atr-surface-subtle); }
.auth .news-fab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.auth .news-fab-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--atr-danger); color: #fff; font-size: .6875rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--atr-canvas);
}
.auth .news-backdrop {
    position: fixed; inset: 0; z-index: 45; cursor: pointer;
    background: rgba(15, 17, 18, .38);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.auth .news-drawer {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(360px, 88vw);
    z-index: 46; display: flex; flex-direction: column;
    background: var(--atr-sheet); border-left: 1px solid var(--atr-border);
    box-shadow: var(--atr-shadow-dialog);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.auth .news-toggle:checked ~ .news-fab { opacity: 0; pointer-events: none; }
.auth .news-toggle:checked ~ .news-backdrop { opacity: 1; visibility: visible; }
.auth .news-toggle:checked ~ .news-drawer { transform: translateX(0); }
.auth .news-drawer-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 18px; border-bottom: 1px solid var(--atr-border); }
.auth .news-drawer-head > svg { width: 20px; height: 20px; color: var(--atr-text-2); stroke: currentColor; fill: none; }
.auth .news-drawer-head > span { font-weight: 600; font-size: 1rem; }
.auth .news-drawer-close {
    margin-left: auto; width: 32px; height: 32px; border-radius: var(--atr-radius-control); cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--atr-text-2);
    transition: background .12s, color .12s;
}
.auth .news-drawer-close:hover { background: var(--atr-surface-subtle); color: var(--atr-text); }
.auth .news-drawer-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.auth .news-list { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; min-height: 0; }
.auth .news-item { padding: 11px 13px; border: 1px solid var(--atr-border); border-radius: var(--atr-radius-card); background: var(--atr-surface-sunken); }
.auth .news-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth .news-item-title { font-weight: 600; font-size: .87rem; color: var(--atr-text); }
.auth .news-item-date { margin-left: auto; font-size: .73rem; color: var(--atr-text-2); font-variant-numeric: tabular-nums; }
.auth .news-item-body { font-size: .83rem; color: var(--atr-text-2); margin-top: 6px; white-space: pre-line; line-height: 1.5; }
.auth .news-badge {
    font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 7px; border-radius: var(--atr-radius-chip); flex: none;
    background: var(--atr-sheet); border: 1px solid var(--atr-border); color: var(--atr-text-2);
}
.auth .news-badge.kind-release { background: var(--atr-accent-bg); color: var(--atr-accent); border-color: transparent; }
.auth .news-ver { font-size: .6875rem; color: var(--atr-text-2); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
    .auth .card { grid-template-columns: 1fr; }
    .auth .brand { display: none; }
    .auth .panel { padding: 44px 32px; }
}
@media (max-width: 480px) {
    .auth-stage { padding: 16px; }
    .auth .panel { padding: 32px 22px; }
}

/* ---------------------------------------------------------------------------------------------------
   7 · HILFSKLASSEN (Raster-Abstände statt Inline-gap)
   --------------------------------------------------------------------------------------------------- */
.atr-gap-1 { gap: var(--atr-space-1); }
.atr-gap-2 { gap: var(--atr-space-2); }
.atr-gap-3 { gap: var(--atr-space-3); }
.atr-gap-4 { gap: var(--atr-space-4); }
.atr-gap-6 { gap: var(--atr-space-6); }
.atr-stack { display: flex; flex-direction: column; gap: var(--atr-space-4); }
.atr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--atr-space-2); margin-bottom: var(--atr-space-4); }
.atr-width-form { max-width: var(--atr-width-form); }
.atr-width-form-wide { max-width: var(--atr-width-form-wide); }
.atr-width-prose { max-width: var(--atr-width-prose); }
.atr-sunken { background-color: var(--atr-surface-sunken); border-radius: var(--atr-radius-control); }

/* ---------------------------------------------------------------------------------------------------
   8 · ZEILENKLICK – die ganze Zeile öffnet das Objekt (js/row-links.js leitet an [data-row-primary] weiter).
   Nur solche Zeilen zeigen Hand, Tönung und Pfeil; der primäre Link liest sich wie normaler Text.
   --------------------------------------------------------------------------------------------------- */
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row.atrium-rowlink:hover,
.mud-table .mud-table-body .mud-table-row.atrium-rowlink:hover,
.atrium-rowlink:hover { background-color: var(--atr-surface-subtle); }
.atrium-rowlink { cursor: pointer; }
.atrium-rowlink:focus-within { background-color: var(--atr-surface-subtle); }
.atrium-rowlink [data-row-primary] { color: inherit !important; text-decoration: none; }
.atrium-rowlink:hover [data-row-primary] { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.mud-table-row.atrium-rowlink > .mud-table-cell:last-child { position: relative; padding-right: 32px !important; padding-inline-end: 32px !important; }
.mud-table-row.atrium-rowlink > .mud-table-cell:last-child::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--atr-text-3);
    border-top: 1.5px solid var(--atr-text-3);
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity var(--atr-dur-fast) ease, right var(--atr-dur-fast) ease;
}
.mud-table-row.atrium-rowlink:hover > .mud-table-cell:last-child::after,
.mud-table-row.atrium-rowlink:focus-within > .mud-table-cell:last-child::after { opacity: 1; right: 8px; }
@media (max-width: 599.98px) {
    .mud-table-row.atrium-rowlink > .mud-table-cell:last-child { padding-right: 16px !important; padding-inline-end: 16px !important; }
    .mud-table-row.atrium-rowlink > .mud-table-cell:last-child::after { display: none; }
}

/* ---------------------------------------------------------------------------------------------------
   9 · ERHALTENE VERTRÄGE (unverändert übernommen; Werte nur auf Tokens umgestellt)
   --------------------------------------------------------------------------------------------------- */

/* ---- Bildlaufschatten: zeigt an, dass rechts noch Spalten stehen ----
   Die deckenden (`local`) Verläufe laufen mit dem Inhalt und schieben sich am Ende über den Schatten –
   der Hinweis verschwindet von selbst. Der Schatten ist über die Textfarbe gemischt, damit er auch auf
   der dunklen Fläche sichtbar bleibt. */
.mud-table-container {
    background-image:
        linear-gradient(to right, var(--mud-palette-surface) 40%, transparent),
        linear-gradient(to left, var(--mud-palette-surface) 40%, transparent),
        linear-gradient(to right, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent), transparent),
        linear-gradient(to left, color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* Bezeichner (erste Spalte: Projekt-/Rechnungsnummer) und rechtsbündige Zahl-/Geldspalten sind
   atomar — nie umbrechen (kein „RE-2026-⏎0002", kein „66.045,00 ⏎€"). Gilt für alle Listen-Views. */
.mud-table-cell:first-child { white-space: nowrap; }
.mud-table-cell[style*="text-align: right"],
.mud-table-cell[style*="text-align:right"] { white-space: nowrap; }

/* ---- Gestapelte Tabellen: Werte schrumpfen und brechen um, statt die Karte zu verbreitern. ---- */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-body .mud-table-cell { overflow-wrap: anywhere; }
    .mud-xs-table .mud-table-body .mud-table-cell > * { min-width: 0; }
    .mud-xs-table .mud-table-body .mud-table-cell::before { flex: none; overflow-wrap: normal; }
    .mud-xs-table .mud-table-body .atrium-cell-stack { align-items: flex-end; text-align: right; }
}
@media (max-width: 960px) {
    .mud-sm-table .mud-table-body .mud-table-cell { overflow-wrap: anywhere; }
    .mud-sm-table .mud-table-body .mud-table-cell > * { min-width: 0; }
    .mud-sm-table .mud-table-body .mud-table-cell::before { flex: none; overflow-wrap: normal; }
    .mud-sm-table .mud-table-body .atrium-cell-stack { align-items: flex-end; text-align: right; }
}
@media (max-width: 1280px) {
    .mud-md-table .mud-table-body .mud-table-cell { overflow-wrap: anywhere; }
    .mud-md-table .mud-table-body .mud-table-cell > * { min-width: 0; }
    .mud-md-table .mud-table-body .mud-table-cell::before { flex: none; overflow-wrap: normal; }
    .mud-md-table .mud-table-body .atrium-cell-stack { align-items: flex-end; text-align: right; }
}

/* ---- Gestapelte Karte: eine als .atrium-stack-title markierte Zelle führt die Karte an. ---- */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-body .mud-table-row:has(> .atrium-stack-title) { display: flex; flex-direction: column; }
    .mud-sm-table .mud-table-body .mud-table-cell.atrium-stack-title { order: -1; justify-content: flex-start; text-align: left; padding-top: 12px; }
    .mud-sm-table .mud-table-body .mud-table-cell.atrium-stack-title::before { display: none; }
    .mud-sm-table .mud-table-body .atrium-stack-title .atrium-cell-stack { align-items: flex-start; text-align: left; }
    .mud-sm-table .mud-table-body .atrium-stack-title .atrium-cell-title { font-size: .9375rem; font-weight: 600; }
}

/* ---- Dialogfußzeile darf umbrechen (zweistufige Löschabfrage mit vier Knöpfen bei 390 px). ---- */
.mud-dialog-actions { flex-wrap: wrap; }

/* ---- Wiederverbindungs-Overlay (Blazor steuert die Klassen automatisch) ---- */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 18, .55);
    backdrop-filter: blur(2px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
.atrium-reconnect-card {
    background: var(--atr-sheet, #ffffff);
    color: var(--atr-text, #262A2B);
    border: 1px solid var(--atr-border, #E8E4DC);
    border-radius: 14px;
    padding: 24px 28px;
    box-shadow: var(--atr-shadow-dialog);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 340px;
    text-align: center;
    font-family: var(--atr-font);
}
.atrium-reconnect-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--atr-border, #E8E4DC);
    border-top-color: var(--atr-accent, #2D5F9A);
    animation: atrium-spin .8s linear infinite;
}
@keyframes atrium-spin { to { transform: rotate(360deg); } }
.atrium-reconnect-text { margin: 0; font-size: .95rem; }
.atrium-reconnect-reload {
    display: none;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--atr-on-primary, #fff);
    background: var(--atr-primary, #262A2B);
}
/* „Neu laden" nur anbieten, wenn die automatische Wiederverbindung gescheitert/abgelehnt wurde */
#components-reconnect-modal.components-reconnect-failed .atrium-reconnect-reload,
#components-reconnect-modal.components-reconnect-rejected .atrium-reconnect-reload { display: inline-block; }
#components-reconnect-modal.components-reconnect-failed .atrium-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected .atrium-reconnect-spinner { display: none; }

/* ---- Bewegung reduzieren, wenn das Betriebssystem es verlangt (WCAG 2.3.3, prefers-reduced-motion) ----
   Neutralisiert Übergänge/Animationen für Nutzer mit Bewegungsempfindlichkeit. Funktion bleibt erhalten:
   Zustände wechseln sofort statt animiert, Ladehinweise tragen zusätzlich Text. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Touch-Ziele: auf Zeigegeräten ohne feine Maus (Touch/Stift) Icon-Buttons auf komfortable
   Antippgröße (44px) bringen — Size.Small rendert sonst ~30px. Nur unter (pointer: coarse);
   Maus-/Trackpad-Desktop bleibt unverändert kompakt (WCAG 2.5.5). ---- */
@media (pointer: coarse) {
    .mud-button-root.mud-icon-button { min-width: 44px; min-height: 44px; }
}

/* ---- Tastatur-Grundlage: Sprunglink und durchgehend sichtbarer Fokus. ---- */
.atrium-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 4000;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--atr-on-primary, #fff);
    background: var(--atr-primary, #262A2B);
    transform: translateY(-160%);
    transition: transform .12s ease-out;
}

.atrium-skip-link:focus,
.atrium-skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: var(--atr-shadow-popover);
    outline: 3px solid var(--atr-accent, #2D5F9A);
    outline-offset: 2px;
}

.mud-table-cell > .atrium-visually-hidden,
th > .atrium-visually-hidden,
td > .atrium-visually-hidden {
    position: static !important;
    display: inline-block !important;
    vertical-align: top;
    clip-path: inset(50%);
}
.atrium-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.external-state-panel {
    max-width: 880px;
    margin-block: 0.75rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.external-state-panel__alert {
    width: 100%;
}

.external-state-panel__content {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.external-state-panel__icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.external-state-panel__body {
    min-width: 0;
    flex: 1 1 auto;
}

.external-state-panel__title {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.external-state-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

:where(a, button, input, textarea, select, [role="button"], [role="link"], [tabindex]):focus-visible {
    outline: 3px solid var(--atr-accent, #2D5F9A) !important;
    outline-offset: 2px;
}

/* IMP-007: shared shell/reflow contract. Keep data scroll local, never clip the page. */
/* Mud's drawer overlay is appbar + 1; keep its toggle usable without lifting it above dialogs. */
.mud-appbar.atrium-appbar { z-index: max(calc(var(--mud-zindex-appbar) + 2), calc(var(--mud-zindex-drawer) + 2)); }
.atrium-appbar .mud-toolbar { min-width: 0; gap: 2px; }
.atrium-appbar .mud-toolbar > * { flex-shrink: 0; }
.atrium-appbar .mud-toolbar > .mud-spacer { flex-shrink: 1; }
.atrium-header-search { display: flex; align-items: center; margin: 0 0 0 8px; }
.atrium-header-search .atrium-appbar-search { min-width: 0; width: clamp(200px, 22vw, 320px); }
.atrium-appbar .atrium-compact-search { display: none; }
.atrium-account-popover { max-width: calc(100vw - 24px); overflow-wrap: anywhere; }
.atrium-acting-tenant .mud-alert-message { min-width: 0; overflow-wrap: anywhere; }
.atrium-main-content, .atrium-page-shell .mud-grid-item,
.atrium-page-shell .mud-paper, .atrium-page-shell .mud-input-control { min-width: 0; }
.atrium-page-shell .mud-table { max-width: 100%; }
.atrium-page-shell .mud-button-group-root { max-width: 100%; flex-wrap: wrap; }
.atrium-page-shell .mud-table-container {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: auto;
    scrollbar-color: var(--mud-palette-text-secondary) var(--mud-palette-background-gray);
    scroll-padding-inline: 6px;
}
.atrium-page-shell .mud-table-pagination { flex-wrap: wrap; height: auto; min-height: 56px; }
.mud-dialog-container .mud-dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
}
.mud-dialog-container .mud-dialog-content { min-height: 0; overflow-y: auto; }
.mud-dialog-container .mud-dialog-actions { flex-shrink: 0; flex-wrap: wrap; }
.mud-dialog-container .mud-dialog-title { flex-shrink: 0; }
.external-state-panel .mud-alert-message { min-width: 0; width: 100%; }
.external-state-panel .mud-button-root { max-width: 100%; white-space: normal; }

@media (max-width: 959.98px) {
    .atrium-header-search { display: none; }
    .atrium-appbar .atrium-compact-search { display: inline-flex; }
    .atrium-page-shell .mud-icon-button { min-width: 40px; min-height: 40px; }
    /* Unter md liegt der Drawer UNTER der Kopfleiste: „Menü" bleibt auch bei offenem Drawer erreichbar. */
    .mud-drawer.atrium-navigation-drawer { top: var(--mud-appbar-height); height: calc(100% - var(--mud-appbar-height)); }
    .mud-drawer.atrium-navigation-drawer.mud-drawer--open { box-shadow: var(--atr-shadow-popover); }
    .atrium-drawer-brand { display: none; }
}
@media (min-width: 960px) {
    .mud-drawer.atrium-navigation-drawer { top: 0; }
    .mud-layout.mud-drawer-open-responsive-md-left .atrium-appbar-brand { display: none; }
}
@media (max-width: 599.98px) {
    .atrium-appbar .mud-toolbar { padding-inline: 12px; gap: 0; }
    .atrium-appbar .atrium-appbar-brand { display: none; }
    .atrium-appbar .mud-badge-root { margin-inline: 0 !important; } /* existing mx-* utilities */
    .atrium-page-shell .mud-grid-item { max-width: 100%; }
    .atrium-page-shell .mud-input-control { max-width: 100%; }
    .atrium-page-shell .mud-grid-item:has(.mud-input-control),
    .mud-dialog .mud-grid-item:has(.mud-input-control) { flex-basis: 100%; max-width: 100%; }
}

/* ---------------------------------------------------------------------------------------------------
   10 · DRUCK – Papier bleibt Papier: keine Flächen, keine Navigation.
   --------------------------------------------------------------------------------------------------- */
@media print {
    html, body, .atrium-main-content { background: #fff !important; }
    .mud-appbar, .mud-drawer, .atrium-busybar, .atrium-skip-link { display: none !important; }
    .atrium-main-content { border: none !important; margin: 0 !important; }
    .mud-main-content { padding: 0 !important; }
}