/* Design-Tokens "Fluent" (M365-nah, Phase 22 - vorher "Corporate Trust", siehe
   docs/design/dashboard-mockup.html Theme-Switcher, dort als theme-fluent abgestimmt).
   Zentrale Stelle für Kanzleifarben - für ein Re-Theming genügt es, diese Werte
   anzupassen. Das MudBlazor-C#-Theme (Theming/CentraTheme.cs) spiegelt dieselben
   Werte für die MudBlazor-Komponenten; beide Stellen müssen bei einer Farbänderung
   zusammen gepflegt werden. */
:root {
    --centra-page-bg: #faf9f8;
    --centra-sidebar-bg: #ffffff;
    --centra-sidebar-border: #e1dfdd;
    --centra-surface: #ffffff;
    --centra-surface-2: #f3f2f1;
    --centra-border: #e1dfdd;
    --centra-text: #201f1e;
    --centra-text-secondary: #605e5c;
    --centra-text-muted: #8a8886;
    --centra-accent: #0f6cbd;
    --centra-accent-text: #0a4d8c;
    --centra-accent-bg: #e8f1fb;
    --centra-nav-active-bg: #e8f1fb;
    --centra-nav-active-text: #0f6cbd;
    --centra-radius: 6px;
    --centra-radius-lg: 10px;
    /* Dezenter Schatten statt kräftiger dunkler Flächen (Fluent-Sprache) - ersetzt Stellen, die
       vorher ohne Schatten auskamen bzw. mit navy-getönten Schatten (Corporate Trust) arbeiteten. */
    --centra-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .09);
    /* "Danger"-Rotton (Fehler-/Lösch-Zustände, negative Kosten-/Salden-Werte, höchste Mahnstufe) -
       Phase 22: vorher an vielen Stellen (Editor, Zeiterfassung, Login, Auswertungen, Controlling)
       mit demselben oder leicht abweichendem Rot hart codiert, hier zusammengeführt. Bedeutung
       (Fehler/negativ) bleibt unverändert - nur die Werte selbst sind jetzt zentral. */
    --centra-danger-bg: #fdf3f4;
    --centra-danger-bg-hover: #fadde0;
    --centra-danger-border: #f3c9cb;
    --centra-danger-text: #a4262c;
    /* "Ungeklärt"-Bernstein, dritte funktionale Ampelfarbe neben Rot (Fehler) und Grün (positiv) -
       eingeführt mit dem Ticket vom 12.08.2026 ("verwaiste Zeiteinträge"). Gebraucht für Zustände, die
       weder gut noch schlecht, sondern OFFEN sind: Bei einer von DATEV unbestätigten Übertragung wissen
       wir nicht, ob die Buchung dort existiert - Rot würde eine Gewissheit behaupten, die es nicht gibt.
       Wie die übrigen Ampelfarben bewusst unabhängig vom Marken-Akzent (siehe Kommentar unten). */
    /* Aufgehellt am 19.08.2026 (Auftragsplanung Phase 2, Abschnitt 2.5): #8a6d0b wirkte bräunlich.
       Neu ist ein klar gelb-orangener Ton. Bewusst hier an den zentralen Tokens geändert statt nur im
       neuen Modul - der Bernstein wird auch von Zeiterfassung (verwaiste Einträge) und Sync-Anzeige
       genutzt, zwei verschiedene Warntöne nebeneinander wären schlechter als der alte einheitliche. */
    --centra-warning-text: #8a6100;
    /* Basiston für Flächen und Balken. Bis dahin gab es diesen Token NICHT: Zeile ~2200 referenzierte
       var(--centra-warning, #c8860d) und lief immer in den Ersatzwert - dadurch stand dort faktisch
       eine vierte, nirgends definierte Warnfarbe. Jetzt einmal zentral definiert. */
    --centra-warning: #fbbf24;
    /* Flächen-Gegenstück dazu (Issue #74): Bis dahin gab es zum Bernstein nur die Textfarbe, weil er
       nur als gestrichelte Umrandung/Zeichen gebraucht wurde. Die Liste der nach einem Sync
       gelöschten Einträge braucht eine eigene, ruhige Fläche - Rot (.es-status.fehler) wäre falsch:
       Eine Löschung ist der korrekt ausgeführte Sync, kein Fehler, aber auch keine Nebensache.
       Helligkeit analog zu --centra-danger-bg gewählt, damit sich die Statusflächen gleich anfühlen. */
    --centra-warning-bg: #fff8e1;
    /* "Erfolg"-Grün, eigenständig vom Akzent getrennt (wichtig seit Phase 22: .controlling-positive
       zeigte vorher var(--centra-accent-text), was in "Corporate Trust" zufällig grün war, weil dort
       auch der Akzent grün/petrol war - mit dem neuen blauen Fluent-Akzent wäre "positiv" sonst
       plötzlich blau statt grün gewesen. Die funktionale Ampelfarbe (Grün = positiv) muss unabhängig
       vom Marken-Akzent erhalten bleiben, siehe Phase-22-Handoff Teil E. */
    --centra-success-text: #0e700e;
    --centra-font-sans: 'Segoe UI', -apple-system, Roboto, sans-serif;
    /* Content-Breite für datenreiche Seiten (Dashboard, Zeiterfassung, Einstellungen). Ursprünglich
       1180px (1:1 aus dem Dashboard-Mockup übernommen), dann fest 1600px - beides wirkte auf großen
       Monitoren weiterhin mit viel ungenutztem Leerraum an den Seiten. Jetzt fluid statt fest: wächst
       mit der Fenstergröße mit (95vw), aber mit einer oberen Grenze (2200px), damit Zeilen auf sehr
       breiten Monitoren nicht unleserlich lang werden, und mit einer unteren Grenze von 5% Rand, damit
       auch auf kleinen Fenstern nie randlos direkt an der Kante geklebt wird. Zentrale Variable statt
       Wert je Seite einzeln pflegen. */
    --centra-content-max-width: min(95vw, 2200px);
    /* Phase 96 (Issue M8) - gemeinsame Maße für Bedienelemente. Vorher trug jede Knopf- und
       Feldklasse ihre eigenen Zahlen; hier stehen sie ein Mal, damit Knöpfe und Eingabefelder
       nebeneinander nicht unterschiedlich hoch oder unterschiedlich gerundet sind.

       Die Zeilenhöhe ist bewusst ein fester Wert und nicht "normal": Bei "normal" bestimmt die
       Schrift die Höhe, und ein <a> war dadurch 2 px höher als ein <button> mit derselben Klasse
       (gemessen: 35 px gegen 33 px). */
    --centra-control-radius: 7px;
    --centra-control-font-size: 13px;
    --centra-control-line-height: 1.3;
    --centra-control-padding-y: 8px;
    --centra-control-padding-x: 14px;
    /* Eingabefelder: gleiche Rundung und Schriftgröße wie Knöpfe, etwas schmalerer Innenabstand -
       ein Textfeld soll neben einem Knopf gleich hoch stehen, ohne breiter zu wirken als nötig. */
    --centra-field-padding-y: 7px;
    --centra-field-padding-x: 9px;
    --centra-field-bg: var(--centra-surface-2);
}

html, body {
    margin: 0;
    background: var(--centra-page-bg);
    color: var(--centra-text);
    font-family: var(--centra-font-sans);
}

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Es ist ein unerwarteter Fehler aufgetreten."
    }

/* ---------- Dashboard & Karten (gemeinsam genutzt von Dashboard/*.razor) ---------- */

.dashboard {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: var(--centra-content-max-width);
    margin: 0 auto;
    width: 100%;
    /* Fix vom 19.08.2026 (gefunden beim Prüfen der Auftragsplanung): Ohne border-box addiert sich das
       Innenabstands-Paar von 2 × 32 px auf `width: 100%` bzw. auf die max-width OBEN DRAUF - die Seite
       wurde dadurch breiter als das Fenster und scrollte waagerecht um ein paar Pixel. Verschärft
       dadurch, dass `--centra-content-max-width` in `vw` rechnet und `vw` die senkrechte
       Bildlaufleiste mitzählt; auf langen Seiten fiel es deshalb auf, auf kurzen nicht.

       Bewusst NUR an den beiden Seiten-Containern (.dashboard/.evaluations) statt als globale
       `* { box-sizing: border-box }`-Regel: app.css ist ohne globales border-box geschrieben, mehrere
       Stellen gleichen das ausdrücklich einzeln aus (siehe .toggle input[type=checkbox]). Eine globale
       Umstellung würde jede Komponente mit Breite + Innenabstand zugleich verändern, und das lässt
       sich hier ohne laufende Anwendung nicht nachprüfen. Diese beiden Regeln decken alle Seiten ab,
       auf denen das Verhalten auftrat. */
    box-sizing: border-box;
}

.greeting {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 30px;
    border-radius: var(--centra-radius-lg);
    background: var(--centra-accent-bg);
    border: 1px solid var(--centra-border);
}

    .greeting::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--centra-accent);
    }

.greeting-main {
    min-width: 0;
}

.greeting-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--centra-accent-text);
    margin-bottom: 8px;
}

.greeting h1 {
    margin: 0 0 6px;
    font-size: 27px;
}

.greeting p {
    margin: 0;
    color: var(--centra-text-secondary);
    font-size: 14px;
}

/* Phase 71 - Uhr + Wetter im rechten Bereich des Begrüßungs-Banners (Dennis: "nicht in einem extra
   Widget"). Flex statt reiner absoluter Positionierung, damit es bei schmaleren Fenstern nicht mit dem
   Begrüßungstext überlappt - siehe Media-Query weiter unten. */
.greeting-side {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.greeting-weather {
    display: flex;
    align-items: center;
    gap: 10px;
}

.greeting-weather-icon {
    font-size: 28px;
    line-height: 1;
}

.greeting-weather-temp {
    font-size: 18px;
    font-weight: 700;
}

/* Reine CSS-Uhr (Kreis + drei per JS rotierte Zeiger, siehe Home.razor.js startAnalogClock) - kein SVG
   nötig für drei einfache Balken. transform-origin unten/mittig, damit jeder Zeiger um den Mittelpunkt
   der Uhr rotiert statt um seinen eigenen. */
.analog-clock {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--centra-accent);
    background: var(--centra-surface);
    flex-shrink: 0;
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 2px;
    background: var(--centra-text);
}

    .clock-hand--hour {
        width: 3px;
        height: 16px;
        margin-left: -1.5px;
    }

    .clock-hand--minute {
        width: 2px;
        height: 22px;
        margin-left: -1px;
    }

    .clock-hand--second {
        width: 1px;
        height: 24px;
        margin-left: -.5px;
        background: var(--centra-accent);
    }

.clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--centra-text);
}

@media (max-width: 700px) {
    .greeting {
        flex-direction: column;
        align-items: flex-start;
    }

    .greeting-side {
        align-self: stretch;
        justify-content: flex-end;
    }
}

/* ---------- Dashboard-Grid & Widgets (Phase 18: frei anordnen/größenverstellbar) ----------
   4-spaltiges Grid mit festen 1fr-Spalten (Container hat über --centra-content-max-width eine
   definierte Breite) und automatischer Zeilenhöhe (grid-auto-rows: auto - richtet sich nach dem
   tatsächlichen Inhalt, kein Row-Span nötig). Ein Widget belegt 1 Spalte (klein) oder 2 Spalten
   (groß); "groß" zeigt zusätzliche Inhalte statt einer größeren leeren Fläche (siehe die einzelnen
   Widget-Komponenten). Bewusst feste Spaltenanzahl statt rein prozentualer/unbestimmter Maße -
   vermeidet die aus Phase 16 bekannte Kollaps-Falle (0×0-Rahmen bei unbestimmter Containerbreite). */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    /* 22.08.2026 (Dashboard-Umbau, Punkt 1): `dense` entfernt. Die Lückenfüll-Logik zog kleine
       Kacheln vor große und überstimmte damit die vom Nutzer gewählte Reihenfolge - genau das
       "nur in eine Richtung"-Gefühl. Trade-off bewusst: Es kann vereinzelt eine leere Spalte
       entstehen, wenn eine 2-spaltige Kachel in die nächste Zeile rutscht - dafür entspricht die
       sichtbare Reihenfolge jetzt IMMER exakt der gespeicherten. */
    grid-auto-flow: row;
    gap: 16px;
    /* Phase 146: Hier stand in Phase 144 ein `align-items: start`. Es ist bewusst wieder weg -
       es gilt jetzt wieder der Grid-Standard `stretch`, alle Kacheln einer Zeile sind also gleich
       hoch und schließen unten bündig ab.

       Warum der Rückbau: `align-items: start` löste zwar das Problem der gestreckten, leeren
       Nachbarkacheln neben einer aufgeklappten Ankündigung - aber es galt für JEDE Zeile des
       Dashboards, auch im ganz normalen Zustand ohne aufgeklappte Ankündigung. Dort endeten dann
       z. B. "Stoppuhren" und "Termine" auf unterschiedlicher Höhe; das wirkte kreuz und quer statt
       aufgeräumt. Ein Dauerzustand für alle Zeilen, um einen Sonderfall einer einzigen Kachel zu
       lösen - das war der falsche Tausch.

       Der Sonderfall wird jetzt dort gelöst, wo er entsteht: Die Ankündigungs-Kachel nimmt sich im
       aufgeklappten Zustand die ganze Zeile (siehe die Regel weiter unten), dann hat sie schlicht
       keine Nachbarn mehr, die gestreckt werden könnten. */
}

.dashboard-widget {
    grid-column: span 1;
    position: relative;
}

    .dashboard-widget--large {
        grid-column: span 2;
    }

    /* Phase 146: Eine Kachel mit aufgeklappter Ankündigung nimmt die ganze Zeile ein.

       Damit verschwindet das Problem aus Phase 144 an der Wurzel: Wo keine Nachbarn in derselben
       Zeile stehen, kann sich auch nichts auf eine fremde Höhe strecken - und alle übrigen Zeilen
       bleiben unangetastet bündig.

       **Warum als CSS-Regel und nicht über einen EventCallback nach Home.razor** (der im Auftrag
       vorgeschlagene Weg): `:has()` liest denselben Zustand direkt am DOM ab, den die Kachel ohnehin
       schon rendert. Der Callback-Weg müsste denselben Zustand ein zweites Mal führen - in
       AnnouncementsPanel als HashSet, in Home.razor als bool -, sie bei jedem Umschalten
       synchron halten und dafür einen zusätzlichen Renderdurchgang der ganzen Dashboard-Seite
       auslösen. Zwei Quellen für dieselbe Wahrheit sind genau die Sorte Kopplung, die später
       auseinanderläuft. `:has()` ist seit 2023 in allen aktuellen Browsern Standard (im Kanzleibetrieb
       Chrome/Edge) und im Browser gegengeprüft.

       Die Spezifität reicht aus, um `span 1`/`span 2` oben zu überschreiben: `:has()` zählt die
       Spezifität seines Arguments mit, die Regel wiegt damit schwerer als eine einzelne Klasse. */
    .dashboard-widget:has(.ank-panel-inhalt.offen) {
        grid-column: 1 / -1;
    }

    .dashboard-widget--dragging {
        opacity: .45;
    }

    /* Phase 144: Bleibt bewusst stehen, wirkt aber nur noch dort, wo es sinnvoll ist.

       Seit `align-items: start` oben ist die Kachel selbst inhaltshoch statt zeilenhoch - `100%`
       bezieht sich damit auf die eigene Inhaltshöhe der Kachel und streckt nichts mehr auf die
       Zeilenhöhe. Was die Regel weiterhin leistet: Sie bindet Karte und Kachelrahmen aneinander,
       damit Zieh- und Größengriff (die am Rahmen sitzen) bündig an der Karte liegen. */
    .dashboard-widget .card,
    .dashboard-widget .stat-card {
        height: 100%;
    }

.widget-content {
    height: 100%;
}

/* Ziehgriff (Verschieben) und Größengriff (Resize) - nur bei Hover über dem Widget sichtbar, damit
   sie im Alltag nicht stören. draggable="true" sitzt bewusst nur auf dem kleinen Griff-Icon (nicht
   auf der ganzen Karte), damit Klicks auf Buttons/Inputs innerhalb des Widgets (z. B. Stoppuhr
   starten) keinen Drag auslösen. Siehe Home.razor.js für die Interaktionslogik. */
.widget-drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--centra-text-muted);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    cursor: grab;
    z-index: 5;
    opacity: 0;
    transition: opacity .12s ease;
}

    .widget-drag-handle:active {
        cursor: grabbing;
    }

.widget-resize-handle {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    z-index: 5;
    opacity: 0;
    transition: opacity .12s ease;
    background:
        linear-gradient(135deg,
            transparent 0 40%,
            var(--centra-text-muted) 40% 46%,
            transparent 46% 60%,
            var(--centra-text-muted) 60% 66%,
            transparent 66% 100%);
}

    .dashboard-widget:hover .widget-drag-handle,
    .dashboard-widget:hover .widget-resize-handle {
        opacity: 1;
    }

.stat-extra {
    font-size: 12px;
    color: var(--centra-text-secondary);
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--centra-border);
}

.list-more {
    font-size: 12px;
    color: var(--centra-text-muted);
    padding-top: 6px;
    text-align: center;
}

.stopwatch-booked-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--centra-border);
}

.stopwatch-booked-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--centra-text-secondary);
    margin-bottom: 6px;
}

/* Wetter-Widget (Phase 18, Mock-Wetterdienst) */
.weather-current {
    display: flex;
    align-items: center;
    gap: 14px;
}

.weather-current-icon {
    font-size: 30px;
    line-height: 1;
}

.weather-temp {
    font-size: 22px;
    font-weight: 700;
}

.weather-condition-label {
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--centra-border);
}

.weather-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

    .weather-detail strong {
        color: var(--centra-text);
    }

.weather-forecast {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.weather-forecast-day {
    flex: 1;
    text-align: center;
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 8px 4px;
}

.weather-forecast-date {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--centra-text-muted);
    font-weight: 700;
}

.weather-forecast-icon {
    font-size: 18px;
    margin: 4px 0;
}

.weather-forecast-range {
    font-size: 11.5px;
    color: var(--centra-text-secondary);
}

.card {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--centra-border);
}

.card-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.card-title {
    font-size: 14.5px;
    font-weight: 700;
}

.card-sub {
    font-size: 12px;
    color: var(--centra-text-muted);
}

.card-body {
    padding: 12px 18px 18px;
}

.list-empty {
    color: var(--centra-text-muted);
    font-size: 13px;
    padding: 8px 0;
}

/* Stoppuhren */
/* Issue #53 - Eine Stoppuhr besteht jetzt aus zwei Zeilen: der unveränderten Bedienzeile und der
   Mandanten-Zeile darunter. Die Trennlinie ist deshalb vom .stopwatch-row auf den Block gewandert,
   damit sie zwischen zwei Stoppuhren steht und nicht mitten in einer. */
.stopwatch-block {
    /* Live-Test 13.08.2026, zweiter Nachbesserungsversuch: Statt den Einzug der Mandanten-Zeile per
       Hand auszurechnen (zwei Versuche daneben - siehe Git-Historie), teilen sich Bedienzeile und
       Mandanten-Zeile jetzt ein gemeinsames Grid. ".stopwatch-row" wird dafuer per "display:contents"
       aufgeloest (siehe dort) - seine Kinder werden direkt zu Grid-Elementen dieses Containers, die
       Mandanten-Zeile setzt sich per "grid-column" exakt auf dieselbe Spalte wie das Beschreibungsfeld.
       Das ist robust gegen jede Breitenaenderung (laengere Laufzeit, anderer Font) - der Browser
       richtet aus, nicht mehr eine geratene Pixelzahl. */
    display: grid;
    grid-template-columns: 30px minmax(62px, auto) 1fr 30px 30px;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--centra-border);
}

    .stopwatch-block:last-of-type {
        border-bottom: none;
    }

/* Loest sich aus dem Layout auf ("display: contents") - die fuenf Kinder (Play-Knopf, Zeit,
   Beschreibungsfeld, Buchen-Knopf, Loeschen-Knopf) werden dadurch direkt zu Grid-Elementen von
   .stopwatch-block und landen automatisch in den fuenf Spalten oben, in Dokumentreihenfolge. */
.stopwatch-row {
    display: contents;
}

.stopwatch-time {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
}

/* Issue #53 - die Mandanten-Zeile. Sie sitzt bewusst eingerückt unter der Zeitanzeige: So liest sie
   sich als Zusatz zur Stoppuhr darüber und nicht als eigene Zeile, und die Bedienzeile bleibt die
   optisch dominante. Zurückhaltend gehalten, weil sie in der Mehrzahl der Fälle nur "+ Mandant"
   zeigt - eine ungenutzte Funktion darf die Kachel nicht dominieren. */
.stopwatch-mandant {
    /* Live-Test 13.08.2026: exakte Platzierung ueber das Grid von .stopwatch-block statt Margin-Raten
       (siehe Kommentar dort). Spalte 3 ist dieselbe Spalte wie .stopwatch-desc - die Mandanten-Zeile
       beginnt dadurch automatisch an derselben Stelle wie das Beschreibungsfeld, unabhaengig von der
       tatsaechlichen Breite der Zeitanzeige. */
    grid-column: 3 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

/* Live-Test 13.08.2026: Im offenen Suchzustand wirkten Eingabefeld und Trefferliste wie loser,
   unformatierter Text direkt auf der Kachel - kein erkennbares Panel. Solange die Suche geschlossen
   ist (nur Chip oder "+ Mandant"), bleibt .stopwatch-mandant bewusst randlos/zurückhaltend; erst mit
   geöffneter Suche bekommt der Block einen sichtbaren, abgesetzten Rahmen. */
.stopwatch-mandant:has(.stopwatch-mandant-suche) {
    padding: 8px;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    background: var(--centra-surface-2);
}

/* Der Chip: gefüllte, ruhige Fläche in der Akzentfarbe - erkennbar als "hier steht etwas Gesetztes",
   ohne mit den Ampelfarben (Fehler/Warnung) verwechselt werden zu können. Er ist zugleich der Knopf
   zum Ändern; das Entfernen sitzt daneben, damit ein Fehlklick nicht die Zuordnung löscht. */
.stopwatch-mandant-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--centra-accent-bg);
    border-radius: 999px;
    background: var(--centra-accent-bg);
    color: var(--centra-text);
    font-size: 12.5px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .stopwatch-mandant-chip:hover {
        border-color: var(--centra-accent);
    }

.stopwatch-mandant-icon {
    opacity: .7;
}

.stopwatch-mandant-entfernen,
.stopwatch-mandant-abbrechen,
.stopwatch-mandant-hinzu {
    border: none;
    background: transparent;
    color: var(--centra-text-secondary);
    font-size: 12.5px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 6px;
}

    .stopwatch-mandant-entfernen:hover,
    .stopwatch-mandant-abbrechen:hover,
    .stopwatch-mandant-hinzu:hover {
        color: var(--centra-text);
        background: var(--centra-surface-2);
    }

/* Ohne Zuordnung bleibt nur dieser gestrichelte Link stehen - sichtbar genug, um gefunden zu werden,
   leise genug, um bei fünf Stoppuhren nicht zu stören. */
.stopwatch-mandant-hinzu {
    border: 1px dashed var(--centra-border);
}

.stopwatch-mandant-suche {
    flex: 1;
    min-width: 160px;
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    /* Live-Test 13.08.2026: kein linkes Innenpolster - das Panel drumherum
       (.stopwatch-mandant:has(...)) liefert bereits 8px Polster + 1px Rahmen; zusammen mit dem
       eigenen 1px Rahmen hier ergibt das genau 10px, exakt wie bei .stopwatch-desc (1px Rahmen +
       9px Polster). Damit steht der Text im Suchfeld buendig unter dem Text im Beschreibungsfeld. */
    padding: 5px 8px 5px 0;
    font-size: 12.5px;
    background: var(--centra-surface-2);
    color: var(--centra-text);
}

/* Die Trefferliste klappt innerhalb der Kachel auf (kein Overlay): Sie gehört sichtbar zu dieser einen
   Stoppuhr, und ein schwebendes Menü über den anderen Zeilen würde genau das verwischen. */
.stopwatch-mandant-treffer {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.stopwatch-mandant-treffer-zeile {
    display: flex;
    align-items: baseline;
    /* ⚠️ 31.08.2026 (Phase 239): Derselbe MudBlazor-Fall wie bei `.aufg-auswahl-vorlage`.
       Nachgemessen bei zwei Treffern: Mandantennummern bei x = 891 und x = 876 - die Zeilen waren
       zentriert, die Nummern standen also je nach Namenslänge woanders. In einer Trefferliste, die
       man mit den Augen überfliegt, ist das genau das Falsche. */
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: var(--centra-surface);
    color: var(--centra-text);
    font-size: 12.5px;
    padding: 6px 9px;
    border-radius: 6px;
    cursor: pointer;
}

    .stopwatch-mandant-treffer-zeile:hover {
        background: var(--centra-accent-bg);
        border-color: var(--centra-accent);
    }

.stopwatch-mandant-nummer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--centra-text-secondary);
    min-width: 44px;
}

.stopwatch-desc {
    flex: 1;
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    padding: 7px 9px;
    font-size: 13px;
    background: var(--centra-surface-2);
    color: var(--centra-text);
}

.icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--centra-text-secondary);
    font-size: 13px;
    flex-shrink: 0;
}

    .icon-btn.primary {
        background: var(--centra-accent);
        border-color: var(--centra-accent);
        color: #fff;
    }

    .icon-btn.danger {
        color: var(--centra-danger-text);
    }

        .icon-btn.danger:hover {
            background: var(--centra-danger-bg);
            border-color: var(--centra-danger-border);
        }

    .icon-btn:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

.add-stopwatch {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border-radius: 8px;
    border: 1px dashed var(--centra-border);
    background: transparent;
    color: var(--centra-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

    .add-stopwatch:disabled {
        opacity: .4;
        cursor: not-allowed;
    }

/* Termine / Aufgaben */
.list-item {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--centra-border);
    font-size: 13px;
}

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

    /* Klickbare Listenzeile (24.08.2026, "Heute bereits gebucht" auf dem Dashboard). Zurückhaltend
       wie .stat-card-link: Die Zeile soll sich beim Überfahren als anklickbar zeigen, aber nicht wie
       ein Link aussehen - deshalb wird die Textfarbe ausdrücklich zurückgesetzt. */
    .list-item-link {
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        border-radius: var(--centra-radius);
        transition: background-color 120ms ease;
    }

        .list-item-link:hover {
            background: var(--centra-surface-2);
        }

        .list-item-link:focus-visible {
            outline: 2px solid var(--centra-accent);
            outline-offset: -2px;
        }

.list-time {
    color: var(--centra-text-muted);
    min-width: 44px;
    font-variant-numeric: tabular-nums;
}

.list-main {
    flex: 1;
}

.list-title {
    font-weight: 600;
}

.list-sub {
    color: var(--centra-text-secondary);
    font-size: 12px;
}

.badge {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-weight: 600;
    align-self: flex-start;
}

.checkbox {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1.5px solid var(--centra-border);
    flex-shrink: 0;
    margin-top: 2px;
}

    .checkbox.checked {
        background: var(--centra-accent);
        border-color: var(--centra-accent);
    }

.mock-note {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    text-align: center;
    padding-top: 4px;
}

/* ---------- Zeitraster (TimeGrid: Zeiterfassung: Outlook-Wochenkalender) ----------
   Gemeinsamer visueller Aufbau (Slot-Höhe, Stundenmarken, Spaltenkopf, Eintrags-Look), damit beide
   gleich aussehen (Phase 13: Outlook-Termine als Wochenkalender statt Liste). Rein optisch/strukturell
   hier zentral gepflegt; interaktionsspezifische Regeln (Drag-Cursor, Auswahl-Overlay, Verschieben)
   bleiben in TimeGrid.razor.css, weil nur das Zeiterfassungs-Raster per Drag bedienbar ist - der
   Outlook-Kalender ist rein lesend (Klick öffnet den Zeiteintrag-Editor, kein Anlegen/Verschieben). */

.time-grid {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
    overflow: hidden;
    user-select: none;
}

.time-grid-head {
    display: flex;
    border-bottom: 1px solid var(--centra-border);
    background: var(--centra-surface-2);
    position: sticky;
    top: 0;
    z-index: 2;
}

.time-grid-corner {
    width: 56px;
    flex-shrink: 0;
}

.time-grid-day-head {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 8px 4px;
    border-left: 1px solid var(--centra-border);
}

.day-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--centra-text-secondary);
}

.day-date {
    font-size: 12px;
    color: var(--centra-text-muted);
}

.day-total {
    font-size: 11px;
    font-weight: 700;
    color: var(--centra-accent-text);
    margin-top: 2px;
}

.time-grid-body {
    display: flex;
    position: relative;
    overflow-y: auto;
    max-height: 70vh;
}

.time-grid-hours {
    width: 56px;
    flex-shrink: 0;
    position: relative;
}

.hour-mark {
    position: absolute;
    left: 0;
    right: 6px;
    text-align: right;
    font-size: 11px;
    color: var(--centra-text-muted);
    transform: translateY(-6px);
}

.time-grid-column {
    flex: 1;
    min-width: 0;
    position: relative;
    border-left: 1px solid var(--centra-border);
}

/* Rasterzelle = Klick-/Ziehziel von einer Rastereinheit (seit Phase 128: 5 Minuten). Die Zelle ist
   bewusst NICHT gleichbedeutend mit einer sichtbaren Linie - siehe die beiden Regeln darunter.

   Phase 129: Bis dahin hatte jede Zelle eine eigene Randlinie. Mit dem feineren Raster wurden daraus
   287 statt 95 Linien je Tagesspalte, und das Raster wirkte gestreift statt aufgeräumt. Die Linien
   hängen jetzt an der Uhrzeit statt an der Klickauflösung: sichtbar zur Viertelstunde und zur vollen
   Stunde, geklickt und gezogen wird weiterhin in 5-Minuten-Schritten. */
.time-grid-cell {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
}

    /* Zwischenlinie zur Viertelstunde: 3 Zellen × 5 Minuten = 15 Minuten. Entspricht der Linie, die
       vor Phase 128 die normale Zellenlinie war - daher derselbe Farbwert. */
    .time-grid-cell:nth-child(3n) {
        border-bottom: 1px solid var(--centra-border);
    }

    /* Kräftigere Trennlinie jeweils zur vollen Stunde: 12 Zellen × 5 Minuten = 60 Minuten.
       Vor Phase 128 stand hier 4n (4 × 15 Minuten) - beide Faktoren müssen zu
       TimeGridWindow.SlotMinutes passen, sonst säßen die Linien still an der falschen Stelle.
       Bewusst hier und nicht per Klasse aus dem Markup: die Zellen sind reine Rasterlinien ohne
       eigenen Zustand, und C# kann diesen Wert nicht in die statische CSS-Datei hineinreichen.

       Diese Regel MUSS nach der 3n-Regel stehen: 12 ist durch 3 teilbar, jede Stundenzelle trifft
       also auch die Viertelstundenregel. Beide Selektoren haben dieselbe Spezifität, es gewinnt
       damit die spätere - beim Umsortieren dieser Datei bliebe die Stundenlinie sonst aus.

       Die Deckkraft steckt in der Randfarbe, NICHT in einem `opacity` auf der Zelle (Phase 130):
       rgba(138, 136, 134, .35) ist --centra-text-muted (#8a8886) auf 35 % gemischt, keine
       Zufallsfarbe. Als `opacity: .35` hat es bis Phase 129 die ganze Zelle gedimmt und damit auch
       deren Kernzeit-Hintergrund - in der Kernzeit war so alle 60 Minuten ein aufgehelltes Band zu
       sehen. `color-mix()` wäre hier lesbarer, kommt im Projekt aber sonst nirgends vor; rgba() ist
       die in dieser Datei durchgehend verwendete Schreibweise. */
    .time-grid-cell:nth-child(12n) {
        border-bottom: 1px solid rgba(138, 136, 134, .35);
    }

    /* Dezente Hervorhebung der Kernzeit 08:00-16:00 (Phase 13, ganztägiges Raster) - hilft bei der
       Orientierung im jetzt deutlich längeren Raster (287 Zellen seit Phase 128, davor 95). */
    .time-grid-cell.core-time {
        background: var(--centra-accent-bg);
    }

