/* myDPL — der Dienstplan (web/school/dpl.ts, Martin 2026-10-08). Aufbau und
   Grund wie myATO und myHub (public/ato.css), mit eigener Farbe. Von Hand
   gepflegt, nicht gebaut. */
.suiteItem.dpl.on { color: var(--dpl, #c48ae0); border-bottom-color: var(--dpl, #c48ae0); }
body.suite-dpl { --dpl: #c48ae0; }
body.suite-dpl .atoArea .wordmark span, body.suite-dpl .atoArea .brand:hover .wordmark span { color: var(--dpl); }
body.suite-dpl .atoArea .wordmark .taper, body.suite-dpl .atoArea .wordmark .taper span { color: inherit; }
body.suite-dpl .atoMenu button.on { color: var(--dpl); border-left-color: var(--dpl); background: var(--dpl-wash, rgba(196, 138, 224, .12)); }
/* Das Raster braucht die Breite (Martin, 2026-10-09: „dass sich der Dienstplan
   ausgeht“): myDPL nutzt das ganze Fenster, die Planungsleiste steht links
   unter dem Menü statt rechts neben dem Raster. */
/* Seit das Raster nur so breit ist wie der Monat, steht myDPL wieder wie die anderen
   Bereiche (1400 px, mittig): Logo und Menü an derselben Stelle (Martin, 2026-10-09) —
   das Menü so breit wie überall (ato.css .atoLayout, 200 px). */
.dplSide { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--suite-h, 0px) + 12px); }
.dplSide:has(#dplDockSlot:empty) { position: static; }
#dplDockSlot:empty { display: none; }
.dplUeTabs { margin: 0 0 12px; }
.dplModal .modalBox.wide { width: min(820px, 94vw); max-width: 820px; }
.dplHinweisListe td { padding: 6px 8px; vertical-align: top; font-size: 13.5px; line-height: 1.45; }
.dplHinweisListe td.d { width: 60px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dplDock .btn.warn { color: #e0a24a; border-color: color-mix(in srgb, #e0a24a 45%, var(--line)); }

.dplBar { flex-wrap: wrap; gap: 10px 14px; }
.dplStation { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 600; }
.dplMonth { display: inline-flex; align-items: center; gap: 6px; }
.dplMonth .name { min-width: 130px; text-align: center; font-weight: 600; font-size: 15px; }
.dplChips { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dplChips button { font: inherit; font-size: 12px; padding: 4px 8px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; }
.dplChips button:last-child { border-right: 0; }
.dplChips button.on { background: var(--dpl-wash-strong, rgba(196, 138, 224, .18)); color: var(--ink); font-weight: 600; }
.dplSoll { font-weight: 700; color: var(--dpl, #c48ae0); font-size: 13px; }
.btn.danger { color: #e0665a; }

.dplScroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid, #1d2128); }
.dplGrid { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
/* Die Linien aus der Schriftfarbe (Martin, 2026-10-08: auf hellem Grund dunkel,
   auf dunklem hell) — sie wechseln mit dem Farbschema. */
.dplGrid { --gridLine: color-mix(in srgb, var(--ink) 22%, transparent); --gridStrong: color-mix(in srgb, var(--ink) 55%, transparent); }
.dplGrid th, .dplGrid td { border: 1px solid var(--gridLine); text-align: center; padding: 2px 3px; white-space: nowrap; }
.dplGrid thead th { background: var(--panel-2); font-weight: 700; color: var(--ink); position: sticky; top: 0; z-index: 2; }
.dplGrid thead th span { font-weight: 400; color: var(--ink-dim); }
.dplGrid th.name, .dplGrid td.name { position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 10px; box-sizing: border-box;
  width: 160px; min-width: 160px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; background: var(--panel-solid, #1d2128); }
/* Kommentar und Besetzung: über beide festen Spalten. */
.dplGrid td.name.lbl { width: 194px; min-width: 194px; max-width: 194px; }
.dplGrid thead th.name { z-index: 3; background: var(--panel-2); }
.dplGrid th.kind, .dplGrid td.kind { position: sticky; left: 160px; z-index: 1; box-sizing: border-box; width: 34px; min-width: 34px; max-width: 34px;
  color: var(--ink-faint); font-size: 10px; background: var(--panel-2); }
.dplGrid thead th.kind { z-index: 3; }
/* Aushilfen: beide Zeilen dezent abgesetzt — auf hellem Grund grauer, auf
   dunklem etwas heller (Martin, 2026-10-08). Als Schicht über dem Hintergrund,
   damit Wochenende und Feiertage darunter sichtbar bleiben. */
.dplGrid tr.aushilfe > td { background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 7%, transparent)); }
.dplGrid td.name.aushilfe { color: var(--ink-dim); }
.dplGrid td[data-staff], .dplGrid td[data-crew-staff] { cursor: pointer; }
.dplGrid td[data-staff]:hover, .dplGrid td[data-crew-staff]:hover { text-decoration: underline; text-decoration-color: var(--dpl, #c48ae0); text-underline-offset: 3px; }
.dplGrid td.z { min-width: 24px; height: 20px; cursor: pointer; }
.dplGrid td.z:hover { outline: 1px solid rgba(79, 159, 217, .7); outline-offset: -1px; }
.dplGrid td.z.uest { font-weight: 700; }
.dplGrid td.z.auto { color: var(--ink-dim); }
/* Ein Dienst auf einer anderen Dienststelle (Aushilfe): eingekreist (Martin, 2026-10-10). */
.dplGrid td.z .woanders { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 2px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 999px; line-height: 1; }
.dplGrid .samstag { background: rgba(79, 159, 217, .14); }
.dplGrid .sonntag, .dplGrid .feiertag { background: rgba(224, 102, 90, .16); color: #d0574b; }
body:not(.invert) .dplGrid .sonntag, body:not(.invert) .dplGrid .feiertag { color: #f0a49b; }
.dplGrid .rand { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink-faint); cursor: default; }
/* Die Auswahl: blau, aber dezent (Martin, 2026-10-08). */
.dplGrid td.z.sel { background: rgba(79, 159, 217, .18); box-shadow: inset 0 0 0 1px rgba(79, 159, 217, .75); }
.dplGrid tr.p1 > * { border-top: 2px solid var(--gridStrong); }
/* FOMOD laut Kalender (Martin, 2026-10-13): unter Plan und ÜSt eine dritte, dünne Zeile — blau an den Tagen, an denen
   die Person FOMOD hat; nur bei dem, der im Monat überhaupt FOMOD hat. Zur Orientierung, nichts zum Eintragen. */
.dplGrid tr.fomodZeile > td { height: 9px; padding: 0; line-height: 9px; font-size: 0; border-top: 0; cursor: default; }
.dplGrid tr.fomodZeile > td.kind { font-size: 8px; line-height: 9px; letter-spacing: .06em; color: #4f9fd9; font-weight: 700; }
.dplGrid tr.fomodZeile > td.fomodZ.an { background: #2f7fd0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.dplGrid tr.fomodZeile > td.fomodZ.rand.an { background: rgba(47, 127, 208, .45); }
.dplGrid tr.mark > td { background-color: rgba(63, 174, 120, .14); }
.dplGrid tr.mark > td.name { font-weight: 700; background: color-mix(in srgb, #3fae78 22%, var(--panel-solid)); }
.dplGrid td.sum { min-width: 50px; background: var(--panel-2); }
.dplGrid td.uestSum { font-weight: 700; color: #d0574b; }
body:not(.invert) .dplGrid td.uestSum { color: #f0a49b; }
.dplGrid td.sum.warn { color: #e0665a; font-weight: 700; }
.dplGrid tr.kommentar > *, .dplGrid tr.besetzung > * { background: var(--panel-2); }
.dplGrid tr.kommentar > * { border-top: 2px solid var(--gridStrong); }
.dplGrid td.lbl { color: var(--ink-faint); font-size: 11px; }
.dplGrid td.klick { cursor: pointer; }
.dplGrid td.klick:hover { outline: 1px solid rgba(79, 159, 217, .7); outline-offset: -1px; }
.dplGrid .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dpl, #c48ae0); }
.dplGrid tr.kommentar b { color: var(--dpl, #c48ae0); font-size: 10px; }
.dplGrid .ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.ampel.gruen { background: #4caf7d; } .ampel.rot { background: #d9534f; } .ampel.violett { background: #9b59b6; }
.dplGrid td.leer { padding: 14px; color: var(--ink-dim); text-align: left; }
.dplLegend { margin-top: 10px; }

/* Die Planungsleiste rechts neben dem Raster (bisher links; Martin 2026-10-08:
   „vorerst mal rechts“). Schmal, beim Scrollen mitlaufend. */
.dplSheet { min-width: 0; }
/* Das Raster so breit wie der Monat samt Randtagen, Plan und ND — nicht breiter
   (Martin, 2026-10-09); der Rahmen und die Aushilfen darunter folgen ihm. Reicht
   das Fenster nicht, scrollt es in sich. */
.dplSheet { max-width: 100%; }
.dplSheet > .dplScroll { width: fit-content; max-width: 100%; }
.dplDock { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid, #1d2128); }
.dplDock h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.dplDock .btn { width: 100%; justify-content: center; }
.dplDock hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.dplAuto { position: relative; }
.dplVarianten { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; width: 250px; background: var(--panel-2, #2a2f37); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 6px; }
.dplVarianten button { display: block; width: 100%; text-align: left; font: inherit; border: 0; background: none; color: var(--ink); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.dplVarianten button:hover { background: var(--dpl-wash-strong, rgba(196, 138, 224, .18)); }
.dplVarianten button b { display: block; font-size: 13px; }
.dplVarianten button span { font-size: 12px; color: var(--ink-dim); }
.dplStand { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.dplState { font-weight: 700; font-size: 13px; color: var(--ink-dim); }
.dplState.frei { color: #4caf7d; }
.dplState.zu { color: #e0665a; }
.dplDock .btn.an { color: #4caf7d; }
.dplDock .btn.zu { color: #e0665a; }
.dplErgebnis { font-size: 12px; color: var(--ink-dim); margin: 2px 0 0; }
.dplRechnet .modalBody h3 { margin: 0 0 8px; }
.dplRechnet .phase { margin: 0 0 10px; color: var(--ink-dim); }
.dplRechnet .bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.dplRechnet .bar span { display: block; height: 100%; width: 0; background: var(--dpl, #c48ae0); transition: width .8s linear; }
@media (max-width: 900px) { .dplSide { position: static; } }
.dplAushilfen { margin-top: 16px; }
.dplHelpers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.dplHelpers .kursChip .hint { margin-left: 4px; }
/* (Martin, 2026-10-20: der Name war unten abgeschnitten — 6 px Innenabstand oben und unten in 25 px Höhe ließen in Chrome/Edge
   11 px für die Schrift, und „background“ nahm den Pfeil aus ato.css weg; Höhe und Pfeil stehen dort.) */
#dplHelperPick, .dplCrewAushilfen .aktAdd select { font: inherit; font-size: 13px; padding: 0 26px 0 8px; border-radius: 6px; border: 1px solid var(--line); background-color: var(--panel-solid); color: var(--ink); min-width: 320px; }

/* Das Menü einer Zelle: links Dienste, rechts Abwesenheiten (wie bisher). */
.dplMenu { position: fixed; z-index: 2000; background: var(--panel-2, #2a2f37); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 6px 0; min-width: 210px; }
.dplMenu .head { font-size: 11.5px; color: var(--ink-dim); padding: 2px 14px 6px; }
.dplMenu .cols { display: flex; }
.dplMenu .cols > div { min-width: 100px; padding: 0 4px; }
.dplMenu .cols > div + div { border-left: 1px solid var(--line); }
.dplMenu .lbl { font-size: 11px; color: var(--ink-faint); padding: 4px 10px; }
.dplMenu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 4px 10px; border: 0; background: none; color: var(--ink); border-radius: 6px; cursor: pointer; }
.dplMenu button:hover { background: var(--dpl-wash-strong, rgba(196, 138, 224, .18)); }
.dplMenu button.leeren { color: #e0665a; }
.dplMenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }

.dplPair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.dplModal .hint { margin: 10px 0 6px; font-size: 12px; }
.dplModal .dplTick { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; }
.dplKommentar { border-bottom: 1px solid var(--line); padding: 6px 0 8px; margin-bottom: 6px; }
.dplKommentar .meta { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.dplKommentar .meta .spacer { flex: 1; }
.dplKommentar .text { white-space: pre-wrap; font-size: 14px; margin-top: 3px; }
.dplModal textarea { width: 100%; box-sizing: border-box; }
/* Der Mitarbeiter, aus dem Raster bearbeitet. */
.dplMaGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dplMaGrid .field select { width: 100%; }
.dplMaTicks { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dplModal .modalHead h2 .hint { font-size: 13px; font-weight: 400; margin-left: 6px; }

.dplZeiten td.pair { white-space: nowrap; }
/* Einstellungen der Dienststelle */
.dplSettings { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 6px; margin: 0 0 14px; max-width: 520px; display: grid; gap: 6px; }
.dplSettings legend { font-weight: 600; padding: 0 6px; }
/* Belastungszeit: je Dienst ein Häkchen. Und in „Mein Dienstplan“ der zweite Dienst des Tages neben dem ersten. */
.dplBelWahl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 6px; } .dplBelWahl label { font-family: var(--mono); font-size: 14px; }
.dplTag .chip.zweit { margin-left: 4px; white-space: nowrap; } .dplTag .chip.zweit small { font-size: 11px; opacity: .75; margin-left: 2px; }
.dplTag .chip.zweit.offen { font-style: italic; opacity: .75; }

.dplSettings label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.dplSettings .hint { margin: 4px 0 0; }
.dplZeiten input { width: 62px; text-align: center; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); }

/* myHUB › Flugeinsatzstellen (2026-10-08): die Reihenfolge je FEST, durch Ziehen. */
.festTable td.drag, .festTable th.drag { width: 20px; padding-right: 0; }
.festTable td.n { width: 34px; color: var(--ink-dim); }
.festTable .dragHandle { cursor: grab; color: var(--ink-faint); font-size: 15px; user-select: none; }
.festTable .dragHandle:hover { color: var(--ink); }
.festTable tr.dragging { opacity: .45; }
.festTable tr.dropBefore td { box-shadow: inset 0 2px 0 var(--hub, #3fae96); }
.festTable tr.dropAfter td { box-shadow: inset 0 -2px 0 var(--hub, #3fae96); }
.festTable td.x { width: 30px; text-align: right; }
[data-fest-pick] { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); min-width: 340px; }
.dplMaTicks .dplTick { margin-top: 0; padding: 3px 0; }

/* Die Konten im Mitarbeiter-Fenster. */
.dplMaKonten { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

/* --- Auswertungen (2026-10-08): Monats- und Jahresübersicht, Zeiten, Mein Dienstplan --- */
.linkish[data-dpl-goto] { margin-left: auto; }
.dplUebersicht { font-size: 13px; font-variant-numeric: tabular-nums; }
.dplUebersicht th, .dplUebersicht td { text-align: center; white-space: nowrap; padding: 5px 8px; }
.dplUebersicht th.name, .dplUebersicht td.name { text-align: left; position: sticky; left: 0; background: var(--panel-solid, #1d2128); min-width: 150px; }
.dplUebersicht tr.gruppe th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 600; }
.dplUebersicht td.stark { font-weight: 700; background: rgba(79, 159, 217, .10); }
.dplUebersicht td.plus { font-weight: 700; }
.dplUebersicht td.plus.pos, .dplKonten b.pos { color: #4caf7d; }
.dplUebersicht td.plus.neg, .dplKonten b.neg { color: #e0665a; }
.dplUebersicht td.w50 { background: rgba(232, 200, 116, .12); }
.dplUebersicht td.w100 { background: rgba(232, 163, 92, .14); }
.dplUebersicht td.w200 { background: rgba(217, 83, 79, .16); color: #e0665a; font-weight: 700; }
.dplUebersicht td.leer { text-align: left; color: var(--ink-dim); }
.dplVonBis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.dplStation.small { font-size: 13px; padding: 5px 8px; font-weight: 500; }
.dplCharts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; margin-top: 16px; }
.dplChart svg { width: 100%; height: auto; display: block; }
.dplChart svg text { fill: var(--ink-dim); font-size: 11px; }
.dplChart svg .gl { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 1; }
.dplChart .legende { display: flex; gap: 14px; justify-content: center; font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.dplChart .legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

.dplTabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 10px; }
.dplTabs button { font: inherit; font-size: 13.5px; padding: 7px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-dim); cursor: pointer; }
.dplTabs button.on { color: var(--ink); border-bottom-color: var(--dpl, #c48ae0); font-weight: 600; }
.dplZt th.kind, .dplZt td.kind { width: 76px; min-width: 76px; max-width: 76px; text-align: left; padding-left: 6px; }
.dplZt td.kind.fett { font-weight: 700; color: var(--ink-dim); }
.dplZt td.w { min-width: 30px; font-size: 11px; }
.dplZt td.w.fett, .dplZt td.sum.fett { font-weight: 700; }
.dplZt td.w.klick { cursor: pointer; }
.dplZt td.w.klick:hover { outline: 1px solid rgba(79, 159, 217, .7); outline-offset: -1px; }
.dplZt td.w.rot { color: #e0665a; font-weight: 700; }
.dplZt td.w.korr { text-decoration: underline dotted; }
.dplZt tbody tr.p1 > * { border-top: 2px solid var(--gridStrong); }
.dplZt td.sum { font-weight: 600; }
.dplZu { color: #e0665a; font-weight: 700; }

.dplMeinHinweis { margin: 0 0 10px; }
.dplMein { display: grid; grid-template-columns: minmax(0, 620px) minmax(240px, 340px); gap: 16px; align-items: start; }
.dplTage { display: flex; flex-direction: column; gap: 3px; }
.dplTag { display: grid; grid-template-columns: 52px 26px minmax(0, 1fr) auto 42px; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 4%, transparent); cursor: pointer; font-size: 13px; }
.dplTag:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.dplTag.samstag { background: rgba(79, 159, 217, .12); }
.dplTag.sonntag { background: rgba(224, 102, 90, .13); }
.dplTag .dat { font-weight: 700; font-variant-numeric: tabular-nums; }
.dplTag .wt { color: var(--ink-dim); font-size: 12px; }
.dplTag .was { min-width: 0; }
.dplTag .chip { display: inline-block; padding: 1px 9px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 14%, transparent); font-weight: 600; font-size: 12px; }
.dplTag .chip.aus { background: none; border: 1px solid var(--line); font-weight: 500; }
.dplTag .fei { color: #e0665a; font-size: 12px; }
/* Die Symbole je Tag (wie bisher): blass = leer, kräftig = eingetragen, daneben der Wert. */
.dplPill { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 11.5px; padding: 3px 5px; border-radius: 8px; border: 0; background: none;
  color: var(--ink); cursor: pointer; opacity: .3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dplPill svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.dplPill.an { opacity: 1; }
.dplPill:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.dplPill:disabled { cursor: default; }
.dplKonten { position: sticky; top: calc(var(--suite-h, 0px) + 12px); }
.dplKonten .kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin-bottom: 8px; }
.dplKonten .kacheln span { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.25; }
.dplKonten .kacheln b { font-size: 16px; white-space: nowrap; }
@media (max-width: 900px) { .dplMein { grid-template-columns: minmax(0, 1fr); } .dplKonten { position: static; } }

/* Eigene Dienstarten (Martin, 2026-10-09). */
.dplArten input { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); width: 100%; box-sizing: border-box; }
.dplArten td { vertical-align: middle; }
/* Für wen (Piloten, TFO, FO): drei Häkchen nebeneinander. */
.dplArten .dplArtFuer { white-space: nowrap; font-size: 12.5px; } .dplArten .dplArtFuer label { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; cursor: pointer; }
.dplArten .dplArtFuer input[type=checkbox] { width: auto; padding: 0; margin: 0; }
.dplArten td:nth-child(1) { width: 80px; } .dplArten td:nth-child(3), .dplArten td:nth-child(4) { width: 90px; }
.dplArten td.x { width: 170px; white-space: nowrap; text-align: right; }
.dplMenu hr + button[data-dienst] { margin-top: 2px; }
/* Die Autofill-Optionen (Martin, 2026-10-09): je Regel eine Zeile — Titel, Auswahl, Erklärung. */
.dplRegel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.dplRegel:first-of-type { border-top: 0; }
.dplRegel label { font-weight: 600; font-size: 13px; }
.dplRegel select { min-width: 190px; }
.dplRegel .hint { grid-column: 1 / -1; margin: 0; }
/* Menü (Martin, 2026-10-10): „Mein Dienstplan“ oben, ein Abstand, dann die Planung;
   die Planungsleiste darunter deutlich abgesetzt. */
.dplMenuGap { height: 18px; }
.dplSide #dplDockSlot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .dplMenuGap { height: 0; width: 100%; } }
/* Monatsabschluss: die vier Formulare als Kacheln, darunter je Mitarbeiter die Zahlen. */
.dplAbKopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.dplAbFormulare { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 18px; }
.dplAbForm { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dplAbForm.alle { border-color: var(--dpl, #c48ae0); }
.dplAbTabelle td, .dplAbTabelle th { text-align: center; white-space: nowrap; }
.dplAbTabelle td:first-child, .dplAbTabelle th:first-child { text-align: left; }
.dplAbTabelle td.leer { color: var(--ink-faint); }

/* Einen Aushilfsdienst weitergeben (2026-10-12): der eingekreiste Dienst lässt sich greifen;
   beim Ziehen zeigen sich die Mitarbeiter, die ihn am selben Tag übernehmen können. */
.dplGrid td.z.ziehbar { cursor: grab; }
.dplGrid td.z.ziehbar:active { cursor: grabbing; }
.dplZieht .dplGrid td.z.zielMoeglich { outline: 2px dashed var(--dpl, #c48ae0); outline-offset: -2px; }
.dplZieht .dplGrid td.z.zielAn { background: var(--dpl-wash); outline-style: solid; }

/* Die Dienstpläne der FLIR OP und der FO, unter dem der Piloten (2026-10-13): ohne Stunden. */
.dplCrewPlan { margin-top: 26px; }
.dplCrewHead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dplCrewHead h3 { margin: 0; font-size: 15px; }
.dplCrewGrid { border-collapse: collapse; font-size: 12.5px; }
.dplCrewGrid th, .dplCrewGrid td { border: 1px solid var(--line); padding: 0; height: 26px; min-width: 26px; text-align: center; }
.dplCrewGrid th { font-weight: 600; color: var(--ink-dim); background: var(--panel-2); }
.dplCrewGrid th.wt { font-weight: 400; font-size: 10.5px; color: var(--ink-faint); height: 18px; }
.dplCrewGrid .name { text-align: left; padding: 0 10px; white-space: nowrap; min-width: 11em; background: var(--panel-2); color: var(--ink); position: sticky; left: 0; }
.dplCrewGrid td.c { cursor: pointer; font-family: var(--mono); user-select: none; }
.dplCrewGrid.fest td.c { cursor: default; }
.dplCrewGrid:not(.fest) td.c:hover { box-shadow: inset 0 0 0 1px var(--dpl, #c48ae0); }
.dplCrewGrid td.c.dienst { font-weight: 700; color: var(--ink); background-color: var(--dpl-wash); }
.dplCrewGrid td.c.text { color: var(--ink-dim); font-size: 11px; }
.dplCrewGrid .samstag { background-color: rgba(79, 159, 217, .12); }
.dplCrewGrid .sonntag, .dplCrewGrid .feiertag { background-color: rgba(227, 168, 58, .16); }
.dplCrewGrid td.c input { width: 100%; height: 24px; box-sizing: border-box; border: 0; padding: 0 2px; text-align: center; font: inherit; font-size: 11px; text-transform: uppercase; background: var(--panel-3); color: var(--ink); outline: 1px solid var(--dpl, #c48ae0); }
.dplCrewPop { position: absolute; z-index: 90; display: flex; gap: 4px; padding: 6px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.dplCrewPop button { min-width: 30px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; cursor: pointer; }
.dplCrewPop button:hover, .dplCrewPop button:focus-visible { border-color: var(--dpl, #c48ae0); outline: none; }
.dplPlaner { padding: 0 4px; }
/* TFO/FO auf mehreren Flugeinsatzstellen (2026-10-10): der Tag ist auf einer anderen vergeben — hier grau. */
.dplCrewGrid td.c.fremd, .dplCrewGrid td.c.fremd.samstag, .dplCrewGrid td.c.fremd.sonntag, .dplCrewGrid td.c.fremd.feiertag {
  background: repeating-linear-gradient(135deg, rgba(139, 149, 156, .30) 0 4px, rgba(139, 149, 156, .16) 4px 8px); cursor: not-allowed; }
.dplCrewGrid:not(.fest) td.c.fremd:hover { box-shadow: none; }
.dplCrewGrid .name.gast { font-style: italic; }
/* Dienstpläne TFO/FO: mehrere Felder einer Spalte gewählt (2026-10-10) — Enter trägt für alle ein. */
.dplCrewGrid td.c.sel { box-shadow: inset 0 0 0 2px var(--dpl, #c48ae0); background-color: var(--dpl-wash); }
.dplCrewAlle { align-items: center; gap: 8px; padding: 7px 9px; }
.dplCrewAlle input { width: 5.2em; height: 28px; box-sizing: border-box; border-radius: 7px; border: 1px solid var(--dpl, #c48ae0); background: var(--panel-3); color: var(--ink); font: inherit; font-family: var(--mono); font-weight: 700; text-align: center; text-transform: uppercase; outline: none; }
.dplCrewAlle .hint { white-space: nowrap; }
.dplCrewTip { margin: 6px 0 0; }

/* Hinweise, die früher kommen als die des Browsers (Martin, 2026-10-11): an den Punkten der Besetzung, an den Häkchen. */
.dplTip { position: fixed; z-index: 3000; max-width: 340px; padding: 6px 10px; border-radius: 7px; background: #11161b; color: #f1f3f5; font-size: 12.5px; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); pointer-events: none; }
/* Die Zeile „Mindestbesetzung“ unter den Plänen TFO und FO: ein kleines Häkchen, wo sie gegeben ist. */
.dplCrewGrid tfoot tr.dplCrewOk td { border-top: 2px solid var(--line); cursor: default; }
.dplCrewGrid tfoot td.name { font-size: 11.5px; color: var(--ink-dim); font-weight: 600; }
.dplCrewGrid tfoot td.ok { text-align: center; font-size: 12px; font-weight: 700; color: #4caf7d; height: 20px; }
.dplCrewGrid tfoot td.ok.frei { color: var(--ink-faint); font-weight: 400; }
.dplMenu.uest .lbl { color: var(--danger, #e5484d); }
/* Die festen Dienste einer Dienststelle mit eigenen Standarddiensten (SPOC), über den Einstellungen. */
.dplFesteDienste { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; background: var(--panel-2, rgba(127, 127, 127, .08)); font-size: 13px; line-height: 1.5; }
/* Ein vorgeschlagener Aushilfsdienst (Martin, 2026-10-11): kursiv, bis die andere Dienststelle ihn bestätigt. */
.dplGrid td.z .vorschlag { font-style: italic; font-weight: 500; opacity: .8; border-bottom: 1px dashed currentColor; }
/* Ein zweiter Dienst am selben Tag (Martin, 2026-10-13): das Kästchen ist von links unten nach rechts oben geteilt —
   links oben der erste Eintrag, rechts unten der zweite; kursiv, solange er nicht bestätigt ist. */
.dplGrid td.z.zweit { position: relative; padding: 0; background-image: linear-gradient(to bottom right, transparent calc(50% - .5px), color-mix(in srgb, currentColor 60%, transparent) calc(50% - .5px), color-mix(in srgb, currentColor 60%, transparent) calc(50% + .5px), transparent calc(50% + .5px)); }
.dplGrid td.z .zweitZelle { display: block; min-height: 1.9em; font-size: .62em; line-height: 1; }
.dplGrid td.z .zweitZelle .zwOben { position: absolute; left: 1px; top: 1px; }
.dplGrid td.z .zweitZelle .zwUnten { position: absolute; right: 1px; bottom: 1px; font-weight: 700; }
.dplGrid td.z .zweitZelle .zwUnten.offen { font-style: italic; font-weight: 500; opacity: .8; }
.dplGrid td.z .zweitZelle .woanders { min-width: 0; height: auto; border-width: 1px; padding: 0 1px; }
.dplMenuZweit { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .dplMenuZweit button { width: 100%; }

.dplMenu .dplMenuZiel { border-top: 1px solid var(--line); margin-top: 6px; padding: 8px 10px 4px; }
.dplMenu .dplMenuZiel select { width: 100%; font-size: 12.5px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.dplMenu .dplMenuZiel .hint { max-width: 190px; margin: 6px 0 0; font-size: 11.5px; line-height: 1.35; }
.dplMenu.vorschlag .lbl, .dplMenu.vorschlag [data-dienst] { font-style: italic; }
.dplMenu.vorschlag .head { max-width: 240px; white-space: normal; line-height: 1.35; }
/* Aushilfen in den Plänen der TFO und FO (Martin, 2026-10-12): für einen Monat, mit ihrer Dienststelle am Namen. */
.dplCrewGrid tr.aushilfe td.name { font-style: italic; }
.dplCrewHelferWeg { margin-left: 6px; border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 11px; padding: 0 2px; }
.dplCrewHelferWeg:hover { color: var(--danger, #e5484d); }
.dplCrewAushilfe { margin-top: 8px; flex-wrap: wrap; }
.dplCrewAushilfe .hint { flex: 1 1 260px; }
/* Die Plusstunden im Raster (Martin, 2026-10-12; die Spalte des alten Programms): oben der Stand nach diesem Monat, unten der bis Ende Vormonat. */
.dplGrid th.plusKopf { white-space: nowrap; }
.dplGrid td.sum.plus { font-weight: 700; }
.dplGrid td.sum.plusVm { font-weight: 400; }
.dplGrid td.sum.plus.pos, .dplGrid td.sum.plusVm.pos { color: #2e8b57; }
.dplGrid td.sum.plus.neg, .dplGrid td.sum.plusVm.neg { color: #e0665a; }

/* Die Reihenfolge im Dienstplan ziehen (Martin, 2026-10-11): der Griff vor dem Namen. */
.dplGrid .dplZug { display: inline-block; margin: 0 5px 0 -5px; cursor: grab; color: var(--ink-faint); font-size: 11px; line-height: 11px; height: 11px; user-select: none; vertical-align: middle; }
.dplGrid .dplZug:hover { color: var(--ink); }
.dplGrid tr.dragging > td { opacity: .45; }
.dplGrid tr.dropBefore > td { box-shadow: inset 0 3px 0 var(--dpl, #c48ae0); }
.dplGrid tr.dropAfter > td { box-shadow: inset 0 -3px 0 var(--dpl, #c48ae0); }
.dplNurLesen .dplZug { display: none; }
/* Stammpersonal (TFO, FO) im Dienstplan der Piloten: wie sie, mit einem Zeichen am Namen. */
.dplGrid tr.stamm > td.name .hint { font-size: 10px; letter-spacing: .04em; border: 1px solid var(--gridLine); border-radius: 4px; padding: 0 3px; margin-left: 3px; }
/* Die Dienstpläne TFO und FO in den Farben und der Schrift des Pilotenplans (Martin, 2026-10-11) — und klein geschrieben. */
.dplCrewGrid { --gridLine: color-mix(in srgb, var(--ink) 22%, transparent); --gridStrong: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
.dplCrewGrid th, .dplCrewGrid td { border: 1px solid var(--gridLine); height: 22px; min-width: 24px; }
.dplCrewGrid thead th { font-weight: 700; color: var(--ink); }
.dplCrewGrid thead th.wt { font-weight: 400; color: var(--ink-dim); font-size: 12px; height: 18px; }
.dplCrewGrid .name { background: var(--panel-solid, #1d2128); width: 194px; min-width: 194px; max-width: 194px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.dplCrewGrid thead .name { background: var(--panel-2); }
.dplCrewGrid td.c { font-family: inherit; }
.dplCrewGrid td.c.dienst { font-weight: 400; color: inherit; background-color: transparent; }
.dplCrewGrid td.c.text { color: inherit; font-size: inherit; }
.dplCrewGrid .samstag, .dplCrewGrid td.c.dienst.samstag { background-color: rgba(79, 159, 217, .14); }
.dplCrewGrid .sonntag, .dplCrewGrid .feiertag, .dplCrewGrid td.c.dienst.sonntag, .dplCrewGrid td.c.dienst.feiertag { background-color: rgba(224, 102, 90, .16); color: #d0574b; }
body:not(.invert) .dplCrewGrid .sonntag, body:not(.invert) .dplCrewGrid .feiertag { color: #f0a49b; }
.dplCrewGrid:not(.fest) td.c[data-crew]:hover { box-shadow: none; outline: 1px solid rgba(79, 159, 217, .7); outline-offset: -1px; }
.dplCrewGrid td.c.sel { background-color: rgba(79, 159, 217, .18); box-shadow: inset 0 0 0 1px rgba(79, 159, 217, .75); }
.dplCrewGrid td.c input { text-transform: lowercase; height: 20px; font-size: 12px; }
.dplCrewGrid tr.aushilfe > td { background-image: linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 7%, transparent)); }
.dplCrewGrid tr.aushilfe > td.name { color: var(--ink-dim); }
.dplCrewGrid td.c .vorschlag { font-style: italic; font-weight: 500; opacity: .8; border-bottom: 1px dashed currentColor; }
/* Stammpersonal im Plan TFO/FO: zum Ansehen — eingetragen wird oben. */
.dplCrewGrid td.c.stamm { cursor: default; }
.dplCrewGrid tr.stamm > td.name .hint { font-size: 10px; border: 1px solid var(--gridLine); border-radius: 4px; padding: 0 3px; margin-left: 3px; }
.dplCrewAushilfen { margin-top: 12px; }

/* Die Pläne TFO und FO in derselben Tabelle wie der Plan der Piloten (Martin, 2026-10-11: „genau gleich aussehen“) —
   .dplGrid mit Kopf, Plan- und ÜSt-Zeile, Summenspalten, Kommentar- und Besetzungszeile. Nur was dort anders ist: */
.dplCrewPlan .dplSheet { margin-top: 0; }
.dplCrewRaster td.z.fremd, .dplCrewRaster td.z.fremd.samstag, .dplCrewRaster td.z.fremd.sonntag, .dplCrewRaster td.z.fremd.feiertag {
  background: repeating-linear-gradient(135deg, rgba(139, 149, 156, .30) 0 4px, rgba(139, 149, 156, .16) 4px 8px); cursor: not-allowed; }
.dplCrewRaster td.z.fremd:hover, .dplCrewRaster td.z.nurLesen:hover, .dplCrewRaster.fest td.z:hover, .dplCrewRaster td.z:not([data-crew]):not([data-code]):hover { outline: none; }
.dplCrewRaster td.z.nurLesen, .dplCrewRaster.fest td.z, .dplCrewRaster td.z:not([data-crew]):not([data-code]) { cursor: default; }
.dplCrewRaster td.z input { width: 100%; min-width: 22px; height: 18px; box-sizing: border-box; border: 0; padding: 0 1px; text-align: center; font: inherit; text-transform: lowercase;
  background: var(--panel-3); color: var(--ink); outline: 1px solid rgba(79, 159, 217, .75); }
.dplCrewRaster td.name.gast { font-style: italic; }
.dplCrewRaster tr.kommentar td:not(.klick):not(.rand) { cursor: default; }
.dplGrid tr.stamm > td.name .hint { font-size: 10px; letter-spacing: .04em; border: 1px solid var(--gridLine); border-radius: 4px; padding: 0 3px; margin-left: 3px; }
/* Kommentar- und Besetzungszeile in allen Plänen gleich hoch (mit und ohne Punkt). */
.dplGrid tr.kommentar > td, .dplGrid tr.besetzung > td { height: 20px; box-sizing: border-box; }
.dplGrid thead th.sum { box-sizing: border-box; }

/* --- myDPL › Formular: Urlaub, Pflegefreistellung, Sonderurlaub (Martin, 2026-10-12) --- */
.faTabs { margin: 0 0 12px; flex-wrap: wrap; }
.faPanel { margin-bottom: 14px; }
.faPanel h3 .hint { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.faRaster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin: 12px 0 0; align-items: start; }
.faRaster.breit { grid-template-columns: 1fr; }
/* Die Zahlenfelder in einer Linie (Martin, 2026-10-12): unten bündig — eine Beschriftung über zwei Zeilen schiebt ihr Feld
   nicht tiefer als die anderen; und der Rest ist so hoch wie ein Feld. */
.faRaster.faUnten { align-items: end; }
.faRaster.faUnten .faRest { box-sizing: border-box; min-height: 0; padding-top: 7px; padding-bottom: 7px; line-height: 18px; }
.faRaster .field { margin: 0; min-width: 0; }
.faRaster .field .hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; }
.faRaster input, .faRaster select, .faRaster textarea, .faPanel > .field select { width: 100%; box-sizing: border-box; }
.faRaster input:disabled { opacity: .75; cursor: not-allowed; }
.faPanel > .field { margin: 12px 0 0; } .faPanel > .field .hint { display: block; margin-top: 4px; font-size: 11.5px; }
input.faZahl { text-align: right; font-variant-numeric: tabular-nums; }
.faTabelle input.faZahl { width: 7em; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 8px; font: inherit; }
.faTabelle td, .faTabelle th { white-space: nowrap; } .faTabelle td .hint { display: block; font-size: 11px; }
.faTabelle tbody tr { cursor: default; } .faTabelle tbody tr:hover { background: none; }
.faTabelle tr.faKommt td { opacity: .7; }
.faMinus, output.faMinus { color: #ef4444; }
.faRest { display: block; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 7px; font-weight: 700; text-align: right; min-height: 1.3em; font-variant-numeric: tabular-nums; }
.faTeile { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.faKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 14px 0 0; }
.faListe td.x { text-align: right; white-space: nowrap; } .faListe .faWeg { color: var(--ink-dim); margin-left: 10px; }
.faListe tbody tr { cursor: default; }
/* Urlaubsansuchen (Martin, 2026-10-12): die Zahlen rechnen sich von selbst — sie stehen da wie eine Rechnung, nicht wie Felder. */
.faAuto input:disabled { opacity: 1; border-style: dashed; background: transparent; color: var(--ink); -webkit-text-fill-color: var(--ink); cursor: default; }
.faPanel input[type="date"]:disabled { opacity: .8; cursor: default; }
/* Der Weg eines Ansuchens (Martin, 2026-10-12): noch nicht gesendet, bei der Leitung, genehmigt und beim Referat. */
.faStand { font-size: 12.5px; white-space: nowrap; } .faStand.leer { color: var(--ink-faint); } .faStand.ok { color: var(--ok, #4fb36a); white-space: normal; }
.faKontingent { margin: 0 0 12px; } .faKontingent b { color: var(--ink); }
/* Mein Dienstplan: eine Schulung aus myCLD am Tag (Martin, 2026-10-12). */
/* Was sich am Tag von selbst ergibt (Gefahrenzulage, Flugzeit, Belastungszeit): nur zum Lesen, klein. */
.dplWerte { display: inline-flex; gap: 10px; margin-left: auto; font-size: 12px; color: var(--ink-dim, var(--ink)); white-space: nowrap; }
.dplWert i { font-style: normal; font-size: 10px; letter-spacing: .05em; color: var(--ink-faint); }
/* Ein Eintrag im Kalender (myCLD) am Tag: ein kleiner Balken — eine Schulung (sc) gefüllt, ein Termin als Rahmen. */
.kalZeichen { display: inline-block; width: 22px; height: 7px; margin-left: 8px; border-radius: 4px; border: 1.5px solid #8f9cf0; vertical-align: middle; cursor: help; }
.kalZeichen.sc { background: #8f9cf0; }
/* Ein Eintrag über mehrere Tage in „Mein Dienstplan“ (Martin, 2026-10-13): ein senkrechter Balken links neben seinen Tagen,
   die Schrift steht senkrecht. Je Bahn 26 px; wo er über den Monat hinausgeht, ist das Ende offen. */
.dplTage.mitBalken { position: relative; padding-left: calc(var(--bn, 0) * 26px + var(--kn, 0) * 18px); }
/* ein reserviertes Dienst-KFZ (Mein Dienstplan, 2026-10-15): ein dünner Strich in der Farbe des Wagens, daneben die Marke */
.kfzStrich { position: absolute; left: 0; width: 16px; display: flex; gap: 2px; cursor: help; }
.kfzStrich > i { flex: 0 0 3px; border-radius: 2px; background: var(--kf); margin: 3px 0; }
.kfzStrich.vorher > i { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .kfzStrich.weiter > i { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.kfzStrich > span { writing-mode: vertical-rl; font-size: 9.5px; font-weight: 700; line-height: 1; color: var(--kf); padding-top: 4px; max-height: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .03em; }
.kfzStrich:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 3px; }
.kalBalken { position: absolute; left: 0; width: 22px; box-sizing: border-box; border-radius: 6px; border: 1.5px solid #8f9cf0; background: color-mix(in srgb, #8f9cf0 14%, transparent); color: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: help; }
.kalBalken.sc { background: #8f9cf0; color: #10131f; }
.kalBalken > span { writing-mode: vertical-rl; max-height: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
.kalBalken.vorher { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; } .kalBalken.weiter { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-style: dashed; }
.kalBalken:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* … und ein genehmigter Flugauftrag an einem Diensttag: dasselbe Zeichen in der Farbe von myELIS. */
.kalZeichen.fa { border-color: #e39b3a; background: #e39b3a; width: 14px; border-radius: 50%; height: 10px; }
.dplTag .chip.schulung { background: rgba(143, 156, 240, .22); border: 1px solid #8f9cf0; color: var(--ink); margin-left: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Am Handy eine Woche statt des Monats (web/school/dpl.ts sicht): die Wahl der Woche neben dem Monat. */
.dplWoche { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (max-width: 600px) { .dplGrid th.name, .dplGrid td.name { min-width: 110px; max-width: 130px; } .dplGrid th.kind, .dplGrid td.kind { left: 110px; } .dplChips { display: none; } }
/* Am Handy und schmalen Tablet: zuerst Menü und Dienstplan, die Planungsleiste darunter (nicht davor). */
@media (max-width: 860px) {
  .dplArea .atoLayout > .dplSide { display: contents; }
  .dplArea .atoLayout > .dplSide > #dplDockSlot { order: 3; margin-top: 0; }
  .dplArea .atoLayout > .dplSide > #dplDockSlot:empty { display: none; }
}
@media (max-width: 600px) { .dplTabs { overflow-x: auto; scrollbar-width: none; } .dplTabs > * { flex: none; } }

/* Heute (Martin, 2026-10-14): die ganze Spalte leicht eingefärbt, mit feinem Rahmen links und rechts — in jedem Raster
   (Piloten, TFO, FO, Zeiten). Als Schatten innen, damit Wochenende/Feiertag und die Farben der Dienste darunter bleiben. */
.dplGrid .heute { box-shadow: inset 1px 0 0 var(--dpl-heute-rand), inset -1px 0 0 var(--dpl-heute-rand), inset 0 0 0 999px var(--dpl-heute); }
.dplGrid thead th.heute { box-shadow: inset 1px 0 0 var(--dpl-heute-rand), inset -1px 0 0 var(--dpl-heute-rand), inset 0 3px 0 var(--dpl-heute-rand), inset 0 0 0 999px var(--dpl-heute); color: var(--ink); font-weight: 800; }
.dplGrid { --dpl-heute: rgba(240, 196, 64, .13); --dpl-heute-rand: rgba(240, 196, 64, .75); }

/* myDPL zum Lesen (Martin, 2026-10-15; src/dplSicht.ts): ein Plan, der noch nicht fertig gestellt ist — nur Wünsche und
   Urlaub; und die Fertigstellung der Pläne TFO und FO. */
.dplSichtHinweis { margin: 0 0 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--dpl, #b085d6); color: var(--ink); background: color-mix(in srgb, var(--dpl, #b085d6) 10%, transparent); font-size: 13px; max-width: 900px; }
.dplGesperrt { margin-top: 14px; }
.dplFertig { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid #4fb36a; color: #4fb36a; font-size: 12px; white-space: nowrap; }
/* Mein Dienstplan: mehrere Tage wählen (Martin, 2026-10-19 — Shift+Klick, Strg/⌘+Klick) und das Menü dazu. */
.dplTag.gewaehlt { background: color-mix(in srgb, var(--dpl, #c48ae0) 24%, transparent); box-shadow: inset 0 0 0 1.5px var(--dpl, #c48ae0); }
.dplTag.gewaehlt:hover { background: color-mix(in srgb, var(--dpl, #c48ae0) 30%, transparent); }
.dplTage .dplTag { user-select: none; -webkit-user-select: none; }
.dplTagMenu { max-height: calc(100vh - 16px); overflow-y: auto; max-width: calc(100vw - 16px); }
.dplTagMenu button small { color: var(--ink-faint); font-size: 11px; margin-left: 4px; }
.dplTagMenu .head.kfzKopf { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); font-size: 12.5px; max-width: 300px; padding-top: 4px; }
.dplTagMenu .head.kfzKopf i { flex: 0 0 4px; align-self: stretch; border-radius: 2px; background: var(--kf); }
.kfzStrich[data-kfz-id] { cursor: pointer; }
/* Ein Dienst-KFZ reservieren, im Browser: je Wagen frei/reserviert (mit wer, wann) und die Belegung über zwei Wochen. */
.kfzPlanNav { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; font-size: 12.5px; color: var(--ink-dim); }
.kfzPlanNav span { flex: 1; text-align: center; }
.kfzWagenListe { display: flex; flex-direction: column; gap: 6px; }
.kfzStation { font-size: 11.5px; color: var(--ink-faint); margin: 6px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.kfzWagen, .kfzPlanKopf { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 9px; border: 1.5px solid var(--line); }
.kfzPlanKopf { border-color: transparent; padding-top: 0; padding-bottom: 0; }
.kfzPlanKopf > span:first-child { display: none; }
.kfzWagen { cursor: pointer; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.kfzWagen:hover { border-color: color-mix(in srgb, var(--kf) 60%, var(--line)); }
.kfzWagen.on { border-color: var(--kf); background: color-mix(in srgb, var(--kf) 12%, transparent); }
.kfzWagen:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.kfzWagen.belegt { cursor: default; }
.kfzWagen.belegt .name b, .kfzWagen.belegt .name .kz { opacity: .6; }
.kfzWagen .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.kfzWagen .name i { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--kf); align-self: center; }
.kfzWagen .name .kz { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink-dim); }
.kfzWagen .name .st { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #4fb36a; }
.kfzWagen.belegt .name .st { color: #e0665a; }
.kfzWagen .name small { flex-basis: 100%; font-size: 11.5px; color: #e0665a; }
.kfzWagen.on .name .st::before { content: '✓ '; }
/* nur in der Belegungsleiste — ein allgemeines .plan zerlegte die Dienstzeit der DV (Kappe „Plandienst“ unter den Feldern, 2026-10-21) */
.kfzWagen .plan, .kfzPlanKopf .plan { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 2px; }
.kfzWagen .plan > span { height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); cursor: pointer; position: relative; }
.kfzWagen .plan > span.we { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.kfzWagen .plan > span.ganz { background: var(--kf); }
.kfzWagen .plan > span.teil { background: linear-gradient(to top, var(--kf) 50%, color-mix(in srgb, var(--ink) 8%, transparent) 50%); }
.kfzWagen .plan > span.ganz.mein { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 5px), var(--kf); }
.kfzWagen .plan > span.teil.mein { background: linear-gradient(to top, transparent 50%, color-mix(in srgb, var(--ink) 8%, transparent) 50%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .45) 0 2px, transparent 2px 5px), var(--kf); }
.kfzWagen .plan > span.imZeitraum { box-shadow: 0 0 0 1.5px var(--ink); }
.kfzWagen .plan > span:hover { filter: brightness(1.25); }
.kfzPlanKopf .plan > span { text-align: center; font-size: 10.5px; line-height: 1.15; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.kfzPlanKopf .plan > span small { display: block; font-size: 9px; color: var(--ink-faint); }
.kfzPlanKopf .plan > span.we { color: #e0665a; }
.kfzPlanKopf .plan > span.imZeitraum { color: var(--ink); font-weight: 700; }
#kfzZVon::placeholder, #kfzZBis::placeholder { color: var(--ink-faint); font-style: italic; }
/* Versetzt mit Stichtag (2026-10-24): die Tage der anderen Dienststelle — grau, nicht anklickbar */
.dplGrid td.z.versetzt, .dplGrid td.z.versetzt.samstag, .dplGrid td.z.versetzt.sonntag, .dplGrid td.z.versetzt.feiertag {
  background: repeating-linear-gradient(135deg, rgba(139, 149, 156, .30) 0 4px, rgba(139, 149, 156, .16) 4px 8px); color: var(--ink-faint); cursor: not-allowed; }
.dplGrid td.z.versetzt:hover { outline: none; box-shadow: none; }
/* Mein Dienstplan: die Crews des Tages im Tagesmenü (2026-10-24) */
.dplTagCrews { padding: 4px 10px 2px; max-width: 340px; font-size: 13px; line-height: 1.45; }
.dplTagCrews .tcKopf { font-weight: 600; margin-bottom: 2px; }
.dplTagCrews .lbl { margin-top: 6px; color: var(--ink-dim); font-size: 12px; }
.dplTagCrews .tcCrew { margin: 3px 0; }
.dplTagCrews small { color: var(--ink-faint); }
.dplTagCrews .ich { font-weight: 700; }
.dplTagCrews .tcOhne { margin-top: 2px; }
/* Die Landemeldung im Monatsabschluss (2026-10-24): die Summenzeile hebt sich ab, die Knöpfe stehen in einer Reihe. */
.dplLmTabelle tr.summe td { border-top: 2px solid var(--line); font-weight: 600; }
.dplLmTabelle td.mono { text-align: right; }
.dplLmAktionen { gap: 10px; flex-wrap: wrap; align-items: center; }

/* Beschreibung Autofill (Martin, 2026-10-26): myDPL › Dienstplan › Beschreibung Autofill — Abschnitte zum Lesen. */
.dplDoku { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0 0 14px; max-width: 980px; }
.dplDoku h3 { margin: 0 0 8px; font-size: 15px; }
.dplDoku p, .dplDoku li { font-size: 13.5px; line-height: 1.55; }
.dplDoku p { margin: 6px 0; }
.dplDoku ul, .dplDoku ol { margin: 6px 0; padding-left: 20px; }
.dplDoku li { margin: 3px 0; }
.dplDoku .linkish { font: inherit; }
.dplDokuTab td:first-child { font-weight: 600; white-space: normal; min-width: 150px; }
.dplDokuTab td { vertical-align: top; font-size: 13px; line-height: 1.5; }
.dplDokuTab td:not(:first-child) { white-space: normal; }
.dplDokuTab th { text-align: left; }
.dplDokuAbw { color: var(--ink-dim); font-size: 12px; font-weight: 400; }
.dplDokuFolge span { color: var(--ink-dim); font-size: 12px; }
@media (max-width: 600px) { .dplDoku { padding: 12px 14px; } .dplDokuTab td:first-child { min-width: 110px; } }