/*
  Design-System „Honig" (UI-Redesign 2026-07). Warme, freundliche Oberfläche für
  nicht technik-affine Café-Nutzer — helle Creme-Flächen, Honig-Akzent, runde
  Pills/Karten, Nunito Sans. Tokens unten sind die Single Source of Truth; die
  Komponenten-Klassen weiter unten (Buttons/Pills/Karten/Chips/Tabellen/Balken)
  bauen ausschließlich darauf auf. Selbst gehostete Schrift (offline-fest, PWA).
*/
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/NunitoSans-400.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/NunitoSans-600.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/NunitoSans-700.woff2") format("woff2");
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/NunitoSans-800.woff2") format("woff2");
}

:root {
    /* Flächen */
    --color-bg: #fdf9f0;            /* Seitenhintergrund */
    --color-surface: #fffdf8;       /* Karten/Flächen */
    --color-surface-muted: #f6f2ea; /* dezente Füllung (Track/Chips) */
    --color-border: #f0e6cd;        /* Standard-Rahmen 1.5px */
    --color-border-strong: #e8dbbc; /* Inputs/kräftiger */
    --color-divider: #f7f0de;       /* Tabellen-Trennlinien */

    /* Text */
    --color-text: #3a3226;          /* Ink */
    --color-text-muted: #8a7a5c;    /* Sekundär */
    --color-text-tertiary: #a08f6f; /* Labels/Muted */
    --color-placeholder: #c3b48f;

    /* Honig-Akzent */
    --color-primary: #d19a2f;
    --color-primary-hover: #b98623;
    --color-primary-contrast: #ffffff;
    --color-accent-soft: #f7e9c7;   /* Akzent-Fläche (aktive Nav-Pill) */
    --color-accent-ink: #5a4310;    /* Text auf Akzent-Fläche */
    --color-link: #96701d;          /* Link/Aktion */
    --color-link-hover: #5a4310;

    /* Status */
    --color-success: #5f8a4e;       /* besetzt/erfolg */
    --color-success-bg: #f1f6ec;
    --color-success-ink: #4c7040;
    --color-warn: #b07d2e;          /* offen/unbestätigt */
    --color-warn-bg: #faf4e4;
    --color-danger: #b0543f;        /* nur Text/destruktiv */
    --color-danger-bg: #faeeea;
    --color-ink-pill: #3a3226;      /* dunkle Pille (aktiver View-Switcher) */

    /* Vorschlag */
    --color-suggest-bg: #fff7e2;
    --color-suggest-border: #ddb45e;

    --status-ok: var(--color-success);
    --status-unterbesetzt: var(--color-warn);
    --status-meine: var(--color-primary);
    --status-vorlaeufig: var(--color-warn);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-panel: -6px 10px 28px rgba(90, 67, 16, 0.10);
    --shadow-card: 0 6px 24px rgba(90, 67, 16, 0.07);
    --shadow-accent: 0 2px 6px rgba(160, 120, 40, 0.30);

    --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
}

/* Formularfelder */
label {
    font-weight: 600;
    font-size: var(--font-size-sm);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 12px;
    background: #ffffff;
    color: var(--color-text);
}

    input::placeholder,
    textarea::placeholder {
        color: var(--color-placeholder);
        font-weight: 600;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

/* Buttons — Pill-Form, Honig-Primär */
button,
.btn {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 0.6rem 1.1rem;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    cursor: pointer;
    box-shadow: var(--shadow-accent);
    transition: background 0.12s ease, border-color 0.12s ease;
}

    button:hover,
    .btn:hover {
        background: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
    }

    button:disabled,
    .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
    box-shadow: none;
    font-weight: 700;
}

    .btn-secondary:hover {
        background: var(--color-warn-bg);
        border-color: var(--color-border-strong);
    }

.btn-danger {
    background: transparent;
    border-color: transparent;
    color: var(--color-danger);
    box-shadow: none;
}

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