.time-entry-block {
    position: absolute;
    left: 3px;
    right: 3px;
    background: var(--centra-accent);
    color: #fff;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

    /* Kurze Einträge (unter 20 Minuten): Der Block ist dann nur so hoch wie EINE Textzeile plus
       Innenabstand (siehe TimeGridWindow.MinBlockHeightPx). Deshalb hier weniger Innenabstand und
       nur der Mandantenname - die Unterzeile hätte keinen Platz mehr und würde sonst halb
       angeschnitten unter dem Titel hervorschauen, was schlechter aussieht als sie wegzulassen.
       Der vollständige Text bleibt über den Tooltip des Blocks erreichbar.

       Issue #61 (15.08.2026): Schrift und Innenabstand sind hier eigens kleiner als im Normalstil,
       damit eine vollständige Zeile in die auf 14px gesenkte Mindesthöhe passt (1px + 1px Abstand
       plus 10px × 1.1 = 11px Zeile = 13px). Genau diese Senkung beseitigt die gemeldete
       Überlappung; ohne den kleineren Satz hier wäre der Name wieder angeschnitten - also der
       Fehler, gegen den die Mindesthöhe ursprünglich eingeführt wurde. */
    .time-entry-block.kompakt {
        padding: 1px 5px;
        font-size: 10px;
        line-height: 1.1;
        display: flex;
        align-items: center;
    }

        .time-entry-block.kompakt .time-entry-sub {
            display: none;
        }

    .time-entry-block.synced {
        background: var(--centra-text-secondary);
        cursor: default;
    }

    /* Einflieg-Animation für einen frisch erstellten Eintrag (Phase 22, Teil F) - die Klasse wird nur
       kurzzeitig genau dem neu erstellten Eintrag mitgegeben (siehe TimeGrid.razor NewEntryId /
       Zeiterfassung.razor ClearNewEntryMarkerAsync), nicht allen Einträgen bei jedem Neu-Rendern. */
    .time-entry-block.entry-enter {
        animation: centra-entry-land 320ms cubic-bezier(.16, 1, .3, 1);
    }

@keyframes centra-entry-land {
    from {
        opacity: 0;
        transform: scale(.92) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.time-entry-title {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time-entry-sub {
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.time-entry-lock {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
}

/* Akuter Auftrag 12.08.2026, Symptom 4 - Buchung in DATEV nicht verarbeitet, dort also NICHT
   angekommen. Dennis' Kernanliegen war, sich sicher sein zu können, dass eine erfasste Zeit wirklich
   da ist; ein Block, der wie jeder andere übertragene aussieht, wäre genau die falsche Sicherheit.

   Der Block bleibt gesperrt (er IST gesendet, und die DATEV-API kennt kein Patch/Delete) - er sieht nur
   nicht mehr harmlos aus: roter Rahmen statt gedämpfter Fläche, Warnzeichen statt Schloss. Die
   Ausrufezeichen-Form trägt die Aussage auch ohne Farbwahrnehmung. */
.time-entry-block.datev-fehler {
    background: var(--centra-danger-text);
    outline: 2px solid var(--centra-danger-text);
    outline-offset: -2px;
}

.time-entry-fehler {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

/* Ticket vom 12.08.2026 - DATEV hat die Buchung beim Anlegen ABGELEHNT (z. B. Tagesobergrenze). Die
   Zeit ist damit genauso wenig in DATEV wie bei .datev-fehler darüber, deshalb dieselbe Lautstärke:
   roter Rahmen, Ausrufezeichen, Aussage auch ohne Farbwahrnehmung erkennbar.

   Bewusst ein RAHMEN auf sonst unveränderter Fläche statt der gefüllten Fläche von .datev-fehler: Der
   Eintrag ist hier NICHT gesperrt - er lässt sich direkt im Raster korrigieren und wird danach sofort
   erneut übertragen. Ein Block, der aussieht wie ein übertragener, würde genau diese Handlungsoption
   verdecken. Der gestrichelte Rahmen sagt "noch nicht drüben, aber änderbar". */
.time-entry-block.datev-abgelehnt {
    outline: 2px dashed var(--centra-danger-text);
    outline-offset: -2px;
}

/* Ticket vom 12.08.2026 - DATEV hat die Übertragung überfällig lange nicht bestätigt. Bewusst NICHT
   rot wie die beiden Fälle darüber: Die stehen für Gewissheiten ("nicht angekommen"), hier ist der
   Zustand offen - die Buchung kann in DATEV existieren oder gelöscht worden sein. Eine Fehlerfarbe
   würde eine Aussage treffen, die wir nicht haben.

   Gestrichelt wie bei .datev-abgelehnt, weil beide dasselbe sagen: nicht gesperrt, hier ist etwas zu
   tun. Die Unterscheidung trägt das Zeichen im Block ("?" statt "!") und der Tooltip, nicht die Farbe
   allein - das funktioniert auch ohne Farbwahrnehmung. */
.time-entry-block.datev-unbestaetigt {
    outline: 2px dashed var(--centra-warning-text);
    outline-offset: -2px;
}

.time-entry-unbestaetigt {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

/* ---------- Modal-Overlay (Zeiteintrag-Editor, Stoppuhr-Buchen-Dialog) ---------- */

.editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 35, 63, .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.editor-card {
    background: var(--centra-surface);
    border-radius: var(--centra-radius-lg);
    width: 100%;
    max-width: 540px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--centra-border);
}

.editor-title {
    font-weight: 700;
    font-size: 16px;
}

.editor-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--centra-text-muted);
    font-size: 14px;
}

.editor-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-date {
    font-size: 13px;
    color: var(--centra-text-secondary);
}

.editor-row {
    display: flex;
    gap: 12px;
}

.editor-row label {
    flex: 1;
}

.editor-field, .editor-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    font-weight: 600;
}

/* Phase 96 (Issue M8, Schritt 1): Schriftgröße, Rundung und Innenabstand kommen aus den
   gemeinsamen Tokens (siehe :root). Gemessen waren die Eingabefelder der drei Präsentationsseiten
   vorher 26 px, 30 px und 34 px hoch, bei drei verschiedenen Schriftgrößen und zwei Radien. */
.editor-field input,
.editor-field select,
.editor-field textarea,
.editor-row input {
    font-family: inherit;
    font-size: var(--centra-control-font-size);
    color: var(--centra-text);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-control-radius);
    padding: var(--centra-field-padding-y) var(--centra-field-padding-x);
    background: var(--centra-surface-2);
}

.editor-field textarea {
    resize: vertical;
}

.editor-static-value {
    font-size: 13.5px;
    color: var(--centra-text-secondary);
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    padding: 7px 9px;
    background: var(--centra-surface-2);
}

.editor-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--centra-text);
}

.editor-error {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 12.5px;
}

.editor-actions {
    display: flex;
    align-items: center;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--centra-border);
    background: var(--centra-surface-2);
}

.editor-actions-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* Phase 96 (Issue M8, Schritt 2) - EIN Regelblock für alle drei Knopfklassen.
   `editor-btn`, `es-btn` und `ze-btn` sind über die Jahre getrennt entstanden und hatten am Ende
   dieselben Zahlen, aber unterschiedliche Zustände. Die Namen bleiben (sie stehen in vielen
   Seiten), die Erscheinung kommt jetzt aus einer Quelle.

   **Gemessen, nicht vermutet** - die tatsächlichen Unterschiede waren nicht die im Issue vermuteten
   Höhen und Radien (die waren bereits identisch), sondern:

   1. `font-family`: Ein <button> erbt die Seitenschrift NICHT von selbst. Ohne die Zeile unten
      rendern alle Knöpfe in Arial, während ein <a> mit derselben Klasse in Segoe UI steht. In der
      Angebotsübersicht stehen genau diese beiden direkt nebeneinander ("Bearbeiten" als Link,
      "Löschen" als Knopf).
   2. `line-height`: dieselbe Ursache für 35 px gegen 33 px Höhe bei gleicher Klasse.
   3. Der ausgegraute Zustand gab es nur bei `ze-btn`. Auf den übrigen Seiten sah ein gesperrter
      Knopf aus wie ein anklickbarer - etwa "Löschen" während eines laufenden Löschvorgangs. */
.editor-btn,
.es-btn,
.ze-btn {
    display: inline-block;
    font-family: inherit;
    font-size: var(--centra-control-font-size);
    font-weight: 600;
    line-height: var(--centra-control-line-height);
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    border-radius: var(--centra-control-radius);
    padding: var(--centra-control-padding-y) var(--centra-control-padding-x);
    cursor: pointer;
    color: var(--centra-text-secondary);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
}

    .editor-btn:hover:not(:disabled),
    .es-btn:hover:not(:disabled),
    .ze-btn:hover:not(:disabled) {
        border-color: var(--centra-text-muted);
    }

    .editor-btn.primary,
    .es-btn.primary,
    .ze-btn.primary {
        background: var(--centra-accent);
        border-color: var(--centra-accent);
        color: #fff;
    }

        .editor-btn.primary:hover:not(:disabled),
        .es-btn.primary:hover:not(:disabled),
        .ze-btn.primary:hover:not(:disabled) {
            filter: brightness(1.08);
        }

    .editor-btn.danger,
    .es-btn.danger,
    .ze-btn.danger {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
        border-color: var(--centra-danger-border);
    }

        .editor-btn.danger:hover:not(:disabled),
        .es-btn.danger:hover:not(:disabled),
        .ze-btn.danger:hover:not(:disabled) {
            background: var(--centra-danger-bg-hover);
            border-color: var(--centra-danger-text);
        }

    /* Gesperrte Knöpfe sollen als gesperrt erkennbar sein - vorher nur bei ze-btn vorhanden. */
    .editor-btn:disabled,
    .es-btn:disabled,
    .ze-btn:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* ---------- Auswertungen (Phase 19: Mitarbeiter-Selbstauswertung + Kanzleileitung) ---------- */

.evaluations {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: var(--centra-content-max-width);
    margin: 0 auto;
    width: 100%;
    /* Siehe ausführliche Begründung bei .dashboard - identisches Muster, identischer Fix. */
    box-sizing: border-box;
}

    .evaluations h1 {
        margin: 0 0 4px;
    }

.eval-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

/* Layout-Korrektur 08.09.2026 (Dennis' Screenshot): Zeitraum-Filter + Aktualisieren-Knopf als EINE
   Gruppe, damit space-between wieder zwei Blöcke verteilt (Suche links, Gruppe rechts) statt den
   Filter mit drei Kindern in die Mitte zu schieben. Gap = derselbe Wert wie .eval-toolbar. */
.eval-toolbar-right {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.eval-employee-picker {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    font-weight: 600;
}

    .eval-employee-picker select {
        font-family: inherit;
        font-size: 13.5px;
        color: var(--centra-text);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
        padding: 7px 9px;
        background: var(--centra-surface-2);
        min-width: 220px;
    }

/* Mandantensuche (Phase 25) - MudAutocomplete statt einfachem <select>, siehe Controlling.razor.
   Feste Breite statt der min-width des vorherigen <select>, da MudAutocomplete standardmäßig die
   volle Breite seines Containers ausfüllt (FullWidth) und ohne definierte Breite im Flex-Toolbar
   sonst unbestimmt schrumpfen würde. */
.eval-client-search {
    width: 280px;
}

.eval-period-filter {
    display: flex;
    gap: 6px;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 9px;
    padding: 4px;
}

.eval-period-btn {
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    cursor: pointer;
}

    .eval-period-btn.active {
        background: var(--centra-accent);
        color: #fff;
    }

    .eval-period-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Phase 50 - Zeitraum-Filter der Kanzleileitungs-Auswertungen (EvaluationPeriodSelectionFilter.razor):
   Heute/Diese Woche/Dieser Monat (.eval-period-filter, wie bisher) + Veranlagungsjahr-Dropdown +
   freier Datumsbereich, alle nebeneinander in einer Zeile. */
.eval-period-selection-filter {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

.eval-period-year-picker {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 4px 6px;
}

    .eval-period-year-picker select {
        font-family: inherit;
        font-size: 13.5px;
        color: var(--centra-text);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
        padding: 7px 9px;
        background: var(--centra-surface-2);
    }

.eval-period-range-picker {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 4px 6px;
}

    .eval-period-range-picker label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12.5px;
        color: var(--centra-text-secondary);
        font-weight: 600;
    }

    .eval-period-range-picker input[type="date"] {
        font-family: inherit;
        font-size: 13.5px;
        color: var(--centra-text);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
        padding: 6px 9px;
        background: var(--centra-surface-2);
    }

.eval-period-year-picker.active,
.eval-period-range-picker.active {
    border-color: var(--centra-accent);
}

.eval-period-range-hint {
    margin-top: 6px;
}

/* Phase 57, Teil C - Abstand zwischen kompletten Karten-Gruppen (z. B. "Arbeitszeit-Übersicht",
   "Abwesenheiten", "Verteilung", "Kosten & Umsatz" im Reiter "Mitarbeiter"; ebenso im Reiter
   "Mandanten", Teil D) - deutlich mehr als das normale .evaluations-Grundraster (18px), damit die
   einzelnen Themenblöcke klar voneinander abgesetzt sind. */
.eval-panel-groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.eval-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.eval-summary-card {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    padding: 16px 18px;
}

/* Phase 57, Teil B1 - Kacheln klickbar (setzen den Buchungslisten-Filter, siehe
   EmployeeEvaluationView.razor/EmployeeEvaluationSummaryCard.razor). Nicht alle .eval-summary-card
   sind klickbar (z. B. die reinen Kennzahl-Kacheln in "Interne Kosten"/"Kosten & Umsatz") - deshalb ein
   eigener Modifier statt die Basisklasse selbst interaktiv zu machen. */
.eval-summary-card--clickable {
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .eval-summary-card--clickable:hover {
        border-color: var(--centra-accent);
        box-shadow: 0 0 0 1px var(--centra-accent);
    }

.eval-summary-label {
    font-size: 12px;
    color: var(--centra-text-secondary);
    margin-bottom: 6px;
}

.eval-summary-value {
    font-size: 21px;
    font-weight: 700;
    color: var(--centra-text);
}

.eval-summary-sub {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    margin-top: 2px;
}

.eval-chart-grid {
    display: grid;
    /* Phase 47: Top-Mandantengruppen entfernt (keine Mandantengruppen bei dieser Kanzlei) - nur noch
       zwei Karten (Donut + Top-Mandanten), deshalb zweispaltig statt dreispaltig. */
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
}

.eval-chart-card .card-body {
    padding-top: 14px;
}

.eval-chart-canvas-wrap {
    position: relative;
    width: 100%;
}

/* .eval-chart-card/.eval-entries-card tragen zusätzlich die .card-Klasse und bekommen den
   Fluent-Kartenschatten dadurch bereits von dort - diese Regel ist v. a. für .eval-summary-card
   nötig, das keine .card-Klasse trägt (redundant, aber unschädlich für die anderen beiden). */
.eval-chart-card,
.eval-summary-card,
.eval-entries-card {
    box-shadow: var(--centra-shadow);
}

.eval-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 16px;
    text-align: center;
    background: var(--centra-surface-2);
    border-radius: var(--centra-radius);
}

    .eval-empty-state--compact {
        padding: 24px 12px;
    }

.eval-empty-icon {
    font-size: 22px;
    color: var(--centra-text-muted);
}

.eval-empty-text {
    font-size: 13px;
    color: var(--centra-text-secondary);
}

/* Buchungsliste (Phase 20, Teil B) */
.eval-entries-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* Phase 96 (Issue M8, Schritt 1): gleiche Maße wie die übrigen Eingabefelder - dieses Feld ist das
   Suchfeld der Mandantenübersicht, eine der Seiten aus dem Präsentationsumfang. */
.eval-client-subfilter {
    font-family: inherit;
    font-size: var(--centra-control-font-size);
    color: var(--centra-text);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-control-radius);
    padding: var(--centra-field-padding-y) var(--centra-field-padding-x);
    background: var(--centra-field-bg);
}

/* Phase 57, Teil E3 - kleine Zwischenüberschrift für die neue Auftragstabelle innerhalb der
   Einzelmandanten-Karte (Reiter "Mandanten"), oberhalb der bereits vorhandenen Kennzahl-Kacheln. */
.eval-orders-heading {
    margin: 18px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--centra-text-secondary);
}

.eval-entries-table-wrap {
    overflow-x: auto;
    /* Phase 62, Nachbesserung 3 - defensiv gegen .card (overflow: hidden) + fehlende Breitenbegrenzung
       dieses Wrap-Divs, die unter bestimmten Layout-Bedingungen die interne Scrollbar verdecken kann
       (Dennis' Feedback: konnte auf /datev-auftraege-test nicht horizontal scrollen). */
    max-width: 100%;
}

/* Auftrag vom 17.08.2026: Folgt eine Tabelle unmittelbar auf eine Kachel-Reihe, braucht sie denselben
   Abstand, den vorher der dazwischenliegende Erklärtext mitbrachte (`.eval-berechnungshinweis`,
   margin-top: 10px). Betrifft die Verlaufstabelle unter der Gesamtumsatz-Karte, seit der Satz dort
   entfernt wurde - sonst klebte die Tabelle direkt an den Kacheln. Bewusst als Geschwister-Regel statt
   einer neuen Klasse: Sie beschreibt genau diese Nachbarschaft und gilt automatisch überall, wo sie
   entsteht. Der Zustand „Verlauf noch nicht geladen" bringt seinen Abstand über `.eval-verlauf-laden`
   bereits selbst mit. */
.eval-summary-row + .eval-entries-table-wrap,
/* Nachtrag vom 17.08.2026: Die Karte hat DREI Zustände, nicht zwei - fehlt der Verlauf ganz (0 € in den
   letzten sechs Monaten), folgt statt der Tabelle ein `.eval-empty-state`. Auch der braucht denselben
   Abstand; sein Innen-Padding wirkt nur innerhalb der grauen Fläche, doppelt wird dadurch nichts. */
.eval-summary-row + .eval-empty-state {
    margin-top: 12px;
}

.eval-entries-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .eval-entries-table th {
        text-align: left;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--centra-text-muted);
        font-weight: 700;
        padding: 0 10px 8px;
        border-bottom: 1px solid var(--centra-border);
        white-space: nowrap;
    }

    .eval-entries-table td {
        padding: 9px 10px;
        border-bottom: 1px solid var(--centra-border);
        white-space: nowrap;
        color: var(--centra-text);
    }

        .eval-entries-table td.eval-entries-comment {
            white-space: normal;
            color: var(--centra-text-secondary);
            min-width: 160px;
        }

    .eval-entries-table tr:last-child td {
        border-bottom: none;
    }

    /* Phase 65, Teil A - Summenzeile unter der Einzelmandanten-Auftragstabelle, muss zu den
       Kanzleileitungs-Kacheln oben passen (siehe Auswertungen.razor). Eigener Rahmen statt des normalen
       eval-entries-table-Trennstrichs, damit die Summe optisch klar von den einzelnen Aufträgen abgesetzt
       ist. */
    .eval-entries-table-footer td {
        font-weight: 600;
        border-top: 2px solid var(--centra-border);
        background: var(--centra-surface-2);
    }

.eval-cost-position {
    color: var(--centra-text-muted);
    font-size: 11.5px;
}

/* Zusatzauftrag 12.08.2026 - Uhrzeit-Spalte der Buchungsliste, wenn die Dauer nicht ins Zeitraster
   passt: Die angezeigte Uhrzeit ist dann von Centra errechnet, nicht die echte (Begründung in
   EvaluationDurationFormat.PasstNichtInsRaster).

   Bewusst ein ZEICHEN statt nur Farbe/Unterstreichung: Ein reiner Farbunterschied wäre für
   farbfehlsichtige Nutzer kein Signal, und eine gepunktete Unterstreichung liest sich in einer
   Tabelle schnell wie ein Link. "≈" trägt die Bedeutung ("ungefähr") schon in sich und passt zu den
   übrigen Textsymbolen der Auswertungen (Σ, ◔, ▤, ☰). cursor: help auf der ganzen Zelle macht
   zusätzlich erfahrbar, dass hier ein Tooltip hängt - der native title greift ohnehin auf der
   gesamten Zelle, nicht nur auf dem Zeichen. */
.eval-entries-table td.eval-time-approx {
    cursor: help;
}

.eval-time-approx-mark {
    margin-left: 4px;
    color: var(--centra-text-muted);
    font-size: 11.5px;
}

/* Akuter Auftrag 12.08.2026, Symptom 4 (Korrekturfassung) - Buchung in DATEV fehlgeschlagen, dort
   also NICHT angekommen.

   Bewusst deutlich lauter als der Raster-Hinweis (≈) darüber: Der erklärt eine Anzeige-Eigenart, das
   hier verlangt eine Handlung in DATEV, sonst fehlt abrechenbare Zeit. Die eingefärbte Zeile macht
   den Fall beim Überfliegen der Liste sichtbar, ohne dass man jede Zelle lesen muss.

   Farbe ist nur die Verstärkung: Das Kennzeichen trägt "!" und das Wort "DATEV-Fehler" im Text, ist
   also auch ohne Farbwahrnehmung eindeutig. */
.eval-entries-table tr.eval-row-datev-fehler td {
    background: var(--centra-danger-bg);
}

/* Auftrag vom 15.08.2026, Teil B - Zeilen der Rangliste "Größter offener Betrag" führen zum Mandanten.
   Klickbarkeit muss sichtbar sein, bevor jemand klickt: Zeiger-Cursor plus Hover-Hinterlegung. */
.eval-entries-table tr.eval-zeile-klickbar {
    cursor: pointer;
}

    .eval-entries-table tr.eval-zeile-klickbar:hover td {
        background: var(--centra-accent-bg);
    }

/* Auftrag vom 15.08.2026 (Nacht) - aufgeklappte Mandanten-Aufschlüsselung unter einer Monatszeile des
   Verlaufs. Eingerückt und leicht hinterlegt, damit sofort klar ist, dass sie zur Zeile darüber gehört
   und nicht eine weitere Monatszeile ist. */
.eval-entries-table tr.eval-monatsdetail-zeile > td {
    padding: 0 0 10px 28px;
    background: var(--centra-surface-muted, rgba(0, 0, 0, 0.02));
}

/* Issue #85 - die Aufschlüsselung eines Monats besteht jetzt aus zwei Blöcken („Offene Posten" und der
   zugeklappten Liste „Bereits abgerechnet"), nicht mehr aus einer gemischten Tabelle. */
.eval-monatsdetail-block + .eval-monatsdetail-block {
    margin-top: 12px;
}

.eval-monatsdetail-titel {
    font-size: 12px;
    font-weight: 600;
    color: var(--centra-text-muted);
}

    /* Die „Bereits abgerechnet"-Überschrift ist zugleich der Auf-/Zuklapp-Schalter (▸/▾) - deshalb als
       klickbar erkennbar. Die vorhandene .eval-zeile-klickbar greift nur auf Tabellenzeilen. */
    .eval-monatsdetail-titel--klickbar {
        cursor: pointer;
        user-select: none;
    }

        .eval-monatsdetail-titel--klickbar:hover {
            color: var(--centra-text);
        }

.eval-monatsdetail-tabelle {
    margin-top: 4px;
}

    .eval-monatsdetail-tabelle th,
    .eval-monatsdetail-tabelle td {
        font-size: 12px;
    }

/* Auftrag vom 15.08.2026, Teil C - Knopf samt Erklärung, warum der Verlauf nicht automatisch kommt. */
.eval-verlauf-laden {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

    .eval-verlauf-laden .eval-berechnungshinweis {
        margin-top: 0;
        flex: 1 1 320px;
    }

.eval-datev-fehler-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border: 1px solid var(--centra-danger-border);
    border-radius: 3px;
    background: var(--centra-surface);
    color: var(--centra-danger-text);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

/* Phase 59 - "Mandanten ohne Buchung"-Tabelle: pro Zeile aufklappbares Detail (NonBillableOrders)
   statt eines verschachtelten MudExpansionPanel je Zeile (siehe Handoff). */
.eval-clickable-row {
    cursor: pointer;
}

    .eval-clickable-row:hover td {
        background: var(--centra-surface-2);
    }

.eval-expand-arrow {
    width: 18px;
    color: var(--centra-text-muted);
}

.eval-detail-row td {
    background: var(--centra-surface-2);
    padding: 10px 10px 14px 28px !important;
}

.eval-detail-table {
    font-size: 12px;
}

    .eval-detail-table th {
        color: var(--centra-text-muted);
    }

.eval-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

    .eval-badge--muted {
        background: #eef1f5;
        color: #4d5a72;
    }

    /* Phase 63 - "abgerechnet"-Kennzeichen an der "Realer Umsatz"-Spalte der Einzelmandanten-
       Auftragstabelle (Auswertungen.razor), analog zu .controlling-positive (--centra-success-text). */
    .eval-badge--success {
        background: #e6f7e6;
        color: var(--centra-success-text);
        margin-left: 6px;
    }

    /* Auftrag vom 16.08.2026 - "fakturiert WJ 2025" an einer Zeile, deren DATEV-Beleg zu einem anderen
       Wirtschaftsjahr gehört und deshalb NICHT in den Summen dieses Zeitraums steckt. Bewusst neutral
       grau statt grün: Der grüne Badge muss weiterhin eindeutig "steckt in diesen Zahlen" bedeuten,
       sonst wäre die Kennzeichnung wertlos. */
    .eval-badge--neutral {
        background: rgba(0, 0, 0, 0.06);
        color: var(--centra-text-muted);
        margin-left: 6px;
    }

    /* Auftrag vom 17.08.2026 - „manuell abgerechnet": DATEV hat abgerechnet, nennt aber keinen Betrag,
       Centra rechnet mit der Schätzung. Bewusst eine DRITTE Farbe (dezentes Orange, wie der Hinweis auf
       fehlende Sätze): weder grün (echter Betrag zählt hier) noch grau (echter Betrag zählt anderswo) -
       sonst würden drei fachlich verschiedene Zustände optisch verschmelzen. */
    .eval-badge--manuell {
        background: rgba(200, 120, 20, 0.12);
        color: #8a5a10;
        margin-left: 6px;
    }

/* Auftrag vom 16.08.2026 - kleines "i" neben der Unterauftragsbezeichnung: Hover erklärt, warum eine Zeile
   mit anderslautendem Monatsnamen im Zeitraum auftaucht (Buchungsdatum vs. Bezeichnung). Bewusst
   unaufdringlich - runder, grauer Kreis, kein Textbadge (Dennis' Wunsch). */
.eval-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1px solid var(--centra-text-muted);
    color: var(--centra-text-muted);
    font-size: 10px;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
}

/* Phase 63 - Schätzung (Umsatz-Spalte) dezent ausgrauen, sobald für denselben Unterauftrag ein echter,
   bereits abgerechneter DATEV-Umsatz vorliegt (order.IsInvoiced && order.RealRevenue is not null) - der
   echte Wert gilt dann als vertrauenswürdiger, die Schätzung ist überholt. */
.eval-estimate-muted {
    opacity: .5;
}

/* Auftrag vom 15.08.2026, Teil 1 - erklärt unter einer Kachel/einem Diagramm, WIE der gezeigte Umsatz
   zustande kommt. Centra kennt zwei fachlich verschiedene Umsatzarten (reine Stunden-Schätzung im
   Reiter "Mitarbeiter", "bestmöglich bekannt" im Reiter "Mandanten"); ohne diesen Hinweis sehen die
   unterschiedlichen Summen desselben Zeitraums wie ein Fehler aus (Dennis' Rückfrage). Auf
   Einzelauftrags-Ebene leisten das bereits `eval-estimate-muted` und das "abgerechnet"-Badge -
   dies ist das Gegenstück für die aggregierten Ansichten. */
.eval-berechnungshinweis {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--centra-text-muted);
}

/* Issue #79 - "Kosten/Umsatz unvollständig, weil Mitarbeiter X keinen Satz hat". Ein Pflegehinweis, keine
   Störung: dezent hinterlegt statt rot, aber deutlicher als der graue Erklärtext darüber. */
.eval-fehlende-saetze {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 152, 0, 0.10);
    font-size: 12px;
    line-height: 1.5;
    color: var(--centra-text);
}

    .eval-fehlende-saetze > div + div {
        margin-top: 4px;
    }

/* Nachbesserung Phase 63 - Zusatz "(vermutlich Pauschale)" hinter dem Auftragsnamen (Auswertungen.razor,
   order.LikelyFlatFee) - reine Heuristik, deshalb bewusst als schlichter, dezenter Text statt Badge/Chip. */
.eval-flatfee-hint {
    color: var(--centra-text-muted);
    font-weight: 400;
    font-size: 0.85em;
}

/* Phase 64 - "Details"-Link neben dem "(vermutlich Pauschale)"-Hinweis, öffnet PauschalenCheckDialog. */
.eval-flatfee-details-link {
    margin-left: 6px;
    font-size: 0.85em;
}

/* Phase 64 - Fußnotenhinweis im PauschalenCheckDialog, dass alle Werte direkt aus DATEV stammen. */
.eval-flatfee-note {
    color: var(--centra-text-muted);
    font-size: 0.85em;
    margin-top: 12px;
    margin-bottom: 0;
}

.eval-category-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

    .eval-category-badge.eval-category-client {
        background: var(--centra-accent-bg);
        color: var(--centra-accent-text);
    }

    .eval-category-badge.eval-category-admin {
        background: #eef1f5;
        color: #4d5a72;
    }

    .eval-category-badge.eval-category-sick {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
    }

    .eval-category-badge.eval-category-vacation {
        background: #fdf3e0;
        color: #9a6b1f;
    }

    .eval-category-badge.eval-category-education {
        background: #e6f0fb;
        color: #2a5c99;
    }

    .eval-category-badge.eval-category-vocationalschool {
        background: #f1eafa;
        color: #6b3fa0;
    }

    /* Phase 53 - "Nicht abrechenbare Mandantenzeiten" (neue Kategorie): eigener, von "Mandanten" (Blau)
       klar unterscheidbarer Teal-Ton, damit abrechenbare und nicht abrechenbare Mandantenzeiten auf
       einen Blick auseinanderzuhalten sind, ohne mit einer der bestehenden Farben zu kollidieren. */
    .eval-category-badge.eval-category-nonbillableclient {
        background: #e0f5f5;
        color: #03696b;
    }

/* Controlling (Phase 21) - wiederverwendet weitgehend die eval-*-Klassen (Karten, Summary-Zeile,
   Tabelle, Badges), hier nur die controlling-spezifischen Ergänzungen. */
.controlling-mini-chart {
    margin: 4px 0 18px;
}

.controlling-positive {
    color: var(--centra-success-text);
}

.controlling-negative {
    color: var(--centra-danger-text);
}

/* Phase 64 (Pauschalen-Check-Ansicht) - beim Testen festgestellt: .eval-entries-table td { color: ... }
   (Tabellen-Grundfarbe) hat dieselbe Selektor-Stärke (eine Klasse + ein Typ-Selektor) wie eine reine
   .controlling-positive/-negative-Klasse und gewinnt dadurch je nach Deklarationsreihenfolge im Zweifel
   gegen sie, sodass eine <td class="controlling-negative"> innerhalb von .eval-entries-table OHNE diese
   Ergänzung farblos bliebe. Eigene, gleich starke (Typ+Klasse) Regel behebt das für alle .eval-entries-
   table-Tabellen, nicht nur PauschalenCheckDialog. */
td.controlling-positive {
    color: var(--centra-success-text);
}

td.controlling-negative {
    color: var(--centra-danger-text);
}

/* Dashboard-Widget (Phase 23) - erstes klickbare Widget, das auf eine andere Seite navigiert (siehe
   ControllingWidget.razor); dezenter Hover-Schatten als Klick-Affordance, sonst identisch zu .card. */
.controlling-widget {
    cursor: pointer;
}

    .controlling-widget:hover,
    .controlling-widget:focus-visible {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    }

.controlling-widget-stats {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.controlling-widget-stat {
    flex: 1;
    min-width: 96px;
}

.controlling-widget-list {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--centra-border);
}

.controlling-negative-badge {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
}

.controlling-dunning {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    background: #eef1f5;
    color: #4d5a72;
}

    .controlling-dunning.controlling-dunning-1 {
        background: #fdf3e0;
        color: #9a6b1f;
    }

    .controlling-dunning.controlling-dunning-2 {
        background: #fbe6d5;
        color: #a15a1f;
    }

    .controlling-dunning.controlling-dunning-3 {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
    }

@media (max-width: 960px) {
    /* Weniger Spalten auf schmalen Bildschirmen - "groß" (span 2) wird dadurch automatisch zur vollen
       Breite, ohne dass die Widget-Komponenten selbst etwas von der Bildschirmbreite wissen müssen. */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eval-chart-grid {
        grid-template-columns: 1fr;
    }
}

/* Phase 72, Robustheits-Fix - Fehlerkarte der PageErrorBoundary (fängt Seiten-Ausnahmen ab, statt den
   Blazor-Circuit reißen zu lassen). Bewusst dezent im normalen Card-Stil statt als aggressive
   Fehlermeldung: die Navigation bleibt bedienbar, der Nutzer soll einfach weiterarbeiten können. */
.page-error-card {
    max-width: 640px;
    margin: 24px auto;
}

    .page-error-card .card-icon {
        color: var(--centra-danger-text);
    }

    .page-error-card .es-hint {
        margin: 0 0 12px;
    }

/* Phase 77 - Mitarbeiterprofile: inaktive (Centra-lokal deaktivierte) Mitarbeiter dezent grau
   hinterlegen, damit sie in der "Alle"-Ansicht sofort erkennbar sind, ohne die Tabelle unruhig zu
   machen. Bewusst nur Hintergrund + gedämpfte Schrift, keine Signalfarbe: "inaktiv" ist ein
   Normalzustand (z. B. ausgetretene Mitarbeiter), kein Fehler. */
.mp-row-inactive td {
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
}

/* Kompakte Eingabefelder in der Profiltabelle - ohne feste Breite würden Zahlenfelder die Tabelle
   unnötig auseinanderziehen. */
.mp-input {
    width: 90px;
    padding: 4px 6px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface);
    color: var(--centra-text);
    font-family: inherit;
    font-size: 12.5px;
}

/* ⚑ Runde 55, Schritt 1d - Wochenstunden-Spalte in der Mitarbeiterprofile-Tabelle ist nicht mehr
   direkt editierbar (siehe VertragsstundenPflegeDienst-Klassenkommentar): Der Wert wird jetzt über
   den Vertragsstunden-Dialog gepflegt, hier nur noch als gespiegelter Ist-Stand angezeigt. Rechts-
   bündig wie andere Zahlenwerte (vgl. .mp-balance), aber ohne Eingabefeld-Rahmen - stattdessen ein
   gedämpfter Text, der "nicht editierbar" signalisiert, ohne wie eine deaktivierte Schaltfläche zu
   wirken. */
.mp-readonly {
    text-align: right;
    white-space: nowrap;
    color: var(--centra-text-muted);
    cursor: help;
}

/* Phase 78 - Arbeitszeitkonto-Dialog (HoursBalanceDialog.razor). Bewusst global und nicht als scoped
   CSS: der Dialog wird von MudBlazor außerhalb der aufrufenden Komponente gerendert, ein
   komponentenspezifisches Scope-Attribut greift dort nicht zuverlässig. */
.hb-section {
    margin: 18px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--centra-text);
}

/* Eingabezeile, die bei schmalen Fenstern umbricht statt den Dialog horizontal zu sprengen. */
.hb-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

/* Nur DIREKTE Kinder: Gemeint sind die eigenen Wrapper um Text-/Zahlenfelder
   (<label>Feldname <input/></label>). Ohne den Kind-Selektor traf die Regel auch das <label>, das
   MudSwitch intern rendert - dessen Wurzelelement ist ein <label class="mud-switch"> innerhalb eines
   <div class="mud-input-control-boolean-input">, also ein ENKEL von .hb-form. Da ".hb-form label"
   (Klasse + Tag) spezifischer ist als MudBlazors ".mud-switch" (nur Klasse), gewann bisher unsere
   Regel und erzwang flex-direction:column: Schalter oben, Beschriftung klein und grau darunter statt
   nebeneinander. Betraf jeden MudSwitch im Rechner (Leistungen, ESt, Extras, Steuern), im
   Steuern-Reiter fiel es wegen vier untereinanderstehenden Schaltern nur am deutlichsten auf. */
.hb-form > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--centra-text-muted);
}

/* ⚑ Runde 55, Abschluss - die fünf Wochentage im Tagesmodell-Dialog. Ein Tageswert ist eine
   einstellige Stundenzahl mit Viertelstunden-Schritt; in voller .mp-input-Breite umbrächen die fünf
   Felder auf schmalen Fenstern in zwei Zeilen und der Wochenrhythmus wäre nicht mehr ablesbar. */
.tm-tage > label .mp-input {
    width: 72px;
}

/* Die Begründung ist ein Satz, kein Zahlenwert - sie braucht mehr Platz als die schmale .mp-input. */
.hb-comment {
    flex: 1 1 260px;
}

    .hb-comment .mp-input {
        width: 100%;
    }

/* Phase 96 (Issue M8, Schritt 1): Die Eingabefelder im Angebotsrechner bekommen dieselben Maße wie
   die der übrigen Präsentationsseiten - vorher waren sie mit 26 px die flachsten von allen und
   standen direkt neben dem deutlich höheren MudBlazor-Autocomplete.

   Bewusst NUR innerhalb von .hb-form und nicht an .mp-input selbst: Dieselbe Klasse trägt auch die
   Zahlenfelder in den Tabellen der Mitarbeiterprofile, die bewusst schmal und flach sind, damit die
   Tabelle nicht auseinandergezogen wird. Die dort gewählte Kompaktheit ist kein Versehen. */
.hb-form .mp-input {
    font-size: var(--centra-control-font-size);
    border-radius: var(--centra-control-radius);
    padding: var(--centra-field-padding-y) var(--centra-field-padding-x);
    background: var(--centra-field-bg);
}

.hb-error {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--centra-danger-text);
}

/* Hinweis, der eine Eingabe NICHT verhindert - im Unterschied zu .hb-error. Verwendet für den
   ESt-Endpreis außerhalb des gesetzlichen Gebührenrahmens: Die Kanzlei darf bewusst abweichen,
   soll es aber sehen. Deshalb warnend statt rot. */
