/* =====================================================================
   PEGASUS COPILOT — DIENSTPLAN
   ---------------------------------------------------------------------
   01.10.2026, zweite Fassung „einfach". Jannis zur ersten: „Design ist
   too much — übersichtlich, einfach." Deshalb hier: das Raster ist die
   Hauptsache (Namen, Tage, Uhrzeiten), alles andere tritt zurück.
     – Farbe nur noch als schmaler Streifen am Dienst (Art) und als
       Schrift bei Abwesenheiten; Flächen neutral.
     – Keine Verläufe, keine Schatten, keine Goldkanten, keine Bewegung
       außer einem dezenten Hover.
     – Heute: Datum in Akzentfarbe, Spalte kaum getönt. Wochenende fast
       ohne Tönung.
     – Hinweise als kleiner Punkt mit Tooltip.

   Wird NACH allen anderen Stilen geladen. Jede Regel hängt an
   #schichtplanung (bzw. an eigenen dp-Klassen für Dialoge außerhalb).
   ===================================================================== */

#schichtplanung {
    --dp-karte:      var(--bg-elevated, #fff);
    --dp-grund:      var(--bg-base, #FAF6EF);
    --dp-text:       var(--text-primary, #0F1B2D);
    --dp-leise:      var(--text-muted, #8B7E74);
    --dp-akzent:     var(--accent, #B8862B);
    --dp-linie:      rgba(15, 27, 45, .07);
    --dp-linie-2:    rgba(15, 27, 45, .12);
    --dp-heute:      rgba(184, 134, 43, .045);
    --dp-wochenende: rgba(15, 27, 45, .018);
    --dp-dienst:     #F6F4F0;      /* neutrale Fläche eines Dienstes */
    --dp-dienst-hov: #EFEBE4;
    --dp-warn:       #B7651B;

    /* Art nur als Streifen */
    --dp-frueh: #C9A24A;
    --dp-tag:   #B5AA96;
    --dp-spaet: #3A5579;
    --dp-nacht: #6A66A3;

    /* Abwesenheit nur als Schrift */
    --dp-urlaub: #2F6B4A;
    --dp-krank:  #9A3F37;
    --dp-ho:     #5E4F8E;
}
body.theme-dark #schichtplanung {
    --dp-linie:      rgba(255, 255, 255, .07);
    --dp-linie-2:    rgba(255, 255, 255, .12);
    --dp-heute:      rgba(212, 176, 94, .06);
    --dp-wochenende: rgba(255, 255, 255, .02);
    --dp-dienst:     rgba(255, 255, 255, .055);
    --dp-dienst-hov: rgba(255, 255, 255, .09);
    --dp-warn:       #F0A65A;
    --dp-frueh: #D4B05E;
    --dp-tag:   #9C9384;
    --dp-spaet: #8FAFD6;
    --dp-nacht: #A29EE0;
    --dp-urlaub: #9ED3B1;
    --dp-krank:  #F1A99F;
    --dp-ho:     #C6BAF2;
}
body.theme-modern #schichtplanung {
    --dp-heute: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
#schichtplanung .dp-kopf {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 16px;
    margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none;
}
#schichtplanung .dp-kopf-titel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
#schichtplanung .dp-kopf .shift-header-title {
    margin: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--dp-leise);
    letter-spacing: 0; text-transform: none;
}
#schichtplanung .dp-kw {
    display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--dp-text); font: inherit; text-align: left;
}
#schichtplanung .dp-kw-gross { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
#schichtplanung .dp-kw-klein { font-size: 14px; color: var(--dp-leise); }
#schichtplanung .dp-kw:hover .dp-kw-gross { text-decoration: underline; text-decoration-color: var(--dp-linie-2); text-underline-offset: 5px; }
#schichtplanung .dp-kw:focus-visible { outline: 2px solid var(--dp-akzent); outline-offset: 3px; border-radius: 4px; }
#schichtplanung .dp-sprung-datum { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#schichtplanung .dp-kopf-steuer { display: flex; align-items: center; gap: 8px; }
#schichtplanung .shift-nav-btns,
#schichtplanung .dp-ansicht-wahl {
    display: inline-flex; align-items: center; gap: 0; padding: 0; overflow: hidden;
    background: var(--dp-karte); border: 1px solid var(--dp-linie-2); border-radius: 8px; box-shadow: none;
}
#schichtplanung .shift-nav-btn,
#schichtplanung .dp-ansicht-knopf {
    height: 32px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--dp-text); font-size: 13px; font-weight: 500; box-shadow: none;
}
#schichtplanung .shift-nav-btn + .shift-nav-btn,
#schichtplanung .dp-ansicht-knopf + .dp-ansicht-knopf { border-left: 1px solid var(--dp-linie); }
#schichtplanung .shift-nav-btn:hover,
#schichtplanung .dp-ansicht-knopf:hover { background: var(--dp-wochenende); }
#schichtplanung .shift-nav-btn.shift-nav-today { background: transparent; color: var(--dp-text); font-weight: 600; padding: 0 12px; box-shadow: none; }
#schichtplanung .dp-ansicht-knopf { color: var(--dp-leise); }
#schichtplanung .dp-ansicht-knopf.is-an { color: var(--dp-text); font-weight: 600; background: var(--dp-wochenende); box-shadow: none; }

#schichtplanung .dp-kopf-werkzeuge { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: auto; justify-content: flex-start; }
#schichtplanung .shift-search-wrap { flex: 1 1 200px; max-width: 280px; }
#schichtplanung .shift-search-wrap > input { height: 34px; border-radius: 8px; border: 1px solid var(--dp-linie-2); background: var(--dp-karte); box-shadow: none; }
#schichtplanung .shift-search-wrap > input:focus { border-color: var(--dp-akzent); box-shadow: none; }
#schichtplanung .shift-dropdown-toggle,
#schichtplanung .shift-copy-btn {
    height: 34px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--dp-linie-2); background: var(--dp-karte);
    color: var(--dp-text); font-size: 13px; font-weight: 500; box-shadow: none;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
