/* === RESET & BASE === */
/* Inter selbst gehostet (Variable Font, latin-Subset inkl. Umlaute + €) —
   kein Google-Fonts-Request mehr: schneller, offline-faehig, DSGVO-sauber.
   Die Datei deckt als Variable Font alle Gewichte 400–700 ab. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Das hidden-Attribut blendet IMMER aus — auch Elemente, deren Klasse ein
   eigenes display setzt (.actions, .chips, flex/grid-Container). Ohne diese
   Regel gewinnt die Klasse gegen den UA-Default und JS-Toggles per `hidden`
   bleiben wirkungslos; Module mussten dafuer je Klasse eigene Regeln bauen. */
[hidden] { display: none !important; }
input, textarea, select, button { font-family: inherit; font-size: inherit; color: inherit; }
input, textarea, select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(91, 75, 196, 0.15); }
/* Suchfelder bleiben beim Fokus dezent — kein Akzent-Ring */
input[type="search"]:focus { border-color: var(--color-border); box-shadow: none; }

/* Strukturelle Tokens — Farben/Schatten definiert ausschliesslich themes.css
   (frueher lag hier ein kompletter Dark-Satz, der nur wegen der Bundle-
   Reihenfolge base→themes unsichtbar blieb) */
:root {
    --radius: 10px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links (seit 0.75.0, docs/frontend.md → „Links"): interne Textlinks ruhig in Textfarbe ohne
   Unterstreichung — erkennbar an Ort und Hover. Hover/Fokus: Unterstreichung + Linkfarbe,
   sichtbarer Fokusring. Externe Links (neues Fenster, rel=external, absolute http(s)-URL)
   behalten die Linkfarbe. Alle Selektoren per :where() auf Element-Spezifitaet (0,0,1):
   Bausteine mit eigener Klasse (.btn, .badge, .chip, .tab, .tile, .stat, Navigation)
   gewinnen immer und bleiben unveraendert. Fliesstext (.markdown) unterstreicht zusaetzlich. */
a { color: var(--color-text); text-decoration: none; }
a:where(:hover, :focus-visible) {
    color: var(--color-link, var(--color-primary-text, var(--color-primary)));
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
a:where(:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
a:where([target="_blank"], [rel~="external"], [href^="http://"], [href^="https://"]) {
    color: var(--color-link, var(--color-primary-text, var(--color-primary)));
}
/* Optionales Kennzeichen fuer externe Links: <a class="link-external" href="https://…" target="_blank" rel="noopener">…</a> */
.link-external::after { content: "\2197"; display: inline-block; margin-left: 0.15em; font-size: 0.8em; text-decoration: none; }
h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; font-weight: 600; }
/* === THEME DEFINITIONEN === */
/* 2 Modi: Light (Default) + Dark */
/* Aktives Theme: data-theme Attribut auf <html> ("light" | "dark") */

/* Brand-Akzent (faictory, themeunabhaengig): zweifarbiger Verlauf wie auf
   faictory.de fuer Primaer-Buttons + Sidebar-Marke/Nav-Avatar. Core-Default;
   ein Projekt-CI kann --accent/--accent-2/--accent-gradient uebersteuern
   (partials/ci-style.php). Konsumiert via var(--accent-gradient, var(--color-primary))
   in components.css (.btn--primary) und layout.css (Marke, Nav-Avatar). */
:root {
    --accent: #f97467;
    --accent-2: #790a0a;
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}

/* --- LIGHT (Default) --- */
[data-theme="light"], :root {
    --color-primary: #5b4bc4;
    --color-primary-dark: #4d3fa6;
    --color-primary-light: #efedf9;
    --color-bg: #f6f5fa;
    --color-surface: #ffffff;
    --color-surface-hover: #faf9fd;
    --color-text: #211e33;
    --color-text-muted: #6f6d7a;
    --color-text-light: #a8a29e;
    --color-border: #e7e5e4;
    --color-border-light: #f5f5f4;
    --color-success: #059669;
    --color-success-light: #ecfdf5;
    --color-error: #dc2626;
    --color-error-light: #fef2f2;
    --color-warning: #d97706;
    --color-warning-light: #fffbeb;
    --color-info: #2563eb;
    --color-info-light: #eff6ff;
    /* Status als Text auf der hellen Statusflaeche (.alert--*, .badge--*): dunklere
       Stufe, damit AA (>= 4.5:1) auf *-light erreicht wird (tests/ci-contrast.test.php) */
    --color-success-text: #047857;
    --color-error-text: #b91c1c;
    --color-warning-text: #b45309;
    --color-info-text: #1d4ed8;
    /* Schrift auf --color-warning als Flaeche (Nav-Badge, .count--warning) */
    --color-on-warning: #1c1917;
    /* Badge-/Status-Farben (.badge--*, .status-select, .tag): Flaeche + Schrift */
    --badge-muted-bg: #f3f4f6;   --badge-muted-fg: #6f6d7a;
    --badge-gray-bg: #e5e7eb;    --badge-gray-fg: #374151;
    --badge-blue-bg: #dbeafe;    --badge-blue-fg: #1e40af;
    --badge-purple-bg: #ede9fe;  --badge-purple-fg: #6d28d9;
    --badge-teal-bg: #ccfbf1;    --badge-teal-fg: #0f766e;
    --badge-green-bg: #dcfce7;   --badge-green-fg: #166534;
    --badge-yellow-bg: #fef3c7;  --badge-yellow-fg: #92400e;
    --badge-orange-bg: #ffedd5;  --badge-orange-fg: #9a3412;
    --badge-red-bg: #fee2e2;     --badge-red-fg: #991b1b;
    --badge-pink-bg: #fce7f3;    --badge-pink-fg: #9d174d;
    --badge-brown-bg: #f5e8d8;   --badge-brown-fg: #78350f;
    --shadow: 0 1px 2px rgba(33,30,51,0.05), 0 4px 16px rgba(33,30,51,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.03);
    /* Kacheln (.tile): grosser Radius, weicher Schatten, Hover staerker */
    --tile-radius: calc(var(--radius, 10px) + 6px);
    --tile-border: rgba(33,30,51,0.06);
    --shadow-tile: 0 1px 2px rgba(33,30,51,0.04), 0 6px 20px rgba(33,30,51,0.08);
    --shadow-tile-hover: 0 2px 4px rgba(33,30,51,0.05), 0 14px 32px rgba(33,30,51,0.14);
    --login-gradient: linear-gradient(135deg, #faf5ff 0%, #fafaf9 50%, #f5f3ff 100%);
    --color-favorite: #fbbf24;
}

/* --- DARK --- */
[data-theme="dark"] {
    --color-primary: #897dd5;
    --color-primary-dark: #5b4bc4;
    --color-primary-light: rgba(137, 125, 213, 0.12);
    --color-bg: #09090b;
    --color-surface: #18181b;
    --color-surface-hover: #27272a;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-text-light: #71717a;
    --color-border: #27272a;
    --color-border-light: #1e1e22;
    --color-success: #34d399;
    --color-success-light: rgba(52, 211, 153, 0.12);
    --color-error: #f87171;
    --color-error-light: rgba(248, 113, 113, 0.12);
    --color-warning: #fbbf24;
    --color-warning-light: rgba(251, 191, 36, 0.12);
    --color-info: #60a5fa;
    --color-info-light: rgba(96, 165, 250, 0.12);
    --color-success-text: #34d399;
    --color-error-text: #f87171;
    --color-warning-text: #fbbf24;
    --color-info-text: #60a5fa;
    --color-on-warning: #18181b;
    --badge-muted-bg: rgba(161, 161, 170, 0.12);  --badge-muted-fg: #a1a1aa;
    --badge-gray-bg: rgba(161, 161, 170, 0.18);   --badge-gray-fg: #d4d4d8;
    --badge-blue-bg: rgba(96, 165, 250, 0.16);    --badge-blue-fg: #93c5fd;
    --badge-purple-bg: rgba(167, 139, 250, 0.16); --badge-purple-fg: #c4b5fd;
    --badge-teal-bg: rgba(45, 212, 191, 0.16);    --badge-teal-fg: #5eead4;
    --badge-green-bg: rgba(74, 222, 128, 0.16);   --badge-green-fg: #86efac;
    --badge-yellow-bg: rgba(250, 204, 21, 0.16);  --badge-yellow-fg: #fde68a;
    --badge-orange-bg: rgba(251, 146, 60, 0.16);  --badge-orange-fg: #fdba74;
    --badge-red-bg: rgba(248, 113, 113, 0.16);    --badge-red-fg: #fca5a5;
    --badge-pink-bg: rgba(244, 114, 182, 0.16);   --badge-pink-fg: #f9a8d4;
    --badge-brown-bg: rgba(217, 160, 102, 0.16);  --badge-brown-fg: #e7c9a5;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.25);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3);
    --tile-border: #27272a;
    --shadow-tile: 0 1px 2px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.3);
    --shadow-tile-hover: 0 2px 4px rgba(0,0,0,0.4), 0 14px 32px rgba(0,0,0,0.5);
    --login-gradient: linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%);
    --color-favorite: #fbbf24;
}

/* Light-Theme Alert-Borders: kraeftigere Border, weil die *-light-Hintergruende
   im Light-Mode fast weiss sind */
[data-theme="light"] .alert--success { border-color: #a7f3d0; }
[data-theme="light"] .alert--error { border-color: #fecaca; }
[data-theme="light"] .alert--warning { border-color: #fde68a; }
[data-theme="light"] .alert--info { border-color: #bfdbfe; }

/* Dark/Light-Switch (Einstellungen → Erscheinungsbild) */
.theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 3px); }
.theme-switch-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: calc(var(--radius) - 3px); font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; transition: all 0.15s; }
.theme-switch-opt:hover { color: var(--color-primary); }
.theme-switch-opt--active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow); }
.theme-switch-opt--active:hover { color: var(--color-text); }
/* === Icon System (SVG inline, Linear-Style) === */
/* Monochrome, 1px stroke, currentColor */

.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}
.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; }

/* Icons als background-image SVG (currentColor via filter) */
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* === Avatar (Sidebar-Benutzer-Chip + Konto-Popover) ===
   Frueher gab es hier die komplette Top-Navigation (.nav*). Die ist entfernt —
   Sidebar ist das einzige Layout. Nur die Avatar-Klassen bleiben, weil sie der
   Benutzer-Chip und das Konto-Menue (partials/_usermenu-popover.php) nutzen. */
.nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Bereichs-Icon im Switcher (main.php, $areaIcon) */
.app-sidebar-area-icon { vertical-align: -2px; margin-right: 5px; }

/* === Main Content === */
.main {
    padding: 0;
    width: 100%;
}

/* Container-Varianten: tragen das Padding, damit .main padding-frei bleibt.
 * So koennen Module mit eigener Sidebar edge-to-edge im .main sitzen,
 * waehrend normaler Content bequem Abstand hat. */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 2rem; }
.container--narrow { width: 100%; max-width: 640px; margin: 0 auto; padding: 2rem; }
.container--wide { width: 100%; max-width: none; margin: 0; padding: 1rem; }

/* === Seitenfluss: Abstand zwischen Bloecken (seit 0.76.0) ========================
 * Jeder sichtbare Block im Seiteninhalt (.container, .page-main, .section) hat Abstand zum
 * vorherigen — auch Bausteine ohne eigenen margin-bottom (.grid, .tiles, .actions, p, form).
 * Nur margin-top mit Spezifitaet 0 (:where): vertikale Margins fallen mit dem margin-bottom
 * von .card/.alert/.page-header zusammen (Maximum, keine Summe); jede Klasse mit eigenem
 * margin-top (.mt-0, .section-lead, .list-pagination) gewinnt. Token: --flow-space.
 * Enge Paare bleiben eng: nach .section-title/-head, Seitenkopf, Toolbar, Chips, Reitern und
 * Filter-Panel gilt der Abstand des Vorgaengers; nach Absatz/Ueberschrift ein kleinerer (--flow-space-sm). */
:root { --flow-space: 1.25rem; --flow-space-sm: 0.75rem; }
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(:not(script, style, template, link, meta, input[type="hidden"], [hidden], dialog, .modal)) ~ :where(*) {
    margin-top: var(--flow-space);
}
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(p, h1, h2, h3, h4) + :where(*) {
    margin-top: var(--flow-space-sm);
}
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(.section-title, .section-head, .page-header, .back-link, .list-toolbar, .list-views, .chips, .tabs, .tabs-select, #filter-panel, .card-head) + :where(*) {
    margin-top: 0;
}
/* Lange Woerter/URLs in Fliesstext brechen um, statt die Seite zu verbreitern */
:where(.container, .container--narrow, .container--wide) :where(p, li, dd, .alert, .section-lead, .page-lead, .page-title, .section-title) { overflow-wrap: break-word; }
/* Aktionsleisten: ein einzelner Button, der breiter als die Zeile ist (Blaettern mit langem Titel),
   bricht um statt die Seite zu verbreitern — normale Buttons passen und bleiben einzeilig */
.actions > .btn, .page-actions .btn, .section-actions .btn { max-width: 100%; white-space: normal; }
/* === Ende Seitenfluss 0.76.0 === */

/* === Gleich grosse Kacheln und Karten im Raster (seit 0.77.0, BUG-004) =====================
 * Traegt ein Raster selbst eine Seitenfluss-Klasse (<div class="tiles section">,
 * <section class="section grid grid--cols-4">), griff der Seitenfluss oben auf die
 * RASTER-KINDER: jedes ausser dem ersten bekam margin-top: var(--flow-space). Grid-Kinder
 * werden auf ihre Spur gestreckt, der Rand geht von der Hoehe ab — die erste Kachel war
 * um --flow-space hoeher als alle anderen („Die erste Box ist immer groesser").
 * Raster und Flex-Reihen verteilen ihren Abstand ueber gap, nie ueber Raender an den Kindern.
 * Spezifitaet 0,1,0 schlaegt den Seitenfluss (:where(), 0,0,0); die Abstands-Utilities
 * .mt-0/1/2 und .mb-0/1/2 (ebenfalls 0,1,0, spaeter im Bundle) gewinnen weiter. */
:is(.grid, .tiles, .dashboard-widgets, .actions, .chips, .tags) > * {
    margin-top: 0;
    margin-bottom: 0;
}
/* Kinder duerfen ihre Spur nie sprengen (sonst wird eine Spur breiter als die anderen). */
.tiles > *, .dashboard-widgets > * { min-width: 0; }
/* === Ende gleich grosse Kacheln 0.77.0 === */

/* ============================================================
 * Minimal-Layout (body[data-layout="minimal"], layouts/minimal.php, seit 0.67.0)
 * Kopf mit CI/Logo, Inhalt, Fusszeile — keine Sidebar. Default fuer externe
 * Benutzer (docs/extern.md). Glocke/Konto-Menue sind die Core-Komponenten der
 * Sidebar; hier klappen ihre Popover nach unten.
 * ============================================================ */
body[data-layout="minimal"] { min-height: 100vh; display: flex; flex-direction: column; }
.app-minimal-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
/* Kopf, Reiter und Inhalt teilen EINEN Rahmen (seit 0.84.0): gleiche Breite und Einrueckung
   wie .container (1400px, 2rem; <=768px 1rem) — mal dem CI-Zoom (--ci-scale aus
   partials/ci-style), der nur auf .main .container wirkt. Vorher sassen Logo und Reiter
   anders eingerueckt als der Inhalt, das Reiter-Dropdown sogar bei x=0. */
body[data-layout="minimal"] { --minimal-gutter: calc(2rem * var(--ci-scale, 1)); --minimal-max: calc(1400px * var(--ci-scale, 1)); }
.app-minimal-header-inner {
    max-width: var(--minimal-max); margin: 0 auto; padding: 0.75rem var(--minimal-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.app-minimal-brand { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; color: var(--color-text); text-decoration: none; }
.app-minimal-brand:hover { text-decoration: none; }
.app-minimal-brand-logo { display: inline-flex; align-items: center; border-radius: calc(var(--radius) - 2px); padding: 2px; }
.app-minimal-brand-logo img { max-height: 40px; max-width: 180px; display: block; }
.app-minimal-brand-name { display: flex; flex-direction: column; font-weight: 700; font-size: 1.05rem; line-height: 1.2; min-width: 0; }
.app-minimal-brand-claim { font-weight: 400; font-size: 0.8rem; color: var(--color-text-muted); }
.app-minimal-actions { display: flex; align-items: center; gap: 0.5rem; }
.app-minimal-tools { margin: 0; }
.app-minimal-tools .app-sidebar-tool { color: var(--color-text-muted); }
.app-minimal-tools .app-sidebar-tool[data-tip]::after { bottom: auto; top: calc(100% + 6px); }
.app-minimal-tools .app-sidebar-bell-menu { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; }
.app-minimal-user {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 8px 4px 4px;
    border-radius: 999px; color: var(--color-text);
}
.app-minimal-user:hover { background: var(--color-surface-hover); }
.app-minimal-user-name { font-weight: 600; font-size: 0.9rem; }
/* Reiter buendig mit Logo und Inhalt (Rahmen oben). Vorher zentriert bzw. als Dropdown bei x=0. */
.app-minimal-nav-wrap { max-width: var(--minimal-max); margin: 0 auto; padding: 0 var(--minimal-gutter) 0.75rem; }
.app-minimal-nav { display: flex; width: fit-content; max-width: 100%; margin: 0; overflow-x: auto; }
.app-minimal-nav-wrap > .tabs-select { margin-bottom: 0; }
.app-minimal-main { flex: 1; }
.app-minimal-footer {
    padding: 1rem 2rem; text-align: center; font-size: 0.8rem;
    color: var(--color-text-muted); border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
    body[data-layout="minimal"] { --minimal-gutter: calc(1rem * var(--ci-scale, 1)); }
}
@media (max-width: 640px) {
    .app-minimal-header-inner { padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .app-minimal-nav-wrap { padding-bottom: 0.6rem; }
    .app-minimal-user-name { display: none; }
}

/* ============================================================
 * Sidebar-Layout (body[data-layout="sidebar"])
 * Haupt-Navi wandert in eine fixe linke Spalte, Modul-Submenues
 * werden zu ausklappbaren Unterelementen.
 *
 * Breiten-Management via CSS-Variable --sidebar-width. Beim Collapse
 * wird nur die Variable geaendert, alles andere (Sidebar, Content,
 * Transitions) folgt automatisch.
 * ============================================================ */

body[data-layout="sidebar"] {
    --sidebar-width: 240px;
    --sidebar-gap: 0.5rem;
}

/* Icon-Rail (66px) — NUR auf schmalen Viewports (<=900px, app.js + Inline-Script in
 * layouts/main setzen data-sidebar-collapsed). Die Seitenleiste ist nie einklappbar
 * (seit 0.84.0 kein Einklapp-Knopf). Nur die Variable aendert sich — .main und
 * .app-sidebar folgen. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] {
    --sidebar-width: 66px;
    --sidebar-gap: 0px;
}


/* Gap wird ueber margin-left erzeugt, NICHT ueber padding-left.
 * Dadurch bleibt .main's Padding einheitlich bei 2rem und alle Views
 * die sich mit 'margin: -2rem' in .main rausziehen funktionieren konsistent. */
body[data-layout="sidebar"] .main {
    margin-left: calc(var(--sidebar-width) + var(--sidebar-gap));
    width: calc(100% - var(--sidebar-width) - var(--sidebar-gap));
    padding: 0;
    min-height: 100vh;
    transition: margin-left 0.2s ease, width 0.2s ease;
}

.app-sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width, 240px); /* folgt der Collapse-Variable: 240px <-> 66px */
    height: 100vh;
    /* --sidebar-* setzt das CI-Theming (partials/ci-style.php); ohne CI gilt das Theme. */
    background: var(--sidebar-bg, var(--color-surface));
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    padding: 20px 12px;
    z-index: 100;
    flex-direction: column;
    gap: 4px;
    transition: width 0.2s ease, padding 0.2s ease;
}

body[data-layout="sidebar"] .app-sidebar {
    display: flex;
}

/* Collapsed: schmale Icon-Rail (Prototyp-Spec) — Labels/Name/Claim/Meta aus,
 * Icons zentriert. Die Sidebar bleibt sichtbar, verschwindet NICHT. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar {
    padding: 20px 10px;
    overflow: visible;
}
/* Rail ohne Marke: kein Platz fuers Logo, und seit 0.84.0 gibt es keinen Aufklapp-Knopf,
   der hier stand. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand { display: none; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-brand-name,
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-group-label { display: none; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link {
    justify-content: center;
    padding: 9px 0;
    gap: 0;
    position: relative;
}
/* Eingeklappt scrollt die Nav WEITER (UI-Audit Q2): mit overflow: visible wurde sie
   laenger als der Bildschirm, und die Werkzeug-Leiste lag auf den Nav-Icons. Der
   Tooltip verlaesst den Scroll-Container per position: fixed; seine Hoehe setzt
   app.js beim Hovern/Fokus als --tip-y (Mitte des Links). */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-nav {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-nav::-webkit-scrollbar { display: none; }
/* Label wird zum Tooltip: weisse Schrift auf schwarzem, abgerundetem "Button" rechts neben dem Icon. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-label {
    display: block;
    position: fixed;
    left: calc(var(--sidebar-width) + 8px);
    top: var(--tip-y, 50%);
    transform: translateY(-50%);
    flex: none;
    padding: 6px 11px;
    background: #1a1a22;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 300;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link:hover .app-sidebar-link-label,
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link:focus-visible .app-sidebar-link-label {
    opacity: 1;
    visibility: visible;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user {
    justify-content: center;
    margin: 6px -10px 0;
    padding: 12px 0 2px;
    gap: 0;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-user-meta { display: none; }

/* Brand nach Prototyp-Spec: Mark + Name/Claim, keine Trennlinie. */
.app-sidebar-brand {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
/* Logo-Darstellung: ENTWEDER neben dem Schriftzug (--mark, Default) ODER ueber
   die volle Breite mit Titel darunter (--full). Das Logo kann optional eine eigene
   Hintergrundfarbe bekommen (ci_logo_bg = "Marke"), unabhaengig von der Sidebar-
   Farbe — z. B. ein schwarzes Logo auf gelbem Grund. */
.app-sidebar-brand-logo-link { display: inline-flex; text-decoration: none; min-width: 0; }
.app-sidebar-brand-box { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.app-sidebar-brand-box--bg { padding: 5px 7px; border-radius: 8px; }
.app-sidebar-brand-img { display: block; max-width: 100%; height: auto; }

/* Modus "neben dem Schriftzug": kompaktes Logo in Zeilenhoehe, Titel daneben. */
.app-sidebar-brand--mark .app-sidebar-brand-box { height: 30px; }
.app-sidebar-brand--mark .app-sidebar-brand-box--bg { height: 36px; }
.app-sidebar-brand--mark .app-sidebar-brand-img { height: 100%; width: auto; max-width: 140px; }

/* Modus "volle Breite": Logo oben, Titel darunter. Die Breite (ci_logo_width)
   steht als Inline-Style am Link; Box und Bild fuellen sie. */
.app-sidebar-brand--full {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    position: relative;
}
.app-sidebar-brand--full .app-sidebar-brand-logo-link { align-self: center; max-width: 100%; }
.app-sidebar-brand--full .app-sidebar-brand-box { width: 100%; }
.app-sidebar-brand--full .app-sidebar-brand-img { width: 100%; }
.app-sidebar-brand--full .app-sidebar-brand-name {
    flex: none;
    text-align: center;
    align-self: center;
    max-width: 100%;
}
/* Linksbuendiges Vollbreiten-Logo (CI ci_logo_align = left): Logo UND Titel an den
   linken Rand statt zentriert — damit Marke und Schriftzug eine Kante teilen. */
.app-sidebar-brand--full.app-sidebar-brand--left .app-sidebar-brand-logo-link { align-self: flex-start; }
.app-sidebar-brand--full.app-sidebar-brand--left .app-sidebar-brand-name { align-self: flex-start; text-align: left; }

.app-sidebar-brand-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--sidebar-ink-strong, var(--color-text));
    text-decoration: none;
    letter-spacing: -0.01em;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Claim unter dem App-Namen (CI-Feld ci_claim, z.B. "CRM & Projekte") */
.app-sidebar-brand-claim {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sidebar-ink, var(--color-text-muted));
    opacity: 0.75;
    margin-top: -2px;
}

/* ---- Bereichs-Switcher (docs/frontend.md "Bereiche") ----------------------
 * 2 Bereiche: Segmented-Pill ueber dem Dashboard-Link. 3+: Combobox-Button
 * mit Popover. Eingeklappte Rail zeigt nur die Initialen (Regeln unten). */
.app-sidebar-areas {
    margin: 0 0 14px;
    flex-shrink: 0;
    position: relative;
}
.app-sidebar-areas--pill {
    display: flex;
    padding: 3px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    gap: 2px;
}
/* Textfarben theme-basiert (nicht --sidebar-ink): der Pill-Hintergrund ist
 * --color-bg, nicht die CI-Sidebar-Farbe — sidebar-ink waere darauf unlesbar. */
.app-sidebar-area-seg {
    flex: 1;
    text-align: center;
    padding: 5px 8px;
    border-radius: calc(var(--radius) - 3px);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar-area-seg:hover { color: var(--color-primary-text, var(--color-primary)); }
.app-sidebar-area-seg--active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow);
}
.app-sidebar-area-seg--active:hover { color: var(--color-text); }
.app-sidebar-area-seg-initial { display: none; }

/* Combobox (3+ Bereiche): Button mit aktuellem Label + Chevron, Popover-Liste. */
.app-sidebar-area-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}
.app-sidebar-area-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.app-sidebar-area-btn-label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar-area-btn-initial { display: none; }
.app-sidebar-area-chevron { flex: 0 0 auto; opacity: 0.6; }
.app-sidebar-area-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 2px);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    z-index: 300;
}
/* Einzeilig (Nutzerwunsch 2026-09-28): Icon + Label in einer Zeile, zu lange Labels mit Ellipsis
   (voller Text im title), nie Umbruch unter das Icon. */
.app-sidebar-area-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: calc(var(--radius) - 4px);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
}
.app-sidebar-area-item > svg { flex: 0 0 auto; }
.app-sidebar-area-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-area-item:hover { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); }
.app-sidebar-area-item--active { color: var(--color-primary-text, var(--color-primary)); font-weight: 600; }

/* Eingeklappte Icon-Rail: Pill wird zur Initial-Spalte, Combobox zum Initial-Button. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-areas--pill {
    flex-direction: column;
    border-radius: calc(var(--radius) - 3px);
    padding: 3px;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg {
    padding: 6px 0;
    border-radius: calc(var(--radius) - 3px);
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-label { display: none; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-seg-initial { display: inline; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn {
    justify-content: center;
    padding: 7px 0;
    gap: 0;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-label,
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-chevron { display: none; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-btn-initial { display: inline; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-area-menu {
    left: calc(100% + 8px);
    right: auto;
    top: 0;
    min-width: 180px;
}

.app-sidebar-nav {
    flex: 1;
    min-height: 0;
    /* Viele Reiter bei wenig Hoehe: die Nav scrollt, Elemente darunter
       (Usermenue, Projekt-Buttons) bleiben sichtbar und liegen nie darueber. */
    overflow-y: auto;
    /* Nie seitlich scrollen: zu lange Reiter kuerzt .app-sidebar-link-label mit Ellipsis. */
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.app-sidebar-module {
    display: block;
    line-height: 1.4;
}

/* Gruppen-Ueberschrift in der Nav (manifest.nav_group + config app.nav_groups).
   Standardmaessig NICHT eingerueckt: linksbuendig mit der linken Kante der
   Link-Pills (padding-left 0), einheitlich ueber alle Projekte. */
.app-sidebar-group-label {
    padding: 1.5rem 0.5rem 0.35rem 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-ink, var(--color-text-light));
    opacity: 0.75;
}
.app-sidebar-group-label:first-child { padding-top: 0.35rem; }

/* Nav-Reiter als abgerundete Pills (CI-Default aus CRM): kein Border-Left,
   keine eckige Voll-Breite — Hover/Active liegen als abgerundete Flaeche inset
   in der 12px-Sidebar-Polsterung. Hover = zarter Ink-Wash, Active = Primaerfarbe
   dezent auf Surface. */
.app-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    min-width: 0;
    border-radius: calc(var(--radius) - 3px);
    color: var(--sidebar-ink, var(--color-text-muted));
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
/* Gap between two links: hover and active surfaces must not touch. */
.app-sidebar-link + .app-sidebar-link { margin-top: 3px; }
.app-sidebar-link:hover {
    background: color-mix(in srgb, var(--sidebar-ink, var(--color-text-muted)) 9%, transparent);
    color: var(--sidebar-ink-strong, var(--color-text));
}
.app-sidebar-link--active {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
    color: var(--color-primary-text, var(--color-primary));
    font-weight: 600;
}
.app-sidebar-link-icon { display: flex; align-items: center; flex: 0 0 auto; opacity: 0.75; }
.app-sidebar-link--active .app-sidebar-link-icon { opacity: 1; }
.app-sidebar-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Nav-Badge (manifest.nav_badge, z.B. faellige Wiedervorlagen): Pille am rechten Rand. */
.app-sidebar-link-badge {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--color-warning);
    color: var(--color-on-warning);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
/* Text-Badge (nav_badge liefert String, z.B. "60 %", seit 0.74.0): neutral statt Warnfarbe —
   ein Stand ist Information, kein offener Punkt. */
