/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Jeder Rückfallwert in var(--wp-…, X) IST der klassische Wert — ohne gewähltes
   Erscheinungsbild sieht die Hülle deshalb genauso aus wie vor der Umstellung. */

.wp-shell[b-hrmlkie3yi] {
    display: flex;
    min-height: 100vh;
    font-family: var(--wp-font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
}

.wp-theme-root[b-hrmlkie3yi] {
    min-height: 100vh;
    background: var(--wp-ground, #f4f6f9);
}

.wp-sidebar[b-hrmlkie3yi] {
    width: var(--wp-rail-w, 240px);
    flex-shrink: 0;
    background: var(--wp-rail-bg, #1b2430);
    color: var(--wp-rail-ink, #dbe2ea);
    border-right: var(--wp-rail-border, 0);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.wp-main[b-hrmlkie3yi] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--wp-ground, #f4f6f9);
}

.wp-topbar[b-hrmlkie3yi] {
    height: 52px;
    background: var(--wp-surface, #ffffff);
    border-bottom: 1px solid var(--wp-line, #e3e7ec);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.wp-content[b-hrmlkie3yi] {
    flex-grow: 1;
}

/* Die Regeln fuer #blazor-error-ui stehen jetzt in app.css.
   Sie gehoerten nie hierher: Das ist ein GLOBALES Element mit fester Id, das jedes Layout
   ausgibt. Aus einem isolierten Stylesheet erreichten sie aber nur die Ausgabe DIESES
   Layouts — im neuen Anmelde-Layout stand der Fehlerbalken deshalb dauerhaft sichtbar
   und 24 px hoch am Seitenende und liess die Anmeldeseite scrollen. */

/* Tablet: schmale Leiste nur mit Symbolen */
@media (min-width: 768px) and (max-width: 900px) {
    .wp-sidebar[b-hrmlkie3yi] {
        width: 60px;
    }

    .wp-sidebar[b-hrmlkie3yi]  .wp-nav-link span,
    .wp-sidebar[b-hrmlkie3yi]  .wp-brand span,
    .wp-sidebar[b-hrmlkie3yi]  .wp-nav-group,
    .wp-sidebar[b-hrmlkie3yi]  .wp-nav-footer,
    .wp-sidebar[b-hrmlkie3yi]  .wp-nav .small {
        display: none;
    }
}

/* Handy: Seitenleiste ausgeblendet, per Menü-Knopf einblendbar (schiebt sich über den Inhalt) */
@media (max-width: 767.98px) {
    .wp-sidebar[b-hrmlkie3yi] {
        position: fixed;
        top: 0;
        left: -260px;
        width: 240px;
        height: 100vh;
        transition: left .2s ease, visibility 0s linear .2s;
        visibility: hidden;
        pointer-events: none;
        z-index: 1045;
        box-shadow: none;
    }

    .wp-sidebar.open[b-hrmlkie3yi] {
        left: 0;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
        box-shadow: 0 0 24px rgba(0, 0, 0, .35);
    }

    .wp-backdrop[b-hrmlkie3yi] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 1040;
    }

    .wp-topbar[b-hrmlkie3yi] {
        height: auto;
        min-height: 52px;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
}

/* Ohne min-width:0 wächst ein Flex-Kind über seinen Inhalt hinaus, statt zu schrumpfen — dadurch schob die
   Kopfleiste mit langem Mandanten- oder Benutzernamen die ganze Seite seitlich weg (440 px bei 390 px Fenster). */
.min-w-0[b-hrmlkie3yi] {
    min-width: 0;
}

/* Farbprobe je Erscheinungsbild im Benutzermenü — man sieht, wofür man sich entscheidet,
   bevor man es anklickt. */
[b-hrmlkie3yi] .wp-theme-dot {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .12);
}

/* Der Akzentton MUSS derselbe sein wie --wp-accent in theme.css (hell): eine Farbprobe,
   die etwas anderes zeigt als das, was danach erscheint, ist schlimmer als keine. */
[b-hrmlkie3yi] .wp-theme-dot-hell {
    background: linear-gradient(135deg, #eeecfe 0%, #e5f0fc 60%, #5948dc 60%);
}

[b-hrmlkie3yi] .wp-theme-dot-warm {
    background: linear-gradient(135deg, #f5efe4 0%, #ece4d6 60%, #a4551f 60%);
}

[b-hrmlkie3yi] .wp-theme-dot-modern {
    background: linear-gradient(135deg, #f4f5fa 0%, #eeecff 60%, #6658e8 60%);
}

[b-hrmlkie3yi] .wp-theme-dot-klassisch {
    background: linear-gradient(135deg, #f4f6f9 0%, #1b2430 60%, #0d6efd 60%);
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.wp-brand[b-vxc9yiiv3t] {
    height: 52px;
    color: var(--wp-rail-brand, #ffffff);
    border-bottom: 1px solid var(--wp-rail-line, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
    font-weight: var(--wp-rail-brand-weight, 600);
}

.wp-nav[b-vxc9yiiv3t] {
    padding: 0.5rem var(--wp-nav-pad-x, 0);
}

.wp-nav-group[b-vxc9yiiv3t] {
    padding: 0.9rem 1rem 0.25rem 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp-rail-ink-2, #7d8b9d);
}

[b-vxc9yiiv3t] .wp-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 1rem;
    color: var(--wp-rail-ink, #c7d0da);
    text-decoration: none;
    font-size: 0.92rem;
    /* Der linke Balken markiert heute den aktiven Punkt. In den neuen Bildern
       übernimmt das die abgerundete Fläche — der Balken wird dort durchsichtig. */
    border-left: 3px solid transparent;
    border-radius: var(--wp-rail-radius, 0);
}

[b-vxc9yiiv3t] .wp-nav-link i {
    width: 1.1rem;
    text-align: center;
}

[b-vxc9yiiv3t] .wp-nav-link:hover {
    color: var(--wp-rail-hover-ink, #ffffff);
    background: var(--wp-rail-hover-bg, rgba(255, 255, 255, 0.05));
}

[b-vxc9yiiv3t] .wp-nav-link.active {
    color: var(--wp-rail-active-ink, #ffffff);
    background: var(--wp-rail-active-bg, rgba(13, 110, 253, 0.18));
    border-left-color: var(--wp-rail-active-bar, #4d9fff);
    font-weight: var(--wp-rail-active-weight, 400);
}

.wp-nav-footer[b-vxc9yiiv3t] {
    border-top: 1px solid var(--wp-rail-line, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
.wp-print-root[b-iffs7gea9m] {
    min-height: 100vh;
    padding: 24px;
    background: #fff;
    color: #17212b;
    font: 15px/1.45 Arial, sans-serif;
}

.wp-print-root[b-iffs7gea9m]  .print-document,
.wp-print-root[b-iffs7gea9m]  .print-options,
.wp-print-root[b-iffs7gea9m]  .print-actions,
.wp-print-root[b-iffs7gea9m]  .print-error { max-width: 1100px; margin: 0 auto; }
.wp-print-root[b-iffs7gea9m]  .print-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #cbd2d9;
}
.wp-print-root[b-iffs7gea9m]  .print-actions p { flex: 1 1 280px; margin: 0; color: #465565; }
.wp-print-root[b-iffs7gea9m]  .print-actions button {
    padding: 9px 16px; border: 1px solid #183e62; border-radius: 6px;
    background: #183e62; color: #fff; font: inherit; cursor: pointer;
}
.wp-print-root[b-iffs7gea9m]  .print-actions a { color: #183e62; }
.wp-print-root[b-iffs7gea9m]  h1 { color: #17212b; font-size: 26px; margin: 4px 0 10px; overflow-wrap: anywhere; }
.wp-print-root[b-iffs7gea9m]  .print-tenant { font-weight: bold; color: #465565; }
.wp-print-root[b-iffs7gea9m]  .print-version { font-weight: bold; }
.wp-print-root[b-iffs7gea9m]  .print-meta { color: #465565; font-size: 13px; margin-bottom: 24px; }
.wp-print-root[b-iffs7gea9m]  table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 14px; }
.wp-print-root[b-iffs7gea9m]  th, .wp-print-root[b-iffs7gea9m]  td {
    text-align: left; vertical-align: top; padding: 10px 8px;
    border-bottom: 1px solid #cbd2d9; overflow-wrap: anywhere;
}
.wp-print-root[b-iffs7gea9m]  th { background: #eef1f4; color: #17212b; font-weight: bold; }
.wp-print-root[b-iffs7gea9m]  .print-date { width: 14%; }
.wp-print-root[b-iffs7gea9m]  .print-time { width: 24%; }
.wp-print-root[b-iffs7gea9m]  .print-break { width: 10%; }
.wp-print-root[b-iffs7gea9m]  .print-person { width: 22%; }
.wp-print-root[b-iffs7gea9m]  .print-subline { display: block; font-size: 12px; color: #465565; margin-top: 3px; }
.wp-print-root[b-iffs7gea9m]  footer { margin-top: 20px; font-size: 12px; color: #465565; }
.wp-print-root[b-iffs7gea9m]  .print-error { border-left: 4px solid #a12622; padding: 16px; }
.wp-print-root[b-iffs7gea9m]  .print-options {
    margin-bottom: 24px; padding: 18px; border: 1px solid #cbd2d9;
    border-radius: 8px; background: #f5f7f9;
}
.wp-print-root[b-iffs7gea9m]  .print-options h2 { margin: 0 0 8px; font-size: 20px; }
.wp-print-root[b-iffs7gea9m]  .print-options p { margin: 8px 0; color: #465565; }
.wp-print-root[b-iffs7gea9m]  .print-option-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-print-root[b-iffs7gea9m]  .print-option-fields label { display: flex; flex: 1 1 160px; flex-direction: column; gap: 4px; }
.wp-print-root[b-iffs7gea9m]  .print-option-fields label:first-child { flex-basis: 350px; }
.wp-print-root[b-iffs7gea9m]  .print-option-fields input,
.wp-print-root[b-iffs7gea9m]  .print-option-fields select {
    /* Rahmenfarbe erreicht gegen beide Nachbarflächen über 4:1 — WCAG 1.4.11 verlangt 3:1 für die
       Umrandung eines Eingabefeldes. Das frühere #9aa8b6 kam gegen die Kartenfläche nur auf 2,3:1. */
    padding: 8px; border: 1px solid #6b7a8a; border-radius: 4px; font: inherit; min-width: 0; width: 100%; background: #fff; color: #17212b;
}
.wp-print-root[b-iffs7gea9m]  .print-options fieldset { margin: 14px 0; padding: 10px; border: 1px solid #cbd2d9; }
.wp-print-root[b-iffs7gea9m]  .print-options legend { width: auto; padding: 0 5px; font-size: 15px; font-weight: bold; }
.wp-print-root[b-iffs7gea9m]  .print-employee-options { display: flex; flex-wrap: wrap; gap: 8px 20px; max-height: 180px; overflow-y: auto; }
.wp-print-root[b-iffs7gea9m]  .print-employee-options label { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.wp-print-root[b-iffs7gea9m]  .print-option-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wp-print-root[b-iffs7gea9m]  .print-option-submit button {
    padding: 9px 16px; border: 1px solid #183e62; border-radius: 6px; background: #183e62; color: #fff; font: inherit; cursor: pointer;
}
.wp-print-root[b-iffs7gea9m]  .print-options a { color: #183e62; }
.wp-print-root[b-iffs7gea9m]  .print-selection { margin-top: 6px; font-weight: bold; overflow-wrap: anywhere; }

/* Überschrift der Bildschirmseite: ordnet die Auswahlmaske ein, gehört aber nicht auf das Papier —
   dort trägt das Dokument selbst seinen Titel. */
.wp-print-root[b-iffs7gea9m]  .print-page-title {
    font-size: 18px; color: #465565; margin: 0 0 12px; font-weight: 600;
}

/* Auf großen Bildschirmen und im Ausdruck tragen die Spaltenköpfe die Beschriftung — die Wiederholung
   in jeder Zelle wäre dort nur Lärm, muss aber für Vorleseprogramme im Dokument bleiben.
   REIHENFOLGE BEACHTEN: Diese Grundregel muss VOR der Handy-Regel stehen. Beide haben dieselbe
   Gewichtung; stünde sie danach, gewänne sie auch innerhalb des Medienblocks, und die Beschriftung
   bliebe auf dem Handy unsichtbar — genau das ist beim ersten Versuch passiert. */
.wp-print-root[b-iffs7gea9m]  .print-cell-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Handy: Die Tabelle wird zu Karten, ABER die Beschriftung steht als echter Text im Markup
   (.print-cell-label), nicht als CSS-Inhalt. Grund: display:block nimmt der Tabelle ihre Rolle im
   Barrierefreiheitsbaum, und mit ausgeblendetem thead war die Spaltenzuordnung danach ganz weg —
   erzeugter Inhalt aus ::before wird nicht von jedem Vorleseprogramm angesagt. Die Rollen stehen
   deshalb ausdrücklich im Markup, und die Beschriftung ist auf großen Bildschirmen nur ausgeblendet. */
@media screen and (max-width: 600px) {
    .wp-print-root[b-iffs7gea9m] { padding: 16px 10px; }
    .wp-print-root[b-iffs7gea9m]  h1 { font-size: 22px; }
    .wp-print-root[b-iffs7gea9m]  table, .wp-print-root[b-iffs7gea9m]  tbody, .wp-print-root[b-iffs7gea9m]  tr,
    .wp-print-root[b-iffs7gea9m]  td { display: block; width: 100%; }
    .wp-print-root[b-iffs7gea9m]  thead { display: none; }
    .wp-print-root[b-iffs7gea9m]  tr { border: 1px solid #cbd2d9; margin-bottom: 12px; }
    .wp-print-root[b-iffs7gea9m]  td { padding: 5px 8px; border: 0; }
    .wp-print-root[b-iffs7gea9m]  .print-cell-label { position: static; width: auto; height: auto; overflow: visible;
        clip: auto; clip-path: none; white-space: normal; font-weight: bold; }
}

@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .wp-print-root[b-iffs7gea9m] { min-height: 0; padding: 0; background: #fff; color: #000; font-size: 10pt; }
    .wp-print-root[b-iffs7gea9m]  .print-actions, .wp-print-root[b-iffs7gea9m]  .print-options,
    .wp-print-root[b-iffs7gea9m]  .print-page-title { display: none !important; }
    .wp-print-root[b-iffs7gea9m]  h1 { font-size: 17pt; color: #000; }
    .wp-print-root[b-iffs7gea9m]  .print-meta { font-size: 9pt; margin-bottom: 6mm; }
    .wp-print-root[b-iffs7gea9m]  table { font-size: 9pt; }
    .wp-print-root[b-iffs7gea9m]  thead { display: table-header-group; }
    .wp-print-root[b-iffs7gea9m]  tr { break-inside: avoid; page-break-inside: avoid; }
    .wp-print-root[b-iffs7gea9m]  th, .wp-print-root[b-iffs7gea9m]  td { padding: 2mm 1.5mm; border-color: #777; color: #000; }
    .wp-print-root[b-iffs7gea9m]  .print-subline { font-size: 8pt; color: #333; }
    .wp-print-root[b-iffs7gea9m]  header { break-after: avoid; }
    .wp-print-root[b-iffs7gea9m]  footer { font-size: 8pt; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-e0s86yoy7v],
.components-reconnect-repeated-attempt-visible[b-e0s86yoy7v],
.components-reconnect-failed-visible[b-e0s86yoy7v],
.components-pause-visible[b-e0s86yoy7v],
.components-resume-failed-visible[b-e0s86yoy7v],
.components-rejoining-animation[b-e0s86yoy7v] {
    display: none;
}

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


#components-reconnect-modal[b-e0s86yoy7v] {
    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-e0s86yoy7v 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-e0s86yoy7v {
    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/Home.razor.rz.scp.css */
/* Übersicht: Handlungskarten und der Lücken-Streifen.
   Alle Farben und Radien kommen aus dem Erscheinungsbild; der Rückfallwert ist jeweils der klassische. */

.wp-task-icon[b-oyex7d1t1s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: var(--wp-radius-sm, .375rem);
    background: var(--wp-accent-soft, #e7f1ff);
    color: var(--wp-accent, #0d6efd);
    font-size: 1.15rem;
}

.wp-task-icon.urgent[b-oyex7d1t1s] {
    background: var(--wp-open-soft, #fff8ec);
    color: var(--wp-open, #b45309);
}

/* Die Kennzahl war mit 1,9 rem (30,4 px) das GRÖSSTE Element der Übersicht — größer als der
   Seitentitel. Damit stand auf der Startseite das Wort „Okt" optisch über der Überschrift.
   Die Reihenfolge lautet jetzt: Seitentitel > Kennzahl > Handlungssatz > Hinweistext.
   Grundregel und nicht je Erscheinungsbild, weil die Hierarchie in allen vieren falsch war. */
.wp-task-value[b-oyex7d1t1s] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--wp-ink-2, #495057);
}

.wp-task-value.urgent[b-oyex7d1t1s] {
    color: var(--wp-open, #b45309);
}

.wp-task-title[b-oyex7d1t1s] {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--wp-ink, #212529);
}

.wp-task-hint[b-oyex7d1t1s] {
    font-size: .85rem;
    color: var(--wp-ink-3, #6c757d);
    line-height: 1.5;
    text-wrap: pretty;
}

/* ---------- Lücken-Streifen ---------- */

.wp-gapchart[b-oyex7d1t1s] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.wp-gapbar-col[b-oyex7d1t1s] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    text-align: center;
}

.wp-gapbar[b-oyex7d1t1s] {
    border-radius: var(--wp-gapbar-radius, 3px) var(--wp-gapbar-radius, 3px) 0 0;
    background: var(--wp-gapbar-fill, #e6b45c);
    margin-top: 4px;
}

/* Der schlimmste Tag hebt sich ab — sonst sucht man ihn. */
.wp-gapbar.peak[b-oyex7d1t1s] {
    background: var(--wp-open, #b45309);
}

/* Volle Tage sind ein Strich auf der Linie, kein fehlender Balken:
   so sieht man, dass der Tag geprüft ist und nicht bloß leer. */
.wp-gapbar.empty[b-oyex7d1t1s] {
    background: var(--wp-line-strong, #dee2e6);
}

.wp-gapbar-value[b-oyex7d1t1s] {
    font-size: .72rem;
    font-weight: 700;
    color: var(--wp-ink-3, #6c757d);
    font-variant-numeric: tabular-nums;
}

.wp-gapbar-value.peak[b-oyex7d1t1s] {
    color: var(--wp-open, #b45309);
}

.wp-gapaxis[b-oyex7d1t1s] {
    height: 1px;
    background: var(--wp-line-strong, #dee2e6);
}

.wp-gaplabel[b-oyex7d1t1s] {
    font-size: .72rem;
    font-weight: 500;
    color: var(--wp-ink-2, #6c757d);
}

.wp-gaplabel.today[b-oyex7d1t1s] {
    color: var(--wp-accent, #0d6efd);
    font-weight: 700;
}

.wp-gapdate[b-oyex7d1t1s] {
    font-size: .68rem;
    color: var(--wp-ink-3, #adb5bd);
    font-variant-numeric: tabular-nums;
}

/* Auf dem Handy wird der Streifen sonst zu Mikro-Balken mit unlesbaren Beschriftungen. */
@media (max-width: 575.98px) {
    .wp-gapdate[b-oyex7d1t1s] {
        display: none;
    }

    .wp-gaplabel[b-oyex7d1t1s] {
        font-size: .62rem;
    }
}

/* ── Baukasten ─────────────────────────────────────────────────────────────────────────────────────
   Die Anpassen-Leiste soll erkennbar ein Werkzeug sein und nicht wie ein weiterer Inhaltsbereich
   aussehen — sonst sucht man beim nächsten Mal, was davon zur Übersicht gehört. */
.wp-customize[b-oyex7d1t1s] {
    border-color: var(--wp-accent, #0d6efd);
    background: var(--wp-accent-soft, #f4f7ff);
}

.wp-customize-list[b-oyex7d1t1s] {
    margin: 0 -1rem -1rem;
}

.wp-customize-list .list-group-item[b-oyex7d1t1s] {
    background: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Ein abgeschalteter Bereich bleibt lesbar, tritt aber zurück — man soll sehen, was da wäre. */
.wp-customize-list .form-check-input:not(:checked) ~ .form-check-label[b-oyex7d1t1s] {
    color: var(--wp-ink-3, #6c757d);
    font-weight: 500 !important;
}
/* /Components/Pages/Planung/PlanBoard.razor.rz.scp.css */
/* ---------- Eine Werkzeugleiste statt Titelblock plus zwei Knopfzeilen ---------- */

.wp-toolbar[b-zdbk3tlgz7] {
    row-gap: .4rem;
}

.wp-plan-select[b-zdbk3tlgz7] {
    width: auto;
    max-width: 22rem;
    font-weight: var(--wp-toolbar-plan-weight, 400);
}

.wp-filter[b-zdbk3tlgz7] {
    max-width: 200px;
}

/* Handy: Der Planwähler bekommt seine eigene Zeile; Knöpfe zeigen nur Symbole und Zahlen (siehe Markup).
   Vorher stapelte sich die Leiste auf fünf Zeilen, gemessen 187 px, bevor der erste Dienst sichtbar war. */
@media (max-width: 991.98px) {
    .wp-toolbar .wp-plan-select[b-zdbk3tlgz7] {
        flex: 1 1 100%;
        max-width: none;
    }
}

.wp-toolbar-sep[b-zdbk3tlgz7] {
    width: 1px;
    height: 1.35rem;
    background: var(--wp-line-strong, #dee2e6);
    flex-shrink: 0;
}

/* ---------- Besetzung je Tag im Spaltenkopf ---------- */

.wp-coverage[b-zdbk3tlgz7] {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .3rem;
}

.wp-coverage-track[b-zdbk3tlgz7] {
    flex: 1;
    height: var(--wp-coverage-h, 3px);
    border-radius: 3px;
    background: var(--wp-sunken, #eceff3);
    overflow: hidden;
    display: flex;
}

.wp-coverage-fill[b-zdbk3tlgz7] {
    height: 100%;
    border-radius: 3px;
    background: var(--wp-ok, #198754);
}

.wp-coverage.short .wp-coverage-fill[b-zdbk3tlgz7] {
    background: var(--wp-coverage-short, #b45309);
}

.wp-coverage-text[b-zdbk3tlgz7] {
    font-size: .68rem;
    font-weight: 600;
    color: var(--wp-ink-3, #868e96);
    font-variant-numeric: tabular-nums;
}

.wp-coverage.short .wp-coverage-text[b-zdbk3tlgz7] {
    color: var(--wp-open, #b45309);
}

.wp-dayname[b-zdbk3tlgz7] {
    font-weight: 600;
}

.wp-daydate[b-zdbk3tlgz7] {
    font-weight: 400;
    color: var(--wp-ink-3, #868e96);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Offene Schichten als Chips ---------- */

.wp-open-toggle[b-zdbk3tlgz7] {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0 .25rem 0 0;
    line-height: 1;
    font-size: .75rem;
}

.wp-open-count[b-zdbk3tlgz7] {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .4rem;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--wp-open-soft, #fff8ec);
    color: var(--wp-open, #b45309);
}

[b-zdbk3tlgz7] .wp-open-cell {
    vertical-align: middle;
}

[b-zdbk3tlgz7] .wp-open-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    max-width: 100%;
    margin: 0 .15rem .15rem 0;
    padding: .12rem .5rem;
    border: 1px dashed var(--wp-open, #b45309);
    border-radius: var(--wp-chip-radius, 4px);
    background: var(--wp-surface, #fff8ec);
    color: var(--wp-open, #b45309);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}

[b-zdbk3tlgz7] .wp-open-chip:hover {
    background: var(--wp-open-soft, #fdf0d8);
}

[b-zdbk3tlgz7] .wp-open-chip-n {
    font-variant-numeric: tabular-nums;
}

[b-zdbk3tlgz7] .wp-open-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    max-width: 9rem;
}

/* ---------- Mitarbeiterzeile mit Kürzel-Kreis ---------- */

.wp-emp-head[b-zdbk3tlgz7] {
    white-space: normal;
}

.wp-emp-avatar[b-zdbk3tlgz7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wp-avatar-size, 1.4rem);
    height: var(--wp-avatar-size, 1.4rem);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: .45rem;
    font-size: var(--wp-avatar-font, .6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    /* Klassisch bleibt es ein gefüllter Kreis wie der bisherige Punkt, nur mit Kürzel;
       in den neuen Bildern eine helle Fläche mit farbiger Schrift. */
    background: var(--wp-avatar-bg, var(--emp-color, #4F86C6));
    color: var(--wp-avatar-fg, #ffffff);
    vertical-align: middle;
}

.wp-emp-body[b-zdbk3tlgz7] {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    min-width: 0;
    max-width: calc(100% - 2rem);
}

.wp-emp-name[b-zdbk3tlgz7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--wp-emp-name-weight, 400);
}

.wp-emp-hours[b-zdbk3tlgz7] {
    font-size: .75rem;
    color: var(--wp-ink-3, #6c757d);
    font-variant-numeric: tabular-nums;
}

.wp-emp-hours.over[b-zdbk3tlgz7] {
    color: var(--wp-danger, #dc3545);
    font-weight: 600;
}

/* ---------- Handy: ein Tag, nach Schicht gruppiert ---------- */

.wp-mday-strip[b-zdbk3tlgz7] {
    display: flex;
    gap: .3rem;
}

.wp-mday[b-zdbk3tlgz7] {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--wp-line, #e3e7ec);
    border-radius: var(--wp-radius-sm, 6px);
    background: var(--wp-surface, #fff);
    color: inherit;
    padding: .35rem .1rem .3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    line-height: 1.2;
}

.wp-mday.sel[b-zdbk3tlgz7] {
    background: var(--wp-accent, #0d6efd);
    border-color: var(--wp-accent, #0d6efd);
    color: #fff;
}

.wp-mday-dow[b-zdbk3tlgz7] {
    font-size: .68rem;
    opacity: .75;
}

.wp-mday-num[b-zdbk3tlgz7] {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.wp-mday-dot[b-zdbk3tlgz7] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
}

.wp-mday-dot.open[b-zdbk3tlgz7] {
    background: var(--wp-open, #b45309);
}

.wp-mday.sel .wp-mday-dot.open[b-zdbk3tlgz7] {
    background: rgba(255, 255, 255, .85);
}

.wp-mday-title[b-zdbk3tlgz7] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
}

.wp-mshift-head[b-zdbk3tlgz7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--wp-line, #e3e7ec);
}

.wp-mshift-color[b-zdbk3tlgz7] {
    width: 4px;
    height: 1.9rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.wp-mshift-name[b-zdbk3tlgz7] {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-mshift-time[b-zdbk3tlgz7] {
    display: block;
    font-size: .78rem;
    color: var(--wp-ink-3, #6c757d);
    font-variant-numeric: tabular-nums;
}

.wp-mshift-cov[b-zdbk3tlgz7] {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .15rem .5rem;
    border-radius: 20px;
    background: var(--wp-ok-soft, #e8f5ee);
    color: var(--wp-ok, #198754);
}

.wp-mshift-cov.short[b-zdbk3tlgz7] {
    background: var(--wp-open-soft, #fff8ec);
    color: var(--wp-open, #b45309);
}

/* Mindestens 48 px hoch — mit dem Daumen bedienbar. */
.wp-mrow[b-zdbk3tlgz7] {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: .4rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--wp-line, #e3e7ec);
    background: transparent;
    color: inherit;
    text-align: left;
}

.wp-mrow:last-child[b-zdbk3tlgz7] {
    border-bottom: 0;
}

.wp-mrow-name[b-zdbk3tlgz7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-mrow-open[b-zdbk3tlgz7] {
    background: var(--wp-open-soft, #fff8ec);
    color: var(--wp-open, #b45309);
    font-weight: 600;
}

.wp-mrow-plus[b-zdbk3tlgz7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px dashed currentColor;
}

.wp-mrow-action[b-zdbk3tlgz7] {
    flex-shrink: 0;
    padding: .3rem .7rem;
    border-radius: var(--wp-radius-sm, 6px);
    background: var(--wp-open, #b45309);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
}

.wp-board-wrap[b-zdbk3tlgz7] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.wp-board[b-zdbk3tlgz7] {
    flex-grow: 1;
    min-width: 0;
    overflow-x: auto;
}

.wp-desktop-board[b-zdbk3tlgz7] {
    flex: 1;
    min-width: 0;
}

.wp-conflicts[b-zdbk3tlgz7] {
    width: 340px;
    flex-shrink: 0;
    max-height: 75vh;
    position: sticky;
    top: 64px;
}

.wp-board-table[b-zdbk3tlgz7] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 900px;
}

.wp-board-table th[b-zdbk3tlgz7],
.wp-board-table td[b-zdbk3tlgz7] {
    border: 1px solid var(--wp-line, #e3e7ec);
    vertical-align: top;
}

.wp-board-table thead th[b-zdbk3tlgz7] {
    text-align: center;
    padding: 0.4rem 0.25rem;
    background: var(--wp-surface, #f8f9fb);
    color: var(--wp-ink, inherit);
    position: sticky;
    top: 0;
    z-index: 2;
}

.wp-rowhead[b-zdbk3tlgz7] {
    width: 180px;
    padding: 0.45rem 0.6rem !important;
    background: var(--wp-surface, #f8f9fb);
    font-size: 0.9rem;
}

[b-zdbk3tlgz7] .wp-cell {
    padding: 0.3rem;
    min-height: var(--wp-row-min, 64px);
    height: 1px; /* erlaubt height:100% der Kinder */
    position: relative;
}

[b-zdbk3tlgz7] .wp-cell.wp-weekend {
    background: var(--wp-cell-weekend, #fbf7ef);
}

[b-zdbk3tlgz7] .wp-cell.wp-today,
th.wp-today[b-zdbk3tlgz7] {
    background: var(--wp-cell-today, #eef5ff) !important;
}

.wp-open-row .wp-rowhead[b-zdbk3tlgz7] {
    color: var(--wp-open, #b45309);
}

/* Die Dienstkachel ist das meistgesehene Element der Anwendung.
   Klassisch: weiß mit 12 % Tönung und 4 px Farbbalken links.
   Hell: gefüllte Pastellfläche ohne Balken, Schrift im dunkleren Ton derselben
   Familie — auf einem vollen Plan besser unterscheidbar. */
[b-zdbk3tlgz7] .wp-duty {
    border-left: var(--wp-duty-bar, 4px) solid var(--duty-color, #0d6efd);
    background: color-mix(in srgb, var(--duty-color, #0d6efd) var(--wp-duty-fill, 12%), var(--wp-surface, white));
    border-radius: var(--wp-duty-radius, 4px);
    padding: var(--wp-duty-pad, 0.15rem 0.35rem);
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
}

[b-zdbk3tlgz7] .wp-duty:hover {
    filter: brightness(0.96);
}

[b-zdbk3tlgz7] .wp-duty-main {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

[b-zdbk3tlgz7] .wp-duty-main > span {
    display: block;
}

[b-zdbk3tlgz7] .wp-duty-main:focus-visible {
    outline: 2px solid var(--wp-accent, #0d6efd);
    outline-offset: 2px;
}

[b-zdbk3tlgz7] .wp-cell-key-action:focus {
    position: relative !important;
    z-index: 5;
    width: 100%;
    padding: .25rem .4rem;
    border: 1px solid var(--wp-accent, #0d6efd);
    border-radius: var(--wp-radius-sm, 4px);
    background: var(--wp-surface, #fff);
    color: var(--wp-accent, #0d6efd);
}

[b-zdbk3tlgz7] .wp-duty-time {
    font-weight: var(--wp-duty-time-weight, 600);
    color: var(--wp-duty-time-color, inherit);
    white-space: nowrap;
}

[b-zdbk3tlgz7] .wp-duty-label {
    color: var(--wp-duty-label, #495057);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-zdbk3tlgz7] .wp-duty-open {
    border-style: dashed;
    border-width: 1px 1px 1px var(--wp-duty-open-bar, 4px);
    border-color: var(--wp-open, #b45309);
    background: var(--wp-open-soft, #fff8ec);
}

[b-zdbk3tlgz7] .wp-duty-open .wp-duty-label,
[b-zdbk3tlgz7] .wp-duty-open .wp-duty-time {
    color: var(--wp-open, inherit);
}

[b-zdbk3tlgz7] .wp-duty-conflict {
    outline: 2px solid var(--wp-danger, #dc3545);
    outline-offset: 1px;
}

/* Eignungsvorschau beim Zuweisen aus der Mitarbeiter-Palette */
[b-zdbk3tlgz7] .wp-duty-suitable {
    outline: 2px solid var(--wp-ok, #198754);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.18);
    cursor: pointer;
}

[b-zdbk3tlgz7] .wp-duty-unfit {
    opacity: 0.4;
}

/* ---------- Mitarbeiter-Palette ---------- */

.wp-palette[b-zdbk3tlgz7] {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 64px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
}

.wp-palette-list[b-zdbk3tlgz7] {
    flex-grow: 1;
    padding: 0 0.4rem;
}

.wp-palette-item[b-zdbk3tlgz7] {
    display: block;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    border: 1px solid var(--wp-line, #e3e7ec);
    border-radius: var(--wp-radius-sm, 5px);
    padding: 0.3rem 0.45rem;
    margin-bottom: 0.3rem;
    cursor: grab;
    background: var(--wp-surface, #fff);
    user-select: none;
}

.wp-palette-item:hover[b-zdbk3tlgz7] {
    border-color: var(--wp-accent, #0d6efd);
    background: var(--wp-accent-soft, #f5f9ff);
}

.wp-palette-item.active[b-zdbk3tlgz7] {
    border-color: var(--wp-accent, #0d6efd);
    background: var(--wp-accent-soft, #e7f1ff);
    box-shadow: 0 0 0 2px rgba(var(--wp-accent-rgb, 13, 110, 253), 0.2);
}

.wp-palette-item:active[b-zdbk3tlgz7] {
    cursor: grabbing;
}

.wp-palette-bar[b-zdbk3tlgz7] {
    height: 4px;
    background: var(--wp-sunken, #eceff3);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
}

.wp-palette-fill[b-zdbk3tlgz7] {
    height: 100%;
    background: var(--wp-accent, #0d6efd);
}

.wp-palette-fill.over[b-zdbk3tlgz7] {
    background: var(--wp-danger, #dc3545);
}

[b-zdbk3tlgz7] .wp-duty-assign {
    display: block;
    border: 0;
    background: #198754;
    color: #fff;
    border-radius: 3px;
    font-size: 0.7rem;
    max-height: 0;
    padding: 0;
    margin-top: 0;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-zdbk3tlgz7] .wp-duty:hover .wp-duty-assign,
[b-zdbk3tlgz7] .wp-duty:focus-within .wp-duty-assign,
[b-zdbk3tlgz7] .wp-duty-assign:focus-visible {
    max-height: 2rem;
    padding: 0 0.3rem;
    margin-top: 0.15rem;
    opacity: 1;
    pointer-events: auto;
}

[b-zdbk3tlgz7] .wp-duty {
    position: relative;
}

[b-zdbk3tlgz7] .wp-duty-grip {
    position: absolute;
    top: 2px;
    right: 2px;
    border: 0;
    background: rgba(0, 0, 0, 0.08);
    color: #495057;
    border-radius: 3px;
    font-size: 0.65rem;
    line-height: 1.3;
    padding: 0 3px;
}

[b-zdbk3tlgz7] .wp-duty-grip:hover {
    background: rgba(0, 0, 0, 0.18);
}

[b-zdbk3tlgz7] .wp-cell.wp-move-target {
    cursor: crosshair;
    outline: 1px dashed #0d6efd;
    outline-offset: -3px;
}

/* ---------- Tagesansicht: Uhrzeiten-Achse links, Mitarbeiter als Spalten ---------- */

.wp-day[b-zdbk3tlgz7] {
    display: flex;
    --wp-day-hour-px: 54px;
    --wp-day-head-px: 46px;
}

.wp-day-axis[b-zdbk3tlgz7] {
    flex: 0 0 62px;
    border-right: 1px solid var(--wp-line-strong, #dee2e6);
    background: var(--wp-surface, #f8f9fb);
}

.wp-day-head[b-zdbk3tlgz7] {
    height: var(--wp-day-head-px);
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--wp-line-strong, #dee2e6);
    background: var(--wp-surface, #f8f9fb);
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wp-day-body[b-zdbk3tlgz7] {
    position: relative;
    height: calc(var(--wp-day-hours) * var(--wp-day-hour-px));
    background-image: repeating-linear-gradient(to bottom, #eceff3 0, #eceff3 1px, transparent 1px, transparent var(--wp-day-hour-px));
}

.wp-day-axis-body[b-zdbk3tlgz7] {
    background-image: none;
}

.wp-day-hour[b-zdbk3tlgz7] {
    height: var(--wp-day-hour-px);
    border-top: 1px solid #eceff3;
    font-size: 0.72rem;
    color: #868e96;
    text-align: right;
    padding-right: 0.35rem;
}

.wp-day-scroll[b-zdbk3tlgz7] {
    flex: 1 1 auto;
    overflow-x: auto;
    min-width: 0;
}

.wp-day-cols[b-zdbk3tlgz7] {
    display: flex;
    min-width: min-content;
}

.wp-day-col[b-zdbk3tlgz7] {
    flex: 1 0 140px;
    min-width: 140px;
    border-right: 1px solid var(--wp-line, #e3e7ec);
}

.wp-day-col-open .wp-day-head[b-zdbk3tlgz7] {
    color: var(--wp-open, #b45309);
}

.wp-day-name[b-zdbk3tlgz7] {
    font-weight: 600;
}

[b-zdbk3tlgz7] .wp-day-body.wp-day-absent {
    background-color: #fafafa;
}

[b-zdbk3tlgz7] .wp-day-body:hover {
    background-color: #fbfcfe;
}

[b-zdbk3tlgz7] .wp-day-duty {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

[b-zdbk3tlgz7] .wp-day-absence {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6c757d;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f1f1f1 6px, #f1f1f1 12px);
}

/* ---------- Wochenansicht mit Schichten als Zeilen ---------- */

[b-zdbk3tlgz7] .wp-shift-duty .wp-duty-time {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-zdbk3tlgz7] .wp-shift-duty.wp-duty-open .wp-duty-time {
    color: #b45309;
    font-weight: 500;
}

/* ---------- Sprung aus der Konfliktliste ---------- */

.wp-conflict-item[b-zdbk3tlgz7] {
    cursor: pointer;
}

[b-zdbk3tlgz7] .wp-duty-focus {
    animation: wp-focus-pulse-b-zdbk3tlgz7 2.4s ease-out 1;
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

@keyframes wp-focus-pulse-b-zdbk3tlgz7 {
    0%, 60% {
        box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.35);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* ---------- Monatsansicht (klassischer Monatsdienstplan) ---------- */

.wp-month-table[b-zdbk3tlgz7] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.wp-month-table th[b-zdbk3tlgz7],
.wp-month-table td[b-zdbk3tlgz7] {
    border: 1px solid var(--wp-line, #e3e7ec);
    text-align: center;
    padding: 1px 1px;
    font-size: 0.72rem;
}

.wp-month-table .wp-rowhead[b-zdbk3tlgz7] {
    width: 170px;
    text-align: left;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-month-table thead th[b-zdbk3tlgz7] {
    background: var(--wp-surface, #f8f9fb);
    padding: 2px 0;
}

.wp-month-dow[b-zdbk3tlgz7] {
    color: var(--wp-ink-3, #868e96);
    font-size: 0.6rem;
}

.wp-month-table th.wp-weekend[b-zdbk3tlgz7],
[b-zdbk3tlgz7] .wp-month-cell.wp-weekend {
    background: var(--wp-cell-weekend, #fbf7ef);
}

.wp-month-table th.wp-today[b-zdbk3tlgz7] {
    background: var(--wp-cell-today, #eef5ff);
}

[b-zdbk3tlgz7] .wp-month-cell {
    cursor: pointer;
    height: 30px;
}

[b-zdbk3tlgz7] .wp-month-cell-action {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

[b-zdbk3tlgz7] .wp-month-cell-action:focus-visible {
    outline: 2px solid var(--wp-accent, #0d6efd);
    outline-offset: -2px;
}

[b-zdbk3tlgz7] .wp-month-cell:hover {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

[b-zdbk3tlgz7] .wp-month-chip {
    display: inline-block;
    min-width: 16px;
    padding: 0 2px;
    margin: 0 1px;
    border-radius: 3px;
    color: #fff;
    font-weight: 600;
}

[b-zdbk3tlgz7] .wp-month-chip[data-conflict="True"] {
    outline: 2px solid #dc3545;
}

[b-zdbk3tlgz7] .wp-month-abs {
    font-weight: 700;
    margin-right: 1px;
}

[b-zdbk3tlgz7] .wp-month-open {
    color: var(--wp-open, #b45309);
    font-weight: 700;
    background: var(--wp-open-soft, #fff8ec);
}

.wp-month-sum[b-zdbk3tlgz7] {
    width: 44px;
    font-weight: 600;
}

.wp-footer-row td[b-zdbk3tlgz7] {
    background: var(--wp-sunken, #f8f9fb);
    border-top: 2px solid var(--wp-line-strong, #dee2e6);
}

[b-zdbk3tlgz7] .wp-absence {
    border: 1px dashed #999;
    border-left-width: 4px;
    border-radius: 4px;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #6c757d;
    background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f1f1f1 6px, #f1f1f1 12px);
}

[b-zdbk3tlgz7] .wp-cell.wp-absent {
    background: #fafafa;
}

[b-zdbk3tlgz7] .wp-add {
    display: block;
    width: 100%;
    border: 1px dashed #ced4da;
    background: transparent;
    color: #868e96;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.2;
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

[b-zdbk3tlgz7] .wp-cell:hover .wp-add,
[b-zdbk3tlgz7] .wp-cell:focus-within .wp-add,
[b-zdbk3tlgz7] .wp-add:focus-visible {
    max-height: 2rem;
    opacity: 1;
    pointer-events: auto;
}

.wp-emp-dot[b-zdbk3tlgz7] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.35rem;
}

@media (max-width: 1200px) {
    .wp-conflicts[b-zdbk3tlgz7] {
        display: none;
    }

    .wp-board-wrap.with-panel .wp-conflicts[b-zdbk3tlgz7] {
        display: flex;
        position: fixed;
        right: 1rem;
        top: 70px;
        width: min(340px, calc(100vw - 2rem));
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
        z-index: 1040;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    }
}
/* /Components/Pages/Portal/PortalAvailability.razor.rz.scp.css */
.availability-week-grid[b-l7ni0gy9q6] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
}

/* Die ganze Tageskachel ist das Tippziel — vorher war es nur der Textlink „Eintragen" mit
   rund 20 px Hoehe, weit unter der Grenze von 44 px fuer Beruehrung. */
.wp-availability-day[b-l7ni0gy9q6] {
    min-height: 88px;
}

.wp-availability-day:hover:not(:disabled)[b-l7ni0gy9q6] {
    border-color: var(--wp-accent, #0d6efd) !important;
}

@media (max-width: 1100px) {
    .availability-week-grid[b-l7ni0gy9q6] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .availability-week-grid[b-l7ni0gy9q6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
    .availability-week-grid[b-l7ni0gy9q6] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Verwaltung/SettingsPage.razor.rz.scp.css */
/* Farbprobe und Miniatur je Erscheinungsbild — man sieht, wofür man sich entscheidet,
   bevor man umschaltet. Bewusst reine Formen statt Bildschirmfotos: die veralten nicht. */

.wp-theme-dot[b-o6fdyjc27i] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: .35rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .12);
}

/* Der Akzentton MUSS derselbe sein wie --wp-accent in theme.css (hell). */
.wp-theme-dot-hell[b-o6fdyjc27i] {
    background: linear-gradient(135deg, #eeecfe 0%, #e5f0fc 60%, #5948dc 60%);
}

.wp-theme-dot-warm[b-o6fdyjc27i] {
    background: linear-gradient(135deg, #f5efe4 0%, #ece4d6 60%, #a4551f 60%);
}

.wp-theme-dot-modern[b-o6fdyjc27i] {
    background: linear-gradient(135deg, #f4f5fa 0%, #eeecff 60%, #6658e8 60%);
}

.wp-theme-dot-klassisch[b-o6fdyjc27i] {
    background: linear-gradient(135deg, #f4f6f9 0%, #1b2430 60%, #0d6efd 60%);
}

.wp-theme-preview[b-o6fdyjc27i] {
    height: 88px;
    border-radius: .5rem .5rem 0 0;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
}

/* Aufbau der Miniatur: links die Seitenleiste, oben die Werkzeugleiste, darunter Dienstkacheln. */
.wp-theme-preview-hell[b-o6fdyjc27i] {
    background-color: #f4f5fa;
    background-image:
        linear-gradient(#1b1d2a, #1b1d2a),
        linear-gradient(#ecedf4, #ecedf4),
        linear-gradient(#5948dc, #5948dc),
        linear-gradient(#fdf4e4, #fdf4e4),
        linear-gradient(#e5f0fc, #e5f0fc),
        linear-gradient(#efe9fb, #efe9fb),
        linear-gradient(#e5f0fc, #e5f0fc);
    background-size: 26px 100%, 40px 7px, 22px 7px, 100% 12px, 34px 10px, 34px 10px, 34px 10px;
    background-position:
        0 0,
        34px 10px,
        80px 10px,
        26px 28px,
        34px 48px,
        76px 48px,
        34px 66px;
}

.wp-theme-preview-warm[b-o6fdyjc27i] {
    background-color: #f5efe4;
    background-image:
        linear-gradient(#241f1a, #241f1a),
        linear-gradient(#e0d7c7, #e0d7c7),
        linear-gradient(#a4551f, #a4551f),
        linear-gradient(#f8ecd8, #f8ecd8),
        linear-gradient(#f7e6d6, #f7e6d6),
        linear-gradient(#e9f0e4, #e9f0e4),
        linear-gradient(#f7e6d6, #f7e6d6);
    background-size: 26px 100%, 40px 6px, 20px 6px, 100% 11px, 32px 9px, 32px 9px, 32px 9px;
    background-position:
        0 0,
        34px 10px,
        80px 10px,
        26px 27px,
        34px 46px,
        74px 46px,
        34px 63px;
}

.wp-theme-preview-modern[b-o6fdyjc27i] {
    background-color: #f4f5fa;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(#e2e5ed, #e2e5ed),
        linear-gradient(#6658e8, #6658e8),
        linear-gradient(#f0f2f7, #f0f2f7),
        linear-gradient(#eeecff, #eeecff),
        linear-gradient(#e4f5ed, #e4f5ed),
        linear-gradient(#fbefd9, #fbefd9);
    background-size: 26px 100%, 40px 7px, 22px 7px, 100% 12px, 34px 10px, 34px 10px, 34px 10px;
    background-position:
        0 0,
        34px 10px,
        80px 10px,
        26px 28px,
        34px 48px,
        76px 48px,
        34px 66px;
}

/* Klassisch: das Gitternetz und die kräftigen Signalfarben sind hier das Erkennungsmerkmal. */
.wp-theme-preview-klassisch[b-o6fdyjc27i] {
    background-color: #f4f6f9;
    background-image:
        linear-gradient(#1b2430, #1b2430),
        linear-gradient(#0d6efd, #0d6efd),
        linear-gradient(#198754, #198754),
        linear-gradient(#dc3545, #dc3545),
        linear-gradient(#fff8ec, #fff8ec),
        linear-gradient(#fff8ec, #fff8ec),
        linear-gradient(#e7f1ff, #e7f1ff);
    background-size: 26px 100%, 28px 8px, 24px 8px, 34px 8px, 30px 9px, 30px 9px, 30px 9px;
    background-position:
        0 0,
        34px 8px,
        68px 8px,
        34px 22px,
        34px 40px,
        70px 40px,
        34px 56px;
}

.wp-theme-preview[b-o6fdyjc27i]::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07);
}
/* /Components/Shared/Charts/BalanceSpread.razor.rz.scp.css */
.wp-bal[b-yi0lukium7] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.wp-bal-row[b-yi0lukium7] {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) 1fr 4rem;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
}

.wp-bal-name[b-yi0lukium7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-bal-track[b-yi0lukium7] {
    position: relative;
    height: 10px;
}

.wp-bal-fill[b-yi0lukium7] {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 4px;
}

/* Kühl = es fehlt Zeit. Warm = es ist Zeit aufgelaufen. Geprüftes Paar, nicht nach Gefühl gewählt. */
.wp-bal-fill.minus[b-yi0lukium7] {
    background: #4a7fb5;
}

.wp-bal-fill.plus[b-yi0lukium7] {
    background: #b5734a;
}

/* Genau ausgeglichen: ein neutraler Punkt auf der Null — nicht nichts, sonst sieht die Zeile kaputt aus. */
.wp-bal-null[b-yi0lukium7] {
    position: absolute;
    left: calc(50% - 4px);
    top: 2px;
    width: 8px;
    height: 6px;
    border-radius: 3px;
    background: var(--wp-line-strong, #c4c7d0);
}

.wp-bal-zero[b-yi0lukium7] {
    position: absolute;
    left: calc(50% - 1px);
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--wp-ink-3, #8a8d99);
    border-radius: 1px;
}

.wp-bal-value[b-yi0lukium7] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.wp-bal-value.minus[b-yi0lukium7],
.wp-chart-table .minus[b-yi0lukium7] { color: #2f5c88; }

.wp-bal-value.plus[b-yi0lukium7],
.wp-chart-table .plus[b-yi0lukium7] { color: #8a5433; }

.wp-bal-foot[b-yi0lukium7] {
    margin-top: .6rem;
    font-size: .76rem;
    color: var(--wp-ink-3, #6c757d);
}

/* Wie bei der Auslastung: auf dem Telefon Name oben, Balken darunter über die volle Breite.
   Beim Saldo ist das doppelt wichtig — ein halber Balken links und rechts der Null braucht Platz,
   sonst sieht ein kleines Minus aus wie gar keins. */
@media (max-width: 575.98px) {
    .wp-bal-row[b-yi0lukium7] {
        grid-template-columns: 1fr auto;
        row-gap: .15rem;
    }

    .wp-bal-name[b-yi0lukium7] {
        grid-column: 1;
        grid-row: 1;
    }

    .wp-bal-value[b-yi0lukium7] {
        grid-column: 2;
        grid-row: 1;
    }

    .wp-bal-track[b-yi0lukium7] {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: .35rem;
    }
}
/* /Components/Shared/Charts/CoverageTrend.razor.rz.scp.css */
.wp-chart[b-yyd1u7vv33] {
    display: block;
    width: 100%;
    height: 150px;
    overflow: visible;
}

/* Raster und Achse treten zurück — die Linie ist die Aussage, nicht das Papier darunter. */
.wp-chart-grid[b-yyd1u7vv33] {
    stroke: var(--wp-line, #e1e0d9);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp-chart-axis[b-yyd1u7vv33] {
    stroke: var(--wp-line-strong, #c3c2b7);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.wp-chart-split[b-yyd1u7vv33] {
    stroke: var(--wp-line-strong, #c3c2b7);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

.wp-chart-line[b-yyd1u7vv33] {
    fill: none;
    stroke: var(--wp-accent, #2a78d6);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.wp-chart-area[b-yyd1u7vv33] {
    fill: var(--wp-accent, #2a78d6);
    opacity: .09;
    stroke: none;
}

.wp-chart-dot[b-yyd1u7vv33] {
    fill: var(--wp-accent, #2a78d6);
    /* 2 px Grund um den Punkt, damit er auf der Linie sichtbar bleibt statt in ihr zu verschwinden. */
    stroke: var(--wp-surface, #fff);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.wp-chart-dot.worst[b-yyd1u7vv33] {
    fill: #ec835a;
}

.wp-chart-labels[b-yyd1u7vv33] {
    display: flex;
    margin-top: .35rem;
}

.wp-chart-label[b-yyd1u7vv33] {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: .68rem;
    color: var(--wp-ink-3, #898781);
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.wp-chart-label.current[b-yyd1u7vv33] {
    color: var(--wp-ink, #0b0b0b);
    font-weight: 600;
}

.wp-chart-label-top[b-yyd1u7vv33] {
    font-variant-numeric: tabular-nums;
    min-height: 1.1em;
    white-space: nowrap;
}
/* /Components/Shared/Charts/ShiftMix.razor.rz.scp.css */
.wp-mix[b-426bht7am3] {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.wp-mix-head[b-426bht7am3] {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: .82rem;
    margin-bottom: .2rem;
}

.wp-mix-swatch[b-426bht7am3] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
    align-self: center;
}

/* Der Name darf kürzen, die Zahl nie — sonst steht am Ende eine halbe Zahl da. */
.wp-mix-name[b-426bht7am3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-mix-count[b-426bht7am3] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.wp-mix-open-note[b-426bht7am3] {
    font-weight: 400;
    color: var(--wp-ink-3, #6c757d);
}

.wp-mix-track[b-426bht7am3] {
    display: flex;
    gap: 2px; /* 2 px Grund zwischen den Flächen, sonst verschmelzen sie zu einem Block */
    height: 10px;
}

.wp-mix-fill[b-426bht7am3] {
    border-radius: 4px;
    min-width: 3px;
}

/* Offen: dieselbe Farbe, aber als Schraffur — auch in Schwarzweiß und bei Farbfehlsicht
   unterscheidbar, ohne einen zweiten Farbton zu erfinden. */
.wp-mix-fill.open[b-426bht7am3] {
    background-image: repeating-linear-gradient(135deg,
        currentColor 0 2px, transparent 2px 5px);
    opacity: .55;
    border: 1px solid currentColor;
}
/* /Components/Shared/Charts/TeamLoad.razor.rz.scp.css */
.wp-load[b-1t25x4n9d1] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.wp-load-row[b-1t25x4n9d1] {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) 1fr 4rem;
    align-items: center;
    gap: .6rem;
    font-size: .82rem;
}

.wp-load-name[b-1t25x4n9d1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-load-track[b-1t25x4n9d1] {
    position: relative;
    height: 10px;
    background: var(--wp-sunken, #eef0f5);
    border-radius: 5px;
}

.wp-load-fill[b-1t25x4n9d1] {
    height: 100%;
    border-radius: 5px;
    background: var(--wp-accent, #2a78d6);
    min-width: 3px;
}

/* Unter Soll ist kein Fehler, nur weniger — derselbe Farbton, blasser. */
.wp-load-fill.under[b-1t25x4n9d1] {
    opacity: .45;
}

/* Über Soll: reservierte Warnfarbe, nie ein Serienton. */
.wp-load-fill.over[b-1t25x4n9d1] {
    background: #ec835a;
}

/* Die Soll-Linie steht im Grund, nicht auf dem Balken — sie soll ihn markieren, nicht durchschneiden. */
.wp-load-target[b-1t25x4n9d1] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--wp-ink-3, #8a8d99);
    border-radius: 1px;
}

.wp-load-value[b-1t25x4n9d1] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.wp-load-value.over[b-1t25x4n9d1],
.wp-chart-table .over[b-1t25x4n9d1] {
    color: #b1521f;
}

.wp-load-value.under[b-1t25x4n9d1],
.wp-chart-table .under[b-1t25x4n9d1] {
    color: var(--wp-ink-3, #6c757d);
    font-weight: 500;
}

.wp-load-foot[b-1t25x4n9d1] {
    margin-top: .6rem;
    font-size: .76rem;
    color: var(--wp-ink-3, #6c757d);
}

/* Auf dem Telefon bliebe von „Bachmeier-Hofstetter“ in einer 7-rem-Spalte nichts Lesbares übrig.
   Deshalb dort der Name über dem Balken, in voller Breite — der Balken verliert nichts, der Name gewinnt. */
@media (max-width: 575.98px) {
    .wp-load-row[b-1t25x4n9d1] {
        grid-template-columns: 1fr auto;
        row-gap: .15rem;
    }

    .wp-load-name[b-1t25x4n9d1] {
        grid-column: 1;
        grid-row: 1;
    }

    .wp-load-value[b-1t25x4n9d1] {
        grid-column: 2;
        grid-row: 1;
    }

    .wp-load-track[b-1t25x4n9d1] {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: .35rem;
    }
}