/* /Components/Angebote/KlickbaresFeld.razor.rz.scp.css */
/* Phase 114 - Optik des klickbaren Felds aus dem freigegebenen Entwurf.

   Bewusst per Blazor-CSS-Isolation und NICHT in app.css: Die Klassennamen (.lf, .lf-head, ...) sind
   kurz und generisch; global vergeben würden sie über kurz oder lang mit etwas anderem kollidieren.
   Alle Farben/Radien kommen aus den zentralen Centra-Tokens, damit ein späterer Themenwechsel auch
   hier greift (siehe docs/PROJECT.md, Abschnitt Design). */
.lf[b-lkjz7k7zca] {
    border: 1.5px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.lf:hover[b-lkjz7k7zca] {
    border-color: var(--centra-text-muted);
}

.lf-head[b-lkjz7k7zca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
}

.lf-label[b-lkjz7k7zca] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--centra-text);
}

.lf-check[b-lkjz7k7zca] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--centra-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--centra-surface);
    font-size: 12px;
    color: #fff;
}

.lf.active[b-lkjz7k7zca] {
    border-color: var(--centra-accent);
    background: var(--centra-accent-bg);
}

    .lf.active .lf-check[b-lkjz7k7zca] {
        background: var(--centra-accent);
        border-color: var(--centra-accent);
    }

    .lf.active .lf-label[b-lkjz7k7zca] {
        color: var(--centra-accent-text);
    }

/* Aufklappen über max-height statt height: auto - nur so ist der Übergang animierbar. Der Wert ist
   die Obergrenze für den Inhalt (eine Beschriftung + ein Eingabefeld), nicht dessen tatsächliche
   Höhe. */
.lf-body[b-lkjz7k7zca] {
    max-height: 0;
    overflow: hidden;
    transition: max-height .18s ease;
}

.lf.active .lf-body[b-lkjz7k7zca] {
    max-height: 80px;
}

/* Phase 115: Variante für Inhalte mit mehr als einem Feld (Steuern-Reiter: Betrag + Faktor, bei der
   Umsatzsteuer zusätzlich ein Hinweisabsatz). Wird über den Gross-Parameter gesetzt - die kompakten
   Fälle behalten die 80px oben.

   Auch das ist eine Obergrenze, keine echte Höhe (siehe Kommentar oben). Der Wert ist am längsten
   Fall bemessen, der Umsatzsteuer-Karte; ein noch längerer Inhalt bräuchte erneut mehr. */
.lf.active .lf-body.lf-body-gross[b-lkjz7k7zca] {
    max-height: 260px;
}

/* Phase 121: unbegrenzte Variante für Inhalte ohne vorhersagbare Höhe (Listen). `max-height: none`
   hebt die Begrenzung auf - und damit zwangsläufig auch die Animation, denn `max-height` ist genau
   das, was hier animiert wird. Eine abgeschnittene Liste wäre das größere Problem.
   `overflow: visible`, damit auch Dropdowns o. Ä. innerhalb der Liste nicht beschnitten werden. */
.lf.active .lf-body.lf-body-unbegrenzt[b-lkjz7k7zca] {
    max-height: none;
    overflow: visible;
    transition: none;
}

.lf-body-inner[b-lkjz7k7zca] {
    padding: 0 15px 14px;
}

/* ::deep ist hier zwingend (Korrektur Phase 115, Fehler aus Phase 114): Der Inhalt von <Wert> kommt
   als RenderFragment von der AUFRUFENDEN Seite und trägt deshalb deren Scope-Attribut, nicht das
   dieser Komponente. Ein einfaches `.lf-body-inner input` würde zu
   `.lf-body-inner input[b-<komponente>]` kompiliert und träfe diese Felder nie - sie blieben im
   Browser-Standardlook. Mit ::deep landet das Scope-Attribut am Container
   (`.lf-body-inner[b-<komponente>] input`), und die eingebetteten Felder werden erfasst. */
.lf-body-inner[b-lkjz7k7zca]  label {
    font-size: 11.5px;
    color: var(--centra-text-secondary);
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.lf-body-inner[b-lkjz7k7zca]  input {
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--centra-text);
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    padding: 7px 9px;
    background: #fff;
}

/* Zweites Feld im selben Aufklapp-Bereich (Phase 115, Steuern-Reiter: Betrag + Faktor): Ohne
   Abstand klebte die zweite Beschriftung direkt am ersten Eingabefeld. */
.lf-body-inner[b-lkjz7k7zca]  input + label {
    margin-top: 10px;
}

/* Erklärender Absatz bzw. Warnhinweis unter den Feldern (Umsatzsteuer-Fall bzw. fehlende
   Honorar-Konfiguration, Phase 116). Beide Klassen bringen ihre Optik aus app.css mit - hier wird nur
   der Abstand gesetzt, damit die Kachel nicht zusammenklebt. Der letzte Absatz bekommt kein
   Unten-Abstand, dafür sorgt das Padding von .lf-body-inner. */
.lf-body-inner[b-lkjz7k7zca]  .es-hint,
.lf-body-inner[b-lkjz7k7zca]  .hb-warnung {
    margin: 10px 0 0;
}

/* Variante ohne aufklappbaren Wert: etwas flacher und leichter gesetzt, damit ein reiner
   Ja/Nein-Schalter nicht so schwer wirkt wie ein Feld mit Eingabe. */
.lf-simple .lf-head[b-lkjz7k7zca] {
    padding: 11px 15px;
}

.lf-simple .lf-label[b-lkjz7k7zca] {
    font-size: 13px;
    font-weight: 500;
}
/* /Components/Announcements/RichTextEditor.razor.rz.scp.css */
/* Phase 136 - Editor-Optik, siehe RichTextEditor.razor. */

.rte[b-980tn9ae9p] {
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    background: var(--centra-surface);
    overflow: hidden;
}

.rte-werkzeuge[b-980tn9ae9p] {
    display: flex;
    gap: 2px;
    padding: 5px 6px;
    background: var(--centra-surface-2);
    border-bottom: 1px solid var(--centra-border);
}

.rte-btn[b-980tn9ae9p] {
    min-width: 28px;
    height: 26px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--centra-text-secondary);
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
}

    .rte-btn:hover[b-980tn9ae9p] {
        background: var(--centra-surface);
        border-color: var(--centra-border);
        color: var(--centra-text);
    }

.rte-flaeche[b-980tn9ae9p] {
    min-height: 150px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--centra-text);
    outline: none;
}

    .rte-flaeche:focus[b-980tn9ae9p] {
        box-shadow: inset 0 0 0 2px var(--centra-accent-bg);
    }

    /* Phase 150, Teil B+C - der Kern beider gemeldeter Fehler.

       Hier stand dieselbe Regel ohne ::deep - und sie hat nie gewirkt. Blazor schreibt in einer
       .razor.css jeden Selektor auf das Scope-Attribut der Komponente um (aus `.rte-flaeche ul` wird
       `.rte-flaeche ul[b-xyz]`). Dieses Attribut vergibt Blazor aber nur an Elemente, die IM MARKUP
       der Komponente stehen. Die <ul>/<ol> hier entstehen zur Laufzeit durch document.execCommand im
       Browser und haben es folglich nicht - die Regel traf sie nie.

       Die Folge, im Browser nachgemessen: `padding-left` blieb bei 0px. Bei
       `list-style-position: outside` (Standard) sitzt der Aufzaehlungspunkt dann LINKS ausserhalb des
       Textbereichs und ist unsichtbar bzw. angeschnitten. Genau die beiden Meldungen: "Aufzaehlung tut
       nichts" (Punkt unsichtbar - die Liste entstand sehr wohl) und "nummerierte Liste setzt zu weit
       links an und ist abgeschnitten" (Zahl halb weg).

       ::deep hebt die Scope-Umschreibung fuer alles darunter auf und erreicht damit auch die
       dynamisch erzeugten Elemente. */
    .rte-flaeche[b-980tn9ae9p]  ul,
    .rte-flaeche[b-980tn9ae9p]  ol {
        margin: 0 0 8px;
        /* 26px statt 22px: Eine zweistellige Zahl ("10.") braucht mehr Platz als ein Punkt, sonst
           steht sie gedraengt am Rand. */
        padding-left: 26px;
        /* Ausdruecklich gesetzt statt auf den Browser-Standard zu vertrauen - die Marke gehoert in
           den freigehaltenen Einzug links, nicht in den Textfluss. */
        list-style-position: outside;
    }

/* Phase 141 - Emoji-Auswahl. Die Huelle ist der Anker fuer das ausklappende Feld.

   Phase 150: Das `margin-left: auto` ist weg, das den Knopf an den rechten Rand der Leiste geschoben
   hat. Emoji-Einfuegen ist eine Formatierungs-Aktion wie die anderen auch und gehoert deshalb in
   dieselbe Gruppe - abgesetzt am anderen Ende wirkte es wie eine Funktion fuer sich. */
.rte-emoji-huelle[b-980tn9ae9p] {
    position: relative;
}