#schichtplanung .shift-copy-btn svg { color: var(--dp-leise); }
#schichtplanung .shift-copy-btn:hover,
#schichtplanung .shift-dropdown-toggle:hover { border-color: var(--dp-linie-2); background: var(--dp-wochenende); color: var(--dp-text); }
#schichtplanung .shift-dropdown.open .shift-dropdown-toggle { border-color: var(--dp-akzent); box-shadow: none; }
#schichtplanung #shiftDeptDropdown { margin-right: auto; }

/* Hüllen aus dem alten Raster neutralisieren */
#schichtplanung .shift-grid-wrap { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
#schichtplanung .shift-grid-wrap::after,
#schichtplanung .shift-grid-wrap::before { display: none; content: none; }
#schichtplanung #shiftGridContainer { padding: 0; text-align: left; color: var(--dp-text); animation: none; }
#schichtplanung .dp-laden { padding: 48px 0; text-align: center; color: var(--dp-leise); font-size: 14px; }

/* ── Eine Zeile Zahlen ──────────────────────────────────────────────── */
#schichtplanung .dp-summe {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0 0 10px;
    font-size: 13px; color: var(--dp-leise);
}
#schichtplanung .dp-summe > * + *::before { content: '·'; margin: 0 9px; color: var(--dp-linie-2); }
#schichtplanung .dp-summe b { color: var(--dp-text); font-weight: 600; font-variant-numeric: tabular-nums; }
#schichtplanung .dp-summe-knopf {
    padding: 0; border: 0; background: none; font: inherit; color: var(--dp-text); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--dp-linie-2); text-underline-offset: 3px;
}
#schichtplanung .dp-summe-knopf.is-warn { color: var(--dp-warn); }
#schichtplanung .dp-summe-knopf:hover { text-decoration-color: currentColor; }

/* ── Tauschanfragen, leere Woche, leerer Plan ──────────────────────── */
#schichtplanung .dp-tausch-liste {
    display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
    border-radius: 8px; background: var(--dp-karte); border: 1px solid var(--dp-linie-2);
}
#schichtplanung .dp-tausch-titel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--dp-text); }
#schichtplanung .dp-tausch-titel svg { color: var(--dp-leise); }
#schichtplanung .dp-tausch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#schichtplanung .dp-tausch-text { flex: 1 1 220px; min-width: 0; }
#schichtplanung .dp-tausch-wer { font-size: 13.5px; }
#schichtplanung .dp-tausch-wann { font-size: 12.5px; color: var(--dp-leise); }

#schichtplanung .dp-knopf {
    height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--dp-linie-2); background: var(--dp-karte); color: var(--dp-text);
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; box-shadow: none;
}
#schichtplanung .dp-knopf:hover { background: var(--dp-wochenende); }
#schichtplanung .dp-knopf-gold { background: var(--dp-text); color: var(--dp-karte); border-color: transparent; }
#schichtplanung .dp-knopf-gold:hover { background: var(--dp-text); opacity: .9; }

#schichtplanung .dp-hinweisband {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px;
    border-radius: 8px; border: 1px dashed var(--dp-linie-2); background: none; font-size: 13px;
}
#schichtplanung .dp-hinweisband > div { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 0 6px; }
#schichtplanung .dp-hinweisband strong { font-weight: 600; }
#schichtplanung .dp-hinweisband span { color: var(--dp-leise); }
#schichtplanung .dp-hinweisband-icon { display: none; }

#schichtplanung .dp-leer {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 48px 24px; border-radius: 10px; background: var(--dp-karte); border: 1px solid var(--dp-linie);
}
#schichtplanung .dp-leer-bild { color: var(--dp-leise); opacity: .7; margin-bottom: 4px; }
#schichtplanung .dp-leer h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0; }
#schichtplanung .dp-leer p { margin: 0 0 8px; color: var(--dp-leise); font-size: 14px; max-width: 420px; line-height: 1.5; }

/* ── Raster ──────────────────────────────────────────────────────────── */
/* EIN Scrollen (Jannis 01.10.2026: Seite und Plan scrollten getrennt).
   Der Plan wächst auf volle Höhe, gescrollt wird nur die Seite. Die
   Tageszeile klebt dabei oben (sticky gegen das Fenster). Waagerecht
   scrollt der Kasten nur, wenn das Raster wirklich breiter ist als der
   Platz — dann klebt die Namensspalte links (siehe @container unten). */
#schichtplanung .dp-raster-wrap {
    position: relative; overflow-x: auto; overflow-y: hidden; max-height: none;
    border-radius: 10px; background: var(--dp-karte); border: 1px solid var(--dp-linie-2); box-shadow: none;
    scrollbar-width: thin; scrollbar-color: var(--dp-linie-2) transparent;
}
#schichtplanung .dp-raster {
    /* display/overflow ausdrücklich: eine allgemeine Handy-Regel macht jede
       Tabelle zu display:block mit overflow:auto. Dann wäre die Tabelle
       selbst der Scroll-Container, und die Namensspalte klebte an ihr statt
       am Kasten — sie rutschte beim Wischen mit weg. */
    display: table; overflow: visible;
    width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 0;
    font-size: 13px; color: var(--dp-text);
}
#schichtplanung .dp-raster.dp-monat { min-width: calc(150px + var(--dp-tage) * 24px + 56px); }
/* Die globale Zeilen-Animation (rowSlideIn) startet bei jedem Neuzeichnen
   neu, für jede Zeile. Im Plan aus. */
#schichtplanung .dp-raster tbody tr,
#schichtplanung .dp-raster tbody tr:nth-child(even) { background: transparent; animation: none; }
#schichtplanung .dp-raster th,
#schichtplanung .dp-raster td { border: 0; margin: 0; }