/* Tabellen — Karten-Look, Label-Kopfzeile */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

    table th,
    table td {
        text-align: left;
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--color-divider);
    }

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

    table th {
        font-size: 0.69rem;
        color: var(--color-text-tertiary);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: var(--color-surface);
        border-bottom: 1.5px solid var(--color-border);
    }

/* Karten */
.card {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

/* Badges/Chips — voll rund, kompakt, 800er Gewicht */
.badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--color-accent-soft);
    border: none;
    color: var(--color-accent-ink);
}

.badge-ok {
    background: var(--color-success-bg);
    color: var(--color-success-ink);
}

.badge-inaktiv {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.badge-unterbesetzt {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}

.badge-vorlaeufig {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}

/* Stundenkonto-Status: „Honig"-Sprache — kein Rot mehr. Über/unter Volumen = amber,
   genau = grün. */
.badge-ueber {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}

.badge-unter {
    background: var(--color-warn-bg);
    color: var(--color-warn);
}

/* Plan-Host-Layout (Toolbar/Navigation/Detail-Panel) — global, nicht scoped, da PLAN-0010
   mit MeinPlan.razor einen zweiten Host für dieselbe Toolbar/Detail-Panel-Struktur einführt
   (PLAN-0006 §1: geteilte scoped Klassen rendern sonst lautlos ungestylt). Ursprünglich in
   Plan.razor.css, für PLAN-0010 hierher verschoben. */
.plan-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-4);
}

.plan-titel {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text);
    margin-right: 2px;
}

.plan-ansicht-umschalter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* View-Switcher als Pills — inaktiv Outline, aktiv dunkle Pille (Design). */
.plan-ansicht-umschalter .btn-secondary {
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 700;
}

.plan-ansicht-aktiv,
.plan-ansicht-umschalter .plan-ansicht-aktiv.btn-secondary {
    background: var(--color-ink-pill);
    color: var(--color-bg);
    border-color: var(--color-ink-pill);
}

.plan-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-navigation .btn-secondary {
    padding: 6px 12px;
    font-size: 13px;
}