.app-sidebar-link-badge--text {
    /* folgt der Linkfarbe (auch aktiv auf heller Pille in dunkler CI-Sidebar) */
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Eingeklappt: Badge schrumpft zum Punkt oben rechts am Icon — Zahl entfaellt,
   das "hier ist was offen"-Signal bleibt sichtbar. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-badge {
    position: absolute;
    top: 5px;
    right: 8px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}
/* Klickbarer User-Chip unten: oeffnet das Settings-Modal (Button-Reset noetig,
 * da im Core ein <button> statt eines <a>). Nur durch eine feine Linie abgesetzt. */
.app-sidebar-user {
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    width: calc(100% + 24px);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px -12px 0;
    padding: 12px 12px 2px;
    border-top: 1px solid var(--color-border);
    color: var(--sidebar-ink, var(--color-text-muted));
    text-decoration: none;
    flex-shrink: 0;
}
.app-sidebar-user .nav-avatar,
.app-sidebar-user .nav-avatar-img { flex: 0 0 auto; }
.app-sidebar-user .nav-avatar { background: var(--accent-gradient, var(--color-primary)); }
.app-sidebar-user-meta { min-width: 0; }
.app-sidebar-user-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-ink-strong, var(--color-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-sidebar-user-role {
    display: block;
    font-size: 11px;
    color: var(--sidebar-ink, var(--color-text-muted));
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Kein Hover-Umfaerben des Namens: er bleibt --sidebar-ink-strong (weiss/schwarz
 * je nach Sidebar-Farbe, core/Color.php readableInk) statt der Primaerfarbe. */


/* Responsive: Bei schmalen Bildschirmen faellt die Sidebar auf die Icon-Rail
 * (66px) zurueck, damit der Inhalt Platz bekommt. app.js setzt zusaetzlich
 * data-sidebar-collapsed (blendet die Labels aus); ohne JS bleibt es eine
 * reine Icon-Spalte. Das ist die EINZIGE Rail — einklappen laesst sich die
 * Seitenleiste nicht (seit 0.84.0). */
@media (max-width: 900px) {
    body[data-layout="sidebar"] {
        --sidebar-width: 66px;
        --sidebar-gap: 0px;
    }
    /* Rail ohne Marke, auch ohne JS (seit 0.84.0). */
    body[data-layout="sidebar"] .app-sidebar-brand { display: none; }
    /* Schmale Viewports = Icon-Rail per Media-Query (ohne data-Attribut):
     * Bereichs-Switcher zeigt auch hier nur die Initialen. */
    body[data-layout="sidebar"] .app-sidebar-areas--pill {
        flex-direction: column;
        border-radius: calc(var(--radius) - 3px);
    }
    body[data-layout="sidebar"] .app-sidebar-area-seg {
        padding: 6px 0;
        border-radius: calc(var(--radius) - 3px);
    }
    body[data-layout="sidebar"] .app-sidebar-area-seg-label { display: none; }
    body[data-layout="sidebar"] .app-sidebar-area-seg-initial { display: inline; }
    body[data-layout="sidebar"] .app-sidebar-area-btn { justify-content: center; padding: 7px 0; gap: 0; }
    body[data-layout="sidebar"] .app-sidebar-area-btn-label,
    body[data-layout="sidebar"] .app-sidebar-area-chevron { display: none; }
    body[data-layout="sidebar"] .app-sidebar-area-btn-initial { display: inline; }
    body[data-layout="sidebar"] .app-sidebar-area-menu {
        left: calc(100% + 8px);
        right: auto;
        top: 0;
        min-width: 180px;
    }
}

/* Embed-Layout (app/views/layouts/fragment.php, Aufruf mit ?embed=1): Wrapper
   fuer eine Settings-Ansicht ohne App-Sidebar. Rest des frueheren Settings-
   Modals — dessen Styles sind entfernt, diese beiden Klassen sind in Gebrauch. */
.settings-fragment {
    display: flex;
    flex: 1;
    min-height: 0;
}
.settings-flash {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    pointer-events: none;
}
.settings-flash .flash { pointer-events: auto; }


/* Avatar-Farbauswahl: Runde Dots mit Hover/Active/Selected-State. */
.avatar-color-dot {
    cursor: pointer;
    display: inline-block;
}
/* Radio bleibt per Tastatur erreichbar (nur visuell versteckt), Fokus am Punkt sichtbar. */
.avatar-color-dot { position: relative; }
.avatar-color-dot input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.avatar-color-dot input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.avatar-color-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Avatar-Block im Profil (settings/panels/profile.php) — frueher Inline-Styles (UI-Audit E3). */
.avatar-settings { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 2rem; }
.avatar-settings-preview { flex-shrink: 0; }
.avatar-settings-img,
.avatar-settings-letter { width: 96px; height: 96px; border-radius: 50%; display: block; }
.avatar-settings-img { object-fit: cover; border: 1px solid var(--color-border); }
.avatar-settings-letter { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 2.2rem; }
.avatar-settings-options { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; flex: 1 1 14rem; min-width: 0; }
.avatar-settings-options > * { flex: 1 1 12rem; min-width: 0; }
.avatar-settings-label { display: block; font-size: 0.8rem; font-weight: 600; }
.section-card-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.section-card-summary h2 { margin: 0; }
.section-card-chevron { transition: transform 0.2s; }
.avatar-color-dot span {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-sizing: content-box;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.avatar-color-dot:hover span {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
.avatar-color-dot--selected span,
.avatar-color-dot input:checked + span {
    border-color: var(--color-text);
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Passwort-Block eingeklappt (details/summary) */
details.section-card > summary::-webkit-details-marker { display: none; }
details.section-card > summary { user-select: none; }
details.section-card[open] > summary svg {
    transform: rotate(180deg);
}

/* === Seitenkopf (partials/page-header.php) ===
 * EIN Kopf fuer jede Vollseite:
 *   <div class="page-header">
 *     <div class="page-heading"><h1 class="page-title">…</h1><p class="page-lead">…</p></div>
 *     <div class="page-actions">Buttons</div>
 *   </div>
 * Detailseite: <a class="back-link"> darueber, .page-header--detail mit
 * optionalem .page-avatar (Logo/Initialen) links. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Bestands-Markup ohne .page-heading/.page-actions */
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.page-heading { flex: 1 1 16rem; min-width: 0; }
.page-header h1,
.page-title { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
/* Titelzeile mit Zusatz (Status-Badge, Kennzeichen) */
.page-title-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.page-lead,
.page-subline { color: var(--color-text-muted); font-size: 0.85rem; margin: 0.15rem 0 0; }
.page-lead a { color: inherit; font-weight: 500; }
.page-lead a:hover { color: var(--color-primary-text, var(--color-primary)); }
.page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.page-actions form { margin: 0; }

.page-header--detail { align-items: flex-start; }
.page-header--detail .page-actions { align-self: center; }
.page-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-primary-light);
    color: var(--color-primary-text, var(--color-primary));
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.page-avatar img { width: 100%; height: 100%; object-fit: contain; }
.page-avatar--logo { background: var(--color-surface); border: 1px solid var(--color-border); padding: 4px; }
.page-avatar--round { border-radius: 50%; }
.page-avatar--round img { object-fit: cover; }

/* === Seiten-Layout mit rechter Spalte (seit 0.74.0, docs/frontend.md → „Seiten-Layout mit Aside") ===
 *   <div class="page-layout page-layout--aside [page-layout--aside-first] [page-layout--aside-sticky]">
 *     <div class="page-main"> … Hauptinhalt … </div>
 *     <aside class="page-aside" aria-label="…"> partials/page-aside-section … </aside>
 *   </div>
 * Breit (> 1200px): zwei Spalten, Aside --page-aside-width (Default 340px), scrollt normal mit der Seite.
 * Schmal: eine Spalte, Aside unter dem Hauptinhalt; --aside-first stellt sie dort VOR den Hauptinhalt.
 * --aside-sticky (opt-in, nur breit): Aside klebt oben und scrollt bei Ueberlaenge in sich.
 * Keine Linie links/rechts als Trenner — Abstand kommt aus gap. */
.page-layout { display: block; }
.page-layout--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--page-aside-width, 340px);
    gap: var(--page-layout-gap, 1.5rem);
    align-items: start;
}
.page-main, .page-aside { min-width: 0; }
.page-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.page-layout--aside-sticky .page-aside {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Luft fuer Karten-Schatten, die overflow sonst abschneidet */
    padding: 2px 4px 6px;
    margin: -2px -4px 0;
}
.page-aside > * { margin-bottom: 0; }
/* Kompakte Bausteine in der schmalen Spalte: Kennzahlen und Raster enger, gleiche Komponenten */
.page-aside .grid { gap: 0.6rem; }
.page-aside .stat { padding: 0.65rem 0.75rem; gap: 0.15rem; }
.page-aside .stat-label { font-size: 0.68rem; letter-spacing: 0.02em; }
.page-aside .stat-value { font-size: 1.25rem; }
.page-aside .stat-meta { font-size: 0.72rem; }
.page-aside .stat-icon { top: 0.55rem; right: 0.6rem; width: 1.6rem; height: 1.6rem; }
/* Abschnitt der Aside (partials/page-aside-section): Titel ueber der Karte wie ueberall */
.page-aside-section { min-width: 0; }
.page-aside-section > .card { margin-bottom: 0; }
@media (max-width: 1200px) {
    .page-layout--aside { grid-template-columns: minmax(0, 1fr); }
    .page-layout--aside-first .page-aside { order: -1; }
    .page-layout--aside-sticky .page-aside { position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
}

/* Zurueck-Link ueber dem Kopf einer Detailseite */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.back-link:hover { color: var(--color-text); }
.back-link svg { flex: none; }

/* Core-Version rechts oben im Einstellungs-Header — dezente Marke, kein Blickfang:
   sie soll auffindbar sein (Support/Update-Frage), nicht um Aufmerksamkeit buhlen. */
/* Versions-Badges im Einstellungs-Kopf: Core + Module mit eigenem CHANGELOG,
   je mit Bezeichnung, oben rechts nebeneinander (umbricht bei Enge). */
.version-badges {
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
/* Seit 0.81.0 am Seitenende (nur Admin), linksbuendig, mit Abstand zum Inhalt. */
.version-badges--footer { justify-content: flex-start; align-self: auto; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.version-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.version-badge-label {
    text-transform: uppercase;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* === Split-Layout (z.B. Einstellungen: Form links, Vorschau rechts) === */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
/* CI-Panel: breiter Formularbereich links (fliesst intern zweispaltig, siehe
   .ci-form-grid in components.css), schmale Vorschau-/Theme-Spalte rechts. */
.split--ci { grid-template-columns: minmax(0, 1fr) 280px; }
.split > div > .card + .card { margin-top: 1rem; }
/* Rechte CI-Spalte scrollt mit, bleibt aber am oberen Rand haengen. */
.split--ci .ci-side { position: sticky; top: 1rem; }
.split--ci .ci-side .card + .card { margin-top: 1rem; }

/* Schmal: Seitenspalte unter den Hauptinhalt (seit 0.76.0 — vorher lief .split auf dem Telefon
   ueber die Viewport-Breite, 340px-Spalte neben dem Inhalt) */
@media (max-width: 900px) {
    .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
    .split--ci { grid-template-columns: 1fr; }
    .split--ci .ci-side { position: static; }
}

/* Konto-Menue (Benutzer-Popover) — der eine Weg zu Einstellungen + Abmelden.
   Trigger: .app-sidebar-user (Benutzer-Chip unten in der Sidebar). Popover
   oeffnet nach oben (--up). */
.app-usermenu { position: relative; }
.app-usermenu > [data-usermenu-toggle] { cursor: pointer; background: none; border: 0; font: inherit; }
.app-usermenu-caret { margin-left: auto; color: var(--color-text-muted); flex-shrink: 0; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-usermenu-caret { display: none; }

.app-usermenu-popover {
    position: absolute;
    min-width: 232px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
    padding: 6px;
    z-index: 400;
}
.app-usermenu--up .app-usermenu-popover { bottom: calc(100% + 8px); left: 0; }
.app-usermenu--down .app-usermenu-popover { top: calc(100% + 8px); right: 0; }

.app-usermenu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.app-usermenu-head-meta { display: flex; flex-direction: column; min-width: 0; }
.app-usermenu-head-name { font-weight: 700; color: var(--color-text); }
.app-usermenu-head-email {
    font-size: 0.8rem; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-usermenu-sep { height: 1px; background: var(--color-border); margin: 4px 6px; }
.app-usermenu-logout { margin: 0; }
.app-usermenu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border-radius: calc(var(--radius) - 2px);
    color: var(--color-text); text-decoration: none;
    background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.app-usermenu-item:hover { background: var(--color-bg, #f5f4f7); }
.app-usermenu-ico { color: var(--color-text-muted); flex-shrink: 0; }

/* ============================================================
 * Werkzeug-Leiste unten in der Sidebar (docs/frontend.md "Werkzeug-Leiste",
 * JS: public/assets/js/sidebar-tools.js): Icons nebeneinander ueber dem
 * Benutzer-Chip, Text nur als Tooltip (data-tip). Projekte haengen eigene
 * Buttons mit class="app-sidebar-tool" an #sidebar-tools an.
 * ============================================================ */
.app-sidebar-tools {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin: 6px 0 4px;
    padding: 0 2px;
    flex-shrink: 0;
}
.app-sidebar-tools > * { position: relative; }
.app-sidebar-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    border-radius: calc(var(--radius) - 3px);
    color: var(--sidebar-ink, var(--color-text-muted));
    cursor: pointer;
    font: inherit;
}
.app-sidebar-tool-icon { display: inline-flex; }
.app-sidebar-tool:hover,
.app-sidebar-tool[aria-expanded="true"] {
    background: color-mix(in srgb, var(--sidebar-ink, var(--color-text-muted)) 10%, transparent);
    color: var(--sidebar-ink-strong, var(--color-text));
}
.app-sidebar-tool:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 1px; }
/* Tooltip: erscheint erst beim Hovern/Fokus, ueber dem Icon, linksbuendig (kein Abschneiden am Rand). */
.app-sidebar-tool[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 420;
}
.app-sidebar-tool[data-tip]:hover::after,
.app-sidebar-tool[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }
.app-sidebar-tool[aria-expanded="true"]::after,
.app-sidebar-tools:has([aria-expanded="true"]) .app-sidebar-tool::after { display: none; }

/* Simulationsmodus (partials/simulation-tool, docs/simulation.md): Warnfarbe + Marke „SIM" am Icon. */
.app-sidebar-tool--simulation {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    text-decoration: none;
}
.app-sidebar-tool--simulation:hover {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 26%, transparent);
}
.app-sidebar-tool-flag {
    position: absolute;
    top: 1px;
    right: -3px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-warning);
    color: var(--color-on-warning, #1a1a1a);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 12px;
    pointer-events: none;
}

/* Offline-Warteschlange (partials/offline-tool, docs/pwa.md): Zaehler am Icon,
   offline in Warnfarbe, Fehler in Fehlerfarbe. Sichtbarkeit steuert offline-queue.js. */
.app-sidebar-tool-count {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
/* Modul-Werkzeuge (manifest.sidebar_tools, partials/sidebar-module-tools): Link ohne Unterstrich,
   Text-Badge neutral und schmal am Icon. */
.app-sidebar-tool--module { text-decoration: none; }
.app-sidebar-tool--module:hover { text-decoration: none; }
.app-sidebar-tool-count--text {
    right: -4px;
    padding: 0 3px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 0.55rem;
    line-height: 13px;
    white-space: nowrap;
}
.app-sidebar-tool--offline.is-offline {
    color: var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
}
.app-sidebar-tool--offline.has-errors .app-sidebar-tool-count { background: var(--color-error); }

/* Suche: Feld + Live-Treffer in einem Panel ueber der Leiste. */
.app-sidebar-search { margin: 0; }
.app-sidebar-search-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
    padding: 6px;
    z-index: 400;
}
.app-sidebar-search-panel form { position: relative; margin: 0; }
.app-sidebar-search-icon {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--color-text-muted);
    opacity: 0.7;
    pointer-events: none;
}
.app-sidebar-search-input {
    width: 100%;
    padding: 8px 10px 8px 30px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
}
.app-sidebar-search-input::placeholder { color: var(--color-text-muted); }
.app-sidebar-search-input:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); }
.app-sidebar-search-results {
    margin-top: 6px;
    max-height: 55vh;
    overflow-y: auto;
}
.app-sidebar-search-group + .app-sidebar-search-group { margin-top: 4px; border-top: 1px solid var(--color-border); padding-top: 4px; }
.app-sidebar-search-group-label {
    padding: 4px 8px 2px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.app-sidebar-search-item,
.app-sidebar-search-more {
    display: block;
    padding: 6px 8px;
    border-radius: calc(var(--radius) - 4px);
    color: var(--color-text);
    text-decoration: none;
    font-size: 13px;
}
.app-sidebar-search-item:hover,
.app-sidebar-search-item.is-active,
.app-sidebar-search-more:hover { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); }
.app-sidebar-search-item-title { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-search-item-sub { display: block; font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-search-more { color: var(--color-primary-text, var(--color-primary)); font-weight: 600; font-size: 12.5px; margin-top: 2px; }
.app-sidebar-search-empty { padding: 8px; font-size: 12.5px; }

/* Glocke: Icon mit Zaehler, Popover nach oben. */
.app-sidebar-bell { position: relative; }
.app-sidebar-bell-count {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}
.app-sidebar-bell-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 300px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
    padding: 4px;
    z-index: 400;
}
.app-sidebar-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--color-text);
}
.app-sidebar-bell-readall {
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--color-primary-text, var(--color-primary));
    cursor: pointer;
    padding: 2px 4px;
}
.app-sidebar-bell-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.app-sidebar-bell-link {
    display: block;
    padding: 6px 8px;
    border-radius: calc(var(--radius) - 4px);
    color: var(--color-text);
    text-decoration: none;
}
.app-sidebar-bell-link:hover { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); }
.app-sidebar-bell-title { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sidebar-bell-item.is-unread .app-sidebar-bell-title { font-weight: 600; }
/* Ungelesen: fette Zeile + Punkt vor dem Titel (keine Linie links) */
.app-sidebar-bell-item.is-unread .app-sidebar-bell-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: 2px; }
.app-sidebar-bell-meta { display: block; font-size: 11.5px; color: var(--color-text-muted); }
.app-sidebar-bell-empty { padding: 8px; font-size: 12.5px; }
.app-sidebar-bell-all {
    display: block;
    padding: 6px 8px;
    margin-top: 2px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary-text, var(--color-primary));
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

/* Eingeklappte Rail: Text-Badges entfallen (kein Signal "offen", nur Information). */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-link-badge--text { display: none; }

/* Eingeklappte Icon-Rail: Leiste untereinander, Panels rechts neben der Rail. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-tools { flex-direction: column; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-search-panel,
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-bell-menu { left: calc(100% + 8px); bottom: 0; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .app-sidebar-tool[data-tip]::after { bottom: auto; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }

/* ============================================================
 * „Ansicht als …" (Vorfuehrmodus, core/ViewAs.php, docs/frontend.md):
 * Auswahl unten in der Seitenleiste (partials/view-as-picker, <details>)
 * und Balken ueber dem Inhalt (partials/view-as-bar, Core-.alert).
 * Rail (eingeklappt, <=900px): nur das Icon mit Tooltip, Liste rechts daneben —
 * keine Beschriftung, die ueber den Inhalt laeuft.
 * ============================================================ */
.view-as { position: relative; flex-shrink: 0; margin: 6px 0 2px; }
.view-as > summary { list-style: none; }
.view-as > summary::-webkit-details-marker { display: none; }
.view-as-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.view-as-btn:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.view-as-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent); outline-offset: 1px; }
.view-as-btn-icon { display: inline-flex; flex: 0 0 auto; color: var(--color-text-muted); }
.view-as.is-active .view-as-btn-icon { color: var(--color-primary-text, var(--color-primary)); }
.view-as.is-active .view-as-btn { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: var(--color-primary-light); }
.view-as-btn-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.view-as-btn-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.view-as-btn-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-as-btn-caret { flex: 0 0 auto; color: var(--color-text-muted); }
.view-as-panel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    width: max(100%, 264px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) + 2px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
    padding: 4px;
    z-index: 410;
}
.view-as-panel-head {
    padding: 6px 8px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.view-as-list { display: flex; flex-direction: column; gap: 1px; max-height: min(60vh, 420px); overflow-y: auto; margin: 0; }
.view-as-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: calc(var(--radius) - 4px);
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.view-as-item:hover,
.view-as-item:focus-visible { background: color-mix(in srgb, var(--color-text-muted) 9%, transparent); outline: none; }
.view-as-item-name { grid-column: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-as-item-role { grid-column: 1; font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-as-item-check { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; color: var(--color-primary-text, var(--color-primary)); }
.view-as-item.is-current .view-as-item-name { font-weight: 700; }

/* Im Balken (Layout minimal/Fehlerseite): kompakter Knopf, Liste nach unten rechts. */
.view-as--bar { margin: 0; }
.view-as--bar .view-as-btn { padding: 4px 8px; background: var(--color-surface); }
.view-as--bar .view-as-btn-kicker { display: none; }
.view-as--bar .view-as-panel { bottom: auto; top: calc(100% + 6px); left: auto; right: 0; width: 280px; max-width: calc(100vw - 32px); }

/* Rail: nur das Icon (36px wie die Werkzeuge), Tooltip rechts, Liste rechts daneben. */
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar { align-self: center; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar .view-as-btn { width: 36px; height: 36px; padding: 0; justify-content: center; position: relative; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar :is(.view-as-btn-text, .view-as-btn-caret) { display: none; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar .view-as-panel { left: calc(100% + 8px); bottom: 0; width: 280px; }
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar .view-as-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 420;
}
body[data-layout="sidebar"][data-sidebar-collapsed="1"] .view-as--sidebar:not([open]) .view-as-btn[data-tip]:is(:hover, :focus-visible)::after { opacity: 1; }
/* Ohne JS (kein data-sidebar-collapsed) ist <=900px trotzdem die Rail. */
@media (max-width: 900px) {
    body[data-layout="sidebar"] .view-as--sidebar { align-self: center; }
    body[data-layout="sidebar"] .view-as--sidebar .view-as-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
    body[data-layout="sidebar"] .view-as--sidebar :is(.view-as-btn-text, .view-as-btn-caret) { display: none; }
    body[data-layout="sidebar"] .view-as--sidebar .view-as-panel { left: calc(100% + 8px); bottom: 0; width: 280px; max-width: calc(100vw - 90px); }
}

/* Balken ueber dem Inhalt: Core-.alert--info, Aktionen rechts, bricht schmal um. */
.view-as-bar { flex-wrap: wrap; row-gap: 0.5rem; }
.view-as-bar-icon { display: inline-flex; flex: 0 0 auto; }
.view-as-bar-text { flex: 1 1 16rem; min-width: 0; }
.view-as-bar-role { font-weight: 400; }
.view-as-bar-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; }
.view-as-bar-form { margin: 0; }
.login-container > .view-as-bar { width: 100%; max-width: 640px; }

/* Suche: Ergebnisseite (/suche). */
.search-page-form { display: flex; gap: 8px; max-width: 640px; }
.search-page-input { flex: 1; }
.search-group { padding: 0; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-result + .search-result { border-top: 1px solid var(--color-border); }
.search-result-link { display: block; padding: 10px 16px; color: var(--color-text); text-decoration: none; }
a.search-result-link:hover { background: color-mix(in srgb, var(--color-text-muted) 7%, transparent); }
.search-result-title { display: block; font-weight: 600; }
.search-result-sub { display: block; font-size: 0.85rem; color: var(--color-text-muted); }
.search-result-snippet { display: block; font-size: 0.85rem; color: var(--color-text); margin-top: 2px; }
.search-result-snippet mark { background: var(--color-warning-light); color: inherit; border-radius: 2px; padding: 0 1px; }
.icon--search-type { vertical-align: -3px; margin-right: 6px; color: var(--color-text-muted); }

/* Benachrichtigungen: Inbox (/benachrichtigungen) + Einstellungen. */
.notif-card { padding: 0; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.notif-item + .notif-item { border-top: 1px solid var(--color-border); }
.notif-item--unread { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.notif-item-link { flex: 1; min-width: 0; color: var(--color-text); text-decoration: none; }
.notif-item-title { display: block; font-weight: 500; }
.notif-item--unread .notif-item-title { font-weight: 700; }
.notif-item-body { display: block; font-size: 0.85rem; color: var(--color-text); margin-top: 2px; white-space: pre-line; }
.notif-item-meta { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.notif-item-read { margin: 0; flex: 0 0 auto; }
.notif-prefs td, .notif-prefs th { vertical-align: middle; }
.notif-prefs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }
/* === Alerts === */
.alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert--success { background: var(--color-success-light); color: var(--color-success-text, var(--color-success)); border: 1px solid rgba(52, 211, 153, 0.2); }
.alert--error   { background: var(--color-error-light); color: var(--color-error-text, var(--color-error));     border: 1px solid rgba(248, 113, 113, 0.2); }
.alert--warning { background: var(--color-warning-light); color: var(--color-warning-text, var(--color-warning)); border: 1px solid rgba(251, 191, 36, 0.2); }
/* Neutraler Hinweis (ersetzt modul-eigene Hinweisboxen wie .bug-hint) */
.alert--info    { background: var(--color-info-light); color: var(--color-info-text, var(--color-info));       border: 1px solid rgba(96, 165, 250, 0.25); }
/* Mehrzeiliger Inhalt (Titel + Absatz, Liste): Block statt Flex-Zeile */
.alert--block { display: block; }
.alert--block > :last-child { margin-bottom: 0; }

/* Flash Toast (fixed bottom center; bei offenem Popup oben mittig, siehe unten) */
.flash-toast-container {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none;
}
.flash-toast {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: flash-in 0.3s ease, flash-out 0.3s ease 3.5s forwards;
    max-width: 500px;
}
.flash-toast--success { background: var(--color-success); color: #fff; }
.flash-toast--error { background: var(--color-error); color: #fff; }
.flash-toast--warning { background: var(--color-warning); color: #000; }
.flash-toast--info { background: var(--color-text); color: var(--color-surface); }
/* Link im Toast (ct.toast(msg, type, {link})) */
.flash-toast-link { margin-left: 0.75rem; color: inherit; font-weight: 600; text-decoration: underline; }
/* Offenes Popup (body.modal-open, app.js): Toast oben statt unten — unten verdeckte er die
   Fussknoepfe des Popups („Abbrechen"). Ueber dem Popup (z-index 9999 > .modal). Seit 0.84.0. */
body:is(.modal-open, .am-modal-open) .flash-toast-container { bottom: auto; top: 1.5rem; }
@keyframes flash-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flash-out { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }

/* === Cards === */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
    transition: none;
}

/* Ruhige Flaechen (CI-Default): kein Hover-Lift, Karten bleiben auf Ruhe-Schatten. */
.card:hover { box-shadow: var(--shadow); }
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text); }
.card h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }
/* Schmale Karte fuer Einstellungs-/Formularseiten ausserhalb eines Popups */
.card--narrow { max-width: 720px; }

/* === Section Cards (Bildgenerator-Style) === */
.section-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: visible;
    box-shadow: var(--shadow);
    /* Core-Default-Abstand zwischen gestapelten Karten (z.B. Settings-Panels).
       Zentral hier statt per Inline-margin in jeder View — Projekte ueber-
       schreiben bei Bedarf via eigenem CSS (.section-card { margin-bottom: ... }).
       Vertikale Margins benachbarter Karten kollabieren, doppeln also nicht. */
    margin-bottom: 1rem;
    min-height: 55px; /* IGEPA_SECTION_MINHEIGHT */
}

.section-card-header {
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
}
.section-card-header h3 { margin: 0; }
.section-card-header p { margin-top: 0.25rem; }

.section-card-header h2 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.section-card-body { padding: 1rem; }

/* Karten-Kopf: Titel + optionale Aktionen in einer Zeile */
.card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.card-head h3 { margin: 0; }

/* === Tab-Leiste (z.B. Einstellungen-Panels) === */
.tabs { display: inline-flex; gap: 2px; background: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 3px; margin-bottom: 1rem; }
/* Ein Tab. Der Reset (border/background/appearance/font/cursor) laesst
   <button class="tab"> exakt wie <a class="tab"> aussehen — sonst rendert der
   Button seine native graue Box (Grund fuer "Elemente sieht anders aus als
   Einstellungen"). white-space:nowrap: Labels brechen nie um; passt die Leiste
   nicht mehr in ihren Container, schaltet app.js auf das .tabs-select-Dropdown. */
.tab { display: inline-flex; align-items: center; padding: 0.35rem 0.9rem; border: 0; background: transparent; border-radius: calc(var(--radius) - 3px); font-family: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.4; white-space: nowrap; color: var(--color-text-muted); text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab--active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
/* Eingeklappt (app.js: Overflow erkannt) — die Tab-Leiste weicht dem Dropdown. */
.tabs.is-collapsed { display: none; }
/* Umbrechende Leiste (seit 0.81.0): bleibt bei vielen Reitern Reiter statt Dropdown —
   gleiche Navigation fuer jede Rolle (Einstellungen). app.js laesst sie aus. */
.tabs--wrap { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
/* Dropdown-Ersatz fuer die horizontale Nav auf schmalen Containern. Gleiche
   Optik wie ein Tab-Feld; native <select>-Pfeil durch eigenes Chevron ersetzt. */
.tabs-select {
    display: block;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: 0.45rem 2.1rem 0.45rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.tabs-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }


/* === Range-Slider mit Endpunkt-Hinweisen (klein ↔ groß) === */
.range-row { display: flex; align-items: center; gap: 0.6rem; }
.range-row input[type="range"] { flex: 1; min-width: 0; }
.range-row .range-hint { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }

/* === Forms === */
.form-group { margin-bottom: 1.125rem; }

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-group textarea { min-height: 44px; resize: none; overflow: hidden; }

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    /* Feste Zeilenhoehe (seit 0.81.0): <button> erbt sie nicht (UA „normal") und war 31 statt
       36 px hoch neben einem <a class="btn">. Gleicher Wert wie body → Links unveraendert. */
    line-height: 1.6;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

/* --accent-gradient kommt aus CI (ci-style.php) oder einem Projekt-Theme;
   ohne Wert flacher Primaerfarben-Button. Hover dunkelt per filter ab,
   damit auch ein Verlauf sichtbar reagiert (Background-Tausch wuerde ihn ersetzen). */
.btn--primary { background: var(--accent-gradient, var(--color-primary)); color: var(--btn-text, var(--color-on-primary, #fff)); }
/* Hover bewusst dezent (CI-Default): der Verlauf bleibt sichtbar, nur leicht abgedunkelt. */
.btn--primary:hover { filter: brightness(0.96); color: var(--btn-text, var(--color-on-primary, #fff)); box-shadow: var(--shadow); }

.btn--outline { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

/* Sekundaer-Aktion neben einer Primaer-Aktion ("Bereich anlegen" neben "Funktion anlegen"):
   getoente Flaeche in der Akzentfarbe, ohne das Gewicht von --primary. */
.btn--secondary { background: var(--color-primary-light); color: var(--color-primary-text, var(--color-primary)); border-color: transparent; }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); }

/* Loeschen/Gefahr. EINE Optik je Ort (docs/frontend.md → Komponenten):
   - Formular/Popup: btn btn--outline btn--danger mit Text „Löschen"
   - Tabellenzeile:  btn btn--icon btn--ghost btn--danger mit Mülleimer-Icon + data-confirm
   - solide (btn btn--danger) nur fuer den finalen Bestaetigungs-Button */
.btn--danger { background: var(--color-error); color: #fff; }
.btn--danger:hover { filter: brightness(0.92); color: #fff; }

.btn--success { background: var(--color-success); color: #fff; }
.btn--success:hover { filter: brightness(0.92); color: #fff; }

/* Ghost: ohne Flaeche und Rahmen — Neben-Aktionen, Icon-Buttons in Zeilen/Kopfzeilen. */
.btn--ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }

/* Kombinationen mit --danger: Farbe wird rot, Flaeche bleibt die der Grundvariante. */
.btn--outline.btn--danger { background: var(--color-surface); color: var(--color-error); border-color: var(--color-border); filter: none; }
.btn--outline.btn--danger:hover { background: var(--color-error-light); color: var(--color-error); border-color: var(--color-error); }
.btn--ghost.btn--danger { background: transparent; color: var(--color-text-muted); border-color: transparent; filter: none; }
.btn--ghost.btn--danger:hover { background: var(--color-error-light); color: var(--color-error); }

.btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8rem; }
.btn--full { width: 100%; }

/* Quadratischer Icon-Button (ersetzt .btn-icon, .icon-action, .kb-col-add).
   Immer mit Farbvariante (meist --ghost) und aria-label/title. Hoehe = .btn bzw. .btn--sm. */
.btn--icon { width: 2.75rem; height: 2.75rem; padding: 0; gap: 0; flex: none; }
.btn--icon.btn--sm { width: 2.15rem; height: 2.15rem; padding: 0; }
.btn--icon svg { width: 1rem; height: 1rem; flex: none; }
.btn--icon.btn--sm svg { width: 0.9rem; height: 0.9rem; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; filter: none; box-shadow: none; }
/* Formular um einen einzelnen Button (Loeschen in Tabellenzeile) bricht keine Zeile um. */
form.btn-form { display: inline; margin: 0; }

/* === Login === */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: var(--login-gradient, linear-gradient(135deg, #09090b 0%, #0f0a1f 50%, #09090b 100%));
}

/* Fehlerseite (errors/error.php) */
.error-box { text-align: center; }
.error-box-code { margin-bottom: 0.5rem; font-size: 4rem; font-weight: 700; line-height: 1; color: var(--color-accent, var(--color-primary)); }
.error-box-title { margin-bottom: 0.75rem; font-size: 1.25rem; font-weight: 600; }
.error-box-text { margin-bottom: 1.5rem; font-size: 0.9rem; }
.error-box-actions { justify-content: center; }
/* Fehlerseite im App-Layout (errors/in-app): Karte mittig im Inhaltsbereich */
.error-page { display: flex; justify-content: center; padding: 4rem 1rem; }
.error-page .error-box { width: 100%; max-width: 28rem; }

/* .login-branding* und .login-legal stehen weiter unten ("Login/Auth"). */
.login-box {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.login-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* === Status & Kennzeichen: .badge (EIN Baustein) ===
 * Farbe ueber Modifier .badge--<farbe>; die Werte sind Tokens aus themes.css
 * (--badge-<farbe>-bg/-fg, mit Dark-Mode-Satz). Jeder Modifier setzt zusaetzlich
 * --tone-bg/--tone-fg, damit .status-select/.tag dieselbe Farbe ueber Variablen
 * ziehen koennen (auch dort, wo spezifischere Formular-Regeln `background` setzen).
 * Punkt vor dem Text: <span class="badge badge--green"><span class="dot"></span>Aktiv</span>.
 * .pill ist ein Alias (Bestand der Produkt-Module: class="pill badge--green"). */
.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background-color: var(--tone-bg, var(--badge-muted-bg));
    color: var(--tone-fg, var(--badge-muted-fg));
}
.pill { padding: 0.15rem 0.55rem; }
.badge .dot,
.pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Semantische Farben */
.badge--success { --tone-bg: var(--color-success-light); --tone-fg: var(--color-success-text, var(--color-success)); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--warning { --tone-bg: var(--color-warning-light); --tone-fg: var(--color-warning-text, var(--color-warning)); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--error   { --tone-bg: var(--color-error-light);   --tone-fg: var(--color-error-text, var(--color-error));   background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--info    { --tone-bg: var(--color-info-light);    --tone-fg: var(--color-info-text, var(--color-info));    background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--primary { --tone-bg: var(--color-primary-light); --tone-fg: var(--color-primary-text, var(--color-primary)); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--simulation { gap: 0.25rem; }
.badge--simulation .icon { flex-shrink: 0; }
.badge--muted   { --tone-bg: var(--badge-muted-bg);      --tone-fg: var(--badge-muted-fg); background-color: var(--tone-bg); color: var(--tone-fg); }

/* Auswahl-Farben (Lead-Phase, Status-Optionen, ListView 'color') */
.badge--gray   { --tone-bg: var(--badge-gray-bg);   --tone-fg: var(--badge-gray-fg);   background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--blue   { --tone-bg: var(--badge-blue-bg);   --tone-fg: var(--badge-blue-fg);   background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--purple { --tone-bg: var(--badge-purple-bg); --tone-fg: var(--badge-purple-fg); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--teal   { --tone-bg: var(--badge-teal-bg);   --tone-fg: var(--badge-teal-fg);   background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--green  { --tone-bg: var(--badge-green-bg);  --tone-fg: var(--badge-green-fg);  background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--yellow { --tone-bg: var(--badge-yellow-bg); --tone-fg: var(--badge-yellow-fg); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--orange { --tone-bg: var(--badge-orange-bg); --tone-fg: var(--badge-orange-fg); background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--red    { --tone-bg: var(--badge-red-bg);    --tone-fg: var(--badge-red-fg);    background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--pink   { --tone-bg: var(--badge-pink-bg);   --tone-fg: var(--badge-pink-fg);   background-color: var(--tone-bg); color: var(--tone-fg); }
.badge--brown  { --tone-bg: var(--badge-brown-bg);  --tone-fg: var(--badge-brown-fg);  background-color: var(--tone-bg); color: var(--tone-fg); }

/* === Filter-Segmente: .chips > .chip(.chip--active) — einziges Muster ===
 * <nav class="chips" aria-label="Status"><a class="chip chip--active" href="?s=offen" aria-current="true">Offen <span class="count">4</span></a> …</nav>
 * Als <a> (Server-Filter) oder <button type="button"> (JS). Reiter, die
 * Ansichten wechseln, bleiben .tabs/.tab. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.85rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.chip:hover { color: var(--color-text); text-decoration: none; }
.chip--active,
.chip--active:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-text, var(--color-primary)); font-weight: 600; }

/* Zaehler-Pille (ersetzt .tab-count, .tab-badge, .kb-count, .chip-count, .wv-count …) —
   in .chip, .tab, .kb-col-head, .section-title oder frei. */
.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.15rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tab .count { margin-left: 0.4rem; }
.chip--active .count,
.tab--active .count { background: var(--color-primary); color: var(--color-on-primary, var(--color-surface)); }
/* Handlungsbedarf (faellig, ueberfaellig) */
.count--warning { background: var(--color-warning); color: var(--color-on-warning); }
.count--error { background: var(--color-error); color: var(--color-surface); }

/* === Tag: Kategorie/Typ-Label (umrandet). Farbe optional ueber .badge--<farbe> ===
 * <span class="tag">Funktion</span>  <span class="tag badge--red">Bug</span>  <span class="tag tag--primary">Neu</span> */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    background-color: var(--tone-bg, var(--color-surface-hover));
    color: var(--tone-fg, var(--color-text-muted));
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.tag--primary { --tone-bg: var(--color-primary-light); --tone-fg: var(--color-primary-text, var(--color-primary)); }
.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* === Kennzeichen: .code (F-001, BUG-003, AUF-12) — ersetzt .kb-nr, .entw-code, .zt-code === */
.code {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
}
a.code:hover { color: var(--color-primary-text, var(--color-primary)); border-color: var(--color-primary); }
.code--lg { padding: 0.2rem 0.6rem; font-size: 0.9rem; }

/* === Status-Auswahl: farbige Auswahlliste auf Basis der .badge--*-Farben ===
 * <select class="status-select badge--blue" name="status">
 *   <option value="neu" data-color="blue" selected>Neu</option><option value="fertig" data-color="green">Fertig</option>
 * </select>   — app.js tauscht die badge--*-Klasse beim Wechsel (data-color der Option). */
.status-select,
.form-group select.status-select {
    width: auto;
    padding: 0.2rem 1.6rem 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--tone-bg, var(--badge-muted-bg));
    color: var(--tone-fg, var(--badge-muted-fg));
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.status-select:focus,
.form-group select.status-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; box-shadow: none; border-color: transparent; }
.status-select option { background: var(--color-surface); color: var(--color-text); }

/* Inline-Edit in Tabellen-Zellen */
.db-cell--editable { cursor: pointer; position: relative; }
.db-cell--editable:hover { background: var(--color-surface-hover); }
.db-cell--editable:hover::after {
    content: "▾";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* === Tables === */
table { width: 100%; border-collapse: collapse; }
/* Tabellenkopf als Uppercase-Label (CI-Default), luftigere Zellen. */
th { text-align: left; padding: 0.625rem 0.75rem; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
td { padding: 0.7rem 0.75rem; height: 44px; vertical-align: middle; font-size: 0.85rem; border-bottom: 1px solid var(--color-border-light); }
/* Innen 0.75rem (seit 0.81.0, UI-Audit Q3: mehr Platz je Spalte), aussen buendig mit der Karte */
:is(th, td):first-child { padding-left: 1rem; }
:is(th, td):last-child { padding-right: 1rem; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.col-center, td.col-center { text-align: center; }
/* Hover nur, wo die Zeile etwas tut (Klick oeffnet Detail) — nicht auf jeder Tabelle. */
tr.clickable-row, tr[data-href] { cursor: pointer; }
tr.clickable-row:hover td, tr[data-href]:hover td { background: var(--color-surface-hover); }
tbody tr:last-child td { border-bottom: 0; }
tr.is-selected td { background: var(--color-primary-light); }

/* Tabellen-Rahmen: Karte ohne Innenabstand, Tabelle sitzt buendig.
   <div class="card card--table"><div class="list-table-wrap"><table>…</table></div></div> */
.card--table { padding: 0; overflow: hidden; }
.card--table .list-table-wrap { overflow-x: auto; }
/* Querscroll-Hinweis: Schatten an der Kante, hinter der noch Spalten liegen (UI-Audit Q3).
   Die „local"-Verlaeufe decken den Schatten ab, sobald der Rand erreicht ist. */
.list-table-wrap {
    background:
        linear-gradient(to right, var(--color-surface) 40%, transparent) left center / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--color-surface) 40%, transparent) right center / 2rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left center / 0.75rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 0.75rem 100% no-repeat scroll;
    background-color: var(--color-surface);
}
.card--table > .card-head { padding: 0.75rem 1rem; margin: 0; border-bottom: 1px solid var(--color-border); }

/* Leerer Zustand — EIN Baustein fuer Tabellen, Karten, Listen (partials/empty.php):
   <div class="empty"><svg class="empty-icon">…</svg><p class="empty-text">…</p><div class="empty-action">…</div></div> */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.empty-icon { color: var(--color-text-light); width: 28px; height: 28px; }
.empty-title { margin: 0; font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.empty-text { margin: 0; max-width: 32rem; }
.empty-action { margin-top: 0.35rem; }
/* Kompakt: in Zeitleisten, Seitenspalten, kleinen Karten */
.empty--compact { padding: 0.75rem 0.5rem; gap: 0.25rem; font-size: 0.8rem; }
/* In einer Tabellenzeile: Zelle ohne eigenes Padding/Hoehe, .empty traegt den Abstand */
td.empty-cell { padding: 0; height: auto; }

/* === Tabellen: Leerzeile, Spaltenbreiten, Rahmen (seit 0.76.0) ===================
 * Eigener Block — Regeln fuer stabile Tabellen. Doku: docs/frontend.md → „Tabellen".
 * Leerzeile: partials/table-empty (td.empty-cell > .empty). Steht nur Text in der Zelle
 * (Altbestand), traegt die Zelle selbst Abstand, gedaempfte Farbe und Zentrierung. */
td.empty-cell:not(:has(> .empty)) {
    padding: 2rem 1rem;
    text-align: center;
    white-space: normal;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
/* Feste Spaltenbreiten: table.table--fixed (+ <colgroup>) — partials/list setzt beides, sobald
   eine Spalte width/kind traegt. --table-min: darunter scrollt .list-table-wrap horizontal. */
table.table--fixed { table-layout: fixed; min-width: var(--table-min, 36rem); }
/* Kopf darf in festen Tabellen umbrechen (Wortgrenzen) statt abgeschnitten zu werden */
.table--fixed th { white-space: normal; vertical-align: bottom; overflow-wrap: break-word; hyphens: auto; }
/* Umbruch nur an Wortgrenzen bzw. mit Silbentrennung (lang="de"), nie mitten im Wort
   (UI-Audit Q4; frueher overflow-wrap: anywhere → „Wohnungsgenossensch|aft"). */
.table--fixed td { overflow-wrap: break-word; hyphens: auto; }
.table--fixed td :is(select, input:not([type="checkbox"], [type="radio"]), textarea) { max-width: 100%; }
/* Spaltenarten (ListView::COLUMN_KINDS, gleiche Breiten) — an <col> oder <th>, Ausrichtung an th/td */
:is(col, th).col-id       { width: 6.5rem; }
:is(col, th).col-date     { width: 7.5rem; }
:is(col, th).col-datetime { width: 10rem; }
:is(col, th).col-time     { width: 5rem; }
:is(col, th).col-money    { width: 9rem; }
:is(col, th).col-number   { width: 6rem; }
:is(col, th).col-percent  { width: 5.5rem; }
:is(col, th).col-status   { width: 10rem; }
:is(col, th).col-badge    { width: 8rem; }
:is(col, th).col-user     { width: 11rem; }
:is(col, th).col-check    { width: 4rem; }
:is(col, th).col-icon     { width: 3rem; }
:is(col, th).col-actions  { width: 7rem; }
/* Ohne feste Tabelle schrumpft die Aktionsspalte auf ihren Inhalt */
table:not(.table--fixed) th.col-actions { width: 1%; }
/* Explizite Breite (width => '12rem' → --col-w) gewinnt ueber die Art */
:is(col, th).col-w { width: var(--col-w); }
:is(th, td):is(.col-id, .col-date, .col-datetime, .col-time, .col-money, .col-number, .col-percent) { font-variant-numeric: tabular-nums; }
/* Werte einzeilig; Spaltenkoepfe nur in Tabellen mit automatischer Breite. In .table--fixed
   duerfen Koepfe umbrechen — sonst liefen rechtsbuendige Koepfe („Betrag netto") in die
   Nachbarspalte, weil diese Regel .table--fixed th { white-space: normal } schlug (seit 0.84.0). */
td:is(.col-id, .col-date, .col-datetime, .col-time, .col-money, .col-number, .col-percent),
table:not(.table--fixed) th:is(.col-id, .col-date, .col-datetime, .col-time, .col-money, .col-number, .col-percent) { white-space: nowrap; }
/* Nichts abschneiden (UI-Audit Q3): Kennungen und Datumsbereiche duerfen an Bindestrich/
   Leerzeichen umbrechen, statt mit Ellipsis zu verschwinden; Betraege bleiben einzeilig. */
.table--fixed td:is(.col-id, .col-date, .col-datetime, .col-time) { white-space: normal; overflow-wrap: break-word; hyphens: manual; }
/* Status-/Badge-Zellen: ein langes Badge („Stornorechnung") bricht um statt abgeschnitten */
.table--fixed td:is(.col-status, .col-badge) :is(.badge, .tag) { max-width: 100%; white-space: normal; overflow-wrap: break-word; text-align: left; }
/* E-Mail-Adressen einzeilig mit Ellipsis; die volle Adresse steht im title (app.js) */
td a[href^="mailto:"], td .cell-email, td.cell-email { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
td.cell-email { display: table-cell; }
:is(th, td):is(.col-money, .col-number, .col-percent) { text-align: right; }
:is(th, td):is(.col-check, .col-icon) { text-align: center; }
/* 'align' => 'left' gegen die Ausrichtung der Art (z. B. Betrag mit Fortschrittsbalken) */
:is(th, td).col-left { text-align: left; }
:is(th, td).col-actions { text-align: right; white-space: nowrap; }
td.col-actions .actions { justify-content: flex-end; flex-wrap: nowrap; }
td.col-actions .actions > .btn { white-space: nowrap; }
/* Titelspalte: flexibel, Haupttext hoechstens zwei Zeilen */
td.col-title .cell-main {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    overflow-wrap: break-word; hyphens: auto;
}
/* Handgebaute Tabelle ohne Karte: table.table traegt selbst Flaeche, Rahmen und Radius —
   in .card--table/.card bleibt sie buendig (die Karte ist der Rahmen). */
table.table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
}
:is(.card, .list-table-wrap, .modal-body) table.table { border: 0; border-radius: 0; background: transparent; }
/* === Ende Tabellen-Block 0.76.0 === */

/* === Datenlisten (partials/list.php + assets/js/list/) === */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.list-toolbar .list-count { font-size: 0.8rem; color: var(--color-text-muted); }
/* Kompakte Felder in Werkzeugleisten (seit 0.81.0, UI-Audit Q10): Hoehe und Schrift wie
   .btn--sm, Breite nach Inhalt, hoechstens 16rem. .form-control--sm gilt ueberall; in
   .list-toolbar, .page-actions und .section-actions greift es fuer select/Datum automatisch. */
.form-control--sm,
:is(.list-toolbar, .page-actions, .section-actions, .filter-actions) :is(select, input:is([type="date"], [type="month"], [type="week"], [type="number"])) {
    width: auto; max-width: 16rem; min-width: 0;
    padding: 0.375rem 0.6rem; font-size: 0.8rem; line-height: 1.4;
    border-radius: calc(var(--radius) - 3px);
}
select.form-control--sm,
:is(.list-toolbar, .page-actions, .section-actions, .filter-actions) select { padding-right: 1.6rem; }
/* Formular in der Werkzeugleiste: Felder und Buttons in einer Reihe */
.list-toolbar form:not(.list-search-form) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.list-toolbar-spacer { flex: 1; }
/* Live-Suchfeld (partials/list.php 'search' + list-page.js) */
.list-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    padding: 0.4rem 0.65rem;
    width: 260px;
    color: var(--color-text-muted);
}
.list-search svg { flex: none; }
.list-search input {
    border: 0;
    background: transparent;
    padding: 0;
    outline: none;
    color: var(--color-text);
    font-size: 0.85rem;
    width: 100%;
}
.list-search input:focus { box-shadow: none; }
.list-search:focus-within { border-color: var(--color-border); }
.list-table-wrap { overflow-x: auto; }
/* Serverseitige Suche (GET): dasselbe Feld in einem Formular, Enter sendet */
.list-search-form { display: contents; }
.list-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Filter-Panel (Markup-Vertrag: assets/js/list/filters.js) */
#filter-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#filter-rows { display: flex; flex-direction: column; gap: 0.4rem; }
#filter-rows .filter-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
#filter-rows .filter-row select,
#filter-rows .filter-row input { font-size: 0.8rem; padding: 0.3rem 0.5rem; }
#filter-panel .filter-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Nutzer-Einstellungen der Liste (partials/list-tools.php, core/ListView.php) */
th.col-w { width: var(--col-w); }
.th-sort { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--color-text); text-decoration: none; }
.th-sort-icon { font-size: 0.8rem; letter-spacing: 0; opacity: 0.45; }
th[aria-sort] .th-sort { color: var(--color-text); }
th[aria-sort] .th-sort-icon { opacity: 1; color: var(--color-primary-text, var(--color-primary)); }
.list-views .chip .icon { flex: none; }
.list-views .chip-star { color: var(--color-warning); fill: currentColor; }
.list-columns > li { padding: 0.3rem 0; }
.list-columns > li:first-child { padding-top: 0; }
.list-columns .form-check { flex: 1; margin: 0; }
.list-columns-move { gap: 0.15rem; flex-wrap: nowrap; }
.list-columns > li:first-child [data-move="up"],
.list-columns > li:last-child [data-move="down"] { visibility: hidden; }

/* Pagination unter der Liste */
.list-pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.list-pagination a,
.list-pagination span.page-current,
.list-pagination span.page-gap {
    min-width: 30px;
    padding: 0.3rem 0.55rem;
    text-align: center;
    font-size: 0.8rem;
    border-radius: var(--radius-sm, 6px);
    text-decoration: none;
    color: var(--color-text-muted);
}
.list-pagination a:hover { background: var(--color-surface-hover); color: var(--color-text); }
.list-pagination span.page-current {
    background: var(--color-primary);
    color: var(--color-on-primary, #fff);
    font-weight: 600;
}

/* === Charts (core/Chart.php — Inline-SVG) === */
.chart { display: block; width: 100%; height: auto; }
.chart--donut { max-width: 200px; margin: 0 auto; }
.chart--empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* === Login/Auth === */
/* Branding-Block ueber der .login-box (vormals public.css, eine Definition).
   Genutzt von app/views/auth/ (login, 2fa-challenge, reset-/forgot-password, _branding). */
.login-branding { text-align: center; margin-bottom: 1.5rem; }
.login-branding-logo { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 0.25rem; color: var(--color-text); }
.login-branding-logo span { color: var(--color-primary-text, var(--color-primary)); }
/* font-weight/line-height/letter-spacing/margin-top stammen aus der frueheren
   (doppelten) Erst-Definition und wirkten weiter — hier zusammengefuehrt. */
.login-branding-tagline { font-size: 0.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; margin-top: 0.75rem; color: var(--color-text-muted); }
/* Login-Logo: Standardgroesse (beide Themes). Die Anzeige-Breite ist per CI
   (ci_login_logo_width) uebersteuerbar — dann setzt das Partial inline max-width. */
.login-branding-logo-img { max-width: 200px; max-height: 90px; height: auto; width: auto; display: block; margin: 0 auto; }
/* Frei editierbarer Login-Text (CI ci_login_text) unter dem Logo — bewusst
   praesent: fett und groesser, als Begruessung/Wortmarke unter dem Logo. */
.login-branding-text { margin: 0.85rem auto 0; max-width: 360px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text); }
.login-legal { text-align: center; margin-top: 1.25rem; font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5; max-width: 320px; margin-left: auto; margin-right: auto; }

/* === Modal / Popup (generisch) — Steuerung: assets/js/app.js ===
 * Der kanonische Popup-Baustein. EIN korrektes Verhalten fuer alle Projekte:
 *   - zentriert (Flex align/justify center)
 *   - Hintergrund abgedunkelt + geblurrt
 *   - Hintergrund NICHT scrollbar (body.modal-open sperrt overflow)
 *   - schliesst per X / [data-modal-close] / Backdrop-Klick / ESC
 * Nie wieder pro Projekt neu bauen. Markup-Vertrag siehe app.js. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;              /* sehr hohe Dialoge scrollen im Overlay ... */
    overscroll-behavior: contain;
}

body.modal-open { overflow: hidden; }   /* ... die Seite dahinter bleibt fix */

/* Rueckfragen (ct.confirm, seit 0.77.0) haben KEIN eigenes CSS mehr: sie sind ein
   ganz normales .modal mit .modal-dialog--sm, .modal-body und .modal-footer
   („Abbrechen" + Bestaetigung in Gefahrenfarbe). Das frueher hier stehende
   .confirm-dialog/.confirm-dialog-box/.confirm-btns ist entfallen — ein Popup,
   eine Optik (docs/frontend.md → „Rückfragen vor gefährlichen Aktionen"). */

.modal-dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 3rem);
    margin: auto;                 /* zentriert auch, wenn hoeher als das Overlay */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Groessen-Skala: sm 360 · md 480 (Standard, ohne Modifier) · lg 760 · xl 1200 px.
   data-modal-size="sm|md|lg|xl" (app.js) setzt dieselben Klassen. */
.modal-dialog--sm { max-width: 360px; }
.modal-dialog--md { max-width: 480px; }
.modal-dialog--lg { max-width: 760px; }
.modal-dialog--xl { max-width: 1200px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.modal-header h2, .modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
/* Optionale Unterzeile: <div class="modal-titles"><h3>…</h3><p class="modal-subtitle">…</p></div> */
.modal-titles { min-width: 0; }
.modal-subtitle { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
}
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }
.modal-body { padding: 1.25rem; overflow-y: auto; }
.modal-body > :last-child { margin-bottom: 0; }
/* Fusszeile: Aktionen rechtsbuendig. flex-wrap seit 0.79.0 — zwei Knoepfe mit
   sprechender Aufschrift („Ressourcenplanung öffnen" + „Schließen") passen auf dem
   Telefon nicht nebeneinander und standen sonst ueber den Dialogrand hinaus. */
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* --- Formulare im Popup (data-modal-url, Controller::viewFragment) ---
   docs/frontend.md → „Formulare im Popup". Ein Modul-Formular braucht damit
   KEIN eigenes CSS: <form> umschliesst .modal-body (Felder in .form-grid) und
   .modal-footer (Aktionen rechtsbuendig). */
/* EINZIG erlaubtes Formular-Muster im Popup:
     <div class="modal-dialog"><div class="modal-header">…</div>
       <form><div class="modal-body">…</div><div class="modal-footer">…</div></form></div>
   Das Formular ist Flex-Spalte: Kopf und Fuss bleiben stehen, nur der Body
   scrollt. Kein .modal-footer IN .modal-body (scrollte mit, doppelt eingerueckt). */
.modal-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.modal-dialog > form > .modal-body,
.modal-dialog > .modal-body { flex: 1 1 auto; min-height: 0; }
/* Linke Fuss-Aktion (z. B. Loeschen) von den rechtsbuendigen absetzen. */
.modal-footer .modal-footer-start { margin-right: auto; }

/* Lade- und Fehlerzustand des nachgeladenen Popups (app.js, data-modal-url) */
.modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 7rem;
    color: var(--color-text-muted);
}
.modal-loading--error { flex-direction: column; text-align: center; }
.modal-loading .ct-busy-spinner { color: var(--color-primary-text, var(--color-primary)); }

/* Meldung im Popup: Server-Fehler, $formError aus modalError() */
.modal-alert {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-error);
    border-radius: var(--radius);
    background: var(--color-error-light);
    color: var(--color-error);
    font-size: 0.85rem;
}
.modal-loading .modal-alert { margin: 0; }

/* Formular-Raster: zwei Spalten, .span-2 ueber beide; --3 fuer drei Spalten.
   Vertikalen Abstand liefert .form-group (margin-bottom). Schmal: eine Spalte. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid > .span-2 { grid-column: span 2; }
.form-grid > .span-3 { grid-column: span 3; }
.form-grid > .span-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .form-grid > .span-2, .form-grid > .span-3 { grid-column: 1 / -1; }
}
.form-group input[type="checkbox"], .form-group input[type="radio"] { width: auto; }
.form-check,
.form-group label.form-check { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem; font-size: 0.875rem; font-weight: 400; color: var(--color-text); }
.form-check input { width: auto; margin: 0; }
.form-check--all { font-weight: 600; }
/* Feld mit Aktion daneben (z. B. einmal angezeigter Token + „Kopieren", data-copy in app.js) */
.input-action { display: flex; align-items: center; gap: 0.5rem; }
.input-action > input, .input-action > textarea { flex: 1 1 auto; min-width: 0; }
.input-action > .btn { flex: 0 0 auto; }
/* Checkbox-Liste (z. B. Rechte): mehrspaltig, soweit Platz ist */
.form-check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: 1rem; padding-left: 1.5rem; }
/* Zwischenueberschrift in laengeren Masken */
.form-section {
    margin: 1.25rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.modal-body > .form-section:first-child { margin-top: 0; }
.form-hint { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--color-text-muted); }
/* Feldfehler: .form-group.has-error + <small class="form-error"> unter dem Feld */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea { border-color: var(--color-error); }
.form-error { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--color-error); }
.form-group textarea[rows] { min-height: 0; resize: vertical; overflow: auto; }

/* Vollseiten-Rueckfall (partials/modal-page): dieselbe Maske ohne Overlay */
.modal-page { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.modal-page .modal-dialog { max-width: 760px; max-height: none; box-shadow: var(--shadow); }
.modal-page .modal-header h1 { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Sicherheitsnetz gegen „Popup oben links":
   Der kanonische Weg oeffnet ein Popup ueber [data-modal-open] / das hidden-
   Attribut — nie ueber inline display. Setzt jemand es doch per
   `el.style.display = 'block'`, wuerde inline `block` die Flex-Zentrierung
   aushebeln und der Inhalt klebte oben links. In genau diesem Fall erzwingen
   wir flex zurueck, damit das Popup trotzdem mittig sitzt. `display:none`
   (verstecken) bleibt unberuehrt. */
.modal[style*="display:block"],   .modal[style*="display: block"],
.am-modal[style*="display:block"], .am-modal[style*="display: block"] {
    display: flex !important;
}

/* === Legacy-Popup „.am-modal" (Herkunft: CRM/Automation-Projekt) ===
 * Neue Popups nehmen .modal (siehe oben) — das ist der dokumentierte Weg.
 * Diese Alt-Konvention wird hier trotzdem ZENTRIERT bereitgestellt, damit ein
 * .am-modal in JEDEM Projekt mittig sitzt und nicht nur dort, wo zufaellig eine
 * projekteigene modal.css mitliegt. Getoggelt wird per inline display
 * (JS: `style.display = 'flex'`); die Basis steht daher auf flex, ein inline
 * display:none blendet aus. Markup: .am-modal > (.am-modal-overlay + .am-modal-content). */
.am-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.am-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.am-modal-content {
    position: relative;
    z-index: 1;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    width: 95%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.am-modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.am-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.am-modal-header h2, .am-modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.am-modal-close:not(.btn) {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
}
.am-modal-close:not(.btn):hover { background: var(--color-bg); color: var(--color-text); }
.am-modal-body { padding: 1.25rem; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.am-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}
body.am-modal-open { overflow: hidden; }

/* === Raster (generisch) ===
 * Gleichmaessige Spalten mit echtem Abstand (gap) — ersetzt handgebaute
 * Flex-/Margin-Konstruktionen. .grid--auto fuellt so viele Spalten wie passen. */
.grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Kennzahlen-Zeile (seit 0.74.0): 5 gleiche Spalten, ab 1200px Viewport 3, ab 900px 2 */
.grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid--cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* min(…, 100%): eine Mindestbreite groesser als der Container (schmale Viewports, Seitenspalte) laeuft nie ueber */
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 220px), 100%), 1fr)); }
/* .grid--fit (seit 0.75.0): wie --auto, aber leere Spuren fallen weg (auto-fit) — wenige Elemente teilen sich
   die ganze Breite statt links zu kleben (Widget-Zeilen: zwei Karten = zwei halbe Spalten, keine Luecke rechts) */
.grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 220px), 100%), 1fr)); }
/* Dashboard-Widgets (partials/dashboard-widgets): seit 0.81.0 (UI-Audit Q13) so hoch wie ihr
   Inhalt — gestreckte Karten zeigten bis zu 500 px Leerflaeche neben einer langen Nachbarkarte. */
.dashboard-widgets { align-items: start; }
.dashboard-widget { display: flex; flex-direction: column; min-width: 0; }
/* Leerzustand in einem Widget immer kompakt (wie .empty--compact) */
.dashboard-widget > .card .empty { padding: 0.75rem 0.5rem; gap: 0.25rem; font-size: 0.8rem; }
.dashboard-widget > .card .empty-icon { width: 22px; height: 22px; }
@media (max-width: 900px) {
    .grid--cols-3, .grid--cols-4, .grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .grid--cols-2, .grid--cols-3, .grid--cols-4 { grid-template-columns: 1fr; }
}
/* Telefon: Kennzahlen bleiben zweispaltig, Kacheln ruecken enger (Labels passen ohne Trennung) */
@media (max-width: 600px) {
    .grid--cols-5 { gap: 0.6rem; }
    .grid--cols-5 > .stat { padding: 0.7rem 0.75rem; }
    .grid--cols-5 .stat-label { font-size: 0.66rem; letter-spacing: 0.02em; }
    .grid--cols-5 .stat-value { font-size: 1.3rem; }
    .grid--cols-5 .stat-icon { display: none; }
    .grid--cols-5 .stat:has(> .stat-icon) .stat-label { padding-right: 0; }
}

/* === Abschnitts-Titel: Ueberschrift gehoert UEBER die Box, nicht hinein ===
 * Haeufiger Fehler war die Ueberschrift innerhalb der Card. Kanonisch:
 * <h2 class="section-title">Titel</h2> <div class="card"> Inhalt </div> */
.section-title { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.6rem; color: var(--color-text); }
.section-title .count { margin-left: 0.35rem; vertical-align: 0.1em; }
/* === Wert im Abschnitts-Kopf (seit 0.79.0, BUG-009) ======================================
 * Die grosse Zahl der Box steht HINTER der Ueberschrift („Offene Themen 7 rot") statt in
 * einer eigenen Kennzahlen-Kachel darueber: stehen die Daten ohnehin direkt darunter,
 * braucht die Zahl keine zweite Box. Toene sind dieselben Tokens wie bei .stat--*, damit
 * eine Zahl in Kopf und Kachel nie unterschiedlich faerbt; hell und dunkel ohne zweite Regel. */
.section-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }
.section-value--success { color: var(--color-success); }
.section-value--warning { color: var(--color-warning); }
.section-value--error { color: var(--color-error); }
.section-value--primary { color: var(--color-text); font-weight: 800; } /* wie .stat--primary: nie in Markenfarbe (seit 0.84.0) */
.section-title .section-value { margin-left: 0.4rem; }
/* Ueberschrift mit Aktion rechts: <div class="section-head"><h2 class="section-title">…</h2><div class="section-actions">…</div></div> */
.section-head { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 0 0 0.6rem; }
.section-head > .section-title { margin: 0; }
.section-actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.section-head + .card, .section-head + .section-card { margin-top: 0; }

/* === Abschnitts-Aktion: Pfeil rechts oben (seit 0.77.0, BUG-002) ==========================
 * Der weiterfuehrende Link einer Box steht nicht mehr als Fusszeile IN der Karte (kostete je
 * Box eine eigene Zeile), sondern als Pfeil im 45-Grad-Winkel nach rechts oben rechts neben
 * der Ueberschrift — ohne Text, Text nur als Tooltip (data-tip) und aria-label.
 * Markup: partials/section-head. Basis ist der Core-Icon-Button (.btn.btn--icon.btn--ghost.btn--sm),
 * hier nur etwas kompakter und mit der Tooltip-Blase der Werkzeugleiste. */
/* Groesse, Flaeche und Hover kommen aus .btn/.btn--icon.btn--sm/.btn--ghost — hier nur, was
 * der Baustein nicht mitbringt: Bezugspunkt fuer die Tooltip-Blase und der Fokusring. */
.section-action { position: relative; }
.section-action:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Tooltip: gleiche Blase wie die Werkzeugleiste (layout.css), hier unter dem Pfeil und
 * rechtsbuendig — der Pfeil sitzt am rechten Rand, nach links ist Platz. */
.section-action[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, 0.18));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 420;
}
.section-action[data-tip]:hover::after,
.section-action[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }
/* Schmale Viewports: Tooltip darf die Seite nicht verbreitern. */
@media (max-width: 480px) { .section-action[data-tip]::after { max-width: 60vw; white-space: normal; } }
/* Im Widget-Raster sind Ueberschriften MIT und OHNE Pfeil gleich hoch — sonst startet die
 * Karte eines Widgets mit Aktion tiefer als die der Nachbarn in derselben Zeile. */
.dashboard-widget > .section-head { min-height: 2.15rem; }
.dashboard-widget > .section-title { display: flex; align-items: center; min-height: 2.15rem; }
/* === Ende Abschnitts-Aktion 0.77.0 === */
/* Abstand zwischen gestapelten Abschnitten (statt <div style="height:1.5rem">) */
.section { margin-bottom: 1.75rem; }
.section:last-child { margin-bottom: 0; }
.section-title + .card, .section-title + .section-card { margin-top: 0; }
.section-lead { font-size: 0.85rem; color: var(--color-text-muted); margin: -0.3rem 0 0.9rem; }

/* Karten im Raster: Abstand kommt aus gap, nicht aus margin-bottom */
.grid > .card, .grid > .stat, .grid > .section-card { margin-bottom: 0; }

/* Klickbare Karte (<a class="card card--clickable"> oder mit data-href) */
.card--clickable { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.card--clickable:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); color: inherit; text-decoration: none; }
.card--clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* === Kacheln: Uebersicht von Modulen/Objekten (partials/tile.php) ===
 * Karte mit Kopf (Bild ODER farbige Flaeche + Icon) und Text darunter — nie mit
 * farbiger Linie links (Gate CARD-ACCENT-LEFT).
 * <div class="tiles">
 *   <a class="tile" href="/crm">
 *     <div class="tile-media tile-media--image"><img src="/crm/assets/screenshot.png" alt="" loading="lazy"></div>
 *     <div class="tile-body"><h3 class="tile-title">CRM</h3><p class="tile-text">…</p>
 *       <div class="tile-tags"><span class="badge badge--blue">Software</span></div></div>
 *   </a>
 *   <a class="tile" href="/wissen">
 *     <div class="tile-media tile-media--color" style="--tile-color:#5b4bc4"><span class="tile-icon"><svg …></svg></span></div>
 *     …
 *   </a>
 * </div> */
/* Mindestbreite je Kachel ueberschreibbar (--tiles-min, seit 0.74.0), z. B. dichtere Raster neben einer Seitenspalte */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--tiles-min, 280px), 100%), 1fr)); gap: 1.25rem; }
.tiles + .demo-note { margin-top: 1rem; }
.tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tile-border);
    border-radius: var(--tile-radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-tile);
    color: var(--color-text);
    text-decoration: none;
}
a.tile { cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-tile-hover); color: var(--color-text); text-decoration: none; }
a.tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.tile { transition: box-shadow 0.18s ease; } a.tile:hover { transform: none; } }

/* Kopf: 16:9, obere Ecken folgen der Karte (overflow:hidden an .tile) */
.tile-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface-hover); }
.tile-media > img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    /* Bildausschnitt ueber partials/tile image_position/image_scale (Default: oben mittig, kein Zoom) */
    object-position: var(--tile-img-x, 50%) var(--tile-img-y, 0%);
    transform: scale(var(--tile-img-scale, 1));
    transform-origin: var(--tile-img-x, 50%) var(--tile-img-y, 0%);
}
.tile-media--image { border-bottom: 1px solid var(--tile-border); }
.tile-media--color {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--tile-color, var(--color-primary)) 0%, color-mix(in srgb, var(--tile-color, var(--color-primary)) 70%, #000) 100%);
    color: #fff;
}
/* Icon-/Logo-Feld mittig auf der Flaeche */
.tile-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(12, 10, 24, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}
.tile-icon > svg { width: 36px; height: 36px; }
.tile-icon > img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tile-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.tile-title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-text); overflow-wrap: anywhere; }
.tile-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(2 * 1.5em);
    font-size: 0.925rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.tile-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.35rem; }