.hb-warnung {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 3px solid var(--centra-warning, #c8860d);
    background: var(--centra-surface-muted, rgba(200, 134, 13, .08));
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

/* Saldo-Spalte in der Mitarbeiterprofile-Tabelle: rechtsbündig wie andere Zahlenwerte. */
.mp-balance {
    text-align: right;
    white-space: nowrap;
}

/* Zwei Aktions-Buttons je Zeile (Speichern + Konto) - nebeneinander statt untereinander. */
.mp-actions {
    white-space: nowrap;
}

    .mp-actions .editor-btn + .editor-btn {
        margin-left: 6px;
    }

/* Phase F - Angebote-Dashboard. Betragsspalte rechtsbündig wie andere Zahlenwerte in Centra. */
.ang-betrag {
    text-align: right;
    white-space: nowrap;
}

/* Praxistest-Korrektur: Die Überschrift der Betragsspalte stand links, die Werte darunter rechts.
   Ursache war nicht die fehlende Regel oben, sondern ihre Spezifität - ".eval-entries-table th"
   (Klasse + Element) schlägt ".ang-betrag" (nur Klasse) und setzt text-align auf left zurück.
   Deshalb hier beide Zellenarten ausdrücklich und spezifisch genug. */
.eval-entries-table th.ang-betrag,
.eval-entries-table td.ang-betrag {
    text-align: right;
}

/* Spalte "Jahressumme (netto)" der Angebotsübersicht - ausdrücklich zentriert statt rechtsbündig.
   Bewusst eine EIGENE Klasse und nicht ang-betrag mit Zusatzregel: Sonst konkurrieren zwei
   Ausrichtungen um dieselben Zellen, und ang-betrag trägt inzwischen auch die Faktor- und
   Einmalbetragsspalten in AngebotKonfiguration.razor sowie sämtliche Beträge im Rechner, die alle
   rechtsbündig bleiben sollen.

   Dieselbe Spezifität (Klasse + Element) wie die th-Grundregel von .eval-entries-table - sonst
   stünde die Überschrift wieder links, genau wie zuvor bei .ang-betrag. */
.eval-entries-table th.ang-jahressumme,
.eval-entries-table td.ang-jahressumme {
    text-align: center;
    white-space: nowrap;
}

/* Etwas mehr Luft in den Zeilen der Angebotsübersicht - bewusst NUR hier (siehe Kommentar in
   Angebote.razor), damit die übrigen Übersichtstabellen unverändert bleiben. */
.eval-entries-table.ang-tabelle th {
    padding-bottom: 10px;
}

.eval-entries-table.ang-tabelle td {
    padding: 13px 12px;
}

/* Phase 95 (Issue M2) - Fußzeile der Angebotsübersicht mit "x von y" und "Mehr laden".
   Erscheint nur, wenn es tatsächlich mehr zu laden gibt. Zentriert unter der Tabelle, damit die
   Zeile nicht wie eine weitere Tabellenzeile wirkt. */
.ang-mehr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 4px;
}

/* Der Hinweistext ist hier eine Randangabe, kein Absatz - ohne das Zurücksetzen erbt er den
   Abstand der es-hint-Grundregel und schiebt die Schaltfläche daneben aus der Mitte. */
.ang-mehr .es-hint {
    margin: 0;
}

/* Gleiche Mindestbreite für "Bearbeiten" und "Löschen": Der Link und der Button sind
   unterschiedliche Elemente, ihre Breite richtete sich sonst allein nach der Beschriftung. */
.ang-aktionen .ang-aktion {
    display: inline-block;
    min-width: 96px;
    text-align: center;
}

/* Phase G - Angebotsrechner. Zweispaltig: links die Eingabe-Reiter, rechts die mitlaufende
   Zusammenfassung. Bricht auf schmalen Fenstern auf eine Spalte um, damit die Eingabefelder nicht
   unbrauchbar schmal werden. */
.ang-rechner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .ang-rechner {
        grid-template-columns: 1fr;
    }
}

/* Die Zusammenfassung bleibt beim Scrollen sichtbar - sie ist der Bezugspunkt fuer jede Eingabe. */
.ang-summe > .card {
    position: sticky;
    top: 16px;
}

/* Breitere Eingabefelder als die kompakte .mp-input aus der Profiltabelle: Hier stehen Adressen und
   Firmennamen, keine Zahlenwerte. */
.ang-input-breit {
    width: 100%;
    min-width: 220px;
}

.ang-feld-breit {
    flex: 1 1 260px;
}

.ang-autocomplete {
    flex: 1 1 320px;
}

/* Phase 96 (Issue M8, Schritt 1) - das MudBlazor-Autocomplete optisch an die eigenen Felder
   angleichen.

   Es bleibt MudBlazor: Die Vorschlagsliste mit Tastaturbedienung ist genau das, was das eigene CSS
   nicht kann - ein Nachbau wäre ein Rückschritt. Angeglichen werden deshalb nur Rundung, Schrift
   und Innenabstand, damit es neben den eigenen Feldern derselben Zeile nicht wie aus einer anderen
   Anwendung aussieht.

   Bewusst auf .ang-autocomplete begrenzt und nicht global auf .mud-input: Die gleichartigen
   Suchfelder in Auswertungen.razor und Controlling.razor werden in dieser Runde nicht angefasst
   (Schritt 3 des Issues ist ausdrücklich eine eigene Runde). */
.ang-autocomplete .mud-input.mud-input-outlined {
    border-radius: var(--centra-control-radius);
    font-size: var(--centra-control-font-size);
    background: var(--centra-field-bg);
}

    /* MudBlazor zeichnet den Rahmen des Outlined-Felds über ein eigenes Element hinter der Eingabe -
       ohne dieselbe Rundung dort bliebe eine sichtbar eckige Kante hinter den runden Ecken stehen. */
    .ang-autocomplete .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-radius: var(--centra-control-radius);
        border-color: var(--centra-border);
    }

    .ang-autocomplete .mud-input.mud-input-outlined input {
        font-size: var(--centra-control-font-size);
    }

/* Der Innenabstand des inneren Feldes bleibt bewusst MudBlazors eigener.
   Gemessen: Damit ist das Autocomplete 36,4 px hoch, die eigenen Felder daneben 35,0 px - ein
   Unterschied von 1,4 px, den man nicht sieht.

   Ihn exakt auszugleichen wäre möglich, aber teuer: MudBlazor rechnet die Höhe aus `height: 1lh`
   PLUS Innenabstand. Mit unserem Wert (7 px) fällt das Feld auf 29,4 px zusammen - zu flach. Es
   bräuchte also eine auf MudBlazors internes Modell abgestimmte Zahl, die beim nächsten Update
   still danebenliegt. Für 1,4 px ist das der schlechtere Handel. */

/* Schalterreihe: untereinander statt nebeneinander, damit die Beschriftungen lesbar bleiben. */
.ang-schalter {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* .ang-paket-aktiv ist mit Phase 114 entfallen: Die Vergleichskarten sind zur Paketauswahl geworden
   und bringen ihre Hervorhebung als .paket-card.active in Angebotsrechner.razor.css selbst mit. */

/* Summentabelle rechts: zwei Spalten, Betrag rechtsbuendig, Summenzeilen abgesetzt. */
.ang-summentabelle td:first-child {
    width: 100%;
}

.ang-summenzeile td {
    font-weight: 600;
    border-top: 1px solid var(--centra-border);
}

.ang-aktionen {
    margin-top: 12px;
}

/* .ang-summe-abschnitt (dicker Trennstrich vor der Zwischensumme) ist mit Phase 122 entfallen: Die
   Zusammenfassung ist jetzt in vier Blöcke geteilt, und die Gesamtrechnung setzt sich über
   .ang-gesamtrechnung als eigener Kasten ab - ein zusätzlicher Trennstrich darin wäre doppelt. */

.ang-summe-brutto td {
    font-size: 14px;
}

/* ----- Phase 122: geblockte Zusammenfassung ----- */

/* Überschrift eines Blocks. Kleiner als die übrigen hb-section-Überschriften der Seite: Sie gliedert
   innerhalb einer schmalen Karte, konkurriert also nicht mit den Reiter-Überschriften. */
.ang-block-titel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--centra-text-secondary);
    margin: 16px 0 4px;
}

/* Der erste Block schließt direkt an den Kartenkopf an - dort wäre der Abstand von oben zu viel. */
.ang-summentabelle + .ang-block-titel,
.card-body > .ang-block-titel:first-child {
    margin-top: 18px;
}

/* Die Zielzahl, auf die die drei Leistungsblöcke hinführen - deshalb als eigener Kasten abgesetzt
   statt als vierter gleichrangiger Abschnitt (Phase 122). */
.ang-gesamtrechnung {
    margin-top: 18px;
    padding: 4px 12px 8px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
}

    .ang-gesamtrechnung .ang-block-titel {
        margin-top: 8px;
        color: var(--centra-text);
    }

.ang-listen-aktionen {
    margin-top: 8px;
}

/* ----- Auswahl über Schaltflächen statt Dropdown (Phase 121/123) -----
 *
 * Entstanden in Phase 121 für die Rhythmus-Auswahl im Rechner, in Phase 123 auf die
 * Rechtsform-/Paket-Auswahl der Angebots-Einstellungen ausgeweitet. Bewusst hier in app.css und nicht
 * in einer .razor.css: Die beiden Verwender sind verschiedene Komponenten, und eine gescopte Regel
 * greift nur in ihrer eigenen (siehe Kommentar weiter unten zu den Einstellungsseiten). Zwei fast
 * gleiche Regelsätze wären genau die Doppelpflege, die man später übersieht.
 */
.ang-wahl {
    display: inline-flex;
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    overflow: hidden;
}

    .ang-wahl button {
        font-family: inherit;
        font-size: 12px;
        padding: 6px 10px;
        border: none;
        background: var(--centra-surface);
        color: var(--centra-text-secondary);
        cursor: pointer;
        white-space: nowrap;
    }

        .ang-wahl button + button {
            border-left: 1px solid var(--centra-border);
        }

        .ang-wahl button:hover {
            background: var(--centra-surface-2);
        }

        .ang-wahl button.active {
            background: var(--centra-accent);
            color: #fff;
        }

/* Variante für lange Beschriftungen (Rechtsformen): zwei Spalten statt einer Reihe, sonst sprengt
   "Personengesellschaft" neben drei weiteren Namen die Tabellenzelle. */
.ang-wahl-umbruch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
}

    .ang-wahl-umbruch button + button {
        border-left: none;
    }

    .ang-wahl-umbruch button:nth-child(even) {
        border-left: 1px solid var(--centra-border);
    }

    .ang-wahl-umbruch button:nth-child(n+3) {
        border-top: 1px solid var(--centra-border);
    }

/* Ein einzeln stehender Ja/Nein-Schalter (KlickbaresFeld) auf einer Einstellungsseite - begrenzt,
   damit er nicht über die volle Seitenbreite läuft. Gegenstück zu .schalter-einzeln im Rechner. */
.ang-schalter-feld {
    max-width: 420px;
    margin: 4px 0 12px;
}

/* ===== Einstellungsseiten (Einstellungen.razor und AngebotKonfiguration.razor) =====
 *
 * Diese Klassen standen ursprünglich in Einstellungen.razor.css. Blazor hängt an jede Regel einer
 * .razor.css ein komponenteneigenes b-xxxxxxxx-Attribut an - dieselben Klassennamen greifen deshalb
 * NICHT in einer anderen Komponente. AngebotKonfiguration.razor (Route /angebote/einstellungen) hat
 * keine eigene .razor.css und rendert daher völlig ungestylt: Buttons ohne Rahmen, Eingabefelder ohne
 * Kanzlei-Optik, Statuszeilen ohne Hintergrund.
 *
 * Deshalb hierher VERSCHOBEN (nicht kopiert - in der gescopten Datei stehen sie nicht mehr, sonst
 * müssten sie doppelt gepflegt werden). Rein seitenspezifische Regeln (.einstellungen, .es-logo-*)
 * sind bewusst dort geblieben.
 */

.es-subtitle {
    margin: 0 0 8px;
    color: var(--centra-text-secondary);
    font-size: 13.5px;
}

.es-hint {
    color: var(--centra-text-secondary);
    font-size: 13px;
    margin: 0 0 12px;
}

.es-status {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 12px;
}

    /* Phase 96 (Issue N3): Fehlschläge sahen aus wie Bestätigungen - dieselbe blaue Karte für
       "gespeichert" und für "Keine Berechtigung zum Speichern". Die Farbe trägt jetzt die Aussage. */
    .es-status.fehler {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
    }

/* Issue #74: Die nach einem Sync gelöschten Einträge, aufklappbar unter der Ergebnismeldung
   (GeloeschteEintraegeListe.razor - genutzt von Zeiterfassung UND Einstellungen). Bewusst in der
   Warnfarbe statt in der neutralen Statusfarbe: Löschen ist die einzige nicht rückholbare Folge
   eines Syncs und soll sich von "aktualisiert"/"importiert" abheben. */
.sync-geloescht {
    background: var(--centra-warning-bg);
    color: var(--centra-warning-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 12px;
}

    .sync-geloescht summary {
        cursor: pointer;
        font-weight: 600;
    }

    .sync-geloescht ul {
        margin: 8px 0 0;
        padding-left: 18px;
    }

    .sync-geloescht li {
        margin-bottom: 2px;
    }

    /* Der Erklärabsatz erbt sonst die graue Sekundärfarbe und wird auf dem Warnhintergrund blass. */
    .sync-geloescht .es-hint {
        color: inherit;
        margin: 8px 0 0;
    }

/* Phase 96 (Issue M8): `.es-btn` stand hier mit einer eigenen, inhaltsgleichen Kopie. Erscheinung
   und Zustände kommen jetzt aus dem gemeinsamen Regelblock weiter oben (Suche nach "Issue M8,
   Schritt 2"), damit es nur noch eine Stelle zu pflegen gibt. */

.es-leadership-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.es-section h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

.es-window-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 10px;
}

    .es-window-row label {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12.5px;
        color: var(--centra-text-secondary);
        font-weight: 600;
    }

    .es-window-row input {
        width: 90px;
        font-family: inherit;
        font-size: 13.5px;
        color: var(--centra-text);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
        padding: 7px 9px;
        background: var(--centra-surface-2);
    }

/* Schaltflächenzeile unter der Überschrift einer Unterseite (z. B. "Zurück zur Übersicht" auf
   /angebote/einstellungen). Eigene Zeile statt eines Links im Fließtext - dort wurde er übersehen. */
.ang-kopfzeile {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Teilposition in der Zusammenfassung des Angebotsrechners: eine einzelne Zusatzposition bzw. ein
   Hinweis, der zur darunterstehenden Gesamtzeile gehört. Eingerückt und kleiner, damit erkennbar
   bleibt, dass es sich um einen Bestandteil dieser Summe handelt - nicht um einen zusätzlich zu
   addierenden Betrag. */
.ang-teilposition td:first-child,
td.ang-teilposition {
    padding-left: 22px;
    font-size: 12px;
    color: var(--centra-text-secondary);
    /* Lange Hinweistexte muessen umbrechen duerfen. ".eval-entries-table td" setzt weiter oben
       white-space: nowrap - fuer die kurzen Label/Betrag-Zeilen richtig, aber der Stundenbasis-Hinweis
       steht als ein langer Satz in EINER Zelle ueber colspan="2" und zwang damit die ganze Tabelle auf
       Ueberbreite. Die Zusammenfassungstabelle liegt als einzige dieser Datei NICHT in einem
       .eval-entries-table-wrap (kein overflow-x: auto), also wurde der Ueberschuss vom .card
       (overflow: hidden) abgeschnitten - samt der kompletten rechten Betragsspalte.
       Spezifitaet: "td.ang-teilposition" ist mit (0,1,1) gleichauf mit ".eval-entries-table td",
       steht aber spaeter im Stylesheet und gewinnt deshalb. Die .ang-betrag-Spalte bleibt unberuehrt
       und damit kompakt. */
    white-space: normal;
}

/* Detailfelder einer aktivierten Steuererklaerung im Reiter "Steuern". Linker Strich statt eines
   eigenen Kastens: bindet die Felder sichtbar an den zugehoerigen Schalter darueber, ohne die
   schlanke Formularoptik der Seite aufzubrechen. */
.ang-erklaerung {
    border-left: 2px solid var(--centra-border);
    padding-left: 12px;
    margin: 0 0 14px 6px;
}

.ang-erklaerung-titel {
    font-size: 12px;
    font-weight: 700;
    color: var(--centra-text-secondary);
    margin-bottom: 6px;
}

/* StBVV-Werte-Reiter: schmales Zahlenfeld in der Kanzlei-Spalte, damit die Tabelle nicht auseinander
   laeuft, und der Centra-Vorschlag daneben zurueckhaltend, weil er nur Referenz ist. */
.stbvv-faktor-feld {
    width: 90px;
    text-align: right;
}

.eval-entries-table td.stbvv-vorschlag {
    color: var(--centra-text-muted);
}

/* Faktor-Eingaben brauchen mehr Platz als die schmale .mp-input (90px): Der Platzhalter lautet
   "leer = 0,35 (Vorschlag)" und wurde sonst mitten im Wort abgeschnitten. Bewusst nur hier statt
   .mp-input global zu verbreitern - die uebrigen Zahlenfelder sollen kompakt bleiben. */
.ang-faktor-feld {
    width: 170px;
}

/* Briefkopf-Formular in den Einstellungen: mehrere Felder je Zeile, aber jedes breit genug fuer eine
   Anschriftszeile - die schmale .mp-input (90px) waere hier unbrauchbar. Umbruch erlaubt, damit die
   Zeilen auf schmalen Fenstern nicht ueber den Rand laufen. */
.es-briefkopf-zeile {
    flex-wrap: wrap;
}

.es-briefkopf-feld {
    width: 260px;
}

.es-untertitel {
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--centra-text-secondary);
}

/* ---------- Schieberegler / Toggle (Phase 145) ----------

   Wiederverwendbarer Baustein fuer echte Ein/Aus-Entscheidungen, die sofort wirken - im Unterschied
   zu .editor-checkbox, das fuer Kaestchen in Formularen gedacht ist, die erst beim Speichern greifen.
   Genau darum geht es bei einem Schieberegler: Die Optik verspricht "ist jetzt an", und das muss auch
   stimmen. Ein Toggle an einem Formular, das noch gespeichert werden muss, waere irrefuehrend.

   Reines CSS, kein JavaScript: Darunter liegt ein ganz normales, fokussierbares
   <input type="checkbox">, das nur umgestylt wird (appearance: none). Damit funktionieren Tastatur
   (Tab + Leertaste), Screenreader und das Verknuepfen ueber ein umschliessendes <label> unveraendert
   weiter - anders als bei der verbreiteten Loesung mit <div>-Attrappen.

   Farben ausschliesslich aus den vorhandenen --centra-*-Tokens, damit ein spaeterer Themenwechsel an
   einer Stelle bleibt (siehe docs/PROJECT.md, Abschnitt Design). Aus = heller Grund mit grauem Knopf,
   An = Akzentfarbe mit weissem Knopf; das ist die Fluent-/M365-Auspraegung, an der sich das UI seit
   Phase 22 orientiert. */
.toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--centra-text);
    cursor: pointer;
}

    .toggle input[type="checkbox"] {
        /* Ohne appearance: none bliebe das Kaestchen des Betriebssystems sichtbar. */
        appearance: none;
        -webkit-appearance: none;
        /* app.css setzt box-sizing nicht global - ohne diese Zeile waeren Rahmen und Breite
           auseinandergelaufen und der Knopf haette am Rand angestossen. */
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        margin: 0;
        width: 36px;
        height: 20px;
        border-radius: 20px;
        background: var(--centra-surface);
        border: 1px solid var(--centra-text-secondary);
        cursor: pointer;
        transition: background-color .15s ease, border-color .15s ease;
    }

        /* Der gleitende Knopf. 2px Abstand ringsum: 20px Hoehe - 2px Rahmen - 2x2px = 14px Knopf. */
        .toggle input[type="checkbox"]::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--centra-text-secondary);
            transition: transform .15s ease, background-color .15s ease;
        }

        .toggle input[type="checkbox"]:checked {
            background: var(--centra-accent);
            border-color: var(--centra-accent);
        }

            /* Weg = 36px - 2x1px Rahmen - 14px Knopf - 2x2px Abstand = 16px. */
            .toggle input[type="checkbox"]:checked::after {
                background: var(--centra-surface);
                transform: translateX(16px);
            }

        /* :focus-visible statt :focus - der Rahmen erscheint bei Tastaturbedienung, nicht nach jedem
           Mausklick. Gleiche Linie wie bei .controlling-widget. */
        .toggle input[type="checkbox"]:focus-visible {
            outline: 2px solid var(--centra-accent);
            outline-offset: 2px;
        }

        .toggle input[type="checkbox"]:disabled {
            opacity: .5;
            cursor: default;
        }

    .toggle:has(input:disabled) {
        cursor: default;
        color: var(--centra-text-muted);
    }

/* Zweizeilige Beschriftung: kurzer Titel, darunter die Erklaerung. Der Regler bleibt dabei oben
   ausgerichtet, damit er auf der Hoehe des Titels sitzt und nicht in der Mitte des Absatzes. */
.toggle--mehrzeilig {
    align-items: flex-start;
}

    .toggle--mehrzeilig input[type="checkbox"] {
        margin-top: 1px;
    }

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

.toggle-erklaerung {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--centra-text-muted);
}

/* Umbau vom 14.08.2026 - Hinweis in der Buchungsmaske, wenn ein Mandant keine abrechenbaren Aufträge
   hat. Bewusst ruhig gehalten (kein Rot, kein Warnzeichen): Das ist keine Störung, sondern eine
   Auskunft - genau die Auskunft, die vorher fehlte, weil der Mandant kommentarlos aus der Liste
   verschwand. */
.editor-hinweis {
    padding: 10px 12px;
    margin: 4px 0 10px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
    font-size: 13px;
}

/* ===========================================================================
   Modul Auftragsplanung (Phase 1, 19.08.2026)
   Kanban-Board mit Drag & Drop. Alle Farben laufen über die --centra-*-Tokens,
   damit ein späterer Themenwechsel auch hier an einer Stelle greift.
   =========================================================================== */

.plan-toolbar {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.plan-filter {
    min-width: 260px;
    flex: 1 1 260px;
}

.plan-year-toggle {
    white-space: nowrap;
    padding-bottom: 6px;
}

.plan-counts {
    display: flex;
    gap: 8px;
    margin-left: auto;
    padding-bottom: 6px;
}

.plan-count-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.plan-count-open {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-weight: 600;
}

/* --- Board: waagerecht scrollende Spalten ------------------------------- */

.plan-board {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    overflow-x: auto;
    padding: 4px 4px 18px;
    /* Das Board scrollt selbst; die Seite darf dadurch nicht waagerecht laufen. */
    max-width: 100%;
}

.plan-column {
    /* 268px -> 340px (20.08.2026, mit Dennis abgestimmt): Die kompakte Karte bringt alles in EINE
       Zeile - das braucht Breite und spart dafür ein Vielfaches an Höhe. */
    flex: 0 0 340px;
    /* ⚠️ Ohne dieses min-width waere die Spalte so breit wie ihr LAENGSTER Kartentext (in der
       Renderprobe vom 20.08. abends: 818px statt 340px): Die einzeilige nowrap-Karte traegt ihre
       volle Textbreite als intrinsische Mindestbreite nach oben durch, und min-width:auto laesst
       ein Flex-Item nie darunter schrumpfen. Die alte, umbrechende Karte hatte das Problem nicht. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    max-height: calc(100vh - 320px);
}


/* Beim Filtern leere Mitarbeiter-Spalte/-Zeile (20.08.2026).
   ⚠️ BEWUSST `display: none` statt „gar nicht rendern": Die MudDropZone MUSS im DOM bleiben.
   MudDropContainer führt seine Zonen in einer Registry nach Bezeichner-String und lässt eine Zone
   sich nur einmal eintragen. Fällt eine Zone aus dem Render-Baum, rutschen die folgenden eine
   Position hoch, bekommen von Blazor nur einen neuen Bezeichner zugewiesen - und die Registry zeigt
   danach auf die falschen Zonen. Ergebnis war eine Ansicht, die nach dem Filterwechsel teilweise
   stehen blieb, bis man Kanban/Liste umschaltete. Gleiches Prinzip wie bei .plan-rowzone-collapsed:
   im DOM lassen, nur unsichtbar machen. */
.plan-column-leer,
.plan-row-leer {
    display: none;
}

/* Die Sammelspalte ist der Startzustand und Ausgangspunkt fast jeder Zuweisung
   - sie bekommt deshalb etwas mehr Gewicht als die Mitarbeiterspalten. */
/* ⚑ 13.09.2026 (U12): Die fixierte erste Spalte bekommt eine Kante nach rechts.

   `position: sticky` gab es hier schon - was fehlte, war die optische Abgrenzung. Beim
   waagerechten Scrollen wandern die anderen Spalten UNTER dieser hindurch, und ohne Kante sieht
   das aus, als würden Karten abgeschnitten oder verschluckt. Der Schatten macht aus dem
   Überlagern eine sichtbare Ebene - dieselbe Lösung wie in der Vorlage
   (`docs/design/auftragsoptimierung-mockup-v2-ux.html`, `.kanban-col.sticky`).

   ⚠️ Der Schatten steht NUR im Board: In der Listenansicht steht dieselbe Spalte ohne Nachbarn
   daneben, dort wäre er eine Kante ohne Anlass. */
.plan-column-unassigned {
    background: var(--centra-accent-bg);
    border-color: var(--centra-accent);
    position: sticky;
    left: 0;
    z-index: 2;
}

.plan-board > .plan-column-unassigned {
    box-shadow: 6px 0 10px -8px rgba(20, 35, 30, 0.25);
}

.plan-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--centra-border);
}

.plan-column-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--centra-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-column-badge {
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    color: var(--centra-text-secondary);
    font-size: 12px;
}

.plan-dropzone {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
    border-radius: 0 0 var(--centra-radius-lg) var(--centra-radius-lg);
    /* Ohne Übergang "springt" die Zielfläche beim Aufnehmen einer Karte. */
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Rückmeldung beim Ziehen: erlaubtes Ziel hebt sich deutlich ab, verbotenes
   bleibt gedämpft. MudBlazor setzt diese Klassen selbst (CanDropClass/NoDropClass). */
.plan-dropzone-can {
    background: var(--centra-success-bg, #f1faf1);
    box-shadow: inset 0 0 0 2px var(--centra-success-text);
}

.plan-dropzone-no {
    opacity: .55;
}

/* --- Karte -------------------------------------------------------------- */

/* --- Karte, kompakte Fassung (20.08.2026) --------------------------------
   Vorher ein Block aus fünf bis sieben Zeilen, jetzt eine einzige ca. 30px hohe Zeile. Alles, was
   nicht auf den ersten Blick gebraucht wird (Auftragsnummer, „intern"), steckt im title-Tooltip;
   Monats-Raster und Teilleistungs-Liste klappen über den Fortschritts-Chip auf.
   Referenz: docs/design/auftragsplanung-vorschau-karten-kompakt.html, Vorschlag A. */

/* Umschlag aus Zeile + aufklappbarem Bereich. Er ist das, was die Ablagefläche als „eine Karte"
   anordnet - deshalb sitzt die Breitenvorgabe der Listenansicht auf ihm. */
.plan-card-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 25.08.2026 (Tester-Rückmeldung): Die Karte ist bewusst NICHT mehr einzeilig. Der Tester wollte den
   Mandantennamen vollständig lesen können und die Auftragsbezeichnung in einer eigenen Zeile - beides
   geht mit der alten Einzeiler-Zeile nicht zusammen. Die Karte besteht jetzt aus drei gestapelten
   Reihen (Mandant / Auftrag / Steuerelemente) und darf höher werden.

   ⚠️ Der frühere Kommentar an dieser Stelle warnte eindringlich vor `flex-wrap: wrap` - diese Warnung
   gilt weiterhin, nur betrifft sie jetzt die INNEREN Reihen, nicht mehr die Karte selbst: Beim
   Umbruch bildet Flexbox (§9.3) die Zeilen anhand der UNGESCHRUMPFTEN Wunschbreiten; flex-shrink und
   text-overflow greifen erst innerhalb einer Zeile. Genau deshalb bleibt die Steuerungs-Reihe unten
   ausdrücklich `nowrap` (siehe .plan-card-zeile-steuerung) - sonst wandern Chip und Stoppuhr wieder
   unkontrolliert in eine weitere Zeile. Umbrechen darf allein der Mandantenname, und zwar als
   Textumbruch innerhalb seiner eigenen Reihe, nicht als Flex-Umbruch. */
.plan-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-left: 3px solid var(--centra-accent);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
    padding: 6px 8px;
    font-size: 12px;
    cursor: grab;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Die drei Reihen der Karte. */
.plan-card-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Zeile 1: Der Name darf oben ausgerichtet umbrechen, die Nummer bleibt rechts daneben und
   schrumpft nie. */
.plan-card-zeile-mandant {
    align-items: baseline;
}

/* Zeile 3: siehe die Flexbox-Warnung oben - hier bleibt es bei nowrap. `margin-top: auto` drückt die
   Reihe an den unteren Rand, damit nebeneinanderliegende Karten unterschiedlicher Texthöhe ihre
   Steuerelemente trotzdem auf einer Linie haben. */
.plan-card-zeile-steuerung {
    flex-wrap: nowrap;
    margin-top: auto;
    /* Leere Steuerungs-Reihe (keine Teilleistungen, keine Fälligkeit, keine Helfer) soll keine
       sichtbare Lücke erzeugen - die Stoppuhr steht dann allein rechts. */
    justify-content: flex-end;
}

.plan-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, .13);
    border-color: var(--centra-accent);
}

.plan-card:active {
    cursor: grabbing;
}

/* Abgerechnet/abgeschlossen: weiterhin planbar, aber sichtbar zurückgenommen. */
.plan-card-closed {
    border-left-color: var(--centra-text-muted);
    background: var(--centra-surface-2);
}

/* 25.08.2026: Der Mandantenname wird NICHT mehr gekürzt. Vorher stand hier eine Ellipsis-Kürzung mit
   max-width 40% - genau die hat der Tester beanstandet. Jetzt umbricht der Name bei Bedarf über
   mehrere Zeilen; die Karte wird dadurch höher, was ausdrücklich in Ordnung ist.
   `overflow-wrap: anywhere` fängt den Randfall sehr langer Namen OHNE Leerzeichen ab (die würden
   sonst seitlich aus der Karte ragen, statt umzubrechen). */
.plan-card-clientname {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--centra-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Die Nummer bleibt am Ende der Mandantenzeile stehen und schrumpft nie - sie ist kurz und
   identifiziert den Mandanten eindeutig. */
.plan-card-clientnumber {
    flex: 0 0 auto;
    font-size: 10.5px;
    color: var(--centra-text-muted);
    white-space: nowrap;
}

/* Auftrag (plus Unterauftrag) in eigener Zeile (25.08.2026). Er darf ebenfalls umbrechen - eine
   abgeschnittene Auftragsbezeichnung war der zweite Punkt der Rückmeldung. Der title bleibt als
   Zusatz erhalten, schadet nicht und hilft bei sehr langen Bezeichnungen. */
.plan-card-order {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--centra-text-secondary);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* --- Fortschritts-Chip -------------------------------------------------- */

/* Ersetzt in der Zeile das zwölfteilige Monats-Raster bzw. die Teilleistungs-Liste: „8/12" als
   knapper Stand, Klick klappt das gewohnte Raster darunter auf. Ein echter Knopf, damit er auch per
   Tastatur erreichbar ist. (Die Mini-Striche aus dem Mockup sind seit dem 20.08. abends wieder raus -
   ihre ~53px haben den Chip live in die zweite Zeile gedrückt.) */
.plan-progress {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.6;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.plan-progress:hover {
    background: var(--centra-accent-bg);
    border-color: var(--centra-accent);
    color: var(--centra-accent-text);
}

.plan-progress:focus-visible {
    outline: 2px solid var(--centra-accent);
    outline-offset: 1px;
}

.plan-progress-text { white-space: nowrap; }

/* --- Fälligkeit --------------------------------------------------------- */

.plan-due {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--centra-warning-bg);
    color: var(--centra-warning-text);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.plan-due-overdue {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
    font-weight: 700;
}

/* --- Monatsmarken (laufende Buchführung) -------------------------------- */

.plan-months {
    display: grid;
    /* ⚠️ 31.08.2026 (Phase 242): Die Spaltenzahl folgt der Periodenzahl, nicht mehr fest zwölf.
       Nachgemessen war das ein echter Fehler aus Phase 240: Bei einem Quartalstakt standen vier
       Kacheln in einem Zwölfer-Raster - je 15 px breit, zwei Drittel der Leiste leer. Für den
       gewünschten Monatsbereich („Jan–Mär") wäre da nie Platz gewesen.

       Der Wert kommt als `--plan-perioden` aus dem Markup (dort steht die Zahl ohnehin); die 12
       bleibt als Rückfall stehen, damit die Klasse auch ohne gesetzte Variable stimmt. */
    grid-template-columns: repeat(var(--plan-perioden, 12), 1fr);
    /* 2px statt 3px (19.08.2026): schafft die Breite, die die Kästen mit Datum brauchen, damit alle
       zwölf gleich breit bleiben. */
    gap: 2px;
    /* Sitzt seit dem 20.08.2026 UNTER der Kartenzeile, nicht mehr in ihr - deshalb ein eigener
       Rahmen statt der früheren gestrichelten Trennlinie innerhalb der Karte. */
    margin: 2px 0 0;
    padding: 7px 8px;
    border: 1px dashed var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
}

.plan-month {
    appearance: none;
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    color: var(--centra-text-muted);
    border-radius: 4px;
    padding: 3px 0;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    /* Ohne min-width:0 wächst ein Kasten mit Datum über seine Rasterspalte hinaus (Grid-Elemente
       schrumpfen sonst nicht unter ihre Mindestbreite) - genau daher kamen die abwechselnd breiten und
       schmalen Kästen. Mit overflow:hidden bleibt das Raster in jedem Fall gleichmäßig. */
    min-width: 0;
    overflow: hidden;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.plan-month:hover {
    border-color: var(--centra-accent);
    color: var(--centra-accent-text);
}

.plan-month-done {
    background: var(--centra-success-text);
    border-color: var(--centra-success-text);
    color: #fff;
}

/* 26.08.2026 - Monat kommt aus DATEV (date_work_completed), nicht aus einem Centra-Haken. Bewusst
   dieselbe grüne Grundfarbe wie ein manueller Haken: Fachlich ist der Monat in beiden Fällen fertig,
   die Karte soll nicht zwei Sorten „erledigt" zeigen. Unterschieden wird nur dezent über den
   dunkleren Rand - die eigentliche Erklärung steht im Tooltip, und der Dialog sagt es im Klartext.
   Eine auffälligere Trennung (andere Farbe, Symbol) wäre auf zwölf 10px-Kästchen nur Unruhe. */
.plan-month-datev {
    border-color: #0a5c0a;
    box-shadow: inset 0 0 0 1px #0a5c0a;
}

.plan-month:focus-visible {
    outline: 2px solid var(--centra-accent);
    outline-offset: 1px;
}

@media (max-width: 900px) {
    .plan-column {
        flex-basis: 240px;
        max-height: none;
    }

    /* Auf schmalen Geräten kostet die klebende Spalte mehr Platz als sie nützt. */
    .plan-column-unassigned {
        position: static;
    }
}

/* ===========================================================================
   Auftragsplanung Phase 2 (19.08.2026)
   Listenansicht, Karten-Erweiterungen (Fälligkeit, Mithelfende, Stoppuhr,
   Monatsdatum), Ansichtsumschalter. Alles über --centra-*-Tokens.
   =========================================================================== */

/* --- Ansichtsumschalter ------------------------------------------------- */

.plan-viewswitch {
    display: inline-flex;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    overflow: hidden;
    background: var(--centra-surface);
    margin-bottom: 6px;
}

.plan-viewswitch-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--centra-text-secondary);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.plan-viewswitch-btn:hover { background: var(--centra-surface-2); }

.plan-viewswitch-btn.aktiv {
    background: var(--centra-accent);
    color: #fff;
    font-weight: 600;
}

.plan-count-action {
    appearance: none;
    border: 1px solid var(--centra-border);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.plan-count-action:hover { background: var(--centra-accent-bg); }

/* --- Listenansicht ------------------------------------------------------ */

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-row {
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    background: var(--centra-surface);
    overflow: hidden;
}

/* Der Eingangskorb steht immer oben und hebt sich ab - gleiche Rolle wie die
   Sammelspalte im Kanban. Seit 20.08.2026 lässt er sich in der Liste einklappen wie jede
   Mitarbeiter-Zeile; verschieben und ausblenden bleiben ihm weiterhin verwehrt. */
.plan-row-unassigned {
    background: var(--centra-accent-bg);
    border-color: var(--centra-accent);
}

.plan-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s ease;
}

.plan-row-head:hover { background: rgba(0, 0, 0, .025); }

/* Deutlicher gemacht am 19.08.2026: vorher 12 px in --centra-text-muted, das ging neben Kürzel und
   Namen unter. Jetzt größer, kräftiger und in der Textfarbe - der Pfeil ist das Bedienelement der
   Zeile und soll auch so aussehen. */
.plan-row-caret {
    color: var(--centra-text-secondary);
    font-size: 15px;
    line-height: 1;
    width: 16px;
    text-align: center;
    flex: 0 0 auto;
    transition: color .12s ease;
}

.plan-row-head:hover .plan-row-caret { color: var(--centra-accent); }

.plan-row-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--centra-text);
}