.plan-zeitraum {
    margin-left: 4px;
    font-weight: 800;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Bereich-Filter + Vorschlags-Buttons nach rechts schieben (Design: rechte Gruppe). */
.plan-toolbar > label {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.plan-detail-panel {
    margin-top: var(--space-4);
    position: relative;
}

.plan-detail-schliessen {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

.zuweisung-abwesend {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* „Arbeitet nicht mit"-Warnung: inkompatible Mitarbeiter gemeinsam verplant. */
.konflikt-stern {
    color: #c0392b;
    font-weight: 700;
    margin-left: 0.2em;
    cursor: help;
}

/* Gesetzliche Ruhezeit-Verletzung (ArbZG §5). */
.ruhezeit-warnung {
    color: #b9770e;
    font-weight: 700;
    margin-left: 0.35em;
    cursor: help;
}

/* Stundenraster-Ansicht (/plan). */
.raster-scroll {
    overflow-x: auto;
    overflow-y: hidden; /* sonst erzwingt overflow-x:auto einen nutzlosen vertikalen Scrollbereich */
    -webkit-overflow-scrolling: touch;
}
.raster {
    width: max-content;
    min-width: 100%;
}
.raster-kopf,
.raster-body {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, 12rem);
}
.raster-kopf {
    position: sticky;
    top: 0;
    background: var(--color-surface, #fff);
    z-index: 2;
    border-bottom: 1px solid var(--color-border, #e2e6ea);
}
.raster-tag-kopf {
    text-align: center;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    border-left: 1px solid var(--color-border, #eef0f2);
}
.raster-tag-kopf span { display: block; color: var(--color-text-muted, #888); font-size: 0.75rem; }
.raster-body { position: relative; }
.raster-achse { position: relative; }
.raster-achse-label {
    position: absolute;
    right: 0.3rem;
    transform: translateY(-0.5em);
    font-size: 0.7rem;
    color: var(--color-text-muted, #999);
}
.raster-tag-spalte {
    position: relative;
    border-left: 1px solid var(--color-border, #eef0f2);
}
.raster-linie {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed #edf0f3;
}
.raster-block {
    position: absolute;
    box-sizing: border-box;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #ccd3da;
    background: #eef2f7;
    overflow: hidden;
    text-align: left;
    font-size: 0.72rem;
    line-height: 1.15;
    cursor: pointer;
}
.raster-block:hover { filter: brightness(0.97); }
.raster-block.badge-ok { background: #e6f6ec; border-color: #b6e0c4; }
.raster-block.badge-unterbesetzt { background: #fdecea; border-color: #f2b8b1; }
.raster-block-bereich {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.raster-block-name { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raster-block-zeit { display: block; color: #555; }
.raster-block-person {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.15rem;
    border-left: 2px solid rgba(0, 0, 0, 0.12);
    margin-top: 1px;
}
.raster-block-fehlt { display: block; color: #b9450b; font-weight: 600; }

/* Zugewiesene Personen im Wochen-Schichtkasten (SchichtChip). */
.plan-schicht-person {
    display: block;
    font-size: 0.8rem;
    line-height: 1.25;
    padding-left: 0.3rem;
    border-left: 2px solid rgba(0, 0, 0, 0.15);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Backup / Bereitschaft — in Klammern, dezent kursiv. */
.plan-schicht-person-backup {
    color: var(--color-text-muted, #777);
    font-style: italic;
    border-left-style: dashed;
}

/* Versionen-Verwaltung (Schicht-Vorlagen). */
.versionen-liste tr.version-aktiv {
    background: #eaf2fb;
    font-weight: 600;
}
.versionen-liste tbody tr:hover {
    background: #f2f6fb;
}
.versionen-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0;
}
.version-bearbeitung {
    border-top: 1px solid var(--color-border, #e2e6ea);
    margin-top: 0.6rem;
    padding-top: 0.8rem;
}

/* Balken-Diagramme (Stundenkonto/Kosten-Prognose) — reines CSS, kein JS-Charting. */
.balken-diagramm {
    margin-top: 0.75rem;
}

.balken-zeile {
    display: grid;
    grid-template-columns: 10rem 1fr 1fr auto;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.balken-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.balken-spur {
    background: var(--color-surface-muted, #eef0f2);
    border-radius: 3px;
    height: 1.1rem;
    overflow: hidden;
}

.balken {
    height: 100%;
    border-radius: 3px;
    min-width: 2px;
    transition: width 0.2s ease;
}

.balken-soll { background: #7f8c8d; }
.balken-ok { background: #27ae60; }
.balken-unter { background: #e67e22; }
.balken-ueber { background: #c0392b; }
.balken-uebermax { background: #7b241c; }
.balken-kosten { background: #2980b9; }
/* Unbesetzt-Segment stapelt rechts an das Besetzt-Segment (schraffiert = geschätzt). */
.balken-kosten, .balken-kosten-unbesetzt { display: inline-block; vertical-align: top; }
.balken-kosten-unbesetzt {
    background: repeating-linear-gradient(45deg, #2980b9, #2980b9 4px, #aed0ea 4px, #aed0ea 8px);
}

/* Senkrechte Max-Marke auf der Verplant-Spur. */
.balken-spur { position: relative; font-size: 0; }
.balken-max-marker {
    position: absolute;
    top: -1px;
    bottom: -1px;
    width: 2px;
    background: #2c3e50;
    transform: translateX(-1px);
}
.legende-strich {
    display: inline-block;
    width: 2px;
    height: 0.8rem;
    background: #2c3e50;
    margin: 0 0.2rem 0 0.6rem;
    vertical-align: middle;
}
.wert-uebermax { color: #7b241c; font-weight: 700; }

.balken-wert {
    font-size: 0.85rem;
    white-space: nowrap;
    text-align: right;
}

.balken-legende {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.legende-punkt {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    margin: 0 0.2rem 0 0.6rem;
    vertical-align: middle;
}

.kosten-gesamt {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Auf schmalen Screens: Balken-Zeile stapelt Label über die Spuren. */
@media (max-width: 640px) {
    .balken-zeile {
        grid-template-columns: 1fr 1fr;
    }

    .balken-label,
    .balken-wert {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* PLAN-0020: Plan-Vorschlag-Prüf-Panel auf /plan — global, nicht scoped (gleiches Muster/Grund
   wie .plan-detail-panel oben, PLAN-0006 §1). */
.plan-vorschlag-panel {
    margin-top: var(--space-4);
}

.plan-vorschlag-liste {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.plan-vorschlag-liste li {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Plan-Ansichten (Woche/Tag/Monat/Liste, PLAN-0009) — global, nicht scoped, da
   SchichtChip/WochenAnsicht/TagesAnsicht/MonatsAnsicht/ListenAnsicht eigene
   Komponenten sind (PLAN-0006 §1: geteilte scoped Klassen rendern lautlos ungestylt). */
.plan-grid {
    display: grid;
    grid-template-columns: 5.5rem repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.plan-grid-zelle {
    background: var(--color-surface);
    padding: var(--space-2);
}

.plan-grid-kopf {
    background: var(--color-bg);
    text-align: center;
}

.plan-datum {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.plan-bereich-name {
    font-weight: 600;
    display: flex;
    align-items: center;
}

.plan-tag-zelle {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 5rem;
}

.plan-schicht-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    box-sizing: border-box; /* sonst überläuft width:100% + padding die Zelle → rechter Rand/Outline abgeschnitten */
    text-align: left;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.plan-schicht-chip-kompakt {
    padding: 0.15rem var(--space-1);
    gap: 0;
    font-size: var(--font-size-sm);
}

/* PLAN-0010 — Eigen-Hervorhebung in der Mitarbeiter-Sicht. Global (nicht scoped),
   da SchichtChip in WochenAnsicht/TagesAnsicht/MonatsAnsicht wiederverwendet wird
   (PLAN-0006 §1: geteilte scoped Klassen rendern sonst lautlos ungestylt). Dezent
   über outline statt Hintergrundfarbe, damit ok/unterbesetzt-Badgefarben nicht kollidieren. */
.plan-schicht-chip-meine {
    outline: 2px solid var(--status-meine);
    outline-offset: -2px;
}

/* Aktuell im Detail-Panel geöffnete Schicht — klar als „selektiert" markiert. Inset-Ring
   (kein outline mit +offset), damit `.plan-grid { overflow:hidden }` den Rahmen nicht rechts
   abschneidet. Kräftiger als die -meine-Outline, damit die Selektion eindeutig führt. */
.plan-schicht-chip-aktiv {
    box-shadow: inset 0 0 0 2.5px var(--color-primary);
    background: #fbf1d9;
}

.plan-schicht-name {
    font-weight: 600;
}

.plan-schicht-chip-kompakt .plan-schicht-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.plan-schicht-zeit,
.plan-schicht-abdeckung,
.plan-schicht-fehlend,
.plan-schicht-abdeckung-kurz {
    font-size: var(--font-size-sm);
}

/* Vorschlag-im-Kalender: klickbarer Kopf (Button-Reset) + inline-Vorschläge mit ✓/✗ direkt im
   Schichtkasten, hellblauer Kasten bei offenem Vorschlag. */
.plan-schicht-chip-klick {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Das globale button:hover (dunkle Primärfarbe) darf den Schichtkasten/die Icon-Buttons NICHT
   einfärben — sonst wird der Inhalt unlesbar. Gleiche Spezifität, später definiert ⇒ gewinnt. */
.plan-schicht-chip-klick:hover {
    background: none;
    border-color: transparent;
    color: inherit;
}

.plan-schicht-chip-vorschlag {
    background: #e3f2fd; /* hellblau */
    border: 1px solid #64b5f6;
}

.plan-schicht-vorschlaege {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding-top: 0.25rem;
    border-top: 1px dashed #90caf9;
}

.plan-vorschlag-inline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
}

.plan-vorschlag-inline .pv-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-vorschlag-inline .pv-ok,
.plan-vorschlag-inline .pv-nein {
    border: none;
    border-radius: 0.3rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.plan-vorschlag-inline .pv-ok,
.plan-vorschlag-inline .pv-ok:hover {
    background: color-mix(in srgb, var(--status-ok) 25%, white);
    color: var(--status-ok);
    border-color: transparent;
}

.plan-vorschlag-inline .pv-nein,
.plan-vorschlag-inline .pv-nein:hover {
    background: color-mix(in srgb, var(--status-unterbesetzt) 20%, white);
    color: var(--status-unterbesetzt);
    border-color: transparent;
}

.plan-schicht-fehlend {
    font-weight: 600;
}

.plan-schicht-hinzufuegen {
    align-self: flex-start;
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
}

.plan-neue-schicht {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.plan-wochentage-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.plan-wochentag-checkbox {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 400;
}

/* Monats-Ansicht (PLAN-0009 Phase 5) — global (siehe Hinweis oben zu Plan-Ansichten). */
.plan-monat-gitter {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.plan-monat-kopf {
    background: var(--color-bg);
    text-align: center;
    padding: var(--space-2);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.plan-monat-zelle {
    background: var(--color-surface);
    padding: var(--space-1);
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.plan-monat-tag-fremd {
    background: var(--color-bg);
    opacity: 0.6;
}

.plan-monat-heute {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: #fbf1d9;
}

.plan-monat-tageskopf {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
}

    .plan-monat-tageskopf:hover {
        background: var(--color-bg);
    }

.plan-monat-mehr {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: 0;
    cursor: pointer;
}

    .plan-monat-mehr:hover {
        text-decoration: underline;
    }

/* Kachel-Grid (Home/Verwaltung-Einstiegspunkte) — global, nicht scoped, da
   mehrere Komponenten (Home.razor, Verwaltung.razor) dieselben Klassen nutzen. */
.verwaltung-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.verwaltung-kachel {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

    .verwaltung-kachel:hover {
        border-color: var(--color-primary);
    }

    .verwaltung-kachel h2 {
        margin: 0 0 var(--space-2) 0;
        font-size: var(--font-size-lg);
    }

    .verwaltung-kachel p {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

/* Hinweis-/Fehler-/Erfolgsboxen */
.hinweis,
.fehlerbox,
.erfolgbox {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.hinweis {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.fehlerbox {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

.erfolgbox {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Ist-Zeit-Erfassung (PLAN-0011) — global, nicht scoped: MeinPlan.razor (Phase 4) UND
   Plan.razor (Phase 5) nutzen dieselben Klassen im jeweiligen Detail-Panel (PLAN-0006 §1:
   scoped Klassen einer anderen Komponente rendern sonst lautlos ungestylt). */
.ze-erfassung-formular {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: var(--space-2) 0 var(--space-4) 0;
}

.ze-erfassung-formular label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ze-erfassung-formular input[type="time"],
.ze-erfassung-formular input[type="number"],
.ze-erfassung-formular input[type="text"] {
    min-width: 6rem;
}

.ze-erfassung-eintrag {
    margin: var(--space-2) 0 var(--space-4) 0;
}

/* Änderungswunsch des Mitarbeiters neben der gebuchten Ist-Zeit (Planer-Genehmigung). */
.ze-korrekturwunsch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-warn, #e67e22);
    background: var(--color-surface-muted, #f6f2ee);
    border-radius: 3px;
}

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

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ═══════════════════════════════════════════════════════════════════════
   „Honig"-Redesign — globale Feinschliff-Overrides (Cascade gewinnt am Ende).
   ═══════════════════════════════════════════════════════════════════════ */
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3 { color: var(--color-text); }
h1 { font-weight: 800; font-size: 20px; }
h2 { font-weight: 800; font-size: 15px; }

/* Hinweis = dezenter Sekundärtext; Tipp-Box (gestrichelt) via .hinweis-box. */
.hinweis {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
}
.hinweis-box {
    background: var(--color-surface);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
}
.fehlerbox {
    background: var(--color-danger-bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    color: var(--color-danger);
    padding: 0.6rem 0.9rem;
    font-weight: 700;
}
.erfolgbox {
    background: var(--color-success-bg);
    border: 1.5px solid transparent;
    border-radius: 12px;
    color: var(--color-success-ink);
    padding: 0.6rem 0.9rem;
    font-weight: 700;
}

/* Balken-Diagramme (Stundenkonto/Auswertung) — Honig-Track + Fills */
.balken-spur { background: #f3ecd8; }
.balken-soll { background: var(--color-text-tertiary); }
.balken-ok, .balken-unter, .balken-ueber { background: var(--color-warn); }
.balken-uebermax { background: #8a5a12; }
.balken-kosten { background: var(--color-primary); }
.balken-legende { color: var(--color-text-muted); font-weight: 600; }

/* View-Switcher / Pill-Leisten (Plan-Ansichten, Verwaltung-Tabs) */
.pill-leiste { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
    padding: 7px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pill:hover { background: var(--color-warn-bg); }
.pill.aktiv, a.pill.active {
    background: var(--color-ink-pill);
    color: var(--color-bg);
    border-color: var(--color-ink-pill);
}

/* Ist-Zeiten-Formular runder */
.ze-erfassung-formular input,
.ze-erfassung-formular select { border-radius: 10px; }

/* Plan-Bühne: Wochenraster links, Schicht-Detail als rechtes Seitenpanel (Design „Honig"). */
.plan-buehne {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.plan-buehne-view {
    flex: 1;
    min-width: 0;
}
.plan-detail-panel {
    width: 300px;
    flex: none;
    order: -1; /* Schicht-Detail LINKS neben dem Wochenplan (der dann nach rechts rückt). */
    position: sticky;
    top: 76px;
    border: 1.5px solid #ecdfc3;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    padding: 16px;
}
.plan-detail-panel h2 {
    margin: 0.2rem 0 0;
    font-size: 15.5px;
}
.plan-detail-panel h3 {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0.8rem 0 0.4rem;
}
.plan-detail-schliessen {
    float: right;
    padding: 2px 10px;
    font-size: 0.75rem;
}
@media (max-width: 1100px) {
    .plan-buehne { flex-direction: column; }
    .plan-detail-panel { width: 100%; position: static; }
}

/* Verwaltungs-Unternavigation (Pill-Leiste) — klebt als zweite Zeile direkt unter dem Haupt-Header
   (Top-Bar 58px), bleibt beim Scrollen sichtbar und gehört optisch zum Header. */
.verwaltung-nav {
    position: sticky;
    top: 58px;
    z-index: 15;
    margin: 0 0 16px;
    padding: 9px 8px;
    background: #fffdf8;
    border-bottom: 1.5px solid #ecdfc3;
}
/* NavLink setzt .active — als dunkle Pille darstellen (Match auf Prefix passt für /neu, /{id}). */
a.pill.active { background: var(--color-ink-pill); color: var(--color-bg); border-color: var(--color-ink-pill); }

/* Rechtsbündige Zahlenspalten in Tabellen */
th.num, td.num { text-align: right; }

/* Top-Bar-Navigation GLOBAL (nicht scoped): NavLink ist eine Kind-Komponente, die die
   scoped MainLayout-CSS nicht erbt — die Pills müssen global definiert sein, sonst bleiben
   die Nav-Einträge schlichte Textlinks. */
.top-bar .nav-link {
    padding: 8px 15px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 13.5px;
    font-weight: 700;
}
.top-bar .nav-link:hover { background: var(--color-warn-bg); color: var(--color-accent-ink); }
.top-bar .nav-link.active { background: var(--color-accent-soft); color: var(--color-accent-ink); }

/* Tabellen-Aktionen als Text-Links (Design): Bearbeiten/Umbenennen/Deaktivieren statt Buttons. */
td button.btn-secondary {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-link);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 2px 6px;
}
td button.btn-secondary:hover { background: transparent; color: var(--color-link-hover); }

/* Plan-Tag-Kopf kompakt (Prototyp: „Mo 13.07."), Datum inline neben dem Kürzel */
.plan-grid-kopf strong { font-size: 12.5px; font-weight: 800; }
.plan-grid-kopf .plan-datum { display: inline; margin-left: 4px; font-size: 11px; color: var(--color-text-tertiary); }

/* „Heute" hervorheben — dezenter Honig-Hintergrund in Wochen-, Tages- und Stundenraster-Ansicht.
   Nach den betroffenen Spalten-/Zellen-Regeln definiert, damit die Tönung bei gleicher Spezifität
   gewinnt. Der Kopf bekommt einen Tick mehr Sättigung als die Zelle. */
.plan-heute { background: #fbf1d9; }
.plan-grid-kopf.plan-heute,
.raster-tag-kopf.plan-heute { background: #f7e7bf; }
.plan-tag-liste.plan-heute { background: transparent; } /* Tagesplan: nur der Banner trägt die Farbe */

.plan-heute-banner {
    background: #f7e7bf;
    color: #5a4310;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid #ecdfc3;
    margin-bottom: 4px;
}

/* Plan-Legende unter dem Raster (Prototyp) */
.plan-legende {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 8px 2px;
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-weight: 600;
}
.plan-legende-punkt {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 2px;
}
.legende-besetzt { background: var(--color-success); }
.legende-offen { background: var(--color-warn); }
.legende-vorschlag { background: repeating-linear-gradient(45deg, var(--color-suggest-border), var(--color-suggest-border) 3px, var(--color-suggest-bg) 3px, var(--color-suggest-bg) 6px); }

/* Überbuchte Schicht (mehr Köpfe als Bedarf) — eigener „Clay"-Ton, passt zu Honig,
   klar unterscheidbar von grün (besetzt) und amber (offen). */
:root { --color-over-bg: #f7e7df; --color-over-ink: #b56a41; }
.badge-ueberbucht { background: var(--color-over-bg); color: var(--color-over-ink); }
.plan-schicht-chip.badge-ueberbucht { background: var(--color-over-bg); }
.plan-schicht-ueberbucht {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-over-ink);
}
.legende-ueberbucht { background: var(--color-over-ink); }

/* Accordeon (native <details>) — z.B. „Arbeitet nicht mit" (default zu) */
.mein-accordeon > summary.accordeon-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mein-accordeon > summary.accordeon-summary::-webkit-details-marker { display: none; }
.mein-accordeon > summary.accordeon-summary::before {
    content: "▸";
    color: var(--color-text-tertiary);
    font-size: 0.9em;
    transition: transform 0.12s ease;
}
.mein-accordeon[open] > summary.accordeon-summary::before { transform: rotate(90deg); }
.mein-accordeon > summary.accordeon-summary h2 { display: inline; margin: 0; }

/* Mitarbeiter-Tauschliste */
.tausch-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tausch-liste li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 10px 12px; border: 1.5px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
}
.tausch-liste li button { margin-left: auto; }

/* Multi-Berechtigungsrollen-Auswahl */
.rollen-auswahl { border: 1.5px solid var(--color-border); border-radius: 14px; padding: 12px 14px; margin: 0 0 var(--space-4); }
.rollen-auswahl legend { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-tertiary); padding: 0 4px; }
.rollen-checkbox { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-weight: 700; color: var(--color-text); }

/* Verwaltungs-Subnav an die Haupt-Nav angleichen: weiche Honig-Pills, aktiv = Akzent-Fläche
   (nicht dunkel), etwas kleiner als die Top-Nav. */
.verwaltung-nav { gap: 4px; }
.verwaltung-nav .pill {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
}
.verwaltung-nav .pill:hover { background: var(--color-warn-bg); }
.verwaltung-nav a.pill.active { background: var(--color-accent-soft); color: var(--color-accent-ink); border: none; }

/* Soll-Marke im Einzelbalken (senkrechte graue Linie), Max-Marke bleibt kräftiger. */
.balken-soll-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--color-text-tertiary);
    border-radius: 1px;
}
.legende-soll-strich { background: var(--color-text-tertiary); }