.rte-emojis[b-980tn9ae9p] {
    position: absolute;
    top: calc(100% + 4px);
    /* Phase 150: links statt rechts ausgerichtet. Solange der Knopf rechts aussen sass, war `right: 0`
       richtig; jetzt sitzt er links, und das Feld waere von dort aus nach links ueber den Rand der
       Werkzeugleiste hinausgelaufen. */
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 6px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.rte-emoji[b-980tn9ae9p] {
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 1;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

    .rte-emoji:hover[b-980tn9ae9p] {
        background: var(--centra-surface-2);
        border-color: var(--centra-border);
    }
/* /Components/Clients/CopyButton.razor.rz.scp.css */
/* Phase 107 (Issue #32/M10): Der Kopieren-Knopf. Bewusst zurückhaltend - er steht neben jeder
   Beschriftung und darf sie nicht überstimmen. Alle Farben aus den Tokens in app.css. */
.cb-knopf[b-nj1et1l0b7] {
    flex: 0 0 auto;
    padding: 0 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--centra-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

    .cb-knopf:hover[b-nj1et1l0b7] {
        color: var(--centra-accent);
    }

    /* Ein Fehlschlag muss sichtbar sein - ein Knopf, bei dem nichts passiert, ist schlimmer als
       einer, der sagt, dass es nicht ging. */
    .cb-knopf.fehler[b-nj1et1l0b7] {
        color: var(--centra-danger-text);
    }
/* /Components/Dashboard/AnnouncementsPanel.razor.rz.scp.css */
/* Phase 136 - Dashboard-Kachel der Ankuendigungen. */

.ank-panel-link[b-d7r4kydur1] {
    color: var(--centra-accent-text);
    text-decoration: none;
    font-weight: 600;
}

    .ank-panel-link:hover[b-d7r4kydur1] {
        text-decoration: underline;
    }

.ank-panel-leer[b-d7r4kydur1] {
    margin: 0;
    font-size: 13px;
    color: var(--centra-text-muted);
}

.ank-panel-zeile[b-d7r4kydur1] {
    padding: 11px 0;
}

/* Kurzfassung: Der Inhalt wird auf drei Zeilen gekuerzt, damit eine lange Ankuendigung die Kachel
   nicht sprengt - der vollstaendige Text steht auf der Seite. Bilder erscheinen hier gar nicht, nur
   ihre Anzahl in der Unterzeile. */
.ank-panel-inhalt[b-d7r4kydur1] {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--centra-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    /* Phase 142: nur im EINGEKLAPPTEN Zustand ausblenden. Aufgeklappt erscheinen die Bilder als
       eigene Galerie unter dem Text (siehe .ank-panel-galerie) - ein Bild mitten in der
       dreizeiligen Vorschau wuerde die Kuerzung ad absurdum fuehren. */
    /* Phase 150: ::deep ergaenzt - der Inhalt wird per MarkupString gerendert, seine Kindelemente
       tragen deshalb kein Blazor-Scope-Attribut, und ohne ::deep trafen diese Regeln sie nie.
       Ausfuehrliche Begruendung in RichTextEditor.razor.css. Das betraf auch das Ausblenden der
       Bilder hier: Ein Bild im eingeklappten Zustand blieb nur deshalb unauffaellig, weil die
       dreizeilige Kuerzung darueber es ohnehin abgeschnitten hat. */
    .ank-panel-inhalt:not(.offen)[b-d7r4kydur1]  img {
        display: none;
    }

    .ank-panel-inhalt[b-d7r4kydur1]  p {
        margin: 0;
    }

    /* Der Einzug gehoert NUR an Listen, nicht an Absaetze - dort waere er ein sinnloser Rand am
       linken Text. Bis Phase 150 stand `padding-left` gemeinsam fuer p/ul/ol hier; das fiel nur
       deshalb nie auf, weil die Regel ohne ::deep ohnehin nichts getroffen hat. Mit dem Fix wurde
       daraus sofort ein sichtbar eingerueckter Text. */
    .ank-panel-inhalt[b-d7r4kydur1]  ul,
    .ank-panel-inhalt[b-d7r4kydur1]  ol {
        margin: 0;
        /* 26px wie ueberall sonst - bei 18px stand eine zweistellige Zahl gedraengt am Rand. */
        padding-left: 26px;
        list-style-position: outside;
    }

/* Phase 138 - Kopfzeile je Ankuendigung: Titel links, Ersteller und Datum rechts. Derselbe Aufbau wie
   .card-header in app.css (Flexbox, space-between), damit die Kachel nicht aus der Reihe faellt. */
.ank-panel-kopf[b-d7r4kydur1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* baseline statt center bei align-items: Titel (13px, fett) und Urheberzeile (11.5px) haben
   unterschiedliche Schriftgroessen - auf der Grundlinie ausgerichtet stehen sie optisch auf einer
   Hoehe, zentriert wuerde die kleinere Zeile leicht nach oben rutschen. */
.ank-panel-urheber[b-d7r4kydur1] {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--centra-text-muted);
    text-align: right;
    /* Ein langer Name soll den Titel nicht zusammenquetschen, sondern selbst gekuerzt werden. */
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Titel darf schrumpfen und wird bei Bedarf gekuerzt - sonst draengt ein langer Titel die
   Urheberzeile aus der Kachel. */
.ank-panel-kopf .list-title[b-d7r4kydur1] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phase 140 - aufgeklappter Zustand: Die Kuerzung wird aufgehoben, Bilder bleiben ausgeblendet
   (die Regel dafuer steht oben und gilt weiter). Nur der Text soll lesbar werden - fuer alles
   Weitere gibt es "Alle ansehen". */
.ank-panel-inhalt.offen[b-d7r4kydur1] {
    -webkit-line-clamp: none;
    line-clamp: none;
    display: block;
    overflow: visible;
}

/* Dezenter Umschalter, kein vollwertiger Knopf: Er gehoert zum Text, nicht zu den Aktionen. */
.ank-panel-mehr[b-d7r4kydur1] {
    margin-top: 4px;
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-accent-text);
    background: none;
    border: none;
    cursor: pointer;
}

    .ank-panel-mehr:hover[b-d7r4kydur1] {
        text-decoration: underline;
    }

/* Phase 142 - Bildergalerie im aufgeklappten Zustand. Bewusst kleiner als auf der vollen Seite
   (dort 260x200): Die Kachel ist schmaler, und mehrere Bilder in Originalgroesse wuerden die
   Dashboard-Spalte sprengen. 150x120 laesst in der grossen Kachel zwei bis drei Bilder nebeneinander
   und bleibt in der kleinen bei einem - erkennbar genug, um zu sehen, worum es geht; fuer Details
   gibt es weiterhin "Alle ansehen". */
.ank-panel-galerie[b-d7r4kydur1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

    .ank-panel-galerie img[b-d7r4kydur1] {
        max-width: 150px;
        max-height: 120px;
        border: 1px solid var(--centra-border);
        border-radius: 6px;
        object-fit: contain;
        background: var(--centra-surface-2);
    }

/* Phase 144 - Kommentare im aufgeklappten Zustand, rein zum Lesen. Angelehnt an .ank-kommentar auf
   der vollen Seite, aber bewusst schlanker: kleinere Schrift, kein Rahmen um jeden Kommentar, keine
   Aktionen. In einer Dashboard-Kachel geht es ums Ueberfliegen ("hat schon jemand geantwortet?"),
   nicht ums Mitdiskutieren - dafuer gibt es "Alle ansehen". */
.ank-panel-kommentare[b-d7r4kydur1] {
    margin-top: 10px;
    padding-top: 8px;
    /* Eine feine Trennlinie statt eines Kastens: Sie ordnet die Kommentare dem Beitrag darueber zu,
       ohne die Kachel in zwei Bloecke zu zerlegen. */
    border-top: 1px solid var(--centra-border);
}

.ank-panel-kommentare-titel[b-d7r4kydur1] {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    margin-bottom: 6px;
}

.ank-panel-kommentar + .ank-panel-kommentar[b-d7r4kydur1] {
    margin-top: 8px;
}

.ank-panel-kommentar-kopf[b-d7r4kydur1] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 11px;
    color: var(--centra-text-muted);
}

.ank-panel-kommentar-name[b-d7r4kydur1] {
    font-weight: 600;
    color: var(--centra-text-secondary);
}

.ank-panel-kommentar-inhalt[b-d7r4kydur1] {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--centra-text-secondary);
}

    /* Der Editor liefert <p>-Absaetze; ohne diese Regel entstuende zwischen zwei kurzen Kommentaren
       mehr Luft als zwischen den Kommentaren selbst. */
    /* Phase 150: ::deep wie bei .ank-panel-inhalt oben, Einzug ebenfalls nur an den Listen. */
    .ank-panel-kommentar-inhalt[b-d7r4kydur1]  p {
        margin: 0;
    }

    .ank-panel-kommentar-inhalt[b-d7r4kydur1]  ul,
    .ank-panel-kommentar-inhalt[b-d7r4kydur1]  ol {
        margin: 0;
        padding-left: 26px;
        list-style-position: outside;
    }

/* Phase 147 - neuen Kommentar direkt aus der Kachel schreiben. Bewusst schlank gehalten: Der Editor
   selbst bringt seine eigene Gestaltung mit (RichTextEditor.razor.css), hier geht es nur um den
   Abstand ringsum und die Knopfzeile darunter. */
.ank-panel-kommentar-neu[b-d7r4kydur1] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ank-panel-kommentar-aktionen[b-d7r4kydur1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Rueckmeldung nach dem Absenden bzw. Fehlertext. Dieselbe Formensprache wie .ank-status auf der
   vollen Seite, nur kleiner - in der Kachel ist weniger Platz. */
.ank-panel-kommentar-status[b-d7r4kydur1] {
    font-size: 11.5px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
}

    .ank-panel-kommentar-status.fehler[b-d7r4kydur1] {
        background: var(--centra-danger-bg);
        border-color: var(--centra-danger-border);
        color: var(--centra-danger-text);
    }

/* Phase 150, Teil D+E - Kopfzeile und Aktionsbereich aufraeumen. */

.ank-panel-kopf-aktionen[b-d7r4kydur1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* "Alles einklappen" ist ein Knopf, "Alle ansehen" daneben ein Link - damit sie trotzdem gleich
   aussehen, erbt der Knopf .ank-panel-link und setzt nur die Knopf-Eigenheiten zurueck. */
.ank-panel-einklappen[b-d7r4kydur1] {
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    background: none;
    border: none;
    cursor: pointer;
}

/* Der Auf-/Zuklapp-Knopf gehoert zur KARTE, nicht zum Kommentarformular darueber. Aufgeklappt stehen
   beide direkt untereinander ("Abbrechen" / "Weniger anzeigen") und waren kaum auseinanderzuhalten.
   Deshalb im aufgeklappten Zustand eine feine Linie und deutlich mehr Luft: Zusammen mit der bereits
   vorhandenen Linie ueber den Kommentaren ergibt das eine klare Dreiteilung der Karte -
   Inhalt | Kommentare | Karten-Aktion.

   Nur aufgeklappt: Eingeklappt steht der Knopf direkt unter der Textvorschau, dort waere eine Linie
   ueber ihm nur zusaetzliche Unruhe ohne Nutzen. */
.ank-panel-umschalter.abgesetzt[b-d7r4kydur1] {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--centra-border);
    width: 100%;
    /* NICHT text-align: left - das bleibt hier wirkungslos. MudBlazor setzt global
       `button { display: inline-flex; justify-content: center; }`; die Beschriftung ist damit ein
       Flex-Element und richtet sich nach justify-content, nicht nach text-align. Erst durch die
       volle Breite oben faellt das ueberhaupt auf (ein inhaltsbreiter Knopf sieht zentriert wie
       linksbuendig aus). Im Browser nachgemessen. */
    justify-content: flex-start;
}
/* /Components/Dashboard/StatCard.razor.rz.scp.css */
.stat-card[b-192r216emd] {
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    box-shadow: var(--centra-shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-icon[b-192r216emd] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.stat-label[b-192r216emd] {
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.stat-value[b-192r216emd] {
    font-size: 23px;
    font-weight: 700;
}

    .stat-value.accent[b-192r216emd] {
        color: var(--centra-accent-text);
    }

    /* Zielerreichung des Tages (24.08.2026, Kachel "Heute erfasst"): dieselbe Machart wie
       .controlling-positive/.controlling-negative, nur mit Orange statt Rot für den unteren Fall -
       die Sollzeit noch nicht erreicht zu haben ist kein Fehler, sondern schlicht "noch nicht
       fertig". Stehen hinter .accent, überschreiben dessen Farbe also bewusst. */
    .stat-value.ziel-erreicht[b-192r216emd] {
        color: var(--centra-success-text);
    }

    .stat-value.ziel-offen[b-192r216emd] {
        color: var(--centra-warning-text);
    }

/* Phase 131 - klickbare Variante (siehe StatCard.razor). Bewusst zurückhaltend: Die Karte soll sich
   beim Überfahren als anklickbar zu erkennen geben, aber im Raster nicht aus der Reihe tanzen. Die
   Textfarbe wird ausdrücklich zurückgesetzt, sonst färbte der Browser den gesamten Karteninhalt in
   seiner Linkfarbe ein. */
.stat-card-link[b-192r216emd] {
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

    .stat-card-link:hover[b-192r216emd] {
        border-color: var(--centra-accent);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
        transform: translateY(-1px);
    }

    /* Sichtbarer Fokusrahmen für die Tastaturbedienung - ohne ihn wäre die Kachel zwar per Tab
       erreichbar, aber man sähe nicht, wo man ist. */
    .stat-card-link:focus-visible[b-192r216emd] {
        outline: 2px solid var(--centra-accent);
        outline-offset: 2px;
    }
/* /Components/Layout/BlankLayout.razor.rz.scp.css */
.blank-layout[b-5is8n8nblj] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--centra-page-bg);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-sdorf5p718] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topnav[b-sdorf5p718] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 28px;
    border-bottom: 1px solid var(--centra-sidebar-border);
    background: var(--centra-sidebar-bg);
}

.topnav-items[b-sdorf5p718] {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Platz für das kanzleiweite Logo (Phase 16, vergrößert in Phase 17), links vor den
   Navigationspunkten. Kanzleien laden ganz unterschiedliche Seitenverhältnisse hoch (quadratisch,
   breit-querformatig, hochformatig, mit/ohne Weißraum) - deshalb ein fester Rahmen mit fest
   definierten Maßen, in dem das Bild per object-fit: contain zentriert und unverzerrt eingepasst
   wird, egal welches Seitenverhältnis es hat. Feste (statt prozentualer) Maße auf Container UND Bild
   sind hier bewusst nötig: bei nur max-width/max-height in Prozent bleibt die Breite des Containers
   unbestimmt ("shrink-to-fit"), wodurch Browser das Bild in diesem Flex-Kontext auf 0x0 kollabieren
   lassen (siehe Phase-16-CHECK.md).
   Phase 17: 190×44px (statt 120×36px) - orientiert an ca. 4,3:1, dem Seitenverhältnis des aktuellen
   Platzhalter-SVG (460×108, Icon + Schriftzug "Kanzlei Mustermann & Partner"), damit der Schriftzug
   klar lesbar ist. Die Navigationsleiste selbst wächst dadurch minimal mit (Höhe war durch das
   höchste Flex-Kind bestimmt, jetzt eben das Logo statt der Nav-Punkte) - von ca. 54px auf ca. 60px.
   Das wurde bewusst in Kauf genommen statt das Logo künstlich kleiner zu halten: die Nav-Punkte
   rechts (.topnav-right) werden dadurch nicht verdrängt, nur die gesamte Leiste etwas höher. */
.topnav-logo[b-sdorf5p718] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 44px;
    margin-right: 20px;
    flex-shrink: 0;
}

    .topnav-logo img[b-sdorf5p718] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

[b-sdorf5p718] .topnav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--centra-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

[b-sdorf5p718] .topnav-item.active {
    background: var(--centra-nav-active-bg);
    color: var(--centra-nav-active-text);
}

[b-sdorf5p718] .topnav-group {
    position: relative;
}

[b-sdorf5p718] .topnav-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--centra-text-secondary);
    cursor: default;
}

[b-sdorf5p718] .topnav-group:hover .topnav-trigger {
    background: var(--centra-nav-active-bg);
    color: var(--centra-nav-active-text);
}

[b-sdorf5p718] .topnav-trigger .chev {
    font-size: 10px;
    opacity: .7;
}

[b-sdorf5p718] .topnav-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    /* Bewusst KEIN margin-top mehr (siehe Phase-22-Handoff, Teil G): der Abstand zum Trigger gehörte
       damit zu keinem der beiden hoverbaren Elemente - eine nicht ganz senkrechte Mausbewegung vom
       Trigger zum Dropdown konnte durch diese Lücke laufen, :hover brach kurz ab, das Dropdown
       verschwand (display: none), bevor die Maus dort ankam. Jetzt schließt das Dropdown direkt an
       den Trigger an (top: 100%, kein Versatz) - die hoverbare Fläche ist dadurch lückenlos. Das
       vorhandene Innen-Padding (6px) sorgt weiterhin für sichtbaren Abstand zum ersten Eintrag. */
    top: 100%;
    left: 0;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 10px;
    padding: 6px;
    min-width: 230px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    z-index: 30;
}

[b-sdorf5p718] .topnav-group:hover .topnav-dropdown {
    display: flex;
}

[b-sdorf5p718] .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--centra-text);
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 7px;
}

[b-sdorf5p718] .topnav-dropdown .nav-item:hover {
    background: var(--centra-surface-2);
}