#schichtplanung .dp-raster thead th {
    position: sticky; top: 0; z-index: 3; background: var(--dp-karte);
    border-bottom: 1px solid var(--dp-linie-2); padding: 9px 4px 8px; vertical-align: top;
    font-weight: 500; text-transform: none; letter-spacing: 0;
}
#schichtplanung .dp-kopf-person { left: 0; z-index: 4 !important; width: 210px; text-align: left; padding-left: 14px !important; }
#schichtplanung .dp-monat .dp-kopf-person { width: 150px; }
#schichtplanung .dp-kopf-person span { font-size: 12px; font-weight: 500; color: var(--dp-leise); }
#schichtplanung .dp-kopf-person small { margin-left: 6px; font-size: 12px; color: var(--dp-leise); }
#schichtplanung .dp-kopf-std { width: 84px; text-align: right; padding-right: 14px !important; font-size: 12px; font-weight: 500; color: var(--dp-leise); }
#schichtplanung .dp-monat .dp-kopf-std { width: 56px; }

#schichtplanung .dp-kopf-tag { text-align: left; padding-left: 9px !important; border-left: 1px solid var(--dp-linie); }
#schichtplanung .dp-kopf-tag .dp-wt { font-size: 12px; font-weight: 500; color: var(--dp-leise); text-transform: none; letter-spacing: 0; }
#schichtplanung .dp-kopf-tag .dp-tagnr {
    margin-left: 4px; font-family: var(--font-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 0; background: none; box-shadow: none; border-radius: 0;
}
#schichtplanung .dp-kopf-tag .dp-tagnr small { font-size: inherit; font-weight: inherit; color: inherit; }
#schichtplanung .dp-kopf-tag .dp-feiertag {
    display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--dp-leise);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#schichtplanung .dp-besetzung {
    display: block; margin-top: 2px; padding: 0; background: none; border-radius: 0;
    font-size: 11px; font-weight: 400; color: var(--dp-leise); font-variant-numeric: tabular-nums;
}
#schichtplanung .dp-besetzung.is-unter { color: var(--dp-warn); font-weight: 600; }
#schichtplanung .dp-kopf-tag.is-heute .dp-wt,
#schichtplanung .dp-kopf-tag.is-heute .dp-tagnr { color: var(--dp-akzent); font-weight: 700; }
#schichtplanung .dp-kopf-tag.is-heute { box-shadow: inset 0 -2px 0 var(--dp-akzent); }
#schichtplanung .dp-zelle.is-heute { background-color: var(--dp-heute); }
#schichtplanung .dp-zelle.is-wochenende,
#schichtplanung .dp-zelle.is-feiertag { background-color: var(--dp-wochenende); }

/* Personenspalte */
#schichtplanung .dp-person {
    position: sticky; left: 0; z-index: 2; text-align: left; font-weight: 400; background: var(--dp-karte);
    padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--dp-linie); border-right: 1px solid var(--dp-linie-2);
}
#schichtplanung .dp-person-innen { display: flex; align-items: center; gap: 9px; min-width: 0; }
#schichtplanung .dp-avatar {
    flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 600; color: var(--dp-leise); background: var(--dp-wochenende);
    box-shadow: inset 0 0 0 1px var(--dp-linie);
}
#schichtplanung .dp-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
#schichtplanung .dp-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dp-text); }
#schichtplanung .dp-rolle { font-size: 11.5px; color: var(--dp-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#schichtplanung .dp-du { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--dp-leise); }
#schichtplanung .dp-du::before { content: '('; } #schichtplanung .dp-du::after { content: ')'; }
#schichtplanung .dp-versteckt { font-style: italic; }
#schichtplanung .dp-reihe.is-versteckt .dp-person { opacity: .6; }
#schichtplanung .dp-reihe.is-ich .dp-person { box-shadow: inset 2px 0 0 var(--dp-akzent); }
#schichtplanung .dp-reihe.is-ich .dp-name { font-weight: 600; }

/* Zellen */
#schichtplanung .dp-zelle {
    position: relative; vertical-align: top; padding: 4px; height: 46px;
    border-bottom: 1px solid var(--dp-linie); border-left: 1px solid var(--dp-linie);
}
#schichtplanung .dp-monat .dp-zelle { height: 40px; padding: 3px 2px; }
#schichtplanung .dp-reihe:hover .dp-person,
#schichtplanung .dp-reihe:hover .dp-zelle { background-image: linear-gradient(var(--dp-wochenende), var(--dp-wochenende)); }
#schichtplanung .dp-zelle[data-act="neu"] { cursor: cell; }
#schichtplanung .dp-plus {
    position: absolute; inset: 4px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--dp-leise); font-size: 16px; opacity: 0; pointer-events: none;
}
#schichtplanung .dp-zelle[data-act="neu"]:hover .dp-plus { opacity: 1; background: var(--dp-wochenende); }
#schichtplanung .dp-zelle.is-ziel { box-shadow: inset 0 0 0 2px var(--dp-akzent); }