.plan-row-spacer { flex: 1 1 auto; }

/* Ablagefläche der Liste: waagerecht fließende Karten, damit eine Zeile mit
   vielen Aufträgen nicht endlos lang wird. */
.plan-rowzone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--centra-border);
    min-height: 74px;
    transition: background-color .15s ease, box-shadow .15s ease, min-height .15s ease, padding .15s ease;
}

/* 280px -> 300px (20.08.2026). Das Mockup zeigte testweise 240px, das war aber mit kurzen
   Beispielnamen gemessen; echte Bezeichnungen wie „Jahresabschluss und betriebliche Steuererklärung"
   werden dort fast immer abgeschnitten. 300px ist der Wert, bei dem der Auftragsname in der Regel
   noch lesbar bleibt - eine einzige Zahl, falls Dennis es enger oder weiter haben will. */
.plan-rowzone > * { flex: 0 1 300px; min-width: 0; /* siehe .plan-column - gleiche nowrap-Falle */ }

/* Zugeklappt: die Fläche bleibt im DOM (man kann weiterhin darauf ziehen),
   schrumpft aber auf einen schmalen Streifen. */
.plan-rowzone-collapsed {
    min-height: 0;
    padding: 0;
    border-top: 0;
    overflow: hidden;
    height: 0;
}

.plan-rowzone-can {
    background: var(--centra-success-bg, #f1faf1);
    box-shadow: inset 0 0 0 2px var(--centra-success-text);
    /* Auch eine zugeklappte Zeile zeigt sich beim Ziehen als Ziel. */
    min-height: 48px;
    height: auto;
    padding: 10px 14px;
}

.plan-hide-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--centra-text-muted);
    font-size: 16px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.plan-hide-btn:hover {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
}

/* --- Karten-Erweiterungen ---------------------------------------------- */

/* Notiz-Symbol auf der Karte (25.08.2026) - reine Anzeige, kein Bedienelement: Die Karte selbst
   öffnet den Dialog mit der Notiz. Deshalb bewusst ohne Rahmen und ohne Hover-Effekt, sonst sähe es
   nach einem eigenen Knopf neben der Stoppuhr aus. */
.plan-notiz-badge {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    cursor: inherit;
}

.plan-clock-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    border-radius: 50%;
    /* 26px -> 22px (20.08.2026, spät): jedes starre Element in der einzeiligen Karte kostet
       Namensbreite. Das Mockup zeigt 20px; 22px ist der Kompromiss zugunsten der Klickfläche. */
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}

.plan-clock-btn:hover {
    border-color: var(--centra-accent);
    background: var(--centra-accent-bg);
    transform: scale(1.08);
}

/* --- Mithelfende -------------------------------------------------------- */

/* Seit dem kompakten Entwurf (20.08.2026) stehen die Kürzel in der Kartenzeile selbst, nicht mehr
   darunter - der erklärende Text daneben ist entfallen, der Name steht im Tooltip des Kürzels. */
.plan-card-helpers {
    /* Darf als LETZTES Element nachgeben: Im vollen Extremfall (überfällig + viele Helfer) werden
       die Kürzel abgeschnitten statt die Namen zu erdrücken - die Namen stehen im Tooltip. */
    flex: 0 1 auto;
    min-width: 20px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.plan-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--centra-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.plan-avatar-small {
    width: 20px;
    height: 20px;
    font-size: 9px;
    background: var(--centra-text-secondary);
}

/* „+N" hinter den (maximal zwei) Helfer-Kürzeln - alle Namen stehen im Tooltip. */
.plan-avatar-mehr {
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
    border: 1px solid var(--centra-border);
}

/* 27.08.2026 (Schritt 2/4) - der ZWEITE Zuständige. Bewusst anders als die Mithelfenden-Kürzel
   daneben: ein Ring in der Akzentfarbe statt einer weiteren grauen Scheibe. Er ist eine
   Verantwortlichkeit, keine Mithilfe - stünde er optisch gleich, wäre die Karte nicht mehr lesbar.
   Bewusst zurückhaltend: Die Spalte sagt weiterhin, wer hauptzuständig ist. */
.plan-avatar-m2 {
    background: var(--centra-surface);
    color: var(--centra-accent-text);
    border: 1px solid var(--centra-accent);
    box-shadow: inset 0 0 0 1px var(--centra-surface);
}

/* --- Monatsmarke mit Datum ---------------------------------------------- */

/* Entscheidung vom 19.08.2026: alle zwölf Kästen bleiben gleich breit, das Datum wird dafür kleiner
   gesetzt (statt die Kästen mit Datum breiter werden zu lassen). 7 px mit enger Laufweite ist die
   Grenze, bei der auch der längste Fall "31.12." noch in eine Rasterzelle passt - kürzere Datumsangaben
   wie "8.2." (der Regelfall) stehen deutlich luftiger. Der vollständige Text steht ohnehin im Tooltip.
   Vergleich beider Varianten: docs/design/monatskaesten-variantenvergleich.html */
.plan-month-date {
    font-size: 7px;
    letter-spacing: -.3px;
}

/* --- Dialoge ------------------------------------------------------------ */

.plan-dialog-hint {
    font-size: 12px;
    color: var(--centra-text-secondary);
    margin: 6px 0 0;
    line-height: 1.45;
}

/* 31.08.2026 (Phase 243): Hinweis, der auf einen Datenverlust vorbereitet - ein geaendertes
   Jahresziel ersetzt gepflegte Monatswerte. Bewusst dieselbe Textgroesse wie der normale Hinweis,
   nur farblich abgesetzt und mit Kante: Er soll auffallen, ohne den Dialog zu zerreissen. */
.plan-dialog-warnung {
    color: var(--centra-warn-text, #8a5300);
    background: var(--centra-warn-bg, rgba(255, 176, 32, 0.12));
    border-left: 3px solid var(--centra-warn-border, #f0a020);
    padding: 6px 10px;
    border-radius: 4px;
}

.plan-dialog-sub {
    color: var(--centra-text-secondary);
}

.plan-dialog-section {
    margin-bottom: 18px;
}

/* Eine Zeile des Monatsrasters im Kartendialog (31.08.2026): Monatsname, Stunden, Euro.
   Feste Spaltenbreite für den Namen, damit die zwölf Eingabefelder untereinander fluchten -
   „September" ist deutlich länger als „Mai", und ohne feste Spalte tanzte das Raster. */
.plan-monatsziel-zeile {
    display: grid;
    grid-template-columns: 96px 1fr 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.plan-monatsziel-monat {
    font-size: 13px;
    color: var(--centra-text-secondary);
}

.plan-dialog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.plan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 3px;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    background: var(--centra-surface-2);
    font-size: 12px;
}

.plan-chip-x {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--centra-text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
    border-radius: 50%;
}

.plan-chip-x:hover { color: var(--centra-danger-text); }

@media (max-width: 900px) {
    .plan-rowzone > * { flex-basis: 100%; }
}

/* Umsortieren der Mitarbeiter (Auftragsplanung Phase 2, Abschnitt 1.3). Pfeilknöpfe statt Ziehgriff -
   Begründung im Razor-Kommentar zu VerschiebenAsync. */
.plan-move-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--centra-text-muted);
    font-size: 12px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.plan-move-btn:hover {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
}

/* Zusammengefasste Unteraufträge (Auftragsplanung, 20.08.2026) - bei Auftragsarten, deren
   Unteraufträge fachlich verschiedene Teilleistungen sind (301 „Jahresabschluss und betriebliche
   Steuererklärung", 9101 „Weiterberechnungen"). Bewusst ruhiger gehalten als das Monatsraster:
   gleiche Information, aber die beiden Kartentypen sollen auf einen Blick unterscheidbar bleiben. */

/* Wie .plan-months: eigener Kasten unter der Kartenzeile. */
.plan-parts {
    margin: 2px 0 0;
    padding: 7px 9px;
    border: 1px dashed var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
}

.plan-parts-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--centra-text-muted);
    margin-bottom: 3px;
}

.plan-parts-list {
    margin: 0;
    padding-left: 14px;
    list-style: disc;
}

    .plan-parts-list li {
        font-size: 11.5px;
        line-height: 1.45;
        color: var(--centra-text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Themen-Filter (Auftragsplanung, 20.08.2026) - Mehrfachauswahl nach DATEV-Auftragsart-Gruppe,
   wirkt global über alle Spalten. Keine Auswahl = alles sichtbar. */

.plan-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.plan-topic {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    background: var(--centra-surface);
    color: var(--centra-text-secondary);
    /* font: inherit zuerst - die Kurzform setzt font-size sonst wieder auf den Erbwert zurück. */
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.plan-topic:hover {
    border-color: var(--centra-accent);
    color: var(--centra-accent-text);
}

.plan-topic.aktiv {
    background: var(--centra-accent);
    border-color: var(--centra-accent);
    color: #fff;
    font-weight: 600;
}

/* Die Anzahl je Thema - im inaktiven Zustand gedämpft, im aktiven hell auf dem Akzent. */
.plan-topic-count {
    font-size: 11px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
}

.plan-topic.aktiv .plan-topic-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* "Alle Themen" hebt die Auswahl auf - bewusst als eigener, zurückhaltender Knopf statt als
   weiteres Thema, damit er nicht mit einer echten Auswahl verwechselt wird. */
.plan-topic-reset {
    border-style: dashed;
    color: var(--centra-text-muted);
}

/* „Abgeschlossene ausblenden" (20.08.2026) - technisch ein Themen-Knopf, fachlich keiner. Er sitzt
   deshalb in derselben Form, aber leicht abgesetzt hinter den Themen: eine schmale Trennlinie links
   macht deutlich, dass er nicht zur Themen-Auswahl gehört. */
.plan-topic-toggle {
    margin-left: 6px;
    border-left-width: 3px;
    border-left-color: var(--centra-border);
}

/* --- Auftrags-Dialog: Info-Abschnitt (20.08.2026, spät) ------------------
   Rein lesende Fakten oben im Dialog - die Angaben, die beim Verkleinern der Karten aus der Zeile
   verschwunden sind (Auftragsnummer, Jahr, „intern", „abgeschlossen") plus Mandantennummer/Thema. */
.plan-dialog-info {
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    padding: 10px 12px;
    margin-bottom: 14px;
}

.plan-dialog-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 0;
}

.plan-dialog-fact dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--centra-text-muted);
}

.plan-dialog-fact dd {
    margin: 1px 0 0;
    font-size: 13px;
    color: var(--centra-text);
}

.plan-dialog-fact-muted {
    font-size: 11px;
    color: var(--centra-text-muted);
}

.plan-dialog-status {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.plan-tag-dialog {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    color: var(--centra-text-secondary);
    font-size: 11px;
}

.plan-tag-dialog-closed {
    color: var(--centra-text-muted);
    font-style: italic;
}

/* --- Kapazitätsblock im Spaltenkopf (Phase 2b, 20.08.2026 spät) ----------
   Optik nach der mit Dennis abgestimmten Vorschau (auftragsplanung-vorschau-kanban-v2.html):
   Prozent + Balken fürs Jahr (grün bis 80 %, gelb bis 100 %, rot darüber), darunter klein die
   Stundenzahlen. Zeigt AUFTRAGS-Zielstunden aus den DATEV-Pauschalhonoraren - nicht das allgemeine
   Arbeitszeitkonto; nur das Bild-Vokabular ist dasselbe. */
.plan-capacity {
    background: var(--centra-surface);
    border-bottom: 1px solid var(--centra-border);
    padding: 8px 12px 9px;
}

.plan-cap-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 11px;
    color: var(--centra-text-secondary);
    margin-bottom: 4px;
}

.plan-cap-pct {
    font-weight: 800;
    font-size: 13px;
    color: var(--centra-text);
}

.plan-cap-bar {
    height: 6px;
    border-radius: 4px;
    background: var(--centra-surface-2);
    overflow: hidden;
}

.plan-cap-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.plan-cap-ok > span { background: var(--centra-success-text); }
.plan-cap-warn > span { background: var(--centra-warning); }
.plan-cap-bad > span { background: var(--centra-danger-text); }

.plan-cap-sub {
    font-size: 10.5px;
    color: var(--centra-text-muted);
    margin-top: 5px;
}

.plan-cap-sub b { color: var(--centra-text-secondary); }

/* Die sichtbare Ausnahme: Aufträge ohne DATEV-Pauschalhonorar fließen nicht ein. */
.plan-cap-ausnahme {
    color: var(--centra-warning-text);
}

/* Team-Auswahl in der Board-Toolbar (Teil 2b, 20.08.2026 spät) - schmal gehalten, damit die
   Toolbar nicht umbricht. */
.plan-teamfilter {
    min-width: 170px;
    max-width: 240px;
}

/* --- Einstellungen: Teams-Tab (20.08.2026, spät) -------------------------
   Drag & Drop-Zonen für die Team-Pflege: Pool links, Teams daneben; gleiche Bausteine wie das
   Auftragsplanungs-Board, nur kleiner. */
.teams-board {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 14px;
}

.teams-zone {
    flex: 0 0 240px;
    min-width: 0;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
}

/* Der Pool hebt sich ab - gleiche Rolle wie der Eingangskorb des Boards. */
.teams-pool {
    background: var(--centra-accent-bg);
    border-color: var(--centra-accent);
}

.teams-zone-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--centra-border);
    font-weight: 600;
    font-size: 13px;
}

.teams-dropzone {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    min-height: 90px;
}

.teams-person {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    padding: 4px 8px;
    font-size: 12.5px;
    cursor: grab;
}

.teams-person-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Leiter-Stern: grau = normales Mitglied, gefüllt-gelb = Teamleiter. */
.teams-leiter {
    flex: 0 0 auto;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--centra-border);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}

.teams-leiter:hover { color: var(--centra-warning-text); }

.teams-leiter.aktiv { color: var(--centra-warning); }

/* Einzeln-Einblenden-Picker neben der „alle einblenden"-Pille (21.08.2026) - schmal, er trägt nur
   die Namen der aktuell ausgeblendeten Personen. */
.plan-einblenden-picker {
    display: inline-block;
    min-width: 170px;
    vertical-align: middle;
}

/* --- Budget-Zeile je Karte (21.08.2026) ----------------------------------
   Ist-Umsatz vs. Honorar-Ziel als kompakter Balken unter der Kartenzeile - optisch verwandt mit dem
   Kapazitätsblock im Spaltenkopf, aber kleiner (eine Karte ist kein Spaltenkopf). Beträge stehen im
   Tooltip; großzügig ausgeschrieben zeigt sie der Auftrags-Dialog. */
.plan-budget {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 3px 8px 2px;
}

.plan-budget-bar {
    flex: 1 1 auto;
    height: 5px;
    border-radius: 3px;
    background: var(--centra-border);
    overflow: hidden;
}

.plan-budget-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* Ampelfarben über die vorhandenen plan-cap-*-Klassen (gleiche Schwellen wie der Spaltenkopf). */
.plan-budget-bar.plan-cap-ok > span { background: var(--centra-success-text); }
.plan-budget-bar.plan-cap-warn > span { background: var(--centra-warning); }
.plan-budget-bar.plan-cap-bad > span { background: var(--centra-danger-text); }

.plan-budget-pct {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
}

.plan-budget-ok { color: var(--centra-success-text); }
.plan-budget-warn { color: var(--centra-warning-text); }
.plan-budget-bad { color: var(--centra-danger-text); }

/* Euro-Beträge neben der Prozentzahl (24.08.2026, Pauschalen-Check ohne erkannte Pauschale):
   etwas Luft zur Prozentzahl und normale Schriftstärke, damit die Prozentzahl der Blickfang
   bleibt. Die Farbe der Zeitkosten setzt das innere Element selbst (controlling-positive/
   -negative) und überschreibt damit bewusst die Balkenfarbe des Elternelements. */
.plan-budget-eurotext {
    margin-right: 6px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Auftrags-Dialog: großzügige Budget-Darstellung (21.08.2026) --------- */
.plan-dialog-budget {
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    padding: 12px 14px;
    margin-bottom: 14px;
}

.plan-dialog-budget-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--centra-text-secondary);
    margin-bottom: 7px;
}

.plan-dialog-budget-betraege {
    font-size: 15px;
    color: var(--centra-text);
}

.plan-dialog-budget-sub {
    font-size: 11px;
    color: var(--centra-text-muted);
    margin-top: 7px;
}

/* 22.08.2026 (Mandant-Klick-Auftrag): Der Mandantenname im Karten-Infodialog ist ein MudLink zur
   Mandanten-Detailansicht der Auswertungen - MudLinks eigene Typografie (body1, 16px) würde die
   13px-Faktenzeile sprengen, deshalb Schriftgröße der Zeile erzwingen. */
.plan-dialog-fact dd .plan-dialog-mandant-link {
    font-size: 13px;
    vertical-align: baseline;
}

/* 22.08.2026 (Ohne-Honorar-Auftrag): Das Ausnahme-Badge im Kapazitätskopf ist jetzt ein MudLink zur
   Liste der betroffenen Aufträge. MudBlazor setzt die Link-Farbe per .mud-primary-text MIT
   !important - ohne eigenes !important bliebe der Link blau statt in der Warnfarbe (im Browser
   gegen MudBlazor.min.css 9.7.0 geprüft). Schriftgröße/Unterstreichung brauchen das nicht
   (dort arbeitet MudBlazor ohne !important, zwei Klassen Spezifität genügen). */
.plan-cap-ausnahme .plan-cap-ausnahme-link {
    color: var(--centra-warning-text) !important;
    font-size: inherit;
    text-decoration: underline;
}

/* ===== Aufgabenmodul Phase 1 (23.08.2026): Planner-artiges Board mit Modul-Seitenleiste. ===== */

/* 30.08.2026 (Nachtrag zu Runde 237): Diese Klasse hatte als einzige Modul-Seite nie den
   Seiten-Container bekommen - kein Innenabstand, keine Breitengrenze, keine Zentrierung. Auf einem
   breiten Bildschirm fiel das kaum auf, in einem schmalen Fenster (~680 px) klebte der Inhalt an
   beiden Kanten und wirkte gequetscht.

   Die fünf Zeilen sind wörtlich die von `.dashboard`/`.evaluations`, nichts davon ist hier neu
   erfunden. `box-sizing: border-box` gehört zwingend dazu: Ohne sie addieren sich die 2 × 32 px auf
   `width: 100%` bzw. auf die max-width OBEN DRAUF, und die Seite scrollt waagerecht - die
   ausführliche Begründung steht bei `.dashboard` (Fix vom 19.08.2026). */
.aufg {
    display: flex;
    /* 31.08.2026 (Phase 239): 20 → 32 px. Seit die Seitenleiste eine eigene, gerahmte Fläche ist,
       standen zwei sichtbare Flächen 20 px nebeneinander - das las sich als „gehört zusammen"
       statt als „zwei Bereiche". Nachgemessen: `/meine-auftraege` hat nur ein Flex-Kind, dort
       ändert sich dadurch nichts. */
    gap: 32px;
    align-items: flex-start;
    padding: 32px;
    max-width: var(--centra-content-max-width);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.aufg-nav {
    flex: 0 0 210px;
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* 30.08.2026 (Nachtrag zu Runde 237): Hier stand `margin-left: 28px`. Das war die Behandlung
       eines Symptoms - die Leiste klebte an der Fensterkante, weil `.aufg` gar keinen
       Seiten-Container hatte. Den gibt es jetzt (32 px ringsum, siehe oben); der Außenabstand käme
       obendrauf und die Leiste stünde als einzige Modul-Seitenleiste 60 px vom Rand. Entfernt. */

    /* 31.08.2026 (zweiter Nachtrag zu Runde 237): Eigene Fläche und Trennlinie, damit man auf einen
       Blick zwei Bereiche sieht. Beides stand so im Mockup, war aber beim Weiterreichen an den
       Runde-237-Auftrag nicht mitgeschrieben worden.

       Keine neuen Farben: `--centra-surface-2` ist derselbe Ton, den `.aufg-nav-item:hover` schon
       benutzt, `--centra-border` dieselbe Linie wie überall sonst.

       ⚠️ Der Innenabstand ist der Vorschlag aus dem Mockup (24/14) - nachgemessen, nicht bloß
       übernommen: Die Leiste bleibt trotz Innenabstand 210 px breit (es gilt border-box), die
       Einträge werden dadurch von 210 auf 181 px schmaler. Alle sieben bleiben einzeilig, auch
       „Meine zur Erledigung" - das war die Sorge.

       31.08.2026 (Phase 239): Aus der reinen rechten Kante ist ein Rahmen RUNDHERUM mit Radius
       geworden - damit ist auch die offene Frage aus Runde 237 beantwortet („rechte Winkel oder
       abgerundet?"): abgerundet.

       ⚑ Der Grund ist nicht Geschmack, sondern eine Eigenschaft des Aufbaus: Die Leiste ist nur so
       hoch wie ihr Inhalt, der Board-Bereich daneben bei gefülltem Board deutlich höher. Eine reine
       rechte Kante endet dann mitten auf der Seite und sieht aus wie eine abgeschnittene Karte
       statt wie eine Trennung. Mit Rahmen ringsum und demselben Radius, den Karten und
       Board-Spalten schon tragen, ist die kurze Höhe kein Problem mehr, sondern gewollt.

       `box-sizing: border-box` ist ausdrücklich gesetzt, obwohl es hier ohnehin gilt (MudBlazor-
       Reset): Mit Rahmen und Innenabstand wüchse die Leiste sonst über die 210 px hinaus - genau
       das Thema, das der Kommentar bei `.dashboard` ausführlich erklärt. Lieber eine Zeile zu viel
       als diese Abhängigkeit von einer fremden Datei. */
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    box-sizing: border-box;
    padding: 24px 14px;
}

/* 30.08.2026 (Runde 237): Die Regel `.aufg-nav h1` ist entfallen - die Überschrift steht nicht mehr
   in der Seitenleiste, sondern im Inhaltsbereich (siehe `.aufg-inhalt h1` weiter unten).

   Gruppenüberschrift der Seitenleiste. Die Maße sind nicht neu erfunden, sondern die des im
   Programm schon vorhandenen Musters für kleine Abschnittsbeschriftungen (`.ang-block-titel`,
   Angebote; `.mo-section-label`, Mitarbeiter-Onboarding): 12 px, Versalien, leichte Sperrung,
   gedämpfte Farbe. */
.aufg-nav-gruppe {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--centra-text-muted);
    margin: 10px 0 2px;
}

    /* Die erste Gruppe schließt oben an nichts an - dort wäre der Abstand zu viel. */
    .aufg-nav-gruppe:first-child {
        margin-top: 0;
    }

.aufg-nav-item {
    display: flex;
    align-items: center;
    /* ⚠️ Ohne diese Zeile stehen die kurzen Einträge („Team", „Vorlagen") mittig statt links: Eine
       globale Knopfregel setzt `justify-content: center`, und sobald der Eintrag ein Flex-Container
       ist, entscheidet die - nicht mehr das `text-align: left` darunter. Live gesehen, nicht
       hergeleitet. */
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: var(--centra-radius);
    background: transparent;
    color: var(--centra-text);
    font-size: 13.5px;
    cursor: pointer;
}

    /* Das Symbol darf beim Umbruch langer Beschriftungen nicht schrumpfen („Meine zur Erledigung"
       ist in 210 px Breite knapp). */
    .aufg-nav-item .nav-icon {
        flex: 0 0 auto;
        opacity: .75;
    }

    .aufg-nav-item:hover {
        background: var(--centra-surface-2);
    }

    /* Durchgezogene Akzentfläche über die volle Zeilenbreite. Kein neuer Farbwert: dieselbe
       Kombination, die `.icon-btn.primary` und der Schrittumschalter des Mitarbeiter-Onboardings
       schon verwenden - var(--centra-accent) mit weißer Schrift. */
    .aufg-nav-item.aktiv {
        background: var(--centra-accent);
        color: #fff;
        font-weight: 600;
    }

        /* Auf der farbigen Fläche trägt das gedämpfte Symbol nicht mehr - dort volle Deckkraft. */
        .aufg-nav-item.aktiv .nav-icon {
            opacity: 1;
        }

        .aufg-nav-item.aktiv:hover {
            background: var(--centra-accent);
        }

.aufg-inhalt {
    flex: 1 1 auto;
    min-width: 0; /* Intrinsic-min-width-Lehre: sonst sprengt das Board die Seite. */
}

.aufg-toolbar {
    margin-bottom: 12px;
}

.aufg-board {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.aufg-spalte {
    flex: 0 0 280px;
    min-width: 0;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    padding: 10px;
}

.aufg-spalte-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 8px;
}

.aufg-spalte-anzahl {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    padding: 0 7px;
}

.aufg-dropzone {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aufg-dropzone-can {
    outline: 2px dashed var(--centra-accent);
    outline-offset: 2px;
    border-radius: var(--centra-radius);
}

.aufg-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 720px;
}

.aufg-karte {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
    padding: 9px 11px;
    cursor: pointer;
    font-size: 13px;
}

.aufg-karte-ueberfaellig {
    border-color: var(--centra-danger-text);
}

/* 25.08.2026 - Kärtchen unter „Meine Aufträge" sind seit der Tester-Rückmeldung klickbar. Die
   Grundklasse .aufg-karte trägt zwar schon cursor:pointer (aus dem Aufgaben-Board), gab bisher aber
   keine Rückmeldung beim Überfahren. Ohne die wirkt eine klickbare Fläche wie reine Anzeige. */
.aufg-karte-klickbar {
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.aufg-karte-klickbar:hover {
    border-color: var(--centra-accent);
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, .13);
    transform: translateY(-1px);
}

/* --- Detailansicht einer Aufgabe (25.08.2026) --- */

.aufg-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
}

.aufg-detail-zeile {
    display: grid;
    /* Feste Beschriftungsspalte, damit die Werte untereinander auf einer Kante stehen. */
    grid-template-columns: 96px 1fr;
    gap: 8px;
    align-items: baseline;
}

.aufg-detail-label {
    color: var(--centra-text-muted);
    font-size: 12px;
}

/* Eine Notiz kann mehrzeilig erfasst worden sein - Zeilenumbrüche bleiben erhalten, statt den Text
   zu einem Absatz zusammenzuziehen. */
.aufg-detail-notiz {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Notizen zum AUFTRAG aus der Auftragsplanung (25.08.2026, nur lesend). Mehrere davon stehen
   untereinander, jede als eigener Block - sonst liefen zwei Notizen zu verschiedenen Unteraufträgen
   zu einem Textklumpen zusammen. */
.aufg-detail-auftragsnotiz {
    display: block;
    margin-bottom: 4px;
}

/* Kennzeichnung, zu welchem Unterauftrag die Notiz gehört - erscheint nur bei mehreren. */
.aufg-detail-notiz-herkunft {
    color: var(--centra-text-muted);
    font-size: 12px;
}

/* --- Abrechnungsstand in der Detailansicht (25.08.2026, Teil C) --- */

/* Abgesetzter Block mit eigener Überschrift - er steht neben den Beschriftung/Wert-Zeilen darüber
   und soll nicht wie eine weitere davon wirken. */
.aufg-detail-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--centra-border);
}

.aufg-detail-block-titel {
    margin: 0 0 8px;
    font-size: 13px;
}

.aufg-detail-stand + .aufg-detail-stand {
    margin-top: 12px;
}

.aufg-detail-stand-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
}

.aufg-detail-stand-werte {
    white-space: nowrap;
}

.aufg-detail-stand-hinweis {
    color: var(--centra-text-muted);
    font-size: 11.5px;
    margin-top: 2px;
}

/* Das Monats-Raster kommt unverändert aus .plan-months; hier nur der Abstand nach oben. Die Monate
   sind auf dieser Seite <span> statt <button> - abgehakt wird in der Auftragsplanung. */
.aufg-detail-monate {
    margin-top: 8px;
}

/* Herkunftshinweis: Diese Seite zeigt die Notiz nur an, geändert wird sie in der Auftragsplanung. */
.aufg-detail-notiz-quelle {
    display: block;
    margin-top: 2px;
    color: var(--centra-text-muted);
    font-size: 11.5px;
    font-style: italic;
}

.aufg-karte-kopf {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.aufg-erledigt-check {
    margin-top: 2px;
}

.aufg-karte-titel {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.aufg-karte-faellig {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    margin-top: 3px;
}

    .aufg-karte-faellig.ueberfaellig {
        color: var(--centra-danger-text);
        font-weight: 600;
    }

.aufg-karte-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.aufg-thema-chip,
.aufg-mandant-chip {
    font-size: 10.5px;
    border-radius: 9px;
    padding: 1px 8px;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aufg-mandant-chip {
    background: var(--centra-accent-bg);
    border-color: transparent;
}

.aufg-karte-erlediger {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 6px;
}

.aufg-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--centra-accent-bg);
    color: var(--centra-accent);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.aufg-karte-meta {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Dialog */
.aufg-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aufg-dialog-reihe {
    display: flex;
    gap: 10px;
}

    .aufg-dialog-reihe .editor-field {
        flex: 1 1 0;
    }

.aufg-dialog-label {
    font-size: 12px;
    font-weight: 600;
}

.aufg-dialog-mehrfach {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    padding: 8px;
}

.aufg-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    cursor: pointer;
}

/* Einstellungen-Reiter "Aufgaben" */
.aufg-konfig-zeile {
    align-items: center;
    gap: 10px;
}

.aufg-farbe {
    flex: 0 0 46px;
    padding: 2px;
    height: 32px;
}

/* Nachbesserungen 23.08.2026 (Live-Test Aufgabenmodul, Punkte 1/2/4). */
/* 1: Luft zur Topnav.

   30.08.2026 (Nachtrag zu Runde 237): Die Regel `.aufg { padding-top: 18px }` ist entfallen. Sie war
   der handgemachte Ersatz für den fehlenden Seiten-Container - „Richtwert wie bei den übrigen
   Modulseiten", aber eben nur oben und nur ungefähr. Den Abstand liefert jetzt der echte Container
   oben mit 32 px ringsum, wie bei `.dashboard`/`.evaluations`. Bliebe die Regel stehen, überschriebe
   sie den oberen Wert wieder auf 18 px und die Seite wäre oben schmaler als jede andere. */

/* 2: In der vollen Listenbreite ist die Board-Karte überdimensioniert - kompakte, einzeilig
   umbrechende Variante nur für den Listenkontext. */
.aufg-liste .aufg-karte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 6px 12px;
}

    .aufg-liste .aufg-karte .aufg-karte-faellig,
    .aufg-liste .aufg-karte .aufg-karte-chips,
    .aufg-liste .aufg-karte .aufg-karte-erlediger,
    .aufg-liste .aufg-karte .aufg-karte-meta {
        margin-top: 0;
    }

/* 4: Erlediger (Suchfeld+Chips) und Themen nebeneinander, damit der Dialog ohne internes
   Scrollen auskommt. */
.aufg-dialog-reihe-oben {
    align-items: flex-start;
}

    .aufg-dialog-reihe-oben .aufg-dialog-gruppe {
        flex: 1 1 0;
        min-width: 0;
    }

/* Aufgabenmodul Phase 2 (23.08.2026): Suche/Mandanten-Filter in der Toolbar und die
   Mandantenaufträge-Gruppen von /meine-auftraege. */
.aufg-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.aufg-suche {
    flex: 0 1 260px;
    padding: 6px 10px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    font-size: 13px;
}

.aufg-mandant-filter {
    padding: 6px 8px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface);
    font-size: 13px;
    max-width: 260px;
}

/* 31.08.2026 (Phase 239): Nur das Aufgabenmodul rückt links näher an den Fensterrand. Die
   Seitenleiste bringt seit Phase 239 selbst Rahmen und 14 px Innenabstand mit; zusammen mit den
   32 px des Seiten-Containers stand sie weiter innen als jede andere Modul-Seitenleiste. 16 px
   sind am Bildschirm nachgemessen, nicht vom Testsystem übernommen.

   ⚠️ Bewusst eine eigene Klasse am Wurzelelement statt einer Änderung an `.aufg` - genau nach dem
   Muster von `.aufg-auftraege`: `/meine-auftraege` teilt sich `.aufg` und behält seine 32 px. */
.aufg-modul {
    padding-left: 16px;
}

/* 31.08.2026 (Phase 239): Wieder auf den spezifischen Selektor zurück.

   In Runde 237 hatte ich ihn von `.aufg-auftraege .aufg-inhalt h1` auf `.aufg-inhalt h1`
   verallgemeinert, weil beide Seiten dieselbe Überschrift-Gestaltung brauchten. Jetzt hat die
   Aufgaben-Seite gar keine Überschrift mehr (Phase 239, Punkt 1) - eine gemeinsame Regel gibt es
   also nichts mehr zu teilen, und stehenbleiben darf sie nur für „Meine Aufträge". */
