/* ===================== Disposition: Planungs-Board (dp-) =====================
   Stile des Boards, der Zeitleiste, der Karte, der Vorschläge und des Zuordnungsdialogs (Übernahme aus der VOS-Disposition: app.css, tokens.css und die
   Komponenten-Stile von Board, BoardTimeline, PlanningMap, SuggestionPanel, VosList, VosCard und AssignDialog).
   Raster wie in VOS: 330 px · flexibel · 348 px. Farben über die Cockpit-Variablen (--km-*); die VOS-Töne für Status und Konflikte sinngemäß übernommen.
   Alles unter dp-: nichts hier wirkt auf Elemente anderer Bereiche. */

/* Die Zähler-Chips stehen in der Kopfzeile der Seite, außerhalb der Hülle – sie brauchen die Variablen selbst. */
.dp-board-huelle,
.dp-maske,
.dp-toast,
.dp-chip-krank,
.dp-chip-frist {
    --dp-ink: #2c3332;
    --dp-ink2: #585a5f;
    --dp-ink3: #6b7178;
    --dp-line: var(--km-rand, #e0e0e0);
    --dp-line2: #eceeef;
    --dp-stripe: #f8f9fa;
    --dp-panel: #fff;
    --dp-paper2: #f2f2f2;
    --dp-tint: #e1e8eb;
    --dp-brand: var(--km-gruen, #acde79);
    --dp-brand-soft: var(--km-gruen-hell, #d6f2a4);
    --dp-hover: var(--km-blau, #46a9ff);
    --dp-focus: var(--km-fokus, #1f7fcf);
    --dp-ok: #198754;
    --dp-amber: #b27806;
    --dp-rot: #d94b1e;
    --dp-slate: #2f4858;
    --dp-blau: #235b7e;
    --dp-krank-flaeche: rgba(217, 75, 30, .16);
    --dp-krank-linie: rgba(217, 75, 30, .42);
    --dp-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-family: var(--dp-font);
    color: var(--dp-ink);
}

.dp-mono { font-family: var(--dp-font); }

/* ---- Hülle und Raster ----------------------------------------------------- */

/* Das Board ist ganz Arbeitsfläche: es füllt die Höhe des Fensters unter dem Seitenkopf, die Seite selbst scrollt nicht. Oben Liste, Karte und
   Vorschläge (jede Spalte scrollt in sich), dann der Splitter, ganz unten die angedockte Zeitleiste. Die Höhe gibt der Block „Vollbild“ weiter unten
   vor; hier nur der Rückfall für Browser ohne :has() (feste Höhe unter dem Seitenkopf). */
.dp-board-huelle {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
    min-height: 520px;
    background: var(--dp-panel);
    border: 1px solid var(--dp-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--km-kachel-schatten, 0 2px 8px rgba(0, 0, 0, .1));
}

/* Vollbild: der Rahmen der Seite (km-app → km-main) wird auf die Fensterhöhe festgelegt, die Hülle füllt den Rest. Nur mit dem Board darin
   (:has) und nur, solange das Fenster breit genug für drei Spalten ist. Sauberer wäre eine Seiteneigenschaft im Layout („Vollbild“), die den Rahmen
   ohne :has umstellt – das Layout gehört aber nicht zu diesem Paket. */
@media (min-width: 901px) {
    .km-app:has(.dp-board-huelle) { height: 100vh; overflow: hidden; }
    .km-app:has(.dp-board-huelle) .km-body { min-height: 0; }

    /* Das Menü (mit Datenquellen) darf höher sein als das Fenster: es scrollt für sich. */
    .km-app:has(.dp-board-huelle) .pf-nav { overflow-y: auto; }

    .km-main:has(.dp-board-huelle) { gap: 8px; padding: 8px 14px 14px; min-height: 0; overflow: hidden; }
    .km-main:has(.dp-board-huelle) > .dp-board-huelle { flex: 1 1 0; height: auto; min-height: 0; }

    /* Seitenkopf: eine schmale Zeile mit Titel, Zähler-Chips und Zugriffs-Badge; die Brotkrumen entfallen (das Menü zeigt, wo man ist). */
    .km-main:has(.dp-board-huelle) > .pf-seitenkopf { flex: none; flex-wrap: nowrap; align-items: center; gap: 10px; }
    .km-main:has(.dp-board-huelle) > .pf-seitenkopf .km-label { display: none; }
    .km-main:has(.dp-board-huelle) > .pf-seitenkopf h1 { margin: 0; font-size: 18px; line-height: 1.2; }
    .km-main:has(.dp-board-huelle) > .pf-seitenkopf .pf-seiten-icon { width: 28px; height: 28px; padding: 5px; }
    .km-main:has(.dp-board-huelle) > .pf-seitenkopf .pf-seitenkopf-links { gap: 10px; }
}

.dp-board {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr) 348px;
    grid-template-rows: minmax(0, 1fr);
}

.dp-spalte {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--dp-panel);
    border-right: 1px solid var(--dp-line);
}

.dp-board > .dp-spalte:last-child { border-right: 0; border-left: 1px solid var(--dp-line); }

.dp-spaltenkopf {
    flex: none;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--dp-line);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dp-spaltenkopf h2 { margin: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--dp-ink2); }
.dp-n { font-size: 10.5px; color: var(--dp-ink3); }

.dp-scroll { overflow: auto; flex: 1; min-height: 0; position: relative; }
.dp-scroll::-webkit-scrollbar { width: 9px; }
.dp-scroll::-webkit-scrollbar-thumb { background: rgba(44, 51, 50, .22); border-radius: 9px; border: 3px solid var(--dp-panel); }

.dp-leer { padding: 26px 16px; text-align: center; color: var(--dp-ink3); font-size: 12px; line-height: 1.5; }
.dp-pad .dp-leer, .dp-sec .dp-leer { padding: 4px 0; text-align: left; }

@media (max-width: 1180px) {
    .dp-board { grid-template-columns: 270px minmax(0, 1fr) 300px; }
}

/* Schmale Fenster: die Spalten stehen untereinander (das Board bleibt benutzbar, ist aber ein Arbeitsplatz für den großen Bildschirm). */
@media (max-width: 900px) {
    .dp-board-huelle { height: auto; min-height: 0; overflow: visible; }
    .dp-board { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .dp-board > .dp-spalte { height: 460px; border-right: 0; border-left: 0 !important; border-bottom: 1px solid var(--dp-line); }
    .dp-zl.dp-offen { height: auto; min-height: 0; max-height: 420px; }
    .dp-splitter { display: none; }
}

/* ---- Knöpfe, Chips, Felder ------------------------------------------------ */

.dp-knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--dp-brand);
    border-radius: 4px;
    background: var(--dp-brand);
    color: #000;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.dp-knopf:hover { background: var(--dp-hover); border-color: var(--dp-hover); color: #000; }
.dp-knopf:focus-visible, .dp-chip:focus-visible, .dp-seg button:focus-visible, .dp-lrow button:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--dp-focus), 0 0 0 .25rem rgba(31, 127, 207, .25); }
.dp-knopf.dp-klein { padding: 5px 10px; font-size: 11.5px; }
.dp-knopf.dp-leise { background: rgba(255, 255, 255, .94); border-color: var(--dp-line); color: var(--dp-ink); }
.dp-knopf.dp-leise:hover { background: #fff; border-color: var(--dp-ink3); }
.dp-knopf.dp-dunkel { background: var(--dp-ink); border-color: var(--dp-ink); color: #fff; }
.dp-knopf.dp-dunkel:hover { background: var(--dp-hover); border-color: var(--dp-hover); color: #000; }
.dp-knopf.dp-breit { flex: 1; width: 100%; justify-content: center; box-sizing: border-box; }
.dp-knopf[disabled] { opacity: .4; pointer-events: none; }
.dp-knopf .dp-k { font-size: 10px; opacity: .6; }
.dp-rechts { margin-left: auto; }

.dp-chip {
    font: inherit;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 11px;
    border: 1px solid var(--dp-line);
    color: var(--dp-ink2);
    background: #fff;
    letter-spacing: .02em;
    cursor: pointer;
}

.dp-chip:hover { background: var(--dp-hover); border-color: var(--dp-hover); color: #000; }
.dp-chip.dp-an { background: var(--dp-brand); border-color: var(--dp-brand); color: #000; font-weight: 600; }

.dp-seg { display: flex; border: 1px solid var(--dp-line); border-radius: 5px; overflow: hidden; background: #fff; }
.dp-seg button { padding: 4px 9px; border: 0; border-right: 1px solid var(--dp-line2); background: transparent; font: inherit; font-size: 11px; color: var(--dp-ink2); cursor: pointer; }
.dp-seg button:last-child { border-right: 0; }
.dp-seg button:hover { background: var(--dp-hover); color: #000; }
.dp-seg button.dp-an { background: var(--dp-brand); color: #000; font-weight: 600; }

.dp-feld {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid #8a8a89;
    border-radius: 4px;
    background: #fff;
    color: #161616;
    font: inherit;
    font-size: 14px;
}

.dp-feld:focus { outline: 0; border-color: var(--dp-focus); box-shadow: 0 0 0 1px var(--dp-focus), 0 0 0 .25rem rgba(31, 127, 207, .25); }
textarea.dp-feld { resize: vertical; font-size: 13px; }

/* ---- Bänder über dem Board ------------------------------------------------ */

.dp-ladefehler {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    font-size: 12.5px;
    background: #fbe9e6;
    color: #a01b1b;
    border-bottom: 1px solid #f3c4bd;
}

.dp-ladefehler .pf-btn { margin-left: auto; flex: none; }

.dp-band {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--dp-ink);
}

.dp-band b { font-weight: 600; }
.dp-band .dp-knopf { margin-left: auto; flex: none; }
.dp-fristband { background: #fdf3ea; border-bottom: 1px solid #eccfae; }

/* Zähler-Chips in der Kopfzeile der Seite: sie klappen die Bänder darüber auf. */
.dp-chip-krank { border-color: rgba(217, 75, 30, .45); background: rgba(217, 75, 30, .08); color: var(--dp-rot); }
.dp-chip-frist { border-color: #eccfae; background: #fdf3ea; color: #8f620a; }
.dp-chip-krank b, .dp-chip-frist b { font-weight: 700; }
.dp-chip-krank.dp-an { background: rgba(217, 75, 30, .2); border-color: var(--dp-rot); color: #7a2b10; }
.dp-chip-frist.dp-an { background: #f6dfbf; border-color: #c1860f; color: #5d4006; }

/* Krankstand: eine Krankmeldung meldet etwas, das eingetreten ist – der Termin steht im Board noch, und er findet nicht statt. Kräftiger als die Frist. */
.dp-krankband { background: rgba(217, 75, 30, .1); border-bottom: 1px solid rgba(217, 75, 30, .32); }
.dp-krankband b { color: var(--dp-rot); }

/* ---- Einsatzliste --------------------------------------------------------- */

.dp-suche { position: relative; flex: none; padding: 8px 14px; border-bottom: 1px solid var(--dp-line2); background: var(--dp-stripe); }
.dp-suche .dp-feld { font-size: 13px; min-height: 30px; padding-right: 28px; }
.dp-suche .dp-feld::-webkit-search-cancel-button { display: none; }

.dp-suche .dp-loeschen {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    line-height: 1;
    font-size: 14px;
    color: var(--dp-ink3);
    background: transparent;
    cursor: pointer;
}

.dp-suche .dp-loeschen:hover { color: var(--dp-ink); background: var(--dp-line2); }

.dp-filter { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px; border-bottom: 1px solid var(--dp-line2); background: var(--dp-stripe); }

.dp-einsatz {
    display: flex;
    gap: 9px;
    padding: 10px 14px 11px;
    border-bottom: 1px solid var(--dp-line2);
    cursor: pointer;
    position: relative;
}

.dp-einsatz:hover { background: var(--dp-stripe); }
.dp-einsatz.dp-gewaehlt { background: #fff; box-shadow: inset 0 0 0 1px rgba(217, 75, 30, .28); }
.dp-einsatz.dp-gewaehlt::before, .dp-einsatz.dp-krank::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dp-rot); }

/* Der eingeplante Techniker ist an einem Einsatztag krank gemeldet: dieselbe Kante wie bei der Auswahl, aber die Fläche bleibt leicht rot getönt. */
.dp-einsatz.dp-krank { background: rgba(217, 75, 30, .045); }

.dp-krankmarke { font-size: 9.5px; letter-spacing: .09em; padding: 1.5px 5px; border-radius: 3px; font-weight: 600; background: var(--dp-rot); color: #fff; }

.dp-cb { flex: none; box-sizing: border-box; width: 15px; height: 15px; border: 1.5px solid var(--dp-line); border-radius: 3px; margin-top: 2px; display: grid; place-items: center; background: #fff; cursor: pointer; }
.dp-cb.dp-an { background: var(--dp-ink); border-color: var(--dp-ink); }
.dp-cb.dp-an::after { content: ""; width: 7px; height: 4px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg) translateY(-1px); }

.dp-ebody { flex: 1; min-width: 0; }
.dp-etop { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.dp-eid { font-size: 10.5px; color: var(--dp-ink3); letter-spacing: .03em; }

.dp-prio { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; padding: 1.5px 5px; border-radius: 3px; font-weight: 500; }
.dp-prio.dp-h { background: #fbe1e1; color: #b00020; }
.dp-prio.dp-m { background: #fdf1da; color: #9a6206; }
.dp-prio.dp-n { background: var(--dp-tint); color: var(--dp-ink); }

.dp-serie { font-size: 9.5px; letter-spacing: .06em; padding: 1.5px 5px; border-radius: 3px; background: #e8f3ff; color: #235b7e; }

.dp-auftrag { margin-left: auto; font-size: 9.5px; letter-spacing: .03em; color: var(--dp-ink3); }

/* Bearbeiten-Link und Knöpfe in der Kopfzeile der Karte: rechts, damit die Zeile links weiter mit Nummer und Priorität beginnt – danach sucht das Auge. */
.dp-bearb {
    margin-left: auto;
    background: none;
    border: 1px solid var(--dp-line);
    border-radius: 3px;
    padding: 1px 6px;
    font: inherit;
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--dp-ink2);
    text-decoration: none;
    cursor: pointer;
}

.dp-auftrag + .dp-bearb { margin-left: 6px; }
.dp-bearb + .dp-bearb { margin-left: 4px; }
.dp-bearb:hover { background: var(--dp-line2); color: var(--dp-ink); }
.dp-bearb.dp-loesen:hover { border-color: var(--dp-rot); color: var(--dp-rot); background: none; }

.dp-etitel { font-size: 13px; font-weight: 500; margin: 0 0 5px; line-height: 1.3; }
.dp-emeta { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--dp-ink2); }
.dp-emeta i { font-style: normal; color: var(--dp-ink3); }

.dp-efuss { display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.dp-skill { height: 17px; padding: 0 4px; border-radius: 3px; display: grid; place-items: center; font-size: 10px; font-weight: 600; background: var(--dp-brand-soft); color: var(--dp-ink); }
.dp-team { font-size: 10px; color: var(--dp-blau); }
.dp-mat { display: flex; gap: 3px; align-items: center; }
.dp-mat .dp-mono { font-size: 9.5px; color: var(--dp-ink3); }
.dp-matpunkt { width: 7px; height: 7px; border-radius: 50%; background: var(--dp-ok); display: inline-block; flex: none; }
.dp-matpunkt.dp-offen { background: var(--dp-rot); }

.dp-marke { font-size: 9.5px; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.dp-marke.dp-warn { background: #fdf1da; color: #9a6206; }
.dp-marke.dp-rot { background: #fbe9e6; color: #a01b1b; }
.dp-marke.dp-info { background: #e8f3ff; color: #235b7e; }

/* Der Nachweis aus dem Feld: grün, weil er im Alltag eine gute Nachricht ist; bleibt eine Position offen, wird daraus der Grund für einen Folgeauftrag. */
.dp-nachweis { display: flex; gap: 5px; align-items: center; }
.dp-nachweis .dp-mono { font-size: 9.5px; letter-spacing: .06em; color: var(--dp-ok); }
.dp-nachweis.dp-abweichung .dp-mono { color: var(--dp-amber); }
.dp-zuordnung { font-size: 11px; color: var(--dp-ink2); }

.dp-zustand { margin-left: auto; font-size: 10.5px; padding: 2px 6px; border-radius: 3px; letter-spacing: .03em; }
.dp-zustand.dp-plan { background: rgba(43, 95, 168, .1); color: #2b5fa8; }
.dp-zustand.dp-open { background: rgba(23, 24, 26, .06); color: var(--dp-ink2); }
.dp-zustand.dp-hold { background: rgba(193, 134, 15, .15); color: #8f620a; }
.dp-zustand.dp-risk { background: rgba(217, 75, 30, .12); color: var(--dp-rot); }
.dp-kv .dp-zustand { margin-left: 0; }

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

.dp-kartenleiste { flex: none; background: var(--dp-panel); border-bottom: 1px solid var(--dp-line); padding: 6px 10px; display: flex; flex-direction: column; gap: 5px; }
.dp-leistenreihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-teiler { width: 1px; height: 16px; background: var(--dp-line); }
.dp-lrow { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-lrow button { padding: 3px 7px; border-radius: 4px; border: 1px solid var(--dp-line); background: #fff; color: var(--dp-ink3); font: inherit; font-size: 9.5px; letter-spacing: .05em; cursor: pointer; }
.dp-lrow button:hover { border-color: var(--dp-ink3); }
.dp-lrow button.dp-an { background: var(--dp-brand); border-color: var(--dp-brand); color: #000; font-weight: 600; }

.dp-leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--dp-ink2); }
.dp-leg .dp-sw { box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--dp-slate); background: #fff; }
.dp-leg .dp-sw.dp-g { border-color: var(--dp-ink3); }
.dp-leg .dp-sw.dp-c { border-radius: 2px; border: 0; background: var(--dp-rot); }
.dp-leg .dp-sw.dp-r { height: 0; border-radius: 0; border: 0; border-top: 2.5px solid var(--dp-blau); width: 16px; }
.dp-rmode { font-size: 9px; letter-spacing: .06em; color: var(--dp-ink3); }
.dp-kartenhinweis { font-size: 11.5px; color: var(--dp-rot); border-top: 1px solid var(--dp-line2); padding-top: 5px; }

.dp-kartenflaeche { flex: 1; min-height: 0; position: relative; background: var(--dp-paper2); }

/* z-index:0 macht den Container zum Stapelkontext. Leaflet vergibt intern bis 1000; ohne eigenen Kontext konkurrieren Panes und Steuerelemente mit allem auf der Seite. */
.dp-karte { position: absolute; inset: 0; z-index: 0; background: var(--dp-paper2); font-family: var(--dp-font); }

.dp-kartenleer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1; max-width: 340px; background: rgba(255, 255, 255, .94); border: 1px solid var(--dp-line); border-radius: 6px; padding: 10px 13px; text-align: center; pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.dp-kartenleer b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.dp-kartenleer span { display: block; font-size: 11.5px; color: var(--dp-ink2); line-height: 1.45; }
.dp-kartenleer em { display: block; font-style: normal; font-size: 9.5px; letter-spacing: .06em; color: var(--dp-ink3); margin-top: 5px; }

/* Von Leaflet erzeugtes DOM (Marker, Popups): entsteht erst im Browser, daher unter dem Behälter. */
.dp-karte .dp-pin-t { background: none !important; border: 0 !important; }
.dp-karte .dp-pin-t .dp-pin-b { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--dp-slate); color: var(--dp-slate); display: grid; place-items: center; font: 600 9.5px/1 var(--dp-font); box-shadow: 0 1px 5px rgba(0, 0, 0, .28); box-sizing: border-box; }
.dp-karte .dp-pin-t.nr .dp-pin-b { border-color: var(--dp-ink3); color: var(--dp-ink3); }
.dp-karte .dp-pin-t.dim .dp-pin-b { opacity: .3; }
.dp-karte .dp-pin-t.hl .dp-pin-b { background: var(--dp-slate); color: #fff; transform: scale(1.15); }
.dp-karte .dp-pin-t.nr.hl .dp-pin-b { background: var(--dp-ink3); border-color: var(--dp-ink3); }

/* Größer und mit hartem Rand: auf der Karte gingen besonders die Pins niedriger Priorität unter, und wer Einsätze zu einer Route bündeln will, muss sie erst einmal alle sehen. */
.dp-karte .dp-pin-c { background: none !important; border: 0 !important; }
.dp-karte .dp-pin-c .dp-pin-b { box-sizing: border-box; width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--dp-font); box-shadow: 0 0 0 1.5px rgba(23, 24, 26, .55), 0 2px 6px rgba(0, 0, 0, .4); border: 2px solid rgba(255, 255, 255, .92); }
.dp-karte .dp-pin-c.sel .dp-pin-b { transform: scale(1.22); box-shadow: 0 0 0 2px var(--dp-ink), 0 0 0 6px rgba(217, 75, 30, .35), 0 3px 10px rgba(0, 0, 0, .42); }
.dp-karte .dp-pin-c.pick .dp-pin-b { box-shadow: 0 0 0 3px rgba(217, 75, 30, .6), 0 1px 5px rgba(0, 0, 0, .3); }

/* Beim Kunden angefragt, Antwort steht aus: ein Rahmen mit Abstand um den Pin, in der Farbe der Bereitschaft (dieselbe Farbe wie an Balken und Zellen der Zeitleiste). */
.dp-karte .dp-pin-c.wartet .dp-pin-b { outline: 2.5px solid #c1860f; outline-offset: 3px; }
.dp-karte .dp-pwart { display: block; margin-top: 4px; color: #8f620a; font-size: 10px; }
.dp-karte .dp-stoppnr { position: absolute; top: -8px; right: -8px; width: 17px; height: 17px; border-radius: 50%; background: var(--dp-brand); color: #000; font: 600 10px/17px var(--dp-font); text-align: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }

.dp-karte .leaflet-popup-content { margin: 9px 12px; font-size: 12px; font-family: var(--dp-font); color: var(--dp-ink); }
.dp-karte .leaflet-popup-content b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.dp-karte .leaflet-popup-content .dp-mono { font-size: 10.5px; color: var(--dp-ink3); letter-spacing: .03em; }
.dp-karte .dp-pnr { display: block; margin-top: 4px; line-height: 1.4; }
.dp-karte .dp-psum { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: var(--dp-ink2); }
.dp-karte .dp-pauftrag { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .03em; }
.dp-karte .dp-pcb { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--dp-line2); font-size: 11.5px; line-height: 1.45; cursor: pointer; }
.dp-karte .dp-pcb input { margin: 1px 0 0; accent-color: var(--dp-rot); width: 14px; height: 14px; flex: none; }
.dp-karte .dp-pcb b { display: inline; font-weight: 600; }
.dp-karte .dp-pcb .dp-anzahl { color: var(--dp-ink3); font-size: 10px; }
.dp-karte .dp-pbtn { margin-top: 9px; width: 100%; box-sizing: border-box; background: var(--dp-brand); color: #000; border-radius: 4px; padding: 7px 0; font: inherit; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; }
.dp-karte .dp-pbtn:hover { background: var(--dp-hover); }
.dp-karte .dp-pbtn.dp-pbtn-leise { background: none; color: var(--dp-ink2); border: 1px solid var(--dp-line); }
.dp-karte .dp-pbtn.dp-pbtn-leise:hover { background: var(--dp-line2); }

/* Lösen ist die einzige Aktion im Popup, die etwas wegnimmt – sie soll sich beim Zeigen vom Bearbeiten unterscheiden, ohne ständig rot dazustehen. */
.dp-karte .dp-pbtn.dp-loesen:hover { border-color: var(--dp-rot); color: var(--dp-rot); background: none; }

/* ---- Rechte Spalte: Details, Vorschläge, Routen -------------------------- */

.dp-pad { padding: 12px 14px; }
.dp-sec { border-bottom: 1px solid var(--dp-line2); padding: 12px 14px; }
.dp-sec h3 { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dp-ink3); font-weight: 600; }
.dp-sec h3 .dp-zahl { float: right; letter-spacing: .06em; font-size: 10px; }
.dp-kv { display: grid; grid-template-columns: 92px 1fr; gap: 5px 10px; font-size: 12px; margin: 0; }
.dp-kv dt { color: var(--dp-ink3); }
.dp-kv dd { margin: 0; }
.dp-kv .dp-zeile { display: block; }
.dp-auftragstitel { margin: 0 0 9px; font-size: 13.5px; font-weight: 500; }
.dp-offen-text { color: var(--dp-amber); }
.dp-anzahl { letter-spacing: 0; }
.dp-fussnote { font-size: 11px; color: var(--dp-ink3); margin: 7px 0 0; }
.dp-aktionen { display: flex; gap: 7px; flex-wrap: wrap; }
.dp-aktionen.dp-weitere { margin-top: 8px; }
.dp-pad + .dp-pad { padding-top: 0; }

.dp-warn { display: flex; gap: 8px; padding: 9px 10px; border-radius: 5px; font-size: 11.5px; background: rgba(193, 134, 15, .1); color: #7d5606; margin-bottom: 7px; line-height: 1.4; }
.dp-warn.dp-hi { background: rgba(217, 75, 30, .1); color: #a13a12; }
.dp-warn.dp-info { background: rgba(43, 95, 168, .09); color: #1d4478; }
.dp-warn.dp-klickbar { cursor: pointer; }
.dp-warn b { display: block; font-weight: 600; margin-bottom: 1px; }
.dp-warn .dp-mini { font-size: 9.5px; opacity: .75; letter-spacing: .05em; }
.dp-warn.dp-gesperrt { margin-top: 9px; }
.dp-bestaetigung { margin-bottom: 9px; }

/* Routenkarte */
.dp-route { border: 1px solid var(--dp-line); border-radius: 6px; padding: 10px 11px; margin-bottom: 9px; background: #fff; border-left: 3px solid var(--dp-blau); }
.dp-route.dp-klickbar { cursor: pointer; }
.dp-route.dp-klickbar:hover { border-color: var(--dp-ink3); }
.dp-route.dp-an { box-shadow: 0 0 0 2px rgba(23, 24, 26, .1); }
.dp-route.dp-neu { border-left-color: #a8631e; }
.dp-rtop { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.dp-rtop b { font-size: 12.5px; }
.dp-rtop .dp-wer { font-size: 11.5px; color: var(--dp-ink2); }
.dp-rtop .dp-dd { margin-left: auto; font-size: 10.5px; color: var(--dp-ink3); }
.dp-rstops { display: flex; flex-direction: column; gap: 4px; margin: 7px 0 6px; }
.dp-rstop { display: flex; gap: 7px; align-items: baseline; font-size: 11.5px; color: var(--dp-ink2); }
.dp-rstop .dp-nr { flex: none; width: 14px; height: 14px; border-radius: 50%; background: rgba(23, 24, 26, .08); font: 600 9px/14px var(--dp-font); text-align: center; color: var(--dp-ink); }
.dp-rstop .dp-aufwand { color: var(--dp-ink3); font-size: 10.5px; }
.dp-rfuss { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--dp-ink3); border-top: 1px dashed var(--dp-line); padding-top: 6px; text-transform: uppercase; }
.dp-rfuss .dp-entwurf { color: var(--dp-amber); }
.dp-rnotiz { font-size: 11px; color: var(--dp-ink3); margin-top: 6px; }

/* Technikervorschlag */
.dp-cand { display: flex; gap: 9px; padding: 9px 10px; border: 1px solid var(--dp-line); border-radius: 6px; margin-bottom: 7px; background: #fff; align-items: flex-start; }
.dp-cand.dp-top { border-color: rgba(47, 111, 79, .5); background: var(--dp-stripe); }
.dp-cand .dp-av { flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1.5px solid var(--dp-slate); color: var(--dp-slate); display: grid; place-items: center; font: 600 10px/1 var(--dp-font); }
.dp-cand.dp-nachrang { opacity: .78; background: var(--dp-stripe); }
.dp-cand.dp-nachrang .dp-av, .dp-cand.dp-nachrang .dp-score { border-color: var(--dp-ink3); color: var(--dp-ink3); }
.dp-cand.dp-no { opacity: .55; }
.dp-cand.dp-no .dp-av { border-color: var(--dp-ink3); color: var(--dp-ink3); }
.dp-cbody { flex: 1; min-width: 0; }
.dp-cname { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.dp-cname .dp-partner { font-size: 11px; color: var(--dp-ink2); }
.dp-cname .dp-lead, .dp-nm .dp-lead { font-size: 9.5px; color: var(--dp-ink3); }
.dp-score { margin-left: auto; font-size: 12px; font-weight: 600; }
.dp-bar { height: 3px; background: rgba(23, 24, 26, .08); border-radius: 2px; margin: 5px 0; }
.dp-bar i { display: block; height: 100%; border-radius: 2px; }
.dp-creason { font-size: 11px; color: var(--dp-ink2); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.dp-creason em { font-style: normal; color: var(--dp-ink3); }
.dp-creason .dp-hint.dp-blau { color: var(--dp-blau); }
.dp-creason .dp-hint.dp-gruen { color: var(--dp-ok); }
.dp-creason .dp-hint.dp-rot { color: var(--dp-rot); }
.dp-creason .dp-hint.dp-grau { color: var(--dp-ink3); }
.dp-lamp { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 6px; }
.dp-lamp.dp-grau { background: var(--dp-ink3); }
.dp-trenner { font-size: 10px; letter-spacing: .1em; color: var(--dp-ink3); margin: 12px 0 7px; }

/* Von der Karte hervorgehobener Techniker; derselbe Rahmen wie bei der ausgewählten Einsatzkarte, damit „das habe ich angeklickt“ überall gleich aussieht. */
.dp-cand.dp-sel { border-color: var(--dp-rot); box-shadow: inset 2px 0 0 var(--dp-rot); background: color-mix(in srgb, var(--dp-rot) 5%, #fff); }
.dp-cand.dp-waehlbar, .dp-ctab tr.dp-waehlbar { cursor: pointer; }
.dp-cand.dp-waehlbar:hover { border-color: var(--dp-ink3); }

.dp-ctab { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dp-ctab th { padding: 5px 4px; font-size: 9.5px; letter-spacing: .08em; background: none; border-bottom: 1px solid var(--dp-line); text-align: left; text-transform: uppercase; color: var(--dp-ink3); }
.dp-ctab td { padding: 6px 4px; border-bottom: 1px solid var(--dp-line2); font-size: 11.5px; }
.dp-ctab .dp-num { text-align: right; }
.dp-ctab td.dp-punkte { font-weight: 600; }
.dp-ctab tr.dp-no { opacity: .5; }
.dp-ctab tr.dp-nachrang { opacity: .78; }
.dp-ctab tr.dp-trennzeile td { border-bottom: 0; padding-top: 10px; }
.dp-ctab tr.dp-trennzeile .dp-trenner { margin: 0; }
.dp-ctab td.dp-grund { font-size: 11px; }
.dp-ctab tr.dp-waehlbar:hover td { background: var(--dp-line2); }
.dp-ctab tr.dp-sel td { background: color-mix(in srgb, var(--dp-rot) 8%, transparent); }
.dp-ctab tr.dp-sel td:first-child { box-shadow: inset 2px 0 0 var(--dp-rot); }

/* Material */
.dp-matliste { display: flex; flex-direction: column; gap: 5px; }
.dp-matzeile { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dp-matzeile .dp-st { margin-left: auto; font-size: 9.5px; letter-spacing: .06em; color: var(--dp-ink3); border: 1px solid transparent; border-radius: 3px; padding: 1px 5px; background: none; cursor: pointer; }
.dp-matzeile span.dp-st { cursor: default; }
.dp-matzeile button.dp-st:hover { border-color: var(--dp-line); color: var(--dp-ink); }

/* Stapelvorschlag: eine Zeile je Einsatz, anklickbar auf ganzer Breite. Das Kästchen ist nur die Anzeige. */
.dp-stapelzeile { display: flex; align-items: flex-start; gap: 8px; padding: 8px 9px; margin-bottom: 5px; border: 1px solid var(--dp-line); border-radius: 4px; background: #fff; cursor: pointer; font-size: 11.5px; line-height: 1.45; }
.dp-stapelzeile:hover { border-color: var(--dp-ink3); }
.dp-stapelzeile.dp-an { border-color: var(--dp-ink); background: var(--dp-stripe); }
.dp-stapelzeile .dp-cb { margin-top: 1px; }
.dp-stapelzeile .dp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dp-stapelzeile b { font-weight: 600; color: var(--dp-ink); }
.dp-stapelzeile .dp-wer { color: var(--dp-ink2); }
.dp-stapelzeile .dp-warum { color: var(--dp-ink3); font-size: 10.5px; }
.dp-stapelzeile .dp-zw { margin-top: 2px; font-size: 10.5px; color: var(--dp-ink2); border-left: 2px solid var(--dp-line); padding-left: 6px; }
.dp-stapelzeile .dp-zw.dp-hi { color: var(--dp-rot); border-left-color: var(--dp-rot); }

/* ---- Zeitleiste ----------------------------------------------------------- */

/* Die Zeitleiste dockt am unteren Rand der Hülle an und ändert ihre Größe nie von selbst:
   zu     = genau die Kopfleiste (eine Zeile hoch),
   offen  = Höhe aus --dp-zl-h (setzt dispo-board.js: gewählt per Splitter, sonst bis zur ersten Technikerzeile; ohne Skript 38 % der Fensterhöhe), mindestens eine knappe Zeile; die Obergrenze von
            85 % der Hülle erzwingt das Skript (Prozentwerte lösen hier nicht auf: die Hülle hat keine ausdrückliche Höhe, sie füllt per flex).
   Das Raster darin scrollt in sich, Tageskopf und Technikerspalte kleben (sticky, siehe unten). */
.dp-zl {
    flex: none;
    background: var(--dp-panel);
    border-top: 1px solid var(--dp-line);
    display: flex;
    flex-direction: column;
    min-height: 0;

    /* Höhen der klebenden Kopfzeilen: jede untere braucht die Summe der oberen als top-Versatz. */
    --tl-kw: 20px;
    --tl-tag: 27px;
    --tl-name: 190px;
}

.dp-zl.dp-offen { height: var(--dp-zl-h, 38vh); min-height: 96px; max-height: 80vh; border-top: 0; }
.dp-zl.dp-zu .dp-gitter,
.dp-zl.dp-zu .dp-zlleg { display: none; }

/* Splitter: eine schmale Ziehleiste mit Griff. Die Trefferfläche ist größer als der sichtbare Streifen (Finger). */
.dp-splitter {
    flex: none;
    position: relative;
    z-index: 5;
    height: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dp-stripe);
    border-top: 1px solid var(--dp-line);
    border-bottom: 1px solid var(--dp-line);
    cursor: row-resize;
    touch-action: none;
}

.dp-splitter::before { content: ""; width: 46px; height: 3px; border-radius: 2px; background: var(--dp-ink3); opacity: .45; transition: opacity .12s, background-color .12s; }
.dp-splitter::after { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
.dp-splitter:hover::before, .dp-splitter.dp-zieht::before { opacity: 1; background: var(--dp-hover); }
.dp-splitter:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dp-focus); }
.dp-splitter.dp-aus { display: none; }

/* Beim Ziehen darf nichts unter dem Zeiger Ereignisse abfangen (Karte, Balken) und kein Text markiert werden. */
.dp-board-huelle.dp-teilt { user-select: none; cursor: row-resize; }
.dp-board-huelle.dp-teilt .dp-karte, .dp-board-huelle.dp-teilt .dp-gitter { pointer-events: none; }

/* Die Kopfleiste ist zugleich die zugeklappte Zeitleiste: genau eine Zeile, die linke Fläche klappt auf und zu. */
.dp-zlkopf { flex: none; box-sizing: border-box; height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; border-bottom: 1px solid var(--dp-line); }
.dp-zl.dp-zu .dp-zlkopf { border-bottom: 0; }
.dp-zlkopf h2 { margin: 0; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--dp-ink2); white-space: nowrap; }

.dp-zlklapp { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 9px; padding: 0 14px; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dp-zlklapp:hover { background: var(--dp-stripe); }
.dp-zlklapp:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--dp-focus); }
.dp-zlpfeil { flex: none; color: var(--dp-ink3); transform: rotate(180deg); transition: transform .15s; }
.dp-zl.dp-offen .dp-zlpfeil { transform: none; }

.dp-zlnotiz { font-size: 10px; color: var(--dp-ink3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-zlzoom { flex: none; }
.dp-zlheute { flex: none; }
.dp-zlleg { display: flex; gap: 11px; font-size: 10px; color: var(--dp-ink3); flex: none; }
.dp-zlleg span { display: flex; align-items: center; gap: 5px; }
.dp-zlleg i { width: 11px; height: 11px; border-radius: 2px; display: block; box-sizing: border-box; }
.dp-zlleg i.dp-legkrank { background: var(--dp-krank-flaeche); border: 1px solid var(--dp-krank-linie); }
.dp-zlleg i.dp-leganfrage { background: #fff; box-shadow: inset 0 0 0 2px #c1860f; }
@media (max-width: 1500px) { .dp-zlleg { display: none; } }

/* Raster: feste Tagesbreite statt 1fr (bei 43 Werktagen wären gleichverteilte Spalten drei Pixel breit), die Leiste rollt waagerecht. */
.dp-gitter { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: var(--tl-name) max-content; align-content: start; }
.dp-gc { border-bottom: 1px solid var(--dp-line2); min-height: 30px; display: flex; align-items: center; }
.dp-gname { padding: 0 12px; gap: 8px; position: sticky; left: 0; background: var(--dp-panel); z-index: 2; border-right: 1px solid var(--dp-line); }
.dp-gname .dp-av { flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1.5px solid var(--dp-slate); color: var(--dp-slate); display: grid; place-items: center; font: 600 8.5px/1 var(--dp-font); }
.dp-gname.dp-nachrang .dp-t { color: var(--dp-ink3); }
.dp-gname.dp-nachrang .dp-av { border-color: var(--dp-ink3); color: var(--dp-ink3); }
.dp-gname .dp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dp-gname .dp-c { font-size: 9px; color: var(--dp-ink3); }

.dp-tage { position: relative; display: grid; grid-template-columns: repeat(var(--tl-cols), var(--tl-day)); }
.dp-zellen { display: grid; grid-template-columns: repeat(var(--tl-cols), var(--tl-day)); grid-column: 1 / -1; }

/* Beide Kopfzeilen kleben oben, die Technikerspalte zusätzlich links. */
.dp-hdr { position: sticky; background: var(--dp-stripe); z-index: 3; }
.dp-gname.dp-hdr { background: var(--dp-stripe); z-index: 4; }
.dp-kwzeile, .dp-kwname { top: 0; height: var(--tl-kw); min-height: var(--tl-kw); }
.dp-tagzeile, .dp-tagname { top: var(--tl-kw); height: var(--tl-tag); min-height: var(--tl-tag); }
.dp-kaparow, .dp-kapaname { top: calc(var(--tl-kw) + var(--tl-tag)); border-bottom: 1px solid var(--dp-line); }
.dp-kwname .dp-c, .dp-tagname .dp-c, .dp-kapaname .dp-c { letter-spacing: .1em; text-transform: uppercase; }

.dp-kwzelle { border-right: 1px solid var(--dp-line); display: flex; align-items: center; gap: 6px; padding: 0 6px; overflow: hidden; white-space: nowrap; font-size: 9.5px; letter-spacing: .06em; color: var(--dp-ink3); }
.dp-kwzelle b { font-weight: 600; color: var(--dp-ink2); }
.dp-kwzelle .dp-mon { letter-spacing: 0; font-size: 10px; color: var(--dp-rot); }

.dp-tagkopf { border-right: 1px solid var(--dp-line2); padding: 5px 7px; font-size: 10px; color: var(--dp-ink2); letter-spacing: .02em; overflow: hidden; }
.dp-tagkopf b { display: block; font-size: 11px; color: var(--dp-ink); white-space: nowrap; }

/* Die Auslastungszeile: die Zahl zählt, der Nenner steht kleiner und blasser daneben. */
.dp-kzelle { border-right: 1px solid var(--dp-line2); display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 10px; color: var(--dp-ink3); overflow: hidden; white-space: nowrap; }
.dp-kzelle b { font-weight: 600; color: var(--dp-ink2); }
.dp-kzelle .dp-ges { font-size: 9px; }
.dp-kzelle.dp-knapp { background: rgba(217, 75, 30, .08); }
.dp-kzelle.dp-knapp b, .dp-kzelle.dp-knapp .dp-ges { color: var(--dp-rot); }

.dp-zelle { border-right: 1px solid var(--dp-line2); border-bottom: 1px solid var(--dp-line2); box-sizing: border-box; height: 30px; display: grid; place-items: center; font-size: 9.5px; color: var(--dp-ink3); overflow: hidden; }

/* Vergangene Spalten: gedämpft, nicht gesperrt. Nachtragen bleibt möglich; der Zug in die Vergangenheit endet in einer Rückfrage (harte Warnung „Tag ist vorbei“). */
.dp-tagkopf.dp-vergangen, .dp-kzelle.dp-vergangen, .dp-zelle.dp-vergangen { opacity: .55; }

.dp-zelle.dp-sV { background: #fff; }
.dp-zelle.dp-sF, .dp-zelle.dp-sS { background: rgba(47, 72, 88, .11); color: var(--dp-slate); }
.dp-zelle.dp-sU { background: repeating-linear-gradient(45deg, var(--dp-stripe), var(--dp-stripe) 4px, var(--dp-paper2) 4px, var(--dp-paper2) 8px); }
.dp-zelle.dp-sB { background: rgba(193, 134, 15, .12); color: #8f620a; }

/* Krank: rot und gefüllt, nicht schraffiert wie der Urlaub: Urlaub war beim Planen bekannt, eine Krankmeldung wirft einen fertigen Plan um. */
.dp-zelle.dp-sK { background: var(--dp-krank-flaeche); color: var(--dp-rot); font-weight: 600; box-shadow: inset 0 0 0 1px var(--dp-krank-linie); }

/* Monatswechsel bekommt eine kräftigere Linie als der Tageswechsel; der heutige Tag steht danach und gewinnt am Monatsersten. */
.dp-tagkopf.dp-mstart, .dp-zelle.dp-mstart, .dp-kwzelle.dp-mstart, .dp-kzelle.dp-mstart { border-left: 2px solid var(--dp-line); }
.dp-tagkopf.dp-heute, .dp-zelle.dp-heute, .dp-kzelle.dp-heute { border-left: 2px solid var(--dp-rot); }
.dp-tagkopf.dp-heute b { color: var(--dp-rot); }

/* Balken */
.dp-ovl { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--tl-cols), var(--tl-day)); pointer-events: none; grid-auto-rows: 30px; }
.dp-balken { margin: 4px 3px; border-radius: 3px; padding: 0 7px; display: flex; align-items: center; gap: 6px; color: #fff; font-size: 10px; pointer-events: auto; cursor: grab; overflow: hidden; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.dp-balken .dp-ct { font-size: 10.5px; opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.dp-balken .dp-uhr { margin-left: auto; font-size: 10px; opacity: .85; flex: 0 0 auto; padding-left: 6px; }

/* Alternativtermin beim Kunden: kein Balken, sondern ein gestrichelter Platzhalter. Er belegt den Tag wie ein Einsatz, fährt aber erst, wenn der Kunde ihn wählt. */
.dp-res { grid-row: 1; margin: 4px 3px; border-radius: 3px; padding: 0 7px; display: flex; align-items: center; gap: 6px; border: 1.5px dashed var(--dp-ink3); color: var(--dp-ink2); background: rgba(255, 255, 255, .6); font-size: 10px; pointer-events: auto; cursor: pointer; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.dp-res .dp-ct { font-size: 10.5px; }

/* Beim Kunden angefragt, Antwort steht aus: ein Rahmen in der Farbe der Bereitschaft, wie am Pin der Karte (outline statt box-shadow: den belegt „bad“). */
.dp-balken.dp-angefragt { outline: 2px solid #c1860f; outline-offset: 1px; }
.dp-zelle.dp-anfrage { box-shadow: inset 0 0 0 2px rgba(193, 134, 15, .75); }

/* Material offen oder Freigabe ausstehend. */
.dp-balken.dp-hold { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .22) 3px, transparent 3px, transparent 7px); }

/* Harter Konflikt. */
.dp-balken.dp-bad { box-shadow: 0 0 0 2px var(--dp-rot); }

/* Der eingeplante Techniker ist an einem Tag dieses Abschnitts krank gemeldet: rote Schraffur über der Routenfarbe (nicht dieselbe wie „hold“ – beides kann gleichzeitig gelten). */
.dp-balken.dp-krank { background-image: repeating-linear-gradient(45deg, rgba(217, 75, 30, .85), rgba(217, 75, 30, .85) 4px, transparent 4px, transparent 9px); }
.dp-balken .dp-kmark { flex: none; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; background: #fff; color: var(--dp-rot); border-radius: 2px; padding: 1px 3px; }
.dp-balken.dp-gezogen { opacity: .4; }
.dp-balken .dp-tinis { display: flex; gap: 2px; flex: none; }
.dp-balken.dp-solo .dp-tinis { display: none; }
.dp-balken .dp-tinis i { font-style: normal; font-size: 8.5px; font-weight: 600; background: rgba(255, 255, 255, .28); border-radius: 2px; padding: 1px 3px; letter-spacing: .02em; }

/* Während des Ziehens dürfen die Balken keine Ereignisse abfangen, sonst liegt unter dem Zeiger nie eine Zelle und dragover findet kein Ziel. */
.dp-gitter.dp-zieht .dp-balken { pointer-events: none; }
.dp-zelle.dp-ablegen { outline: 2px dashed var(--dp-rot); outline-offset: -2px; background: rgba(217, 75, 30, .07); }

/* Clientseitige Vorprüfung – reine Optik, verbindlich ist die Prüfung im Server. */
.dp-zelle.dp-gesperrt { outline: 2px solid rgba(217, 75, 30, .55); outline-offset: -2px; background: repeating-linear-gradient(45deg, rgba(217, 75, 30, .12), rgba(217, 75, 30, .12) 4px, transparent 4px, transparent 8px); }

/* Zoomstufen */
[data-zoom="month"] .dp-tagkopf { padding: 5px 3px; }
[data-zoom="all"] .dp-tagkopf { padding: 4px 1px; }
[data-zoom="month"] .dp-tagkopf .dp-dm, [data-zoom="all"] .dp-tagkopf .dp-dm { display: none; }
[data-zoom="week"] .dp-tagkopf .dp-dn { display: none; }
[data-zoom="month"] .dp-balken .dp-ct, [data-zoom="all"] .dp-balken .dp-ct { display: none; }

/* Die Uhrzeit nur bei voller Tagesbreite und nur auf Balken über mehr als einen Tag: auf einem Eintagesbalken (66 px) stünde neben der Nummer nur eine halbe Uhrzeit. */
[data-zoom="month"] .dp-balken .dp-uhr, [data-zoom="all"] .dp-balken .dp-uhr { display: none; }
[data-zoom="all"] .dp-kzelle .dp-ges { display: none; }
[data-zoom="all"] .dp-tagkopf .dp-wd { display: none; }
[data-zoom="all"] .dp-tagkopf b { font-size: 9px; text-align: center; }
[data-zoom="all"] .dp-zelle { font-size: 0; }
[data-zoom="all"] .dp-balken { margin: 4px 1px; padding: 0; gap: 1px; }
[data-zoom="all"] .dp-balken .dp-no { display: none; }
[data-zoom="all"] .dp-balken.dp-solo .dp-tinis { display: flex; }
[data-zoom="all"] .dp-balken .dp-tinis i { padding: 1px 1px; font-size: 7.5px; }
[data-zoom="all"] .dp-balken .dp-kmark { display: none; }

/* Der Tag ist frei, aber es liegt eine Schicht darauf (Leitstelle, 2nd Level …): der Techniker ist buchbar, der Disponent muss die Schicht umplanen. Ein kleiner Punkt statt eines Buchstabens. */
.dp-zelle.dp-belegt { position: relative; }
.dp-zelle.dp-belegt::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--dp-ink3); opacity: .55; }

/* ---- Zähler im Menü (DispoFristZaehler) ---------------------------------- */

.dp-zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #dc3545; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }

/* ---- Kurzmeldung ----------------------------------------------------------- */

.dp-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 11px 38px 11px 17px; border-radius: 8px; background: var(--dp-ink); color: #fff; font-size: 13.5px; z-index: 1200; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.dp-toast b { font-weight: 600; }
.dp-toast .dp-knopf { flex: none; }
.dp-toast-zu { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: rgba(255, 255, 255, .7); font-size: 16px; line-height: 1; cursor: pointer; }
.dp-toast-zu:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ---- Zuordnungsdialog ------------------------------------------------------ */

.dp-maske { position: fixed; inset: 0; background: rgba(44, 51, 50, .55); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 56px 20px; overflow: auto; box-sizing: border-box; }
.dp-modal { background: var(--dp-panel); border-radius: 8px; width: 620px; max-width: 100%; box-shadow: 0 16px 48px rgba(34, 34, 34, .175); overflow: hidden; }
.dp-modal.dp-schmal { width: 520px; }
.dp-mhd { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dp-line); background: var(--dp-brand-soft); }
.dp-mhd h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; }
.dp-mhd .dp-x { margin-left: auto; padding: 0 4px; border: 0; background: transparent; font-size: 18px; color: var(--dp-ink3); line-height: 1; cursor: pointer; }
.dp-mhd .dp-x:hover { color: var(--dp-ink); }
.dp-avid { font-size: 10px; color: var(--dp-ink3); letter-spacing: .08em; }
.dp-mbody { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.dp-mfoot { display: flex; flex-wrap: wrap; gap: 9px; padding: 13px 18px; border-top: 1px solid var(--dp-line); background: var(--dp-stripe); }
.dp-mfoot .dp-sp { margin-left: auto; }
.dp-hinweistext { margin: 0; font-size: 12.5px; color: var(--dp-ink2); line-height: 1.5; }
.dp-f { display: flex; flex-direction: column; gap: 5px; }
.dp-f label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--dp-ink3); font-weight: 600; }
.dp-chint { font-size: 10.5px; color: var(--dp-ink3); letter-spacing: .04em; }

.dp-atitel { font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.dp-ameta { font-size: 11.5px; color: var(--dp-ink2); display: flex; gap: 14px; flex-wrap: wrap; }
.dp-ameta .dp-aneed { color: var(--dp-blau); }

.dp-pcards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.dp-pcard { border: 1px solid var(--dp-line); border-radius: 6px; padding: 9px 10px; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.dp-pcard:hover { border-color: var(--dp-ink3); }
.dp-pcard.dp-an { border-color: var(--dp-ink); box-shadow: 0 0 0 2px rgba(23, 24, 26, .09); background: var(--dp-stripe); }
.dp-pcard b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.dp-pcard span { display: block; font-size: 10px; color: var(--dp-ink2); letter-spacing: .03em; }
.dp-pcard em { display: block; font-style: normal; font-size: 10px; color: var(--dp-ink3); margin-top: 3px; }

.dp-adauer { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--dp-ink2); }
.dp-adauer label { flex: 0 0 auto; color: var(--dp-ink3); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; }
.dp-adauer input { flex: 0 0 62px; box-sizing: border-box; border: 1px solid var(--dp-line); border-radius: 4px; padding: 2px 4px; font: inherit; font-size: 11px; color: var(--dp-ink); background: #fff; }

.dp-alist { max-height: 260px; overflow: auto; padding-right: 3px; }
.dp-arow { display: flex; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid var(--dp-line); border-radius: 6px; margin-bottom: 6px; cursor: pointer; background: #fff; }
.dp-arow:hover { border-color: var(--dp-ink3); }
.dp-arow.dp-an { border-color: var(--dp-ink); box-shadow: 0 0 0 2px rgba(23, 24, 26, .09); }
.dp-arow.dp-bad { border-color: rgba(217, 75, 30, .45); background: #fffaf8; }
.dp-arow .dp-av { flex: none; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1.5px solid var(--dp-slate); color: var(--dp-slate); display: grid; place-items: center; font: 600 9.5px/1 var(--dp-font); }
.dp-arow .dp-num { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--dp-brand); color: #000; font: 600 9px/16px var(--dp-font); text-align: center; }
.dp-arow .dp-abody { flex: 1; min-width: 0; }
.dp-arow .dp-nm { font-size: 12.5px; font-weight: 500; }
.dp-arow .dp-nm .dp-lead { margin-left: 6px; }
.dp-arow .dp-mt { font-size: 11px; color: var(--dp-ink2); display: flex; gap: 10px; flex-wrap: wrap; }
.dp-arow .dp-rt { margin-left: auto; text-align: right; font-size: 10.5px; color: var(--dp-ink3); white-space: nowrap; }
.dp-arow .dp-nachrangig { color: var(--dp-ink3); }
.dp-arow .dp-ok { color: var(--dp-ok); }
.dp-arow .dp-no { color: var(--dp-rot); }
.dp-arow .dp-warn2 { color: var(--dp-amber); }
.dp-arow .dp-dsel { margin-left: 6px; border: 1px solid var(--dp-line); border-radius: 4px; padding: 3px 5px; font: inherit; font-size: 10px; background: #fff; color: var(--dp-ink); max-width: 140px; }

.dp-awarn > .dp-warn:last-child { margin-bottom: 0; }
.dp-wsep { display: flex; align-items: center; gap: 8px; margin: 2px 0 7px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dp-ink3); }
.dp-wsep::before, .dp-wsep::after { content: ""; flex: 1; height: 1px; background: var(--dp-line2); }

/* Der gerechnete Ablauf je Werktag: wann der Techniker losfährt, wann er beim Kunden ist und wann er wieder zu Hause ist – zugleich die Eingabe der Zusagen. */
.dp-lagen { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.dp-lage-zeile { display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--dp-ink2); line-height: 1.5; }

/* Ein Tag, der nicht aufgeht: bernsteinfarben und nicht rot – nichts ist kaputt, es kostet nur eine Übernachtung oder einen anderen Tag. */
.dp-lage-zeile.dp-warnt { color: var(--dp-amber); }
.dp-lage-tag { flex: 0 0 108px; color: var(--dp-ink3); }
.dp-lage-text { flex: 1 1 auto; }
.dp-lage-zeit { flex: 0 0 74px; box-sizing: border-box; border: 1px solid var(--dp-line); border-radius: 4px; padding: 2px 4px; font: inherit; font-size: 10px; color: var(--dp-ink); background: #fff; }

/* Ein leeres Feld heißt „gerechnet“ und soll nicht wie eine Lücke aussehen. */
.dp-lage-zeit:not(:focus) { border-color: color-mix(in srgb, var(--dp-line) 60%, transparent); }
.dp-lage-bis { flex: 0 0 auto; color: var(--dp-ink3); }

/* Ein Vorschlag im Zeitfeld (Abfahrt zu Hause bzw. Ende des vorigen Kunden plus Fahrzeit): grau und kursiv, damit er nicht wie eine Zusage aussieht. */
.dp-lage-zeit.dp-lage-vorschlag { font-style: italic; color: var(--dp-ink3); }
.dp-lage-keinvorschlag { display: block; font-style: italic; color: var(--dp-ink3); }

@media (max-width: 640px) {
    .dp-maske { padding: 0; }
    .dp-modal, .dp-modal.dp-schmal { width: 100%; min-height: 100%; border-radius: 0; overflow: visible; }
    .dp-mfoot { position: sticky; bottom: 0; z-index: 2; }
    .dp-pcards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .dp-alist { max-height: none; padding-right: 0; }
    .dp-arow { flex-wrap: wrap; row-gap: 4px; }
    .dp-arow .dp-abody { flex-basis: calc(100% - 70px); }
    .dp-arow .dp-rt { margin-left: 35px; text-align: left; }
    .dp-arow .dp-dsel { margin-left: 0; max-width: 100%; }
    .dp-lage-zeile { flex-wrap: wrap; row-gap: 2px; }
    .dp-lage-tag { flex-basis: 100%; }
}