/* Dienst: Zeit zuerst. Farbe nur als Streifen. */
#schichtplanung .dp-block {
    --b-bar: var(--dp-tag);
    position: relative; display: block; margin: 0 0 3px; padding: 4px 6px 4px 9px; border-radius: 5px;
    background: var(--dp-dienst); color: var(--dp-text); border: 0; cursor: pointer; overflow: hidden;
}
#schichtplanung .dp-block:last-child { margin-bottom: 0; }
#schichtplanung .dp-block::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--b-bar); }
#schichtplanung .dp-block.typ-frueh { --b-bar: var(--dp-frueh); }
#schichtplanung .dp-block.typ-spaet { --b-bar: var(--dp-spaet); }
#schichtplanung .dp-block.typ-nacht { --b-bar: var(--dp-nacht); }
#schichtplanung .dp-block:hover { background: var(--dp-dienst-hov); }
#schichtplanung .dp-block:focus-visible { outline: 2px solid var(--dp-akzent); outline-offset: 1px; }
#schichtplanung .dp-block.is-virtuell { background: transparent; box-shadow: inset 0 0 0 1px var(--dp-linie-2); }
#schichtplanung .dp-block.is-virtuell:hover { background: var(--dp-dienst); }
#schichtplanung .dp-block.is-gezogen { opacity: .4; }
#schichtplanung .dp-block[draggable="true"] { cursor: grab; }
#schichtplanung .dp-block-zeile { display: flex; align-items: center; gap: 4px; min-width: 0; }
#schichtplanung .dp-zeit { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
#schichtplanung .dp-zeit .dp-bis { color: var(--dp-leise); margin: 0 1px; }
#schichtplanung .dp-zeit sup { font-size: 9px; color: var(--dp-leise); margin-left: 1px; }
#schichtplanung .dp-notiz { font-size: 11px; line-height: 1.3; color: var(--dp-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#schichtplanung .dp-marken { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
#schichtplanung .dp-marke { font-size: 11px; line-height: 1; color: var(--dp-leise); background: none; width: auto; height: auto; }
#schichtplanung .dp-punkt { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dp-warn); flex: none; }

/* Löschen/Verschieben erst beim Darüberfahren */
#schichtplanung .dp-block-aktionen { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; opacity: 0; }
#schichtplanung .dp-block:hover .dp-block-aktionen,
#schichtplanung .dp-block:focus-within .dp-block-aktionen { opacity: 1; }
#schichtplanung .dp-block:hover .dp-marken { visibility: hidden; }
#schichtplanung .dp-mini {
    width: 20px; height: 20px; border-radius: 4px; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
    background: var(--dp-karte); color: var(--dp-leise); box-shadow: 0 0 0 1px var(--dp-linie-2);
}
#schichtplanung .dp-mini:hover { color: var(--dp-text); }
#schichtplanung .dp-mini-weg:hover { color: #9B3B3B; }
@media (hover: none) {
    #schichtplanung .dp-block-aktionen { opacity: 1; }
    #schichtplanung .dp-marken { display: none; }
}

/* Monat: nur Uhrzeiten */
#schichtplanung .dp-monat .dp-block { margin: 0 0 2px; padding: 2px 1px 2px 3px; border-radius: 4px; text-align: center; line-height: 1.12; }
#schichtplanung .dp-monat .dp-block::before { width: 2px; }
#schichtplanung .dp-monat .dp-zeit-a,
#schichtplanung .dp-monat .dp-zeit-b { display: block; font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
#schichtplanung .dp-monat .dp-zeit-b { color: var(--dp-leise); }
#schichtplanung .dp-monat .dp-zeit-a sup,
#schichtplanung .dp-monat .dp-zeit-b sup { font-size: 7px; vertical-align: 3px; }
#schichtplanung .dp-monat .dp-block .dp-punkt { position: absolute; top: 1px; right: 1px; width: 5px; height: 5px; }
#schichtplanung .dp-monat .dp-kopf-tag { text-align: center; padding: 8px 0 7px !important; }
#schichtplanung .dp-monat .dp-kopf-tag .dp-wt { display: block; font-size: 10px; }
#schichtplanung .dp-monat .dp-kopf-tag .dp-tagnr { margin: 0; font-size: 13px; }
#schichtplanung .dp-unter-punkt { display: block; width: 5px; height: 5px; margin: 2px auto 0; border-radius: 50%; background: var(--dp-warn); }
#schichtplanung .dp-abw-kurz,
#schichtplanung .dp-zu-kurz,
#schichtplanung .dp-eigen-kurz {
    display: flex; align-items: center; justify-content: center; min-height: 32px; font-size: 10.5px; font-weight: 600; color: var(--dp-leise);
}
#schichtplanung .dp-eigen-kurz svg,
#schichtplanung .dp-zu-kurz svg { width: 12px; height: 12px; }

/* Abwesenheit, geschlossen, frei, eigener Eintrag — Text, keine Flächen */
#schichtplanung .dp-abw { display: block; padding: 4px 6px; font-size: 12px; font-weight: 500; color: var(--dp-ho); }
#schichtplanung .abw-urlaub { color: var(--dp-urlaub); }
#schichtplanung .abw-krank  { color: var(--dp-krank); }
#schichtplanung .abw-ho     { color: var(--dp-ho); }
#schichtplanung .abw-ez     { color: var(--dp-leise); }
#schichtplanung .dp-zu,
#schichtplanung .dp-eigen {
    display: flex; align-items: center; gap: 5px; padding: 4px 6px; max-width: 100%;
    font-size: 12px; font-weight: 500; color: var(--dp-leise); background: none; box-shadow: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#schichtplanung .dp-zu svg,
#schichtplanung .dp-eigen svg { width: 12px; height: 12px; flex: none; }
#schichtplanung .dp-eigen { color: var(--dp-text); }
#schichtplanung .dp-eigen span { overflow: hidden; text-overflow: ellipsis; }
#schichtplanung .dp-frei { display: inline-block; padding: 4px 6px; font-size: 11.5px; color: var(--dp-leise); opacity: .7; }
#schichtplanung .dp-frei.is-eingetragen { opacity: 1; }

/* Offene Arbeitszeit-Anpassung unter dem Dienst */
#schichtplanung .dp-anp-offen {
    margin-top: 2px; padding: 0 2px; font-size: 10.5px; color: var(--dp-leise); background: none; border: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
#schichtplanung .dp-anp-offen span { font-size: inherit; text-transform: none; letter-spacing: 0; }