.aufg-auftraege .aufg-inhalt h1 {
    font-size: 20px;
    margin: 0 0 4px;
}

/* 25.08.2026: Seitenrand und Breitengrenze für diese Seite. Die gemeinsame Wurzelklasse .aufg bringt
   nur `padding: 18px 0 0` mit - im Aufgabenmodul sorgt die Seitenleiste für den seitlichen Abstand,
   hier gibt es keine, der Inhalt klebte also an der Fensterkante. Das fiel vorher kaum auf, weil die
   Kartenliste auf 720px begrenzt war; seit sie ein Raster ist (siehe unten), zöge sie sich sonst über
   die volle Fensterbreite. 1200px entspricht etwa vier Karten - darüber hinaus wandern die Augen bei
   einer Aufgabenliste zu weit. */
/* 30.08.2026 (Nachtrag zu Runde 237): Der seitliche Innenabstand von 18 px ist entfallen - er war,
   wie der Kommentar oben selbst sagt, der Ersatz für den fehlenden Seiten-Container. Den liefert
   `.aufg` jetzt mit 32 px; 18 px obendrauf ergäben 50 px und diese Seite wäre eingerückter als jede
   andere. Der untere Abstand bleibt, der kommt nicht vom Container. */
.aufg-auftraege .aufg-inhalt {
    padding: 0 0 24px;
    max-width: 1200px;
}

.aufg-auftrag-gruppe {
    margin-top: 18px;
}

.aufg-auftrag-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--centra-border);
    margin-bottom: 8px;
}

.aufg-auftrag-mandant {
    font-weight: 600;
}

.aufg-auftrag-name {
    color: var(--centra-text-secondary);
    font-size: 13px;
}

/* --- „Meine zugewiesenen Aufträge": Werkzeugleiste und Gruppen nach Auftragsart (10.09.2026) ---

   Der Themen-Filter und das Suchfeld selbst bringen ihr Aussehen aus dem Auftragsplanung-Board mit
   (.plan-topics/.plan-topic/.plan-filter, weiter oben in dieser Datei und bewusst nicht an die
   Board-Seite gebunden). Hier steht nur, wie beides auf dieser Seite angeordnet ist - und das
   leisere Gegenstück zum .aufg-auftrag-kopf-Muster des ersten Seitenabschnitts. */

.aufg-auftrag-werkzeuge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 14px;
}

.aufg-thema-gruppe {
    margin-top: 18px;
}

.aufg-thema-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

/* Bewusst OHNE Trennlinie und eine Stufe kleiner als .aufg-auftrag-kopf darüber: Dort trennen die
   Köpfe einzelne Aufträge, hier nur Auftragsarten innerhalb EINES Abschnitts. Zwei gleich laute
   Gliederungsebenen auf einer Seite ließen nicht mehr erkennen, welche die übergeordnete ist. */
.aufg-thema-kopf h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- Dashboard-Kachel „Neu zugewiesene Aufträge" (25.08.2026, Teil E) ------------------------ */

.zuweisung-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zuweisung-zeile {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Der Textblock ist der Link zur Detailansicht; das × daneben bleibt bewusst außerhalb davon,
   damit ein Klick zum Wegblenden nicht gleichzeitig navigiert. */
.zuweisung-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: inherit;
    text-decoration: none;
}

    .zuweisung-text:hover .zuweisung-mandant {
        color: var(--centra-accent);
    }

.zuweisung-mandant {
    font-weight: 600;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.zuweisung-auftrag {
    color: var(--centra-text-secondary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.zuweisung-weg {
    flex: 0 0 auto;
    appearance: none;
    border: none;
    background: none;
    color: var(--centra-text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: var(--centra-radius);
}

    .zuweisung-weg:hover {
        background: var(--centra-surface-2);
        color: var(--centra-text);
    }

/* --- Zwei Abschnitte auf /meine-auftraege (25.08.2026, Teil D) -------------------------------
   Oben die eigenen zugewiesenen AUFTRÄGE aus der Auftragsplanung, darunter die AUFGABEN mit
   Auftragsbezug. Zwei fachlich verschiedene Dinge, deshalb sichtbar verschieden gehalten - die
   Auftrags-Karten sind breiter, tragen eine getönte Kopfzeile und keinen Akzentbalken links. */

.aufg-abschnitt {
    margin-top: 26px;
}

.aufg-abschnitt-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

    .aufg-abschnitt-kopf h2 {
        font-size: 15px;
        margin: 0;
    }

.aufg-abschnitt-quelle {
    color: var(--centra-text-muted);
    font-size: 12px;
}
/* Raster für die eigenen zugewiesenen Aufträge. Die Karten darin sind seit dem 25.08.2026 die
   Board-Karten selbst (gemeinsame Komponente AuftragsKarte) - das früher hier stehende eigene
   Kartenbild (.auftrag-karte* mit getönter Kopfzeile) ist damit ersatzlos entfallen. 360px, weil
   eine Board-Karte mit Budget-Balken und Monats-Raster mehr Breite braucht als ein Aufgaben-
   Kärtchen. */
.auftrag-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
    /* Die Board-Karten bringen ihre eigene Ausrichtung mit; ohne start würden sie auf die Höhe der
       höchsten Karte der Reihe gestreckt. */
    align-items: start;
}


/* --- Kärtchen auf /meine-auftraege (Nachbesserung 25.08.2026) --------------------------------
   Dennis' Rückmeldung: Die Kärtchen wirkten wie Listenzeilen. Ursache war die Kombination aus
   .aufg-liste (einspaltig) und .aufg-liste .aufg-karte (eine umbrechende Zeile, kein vertikaler
   Rhythmus). Beides wird hier für DIESE Seite überschrieben - bewusst unter .aufg-auftraege
   eingeschränkt, denn dieselben Klassen tragen auch die Spalten im Aufgaben-Board (Aufgaben.razor),
   und das soll unverändert bleiben.

   Vorbild ist .plan-card vom Auftragsplanung-Board: gestapelte Reihen, farbiger linker Rahmen,
   dieselben Token. Kein MudCard/MudPaper - in der ganzen App ist eine Karte ein handgestyltes div. */

/* Raster statt einer Spalte - das ist der Kern gegen den Listen-Eindruck. minmax(260px, 1fr):
   schmale Fenster behalten eine Spalte, breite füllen sich von selbst auf. */
.aufg-auftraege .aufg-liste {
    display: grid;
    /* 300px statt 260px (25.08.2026, Rückmeldung „zu gequetscht"): Bei 260 standen Titel und
       Fälligkeit sehr eng, und die Themen-Chips brachen früh um. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    /* Die 720px-Breitenbegrenzung der einspaltigen Liste würde das Raster auf zwei Spalten
       deckeln - hier soll es die verfügbare Breite nutzen. */
    max-width: none;
}

.aufg-auftraege .aufg-liste .aufg-karte {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Überschreibt das flex-wrap der Listen-Regel: Umbrechen darf die Merkmal-Reihe, nicht die
       Karte selbst (gleiche Überlegung wie bei .plan-card). */
    flex-wrap: nowrap;
    /* Großzügiger seit 25.08.2026 (Rückmeldung „zu gequetscht"): vorher gap 6px, padding 10px 12px. */
    gap: 9px;
    padding: 14px 16px;
    border-left: 3px solid var(--centra-accent);
    cursor: pointer;
    font-size: 13.5px;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

/* Überfällig behält seine Gefahrenfarbe - jetzt auch am linken Rahmen, der auf dieser Seite das
   auffälligste Merkmal der Karte ist. */
.aufg-auftraege .aufg-liste .aufg-karte-ueberfaellig {
    border-left-color: var(--centra-danger-text);
}

.aufg-auftraege .aufg-liste .aufg-karte:hover {
    transform: translateY(-1px);
    box-shadow: 0 3.2px 7.2px rgba(0, 0, 0, .13);
    border-color: var(--centra-accent);
}

.aufg-auftraege .aufg-liste .aufg-karte-ueberfaellig:hover {
    border-color: var(--centra-danger-text);
}

/* Die Reihen der Karte. */
.aufg-karte-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.aufg-karte-zeile-titel .aufg-karte-titel {
    font-weight: 600;
    /* Lange Aufgabentitel sollen lesbar bleiben statt abgeschnitten zu werden - dieselbe
       Entscheidung wie beim Mandantennamen auf dem Board. */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Fälligkeit und Themen-Chips dürfen untereinander rutschen, wenn viele Themen dranhängen. */
.aufg-karte-zeile-merkmale {
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Fußzeile unten gehalten (margin-top:auto), damit nebeneinanderliegende Karten unterschiedlicher
   Texthöhe ihre Kürzel und Herkunft auf einer Linie haben - wie die Steuerungs-Reihe auf dem Board. */
.aufg-karte-zeile-fuss {
    margin-top: auto;
    padding-top: 2px;
    gap: 8px;
}

    /* Die Herkunftszeile schiebt sich an den rechten Rand, das Notiz-Symbol dahinter. */
    .aufg-karte-zeile-fuss .aufg-karte-meta {
        margin-left: auto;
    }

    .aufg-karte-zeile-fuss .aufg-karte-badges {
        flex: 0 0 auto;
    }

/* 29.08.2026 (Runde 229): .es-input hatte bis hierher gar keine eigene Regel - die Felder waren
   deshalb so breit, wie es die Zeilenregel vorgab, und die lautet `.es-window-row input { width:
   90px }`. Diese 90px stammen von den kleinen Zahlenfeldern des Buchungsfensters ("Tage zurück",
   "Tage voraus"), für die sie richtig sind. Für Base-DN, Basisadressen oder einen 64-stelligen
   Zertifikats-Fingerabdruck sind sie unbrauchbar: Man sieht immer nur einen Ausschnitt und muss im
   Feld scrollen, um zu prüfen, was man eingetragen hat.

   min-width statt width, weil es die 90px der Zeilenregel überstimmt, ohne dass die Zeilenregel
   angefasst werden muss - die gilt auch für Felder, die es weiterhin schmal haben sollen.

   Etwas mehr Innenabstand und Schriftgröße als die Zeilenregel: Die Beschwerde war "zu klein", und
   das betraf nicht nur die Breite. */
.es-input {
    min-width: 260px;
    padding: 9px 11px;
    font-size: 14px;
}

    /* Zahlenfelder bleiben schmal - ein 260px breites Port-Feld für vier Ziffern sieht aus wie ein
       Versehen. */
    .es-input[type="number"] {
        min-width: 110px;
    }

    /* Der Farbwähler neben "Neues Thema…" trägt dieselbe Klasse, ist aber ein 46px-Quadrat
       (.aufg-farbe). min-width sticht flex-basis - ohne diese Ausnahme würde er auf 260px
       aufgeblasen. */
    .es-input.aufg-farbe {
        min-width: 46px;
        padding: 2px;
    }

/* Nachbesserung 23.08.2026 (Punkt 5): NUR das Team-Namensfeld der Auftragsplanungs-Teamverwaltung
   breiter. Steht bewusst NACH der .es-input-Regel darüber: gleiche Spezifität, also gewinnt die
   spätere - sonst würde das Teamfeld von 320px auf 260px zurückfallen. */
.es-input-teamname {
    min-width: 320px;
}

/* Punkt 6: der rote Bestätigungs-Zustand des Endgültig-löschen-Knopfs. */
.editor-btn.danger {
    background: var(--centra-danger-bg);
    border-color: var(--centra-danger-border);
    color: var(--centra-danger-text);
}

/* Aufgabenmodul 23.08.2026: Checklisten + Vorlagen + Neu/Vorlage-Auswahl. */
.aufg-checkliste-badge {
    font-size: 11px;
    color: var(--centra-text-muted);
    margin-top: 4px;
    white-space: nowrap;
}

.aufg-punkt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.aufg-punkt-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    border: 1px solid transparent;
    border-radius: var(--centra-radius);
    padding: 3px 6px;
}

input.aufg-punkt-text:hover,
input.aufg-punkt-text:focus {
    border-color: var(--centra-border);
    background: var(--centra-surface);
}

.aufg-punkt-neu {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

    .aufg-punkt-neu input {
        flex: 1 1 auto;
        padding: 5px 8px;
        border: 1px solid var(--centra-border);
        border-radius: var(--centra-radius);
        font-size: 13px;
    }

.aufg-auswahl {
    display: flex;
    gap: 20px;
}

.aufg-auswahl-spalte {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    padding: 14px;
}

    .aufg-auswahl-spalte h4 {
        margin: 0 0 6px;
        font-size: 14px;
    }

.aufg-auswahl-vorlagen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.aufg-auswahl-vorlage {
    display: flex;
    align-items: center;
    /* ⚠️ 31.08.2026 (Phase 239): Ohne diese Zeile stand der Vorlagenname mittig statt links -
       nachgemessen: Inhalt bei x = 1851 statt bei x = 1751 (linke Kante 1741 + 10 px
       Innenabstand). Ursache ist ein globales `button { justify-content: center }` aus
       MudBlazor.min.css, das nach app.css geladen wird; Spezifität hilft dagegen nicht, weil die
       eigene Klasse die Eigenschaft gar nicht setzt. Dasselbe Muster wie bei `.aufg-nav-item`. */
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    padding: 7px 10px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface);
    cursor: pointer;
}

    .aufg-auswahl-vorlage:hover {
        border-color: var(--centra-accent);
    }

/* Nachbesserungen 23.08.2026: "+N"-Avatar und die deaktivierte Vorlage-Spalte der Neu-Auswahl. */
.aufg-avatar-mehr {
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
}

.aufg-auswahl-spalte-deaktiviert {
    opacity: 0.55;
    background: var(--centra-surface-2);
}

/* Nachtrag 23.08.2026 (MS-Planner-Parität der Checkliste): Durchstreichen + Zieh-Griff. */
.aufg-punkt-erledigt {
    text-decoration: line-through;
    color: var(--centra-text-muted);
}

.aufg-punkt-ziehbar {
    cursor: grab;
}

.aufg-punkt-griff {
    color: var(--centra-text-muted);
    font-size: 11px;
    cursor: grab;
    user-select: none;
}

/* Anhänge (Phase 3, 24.08.2026) - eine Zeile je Datei: Name als Download-Link, Metadaten
   gedämpft daneben, Entfernen-Kreuz rechts (dasselbe Zeilenmuster wie die Checklisten-Punkte). */
.aufg-anhang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.aufg-anhang-name {
    flex: 0 1 auto;
    font-size: 13px;
    color: var(--centra-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .aufg-anhang-name:hover {
        text-decoration: underline;
    }

.aufg-anhang-meta {
    flex: 1 1 auto;
    font-size: 11.5px;
    color: var(--centra-text-muted);
}

.aufg-anhang-neu {
    display: flex;
    align-items: center;
    /* Umbruch erlaubt: In einem schmalen Fenster rutscht der Größen-Hinweis unter die Pille,
       statt sie zu stauchen (die Pille selbst bricht nie um, siehe white-space unten). */
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 12.5px;
    /* Anker für das visuell versteckte Datei-Feld. */
    position: relative;
}

/* Das native <input type="file"> ist in jedem Browser anders und lässt sich nicht als Pille
   gestalten. Es bleibt deshalb im Dokument (das <label for="…"> braucht es, und Screenreader
   ebenso), wird aber unsichtbar gelegt - bewusst NICHT display:none, damit es fokussierbar
   bleibt und die Beschriftung sauber daran hängt. */
.aufg-anhang-datei-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Der sichtbare Auslöser - Form nach dem Vorbild von .plan-chip (Pille, gleiche Rahmenfarbe),
   aber größer und klickbarer, weil es ein echter Knopf ist und kein Anzeige-Chip. Farben
   ausschließlich aus den Projekt-Variablen: dunkle Schrift auf hellem Grund, wie im Rest von
   Centra (das Planner-Vorbild zeigt einen Darkmode, den es hier nicht gibt). */
.aufg-anhang-knopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    background: var(--centra-surface);
    color: var(--centra-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

    .aufg-anhang-knopf:hover {
        background: var(--centra-surface-2);
        border-color: var(--centra-text-muted);
    }

    /* Tastaturbedienung: Der Fokus liegt technisch auf dem versteckten Feld - der Ring gehört
       sichtbar an die Pille. */
    .aufg-anhang-datei-versteckt:focus-visible + .aufg-anhang-knopf {
        outline: 2px solid var(--centra-accent);
        outline-offset: 2px;
    }

    /* Während ein Upload läuft: sichtbar ausgegraut. Den Klick blockt ohnehin schon das
       deaktivierte Feld dahinter - das hier ist die dazugehörige Optik. */
    .aufg-anhang-knopf.deaktiviert {
        opacity: .55;
        cursor: not-allowed;
    }

.aufg-anhang-knopf-symbol {
    font-size: 14px;
    line-height: 1;
}

/* Karten-Symbole nebeneinander (Checkliste ☑ und Anhang 📎) - ohne eigenen Außenabstand, den
   bringen die Badges selbst mit, damit die Karte aussieht wie bisher, wenn nur eines da ist. */
.aufg-karte-badges {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aufg-anhang-badge {
    font-size: 11px;
    color: var(--centra-text-muted);
    margin-top: 4px;
    white-space: nowrap;
}

/* Stoppuhr-Symbol auf der Aufgaben-Karte (26.08.2026). Anders als Checklisten- und Anhang-Symbol
   daneben ist das ein echter Knopf - deshalb Zeigerhand und ein Hover-Zustand, damit erkennbar ist,
   dass hier etwas passiert. Ansonsten bewusst genauso zurückhaltend wie die Nachbarn: Es soll die
   Karte gliedern, nicht mit dem Titel um Aufmerksamkeit konkurrieren. */
.aufg-stoppuhr-badge {
    appearance: none;
    border: none;
    background: none;
    padding: 0 2px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1;
    color: var(--centra-text-muted);
    cursor: pointer;
    border-radius: var(--centra-radius);
}

    .aufg-stoppuhr-badge:hover {
        background: var(--centra-surface-2);
    }

/* Aufgaben-Kartenvorschau auf dem Dashboard (24.08.2026, TasksPanel). Nutzt bewusst die Klassen der
   Aufgaben-Seite (.aufg-karte und die Badges), damit beide Stellen dieselbe Sprache sprechen -
   hier nur die Kleinigkeiten, die eine Karte IM Dashboard-Panel braucht: Abstand zwischen den
   Karten und das Zurücksetzen der Link-Optik (die Karten sind Links auf /aufgaben). */
.dash-aufg-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash-aufg-karte {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .dash-aufg-karte:hover {
        border-color: var(--centra-text-muted);
    }

    .dash-aufg-karte:focus-visible {
        outline: 2px solid var(--centra-accent);
        outline-offset: 2px;
    }

/* Überstunden-Hinweis an einem Urlaubsantrag (24.08.2026) - etwas hervorgehoben gegenüber den
   übrigen Unterzeilen, weil er erklärt, warum weniger Urlaub abgezogen wird als der Zeitraum lang
   ist (und warum im Zeitkalender für diese Tage nichts steht). */
.ub-ueberstunden-hinweis {
    color: var(--centra-accent-text);
}

/* 27.08.2026 - „nicht ermittelbar" in der Kapazitätsauslastung. Bewusst gedämpft und NICHT rot:
   Es ist kein Fehler, sondern eine fehlende Stammdatenangabe (Wochenarbeitszeit). Rot würde die
   Zeile wie ein Problem aussehen lassen, das der Betrachter der Auswertung lösen müsste. */
.eval-nicht-ermittelbar {
    color: var(--centra-text-secondary);
    cursor: help;
}

/* ===== Fortschrittsanzeige der Mitarbeiter-Anlage (29.08.2026, Runde 230) =====

   Vier benannte Schritte statt eines Balkens mit Prozentzahl: Beim Anlegen eines Mitarbeiters
   passieren vier unterschiedliche Dinge, und wenn eines davon hängt oder scheitert, will man wissen
   WELCHES. Eine Prozentzahl sagt genau das nicht.

   Farben und Maße kommen aus den vorhandenen Variablen - die Anzeige soll wie ein Teil der Karte
   aussehen, nicht wie ein Fremdkörper. */

.mo-fortschritt {
    padding: 8px 4px 4px;
}

.mo-fortschritt-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mo-fortschritt-schritt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--centra-control-radius);
    /* Der Übergang zwischen den Zuständen: sparsam, damit die Karte nicht unruhig wirkt - aber
       vorhanden, damit der Wechsel nicht springt. */
    transition: background-color .25s ease, color .25s ease;
}

    /* Ausstehend: sichtbar, aber zurückhaltend. Bewusst NICHT bis zur Unlesbarkeit ausgegraut -
       der Nutzer soll sehen, was noch kommt. */
    .mo-fortschritt-schritt.ausstehend {
        color: var(--centra-text-secondary);
    }

    .mo-fortschritt-schritt.erledigt {
        color: var(--centra-text-secondary);
    }

    .mo-fortschritt-schritt.aktiv {
        background: var(--centra-accent-bg);
        color: var(--centra-accent-text);
        font-weight: 600;
    }

    .mo-fortschritt-schritt.fehlgeschlagen {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
        font-weight: 600;
    }

/* Die Marke links: immer gleich groß, damit die Texte auf einer Linie stehen und beim
   Zustandswechsel nichts verrutscht. */
.mo-fortschritt-marke {
    flex: 0 0 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mo-fortschritt-haken {
    color: var(--centra-success-text, #0e700e);
    font-size: 15px;
    line-height: 1;
}

.mo-fortschritt-kreuz {
    color: var(--centra-danger-text);
    font-size: 15px;
    line-height: 1;
}

/* Ausstehend: ein ruhiger Punkt, kein leerer Platz - sonst sähe die Zeile unfertig aus. */
.mo-fortschritt-punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--centra-border);
}

.mo-fortschritt-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid var(--centra-accent-bg);
    border-top-color: var(--centra-accent);
    animation: mo-fortschritt-dreht .75s linear infinite;
}

@keyframes mo-fortschritt-dreht {
    to {
        transform: rotate(360deg);
    }
}

/* Der Abschluss ist bewusst KEIN weiteres Häkchen in derselben Reihe, sondern ein eigener Block -
   sonst ginge der Moment unter, auf den der Nutzer die ganze Zeit gewartet hat. */
.mo-fortschritt-fertig {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--centra-control-radius);
    background: var(--centra-success-bg, #f1faf1);
    border: 1px solid var(--centra-border);
}

.mo-fortschritt-fertig-haken {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: var(--centra-success-text, #0e700e);
}

.mo-fortschritt-fehler {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--centra-control-radius);
    background: var(--centra-danger-bg);
    border: 1px solid var(--centra-border);
    color: var(--centra-danger-text);
}

/* ===== Auswahlfenster im Onboarding-Assistenten (29.08.2026, Runde 231) =====

   Hülle und Kopfzeile kommen aus dem bestehenden .editor-Overlay-Muster (Zeiteintrag-Editor,
   Stoppuhr-Buchen-Dialog) - hier steht nur, was diese beiden Fenster darüber hinaus brauchen. Kein
   drittes Fenster-System: Die Seite benutzt durchgehend .es-/.mo-/.editor-Klassen. */

.mo-fenster {
    max-width: 560px;
}

    /* Die Dual-Listbox braucht Platz für zwei Spalten nebeneinander. */
    .mo-fenster.mo-fenster-breit {
        max-width: 780px;
    }

.mo-suche {
    width: 100%;
}

.mo-fenster-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Deckelt die Höhe, damit das Fenster bei langen Listen nicht über den Bildschirm hinauswächst -
       gescrollt wird innerhalb der Liste, die Kopfzeile bleibt stehen. */
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-control-radius);
}

/* ⚑ 31.08.2026 (Phase 239): Geprüft und BEWUSST NICHT geändert. Diese Klasse zeigt dasselbe Muster
   wie `.aufg-auswahl-vorlage` und `.stopwatch-mandant-treffer-zeile` (Flex-Knopf ohne eigenes
   `justify-content`), und `getComputedStyle` liefert hier tatsächlich `center` aus MudBlazor.
   Sichtbar ist davon aber nichts: Das erste Kind `.mo-fenster-haupt` hat `flex: 1 1 0%` und füllt
   die Zeile, dem Zentrieren bleibt nichts zu verteilen. Nachgemessen an vier Einträgen -
   Inhaltskante bei allen x = 1357, unabhängig von der Textlänge.

   Nicht angefasst, weil hier nichts kaputt ist. ⚠️ Wer `flex: 1` an `.mo-fenster-haupt` je
   entfernt, holt sich damit allerdings die Zentrierung ins Haus. */
.mo-fenster-eintrag {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--centra-border);
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--centra-text);
    cursor: pointer;
    transition: background-color .15s ease;
}

    .mo-fenster-liste li:last-child .mo-fenster-eintrag {
        border-bottom: none;
    }

    .mo-fenster-eintrag:hover {
        background: var(--centra-surface-2);
    }

    /* Der bereits gewählte Eintrag, damit beim erneuten Öffnen sofort sichtbar ist, was gilt. */
    .mo-fenster-eintrag.gewaehlt {
        background: var(--centra-accent-bg);
        color: var(--centra-accent-text);
        font-weight: 600;
    }

.mo-fenster-haupt {
    flex: 1;
}

/* Der Kontoname als Nebeninfo - er ist das Eindeutige, aber nicht das, wonach man sucht. */
.mo-fenster-neben {
    font-size: 12px;
    color: var(--centra-text-secondary);
}

.mo-fenster-pfeil {
    color: var(--centra-text-secondary);
    font-size: 12px;
}

/* ----- Dual-Listbox ----- */

.mo-duallist {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.mo-duallist-spalte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mo-duallist-titel {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
}

/* Die Sammelknöpfe stehen mittig zwischen den Spalten - dort, wo die Bewegung stattfindet. */
.mo-duallist-mitte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

    .mo-duallist-mitte .editor-btn {
        min-width: 44px;
        font-size: 16px;
        line-height: 1;
    }

/* ----- Die Zusammenfassung im Formular ----- */

.mo-auswahl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-control-radius);
    background: var(--centra-surface-2);
}

.mo-auswahl-leer {
    flex: 1;
    font-size: 13px;
    color: var(--centra-text-secondary);
    font-style: italic;
}

.mo-auswahl-wert {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13.5px;
}

.mo-auswahl-neben {
    font-size: 12px;
    color: var(--centra-text-secondary);
}

/* Chips statt einer Zahl: „3 Gruppen" beantwortet die Frage nicht, die man beim Prüfen hat. */
.mo-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mo-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-size: 12.5px;
    font-weight: 600;
}

/* ===== Periodizität & Darstellung (31.08.2026, Phase 240) =====================================

   Übernommen aus der abgenommenen Vorlage `docs/design/auftragsplanung-periodizitaet-vorschau.html`
   - Maße, Farben und Radien 1:1, nichts neu gestaltet. Zwei Tokens, die die Vorlage in ihrem
   eigenen `:root` mitbringt, fehlen in app.css: `--centra-surface-3` wird dort nirgends benutzt,
   `--centra-shadow-lg` nur am Dialograhmen, den hier MudBlazor stellt. Es waren also keine neuen
   Farbwerte nötig.

   ⚑ Die Kachelgröße 66×54 px ist ausdrücklich fest und NICHT inhaltsabhängig - Dennis war das
   wichtig, damit die sieben Kacheln ein ruhiges Raster bilden statt je nach Beschriftungslänge zu
   tanzen. Bitte nicht durch `flex`/`auto` ersetzen. */

.iv-picker {
    display: grid;
    grid-template-columns: repeat(4, 66px);
    gap: 6px;
    width: fit-content;
}

.iv-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ⚠️ Ohne diese Zeile zieht das globale `button { justify-content: center }` aus
       MudBlazor.min.css nicht - hier ist zentriert sogar gewollt; die Zeile steht trotzdem
       ausdrücklich da, damit die Absicht sichtbar ist (Phase 239). */
    justify-content: center;
    gap: 5px;
    padding: 8px 4px;
    border-radius: var(--centra-radius);
    border: 1.5px solid var(--centra-border);
    background: var(--centra-surface);
    cursor: pointer;
    transition: border-color .12s, background .12s, transform .08s;
    width: 66px;
    height: 54px;
    font-family: inherit;
}

    .iv-pill:hover {
        border-color: #c7d9ea;
        background: #fbfdff;
    }

    .iv-pill:active {
        transform: scale(.96);
    }

    .iv-pill .iv-label {
        font-size: 10.5px;
        font-weight: 600;
        color: var(--centra-text-secondary);
        white-space: normal;
        text-align: center;
        line-height: 1.15;
    }

    .iv-pill.aktiv {
        border-color: var(--centra-accent);
        background: var(--centra-accent-bg);
    }

        .iv-pill.aktiv .iv-label {
            color: var(--centra-accent-text);
        }

/* Punkte-Raster: zeigt die Anzahl der Perioden im Jahr, ohne sie hinschreiben zu müssen. */
.iv-dots {
    display: grid;
    grid-template-columns: repeat(4, 4px);
    gap: 2.5px;
    width: 20.5px;
}

    .iv-dots.iv-dots-1 {
        grid-template-columns: 4px;
        width: 4px;
    }

    .iv-dots .iv-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--centra-border);
    }

.iv-pill.aktiv .iv-dots .iv-dot.gefuellt {
    background: var(--centra-accent);
}

.iv-pill:not(.aktiv) .iv-dots .iv-dot.gefuellt {
    background: #b9b7b5;
}

/* Stichtag - rein beschreibend, siehe Kommentar an der Entität. */
.iv-stichtag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

    .iv-stichtag input {
        width: 42px;
        text-align: center;
        padding: 4px 2px;
        font-size: 12.5px;
        border: 1px solid var(--centra-border);
        border-radius: 5px;
        font-variant-numeric: tabular-nums;
        font-family: inherit;
    }

        .iv-stichtag input:focus {
            outline: 2px solid var(--centra-accent);
            outline-offset: 1px;
            border-color: var(--centra-accent);
        }

    .iv-stichtag.gesperrt {
        opacity: .38;
        pointer-events: none;
    }

.iv-vorschau {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--centra-text-muted);
}

    .iv-vorschau b {
        color: var(--centra-text-secondary);
        font-weight: 600;
    }

/* --- Darstellungs-Umschalter (Auftragsarten-Tabelle) --- */
.darst-toggle {
    display: inline-flex;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    padding: 2px;
    background: var(--centra-surface-2);
}

    .darst-toggle button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: none;
        background: transparent;
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        color: var(--centra-text-secondary);
        cursor: pointer;
        font-family: inherit;
    }

        .darst-toggle button.aktiv {
            background: var(--centra-surface);
            color: var(--centra-accent-text);
            box-shadow: var(--centra-shadow);
        }

/* Piktogramm: eine breite Karte gegen drei schmale - der Unterschied ist auf einen Blick lesbar,
   auch ohne den Text daneben. */
.darst-icon {
    width: 15px;
    height: 12px;
    position: relative;
    flex: none;
}

    .darst-icon.eins::before {
        content: '';
        position: absolute;
        inset: 0;
        border: 1.6px solid currentColor;
        border-radius: 2.5px;
        opacity: .85;
    }

    .darst-icon.mehr span {
        position: absolute;
        width: 6.5px;
        height: 12px;
        border: 1.6px solid currentColor;
        border-radius: 2px;
        opacity: .85;
    }

        .darst-icon.mehr span:nth-child(1) { left: 0; }
        .darst-icon.mehr span:nth-child(2) { left: 4.5px; opacity: .55; }
        .darst-icon.mehr span:nth-child(3) { left: 9px; opacity: .3; }

/* --- Auswahlkarten im Auftrags-Dialog --- */
.darst-hinweis {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    padding: 8px 12px;
    border-radius: var(--centra-radius);
}

.darst-karten {
    display: flex;
    gap: 10px;
}

.darst-karte {
    flex: 1;
    border: 1.5px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    padding: 14px 14px 12px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--centra-surface);
    text-align: left;
    font-family: inherit;
}

    .darst-karte:hover {
        border-color: #c7d9ea;
    }

    .darst-karte.gewaehlt {
        border-color: var(--centra-accent);
        background: var(--centra-accent-bg);
    }

    .darst-karte:disabled {
        opacity: .45;
        cursor: default;
    }

    .darst-karte .darst-karte-titel {
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--centra-text);
    }

    .darst-karte .darst-haken {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1.5px solid var(--centra-border);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
    }

    .darst-karte.gewaehlt .darst-haken {
        border-color: var(--centra-accent);
        background: var(--centra-accent);
    }

        .darst-karte.gewaehlt .darst-haken::after {
            content: '';
            width: 5px;
            height: 5px;
            background: #fff;
            border-radius: 50%;
        }

    .darst-karte .darst-beschreibung {
        font-size: 11.5px;
        color: var(--centra-text-secondary);
        line-height: 1.4;
    }

/* Illustration in der Auswahlkarte: eine Fläche gegen fünf schmale. */
.darst-illu {
    display: flex;
    gap: 4px;
    height: 34px;
    align-items: flex-end;
    margin-top: 2px;
}

    .darst-illu .darst-illu-k {
        background: var(--centra-surface);
        border: 1.4px solid var(--centra-border);
        border-radius: 3px;
    }

    .darst-karte.gewaehlt .darst-illu .darst-illu-k {
        border-color: var(--centra-accent);
    }

    .darst-illu.zusammen .darst-illu-k {
        width: 100%;
        height: 100%;
    }

    .darst-illu.einzeln {
        justify-content: space-between;
    }

        .darst-illu.einzeln .darst-illu-k {
            width: 18%;
            height: 100%;
        }

/* Live-Vorschau: wie viele Karten/Perioden entstehen. */
.darst-vorschau {
    border: 1px dashed var(--centra-border);
    border-radius: var(--centra-radius);
    padding: 12px 14px;
    font-size: 11.5px;
    color: var(--centra-text-secondary);
}

    .darst-vorschau .darst-vorschau-kopf {
        font-weight: 600;
        color: var(--centra-text);
        margin-bottom: 6px;
        font-size: 12px;
    }

.darst-perioden {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .darst-perioden span {
        background: var(--centra-surface-2);
        padding: 3px 8px;
        border-radius: 5px;
        font-variant-numeric: tabular-nums;
        font-size: 11px;
    }

/* ============================================================================
   Erweiterte Auftrags-Detailkarte (Phase 246, 31.08.2026) - Praefix .ad-
   ----------------------------------------------------------------------------
   Zielbild: docs/design/auftragsplanung-auftragsdetail-erweitert.html (von Dennis abgenommen).
   Uebernommen sind Dichte, Kartenaufbau und die Diagramm-Idee; Farben kommen bewusst aus den
   bestehenden Centra-Token statt aus dem Entwurf - der Dialog soll wie Centra aussehen und nicht wie
   ein zweites Produkt daneben. Der Entwurf ist die Vorlage, nicht die Palette.
   ========================================================================= */

/* Zwei Spalten ab 900px. Darunter EINE Spalte - dann steht alles untereinander wie vor Phase 246,
   in derselben Reihenfolge. Bewusst eine Breiten-Abfrage und kein Container-Query: Der Dialog haengt
   an der Fensterbreite, nicht an einem eigenen Container. */
.ad-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

.ad-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0; /* sonst sprengen lange Kommentare/Tabellen die Spalte */
}