[b-sdorf5p718] .topnav-dropdown .nav-item.active {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-weight: 600;
}

/* Dritte Verschachtelungsebene (Phase 14, aktuell nur "Verwaltung": Team/Mitarbeiter) - nicht
   klickbare Zwischenüberschrift (Vorbild: .nav-section-label aus dem ursprünglichen Design-Mockup)
   plus darunter eingerückte, kleinere Einträge. */
[b-sdorf5p718] .nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--centra-border);
}

[b-sdorf5p718] .nav-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--centra-text-muted);
    padding: 6px 10px 4px;
}

[b-sdorf5p718] .nav-item-nested {
    margin-left: 14px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
}

[b-sdorf5p718] .nav-icon {
    flex-shrink: 0;
    opacity: .8;
}

.topnav-right[b-sdorf5p718] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topnav-user[b-sdorf5p718] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.topnav-user-name[b-sdorf5p718] {
    font-size: 13px;
    font-weight: 600;
    color: var(--centra-text);
}

.topnav-user-role[b-sdorf5p718] {
    font-size: 11px;
    color: var(--centra-text-muted);
}

.logout-form[b-sdorf5p718] {
    margin: 0;
}

.logout-button[b-sdorf5p718] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--centra-sidebar-border);
    background: transparent;
    color: var(--centra-text-secondary);
    cursor: pointer;
    font-size: 14px;
}

.logout-button:hover[b-sdorf5p718] {
    background: var(--centra-nav-active-bg);
    color: var(--centra-nav-active-text);
}

.topnav-brand[b-sdorf5p718] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 16px;
    color: var(--centra-text);
    white-space: nowrap;
}

/* Auftrag vom 15.08.2026: Seit das Zeichen ein <img> mit eigener SVG-Form und -Farbe ist, bleiben
   hier nur noch die Maße - Hintergrund, Radius, Schrift und Zentrierung steckten im alten
   <span class="brand-mark">C</span> und wären jetzt wirkungslos bzw. störend.
   Seit die komplette Wortmarke im Bild steckt (statt eines quadratischen Icons) wird die HÖHE
   vorgegeben und die Breite folgt dem Seitenverhältnis (760:240) - eine feste Breite würde den
   Schriftzug stauchen. */
.brand-mark[b-sdorf5p718] {
    height: 28px;
    width: auto;
    display: block;
}

.app-content[b-sdorf5p718] {
    flex: 1;
    background: var(--centra-page-bg);
}

#blazor-error-ui[b-sdorf5p718] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-sdorf5p718] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-mqwl0xxiq7],
.components-reconnect-repeated-attempt-visible[b-mqwl0xxiq7],
.components-reconnect-failed-visible[b-mqwl0xxiq7],
.components-pause-visible[b-mqwl0xxiq7],
.components-resume-failed-visible[b-mqwl0xxiq7],
.components-rejoining-animation[b-mqwl0xxiq7] {
    display: none;
}

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


#components-reconnect-modal[b-mqwl0xxiq7] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mqwl0xxiq7 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-mqwl0xxiq7 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-mqwl0xxiq7 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-mqwl0xxiq7]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-mqwl0xxiq7 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-mqwl0xxiq7 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-mqwl0xxiq7 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-mqwl0xxiq7 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-mqwl0xxiq7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-mqwl0xxiq7] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-mqwl0xxiq7] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-mqwl0xxiq7] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-mqwl0xxiq7] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-mqwl0xxiq7] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-mqwl0xxiq7] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-mqwl0xxiq7 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-mqwl0xxiq7] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-mqwl0xxiq7 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AccessDenied.razor.rz.scp.css */
.placeholder-page[b-vp1murdzk8] {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 28px;
}

    .placeholder-page h1[b-vp1murdzk8] {
        margin-bottom: 8px;
    }

    .placeholder-page p[b-vp1murdzk8] {
        color: var(--centra-text-secondary);
        margin-bottom: 18px;
    }

.placeholder-badge[b-vp1murdzk8] {
    display: inline-block;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
}
/* /Components/Pages/Angebote.razor.rz.scp.css */
/* Phase 114 - Abstände in der Angebotsübersicht (freigegebener Entwurf, Punkt 1). */

/* Die beiden Kopfzeilen-Knöpfe klebten aneinander. `.card-sub` kommt aus app.css und wird auch von
   anderen Seiten genutzt - der Abstand gehört deshalb hierher auf eine zusätzliche, seitenlokale
   Klasse und nicht global an `.card-sub`. */
.ao-header-actions[b-lkrnohggyd] {
    display: flex;
    gap: 12px;
}

/* Zwischen Reiterleiste und Tabelle fehlte Luft. MudTabs bleibt bestehen (Entscheidung aus Issue
   #33), der Abstand muss also per ::deep an den von MudBlazor gerenderten Panel-Container.
   Klassenname `.mud-tabs-panels` gegen die ausgelieferte MudBlazor.min.css der eingesetzten Version
   9.7.0 geprüft - bei einem Versionswechsel bitte erneut prüfen. */
.card-body[b-lkrnohggyd]  .mud-tabs-panels {
    margin-top: 20px;
}
/* /Components/Pages/Angebotsrechner.razor.rz.scp.css */
/* Phase 114 - Angebotsrechner-Redesign nach dem von Dennis freigegebenen Entwurf.

   Alle Farben/Radien kommen aus den zentralen Centra-Tokens (app.css, Präfix --centra-*), damit ein
   späterer Themenwechsel auch hier greift - siehe docs/PROJECT.md, Abschnitt Design. Die Optik der
   klickbaren Felder selbst steckt nicht hier, sondern in KlickbaresFeld.razor.css (eigene
   Komponente, eigener Scope). */

/* Phase 116: Abstand zwischen Reiterleiste und Inhalt - dieselbe Regel wie in Angebote.razor.css.
   Phase 114 hatte sie nur auf der Übersichtsseite ergänzt; der Rechner hat dieselbe
   card/card-body/MudTabs-Struktur und stand deshalb weiterhin zu eng. Klassenname gegen die
   ausgelieferte MudBlazor 9.7.0 geprüft (siehe Kommentar in Angebote.razor.css). */
.card-body[b-hi1uhbz3vv]  .mud-tabs-panels {
    margin-top: 20px;
}

/* ----- Leistungsblöcke (Punkt 3a) ----- */

/* 2x2, damit die vier Blöcke als eine Gruppe lesbar sind statt als lange Spalte. Unter 620px bleibt
   nur eine Spalte übrig - zwei nebeneinander wären dort schmaler als ihre Beschriftung. */
.leistungs-grid[b-hi1uhbz3vv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 620px) {
    .leistungs-grid[b-hi1uhbz3vv] {
        grid-template-columns: 1fr;
    }
}

/* Ein einzeln stehender Schalter (Phase 115: "Auf Stundenbasis abrechnen") wird begrenzt, statt über
   die volle Formularbreite zu laufen - sonst wirkt eine Kachel mit drei Wörtern Beschriftung wie ein
   unfertiger Balken. Die Gruppen unten (.leistungs-grid/.extras-grid) brauchen das nicht: Dort füllen
   mehrere Kacheln die Breite gemeinsam. */
.schalter-einzeln[b-hi1uhbz3vv] {
    max-width: 420px;
    margin-bottom: 16px;
}

/* ----- Extras (Punkt 4) ----- */

/* Einspaltig: Die Beschriftungen tragen hier den eingerechneten Betrag mit ("... (+5 % auf Fibu)")
   und sind dadurch deutlich länger als die der Leistungsblöcke. */
.extras-grid[b-hi1uhbz3vv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}

/* ----- Paketauswahl (Punkt 3b) ----- */

.paket-grid[b-hi1uhbz3vv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .paket-grid[b-hi1uhbz3vv] {
        grid-template-columns: 1fr;
    }
}

.paket-card[b-hi1uhbz3vv] {
    position: relative;
    border: 1.5px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
    padding: 15px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

    .paket-card:hover[b-hi1uhbz3vv] {
        border-color: var(--centra-text-muted);
    }

    .paket-card.active[b-hi1uhbz3vv] {
        border-color: var(--centra-accent);
        background: var(--centra-accent-bg);
    }

.paket-name[b-hi1uhbz3vv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    margin-bottom: 6px;
}

.paket-card.active .paket-name[b-hi1uhbz3vv] {
    color: var(--centra-accent-text);
}

.paket-preis[b-hi1uhbz3vv] {
    font-size: 20px;
    font-weight: 700;
    color: var(--centra-text);
}

.paket-sub[b-hi1uhbz3vv] {
    font-size: 11.5px;
    color: var(--centra-text-secondary);
    margin-top: 2px;
}

/* Zweite/dritte Preiszeile (Phase 118: Jahresabschluss, einmalige Einrichtung). Deutlich kleiner als
   .paket-preis - der Monatsbetrag bleibt die Leitzahl, die anderen ergänzen ihn. */
.paket-preis-zeile[b-hi1uhbz3vv] {
    font-size: 14px;
    font-weight: 600;
    color: var(--centra-text);
    margin-top: 6px;
}

.paket-preis-einheit[b-hi1uhbz3vv] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--centra-text-secondary);
}

/* Umsatzband, für das die Preise dieser Karte gelten (Phase 118). Abgesetzt durch eine feine Linie:
   Es ist keine weitere Zahl, sondern der Gültigkeitsrahmen der Zahlen darüber. */
.paket-band[b-hi1uhbz3vv] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--centra-border);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--centra-text-secondary);
}

.paket-card.active .paket-band[b-hi1uhbz3vv] {
    border-top-color: var(--centra-accent);
}

/* Phase 121: Was in der Preiszeile darüber steckt ("Fibu + Lohn"). Bewusst noch kleiner und blasser
   als .paket-sub - eine Fußnote zur Zahl, keine eigene Aussage. */
.paket-enthalten[b-hi1uhbz3vv] {
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--centra-text-muted);
    margin-top: 1px;
}

/* Die Auswahl-Schaltflächen (frühere .rhythmus-wahl) sind mit Phase 123 nach app.css gewandert und
   heißen dort .ang-wahl - die Angebots-Einstellungen brauchen dieselbe Optik, und eine gescopte
   Regel greift nur in ihrer eigenen Komponente. */

/* Phase 121: die vier Steuerpositionen innerhalb der Steuern-Kachel, untereinander. */
.steuern-kachel[b-hi1uhbz3vv] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
}

/* Hinweis zu einem einzelnen, für dieses Paket nicht kalkulierbaren Block. `.hb-warnung` bringt die
   Optik aus app.css mit - hier nur die Schrift etwas kleiner, damit die schmale Karte nicht kippt. */
.paket-hinweis[b-hi1uhbz3vv] {
    font-size: 11.5px;
    line-height: 1.4;
}

.paket-badge[b-hi1uhbz3vv] {
    margin-top: 10px;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--centra-accent);
    border-radius: 999px;
    padding: 3px 9px;
}

/* Ein Paket ohne hinterlegtes Umsatzband: sichtbar, aber ausdrücklich NICHT wählbar. Deshalb
   `cursor: default` statt pointer und kein Hover-Effekt - die Karte darf nicht so aussehen, als
   würde ein Klick etwas bewirken. Der Grund steht in der Karte selbst statt in einem Sammelhinweis
   unter der Reihe (Nachtrag von Dennis). */
.paket-card.warn[b-hi1uhbz3vv] {
    cursor: default;
    border-style: dashed;
    background: var(--centra-surface);
}

    .paket-card.warn:hover[b-hi1uhbz3vv] {
        border-color: var(--centra-border);
    }

    .paket-card.warn .paket-preis[b-hi1uhbz3vv] {
        font-size: 14px;
        font-weight: 600;
        color: var(--centra-text-muted);
    }

.paket-warn-box[b-hi1uhbz3vv] {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--centra-text-secondary);
}

    .paket-warn-box a[b-hi1uhbz3vv] {
        display: inline-block;
        margin-top: 4px;
        color: var(--centra-accent-text);
        font-weight: 600;
    }

/* ----- ESt-Reiter (Punkt 5) ----- */

/* Beträge in Karten statt in freistehenden .hb-form-Zeilen: Auf dem Reiter liegen fünf
   Wertgruppen untereinander, die vorher nur durch Überschriften getrennt waren. */
.est-card[b-hi1uhbz3vv] {
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
    padding: 15px;
    margin-bottom: 14px;
}

.est-card-title[b-hi1uhbz3vv] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--centra-text);
    margin-bottom: 4px;
}

.est-card-sub[b-hi1uhbz3vv] {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--centra-text-secondary);
    margin-bottom: 12px;
}