.tile-tags .badge, .tile-tags .tag { padding: 0.25rem 0.75rem; font-size: 0.78rem; }
.tile-tags .code { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: 0.75rem; }
/* Aktionen am Kachelfuss (partials/tile 'actions', z. B. Integrationen: Verbinden/Trennen) — Kachel ist dann nie ein Link */
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.tile-tags + .tile-actions { margin-top: 0; }
.tile-actions form { display: inline; margin: 0; }
/* Zeilenliste am Kachelfuss (z. B. mehrere verbundene Konten): volle Breite, Aktionen umbrechen */
.tile-actions > .row-list { flex: 1 1 100%; }
.tile-actions > .row-list > li { flex-wrap: wrap; }

/* Kompakt: flacher Kopf (3:1), kleinerer Titel — fuer dichte Uebersichten */
.tile--compact .tile-media { aspect-ratio: 3 / 1; }
.tile--compact .tile-icon { width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }
.tile--compact .tile-icon > svg { width: 24px; height: 24px; }
.tile--compact .tile-body { gap: 0.35rem; padding: 0.9rem 1rem 1rem; }
.tile--compact .tile-title { font-size: 1rem; letter-spacing: -0.01em; }
.tile--compact .tile-text { font-size: 0.82rem; }
.tile--compact .tile-tags { padding-top: 0.2rem; }
.tile--compact .tile-tags .badge, .tile--compact .tile-tags .tag { padding: 0.15rem 0.55rem; font-size: 0.7rem; }
/* Dicht (seit 0.74.0, 'dense' => true, immer mit --compact): niedriges Farbband statt 3:1-Kopf, kleines Icon —
   fuer Navigations-Kacheln unter Kennzahlen. Farbige Flaeche bleibt, keine Linie links. */