.ad-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
}

@media (min-width: 900px) {
    .ad-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .ad-chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ----- Karte ----- */
.ad-card {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    padding: 14px 16px;
}

.ad-card-breit {
    margin-top: 14px;
}

.ad-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.ad-card-head h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--centra-text);
}

.ad-hinweis {
    font-size: 11.5px;
    color: var(--centra-text-secondary);
    white-space: nowrap;
}

/* ----- Chips ----- */
.ad-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ad-chip-blau {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
}

/* Phase 265: Warn-Chip "Fakturiert, Arbeiten offen" auf der Honorar-Karte - dieselben
   Warning-Tokens wie ueberall (z. B. die Vertretungs-Markierung), keine neue Farbe. */
.ad-chip-gelb {
    background: var(--centra-warning-bg, #fff8e1);
    color: var(--centra-warning-text, #8a6100);
}

/* Phase 266: der neutrale vierte Chip-Zustand ("Offen") fuers Status-Badge der Board-Karten -
   zusammengesetzt aus den vorhandenen Flaechen-Tokens, keine neue Farbe. */
.ad-chip-grau {
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
    border: 1px solid var(--centra-border);
}

/* Phase 266: Zeile fuers Status-Badge auf der Board-Karte, unter Leiste/Einzel-Haken. Der Chip
   selbst nutzt die ad-chip-Klassen der Detailkarte - gleiche Optik, eine Konvention. */
.plan-status {
    margin-top: 4px;
}

.ad-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ----- Betrag + Faktenliste ----- */
.ad-betrag {
    font-size: 24px;
    font-weight: 650;
    line-height: 1.15;
    /* Tabellenziffern: Betraege untereinander sollen buendig stehen. */
    font-variant-numeric: tabular-nums;
    color: var(--centra-text);
}

.ad-betrag small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--centra-text-secondary);
}

.ad-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px 14px;
    margin: 12px 0 0;
}

.ad-fakten div { min-width: 0; }

.ad-fakten dt {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--centra-text-secondary);
}

.ad-fakten dd {
    margin: 2px 0 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ----- Quellenhinweis unter der Honorarkarte -----
   Bewusst ausfuehrlich und sichtbar: Die Karte zeigt Geldbetraege, deren Herkunft und Grenzen
   ("nur lesend", "Fakturasumme, keine Vereinbarung") mitgelesen werden muessen. */
.ad-quelle {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--centra-surface-2);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--centra-text-secondary);
}

.ad-quelle code {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
}

.ad-warnung {
    margin: 0;
    padding: 9px 11px;
    border-radius: 8px;
    border-left: 3px solid var(--centra-warn-border, #f0a020);
    background: var(--centra-warn-bg, rgba(255, 176, 32, 0.12));
    color: var(--centra-warn-text, #8a5300);
    font-size: 12px;
    line-height: 1.5;
}

/* ----- Buchungstabelle ----- */
.ad-tabelle-scroll {
    max-height: 300px;
    overflow: auto;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
}

.ad-buchungen {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ad-buchungen thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--centra-surface-2);
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--centra-text-secondary);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--centra-border);
}

.ad-buchungen td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--centra-border);
    vertical-align: middle;
}

.ad-buchungen tbody tr:last-child td { border-bottom: none; }
.ad-buchungen tbody tr:hover { background: var(--centra-surface-2); }

.ad-rechts { text-align: right; }
.ad-ziffern { font-variant-numeric: tabular-nums; }

.ad-person {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

/* Der Kommentar ist die einzige Spalte, die beliebig lang werden kann - sie bekommt den Rest und
   kuerzt mit Ellipse. Der volle Text steht im title-Attribut. */
.ad-kommentar {
    max-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--centra-text-secondary);
}

.ad-ja { color: #0f7b3f; font-weight: 600; }
.ad-nein { color: var(--centra-text-secondary); }

/* Phase 270: Ergebnis-Spalte in "Perioden im Detail" - bewusst die Projekt-Tokens statt der oben
   fest verdrahteten Werte (die .ad-ja-Farbe stammt aus einer aelteren Runde und wird hier nicht
   kopiert). Minus rot, ab 0 gruen. */
.ad-ergebnis-negativ { color: var(--centra-danger-text); font-weight: 600; }
.ad-ergebnis-positiv { color: var(--centra-success-text); font-weight: 600; }

/* Phase 270: Summenzeile der Perioden-Tabelle - optisch abgesetzt, gleiche Spaltenausrichtung. */
.ad-summenzeile td {
    border-top: 2px solid var(--centra-border);
    font-weight: 600;
}

/* Phase 269: die Vor/Zurueck-Pfeile in der Dialog-Unterzeile - kompakt, ohne die Zeile zu sprengen. */
.plan-dialog-sub .plan-dialog-nav {
    padding: 2px;
    margin: -2px 2px;
    vertical-align: middle;
}

/* ----- Diagramme ----- */
.ad-chart-canvas {
    position: relative;
    width: 100%;
}

/* ⚠️ Chart.js setzt die Canvas-Groesse selbst per Inline-Style - und misst dafuer mit
   getBoundingClientRect(). Im MudBlazor-Dialog laeuft beim Oeffnen eine transform-Animation, unter der
   diese Messung SKALIERTE Werte liefert; das Diagramm bekommt dadurch eine zu kleine Flaeche und
   behaelt sie (gemessen: 75 %, 86 %, 94 % - je nachdem, wo in der Animation es fertig wurde).
   Drei Anlaeufe ueber den Zeitpunkt der Messung haben das NICHT zuverlaessig geloest; die Groesse hier
   verbindlich vorzugeben schon. Der Inline-Style von Chart.js wird bewusst ueberstimmt - deshalb
   !important, das hier ausnahmsweise die einfachere Wahrheit ist. */
.ad-chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
}

.ad-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: var(--centra-text-secondary);
}

.ad-legende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ad-legende i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

/* Dieselben zwei Farben wie in createZweiReihenChart (palette[0] / palette[6]) - haendisch
   gespiegelt, weil die Legende in HTML steht und nicht von Chart.js gezeichnet wird.
   Wer die Palette dort aendert, muss sie hier mitaendern. */
.ad-legende-a { background: #0f6cbd; }
.ad-legende-b { background: #038387; }

.ad-chart-notiz {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--centra-text-secondary);
}

/* ----- Umschalter Uebereinander/Getrennt ----- */
.ad-umschalter {
    display: inline-flex;
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--centra-surface-2);
}

.ad-umschalter button {
    /* Rahmen und Hintergrund explizit zuruecksetzen - die Anwendung traegt ein globales
       button-Styling aus MudBlazor. */
    border: none;
    background: transparent;
    padding: 4px 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.ad-umschalter button:hover { color: var(--centra-accent-text); }

.ad-umschalter button.aktiv {
    background: var(--centra-accent);
    color: #fff;
}

/* ----- Platzhalter waehrend des Ladens -----
   Ein ruhiger Puls, kein Spinner: Der Dialog ist sofort da und fuellt sich - ein Spinner mittendrin
   wuerde behaupten, es ginge gerade gar nichts. */
.ad-skeleton {
    background: linear-gradient(90deg,
        var(--centra-surface-2) 25%, var(--centra-border) 50%, var(--centra-surface-2) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: ad-skeleton-puls 1.4s ease-in-out infinite;
}

.ad-skeleton-zeile { height: 14px; margin-bottom: 8px; }
.ad-skeleton-kurz { width: 55%; }

@keyframes ad-skeleton-puls {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Bewegungsempfindlichkeit respektieren - dieselbe Ruecksicht wie an anderen Stellen der Anwendung. */
@media (prefers-reduced-motion: reduce) {
    .ad-skeleton { animation: none; }
    .ad-umschalter button { transition: none; }
}

/* ----- Verrechnungssaetze der Beteiligten (Phase 247, 31.08.2026) -----
   Das klickbare Element ueber der Buchungstabelle. Bewusst kein normaler Knopf, sondern eine
   flache Zeile in der Kartensprache aus Phase 246: Sie soll einladend wirken, aber nicht mit dem
   "Speichern" des Dialogs konkurrieren. */
.ad-satz-knopf {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* Das globale button { justify-content: center } aus MudBlazor wuerde den Inhalt mittig
       zusammenschieben - hier soll er linksbuendig stehen. */
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 12px;
    padding: 9px 12px;
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    background: var(--centra-surface-2);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.ad-satz-knopf:hover {
    border-color: var(--centra-accent);
    background: var(--centra-accent-bg);
}

/* Die Avatare ueberlappen leicht - so bleibt die Gruppe schmal, auch wenn viele beteiligt sind,
   und liest sich trotzdem als "diese Personen". */
.ad-satz-avatare {
    display: inline-flex;
    flex-shrink: 0;
}

.ad-satz-avatare > * {
    margin-right: -6px;
    border: 2px solid var(--centra-surface-2);
}

.ad-satz-knopf:hover .ad-satz-avatare > * {
    border-color: var(--centra-accent-bg);
}

.ad-avatar-mehr {
    background: var(--centra-text-secondary);
    color: #fff;
}

.ad-satz-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text);
}

.ad-satz-text small {
    font-size: 11px;
    font-weight: 400;
    color: var(--centra-text-secondary);
}

/* Die Zahl "X ohne Satz" muss auffallen, ohne den Knopf alarmierend zu machen - deshalb nur die
   Textfarbe, kein Hintergrund. */
.ad-satz-warnung {
    color: var(--centra-warn-text, #8a5300);
    font-weight: 600;
}

.ad-satz-chevron {
    margin-left: auto;
    font-size: 18px;
    line-height: 1;
    color: var(--centra-text-secondary);
}

/* ----- Tabelle im Satz-Dialog ----- */
.ad-saetze td,
.ad-saetze th {
    white-space: nowrap;
}

/* Eine Zeile ohne Satz wird ruhig hervorgehoben - sie ist der Grund, warum man die Uebersicht
   ueberhaupt oeffnet. */
.ad-zeile-warnung {
    background: var(--centra-warn-bg, rgba(255, 176, 32, 0.12));
}

.ad-zeile-warnung:hover {
    background: var(--centra-warn-bg, rgba(255, 176, 32, 0.18));
}

.ad-satz-fehlt {
    color: var(--centra-warn-text, #8a5300);
    font-weight: 600;
    font-size: 11.5px;
}

/* "intern" hinter dem wirksamen Satz: kein Fehler, nur eine Herkunftsangabe - deshalb neutral
   blau und nicht warnfarben. */
.ad-satz-fallback {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
}

@media (prefers-reduced-motion: reduce) {
    .ad-satz-knopf { transition: none; }
}

/* ============================================================================
   Auftrags-Detailkarte, zweite Ueberarbeitung (Phase 248, 31.08.2026)
   ----------------------------------------------------------------------------
   Zielbild: docs/design/auftragsplanung-auftragsdetail-v2.html (von Dennis abgenommen) - loest
   auftragsplanung-auftragsdetail-erweitert.html als Referenz fuer diese Karte ab.

   ⚠️ BEWUSSTE, DOKUMENTIERTE AUSNAHME (Dennis' Entscheidung, Auftrag Phase 248, Abschnitt 0):
   Diese Karte bekommt ein kraeftigeres Blau als der Rest der Anwendung. Deshalb EIGENE Variablen
   mit --ad-Praefix statt --centra-accent zu ueberschreiben.

   ⚑ Diese drei Werte gelten NUR innerhalb von .ad-*-Klassen. Wer sie in andere Bereiche zieht oder
   damit --centra-accent ersetzt, faerbt die halbe Anwendung um und hebt genau die Konsistenz auf,
   die Phase 246/247 hergestellt haben. Die Schrift bleibt unveraendert (var(--centra-font-sans)) -
   der erste Entwurf nutzte IBM Plex, das war nie beauftragt und ist im v2-Entwurf bereits korrigiert.
   ========================================================================= */
:root {
    --ad-blue: #1163DA;
    --ad-blue-ink: #0B4A9E;
    --ad-blue-wash: #EAF1FD;
    --ad-teal-wash: #E4F7F4;
}

/* ⚑ Phase 248, Punkt 1: Der leere Bereich unter der Notiz.
   Ursache war nicht die Notiz, sondern das Raster: Ein CSS-Grid streckt seine Spalten per Default
   auf gleiche Hoehe (align-items: stretch). .ad-col ist ein Flex-Container, dessen Kinder kein
   flex-grow haben - die Spalte wurde also hoeher, ihr Inhalt blieb oben, darunter blieb Leerraum.
   `start` laesst jede Spalte nur so hoch werden wie ihr eigener Inhalt. */
.ad-grid {
    align-items: start;
}

/* ----- Auswertung je Periode: kompaktes Widget, erstes Element der rechten Spalte ----- */
.ad-widget {
    background: linear-gradient(160deg, var(--ad-teal-wash), var(--centra-surface) 70%);
    border-color: #CBEAE6;
}

.ad-mini-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Unter 520px nebeneinander unlesbar - dann untereinander. Greift im umgebrochenen Raster
   (eine Spalte) und auf schmalen Geraeten. */
@media (max-width: 520px) {
    .ad-mini-charts { grid-template-columns: 1fr; }
}

.ad-mini-box {
    height: 86px;
}

.ad-mini-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
}

.ad-mini-label i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.ad-widget-notiz {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #CBEAE6;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--centra-text-muted, #8a8886);
}

.ad-widget-warnung {
    display: block;
    margin-top: 4px;
    color: var(--centra-warn-text, #8a5300);
    font-weight: 600;
}

/* Die zweite Balkenreihe ("Investiert") - heller Blauton aus dem Entwurf, damit sich beide Balken
   unterscheiden, ohne dass einer dominiert. Gespiegelt aus createZweiReihenChart; wer ihn dort
   aendert, muss ihn hier mitaendern. */
.ad-legende-b2 { background: #C7D4EA; }
.ad-legende-a { background: var(--ad-blue); }

/* ----- Honorarkarte: Verlauf statt flacher Flaeche (Entwurf .fee-card) ----- */
.ad-card.ad-honorar {
    background: linear-gradient(160deg, var(--ad-blue-wash), var(--centra-surface) 72%);
    border-color: #D7E4FA;
}

.ad-card.ad-honorar .ad-betrag {
    color: var(--ad-blue-ink);
}

/* ----- Zustaendigkeit als Personen-Zeilen (Entwurf .person-row) ----- */
.ad-person-zeile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.ad-person-zeile:hover {
    background: var(--centra-surface-2);
}

.ad-person-wer {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ad-person-name {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-person-leer {
    color: var(--centra-text-muted, #8a8886);
    font-weight: 500;
}

.ad-person-rolle {
    margin-top: 1px;
    font-size: 11px;
    color: var(--centra-text-muted, #8a8886);
}

/* Leerer Avatar: gestrichelter Kreis statt gefuellter - so ist auf einen Blick zu sehen, dass hier
   noch niemand steht, ohne dass ein Platzhalter wie eine Person aussieht. */
.plan-avatar.ad-avatar-leer {
    background: var(--centra-surface-2);
    border: 1.5px dashed var(--centra-border);
    color: var(--centra-text-muted, #8a8886);
}

.ad-person-aktion {
    flex: none;
    border: none;
    background: none;
    padding: 6px 8px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ad-blue);
    cursor: pointer;
}

.ad-person-aktion:hover {
    background: var(--ad-blue-wash);
}

.ad-person-trenner {
    height: 1px;
    margin: 8px 0;
    background: #e9e7e5;
}

/* ----- Masse 1:1 aus dem v2-Entwurf (Phase 248) -----
   Beim geforderten Abgleich Entwurf/Anwendung gemessen: Die Karte hatte noch die engeren Masse aus
   Phase 246 (Radius 10px, Innenabstand 14/16, Abstaende 14). Der v2-Entwurf ist grosszuegiger, und
   genau das macht den Unterschied, den Dennis als "schoener" beschrieben hat. Werte einzeln
   uebernommen statt geschaetzt - Quelle jeweils in Klammern. */
.ad-card { border-radius: 14px; padding: 18px 20px; }   /* v2 .card */
.ad-grid { gap: 20px; }                                  /* v2 .grid-top */
.ad-col { gap: 16px; }                                   /* v2 .col */

@media (min-width: 900px) {
    /* v2 .grid-top: 1.05fr .95fr - die linke Spalte nur leicht breiter, nicht deutlich wie bisher */
    .ad-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* v2 .avatar: 30px. ⚠️ Bewusst NUR innerhalb der Personen-Zeilen dieser Karte - `.plan-avatar` ist
   eine geteilte Klasse, die auch auf den Board-Karten und in den Chips sitzt. Sie global zu
   vergroessern wuerde das Board umbauen. */
.ad-person-zeile .plan-avatar {
    width: 30px;
    height: 30px;
    font-size: 11.5px;
    font-weight: 700;
}

/* v2 .card-head h3 - im Widget ohne Versalien, dafuer kraeftiger */
.ad-widget .ad-card-head h3 {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.5px;
    font-weight: 700;
}

/* ============================================================================
   Auftrags-Detailkarte, Live-Test-Feedback (Phase 249, 31.08.2026)
   ----------------------------------------------------------------------------
   Die Farbtoken aus Phase 248 (--ad-blue usw.) bleiben unveraendert - sie sind live bestaetigt.
   Hier kommen nur die neuen Bausteine dazu: Kopf-Link, Ampel-Chips, Diagramm-Anordnung.
   ========================================================================= */

/* ----- Einstellungen-Link im Kopf -----
   Oben rechts in der grauen Auftragsdaten-Box, abgesetzt und leise: Er soll auffindbar sein, ohne
   mit den Auftragsdaten daneben zu konkurrieren. Absolut positioniert, damit er die Faktenliste
   nicht umbricht. */
.plan-dialog-info { position: relative; }

.ad-kopf-einstellungen {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    /* Das globale button { justify-content: center } aus MudBlazor wuerde die Zeilen mittig
       zusammenschieben. */
    justify-content: flex-start;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ad-blue);
    cursor: pointer;
    text-align: right;
    transition: background 120ms ease, border-color 120ms ease;
}

.ad-kopf-einstellungen:hover {
    background: var(--ad-blue-wash);
    border-color: #D7E4FA;
}

.ad-kopf-einstellungen small {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--centra-text-secondary);
}

/* Schmale Fenster: Der Link darf die Faktenliste nicht ueberlagern - dann sitzt er darunter. */
@media (max-width: 700px) {
    .ad-kopf-einstellungen {
        position: static;
        align-items: flex-start;
        text-align: left;
        margin-top: 8px;
    }
}

/* ----- Budget-Zeile im Kopf ----- */
.ad-budget-kopf {
    margin-top: 14px;
}

/* Der Chip sitzt in derselben Zeile wie die Beschriftung - deshalb etwas Luft davor und eine
   Grundlinie, die zum Text passt. */
.plan-dialog-budget-row .ad-chip {
    margin-left: 8px;
    vertical-align: middle;
}

/* ----- Ampel-Chips -----
   Zwei Textzustaende ("Im Plan"/"Nicht im Plan"), drei Punktfarben. Die Feinstufe steckt bewusst
   im Punkt und nicht im Hintergrund: Drei Chip-Farben fuer zwei Aussagen waeren unruhiger als
   noetig, und der Balken direkt darunter zeigt dieselbe Dreistufigkeit ohnehin schon. */
.ad-chip-gruen {
    background: var(--centra-success-bg, #e6f7e6);
    color: var(--centra-success-text, #0e700e);
}

.ad-chip-rot {
    background: var(--centra-danger-bg, #fdf3f4);
    color: var(--centra-danger-text, #a4262c);
}

/* Der Punkt erbt sonst die Chip-Farbe (currentColor) - diese drei ueberschreiben sie gezielt,
   damit die gelbe Zwischenstufe im gruenen Chip sichtbar wird. Gleiche Grenzen wie
   Kapazitaetsplanung.BalkenStufe: <=80 % ok, <=100 % warn, darueber bad. */
.ad-dot-ok { background: var(--centra-success-text, #0e700e); }
.ad-dot-warn { background: var(--centra-warning-text, #8a6100); }
.ad-dot-bad { background: var(--centra-danger-text, #a4262c); }

/* ----- Info-Zeichen am Kartenkopf (ersetzt den Quellen-Fliesstext) ----- */
.ad-info {
    flex: none;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
    font-size: 11px;
    cursor: help;
}

.ad-info:hover,
.ad-info:focus-visible {
    background: var(--ad-blue-wash);
    color: var(--ad-blue-ink);
}

/* ----- Diagramme untereinander (Phase 249) -----
   Loest .ad-mini-charts ab (zwei enge Kacheln nebeneinander). Drei eigene Diagramme mit echten
   Achsen brauchen Breite, nicht Nachbarschaft. */
.ad-charts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Die beiden Balken-Diagramme nebeneinander - Begruendung am Markup (Spaltenbalance).
   Unter 520px greift dieselbe Regel wie bei den frueheren Mini-Kacheln: untereinander. */
.ad-charts-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .ad-charts-paar { grid-template-columns: 1fr; }
}

/* ----- Phase 250 -----
   "Offen" hervorgehoben: die einzige Zahl in der Honorarkarte, die nach vorn schaut. */
.ad-fakt-offen dt { color: var(--ad-blue-ink); }
.ad-fakt-offen dd { font-weight: 700; color: var(--ad-blue-ink); }

.ad-fakt-luecke {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--centra-warn-text, #8a5300);
    cursor: help;
}

/* Der Umschalter nutzt --ad-blue statt --centra-accent: Er sitzt IN dieser Karte, und ein zweites
   Blau neben dem der Karte waere genau die Unruhe, die das eigene Token vermeiden soll. Ausserhalb
   der Karte bleibt .ad-umschalter unbenutzt. */
.ad-widget .ad-umschalter button.aktiv { background: var(--ad-blue); }
.ad-widget .ad-umschalter button:hover { color: var(--ad-blue-ink); }

/* "Offen" (Phase 250) - abgesetzter Block statt Spalte in der Faktenliste: Er haengt nicht an den
   DATEV-Honorardaten und soll auch dann dastehen, wenn darueber "keine Honorarangaben" steht. */
.ad-offen {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: baseline;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #D7E4FA;
}

.ad-offen-k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-blue-ink);
    font-weight: 600;
}

.ad-offen-v {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ad-blue-ink);
}

.ad-offen-sub {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--centra-text-secondary);
}

.ad-widget-fussnote {
    display: block;
    margin-top: 4px;
    color: var(--centra-text-secondary);
}

/* ----- Phase 251 ----- */
.ad-perioden-link {
    border: none;
    background: none;
    padding: 0 2px;
    font: inherit;
    color: var(--ad-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ad-perioden-link:hover { color: var(--ad-blue-ink); }

/* Kopf-Aktionen (Stoppuhr, Aufgabe) - unter dem Einstellungen-Link, gleiche Zurueckhaltung. */
.ad-kopf-aktionen {
    position: absolute;
    top: 62px;
    right: 12px;
    display: flex;
    gap: 6px;
}

.ad-kopf-aktion {
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ad-blue);
    cursor: pointer;
    white-space: nowrap;
}

.ad-kopf-aktion:hover { background: var(--ad-blue-wash); border-color: #D7E4FA; }

@media (max-width: 700px) {
    .ad-kopf-aktionen { position: static; margin-top: 8px; flex-wrap: wrap; }
}

/* Aufgaben-Dialog: der feste Bezug oben. */
.ad-aufgabe-bezug {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--centra-surface-2);
}

.ad-aufgabe-bezug span {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--centra-text-secondary);
}

.ad-aufgabe-bezug strong { font-size: 13px; }

.ad-aufgabe-daten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

@media (max-width: 520px) {
    .ad-aufgabe-daten { grid-template-columns: 1fr; }
}

/* ===================================================================================
   Phase 271 - Kapazitaets-Cockpit, Mitarbeiter-Tab (/auswertungen)
   Werte 1:1 aus docs/design/kapazitaets-cockpit-mitarbeiter-v1.html (NUR Light-Mode -
   Centra ist ein reines Fluent-Light-Tool; das Dark-CSS des Mockups war nur fuer die
   Vorschau bei Cowork). Token-Begruendung siehe Mockup-Kommentar: Mandanten = Akzentblau,
   Verwaltung = Muted-Grau, Nicht-abrechenbar = leiser Salbeiton; Balken der Top-Mandanten
   eine Blau-Rampe nach Rang.
   =================================================================================== */
:root {
    --viz-mandanten: #0f6cbd;
    --viz-verwaltung: var(--centra-text-muted);
    --viz-nichtabrechenbar: #6ea59b;
    --viz-bar-1: #0a4d8c;
    --viz-bar-2: #1c6fb0;
    --viz-bar-3: #3f8ed6;
    --viz-bar-4: #74ade0;
    --viz-bar-5: #aecdec;
    /* Durchschimmerndes Blau hinter KPI-Streifen und Karten-Headern - FLACHER Wash statt
       des Verlaufs der Honorarkarte (.ad-card.ad-honorar), Mockup-Vorgabe. */
    --kpi-wash: var(--centra-accent-bg);
}

/* Der blaue Header-Wash gilt bewusst NUR fuer die Cockpit-Karten (.cockpit-card) statt
   global fuer .card-header - der Mandanten-Tab ist ausdruecklich nicht Teil dieser Phase
   und behaelt seine bisherigen Header ("Schritt 2" folgt separat). */
.cockpit-card .card-header {
    background: var(--kpi-wash);
    flex-wrap: wrap;
    gap: 12px;
}
.cockpit-card .card-icon {
    background: var(--centra-surface);
    color: var(--centra-accent-text);
    box-shadow: var(--centra-shadow);
}

/* ---------- KPI-Streifen ---------- */
.kpi-panel {
    background: var(--kpi-wash);
    border-radius: var(--centra-radius-lg);
    padding: 14px 14px 16px;
}
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 14px;
}
.kpi {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    box-shadow: var(--centra-shadow);
    padding: 16px 18px;
}
.kpi.is-focus {
    border-color: var(--centra-accent);
    box-shadow: 0 0 0 1px var(--centra-accent), var(--centra-shadow);
}
.kpi--klickbar { cursor: pointer; }
.kpi--klickbar:hover { border-color: var(--centra-accent); }
.kpi-label {
    font-size: 12px; color: var(--centra-text-secondary); margin-bottom: 6px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.kpi-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11.5px; color: var(--centra-text-muted); margin-top: 3px; }
.kpi-hint { font-size: 11px; color: var(--centra-text-muted); margin: 0 0 10px; cursor: default; }
.trend { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Farbe = "gut/schlecht fuer die Produktivitaet", nicht die Pfeilrichtung (siehe TrendAnzeige). */
.trend.good { color: var(--centra-success-text); }
.trend.bad { color: var(--centra-danger-text); }

/* ---------- kleiner Umschalter (Mitarbeiter/Teams) ---------- */
.switcher {
    display: inline-flex;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}
.switcher button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--centra-text-secondary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
}
.switcher button.active {
    background: var(--centra-surface);
    color: var(--centra-accent-text);
    box-shadow: var(--centra-shadow);
}
.switcher button:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 2px; }
.switcher.small { padding: 2px; }
.switcher.small button { padding: 5px 12px; font-size: 11.5px; }

/* ---------- Kapazitaetsauslastung: Gauge + Verteilungszaehler + Rangliste ---------- */
.hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: center;
    padding: 6px 8px 16px;
}
.gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gauge-wrap svg text { font-family: var(--centra-font-sans); }
.gauge-caption { font-size: 11.5px; color: var(--centra-text-muted); text-align: center; max-width: 24ch; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hero-stat-label { font-size: 12px; color: var(--centra-text-secondary); margin-bottom: 5px; }
.hero-stat-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-stat-von { font-weight: 400; font-size: 13px; color: var(--centra-text-muted); }
.hero-stat-bar {
    margin-top: 8px; height: 6px; border-radius: 4px; background: var(--centra-surface-2); overflow: hidden;
}
.hero-stat-bar > span { display: block; height: 100%; border-radius: 4px; }

.rank-list {
    display: flex; flex-direction: column;
    border-top: 1px solid var(--centra-border);
    margin-top: 6px; padding-top: 12px;
}
/* Kartentreatment wie .plan-card: gestapelte Reihen, farbiger linker Rahmen = Status der Zeile. */
.rank-row {
    display: grid;
    grid-template-columns: 26px 1fr 110px 74px;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    margin-bottom: 8px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-left: 3px solid var(--centra-accent);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
}
.rank-row.status-ok { border-left-color: var(--centra-success-text); }
.rank-row.status-warn { border-left-color: var(--centra-warning); }
.rank-row.status-bad { border-left-color: var(--centra-danger-text); }
.rank-pos { font-size: 12px; color: var(--centra-text-muted); font-variant-numeric: tabular-nums; }
/* Layout-Runde 3 (08.09.2026, Dennis): Mitarbeiter-Namen genauso stark wie die Team-Namen -
   Parität statt der bisherigen Team-Sonderregel (die dadurch redundante
   .rank-name-group .rank-name-Regel ist ersatzlos gestrichen). */
.rank-name { font-size: 15px; font-weight: 700; }
.rank-meta { font-size: 11.5px; color: var(--centra-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.rank-pct { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rank-pct-unbekannt { color: var(--centra-text-muted); cursor: help; }
/* Layout-Korrektur 08.09.2026, Runde 2 (Dennis' Screenshot): align-items: flex-start, damit beide
   Kinder (Team-Name-Button und Mitglieder-Unterzeile) auf Inhaltsbreite schrumpfen und an der
   linken Kante stehen - der Flex-Default stretch zog den <button> auf volle Spaltenbreite, dessen
   Browser-Text-Zentrierung schob den Namen in die Zeilenmitte. Bewusst am Flex-Layout gelöst,
   nicht als weiterer text-align-Override. */
.rank-name-group { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.rank-team-count { font-size: 10.5px; color: var(--centra-text-muted); font-weight: 400; }
.rank-mehr { text-align: center; padding-top: 8px; }

.link-button {
    appearance: none; border: none; background: transparent; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--centra-accent-text); padding: 0;
}
.link-button:hover { text-decoration: underline; }

/* ---------- Verteilung & Top-Mandanten ---------- */
.dist-summary { display: flex; flex-direction: column; gap: 10px; }
.dist-headline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.dist-total-value { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; color: var(--centra-text); font-variant-numeric: tabular-nums; line-height: 1; }
.dist-total-unit { font-size: 12px; font-weight: 600; color: var(--centra-text-secondary); }
.dist-total-label { font-size: 12.5px; color: var(--centra-text-muted); }
.dist-bar {
    display: flex; gap: 3px; height: 14px; border-radius: 999px;
    background: var(--centra-surface-2); overflow: hidden;
}
/* "Rand hell": dezenter Verlauf, der zu beiden Enden aufhellt - per Element gesetzte --seg-color. */
.dist-seg {
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--seg-color) 80%, white) 0%,
        var(--seg-color) 16%, var(--seg-color) 84%,
        color-mix(in srgb, var(--seg-color) 80%, white) 100%);
}
.dist-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.dist-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.dist-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dist-chip-label { color: var(--centra-text); font-weight: 600; }
.dist-chip-value { color: var(--centra-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.dist-chip-pct { color: var(--centra-text-muted); font-variant-numeric: tabular-nums; }

.mandanten-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--centra-border); }
.mandanten-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mandanten-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--centra-text-muted); }
.mandanten-section-sub { font-size: 11.5px; color: var(--centra-text-muted); }

.bars { display: flex; flex-direction: column; gap: 2px; }
/* linker Farb-Rahmen nur bei Hover - klickbarer Navigationseintrag, keine Status-Aussage. */
.bar-row {
    display: grid;
    grid-template-columns: 34px 1fr 16px;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    border-radius: var(--centra-radius);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.bar-row:hover { background: var(--centra-surface-2); border-left-color: var(--centra-accent); }
.bar-row:hover .bar-chevron { color: var(--centra-accent-text); }
.bar-row:hover .bar-avatar { background: var(--centra-accent); color: #fff; }
.bar-row:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: -2px; }
.bar-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--centra-accent-bg); color: var(--centra-accent-text);
    font-size: 11.5px; font-weight: 700;
    transition: background .12s ease, color .12s ease;
}
.bar-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bar-top-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bar-label { font-size: 13px; font-weight: 600; color: var(--centra-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { font-size: 12.5px; font-weight: 700; color: var(--centra-text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bar-track { height: 5px; border-radius: 3px; background: var(--centra-surface-2); overflow: hidden; }
.bar-fill {
    display: block; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--seg-color) 80%, white) 0%,
        var(--seg-color) 18%, var(--seg-color) 82%,
        color-mix(in srgb, var(--seg-color) 80%, white) 100%);
}
.bar-chevron { text-align: center; color: var(--centra-text-muted); font-size: 14px; }

/* ---------- "Alle Mandanten" - sortierbare Tabelle ---------- */
.mandanten-alle { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--centra-border); }
.mandanten-alle-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mandanten-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mandanten-table th, .mandanten-table td { padding: 8px 10px; text-align: left; }
.mandanten-table th { font-weight: 600; font-size: 11px; color: var(--centra-text-secondary); border-bottom: 1px solid var(--centra-border); white-space: nowrap; }
.mandanten-table th.num, .mandanten-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mandanten-table th.sortable { cursor: pointer; user-select: none; }
.mandanten-table th.sortable:hover { color: var(--centra-accent-text); }
.mandanten-table tbody tr { border-bottom: 1px solid var(--centra-border); cursor: pointer; }
.mandanten-table tbody tr:hover { background: var(--centra-surface-2); }
.mandanten-table tbody tr:last-child { border-bottom: none; }
.sort-ind { display: inline-block; width: 10px; font-size: 9px; color: var(--centra-accent-text); }

/* ---------- zweistufige Zeitraum-Auswahl (Typ + Wert) ---------- */
.eval-period-typ-picker, .eval-period-wert-picker {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12px; color: var(--centra-text-secondary);
}
.eval-period-typ-picker select, .eval-period-wert-picker select {
    font: inherit; font-size: 13px; color: var(--centra-text);
    background: var(--centra-surface); border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius); padding: 7px 10px;
}
.eval-period-selection-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: 1fr 1fr; }
    .rank-row { grid-template-columns: 20px 1fr 90px 60px; }
}

/* ==========================================================================
   ⚑ Phase 272 - Mandanten-Cockpit (Übersicht + Einzelmandant), 1:1 nach
   docs/design/mandanten-cockpit-v1.html. Baut auf den Phase-271-Tokens
   (--viz-*, --kpi-wash) und -Bausteinen (.cockpit-card, .switcher, .bars,
   .trend) auf - hier stehen nur die NEUEN Klassen. Light-only wie Phase 271
   (der Dark-Block im Mockup ist reine Entwurfs-Vorschau).
   ========================================================================== */

/* Karteninhalt ohne Innenabstand - der KPI-Streifen läuft randlos (Mockup). */
.card-body--buendig { padding: 0; }

/* ---------- KPI-Streifen (klickbare Kacheln, Handoff 1.1) ---------- */
.kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--centra-border);
    border-bottom: 1px solid var(--centra-border);
    overflow: hidden;
}
.kpi-tile { background: var(--kpi-wash); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi-tile.clickable { cursor: pointer; transition: background .12s ease; }
.kpi-tile.clickable:hover { background: color-mix(in srgb, var(--kpi-wash) 55%, var(--centra-accent) 14%); }
.kpi-tile.clickable:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: -2px; }
.kpi-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-open-hint { color: var(--centra-text-muted); font-size: 13px; opacity: 0; transition: opacity .12s; }
.kpi-tile.clickable:hover .kpi-open-hint { opacity: 1; }
.trend.neutral { color: var(--centra-text-muted); font-weight: 600; }
.trend .delta-label { color: var(--centra-text-muted); font-weight: 500; }
@media (max-width: 860px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Verlauf (SVG-Diagramm, Handoff 1.2) ---------- */
.verlauf-bereich { padding: 18px; }
.verlauf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.verlauf-title { font-size: 12.5px; font-weight: 650; color: var(--centra-text-secondary); }
.verlauf-svg-wrap { margin-top: 4px; }
.verlauf-svg text { font-family: inherit; fill: var(--centra-text-muted); }
.verlauf-svg .v-axis-label { font-size: 9.5px; }
.verlauf-svg .v-month-label { font-size: 10.5px; fill: var(--centra-text-secondary); }
.verlauf-svg .v-value-label { font-size: 10px; font-weight: 700; fill: var(--centra-text); }
.verlauf-svg .v-gridline { stroke: var(--centra-border); stroke-width: 1; }
.verlauf-svg .v-axis { stroke: var(--centra-text-muted); stroke-width: 1; }
.verlauf-svg .v-seg-billed { fill: var(--viz-mandanten); }
.verlauf-svg .v-seg-open { fill: var(--viz-bar-4); }
.verlauf-legend { display: flex; gap: 16px; font-size: 11px; color: var(--centra-text-secondary); margin-top: 10px; }
.verlauf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
/* Aufgeklappte Monats-Aufschlüsselung unter dem Diagramm (Funktion aus dem Auftrag vom 15.08.2026). */
.verlauf-monatsdetail { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--centra-border); border-radius: var(--centra-radius); background: var(--centra-surface-2); }

/* ---------- "Alle anzeigen"-Link (Handoff 1.3) ---------- */
.show-all-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; font-weight: 650; color: var(--centra-accent-text); cursor: pointer; }
.show-all-link:hover { text-decoration: underline; }
.show-all-link:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 2px; }

/* ---------- Hinweiszeilen ---------- */
.hint-line { font-size: 11.5px; color: var(--centra-text-muted); margin-top: 10px; line-height: 1.5; }
.hint-line--inline { margin-top: 0; }

/* ---------- Umsatzstruktur-Donut (reines CSS statt Chart.js) ---------- */
.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut {
    width: 148px; height: 148px; border-radius: 50%; flex: none; position: relative;
    background: conic-gradient(var(--viz-mandanten) 0% var(--p1), var(--viz-nichtabrechenbar) var(--p1) var(--p2), var(--viz-verwaltung) var(--p2) 100%);
}
.donut::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--centra-surface); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut-center .v { font-size: 16px; font-weight: 700; }
.donut-center .l { font-size: 9.5px; color: var(--centra-text-muted); }
.legend-chips { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 180px; }
.legend-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.legend-chip-name { display: flex; align-items: center; gap: 8px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-chip-val { font-weight: 700; }
.legend-chip-pct { color: var(--centra-text-muted); font-size: 11.5px; margin-left: 4px; }

/* ---------- Rangliste "Größter offener Betrag" (eigene Klassen - .rank-row
   aus Phase 271 ist das 4-Spalten-Grid der Auslastungs-Karte) ---------- */
.offen-rank-list { display: flex; flex-direction: column; }
.offen-rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--centra-border); cursor: pointer; border-radius: 6px; }
.offen-rank-row:last-child { border-bottom: none; }
.offen-rank-row:hover { background: var(--centra-surface-2); }
.offen-rank-row:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: -2px; }
.offen-rank-pos { width: 18px; text-align: center; font-size: 11px; color: var(--centra-text-muted); flex: none; }
.offen-rank-name { flex: 1; min-width: 0; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offen-rank-val { font-weight: 700; font-size: 12.5px; flex: none; min-width: 76px; text-align: right; color: var(--centra-danger-text); font-variant-numeric: tabular-nums; }

/* ---------- Auswertung der Aufträge (Handoff 1.4) ---------- */
.order-rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--centra-border); cursor: pointer; border-radius: 6px; }
.order-rank-row:last-child { border-bottom: none; }
.order-rank-row:hover { background: var(--centra-surface-2); }
.order-rank-main { flex: 1; min-width: 0; }
.order-rank-title { display: block; font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-rank-sub { display: block; font-size: 11px; color: var(--centra-text-muted); margin-top: 1px; }
.order-rank-right { text-align: right; flex: none; }
.order-rank-val { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.order-rank-val.good { color: var(--centra-success-text); }
.order-rank-val.bad { color: var(--centra-danger-text); }
.order-rank-pct { font-size: 11px; color: var(--centra-text-muted); }
.order-rank-assignee { flex: none; width: 138px; }

/* ---------- Zugewiesen-Chip (Handoff 1.5, .plan-avatar-Look der Auftragsplanung) ---------- */
.assignee-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--centra-accent); color: #fff; font-size: 9.5px; font-weight: 700; flex: none;
}
.assignee-avatar.unassigned { background: var(--centra-surface-2); color: var(--centra-text-muted); border: 1px dashed var(--centra-border); }
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--centra-text-secondary); white-space: nowrap; }
.assignee-chip.unassigned { color: var(--centra-text-muted); font-style: italic; }
table.data-table td.assignee-cell { white-space: nowrap; }