.est-fields[b-hi1uhbz3vv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 800px) {
    .est-fields[b-hi1uhbz3vv] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.est-field[b-hi1uhbz3vv] {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
}

    /* Die Eingabefelder kommen als .mp-input aus app.css und bringen ihr eigenes Aussehen mit -
       hier wird nur die Breite auf die Rasterspalte gezogen und der Abstand zur Beschriftung
       gesetzt. */
    .est-field .mp-input[b-hi1uhbz3vv] {
        width: 100%;
        margin-top: 5px;
    }
/* /Components/Pages/Ankuendigungen.razor.rz.scp.css */
/* Phase 136 - Ankuendigungen. Baut auf .card/.badge/.editor-* aus app.css auf. */

.ank[b-p5arpsy3ra] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Phase 148: Hier stand eine feste Zahl (1100px), die auf einem breiten Bildschirm rechts einen
       grossen ungenutzten Bereich liess. Das Projekt hat dafuer laengst einen gemeinsamen,
       responsiven Wert in app.css, den z. B. Zeiterfassung.razor.css schon verwendet - eine zweite,
       eigene Zahl waere derselbe Fehler wie schon in Phase 135 (Urlaubskalender, 560px).

       Der Fliesstext in den Karten wird davon bewusst NICHT mitverbreitert, siehe .ank-inhalt. */
    max-width: var(--centra-content-max-width);
}

.ank-kopf[b-p5arpsy3ra] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* Phase 149 - die Ankuendigungen stehen wieder untereinander.

   Hier stand in Phase 148 ein mehrspaltiges Raster. Es hat den ungenutzten Platz rechts zwar
   gefuellt, sah aber nicht gut aus - eine Ankuendigungsliste liest sich als Abfolge von oben nach
   unten, nicht als Kachelwand.

   **Der urspruengliche Anlass von Phase 148 bleibt trotzdem geloest**, nur an anderer Stelle: Die
   Seite selbst nutzt weiterhin die volle Breite (siehe .ank), und die einzelne Karte wird auf 760px
   gedeckelt (siehe .ank-karte). Damit stehen die Karten schmal und lesbar untereinander, und rechts
   daneben liegt schlicht Seitenhintergrund statt einer breiten, halb leeren Karte. */
.ank-liste[b-p5arpsy3ra] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ank h1[b-p5arpsy3ra] {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 4px;
}

.ank-subtitle[b-p5arpsy3ra] {
    font-size: 13px;
    color: var(--centra-text-secondary);
    margin: 0;
}

.ank-meta[b-p5arpsy3ra] {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    margin-top: 2px;
}

.ank-badge-ablauf[b-p5arpsy3ra] {
    margin-left: 8px;
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
}

.ank-aktionen[b-p5arpsy3ra] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ank-leer[b-p5arpsy3ra] {
    margin: 0;
    font-size: 13px;
    color: var(--centra-text-muted);
}

.ank-status[b-p5arpsy3ra] {
    padding: 9px 12px;
    font-size: 12.5px;
    border-radius: 7px;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
}

    .ank-status.fehler[b-p5arpsy3ra] {
        background: var(--centra-danger-bg);
        border-color: var(--centra-danger-border);
        color: var(--centra-danger-text);
    }

/* Der Inhalt ist bereinigtes HTML aus dem Editor - hier nur die Grundtypografie, damit Listen und
   Absaetze nicht am Browser-Standard haengen. */
/* Phase 148 - eigene Breitenbegrenzung fuer den Fliesstext.

   Die Karte selbst darf seit Phase 148 die volle Seitenbreite nutzen (Kopfzeile, Kartenrahmen und
   die Bildergalerie profitieren davon), der Lesetext aber nicht: Eine Zeile, die ueber einen
   27-Zoll-Monitor laeuft, ist muehsam zu lesen, weil das Auge am Zeilenende den Anfang der naechsten
   Zeile nicht mehr sicher findet.

   **75ch statt einer Pixelzahl**, weil `ch` die Breite der Ziffer 0 der jeweiligen Schrift ist: Die
   Begrenzung haengt damit an der Zahl der Zeichen pro Zeile - genau der Groesse, um die es
   typografisch geht - und nicht an einer Pixelbreite, die bei einer anderen Schriftgroesse wieder
   falsch waere.

   Im Browser nachgemessen (Segoe UI 13,5px): 75ch ergeben 546px, und in eine Zeile passen damit
   tatsaechlich rund 78 Zeichen - also genau die klassische Spanne von 60-80 Zeichen. Die Ziffer 0 ist
   in dieser Schrift etwas breiter als der durchschnittliche Kleinbuchstabe, deshalb liegt die
   tatsaechliche Zeichenzahl leicht ueber dem ch-Wert. */
.ank-inhalt[b-p5arpsy3ra] {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 75ch;
}

    /* Phase 150: ::deep, weil der Inhalt per MarkupString gerendert wird - seine Kindelemente tragen
       kein Blazor-Scope-Attribut, ohne ::deep traf die Regel sie nie. Ausfuehrliche Begruendung in
       RichTextEditor.razor.css. */
    .ank-inhalt[b-p5arpsy3ra]  p {
        margin: 0 0 8px;
    }

    .ank-inhalt[b-p5arpsy3ra]  ul,
    .ank-inhalt[b-p5arpsy3ra]  ol {
        margin: 0 0 8px;
        padding-left: 26px;
        list-style-position: outside;
    }

/* Phase 148/149: Deckelt die Breite der einzelnen Karte.

   Ohne diese Regel waere die Karte so breit wie die Seite - und neben dem auf Lesebreite begrenzten
   Text (siehe .ank-inhalt) klaffte wieder eine leere Flaeche, diesmal INNERHALB der Karte. 760px
   lassen dem Text seine Breite plus Rand fuer Bilder und Kopfzeile.

   Seit Phase 149 (einspaltig) ist das die tragende Regel gegen den Leerraum: Was rechts neben der
   Karte frei bleibt, ist Seitenhintergrund - und der stoert nicht, weil dort erkennbar nichts
   hingehoert. */
.ank-karte[b-p5arpsy3ra] {
    max-width: 760px;
}

.ank-galerie[b-p5arpsy3ra] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

    .ank-galerie img[b-p5arpsy3ra] {
        max-width: 260px;
        max-height: 200px;
        border: 1px solid var(--centra-border);
        border-radius: 8px;
        object-fit: contain;
        background: var(--centra-surface-2);
    }

/* ---------- Editor ---------- */

.ank-editor[b-p5arpsy3ra] {
    width: min(760px, 92vw);
}

.ank-editor-body[b-p5arpsy3ra] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ank-feld[b-p5arpsy3ra] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

    .ank-feld--schmal[b-p5arpsy3ra] {
        max-width: 220px;
    }

    .ank-feld input[b-p5arpsy3ra] {
        font-family: inherit;
        font-size: 13px;
        color: var(--centra-text);
        padding: 7px 10px;
        background: var(--centra-surface);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
    }

.ank-hinweis[b-p5arpsy3ra] {
    margin: 0;
    font-size: 12px;
    color: var(--centra-text-muted);
}

/* Ablagezone: Das native InputFile liegt unsichtbar darueber, damit Klick UND Fallenlassen ohne
   eigenes JavaScript funktionieren. */
.ank-ablage[b-p5arpsy3ra] {
    position: relative;
    padding: 18px;
    text-align: center;
    border: 2px dashed var(--centra-border);
    border-radius: 10px;
    background: var(--centra-surface-2);
    transition: border-color 120ms ease;
}

    .ank-ablage:hover[b-p5arpsy3ra] {
        border-color: var(--centra-accent);
    }

    .ank-ablage input[type="file"][b-p5arpsy3ra] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.ank-ablage-text[b-p5arpsy3ra] {
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    pointer-events: none;
}

    .ank-ablage-text span[b-p5arpsy3ra] {
        font-size: 11.5px;
        color: var(--centra-text-muted);
    }

.ank-bildliste[b-p5arpsy3ra] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ank-bildchip[b-p5arpsy3ra] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    font-size: 12px;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    border-radius: 20px;
}

    .ank-bildchip button[b-p5arpsy3ra] {
        border: none;
        background: none;
        color: inherit;
        cursor: pointer;
        font-size: 12px;
        padding: 0;
    }

/* ---------- Phase 141: Kommentare ---------- */

.ank-kommentare[b-p5arpsy3ra] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--centra-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ank-kommentare-titel[b-p5arpsy3ra] {
    font-size: 12px;
    font-weight: 700;
    color: var(--centra-text-secondary);
}

/* Kommentare setzen sich durch den eingerueckten Rand vom Ankuendigungstext ab - sie sind Beitraege
   ZU der Ankuendigung, nicht Teil von ihr. */
.ank-kommentar[b-p5arpsy3ra] {
    padding-left: 12px;
    border-left: 2px solid var(--centra-border);
}

.ank-kommentar-kopf[b-p5arpsy3ra] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ank-kommentar-name[b-p5arpsy3ra] {
    font-size: 12.5px;
    font-weight: 700;
}

.ank-kommentar-zeit[b-p5arpsy3ra] {
    font-size: 11.5px;
    color: var(--centra-text-muted);
}

/* Phase 148: Gleiche Begruendung wie bei .ank-inhalt - ein Kommentar ist genauso Fliesstext. */
.ank-kommentar-inhalt[b-p5arpsy3ra] {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 75ch;
}

    /* Phase 150: ::deep wie bei .ank-inhalt oben. */
    .ank-kommentar-inhalt[b-p5arpsy3ra]  p {
        margin: 0 0 6px;
    }

    .ank-kommentar-inhalt[b-p5arpsy3ra]  ul,
    .ank-kommentar-inhalt[b-p5arpsy3ra]  ol {
        margin: 0 0 6px;
        padding-left: 26px;
        list-style-position: outside;
    }

.ank-kommentar-aktionen[b-p5arpsy3ra] {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    align-items: center;
}

/* Dezente Textknoepfe statt vollwertiger Schaltflaechen: An jedem Kommentar haengen bis zu drei
   Aktionen - als Knoepfe wuerden sie den Beitrag selbst erschlagen. */
.ank-kommentar-link[b-p5arpsy3ra] {
    padding: 0;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-accent-text);
    background: none;
    border: none;
    cursor: pointer;
}

    .ank-kommentar-link:hover[b-p5arpsy3ra] {
        text-decoration: underline;
    }

    .ank-kommentar-link.gefahr[b-p5arpsy3ra] {
        color: var(--centra-danger-text);
    }

    .ank-kommentar-link:disabled[b-p5arpsy3ra] {
        opacity: .6;
        cursor: default;
    }

.ank-kommentar-neu[b-p5arpsy3ra] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phase 145 - Benachrichtigungen als Glocke mit Klappfeld in der Kopfzeile.
   (Loest den Karten-Bereich aus Phase 143 ab: eine volle Karte war fuer zwei Schalter zu viel Flaeche.) */

.ank-kopf-aktionen[b-p5arpsy3ra] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Bezugspunkt fuer das absolut platzierte Klappfeld. Bewusst OHNE eigenes z-index: sonst entstuende
   hier ein Stapelkontext, und die durchsichtige Schliessflaeche (position: fixed) laege
   zwangslaeufig darin statt ueber der Seite. */
.ank-glocke[b-p5arpsy3ra] {
    position: relative;
}

/* Quadratischer Icon-Knopf in der Groesse des benachbarten .editor-btn, damit beide auf einer Linie
   stehen. */
.ank-glocke-knopf[b-p5arpsy3ra] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-control-radius);
    background: var(--centra-surface);
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

    .ank-glocke-knopf:hover[b-p5arpsy3ra] {
        background: var(--centra-surface-2);
    }

    /* Geoeffnet UND "mindestens ein Schalter an" sehen gleich aus: In beiden Faellen soll die Glocke
       hervortreten. Der Unterschied ist ohnehin sichtbar - einmal steht das Klappfeld offen. */
    .ank-glocke-knopf.offen[b-p5arpsy3ra],
    .ank-glocke-knopf.aktiv[b-p5arpsy3ra] {
        background: var(--centra-accent-bg);
        border-color: var(--centra-accent);
    }

    .ank-glocke-knopf:focus-visible[b-p5arpsy3ra] {
        outline: 2px solid var(--centra-accent);
        outline-offset: 2px;
    }

/* Durchsichtige Flaeche ueber der ganzen Seite: faengt den Klick daneben ab. Bewusst ohne Abdunkeln -
   ein Klappfeld ist kein Dialog, es soll nichts blockieren, sondern sich nur schliessen lassen. */
.ank-glocke-hintergrund[b-p5arpsy3ra] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.ank-glocke-feld[b-p5arpsy3ra] {
    position: absolute;
    top: calc(100% + 8px);
    /* Rechtsbuendig unter der Glocke - nach links waechst das Feld in die Seite hinein, nach rechts
       waere es aus dem Fenster gelaufen. */
    right: 0;
    z-index: 41;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    /* Deutlicher als der normale --centra-shadow: Das Feld schwebt ueber Inhalt und braucht eine
       sichtbare Kante, sonst verschwimmt es mit der Ankuendigungskarte darunter. */
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}

.ank-glocke-titel[b-p5arpsy3ra] {
    font-size: 13px;
    font-weight: 700;
}

    /* Der erklaerende Satz gehoert zum Titel darueber, nicht zum ersten Schalter darunter. */
    .ank-glocke-titel + .ank-hinweis[b-p5arpsy3ra] {
        margin-top: -8px;
    }

@media (max-width: 560px) {
    /* Auf schmalen Fenstern wuerden 320px rechtsbuendig ueber den linken Seitenrand hinausragen. */
    .ank-glocke-feld[b-p5arpsy3ra] {
        width: min(320px, calc(100vw - 32px));
    }
}

/* Phase 147, Teil C - Suchfeld ueber der Liste. Bewusst ohne Kartenrahmen: Es ist ein Bedienelement
   der Seite, keine eigene Inhaltseinheit - eine weitere Karte haette die Seite nur zergliedert. */