/* Hinweise hervorheben (Klick in der Zahlenzeile) */
#schichtplanung .dp-hinweise-an .dp-zelle:not(.has-hinweis) .dp-block { opacity: .35; }
#schichtplanung .dp-hinweise-an .dp-zelle.has-hinweis { box-shadow: inset 0 0 0 2px var(--dp-warn); }

/* Stunden */
#schichtplanung .dp-std {
    text-align: right; vertical-align: middle; padding: 4px 14px 4px 6px; white-space: nowrap;
    border-bottom: 1px solid var(--dp-linie); border-left: 1px solid var(--dp-linie-2); font-variant-numeric: tabular-nums;
}
#schichtplanung .dp-std-wert { font-size: 13px; font-weight: 600; }
#schichtplanung .dp-std-soll { margin-left: 2px; font-size: 12px; color: var(--dp-leise); }
#schichtplanung .dp-std-balken { display: none; }
#schichtplanung .dp-std.is-ueber .dp-std-wert,
#schichtplanung .dp-std.is-warn .dp-std-wert { color: var(--dp-warn); }

/* ── Legende: zugeklappt ────────────────────────────────────────────── */
#schichtplanung .dp-legende { margin: 10px 2px 0; font-size: 12px; color: var(--dp-leise); }
#schichtplanung .dp-legende summary { display: inline-block; cursor: pointer; list-style: none; user-select: none; }
#schichtplanung .dp-legende summary::-webkit-details-marker { display: none; }
#schichtplanung .dp-legende summary::after { content: ' ▾'; font-size: 10px; }
#schichtplanung .dp-legende[open] summary::after { content: ' ▴'; }
#schichtplanung .dp-legende-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
#schichtplanung .dp-leg { display: inline-flex; align-items: center; gap: 6px; }
#schichtplanung .dp-leg-farbe { width: 14px; height: 10px; border-radius: 2px; background: var(--dp-dienst); box-shadow: inset 3px 0 0 var(--dp-tag); }
#schichtplanung .dp-leg-farbe.typ-frueh { box-shadow: inset 3px 0 0 var(--dp-frueh); }
#schichtplanung .dp-leg-farbe.typ-spaet { box-shadow: inset 3px 0 0 var(--dp-spaet); }
#schichtplanung .dp-leg-farbe.typ-nacht { box-shadow: inset 3px 0 0 var(--dp-nacht); }
#schichtplanung .dp-leg-farbe.is-virtuell { background: none; box-shadow: inset 0 0 0 1px var(--dp-linie-2); }
#schichtplanung .dp-leg-chip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dp-ho); }
#schichtplanung .dp-leg-chip.abw-urlaub { background: var(--dp-urlaub); }
#schichtplanung .dp-leg-chip.abw-krank  { background: var(--dp-krank); }
#schichtplanung .dp-leg-chip.abw-ez,
#schichtplanung .dp-leg-chip.is-zu      { background: var(--dp-leise); }
#schichtplanung .dp-leg-tasten { flex-basis: 100%; }

/* ── Handy ──────────────────────────────────────────────────────────── */
#schichtplanung .dp-mobil { display: none; }
#schichtplanung .dp-mobil-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; }
#schichtplanung .dp-mobil-tag {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0;
    padding: 6px 0; border-radius: 8px; cursor: pointer; background: none; border: 1px solid transparent; color: var(--dp-text);
    justify-content: flex-start; box-shadow: none; transform: none;
}
#schichtplanung .dp-mobil-wt { font-size: 11px; color: var(--dp-leise); }
#schichtplanung .dp-mobil-nr { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#schichtplanung .dp-mobil-anz { font-size: 10px; color: var(--dp-leise); }
#schichtplanung .dp-mobil-anz.is-unter { color: var(--dp-warn); font-weight: 600; }
#schichtplanung .dp-mobil-tag.is-heute .dp-mobil-nr,
#schichtplanung .dp-mobil-tag.is-heute .dp-mobil-wt { color: var(--dp-akzent); }
#schichtplanung .dp-mobil-tag.active { background: var(--dp-karte); border-color: var(--dp-linie-2); box-shadow: none; transform: none; }
#schichtplanung .dp-mobil-datum { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin: 2px 2px 8px; font-size: 15px; font-weight: 600; }
#schichtplanung .dp-mobil-datum .dp-feiertag,
#schichtplanung .dp-mobil-unter { font-size: 12px; font-weight: 400; color: var(--dp-leise); }
#schichtplanung .dp-mobil-unter { color: var(--dp-warn); }
#schichtplanung .dp-mobil-karten { display: flex; flex-direction: column; border-radius: 10px; background: var(--dp-karte); border: 1px solid var(--dp-linie-2); overflow: hidden; }
#schichtplanung .dp-karte {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
    padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--dp-linie); border-radius: 0;
}
#schichtplanung .dp-karte:last-child { border-bottom: 0; }
#schichtplanung .dp-karte.is-ich { box-shadow: inset 2px 0 0 var(--dp-akzent); }
#schichtplanung .dp-karte-kopf { display: flex; align-items: center; gap: 9px; min-width: 0; }
#schichtplanung .dp-karte > :not(.dp-karte-kopf) { justify-self: end; }
#schichtplanung .dp-karte .dp-block { grid-column: 1 / -1; justify-self: stretch; margin: 0; padding: 7px 8px 7px 11px; }
#schichtplanung .dp-karte .dp-block .dp-zeit { font-size: 14.5px; }
#schichtplanung .dp-karte .dp-block-aktionen { top: 5px; right: 5px; }
#schichtplanung .dp-karte .dp-mini { width: 28px; height: 28px; font-size: 13px; }
#schichtplanung .dp-karte-dauer { display: none; }
#schichtplanung .dp-karte .dp-abw,
#schichtplanung .dp-karte .dp-eigen,
#schichtplanung .dp-karte .dp-zu,
#schichtplanung .dp-karte .dp-frei { padding: 0; }
#schichtplanung .dp-karte-neu { height: 28px; font-size: 12px; padding: 0 10px; }