/* ---------- Tabellen im Cockpit-/Modal-Stil (Mockup: th uppercase) ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data-table th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--centra-text-muted); font-weight: 650; padding: 6px 10px; border-bottom: 1px solid var(--centra-border);
}
table.data-table th.num, table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--centra-border); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--centra-surface-2); }
table.data-table tfoot td { font-weight: 700; background: var(--centra-surface-2); border-top: 2px solid var(--centra-border); padding: 8px 10px; }
tr.row-muted td { color: var(--centra-text-muted); font-style: italic; }

/* ---------- Abrechnungsquote-Ampel (Handoff 1.1, Schwellen siehe AbrechnungsquoteAmpel) ---------- */
.quote-val { font-weight: 700; }
.quote-val.q-bad { color: var(--centra-danger-text); }
.quote-val.q-warn { color: var(--centra-warning-text); }
.quote-val.q-good { color: var(--centra-success-text); }
.quote-bar-track { height: 5px; width: 64px; border-radius: 3px; background: var(--centra-surface-2); overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.quote-bar-fill { display: block; height: 100%; border-radius: 3px; }
.quote-bar-fill.q-bad { background: var(--centra-danger-text); }
.quote-bar-fill.q-warn { background: var(--centra-warning-text); }
.quote-bar-fill.q-good { background: var(--centra-success-text); }

/* ---------- Detail-Modals (Handoff 1.1/1.3/1.4) ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(12, 16, 26, .5); display: flex;
    align-items: flex-start; justify-content: center; padding: 56px 20px; z-index: 1400; overflow-y: auto;
}
.modal {
    background: var(--centra-surface); border: 1px solid var(--centra-border); border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow-lg, var(--centra-shadow)); width: 100%; max-width: 760px; max-height: calc(100vh - 112px);
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--centra-border); background: var(--kpi-wash);
}
.modal-title { font-size: 15px; font-weight: 700; }
.modal-sub { font-size: 11.5px; color: var(--centra-text-secondary); margin-top: 3px; }
.modal-close {
    border: none; background: rgba(255,255,255,.6); width: 28px; height: 28px; border-radius: 8px;
    cursor: pointer; font-size: 14px; line-height: 1; color: var(--centra-text-secondary); flex: none;
}
.modal-close:hover { color: var(--centra-text); }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-switcher-row { display: flex; justify-content: flex-end; padding: 12px 20px 0; }

/* ---------- Aufklapp-Bausteine (Kapazität kompakt / Mandanten ohne Buchung) ---------- */
.expand-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 10px 2px 4px; }
.expand-summary:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 2px; }
.expand-summary-text { font-size: 12.5px; color: var(--centra-text-secondary); }
.expand-arrow { color: var(--centra-text-muted); font-size: 11px; transition: transform .15s; }
.expand-summary.open .expand-arrow { transform: rotate(90deg); }
.expand-inhalt { margin-top: 12px; }

/* ---------- Kapazitätsauslastung kompakt ---------- */
.capacity-summary { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.capacity-avg { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.capacity-avg-label { font-size: 11px; color: var(--centra-text-muted); }
.capacity-dist { display: flex; gap: 14px; font-size: 11.5px; color: var(--centra-text-secondary); flex-wrap: wrap; }
.capacity-dist b { color: var(--centra-text); }

/* ---------- Phase 272: Einzelmandant (Handoff 2.1-2.3) ---------- */
.client-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.client-head-left { display: flex; align-items: center; gap: 12px; }
.client-avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--centra-accent); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.client-name { font-size: 18px; font-weight: 700; }
.client-number { font-size: 12px; color: var(--centra-text-muted); }
.back-link { font-size: 12.5px; color: var(--centra-accent-text); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.back-link:hover { text-decoration: underline; }
.back-link:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 2px; }

.mandant-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .mandant-grid3 { grid-template-columns: 1fr; } }

/* Einspaltige Mini-KPI-Stapel in den drei Kacheln (Handoff 2.1: alle drei gleich aufgebaut). */
.mini-kpi-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--centra-border); }
.mini-kpi { background: var(--centra-surface); padding: 12px 14px; }
.mini-kpi-label { font-size: 10.5px; color: var(--centra-text-muted); font-weight: 600; margin-bottom: 4px; }
.mini-kpi-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; margin-top: 3px; }
.mini-trend.good { color: var(--centra-success-text); }
.mini-trend.bad { color: var(--centra-danger-text); }
.mini-trend.neutral { color: var(--centra-text-muted); font-weight: 600; }
.mini-trend .delta-label { color: var(--centra-text-muted); font-weight: 500; }

/* Gruppierte Aufträge-Tabelle (Handoff 2.3). */
tr.order-group-header td { background: var(--centra-surface-2); border-bottom: 1px solid var(--centra-border); padding: 8px 10px; }
.group-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.group-title { font-weight: 700; font-size: 12.5px; }
.group-count { font-size: 11px; color: var(--centra-text-muted); font-weight: 600; white-space: nowrap; }
.eval-badge--current { background: var(--centra-accent-bg); color: var(--centra-accent-text); margin-left: 6px; }
.sort-ind { opacity: .5; font-size: 9px; }

/* ---------- Nachbesserung Phase 272: Anruf-Funktion (Telefonhörer) ---------- */
.anruf-hoerer-btn {
    appearance: none; border: 1px solid var(--centra-border); background: var(--centra-surface);
    border-radius: 8px; padding: 3px 9px; font-size: 14px; line-height: 1.3; cursor: pointer;
    color: var(--centra-accent-text); flex: 0 0 auto;
}
.anruf-hoerer-btn:hover { background: var(--centra-accent-bg); border-color: var(--centra-accent); }
.anruf-hoerer-btn:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 2px; }
/* Kompakte Variante für Karten-Badges (neben ☑/📎/🕐 - gleiche Optik wie .aufg-stoppuhr-badge). */
.anruf-hoerer-btn--badge { border: none; background: none; padding: 0 2px; font-size: 13px; }
.anruf-hoerer-btn--badge:hover { background: none; }

.modal--klein { max-width: 380px; }
/* 09.09.2026: Breite Variante für Tabellen-Modals mit vielen Zahlenspalten („Aufträge — alle" hat
   sieben). Bewusst als eigene Klasse statt einer Änderung an `.modal` - die übrigen Modals sollen
   schmal bleiben. */
.modal--breit { max-width: 1080px; }
/* Sicherheitsnetz gegen den Fehler dahinter: `.modal` hat `overflow: hidden`, `.modal-body` nur
   `overflow-y` - was zu breit war, verschwand kommentarlos. Tabellen in diesem Wrapper rollen
   stattdessen waagerecht. */
.modal-tabelle-scroll { overflow-x: auto; }
.anruf-auswahl-liste { display: flex; flex-direction: column; gap: 6px; }
.anruf-auswahl-zeile {
    appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    border: 1px solid var(--centra-border); background: var(--centra-surface); border-radius: 8px;
    padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.anruf-auswahl-zeile:hover { background: var(--centra-accent-bg); border-color: var(--centra-accent); }
.anruf-auswahl-icon { flex: 0 0 auto; }

/* Kleines Hörer-Symbol an der Stoppuhr-Kachel („damit ich weiß, dass es eine Anrufstoppuhr ist").
   Sitzt INNERHALB von .stopwatch-time (siehe StopwatchPanel.razor) - das Bedienzeilen-Grid ist auf
   exakt fünf Kinder ausgelegt, ein eigenständiges sechstes Element zerschob alle Spalten. */
.stopwatch-anruf-icon { font-size: 13px; cursor: default; margin-right: 4px; }
/* Rückruf-Pflichtfeld im Aufgaben-Dialog: Nummernfeld + Hörer nebeneinander. */
.aufg-rueckruf-feld { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.aufg-rueckruf-feld > :first-child { flex: 1; }
/* Rückruf-Kennzeichen in der Themen-Verwaltung (Einstellungen, Reiter Aufgaben). */
.aufg-rueckruf-schalter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--centra-text-secondary); cursor: pointer; white-space: nowrap; }

/* Nachbesserung Phase 272 (Teil 1+2): Auftrag-Chip mit Info-Symbol + Info-Fenster. */
.aufg-auftrag-info-btn {
    appearance: none; border: none; background: none; cursor: pointer; padding: 0 2px;
    font-size: 13px; color: var(--centra-accent-text); line-height: 1;
}
.aufg-auftrag-info-btn:hover { color: var(--centra-accent); }
.aufg-planung-info-karte { border: 1px solid var(--centra-border); border-radius: var(--centra-radius); padding: 12px 14px; margin-bottom: 10px; }
.aufg-planung-info-karte:last-child { margin-bottom: 0; }
.aufg-planung-info-titel { font-weight: 700; font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aufg-planung-info-zeilen { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.aufg-planung-info-label { display: inline-block; min-width: 110px; color: var(--centra-text-muted); font-weight: 600; }
.aufg-planung-info-perioden { color: var(--centra-text-secondary); }

/* ==========================================================================
   ⚑ Phase 273 - Seite "Erweiterte Auswertungen" je Mitarbeiter, 1:1 nach
   docs/design/erweiterte-auswertungen-mitarbeiter-v1.html (ea-Präfix, damit
   nichts mit den Cockpit-Klassen kollidiert). Light-only wie Phase 271/272.
   ========================================================================== */
/* 08.09.2026: `.ea-inhalt` ist der Wrapper der herausgelösten Bausteine-Komponente - inline im
   Mitarbeiter-Reiter gibt es die Seite `.ea-seite` nicht, die Farbvariablen müssen aber genauso
   gelten. Eine Regel für beide Orte statt zweier Listen, die auseinanderlaufen können. */
.ea-seite, .ea-inhalt {
    /* Die dataviz-Farbkanäle des Mockups (validierte Referenzpalette). */
    --ea-s1: #2a78d6; --ea-s2: #eb6834; --ea-s3: #1baf7a; --ea-s4: #eda100;
    --ea-s5: #e87ba4; --ea-s6: #008300; --ea-s7: #4a3aa7;
    --ea-seq-100: #cde2fb; --ea-seq-400: #3987e5; --ea-seq-450: #2a78d6;
    --ea-seq-550: #1c5cab; --ea-seq-650: #104281; --ea-seq-700: #0d366b;
}
.ea-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ea-kopf h1 { margin-bottom: 2px; }
.ea-wer { font-size: 13px; color: var(--centra-text-secondary); }
/* Nachbesserung Phase 273 (Dennis' Screenshot): flex-end statt center - der Zeitraum-Filter ist
   zweizeilig (Label über dem Dropdown), center setzte den einzeiligen Zurück-Knopf auf halbe Höhe
   dazwischen. flex-end richtet die Unterkanten aus, wie am äußeren .ea-kopf auch. */
.ea-kopf-rechts { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

/* Einstiegs-Button im Buchungslisten-Kopf (btn-ext des Mockups). */
.card-header-right { margin-left: auto; }
.ea-btn-ext {
    display: inline-flex; align-items: center; gap: 7px; background: var(--centra-surface);
    border: 1px solid var(--centra-accent); color: var(--centra-accent-text); font: inherit;
    font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--centra-radius); cursor: pointer;
}
.ea-btn-ext:hover { background: var(--centra-accent-bg); }

/* KPI-Reihe */
.ea-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.ea-kpi-tile {
    background: var(--centra-surface); border: 1px solid var(--centra-border); border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow); padding: 15px 17px; cursor: default; transition: box-shadow .1s, border-color .1s;
}
.ea-kpi-tile.is-hover { border-color: var(--centra-accent); box-shadow: 0 2px 8px rgba(15,108,189,.16); }
.ea-kpi-label { font-size: 11.5px; color: var(--centra-text-secondary); margin-bottom: 7px; }
.ea-kpi-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ea-kpi-value small { font-size: 12.5px; font-weight: 400; color: var(--centra-text-muted); }

/* Dashboard-Raster */
.ea-dash-row { display: grid; gap: 16px; margin-bottom: 16px; align-items: stretch; grid-template-columns: 1fr; }
.ea-dash-hero { grid-template-columns: minmax(280px, 0.85fr) 1.15fr; }
.ea-dash-secondary { grid-template-columns: minmax(230px, 0.75fr) 1.25fr; }
@media (max-width: 900px) { .ea-dash-hero, .ea-dash-secondary { grid-template-columns: 1fr; } .ea-kpi-row { grid-template-columns: 1fr 1fr; } }

/* Donut */
.ea-donut-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ea-donut-svg { flex: 0 0 auto; }
.ea-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 180px; }
.ea-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 5px; margin: 0 -6px; }
.ea-legend li.is-hover { background: var(--centra-surface-2); }
.ea-sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.ea-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--centra-text); }
.ea-val { font-variant-numeric: tabular-nums; color: var(--centra-text-secondary); flex: 0 0 auto; }
.ea-donut-center-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--centra-text); }
.ea-donut-center-lbl { font-size: 9.5px; fill: var(--centra-text-muted); }
.ea-arc-seg { cursor: pointer; stroke: var(--centra-surface); stroke-width: 0; transition: stroke-width .08s; }
.ea-arc-seg.is-hover { stroke-width: 2.5; }
/* Nachbesserung Phase 273: unsichtbare, breitere Trefferfläche je Segment (trägt Tooltip + Klick) */
.ea-arc-hit { cursor: pointer; }

/* Verlauf */
.ea-trend-legend { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.ea-trend-legend span { font-size: 11.5px; display: flex; align-items: center; gap: 6px; color: var(--centra-text-secondary); }
.ea-trend-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ea-trend-svg { display: block; }
.ea-trend-day-hit.is-hover { fill: rgba(15,108,189,.06) !important; }

/* Messgerät */
.ea-meter-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: center; }
.ea-meter-caption { font-size: 12px; color: var(--centra-text-secondary); text-align: center; max-width: 26ch; }
.ea-meter-caption b { color: var(--centra-text); }
.ea-meter-wrap.is-hover svg { filter: drop-shadow(0 1px 4px rgba(15,108,189,.25)); }

/* Heatmap */
.ea-heat-wrap { overflow-x: auto; }
.ea-heat-cell { cursor: pointer; }
/* Zellen ohne Buchungen öffnen kein Detail-Fenster - Cursor signalisiert das (muss NACH der Grundregel stehen) */
.ea-heat-cell--leer { cursor: default; }
.ea-heat-cell.is-hover { stroke: var(--centra-text) !important; stroke-width: 2 !important; stroke-dasharray: none !important; }
.ea-heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 10.5px; color: var(--centra-text-muted); }
.ea-heat-scale-bar { flex: 1; max-width: 220px; height: 8px; border-radius: 4px; }
.ea-heat-empty-key { display: inline-flex; align-items: center; gap: 5px; margin-left: 16px; }
.ea-heat-empty-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--centra-surface-2); border: 1px dashed var(--centra-border); display: inline-block; }

/* Rangliste (ea-Präfix - .rank-row aus Phase 271 ist das Grid der Auslastungs-Karte) */
.ea-rank-list { display: flex; flex-direction: column; gap: 8px; }
.ea-rank-row {
    display: grid; grid-template-columns: 24px 1fr 100px; align-items: center; gap: 12px;
    padding: 10px 13px; background: var(--centra-surface); border: 1px solid var(--centra-border);
    border-left: 3px solid var(--centra-accent); border-radius: var(--centra-radius); cursor: pointer;
    transition: background .08s, border-color .08s;
}
.ea-rank-row.is-hover { background: var(--centra-surface-2); }
.ea-rank-pos { font-size: 11.5px; color: var(--centra-text-muted); font-variant-numeric: tabular-nums; }
.ea-rank-main { min-width: 0; }
.ea-rank-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-rank-sub { font-size: 11px; color: var(--centra-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-rank-bar-track { height: 5px; background: var(--centra-surface-2); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.ea-rank-bar-fill { display: block; height: 100%; border-radius: 3px; }
.ea-rank-val { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Tooltip (vom JS erzeugt, ein Element je Seite) */
#viz-tooltip {
    position: fixed; pointer-events: none; z-index: 2000; background: var(--centra-text); color: var(--centra-surface);
    font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22); max-width: 260px; opacity: 0; transform: translate(-9999px,-9999px); transition: opacity .08s;
}
#viz-tooltip b { display: block; font-size: 12px; margin-bottom: 2px; }
#viz-tooltip .tt-row { display: flex; justify-content: space-between; gap: 10px; color: #d9d8d5; }
#viz-tooltip .tt-row span:last-child { font-variant-numeric: tabular-nums; color: #fff; }

/* =====================================================================================
   Mandantenübersicht - Zuständigkeiten-Karte (Auftrag 04.09.2026)
   Global statt in der scoped CSS der Seite: Die Klasse landet über den ExtraKlasse-
   Parameter auf dem Karten-Markup von MandantDetailBlock, das kein Scope-Attribut der
   Seite trägt - ein scoped Selektor würde dort schlicht nicht greifen.
   Großzügigere Taktung als die fünf anderen Blöcke (Entwurf .sec--zust): dichteres
   Formular mit zwei Dropdowns braucht mehr Luft und breitere Kacheln. */
.mu-zust-karte .card-body { padding: 24px 28px 28px; }
.mu-zust-karte .eval-summary-row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}
.mu-zust-karte .eval-summary-card { padding: 20px 22px; }
.mu-zust-karte .eval-summary-value { font-size: 15px; }

/* ----- Mitarbeiter-Auslastungs-Detailfenster (07.09.2026, MitarbeiterAuslastungDialog) ----- */
.ma-dialog { display: flex; flex-direction: column; gap: 18px; }
.ma-erklaerung { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--centra-text-muted); }
.ma-abschnitt { border: 1px solid var(--centra-border); border-radius: 10px; padding: 14px 16px; }
.ma-abschnitt-titel { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.ma-quelle { font-weight: 400; font-size: 12px; color: var(--centra-text-muted); }
.ma-wert-zeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ma-prozent { font-size: 26px; font-weight: 700; }
.ma-stunden { font-size: 13px; color: var(--centra-text-muted); }
.ma-balken { height: 10px; border-radius: 5px; background: var(--centra-surface-2); overflow: hidden; }
.ma-balken > span { display: block; height: 100%; border-radius: 5px; }
.ma-hinweis { font-size: 12.5px; color: var(--centra-text-muted); margin-top: 6px; }

/* Klickbarer Board-Spaltenkopf (07.09.2026): Der Name öffnet das Detailfenster - Optik des
   bisherigen Titels, nur mit Zeiger und Hover-Unterstreichung als Klick-Signal. */
.plan-column-title-btn { background: none; border: none; padding: 0; font: inherit; color: inherit;
    cursor: pointer; text-align: left; }
.plan-column-title-btn:hover { text-decoration: underline; }
/* Klickbarer Ranglisten-Name (07.09.2026): gleiche Optik wie der Text, Zeiger + Unterstreichung. */
/* Layout-Runde 3 (08.09.2026): justify-self: start lässt den Namens-Button als GRID-Kind von
   .rank-row auf Inhaltsbreite schrumpfen und links andocken (Mitarbeiter-Rangliste und
   Mitglieder-Zeilen im Team-Dialog) - das Grid-Gegenstück zum align-items-Fix der Team-Zeilen
   (dort, im Flex-Container .rank-name-group, ist justify-self wirkungslos; kein Konflikt). */
.rank-name-btn { background: none; border: none; padding: 0; font: inherit; color: inherit;
    cursor: pointer; text-align: left; justify-self: start; }
.rank-name-btn:hover { text-decoration: underline; }

/* ----- Ladeanzeige der Auswertungen-Seite (08.09.2026) -----
   Dennis' Fund: Ein Zeitraum-Wechsel dauert lange, sichtbar passierte bisher nichts (Felder wurden
   nur stumm gesperrt). Der Balken hängt in allen drei Reitern unter der Toolbar und an dem EINEN
   geteilten Ladevorgang der Seite; der Platzhalter darunter nur an der Kanzlei-Übersicht. */
.eval-loadbar {
    height: 3px;
    /* Nachbesserung 08.09.2026 (Dennis' Screenshot): Der Balken klebte direkt unter der
       Toolbar-Zeile - 10px Luft, im Abstandsrhythmus der Seite. */
    margin-top: 10px;
    background: transparent;
    overflow: hidden;
    position: relative;
}

.eval-loadbar[data-active="true"] {
    background: var(--centra-accent-bg);
}

.eval-loadbar::after {
    content: "";
    position: absolute;
    top: 0; left: 0; height: 100%; width: 30%;
    background: var(--centra-accent);
    border-radius: 0 4px 4px 0;
    transform: translateX(-100%);
}

.eval-loadbar[data-active="true"]::after {
    animation: eval-loadbar-sweep 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes eval-loadbar-sweep {
    0%   { transform: translateX(-100%); width: 30%; }
    50%  { width: 55%; }
    100% { transform: translateX(250%); width: 30%; }
}

/* Platzhalter-Block der Kanzlei-Übersicht: vier Kacheln + drei Zeilen, bewusst generisch. */
.eval-skeleton { gap: 18px; }
.eval-skeleton-text { font-size: 13px; color: var(--centra-text-muted); }
.eval-skeleton-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}
.eval-skeleton-tile { height: 104px; }
.eval-skeleton-row { height: 72px; }

.eval-skeleton-tile, .eval-skeleton-row, .eval-skeleton-line {
    background: linear-gradient(100deg, var(--centra-surface-2) 30%, #ffffff 45%, var(--centra-surface-2) 60%);
    background-size: 250% 100%;
    border-radius: var(--centra-radius);
    animation: eval-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes eval-skeleton-shimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Bewegungsempfindlichkeit: gleiche Aussage, ohne Animation (Centras üblicher Sorgfaltsstandard). */
/* Nachbesserung 08.09.2026: Beim Ladebalken IST die Bewegung das ganze Signal - in Mitarbeiter-
   und Intern-Reiter gibt es gar keinen Platzhalter, dort ist er die einzige Rückmeldung „läuft
   noch". Der bisherige Fallback (statischer Balken über die volle Breite) sah für Dennis exakt wie
   „die Seite hängt" aus. Deshalb hier ein ruhiger Opacity-Puls statt Stillstand: kein Verschieben,
   kein Zoomen - für Bewegungsempfindlichkeit unproblematisch, aber sichtbar lebendig.
   Der Skeleton-Schimmer bleibt dagegen bewusst eingefroren: dort ist die Bewegung reine Deko, der
   Text „Die Kanzlei-Übersicht wird geladen…" samt aria-live sagt ohnehin, was passiert. */
@media (prefers-reduced-motion: reduce) {
    .eval-loadbar[data-active="true"]::after {
        animation: eval-loadbar-pulse 1.6s ease-in-out infinite;
        width: 100%;
        transform: none;
    }

    .eval-skeleton-tile, .eval-skeleton-row, .eval-skeleton-line {
        animation: none;
        background: var(--centra-surface-2);
    }
}

@keyframes eval-loadbar-pulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: .8; }
}

/* ----- Pauschalen-Detaildialog (08.09.2026, Dennis' Screenshot-Rückmeldungen) -----
   B1: Die kompakte .plan-budget-bar (5px) ist bewusst schmal, weil sie sonst in den engen
   Kartenzeilen des Auftragsplanungs-Boards sitzt. Im Dialog ist Platz - dort war der Balken kaum zu
   erkennen. Deshalb NUR innerhalb der Dialog-Kacheln kräftiger, die globale Regel bleibt unberührt
   (AuftragsKarte/MeineAuftraege behalten die kompakte Fassung). */
.eval-summary-card .plan-budget-bar {
    height: 12px;
    border-radius: 6px;
}

.eval-summary-card .plan-budget-pct {
    font-size: 13px;
}

/* B3: Beträge rechtsbündig mit Ziffern gleicher Breite - dieselbe „num"-Konvention wie
   .mandanten-table/.data-table, für die Dialogtabelle bislang nicht definiert. */
.eval-entries-table th.num, .eval-entries-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* B2: Die Badge-Varianten tragen für die Haupttabelle ein margin-left (dort stehen sie NACH einem
   Betrag). In der Dialogtabelle steht der Badge allein in der Zelle - der Einzug muss weg. */
.eval-entries-table .eval-badge {
    margin-left: 0;
}

/* ----- Umsatz-Kacheln als Tabellenfilter (08.09.2026, Dennis) -----
   „Abgerechnet"/„Noch offen" sind jetzt <button>-Kacheln, die die Aufträge-Tabelle darunter
   filtern. Optik bleibt exakt die der übrigen .mini-kpi-Kacheln - der Button bringt sonst
   Browser-Vorgaben (eigene Schrift, Rahmen, zentrierter Text) mit. */
button.mini-kpi {
    font: inherit;
    color: inherit;
    text-align: left;
    border: none;
    width: 100%;
    display: block;
}

.mini-kpi--clickable {
    cursor: pointer;
    /* Der farbige Rahmen im Aktiv-Zustand darf die Kachel nicht springen lassen. */
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .12s ease-in-out, background-color .12s ease-in-out;
}

.mini-kpi--clickable:hover {
    background: var(--centra-surface-2);
}

.mini-kpi--active {
    background: var(--centra-accent-bg);
    box-shadow: inset 0 0 0 1px var(--centra-accent);
}

.mini-kpi--active .mini-kpi-label,
.mini-kpi--active .mini-kpi-value {
    color: var(--centra-accent-text);
}

/* Zweitzahl unter einer Mini-KPI-Kachel (09.09.2026, „Kosten im Zeitraum": davon noch offen) -
   dieselbe Optik wie .kpi-sub der großen Kacheln, nur eine Spur kleiner wie im Mini-Raster üblich. */
.mini-kpi-sub { font-size: 10.5px; color: var(--centra-text-muted); margin-top: 3px; }

/* Zwei-Panel-Verlauf (09.09.2026): oben abgerechneter Umsatz, unten offene Kosten - eigene Skala je
   Panel, identische Monatsspalten. Die Balkenfarbe der Kosten ist dieselbe wie die des früheren
   Offen-Segments, damit die Zuordnung zur bisherigen Legende erhalten bleibt. */
.verlauf-panel + .verlauf-panel { margin-top: 6px; }
.verlauf-panel-titel { font-size: 11.5px; font-weight: 600; color: var(--centra-text-secondary); margin-bottom: 2px; }
.verlauf-svg .v-seg-open-bar { fill: var(--viz-bar-4); }

/* --- Auftragsoptimierung (10.09.2026) ---------------------------------------------------------

   Vorlage: docs/design/auftragsoptimierung-mockup-v1.html. ⚑ Die Farben der Vorlage sind BEWUSST
   nicht übernommen - sie war ein Entwurf in einer eigenen Teilfarbe. Hier gelten durchgehend die
   Centra-Variablen (--centra-accent, --centra-success-*, --centra-warning-*, --centra-danger-*),
   damit der Abschnitt zur übrigen Anwendung passt und einem späteren Farbwechsel der Kanzlei folgt,
   statt ihn zu überschreiben.

   Der Auftragsart-Filter bringt sein Aussehen aus dem Auftragsplanung-Board mit
   (.plan-topics/.plan-topic, weiter oben in dieser Datei) - ein zweites Filter-Aussehen wäre etwas,
   das irgendwann vom ersten abweicht. */

.ao {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ao-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ao-kopf h2 {
    margin: 0;
    font-size: 18px;
}

.ao-sub {
    color: var(--centra-text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

/* ----- Stellschrauben-Panel ----- */

.ao-panel {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
}

.ao-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.ao-panel-kopf::-webkit-details-marker { display: none; }

.ao-panel-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ao-panel-titel {
    display: block;
    font-weight: 600;
}

.ao-panel-sub {
    display: block;
    color: var(--centra-text-muted);
    font-size: 12px;
}

/* „Weicht vom Kanzlei-Standard ab" - überall dieselbe Marke, damit man sie einmal lernt. */
.ao-abweichend {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--centra-warning-bg);
    color: var(--centra-warning-text);
    font-size: 11px;
    font-weight: 600;
}

.ao-panel-inhalt {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ao-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--centra-accent-bg);
    color: var(--centra-text-secondary);
    font-size: 12.5px;
}

.ao-schwellen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.ao-schwelle-titel { font-weight: 600; font-size: 13.5px; }

.ao-schwelle-desc {
    color: var(--centra-text-muted);
    font-size: 12px;
    margin: 2px 0 6px;
    min-height: 32px;
}

.ao-schwelle-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ao-schwelle-zeile .mud-slider { flex: 1 1 auto; }

.ao-schwelle-wert {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
    min-width: 62px;
    text-align: right;
}

.ao-schwelle-standard {
    color: var(--centra-text-muted);
    font-size: 11.5px;
    margin-top: 4px;
}

.ao-schwelle-standardwert { font-variant-numeric: tabular-nums; }

.ao-panel-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--centra-border);
    padding-top: 12px;
}

.ao-panel-fusstext {
    color: var(--centra-text-muted);
    font-size: 12px;
    flex: 1 1 320px;
}

.ao-panel-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Statuszeile ----- */

/* ⚑ 13.09.2026 (U01/U02) - die Ist-Basis über der Kennzahlenzeile.

   Rechtsbündig und leise: Sie ist Fußnote zu den Zahlen darunter, keine eigene Kennzahl. Im
   Mockup sitzt sie in der Filterleiste; hier steht sie unmittelbar über den Zahlen, für die sie
   gilt - der Optimierungsbereich trägt bewusst keinen eigenen Zeitraum-Filter, an dem sie hängen
   könnte (Begründung im Markup). */
.ao-istbasis {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--centra-text-muted);
}

.ao-istbasis-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    font-weight: 700;
}

.ao-istbasis-wert { color: var(--centra-text); font-weight: 600; }

.ao-istbasis-bis { color: var(--centra-text); }