.ank-suche[b-p5arpsy3ra] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ank-suche input[b-p5arpsy3ra] {
        /* Breit genug fuer einen Suchbegriff samt Platzhaltertext, aber keine Feldwueste ueber die
           ganze (seit Phase 148 breite) Seite. */
        width: min(420px, 100%);
        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);
    }

    .ank-suche input:focus-visible[b-p5arpsy3ra] {
        outline: 2px solid var(--centra-accent);
        outline-offset: 1px;
    }

.ank-suche-treffer[b-p5arpsy3ra] {
    font-size: 12px;
    color: var(--centra-text-muted);
}
/* /Components/Pages/DatevAuftraegeTest.razor.rz.scp.css */
.dvt-banner[b-bwq7cx6snh] {
    background: var(--centra-danger-bg);
    border: 1px solid var(--centra-danger-border);
    color: var(--centra-danger-text);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* Phase 62, Nachbesserung 3 - Filterzeile (Mandantennummer/Auftragsname/Jahr + "Laden"-Button), gleiches
   Label-/Eingabefeld-Muster wie .eval-employee-picker (app.css), hier lokal für <input> statt <select>. */
.dvt-filter-row[b-bwq7cx6snh] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px;
}

    .dvt-filter-row label[b-bwq7cx6snh] {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 12.5px;
        color: var(--centra-text-secondary);
        font-weight: 600;
    }

    .dvt-filter-row input[b-bwq7cx6snh] {
        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: 160px;
    }

.dvt-no-suborders[b-bwq7cx6snh] {
    color: var(--centra-text-muted);
    font-style: italic;
}

/* Auftrag vom 16.08.2026 - die Rohdaten-Zeile trennt sich optisch von den Auftragszeilen darüber, damit
   die Tabelle trotz des Aufklapp-Elements lesbar bleibt. */
.dvt-rohdaten-zeile > td[b-bwq7cx6snh] {
    background: var(--centra-surface-2);
    border-bottom: 2px solid var(--centra-border);
}

.dvt-raw-json[b-bwq7cx6snh] {
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    font-family: "Cascadia Code", "Consolas", monospace;
    overflow-x: auto;
    white-space: pre;
}
/* /Components/Pages/DatevVerbindungstest.razor.rz.scp.css */
.dvt-banner[b-mm2w3f00aj] {
    background: var(--centra-danger-bg);
    border: 1px solid var(--centra-danger-border);
    color: var(--centra-danger-text);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 16px;
}
/* /Components/Pages/Einstellungen.razor.rz.scp.css */
/* Komponenten-gescoptes CSS für Einstellungen.razor.
 *
 * Hier stehen nur noch Regeln, die AUSSCHLIESSLICH diese Seite braucht. Die gemeinsam genutzten
 * .es-*-Klassen sind nach wwwroot/app.css umgezogen: Blazor hängt an jede Regel einer .razor.css
 * ein komponenteneigenes b-xxxxxxxx-Attribut, weshalb sie in AngebotKonfiguration.razor trotz
 * gleicher Klassennamen nicht gegriffen haben - die Seite rendert dort ungestylt.
 * Siehe CHECK.md zu diesem Punkt.
 */

.einstellungen[b-4judg1fdt9] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Nachtrag vom 17.08.2026 (Dennis nach der Reiter-Umstellung: „viel zu schmal"): vorher 900px, was
       für die frühere einspaltige Karten-Seite gedacht war.

       Bewusst NICHT --centra-content-max-width (min(95vw, 2200px)) wie in den Auswertungen: Dort füllen
       Tabellen mit vielen Spalten und Diagramme die Breite tatsächlich aus. Hier stehen Formularfelder
       mit festen Breiten (90px bzw. 260px im Briefkopf) - jenseits von etwa 1500px entstünde rechts nur
       leere Fläche, und die Erklärtexte würden zu überlangen Zeilen. 1500px nutzt auf den üblichen
       Full-HD-Bildschirmen praktisch die volle Breite (mit den 95vw als Rand), lässt die Seite auf sehr
       breiten Monitoren aber nicht auseinanderlaufen; die breiten Abschnitte (Kostensatz-Übersicht,
       Freigeber-Liste, Briefkopf-Felder) profitieren voll davon. */
    max-width: min(95vw, 1500px);
    margin: 0 auto;
    width: 100%;
}

    .einstellungen h1[b-4judg1fdt9] {
        margin: 0 0 4px;
    }

/* Logo-Upload - gibt es nur auf dieser Seite. */
.es-logo-row[b-4judg1fdt9] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.es-logo-preview[b-4judg1fdt9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    padding: 6px;
    flex-shrink: 0;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    background: var(--centra-surface-2);
}

    .es-logo-preview img[b-4judg1fdt9] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Phase 82 - Farbwaehler fuer die Kanzleifarbe im Angebots-PDF. Ein natives <input type="color">
   bringt browsereigene Groessen mit, die neben den uebrigen Briefkopf-Feldern zu klein/hoch
   ausfallen - hier auf die Hoehe der Textfelder daneben gebracht. */
.es-farbwahl[b-4judg1fdt9] {
    width: 100%;
    min-width: 90px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    background: var(--centra-surface);
    cursor: pointer;
}

/* Phase 131 - Urlaubs-Freigeber. Button-Stil statt Checkbox (gleiche Linie wie seit Phase 123, siehe
   KlickbaresFeld): Der Schalter sagt im Klartext, was gerade gilt, statt es als Haken zu codieren.
   Eine Liste, weil die Mitarbeiterzahl einer Kanzlei ueberschaubar ist - ein Suchfeld waere hier
   mehr Bedienung als Nutzen. */
.es-freigeber-liste[b-4judg1fdt9] {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
}

.es-freigeber-zeile[b-4judg1fdt9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--centra-border);
}

    .es-freigeber-zeile:last-child[b-4judg1fdt9] {
        border-bottom: none;
    }

.es-freigeber-name[b-4judg1fdt9] {
    font-size: 13px;
}

.es-freigeber-schalter[b-4judg1fdt9] {
    flex-shrink: 0;
    min-width: 118px;
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .es-freigeber-schalter:hover:not(:disabled)[b-4judg1fdt9] {
        border-color: var(--centra-accent);
    }

    /* Aktiver Zustand in der Akzentfarbe - dieselbe Sprache wie .badge, damit "ist Freigeber" auf den
       ersten Blick zur uebrigen Oberflaeche passt. */
    .es-freigeber-schalter.aktiv[b-4judg1fdt9] {
        background: var(--centra-accent-bg);
        color: var(--centra-accent-text);
        border-color: var(--centra-accent);
    }

    .es-freigeber-schalter:disabled[b-4judg1fdt9] {
        opacity: .6;
        cursor: default;
    }

/* Phase 133 (C) - zwei Schalter je Zeile: Selbstfreigabe (nur bei Freigebern) und Freigeber selbst. */
.es-freigeber-schalter-gruppe[b-4judg1fdt9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    /* Der Selbstfreigabe-Schalter ist die Ausnahme von der Regel und tritt deshalb zurueck. */
    .es-freigeber-schalter.klein[b-4judg1fdt9] {
        min-width: 0;
        font-size: 11.5px;
        padding: 3px 9px;
    }

/* Auftrag vom 15.08.2026, Teil 4 - Kostensatz-/Verrechnungssatz-Übersicht. Bewusst ein Grid und keine
   <table>: Die vierte Spalte enthält ein Eingabefeld samt Knopf, und die Spaltenbreiten sollen fest
   bleiben, damit die Zahlenspalten untereinander stehen. */
.es-saetze-tabelle[b-4judg1fdt9] {
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
}

.es-saetze-kopf[b-4judg1fdt9],
.es-saetze-zeile[b-4judg1fdt9] {
    display: grid;
    /* Auftrag vom 16.08.2026: sechs Spalten - neue, nur lesende Spalte „Interner Verrechnungssatz (DATEV)". */
    grid-template-columns: minmax(160px, 1.6fr) 1fr minmax(120px, 1.1fr) 1fr minmax(190px, 1.2fr) minmax(96px, auto);
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--centra-border);
    font-size: 13px;
}

.es-saetze-kopf[b-4judg1fdt9] {
    position: sticky;
    top: 0;
    background: var(--centra-surface);
    font-weight: 600;
    color: var(--centra-text-muted);
    font-size: 12px;
}

.es-saetze-zeile:last-child[b-4judg1fdt9] {
    border-bottom: none;
}

/* Fehlende Sätze sollen "auf einen Blick" auffallen - deshalb zusätzlich zur Sortierung nach oben
   eine ruhige, aber eindeutige Hinterlegung (kein Rot: Es ist ein Pflegehinweis, keine Störung). */
.es-saetze-zeile.unvollstaendig[b-4judg1fdt9] {
    background: var(--centra-accent-bg);
}

.es-saetze-name[b-4judg1fdt9] {
    display: flex;
    flex-direction: column;
}

.es-saetze-nummer[b-4judg1fdt9] {
    font-size: 11px;
    color: var(--centra-text-muted);
}

.es-saetze-eingabe[b-4judg1fdt9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .es-saetze-eingabe input[b-4judg1fdt9] {
        width: 96px;
    }

.es-saetze-badge[b-4judg1fdt9] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

    /* "Fallback aktiv" ist eine Erfolgsmeldung: Centra rechnet trotz fehlender DATEV-Angabe weiter. */
    .es-saetze-badge.fallback[b-4judg1fdt9] {
        background: rgba(46, 125, 50, 0.12);
        color: #2E7D32;
    }

    /* Weder DATEV noch Centra kennen einen Kostensatz - dieser Mitarbeiter fehlt im Kostenteil. */
    .es-saetze-badge.fehlt[b-4judg1fdt9] {
        background: rgba(198, 40, 40, 0.10);
        color: #C62828;
    }

/* ---------- Auftrag vom 17.08.2026: großzügigere Optik ----------

   Dennis' Wunsch war „mehr Weißraum, aufgeräumter" ohne Einzelvorgaben. Alle Werte hier sind bewusst
   SEITENGESCOPT (Blazor hängt an jede Regel dieser Datei das komponenteneigene b-xxx-Attribut) - die
   zugrunde liegenden es-Klassen und .card-Klassen aus app.css teilen sich diese Seite u. a. mit
   AngebotKonfiguration.razor, und die soll sich nicht mitverändern. Die zusätzliche `.einstellungen`-
   Verschachtelung gibt den Regeln zugleich die höhere Spezifität, die zum Überschreiben nötig ist.

   Orientierung: die 24px-Abstände der `.eval-panel-groups` aus den Auswertungen (dort als angenehm
   empfunden), statt der sonst üblichen 18px. */

.einstellungen[b-4judg1fdt9] {
    /* Abstand zwischen Überschrift, Reiterleiste und Karte. */
    gap: 24px;
}

    /* Luft zwischen der Reiterleiste und der Karte darunter - die Panels liegen sonst direkt an den
       Reitern und wirken angeklebt. `::deep`, weil MudTabs eine eigene Komponente ist und deren
       Wrapper das b-xxx-Attribut dieser Seite nicht trägt. */
    .einstellungen[b-4judg1fdt9]  .es-tabs .mud-tabs-panels {
        padding-top: 18px;
    }

    /* Mehr Innenabstand in den Karten (vorher 12/18/18). */
    .einstellungen .card-body[b-4judg1fdt9] {
        padding: 20px 24px 24px;
    }

    /* Abstand zwischen den Abschnitten einer Karte (vorher 22px). */
    .einstellungen .es-leadership-body[b-4judg1fdt9] {
        gap: 30px;
    }

    /* Abschnittsüberschrift etwas kräftiger absetzen (vorher 14px / 6px Abstand). */
    .einstellungen .es-section h3[b-4judg1fdt9] {
        margin: 0 0 10px;
        font-size: 15px;
    }

    /* Erklärtexte bleiben inhaltlich unangetastet (ausdrücklich gewünscht) - nur etwas mehr Luft
       zwischen Text und den Eingabefeldern darunter.

       Nachtrag vom 17.08.2026 (Breite): Die Eingabefelder haben feste Breiten und werden von der neuen
       Seitenbreite nicht gestreckt - die Fließtexte schon. `max-width` in Zeichen begrenzt sie auf eine
       gut lesbare Zeilenlänge, statt sie über 1500px zu ziehen. */
    .einstellungen .es-hint[b-4judg1fdt9] {
        margin-bottom: 16px;
        line-height: 1.5;
        max-width: 105ch;
    }

    /* Formularzeilen: etwas mehr Abstand zueinander und zwischen den Feldern. */
    .einstellungen .es-window-row[b-4judg1fdt9] {
        gap: 18px;
        margin-bottom: 14px;
    }

    /* Der dichteste Teil der Seite: die vier Unterabschnitte des Briefkopfs (Anschrift und Kontakt /
       Berufsangaben / Handelsregister / Farben im Angebots-PDF) standen mit 14px Abstand direkt
       untereinander. Jetzt deutlich abgesetzt - mit feiner Trennlinie, damit die Gruppen auch ohne
       Scrollen erkennbar sind. Der erste Untertitel braucht den zusätzlichen Abstand nicht. */
    .einstellungen .es-untertitel[b-4judg1fdt9] {
        margin: 28px 0 10px;
        padding-top: 20px;
        border-top: 1px solid var(--centra-border);
        font-size: 12.5px;
    }

        .einstellungen .es-untertitel:first-of-type[b-4judg1fdt9] {
            margin-top: 6px;
            padding-top: 0;
            border-top: none;
        }
/* /Components/Pages/Login.razor.rz.scp.css */
.login-card[b-ajodsgep7m] {
    width: 100%;
    max-width: 380px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius-lg);
    padding: 32px 30px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

/* Auftrag vom 15.08.2026: animiertes Vektor-Logo (wwwroot/images/centra-logo-animated.svg) statt der
   früheren "C Centra"-Textzeile (.login-brand/.login-brand-mark, ersatzlos entfernt). Größe und
   Zentrierung bewusst hier am <img> und nicht in der SVG-Datei - siehe Kommentar in Login.razor. */
.login-logo[b-ajodsgep7m] {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 20px;
}

.login-subtitle[b-ajodsgep7m] {
    margin: 0 0 22px;
    color: var(--centra-text-secondary);
    font-size: 13.5px;
}

.login-error[b-ajodsgep7m] {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
    border: 1px solid var(--centra-danger-border);
    border-radius: var(--centra-radius);
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

.login-label[b-ajodsgep7m] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    margin: 14px 0 6px;
}

.login-input[b-ajodsgep7m] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    font-size: 14px;
    background: var(--centra-surface-2);
    color: var(--centra-text);
}

.login-input:focus[b-ajodsgep7m] {
    outline: 2px solid var(--centra-accent);
    outline-offset: 1px;
}

.login-button[b-ajodsgep7m] {
    width: 100%;
    margin-top: 22px;
    padding: 11px;
    border: none;
    border-radius: var(--centra-radius);
    background: var(--centra-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.login-button:hover[b-ajodsgep7m] {
    background: var(--centra-accent-text);
}

.login-hint[b-ajodsgep7m] {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--centra-border);
    font-size: 11.5px;
    color: var(--centra-text-muted);
}

    .login-hint ul[b-ajodsgep7m] {
        margin: 6px 0 0;
        padding-left: 18px;
    }

    .login-hint code[b-ajodsgep7m] {
        background: var(--centra-surface-2);
        padding: 1px 4px;
        border-radius: 4px;
    }
/* /Components/Pages/MandantenOnboarding.razor.rz.scp.css */
.mo-type-toggle[b-25hrzc6x77] {
    display: inline-flex;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

    .mo-type-toggle button[b-25hrzc6x77] {
        border: none;
        background: var(--centra-surface);
        color: var(--centra-text-secondary);
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

        .mo-type-toggle button.active[b-25hrzc6x77] {
            background: var(--centra-accent);
            color: #fff;
        }

.mo-section-label[b-25hrzc6x77] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--centra-text-muted);
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--centra-border);
}

/* Phase 97 (Issue M6): Hinweis, dass ein angelegter Mandant nur in DATEV wieder löschbar ist.
   Bewusst in der Warnfarbe und direkt über dem Knopf - er soll gelesen werden, bevor geklickt
   wird, aber niemanden mit einem Bestätigungsdialog aufhalten. */
.mo-warnung[b-25hrzc6x77] {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--centra-danger-bg);
    border: 1px solid var(--centra-danger-border);
    color: var(--centra-danger-text);
    font-size: 12.5px;
}

