:root {
    /* Vulpera Design System (Corporate Design/VULPERA_DESIGN_SYSTEM.md) -
       verbindliche Tokens, hier 1:1 aus dem Dokument übernommen. */
    --color-polar-night: #0b0f14;
    --color-sidebar: #07111f;
    --color-surface: #111827;
    --color-surface-elevated: #162033;
    --color-surface-hover: #1c2a3d;
    --color-surface-selected: #17304a;

    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-disabled: #64748b;

    --color-arctic-blue: #2563eb;
    --color-arctic-blue-rgb: 37, 99, 235;
    --color-glacier-blue: #4da3ff;
    --color-glacier-cyan: #22d3ee;
    --color-glacier-cyan-rgb: 34, 211, 238;
    --color-aurora-green: #22c55e;
    --color-aurora-green-rgb: 34, 197, 94;
    --color-carbon: #a78bfa;
    --color-carbon-rgb: 167, 139, 250;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-critical: #ef4444;
    --color-critical-rgb: 239, 68, 68;

    --color-border: rgba(148, 163, 184, 0.20);
    --color-border-strong: rgba(148, 163, 184, 0.34);
    --color-focus: #4da3ff;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.18);
    --shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.45);

    --duration-fast: 120ms;
    --duration-standard: 200ms;
    --duration-slow: 250ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --font-heading: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Bestehende --brand-*-Variablen bleiben als Aliase erhalten, damit älterer
       CSS-Code unverändert funktioniert - Design-System-Tokens sind jetzt aber
       die kanonische Quelle für die tatsächlichen Werte. */
    --brand-bg: var(--color-polar-night);
    --brand-surface: var(--color-surface);
    --brand-surface-2: var(--color-surface-elevated);
    --brand-primary: var(--color-arctic-blue);
    --brand-primary-rgb: var(--color-arctic-blue-rgb);
    --brand-primary-light: var(--color-glacier-blue);
    --brand-primary-dark: #1d4ed8;
    --brand-primary-darker: #1e40af;
    --brand-accent: var(--color-glacier-cyan);
    --brand-accent-rgb: var(--color-glacier-cyan-rgb);
    --brand-success: var(--color-aurora-green);
    --brand-warning: var(--color-warning);
    --brand-danger: var(--color-critical);
    --brand-violet: var(--color-carbon);
    --brand-navbar-bg: var(--color-polar-night);
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-header, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Typografische Skala (VULPERA_DESIGN_SYSTEM.md #5). In den bestehenden
   Templates steuern die Bootstrap-Utility-Klassen .h4/.h5/.h6 die tatsächliche
   optische Größe (Seitentitel = .h4, Hauptbereiche = .h5, Kartenüberschriften
   = .h6), unabhängig vom Tag-Level - daher werden hier genau diese Klassen auf
   die entsprechenden Design-System-Stufen (H1/H2/H3) gemappt. */
h1, .h1, h4, .h4 { font-size: 2rem; line-height: 2.5rem; font-weight: 650; }
h2, .h2, h5, .h5 { font-size: 1.5rem; line-height: 2rem; font-weight: 650; }
h3, .h3, h6, .h6 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }

.text-label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 550; }

/* Lucide-Icons (inline SVG, siehe apps/organization/templatetags/icons.py) -
   einheitliche Linienstaerke, uebernehmen die Textfarbe des Elternelements. */
.lucide-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.text-caption { font-size: 0.75rem; line-height: 1rem; font-weight: 450; color: var(--color-text-muted); }
.text-body-l { font-size: 1rem; line-height: 1.5rem; }

.kpi-main-value, .kpi-ring-value, .metric-value {
    font-variant-numeric: tabular-nums;
}

/* Bootstraps eingebautes Dark Theme (data-bs-theme="dark" auf <html>) übernimmt
   Grundkontrast für Cards/Tabellen/Formulare automatisch; wir legen unsere
   Marken-Variablen darüber, statt jede Komponente einzeln neu zu bauen. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--brand-bg);
    --bs-body-color: #e2e8f0;
    --bs-tertiary-bg: var(--brand-surface-2);
    --bs-secondary-bg: var(--brand-surface);
    --bs-border-color: #2d3b4f;
    --bs-border-color-translucent: #2d3b4f;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-primary-text-emphasis: var(--brand-primary-light);
    --bs-link-color: var(--brand-primary-light);
    --bs-link-color-rgb: 77, 163, 255;
    --bs-link-hover-color: var(--brand-accent);
    --bs-link-hover-color-rgb: var(--brand-accent-rgb);
    --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.35);
    --bs-success: var(--brand-success);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: var(--brand-primary-darker);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary-light);
    --bs-btn-border-color: var(--brand-primary-light);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

/* Buttons (VULPERA_UI_COMPONENT_LIBRARY.md #11): Radius 12px, Höhen
   ~32/40/48px über Bootstraps eigene Button-Variablen. */
.btn {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 0.9rem;
    transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.btn-sm {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.85rem;
}

.btn-lg {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: 1rem;
}

/* Form Controls (Component Library #13): ~40px Höhe, Radius 10-12px. */
.form-control, .form-select {
    border-radius: var(--radius-md);
    min-height: 2.5rem;
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 2px var(--color-polar-night), 0 0 0 4px var(--color-focus);
}

/* Tabellen (Component Library #16): ~52px Standardzeile, ~44px kompakt. */
.table td, .table th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    vertical-align: middle;
}

.table-sm td, .table-sm th {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.brand-zero {
    color: var(--brand-accent);
}

.kanban-column {
    min-height: 200px;
}

.measure-card {
    cursor: pointer;
}

.plan-container {
    max-width: 100%;
}

.plan-container img {
    max-height: 70vh;
    display: block;
}

.plan-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: block;
}

.plan-marker-dot {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.plan-marker-dot.meter {
    background: var(--brand-primary);
}

.plan-marker-dot.measure {
    background: var(--brand-accent);
}

.plan-editor-image {
    cursor: crosshair;
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

.area-summary-card {
    border-top: 3px solid var(--brand-primary);
}

.area-energy-block + .area-energy-block {
    border-left: 1px solid var(--bs-border-color);
}

/* App Shell (Component Library #2): Sidebar 248px/72px eingeklappt, Topbar 64px sticky. */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-shell-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-main {
    min-width: 0;
    flex: 1 1 auto;
}

/* Sidebar (Component Library #3): dunkler als der Inhaltsbereich, 248px Breite,
   44px Eintragshöhe, 3px Aktiv-Indikator links. */
.app-sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--color-sidebar);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: width var(--duration-standard) var(--ease-standard);
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 4rem;
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex: 0 0 auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    line-height: 0;
    flex: 0 0 auto;
}

.sidebar-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.sidebar-collapse-icon-open {
    display: none;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) var(--space-3);
}