/* ⚑ 13.09.2026 (Teil A) - die Auswahl des Planungszeitraums.

   Dieselbe Form wie die Zeitraum-Auswahl der übrigen Auswertungen (Beschriftung über dem Feld,
   schlichtes <select>), damit sie nicht wie ein Fremdkörper wirkt. Die Lage-Angabe daneben ist
   leise gesetzt: Sie erklärt, sie warnt nicht - ein vergangener oder künftiger Monat ist eine
   normale Wahl, kein Fehler. */
.ao-zeitraum {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-bottom: 12px;
}

.ao-zeitraum-feld {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--centra-text-muted);
}

.ao-zeitraum-feld select {
    font: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--centra-text);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 6px;
    padding: 5px 8px;
    min-width: 130px;
}

.ao-zeitraum-lage {
    font-size: 12px;
    color: var(--centra-text-muted);
    padding-bottom: 6px;
}

/* ⚑ 13.09.2026 - Ist- und Plan-Auslastung im Zeitraumkopf, nicht mehr als Kachel.

   Nebeneinander und jede mit ihrem Zeitraum beschriftet: Sie messen Verschiedenes („dieser Monat
   bis heute" gegen „ganzes Jahr") und lagen schon immer auseinander - vermischt lesen sie sich wie
   ein Widerspruch zur Auftragsplanung. Leiser gesetzt als die Kacheln darunter, weil sie die
   Ausgangslage beschreiben und nicht das Ergebnis. */
.ao-kopfzahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 10px;
}

.ao-kopfzahl {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ao-kopfzahl-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--centra-text-muted);
}

.ao-kopfzahl-wert {
    font-size: 20px;
    font-weight: 700;
    color: var(--centra-text);
}

.ao-kopfzahl-wert.warn { color: var(--centra-warn, #c98a00); }

.ao-kopfzahl-sub {
    font-size: 12px;
    color: var(--centra-text-muted);
}

/* Der kumulierte Vorbehalt steht jetzt UNTER der Kachelreihe statt in einer Kachel - er gehört
   nicht zu einer einzelnen Kennzahl, sondern zu allen. */
.ao-vorbehalt {
    margin: -10px 0 18px;
}

.ao-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--centra-border);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    overflow: hidden;
}

.ao-stat { background: var(--centra-surface); padding: 14px 16px; }

.ao-stat-label { color: var(--centra-text-muted); font-size: 12px; }

.ao-stat-wert {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 2px 0;
}

.ao-stat-wert.warn { color: var(--centra-warning-text); }

.ao-stat-einheit { font-size: 12px; font-weight: 500; color: var(--centra-text-muted); }

.ao-stat-sub { color: var(--centra-text-muted); font-size: 12px; }

/* ⚑ 13.09.2026 (Prüfbericht F04) - der Vorbehalt unter der Summenzeile: Mehrere Vorschläge an
   DIESELBE Person sind nicht zwangsläufig gleichzeitig realisierbar.

   Bewusst zurückhaltend und NICHT in Warnrot: Die Summe ist nicht falsch, sie ist nur unter einer
   Annahme gerechnet, die hier benannt wird. Ein rotes Feld über einer korrekten Zahl würde den
   Blick von der Zahl wegziehen und den Eindruck erwecken, etwas sei kaputt. Deshalb dieselbe
   Schriftgröße wie .ao-stat-sub, nur mit Rand und etwas mehr Kontrast. */
/* ⚑ 13.09.2026 (dritter Nachtrag) - die ungeprüfte Alternative unter einer Kachel.

   Deutlich leiser als der Kachelwert darüber und mit eigener Beschriftung: Sie darf nie wie eine
   zweite bestätigte Kennzahl aussehen. Gestrichelte Kante statt durchgezogener - dasselbe Mittel
   wie bei der abgesetzten Obergrenze im Reglerblock: „gehört dazu, gilt aber anders". */
.ao-stat-ungeprueft {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--centra-border);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--centra-text-muted);
    font-style: italic;
}

.ao-stat-warnung {
    margin-top: 6px;
    padding: 6px 8px;
    border-left: 3px solid var(--centra-warn, #c98a00);
    background: rgba(201, 138, 0, 0.06);
    border-radius: 4px;
    color: var(--centra-text);
    font-size: 12px;
    line-height: 1.45;
}

/* ⚑ 13.09.2026 - Identitäts-Chips und kompakte Zeile der Vorschlagskarte.

   `auto-fit` mit `minmax`: Auf schmalen Ansichten (Sidebar, kleines Fenster) bricht die Zeile in
   mehrere um, statt die Karte zu sprengen - genau die Robustheit, die der Auftrag verlangt. Lange
   Namen werden gekürzt und tragen ihren vollen Text im Titel. */
.ao-ident {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ao-chip {
    font-size: 11px;
    font-family: var(--centra-font-mono, ui-monospace, monospace);
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 4px;
    padding: 1px 7px;
    white-space: nowrap;
}

.ao-chip-offen {
    background: var(--centra-accent-bg);
    border-color: var(--centra-accent);
    color: var(--centra-accent-text);
}

.ao-chip-zu {
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
}

.ao-kompakt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px 18px;
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid var(--centra-border);
    border-bottom: 1px solid var(--centra-border);
}

.ao-kompakt-feld {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* Der Prüfstatus ist der längste Text und bekommt die volle Breite, sobald das Raster sie hergibt. */
.ao-kompakt-breit { grid-column: 1 / -1; }

/* ⚑ 13.09.2026 - der bewusste Haken vor der Übernahme eines Kandidaten mit ungeprüfter Kapazität.

   Über die volle Breite und mit Rand: Er soll ein eigener Schritt sein, kein Beiwerk neben den
   Knöpfen. Derselbe zurückhaltende Ton wie die übrigen Hinweise dieser Ansicht - die Übernahme ist
   erlaubt, nur nicht nachgewiesen. */
.ao-ungeprueft-haken {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-basis: 100%;
    margin: 4px 0 2px;
    padding: 8px 10px;
    border: 1px solid var(--centra-border);
    border-left: 3px solid var(--centra-warn, #c98a00);
    border-radius: 6px;
    background: rgba(201, 138, 0, 0.05);
    font-size: 12.5px;
    line-height: 1.45;
    cursor: pointer;
}

.ao-ungeprueft-haken input { margin-top: 2px; flex: 0 0 auto; }

/* ⚑ 13.09.2026 - Kennzeichen für eine aus Euro umgerechnete Stundenzahl.

   Klein und in der gedämpften Textfarbe: Der Wert ist brauchbar, nur nicht eingetragen. Ein
   Warnton wäre hier zu laut - es ist eine Herkunftsangabe, kein Problem. */
.ao-schaetzung {
    margin-left: 6px;
    font-size: 11px;
    color: var(--centra-text-muted);
    white-space: nowrap;
    cursor: help;
}

.ao-kompakt-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--centra-text-muted);
}

.ao-kompakt-wert {
    font-size: 13px;
    color: var(--centra-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Prüfstatus darf umbrechen statt zu kürzen - er ist ein Satz, keine Kennzahl. */
.ao-kompakt-breit .ao-kompakt-wert {
    white-space: normal;
    overflow: visible;
}

/* ⚑ 13.09.2026 (U03/U04) - die Serien-Klammer.

   Nur eine Überschrift plus etwas Luft darunter: Die Serie soll die Zusammengehörigkeit zeigen,
   ohne eine zweite Rahmenebene um die ohnehin gerahmten Karten zu legen - sonst sähe die Liste
   verschachtelt aus, wo sie nur gruppiert ist. */
.ao-serie {
    margin-bottom: 18px;
}

.ao-serie-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px 2px;
}

.ao-serie-titel {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--centra-text);
}

.ao-serie-anzahl {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 999px;
    padding: 1px 8px;
}

/* Der kumulierte Hinweis auf der Karte - derselbe zurückhaltende Ton wie .ao-stat-warnung unter
   der Summenzeile (bewusst kein Warnrot: die Zahl der Karte ist nicht falsch, sie gilt nur nicht
   zusammen mit den Nachbarkarten). Etwas kräftiger als dort, weil er hier zwischen zwei Zahlen
   steht und sonst überlesen würde. */
.ao-kumuliert-hinweis {
    margin: 10px 0 4px;
    padding: 9px 11px;
    border: 1px solid var(--centra-warn, #c98a00);
    border-left-width: 3px;
    background: rgba(201, 138, 0, 0.07);
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--centra-text);
}

.ao-kumuliert-marke {
    font-weight: 700;
    margin-right: 4px;
}

.ao-kumuliert-hinweis b { color: var(--centra-warn, #c98a00); }

/* ----- Vorschlagskarte ----- */

/* ⚑ 11.09.2026 (Rückmeldung Dennis zu Phase 141): Blau ist jetzt die Grundfarbe JEDER
   Vorschlagskarte, nicht mehr das Erkennungsmerkmal der obersten. Die Rangfolge bleibt sichtbar,
   trägt sich seither aber über Rand, Schatten und Stern-Tag (.ao-karte-top) statt über "die eine
   blaue Karte". Der Hintergrund steht deshalb hier und NICHT zusätzlich in .ao-karte-top - dort
   stünde derselbe Wert ein zweites Mal. */
.ao-karte {
    position: relative;
    background: var(--centra-accent-bg);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Der oberste Vorschlag ist hervorgehoben - anders als bei den PDF-Paketoptionen ist das hier
   ausdrücklich gewollt: Es gibt eine Rangfolge, und sie soll sichtbar sein. Seit dem Ausweiten des
   Blaus tragen Rand und Schatten diese Unterscheidung allein.
   #bcdaf5 ist ein etwas kräftigeres Blau eigens für diesen Rand; einen Token dafür gibt es im
   Design-System nicht (--centra-accent-bg ist die Füllung, --centra-accent die Linie). */
.ao-karte-top {
    border-color: var(--centra-accent);
    box-shadow: 0 0 0 1px #bcdaf5, 0 4px 16px rgba(15, 108, 189, .1);
}

/* Was sonst mit dem Blau verschwimmt, bekommt innerhalb der Karte eine weiße Fläche. Vorfahre ist
   seit dem Ausweiten .ao-karte statt .ao-karte-top - die Werte sind unverändert, sie gelten nur
   jetzt für jede Karte statt nur für die oberste.
   Die beiden Badges bewusst NICHT rein weiß: .ao-badge-auslastung warm-weiß, .ao-badge-kosten
   leicht rosé - sonst verlören sie ihre Lesart "warnend" und sähen wie neutrale Flächen aus.
   Höhere Spezifität (0-2-0) als die Grundregeln der Badges weiter unten, deshalb gewinnen diese
   hier unabhängig von der Reihenfolge in der Datei. */
.ao-karte .ao-top-grund { background: #fff; }
.ao-karte .ao-auftrag-name { background: #fff; }
.ao-karte .ao-badge-auslastung { background: #fffdf5; }
.ao-karte .ao-badge-kosten { background: #fff6f6; }
.ao-karte .ao-wirkung-feld { background: #fff; }
/* Deckt beide Rechnungen ab: die der kompletten Verschiebung und die strukturell andere
   Mithilfe-Vergleichsrechnung.
   ⚑ Korrektur zu Phase 141: Dort stand hier "falls diese einmal an Position 0 steht" - das konnte
   nie eintreten. Die Mithilfe-Karte steht in einer eigenen .ao-karte UNTERHALB des @foreach und
   bekommt nie .ao-karte-top; mit dem alten Vorfahren griff die Regel dort also nie. Jetzt greift
   sie, und das ist richtig so: Die Mithilfe-Karte ist seit dieser Runde ebenfalls blau. */
.ao-karte .ao-rechnung { background: #fff; }

/* ⚑ NICHT im Auftrag, aber Folge davon - bitte gegenlesen: Die beiden Vergleichsboxen
   ("Bisher" / "Mit Mithilfe") stehen in derselben Mithilfe-Karte direkt ÜBER .ao-rechnung. Bleiben
   sie auf --centra-surface-2 (grau), während die Rechnung darunter durch die Regel oben weiß wird,
   stehen in einer Karte zwei graue und eine weiße Fläche nebeneinander - ein Zustand, den so
   niemand entworfen hat.
   Weiß ist hier kein neuer Einfall, sondern dasselbe Muster wie bei .ao-wirkung-feld und
   .ao-rechnung in Phase 141: Flächen auf --centra-surface-2 werden auf der blauen Karte weiß.
   .ao-pfeil bleibt bewusst grau - der stand in Phase 141 schon auf der blauen Karte und ist so
   freigegeben worden. */
.ao-karte .ao-vergleich-karte { background: #fff; }

.ao-top-tag {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--centra-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ao-karte-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ⚑ Punkt 6 (11.09.2026, Dennis): Der Mandantenname bekommt die app-weite Akzent-Hinterlegung -
   dieselbe Paarung --centra-accent-bg / --centra-accent-text wie .badge, .ao-badge-mithilfe und der
   Mandanten-Avatar der Zeitauswertung. `inline-block`, damit die Fläche am Text endet und nicht über
   die ganze Kartenbreite läuft. */
.ao-auftrag-name {
    display: inline-block;
    font-weight: 600;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    padding: 2px 8px;
    border-radius: 6px;
}

.ao-auftrag-art { color: var(--centra-text-secondary); font-size: 12.5px; }

.ao-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.ao-badge {
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ao-badge-auslastung { background: var(--centra-warning-bg); color: var(--centra-warning-text); }

.ao-badge-kosten { background: var(--centra-danger-bg); color: var(--centra-danger-text); }

.ao-top-grund {
    background: var(--centra-accent-bg);
    color: var(--centra-text-secondary);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
}

.ao-wirkung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.ao-wirkung-feld {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 10px 12px;
}

/* ⚑ 11.09.2026: weißer Kreis mit dezentem Schatten um die Kennzahl-Icons - gilt für ALLE
   Vorschlagskarten, nicht nur die oberste (so von Dennis zurückgemeldet). */
.ao-wirkung-ic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #d7e8f9;
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(15, 108, 189, .12);
}

/* Selektor nach dem Vorbild von .ao-begruendung .mud-icon-root weiter unten. */
.ao-wirkung-ic .mud-icon-root { color: var(--centra-accent); }

.ao-wirkung-wert { font-weight: 700; font-variant-numeric: tabular-nums; }

.ao-wirkung-einheit { font-size: 12px; font-weight: 600; }

.ao-wirkung-label { color: var(--centra-text-muted); font-size: 12px; }

.ao-transfer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ao-person { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; }

.ao-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    flex: 0 0 auto;
}

.ao-avatar-von { background: var(--centra-warning-bg); color: var(--centra-warning-text); }

.ao-avatar-zu { background: var(--centra-success-bg, #f1faf1); color: var(--centra-success-text); }

.ao-person-name { font-weight: 600; font-size: 13.5px; }

.ao-person-meta { color: var(--centra-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.ao-pfeil { color: var(--centra-text-muted); font-size: 18px; flex: 0 0 auto; }

.ao-rechnung {
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.ao-rechnung-zeile { display: flex; justify-content: space-between; gap: 12px; }

.ao-rechnung-diff {
    text-align: right;
    font-weight: 700;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--centra-border);
}

/* ⚑ 11.09.2026: die neu ausgerichtete Beispielrechnung der „ganz verschieben"-Karte (freigegebene
   Vorlage, Abschnitt 4). Drei Spalten: Person, Rechenweg, Betrag - die Beträge stehen damit
   untereinander und sind vergleichbar, was in der alten Zwei-Spalten-Zeile nicht der Fall war.
   Die Mithilfe-Vergleichsrechnung bleibt bewusst bei .ao-rechnung-zeile. */
.ao-rechnung-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    padding: 14px 16px;
}

.ao-rechnung-person { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Nur Größe und Form - die Farbe kommt weiterhin über .ao-avatar-von/.ao-avatar-zu, die auf
   demselben Element stehen. Eine zweite Farbdefinition wäre eine zweite Stelle zum Pflegen. */
.ao-mini-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Lange Namen werden gekürzt statt das Gitter zu sprengen - min-width:0 am Elternteil ist dafür
   nötig, sonst wächst ein Grid-Element über seine Spalte hinaus. */
.ao-rechnung-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ao-rechnung-weg { color: var(--centra-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ao-rechnung-betrag { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }

.ao-rechnung-trenner { grid-column: 1 / -1; border-top: 1px solid var(--centra-border); margin-top: 2px; }

.ao-rechnung-summe-label { grid-column: 1 / 3; color: var(--centra-text-secondary); font-weight: 600; }

/* Eigene .spart/.teurer-Regeln statt der von .ao-rechnung-diff: Jene bringt zusätzlich text-align,
   margin-top, padding-top und einen eigenen border-top mit - hier übernimmt das .ao-rechnung-trenner,
   sonst gäbe es zwei Trennlinien übereinander. */
.ao-rechnung-summe-betrag {
    text-align: right;
    font-weight: 700;
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}

.ao-rechnung-summe-betrag.spart { color: var(--centra-success-text); }

.ao-rechnung-summe-betrag.teurer { color: var(--centra-danger-text); }

.ao-rechnung-diff.spart { color: var(--centra-success-text); }

/* Ein Vorschlag darf teurer sein - dann steht er wegen der Auslastung da. Die Zahl wird deshalb
   nicht versteckt, sondern als das gekennzeichnet, was sie ist. */
.ao-rechnung-diff.teurer { color: var(--centra-danger-text); }

.ao-begruendung {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.ao-begruendung li { display: flex; align-items: center; gap: 6px; }

.ao-begruendung .mud-icon-root { color: var(--centra-success-text); }

/* ⚑ 13.09.2026 (Nachtest B/2a) - eine Zeile, deren Aussage NICHT bestaetigt ist.

   Das gruene Haekchen darueber stand vorher vor jeder Zeile, auch vor "0 bisherige Auftraege" und
   vor "die tatsaechliche Kapazitaet ist ungeprueft". Hier wird ihm nur die Farbe genommen - das
   Zeichen selbst entscheidet die Komponente (Haken / Strich / Fragezeichen, siehe
   BegruendungsIcon).

   Bewusst gedaempft und NICHT rot: Ein Kandidat ohne Buchung fuer diesen Mandanten ist kein Fehler,
   er wird weiterhin vorgeschlagen. Rot waere eine Warnung, die niemand ausgesprochen hat. */
.ao-begruendung li.ao-begruendung-offen .mud-icon-root { color: var(--centra-text-muted); }

.ao-karte-fuss {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.ao-weitere {
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--centra-text-secondary);
    font-size: 12.5px;
}

.ao-rueckfrage {
    flex: 1 1 260px;
    color: var(--centra-warning-text);
    font-size: 12.5px;
}

/* --- Auftragsoptimierung: Mithilfe (Phase 2, 11.09.2026) ------------------------------------- */

.ao-mithilfe-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--centra-border);
}

.ao-mithilfe-intro h3 {
    margin: 0;
    font-size: 15px;
}

.ao-mithilfe-intro p {
    margin: 2px 0 0;
    color: var(--centra-text-secondary);
    font-size: 12.5px;
    max-width: 62ch;
}

.ao-badge-mithilfe { background: var(--centra-accent-bg); color: var(--centra-accent-text); }

.ao-mithilfe-konfig {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: end;
}

.ao-mithilfe-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }

.ao-mithilfe-feld > span { color: var(--centra-text-muted); }

.ao-mithilfe-regler { display: flex; align-items: center; gap: 12px; }

.ao-mithilfe-regler .mud-slider { flex: 1 1 auto; }

.ao-mithilfe-wert {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.ao-vergleich {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.ao-vergleich-karte {
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ao-vergleich-wer { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }

.ao-vergleich-zeile {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.ao-vergleich-zeile > span:first-child { color: var(--centra-text-muted); }

.ao-pfeil-klein { color: var(--centra-text-muted); }

/* --- Auftragsoptimierung: Rückmeldungsrunde vom 11.09.2026 ------------------------------------ */

/* Punkt 4: Vorher→Nachher-Pfeil an den Auslastungen. Die Farbe sagt „liegt danach über der
   Schwelle?", nicht „ist die Zahl gestiegen?" - Begründung am AuslastungsPfeil-Kommentar. */
.ao-trend {
    font-weight: 600;
    white-space: nowrap;
}

.ao-trend-gruen { color: var(--centra-success-text); }

.ao-trend-rot { color: var(--centra-danger-text); }

/* Punkt 5: Zeile mit den ausgeblendeten Vorschlägen. */
.ao-ausgeblendet {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--centra-surface-2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--centra-text-muted);
}

.ao-wieder {
    background: none;
    border: 1px solid var(--centra-border);
    border-radius: 9px;
    padding: 2px 10px;
    font-size: 12px;
    color: var(--centra-accent-text);
    cursor: pointer;
}

.ao-wieder:hover { background: var(--centra-accent-bg); }

/* Punkt 3: die vier Zahlenfelder der kanzleiweiten Schwellwerte in den Einstellungen. */
.es-optimierung-regler {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.es-optimierung-regler label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    max-width: 220px;
}

.es-optimierung-regler .es-input { max-width: 110px; }

/* ⚑ 11.09.2026: Gruppenüberschriften im Schwellwerte-Panel der Auftragsoptimierung. Seit die
   Kandidatenseite eigene Schwellen hat, sind es sieben Regler - in einer Reihe wäre nicht mehr zu
   sehen, welcher auf welcher Seite wirkt. Genau diese Verwechslung war der Anlass. */
/* ⚑ 13.09.2026 (U08) - die drei aufklappbaren Reglergruppen.

   Getrennt durch eine Linie statt durch Abstand: Aufgeklappt sind die Gruppen unterschiedlich
   hoch, und ein reiner Abstand ließe die eingeklappten Kopfzeilen wie eine lose Liste wirken
   statt wie drei Fächer desselben Panels. Vorlage: .gruppe im Mockup. */
.ao-gruppe {
    border-top: 1px solid var(--centra-border);
    padding: 12px 0;
}

.ao-gruppe:first-of-type {
    border-top: none;
    padding-top: 4px;
}

.ao-gruppe-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 2px 0;
}

/* Das Standard-Dreieck von <summary> weg - die Nummer links übernimmt seine Aufgabe. */
.ao-gruppe-kopf::-webkit-details-marker { display: none; }
.ao-gruppe-kopf::marker { content: ""; }

.ao-gruppe-nr {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    color: var(--centra-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.ao-gruppe-frage {
    color: var(--centra-text-muted);
    font-size: 12.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ao-gruppe-anzahl {
    margin-left: auto;
    color: var(--centra-text-muted);
    font-size: 11.5px;
}

/* Die Obergrenze steht seit dem 13.09. in der Eignungs-Gruppe und braucht dort eine sichtbare
   Absetzung: Sie ist ein UND über den beiden ODER-Gründen, kein dritter Grund (Begründung im
   Markup). Über die volle Breite, damit sie nicht als vierte Spalte neben den anderen steht. */
.ao-schwelle-abgesetzt {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--centra-border);
}

.ao-gruppe-titel {
    margin: 18px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--centra-text-secondary);
}

.ao-gruppe-titel:first-of-type { margin-top: 4px; }

/* Im Gruppenkopf trägt der Titel keinen eigenen Abstand - das Flex-Layout setzt ihn. */
.ao-gruppe-kopf .ao-gruppe-titel { margin: 0; }

.ao-gruppe-hinweis {
    margin: 2px 0 12px;
    color: var(--centra-text-muted);
    font-size: 12.5px;
    max-width: 72ch;
}

/* ⚑ 12.09.2026: Mithilfe je Vorschlagskarte statt einer globalen Sektion. Der Schalter sitzt IN der
   Karte, das Panel klappt darunter auf - mehrere Karten dürfen gleichzeitig offen sein. */
.ao-mithilfe-schalter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--centra-border);
    padding-top: 12px;
}

.ao-mithilfe-schalter-text {
    color: var(--centra-text-muted);
    font-size: 12.5px;
    max-width: 62ch;
}

/* Aufgeklappt ist der Schalter deutlich markiert - sonst sieht man bei mehreren offenen Karten
   nicht mehr, welcher Knopf zu welchem Panel gehört. */
.ao-wieder.aktiv {
    background: var(--centra-accent);
    border-color: var(--centra-accent);
    color: #fff;
}

.ao-wieder.aktiv:hover { background: var(--centra-accent-text); }

/* Das Panel ist optisch eine Karte in der Karte - eigener Rand und weiße Fläche, damit es sich vom
   blauen Kartenhintergrund (Phase 142) absetzt. */
.ao-mithilfe-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}

/* ⚑ 12.09.2026: Das Personen-Auswahlfeld der Auftragsoptimierung (KandidatAuswahl.razor), nach dem
   freigegebenen Mockup „Zuweisen & Mithilfe", Abschnitt 1.

   Ein <option> konnte nur Text tragen - keine Avatare, keine Farben. Die Zeilen sind jetzt dieselben
   wie im Transfer-Block darüber, damit man sie nebeneinander lesen kann.

   ⚠️ Übernommen sind die WERTE des Mockups, nicht dessen Variablennamen: Dort hieß es --surface,
   --border, --accent-bg; hier stehen die echten --centra-*-Token. Das Mockup war absichtlich mit
   denselben Farben gebaut, seine :root-Variablen existieren aber nur fürs Standalone-Rendern. */
.ao-combo { position: relative; }

.ao-combo-schalter {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: var(--centra-font-sans);
}

.ao-combo-schalter:hover:not(:disabled) { border-color: var(--centra-accent); }

.ao-combo-schalter:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: 1px; }

/* Während eines Ladevorgangs nicht bedienbar - sichtbar, nicht nur technisch. */
.ao-combo-schalter:disabled { cursor: default; opacity: .6; }

.ao-combo-schalter .ao-avatar { width: 28px; height: 28px; font-size: 11px; }

.ao-combo-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ao-combo-name { font-weight: 600; font-size: 13px; }

.ao-combo-meta {
    color: var(--centra-text-muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.ao-combo-pfeil { color: var(--centra-text-muted); flex: 0 0 auto; transition: transform .15s ease; }

.ao-combo.offen .ao-combo-pfeil { transform: rotate(180deg); }

/* Fängt den Klick daneben ab (siehe Kommentar in KandidatAuswahl.razor). Liegt UNTER der Liste, aber
   über allem anderen - deshalb ein z-index zwischen beiden. */
.ao-combo-hinterher { position: fixed; inset: 0; z-index: 4; }

.ao-combo-liste {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}

.ao-combo-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--centra-font-sans);
}

.ao-combo-zeile:hover { background: var(--centra-surface-2); }

.ao-combo-zeile:focus-visible { outline: 2px solid var(--centra-accent); outline-offset: -2px; }

.ao-combo-zeile[aria-selected="true"] { background: var(--centra-accent-bg); }

.ao-combo-zeile .ao-avatar { width: 26px; height: 26px; font-size: 10.5px; }

.ao-combo-zeile .ao-combo-name { font-size: 12.5px; }

.ao-combo-zeile .ao-combo-meta { font-size: 11px; }

/* Das Häkchen behält seinen Platz, auch wo es nicht sichtbar ist - sonst rutschen die Zeilen beim
   Wechsel der Auswahl um seine Breite hin und her. */
.ao-combo-haken { color: var(--centra-accent); font-size: 13px; flex: 0 0 auto; visibility: hidden; }

.ao-combo-zeile[aria-selected="true"] .ao-combo-haken { visibility: visible; }

/* ⚑ 12.09.2026: Beschriftung vor dem Sortier-Umschalter. Die Knöpfe selbst nutzen .plan-topic wie
   der Auftragsart-Filter darunter - derselbe Charakter (sofort wirkend, nicht gespeichert), also
   dieselbe Optik. Ohne das Label stünden zwei Chips ohne Frage darüber. */
.ao-sortier-label {
    align-self: center;
    color: var(--centra-text-muted);
    font-size: 12.5px;
    margin-right: 2px;
}

/* ⚑ 12.09.2026: Der gelebte Monatsschnitt als Zusatzzeile im Wirkungs-Feld (freigegebenes Mockup
   „Auftragsoptimierung – Ø bisher"). Bewusst deutlich leichter als die Ziel-Zahl darüber: Auf den
   ersten Blick muss klar bleiben, welche Zahl maßgeblich ist - genau der Punkt, den Dennis bei der
   Einführung gemacht hat. Die gestrichelte Linie trennt „gilt" von „zur Einordnung". */
.ao-wirkung-ist {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--centra-border);
    font-size: 11.5px;
    color: var(--centra-text-muted);
    font-variant-numeric: tabular-nums;
}

.ao-wirkung-ist .ao-ist-icon { font-size: 12px; opacity: .8; }

.ao-wirkung-ist b { color: var(--centra-text-secondary); font-weight: 600; }

/* Ohne Jahresziel ersetzt EIN breites Feld die beiden Zahlen - es gibt nichts zu beziffern. */
.ao-wirkung-feld-breit { grid-column: 1 / -1; }

.ao-wirkung-kein-ziel { color: var(--centra-text-secondary); font-size: 12.5px; max-width: 62ch; }

/* Die Zeile mit dem Sprung in die Auftragsplanung. Weiß auf der blauen Karte, wie die übrigen
   Flächen (Phase 142). */
.ao-hinweis-zeile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.ao-hinweis-zeile a {
    color: var(--centra-accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ao-hinweis-zeile a:hover { text-decoration: underline; }

/* ⚑ 14.09.2026 (Runde 48): Fußzeile langer Tabellen - „25 von 499, weitere anzeigen".
   Lange Tabellen (Mandanten ohne Buchung, Abrechnungsquote je Mandant) rendern nur noch die
   ersten Zeilen; diese Zeile nennt den Gesamtumfang und blättert weiter. */
.eval-mehr-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .25rem .1rem;
    font-size: .85rem;
    color: var(--text-muted, #6b7280);
}

.eval-mehr-btn {
    border: 1px solid var(--border, #d1d5db);
    background: transparent;
    border-radius: .375rem;
    padding: .3rem .7rem;
    font-size: .85rem;
    cursor: pointer;
    color: inherit;
}

.eval-mehr-btn:hover {
    background: var(--surface-hover, rgba(0, 0, 0, .04));
}

/* ⚑ 15.09.2026 (Runde 52): Der Reiter „Nicht zugewiesen" - Erstzuweisung unzugewiesener Auftraege.
   Zwei Spalten: links die Auftragsliste, rechts Kandidaten und Vorschau. Unter 900 px untereinander. */
.ez-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ez-titel { margin: 0 0 .25rem; font-size: 1.05rem; }

.ez-unterzeile {
    margin: 0;
    font-size: .85rem;
    color: var(--centra-text-secondary, #6b7280);
}

.ez-werkzeuge {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    flex: 1 1 22rem;
    max-width: 34rem;
}

.ez-spalten {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .ez-spalten { grid-template-columns: 1fr; }
    .ez-werkzeuge { max-width: none; }
}

.ez-liste {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-height: 34rem;
    overflow-y: auto;
}

.ez-zeile {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--centra-surface, #fff);
    border: 1px solid var(--centra-border, #e5e7eb);
    border-radius: var(--centra-radius-lg, .5rem);
    padding: .6rem .75rem;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ez-zeile:hover:not(:disabled) { border-color: var(--centra-accent, #2563eb); }
.ez-zeile:disabled { opacity: .6; cursor: default; }

.ez-zeile.ist-gewaehlt {
    border-color: var(--centra-accent, #2563eb);
    box-shadow: 0 0 0 1px var(--centra-accent, #2563eb);
}

.ez-zeile-kopf { display: flex; gap: .5rem; align-items: baseline; }

.ez-gedaempft {
    font-size: .8rem;
    color: var(--centra-text-secondary, #6b7280);
}

.ez-luecke {
    font-size: .78rem;
    font-style: italic;
    color: var(--centra-text-secondary, #6b7280);
}

.ez-detail {
    border: 1px solid var(--centra-border, #e5e7eb);
    border-radius: var(--centra-radius-lg, .5rem);
    padding: 1rem 1.15rem;
}

.ez-auftragsfakten {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: .75rem 0;
    font-size: .875rem;
}

.ez-lage { margin: .75rem 0; font-size: .9rem; }

.ez-kandidaten {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.ez-kandidaten th,
.ez-kandidaten td {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--centra-border, #e5e7eb);
    text-align: left;
    vertical-align: top;
}

.ez-kandidaten tr.ist-empfohlen { background: var(--centra-accent-bg, #eff6ff); }

.ez-warnzeile td {
    font-size: .78rem;
    color: var(--centra-text-secondary, #6b7280);
    border-bottom: 1px solid var(--centra-border, #e5e7eb);
}

.ez-marke {
    margin-left: .4rem;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--centra-accent-bg, #eff6ff);
    color: var(--centra-accent-text, #1d4ed8);
    font-size: .72rem;
    font-weight: 600;
}

.ez-vorschau {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--centra-border, #e5e7eb);
}

.ez-hinweis {
    margin: .5rem 0;
    font-size: .875rem;
}

.ez-vorschau-liste {
    margin: .5rem 0 1rem;
    padding-left: 1.1rem;
    font-size: .875rem;
}

.ez-vorschau-liste li { margin-bottom: .2rem; }

.ez-knoepfe { display: flex; gap: .6rem; }

.ez-erfolg,
.ez-fehler {
    margin-bottom: 1rem;
    padding: .65rem .9rem;
    border-radius: var(--centra-radius-lg, .5rem);
    font-size: .9rem;
}

.ez-erfolg {
    background: var(--centra-accent-bg, #eff6ff);
    color: var(--centra-accent-text, #1d4ed8);
}

.ez-fehler {
    background: rgba(220, 38, 38, .08);
    color: #b91c1c;
}

/* ⚑ 15.09.2026 (Runde 50): Die eigene Ansicht „Nicht zugewiesen".
   Der Zähler im Kopf ist seit dieser Runde ein Knopf - er soll aber aussehen wie vorher, damit
   sich die Zeile nicht verändert; nur der Mauszeiger verrät, dass man ihn drücken kann. */
.plan-count-action {
    border: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.plan-count-action:hover {
    filter: brightness(.95);
}

.plan-nz-werkzeuge {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: .75rem;
}

.plan-nz-werkzeuge > :first-child { flex: 1 1 auto; }
.plan-nz-werkzeuge > :last-child { flex: 0 0 13rem; }

/* Fehlende Grundlagen: sichtbar, aber nicht alarmierend - es ist eine Lücke, kein Fehler. */
.plan-nz-luecke {
    font-size: .8rem;
    color: var(--centra-text-secondary, #6b7280);
    font-style: italic;
}

.plan-nz-legende {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border, #e5e7eb);
    font-size: .85rem;
    color: var(--text-muted, #6b7280);
}

.plan-nz-legende ul {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
}

.plan-nz-legende li { margin-bottom: .35rem; }

/* ⚑ 15.09.2026 (Runde 49): Fußzeile der begrenzten Listenansicht der Auftragsplanung.
   Die Liste rendert 50 Karten auf einmal; diese Zeile nennt die Gesamtzahl und blättert weiter. */
.plan-liste-mehr {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem .25rem .3rem;
    font-size: .9rem;
    color: var(--text-muted, #6b7280);
}

.plan-liste-mehr-btn {
    border: 1px solid var(--border, #d1d5db);
    background: transparent;
    border-radius: .375rem;
    padding: .35rem .8rem;
    font-size: .875rem;
    cursor: pointer;
    color: inherit;
}

.plan-liste-mehr-btn:hover {
    background: var(--surface-hover, rgba(0, 0, 0, .04));
}