.tile--dense .tile-media { aspect-ratio: auto; height: 3.25rem; }
.tile--dense .tile-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
.tile--dense .tile-icon > svg { width: 18px; height: 18px; }
.tile--dense .tile-body { gap: 0.25rem; padding: 0.7rem 0.85rem 0.8rem; }
.tile--dense .tile-title { font-size: 0.95rem; }
.tile--dense .tile-text { font-size: 0.8rem; }
.tile--compact .tile-tags .code { padding: 0.1rem 0.45rem; font-size: 0.68rem; }

/* === Schluessel/Wert-Liste: <dl class="kv"><dt>Telefon</dt><dd>…</dd></dl> === */
.kv { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; }
.kv dt { color: var(--color-text-muted); font-size: 0.85rem; }
.kv dd { margin: 0; font-size: 0.9rem; color: var(--color-text); overflow-wrap: anywhere; }
/* Auswahlwerte (Badge/Tag) brechen in schmalen Karten um, statt die Seite zu verbreitern (seit 0.84.0). */
.kv dd :is(.badge, .pill, .tag) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.kv--compact { grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: 0.25rem 0.75rem; }
.kv--compact dt, .kv--compact dd { font-size: 0.8rem; }
@media (max-width: 480px) {
    .kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
    .kv dd { margin-bottom: 0.5rem; }
}

/* === KPI-Kachel: .stat (Zahl, Label, optional klickbar als <a class="stat">) ===
 * <div class="stat"><span class="stat-label">Offen</span><span class="stat-value">128</span><span class="stat-meta">+12 diese Woche</span></div> */
.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    color: var(--color-text);
    text-decoration: none;
}
.stat-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.stat-meta--up { color: var(--color-success); }
.stat-meta--down { color: var(--color-error); }
a.stat, .stat--clickable { cursor: pointer; transition: border-color 0.15s; }
a.stat:hover, .stat--clickable:hover { border-color: var(--color-primary); color: var(--color-text); text-decoration: none; }
.stat--active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Status-Kacheln: Farbe der Kennzahl + optional kleines Icon-Feld (.stat-icon) oben
 * rechts in der hellen Statusflaeche — nie eine farbige Linie links.
 * <div class="stat stat--warning"><span class="stat-icon"><svg …></svg></span><span class="stat-label">Faellig</span>… */
.stat--success { --stat-tone: var(--color-success); --stat-tone-bg: var(--color-success-light); }
.stat--warning { --stat-tone: var(--color-warning); --stat-tone-bg: var(--color-warning-light); }
.stat--error   { --stat-tone: var(--color-error);   --stat-tone-bg: var(--color-error-light); }
.stat--primary { --stat-tone: var(--color-primary-text, var(--color-primary)); --stat-tone-bg: var(--color-primary-light); }
.stat--success .stat-value, .stat--warning .stat-value, .stat--error .stat-value { color: var(--stat-tone); }
/* Hervorgehoben (seit 0.84.0): kraeftiges Textschwarz statt Markenfarbe. Bei rotem Branding
   las sich ein Guthaben in Markenfarbe wie ein Minus — die Marke bleibt fuer Akzente
   (Icon-Feld .stat-icon, aktive Kachel), Zahlen faerben nur die Status-Toene. */
.stat--primary .stat-value { color: var(--color-text); font-weight: 800; }
.stat-icon {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: calc(var(--radius) - 2px);
    background: var(--stat-tone-bg, var(--color-primary-light));
    color: var(--stat-tone, var(--color-primary-text, var(--color-primary)));
}
.stat-icon > svg { width: 16px; height: 16px; }
.stat:has(> .stat-icon) .stat-label { padding-right: 2.5rem; }
/* Kompakte Variante: Meta-Text steht rechts neben der Zahl statt darunter —
 * spart eine Zeile Hoehe in Kennzahlen-Reihen (z. B. fuenf Kacheln nebeneinander).
 * <div class="stat stat--inline"><span class="stat-label">…</span><span class="stat-value">3</span><span class="stat-meta">…</span></div> */
.stat--inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.2rem 0.55rem;
}
.stat--inline > .stat-label { grid-column: 1 / -1; }
.stat--inline > .stat-value { grid-column: 1; }
.stat--inline > .stat-meta { grid-column: 2; align-self: baseline; }
@media (max-width: 640px) {
    .stat--inline { grid-template-columns: auto minmax(0, 1fr); }
}

/* === Fortschritt: .progress (Balken + Beschriftung) ===
 * <div class="progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="--progress:40%">
 *   <div class="progress-head"><span>Umgesetzt</span><span class="progress-value">4 / 10</span></div>
 *   <div class="progress-track"><div class="progress-bar"></div></div>
 * </div>   Wert als Custom-Property (--progress) — erlaubter dynamischer Inline-Style. */
.progress { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; color: var(--color-text-muted); }
.progress-value { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.progress-track { height: 0.5rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--color-text-muted) 16%, transparent); }
.progress-bar { width: var(--progress, 0%); max-width: 100%; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 0.3s; }
.progress--success .progress-bar { background: var(--color-success); }
.progress--warning .progress-bar { background: var(--color-warning); }
.progress--error .progress-bar { background: var(--color-error); }
.progress--lg .progress-track { height: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } }

/* === Gerendertes Markdown: <div class="markdown">…</div> (ersetzt .md-doc, .entw-md) === */
.markdown { font-size: 0.9rem; line-height: 1.65; color: var(--color-text); overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1 { font-size: 1.3rem; margin: 1.5rem 0 0.6rem; }
.markdown h2 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }
.markdown h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
.markdown h4 { font-size: 0.875rem; margin: 0.9rem 0 0.35rem; }
.markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote, .markdown table { margin: 0 0 0.75rem; }
.markdown ul, .markdown ol { padding-left: 1.4rem; }
.markdown li { margin-bottom: 0.2rem; }
.markdown li > ul, .markdown li > ol { margin: 0.2rem 0 0; }
/* Links im Fliesstext: Textfarbe wie ueberall, aber unterstrichen — mitten im Satz waere ein Link
   sonst nur an der Farbe (gar nicht) erkennbar (WCAG 1.4.1). Hover/Fokus: Linkfarbe. Extern: Linkfarbe. */
.markdown a { color: var(--color-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.15em; }
.markdown a:where(:hover, :focus-visible) { color: var(--color-link, var(--color-primary-text, var(--color-primary))); text-decoration-color: currentColor; }
.markdown a:where([target="_blank"], [rel~="external"], [href^="http://"], [href^="https://"]) { color: var(--color-link, var(--color-primary-text, var(--color-primary))); }
.markdown code { padding: 0.05rem 0.3rem; border: 1px solid var(--color-border-light); border-radius: 4px; background: var(--color-surface-hover); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
.markdown pre { padding: 0.75rem; overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius); background: var(--color-surface-hover); font-size: 0.8rem; }
.markdown pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.markdown blockquote { padding: 0.25rem 0 0.25rem 0.9rem; border-left: 3px solid var(--color-border); color: var(--color-text-muted); }
.markdown hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--color-border); }
.markdown img { max-width: 100%; height: auto; border-radius: calc(var(--radius) - 3px); }
.markdown table { width: auto; font-size: 0.85rem; }
.markdown th, .markdown td { height: auto; padding: 0.35rem 0.75rem; border: 1px solid var(--color-border); }

/* === Tabellenzellen: Haupttext, Unterzeile, Avatar === */
.cell-main { display: block; font-weight: 600; color: var(--color-text); line-height: 1.35; }
a.cell-main { text-decoration: none; }
a.cell-main:hover { color: var(--color-primary-text, var(--color-primary)); }
.cell-sub { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.35; }
.cell-avatar { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.cell-avatar > :last-child { min-width: 0; }
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    overflow: hidden;
    border-radius: 9px;
    background: var(--color-primary-light);
    color: var(--color-primary-text, var(--color-primary));
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    object-fit: cover;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--round { border-radius: 50%; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; border-radius: 7px; }
.avatar--logo { background: var(--color-surface); border: 1px solid var(--color-border); }
.avatar--logo img { object-fit: contain; }

/* === Einfache Zeilenliste in einer Karte (Verlauf, Ereignisse, kurze Listen) ===
 * <ul class="row-list"><li><span>…Text…</span><span class="badge …">…</span></li></ul>
 * Fuer Daten mit Spalten: Tabelle (.card--table). */
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); }
.row-list > li:first-child { padding-top: 0; }
.row-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.row-list-meta { margin-right: 0.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* === Kompakte Objektliste: .item-list / partials/item-list (seit 0.75.0) ===
 * Widgets in Haupt- und Seitenspalte: Titel-Link auf eigener Zeile (Textfarbe, max. 2 Zeilen),
 * darunter gedaempfte Meta-Zeile (Ampel-Punkt, relative Faelligkeit, Bezug, Kennzeichen) —
 * Teile per „·" getrennt, nie im Link-Text. Gruppen-Label klein und gedaempft (.item-list davor: schlaegt .card h3), Fuss-Links ruhig. */
.item-list { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.item-list-summary { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.75rem; color: var(--color-text-muted); }
.item-list .item-list-group { display: flex; align-items: center; gap: 0.35rem; margin: 0.35rem 0 -0.15rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.item-list .item-list-group:first-child { margin-top: 0; }
.item-list-items { list-style: none; margin: 0; padding: 0; }
.item-list-item { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light); }
.item-list-item:first-child { padding-top: 0.15rem; }
.item-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.item-list-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere;
}
.item-list-meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; min-width: 0; font-size: 0.75rem; line-height: 1.4; color: var(--color-text-muted); }
/* Ampelpunkt steht vor dem grauen Text, eingerueckt (BUG-012; vorher hing er in der
 * Karten-Polsterung). Er sitzt IM ersten Teil (partials/item-list), deshalb steht er beim
 * Umbruch nie allein in einer Zeile (BUG-003). */
.item-list-dot { display: inline-block; vertical-align: 0.05em; margin-right: 0.4rem; }
/* Trenner am VORIGEN Teil: beim Umbruch beginnt sonst die neue Zeile mit dem Punkt. */
.item-list-part + .item-list-part::before { content: none; }
.item-list-part:not(:last-child)::after { content: "·"; margin-left: 0.4rem; color: var(--color-text-muted); }
.item-list-due--overdue { color: var(--color-error-text, var(--color-error)); }
.item-list-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.01em; }
.item-list-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-text-muted); }
.item-list-dot--error   { background: var(--color-error); }
.item-list-dot--warning { background: var(--color-warning); }
.item-list-dot--success { background: var(--color-success); }
.item-list-dot--info    { background: var(--color-info); }
.item-list-dot--primary { background: var(--color-primary); }
.item-list-more { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); }
.item-list-footer { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0.25rem 0 0; font-size: 0.8rem; font-weight: 500; }
/* Aufzaehlung mit Abstand (Regeln, Hinweise) */
.bullet-list { margin: 0; padding-left: 1.2rem; }
.bullet-list > li + li { margin-top: 0.4rem; }

/* „Mehr"-Menue im Seitenkopf (partials/page-header, 'mehr' => true; seit 0.81.0) */
.menu-more { position: relative; display: inline-block; }
.menu-more > summary { list-style: none; gap: 0.35rem; }
.menu-more > summary::-webkit-details-marker { display: none; }
.menu-more[open] > summary .menu-more-caret { transform: rotate(180deg); }
.menu-more-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
    min-width: 13rem; max-width: min(20rem, calc(100vw - 2rem));
    display: flex; flex-direction: column; padding: 0.3rem;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.16));
}
.menu-more-item > form { display: block; margin: 0; }
.menu-more-item :is(.btn, a, button) {
    display: flex; width: 100%; justify-content: flex-start; text-align: left;
    padding: 0.45rem 0.65rem; border: 0; background: none; box-shadow: none;
    color: var(--color-text); font-size: 0.85rem; font-weight: 500; white-space: normal; text-decoration: none;
    border-radius: calc(var(--radius) - 3px);
}
.menu-more-item :is(.btn, a, button):hover { background: var(--color-surface-hover); color: var(--color-text); }
.menu-more-item .btn--danger { color: var(--color-error); }
.menu-more-item .btn--danger:hover { background: var(--color-error-light); color: var(--color-error); }
@media (max-width: 640px) { .menu-more-panel { right: auto; left: 0; } }

/* Objekt-Verlauf (partials/audit-history.php) */
.audit-history-title { margin: 0 0 0.5rem; }
.audit-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.audit-history-item { padding: 0.25rem 0 0.25rem 0.75rem; border-left: 2px solid var(--color-border); }
.audit-history-diff { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.audit-history-more { margin-top: 0.25rem; }
.audit-history-more > summary { cursor: pointer; }
.audit-history-field { font-weight: 500; }
.audit-history-diff > li { overflow-wrap: break-word; }
/* Aeltere Eintraege hinter „Ältere anzeigen (n)" (seit 0.84.0). */
.audit-history-older { margin-top: 0.5rem; }
.audit-history-older > summary { cursor: pointer; margin-bottom: 0.5rem; }

/* Kommentar-Thread (partials/comments.php, core/Comments.php) — nur Layout, Farben aus den Tokens */
.comments-title { margin: 0 0 0.75rem; }
.comments-empty { margin: 0 0 0.75rem; }
.comments-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.comment { padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-light); }
.comment:last-child { border-bottom: 0; padding-bottom: 0; }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.75rem; }
.comment-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.comment-author { font-size: 0.85rem; }
.comment-body { font-size: 0.9rem; line-height: 1.55; overflow-wrap: anywhere; }
.comment-revisions { margin-top: 0.35rem; }
.comment-revisions > summary { cursor: pointer; }
.comment-revisions .row-list { margin-top: 0.35rem; }
.mention { font-weight: 600; color: var(--color-primary-text, var(--color-primary)); }
.mention-field { position: relative; }
.mention-field textarea { min-height: 5rem; resize: vertical; overflow: auto; }
/* @-Autovervollstaendigung (public/assets/js/comments.js) */
.mention-list { position: absolute; left: 0; right: 0; z-index: 20; margin-top: 0.25rem; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; padding: 0.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12)); }
.mention-option { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.4rem 0.6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; font-size: 0.85rem; }
.mention-option:hover, .mention-option.is-active { background: var(--color-primary-light); }

/* Tabellenzelle ohne Umbruch (Datum/Uhrzeit) und kleine Monospace-Zelle (IP, Aktion) */
.nowrap { white-space: nowrap; }
.audit-log-details { max-width: 32rem; overflow-wrap: anywhere; }
td.mono { font-size: 0.82rem; }

/* Tabellarische Ziffern (Betraege, Datumsspalten, Zaehler) */
.tabular { font-variant-numeric: tabular-nums; }

/* === Kanban (Board) — Drag&Drop: assets/js/kanban.js ===
 * <div class="kanban" data-kanban-move-url="/modul/verschieben">
 *   <section class="kb-col">
 *     <header class="kb-col-head"><span class="kb-col-title">Offen</span><span class="count" data-kanban-count>2</span>
 *       <button type="button" class="btn btn--icon btn--ghost btn--sm" aria-label="Neu in Offen">+</button></header>
 *     <div class="kb-col-body" data-drop="offen">
 *       <article class="kb-card" data-drag="12"><div class="kb-card-top"><span class="code">F-012</span></div>
 *         <div class="kb-card-title">Titel</div><div class="kb-card-meta">…</div></article>
 *     </div>
 *   </section>
 * </div> */
.kanban { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 0.5rem; min-width: 0; max-width: 100%; }
/* Spalten teilen sich die Breite (seit 0.84.0: 160 statt 218 px Mindestbreite — bei 1440 px
   passten fuenf Spalten nicht, die fuenfte war abgeschnitten). Erst bei sehr vielen Spalten
   scrollt das Board horizontal in seinem Rahmen, nie die Seite. */
.kb-col { flex: 1 1 0; min-width: 160px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.kb-col--done { border-style: dashed; }
.kb-col-head { display: flex; align-items: center; gap: 0.4rem; min-height: 2.15rem; padding: 0 0.35rem 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.kb-col-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Aktion im Spaltenkopf (Plus): rechts, erst bei Hover/Fokus sichtbar — auf Touch immer */
.kb-col-head .btn--icon { margin-left: auto; opacity: 0; transition: opacity 0.15s; }
.kb-col:hover .kb-col-head .btn--icon, .kb-col-head .btn--icon:focus-visible { opacity: 1; }
@media (hover: none) { .kb-col-head .btn--icon { opacity: 1; } }
.kb-col-body { display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; border-radius: calc(var(--radius) - 2px); }
.kb-col-body.dragover { background: var(--color-primary-light); outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.kb-card { padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); background: var(--color-surface); box-shadow: var(--shadow); color: var(--color-text); cursor: pointer; }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card:hover { border-color: var(--color-primary); }
.kb-card.dragging { opacity: 0.45; }
.kb-card.is-saving { opacity: 0.7; }
/* Markierung: Farbpunkt .kb-card-dot im Kartenkopf (plus leicht getoenter Rahmen) — keine Linie links.
 * <div class="kb-card-top"><span class="kb-card-dot" role="img" aria-label="Dringend"></span><span class="code">F-012</span><span class="tag">Bug</span></div> */
.kb-card--primary { --kb-tone: var(--color-primary); }
.kb-card--error   { --kb-tone: var(--color-error); }
.kb-card--warning { --kb-tone: var(--color-warning); }
.kb-card--primary, .kb-card--error, .kb-card--warning { border-color: color-mix(in srgb, var(--kb-tone) 40%, var(--color-border)); }
.kb-card-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kb-tone, var(--color-text-light)); }
.kb-card-dot + * { margin-right: auto; }
.kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.3rem; }
.kb-card-title { margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.kb-card-title:last-child { margin-bottom: 0; }
.kb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.72rem; color: var(--color-text-muted); }
.kb-card-meta .icon { vertical-align: -1px; }
.kb-card-meta-end { margin-left: auto; white-space: nowrap; }
.kb-empty { padding: 0.75rem 0; text-align: center; font-size: 0.78rem; color: var(--color-text-light); }

/* === Tab-Panels (Reiter-Inhalt; .tabs/.tab existieren bereits oben) === */


/* === Utilities (einzweckige Klassen) ===
 * Ersetzen die haeufigsten Inline-Styles in Views (style="color:var(--color-text-muted)",
 * margin-top:1rem, display:inline ...). Bewusst klein: nur was wiederholt vorkam. */
.text-muted { color: var(--color-text-muted); }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.inline { display: inline; }
/* Vertikaler Stapel mit gleichmaessigem Abstand (statt margin je Kind) */
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.stack--sm { gap: 0.4rem; }
/* Aktionen nebeneinander (Formular-Fuss ausserhalb eines Popups, Button-Gruppen) */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.actions--end { justify-content: flex-end; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Nur fuer Screenreader sichtbar (seit 0.75.0) — z. B. Text zu einem Farbpunkt */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* === Element-Katalog (showcase/index.php): Demo-Bausteine === */
.demo-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.demo-row + .demo-row { margin-top: 0.9rem; }
.demo-row > .demo-note { flex: 1 1 20rem; margin-top: 0; }
.demo-narrow { max-width: 520px; }
.demo-lead { max-width: 680px; }
/* Rahmen um ein Seiten-Beispiel (Seitenkopf), damit es nicht wie der echte Kopf wirkt */
.demo-frame { padding: 1.25rem 1.25rem 0.25rem; border: 1px dashed var(--color-border); border-radius: var(--radius); margin-bottom: 1rem; }
.demo-frame .page-header { margin-bottom: 1rem; }
.demo-note { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.demo-note code, code.inline-code {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Kompaktes Formular-Grid (Settings-Panels: SMTP, Team, Profil, 2FA) ---
   Basis-Primitive fuer Label-ueber-Feld-Formulare. base.css stylt zwar jedes
   input/select generisch (Rahmen/Padding), aber ohne diese Regeln stehen Labels
   inline in Default-Groesse und die Felder stapeln full-width statt im 2-Spalten-
   Grid. Aus dem faictory-igepa-Projekt (project.css, "Golden-Master modules.css")
   in den Core zurueckportiert, damit alle Feature-Panels sauber rendern. Die
   spezifischeren .master-data-grid-Regeln weiter unten ueberschreiben das Label-
   Layout dort bewusst (Label links neben Feld). */
.crm-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 0.75rem; }
@media (max-width: 640px) { .crm-compact-grid { grid-template-columns: 1fr; } }
.crm-field label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.3rem; }
.crm-field input, .crm-field select, .crm-field textarea { width: 100%; padding: 0.4rem 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; background: var(--color-bg); color: var(--color-text); }
/* Checkbox/Radio nie full-width ziehen (die generische .crm-field-input-Regel
   oben wuerde sie sonst strecken → Label rutscht weg, Kontrollkaestchen mittig).
   Betrifft z. B. den Button-Farbverlauf-Schalter im CI-Panel. */
.crm-field input[type="checkbox"], .crm-field input[type="radio"] { width: auto; }
.crm-field textarea { resize: vertical; min-height: 2.5rem; font-family: inherit; }
.crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }

/* --- CI-Panel: Formular in thematische Abschnitte, zweispaltig (Masonry) ---
   Jeder .ci-section-Block bleibt beim Umbruch ganz (break-inside: avoid). Bei
   Platzmangel faellt columns auf eine Spalte zurueck. */
.ci-form-grid { columns: 2 17rem; column-gap: 1rem; }
.ci-section {
    break-inside: avoid;
    margin: 0 0 1rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.ci-section > h4 {
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ci-section .crm-field + .crm-field { margin-top: 0.9rem; }
/* Farben im Raster statt untereinander: zwei Spalten, Abstand ueber gap
   (die Abschnitts-Adjacency-Regel oben wird hier neutralisiert). */
.ci-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.75rem; margin-bottom: 0.9rem; }
.ci-color-grid .crm-field + .crm-field { margin-top: 0; }
/* Farbfeld (ci.php $colorPair): nativer Farbwaehler + Hex-Textfeld nebeneinander.
   .crm-field-Praefix, damit die Regeln die generische .crm-field-input-Regel
   (width:100%, padding) ueberstimmen. --compact = feste 100px fuer Verlauf/Marke. */
.crm-field .ci-color-pair { display: flex; gap: 0.5rem; align-items: center; }
.crm-field .ci-color-input {
    width: 42px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius) - 3px);
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
}
.crm-field .ci-color-hex { min-width: 0; width: 100%; font-family: ui-monospace, monospace; }
.crm-field .ci-color-pair--compact .ci-color-hex { width: 100px; }
.ci-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }

/* Klickbares Logo-Feld: die Anzeige (Label) oeffnet den Dateidialog; Hover
   zeigt „Ändern". Kein separater Datei-Button. Selektoren mit .crm-field-Praefix,
   damit sie die generischen .crm-field label/input-Regeln ueberstimmen. */
.crm-field .logo-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 56px;
    max-width: 220px;
    margin-bottom: 0;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font-weight: 400;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}
.crm-field .logo-picker:hover { border-color: var(--color-primary); }
.crm-field .logo-picker:not(.logo-picker--filled) { border-style: dashed; }
.crm-field .logo-picker:not(.logo-picker--filled):hover { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.crm-field .logo-picker--sm { min-width: 52px; min-height: 52px; }
.crm-field .logo-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crm-field .logo-picker-img { max-width: 100%; max-height: 64px; height: auto; width: auto; object-fit: contain; }
.crm-field .logo-picker--sm .logo-picker-img { max-height: 40px; }
.crm-field .logo-picker-empty { color: var(--color-text-muted); font-size: 0.85rem; padding: 0.35rem 0.55rem; text-align: center; }
.crm-field .logo-picker-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.crm-field .logo-picker--filled:hover .logo-picker-overlay { opacity: 1; }
.crm-field .logo-picker-remove { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.4rem 0 0; font-weight: 400; font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; }

/* --- Stammdaten (Settings): Split-Layout + Beleg-Fusszeilen-Vorschau --- */
.master-data-split { display: grid; grid-template-columns: 1fr 360px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .master-data-split { grid-template-columns: 1fr; } }
.master-data-intro { color: var(--color-text-muted); font-size: 0.8rem; margin: 0 0 1.25rem; line-height: 1.5; }
.master-data-sub { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 1.5rem 0 0.85rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); }
.master-data-grid { display: flex; flex-direction: column; }
.master-data-grid .crm-field { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 0.5rem 1.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); }
.master-data-grid .crm-field:last-child, .master-data-grid .master-data-check:last-child { border-bottom: 0; }
.master-data-grid .crm-field label { margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--color-text); }
.master-data-grid .crm-field input, .master-data-grid .crm-field select { width: 100%; }
.master-data-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; }
.master-data-check input { flex-shrink: 0; }
.master-data-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-light); }
@media (max-width: 640px) { .master-data-grid .crm-field { grid-template-columns: 1fr; align-items: start; gap: 0.3rem; } }
.receipt-foot-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; font-size: 0.75rem; line-height: 1.55; color: var(--color-text-muted); padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.receipt-foot-preview strong { color: var(--color-text); }

/* === Busy-State (Ladeanimation fuer Aktions-Buttons/Forms, siehe app.js ctBusy) === */
/* Opt-in per data-busy. Der Spinner ersetzt den Button-Text, waehrend eine Aktion
   laeuft (synchron bis Seitenwechsel oder AJAX-Abschluss). Verhindert Doppel-Klick. */
.ct-busy {
    cursor: progress !important;
    opacity: 0.85;
}
.ct-busy .ct-busy-spinner,
.ct-busy-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ct-spin 0.6s linear infinite;
    vertical-align: -0.1em;
    box-sizing: border-box;
}
.ct-busy-text { margin-left: 0.5em; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ct-busy-spinner { animation-duration: 1.4s; }
}

/* === Job-Tray (Hintergrund-Jobs Stufe 2, siehe app.js ctJobs) === */
/* Persistente Anzeige aktiver Hintergrund-Jobs unten rechts. Ueberlebt
   Navigation (ctJobs.resume() holt offene Jobs nach jedem Seitenladen). */