.mo-actions[b-25hrzc6x77] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.mo-list-card[b-25hrzc6x77] {
    margin-top: 20px;
}

/* Phase 100: Rückmeldung zur Mandantennummer direkt am Feld. Klein und unter dem Eingabefeld -
   sie soll die Zeilenhöhe nicht sprengen, aber beim Tippen sichtbar sein. */
.mo-nummer-frei[b-25hrzc6x77],
.mo-nummer-vergeben[b-25hrzc6x77] {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.mo-nummer-frei[b-25hrzc6x77] {
    color: var(--centra-success-text);
}

.mo-nummer-vergeben[b-25hrzc6x77] {
    color: var(--centra-danger-text);
}

/* Phase 103: Duplikat-Hinweis als anklickbare Trefferliste.

   Bewusst die AKZENT-Farbe und nicht die Warnfarbe wie ".mo-nummer-vergeben": Ein Namensvorschlag ist
   kein Fehlerzustand, sondern eine Einladung zum Nachsehen. Rot würde hier eine Sperre suggerieren,
   die es ausdrücklich nicht gibt.

   Alle Farben aus den Tokens in app.css - dort steht, dass ein Re-Theming durch Anpassen dieser Werte
   möglich sein soll, und eigene Hex-Werte im Komponenten-CSS würden das unterlaufen. */
.mo-duplikat-box[b-25hrzc6x77] {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface);
}

.mo-duplikat-intro[b-25hrzc6x77] {
    font-size: 12px;
    font-weight: 600;
    color: var(--centra-accent-text);
    margin-bottom: 6px;
}

.mo-duplikat-liste[b-25hrzc6x77] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Ein Treffer ist eine Schaltfläche, kein Text - er tut etwas.

   Phase 105: deutlich großzügiger als vorher (6px/12.5px). Die Zeile soll sich wie ein bequem
   klickbares Listenelement anfühlen, nicht wie eine Randnotiz - sie ist der Weg, eine unlöschbare
   Dublette zu vermeiden. */
.mo-duplikat-treffer[b-25hrzc6x77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    color: var(--centra-text);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    cursor: pointer;
}

    .mo-duplikat-treffer:hover[b-25hrzc6x77] {
        border-color: var(--centra-accent);
    }

    .mo-duplikat-treffer.ausgewaehlt[b-25hrzc6x77] {
        background: var(--centra-accent-bg);
        border-color: var(--centra-accent);
        color: var(--centra-accent-text);
    }

.mo-duplikat-name[b-25hrzc6x77] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Handlungsaufforderung bleibt schmal, damit der Name den Platz bekommt. */
.mo-duplikat-uebernehmen[b-25hrzc6x77] {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--centra-accent);
}

.mo-duplikat-treffer.ausgewaehlt .mo-duplikat-uebernehmen[b-25hrzc6x77] {
    color: var(--centra-accent-text);
}

/* Phase 105: Die Visitenkarte. Bewusst exakt das Rezept von .card in app.css (Fläche, Rahmen,
   Radius, Schatten) - sie soll wie ein Teil der Anwendung aussehen, nicht wie ein Sonderfall.

   Farben ausschließlich aus den Tokens; siehe den Kommentar in app.css zum Re-Theming. */
.mo-visitenkarte[b-25hrzc6x77] {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    box-shadow: var(--centra-shadow);
}

.mo-visitenkarte-kopf[b-25hrzc6x77] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.mo-visitenkarte-marke[b-25hrzc6x77] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--centra-accent);
}

/* Der Name ist die Überschrift der Karte - er beantwortet die Frage "mit wem". */
.mo-visitenkarte-name[b-25hrzc6x77] {
    font-size: 15px;
    font-weight: 600;
    color: var(--centra-text);
}

/* Mehrzeilig wie eine Adresse auf einer echten Karte, nicht als Satz. */
.mo-visitenkarte-anschrift[b-25hrzc6x77] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--centra-text-secondary);
}

.mo-visitenkarte-hinweis[b-25hrzc6x77] {
    margin-top: 4px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--centra-text-muted);
}

/* Klein und unaufdringlich - das Zurücksetzen ist der Ausnahmefall. */
.mo-duplikat-andere[b-25hrzc6x77] {
    flex: 0 0 auto;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--centra-accent-text);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}

.mo-duplikat-fuss[b-25hrzc6x77] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--centra-text-secondary);
}
/* /Components/Pages/MandantenOnboardingEinstellungen.razor.rz.scp.css */
/* Phase 105: Die neun Feld-Schalter. Zweispaltig, damit die Liste nicht als lange Kolonne
   herunterläuft - bei neun Einträgen sieht man so alle auf einen Blick. */
.mo-felder[b-2vlau498k6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 24px;
    margin: 14px 0 18px;
}

/* Die Erläuterung sagt, was zu einem zusammengefassten Schalter gehört ("Straße, PLZ, Ort und
   Land") - sie ist Beiwerk und soll die Beschriftung nicht überstimmen. */
.mo-feld-erlaeuterung[b-2vlau498k6] {
    margin-left: 6px;
    font-size: 12px;
    color: var(--centra-text-muted);
}

.mo-actions[b-2vlau498k6] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Mandantenuebersicht.razor.rz.scp.css */
/* Phase 80 - nur die wenigen Ergänzungen, die das gemeinsame Kartenraster aus app.css für diese Seite
   braucht. Alles andere (Karten, Kachelreihe, Tabelle, Badges) kommt bewusst unverändert von dort,
   damit die Seite wie der Rest der Anwendung aussieht und ein späterer Themenwechsel zentral bleibt. */

/* Die Kacheln der Mandanten-Detailansicht tragen Text statt Kennzahlen. .eval-summary-value ist auf
   große, kurze Zahlen ausgelegt (Stunden/Beträge) - eine IBAN oder ein Firmenname in dieser Größe
   sprengt die Kachel und wird abgeschnitten. */
.mu-value-text[b-xl01opkfz4] {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    /* Lange Werte ohne Leerzeichen (IBAN, E-Mail-Adressen) müssen umbrechen dürfen. */
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Kontrollkästchen der Listen-Werkzeugleiste, damit es auf derselben Linie wie das Suchfeld sitzt. */
.mu-filter-check[b-xl01opkfz4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    cursor: pointer;
}

/* Zwischenüberschrift einer Mandantengruppe (25.08.2026). Bewusst zurückhaltend: Sie soll die
   Tabelle gliedern, nicht mit den Datenzeilen um Aufmerksamkeit konkurrieren. */
.mu-gruppenzeile th[b-xl01opkfz4] {
    text-align: left;
    padding: 12px 8px 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    border-bottom: 1px solid var(--centra-border);
}

/* Phase 106 (Issue #31/M9): Aktionszeile in der Anschrift-Karte. Rechtsbündig und mit etwas Abstand
   nach oben, damit die Schaltflächen nicht an der Adresse kleben. */
.mu-anschrift-aktionen[b-xl01opkfz4] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* Phase 107 (Issue #32/M10): Beschriftung links, Kopieren-Knopf rechts. Der Knopf soll die
   Kartenhöhe nicht verändern, deshalb sitzt er in derselben Zeile wie die Beschriftung. */
.mu-label-zeile[b-xl01opkfz4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
/* /Components/Pages/MitarbeiterOnboarding.razor.rz.scp.css */
.mo-step-toggle[b-ke2cdamut4] {
    display: flex;
    width: 100%;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 4px;
}

    .mo-step-toggle button[b-ke2cdamut4] {
        flex: 1;
        border: none;
        background: var(--centra-surface);
        color: var(--centra-text-secondary);
        padding: 8px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

        .mo-step-toggle button.active[b-ke2cdamut4] {
            background: var(--centra-accent);
            color: #fff;
        }

        .mo-step-toggle button:disabled:not(.active)[b-ke2cdamut4] {
            cursor: default;
            opacity: .55;
        }

/* Zeilenabstand im Formular des Assistenten (30.08.2026, Runde 235).

   Gemessen war der Abstand zwischen zwei gestapelten Formularzeilen **0 px**: `.editor-row` und
   `.editor-field` sind schlichte Blockelemente ohne Außenabstand, und anders als die Dialoge des
   Produkts steckt dieses Formular nicht in einem `.editor-body` (das brächte `gap: 12px` mit).
   Die Beschriftung einer Zeile klebte dadurch am Eingabefeld der Zeile darüber und sah aus, als
   gehöre sie noch dorthin - innerhalb einer Zeile trennt `.editor-field` Beschriftung und Feld
   mit 5 px, zwischen zwei Zeilen lagen 0 px.

   ⚑ Die 12 px sind nicht gegriffen: Es ist derselbe Wert, den `.editor-body` in app.css für
   Formularzeilen verwendet - dieselbe Begründung wie bei der Fußzeile in Runde 234. Die Seite
   bekommt damit den Abstand des Produkts, keinen eigenen.

   ⚠️ Diese Datei ist seitengebunden (page-scoped): Die Regel gilt NUR im Assistenten. Die
   gemeinsamen Klassen in app.css bleiben unangetastet, andere Formulare und Dialoge ändern sich
   nicht. */
.editor-row[b-ke2cdamut4],
.editor-field[b-ke2cdamut4] {
    margin-top: 12px;
}

    /* Innerhalb einer Zeile stehen die Felder nebeneinander - dort wäre ein Außenabstand oben
       falsch, er würde die ganze Zeile verschieben. */
    .editor-row > .editor-field[b-ke2cdamut4] {
        margin-top: 0;
    }

.mo-section-label[b-ke2cdamut4] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--centra-text-muted);
    /* 30.08.2026 (Runde 235): 6 → 12 px, damit die Abschnitts-Überschriften im selben Takt stehen
       wie die Formularzeilen darüber. Bei 6 px saß die gestrichelte Linie merklich näher am
       vorigen Feld, als die Zeilen zueinander stehen - dieselbe Enge, nur eine Zeile tiefer. */
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--centra-border);
}

/* Fußzeile mit den Schritt-Knöpfen (30.08.2026, Runde 234).

   Vorher: nur `margin-top: 4px`, keine Linie - der „Weiter"-Knopf klebte unter dem letzten
   Formularelement und sah aus, als gehöre er noch dazu.

   ⚑ Durchgezogene Linie, nicht gestrichelt: Die gestrichelte Linie von `.mo-section-label`
   gliedert das Formular INNEN (hier beginnt ein neuer Abschnitt derselben Karte). Diese Linie
   trennt dagegen die Aktionen VOM Formular - dafür gibt es im Projekt längst eine Formensprache,
   `.editor-actions` in app.css: `border-top: 1px solid var(--centra-border)`, 14 px Innenabstand.
   Die ist hier übernommen, damit die Fußzeile des Assistenten aussieht wie jede andere
   Aktionsfußzeile in Centra. */
.mo-actions[b-ke2cdamut4] {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--centra-border);
}