/* ── Mitarbeiter-Ansicht: Heute-Karte, Kalender-Abo ─────────────────── */
#schichtplanung .shift-today-card {
    gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 8px; animation: none;
    background: var(--dp-karte); border: 1px solid var(--dp-linie-2); box-shadow: none;
}
#schichtplanung .shift-today-card svg { color: var(--dp-leise); }
#schichtplanung .shift-tc-time { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--dp-text); }
#schichtplanung .shift-cal-sync { margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: var(--dp-karte); border: 1px solid var(--dp-linie-2); box-shadow: none; animation: none; }
#schichtplanung .shift-cal-sync-header { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
#schichtplanung .shift-cal-sync-header svg { color: var(--dp-leise); }
#schichtplanung .shift-cal-btn { border-radius: 8px; border: 1px solid var(--dp-linie-2); background: var(--dp-karte); font-size: 13px; }
#schichtplanung .shift-cal-btn:hover { transform: none; box-shadow: none; }

/* Keine Bewegung beim Blättern */
#schichtplanung #shiftGridContainer.shift-slide-left,
#schichtplanung #shiftGridContainer.shift-slide-right { animation: none; }

/* ── Schmal ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    #schichtplanung .dp-kopf-person { width: 180px; }
}
@media (max-width: 760px) {
    #schichtplanung .dp-kopf { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
    #schichtplanung .dp-kw-gross { font-size: 21px; }
    #schichtplanung .dp-kw-klein { font-size: 13px; }
    #schichtplanung .dp-kopf-steuer { justify-content: space-between; }
    #schichtplanung .shift-nav-btns { flex: 1; }
    #schichtplanung .shift-nav-btn { height: 36px; min-width: 40px; }
    #schichtplanung .shift-nav-btn.shift-nav-today { flex: 1; }
    #schichtplanung .dp-ansicht-knopf { height: 36px; }
    #schichtplanung .dp-kopf-werkzeuge {
        flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #schichtplanung .dp-kopf-werkzeuge::-webkit-scrollbar { display: none; }
    #schichtplanung .shift-search-wrap { flex: 0 0 160px; }
    #schichtplanung #shiftDeptDropdown { margin-right: 0; }
    #schichtplanung .shift-dropdown-toggle,
    #schichtplanung .shift-copy-btn { height: 36px; min-height: 36px; flex: none; }
    #schichtplanung .shift-dropdown.open .shift-dropdown-menu { position: fixed; top: auto; left: 16px; right: 16px; margin-top: 42px; }

    #schichtplanung .dp-summe { font-size: 12.5px; gap: 2px 12px; }
    #schichtplanung .dp-summe > * + *::before { content: none; }
    #schichtplanung .dp-ansicht-woche .dp-raster-wrap { display: none; }
    #schichtplanung .dp-ansicht-woche .dp-mobil { display: block; }
    #schichtplanung .dp-monat .dp-kopf-person { width: 108px; padding-left: 10px !important; }
    #schichtplanung .dp-monat .dp-person { padding: 5px 6px 5px 10px; }
    #schichtplanung .dp-monat .dp-avatar { display: none; }
    #schichtplanung .dp-raster.dp-monat { min-width: calc(108px + var(--dp-tage) * 30px + 54px); }
    #schichtplanung .dp-monat .dp-kopf-std { width: 54px; }
    #schichtplanung .dp-leg-tasten { display: none; }
    #schichtplanung .dp-tausch-text { flex-basis: 100%; }
    #schichtplanung .dp-tausch .dp-knopf { flex: 1 1 0; }
    #schichtplanung .shift-cal-sync-buttons { flex-direction: column; }
}

/* ── Ein Scrollen ───────────────────────────────────────────────────────
   .main-content hat overflow-y:auto, scrollt aber nie (es wächst mit, die
   SEITE scrollt). Als Scroll-Container hielte es jedes sticky im Plan fest
   — die Tageszeile klebte dann an nichts. Nur auf der Plan-Seite aus. */