.ct-jobs-tray {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
    pointer-events: none;
}
.ct-job {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1a1a2e);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius, 8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
    line-height: 1.3;
}
/* Ergebnis als Farbpunkt statt Linie links (laufend: Spinner) */
.ct-job.is-done::before, .ct-job.is-failed::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success, #16a34a); }
.ct-job.is-failed::before { background: var(--color-error, #dc2626); }
.ct-job.is-clickable { cursor: pointer; }
.ct-job-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ct-job-meta {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* SMTP-Verbindungsstatus (Feature smtp): dauerhaftes Badge je Konto im Panel.
   Zustand kommt als Modifier smtp-status--never|ok|fail aus der View. */
.smtp-status {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    background: var(--color-bg, #f5f4f7);
}
.smtp-status strong { font-size: 0.85rem; }
.smtp-status--never strong { color: var(--color-text-muted, #6b7280); }
.smtp-status--ok strong { color: var(--color-success, #1a7f4b); }
.smtp-status--fail strong { color: var(--color-error, #b42318); }
.smtp-status-when { color: var(--color-text-muted); font-size: 0.78rem; }
.smtp-status-error { flex-basis: 100%; color: var(--color-error); font-size: 0.78rem; }

/* Team-Benutzerliste (Feature team): kompakte Spalten-Zeilen + Akkordeon.
   Spalten: Kürzel · Name · E-Mail (mittig) · Rolle (rechts) · Chevron. */
.team-member { border: 1px solid var(--color-border-light); border-radius: var(--radius); margin-bottom: 0.5rem; }
.team-row {
    display: grid;
    grid-template-columns: 56px minmax(110px, 1.1fr) minmax(150px, 1.6fr) 160px 20px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
}
.team-row--head {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted); font-weight: 600; padding: 0.3rem 0.85rem;
}
.team-row--summary { cursor: pointer; list-style: none; }
.team-row--summary::-webkit-details-marker { display: none; }
.team-row--summary:hover { background: var(--color-bg, #f5f4f7); border-radius: calc(var(--radius) - 2px); }
.team-initials {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 30px; padding: 0 6px;
    border-radius: calc(var(--radius) - 3px); background: var(--color-bg, #f5f4f7);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-text-muted);
}
.team-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-email { color: var(--color-text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row-role { text-align: right; }
.team-chevron { color: var(--color-text-muted); font-size: 0.8rem; transition: transform 0.15s; text-align: right; }
.team-member[open] .team-chevron { transform: rotate(180deg); }
@media (max-width: 640px) {
    .team-row { grid-template-columns: 44px 1fr auto; }
    .team-row--head, .team-email { display: none; }
}

/* === Schmale Viewports: nichts verbreitert die Seite (seit 0.76.0) ==========================
 * Eigener Block am Dateiende (gewinnt gegen gleich spezifische Regeln oben). Gefunden per
 * Seiten-Audit bei 390 px: Raster-Spalten mit breiter Tabelle, Aktions-/Kopfleisten ohne
 * Umbruch, Datei-Eingabe, Auswahlfelder und lange Links in Hinweisen. */
.grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .grid--cols-3, .grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .grid--cols-2, .grid--cols-3, .grid--cols-4 { grid-template-columns: minmax(0, 1fr); }
}
.grid > * { min-width: 0; }
.section-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.page-actions { min-width: 0; max-width: 100%; }
.page-actions :is(select, input:not([type="checkbox"], [type="radio"])) { max-width: 100%; }
.version-badges { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.attachments-input, input[type="file"] { max-width: 100%; }
.alert > * { min-width: 0; }
.alert { overflow-wrap: anywhere; }
.search-page-form { flex-wrap: wrap; }
.search-page-input { min-width: 0; }
.section-actions, .page-actions { overflow-wrap: anywhere; }
.chip { max-width: 100%; }
:is(.chips, .actions) > .chip { white-space: normal; }
.list-toolbar :is(select, input:not([type="checkbox"], [type="radio"])), .actions > select { max-width: 100%; min-width: 0; }
.page-title-row > .page-title { min-width: 0; overflow-wrap: anywhere; }
/* === Ende Schmale Viewports 0.76.0 === */

/* === Seitenfluss fuer Abschnittsueberschriften (seit 0.76.0) ===
 * .section-title/.section-head setzen margin: 0 0 … (Spezifitaet 0,1,0) und schlugen damit den
 * Seitenfluss aus layout.css — eine Ueberschrift direkt nach .grid/.tiles/.split klebte daran.
 * Gleiche Selektoren wie layout.css → „Seitenfluss", hier mit :is() auf Klassen-Spezifitaet;
 * Abstands-Utilities (.mt-0/1/2) an der Ueberschrift gewinnen weiter. */
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(:not(script, style, template, link, meta, input[type="hidden"], [hidden], dialog, .modal)) ~ :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) {
    margin-top: var(--flow-space);
}
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(p, h1, h2, h3, h4) + :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) {
    margin-top: var(--flow-space-sm);
}
:where(.container, .container--narrow, .container--wide, .page-main, .section) > :where(.section-title, .section-head, .page-header, .back-link, .list-toolbar, .list-views, .chips, .tabs, .tabs-select, #filter-panel, .card-head) + :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) {
    margin-top: 0;
}
/* === Ende Seitenfluss Abschnittsueberschriften 0.76.0 === */

/* === Gleich grosse Kacheln, Nachtrag (0.77.0, BUG-004) ===
 * Die Schutzregel fuer Raster-Kinder steht in layout.css (dort begruendet). Der Seitenfluss
 * fuer Abschnittsueberschriften direkt darueber hat dieselbe Spezifitaet und steht spaeter im
 * Bundle — waere eine .section-title/.section-head direkt ein Raster-Kind, bekaeme genau sie
 * ihren Rand zurueck und die Spur waere wieder ungleich hoch. Deshalb hier nachgezogen;
 * Abstands-Utilities (.mt-0/1/2) gewinnen weiter. */
:is(.grid, .tiles, .dashboard-widgets) > :is(.section-title, .section-head):not(.mt-0, .mt-1, .mt-2) {
    margin-top: 0;
}
/* === Ende gleich grosse Kacheln, Nachtrag 0.77.0 === */

/* === Anhaenge & Bildergalerie (seit 0.78.0) =================================================
 * partials/attachments + public/assets/js/attachments.js, docs/storage.md.
 * Ein Block fuer drei Teile: Kachel-Galerie (Anhaenge mit MIME image/*), Dateizeile
 * (alles andere) und Upload-Zone. Alle Masse stehen HIER — das Partial traegt keine
 * Layout-Inline-Styles mehr (einzige Ausnahme: die Messwerte des Markierungsrahmens als
 * CSS-Variablen an der Lead-Kachel). Farben ausschliesslich ueber Tokens, damit hell und
 * dunkel ohne zweite Regel stimmen; ab 480 px schmaler werden die Kacheln kleiner. */
.attachments-title { margin: 0 0 0.5rem; }
.attachments-empty { margin: 0 0 0.5rem; }
/* --- Hauptbild des Moduls (attachLead): gross, im eigenen Seitenverhaeltnis, nie beschnitten —
       nur so sitzt der Markierungsrahmen (.attachment-mark) exakt auf dem markierten Element. --- */
.attachment-lead { margin: 0 0 0.75rem; }
.attachment-lead-link { display: block; border-radius: var(--radius, 6px); }
.attachment-lead-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.attachment-lead-frame {
    position: relative; display: block; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius, 6px);
    background: var(--color-bg);
}
.attachment-lead-img { display: block; width: 100%; height: auto; }
.attachment-lead-caption {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--color-text-muted);
}

/* --- Galerie: gleich hohe Kacheln, Bild im 4:3-Rahmen (object-fit: cover) --- */
.attachment-gallery {
    list-style: none; margin: 0 0 0.75rem; padding: 0;
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.attachment-tile { position: relative; min-width: 0; }
.attachment-tile-open {
    display: flex; flex-direction: column; gap: 0.3rem;
    color: var(--color-text); text-decoration: none;
    border-radius: var(--radius, 6px);
}
.attachment-tile-open:hover { text-decoration: none; }
.attachment-tile-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.attachment-tile-frame {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border); border-radius: var(--radius, 6px);
    background: var(--color-bg);
}
.attachment-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attachment-tile-open:hover .attachment-tile-frame { border-color: var(--color-primary); }
/* Markierungsrahmen des Moduls: Position kommt als CSS-Variablen (Messwerte) aus der View. */
.attachment-mark {
    position: absolute; pointer-events: none;
    left: var(--rect-l, 0); top: var(--rect-t, 0);
    width: var(--rect-w, 0); height: var(--rect-h, 0);
    border: 2px solid var(--color-error); border-radius: 2px;
}
.attachment-tile-name {
    display: block; font-size: 0.78rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-tile-badge {
    position: absolute; left: 0.35rem; top: 0.35rem;
    padding: 0.1rem 0.4rem; border-radius: calc(var(--radius, 6px) - 2px);
    background: var(--color-surface); border: 1px solid var(--color-border);
    font-size: 0.68rem; font-weight: 600; color: var(--color-text-muted);
}
/* Aktionen erst bei Hover/Fokus — die Kachel bleibt ruhig, per Tastatur trotzdem erreichbar. */
.attachment-tile-actions {
    position: absolute; right: 0.35rem; top: 0.35rem;
    display: flex; gap: 0.25rem;
    opacity: 0; transition: opacity 0.12s;
}
.attachment-tile:hover .attachment-tile-actions,
.attachment-tile:focus-within .attachment-tile-actions { opacity: 1; }
@media (hover: none) { .attachment-tile-actions { opacity: 1; } }
.attachment-tile-actions .btn { background: var(--color-surface); }
@media (max-width: 480px) {
    .attachment-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* --- Dateizeile (alles, was kein Bild ist) --- */
.attachments-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.attachments-item { display: flex; align-items: center; gap: 0.5rem; }
.attachments-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments-item-meta { white-space: nowrap; }

/* --- Upload-Zone --- */
.attachments-upload {
    border: 1px dashed var(--color-border); border-radius: var(--radius, 6px);
    padding: 0.75rem; text-align: center;
}
.attachments-upload--over { border-color: var(--color-primary); background: var(--color-primary-light); }
.attachments-upload[aria-busy="true"] { opacity: 0.7; }
.attachments-drop { display: block; cursor: pointer; }
.attachments-pick { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.attachments-upload:focus-within { border-color: var(--color-primary); outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 1px; }
.attachments-progress { margin-top: 0.5rem; }
.attachments-progress-bar { width: 100%; }

/* --- Lichtbox: Bild gross im Core-Popup (.modal aus app.js) --- */
.attachment-lightbox .modal-body { display: flex; align-items: center; justify-content: center; padding: 0.75rem; background: var(--color-bg); }
.attachment-lightbox-img { max-width: 100%; max-height: calc(100vh - 13rem); object-fit: contain; display: block; }
.attachment-lightbox .modal-footer { justify-content: space-between; flex-wrap: wrap; }
.attachment-lightbox-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.attachment-lightbox-count { color: var(--color-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* === Ende Anhaenge & Bildergalerie 0.78.0 === */
/* === Responsive === */
@media (max-width: 768px) {
    .container, .container--narrow, .container--wide { padding: 1rem; }
    .page-actions { margin-left: 0; justify-content: flex-start; }
}

/* === Datenlisten als Karten auf dem Handy (seit 0.81.0, UI-Audit Q5) ===================
 * partials/list rendert table.list-table mit td[data-label] (Spaltenkopf). Unter 640 px
 * wird jede Zeile eine Karte: Titel (Spalte col-title, sonst die erste) links, Status/Badge
 * und Aktionen rechts, darunter eine graue Meta-Zeile „Spalte: Wert" — kein Querscrollen. */
@media (max-width: 640px) {
    .list-table-wrap:has(> table.list-table) { overflow-x: visible; background: none; }
    table.list-table,
    table.list-table.table--fixed { display: block; min-width: 0; width: 100%; table-layout: auto; }
    table.list-table colgroup,
    table.list-table thead { display: none; }
    table.list-table tbody { display: block; }
    table.list-table tr {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
        padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-light);
    }
    table.list-table tbody tr:last-child { border-bottom: 0; }
    /* Umbruch zwischen Kopfzeile (Titel, Status) und Meta-Zeile */
    table.list-table tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
    table.list-table td {
        display: block; order: 3; height: auto; padding: 0; border: 0;
        min-width: 0; max-width: 100%; white-space: normal; text-align: left;
        font-size: 0.75rem; color: var(--color-text-muted);
    }
    table.list-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 500; }
    table.list-table td:empty { display: none; }
    /* Titel: Spalte col-title, ohne sie die erste Spalte */
    table.list-table td.col-title,
    table.list-table tr:not(:has(> td.col-title)) > td:first-child {
        order: 0; flex: 1 1 0; min-width: 50%;
        font-size: 0.875rem; color: var(--color-text);
    }
    table.list-table td.col-title::before,
    table.list-table tr:not(:has(> td.col-title)) > td:first-child::before { content: none; }
    table.list-table :is(td.col-status, td.col-badge, td.col-actions) { order: 1; margin-left: auto; }
    table.list-table :is(td.col-status, td.col-badge, td.col-actions, td.col-check)::before { content: none; }
    table.list-table td.col-check { order: -1; }
    /* Leerzeile bleibt eine Zelle ueber die volle Breite */
    table.list-table td.empty-cell { order: 0; flex: 1 1 100%; font-size: 0.85rem; }
    table.list-table td.empty-cell::before { content: none; }
}
/* =========================================================================
 * PWA / Standalone — systemweit, unabhaengig vom Modul.
 *
 * Greift NUR, wenn die App vom Homescreen als installierte App laeuft
 * (display-mode: standalone bzw. iOS legacy navigator.standalone -> .pwa-standalone).
 * Im normalen Browser-Tab bleibt alles unveraendert.
 *
 * Ziel: Inhalte aus den Geraete-"Notches"/Home-Indicator-Bereichen halten
 * (safe-area-insets) und Touch-Bedienung angenehm machen.
 *
 * Layout-Container (app/views/layouts/main.php): die fixe linke Spalte ist
 * <aside class="app-sidebar"> (position: fixed, top 0, eigenes Padding 20px),
 * der Inhalt steht in <main class="main">. Eine Topnav gibt es nicht mehr.
 * ========================================================================= */

@media (display-mode: standalone) {
    /* Safe-Area-Padding fuer den Body-Rand. */
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        /* Kein Pull-to-Refresh / Overscroll-Bounce in der App-Huelle. */
        overscroll-behavior-y: none;
    }

    /* Fixierte Sidebar unter die Statusbar/Notch schieben (Body-Padding wirkt
       auf position:fixed nicht). 20px = das normale Sidebar-Padding oben. */
    .app-sidebar {
        padding-top: calc(env(safe-area-inset-top) + 20px);
    }

    /* Lange Listen/Scrollbereiche unten frei vom Home-Indicator halten. */
    .main {
        padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    }
}

/* iOS Safari (Legacy) meldet display-mode unzuverlaessig -> Body-Klasse als Fallback,
 * gesetzt per JS aus navigator.standalone. Gleiche Regeln wie oben. */
.pwa-standalone {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: none;
}
.pwa-standalone .app-sidebar {
    padding-top: calc(env(safe-area-inset-top) + 20px);
}
.pwa-standalone .main {
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
}

/* Touch-Komfort in der installierten App: keine versehentliche Text-Selektion
 * auf Bedien-Elementen, aber Eingabefelder/Inhalte bleiben selektierbar. */
@media (display-mode: standalone) {
    button, .btn, a.btn, nav a {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    input, textarea, select, [contenteditable] {
        -webkit-user-select: text;
        user-select: text;
    }
}
/* modul: aufgaben — modules/aufgaben/assets/aufgaben.css */
/*
 * Modul aufgaben — nur Fachliches: Woche (7-Tage-Raster), Zeitplan (Gantt),
 * Bezug-Trefferliste, Checkliste, Zeile im Zustände-Dialog. Das Detail nutzt
 * nur Core-Bausteine (page-header, split, kv). Alle Bausteine (Kopf, Tabs, Tabellen, Kanban, Chips, Badges,
 * Leerzustand …) liefert der Core (docs/frontend.md → Komponenten). Nur Tokens.
 * Liegt im CSS-Bundle (manifest.json "styles") und gilt damit auf jeder Seite — Selektoren
 * deshalb immer unter einer tk-Klasse (docs/frontend.md → Modul-CSS im Bundle).
 */

/* ---------- Zustände-Dialog: Name nimmt den Platz ---------- */
.actions.tk-cols-row { display: grid; flex-wrap: nowrap; grid-template-columns: minmax(0, 1fr) 7.5rem 5.5rem 2.5rem 5rem; align-items: center; gap: 0.5rem; }
.tk-cols-row input[type="text"] { min-width: 0; }
.tk-cols-row > .count { justify-self: center; }
.tk-cols-row > :last-child { justify-self: end; }
/* Neue Zeile (aufgaben-board.js): nur das Namensfeld, ueber die volle Breite */
.tk-cols-row > input[name="new[]"] { grid-column: 1 / -1; justify-self: stretch; }

/* ---------- Bezug-Auswahl (_bezug-picker.php + aufgaben-bezug.js) ---------- */
.tk-bezug-zeile { display: flex; gap: 0.5rem; }
.tk-bezug-zeile > * { flex: 1; min-width: 0; }
.tk-bezug-treffer { display: flex; flex-direction: column; gap: 0.25rem; max-height: 220px; overflow-y: auto; }
.tk-bezug-treffer-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tk-bezug-treffer-item:hover { border-color: var(--color-primary); }

/* ---------- Zeitplan (Gantt) ---------- */
.tk-gantt { display: grid; grid-template-columns: 260px 1fr; gap: 0.4rem 0; position: relative; padding-bottom: 0.25rem; }
.tk-gantt::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(260px + (100% - 260px) * var(--today-pct, 0)); border-left: 2px dashed var(--color-error); pointer-events: none; }
.tk-gantt-label { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding-right: 0.75rem; font-size: 0.8rem; color: var(--color-text); text-decoration: none; }
.tk-gantt-label:hover .tk-gantt-title { color: var(--color-primary); }
.tk-gantt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-gantt-head { position: relative; height: 20px; font-size: 0.68rem; color: var(--color-text-light); }
.tk-gantt-week { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; }
.tk-gantt-track { position: relative; height: 22px; background: var(--color-bg); border-radius: 6px; }
.tk-gantt-bar { position: absolute; top: 3px; bottom: 3px; min-width: 1.5%; border-radius: 5px; }
.tk-gantt-bar--c1 { background: var(--color-primary); }
.tk-gantt-bar--c2 { background: var(--color-success); }
.tk-gantt-bar.done { opacity: 0.55; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, color-mix(in srgb, var(--color-surface) 50%, transparent) 4px, color-mix(in srgb, var(--color-surface) 50%, transparent) 8px); }
.tk-gantt-bar.overdue { outline: 2px solid var(--color-error); outline-offset: 1px; }

@media (max-width: 700px) {
    /* Schmal: Beschriftung nur Nummer, Achse nur jede dritte Woche — sonst ueberlagern sich die Daten */
    .tk-gantt { grid-template-columns: 6.5rem 1fr; }
    .tk-gantt::after { left: calc(6.5rem + (100% - 6.5rem) * var(--today-pct, 0)); }
    .tk-gantt-title { display: none; }
    .tk-gantt-week:not(:nth-child(3n+1)) { display: none; }
}

/* ---------- Woche (7 Tage ab heute) ---------- */
.tk-woche-wrap { overflow-x: auto; padding-bottom: 0.25rem; }
.tk-woche { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 0.6rem; }
.tk-woche-tag { display: flex; flex-direction: column; min-height: 160px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.tk-woche-tag--heute { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.tk-woche-kopf { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.tk-woche-tag--heute .tk-woche-kopf { background: var(--color-primary-light); }
.tk-woche-wtag { font-weight: 700; font-size: 0.85rem; }
.tk-woche-datum { flex: 1; font-size: 0.8rem; color: var(--color-text-muted); }
.tk-woche-tag--heute .tk-woche-datum { color: var(--color-primary); font-weight: 600; }
.tk-woche-body { display: flex; flex-direction: column; flex: 1; gap: 0.35rem; padding: 0.5rem; }
.tk-woche-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; padding: 0.35rem 0.45rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-text); font-size: 0.8rem; text-decoration: none; }
.tk-woche-ticket:hover { border-color: var(--color-primary); background: var(--color-surface); }
/* Titel unter Nummer und Prioritaet, bricht um statt abgeschnitten zu werden (7 schmale Spalten) */
.tk-woche-titel { flex-basis: 100%; min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.35; }
.tk-woche-prio { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-light); }
.tk-woche-prio--red { background: var(--color-error); }
.tk-woche-prio--yellow { background: var(--color-warning); }

/* ---------- Ampel als Punkt vor dem Titel (Tabellen; Spalte „Ampel" ist optional) ---------- */
.tk-ampel { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; border-radius: 50%; vertical-align: 0.1em; background: var(--color-text-light); }
.tk-ampel--rot { background: var(--color-error); }
.tk-ampel--gelb { background: var(--color-warning); }
.tk-ampel--gruen { background: var(--color-success); }

/* ---------- Board: Spalte „Erledigt" schmaler, damit fuenf Spalten bei 1440 px passen ---------- */
.tk-board .kb-col--done { flex: 0.8 1 0; min-width: 180px; }

/* ---------- Projekt-Filter im Kopf: nicht breiter als noetig (Audit Q10; Toolbar-Select-Variante fehlt im Core) ---------- */
#tk-projekt-filter { width: auto; max-width: 18rem; }

/* ---------- Liste: weitere Filter (Herkunft, Sichtbarkeit) hinter „Filter" ---------- */
.tk-filterzeile { display: flex; align-items: flex-start; gap: 0.5rem; }
.tk-filterzeile > .chips { flex: 1; min-width: 0; }
.tk-filter-panel { margin-bottom: 0.75rem; }
.tk-filter-panel .chips:last-child { margin-bottom: 0; }

/* ---------- Checkliste (views/_checkliste.php) ---------- */
.tk-checkliste li { align-items: center; }
.tk-check-haken { flex: 1; min-width: 0; }
.tk-check-haken .form-check { align-items: flex-start; cursor: pointer; }
.tk-check-haken input[type="checkbox"] { margin-top: 0.2rem; }
.tk-check--done .tk-check-text { color: var(--color-text-muted); text-decoration: line-through; }
.tk-check-neu { flex-wrap: nowrap; }
.tk-check-neu input[type="text"] { flex: 1; min-width: 0; }
.tk-board .kb-card .progress-head { font-size: 0.7rem; }
/* modul: content — modules/content/assets/content.css */
/* content.css — Sonderdarstellungen des Content-Moduls.
 *
 * Nur, was der Core nicht hat (docs/frontend.md → Komponenten): Seiten-Raster
 * mit Seitenspalte, Kanal-Logos, Sparklines, Score-Ring, Kalenderraster,
 * Diorama/Personal-Brand-Bühne. Tabellen, Karten, Kacheln, Popups, Buttons,
 * Badges, Leerzustände kommen aus dem Core. Farben nur über Theme-Tokens.
 * Seit Core 0.82 im Core-Bundle (manifest "styles") und damit auf jeder Seite
 * aktiv: Selektoren nur mit Modul-Präfix (content-, pb- Personal-Brand-Bühne).
 */

/* ---------- Seiten-Raster: Inhalt + Seitenspalte ---------- */
.content-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; }
.content-split--wide-side { grid-template-columns: minmax(0, 1fr) 360px; }
/* Spalten duerfen schmaler werden als ihr laengster Text (sonst sprengt eine
   einzeilige Liste die Seitenbreite, z. B. die Kalender-Seitenleiste). */
.content-split > * { min-width: 0; }
@media (max-width: 1000px) { .content-split, .content-split--wide-side { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kleinteile ---------- */
.content-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.content-logo { display: inline-flex; flex: none; vertical-align: middle; }
.content-logo svg { display: block; }
.content-spark { display: block; width: 100%; height: 30px; }
.content-spark polyline { fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.content-meter { height: 4px; border-radius: 999px; background: var(--color-surface-hover); overflow: hidden; }
.content-meter > span { display: block; height: 100%; width: var(--meter, 0%); background: var(--color-primary); border-radius: inherit; }
.content-score { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.content-score--good { color: var(--color-success); }
.content-score--mid { color: var(--color-warning); }
.content-score--low { color: var(--color-error); }
.content-score--none { color: var(--color-text-muted); }
.content-bars { display: flex; align-items: flex-end; gap: 0.25rem; height: 56px; }
.content-bars > span { flex: 1; height: var(--bar, 4px); border-radius: 2px 2px 0 0; background: var(--color-primary); opacity: 0.75; }
.content-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Abruf läuft: Spinner im Button (Abruf-Formulare, content.js) */
@keyframes content-spin { to { transform: rotate(360deg); } }
.content-spinner { display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: content-spin 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .content-spinner { animation: none; } }

/* ---------- Karten-Kopf mit Logo und Kennzahlen (Dashboard, Profil) ---------- */
.content-card-title { flex: 1; min-width: 0; }
.content-card-title h3 { margin: 0; }
.content-metrics { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin: 0.25rem 0 0.5rem; }
.content-metric-value { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* ---------- Personal-Brand-Bühne „Dein Raum" (.pb-*) ----------
 * Warme, vollflächige Bühne mit dem Diorama als Hintergrund und Karten in den
 * Ecken — bewusst eigene Palette (hell), im Dark-Mode abgedunkelt. */
.pb-hud {
    --pb-cream:   #f6efe6;
    --pb-card:    #fffdf9;
    --pb-ink:     #3b2f2a;
    --pb-muted:   #8c7d72;
    --pb-line:    #e7dccd;
    --pb-rose:    #d98b7d;
    --pb-rose-2:  #c26f60;
    --pb-gold:    #c99a4b;
    --pb-soft:    #f3e6dd;

    position: relative;
    box-sizing: border-box;
    min-height: calc(100vh - 3rem);
    padding: 1.75rem;
    border-radius: var(--radius);
    background: #ece2d8;
    color: var(--pb-ink);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.25rem;
    overflow: hidden;
}
@media (max-width: 768px) { .pb-hud { padding: 1.1rem; } }

/* Diorama als Hintergrund-Szene, mittig */
.pb-scene {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    display: flex; align-items: center;
    padding-left: 30px;
}
.pb-scene img {
    position: relative;
    object-fit: contain;
    width: 65vw;
}

/* Ecken-Zonen */
.pb-zone { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pb-zone--tl { grid-column: 1; grid-row: 1; align-self: start; flex-direction: row; align-items: center; gap: 1.75rem; }
.pb-head { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pb-zone--tr { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 360px; }
.pb-zone--bl { grid-column: 1; grid-row: 3; align-self: stretch; }
.pb-zone--br { grid-column: 2; grid-row: 3; align-self: stretch; width: 100%; }
/* Untere Zonen gleich hoch: Karten füllen ihre (gleich hohen) Zonen komplett. */
.pb-zone--bl .pb-card, .pb-zone--br .pb-card { height: 100%; }

/* Kopf oben links */
.pb-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pb-rose-2); margin: 0 0 0.15rem; }
.pb-title { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 800; line-height: 1.1; margin: 0; color: var(--pb-ink); }
.pb-subtitle { font-size: 0.86rem; color: var(--pb-muted); margin: 0.25rem 0 0; }

/* Level-Navigation (Simulation): Pfeile links/rechts vom Titel */
.pb-title-nav { display: flex; align-items: center; gap: 0.6rem; }
.pb-nav { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pb-card); border: 1px solid var(--pb-line); color: var(--pb-rose-2);
    box-shadow: 0 4px 12px rgba(120, 80, 40, 0.10); text-decoration: none; transition: transform 0.12s, background 0.12s; }
.pb-nav:hover { background: var(--pb-soft); transform: translateY(-1px); }
.pb-nav.is-off { opacity: 0.32; box-shadow: none; cursor: default; }
.pb-sim-note { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pb-rose-2); font-weight: 600; }
.pb-sim-note .icon { flex: none; }
.pb-sim-note a { color: var(--pb-rose-2); font-weight: 700; }

/* XP-Kreis */
.pb-xp { display: flex; align-items: center; gap: 1rem; flex: none; margin-top: 0;
    background: rgba(255, 253, 249, 0.82); border: 1px solid var(--pb-line); border-radius: 20px;
    padding: 0.6rem 1.1rem 0.6rem 0.7rem; box-shadow: 0 8px 22px rgba(120, 80, 40, 0.10);
    backdrop-filter: blur(3px); }
.pb-xp-ring { position: relative; width: 122px; height: 122px; flex: none; }
.pb-xp-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--pb-card); box-shadow: 0 6px 18px rgba(120, 80, 40, 0.12); }
.pb-xp-ring svg { position: relative; transform: rotate(-90deg); display: block; }
.pb-xp-track { fill: none; stroke: var(--pb-soft); stroke-width: 9; }
.pb-xp-fill  { fill: none; stroke: var(--pb-gold); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.pb-xp-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pb-xp-num { font-size: 1.45rem; font-weight: 800; line-height: 1; color: var(--pb-ink); }
.pb-xp-cap { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pb-muted); margin-top: 0.15rem; }
.pb-xp-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.pb-xp-frac { font-size: 1.05rem; font-weight: 800; color: var(--pb-ink); }
.pb-xp-frac b { color: var(--pb-rose-2); }
.pb-xp-meta strong { font-size: 0.9rem; font-weight: 700; color: var(--pb-rose-2); }
.pb-xp-meta span { font-size: 0.78rem; color: var(--pb-muted); }

/* Card-Basis */
.pb-card {
    background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 16px;
    padding: 1.05rem 1.15rem; box-shadow: 0 8px 26px rgba(120, 80, 40, 0.10);
    display: flex; flex-direction: column; gap: 0.5rem;
}
.pb-card h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pb-muted); margin: 0; }
.pb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pb-link { font-size: 0.78rem; font-weight: 700; color: var(--pb-rose-2); text-decoration: none; }
.pb-link:hover { text-decoration: underline; }
.pb-empty { font-size: 0.83rem; color: var(--pb-muted); margin: 0; }

/* Wochenfortschritt (oben rechts) */
.pb-week { flex-direction: row; align-items: center; gap: 0.9rem; }
.pb-week-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pb-week-body h3 { font-size: 0.92rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--pb-ink); }
.pb-week-body p { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--pb-rose-2); }
.pb-week-art { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--pb-soft); color: var(--pb-rose-2); display: flex; align-items: center; justify-content: center; }
.pb-bar { height: 9px; border-radius: 999px; background: var(--pb-soft); overflow: hidden; }
.pb-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pb-gold), var(--pb-rose)); }

/* Beitrag erstellen (rechts, unter Wochenfortschritt) */
.pb-cta { flex-direction: row; align-items: center; gap: 0.85rem; text-decoration: none; background: linear-gradient(135deg, var(--pb-rose) 0%, var(--pb-rose-2) 100%); border-color: transparent; color: #fff; }
.pb-cta-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.pb-cta-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pb-cta-title { font-weight: 800; font-size: 1rem; }
.pb-cta-sub { font-size: 0.78rem; color: rgba(255, 255, 255, 0.9); line-height: 1.35; }
.pb-cta > .icon { flex: none; opacity: 0.9; }
.pb-cta:hover { filter: brightness(1.04); }

/* Content-Ziele (rechts, unter „Beitrag erstellen") — manuell gepflegte Todo-Liste */
.pb-goals { gap: 0.55rem; }
.pb-goals-count { font-size: 0.82rem; font-weight: 600; color: var(--pb-muted); }
.pb-goals-count b { font-weight: 800; color: var(--pb-ink); }
.pb-goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pb-goal { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0; }
.pb-goal + .pb-goal { border-top: 1px solid var(--pb-line); }
.pb-goal-toggle, .pb-goal-del { margin: 0; display: flex; flex: none; }
.pb-goal-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pb-rose); background: transparent; color: var(--pb-rose-2); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pb-goal-check:hover { background: var(--pb-soft); }
.pb-goal.is-done .pb-goal-check { background: var(--pb-soft); border-color: var(--pb-rose-2); }
.pb-goal-text { flex: 1; font-size: 0.9rem; color: var(--pb-ink); min-width: 0; line-height: 1.3; }
.pb-goal.is-done .pb-goal-text { color: var(--pb-muted); text-decoration: line-through; }
.pb-goal-del { opacity: 0; transition: opacity 0.15s; }
.pb-goal:hover .pb-goal-del { opacity: 1; }
.pb-goal-x { border: none; background: transparent; color: var(--pb-muted); cursor: pointer; padding: 2px; display: flex; }
.pb-goal-x:hover { color: var(--pb-rose-2); }
.pb-goal-add { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.15rem; }
.pb-goal-input { flex: 1; min-width: 0; border: 1px solid var(--pb-line); border-radius: 10px; padding: 0.42rem 0.65rem; font-size: 0.85rem; font-family: inherit; background: #fff; color: var(--pb-ink); }
.pb-goal-input::placeholder { color: var(--pb-muted); }
.pb-goal-input:focus { outline: none; border-color: var(--pb-rose); }
.pb-goal-plus { flex: none; width: 32px; height: 32px; border-radius: 10px; border: none; background: var(--pb-soft); color: var(--pb-rose-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pb-goal-plus:hover { background: var(--pb-rose); color: #fff; }

/* Geplante Beiträge (unten links) */
.pb-plan-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
@media (max-width: 1180px) { .pb-plan-row { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
.pb-plan-item { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pb-plan-thumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--pb-soft); border: 1px solid var(--pb-line); display: flex; align-items: center; justify-content: center; color: var(--pb-muted); }
.pb-plan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-plan-head { font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: var(--pb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-plan-plat { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--pb-muted); }
.pb-plan-plat .icon { color: var(--pb-rose-2); flex: none; }

/* Raum-Upgrades (unten rechts) */
.pb-up-card h3 { font-size: 0.95rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--pb-ink); }
.pb-up-card h3 span { font-weight: 600; font-size: 0.85rem; color: var(--pb-muted); }
.pb-up-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin: 0.35rem 0 0.6rem; }
.pb-up { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.pb-up-circle { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pb-soft); color: var(--pb-muted); border: 1px solid var(--pb-line); }
.pb-up-cap { font-size: 0.72rem; font-weight: 600; color: var(--pb-muted); }
.pb-up--done .pb-up-circle { background: var(--pb-gold); color: #fff; border-color: transparent; }
.pb-up--done .pb-up-cap { color: var(--pb-ink); }
.pb-up--current .pb-up-circle { background: linear-gradient(135deg, var(--pb-rose), var(--pb-rose-2)); color: #fff; border-color: transparent; box-shadow: 0 0 0 3px rgba(217, 139, 125, 0.25); }
.pb-up--current .pb-up-cap { color: var(--pb-ink); }
.pb-up-note { font-size: 0.78rem; color: var(--pb-muted); margin: 0; }

/* Leerer Zustand (kein Level-Katalog) */
.pb-hud-setup { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; }
.pb-setup { max-width: 460px; color: var(--pb-muted); font-size: 0.9rem; line-height: 1.5; margin: 0.5rem 0 0; }
.pb-setup a { color: var(--pb-rose-2); font-weight: 600; }

/* Schmale Viewports: Ecken zu einer Spalte, Szene inline */
@media (max-width: 900px) {
    .pb-hud { grid-template-columns: 1fr; grid-template-rows: none; height: auto; min-height: 100vh; overflow: visible; }
    .pb-zone { max-width: none; width: auto; justify-self: stretch; align-self: stretch; grid-column: 1; grid-row: auto; }
    .pb-zone--tl { order: 1; } .pb-scene { position: relative; inset: auto; order: 2; padding: 0.5rem 0; }
    .pb-zone--tr { order: 3; } .pb-zone--bl { order: 4; } .pb-zone--br { order: 5; }
    .pb-scene img { max-width: 78%; max-height: 320px; }
}


:root[data-theme="dark"] .pb-hud { --pb-cream: #2a241f; --pb-card: #2f2823; --pb-ink: #f3e9df; --pb-muted: #b8a89b; --pb-line: #4a3f36; --pb-soft: #3a3029; background: #221d19; }
:root[data-theme="dark"] .pb-goal-input { background: var(--pb-card); }

/* ---------- Präsenz-Analyse: Score | Zusammenfassung | Verlauf ---------- */
.content-analysis-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.content-analysis-score { min-width: 130px; text-align: center; }
.content-analysis-summary { flex: 1 1 280px; min-width: 0; }
.content-analysis-series { min-width: 180px; }

/* ---------- Profil: Feldliste (Label über Wert) ---------- */
.content-fieldlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.content-field { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.content-field--wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .content-fieldlist { grid-template-columns: minmax(0, 1fr); } }
.content-channel-link { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.content-channel-link:hover .cell-main { color: var(--color-primary); }
/* Einzeilig mit Auslassung — Titel und Adressen in schmalen Listen (Kalender-
   Seitenleiste, Profil-Kanäle). min-width:0 erst macht das Kürzen im Flex möglich. */
.content-ellipsis { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Social-Kanal im Plattform-Look (Profilkopf, Feed) ---------- */
.content-social { max-width: 760px; }
.content-social-profile { padding: 0; overflow: hidden; }
.content-social-banner { height: 120px; background: var(--banner, linear-gradient(120deg, var(--color-primary-light), var(--color-surface-hover))) center / cover no-repeat; }
.content-social-body { padding: 0 1.25rem 1.1rem; }
.content-social-avatar { display: inline-flex; width: 76px; height: 76px; margin-top: -38px; margin-bottom: 0.5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-surface); background: var(--color-surface); }
.content-social-avatar--initials { align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: var(--color-text-muted); background: var(--color-surface-hover); }
.content-post p { margin: 0.25rem 0 0; font-size: 0.9rem; }
.content-post-images { display: grid; gap: 2px; margin-top: 0.7rem; border-radius: var(--radius); overflow: hidden; }
.content-post-images--2 { grid-template-columns: 1fr 1fr; }
.content-post-images img { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }

/* ---------- Redaktionsplan: Slots als Ablageziele ---------- */
.content-plan-card { cursor: grab; }
.content-plan-card.is-dragging { opacity: 0.5; }
.content-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.content-slot { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.content-slot.is-drop-target { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.content-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- Umschreiben: Runden, Wort-Diff, Prompt-Anzeige ---------- */
.content-round { margin-top: 0.7rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.content-diff ins { background: var(--color-success-light); color: inherit; text-decoration: none; border-radius: 3px; padding: 0 0.1em; }
.content-diff del { background: var(--color-error-light); color: var(--color-text-muted); text-decoration: line-through; border-radius: 3px; padding: 0 0.1em; }
.content-code { margin: 0; padding: 0.7rem 0.8rem; max-height: 340px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }

/* ---------- Gesprächsverlauf (Themenansicht) ---------- */
.content-chat { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.content-chat-turn { align-self: flex-start; max-width: 88%; padding: 0.55rem 0.75rem; font-size: 0.86rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px 10px 10px 2px; }
.content-chat-turn--user { align-self: flex-end; background: var(--color-primary-light); border-color: transparent; border-radius: 10px 10px 2px 10px; }
.content-chat-role { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.2rem; }

/* ---------- Kalender: Monats- und Wochenraster ---------- */
.content-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.content-cal-title { min-width: 12rem; text-align: center; }
.content-cal-weekday { padding: 0.25rem 0.5rem; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.content-cal-day { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; min-height: 104px; padding: 0.35rem 0.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.content-cal--week .content-cal-day { min-height: 420px; }
.content-cal-day.is-today { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.content-cal-day.is-outside { opacity: 0.5; }
.content-cal-dayhead { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.content-cal-day.is-today .content-cal-dayhead { color: var(--color-primary); }
.content-cal-add { display: inline-flex; padding: 2px; border-radius: 4px; color: var(--color-text-muted); opacity: 0; }
.content-cal-day:hover .content-cal-add, .content-cal-add:focus-visible { opacity: 1; }
.content-cal-add:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.content-cal-event { display: block; min-width: 0; padding: 0.25rem 0.4rem; color: inherit; text-decoration: none; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.content-cal-event:hover { border-color: var(--color-primary); text-decoration: none; }
.content-cal-eventhead { display: flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; color: var(--color-text-muted); }
.content-cal-eventtitle { display: block; margin-top: 0.15rem; font-size: 0.7rem; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-cal--week .content-cal-eventtitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.content-cal-event img { display: block; width: 100%; height: 64px; margin-top: 0.35rem; object-fit: cover; border-radius: 4px; }
.content-cal-slot { display: flex; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.2rem 0.4rem; font-size: 0.65rem; font-style: italic; color: var(--color-text-muted); text-decoration: none; border: 1px dashed var(--color-border); border-radius: var(--radius); }
.content-cal-slot:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
@media (max-width: 700px) { .content-cal { grid-template-columns: 1fr; } .content-cal-weekday { display: none; } .content-cal-day { min-height: 0; } }
.content-plan-image { padding: 0; overflow: hidden; }
.content-plan-image img { display: block; width: 100%; }

/* ---------- Performance ---------- */
.content-tone--good { color: var(--color-success); }
.content-tone--mid { color: var(--color-warning); }
.content-tone--weak { color: var(--color-error); }
.content-perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.content-perf-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.content-perf-media { position: relative; aspect-ratio: 16 / 10; background: var(--tile-bg, var(--color-bg)); }
.content-perf-badge { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.content-perf-body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.75rem; }
.content-perf-body .content-clamp-3 { flex: 1; }
.content-perf-figures { padding-top: 0.4rem; font-size: 0.75rem; border-top: 1px solid var(--color-border); }
.content-perf-row { margin-bottom: 0.45rem; }
.content-perf-rowhead { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.15rem; }

/* ---------- Diorama: isometrischer Raum (Umrechnung in views/diorama.php) ---------- */
.content-di-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.content-di-card { padding: 1rem; }
.content-di-scroll { overflow-x: auto; }
.content-di-board { position: relative; width: var(--di-w); height: var(--di-h); margin: 0 auto; user-select: none; touch-action: none; background: linear-gradient(180deg, #f7f3ec 0%, #efe8dd 100%); border-radius: 12px; }
.content-di-floor { position: absolute; inset: 0; }
.content-di-wall-l { fill: #e6ded1; }
.content-di-wall-r { fill: #dcd2c3; }
.content-di-ground { fill: #cbb79b; }
.content-di-line { stroke: #b8a184; stroke-width: 1; }
.content-di-item { position: absolute; left: var(--di-left); top: var(--di-top); width: var(--di-size); height: var(--di-size); cursor: grab; }
.content-di-item svg { display: block; width: 100%; height: 100%; overflow: visible; }
.content-di-item.is-mirrored svg { transform: scaleX(-1); }
.content-di-item.is-dragging { cursor: grabbing; opacity: .85; z-index: 900; }
.content-di-item.is-selected::after { content: ''; position: absolute; inset: -4px; border: 2px dashed var(--color-text-muted); border-radius: 8px; pointer-events: none; }
.content-di-tools { justify-content: center; margin-top: 0.75rem; }
.content-di-store { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.content-di-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; font-size: 0.85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); cursor: grab; touch-action: none; }
.content-di-chip svg { width: 34px; height: 34px; overflow: visible; }
:root[data-theme="dark"] .content-di-board { background: linear-gradient(180deg, #2b2722 0%, #221f1b 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .content-di-board { background: linear-gradient(180deg, #2b2722 0%, #221f1b 100%); } }

/* ---------- Einstellungen ---------- */
.content-pre--scroll { max-height: 26rem; overflow: auto; padding: 0.6rem 0.75rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.content-cap { margin: 0.75rem 0 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-muted); }
.content-preview-call { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.content-form-image { display: block; max-width: 240px; margin-bottom: 0.5rem; border-radius: var(--radius); }
.content-input-narrow { max-width: 8rem; }
/* modul: crm — modules/crm/assets/crm.css */
/* ============================================================
 * crm.css — nur fachliche Darstellung des Moduls crm. Liegt im CSS-Bundle
 * (manifest.json "styles") und gilt damit auf jeder Seite: Selektoren nur mit
 * crm-eigenen Klassen (crm-, tl-, wv-, [data-crm-pipeline]).
 * Alle Bausteine (Kopf, Karten, Tabellen, Chips, Badges, Zaehler, kv, stat,
 * row-list, leerer Zustand) kommen aus dem Core (docs/frontend.md → Komponenten).
 * Genutzt von: Kontakt-Detail, Kunden-HQ (Timeline), Akte (Aktivitaeten),
 * Leads (Legende), Wiedervorlagen (Board-Zeile).
 * ============================================================ */

/* Timeline (Kommunikationshistorie inkl. Meetings) — crm/_tl-item */
.crm-timeline { display: flex; flex-direction: column; gap: 1rem; }
.tl-item { display: flex; gap: 0.75rem; }
.tl-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--color-surface-hover); color: var(--color-text-muted); }
.tl-icon--meeting { background: var(--color-primary-light); color: var(--color-primary); }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 0.9rem; font-weight: 600; }
.tl-meta { margin-top: 0.1rem; font-size: 0.78rem; color: var(--color-text-light); }
.tl-text { margin-top: 0.35rem; font-size: 0.85rem; color: var(--color-text-muted); }
.tl-meeting { margin-top: 0.5rem; }
.tl-full { margin-top: 0.35rem; }
.tl-full summary { cursor: pointer; font-size: 0.78rem; color: var(--color-primary); }

/* Wiedervorlagen-Board: Zeile in .row-list (crm/_wv-item) mit fester Faelligkeits-Spalte */
.wv-item--done { opacity: 0.6; }
.wv-body { flex: 1; }
.wv-status { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex-shrink: 0; width: 150px; text-align: center; }
@media (max-width: 700px) {
    .row-list > li.wv-item { flex-wrap: wrap; }
    .wv-status { width: auto; align-items: flex-start; }
    .wv-actions { width: 100%; justify-content: flex-end; }
}

/* Leads: Legende neben dem Pipeline-Donut (Farbe je Stufe dynamisch per style) */
.crm-donut { align-items: center; }
.crm-legend-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; border-radius: 2px; }

/* Lead-Pipeline (Core-Kanban, crm/_pipeline): Summe erwarteter Werte als zweite Zeile im Spaltenkopf */
[data-crm-pipeline] .kb-col-head { flex-wrap: wrap; row-gap: 0.1rem; }
.crm-pipeline-summe { flex-basis: 100%; font-weight: 400; }

/* Ansichtszeile der Wiedervorlagen: Board | Liste und Offen | Erledigt in einer Zeile, Gruppen etwas abgesetzt */
.crm-ansichtzeile { column-gap: 1.25rem; }
.crm-leiste-chips > .chips { margin-bottom: 0; }
/* modul: entwicklung — modules/entwicklung/assets/roadmap.css */
/* Modul entwicklung — fachliche Reste fuer Roadmap-Baum und Handbuch-Buch-Layout.
   Kacheln, Fortschritt, Tabellen, Kopf, Suche, Markdown, Hinweise kommen aus dem
   Core. Keine farbige Linie links; Verschachtelung nur ueber Einrueckung.
   Nur Theme-Variablen; liegt im CSS-Bundle (manifest.json "styles"), daher nur entw-Klassen. */

/* ---------- Roadmap: Unterbereiche eingerueckt ---------- */
.entw-unterbereiche { margin: 1.25rem 0 0 1.5rem; }

/* ---------- Roadmap: Titel als Knopf, der umbricht (Audit EN1) ----------
   .btn bricht nie um — lange Titel liefen über Stufe/Modul. Hier ein schlichter Text-Knopf,
   bündig mit der Route darunter, Farbe wie interne Links (schwarz, ohne Unterstreichung). */
.entw-titel {
    display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
    color: var(--color-text); text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.entw-titel:hover { text-decoration: underline; }
.entw-titel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }

/* ---------- Handbuch: Buch-Layout (Inhaltsverzeichnis + Kapitel) ---------- */
.entw-buch { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.entw-toc { position: sticky; top: 1rem; font-size: 0.85rem; }
@media (max-width: 900px) { .entw-buch { grid-template-columns: minmax(0, 1fr); } .entw-toc { position: static; } }
.entw-toc-liste, .entw-toc-liste ol { list-style: none; margin: 0; padding: 0; }
.entw-toc-liste ol { margin: 0.2rem 0 0.4rem 1.25rem; }
.entw-toc-liste li { margin: 0.15rem 0; }
/* Farbe, Hover und Unterstreichung der Links: Core (0.75, interne Links ruhig) */
.entw-toc-liste a { display: flex; align-items: baseline; gap: 0.4rem; }

.entw-kapitel { scroll-margin-top: 1rem; }
.entw-kapitel .entw-kapitel { margin: 1rem 0 0 1.5rem; }
.entw-kapitel-titel { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.25rem; font-size: 1.05rem; }
h3.entw-kapitel-titel { font-size: 0.95rem; }
.entw-eintrag { padding: 0.75rem 0; border-top: 1px solid var(--color-border-light); }
.entw-eintrag-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 1rem; }
/* lange Titel ohne Leerzeichen (a/b/c/d) brechen um statt die Seite quer scrollen zu lassen */
.entw-eintrag-titel > a { min-width: 0; overflow-wrap: anywhere; }
/* modul: entwicklung — modules/entwicklung/assets/bugs.css */
/*
 * bugs.css — fachliche Darstellung des Bug-Modus (Markier-Overlay, Screenshot
 * mit Markierung) fuer bug-mode.js und die Bug-Detailseite. Liegt im CSS-Bundle
 * (manifest.json "styles"), gilt also auf jeder Seite — nur hbm-/bug-Klassen. Alles andere (Kopf, Hinweise, kv, Verlauf, leere Zustaende)
 * kommt aus dem Core. Farben ausschliesslich ueber Tokens.
 */

/* ===== Bug-Modus: Overlay (Bereich ziehen / Element anklicken) ===== */
.hbm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: color-mix(in srgb, var(--color-bg) 55%, transparent);
    cursor: crosshair;
    user-select: none;
    touch-action: none;
}
.hbm-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-error);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    cursor: default;
}
.hbm-bar kbd {
    padding: 0 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg);
    font-family: inherit;
    font-size: 0.8em;
}
.hbm-rect,
.hbm-hover {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}
.hbm-rect { border: 2px solid var(--color-error); background: var(--color-error-light); opacity: 0.55; }
.hbm-hover { border: 2px dashed var(--color-error); }
.hbm-busy {
    position: fixed;
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
}

/* ===== Vorschau mit Markierung im Melde-Popup =====
   Die Bug-Detailseite hat seit Core 0.78.0 KEINE eigenen Bild-Regeln mehr: das
   Seitenbild ist dort das Hauptbild des Core-Partials partials/attachments
   (.attachment-lead + .attachment-mark, docs/storage.md). Hier bleibt nur die
   Vorschau im Melde-Popup, die es vor dem Anlegen des Tickets noch nicht als
   Anhang geben kann. */
.hbm-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 320px;
    margin-bottom: 0.5rem;
    line-height: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
}
/* Zusatz-Aktion „echter Bildschirm-Screenshot" unter der Vorschau (Opt-in, der
   Browser fragt erst dann nach Freigabe) */
.hbm-bild-aktionen { margin-bottom: 1rem; }
.hbm-preview-img { display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; }
.hbm-preview-rect {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--color-error);
    box-shadow: 0 0 0 2px var(--color-error-light);
    pointer-events: none;
}

/* Freitext (Beschreibung, Kommentare) mit Zeilenumbruechen */
.bug-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* modul: finanzen — modules/finanzen/assets/finanzen.css */
/* finanzen.css — nur Fachliches: das Belegdokument (Angebot/Rechnung) als
   Papier-Ansicht inkl. Druck. Alles andere (Tabellen, Karten, Badges, Kennzahlen)
   kommt aus dem Core. Farben ausschliesslich ueber Tokens; das Papier bleibt im
   Dark-Mode bewusst hell (Druckvorschau). Liegt im CSS-Bundle (manifest.json
   "styles") und gilt auf jeder Seite — nur fin-Klassen. */

.fin-doc {
    background: #fff;
    color: #1b1f2a;
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 10px);
    padding: 2.5rem 2.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 52rem;
}
.fin-doc-kopf { display: flex; justify-content: space-between; gap: 2rem; }
.fin-doc-absender { text-align: right; color: #5b6170; font-size: 0.8rem; }
.fin-doc-marke { font-size: 1.15rem; font-weight: 700; }
.fin-doc-adresse { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; }
.fin-doc-empfaenger { white-space: pre-line; min-height: 5rem; }
.fin-doc-absenderzeile { font-size: 0.7rem; color: #5b6170; border-bottom: 1px solid #d7dae0; margin-bottom: 0.35rem; padding-bottom: 0.15rem; }
.fin-doc-titel { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.25rem; }
.fin-doc-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 1.25rem; padding: 0.75rem 0; border-top: 1px solid #d7dae0; border-bottom: 1px solid #d7dae0; }
.fin-doc-meta span { display: block; font-size: 0.7rem; color: #5b6170; text-transform: uppercase; letter-spacing: 0.03em; }
.fin-doc-betreff { font-weight: 600; margin-bottom: 0.75rem; }
.fin-doc-leistung { margin: -0.5rem 0 0.75rem; color: #5b6170; }
.fin-doc-tabelle { width: 100%; border-collapse: collapse; margin: 1rem 0; }
/* Scroll-Rahmen der Positionen bleibt Papier: im Dark-Mode faerbte die Core-Flaeche
   (.list-table-wrap) die Tabelle schwarz, der dunkle Text war unlesbar (Review 2026-09-28) */
.fin-doc .list-table-wrap { background: transparent; }
.fin-doc-tabelle th { text-align: left; font-size: 0.72rem; color: #5b6170; text-transform: uppercase; border-bottom: 1px solid #1b1f2a; padding: 0.4rem 0.25rem; }
.fin-doc-tabelle td { padding: 0.45rem 0.25rem; border-bottom: 1px solid #eceef2; vertical-align: top; }
.fin-doc-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-doc-summen { margin-left: auto; width: 18rem; }
.fin-doc-summen div { display: flex; justify-content: space-between; padding: 0.2rem 0; font-variant-numeric: tabular-nums; }
.fin-doc-summen .fin-doc-gesamt { border-top: 1px solid #1b1f2a; font-weight: 700; margin-top: 0.25rem; padding-top: 0.4rem; }
.fin-doc-fuss { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2.5rem; padding-top: 0.75rem; border-top: 1px solid #d7dae0; font-size: 0.75rem; color: #5b6170; }
.fin-doc-hinweis { margin-top: 1.25rem; }
.fin-doc-wasserzeichen { color: #b8471c; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }

@media (max-width: 700px) {
    .fin-doc { padding: 1.25rem; }
    .fin-doc-kopf, .fin-doc-adresse, .fin-doc-fuss { flex-direction: column; }
    .fin-doc-absender { text-align: left; }
    .fin-doc-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-doc-summen { width: 100%; }
}

/* Druck: nur das Belegdokument. Liegt im CSS-Bundle (jede Seite) — deshalb an das
   Dokument gebunden (:has), sonst druckte jede andere Seite leer. :where() haelt die
   Spezifitaet bei 0, damit .fin-doc * wieder sichtbar schaltet. */
@media print {
    :where(body:has(.fin-doc)) * { visibility: hidden; }
    /* Zweige ohne Dokument ganz ausblenden: nur unsichtbar hielten sie ihre Hoehe und
       druckten leere Folgeseiten (Review 2026-09-28); grauer Seitenhintergrund weiss. */
    :where(body:has(.fin-doc)) :where(:not(.fin-doc, .fin-doc *, :has(.fin-doc))) { display: none; }
    :where(html:has(.fin-doc), body:has(.fin-doc)) { background: #fff; }
    .fin-doc, .fin-doc * { visibility: visible; }
    .fin-doc { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; padding: 0; }
}
/* modul: fuehrung — modules/fuehrung/assets/fuehrung.css */
/* Modul fuehrung — nur Fachliches: die Schrittleiste des Wochenreviews und
   die Diff-Ansicht zwischen Versionen des Strategie-Dokuments.
   Alles andere (Kopf, Kacheln, Tabellen, Popups, Fortschritt, Status) sind
   Core-Komponenten (docs/frontend.md). Nur Theme-Variablen, Klassenpräfix fu-;
   liegt im CSS-Bundle (manifest.json "styles") und gilt auf jeder Seite. */

/* ---------- Wochenreview: Schrittleiste ---------- */
.fu-schritte {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem;
}
.fu-schritt {
    display: flex; align-items: center; gap: 0.4rem; min-width: 0; height: 100%;
    padding: 0.5rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text-muted); text-decoration: none; font-size: 0.82rem;
}
.fu-schritt:hover { border-color: var(--color-primary); color: var(--color-text); text-decoration: none; }
.fu-schritt-nr {
    flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    background: var(--color-surface-hover); color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.fu-schritt-titel { min-width: 0; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; }
.fu-schritt--erledigt .fu-schritt-nr { background: var(--color-success); color: #fff; }
.fu-schritt--aktiv { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-text); font-weight: 600; }
.fu-schritt--aktiv .fu-schritt-nr { background: var(--color-primary); color: #fff; }

@media (max-width: 1100px) {
    .fu-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .fu-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Wochenreview: Aktion + Notiz + Festhalten in einer Zeile ---------- */
.fu-review-aktion { flex-wrap: nowrap; scroll-margin-top: 6rem; }
.fu-review-aktion select { flex: 0 1 12.5rem; min-width: 8rem; }
.fu-review-aktion input[name="notiz"] { flex: 1 1 6rem; min-width: 0; max-width: none; }
.fu-review-aktion .btn { flex: none; }

/* ---------- Strategie-Dokument: Diff zwischen Versionen (keine Linie links) ---------- */
.fu-diff { overflow-x: auto; border-radius: var(--radius-sm, 6px); }
.fu-diff-zeile { display: flex; gap: 0.5rem; padding: 0.05rem 0.5rem; white-space: pre-wrap; word-break: break-word; }
.fu-diff-marke { flex: 0 0 1ch; color: var(--color-text-muted); user-select: none; }
.fu-diff-zeile--neu { background: var(--badge-green-bg); color: var(--badge-green-fg); }
.fu-diff-zeile--weg {
    background: var(--badge-red-bg); color: var(--badge-red-fg);
    text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.fu-diff-zeile--neu .fu-diff-marke,
.fu-diff-zeile--weg .fu-diff-marke { color: inherit; }
/* modul: marketing — modules/marketing/assets/marketing.css */
/*
 * marketing.css — nur Fachliches des Moduls marketing (Core-Bausteine kommen
 * aus components.css): Diff-Ansicht zwischen Framework-Versionen und die
 * Druckfassung des Masterframeworks. Nur var(--…)-Tokens, Präfix mk-.
 * Liegt im CSS-Bundle (manifest.json "styles") und gilt auf jeder Seite.
 */

/* Diff: Zeilen mit Hintergrund-Tönung, Marke +/− vorn (keine Linie links) */
.mk-diff {
    overflow-x: auto;
    border-radius: var(--radius-sm, 6px);
}
.mk-diff-zeile {
    display: flex;
    gap: 0.5rem;
    padding: 0.05rem 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.mk-diff-marke {
    flex: 0 0 1ch;
    color: var(--color-text-muted);
    user-select: none;
}
.mk-diff-zeile--neu {
    background: var(--badge-green-bg);
    color: var(--badge-green-fg);
}
.mk-diff-zeile--weg {
    background: var(--badge-red-bg);
    color: var(--badge-red-fg);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.mk-diff-zeile--neu .mk-diff-marke,
.mk-diff-zeile--weg .mk-diff-marke {
    color: inherit;
}

/* Druckfassung: nur Inhalt, keine Navigation/Aktionen, Abschnitte nicht zerreißen.
   App-Rahmen nur auf der Druckseite ausblenden (:has) — das Bundle gilt überall. */
@media print {
    body:has(.mk-druck) .app-sidebar,
    body:has(.mk-druck) .flash-toast-container,
    body:has(.mk-druck) .ct-jobs-tray,
    .mk-druck .page-actions,
    .mk-druck .back-link {
        display: none !important;
    }
    body[data-layout="sidebar"]:has(.mk-druck) .main {
        margin-left: 0 !important;
        width: auto !important;
    }
    .mk-druck .card {
        box-shadow: none;
        border: 0;
        padding: 0;
    }
    .mk-druck-abschnitt {
        break-inside: avoid-page;
    }
    .mk-druck .markdown {
        color: #000;
    }
}
/* modul: personal — modules/personal/assets/personal-druck.css */
/*
 * Modul personal — Druckansicht Monatsbericht Arbeitszeit.
 * Nur Druck: Bildschirm-Darstellung kommt komplett aus den Core-Bausteinen.
 * Gedruckt wird ausschließlich das Dokument (.personal-druck); App-Rahmen, Kopf-Aktionen
 * und Toasts verschwinden.
 * Liegt im CSS-Bundle (manifest.json "styles") und gilt damit auf JEDER Seite:
 * alle Regeln hängen an .personal-druck bzw. body:has(.personal-druck), sonst druckte jede
 * andere Seite leer. :where() hält die Spezifität des Ausblendens bei 0, damit
 * .personal-druck * wieder sichtbar schaltet.
 */
@media print {
    :where(body:has(.personal-druck)) * { visibility: hidden; }
    .personal-druck, .personal-druck * { visibility: visible; }
    .personal-druck {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }
    .personal-druck a { color: #000; text-decoration: none; }
    .personal-druck .badge,
    .personal-druck .tag,
    .personal-druck .code { border: 1px solid #999; background: none; color: #000; }
    .personal-druck .alert { border: 1px solid #999; background: none; color: #000; }
    .personal-druck .list-table-wrap { overflow: visible; }
    .personal-druck table { width: 100%; border-collapse: collapse; }
    .personal-druck th,
    .personal-druck td { border: 1px solid #bbb; padding: 4pt 6pt; vertical-align: top; text-align: left; }
    .personal-druck th[scope="row"] { width: 32%; font-weight: 600; }
    .personal-druck .druck-abschnitt { break-inside: avoid; page-break-inside: avoid; margin-top: 12pt; }
    .personal-druck .section-title { margin: 14pt 0 6pt; font-size: 12pt; }
    body:has(.personal-druck) .druck-ausblenden { display: none !important; }

    /* Druckränder nur für diese Ansicht: benannte Seite statt globalem @page */
    body:has(.personal-druck) { page: personal-druck; }
}
@page personal-druck { /* ui:ok benannte Seite, gilt nur, wo body:has(.personal-druck) page: personal-druck setzt */ margin: 16mm 14mm; }
/* modul: projekte — modules/projekte/assets/projekte.css */
/* ============================================================
 * projekte.css — nur fachliche Darstellung des Moduls projekte. Liegt im
 * CSS-Bundle (manifest.json "styles") und gilt auf jeder Seite — nur projekt-
 * und galerie-Klassen (galerie-* nur im Galerie-Editor von projekte). Kopf, Karten,
 * Tabellen, Chips, Badges, Zaehler, kv, row-list, Suche, leerer Zustand und
 * Markdown kommen aus dem Core (docs/frontend.md → Komponenten); crm.css wird
 * nicht mehr mitgeladen; Kacheln der Uebersicht sind Core partials/tile. Uebrig:
 * Kachelbild-Ausschnitt, eingeklappte Status-Abschnitte, Spaltenbreiten der
 * Leistungen, Doku-Navigator, Bilder-Kachel im Detail und Galerie-Editor.
 * ============================================================ */

/* Eingeklappte Status-Abschnitte (details > summary.section-title) */
.projekt-sektion--details > summary { cursor: pointer; list-style: none; user-select: none; }
.projekt-sektion--details > summary::-webkit-details-marker { display: none; }
.projekt-sektion--details > summary::before { content: '▸'; margin-right: 0.3rem; font-size: 0.75rem; color: var(--color-text-muted); }
.projekt-sektion--details[open] > summary::before { content: '▾'; }

/* Doku: schmaler Datei-Navigator links */
.projekt-doku-split { grid-template-columns: 260px minmax(0, 1fr); }
.projekt-doc-file { display: flex; align-items: flex-start; gap: 10px; padding: 0.5rem 0.6rem; border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; }
.projekt-doc-file:hover { background: var(--color-surface-hover); text-decoration: none; }
.projekt-doc-file svg { flex-shrink: 0; margin-top: 2px; }
.projekt-doc-file--active { background: var(--color-primary-light); color: var(--color-primary); }
.projekt-doc-file--active .cell-main { color: var(--color-primary); }
@media (max-width: 900px) { .projekt-doku-split { grid-template-columns: 1fr; } }

/* Bilder-Kachel im Detail (oeffnet die Galerie) */
.projekt-bilder-kachel { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--color-bg); cursor: pointer; }
.projekt-bilder-kachel img { display: block; width: 100%; height: 150px; object-fit: cover; }
.projekt-bilder-kachel--leer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-height: 110px; font-size: 0.85rem; color: var(--color-text-muted); }
.projekt-bilder-count, .projekt-bilder-hint { position: absolute; right: 8px; display: inline-flex; align-items: center; gap: 0.25rem; padding: 2px 8px; border-radius: 999px; background: var(--color-text); color: var(--color-surface); font-size: 0.72rem; font-weight: 600; }
.projekt-bilder-count { top: 8px; }
.projekt-bilder-hint { bottom: 8px; }
.projekt-bilder-kachel:hover .projekt-bilder-hint { background: var(--color-primary); }

/* Galerie-Editor (Popup): Viewer mit Navigation, Crop-Stage im 16:9-Format des Kachelkopfs, Streifen */
.galerie-editor { display: flex; flex-direction: column; gap: 0.75rem; }
.galerie-viewer { position: relative; display: flex; align-items: center; }
.galerie-stage { position: relative; width: min(100%, 604px); margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--color-bg); }
.galerie-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.galerie-stage--crop { cursor: grab; }
.galerie-stage--crop:active { cursor: grabbing; }
.galerie-nav { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--color-surface); color: var(--color-text); font-size: 1.6rem; line-height: 1; opacity: 0.8; cursor: pointer; transform: translateY(-50%); }
.galerie-nav:hover { opacity: 1; }
.galerie-prev { left: 8px; }
.galerie-next { right: 8px; }
.galerie-ctrl { display: flex; align-items: center; gap: 0.6rem; }
.galerie-iskachel { font-size: 0.78rem; font-weight: 600; color: var(--color-primary); }
.galerie-strip { display: flex; gap: 0.5rem; padding-bottom: 0.25rem; overflow-x: auto; }
.galerie-thumb { position: relative; flex: 0 0 auto; width: 92px; height: 62px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: var(--color-bg); cursor: pointer; }
.galerie-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galerie-thumb.is-active { border-color: var(--color-primary); }
.galerie-thumb-star { position: absolute; top: 3px; left: 4px; display: none; font-size: 0.85rem; color: var(--color-favorite); }
.galerie-thumb.is-kachel .galerie-thumb-star { display: block; }

/* Chip-Zeile der Uebersicht: Art, Meine/Archiv und (Liste) Sichtbarkeit nebeneinander, Gruppen abgesetzt */
.projekt-chipzeile { column-gap: 1.25rem; }
.projekt-chipzeile > .chips { margin-bottom: 0; }

/* Ressourcenplanung: Wochenraster enger, damit 8 Wochen bei 1440 px in die Karte passen */
.projekt-raster :is(th, td) { padding-left: 0.4rem; padding-right: 0.4rem; }
.projekt-raster :is(th, td):first-child { padding-left: 1rem; }
.projekt-raster td .btn--sm { padding-left: 0.2rem; padding-right: 0.2rem; }
/* modul: termine — modules/termine/assets/termine.css */
/*
 * Modul termine — nur Fachliches: das Kalenderraster (Monat 6 x 7, Woche/Tag
 * als Zeitraster mit Stunden-Slots und Termin-Blöcken). Kopf, Chips, Buttons,
 * Karten, Listen, Badges kommen aus dem Core (docs/frontend.md → Komponenten).
 * Nur Tokens; Termin-Farben über die Core-Badge-Modifier (badge--<farbe>).
 * Liegt im CSS-Bundle (manifest.json "styles") und gilt auf jeder Seite — nur tm-Klassen.
 */

/* ---------- Monat ---------- */
.tm-monat { padding: 0; overflow: hidden; }
.tm-monat-kopf,
.tm-monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tm-monat-kopf > div {
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.tm-tag {
    position: relative;
    min-height: 7.25rem;
    padding: 0.35rem 0.4rem 0.45rem;
    border-right: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}
.tm-tag:nth-child(7n) { border-right: 0; }
.tm-tag:nth-last-child(-n + 7) { border-bottom: 0; }
.tm-tag--fremd { background: var(--color-bg); }
.tm-tag--fremd .tm-tag-nr { color: var(--color-text-muted); }

/* Freier Slot: die ganze Zelle ist der Link „Neuer Termin", Inhalte liegen darüber. */
.tm-slot,
.tm-slot-stunde { display: block; color: inherit; text-decoration: none; }
.tm-slot { position: absolute; inset: 0; z-index: 0; }
.tm-slot:hover,
.tm-slot-stunde:hover { background: var(--color-primary-light); }
.tm-slot:focus-visible,
.tm-slot-stunde:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.tm-tag-nr {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.tm-tag-nr:hover { background: var(--color-surface-hover); text-decoration: none; }
.tm-tag--heute .tm-tag-nr { background: var(--color-primary); color: #fff; }

.tm-eintraege {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    pointer-events: none; /* Lücken zwischen Einträgen bleiben Slot-Klickfläche */
}
.tm-eintraege > li { min-width: 0; }
.tm-eintraege a,
.tm-eintraege .tm-eintrag { pointer-events: auto; }

/* ---------- Eintrag (Monat, Ganztags-Zeile) ---------- */
.tm-eintrag {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.1rem 0.4rem;
    border-radius: 5px;
    font-size: 0.74rem;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
a.tm-eintrag:hover { text-decoration: none; filter: brightness(0.96); }
.tm-eintrag-zeit { flex: none; font-weight: 600; }
.tm-eintrag-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Mehrtaegig (Monat): Endtag rechts, Titel kuerzt davor */
.tm-eintrag-bis { flex: none; margin-left: auto; font-size: 0.68rem; opacity: 0.8; }
.tm-mehr { pointer-events: auto; font-size: 0.72rem; color: var(--color-text-muted); padding-left: 0.4rem; }

/* ---------- Woche / Tag ---------- */
.tm-woche {
    --tm-stunde: 3rem;
    --tm-minute: calc(var(--tm-stunde) / 60);
    --tm-achse: 3.5rem;
    padding: 0;
    overflow-x: auto;
}
.tm-woche-kopf,
.tm-woche-ganztag,
.tm-woche-raster {
    display: grid;
    grid-template-columns: var(--tm-achse) repeat(var(--tm-tage, 7), minmax(6.5rem, 1fr));
}
.tm-woche--tag .tm-woche-kopf,
.tm-woche--tag .tm-woche-ganztag,
.tm-woche--tag .tm-woche-raster { grid-template-columns: var(--tm-achse) minmax(0, 1fr); }
.tm-woche-kopf { border-bottom: 1px solid var(--color-border); }
.tm-woche-tag {
    padding: 0.55rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    border-left: 1px solid var(--color-border-light);
}
.tm-woche-tag:hover { background: var(--color-surface-hover); text-decoration: none; }
.tm-woche-tag--heute { color: var(--color-primary); }
.tm-woche-ecke { padding: 0.35rem 0.3rem 0.35rem 0.15rem; align-self: center; text-align: right; hyphens: auto; overflow-wrap: anywhere; }
.tm-woche-ganztag { border-bottom: 1px solid var(--color-border); }
.tm-woche-ganztag-zelle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    min-height: 2rem;
    padding: 0.3rem;
    border-left: 1px solid var(--color-border-light);
}
.tm-woche-stunden > .tm-stunde-label {
    height: var(--tm-stunde);
    padding: 0.1rem 0.4rem 0 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: right;
}
.tm-woche-spalte { position: relative; border-left: 1px solid var(--color-border-light); }
.tm-woche-spalte--heute { background: var(--color-surface-hover); }
.tm-slot-stunde { height: var(--tm-stunde); border-bottom: 1px dashed var(--color-border-light); }

.tm-block {
    position: absolute;
    z-index: 1;
    top: calc(var(--tm-oben) * var(--tm-minute));
    height: calc(var(--tm-hoehe) * var(--tm-minute) - 2px);
    left: calc(100% * var(--tm-spur) / var(--tm-spuren) + 2px);
    width: calc(100% / var(--tm-spuren) - 4px);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--color-surface);
    font-size: 0.74rem;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
}
.tm-block:hover { text-decoration: none; filter: brightness(0.96); z-index: 2; }
.tm-block--kurz { flex-direction: row; align-items: baseline; gap: 0.3rem; padding-top: 0.1rem; padding-bottom: 0; }
.tm-block-zeit { flex: none; font-size: 0.68rem; font-weight: 600; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-block-titel { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-block-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }

@media (max-width: 900px) {
    .tm-tag { min-height: 5rem; padding: 0.25rem; }
    .tm-eintrag-zeit { display: none; }
}
/* modul: tresor — modules/tresor/assets/tresor.css */
/*
 * Modul tresor — Sperrbildschirm des bisherigen Tresors (Einrichten/Entsperren)
 * und die Huelle des eingebetteten Tresor-Servers (iframe). Liste, Chips,
 * Buttons und Maske kommen aus dem Core. Nur Theme-Variablen; liegt im
 * CSS-Bundle (manifest.json "styles").
 */
.vault-lock { max-width: 380px; margin: 3.75rem auto; padding: 2rem 1.5rem; text-align: center; }
.vault-lock-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; background: var(--color-primary-light); color: var(--color-primary); display: grid; place-items: center; }
.vault-lock-title { margin: 0 0 0.5rem; font-size: 1.1rem; }
.vault-lock p { margin: 0 0 1.25rem; }
.vault-lock .form-group { margin-bottom: 0.75rem; }

/* Eingebetteter Web-Tresor: randlos, volle Breite, Hoehe setzt das Script (Resthoehe) */
.tresor-rahmen { border-radius: var(--radius); overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow); }
.tresor-frame { display: block; width: 100%; height: calc(100vh - 14rem); min-height: 480px; border: 0; }
.tresor-erweiterung { margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.tresor-adresse { font-size: 0.8rem; padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--color-surface-hover); color: var(--color-text); overflow-wrap: anywhere; }
.tresor-hinweis a { color: inherit; font-weight: 600; }
.tresor-team-hinweis { margin: 1rem 0 0; }
.tresor-schritte { max-width: 720px; }
.tresor-schritte .card p { margin: 0 0 0.75rem; }
/* modul: unternehmen — modules/unternehmen/assets/unternehmen-druck.css */
/*
 * Modul unternehmen — Druckansicht (VVT-Export, Notfallmappe).
 * Nur Druck: Bildschirm-Darstellung kommt komplett aus den Core-Bausteinen.
 * Gedruckt wird ausschließlich das Dokument (.unternehmen-druck); App-Rahmen, Kopf-Aktionen
 * und Toasts verschwinden.
 * Liegt im CSS-Bundle (manifest.json "styles") und gilt damit auf JEDER Seite:
 * alle Regeln hängen an .unternehmen-druck bzw. body:has(.unternehmen-druck), sonst druckte jede
 * andere Seite leer. :where() hält die Spezifität des Ausblendens bei 0, damit
 * .unternehmen-druck * wieder sichtbar schaltet.
 * Die Notfallmappe (Bildschirmseite) nutzt .druck-abschnitt/.druck-ausblenden
 * ebenfalls — dort ohne .unternehmen-druck, also unverändert.
 */
@media print {
    :where(body:has(.unternehmen-druck)) * { visibility: hidden; }
    .unternehmen-druck, .unternehmen-druck * { visibility: visible; }
    .unternehmen-druck {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }
    .unternehmen-druck a { color: #000; text-decoration: none; }
    .unternehmen-druck .badge,
    .unternehmen-druck .tag,
    .unternehmen-druck .code { border: 1px solid #999; background: none; color: #000; }
    .unternehmen-druck .alert { border: 1px solid #999; background: none; color: #000; }
    .unternehmen-druck .list-table-wrap { overflow: visible; }
    .unternehmen-druck table { width: 100%; border-collapse: collapse; }
    .unternehmen-druck th,
    .unternehmen-druck td { border: 1px solid #bbb; padding: 4pt 6pt; vertical-align: top; text-align: left; }
    .unternehmen-druck th[scope="row"] { width: 32%; font-weight: 600; }
    .unternehmen-druck .druck-abschnitt { break-inside: avoid; page-break-inside: avoid; margin-top: 12pt; }
    .unternehmen-druck .section-title { margin: 14pt 0 6pt; font-size: 12pt; }
    body:has(.unternehmen-druck) .druck-ausblenden { display: none !important; }

    /* Druckränder nur für diese Ansicht: benannte Seite statt globalem @page */
    body:has(.unternehmen-druck) { page: unternehmen-druck; }
}
@page unternehmen-druck { /* ui:ok benannte Seite, gilt nur, wo body:has(.unternehmen-druck) page: unternehmen-druck setzt */ margin: 16mm 14mm; }
/* modul: wissen — modules/wissen/assets/css/wissen.css */
/*
 * wissen.css — modul-eigenes CSS des Wissen-Moduls.
 *
 * Lag bis wissen 0.2 in public/assets/css/project.css (Projekt-Erweiterungspunkt)
 * und kam deshalb bei einer Installation des Moduls in ein anderes Projekt
 * (bin/feature add wissen --from=…) nicht mit. Seit Core 0.82 im Core-Bundle
 * (manifest "styles" → build/bundle.css) und damit auf JEDER Seite aktiv:
 * Selektoren nur mit Modul-Praefix (wissen-, wg- Graph, wperms- Zugriffsrechte)
 * oder an einen Modul-Zustand gebunden, keine Core-Klasse ueberschreiben.
 * Nur fachliche Darstellung — Bausteine (Buttons, Badges, Karten,
 * Formular-Raster, Popups) kommen aus dem Core.
 */

/* === Wissen-Modul === */
.wissen-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.wissen-folder-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); text-decoration: none; text-align: center; }
.wissen-folder-card:hover { border-color: var(--color-primary); text-decoration: none; }
.wissen-folder-card.is-dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
.wissen-folder-card span:not(.wissen-folder-card-actions) { font-size: 0.82rem; word-break: break-word; }
.wissen-folder-card-actions { position: absolute; top: 0.35rem; right: 0.35rem; display: flex; gap: 0.15rem; }

.wissen-dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; border: 2px dashed var(--color-border); border-radius: var(--radius); text-align: center; color: var(--color-text-muted); }
.wissen-dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
.wissen-upload-liste { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.wissen-upload-liste li { padding: 0.3rem 0.6rem; background: var(--color-surface-hover); border-radius: calc(var(--radius) - 3px); }



.wissen-chat-shell { display: flex; gap: 1.5rem; align-items: flex-start; }

/* Verlaufsliste (vergangene Konversationen) — ein-/ausblendbar per Button
   im Seitenkopf (partials/page-header), standardmaessig ausgeblendet (natives [hidden], siehe chat.js).
   Eigener Hintergrund + abgerundete Ecken statt Trennlinie, um sie farblich vom
   restlichen Chat abzuheben. */
.wissen-chat-verlaufsliste { width: 240px; flex-shrink: 0; flex-direction: column; gap: 0.5rem; max-height: 70vh; overflow-y: auto; padding: 0.75rem; border-radius: var(--radius); background: var(--color-surface); }
.wissen-chat-verlaufsliste:not([hidden]) { display: flex; }
.wissen-chat-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.wissen-chat-liste li { display: flex; align-items: center; gap: 0.25rem; }
.wissen-chat-liste-item { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: calc(var(--radius) - 3px); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wissen-chat-liste-item:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.wissen-chat-liste-item.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

.wissen-chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 70vh; }
.wissen-chat-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; text-align: center; padding: 2rem 1rem 7rem; }
.wissen-chat-welcome h2 { font-size: 1.6rem; font-weight: 600; margin: 0; }
.wissen-chat-vorschlaege { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 1000px; }
.wissen-chat-vorschlag { cursor: pointer; border: none; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; padding: 0.75rem 1rem; border-radius: var(--radius); transition: background 0.15s ease; }
.wissen-chat-vorschlag:hover { background: var(--color-surface-hover); }

.wissen-chat-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 1000px; margin: 0 auto; padding: 1rem 0 7rem; }
.wissen-msg { display: flex; }
.wissen-msg--user { justify-content: flex-end; }
.wissen-msg--assistant { justify-content: flex-start; }
.wissen-msg-col { display: flex; flex-direction: column; gap: 0.35rem; max-width: 72%; }
.wissen-msg--user .wissen-msg-col { align-items: flex-end; }
.wissen-msg--assistant .wissen-msg-col { align-items: flex-start; }
.wissen-msg-bubble { padding: 0.6rem 0.85rem; border-radius: var(--radius); font-size: 0.88rem; line-height: 1.45; white-space: pre-wrap; }
.wissen-msg--user .wissen-msg-bubble { background: var(--color-primary); color: #fff; }
.wissen-msg--assistant .wissen-msg-bubble { background: var(--color-surface-hover); color: var(--color-text); }

/* System-Hinweise im Verlauf (Skill aktiviert / Agent gestartet) — zentrierte
   Badge statt Sprechblase, da keine Chat-"Aussage" im eigentlichen Sinn. */
.wissen-msg--system { justify-content: center; }
.wissen-msg-system-badge { font-size: 0.76rem; color: var(--color-text-muted); background: var(--color-surface-hover); padding: 0.3rem 0.75rem; border-radius: 999px; }

/* Tool-Aufrufe (Websuche/Code-Ausfuehrung, Responses API) als kleine Chips
   oberhalb der Antwort-Bubble. */
.wissen-msg-toolcalls { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wissen-msg-toolcall { font-size: 0.74rem; color: var(--color-text-muted); background: var(--color-surface-hover); padding: 0.15rem 0.5rem; border-radius: 999px; }

/* Von Agenten generierte Bilder (Bildgenerierung-Tool). */
.wissen-msg-images { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wissen-msg-image { max-width: 220px; max-height: 220px; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--color-border); }

.wissen-chat-eingabe { max-width: 1000px; margin: 0 auto; }
.wissen-chat-eingabe-bar { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1.25rem; box-shadow: var(--shadow); }
.wissen-chat-eingabe-bar textarea { flex: 1; resize: none; min-height: 2.2rem; max-height: 8rem; border: none; background: transparent; padding: 0.35rem 0; font-size: 0.95rem; }
.wissen-chat-eingabe-bar textarea:focus { outline: none; box-shadow: none; }
.wissen-chat-send-btn { flex-shrink: 0; width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wissen-chat-send-btn:disabled { opacity: 0.5; cursor: default; }
#wissen-verlauf-toggle[aria-expanded="true"] { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }

/* Chatfenster ganz unten am Browserfenster fixiert (nicht nur am Ende der
   Flex-Spalte) — Offset per --sidebar-width, damit die Sidebar nicht ueberdeckt
   wird; passt sich beim Ein-/Ausklappen der Sidebar automatisch an. Der
   Verlauf/Welcome-Screen bekommt dafuer unten Platz via padding-bottom (s.o.). */
.wissen-chat-eingabe--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.75rem 1.5rem 1.25rem; background: linear-gradient(to top, var(--color-bg) 60%, transparent); }
body[data-layout="sidebar"] .wissen-chat-eingabe--fixed { left: var(--sidebar-width, 240px); transition: left 0.2s ease; }

@media (max-width: 800px) {
    .wissen-chat-shell { flex-direction: column; }
    .wissen-chat-verlaufsliste { width: 100%; max-height: 200px; }
}

/* === Wissen-Modul: Agenten/Prompts/Skills (Phase 5) === */

/* "+"-Button links in der Eingabeleiste, oeffnet die Palette. */
.wissen-chat-plus-btn { flex-shrink: 0; width: 2.2rem; height: 2.2rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wissen-chat-plus-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.wissen-chat-plus-btn[aria-expanded="true"] { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }

/* Popover-Palette (Skills/Prompts/Agenten/Wissen), oeffnet oberhalb des "+"-Buttons.
   Visuelle Tokens von .settings-modal-container/.app-sidebar-area-menu (layout.css). */
.wissen-palette { position: absolute; bottom: calc(100% + 8px); left: 0; width: 340px; max-height: 420px; display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); z-index: 300; overflow: hidden; }
.wissen-palette[hidden] { display: none; }
.wissen-palette-tabs { display: flex; gap: 0.15rem; padding: 0.4rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.wissen-palette-tab { flex: 1; border: none; background: transparent; color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.3rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; }
.wissen-palette-tab:hover { background: var(--color-surface-hover); color: var(--color-text); }
.wissen-palette-tab.is-active { background: var(--color-primary-light); color: var(--color-primary); }
.wissen-palette-panel { display: none; flex-direction: column; gap: 0.15rem; padding: 0.4rem; overflow-y: auto; }
.wissen-palette-panel.is-active { display: flex; }
.wissen-palette-empty { padding: 0.75rem 0.5rem; font-size: 0.82rem; color: var(--color-text-muted); text-align: center; }
.wissen-palette-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; border: none; background: transparent; text-align: left; padding: 0.45rem 0.6rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; color: var(--color-text); font: inherit; }
.wissen-palette-item:hover { background: var(--color-surface-hover); }
.wissen-palette-item-name { font-size: 0.85rem; font-weight: 600; }
.wissen-palette-item-desc { font-size: 0.76rem; color: var(--color-text-muted); }
.wissen-palette-footer { border-top: 1px solid var(--color-border); padding: 0.5rem 0.6rem; flex-shrink: 0; }
/* Farbe und Unterstreichung kommen seit Core 0.75 vom Core (ruhige Textlinks,
   Hover/Fokus unterstrichen) — hier nur die kleinere Schrift der Fusszeile. */
.wissen-palette-footer a { font-size: 0.78rem; }

/* Inline-Mention-Dropdown (@skill, /prompt) — an der Caret-Position im Textarea
   positioniert (mention.js), gleiche Optik wie .wissen-palette-panel. */
.wissen-mention-dropdown { position: absolute; min-width: 220px; max-width: 320px; max-height: 240px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); z-index: 310; padding: 0.25rem; }
.wissen-mention-dropdown[hidden] { display: none; }
.wissen-mention-item { display: flex; flex-direction: column; gap: 0.05rem; width: 100%; border: none; background: transparent; text-align: left; padding: 0.4rem 0.55rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; color: var(--color-text); font: inherit; }
.wissen-mention-item-name { font-size: 0.82rem; font-weight: 600; }
.wissen-mention-item-desc { font-size: 0.74rem; color: var(--color-text-muted); }
.wissen-mention-item.is-highlighted, .wissen-mention-item:hover { background: var(--color-primary-light); }
.wissen-mention-item.is-highlighted .wissen-mention-item-name { color: var(--color-primary); }

/* Ordner-Baum (Popover-Wissen-Tab + Agent-Formular), <details>-basiert. */
.wissen-ordner-baum { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; }
.wissen-ordner-baum-node { margin: 0; }
.wissen-ordner-baum-node > summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.3rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; list-style: none; }
.wissen-ordner-baum-node > summary::-webkit-details-marker { display: none; }
.wissen-ordner-baum-node > summary:hover { background: var(--color-surface-hover); }
.wissen-ordner-baum-node[open] > summary .wissen-ordner-baum-chevron { transform: rotate(90deg); }
.wissen-ordner-baum-chevron { display: inline-block; flex-shrink: 0; opacity: 0.6; transition: transform 0.1s ease; }
.wissen-ordner-baum-children { margin-left: 1.1rem; padding-left: 0.4rem; border-left: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: 0.1rem; }
.wissen-ordner-baum-label { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
.form-group .wissen-ordner-baum-label { display: flex; margin-bottom: 0; font-size: inherit; font-weight: normal; }
.wissen-ordner-baum-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tag-Input fuer Skill-Trigger-Keywords (Chips auf Basis von .chip, Vorbild
   Positionszeilen-Add/Remove aus finanzen/views/doc.php). */
.wissen-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.wissen-tag-input:focus-within { border-color: var(--color-primary); }
.wissen-tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.4rem 0.2rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.78rem; color: var(--color-text-muted); background: var(--color-surface); }
.wissen-tag-chip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0.1rem; display: flex; }
.wissen-tag-chip button:hover { color: var(--color-text); }
.wissen-tag-input-field { flex: 1; min-width: 100px; border: none; background: transparent; font-size: 0.85rem; padding: 0.2rem; }
.wissen-tag-input-field:focus { outline: none; box-shadow: none; }

/* Zeichenzaehler (Vorbild: Slider-Live-Value-JS in settings/panels/ci.php). */
.wissen-char-counter { font-size: 0.75rem; color: var(--color-text-muted); text-align: right; margin-top: 0.25rem; }
.wissen-char-counter.is-over { color: var(--color-danger, #dc2626); font-weight: 600; }

/* Sichtbarkeit-Toggle: 2-Segment-Control (Persoenlich/Firma) — eine benannte
   Wahl zwischen zwei Zustaenden. */
.wissen-sichtbarkeit-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.15rem; background: var(--color-surface); }
.wissen-sichtbarkeit-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.wissen-sichtbarkeit-toggle label { padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; color: var(--color-text-muted); cursor: pointer; }
.wissen-sichtbarkeit-toggle input:checked + label { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }

/* Tool-Toggle: iOS-artiger Switch, im Agent-Formular dreimal geloopt. */
.wissen-tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
@media (max-width: 720px) {
    .wissen-tool-grid { grid-template-columns: 1fr; }
}
.wissen-tool-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.wissen-tool-toggle-label { display: flex; flex-direction: column; gap: 0.1rem; }
.wissen-tool-toggle-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.wissen-tool-toggle-desc { font-size: 0.76rem; color: var(--color-text-muted); }
.wissen-tool-toggle-switch { position: relative; flex-shrink: 0; display: inline-block; width: 2.4rem; height: 1.4rem; }
.wissen-tool-toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.wissen-tool-toggle-switch-track { position: absolute; inset: 0; background: var(--color-border); border-radius: 999px; transition: background 0.15s ease; }
.wissen-tool-toggle-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 4px); height: calc(1.4rem - 4px); background: #fff; border-radius: 50%; transition: transform 0.15s ease; }
.wissen-tool-toggle-switch input:checked ~ .wissen-tool-toggle-switch-track { background: var(--color-primary); }
.wissen-tool-toggle-switch input:checked ~ .wissen-tool-toggle-switch-track::before { transform: translateX(1rem); }

/* KI-Vorschlag-Vorschau im Skill-Editor ("Mit KI verbessern"). */
.wissen-vorschlag-box { margin-top: 0.5rem; padding: 0.65rem 0.75rem; border: 1px solid var(--color-primary); background: var(--color-primary-light); border-radius: var(--radius); font-size: 0.85rem; white-space: pre-wrap; }
.wissen-vorschlag-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* Agenten-Grid auf der Verwaltungsseite + Chat-Karten fuer Agent-Start. */
.wissen-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.wissen-agent-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; text-decoration: none; }
.wissen-agent-card:hover { border-color: var(--color-primary); text-decoration: none; }
.wissen-agent-card-name { font-size: 0.92rem; font-weight: 600; }
.wissen-agent-card-desc { font-size: 0.8rem; color: var(--color-text-muted); }
.wissen-agent-card-tools { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.15rem; }

/* Kurze Bestaetigung nach Inline-Skill-Aktivierung/Scope-Uebernahme (mention.js, palette.js). */

@media (max-width: 800px) {
    .wissen-palette { width: calc(100vw - 2rem); left: -0.5rem; }
}

/* === Knowledge-Graph (graph.js) — 3D-Canvas nach Referenz-Prototyp ===
   Bewusst festes Dark-Theme unabhaengig vom App-Theme: die Buehne ist ein
   in sich geschlossener, dunkler Raum (wie im Prototyp). */
.wg-stage { position: relative; height: 72vh; min-height: 540px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 120% at 60% 40%, #0b101f, #080c18); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); }
/* Full-Bleed: der Container der Graph-Seite verliert sein Padding (unten, per
   :has), damit die Buehne den kompletten Content-Bereich fuellt — unabhaengig
   davon, wie viel Padding der Core-Container gerade hat; zusaetzlich reicht sie
   ueber den Abstand zur Sidebar (--sidebar-gap, 8 px) — sonst bleibt dort ein
   heller Streifen zwischen Sidebar und dunkler Buehne. */
.wg-stage--full { margin: 0 0 0 calc(-1 * var(--sidebar-gap, 0px)); width: calc(100% + var(--sidebar-gap, 0px)); height: 100vh; min-height: 0; border-radius: 0; box-shadow: none; }
/* CI-Scale (ci-style.php setzt zoom auf .main .container) auf der Graph-Seite
   neutralisieren: 100vh * zoom > Viewport wuerde die Buehne ueberlaufen lassen
   (Chat-Overlay unterm Fold, Seiten-Scrollbar) und Canvas-Hitboxen verschieben.
   Der Canvas skaliert seine Inhalte selbst, CI-Zoom bringt hier nichts.
   :has erhoeht die Spezifitaet ueber die Inline-Regel aus ci-style.php. */
.main .container:has(.wg-stage--full), .main .container--wide:has(.wg-stage--full) { zoom: 1; padding: 0; max-width: none; margin: 0; }
#wg-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#wg-canvas.dragging { cursor: grabbing; }
.wg-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; padding: 2rem; color: #7d8aa5; font-size: 0.88rem; }
.wg-empty h2 { margin: 0; font-size: 1.1rem; color: #eef2fa; }
.wg-empty p { margin: 0; max-width: 32rem; }
.wg-empty[hidden] { display: none; }

/* Menue-Panel links oben; faehrt bei geoeffnetem Detail-Panel nicht weg,
   sondern bleibt links — das Detail-Panel liegt rechts. */
.wg-menu { position: absolute; top: 14px; left: 14px; width: 232px; background: rgba(13, 18, 32, 0.92); border: 1px solid rgba(120, 140, 180, 0.16); border-radius: 14px; backdrop-filter: blur(10px); color: #d6dcea; font-size: 0.78rem; z-index: 5; transition: transform 0.45s cubic-bezier(0.25, 0.9, 0.3, 1); }
.wg-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(120, 140, 180, 0.12); }
.wg-menu-title { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; color: #7d8aa5; }
#wg-menu-min { background: none; border: none; color: #7d8aa5; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
#wg-menu-min:hover { color: #d6dcea; }
.wg-menu.min .wg-menu-body { display: none; }
.wg-menu-body { padding: 0.7rem 0.8rem 0.9rem; }
#wg-search { width: 100%; box-sizing: border-box; background: rgba(8, 12, 24, 0.8); border: 1px solid rgba(120, 140, 180, 0.2); border-radius: 8px; color: #d6dcea; padding: 0.42rem 0.6rem; font-size: 0.78rem; margin-bottom: 0.6rem; }
#wg-search::placeholder { color: #566079; }
#wg-search:focus { outline: none; border-color: #3d8bfd; }
.wg-sec { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #566079; margin: 0.55rem 0 0.35rem; }
.wg-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wg-chip { background: rgba(120, 140, 180, 0.1); border: 1px solid rgba(120, 140, 180, 0.18); border-radius: 999px; color: #aab4c8; font-size: 0.7rem; padding: 0.24rem 0.6rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.wg-chip:hover { color: #e8ecf5; }
.wg-chip.on { background: #e8ecf5; border-color: #e8ecf5; color: #0b101f; font-weight: 600; }
.wg-chk { display: flex; align-items: center; gap: 0.45rem; padding: 0.18rem 0; cursor: pointer; color: #aab4c8; }
.wg-chk input { accent-color: #3d8bfd; }
.wg-sld-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0.55rem 0 0.15rem; color: #aab4c8; }
.wg-sld-label b { color: #d6dcea; font-weight: 600; font-size: 0.72rem; }
.wg-menu input[type="range"] { --fill: 50%; width: 100%; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(to right, #3d8bfd var(--fill), rgba(120, 140, 180, 0.25) var(--fill)); outline: none; }
.wg-menu input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.wg-menu input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: none; cursor: pointer; }

/* Tooltip folgt dem Hover-Knoten. */
.wg-tooltip { display: none; position: absolute; z-index: 8; max-width: 280px; background: rgba(10, 14, 25, 0.95); border: 1px solid rgba(120, 140, 180, 0.2); border-radius: 10px; padding: 0.5rem 0.7rem; pointer-events: none; color: #d6dcea; }
.wg-tt1 { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.15rem; }
.wg-tt2 { font-size: 0.68rem; }
.wg-tt2 b { letter-spacing: 0.05em; }
.wg-tt2 span { color: #7d8aa5; }
.wg-tt3 { font-size: 0.66rem; color: #566079; margin-top: 0.1rem; }
.wg-tt4 { font-size: 0.62rem; color: #45506a; margin-top: 0.3rem; border-top: 1px solid rgba(120, 140, 180, 0.12); padding-top: 0.3rem; }

/* Detail-Panel rechts, faehrt von aussen ein. */
.wg-detail { position: absolute; top: 14px; right: 14px; bottom: 14px; width: 400px; box-sizing: border-box; background: rgba(11, 15, 27, 0.96); border: 1px solid rgba(120, 140, 180, 0.16); border-radius: 14px; backdrop-filter: blur(10px); color: #d6dcea; padding: 1rem 1.1rem; overflow-y: auto; z-index: 6; transform: translateX(110%); transition: transform 0.45s cubic-bezier(0.25, 0.9, 0.3, 1); }
.wg-detail.open { transform: translateX(0); }
.wg-close { position: absolute; top: 0.6rem; right: 0.7rem; background: none; border: none; color: #7d8aa5; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.3rem; }
.wg-close:hover { color: #d6dcea; }
.wg-badge { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 0.18rem 0.55rem; margin-bottom: 0.5rem; }
.wg-detail h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; color: #eef2fa; }
.wg-meta { font-size: 0.72rem; color: #7d8aa5; margin-bottom: 0.7rem; }
.wg-content { font-size: 0.78rem; line-height: 1.5; }
.wg-content p { margin: 0 0 0.6rem; color: #aab4c8; }
.wg-content h4 { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #566079; margin: 0.8rem 0 0.35rem; }
.wg-links { display: flex; flex-direction: column; gap: 0.2rem; }
.wg-links a { color: #8fb8f5; cursor: pointer; text-decoration: none; font-size: 0.76rem; }
.wg-links a:hover { text-decoration: underline; }

/* Minimap rechts unten. */
.wg-minimap { position: absolute; right: 14px; bottom: 40px; width: 168px; height: 102px; background: rgba(9, 13, 23, 0.85); border: 1px solid rgba(120, 140, 180, 0.16); border-radius: 10px; overflow: hidden; z-index: 4; }
.wg-stage.detail-open .wg-minimap { right: 428px; transition: right 0.45s cubic-bezier(0.25, 0.9, 0.3, 1); }
#wg-minimap-canvas { display: block; width: 168px; height: 102px; }

/* Bedien-Hinweis unten. */
.wg-hint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 0.64rem; color: #45506a; pointer-events: none; z-index: 3; }

/* Hover-Inhaltsvorschau im Detail-Panel (graphNodeContent). */
.wg-snip-doc { display: block; color: #8fb8f5; font-size: 0.74rem; text-decoration: none; margin: 0.4rem 0 0.15rem; }
.wg-snip-doc:hover { text-decoration: underline; }
.wg-content p.wg-snip { font-size: 0.72rem; color: #96a1b8; margin: 0 0 0.45rem; border-left: 2px solid rgba(120, 140, 180, 0.25); padding-left: 0.5rem; }
.wg-content p.wg-snip-lade { color: #566079; font-size: 0.72rem; }

/* Graph-Chat-Overlay links unten (Punkt 7): fragt POST /wissen/graph/chat
   und markiert die genutzten Quellen-Nodes im Canvas. */
.wg-chat { position: absolute; left: 14px; bottom: 14px; width: 340px; max-height: 46vh; display: flex; flex-direction: column; background: rgba(13, 18, 32, 0.94); border: 1px solid rgba(120, 140, 180, 0.16); border-radius: 14px; backdrop-filter: blur(10px); color: #d6dcea; font-size: 0.78rem; z-index: 7; overflow: hidden; }
.wg-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(120, 140, 180, 0.12); }
.wg-chat-title { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; color: #7d8aa5; }
.wg-chat-actions button { background: none; border: none; color: #7d8aa5; font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; }
.wg-chat-actions button:hover { color: #d6dcea; }
.wg-chat.min .wg-chat-body { display: none; }
.wg-chat-body { display: flex; flex-direction: column; min-height: 0; }
.wg-chat-log { overflow-y: auto; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.wg-chat-log:empty { display: none; }
.wg-msg p { margin: 0 0 0.35rem; }
.wg-msg p:last-child { margin-bottom: 0; }
.wg-msg--user { align-self: flex-end; background: rgba(61, 139, 253, 0.18); border: 1px solid rgba(61, 139, 253, 0.3); border-radius: 10px 10px 2px 10px; padding: 0.35rem 0.6rem; max-width: 85%; }
.wg-msg--assistant { color: #aab4c8; line-height: 1.45; }
#wg-chat-form { display: flex; gap: 0.4rem; padding: 0.55rem 0.8rem 0.7rem; border-top: 1px solid rgba(120, 140, 180, 0.12); }
#wg-chat-input { flex: 1; min-width: 0; background: rgba(8, 12, 24, 0.8); border: 1px solid rgba(120, 140, 180, 0.2); border-radius: 8px; color: #d6dcea; padding: 0.42rem 0.6rem; font-size: 0.78rem; }
#wg-chat-input::placeholder { color: #566079; }
#wg-chat-input:focus { outline: none; border-color: #3d8bfd; }
#wg-chat-form button { background: #3d8bfd; border: none; border-radius: 8px; color: #fff; padding: 0 0.7rem; cursor: pointer; font-size: 0.8rem; }
#wg-chat-form button:hover { background: #5c9ffd; }

/* Quellen-Chips unter einer Graph-Chat-Antwort: Dokument + Score +
   Pool-Badges (V/S/G = Vektor/Stichwort/Graph). */
.wg-chips-src { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; align-items: center; }
.wg-src { display: inline-flex; align-items: center; gap: 0.3rem; background: rgba(120, 140, 180, 0.1); border: 1px solid rgba(120, 140, 180, 0.2); border-radius: 999px; color: #aab4c8; font-size: 0.66rem; padding: 0.2rem 0.55rem; cursor: pointer; max-width: 100%; }
.wg-src:hover { color: #e8ecf5; border-color: rgba(140, 170, 220, 0.4); }
.wg-src-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-src-score { color: #7d8aa5; }
.wg-pool { font-size: 0.58rem; font-weight: 700; border-radius: 4px; padding: 0.05rem 0.25rem; line-height: 1.2; }
.wg-pool--vector { background: rgba(124, 196, 242, 0.2); color: #7cc4f2; }
.wg-pool--keyword { background: rgba(164, 224, 134, 0.2); color: #a4e086; }
.wg-pool--graph { background: rgba(240, 160, 221, 0.2); color: #f0a0dd; }
.wg-src-trace { color: #566079; font-size: 0.64rem; text-decoration: none; }
.wg-src-trace:hover { color: #8fb8f5; text-decoration: underline; }

@media (max-width: 900px) {
    .wg-detail { width: calc(100vw - 6rem); max-width: 400px; }
    .wg-minimap { display: none; }
    .wg-chat { width: calc(100vw - 4rem); max-width: 340px; }
}

/* === Wissen-Modul: Datei-Detailansicht (Phase "PDF & Detail") === */

/* Status-Stepper (hochgeladen -> verarbeitung -> bereit). */
.wissen-detail-status { margin-bottom: 1rem; }
.wissen-stepper { list-style: none; display: flex; gap: 0; margin: 0; padding: 0.25rem 0; }
.wissen-stepper-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; font-size: 0.8rem; color: var(--color-text-muted); }
.wissen-stepper-step::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.wissen-stepper-step:first-child::before { display: none; }
.wissen-stepper-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-border); z-index: 1; }
.wissen-stepper-step.is-done .wissen-stepper-dot { background: var(--color-primary); }
.wissen-stepper-step.is-done::before { background: var(--color-primary); }
.wissen-stepper-step.is-current .wissen-stepper-label { color: var(--color-primary); font-weight: 600; }
.wissen-detail-quelle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; }
.wissen-detail-quelle a { overflow-wrap: anywhere; }

/* Kennzahlen-Raster. */
.wissen-detail-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.wissen-detail-metaitem { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.wissen-detail-metaitem span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.wissen-detail-metaitem strong { font-size: 0.95rem; }

/* Zweispaltiges Grid: Original | Markdown. */
.wissen-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.wissen-detail-panel { margin-bottom: 1rem; }
.wissen-detail-panel h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.wissen-detail-hint { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 0.75rem; }
.wissen-detail-pdf { width: 100%; height: 760px; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); }
.wissen-detail-bild { max-width: 100%; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); }
/* Detail: Lese-Ansicht (Core .markdown) und „Technisch"-Abschnitte */
.wissen-detail-inhalt { max-width: 72ch; }
.wissen-md-tabelle { max-width: 100%; overflow-x: auto; margin-bottom: 0.75rem; }
.wissen-md-tabelle table { margin: 0; }
.wissen-form-fortgeschritten { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.wissen-form-fortgeschritten > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
.wissen-detail-technik { border-top: 1px solid var(--color-border); padding: 0.6rem 0; }
.wissen-detail-technik > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.wissen-detail-technik[open] > summary { margin-bottom: 0.6rem; }
.wissen-detail-markdown { max-height: 760px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 0.82rem; line-height: 1.5; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); padding: 0.75rem; margin: 0; }

@media (max-width: 900px) { .wissen-detail-grid { grid-template-columns: 1fr; } }

/* 4-Varianten-Tabs (Original / Markdown / Chunks / Vektoren). */

/* Excel-Vorschau — wie in Excel dargestellt (Tabellenansicht je Sheet). */
.wissen-detail-xlsx-heading { font-size: 0.88rem; margin: 0 0 0.4rem; }
.wissen-detail-xlsx-heading:not(:first-child) { margin-top: 1rem; }
.wissen-detail-tabelle-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); margin-bottom: 0.75rem; }
.wissen-detail-tabelle { border-collapse: collapse; width: 100%; font-size: 0.8rem; white-space: nowrap; }
.wissen-detail-tabelle th, .wissen-detail-tabelle td { border: 1px solid var(--color-border); padding: 0.3rem 0.55rem; text-align: left; }
.wissen-detail-tabelle th { position: sticky; top: 0; background: var(--color-surface-hover); font-weight: 600; }
.wissen-detail-tabelle tr:nth-child(even) td { background: var(--color-bg); }

/* PowerPoint-Vorschau — eine Karte je Folie. */
.wissen-detail-folien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.wissen-detail-folie { border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); padding: 0.6rem 0.75rem; background: var(--color-bg); }
.wissen-detail-folie-nr { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.3rem; }
.wissen-detail-folie p { margin: 0; font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; }

/* Chunk-Liste mit Vektor-Sparkline. */
.wissen-chunk { border: 1px solid var(--color-border); border-radius: calc(var(--radius) - 2px); padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; }
.wissen-chunk-head { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; margin-bottom: 0.4rem; color: var(--color-text-muted); }
.wissen-chunk-spark { display: block; width: 100%; height: 36px; background: var(--color-bg); border-radius: 4px; margin-bottom: 0.4rem; }
.wissen-chunk-spark polyline { fill: none; stroke: var(--color-primary); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wissen-chunk-spark-point { fill: var(--color-primary); opacity: 0; cursor: crosshair; }
.wissen-chunk-spark-point:hover { opacity: 1; }
.wissen-chunk-text { font-size: 0.82rem; line-height: 1.5; color: var(--color-text); margin: 0; white-space: pre-wrap; max-height: 260px; overflow: auto; }
.wissen-chunk-rohdaten { font-size: 0.78rem; }
.wissen-chunk-rohdaten summary { cursor: pointer; color: var(--color-text-muted); user-select: none; }
.wissen-chunk-rohdaten summary:hover { color: var(--color-text); }
.wissen-chunk-rohdaten-werte { margin: 0.4rem 0 0; padding: 0.5rem 0.6rem; background: var(--color-bg); border-radius: calc(var(--radius) - 2px); font-family: ui-monospace, monospace; font-size: 0.72rem; line-height: 1.5; color: var(--color-text-muted); white-space: pre-wrap; max-height: 200px; overflow: auto; }

/* Performance-Seite: Antwort/Quellen-Expand je Anfrage. */
.wissen-perf-detail-row td { padding-top: 0; padding-bottom: 0.75rem; border-top: none; }
.wissen-perf-detail { font-size: 0.82rem; }
.wissen-perf-detail summary { cursor: pointer; color: var(--color-text-muted); user-select: none; }
.wissen-perf-detail summary:hover { color: var(--color-text); }
.wissen-perf-antwort { margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; background: var(--color-bg); border-radius: calc(var(--radius) - 2px); color: var(--color-text); line-height: 1.5; white-space: pre-wrap; }
.wissen-perf-quellen { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wissen-perf-quellen li { font-size: 0.8rem; }
.wissen-perf-quelle-name { font-weight: 500; color: var(--color-text); }

/* Graph-Verknuepfungen. */
.wissen-detail-entities { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.wissen-detail-entitytype { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.wissen-detail-entitylabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); min-width: 92px; }
.wissen-detail-relations { list-style: none; margin: 0.5rem 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wissen-detail-relations li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.wissen-rel-node { font-weight: 600; }
.wissen-rel-label { font-size: 0.76rem; color: var(--color-text-muted); background: var(--color-surface-hover); padding: 0.1rem 0.5rem; border-radius: 999px; }


/* === Wissen-Modul: Performance / Modellvergleich (Phase 6) === */
.wissen-vergleich-form { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.wissen-vergleich-form label { font-size: 0.85rem; font-weight: 600; }
.wissen-vergleich-form textarea { width: 100%; resize: vertical; }
.wissen-vergleich-actions { display: flex; justify-content: flex-end; }
.wissen-vergleich-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.wissen-vergleich-card { display: flex; flex-direction: column; gap: 0.5rem; }
.wissen-vergleich-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wissen-vergleich-antwort { font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; }
.wissen-vergleich-stacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.wissen-vergleich-stack { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* Datenqualität (Findings): Scan-Aktionen, Auto-Toggle, 3-Spalten-Grid */
.wissen-dq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: start; }
.wissen-dq-grid.is-solo { grid-template-columns: 1fr; }

/* Datenqualität — Spalten der Übersicht */
.wissen-dq-spalte { display: flex; flex-direction: column; gap: 0.5rem; }
.wissen-dq-titel { font-size: 1rem; margin: 0 0 0.25rem; }
.wissen-dq-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wissen-dq-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0; border-top: 1px solid var(--color-border); }
.wissen-dq-item:first-child { border-top: none; }
.wissen-dq-item-titel { font-size: 0.9rem; font-weight: 500; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.wissen-dq-item-titel:hover { color: var(--color-primary); text-decoration: none; }
.wissen-dq-item-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.wissen-dq-item-grund { font-size: 0.8rem; line-height: 1.35; }
.wissen-dq-mehr { font-size: 0.82rem; margin: 0.25rem 0 0; }
@media (max-width: 900px) { .wissen-dq-grid { grid-template-columns: 1fr; } }
.wissen-vergleich-stack legend { font-size: 0.8rem; font-weight: 600; padding: 0 0.3rem; }
.wissen-vergleich-stack label { font-size: 0.78rem; font-weight: 500; color: var(--color-text-muted); }
.wissen-vergleich-stack select { width: 100%; }
.wissen-vergleich-snippet { font-size: 0.76rem; margin-top: 0.1rem; }

/* === Wissen-Modul: Freigabe-/Rechte-Modal === */
.wperms-table th, .wperms-table td { vertical-align: middle; }
.wperms-table td input[type="checkbox"] { margin: 0; }
.wperms-add { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); }
.wperms-add h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.wperms-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.wperms-add-row select { min-width: 120px; }
.wperms-add-row label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }

/* Detailansicht v2: kompakte Meta + Inhalt/Zugriff zweispaltig. */
.wissen-detail-meta--kompakt { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wissen-detail-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.wissen-detail-sidebar { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 900px) { .wissen-detail-grid2 { grid-template-columns: minmax(0, 1fr); } }
.wissen-zugriff-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wissen-zugriff-liste li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; }
.wissen-zugriff-name { font-weight: 500; }

/* === Wissen-Modul: Dateien-Tab (Ordner-Baum links + Kontextmenue) === */
.wissen-dateien-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.wissen-dateien-main { transition: opacity 0.12s ease; }
.wissen-dateien-main.is-loading { opacity: 0.5; }
/* pjax-Reiterwechsel (public/assets/js/project.js): kurzer Dimm-Effekt beim Nachladen */
.main .container.wissen-pjax-laedt { opacity: 0.55; transition: opacity 0.12s ease; }
@media (max-width: 900px) { .wissen-dateien-layout { grid-template-columns: 1fr; } }
.wissen-dateien-main { min-width: 0; }

/* Ordner-Navigation (Baum) */
.wissen-ordnernav { padding: 1rem 0.85rem; }
.wissen-ordnernav h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.wissen-ordnernav-baum { display: flex; flex-direction: column; gap: 1px; }
.wissen-ordnernav-alle,
.wissen-ordnernav-link { display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; padding: 0.3rem 0.4rem; border-radius: calc(var(--radius) - 3px); color: var(--color-text); text-decoration: none; font-size: 0.9rem; }
/* "Alle Dokumente" hat keinen Aufklapp-Pfeil — per Einzug auf die Icon-Spalte
   der Ordner mit Pfeil/Platzhalter ausrichten. */
.wissen-ordnernav-alle { margin-bottom: 0.15rem; padding-left: calc(20px + 0.4rem); }
.wissen-ordnernav-alle:hover, .wissen-ordnernav-link:hover { background: var(--color-surface-hover); text-decoration: none; }
.wissen-ordnernav-alle.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.wissen-ordnernav-link svg, .wissen-ordnernav-alle svg { flex: 0 0 auto; color: var(--color-text-muted); }
.wissen-ordnernav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.wissen-ordnernav-count { flex: 0 0 auto; color: var(--color-text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* Aktiv-Markierung liegt auf demselben Element (dem Link) wie der Hover —
   gleiche Breite/Form, Pfeil + ⋯ bleiben außerhalb der Markierung. */
.wissen-ordnernav-row { display: flex; align-items: center; gap: 0.1rem; padding-right: 2px; }
.wissen-ordnernav-row.is-active .wissen-ordnernav-link { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.wissen-ordnernav-row.is-active .wissen-ordnernav-link svg { color: var(--color-primary); }
.wissen-ordnernav-row.is-dragover { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.wissen-ordnernav-toggle { flex: 0 0 auto; width: 20px; height: 20px; border: none; background: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.72rem; line-height: 1; transition: transform 0.12s; padding: 0; }
.wissen-ordnernav-node.is-open > .wissen-ordnernav-row > .wissen-ordnernav-toggle { transform: rotate(90deg); }
.wissen-ordnernav-spacer { flex: 0 0 auto; width: 20px; }
/* Baum-⋯ ist ein Core-Icon-Button (btn--ghost btn--sm btn--icon), im Baum kompakt. */
.btn--icon.wissen-ordnernav-menu { opacity: 0; width: 1.6rem; height: 1.6rem; font-size: 0.95rem; }
.wissen-ordnernav-row:hover .wissen-ordnernav-menu, .wissen-ordnernav-row.is-active .wissen-ordnernav-menu { opacity: 1; }
.wissen-ordnernav-children { display: none; margin-left: 0.95rem; }
.wissen-ordnernav-node.is-open > .wissen-ordnernav-children { display: block; }

/* „Neuer Ordner" (Popup-Button) unter dem Baum */
.wissen-ordnernav-neu { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); }

/* Datei-Liste: Werkzeugleiste (Alle, Archiv, Sortierung) in Button-Höhe */
.wissen-alle-waehlen { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; }
.list-toolbar select.wissen-sortierung { width: auto; padding: 0.3rem 1.75rem 0.3rem 0.6rem; font-size: 0.8rem; min-height: 0; }

/* Gemeinsames Kontextmenue */
.wissen-ctxmenu { position: fixed; z-index: 400; min-width: 210px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.3rem; }
.wissen-ctxmenu[hidden] { display: none; }
.wissen-ctxmenu-item { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit; color: var(--color-text); padding: 0.5rem 0.65rem; border-radius: calc(var(--radius) - 3px); cursor: pointer; }
.wissen-ctxmenu-item:hover { background: var(--color-surface-hover); }
.wissen-ctxmenu-sep { border-top: 1px solid var(--color-border); margin: 0.3rem 0; }

/* Zugriffsrechte: Ordner-Checkbox-Matrix je Gruppe. */
.wissen-rechte-baum { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.wissen-rechte-node { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.wissen-rechte-node input { margin: 0; }
.wissen-rechte-actions { border-top: 1px solid var(--color-border); padding-top: 0.85rem; }

/* Dokumentenversionierung: Versionsverlauf-Panel auf der Detailseite. */
.wissen-detail-versionen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.wissen-detail-versionen-kopf > div { flex-shrink: 0; }
.wissen-detail-versionen-kopf h2 { margin: 0; }
.wissen-versionen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wissen-versionen-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.88rem; padding: 0.5rem 0.65rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.wissen-version-nr { font-weight: 600; flex: 0 0 auto; }
.wissen-version-name { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wissen-version-groesse, .wissen-version-datum { color: var(--color-text-muted); flex: 0 0 auto; }
.wissen-version-aktionen { display: flex; gap: 0.4rem; margin-left: auto; }

/* Chatbot-Detailseite: Formular links, Einbindung/Demo/Sicherheit rechts */
.wissen-chatbot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0 1rem; align-items: start; }
.wissen-chatbot-layout .form-footer { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 1100px) { .wissen-chatbot-layout { grid-template-columns: minmax(0, 1fr); } }

/* ===== Datengruppen (Live-Daten) =====
   Status-Badge „veraltet"/„noch nicht gemappt" = Core .badge--warning,
   Kopf-Aktionen = Core .page-actions, Gefahr-Knopf = Core .btn--danger. */
.wissen-radio-zeile { display: block; margin: 0.25rem 0; font-weight: normal; }

/* Gruppen-Bereich auf der Daten-Seite */
/* Hinweis „Dokumente warten auf Aufbereitung" (Core-.alert, Knopf rechts, schmal umbrechend) */
.wissen-aufbereitung-hinweis { flex-wrap: wrap; justify-content: space-between; }
.wissen-aufbereitung-hinweis > div { flex: 1 1 18rem; font-weight: 400; }
.wissen-aufbereitung-hinweis > form { margin: 0; }
/* Datengruppen/externe Quellen unter der Dokumentliste */
.wissen-quellen-abschnitt { margin-top: 2rem; }

/* Mapping-Maske (WYSIWYG: Vorschau links gross, Mapping rechts) */
.wissen-mapping-app { margin-top: 1rem; }
.wissen-mapping-wysiwyg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }

/* Buehne — die Vorschau als Editierflaeche */
.wissen-mapping-buehne { min-width: 0; }
.wissen-buehne-toolbar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.wissen-buehne-beispiel { margin-left: auto; }
.wissen-buehne-karte { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 1rem 1.25rem; }
.wissen-v-titel { font-size: 1.35rem; margin: 0 0 0.75rem; }
.wissen-v-dropzone { min-height: 12px; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.15rem; border-radius: var(--radius); }
.wissen-v-dropzone.is-dragover { outline: 2px dashed var(--color-primary); outline-offset: 2px; background: var(--color-primary-light); }

.wissen-v-feld { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.4rem; border-radius: var(--radius); }
.wissen-v-feld:hover { background: var(--color-surface-hover); }
.wissen-v-feld.is-dragging { opacity: 0.5; }
.wissen-v-feld--komposit { background: var(--color-primary-light); }
.wissen-v-feld-sel { flex: 0 0 auto; }
.wissen-v-feld-griff { color: var(--color-text-muted); cursor: grab; }
.wissen-v-feld-label { flex: 0 0 auto; width: 160px; font-weight: 600; border: 1px solid transparent; background: transparent; padding: 0.15rem 0.3rem; border-radius: 4px; }
.wissen-v-feld-label:hover, .wissen-v-feld-label:focus { border-color: var(--color-border); background: var(--color-bg); }
.wissen-v-feld-sep { color: var(--color-text-muted); }
.wissen-v-feld-wert { flex: 1; min-width: 0; }
.wissen-v-feld-liste { flex: 1; margin: 0; padding-left: 1.1rem; }
.wissen-v-feld-badge { font-size: 0.68rem; color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 3px; padding: 0 0.3rem; }
.wissen-v-leer { color: var(--color-text-muted); list-style: none; }
.wissen-v-feld-x { flex: 0 0 auto; }

.wissen-v-gruppe { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.6rem; margin: 0.6rem 0; }
.wissen-v-gruppe-kopf { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.wissen-v-gruppe-name { flex: 1; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 0.15rem 0.3rem; border-radius: 4px; }
.wissen-v-gruppe-name:hover, .wissen-v-gruppe-name:focus { border-color: var(--color-border); background: var(--color-bg); }
.wissen-v-untergruppen { margin-left: 1rem; border-left: 2px solid var(--color-border); padding-left: 0.6rem; }

/* Sidebar — kompaktes Feld-/Rollen-Mapping */
.wissen-mapping-seite { position: sticky; top: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); padding: 0.85rem 1rem; }
.wissen-seite-titel { font-weight: 700; margin-bottom: 0.2rem; }
.wissen-seite-hint { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 0.6rem; }
.wissen-seite-felder { display: flex; flex-direction: column; gap: 0.35rem; max-height: 60vh; overflow-y: auto; }
.wissen-seite-feld { display: flex; align-items: center; gap: 0.5rem; }
.wissen-seite-feld-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wissen-seite-feld-pfad { font-family: monospace; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wissen-seite-feld-sample { font-size: 0.72rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wissen-seite-feld-rolle { flex: 0 0 auto; }
.wissen-seite-save { margin-top: 0.85rem; width: 100%; }

/* Zusammenfassen-Dialog */
.wissen-mapping-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.wissen-mapping-dialog { background: var(--color-surface); border-radius: var(--radius); padding: 1.25rem; width: min(460px, 92vw); box-shadow: var(--shadow-lg); }
.wissen-mapping-dialog h3 { margin: 0 0 0.5rem; }
.wissen-mapping-dialog-feld { display: block; margin: 0.6rem 0; font-size: 0.85rem; }
.wissen-mapping-dialog-feld input, .wissen-mapping-dialog-feld select { width: 100%; margin-top: 0.2rem; }
.wissen-mapping-dialog-vorschau { margin: 0.6rem 0; padding: 0.5rem 0.6rem; background: var(--color-bg); border-radius: var(--radius); font-size: 0.85rem; }
.wissen-mapping-dialog-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }

.wissen-rechte-subhead { font-size: 0.9rem; margin: 1rem 0 0.4rem; color: var(--color-text-muted); }

@media (max-width: 900px) { .wissen-mapping-wysiwyg { grid-template-columns: minmax(0, 1fr); } .wissen-mapping-seite { position: static; } }

/* Daten: Mehrfachauswahl + Sammel-Löschen */
.wissen-bulkbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; background: var(--color-primary-light); border: 1px solid var(--color-primary); border-radius: var(--radius); }
.wissen-bulkbar[hidden] { display: none; }
/* Chatbot: Datenquellen-Picker (Datengruppen + externe Quellen) */
.wissen-quellen-picker { display: flex; flex-direction: column; gap: 0.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.4rem 0.5rem; max-height: 240px; overflow-y: auto; }
.wissen-quelle-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: calc(var(--radius) - 3px); font-size: 0.9rem; cursor: pointer; }
.wissen-quelle-option:hover { background: var(--color-surface-hover); }
.wissen-quelle-option .wissen-quelle-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Datenqualität: „Wissen ergänzen"-Formular (Text/Datei-Umschalter) */
.wissen-ergaenzen-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
.wissen-ergaenzen-tabs .chip { cursor: pointer; }
.wissen-ergaenzen-tabs .chip input { margin-right: 0.35rem; }
.wissen-ergaenzen-tabs .chip:has(input:checked) { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.wissen-ergaenzen-form .form-group { margin-bottom: 0.75rem; }
/* Chatbot-Liste als Kacheln — 3 pro Zeile, mit Nutzungs-Stats + 7-Tage-Chart */
.wissen-bot-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1024px) { .wissen-bot-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wissen-bot-karten { grid-template-columns: 1fr; } }
.wissen-bot-karte { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; }
.wissen-bot-karte:hover { border-color: var(--color-primary); box-shadow: var(--shadow); text-decoration: none; }
.wissen-bot-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wissen-bot-name { font-weight: 600; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wissen-bot-titel { font-size: 0.86rem; }
.wissen-bot-scope { font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem; }
.wissen-bot-scope svg { color: var(--color-text-muted); flex: 0 0 auto; }
.wissen-bot-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.wissen-bot-stat { display: flex; flex-direction: column; gap: 0.1rem; }
.wissen-bot-stat-wert { font-size: 1.15rem; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.wissen-bot-stat-label { font-size: 0.72rem; color: var(--color-text-muted); }
.wissen-bot-chart-titel { font-size: 0.72rem; margin-top: 0.35rem; }
.wissen-bot-chart { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.wissen-bot-bar { flex: 1; min-height: 3px; background: var(--color-primary); opacity: 0.85; border-radius: 3px 3px 0 0; transition: opacity 0.12s; }
.wissen-bot-karte:hover .wissen-bot-bar { opacity: 1; }
/* Chatbot-Detail: häufigste Fragen (Top 5) */
.wissen-topfragen { margin: 0.25rem 0 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.wissen-topfragen li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.wissen-topfrage-text { min-width: 0; }
.wissen-topfrage-count { flex: 0 0 auto; color: var(--color-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
/* Kompakte Variante in der Chatbot-Kachel: lange Fragen einzeilig kürzen */
.wissen-topfragen--kompakt { padding-left: 1.2rem; gap: 0.25rem; font-size: 0.82rem; }
.wissen-topfragen--kompakt li { color: var(--color-text); }
.wissen-topfragen--kompakt .wissen-topfrage-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wissen-topfragen--kompakt .wissen-topfrage-count { font-size: 0.76rem; }
.wissen-bulkbar-info { font-weight: 600; }

/* Datengruppe: Indexierungs-Fortschritt */
.wissen-index-fortschritt { margin-bottom: 1rem; }
.wissen-fortschritt-kopf { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.wissen-fortschritt-bar { height: 8px; background: var(--color-bg); border-radius: 999px; overflow: hidden; }
.wissen-fortschritt-bar-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.5s ease; }
.wissen-fortschritt-hinweis { font-size: 0.8rem; margin-top: 0.5rem; }

/* Fusszeile unter einem Textfeld der Popup-Masken: Aktion links, Zeichenzaehler
   rechts (--end: nur Zaehler). Ersetzt die frueheren Inline-Flex-Styles. */
.wissen-feld-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; }
.wissen-feld-fuss--end { justify-content: flex-end; }
.wissen-feld-fuss .wissen-char-counter { margin-top: 0; }

/* Chatbot: Farbwahl, Embed-Zeile (Feld + Kopieren) und Demo-iframe —
   vorher Inline-Styles in chatbot-form.php. */
.wissen-farbfeld { width: 80px; height: 2.4rem; padding: 2px; }
.wissen-embed-zeile { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.5rem; }
.wissen-embed-zeile .wissen-embed-feld { flex: 1; font-family: var(--font-mono, monospace); font-size: 0.8rem; }
.wissen-chatbot-demo { display: block; width: 100%; height: 560px; margin-top: 0.75rem; border: 1px solid var(--color-border); border-radius: 12px; }

/* Einstellungs-Panel (/einstellungen?tab=wissen): schmale Formularspalte,
   abgesetzte Einzelaktionen darunter. */
.wissen-panel-form { max-width: 420px; }
.wissen-panel-form .form-group { margin-bottom: 0; }
.wissen-panel-aktion { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border); }

/* Performance-Detail: Metazeile ueber Tabellen, Rollen-Label im komponierten
   Prompt, Bewertungsformular abgesetzt. */
.wissen-perf-meta { font-size: 0.82rem; margin: 0 0 0.6rem; }
.wissen-perf-antwort + .wissen-perf-antwort, .wissen-perf-detail .wissen-perf-antwort { margin-top: 0.5rem; }
.wissen-perf-rolle { font-size: 0.75rem; text-transform: uppercase; margin-bottom: 0.25rem; }
.wissen-perf-zwischentitel { font-size: 0.9rem; margin: 0.9rem 0 0.4rem; }
.wissen-perf-bewertung-form { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); }
/* modul: zentrale — modules/zentrale/assets/zentrale.css */
/* Modul zentrale — nur Fachliches: Kernschleife (CSS-Strip mit Pfeilen, Erklärung in Schritt 1 des
   Onboarding-Assistenten), die Schrittleiste des Assistenten und die aufklappbare Funktionsliste der
   Bereichsseiten, dazu die Höhe der Widget-Karten auf Zentrale und Bereichsseiten (.zt-widgets).
   Seitenspalte (.page-layout--aside), Bereiche und Widgets sind Core-Bausteine (docs/frontend.md → Komponenten).
   Nur Theme-Variablen; kommt per manifest "styles" ins Core-Bundle (Core 0.82). */

/* ---------- Kernschleife (Onboarding, Schritt 1) ---------- */
.zt-loop { margin-bottom: 1.5rem; }
.zt-loop-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.zt-loop-step {
    position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.zt-loop-step--aktiv { border-color: var(--color-primary); background: var(--color-primary-light); }
.zt-loop-nr { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.05em; }
.zt-loop-name { font-weight: 700; }
.zt-loop-frage { font-size: 0.78rem; color: var(--color-text-muted); }
/* Pfeil zwischen den Schritten: Linie + Spitze, aus Rahmen gezeichnet */
.zt-loop-step + .zt-loop-step::before {
    content: ""; position: absolute; left: -0.5rem; top: 50%; width: 0.5rem; height: 2px; margin-top: -1px;
    background: var(--color-primary);
}
.zt-loop-step + .zt-loop-step::after {
    content: ""; position: absolute; left: -0.3rem; top: 50%; width: 0.4rem; height: 0.4rem; margin-top: -0.2rem;
    border-top: 2px solid var(--color-primary); border-right: 2px solid var(--color-primary); transform: rotate(45deg);
}
/* Rueckpfeil: Ergebnis (rechts) speist Wissen & Status (links) */
.zt-loop-back {
    position: relative; margin: 0.35rem 0.75rem 0; height: 1.6rem;
    border-left: 2px dashed var(--color-primary); border-right: 2px dashed var(--color-primary); border-bottom: 2px dashed var(--color-primary);
    border-radius: 0 0 var(--radius) var(--radius);
}
.zt-loop-back::before {
    content: ""; position: absolute; left: -0.3rem; top: -0.2rem; width: 0.45rem; height: 0.45rem;
    border-top: 2px solid var(--color-primary); border-left: 2px solid var(--color-primary); transform: rotate(45deg);
}
.zt-loop-back-text {
    position: absolute; left: 50%; bottom: -0.65rem; transform: translateX(-50%); white-space: nowrap;
    padding: 0 0.6rem; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: var(--color-bg);
}
@media (max-width: 800px) {
    .zt-loop-steps { grid-template-columns: 1fr; }
    .zt-loop-step + .zt-loop-step::before { left: 50%; top: -0.5rem; width: 2px; height: 0.5rem; margin: 0 0 0 -1px; }
    .zt-loop-step + .zt-loop-step::after { left: 50%; top: -0.35rem; margin: 0 0 0 -0.2rem; transform: rotate(135deg); }
    .zt-loop-back { height: 1rem; margin-top: 0.75rem; }
}

/* ---------- Startseiten: Widget-Karten so hoch wie ihr Inhalt (Audit Q13) ----------
   Core streckt Karten einer Rasterzeile auf gleiche Höhe (.dashboard-widget > .card flex 1).
   Auf Zentrale und Bereichsseiten stehen kurze Leerzustände neben langen Listen — gestreckt
   blieben bis zu 500 px Leerfläche. Hier: oben ausrichten, Karte nicht strecken. */
.zt-widgets .dashboard-widgets { align-items: start; }
.zt-widgets .dashboard-widget > .card { flex: 0 1 auto; }

/* ---------- Bereichs-Startseite: aufklappbare Funktionsliste ---------- */
.zt-details > summary { cursor: pointer; }

/* ---------- Onboarding: Schrittleiste (Muster Wochenreview, fuehrung.css) ---------- */
.zt-schritte {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; grid-template-columns: repeat(var(--zt-spalten, 7), minmax(0, 1fr)); gap: 0.5rem;
}
.zt-schritt {
    display: flex; align-items: center; gap: 0.5rem; min-width: 0; height: 100%;
    padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem;
}
.zt-schritt:hover { border-color: var(--color-primary); color: var(--color-text); text-decoration: none; }
.zt-schritt-nr {
    flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    background: var(--color-surface-hover); color: var(--color-text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.zt-schritt-titel { min-width: 0; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; }
.zt-schritt--erledigt .zt-schritt-nr { background: var(--color-success); color: var(--color-surface); }
.zt-schritt--aktiv { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-text); font-weight: 600; }
.zt-schritt--aktiv .zt-schritt-nr { background: var(--color-primary); color: var(--color-surface); }
@media (max-width: 1100px) { .zt-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .zt-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Einrichtungsaufgaben: Knoepfe rutschen auf schmalen Seiten unter den Text */
.zt-aufgaben > li { flex-wrap: wrap; }
.zt-aufgaben > li > .stack { flex: 1 1 18rem; min-width: 0; }
/*
 * project.css — Produkt-Styles faictory-hirn (Erweiterungspunkt, kommt als
 * letzte Datei ins CSS-Bundle; nach Aenderung: bash bin/build-css.sh).
 *
 * Nur produktweite Kleinigkeiten. Modul-Styles liegen im jeweiligen Modul
 * (z. B. modules/entwicklung/assets/entwicklung.css) und werden von den
 * Modul-Views geladen. Kundeninstanzen ergaenzen public/assets/css/kunde.css.
 */

/* === Produkt-Tokens (F-023) ==============================================
   Schichten, spaetere gewinnen:
     1. public/assets/css/themes.css        Core-Themes light/dark
     2. project.css (hier)                   neutrale Produkt-CI Unternehmenshirn
     3. <style id="ci-theme">                CI-Panel /einstellungen?tab=ci (partials/ci-style,
                                             nach dem Bundle) — ueberschreibt Farben und --radius
     4. public/assets/css/kunde.css          Kunden-Gebiet (nach dem CI-Block)
   Die Farbwerte entsprechen app.ci_defaults (config/config.local.php) und
   deploy/ci-presets/neutral.json: Navy-Akzent, neutrales Grau statt Violett.
   Module und Produkt-CSS nutzen die --hirn-*-Aliasse (Typo-Skala, Radien,
   Schatten, semantische Farben) — sie folgen automatisch Theme und CI. */
:root {
    /* Typo-Skala (rem, Basis 16px; body bleibt Core: Inter, line-height 1.6) */
    --hirn-font-xs: 0.75rem;
    --hirn-font-sm: 0.8125rem;
    --hirn-font-base: 0.875rem;
    --hirn-font-md: 1rem;
    --hirn-font-lg: 1.125rem;
    --hirn-font-xl: 1.375rem;   /* = h1 im Core */
    --hirn-font-2xl: 1.75rem;
    --hirn-line-tight: 1.3;
    --hirn-line-normal: 1.5;
    --hirn-weight-strong: 600;

    /* Radien: --radius setzt das CI-Panel (ci_radius 0–18) */
    --radius: 10px;
    --hirn-radius-sm: max(calc(var(--radius) - 4px), 2px);
    --hirn-radius: var(--radius);
    --hirn-radius-lg: calc(var(--radius) + 6px);
    --hirn-radius-pill: 999px;

    /* Button-Verlauf neutral: flach in der Akzentfarbe (CI ci_gradient ueberschreibt) */
    --accent: #1f3a5f;
    --accent-2: #1f3a5f;
    --accent-gradient: var(--color-primary);
}

[data-theme="light"], :root {
    --color-primary: #1f3a5f;
    --color-primary-dark: #1a3151;
    --color-primary-light: #e9ebef;
    --color-chart2: #2a9d8f;
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-hover: #fafafb;
    --color-text: #1b1f2a;
    --color-text-muted: #6b6d75;
    --color-text-light: #989a9f;
    --color-border: #e3e5e9;
    --color-border-light: #f0f1f4;
    --shadow: 0 1px 2px rgba(27, 31, 42, 0.05), 0 4px 16px rgba(27, 31, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(27, 31, 42, 0.06), 0 2px 4px rgba(27, 31, 42, 0.04);
    --shadow-lg: 0 10px 15px rgba(27, 31, 42, 0.06), 0 4px 6px rgba(27, 31, 42, 0.03);
    --tile-border: rgba(27, 31, 42, 0.06);
    --shadow-tile: 0 1px 2px rgba(27, 31, 42, 0.04), 0 6px 20px rgba(27, 31, 42, 0.08);
    --shadow-tile-hover: 0 2px 4px rgba(27, 31, 42, 0.05), 0 14px 32px rgba(27, 31, 42, 0.14);
    --login-gradient: linear-gradient(135deg, #eef2f7 0%, #f8f9fb 50%, #eef1f5 100%);
}

/* Dark: der Light-Block oben matcht ueber :root auch im Dark-Mode und steht nach
   themes.css — deshalb hier JEDE dort gesetzte Variable erneut (Grautoene und
   Schatten = Core-Dark-Werte aus themes.css). */
[data-theme="dark"] {
    /* Ableitung wie core/CiStyle.php, Akzent aber staerker aufgehellt (Text-Kontrast
       auf --color-surface 5.7:1 statt 3.6:1); --color-primary-dark = Akzent als Flaeche */
    --color-primary: #8493a7;
    --color-primary-dark: #1f3a5f;
    --color-primary-light: rgba(132, 147, 167, 0.15);
    --color-chart2: #62b8ae;
    --accent-gradient: var(--color-primary-dark);
    --color-bg: #09090b;
    --color-surface: #18181b;
    --color-surface-hover: #27272a;
    --color-text: #fafafa;
    --color-text-muted: #a1a1aa;
    --color-text-light: #71717a;
    --color-border: #27272a;
    --color-border-light: #1e1e22;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.3);
    --tile-border: #27272a;
    --shadow-tile: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-tile-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.5);
    --login-gradient: linear-gradient(135deg, #09090b 0%, #0d1119 50%, #09090b 100%);
}

:root {
    /* Semantische Aliasse fuer Produkt- und Modul-CSS */
    --hirn-accent: var(--color-primary);
    --hirn-accent-fill: var(--accent-gradient, var(--color-primary));
    --hirn-ink: var(--color-text);
    --hirn-ink-muted: var(--color-text-muted);
    --hirn-surface: var(--color-surface);
    --hirn-ground: var(--color-bg);
    --hirn-line: var(--color-border);
    --hirn-warning: var(--color-warning);
    --hirn-danger: var(--color-error);
    --hirn-shadow-sm: var(--shadow);
    --hirn-shadow-md: var(--shadow-md);
    --hirn-shadow-lg: var(--shadow-lg);
}

/* Dark-Mode-Kontrast CI-abgeleiteter Farben (WCAG AA >= 4.5:1). Der CI-Block leitet
   im Dark-Mode --color-primary = lighten(Akzent, 0.28) ab — fuer dunkle Akzente
   (Navy, Weinrot) nur ~3:1 als Textfarbe. Korrektur auf body-Ebene, damit die
   Werte des CI-Blocks (am <html>) als Eingang dienen, ohne Zyklus:
   - Links: Akzent (--color-primary-dark = Roh-Akzent im CI-Dark-Set) zu 45 % mit Weiss
     -> >= 4.5:1 auf --color-surface auch fuer #000000. Ein CI-Linkfarbwert (ci_link)
     gilt damit nur noch im Light-Mode.
   - Sidebar-Text gedaempft: 88 % der starken Sidebar-Tinte ueber der Sidebar-Flaeche
     (helle CI-Sidebar wird im Dark-Mode mittelgrau, gedaempfte Tinte dort 3.7:1).
     Ohne CI-Sidebar ist --sidebar-ink-strong ungesetzt -> Deklaration ungueltig,
     der Core-Fallback --color-text-muted greift. */
[data-theme="dark"] body {
    --color-link: color-mix(in srgb, var(--color-primary-dark) 45%, #ffffff);
    --sidebar-ink: color-mix(in srgb, var(--sidebar-ink-strong) 88%, var(--sidebar-bg));
}

/* Lizenzbanner (F-011): Markup app/views/hirn/lizenz-banner.php, eingesetzt von project.js.
   Text in --color-text statt --color-warning — .alert--warning erreicht auf der hellen
   Warnflaeche kein WCAG AA (3.0:1); die Warnfarbe traegt nur der (umlaufende) Rahmen —
   keine farbige Linie links. In Entwicklungs-/Demo-Instanzen erscheint das Banner nie. */
.hirn-lizenz-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    border: 1px solid var(--hirn-warning);
    border-radius: var(--hirn-radius);
    background: var(--hirn-surface);
    color: var(--hirn-ink);
    box-shadow: var(--hirn-shadow-sm);
    font-size: var(--hirn-font-base);
    line-height: var(--hirn-line-normal);
}
.hirn-lizenz-banner--kulanz_vorbei,
.hirn-lizenz-banner--ungueltig { border-color: var(--hirn-danger); }
.hirn-lizenz-banner-close { flex: 0 0 auto; }