.sidebar-footer {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.sidebar-list {
    margin: 0 0 var(--space-2);
}

.sidebar-list li + li {
    margin-top: var(--space-1);
}

.sidebar-group {
    margin-top: var(--space-5);
}

.sidebar-nav .sidebar-group:first-child,
.sidebar-footer .sidebar-group:first-child {
    margin-top: 0;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0 0.75rem;
    margin-bottom: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sidebar-group-toggle:hover,
.sidebar-group-toggle:focus-visible {
    color: var(--color-text-secondary);
}

.sidebar-group-chevron {
    display: inline-flex;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-chevron {
    transform: rotate(90deg);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.sidebar-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.sidebar-link.active {
    background: var(--color-surface-selected);
    border-left-color: var(--color-arctic-blue);
    color: var(--color-text-primary);
    font-weight: 600;
}

.sidebar-link-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: inherit;
}

.sidebar-link-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-link-label {
    white-space: normal;
    line-height: 1.25;
    /* Einwort-Namen wie "Entscheidungszentrale" haben keine Leerstelle zum
       Umbrechen und liefen unter die (halbtransparente) Handlungszahl -
       sichtbar, sobald sie zweistellig wird. Silbentrennung nach deutschen
       Regeln (lang="de" in base.html), Notumbruch als Netz darunter. */
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Zweite Zeile fuer die Produktnamen (VulperaLoop/VulperaEffect/VALERI) - der
   Name allein sagt einem neuen Nutzer nicht, was ihn erwartet. */
.sidebar-link-subtitle {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--color-text-disabled);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-link.active .sidebar-link-subtitle,
.sidebar-link:hover .sidebar-link-subtitle {
    color: var(--color-text-muted);
}

/* Handlungszahl (ueberfaellig/neu/offen). Bewusst zurueckhaltend: Amber statt
   Rot, weil es Arbeitsvorrat ist, kein Alarm. */
.sidebar-link-badge {
    flex: 0 0 auto;
    min-width: 1.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-pill);
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.sidebar-backdrop {
    display: none;
}

/* Ergebnisliste der Unternehmenssuche (Unternehmensstruktur). */
.structure-search-results {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 24rem;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    box-shadow: 0 12px 32px rgba(2, 6, 14, 0.45);
}

.structure-search-group {
    margin: var(--space-2) 0 var(--space-1);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.structure-search-list {
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
}

.structure-search-hit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-2);
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.structure-search-hit:hover,
.structure-search-hit:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.structure-search-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.structure-search-id {
    font-size: 0.75rem;
    color: var(--color-glacier-cyan);
    text-align: right;
    white-space: nowrap;
}

/* Strukturpfad darf umbrechen statt die Zeile zu sprengen; der vollstaendige
   Pfad steht zusaetzlich im title-Attribut. */
.structure-search-path {
    grid-column: 1;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.structure-search-meta {
    grid-column: 2;
    font-size: 0.75rem;
    color: var(--color-text-disabled);
    text-align: right;
    white-space: nowrap;
}

.structure-search-empty {
    margin: 0;
    padding: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Eingeklappter Desktop-Zustand: nur Icons, Tooltip uebernimmt die Beschriftung
   (nur ab lg - der mobile Drawer bleibt davon unberuehrt, siehe unten). */
@media (min-width: 992px) {
    html.app-shell--collapsed .app-sidebar {
        width: 72px;
        flex-basis: 72px;
    }

    html.app-shell--collapsed .sidebar-brand-text,
    html.app-shell--collapsed .sidebar-group-title,
    html.app-shell--collapsed .sidebar-group-chevron,
    html.app-shell--collapsed .sidebar-link-text,
    html.app-shell--collapsed .sidebar-link-label,
    html.app-shell--collapsed .sidebar-link-subtitle {
        display: none;
    }

    /* Die Handlungszahl bleibt sichtbar - sie ist der Grund, warum jemand die
       eingeklappte Leiste ueberhaupt anschaut. Als Punkt am Icon statt als
       Zahl, fuer die 72px kein Platz ist. */
    html.app-shell--collapsed .sidebar-link-badge {
        position: absolute;
        top: 0.35rem;
        right: 0.9rem;
        min-width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        font-size: 0;
        background: var(--color-warning);
    }

    html.app-shell--collapsed .sidebar-link {
        position: relative;
    }

    html.app-shell--collapsed .sidebar-group-toggle {
        display: none;
    }

    html.app-shell--collapsed .sidebar-group .collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    html.app-shell--collapsed .sidebar-collapse-icon-close {
        display: none;
    }

    html.app-shell--collapsed .sidebar-collapse-icon-open {
        display: inline-flex;
    }

    html.app-shell--collapsed .sidebar-link {
        justify-content: center;
    }
}

/* Topbar (Component Library #4): 64px, sticky bei langen Seiten. */
.app-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 4rem;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    flex: 0 0 auto;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.topbar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--brand-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.global-context-filter {
    gap: var(--space-4);
}

.context-filter-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    white-space: nowrap;
}

.context-filter-static {
    color: var(--color-text-muted);
}

.context-filter-form {
    margin: 0;
    display: flex;
}

/* Plattformzugriff: Ein Konto, das alle Mandanten sieht, darf in der Kopfzeile
   nicht aussehen wie ein gewoehnlicher Werkswechsel. Warnfarbe statt
   Fehlerfarbe - es ist kein Fehler, sondern ein Zustand, den man bemerken
   soll. */
.context-filter-platform {
    align-items: center;
    gap: var(--space-2);
}

.context-filter-platform-badge,
.context-filter-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-warning, #f59e0b);
    border: 1px solid currentColor;
    white-space: nowrap;
}

.context-filter-warning {
    cursor: help;
}

.context-filter-select {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.topbar-search {
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.75rem;
    width: 240px;
}

.topbar-search-icon {
    color: var(--color-text-muted);
    display: inline-flex;
}

.topbar-search-input {
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
    font-size: 0.875rem;
}

.user-menu-dropdown {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    min-width: 200px;
}

.user-menu-dropdown .dropdown-item {
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
}

.user-menu-dropdown .dropdown-item:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

/* Mobile Drawer: Seitenleiste liegt als Overlay ueber einem abgedunkelten Hintergrund. */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1045;
        height: 100vh;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    .app-sidebar.show ~ .sidebar-backdrop,
    .app-sidebar.collapsing ~ .sidebar-backdrop {
        display: block;
    }
}

/* RPZ-Ampel: rot = hohe Priorität (bedeutender Energieeinsatz), gelb = mittel, grün = niedrig */
.rpz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 1.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: var(--radius-pill);
    padding: 0 0.6rem;
}

.rpz-high {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.rpz-medium {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
}

.rpz-low {
    background: rgba(148, 163, 184, 0.18);
    color: var(--color-text-muted);
}

/* Login-Seite: vollflächiges Markenbild als Hintergrund, Anmelde-Karte
   zentriert. Die im Bild ursprünglich enthaltene Fake-Karte wurde bereits
   bildseitig entfernt (siehe static/img/login-bg-v3.jpg), daher genügt ein
   normaler Cover-Hintergrund -- es gibt nichts mehr, worauf die echte Karte
   pixelgenau ausgerichtet werden müsste. */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-size: cover;
    background-position: center;
    background-color: var(--brand-bg);
}

.login-card-wrap {
    width: 100%;
    max-width: 440px;
}

.login-card {
    background: rgba(10, 14, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    backdrop-filter: blur(20px);
}

.login-card .card-body {
    padding: 2.5rem 2rem;
}

.login-logo-plate {
    display: inline-block;
    background: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.login-logo-plate img {
    display: block;
    width: 104px;
    height: 104px;
    object-fit: contain;
}

.login-input-group {
    position: relative;
}

.login-input-group input {
    padding-right: 2.5rem;
}

.login-input-icon {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .login-page {
        background-image: none !important;
        background: linear-gradient(160deg, var(--brand-bg), var(--brand-surface-2));
    }
}

/* Bootstrap-Cards (Component Library #7): Radius 16px, Border 1px, Innenabstand 20-24px -
   gilt global, da .card in sehr vielen Templates direkt verwendet wird. */
.card {
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: var(--radius-lg);
    --bs-card-bg: var(--color-surface);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}

/* Protokolle: Kennzahlenkarten */
.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: border-color var(--duration-standard) var(--ease-standard), background var(--duration-standard) var(--ease-standard);
}

.metric-card:hover {
    background: var(--color-surface-hover);
    border-color: rgba(var(--brand-primary-rgb), 0.4);
}

.metric-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon.icon-blue { background: rgba(var(--color-arctic-blue-rgb), 0.18); color: var(--brand-primary-light); }
.metric-icon.icon-amber { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.metric-icon.icon-green { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.metric-icon.icon-red { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
.metric-icon.icon-violet { background: rgba(var(--color-carbon-rgb), 0.18); color: var(--color-carbon); }

.metric-value {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Status-Badge (Component Library #18): 24px hoch, Pill, 12px/600. */
.status-badge {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.status-draft, .status-planned { background: rgba(var(--brand-primary-rgb), 0.18); color: var(--brand-primary-light); }
.status-in_review, .status-maintenance { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-approved, .status-active { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-archived, .status-decommissioned { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
/* Statusweg des Umweltaspekts. "Archiviert" und "Entfallen" sind kein Fehler,
   sondern Ergebnisse - deshalb neutral-grau statt in Warnfarbe. "In Bewertung"
   und "Ueberarbeitung erforderlich" sind Arbeitszustaende und teilen sich die
   Aufmerksamkeitsfarbe mit der fachlichen Pruefung. */
.status-in_assessment { background: rgba(var(--brand-primary-rgb), 0.14); color: var(--brand-primary-light); }
.status-revision_required { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-obsolete { background: rgba(100, 116, 139, 0.16); color: var(--color-text-muted); }
.status-inactive, .status-replaced { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-pending { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-confirmed { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-not_effective { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
.status-running { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-success { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-partial { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-failed { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
/* Nicht ausgeführt mangels Daten: neutral-grau, ausdrücklich NICHT warn- oder
   fehlerfarben - eine fehlende Datenlage ist keine Störung. */
.status-skipped_no_data { background: rgba(100, 116, 139, 0.16); color: var(--color-text-muted); }
.status-configuration_required { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

/* Bindende Verpflichtungen: Erfüllungsstatus (repariert nebenbei die bislang
   ungestylten Badges auf der Bereich-Detailseite). */
.status-not_yet_assessed { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-compliant { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-under_review { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-non_compliant { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }

/* Ursachenbewertungs-/Maßnahmenübernahme-Workflow: Befund/Ursache/Empfehlung/Maßnahme-Status. */
.status-new, .status-proposed { background: rgba(var(--brand-primary-rgb), 0.18); color: var(--brand-primary-light); }
.status-in_progress { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-measure_created, .status-effectiveness_confirmed, .status-verified { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-measure_required { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-explained { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-closed { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-false_positive, .status-dismissed, .status-rejected { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
/* Regressionsmodelle: freigegeben = gruen, abgeloest = neutral-grau (kein
   Fehler - eine abgeloeste Version ist Nachweis, keine Stoerung). Deckt
   nebenbei die bislang ungestylte abgeloeste Ausgangsbasis mit ab. */
.status-released { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-superseded { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-unconfirmed { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }
.status-partially_confirmed, .status-further_check_required { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-done { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }

/* Verbrauchstool: 5-stufige Datenqualität (Abschnitt 8 der Vorgabe). */
.status-good { background: rgba(34, 197, 94, 0.18); color: var(--brand-success); }
.status-limited { background: rgba(245, 158, 11, 0.18); color: var(--brand-warning); }
.status-insufficient { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
.status-estimated { background: rgba(139, 92, 246, 0.18); color: var(--brand-violet); }
.status-no_data { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

/* Importakte: ImportDataQuality (poor/unknown ergänzen die 5-stufige Skala oben). */
.status-poor { background: rgba(239, 68, 68, 0.18); color: var(--brand-danger); }
.status-unknown { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

/* Anlagen: Baumansicht */
/* Der Strukturbaum rueckt je Ebene ein; ab etwa fuenf Ebenen sprengt er auf
   schmalen Geraeten die Seitenbreite. Statt die Einrueckung zu opfern (sie ist
   die Hierarchie) bekommt der Baum eine eigene Scrollflaeche - die Seite
   selbst scrollt nie waagerecht. */
.structure-tree-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.asset-tree-node { margin-bottom: 0.15rem; }
.asset-tree-children { margin-left: 1.4rem; border-left: 1px dashed var(--bs-border-color); padding-left: 0.9rem; }
.asset-tree-row {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 0.4rem;
    text-decoration: none; color: inherit;
}
.asset-tree-row:hover { background: rgba(var(--brand-primary-rgb), 0.08); color: inherit; }
.asset-tree-toggle {
    width: 1.2rem; text-align: center; color: #94a3b8; background: none; border: none; padding: 0;
}

.open-actions-count { font-weight: 600; }
.open-actions-count.count-neutral { color: #94a3b8; }
.open-actions-count.count-low { color: var(--brand-warning); }
.open-actions-count.count-high { color: var(--brand-danger); }

/* Protokolle: Tabellenzeilen */
.protocol-row { cursor: pointer; }
.protocol-row:hover { background: rgba(var(--brand-primary-rgb), 0.06); }
.protocol-row.selected { background: rgba(var(--brand-primary-rgb), 0.14); }
.protocol-row td { vertical-align: middle; }

/* Protokolle: rechte Detailspalte */
.protocol-detail-panel {
    background: var(--brand-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    position: sticky;
    top: 1rem;
}

.protocol-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.9rem;
}

.protocol-meta-row:last-child { border-bottom: none; }
.protocol-meta-label { color: #94a3b8; }

.protocol-attachment {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

/* Protokolle: Funktionskarten */
.function-card {
    background: var(--brand-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.function-card:hover {
    background: var(--brand-surface-2);
    border-color: rgba(var(--brand-primary-rgb), 0.4);
    color: inherit;
}

/* Dashboard: KPI-Karte mit optionalem Fortschritts-Ring (VULPERA_UI_COMPONENT_LIBRARY.md #8) */
.kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.25rem 1rem;
    min-height: 144px;
}

.kpi-card-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Energiefluss: echte hierarchische Messabdeckung, keine dekorative Grafik. */
.energy-flow-bar {
    display: flex;
    width: 100%;
    min-height: 34px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
}

.energy-flow-segment { min-width: 0; transition: opacity 0.15s ease; }
.energy-flow-segment:hover { opacity: 0.82; }
.energy-flow-segment--0, .energy-flow-key--0 { background: var(--brand-primary); }
.energy-flow-segment--1, .energy-flow-key--1 { background: var(--brand-accent); }
.energy-flow-segment--2, .energy-flow-key--2 { background: var(--brand-success); }
.energy-flow-segment--3, .energy-flow-key--3 { background: var(--brand-warning); }
.energy-flow-segment--4, .energy-flow-key--4 { background: var(--bs-purple); }
.energy-flow-segment--5, .energy-flow-key--5 { background: var(--bs-orange); }
.energy-flow-segment--unassigned, .energy-flow-key--unassigned { background: var(--color-text-muted); }

.energy-flow-key {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.45rem;
    border-radius: 0.2rem;
}

.energy-flow-unassigned-row { border-top: 2px solid var(--color-border); }
.energy-coverage-tile { transition: border-color 0.15s ease, transform 0.15s ease; }
.energy-coverage-tile:hover { border-color: var(--brand-primary); transform: translateY(-1px); }

@media (max-width: 767.98px) {
    .energy-flow-card .table { min-width: 620px; }
    .energy-flow-bar { min-height: 28px; }
}

.kpi-ring-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
}

.kpi-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
}

.kpi-main-value {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

/* Kompaktere Variante nur für die 4 Zielkarten der Dashboard-Übersicht
   (Energieziel/Umweltziele/Offene Maßnahmen/CO2) - bewusst als Modifier statt
   .kpi-card selbst zu ändern, da dieses global in vielen anderen Modulen
   (Umweltbilanz, Verbrauchstool, VALERI, ...) mit der Standardgröße genutzt
   wird und dort nicht verkleinert werden soll. */
.kpi-card--compact {
    padding: 1rem 1.25rem 0.875rem;
    min-height: 128px;
}

.kpi-card--compact .kpi-ring-wrap {
    width: 76px;
    height: 76px;
}

.kpi-card--compact .kpi-ring-value {
    font-size: 1rem;
}

.kpi-card--compact .kpi-main-value {
    font-size: 1.625rem;
}

/* Verbrauchstool: Segmented-Umschalter "Verbrauch"/"Lastgang" - GET-Parameter-
   basiert (kein JS-Framework), Radio-Inputs visuell versteckt, Labels als
   Pillen. Aktive Option in Primärfarbe hervorgehoben (Vorgabe Abschnitt 2). */
.view-toggle {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.25rem;
    gap: 0.25rem;
}

.view-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.view-toggle-option {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.view-toggle input:checked + .view-toggle-option {
    background: var(--brand-primary);
    color: #fff;
}

.view-toggle input:focus-visible + .view-toggle-option {
    outline: 2px solid var(--color-glacier-cyan);
    outline-offset: 2px;
}

/* Verbrauchstool: Filterleiste (Ansicht | Zeitraum | Verdichtung | Vergleich) */
.consumption-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.consumption-filter-bar .form-label {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
}

/* Verbrauchstool: Zählerzeile unter dem Diagramm */
.meter-row-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.meter-row-card + .meter-row-card {
    margin-top: 0.75rem;
}

.meter-row-title {
    font-weight: 600;
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

.meter-row-meta {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* Dashboard: Attention Panel ("Was braucht heute meine Aufmerksamkeit?") */
.attention-list {
    display: flex;
    flex-direction: column;
}

.attention-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}

.attention-item:last-child { border-bottom: none; }

.attention-item:hover { background: rgba(var(--brand-primary-rgb), 0.06); color: inherit; }

.attention-priority-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attention-priority-dot.severity-critical { background: var(--color-critical); }
.attention-priority-dot.severity-warning { background: var(--color-warning); }
.attention-priority-dot.severity-info { background: var(--color-glacier-cyan); }

.attention-context { color: var(--color-text-muted); font-size: 0.8rem; }

/* Modul-Tag je Hinweis (z.B. "Maßnahmen"/"Anlagen"/"Umwelt") - macht den
   priorisierten Handlungsbedarf klarer strukturiert, indem der Themenbereich
   auf einen Blick erkennbar ist statt einer unsortiert wirkenden Liste. */
.attention-module-tag {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Severity-Badges: gemeinsame Farbsprache für Attention Panel + Insights */
.badge-severity {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge-severity.severity-critical { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.badge-severity.severity-danger { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.badge-severity.severity-warning { background: rgba(245, 158, 11, 0.18); color: var(--color-warning); }
.badge-severity.severity-info { background: rgba(6, 182, 212, 0.18); color: var(--color-glacier-cyan); }
.badge-severity.severity-success { background: rgba(34, 197, 94, 0.18); color: var(--color-aurora-green); }
.badge-severity.severity-neutral { background: rgba(100, 116, 139, 0.18); color: var(--color-text-muted); }

/* Dashboard: VulperaAI Panel */
.ai-panel {
    background: linear-gradient(160deg, rgba(37, 99, 235, 0.10), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.ai-insight-card {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}

.ai-insight-card:last-child { margin-bottom: 0; }

/* Dashboard: Maßnahmen-Donut-Legende */
.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Maßnahmen-Detailseite: Zeitplan-Gantt (VULPERA_UI_COMPONENT_LIBRARY.md #29:
   "Gantt: Projekte, Maßnahmen, Ressourcen") - Ableitung aus echten Meilenstein-/
   Aufgaben-Datumsfeldern, siehe apps.measures.services.gantt. */
.gantt-scroll { overflow-x: auto; }

.gantt-grid {
    display: grid;
    row-gap: 0.35rem;
    column-gap: 0;
    min-width: 640px;
}

.gantt-header-label, .gantt-row-label {
    padding-right: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
}

.gantt-header-month {
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}

.gantt-track {
    position: relative;
    height: 1.75rem;
    border-left: 1px solid var(--color-border);
}

.gantt-bar {
    position: absolute;
    inset: 0.2rem 0.15rem;
    border-radius: var(--radius-sm);
    background: var(--color-border-strong);
}

.gantt-bar.gantt-bar-milestone { background: var(--color-glacier-cyan); }
.gantt-bar.status-done { background: var(--color-aurora-green); }
.gantt-bar.status-in-progress { background: var(--color-arctic-blue); }
.gantt-bar.status-overdue { background: var(--color-critical); }

.gantt-milestone {
    position: absolute;
    top: 50%;
    left: 0.35rem;
    width: 0.85rem;
    height: 0.85rem;
    transform: translateY(-50%) rotate(45deg);
    background: var(--color-glacier-cyan);
    border-radius: 2px;
}

.gantt-milestone.status-done { background: var(--color-aurora-green); }
.gantt-milestone.status-overdue { background: var(--color-critical); }

/* Maßnahmen-Detailseite: Änderungsindex als Activity Timeline
   (VULPERA_UI_COMPONENT_LIBRARY.md #28: chronologisch, Ereignistyp, Akteur,
   Zeitpunkt, vorher/nachher). */
.activity-timeline { display: flex; flex-direction: column; }

.activity-item {
    display: flex;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.activity-item:last-child { border-bottom: none; }

.activity-seq {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.activity-body { flex: 1 1 auto; min-width: 0; }
.activity-date { color: var(--color-text-muted); font-size: 0.8rem; }
.activity-title { font-weight: 600; color: var(--color-text-primary); }
.activity-reason { color: var(--color-text-muted); font-size: 0.85rem; }

/* Maßnahmen-Detailseite: Kopfzeile (VULPERA_UI_COMPONENT_LIBRARY.md #5 Page Header) */
.page-header-eyebrow {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

/* Responsives Layout (global, projektweit): Aktionsleisten mit mehreren
   Buttons in einer .d-flex-Zeile (z.B. "Baumansicht"/"Export"/"Anlage
   erstellen") verursachen ohne flex-wrap horizontales Scrolling auf
   schmalen Bildschirmen. Statt jede Vorlage einzeln zu patchen, wird jede
   Flex-Zeile mit mind. 2 direkten .btn-Kindern global umbruchfähig gemacht
   - :has() wird von allen aktuellen Evergreen-Browsern unterstützt. */
.d-flex:has(> .btn + .btn) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* Tabellen ohne .table-responsive-Wrapper (z.B. innerhalb von Cards) nie
   den Seitenkörper aufbrechen lassen, sondern selbst horizontal scrollen. */
.card-body > .table, .card-body > table {
    display: block;
    overflow-x: auto;
}

/* Lange deutsche Komposita (z.B. "Vollständigkeits-/Doppelzählungsprüfung")
   haben keine Leerzeichen zum Umbrechen und sprengen sonst auf schmalen
   Bildschirmen ihre Karte/Spalte - global auf Überschriften und Kartentexte
   angewendet, da dieses Muster projektweit in der Fachsprache vorkommt. */
h1, h2, h3, h4, h5, h6, .kpi-card, .metric-card, .card-body {
    overflow-wrap: break-word;
}

/* Lastganganalyse im Befunddetail: ein Button, damit das Vergrößern auch per
   Tastatur erreichbar ist - optisch aber ein reiner Diagrammrahmen. Die feste
   Höhe kommt vom Container statt vom canvas-Attribut, weil Chart.js mit
   `maintainAspectRatio: false` die Zeichenfläche des Elternelements füllt. */
.loadcurve-frame {
    display: block;
    width: 100%;
    height: 300px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    /* Ohne Ersatzwert: ein `var(--token, fallback)` maskiert ein fehlendes
       Token, statt es sichtbar zu machen - so wurde die Zielkachel weiß. */
    border-radius: var(--radius-md);
    cursor: zoom-in;
    transition:
        border-color var(--duration-standard) var(--ease-standard),
        background-color var(--duration-standard) var(--ease-standard);
}

.loadcurve-frame:hover,
.loadcurve-frame:focus-visible {
    border-color: var(--color-border-strong);
    background-color: var(--color-surface-hover);
}

.loadcurve-frame-large {
    height: min(65vh, 620px);
}

/* Zielkachel: die Variante "Interactive" der Card aus der Komponentenbibliothek
   (Radius 16 px, Innenabstand 20-24 px). Die gesamte Kachel ist der Link zur
   Detailseite - laut Vorgabe zulässig, weil sie genau ein Ziel hat. Als <a>
   statt <div> mit JS-Klick, damit Tastaturbedienung und "in neuem Tab öffnen"
   ohne Zutun funktionieren.

   Farben ausschließlich über die Design-Tokens: eine hart notierte Fläche
   (oder ein Ersatzwert für ein Token, das es nicht gibt) bricht die dunkle
   Oberfläche - genau das war hier der Fall. */
.objective-card {
    display: block;
    height: 100%;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    transition:
        border-color var(--duration-standard) var(--ease-standard),
        background-color var(--duration-standard) var(--ease-standard),
        transform var(--duration-standard) var(--ease-standard);
}

.objective-card:hover,
.objective-card:focus-visible {
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.objective-card:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Der Zielerreichungsgrad ist die Kernaussage der Kachel - er muss die
   Vordergrundfarbe tragen, nicht die gedämpfte Sekundärfarbe. */
.objective-card .kpi-main-value {
    color: var(--color-text-primary);
}

/* ---------------------------------------------------------------------------
   Flussbild der Umweltbilanz (Input | Prozess + Freisetzungen | Output)

   Dieselben Klassennamen verwendet die Druckseite (environment/balance_pdf.html)
   mit einem eigenen, hellen Stylesheet. Markup und Zahlen kommen aus einem
   gemeinsamen Template, nur die Darstellung unterscheidet sich - Bildschirm
   dunkel, Papier hell.
   --------------------------------------------------------------------------- */
.flowmap {
    display: grid;
    grid-template-columns: 1fr 40px 1fr 40px 1fr;
    align-items: start;
    gap: 0;
}

.flowmap-col {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.flowmap-colhead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.flowmap-colname {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--color-text-primary);
}

.flowmap-count {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.flowmap-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.flowmap-dot-input { background: var(--color-glacier-cyan); }
.flowmap-dot-release { background: var(--color-warning); }
.flowmap-dot-output { background: var(--color-carbon); }

.flowmap-group {
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.flowmap-group:last-child { border-bottom: none; }

.flowmap-grouphead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.flowmap-grouplabel {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.flowmap-grouptotal {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Eine Teilsumme darf nicht wie eine Gesamtsumme aussehen. */
.flowmap-grouptotal-partial { color: var(--color-warning); }

.flowmap-groupnote {
    font-size: 0.7rem;
    color: var(--color-warning);
    margin-bottom: var(--space-1);
}

.flowmap-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: 2px 0;
}

/* `min-width: 0` ist hier der Punkt: ohne das schrumpft ein Flex-Element nicht
   unter seine Inhaltsbreite, und ein langer Positionsname ("Netzstrombezug
   (Gesamtunternehmen)") schiebt den Mengenwert aus der Spalte. Der Name darf
   umbrechen, der Wert nicht - eine umgebrochene Zahl ist unlesbar. */
.flowmap-name {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
}

.flowmap-value {
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.flowmap-novalue {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-style: italic;
    white-space: nowrap;
}

.flowmap-empty,
.flowmap-gap {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.flowmap-empty {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Eine fehlende Bilanzgruppe wird benannt, nicht weggelassen - eine Bilanz,
   die ihre Lücken versteckt, ist als Nachweis wertlos. */
.flowmap-gap {
    border-left: 3px solid var(--color-warning);
    background: var(--color-surface-hover);
}

.flowmap-gap-title {
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.flowmap-gap-text {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.45;
}

.flowmap-arrow,
.flowmap-arrow-down {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.flowmap-arrow { padding-top: 3.5rem; }
.flowmap-arrow-down { padding: var(--space-2) 0; }

.flowmap-process {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-elevated);
    padding: var(--space-4);
    text-align: center;
}

.flowmap-process-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.flowmap-process-name {
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

.flowmap-process-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.flowmap-process-missing {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.flowmap-process-boundary {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 900px) {
    .flowmap { grid-template-columns: 1fr; gap: var(--space-3); }
    .flowmap-arrow { padding: 0; transform: rotate(90deg); }
}

/* Zeitvergleich im Flussbild ------------------------------------------------ */
.flowmap-comparebar {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-glacier-blue);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

/* Ungleich lange Zeiträume sind der häufigste Weg zu einer falschen Aussage -
   der Kasten muss dann anders aussehen als ein tragfähiger Vergleich. */
.flowmap-comparebar-warn { border-left-color: var(--color-warning); }

.flowmap-comparebar-title {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.flowmap-comparebar-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.45;
}

.flowmap-comparebar-warn .flowmap-comparebar-note { color: var(--color-warning); }

.flowmap-compare {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 0.7rem;
    margin-bottom: var(--space-1);
}

.flowmap-compare-prev { color: var(--color-text-muted); }

/* Bewusst neutral eingefärbt: ob weniger gut ist, hängt von der Bilanzgruppe
   ab (weniger Abfall ja, weniger Produkt nein). Eine Ampel würde eine Wertung
   behaupten, die das System nicht treffen kann. */
.flowmap-compare-delta {
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.flowmap-compare-none { color: var(--color-text-muted); font-style: italic; }

.flowmap-vanished {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-muted);
}

.flowmap-vanished-title { font-size: 0.8125rem; color: var(--color-text-secondary); }

.flowmap-vanished-text {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.45;
}

/* Monatsbericht -------------------------------------------------------------
   Dieselben Klassen nutzt die Druckseite (dashboard/report_pdf.html) mit einem
   eigenen, hellen Stylesheet - Inhalt kommt aus einem gemeinsamen Include. */
.report-sheet {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    padding: var(--space-5) var(--space-6);
}

.report-h2 {
    font-size: 1rem;
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

/* --- Fuehrungsseite ------------------------------------------------------
   Vier Zahlen, zwei Diagramme, die Datenbasis. Deutlich groesser gesetzt als
   die Belegtabellen darunter: Wer den Bericht aufschlaegt, soll die Aussage
   lesen, bevor er die Nachweise sieht. */

.report-fuehrung { margin-bottom: var(--space-8); }

.report-kernzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.report-kernzahl {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    padding: var(--space-4) var(--space-5);
}

.report-kernzahl-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.report-kernzahl-wert {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;
    margin-top: var(--space-1);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.report-kernzahl-einheit {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.3rem;
}

.report-kernzahl-delta {
    font-size: 0.78rem;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}
.report-kernzahl-delta.ist-gut { color: var(--color-aurora-green); }
.report-kernzahl-delta.ist-schlecht { color: var(--color-warning); }

.report-figur { margin: 0 0 var(--space-6); }

.report-figur-titel {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: baseline;
}

.report-figur-legende {
    font-size: 0.74rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.report-figur-legende span {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    margin-left: var(--space-3);
}
.report-figur-legende .ist-berichtsmonat { background: #0e7490; margin-left: 0; }
.report-figur-legende .ist-bezug { background: #94a3b8; }

/* Der SVG-Grund ist hell (er wird auch gedruckt) - auf dunklem Bildschirm
   braucht er deshalb eine eigene Flaeche, sonst steht dunkle Schrift auf
   dunklem Grund. */
.report-figur svg {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* Leistung, Umwelt, Ausblick, KI - die vier Bloecke der Fuehrungsseite
   zwischen den Kernzahlen und der Datenbasis. */

.report-leistung, .report-umwelt, .report-ausblick, .report-ki {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    background: var(--color-surface);
}

.report-leistung-zahl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
}
.report-leistung-zahl > span:first-child {
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.report-leistung-zahl .ist-gut { color: var(--color-aurora-green); }
.report-leistung-zahl .ist-schlecht { color: var(--color-warning); }
.report-leistung-bezug { font-size: 0.85rem; color: var(--color-text-secondary); }

.report-leistung-fehlt {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.report-umwelt-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}
.report-umwelt-name {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.report-umwelt-wert {
    font-size: 1.35rem;
    font-weight: 600;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}
.report-umwelt-einheit {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}
.report-umwelt-hinweis {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 3px;
    line-height: 1.35;
}

/* Die Herleitung der Umweltkennzahl - Zaehler und Nenner mit den
   tatsaechlichen Zahlen. Gemeldet am 17.08.2026: "bei der Reststoffquote
   oder Rezyklatanteil weiss kein Mensch, wo diese Kennzahl herkommt." */
.report-umwelt-herkunft {
    font-size: 0.66rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dotted var(--border-subtle, rgba(128,128,128,0.35));
    line-height: 1.4;
}

.report-ausblick-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.report-ausblick-titel {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}
.report-ausblick-titel .ist-schlecht { color: var(--color-warning); font-weight: 500; }
.report-ausblick-liste {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
    color: var(--color-text-primary);
}
.report-ausblick-liste li { margin-bottom: 3px; }

.report-ki-marke {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
    vertical-align: middle;
}
.report-ki-text {
    white-space: pre-line;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.report-datenbasis {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-glacier-blue);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
}

.report-datenbasis-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-5);
    margin: 0;
}
.report-datenbasis-liste dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 500;
}
.report-datenbasis-liste dd {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-primary);
}

.report-datenbasis-hinweis {
    margin: var(--space-3) 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.report-sheet > .report-h2:first-child { margin-top: 0; }

.report-h3 { font-size: 0.9rem; margin: var(--space-5) 0 var(--space-2); color: var(--color-text-primary); }
.report-lead { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0 0 var(--space-3); line-height: 1.55; }
.report-muted { color: var(--color-text-muted); }

.report-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.report-kpi {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    padding: var(--space-3) var(--space-4);
}

.report-kpi-label {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.report-kpi-value {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.report-kpi-unit { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; }

/* Eine Kennzahl ohne Datengrundlage zeigt einen Strich, keine Null - und
   daneben steht warum. Eine Null waere eine Behauptung. */
.report-kpi-missing { color: var(--color-text-muted); }

.report-kpi-note { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }

table.report-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
table.report-table th, table.report-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
table.report-table th { color: var(--color-text-muted); font-weight: 500; }
table.report-table td { color: var(--color-text-secondary); }
table.report-table td.num, table.report-table th.num {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.report-row-current td { color: var(--color-text-primary); background: var(--color-surface-hover); }

/* Zweite Zeile in einer Tabellenzelle: die Herleitung unter der Zahl - die
   hergestellte Menge unter der Gutmenge, kWh je kg unter kWh je Stück. Sie
   gehoert in dieselbe Zelle, weil sie dieselbe Aussage praezisiert; eine
   eigene Spalte machte aus einer Herleitung eine zweite Kennzahl. */
.report-sub { font-size: 0.88em; color: var(--color-text-muted); }

/* Die drei Monate, gegen die der Berichtsmonat gemessen wird. Sie sind im
   Verlauf hervorgehoben, damit sichtbar bleibt, worauf sich die Abweichung
   bezieht - und ob diese drei selbst schon aus der Reihe fielen. */
.report-row-reference td { background: var(--color-surface-elevated); }

/* Die Anlagentabelle traegt sechs Spalten und ist die einzige, die eng wird.
   Sie scrollt in sich, statt die Seite breiter zu machen. */
.report-table-wide { overflow-x: auto; }

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

/* --- Rückweg in die übergeordnete Ansicht -------------------------------
   Eine Komponente statt fünfzehn Einzellösungen: vorher hatten 13 Seiten je
   eigenes Markup mit unterschiedlichen Bootstrap-Klassen, 15 hatten gar
   keinen. Siehe templates/includes/back_link.html. */
.back-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--brand-primary-light);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   VulperaAudit: Wizard-Schritte, Kapitelauswahl, Geltungsbereichsbaum
   --------------------------------------------------------------------------- */

.audit-steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.audit-step > a,
.audit-step > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
}

.audit-step > a:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.audit-step.is-current > span {
    border-color: var(--color-arctic-blue);
    background: rgba(var(--color-arctic-blue-rgb), 0.12);
    color: var(--color-text-primary);
    font-weight: 600;
}

.audit-step.is-done > a {
    border-color: rgba(34, 197, 94, 0.4);
    color: var(--color-text-secondary);
}

.audit-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-surface-hover);
    font-size: 0.75rem;
    font-weight: 600;
}

.audit-step.is-current .audit-step-number {
    background: var(--color-arctic-blue);
    color: #fff;
}

/* Kapitelauswahl: eine Kachel je Kapitel, Pflichtkapitel abgesetzt. */
.audit-chapter {
    height: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.audit-chapter.is-mandatory {
    border-color: rgba(var(--color-arctic-blue-rgb), 0.35);
    background: rgba(var(--color-arctic-blue-rgb), 0.06);
}

.audit-chapter-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.audit-chapter-tag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.audit-chapter-tag.is-mandatory {
    background: rgba(var(--color-arctic-blue-rgb), 0.2);
    color: var(--color-glacier-blue);
}

.audit-chapter-tag.is-recommended {
    background: rgba(245, 158, 11, 0.18);
    color: var(--color-warning);
}

.audit-chapter-desc,
.audit-chapter-source {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.audit-chapter-source {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    color: var(--color-text-disabled);
}

.audit-chapter-reason {
    margin-top: 0.4rem;
}

/* Geltungsbereichsbaum: Einrückung je Ebene, eigene Scrollfläche wie beim
   Strukturbaum - tiefe Hierarchien dürfen die Seite nicht sprengen. */
.audit-scope-tree {
    max-height: 26rem;
    overflow: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.audit-scope-row {
    padding-left: calc(var(--depth, 0) * 1.1rem);
}

.audit-scope-row .form-check-label {
    font-size: 0.875rem;
}

.audit-scope-icon {
    display: inline-flex;
    margin-right: 0.25rem;
    color: var(--color-text-muted);
    vertical-align: -2px;
}

.audit-scope-code {
    margin-left: 0.3rem;
    padding: 0.02rem 0.35rem;
    border-radius: 3px;
    background: var(--color-surface-hover);
    font-size: 0.7rem;
    color: var(--color-glacier-cyan);
}

/* Datenlage-Badges der Kapitel (ergänzt die vorhandenen status-*-Klassen). */
.status-ok { background: rgba(34, 197, 94, 0.16); color: var(--color-aurora-green); }
.status-no_data { background: rgba(148, 163, 184, 0.16); color: var(--color-text-muted); }
.status-not_computable { background: rgba(245, 158, 11, 0.16); color: var(--color-warning); }
.status-not_applicable { background: rgba(148, 163, 184, 0.12); color: var(--color-text-disabled); }
.status-unsupported { background: rgba(167, 139, 250, 0.16); color: var(--color-carbon); }
.status-generated { background: rgba(var(--color-arctic-blue-rgb), 0.16); color: var(--color-glacier-blue); }

/* ---------------------------------------------------------------------------
   Digitale Datenpunktliste
   Ersetzt die bisherige Excel-Arbeitsmappe. Viele Spalten sind fachlich
   unvermeidbar - damit die Tabelle trotzdem lesbar bleibt: Kopfzeile und die
   beiden Identifikationsspalten (Datensammler, Modul) bleiben beim Scrollen
   stehen. Bewusst KEINE Excel-Optik: keine Gitternetzlinien in beide
   Richtungen, keine abgeschnittenen Texte.
   --------------------------------------------------------------------------- */
.dpl-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
}

.dpl-table {
    /* Ohne Mindestbreite quetscht der Browser die Spalten zusammen, sobald
       viele Gruppen sichtbar sind - dann bricht jede Zelle mehrzeilig um. */
    min-width: 100%;
    white-space: nowrap;
}

.dpl-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-surface, #fff);
    border-bottom: 2px solid var(--color-border, #dee2e6);
    font-size: .8rem;
    font-weight: 600;
    vertical-align: bottom;
}

.dpl-table .dpl-sticky-col,
.dpl-table .dpl-sticky-col-2 {
    position: sticky;
    background: var(--color-surface, #fff);
    z-index: 2;
}

.dpl-table .dpl-sticky-col { left: 0; }
.dpl-table .dpl-sticky-col-2 { left: 11rem; box-shadow: 1px 0 0 var(--color-border, #dee2e6); }

/* Die Kopfzellen der fixierten Spalten müssen über beiden Ebenen liegen,
   sonst schiebt sich der Tabellenkörper beim Scrollen darüber. */
.dpl-table thead .dpl-sticky-col,
.dpl-table thead .dpl-sticky-col-2 { z-index: 4; }

.dpl-table tbody tr:hover .dpl-sticky-col,
.dpl-table tbody tr:hover .dpl-sticky-col-2 {
    background: var(--color-surface-hover, #f8f9fa);
}

@media (max-width: 768px) {
    /* Auf schmalen Geräten kostet eine zweite fixierte Spalte mehr Platz als
       sie an Orientierung bringt. */
    .dpl-table .dpl-sticky-col-2 { position: static; }
    .dpl-scroll { max-height: none; }
}

/* --- Handbuch (Einrichtungsleitfaden) --------------------------------------
   Der Inhalt kommt gerendert aus Markdown, trägt also keine eigenen Klassen -
   deshalb wird hier über Elementselektoren innerhalb von .handbook-body
   gestylt. Das ist die Ausnahme von der Komponentenregel und bleibt bewusst
   auf diesen einen Container begrenzt. */
.handbook-toc {
    position: sticky;
    top: calc(var(--topbar-height, 56px) + var(--space-4, 16px));
    font-size: 0.85rem;
}
.handbook-toc-title {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2, 8px);
}
.handbook-toc-list {
    list-style: none;
    counter-reset: handbook-kap;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--color-border, #22304a);
}
.handbook-toc-list li { counter-increment: handbook-kap; }
.handbook-toc-list a {
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0 0.3rem 0.75rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
}
.handbook-toc-list a::before {
    content: counter(handbook-kap) ".";
    color: var(--color-text-muted);
    min-width: 1.2rem;
}
.handbook-toc-list a:hover {
    color: var(--color-text-primary);
    border-left-color: var(--brand-primary, #2563eb);
}

.handbook-body { line-height: 1.65; }
.handbook-body h2 {
    font-size: 1.15rem;
    font-weight: 650;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--brand-primary, #2563eb);
    scroll-margin-top: calc(var(--topbar-height, 56px) + 1rem);
}
.handbook-body h2:first-child { margin-top: 0; }
.handbook-body h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 1.4rem 0 0.4rem;
}
.handbook-body p { margin-bottom: 0.75rem; }
.handbook-body ul,
.handbook-body ol { margin-bottom: 0.9rem; padding-left: 1.3rem; }
.handbook-body li { margin-bottom: 0.25rem; }
.handbook-body code {
    font-size: 0.86em;
    background: var(--color-surface-elevated, #162033);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm, 4px);
    color: var(--color-glacier-cyan, #22d3ee);
}
.handbook-body pre {
    background: var(--color-surface-elevated, #162033);
    border-left: 3px solid var(--color-glacier-blue, #4da3ff);
    border-radius: var(--radius-sm, 4px);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    font-size: 0.82rem;
    line-height: 1.5;
}
.handbook-body pre code { background: none; padding: 0; color: var(--color-text-secondary); }
.handbook-body blockquote {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    background: var(--color-surface-elevated, #162033);
    border-left: 3px solid var(--brand-primary, #2563eb);
    border-radius: var(--radius-sm, 4px);
}
.handbook-body blockquote p:last-child { margin-bottom: 0; }
.handbook-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.86rem;
}
.handbook-body th,
.handbook-body td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border, #22304a);
}
.handbook-body th {
    font-weight: 550;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.handbook-body hr {
    border: none;
    border-top: 1px solid var(--color-border, #22304a);
    margin: 2rem 0;
}
/* Breite Tabellen dürfen scrollen statt die Seite zu sprengen. */
@media (max-width: 768px) {
    .handbook-toc { position: static; margin-bottom: 1rem; }
    .handbook-body table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* „Einrichtungsleitfaden" ist ein Wort ohne Trennstelle und schob den
   Seitenkopf im schmalen Fenster über den Rand. */
.handbook-title { overflow-wrap: anywhere; hyphens: auto; }

/* --------------------------------------------------------------------------
   Vergleichsmodus des Verbrauchstools

   Die gewählten Datenreihen stehen als Chips über der Auswertung. Jeder Chip
   trägt den Farbpunkt seiner Reihe - dieselbe Farbe wie im Diagramm und in
   der Vergleichstabelle. Wer eine Linie im Chart sucht, findet sie über die
   Farbe, ohne die Legende lesen zu müssen.
   -------------------------------------------------------------------------- */

.vergleich-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.65rem;
    border: 1px solid var(--color-surface-hover);
    border-left: 3px solid var(--chip-farbe, var(--brand-primary));
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface-elevated);
    font-size: 0.85rem;
    line-height: 1.2;
}

.vergleich-chip-punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--chip-farbe, var(--brand-primary));
    flex-shrink: 0;
}

.vergleich-chip-text { font-weight: 500; }

.vergleich-chip-meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.vergleich-chip-weg {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}

.vergleich-chip-weg:hover,
.vergleich-chip-weg:focus-visible { color: var(--color-text-primary); }

/* Farbpunkt in der Vergleichstabelle - stellt die Verbindung zur Chart-Linie
   und zum Chip her. */
.vergleich-punkt {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: baseline;
}

/* Zeitraumauswahl am Vergleichs-Chip - macht den Periodenvergleich
   bedienbar, ohne den Chip aufzublasen. */
.vergleich-chip-zeitraum {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    max-width: 11rem;
    padding: 0 0.15rem;
    cursor: pointer;
}

.vergleich-chip-zeitraum:hover,
.vergleich-chip-zeitraum:focus-visible { color: var(--color-text-secondary); }

/* --- Datenquellenbibliothek der Verbrauchsanalyse -----------------------
   Die Analyse hatte sieben Auswahlfelder nebeneinander. Sie wirkten wie
   Filter, waren aber die Auswahl EINER Reihe - zwei Anlagen nebeneinander
   gingen nie. Bibliothek links, Ablageflaeche rechts: erst suchen, dann
   zusammenstellen. */
.quellen-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--color-border, rgba(148, 163, 184, 0.25));
    border-radius: var(--radius-md, .5rem);
}
.quellen-liste:empty { border: 0; }
.quellen-treffer {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .45rem .6rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--color-border, rgba(148, 163, 184, 0.15));
    color: inherit;
    text-align: left;
    cursor: grab;
}
.quellen-treffer:last-child { border-bottom: 0; }
.quellen-treffer:hover,
.quellen-treffer:focus-visible {
    background: var(--color-surface-hover, rgba(148, 163, 184, 0.12));
    outline: 2px solid var(--brand-primary, #22d3ee);
    outline-offset: -2px;
}
.quellen-treffer[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.quellen-treffer-text { flex: 1 1 auto; min-width: 0; }
.quellen-treffer-name {
    display: block;
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quellen-treffer-typ { font-size: .75rem; color: var(--color-text-muted, #94a3b8); }

.quellen-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    padding: 1rem;
    border: 2px dashed var(--color-border, rgba(148, 163, 184, 0.35));
    border-radius: var(--radius-lg, .75rem);
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.quellen-dropzone.ist-ziel {
    border-color: var(--brand-primary, #22d3ee);
    background: var(--color-surface-hover, rgba(34, 211, 238, 0.08));
}
.quellen-dropzone-text { font-size: .875rem; color: var(--color-text-muted, #94a3b8); }
/* Sind bereits Reihen gewaehlt, steht die Ablageflaeche nur noch als
   schmaler Hinweis da - die Chips darueber sind dann die Hauptsache. */
.quellen-bereich.hat-reihen .quellen-dropzone { min-height: 3.25rem; padding: .5rem; }

/* Das Diagramm ist die Ablageflaeche: Man zieht einen Zaehler dorthin, wo man
   ihn sehen will - nicht in ein Kaestchen daneben. */
.diagramm-karte.ist-ziel {
    outline: 2px dashed var(--brand-primary, #22d3ee);
    outline-offset: -4px;
}
/* Die Steuerung sitzt im Diagramm, damit Regler und Wirkung zusammen im Blick
   bleiben - leicht abgesetzt, damit sie die Kurve nicht bedraengt. */
.diagramm-steuerung {
    padding: .5rem .75rem;
    background: var(--color-surface-hover, rgba(148, 163, 184, 0.08));
    border-radius: var(--radius-md, .5rem);
}

/* Der leere Zustand ist der erste Eindruck: Die Flaeche hat schon
   Diagrammgroesse, damit sichtbar ist, wohin der Zaehler gehoert. */
.diagramm-leer { min-height: 16rem; border: 2px dashed var(--color-border, rgba(148, 163, 184, 0.35)); }
.diagramm-leer .card-body { min-height: 16rem; }

/* --- Werksplan ---------------------------------------------------------
   Die Zeichnung ist eine SVG, deren Farben ausschliesslich aus den Tokens
   kommen. Damit ist Light und Dark dieselbe Datei: Was sich aendert, sind die
   Variablen, nicht die Geometrie.

   Statusfarben sind eine interne Managementregel - sie zeigen offene Befunde,
   SEU-Einstufung und Aktualitaet der Messdaten, keine Normbewertung. */
.werksplan-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.werksplan-hintergrund {
    fill: var(--color-surface-elevated);
    stroke: var(--color-border);
    stroke-width: 1;
}

.werksplan-element {
    cursor: pointer;
    /* Ohne das faengt der Text im Inneren den Klick ab und der Nutzer
       trifft die Flaeche nicht. */
    pointer-events: all;
}

.werksplan-element rect,
.werksplan-element circle,
.werksplan-element polygon,
.werksplan-element path {
    fill: var(--color-surface-elevated);
    stroke: var(--color-border-strong);
    stroke-width: 1.5;
    transition: fill 0.12s ease, stroke 0.12s ease;
}

.werksplan-element:hover rect,
.werksplan-element:hover circle,
.werksplan-element:hover polygon,
.werksplan-element:hover path,
.werksplan-element.is-active rect,
.werksplan-element.is-active circle,
.werksplan-element.is-active polygon,
.werksplan-element.is-active path {
    fill: var(--color-surface-selected);
    stroke: var(--color-glacier-blue);
    stroke-width: 2.5;
}

/* Nur die Kontur traegt die Statusfarbe. Eine vollflaechig eingefaerbte Halle
   uebertoent die Zeichnung, und bei fuenf farbigen Flaechen nebeneinander
   erkennt niemand mehr, welche gemeint ist. */
.werksplan-status-ok rect,
.werksplan-status-ok circle,
.werksplan-status-ok polygon { stroke: var(--color-aurora-green); }

.werksplan-status-hinweis rect,
.werksplan-status-hinweis circle,
.werksplan-status-hinweis polygon { stroke: var(--color-warning); }

.werksplan-status-achtung rect,
.werksplan-status-achtung circle,
.werksplan-status-achtung polygon { stroke: var(--color-critical); }

/* Messstellen sind Punkte, nicht Flaechen - sie duerfen gefuellt sein. */
.werksplan-typ-meter circle { fill: var(--color-glacier-cyan); stroke-width: 2; }
.werksplan-typ-meter.werksplan-status-hinweis circle { fill: var(--color-warning); }
.werksplan-typ-meter.werksplan-status-achtung circle { fill: var(--color-critical); }

.werksplan-beschriftung,
.werksplan-freitext {
    fill: var(--color-text-secondary);
    font-size: 13px;
    font-family: inherit;
    pointer-events: none;
    dominant-baseline: hanging;
}

.werksplan-freitext {
    fill: var(--color-text-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.werksplan-punkt {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    vertical-align: middle;
}

.werksplan-punkt.werksplan-status-ok { color: var(--color-aurora-green); }
.werksplan-punkt.werksplan-status-hinweis { color: var(--color-warning); }
.werksplan-punkt.werksplan-status-achtung { color: var(--color-critical); }
.werksplan-punkt.werksplan-status-neutral { color: var(--color-text-muted); }

.werksplan-detail { position: sticky; top: var(--space-4); }

/* Im Bearbeitungsmodus zieht die Maus - der Zeiger sagt das an. */
.werksplan-edit .werksplan-element { cursor: grab; }
.werksplan-edit .werksplan-element.is-dragging { cursor: grabbing; opacity: 0.7; }

@media (max-width: 991.98px) {
    .werksplan-svg { max-height: none; }
    .werksplan-detail { position: static; }
}

/* --- Polarfuchs-Copilot ---------------------------------------------------
   Schwebender Knopf unten rechts, Drawer von rechts. Farben ausschließlich
   aus den Designsystem-Variablen; kein neues Farbschema. Im Druck versteckt -
   ein Assistent gehört nicht auf einen Nachweisausdruck. */
.copilot {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1050; /* über der Seitenleiste (1040/1045), unter Bootstrap-Modals (1055) */
}
/* Der Fuchs von der Anmeldeseite als hochkant beschnittene V3-Figur. */
.copilot-knopf {
    width: 72px;
    height: 97px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--color-surface-hover);
    background: var(--color-surface-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}
.copilot-knopf img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.copilot-knopf:hover,
.copilot-knopf:focus-visible {
    transform: scale(1.06);
    outline: 2px solid var(--color-arctic-blue);
    outline-offset: 2px;
}
.copilot-punkt {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-glacier-cyan);
}
.copilot--laedt .copilot-knopf {
    animation: copilot-pulsieren 1.2s ease-in-out infinite;
}
@keyframes copilot-pulsieren {
    50% { transform: scale(0.94); }
}
.copilot-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: var(--color-surface);
    border-left: 1px solid var(--color-surface-hover);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    z-index: 1051;
}
.copilot-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-surface-hover);
}
.copilot-inhalt {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}
.copilot-kontext {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    background: var(--color-surface-elevated);
    margin-bottom: 0.5rem;
}
.copilot-hinweis-punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    margin-right: 0.35rem;
}
.copilot-hinweis-critical .copilot-hinweis-punkt,
.copilot-hinweis-punkt.copilot-hinweis-critical { background: var(--color-critical, #ef4444); }
.copilot-hinweis-punkt.copilot-hinweis-warning { background: var(--color-warning, #f59e0b); }
@media (max-width: 575.98px) {
    .copilot-drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
    .copilot-knopf { transition: none; }
    .copilot--laedt .copilot-knopf { animation: none; }
}
@media print {
    .copilot { display: none !important; }
}

/* Kontextzeile der Anlagenseite: Die Angaben trennt ein Mittelpunkt, der
   NICHT im Markup steht - sonst begänne die Zeile mit einem verwaisten
   Punkt, sobald die erste Angabe fehlt (etwa ohne übergeordnete Anlage). */
[data-kontextzeile] > span + span::before {
    content: "·";
    margin-right: .5rem;
    opacity: .6;
}

/* Flussdiagramm des Energieflusses (Inline-SVG, serverseitig gerechnet).
   Die Farben sind dieselben wie im Balkenband darueber - deshalb dieselbe
   Reihenfolge und dieselben Variablen, nur als fill statt background. */
/* --- Energiefluss: mehrstufiges Diagramm und Verteilungsliste ----------
   Feste Pixelmasse im SVG, der Container scrollt waagerecht. NICHT
   width:100% mit viewBox - das skalierte vorher den gesamten Inhalt samt
   Schrift auf die Containerbreite und machte aus 11px-Schrift 6px.
   Gescrollt wird nur INNERHALB des Diagramms, nie die ganze Seite. */
.energiefluss-diagramm {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .5rem;
}
.energiefluss-diagramm:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

.ef-band { opacity: .38; transition: opacity .15s ease; }
.ef-baender:hover .ef-band { opacity: .22; }
.ef-baender .ef-band:hover { opacity: .7; }

.ef-box { stroke-width: 1.5; }
/* Rechnerische Gruppenknoten gestrichelt: Sie sind KEINE Messung, und das
   muss man sehen, ohne den Text zu lesen. Der Text sagt es trotzdem auch -
   Farbe und Strichart allein duerfen keine Information tragen. */
.ef-knoten--berechnet .ef-box { stroke-dasharray: 5 3; fill-opacity: .35; }

.ef-boxtext {
    fill: var(--color-text-primary);
    font-size: 12px;
    dominant-baseline: middle;
    pointer-events: none;
}
.ef-boxtext--oben { transform: translateY(-8px); }
.ef-boxtext--unten {
    transform: translateY(9px);
    fill: var(--color-text-muted);
    font-size: 11px;
}
.ef-marke {
    fill: var(--color-text-muted);
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Corporate-Design-Farben statt Regenbogen. Ein Knoten behaelt seine Farbe
   in Diagramm und Verteilungsliste. */
.ef-farbe--quelle   { fill: var(--color-arctic-blue);  stroke: var(--color-glacier-blue); }
.ef-farbe--zweig-0  { fill: var(--color-glacier-cyan); stroke: var(--color-glacier-cyan); }
.ef-farbe--zweig-1  { fill: var(--color-glacier-blue); stroke: var(--color-glacier-blue); }
.ef-farbe--zweig-2  { fill: var(--color-arctic-blue);  stroke: var(--color-glacier-blue); }
.ef-farbe--zweig-3  { fill: var(--color-aurora-green); stroke: var(--color-aurora-green); }
.ef-farbe--gruppe-0 { fill: var(--color-glacier-cyan); stroke: var(--color-glacier-cyan); }
.ef-farbe--gruppe-1 { fill: var(--color-glacier-blue); stroke: var(--color-glacier-blue); }
.ef-farbe--gruppe-2 { fill: var(--color-arctic-blue);  stroke: var(--color-glacier-blue); }
.ef-farbe--gruppe-3 { fill: var(--color-aurora-green); stroke: var(--color-aurora-green); }
.ef-farbe--rest     { fill: var(--color-text-muted);   stroke: var(--color-text-muted); }
.ef-farbe--kritisch { fill: var(--color-critical);     stroke: var(--color-critical); }

/* Verteilungsliste: dieselben Daten als Text, mit der Hierarchie in der
   Einrueckung. Zugleich die barrierefreie Alternative zum Diagramm. */
.verteilungsliste { border-top: 1px solid var(--color-border); }
.verteilungszeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 9rem 5rem 6rem;
    gap: .75rem;
    align-items: center;
    padding: .45rem .5rem;
    padding-left: calc(.5rem + var(--ebene, 0) * 1.5rem);
    border-bottom: 1px solid var(--color-border);
}
.verteilungszeile-wert,
.verteilungszeile-anteil,
.verteilungszeile-abdeckung { text-align: right; font-variant-numeric: tabular-nums; }
.verteilungszeile--residual { color: var(--color-text-muted); }
.verteilungszeile--group { font-weight: 500; }
.verteilungszeile--kritisch { color: var(--color-critical); }
.verteilungszeile-farbe {
    display: inline-block;
    width: .65rem; height: .65rem;
    border-radius: 2px;
    margin-right: .4rem;
    vertical-align: baseline;
}
.verteilungszeile-farbe.ef-farbe--measured { background: var(--color-glacier-cyan); }
.verteilungszeile-farbe.ef-farbe--group    { background: var(--color-glacier-blue); }
.verteilungszeile-farbe.ef-farbe--residual { background: var(--color-text-muted); }

.verteilungszeile-details {
    padding: .3rem .5rem .6rem;
    padding-left: calc(1.4rem + var(--ebene, 0) * 1.5rem);
    border-bottom: 1px solid var(--color-border);
}
.verteilungszeile-details summary { cursor: pointer; }
.verteilungszeile-angaben {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .15rem .9rem;
    margin: .5rem 0 0;
    font-size: .85rem;
}
.verteilungszeile-angaben dt { color: var(--color-text-muted); font-weight: 400; }
.verteilungszeile-angaben dd { margin: 0; }

/* Auf schmalen Schirmen ist ein vierspaltiges Sankey nicht lesbar - dort
   traegt die Liste. Der Hinweis erklaert, warum das Diagramm fehlt, und
   der Umschalter bleibt erreichbar: Wer es bewusst sehen will, bekommt es
   mit waagerechtem Scrollen. */
.energiefluss-schmalhinweis { display: none; }
@media (max-width: 900px) {
    .energiefluss-diagramm { display: none; }
    .energiefluss-schmalhinweis { display: block; }
}

/* Auf schmalen Schirmen traegt die Liste: Werte unter den Namen statt in
   eigene Spalten - vier Spalten auf 400px waeren vier Fragmente. */
@media (max-width: 700px) {
    .verteilungszeile {
        grid-template-columns: minmax(0, 1fr) 7rem;
        row-gap: .2rem;
    }
    .verteilungszeile-abdeckung { display: none; }
}


/* --- Konfigurierbares Cockpit -------------------------------------------
   Zwoelf Spalten, weil sich das durch 2, 3, 4 und 6 teilen laesst - halbe,
   drittel und viertel Breite ergeben ganze Zahlen. Auf schmalen Schirmen
   faellt das Raster auf eine Spalte zurueck: Eine Kachel, die auf dem Tablet
   ein Zwoelftel breit ist, zeigt nichts mehr. */
.cockpit-raster {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.cockpit-kachel {
    grid-column: span var(--breite, 4);
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: calc(var(--hoehe, 2) * 5.5rem);
}

.cockpit-kachel-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.cockpit-kachel-titel { font-weight: 600; font-size: 0.95rem; }
.cockpit-kachel-inhalt { flex: 1 1 auto; }

/* Der Zustand einer leeren oder fehlerhaften Kachel: Symbol UND Text.
   Statusinformationen duerfen nicht nur ueber Farben laufen. */
.cockpit-kachel-zustand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.cockpit-editorliste { list-style: none; margin: 0; padding: 0; }

.cockpit-editorzeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    background: var(--color-surface);
}

.cockpit-editorzeile.wird-gezogen { opacity: 0.5; }
.cockpit-griff { cursor: grab; color: var(--color-text-muted); }
.cockpit-katalogzeile { margin-bottom: 0.5rem; }

@media (max-width: 992px) {
    /* Eine Kachel, die auf dem Tablet ein Zwoelftel breit ist, zeigt nichts
       mehr - deshalb halbe Breite als UNTERGRENZE.
       Als feste Breite war es ein Fehler: Es zwang auch die Kacheln herunter,
       die auf voller Breite stehen sollen, und die Tagesbilanz stand auf einem
       schmalen Laptop in einer halben Spalte. Eine Untergrenze, die zur
       Obergrenze wird, ist keine. */
    .cockpit-kachel { grid-column: span 6; }
    .cockpit-kachel[data-breite="7"],
    .cockpit-kachel[data-breite="8"],
    .cockpit-kachel[data-breite="9"],
    .cockpit-kachel[data-breite="10"],
    .cockpit-kachel[data-breite="11"],
    .cockpit-kachel[data-breite="12"] { grid-column: span 12; }
}

@media (max-width: 640px) {
    .cockpit-kachel { grid-column: span 12; }
}


/* --- Tagesbilanz ---------------------------------------------------------
   Drei Ebenen, dieselbe Zahlenform: Unternehmen, Standort, Abteilung. Was
   sich unterscheidet, ist die Lautstaerke - nicht die Anordnung. Wer oben
   gelernt hat, wo der Wert steht, findet ihn unten an derselben Stelle. */
.tagesbilanz-raster {
    display: grid;
    /* auto-fill statt auto-fit: Bei drei Zahlen sollen die Spalten ihre
       Breite behalten und nicht ueber die halbe Seite auseinanderlaufen. */
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem 1.25rem;
    align-items: start;
}

.tagesbilanz-kennzahl__name {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.tagesbilanz-kennzahl__wert {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.tagesbilanz-kennzahl__wert.ist-gross { font-size: 1.5rem; }

.tagesbilanz-kennzahl__einheit {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

.tagesbilanz-kennzahl__delta,
.tagesbilanz-kennzahl__fussnote {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Hoeher ist nicht automatisch schlechter - ein Produktionsplus soll nicht
   nach Alarm aussehen. Deshalb eine Tendenzfarbe, kein Statusrot: Die
   Richtung wird zusaetzlich durch das Dreieck getragen, damit die Aussage
   nicht allein an der Farbe haengt. */
/* Die Farbe bewertet, sie beschreibt nicht die Richtung: Bei Produktion und
   Eigenerzeugung ist ein Anstieg gut, bei Verbrauch und Kosten das Gegenteil.
   Die Klassen hiessen bis zum 17.08.2026 ist-hoeher/ist-niedriger und
   faerbten allein nach dem Vorzeichen - damit stand ein Produktionsrueckgang
   in Gruen. */
.tagesbilanz-kennzahl__delta.ist-gut { color: var(--color-aurora-green); }
.tagesbilanz-kennzahl__delta.ist-schlecht { color: var(--color-warning); }

/* Planwert einer noch nicht errichteten Anlage. Deutlich genug, um beim
   Lesen der Zahl aufzufallen, und zurueckhaltend genug, um die gemessenen
   Zahlen daneben nicht zu uebertoenen. */
.tagesbilanz-kennzahl__planwert {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-pill);
    color: var(--color-warning);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.tagesbilanz-hinweise {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.tagesbilanz-hinweise p { margin: 0 0 0.25rem; }
.tagesbilanz-hinweise p:last-child { margin-bottom: 0; }

.tagesbilanz-standort {
    margin-top: 1.5rem;
    border-left: 3px solid var(--color-border);
    padding-left: 1rem;
}

.tagesbilanz-standort__name {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.tagesbilanz-abteilung__name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.tagesbilanz-notiz {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0.25rem 0 0.5rem;
}

.tagesbilanz-abteilungen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.tagesbilanz-abteilung {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.875rem;
}

/* Eine Liste, keine Tabelle ueber die volle Breite: Name links, Wert rechts,
   dazwischen nur so viel Weg wie noetig. */
.tagesbilanz-verbraucher {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-width: 34rem;
}

.tagesbilanz-verbraucher__zeile {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}

.tagesbilanz-verbraucher__zeile:last-child { border-bottom: none; }
.tagesbilanz-verbraucher__zeile.ist-unterzaehler .tagesbilanz-verbraucher__name {
    padding-left: 0.75rem;
    color: var(--color-text-muted);
}

.tagesbilanz-verbraucher__wert {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.tagesbilanz-verbraucher__delta {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    min-width: 6.5rem;
    text-align: right;
}

.tagesbilanz-verbraucher__kennzahl {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}


/* Zweite Reihe im Verlauf (Eigenerzeugung) und der Planwert-Hinweis.
   Ergaenzt am 17.08.2026: "Diagramm koennte man auch die erzeugte Menge PV
   Strom abbilden" - zusammen mit der Kennzeichnung, dass die Anlage noch
   nicht steht. */
.report-figur-legende .ist-erzeugung { background: #65a30d; }

.report-figur-warnung {
    font-size: 0.8rem;
    color: var(--text-secondary, inherit);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin-top: 0.5rem;
    line-height: 1.5;
}

.report-ziele-ohne { font-size: 0.85rem; }

.report-figur-fussnote {
    font-size: 0.82rem;
    color: var(--text-secondary, inherit);
    margin-top: 0.5rem;
    line-height: 1.55;
}


/* Die Teilnummer vor der Abschnittsueberschrift. Gemeldet am 17.08.2026:
   "es fehlen eindeutige Ueberschriften zu den jeweiligen Berichtsteilen." */
.report-teil {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle, rgba(128,128,128,0.35));
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
    margin-right: 0.5rem;
    vertical-align: 0.15em;
}


/* Die KI-Erlaeuterung steht ganz vorn (Wunsch vom 17.08.2026) und traegt
   damit die Zusammenfassung des Berichts. Etwas mehr Gewicht als die
   Bloecke darunter - aber die Kennzeichnung als Vorschlag bleibt. */
.report-ki-oben {
    border-left: 3px solid var(--border-subtle, rgba(128,128,128,0.45));
    padding-left: 0.9rem;
    margin-bottom: 1.2rem;
}
.report-ki-oben .report-ki-text { font-size: 0.95rem; }

/* --- Lastprofil ----------------------------------------------------------
   Das Wochenprofil wird als SVG geliefert (siehe
   apps/energydata/services/lastvorschau_svg.py) und soll sich wie ein Bild
   in die Karte einpassen. Die Farben kommen aus den Tokens - das SVG
   referenziert sie als var(), damit ein Themenwechsel auch das Diagramm
   erreicht. */
.lastprofil {
    overflow-x: auto;
}
.lastprofil svg {
    display: block;
    min-width: 640px;
    max-width: 100%;
    height: auto;
}

/* --- Zuschalt-Simulator: Anlagen ins Lastdiagramm ziehen ---------------
   Die Buehne traegt zwei uebereinanderliegende SVG: die serverseitig
   gezeichnete Tageskurve und darueber die vom Browser bewegte
   Zuschaltlinie. Getrennt, weil nur eines von beiden sich aendert - die
   Kurve neu zu zeichnen, um eine Linie zu verschieben, waere Verschwendung
   und flackerte sichtbar. */
.zuschalt-buehne {
    position: relative;
    border: 2px dashed transparent;
    border-radius: var(--radius-md, .5rem);
    padding: .25rem;
    transition: border-color .15s ease, background-color .15s ease;
}
.zuschalt-buehne > svg:first-of-type { display: block; }

.zuschalt-linie {
    position: absolute;
    inset: .25rem;
    width: calc(100% - .5rem);
    height: calc(100% - .5rem);
    pointer-events: none;
}
.zuschalt-linie [data-rolle="linie-strich"] {
    stroke: var(--color-glacier-blue);
    stroke-width: 2;
    stroke-dasharray: 8 4;
}
.zuschalt-linie [data-rolle="linie-text"] {
    fill: var(--color-glacier-blue);
    /* Wie im serverseitigen SVG (SCHRIFT = 12): Beide liegen uebereinander
       und muessen dieselbe Groesse tragen, sonst sieht die Zuschaltlinie
       aus wie eine Fussnote zur Kurve. */
    font-size: 12px;
}
/* Die Linie traegt die Farbe des Urteils - aber nie als einzige Aussage.
   Der Text daneben sagt dasselbe in Worten (Designsystem, Abschnitt 4:
   Farbe allein darf keine Information tragen). */
.zuschalt-linie[data-lage="kritisch"] [data-rolle="linie-strich"],
.zuschalt-linie[data-lage="kritisch"] [data-rolle="linie-text"] {
    stroke: var(--color-critical);
    fill: var(--color-critical);
}
.zuschalt-linie[data-lage="knapp"] [data-rolle="linie-strich"],
.zuschalt-linie[data-lage="knapp"] [data-rolle="linie-text"] {
    stroke: var(--color-warning);
    fill: var(--color-warning);
}
.zuschalt-linie[data-lage="gut"] [data-rolle="linie-strich"],
.zuschalt-linie[data-lage="gut"] [data-rolle="linie-text"] {
    stroke: var(--color-aurora-green);
    fill: var(--color-aurora-green);
}

/* Ablagehinweis - nur waehrend eines Ziehvorgangs sichtbar. Dauerhaft
   eingeblendet waere er ein Schild, das man nach zwei Besuchen nicht mehr
   liest, aber immer noch die Kurve verdeckt. */
.zuschalt-ablage {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    color: var(--color-glacier-blue);
    background: rgba(var(--color-glacier-cyan-rgb), .10);
    border-radius: var(--radius-md, .5rem);
    pointer-events: none;
}
/* Der Schriftzug braucht eigenen Grund: Ueber der Lastkurve stand er sonst
   zwischen den Linien und war genau dann schlecht zu lesen, wenn er
   gebraucht wird. */
.zuschalt-ablage > span {
    padding: .35rem .8rem;
    border-radius: var(--radius-md, .5rem);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-glacier-blue);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.zuschalt-buehne--bereit { border-color: var(--color-border-strong); }
.zuschalt-buehne--ueber {
    border-color: var(--color-glacier-blue);
    background: rgba(var(--color-glacier-cyan-rgb), .05);
}
.zuschalt-buehne--ueber .zuschalt-ablage { display: flex; }
.zuschalt-buehne--rechnet { opacity: .78; }

/* Ueber die -rgb-Tokens und nicht als kopierte Zahlen: Sonst stuende die
   Farbe zweimal im Blatt und eine Themeaenderung erwischte nur eine Stelle.
   Das Muster gibt es im Designsystem bereits (--color-glacier-cyan-rgb). */
.zuschalt-buehne--kritisch { border-color: rgba(var(--color-critical-rgb), .55); }
.zuschalt-buehne--knapp    { border-color: rgba(var(--color-warning-rgb), .55); }
.zuschalt-buehne--gut      { border-color: rgba(var(--color-aurora-green-rgb), .45); }

/* Anlagenliste. Jede Zeile ist ein Knopf - Ziehen ist der bequeme Weg,
   nicht der einzige. Wer keine Maus fuehren kann, kommt mit Tab und
   Leertaste zum selben Ergebnis. */
.zuschalt-anlagen { max-height: 26rem; overflow-y: auto; }
.zuschalt-anlage {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, .5rem);
    margin-bottom: .4rem;
    background: var(--color-surface-elevated);
}
.zuschalt-anlage:not(.zuschalt-anlage--gesperrt) { cursor: grab; }
.zuschalt-anlage--zieht { opacity: .5; }
.zuschalt-anlage--gewaehlt {
    border-color: var(--color-glacier-blue);
    background: var(--color-surface-selected);
}
.zuschalt-anlage--gesperrt { opacity: .6; }

.zuschalt-schalter {
    display: flex;
    width: 100%;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: .5rem .65rem .15rem;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
}
.zuschalt-schalter:disabled { cursor: not-allowed; }
.zuschalt-schalter:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    border-radius: var(--radius-md, .5rem);
}
.zuschalt-name { font-size: .9rem; }
.zuschalt-zuwachs {
    font-size: .8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.zuschalt-anlage--gewaehlt .zuschalt-zuwachs { color: var(--color-glacier-blue); }
/* Der wichtigste Denkfehler, den die Seite ausraeumt: Eine laufende
   Anlage ist bereits in der Kurve und bringt zugeschaltet nichts mehr. */
.zuschalt-anlage--laeuft .zuschalt-zuwachs { color: var(--color-aurora-green); }
.zuschalt-fussnote {
    padding: 0 .65rem .5rem;
    font-size: .75rem;
    color: var(--color-text-muted);
}

/* Berührungsgeraete kennen kein HTML5-Drag-and-drop: Dort passiert beim
   Ziehen nichts. Die Anleitung sagt deshalb nur, was wirklich geht -
   sonst versucht man es, es klappt nicht, und das Werkzeug gilt als
   kaputt. `hover: none` trifft Tablets und Telefone, nicht schmale
   Browserfenster auf dem Rechner. */
.zuschalt-hinweis--tippen { display: none; }
@media (hover: none) {
    .zuschalt-hinweis--zeiger { display: none; }
    .zuschalt-hinweis--tippen { display: inline; }
    .zuschalt-ablage { display: none !important; }
}

/* Auf schmalen Schirmen steht die Liste unter dem Diagramm; Ziehen ueber
   einen Bildlauf hinweg funktioniert dort ohnehin nicht zuverlaessig. Die
   Schalter tun dasselbe. */
@media (max-width: 991.98px) {
    .zuschalt-anlagen { max-height: none; }
    .zuschalt-ablage { font-size: .8rem; }
}

/* --- Strukturbaum: Kontextpanel ---------------------------------------
   Baum links, Angaben rechts. Der Zweck ist, Seitenwechsel zu sparen: Wer
   sich durch eine Struktur arbeitet, oeffnet Dutzende Knoten, und jeder
   Seitenwechsel kostet den Aufklappzustand. */
.struktur-panel { position: sticky; top: 1rem; }
.struktur-panel--laedt { opacity: .65; }

.asset-tree-node--gewaehlt > .d-flex > .asset-tree-row {
    background: var(--color-surface-selected);
    border-radius: var(--radius-md, .5rem);
}

.struktur-panel-kopf {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: .6rem;
    margin-bottom: .75rem;
}
.struktur-panel-titel {
    font-family: var(--font-display, inherit);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}
.struktur-brotkrume { margin-top: .25rem; word-break: break-word; }

.struktur-panel-werte {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem .9rem;
    font-size: .85rem;
    margin: 0 0 .9rem;
}
.struktur-panel-werte dt { color: var(--color-text-muted); }
.struktur-panel-werte dd {
    margin: 0;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* Offene Punkte fallen auf, ohne zu schreien: Die Zahl traegt die Farbe,
   nicht die ganze Flaeche. */
.struktur-panel-befunde { display: grid; gap: .4rem; margin-bottom: .9rem; }
.struktur-befund {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, .5rem);
    background: var(--color-surface-elevated);
    color: var(--color-text-secondary);
    font-size: .85rem;
    text-decoration: none;
}
.struktur-befund:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.struktur-befund-zahl {
    font-weight: 700;
    color: var(--color-warning);
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
    text-align: right;
}

.struktur-panel-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-top: .75rem;
    border-top: 1px solid var(--color-border);
}

/* Auf schmalen Schirmen steht das Panel unter dem Baum - dort ist "sticky"
   sinnlos und wuerde den Baum ueberdecken. */
@media (max-width: 991.98px) {
    .struktur-panel { position: static; }
}

/* --- Strukturbaum: Suchtreffer und Aktionsmenue -----------------------
   Vorher fuehrte jeder Treffer sofort irgendwohin. Wer nur wissen wollte,
   WO etwas steht, landete in einer Auswertung und musste zurueck. */
.structure-search-item { display: block; }
.structure-search-item .structure-search-hit {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    color: inherit;
}
.structure-search-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .4rem .75rem .6rem 1.5rem;
}

/* Der gefundene Knoten im Baum - kurz hervorgehoben, damit das Auge ihn
   nach dem Scrollen wiederfindet. Dauerhaft markiert bliebe er stehen und
   waere beim naechsten Blick eine falsche Faehrte. */
.asset-tree-node--treffer > .d-flex > .asset-tree-row {
    box-shadow: inset 0 0 0 2px var(--color-glacier-blue);
    border-radius: var(--radius-md, .5rem);
    animation: treffer-blitz 2.4s ease-out 1;
}
@keyframes treffer-blitz {
    0%   { background: rgba(var(--color-glacier-cyan-rgb), .28); }
    100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .asset-tree-node--treffer > .d-flex > .asset-tree-row { animation: none; }
}