.mo-list-card[b-ke2cdamut4] {
    margin-top: 20px;
}

.mo-hint[b-ke2cdamut4] {
    font-size: 13px;
    color: var(--centra-text-muted);
    margin-top: -4px;
}

.mo-checkbox-group[b-ke2cdamut4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.mo-checkbox[b-ke2cdamut4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.mo-optional[b-ke2cdamut4] {
    font-weight: 400;
    color: var(--centra-text-muted);
}

.mo-actions-split[b-ke2cdamut4] {
    justify-content: space-between;
}

.mo-confirm-btn[b-ke2cdamut4] {
    margin-left: 10px;
    padding: 2px 10px;
    font-size: 12px;
}
/* /Components/Pages/Urlaub.razor.rz.scp.css */
/* Phase 131 - Urlaubsseite. Baut auf den bestehenden Bausteinen aus app.css auf (.card, .list-item,
   .badge, .editor-btn); hier steht nur, was ausschliesslich fuer diese Seite gilt. */

/* Phase 135, beim Untersuchen der Breite aufgefallen: Die Seite hatte seit Phase 131 als einzige gar
   keine Polsterung - der Inhalt klebte am Fensterrand, während Zeiterfassung, Einstellungen und die
   übrigen Seiten durchgehend padding: 32px verwenden. Nachgezogen, damit sich das Urlaubsmodul in die
   Kanzleioberfläche einfügt statt aus der Reihe zu fallen. */
.ub[b-qu03hjnh8o] {
    padding: 32px;
}

.ub h1[b-qu03hjnh8o] {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 4px;
}

.ub-subtitle[b-qu03hjnh8o] {
    font-size: 13px;
    color: var(--centra-text-secondary);
    margin: 0 0 14px;
}

/* Der Hinweis, dass eine Genehmigung keine Zeit bucht. Bewusst dauerhaft sichtbar und nicht als
   einmalige Meldung: Es ist die eine Sache an diesem Ablauf, die man falsch erwartet. */
.ub-merksatz[b-qu03hjnh8o] {
    margin-bottom: 16px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    background: var(--centra-accent-bg);
    border: 1px solid var(--centra-accent);
    border-radius: 8px;
}

/* ---------- Antragsformular ---------- */

.ub-formular[b-qu03hjnh8o] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 560px;
    padding-top: 6px;
}

.ub-feldzeile[b-qu03hjnh8o] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.ub-formular label[b-qu03hjnh8o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.ub-formular input[type="date"][b-qu03hjnh8o],
.ub-formular textarea[b-qu03hjnh8o] {
    font-family: inherit;
    font-size: 13px;
    color: var(--centra-text);
    padding: 7px 10px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 7px;
}

.ub-formular textarea[b-qu03hjnh8o] {
    resize: vertical;
}

.ub-kommentar[b-qu03hjnh8o] {
    width: 100%;
}

/* Halbtags-Schalter im Button-Stil statt Kontrollkaestchen - gleiche Linie wie die uebrige
   Oberflaeche seit Phase 123 (KlickbaresFeld). Der Schalter sagt im Klartext, was gerade gilt. */
.ub-halbtag[b-qu03hjnh8o] {
    flex-shrink: 0;
    min-width: 104px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

    .ub-halbtag:hover[b-qu03hjnh8o] {
        border-color: var(--centra-accent);
    }

    .ub-halbtag.aktiv[b-qu03hjnh8o] {
        background: var(--centra-accent-bg);
        color: var(--centra-accent-text);
        border-color: var(--centra-accent);
    }

.ub-hinweis[b-qu03hjnh8o] {
    margin: 0;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
}

.ub-status[b-qu03hjnh8o] {
    padding: 8px 12px;
    font-size: 12.5px;
    border-radius: 7px;
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
}

    .ub-status.fehler[b-qu03hjnh8o] {
        background: var(--centra-danger-bg);
        border-color: var(--centra-danger-border);
        color: var(--centra-danger-text);
    }

/* ---------- Antragslisten ---------- */

.ub-leer[b-qu03hjnh8o] {
    padding: 18px 0;
    font-size: 13px;
    color: var(--centra-text-muted);
}

.ub-zeile[b-qu03hjnh8o] {
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ub-zeile-rechts[b-qu03hjnh8o] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ub-ablehnung[b-qu03hjnh8o] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 460px;
}

    .ub-ablehnung textarea[b-qu03hjnh8o] {
        font-family: inherit;
        font-size: 13px;
        color: var(--centra-text);
        padding: 7px 10px;
        background: var(--centra-surface);
        border: 1px solid var(--centra-border);
        border-radius: 7px;
        resize: vertical;
    }

.ub-ablehnung-knoepfe[b-qu03hjnh8o] {
    display: flex;
    gap: 8px;
}

/* Status-Kennzeichnung auf den vorhandenen Farbtoken - genehmigt = Erfolg, abgelehnt = Gefahr.
   "Offen" behaelt den Akzentstil, den .badge ohnehin mitbringt. */
.ub-badge-genehmigt[b-qu03hjnh8o] {
    background: var(--centra-surface-2);
    color: var(--centra-success-text);
}

.ub-badge-abgelehnt[b-qu03hjnh8o] {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
}

.ub-badge-zurueckgezogen[b-qu03hjnh8o] {
    background: var(--centra-surface-2);
    color: var(--centra-text-muted);
}

/* ---------- Phase 133 ---------- */

/* (E) Mehr Luft in den Listen. Die geerbte Regel aus app.css hat padding: 9px 0 - im Urlaubsmodul
   stehen pro Zeile aber bis zu vier Textzeilen plus Schaltflaechen, das wirkt damit gedraengt.
   Ein eindeutiges Vorbild fuer Listenzeilen gibt es im Projekt nicht; die vergleichbaren Zeilen- und
   Kartenabstaende liegen zwischen 12px (DatevAuftraegeTest) und 15px (Angebotsrechner). 14px liegt in
   diesem Band und ist rund die Haelfte mehr als bisher - spuerbar, ohne aus der Reihe zu fallen.
   Bewusst nur hier ueberschrieben und nicht in app.css: Die anderen Module nutzen .list-item fuer
   einzeilige Eintraege (Termine, Aufgaben), dort waere es zu viel. */
.ub-zeile.list-item[b-qu03hjnh8o] {
    padding: 14px 2px;
    gap: 16px;
}

    /* Die Unterzeilen liegen sonst direkt aufeinander. */
    .ub-zeile .list-sub + .list-sub[b-qu03hjnh8o] {
        margin-top: 3px;
    }

    .ub-zeile .list-title[b-qu03hjnh8o] {
        margin-bottom: 2px;
    }

/* (E) Auch das Formular bekommt mehr Luft - gleiche Begruendung. */
.ub-formular[b-qu03hjnh8o] {
    gap: 20px;
}

.ub-feldzeile[b-qu03hjnh8o] {
    flex-wrap: wrap;
    gap: 14px;
}

/* (G) Bestaetigungsschritt beim Absenden. */
.ub-bestaetigung[b-qu03hjnh8o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 340px;
}

.ub-bestaetigung-zeitraum[b-qu03hjnh8o] {
    font-size: 14px;
    font-weight: 700;
}

.ub-bestaetigung textarea[b-qu03hjnh8o] {
    font-family: inherit;
    font-size: 13px;
    color: var(--centra-text);
    padding: 7px 10px;
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    resize: vertical;
    width: 100%;
}

/* (C) Kennzeichnung des eigenen Antrags in der Freigabeliste, wenn Selbstfreigabe erlaubt ist. */
.ub-badge-eigener[b-qu03hjnh8o] {
    margin-left: 8px;
    background: var(--centra-surface-2);
    color: var(--centra-text-secondary);
}

/* ---------- Phase 135 ---------- */

.ub-antrag[b-qu03hjnh8o] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Der Kalender braucht eigene Breite. Bis Phase 134 steckte er in .ub-formular und erbte dessen
   max-width: 560px - gedacht fuer die Datumsfelder. Bei minmax(210px, 1fr) und 16px Abstand passten
   dort nur zwei Monatsspalten (210+16+210 = 436px; eine dritte haette 226px mehr gebraucht), voellig
   unabhaengig von der Bildschirmbreite.

   1400px als Obergrenze, nicht ungebremst: Die Tageszellen haben aspect-ratio: 1 bei fester
   Schriftgroesse von 11,5px - je breiter die Spalte, desto hoeher und blockiger die Zelle, ohne dass
   die Zahl mitwaechst. Bei 1400px sind es hoechstens sechs Spalten (6 × 210 + 5 × 16 = 1340px), eine
   siebte braeuchte 1566px. Sechs Spalten heisst: das Jahr auf zwei Zeilen, und die Zellen bleiben in
   der Groesse, in der sie entworfen wurden. Darunter greift weiterhin auto-fill und nimmt so viele
   Spalten, wie hineinpassen - genau der Mechanismus, der schon vorher richtig war. */
.ub-kalender-bereich[b-qu03hjnh8o] {
    max-width: 1400px;
}
/* /Components/Pages/Zeiterfassung.razor.rz.scp.css */
.zeiterfassung[b-avx4v6yzs9] {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--centra-content-max-width);
    margin: 0 auto;
    width: 100%;
}

.ze-header[b-avx4v6yzs9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .ze-header h1[b-avx4v6yzs9] {
        margin: 0 0 4px;
    }

.ze-subtitle[b-avx4v6yzs9] {
    margin: 0;
    color: var(--centra-text-secondary);
    font-size: 13.5px;
}

.ze-header-actions[b-avx4v6yzs9] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ze-status[b-avx4v6yzs9] {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    /* Phase 110 (Issue #3): Die Push-Meldung listet abgelehnte Einträge zeilenweise auf. `pre-line`
       erhält genau die eingefügten Zeilenumbrüche, lässt aber - anders als `pre` - normalen
       Zeilenumbruch bei langen DATEV-Fehlertexten zu. Einzeilige Meldungen sehen unverändert aus. */
    white-space: pre-line;
}

    .ze-status.error[b-avx4v6yzs9] {
        background: var(--centra-danger-bg);
        color: var(--centra-danger-text);
    }

.ze-toolbar[b-avx4v6yzs9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ze-toolbar-left[b-avx4v6yzs9] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ze-weekend-toggle[b-avx4v6yzs9] {
    border: 1px solid var(--centra-border);
    background: var(--centra-surface);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    cursor: pointer;
}

    .ze-weekend-toggle.active[b-avx4v6yzs9] {
        background: var(--centra-accent);
        border-color: var(--centra-accent);
        color: #fff;
    }

.ze-view-toggle[b-avx4v6yzs9] {
    display: flex;
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    overflow: hidden;
}

    .ze-view-toggle button[b-avx4v6yzs9] {
        border: none;
        background: var(--centra-surface);
        color: var(--centra-text-secondary);
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

        .ze-view-toggle button.active[b-avx4v6yzs9] {
            background: var(--centra-accent);
            color: #fff;
        }

.ze-nav[b-avx4v6yzs9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ze-range-label[b-avx4v6yzs9] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--centra-text);
    min-width: 160px;
}

/* Phase 96 (Issue M8, Schritt 2): Die Regeln zu `.ze-btn` standen hier als dritte Kopie derselben
   Knopfgestaltung. Sie sind nach app.css in den gemeinsamen Regelblock gewandert (dort nach
   "Issue M8, Schritt 2" suchen).

   Wichtig war das Verschieben, nicht nur das Zusammenführen: Scoped CSS trägt ein zusätzliches
   Attribut im Selektor und ist damit spezifischer als jede globale Regel - wäre die Kopie hier
   stehen geblieben, hätte sie die gemeinsame Regel auf dieser Seite weiterhin überstimmt und die
   Vereinheitlichung wäre ausgerechnet auf der Zeiterfassung wirkungslos gewesen. */

.ze-legend[b-avx4v6yzs9] {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    flex-wrap: wrap;
}

.dot[b-avx4v6yzs9] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    margin-right: 5px;
}

    .dot.open[b-avx4v6yzs9] {
        background: var(--centra-accent);
    }

    .dot.synced[b-avx4v6yzs9] {
        background: var(--centra-text-secondary);
    }

.ze-sum[b-avx4v6yzs9] {
    margin-left: auto;
    font-weight: 600;
    color: var(--centra-text);
}

.mock-note[b-avx4v6yzs9] {
    font-size: 11.5px;
    color: var(--centra-text-muted);
    text-align: center;
    padding-top: 4px;
}
/* /Components/Shared/PlaceholderPage.razor.rz.scp.css */
.placeholder-page[b-usr10f8crj] {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 28px;
}

    .placeholder-page h1[b-usr10f8crj] {
        margin-bottom: 8px;
    }

    .placeholder-page p[b-usr10f8crj] {
        color: var(--centra-text-secondary);
        margin-bottom: 18px;
    }

.placeholder-badge[b-usr10f8crj] {
    display: inline-block;
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}
/* /Components/TimeTracking/OutlookAppointmentsPanel.razor.rz.scp.css */
/* Seit Phase 13 ein Wochenkalender statt einer Liste (siehe OutlookAppointmentsPanel.razor-Kommentar) -
   braucht deutlich mehr Breite als die übrigen, schmalen editor-card-Dialoge (Von/Bis-Formulare). */
.appt-calendar-card[b-nktg9h0p6h] {
    width: min(95vw, 1100px);
}

    .appt-calendar-card .time-grid-body[b-nktg9h0p6h] {
        max-height: 60vh;
    }
/* /Components/TimeTracking/TimeEntryEditor.razor.rz.scp.css */
/* Phase 124 - Zeitblock des Zeiteintrag-Dialogs (Datum + Dauer, darunter Von/Bis).

   Bewusst als eigene, gescopte Datei mit te-Präfix statt Ergänzungen an .editor-row/.editor-field in
   app.css: Diese Klassen sind modulübergreifend im Einsatz (u. a. im Angebotsrechner-Dialog), eine
   Änderung dort hätte Nebenwirkungen außerhalb der Zeiterfassung. Dieselbe Linie wie das
   ang-Präfix im Angebotsmodul (Phase 121-123).

   Die Form folgt dem freigegebenen Vorbild (gerundete Felder mit Icon), die Farben kommen
   ausschließlich aus den Centra-Tokens - kein fremdes Blau. */

.te-zeitblock[b-gc6l9si1ww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* Datum braucht mehr Platz als die Dauer daneben ("Donnerstag, 14. August 2026"). */
.te-feld-breit[b-gc6l9si1ww] {
    /* nichts weiter nötig - die Spaltenbreite regelt das Raster, die Klasse markiert nur die Absicht */
}

@media (max-width: 520px) {
    .te-zeitblock[b-gc6l9si1ww] {
        grid-template-columns: 1fr;
    }
}

.te-feld[b-gc6l9si1ww] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface-2);
    min-width: 0; /* sonst sprengt ein langes Datum die Rasterspalte */
}

.te-icon[b-gc6l9si1ww] {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    /* Rein dekorativ - die Beschriftung darunter benennt das Feld bereits (aria-hidden im Markup). */
    opacity: .75;
}

.te-feld-inhalt[b-gc6l9si1ww] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.te-label[b-gc6l9si1ww] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--centra-text-secondary);
}