.main-content:has(#schichtplanung.active) { overflow: visible; }
/* Die Kopfleiste (.header, sticky) klebte vorher nie — ihr Scroll-Container
   war eben dieses .main-content, das nicht scrollt. Ohne overflow klebte sie
   plötzlich und verdeckte die Tageszeile. Sie scrollt deshalb wie bisher
   mit weg; oben klebt nur die Tageszeile des Plans (top: 0). */
.main-content:has(#schichtplanung.active) > .header { position: relative; }
#schichtplanung #shiftGridContainer { overflow: visible; }
#schichtplanung .shift-grid-wrap { container-type: inline-size; container-name: dp-plan; }

/* Passt das Raster in die Breite, gibt es keinen eigenen Scroll-Kasten:
   die Tageszeile klebt oben am Fenster. Woche ab 762 px, Monat ab 952 px
   (31 Tage × 24 px + Namen + Stunden). */
@container dp-plan (min-width: 762px) {
    #schichtplanung .dp-raster-wrap:has(> .dp-woche) { overflow: visible; }
}
@container dp-plan (min-width: 952px) {
    #schichtplanung .dp-raster-wrap:has(> .dp-monat) { overflow: visible; }
}
#schichtplanung .dp-raster thead th { top: 0; }
/* Ecken: ohne overflow:hidden schneidet der Kasten nichts mehr ab */
#schichtplanung .dp-raster thead th:first-child { border-top-left-radius: 9px; }
#schichtplanung .dp-raster thead th:last-child  { border-top-right-radius: 9px; }
#schichtplanung .dp-raster tbody tr:last-child > :first-child { border-bottom-left-radius: 9px; }
#schichtplanung .dp-raster tbody tr:last-child > :last-child  { border-bottom-right-radius: 9px; }
#schichtplanung .dp-raster tbody tr:last-child > * { border-bottom: 0; }

/* Handy, Woche: die Tagesreiter kleben oben, die Karten scrollen darunter */
@media (max-width: 760px) {
    #schichtplanung .dp-mobil-tage {
        position: sticky; top: 0; z-index: 5; margin: 0 -16px 8px; padding: 6px 16px;
        background: var(--dp-grund); border-bottom: 1px solid var(--dp-linie);
    }
}

/* ── Drucken: nur der Plan, Querformat ──────────────────────────────── */
@page dienstplan { size: A4 landscape; margin: 9mm; }
@media print {
    body.dp-druck * { visibility: hidden !important; }
    body.dp-druck #schichtplanung,
    body.dp-druck #schichtplanung * { visibility: visible !important; }
    body.dp-druck #schichtplanung {
        page: dienstplan; position: absolute !important; inset: 0 auto auto 0 !important;
        width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; display: block !important;
    }
    body.dp-druck #schichtplanung * { print-color-adjust: exact; -webkit-print-color-adjust: exact; box-shadow: none !important; }
    body.dp-druck #schichtplanung .dp-kopf-steuer,
    body.dp-druck #schichtplanung .dp-kopf-werkzeuge,
    body.dp-druck #schichtplanung .dp-summe,
    body.dp-druck #schichtplanung .dp-hinweisband,
    body.dp-druck #schichtplanung .dp-tausch-liste,
    body.dp-druck #schichtplanung .dp-mobil,
    body.dp-druck #schichtplanung .dp-block-aktionen,
    body.dp-druck #schichtplanung .dp-plus,
    body.dp-druck #schichtplanung .dp-legende summary,
    body.dp-druck #schichtplanung .dp-leg-tasten,
    body.dp-druck #schichtplanung .shift-today-card,
    body.dp-druck #schichtplanung .shift-cal-sync { display: none !important; }
    body.dp-druck #schichtplanung .dp-legende .dp-legende-inhalt { display: flex !important; }
    body.dp-druck #schichtplanung .dp-kopf { display: block; margin: 0 0 6px; }
    body.dp-druck #schichtplanung .dp-kw-gross { font-size: 18px; }
    body.dp-druck #schichtplanung .dp-raster-wrap {
        display: block !important; max-height: none !important; overflow: visible !important; border-radius: 0; border: 1px solid #ccc;
    }
    body.dp-druck #schichtplanung .dp-raster { min-width: 0 !important; font-size: 9.5px; }
    body.dp-druck #schichtplanung .dp-raster thead th { position: static; }
    body.dp-druck #schichtplanung .dp-person { position: static; }
    body.dp-druck #schichtplanung .dp-zelle { height: auto; padding: 2px; }
    body.dp-druck #schichtplanung .dp-raster tr { break-inside: avoid; }
    body.dp-druck #schichtplanung .dp-block { padding: 1px 3px 1px 6px; }
    body.dp-druck #schichtplanung .dp-zeit { font-size: 9.5px; }
    body.dp-druck #schichtplanung .dp-notiz { font-size: 8px; }
    body.dp-druck #schichtplanung .dp-avatar { display: none; }
    body.dp-druck #schichtplanung .dp-legende { font-size: 8.5px; margin-top: 6px; }
}
@media print {
    /* Auch ohne Druckknopf (Strg/⌘+P): zugeklappte Legende nicht drucken */
    #schichtplanung details.dp-legende:not([open]) { display: none; }
}

/* =====================================================================
   Außerhalb des Plans: Schicht-Dialog, Auswahl „nur diese / alle",
   Detail für wiederkehrende Dienste, Knopf in der Meldung.
   ===================================================================== */
.dp-dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
.dp-dialog .dp-vorlage-ueblich:empty { display: none; }
.dp-dialog .dp-tpl-ueblich { font-weight: 700 !important; border-color: var(--accent) !important; }
.dp-dauer { margin: -4px 0 14px; font-size: 12.5px; color: var(--text-muted); }
.dp-dauer:empty { display: none; }
.dp-dauer-zeile strong { color: var(--text-primary); font-weight: 600; }
.dp-dauer-warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #A1561A; }
.dp-dauer-warn svg { flex: none; margin-top: 2px; }
body.theme-dark .dp-dauer-warn { color: #F0A65A; }
.dp-tage-feld { margin: 0 0 14px; }
.dp-tage-feld > label {
    display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .3px;
}
.dp-tage-wahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dp-tagwahl {
    display: flex; flex-direction: column; align-items: center; padding: 5px 0; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--border-strong, rgba(15, 27, 45, .12)); background: var(--bg-elevated); color: var(--text-primary);
    font: inherit; font-size: 12px; font-weight: 500;
}
.dp-tagwahl small { font-size: 10px; color: var(--text-muted); }
.dp-tagwahl:hover:not(:disabled) { border-color: var(--text-muted); }
.dp-tagwahl.is-an { background: var(--text-primary); color: var(--bg-elevated); border-color: transparent; }
.dp-tagwahl.is-an small { color: inherit; opacity: .75; }
.dp-tagwahl.is-fest { cursor: default; }