.te-wert[b-gc6l9si1ww] {
    font-size: 13px;
    color: var(--centra-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Auswahlfeld selbst soll wie Text im Feld wirken, nicht wie ein zweites Steuerelement in einem
   Kasten - deshalb ohne eigenen Rahmen und Hintergrund. Die Auswahl bleibt ein echtes <select> und
   damit an das 5-Minuten-Raster gebunden (kein freies Texteingabefeld). */
.te-select[b-gc6l9si1ww] {
    font-family: inherit;
    font-size: 13px;
    color: var(--centra-text);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    cursor: pointer;
}

    .te-select:focus-visible[b-gc6l9si1ww] {
        outline: 2px solid var(--centra-accent);
        outline-offset: 2px;
        border-radius: 3px;
    }

    .te-select:disabled[b-gc6l9si1ww] {
        color: var(--centra-text-secondary);
        cursor: default;
    }

/* Hinweis nach automatischer Platzierung - dezent, aber sichtbar: Der Dialog hat gerade Zeiten
   gesetzt, die der Nutzer nicht selbst gewählt hat. */
.te-hinweis[b-gc6l9si1ww] {
    margin: 0 0 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--centra-accent-text);
    background: var(--centra-accent-bg);
    border-radius: var(--centra-radius);
    padding: 8px 10px;
}
/* /Components/TimeTracking/TimeGrid.razor.rz.scp.css */
/* Gemeinsame Zeitraster-Bausteine (Kopf/Zellen/Stundenmarken/Eintrags-Look) leben seit Phase 13 in
   app.css (".time-grid ..."-Regeln, siehe dortigen Kommentar) - gemeinsam mit dem Outlook-Wochenkalender
   genutzt (docs/handoff dieser Phase). Hier nur, was ausschließlich für das Zeiterfassungs-Raster gilt:
   der Crosshair-Cursor fürs Anlegen per Drag, das Auswahl-Overlay und das Verschieben bestehender
   Einträge - der Outlook-Kalender ist rein lesend (Termine sind nicht per Drag anlegbar/verschiebbar). */

.time-grid-cell[b-ckqcynsc05] {
    cursor: crosshair;
}

/* Einzelnes Overlay-Element für die aktive Drag-Auswahl (siehe TimeGrid.razor-Kommentar) statt
   einer Klasse auf vielen einzelnen Zellen. */
.time-grid-selection[b-ckqcynsc05] {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--centra-accent-bg);
    border-top: 1px solid var(--centra-accent);
    border-bottom: 1px solid var(--centra-accent);
    box-sizing: border-box;
    pointer-events: none;
}

.time-entry-block[b-ckqcynsc05] {
    cursor: grab;
}

    /* Verschiebe-Vorschau (Phase 9): folgt der Zielposition während des Ziehens, der
       Original-Eintrag wird währenddessen ausgeblendet (siehe TimeGrid.razor-Kommentar). */
    .time-entry-block.moving-ghost[b-ckqcynsc05] {
        opacity: .75;
        outline: 2px dashed var(--centra-surface);
        outline-offset: -2px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
        pointer-events: none;
    }
/* /Components/Vacation/UrlaubsKalender.razor.rz.scp.css */
/* Phase 131 - Jahreskalender der Urlaubsplanung. Farben und Radien kommen aus den bestehenden
   Token in app.css, damit der Kalender nicht wie ein Fremdkoerper wirkt. */

.uk-kopf[b-ddsp79eamy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.uk-jahr[b-ddsp79eamy] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.uk-jahr-wert[b-ddsp79eamy] {
    font-size: 15px;
    font-weight: 700;
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.uk-jahr-btn[b-ddsp79eamy] {
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 1;
    color: var(--centra-text-secondary);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 7px;
    cursor: pointer;
}

    .uk-jahr-btn:hover[b-ddsp79eamy] {
        border-color: var(--centra-accent);
        color: var(--centra-accent-text);
    }

/* Ebenen-Schalter im Button-Stil (kein Kontrollkaestchen) - gleiche Linie wie die uebrige
   Oberflaeche seit Phase 123. */
.uk-ebenen[b-ddsp79eamy] {
    display: flex;
    gap: 8px;
}

.uk-ebene[b-ddsp79eamy] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--centra-text-secondary);
    background: var(--centra-surface);
    border: 1px solid var(--centra-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

    .uk-ebene:hover[b-ddsp79eamy] {
        border-color: var(--centra-accent);
    }

    .uk-ebene.aktiv[b-ddsp79eamy] {
        color: var(--centra-text);
        background: var(--centra-surface-2);
        border-color: var(--centra-accent);
    }

    /* Ausgeschaltete Ebene: Der Farbpunkt verliert seine Farbe, damit der Schalter auch ohne
       Rahmenvergleich lesbar ist. */
    .uk-ebene:not(.aktiv) .uk-punkt[b-ddsp79eamy] {
        background: var(--centra-border);
    }

.uk-punkt[b-ddsp79eamy] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.uk-punkt--feiertag[b-ddsp79eamy] {
    background: var(--centra-danger-border);
}

.uk-punkt--ferien[b-ddsp79eamy] {
    background: var(--centra-accent-bg);
    border: 1px solid var(--centra-accent);
}

.uk-hinweis[b-ddsp79eamy] {
    margin-bottom: 14px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--centra-text-secondary);
    background: var(--centra-surface-2);
    border: 1px solid var(--centra-border);
    border-radius: 8px;
}

/* Zwoelf Monate im flexiblen Raster: je nach Fensterbreite 1 bis 4 Spalten, ohne Medienabfragen. */
.uk-monate[b-ddsp79eamy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.uk-monat[b-ddsp79eamy] {
    border: 1px solid var(--centra-border);
    border-radius: 8px;
    padding: 10px 12px 12px;
}

.uk-monat-name[b-ddsp79eamy] {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.uk-wochentage[b-ddsp79eamy],
.uk-tage[b-ddsp79eamy] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.uk-wochentage[b-ddsp79eamy] {
    margin-bottom: 4px;
    font-size: 10.5px;
    color: var(--centra-text-muted);
    text-align: center;
}

.uk-tag[b-ddsp79eamy] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    font-size: 11.5px;
    border-radius: 5px;
    font-variant-numeric: tabular-nums;
    /* Der Kalender ist reine Information - kein Zeigefinger-Cursor, damit niemand einen Klick
       erwartet, der nichts tut (siehe Komponentenkommentar). */
    cursor: default;
}

.uk-tag--leer[b-ddsp79eamy] {
    visibility: hidden;
}

.uk-tag--wochenende[b-ddsp79eamy] {
    color: var(--centra-text-muted);
}

.uk-tag--ferien[b-ddsp79eamy] {
    background: var(--centra-accent-bg);
    color: var(--centra-accent-text);
}

/* Feiertag nach Ferien deklariert: Faellt ein Feiertag in die Ferien, gewinnt der Feiertag. */
.uk-tag--feiertag[b-ddsp79eamy] {
    background: var(--centra-danger-bg);
    color: var(--centra-danger-text);
    font-weight: 700;
}

.uk-tag--heute[b-ddsp79eamy] {
    outline: 2px solid var(--centra-accent);
    outline-offset: -2px;
    font-weight: 700;
}

/* ---------- Phase 133 ---------- */

/* (D) Dritte Informationsebene: genehmigter Urlaub der Kolleginnen und Kollegen. Gruen, damit sie
   sich klar von Ferien (blau) und Feiertagen (rot) unterscheidet. */
.uk-punkt--urlaub[b-ddsp79eamy] {
    background: #dff3df;
    border: 1px solid var(--centra-success-text);
}

.uk-tag--urlaub[b-ddsp79eamy] {
    background: #dff3df;
    color: var(--centra-success-text);
}

/* (G) Bedienhinweis ueber dem Kalender - nur im Antrags-Reiter sichtbar. */
.uk-hinweis--bedienung[b-ddsp79eamy] {
    background: var(--centra-surface);
}

/* (G) Die eigene Auswahl. Bewusst in der Akzentfarbe und kraeftig gefuellt: Sie ist keine
   Information ueber den Kalender, sondern die eigene Eingabe - sie muss sich von den drei
   informativen Ebenen klar abheben und gewinnt deshalb auch ueber alle. */
.uk-tag--gewaehlt[b-ddsp79eamy] {
    background: var(--centra-accent);
    color: #fff;
    font-weight: 700;
}

/* Halber Tag am Rand: nur zur Haelfte gefuellt, damit man auf einen Blick sieht, welches Ende
   halbtags ist. Der Verlauf ist ein hartes Umschalten in der Mitte, kein weicher Uebergang. */
.uk-tag--halb-anfang[b-ddsp79eamy] {
    background: linear-gradient(to right, var(--centra-surface-2) 50%, var(--centra-accent) 50%);
    color: var(--centra-accent-text);
}

.uk-tag--halb-ende[b-ddsp79eamy] {
    background: linear-gradient(to right, var(--centra-accent) 50%, var(--centra-surface-2) 50%);
    color: var(--centra-accent-text);
}

/* Im Antrags-Reiter sind die Tage anklickbar - dort also doch ein Zeigefinger (anders als in der
   reinen Anzeige, siehe Regel weiter oben). Zusaetzlich die Textauswahl unterdruecken, sonst
   markiert das Ziehen ueber mehrere Tage die Zahlen als Text. */
.uk-tag[b-ddsp79eamy] {
    user-select: none;
}

.uk-hinweis--bedienung ~ .uk-monate .uk-tag:not(.uk-tag--leer)[b-ddsp79eamy] {
    cursor: pointer;
}

/* 22.08.2026 (Urlaubs-Automatik Phase C): Mitarbeiterfilter der Urlaubs-Ebene + Liste "wer wann". */
.uk-mitarbeiter-filter[b-ddsp79eamy] {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--centra-border);
    border-radius: var(--centra-radius);
    background: var(--centra-surface);
    color: var(--centra-text);
}

.uk-urlaubsliste[b-ddsp79eamy] {
    margin-top: 14px;
    border-top: 1px solid var(--centra-border);
    padding-top: 10px;
    font-size: 12.5px;
}

.uk-urlaubsliste-titel[b-ddsp79eamy] {
    font-weight: 600;
    margin-bottom: 6px;
}

.uk-urlaubsliste-zeile[b-ddsp79eamy] {
    display: flex;
    gap: 10px;
    padding: 1px 0;
    color: var(--centra-text-muted);
}

.uk-urlaubsliste-name[b-ddsp79eamy] {
    min-width: 180px;
    color: var(--centra-text);
}