.dp-wahl {
    position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 27, 45, .45);
}
.dp-wahl-box {
    width: 100%; max-width: 420px; padding: 22px; border-radius: 12px;
    background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
}
.dp-wahl-box h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 600; }
.dp-wahl-box p { margin: 0 0 16px; font-size: .9rem; color: var(--text-muted); line-height: 1.5; }
.dp-wahl-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.dp-wahl-knoepfe button { font: inherit; cursor: pointer; text-align: left; border-radius: 8px; padding: 10px 14px; font-size: .9rem; }
.dp-wahl-eins { border: 1px solid var(--border-strong, var(--border)); background: var(--bg-elevated); color: var(--text-primary); font-weight: 500; }
.dp-wahl-eins:hover { border-color: var(--text-muted); }
.dp-wahl-alle { border: 0; color: var(--bg-elevated); font-weight: 600; background: var(--text-primary); }
.dp-wahl.is-gefahr .dp-wahl-alle { background: #9B3B3B; color: #fff; }
.dp-wahl-ab { border: 0; background: none; color: var(--text-muted); text-align: center !important; padding: 6px !important; font-size: .85rem !important; }
.dp-wahl-knoepfe button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dp-detail { color: var(--text-primary); }
.dp-detail-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dp-detail-kopf h3 { margin: 0; font-size: 16px; font-weight: 600; }
.dp-detail-zu { border: 0; background: none; font-size: 18px; color: var(--text-muted); cursor: pointer; }
.dp-detail-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.dp-detail-zeile span { color: var(--text-muted); }
.dp-detail-zeile strong { text-align: right; font-weight: 500; }
.dp-detail-hinweis { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.toast .toast-aktion {
    margin-left: 10px; padding: 4px 10px; border-radius: 6px; cursor: pointer; flex: none;
    border: 1px solid currentColor; background: none; color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 600;
}
.toast .toast-aktion:hover { background: var(--bg-hover); }

/* =====================================================================
   Farbe für eigene Einträge (01.10.2026). Weiß ist der Normalfall (keine
   Klasse). Die Palette hat für hell und dunkel je einen Pastellton mit
   lesbarer Schrift; eine eigene Farbe kommt als --dp-f-bg/--dp-f-text
   (Schrift schwarz oder weiß nach Kontrast, siehe _planFarbeSchrift).
   Die Klassen gelten im Plan UND an den Farbknöpfen im Dialog.
   ===================================================================== */
.dp-farbe-sand    { --dp-f-bg: #F1E8D8; --dp-f-text: #574528; }
.dp-farbe-gelb    { --dp-f-bg: #FAEDB8; --dp-f-text: #5A4700; }
.dp-farbe-orange  { --dp-f-bg: #FBDDC2; --dp-f-text: #763A08; }
.dp-farbe-rosa    { --dp-f-bg: #F8DAE4; --dp-f-text: #772645; }
.dp-farbe-rot     { --dp-f-bg: #F6D2CE; --dp-f-text: #7B271F; }
.dp-farbe-lila    { --dp-f-bg: #E5DAF4; --dp-f-text: #493174; }
.dp-farbe-blau    { --dp-f-bg: #D6E4F6; --dp-f-text: #1D3C68; }
.dp-farbe-tuerkis { --dp-f-bg: #D0ECE9; --dp-f-text: #114F4A; }
.dp-farbe-gruen   { --dp-f-bg: #D9EDD6; --dp-f-text: #235927; }
.dp-farbe-grau    { --dp-f-bg: #E4E4E8; --dp-f-text: #383842; }
body.theme-dark .dp-farbe-sand    { --dp-f-bg: #4A4233; --dp-f-text: #F0E2C6; }
body.theme-dark .dp-farbe-gelb    { --dp-f-bg: #4D4520; --dp-f-text: #F6E7A6; }
body.theme-dark .dp-farbe-orange  { --dp-f-bg: #55392A; --dp-f-text: #F9CFAC; }
body.theme-dark .dp-farbe-rosa    { --dp-f-bg: #50313D; --dp-f-text: #F5C3D5; }
body.theme-dark .dp-farbe-rot     { --dp-f-bg: #552F2C; --dp-f-text: #F4BBB4; }
body.theme-dark .dp-farbe-lila    { --dp-f-bg: #3E3554; --dp-f-text: #D9CBF6; }
body.theme-dark .dp-farbe-blau    { --dp-f-bg: #2C3B55; --dp-f-text: #C4D8F5; }
body.theme-dark .dp-farbe-tuerkis { --dp-f-bg: #24443F; --dp-f-text: #B2E4DE; }
body.theme-dark .dp-farbe-gruen   { --dp-f-bg: #2C4329; --dp-f-text: #BFE5BB; }
body.theme-dark .dp-farbe-grau    { --dp-f-bg: #3A3A42; --dp-f-text: #DCDCE2; }

#schichtplanung .dp-eigen.has-farbe,
#schichtplanung .dp-zu.has-farbe {
    background: var(--dp-f-bg); color: var(--dp-f-text); border-radius: 5px; padding: 4px 7px;
}
#schichtplanung .dp-eigen.has-farbe svg,
#schichtplanung .dp-zu.has-farbe svg { color: inherit; }
#schichtplanung .dp-eigen-kurz.has-farbe,
#schichtplanung .dp-zu-kurz.has-farbe { background: var(--dp-f-bg); color: var(--dp-f-text); border-radius: 4px; }
#schichtplanung .dp-karte .dp-eigen.has-farbe,
#schichtplanung .dp-karte .dp-zu.has-farbe { padding: 4px 8px; }

/* Farbwahl im Dialog */
.se-farben { display: flex; flex-wrap: wrap; gap: 6px; }
.se-farbe-btn {
    position: relative; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; padding: 0;
    background: var(--dp-f-bg, #fff); border: 1px solid rgba(15, 27, 45, .18);
    display: inline-flex; align-items: center; justify-content: center;
}
body.theme-dark .se-farbe-btn { border-color: rgba(255, 255, 255, .22); }
.se-farbe-weiss { background: #fff; }
.se-farbe-btn.is-an { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--text-primary); }
.se-farbe-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.se-farbe-eigen { background: conic-gradient(#f3c4c4, #f6e7a6, #c9ecc6, #c4d8f5, #dccbf6, #f3c4c4); overflow: hidden; }
.se-farbe-eigen span { font-size: 15px; font-weight: 600; color: #1A1A1A; pointer-events: none; }
.se-farbe-eigen.is-an span { display: none; }
.se-farbe-eigen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }