/* Crew-Dienstplan: Tag-/Monatsansicht */
.crew-toolbar-right { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.crew-toolbar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crew-toolbar-settings { padding-left: 0; }
.crew-settings-button { margin-left: auto; }

.crew-modeswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.crew-modeswitch .crew-mode { border: 0; background: var(--surface); color: var(--muted); padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.crew-modeswitch .crew-mode + .crew-mode { border-left: 1px solid var(--line); }
.crew-modeswitch .crew-mode.active { background: var(--accent); color: #fff; }

.crew-nav { display: inline-flex; align-items: center; gap: 8px; }
.crew-nav .crew-period { min-width: 190px; text-align: center; color: var(--ink); }
.crew-nav .ghost-button { padding: 6px 12px; }
.crew-nav .ghost-button.mini { padding: 4px 10px; font-size: 12px; }

/* Monatsansicht: ganzer Zeitraum als Streifen, eine Woche sichtbar, horizontal scrollbar */
.crew-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.crew-strip .crew-daycol { flex: 0 0 calc((100% - 60px) / 7); scroll-snap-align: start; }
.crew-scrollhint { text-align: center; color: var(--muted); font-size: 11px; margin: 6px 0 0; }

/* Zeitraum-Auswahl in der Toolbar */
.crew-rangepick { display: inline-flex; gap: 8px; align-items: center; }
.crew-range-label { font-size: 13px; color: var(--muted); }
.crew-overtime { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.crew-overtime input { width: 56px; font: inherit; padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-align: right; }
.crew-daycount { font-size: 12px; color: var(--muted); margin-left: 8px; }
.crew-day .dayplan-wrap { overflow-x: auto; }
.crew-dayplan { min-width: 760px; }
/* Tagesansicht: Besetzungs-Zeile (Kopfzahl je Zeitfenster) */
.crew-cov-row .dp-label { color: var(--ink); font-weight: 600; }
.crew-cov-cells { display: flex; width: 100%; min-height: 24px; }
.crew-cov-cell { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink); border-right: 1px solid var(--line); background: color-mix(in srgb, var(--accent) calc(var(--a, 0) * 100%), transparent); }
.crew-cov-cell:last-child { border-right: 0; }
/* Differenz zum Musterplan-Soll je Zeitfenster */
.crew-diff-row .dp-label { color: var(--ink); font-weight: 600; }
.crew-diff-row .crew-cov-cells { min-height: 22px; }
.crew-diff-cell { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; border-right: 1px solid var(--line); }
.crew-diff-cell:last-child { border-right: 0; }
.crew-diff-cell.neg { color: #8f251d; background: color-mix(in srgb, var(--bad, #d95548) 35%, transparent); font-weight: 700; }
.crew-diff-cell.pos { color: #6f5100; background: color-mix(in srgb, #f2c94c 48%, transparent); font-weight: 700; }
.crew-diff-cell.digits-one { font-size: 11px; }
.crew-diff-cell.digits-two { font-size: 9px; letter-spacing: -0.02em; }
.crew-diff-cell.digits-three { font-size: 7px; letter-spacing: -0.04em; }
.crew-diff-cell.zero { color: var(--muted); }
/* Stationen-Matrix */
.crew-st-wrap { overflow: auto; max-height: 78vh; border: 1px solid var(--line); border-radius: 12px; }
.crew-st-table { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; }
.crew-st-table th, .crew-st-table td { border-bottom: 1px solid var(--line); }
.crew-st-corner { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface); text-align: left; padding: 10px 12px; min-width: 200px; }
.crew-st-col { position: sticky; top: 0; z-index: 2; background: var(--surface-soft); color: var(--ink); padding: 8px 10px; white-space: nowrap; font-weight: 600; border-left: 1px solid var(--line); }
.crew-st-name { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 6px 12px; white-space: nowrap; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 200px; }
.crew-st-rowact { display: inline-flex; gap: 4px; }
.crew-st-rowact .ghost-button.mini { padding: 2px 7px; font-size: 11px; }
.crew-st-cell { text-align: center; padding: 4px 10px; border-left: 1px solid var(--line); }
.crew-st-cell input { width: 17px; height: 17px; cursor: pointer; }
.crew-st-table tbody tr:hover .crew-st-name,
.crew-st-table tbody tr:hover .crew-st-cell { background: var(--accent-soft); }

/* Tagesnavigation in der Tagesansicht */
.crew-daynav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crew-daynav .crew-period { min-width: 220px; text-align: center; color: var(--ink); }
.crew-day-wd { font-weight: 600; color: var(--ink); }
.crew-day-pick { display: inline-flex; }
.crew-daycol { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
.crew-daycol.is-weekend { background: var(--weekend-bg, var(--surface-soft)); }
.crew-daycol.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.crew-dayhead { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.crew-dayhead .crew-dow { font-weight: 700; color: var(--ink); }
.crew-dayhead .crew-date { font-size: 12px; color: var(--muted); }
.crew-dayhead-values { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 1px; }
.crew-day-productivity { border-radius: 999px; padding: 1px 5px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; white-space: nowrap; }
.crew-day-productivity.under { background: color-mix(in srgb, var(--bad, #b24a3a) 13%, var(--surface)); color: var(--bad, #b24a3a); }
.crew-day-productivity.over { background: color-mix(in srgb, var(--warn, #d99724) 15%, var(--surface)); color: #9a6418; }
.crew-day-productivity.ok { background: color-mix(in srgb, var(--good, #0f9d8c) 13%, var(--surface)); color: var(--good, #0f9d8c); }
.crew-daybody { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.crew-noshift { color: var(--muted); font-size: 13px; text-align: center; padding: 10px 0; }
.crew-add-manual-shift { display: grid; width: 100%; min-height: 34px; place-items: center; border: 1px dashed var(--accent); border-radius: 7px; background: color-mix(in srgb, var(--accent-soft) 48%, transparent); color: var(--accent); font-size: 22px; font-weight: 500; line-height: 1; cursor: pointer; }
.crew-add-manual-shift:hover { border-style: solid; background: var(--accent-soft); }
.crew-add-manual-shift:disabled { border-color: var(--line); background: var(--surface-soft); color: var(--muted); cursor: not-allowed; opacity: .55; }
.crew-manual-shift-modal { display: grid; gap: 18px; }
.crew-manual-shift-modal > p { margin: 0; color: var(--muted); }
.crew-manual-shift-modal > .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.crew-manual-shift-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; --crew-field-h: 38px; }
.crew-manual-shift-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
/* Beginn, Ende und Station sind drei verschiedene Bausteine (timeField, timeField, xsel)
   und bringen eigene Maße mit – 38 px hoch bei fester Breite 92 px gegen 34 px in voller
   Breite. Im Raster sahen sie dadurch unterschiedlich groß aus. Hier bekommen alle drei
   dieselbe Höhe und Breite. */
.crew-manual-shift-fields .time-field2,
.crew-manual-shift-fields .xsel { width: 100%; }
.crew-manual-shift-fields .time-field2 .tf-input,
.crew-manual-shift-fields .xsel-btn {
  box-sizing: border-box;
  width: 100%;
  height: var(--crew-field-h);
  min-height: var(--crew-field-h);
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
}
/* In der vollen Feldbreite wirkt eine zentrierte Uhrzeit neben dem linksbündigen
   Stationsnamen unruhig – alle drei Werte stehen links. */
.crew-manual-shift-fields .time-field2 .tf-input { text-align: left; letter-spacing: normal; }
@media (max-width: 640px) { .crew-manual-shift-fields { grid-template-columns: 1fr; } }
/* Die Kandidatenliste im Fenster: gleiches Kartendesign wie in der Auswertung, nur mit
   etwas mehr Höhe – hier ist sie der eigentliche Inhalt und nicht eine Beigabe. */
.modal.modal-crew-manual-shift { width: min(560px, 94vw); max-width: 560px; }
.crew-manual-candidates .crew-open-candidate-list { max-height: min(46vh, 340px); }

.crew-tile { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface); padding: 7px 9px; }
.crew-tile.ghost-shift { border-style: dashed; background: color-mix(in srgb, var(--surface-soft) 72%, transparent); }
.crew-tile.is-planning-ignored { border-style: dashed; opacity: .78; }
.crew-tile.wide { max-width: 360px; }
.crew-tile-time { font-weight: 700; color: var(--ink); font-size: 13px; }
.crew-tile-dur { font-weight: 500; color: var(--muted); font-size: 12px; }
.crew-tile-station { font-size: 11px; color: var(--muted); margin-top: 1px; }
.crew-tile-emps { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.crew-emp-chip { background: var(--accent-soft); color: var(--ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.crew-empty { color: var(--muted); font-size: 12px; font-style: italic; }
.gantt-bar.ghost-shift { background: repeating-linear-gradient(45deg, var(--surface-soft) 0, var(--surface-soft) 6px, transparent 6px, transparent 12px); border: 1px dashed var(--station-color, var(--muted)); box-shadow: none; }
.gantt-bar.ghost-shift .gantt-bar-label { color: var(--muted); }
.gantt-bar.is-planning-ignored { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--station-color, var(--muted)) 58%, var(--surface)) 0, color-mix(in srgb, var(--station-color, var(--muted)) 58%, var(--surface)) 6px, color-mix(in srgb, var(--surface) 72%, transparent) 6px, color-mix(in srgb, var(--surface) 72%, transparent) 11px); border-style: dashed; }
.crew-open-shift .dp-label { color: var(--muted); }
.crew-emp-chip.partial { background: var(--warn, #d99724); color: #fff; }
.crew-chip-time { font-weight: 500; opacity: 0.85; margin-left: 4px; font-size: 11px; }
.crew-status-action { flex: 0 0 auto; white-space: nowrap; }
.crew-status-actions { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.crew-run-queue { display: grid; gap: 8px; margin: 4px 0 12px; }
.crew-run-item {
  display: grid; gap: 7px; padding: 10px 12px; border: 1px solid;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--crew-cold, #2f3e9e) 58%, var(--line));
  background: color-mix(in srgb, var(--crew-cold, #2f3e9e) 10%, var(--surface));
}
/* Wartet auf eine Entscheidung: Warnton statt Blau, und die Karte schliesst sich nicht
   von selbst – ohne Klick geht es nicht weiter. */
.crew-run-item.is-decision {
  border-color: color-mix(in srgb, var(--warn, #bd7a13) 52%, var(--line));
  background: color-mix(in srgb, var(--warn, #bd7a13) 10%, var(--surface));
}
.crew-run-decision {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 2px;
}
.crew-run-decision > strong { color: var(--ink); font-size: 12px; }
.crew-run-item.is-decision .crew-create-progress { display: none; }
.crew-run-item.is-queued {
  border-color: color-mix(in srgb, var(--crew-cold, #2f3e9e) 30%, var(--line));
  background: color-mix(in srgb, var(--crew-cold, #2f3e9e) 4%, var(--surface));
}
.crew-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crew-run-head > span { display: grid; gap: 1px; min-width: 0; }
.crew-run-head strong { color: var(--ink); font-size: 13px; }
.crew-run-head small, .crew-run-status { color: var(--muted); font-size: 11px; }
.crew-run-status { line-height: 1.35; }
/* Ergebniskennzahlen eines fertigen Laufs: aktueller Wert gross, der Wert von vorher
   samt Veraenderung klein darunter. */
.crew-run-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 6px 14px; margin: 1px 0 0;
}
.crew-run-fact { display: grid; gap: 1px; min-width: 0; }
.crew-run-fact dt { color: var(--muted); font-size: 11px; }
.crew-run-fact dd { margin: 0; display: grid; gap: 1px; min-width: 0; }
.crew-run-fact strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.crew-run-fact small { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.crew-run-delta.is-better { color: var(--good, #2f8a53); }
.crew-run-delta.is-worse { color: var(--bad, #b24a3a); }
.crew-run-foot { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.crew-run-item .crew-create-progress { height: 6px; margin: 0; }
.crew-run-item.is-running .crew-create-progress > span,
.crew-run-item.is-done .crew-create-progress > span,
.crew-run-item.is-cancelled .crew-create-progress > span,
.crew-run-item.is-error .crew-create-progress > span { background: linear-gradient(90deg, #6478d8, var(--crew-cold)); }
.crew-run-item.is-queued .crew-create-progress {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--crew-cold, #2f3e9e) 12%, var(--surface)) 0,
    color-mix(in srgb, var(--crew-cold, #2f3e9e) 12%, var(--surface)) 6px,
    color-mix(in srgb, var(--crew-cold, #2f3e9e) 32%, var(--surface)) 6px,
    color-mix(in srgb, var(--crew-cold, #2f3e9e) 32%, var(--surface)) 7px);
}
.crew-run-item:not(.is-running) .crew-create-progress > span::after { display: none; }
.crew-ot-gap-warning { position: relative; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.2fr); gap: 6px 18px; margin: 0 0 10px; padding: 11px 42px 11px 13px; border: 1px solid color-mix(in srgb, var(--bad, #b24a3a) 45%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--bad, #b24a3a) 8%, var(--surface)); color: var(--ink); }
.crew-ot-gap-close { appearance: none; position: absolute; top: 7px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.crew-ot-gap-close::before, .crew-ot-gap-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px;
  border-radius: 999px; background: currentColor; transform-origin: center;
}
.crew-ot-gap-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.crew-ot-gap-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.crew-ot-gap-close:hover { background: color-mix(in srgb, var(--bad, #b24a3a) 13%, transparent); color: var(--bad, #b24a3a); }
.crew-ot-gap-close:focus-visible { outline: 2px solid var(--bad, #b24a3a); outline-offset: 1px; }
.crew-ot-gap-warning > div { display: grid; align-content: start; gap: 3px; }
.crew-ot-gap-warning > div > strong { color: var(--bad, #b24a3a); font-size: 13px; }
.crew-ot-gap-warning > div > span, .crew-ot-gap-warning small { color: var(--muted); font-size: 11px; line-height: 1.4; }
/* Kompakt und begrenzt hoch: Ein Monatslauf bringt schnell zwanzig Fenster mit, die
   die Karte sonst über den halben Bildschirm zogen. */
.crew-ot-gap-warning ul { display: grid; align-content: start; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; max-height: 126px; overflow-y: auto; overscroll-behavior: contain; }
.crew-ot-gap-list > li { display: grid; gap: 1px; padding: 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--bad, #b24a3a) 8%, transparent); }
.crew-ot-gap-time { display: flex; align-items: baseline; gap: 7px; }
.crew-ot-gap-time strong { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); }
.crew-ot-gap-time small, .crew-ot-gap-days { color: var(--muted); font-size: 11px; line-height: 1.4; }
.crew-ot-gap-warning small { grid-column: 1 / -1; }
.crew-create-progress { position: relative; height: 8px; margin: -6px 0 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, var(--surface)); box-shadow: inset 0 1px 2px rgba(20, 31, 28, 0.12); }
.crew-create-progress > span { position: relative; display: block; width: 0; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 76%, #37b99a), var(--accent)); box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 25%, transparent); transition: width 300ms linear; }
/* Wie in der Shimmer-Referenz läuft ein schmaler, weich auslaufender Lichtstreifen
   unabhängig vom eigentlichen Fortschritt über den gefüllten Balken. Weil der
   Fortschrittsbalken nur während einer Berechnung gerendert wird, stoppt auch die
   Animation automatisch, sobald der Lauf beendet oder abgebrochen wurde. */
.crew-create-progress > span::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -42%; width: 38%;
  border-radius: inherit; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.16) 22%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.16) 78%, transparent 100%);
  filter: blur(.15px); animation: crewProgressShimmer 1.35s linear infinite;
}

/* Layout mit Auswertungs-Seitenleiste */
.crew-layout { display: flex; gap: 16px; align-items: flex-start; }
.crew-main { flex: 1; min-width: 0; }
.crew-aside { width: 280px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px; }
.crew-eval-total { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crew-eval-list { max-height: 38vh; overflow-y: auto; }
.crew-eval-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 6px; padding: 10px 2px; border-bottom: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background .14s ease, box-shadow .14s ease; }
.crew-eval-row[hidden] { display: none; }
.crew-eval-row:last-child { border-bottom: 0; }
.crew-eval-row:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.crew-eval-row.is-highlighted { padding-inline: 7px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.crew-eval-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
.crew-eval-hours-total { flex: none; color: var(--muted); font-size: 11px; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.crew-eval-meta { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.crew-eval-settings { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 3px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.crew-eval-settings:hover, .crew-eval-settings:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.crew-eval-settings svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Der Name wählt dieselbe Person wie der übrige Kartenbereich aus. Mit der Maus kann er
   direkt gezogen werden; Touch und Stift verwenden Gedrückthalten als Drag-Griff. */
.crew-eval-name {
  display: block; min-width: 0; color: var(--ink); font-size: 13px; line-height: 1.2;
  padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer;
  border-radius: 5px;
}
.crew-eval-name[data-crew-employee-drag] {
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: pan-y;
}
.crew-eval-name[data-crew-employee-drag].is-employee-drag-source { cursor: grabbing; background: var(--accent-soft); color: var(--accent); }
.crew-eval-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-eval-name:hover > span, .crew-eval-name:focus-visible > span { text-decoration: underline; }
.crew-eval-name:focus-visible { outline: 2px solid var(--accent, #1f7564); outline-offset: 2px; }
.crew-eval-search { position: relative; display: block; margin: 0 0 7px; }
.crew-eval-search input { box-sizing: border-box; width: 100%; max-width: none; height: 34px; min-height: 34px; padding: 0 34px 0 10px; border-radius: 8px; font: inherit; }
.crew-eval-search-clear { cursor: pointer; }
.crew-eval-search input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent); outline-offset: 1px; }
.crew-eval-empty { margin: 10px 2px 2px; color: var(--muted); font-size: 11px; }
.crew-eval-progress { position: relative; display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, var(--surface)); box-shadow: inset 0 1px 2px rgba(20, 31, 28, 0.12); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; }
.crew-eval-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.crew-eval-progress.ok i { background: var(--good, #0f9d8c); }
.crew-eval-progress.over i { background: var(--warn, #d99724); }
.crew-eval-progress.empty { background: repeating-linear-gradient(135deg, var(--surface-soft) 0, var(--surface-soft) 5px, var(--line) 5px, var(--line) 6px); }
/* Die Leiste ist ein Ziel, nicht nur eine Anzeige: Zeigen öffnet den Monatskalender. */
/* Kein Fragezeichen-Cursor: Tooltips zeigen sich von selbst, der Zeiger bleibt normal. */
.crew-eval-progress[data-crew-eval-calendar] { cursor: default; }
.crew-eval-progress[data-crew-eval-calendar]:hover, .crew-eval-progress[data-crew-eval-calendar]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px;
}

/* Monatskalender eines Mitarbeiters, aufgehängt an der Fortschrittsleiste. */
.crew-cal-pop {
  position: fixed; z-index: 4200; width: 388px; max-width: min(92vw, 388px); padding: 11px 12px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(20, 31, 28, 0.22); pointer-events: none; animation: ctxIn 0.12s ease;
}
/* Schließkreuz. Der Kalender selbst ist für den Zeiger durchlässig; nur dieser Knopf
   nimmt Tipps an. Er erscheint erst, wenn der Kalender per Finger festgesteckt wurde –
   mit Maus oder Stift verschwindet er ohnehin beim Wegfahren. */
.crew-cal-close {
  position: absolute; top: 6px; right: 6px; display: none;
  width: 32px; height: 32px; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-soft); color: var(--muted);
  font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.crew-cal-pop.is-pinned .crew-cal-close { display: flex; pointer-events: auto; }
.crew-cal-close:hover { color: var(--ink); }
/* Kopfzeile bleibt neben dem Kreuz lesbar. */
.crew-cal-pop.is-pinned .crew-cal-summary,
.crew-cal-pop.is-pinned .crew-cal-head { padding-right: 36px; }
.crew-cal-summary { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.crew-cal-head { display: grid; gap: 2px; margin-bottom: 8px; }
.crew-cal-head strong { font-size: 13px; }
.crew-cal-head span { font-size: 11px; color: var(--muted); }
.crew-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.crew-cal-wd { font-size: 9px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.crew-cal-day {
  width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1 / 1;
  padding: 2px 3px; border-radius: 6px; background: var(--surface-soft);
  display: grid; align-content: start; gap: 1px; overflow: hidden;
}
.crew-cal-day b { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.1; }
.crew-cal-day span { font-size: 9px; line-height: 1.15; color: var(--ink); word-break: break-word; }
/* Die Station bleibt einzeilig; ui.js verkleinert sie nur, wenn sie die Zelle überlaufen würde. */
.crew-cal-day small {
  display: block; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: var(--crew-cal-station-font-size, 8px); line-height: 1.1; color: var(--muted);
}
.crew-cal-day.out { background: transparent; }
.crew-cal-day.off { background: var(--surface-soft); }
.crew-cal-day.shift { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.crew-cal-day.shift b { color: var(--ink); }
.crew-cal-day.absence-urlaub { background: color-mix(in srgb, var(--warn, #d99724) 26%, var(--surface)); }
.crew-cal-day.absence-krank { background: color-mix(in srgb, var(--bad, #b24a3a) 24%, var(--surface)); }
.crew-cal-day.absence-sonstige { background: color-mix(in srgb, var(--muted) 22%, var(--surface)); }
.crew-cal-day.wish { background: repeating-linear-gradient(135deg, var(--surface-soft) 0, var(--surface-soft) 4px, var(--line) 4px, var(--line) 5px); }
/* Tagesfarben stehen nach dem Personenstatus und bleiben deshalb auch bei einer Schicht
   sichtbar. Feiertage gewinnen am Samstag; Sonntag bleibt wie im Monatsstreifen grau. */
.crew-cal-day.is-weekend {
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 24%, var(--line));
}
.crew-cal-day.is-holiday {
  background: color-mix(in srgb, var(--accent-3, #d99724) 28%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-3, #d99724) 44%, var(--line));
}
/* Persönlich gebuchte Feiertags-Abwesenheit gewinnt gegen die allgemeine gelbe
   Feiertagsmarkierung und entspricht der blauen Farbe im Einstellungskalender. */
.crew-cal-day.absence-feiertag {
  background: color-mix(in srgb, var(--wish-feiertag, #4f79c8) 28%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wish-feiertag, #4f79c8) 48%, var(--line));
}
.crew-cal-day.is-selected-day {
  position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -2px;
}
.crew-cal-day.is-selected-week {
  box-shadow: inset 0 2px var(--accent), inset 0 -2px var(--accent);
}
.crew-cal-day.is-selected-week-start { box-shadow: inset 2px 0 var(--accent), inset 0 2px var(--accent), inset 0 -2px var(--accent); }
.crew-cal-day.is-selected-week-end { box-shadow: inset -2px 0 var(--accent), inset 0 2px var(--accent), inset 0 -2px var(--accent); }
.crew-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-top: 9px; font-size: 9.5px; color: var(--muted); }
.crew-cal-legend .key { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.crew-cal-legend .key.shift { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); }
.crew-cal-legend .key.absence-urlaub { background: color-mix(in srgb, var(--warn, #d99724) 45%, var(--surface)); }
.crew-cal-legend .key.absence-krank { background: color-mix(in srgb, var(--bad, #b24a3a) 45%, var(--surface)); }
.crew-cal-legend .key.absence-sonstige { background: color-mix(in srgb, var(--muted) 40%, var(--surface)); }
.crew-cal-legend .key.absence-feiertag { background: color-mix(in srgb, var(--wish-feiertag, #4f79c8) 55%, var(--surface)); }
.crew-cal-legend .key.wish { background: repeating-linear-gradient(135deg, var(--surface-soft) 0, var(--surface-soft) 3px, var(--line) 3px, var(--line) 4px); }
.crew-cal-legend .key.off { background: var(--surface-soft); border: 1px solid var(--line); }
.crew-eval-num { min-width: 0; font-size: 11px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; line-height: 1.35; }
.crew-eval-num .crew-eval-diff { margin-left: auto; }
.crew-eval-num strong { color: var(--ink); }
.crew-eval-target { color: var(--muted); font-size: 11px; }
.crew-eval-diff { font-size: 11px; font-weight: 600; }
.crew-eval-diff.under { color: var(--bad, #b24a3a); }
.crew-eval-diff.over { color: var(--accent); }
.crew-eval-diff.ok { color: var(--good, #0f9d8c); }
/* Fehlstunden tragen die Begründung im title-Attribut und sind per Tastatur erreichbar. */
.crew-eval-diff[title] { cursor: default; text-decoration: underline dotted 1px; text-underline-offset: 2px; }
.crew-eval-diff[title]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; border-radius: 3px; }
.crew-eval-vac { font-size: 10px; font-weight: 700; color: #fff; background: var(--accent-2, #4f6fad); border-radius: 4px; padding: 1px 4px; }
.crew-eval-h4 { margin: 14px 0 6px; font-size: 13px; color: var(--ink); }
.crew-demand { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; padding: 10px 12px; background: var(--surface-soft); border-radius: 8px; }
.crew-demand-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.crew-demand-row strong { color: var(--ink); }
.crew-demand-row strong.under { color: var(--bad, #b24a3a); }
.crew-demand-row strong.ok { color: var(--good, #0f9d8c); }
.crew-open-list { max-height: 30vh; overflow-y: auto; }
.crew-open-row { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.crew-open-row:last-child { border-bottom: 0; }
.crew-open-row:hover, .crew-open-row.is-selected { border-radius: 6px; background: var(--accent-soft); }
.crew-open-date { color: var(--muted); white-space: nowrap; }
.crew-open-time { color: var(--ink); white-space: nowrap; text-align: right; }
.crew-open-more { color: var(--muted); font-size: 12px; padding: 4px 0; font-style: italic; }
.crew-open-candidates { display: grid; gap: 7px; margin: 12px 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)); }
.crew-open-candidates-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.crew-open-candidates-head > span { display: grid; min-width: 0; gap: 2px; }
.crew-open-candidates-head small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.crew-open-candidates-head > button { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; }
.crew-open-candidates > p { margin: 0; color: var(--muted); font-size: 10px; }
.crew-open-candidate-list { display: grid; gap: 5px; max-height: 300px; overflow-y: auto; }
.crew-open-candidate { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.crew-open-candidate:hover { border-color: var(--accent); background: var(--accent-soft); }
.crew-open-candidate.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.crew-open-candidate-main { display: grid; min-width: 0; flex: 1 1 auto; gap: 4px; }
.crew-open-candidate-main .crew-eval-progress { width: min(132px, 100%); height: 6px; }
.crew-open-candidate-name { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.crew-open-candidate small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.crew-open-candidate-balance { flex: 0 0 auto; color: var(--muted); font-size: 10px; text-align: right; }
.crew-open-candidate-balance strong { color: var(--bad, #b24a3a); }
.crew-shift-context-menu .crew-shift-planning-toggle { display: flex; align-items: center; min-height: 36px; }
/* Regelverstöße an Kachel und Leiste.
   Das Dreieck sagt „hier stimmt etwas nicht", die Farbe sagt wie schlimm: Bernstein für
   Wünsche und Qualifikationen, Rot für gesetzliche und vertragliche Grenzen. Nur die
   harten Fälle bekommen zusätzlich den roten Rahmen – bekäme ihn jeder Hinweis, wäre die
   Monatsansicht nach einem Tauschvorgang durchgehend rot und die Farbe sagte nichts mehr. */
.crew-rule-flag { display: inline-flex; width: 18px; height: 18px; margin: -3px 1px -3px -3px; padding: 3px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; color: #c98a12; vertical-align: -1px; cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; }
.crew-rule-flag svg { width: 100%; height: 100%; }
.crew-rule-flag.is-hard { color: #d1495b; }
.crew-klartafel .crew-tile.has-rule-warning { border-color: #e2c68a; }
.crew-klartafel .crew-tile.has-rule-error,
.crew-klartafel .crew-dayplan .gantt-bar.has-rule-error { border: 2px solid #d1495b; }
.crew-klartafel .crew-dayplan .gantt-bar.has-rule-warning { border-color: #c98a12; }
/* Die Leisten der Tagesansicht sind schmal – dort trägt zusätzlich ein leichter roter
   Grund, damit der Verstoß auch bei einer 2-Stunden-Schicht auffällt. */
.crew-klartafel .crew-dayplan .gantt-bar.has-rule-error { background: color-mix(in srgb, #d1495b 18%, #fff); }
/* Tauschmodus: Die gewählte Schicht wird halbdurchsichtig, und der Zeiger wird über dem
   ganzen Plan zum Ringpfeil – so ist an jeder Stelle sichtbar, dass jetzt die zweite
   Schicht gesucht wird und nicht etwa gesperrt oder verschoben wird. */
body.crew-swap-active .crew-tile[data-crew-shift],
body.crew-swap-active .gantt-bar[data-crew-shift],
body.crew-swap-active .crew-klartafel { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66' fill='none' stroke='%231f7564' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M18 2.5V7h-4.5' fill='none' stroke='%231f7564' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, alias; }
.crew-tile.is-swap-source, .gantt-bar.is-swap-source { opacity: .45; outline: 2px dashed var(--accent, #1f7564); outline-offset: 1px; }
/* Der lange Druck auf einer Schichtkachel gehört ausschließlich dem Kontextmenü. Ohne
   diese Zeilen legt iOS darüber seine Textauswahl mit Lupe und sein eigenes Callout-Menü. */
[data-crew-shift-calendar] {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: pan-y;
}
.crew-open-empty { padding: 8px 2px; color: var(--muted); font-size: 11px; }
@media (max-width: 980px) {
  .crew-layout { flex-direction: column; }
  .crew-aside { width: 100%; }
  .crew-toolbar-row { gap: 8px; }
}

/* Tagesansicht */
.crew-day-cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.crew-subhead { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.crew-day-shifts, .crew-day-emps { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px; }
.crew-day-shifts .crew-tile { margin-bottom: 8px; }
.crew-emprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.crew-emprow:last-child { border-bottom: 0; }
.crew-empname { font-weight: 600; color: var(--ink); }
.crew-empshift { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

@media (max-width: 720px) {
  .crew-day-cols { grid-template-columns: 1fr; }
}

/* ===== Dienstplan Version 2: Prognose, Bedarf, Fehlbedarf, Sperren ===== */

/* Umsatz- und Bedarfszeile teilen sich das Slot-Raster mit der Besetzungszeile. */
.crew-rev-row .dp-label,
.crew-req-row .dp-label { color: var(--ink); font-weight: 600; }
.crew-rev-row .crew-cov-cells { min-height: 20px; }
.crew-req-row .crew-cov-cells { min-height: 22px; }
.crew-rev-cell {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; color: var(--muted); overflow: hidden;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--good, #0f9d8c) calc(var(--a, 0) * 100%), transparent);
}
.crew-rev-cell:last-child { border-right: 0; }
.crew-req-cell {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: var(--ink); overflow: hidden;
  border-right: 1px solid var(--line);
}
.crew-req-cell:last-child { border-right: 0; }
/* Slots, in denen der Musterdienstplan die Untergrenze setzt (nicht der Umsatz). */
.crew-req-cell.from-muster { color: var(--muted); font-style: italic; }

/* Planungsgrundlage: Musterdienstplan oder Personalstamm. */
.crew-buildswitch { display: inline-flex; gap: 4px; }
.crew-target { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.crew-target input {
  width: 74px; font: inherit; padding: 5px 40px 5px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); text-align: left;
}
/* Hinweis, für welche Monate die eingegebene Zielproduktivität gilt. */
.crew-target-scope { font-size: 10px; line-height: 1; opacity: .7; margin-left: 4px; white-space: nowrap; }
.crew-target input:focus, .crew-overtime input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent); outline-offset: 1px; border-color: var(--accent); }
.crew-resilience-profile-control { white-space: nowrap; }
.crew-resilience-profile-xsel { width: 250px; }
.crew-resilience-profile-xsel .xsel-btn { min-height: 32px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.crew-resilience-profile-menu { min-width: 330px; }
.crew-resilience-profile-menu .xsel-opt { text-decoration: underline dotted; text-underline-offset: 3px; }
.crew-toolbar-right :disabled { cursor: not-allowed; opacity: 0.48; }
.crew-daymeta:disabled,
.crew-daymeta[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; background: color-mix(in srgb, var(--surface-soft) 75%, transparent); }
.crew-buildswitch.crew-modeswitch { gap: 0; }
.crew-buildswitch.crew-modeswitch .crew-mode { white-space: nowrap; }
.crew-rev-cells .crew-rev-cell { flex-basis: calc(100% / 24); font-size: 10px; }
.crew-day-kpi { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Warnhinweise (fehlende Stationen, nicht einplanbare Mitarbeiter). */
.crew-warn-box { margin: 10px 0; padding: 8px 10px; border-left: 3px solid #d99724; border-radius: 6px; background: color-mix(in srgb, #d99724 8%, transparent); font-size: 11px; }
.crew-warn-box strong { display: block; margin-bottom: 2px; font-size: 12px; }
.crew-warn-box span { color: var(--muted); }
.crew-warn-box em { font-style: normal; opacity: 0.75; }

/* Tageskopf der Monatsansicht: Prognose und Stunden. */
.crew-daymeta { width: 100%; display: flex; flex-direction: column; gap: 1px; padding: 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 10px; text-align: center; cursor: pointer; }
.crew-daymeta:hover { background: var(--accent-soft); }
.crew-daymeta-adjust { color: var(--muted); font-size: 9px; line-height: 1.2; }
.crew-daymeta-rev { color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.crew-daymeta-h { font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.crew-edit-pencil { width: 11px; height: 11px; flex: 0 0 auto; color: var(--accent); }
.crew-edit-pencil[hidden] { display: none; }
.crew-daymeta-h.under { color: var(--bad, #b24a3a); }
.crew-daymeta-h.over { color: #b06e2a; }
.crew-daymeta-h.ok { color: var(--good, #0f9d8c); }

.crew-emp-chip.locked-both { box-shadow: inset 0 0 0 2px var(--ink); }
.crew-emp-chip.locked-time { box-shadow: inset 0 0 0 1px var(--ink); }
.crew-emp-chip.locked-person { box-shadow: inset 0 0 0 1px var(--muted); }

/* Tageskopf der Monatsansicht ist anklickbar (öffnet die Tagesansicht). */
button.crew-dayhead { width: 100%; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 4px 2px; border-radius: 6px 6px 0 0; }
button.crew-dayhead:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
button.crew-dayhead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Monatsansicht: geplante Schicht je Mitarbeiter, offene Zeiten separat. */
.crew-tile { border-left: 3px solid var(--station-color, var(--line)); }
.crew-tile.is-open { border-left-style: dashed; border-left-color: var(--bad, #b24a3a); opacity: 0.85; }
.crew-tile.is-open .crew-empty { color: var(--bad, #b24a3a); font-weight: 600; }

/* Persönliche Planungsregeln.
   Der Dialog scrollt nicht als Ganzes: Die Kopfzeile mit dem Schließen-Kreuz bleibt
   stehen, und Namensliste und Detailspalte scrollen unabhängig voneinander. Vorher
   verschwand beim Blättern durch die Regeln sowohl das Kreuz als auch die Liste. */
.modal.modal-crew-settings {
  width: min(1120px, 96vw); max-width: 1120px;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-crew-settings .modal-header { flex: none; }
.modal-crew-settings .modal-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* `minmax(0, 1fr)` als Zeile: ohne sie wächst die Rasterzeile auf die Höhe ihres
   Inhalts, und die beiden Spalten liefen unten aus dem Dialog heraus, statt zu scrollen. */
.modal-crew-settings .crew-settings-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.modal-crew-settings .crew-settings-detail { min-height: 0; overflow: auto; overscroll-behavior: contain; }
/* Die Seitenleiste ist eine eigene Fläche und trägt ihre Abstände selbst: vorher lag das
   Suchfeld links bündig an der Kante und hatte nur rechts Luft, und die Beschriftung
   klebte in der oberen Ecke. Sie zieht sich zugleich über die volle Höhe des Dialogs,
   damit die Namensliste den Platz nutzt, statt bei 500 px abzubrechen. */
.crew-settings-layout { display: grid; grid-template-columns: 262px minmax(0, 1fr); align-items: stretch; min-height: 560px; }
.crew-settings-list {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
  /* Bis an die Kanten des Dialogs, damit die getönte Fläche wie eine Seitenleiste wirkt –
     und mit gleichem Abstand links wie rechts im Inneren. */
  margin: -16px 0 -16px -16px; padding: 16px;
}
.crew-settings-search { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.crew-settings-search input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; }
.crew-settings-list [data-crew-settings-employees] { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: auto; }
.crew-settings-employee { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; padding: 7px 9px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.crew-settings-avatar { flex: 0 0 28px; width: 28px; height: 28px; font-size: 10px; }
.crew-settings-employee:hover, .crew-settings-employee.active { background: var(--accent-soft); }
.crew-settings-employee.active { font-weight: 700; color: var(--accent); }
.crew-settings-detail { padding-left: 22px; }
.crew-settings-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.crew-settings-person-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
.crew-settings-head-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; font-size: 13px; }
.crew-settings-person-identity > div { min-width: 0; }
.crew-settings-person-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; }
.crew-settings-person-head h3 { margin: 0; color: var(--ink); }
.crew-settings-person-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.crew-settings-person-head input { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.crew-settings-contract-hours { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; padding: 3px 9px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 750; white-space: nowrap; }
.crew-settings-month-summary { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
/* Derselbe Monatsschalter wie auf den übrigen Seiten, nur etwas kompakter: im Kopf des
   Dialogs steht er neben der Stundenbilanz und darf sie nicht überragen. */
.crew-settings-month-switch { margin-bottom: 0; padding: 3px; border-radius: 10px; }
.crew-settings-month-switch .year-step {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
.crew-settings-month-switch .year-step > .ui-chev {
  width: 14px;
  height: 14px;
  margin: 0;
}
.crew-settings-month-switch .year-current { min-width: 104px; font-size: 13px; }
.crew-settings-month-summary > span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.crew-settings-month-summary strong { color: var(--accent); font-size: 12px; }
.crew-settings-month-summary small { color: var(--muted); font-size: 9px; }
/* Monatskalender: Kacheln mit Abstand statt Tabellenraster. Der Zustand eines Tages
   ist an der Fläche zu erkennen, nicht nur am kleinen Textkürzel – Urlaub, Krank,
   Sonstige und Feiertag haben deshalb jeweils eine eigene Farbe. */
.crew-settings-detail { --wish-urlaub: #d99724; --wish-krank: #c2503f; --wish-sonstige: #7a6cc4; --wish-feiertag: #4f79c8; }
.crew-wish-calendar { border: 0; }
.crew-wish-weekdays, .crew-wish-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.crew-wish-weekdays { margin-bottom: 5px; }
.crew-wish-weekdays span { padding: 2px 0 4px; text-align: center; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: none; }
.crew-wish-day, .crew-wish-empty { min-height: 72px; border: 0; border-radius: 10px; background: var(--surface-soft); color: var(--ink); }
.crew-wish-empty { background: none; }
.crew-wish-cell { position: relative; display: block; min-width: 0; min-height: 72px; }
.crew-wish-cell .crew-wish-day { width: 100%; height: 100%; }
/* Vertikal zentriert: die Schichten sassen am oberen Rand und liessen die Kachel
   unten leer wirken. */
.crew-wish-day {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 3px; padding: 6px 5px; cursor: pointer; font: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: box-shadow .12s ease, transform .12s ease;
}
.crew-wish-day:hover:not(.is-locked) { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 12px rgba(20, 31, 28, .1); }
.crew-wish-day.weekend { background: color-mix(in srgb, var(--ink) 5%, var(--surface-soft)); }
.crew-wish-day.selected { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.crew-wish-day.is-locked { cursor: default; opacity: 1; }
/* Die Tageszahl sitzt fest oben links und nimmt der zentrierten Mitte keinen Platz. */
.crew-wish-day-number { position: absolute; top: 4px; left: 7px; font-size: 10px; font-weight: 700; color: var(--muted); line-height: 1.15; }
.crew-wish-day.selected .crew-wish-day-number { color: var(--accent); }
.crew-wish-shifts { display: flex; flex-direction: column; gap: 2px; }
.crew-wish-shift { display: grid; gap: 1px; overflow: hidden; border-radius: 5px; padding: 3px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 2px 0 0 var(--accent); color: var(--ink); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; text-align: center; }
.crew-wish-shift strong, .crew-wish-shift small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crew-wish-shift small { color: var(--muted); font-size: 7.5px; font-weight: 650; }
.crew-wish-availability {
  align-self: center; max-width: 100%; overflow: hidden; color: color-mix(in srgb, var(--muted) 62%, var(--surface));
  font-size: 8px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center;
  text-overflow: ellipsis; white-space: nowrap;
}
.crew-wish-availability span { display: block; overflow: hidden; text-overflow: ellipsis; }
.crew-wish-availability em { display: block; margin-top: 2px; color: var(--accent); font-size: 6.5px; font-style: normal; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.crew-wish-availability.is-unavailable { font-size: 7.5px; }
/* Der Freiwunsch ist der aktuelle Tagesstatus. Weil der Kalender ohne kompletten
   Neuaufbau umschaltet, bleibt der Verfügbarkeitstext im DOM und wird über die
   bereits getogglete selected-Klasse sofort ausgeblendet – auch bei Touch/Pencil. */
.crew-wish-day.selected .crew-wish-availability { display: none; }
.crew-wish-availability-edit {
  position: absolute; z-index: 2; top: 3px; right: 3px; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 7px; padding: 0; background: transparent; color: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: pointer; opacity: .42; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.crew-wish-availability-edit svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crew-wish-cell:hover .crew-wish-availability-edit, .crew-wish-availability-edit:focus-visible, .crew-wish-availability-edit.is-one-time { opacity: 1; color: var(--accent); }
.crew-wish-availability-edit:hover, .crew-wish-availability-edit:focus-visible { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); outline: none; }
.crew-wish-free { align-self: center; color: var(--accent); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.crew-wish-absence { align-self: center; border-radius: 999px; padding: 2px 7px; background: var(--surface); color: var(--ink); font-size: 9px; font-weight: 700; text-transform: uppercase; }
/* Abwesenheiten färben die ganze Kachel – erkennbar, ohne das Kürzel zu lesen. */
.crew-wish-day.absence-urlaub { background: color-mix(in srgb, var(--wish-urlaub, #d99724) 20%, var(--surface)); }
.crew-wish-day.absence-krank { background: color-mix(in srgb, var(--wish-krank, #c2503f) 20%, var(--surface)); }
.crew-wish-day.absence-sonstige { background: color-mix(in srgb, var(--wish-sonstige, #7a6cc4) 20%, var(--surface)); }
.crew-wish-day.absence-feiertag { background: color-mix(in srgb, var(--wish-feiertag, #4f79c8) 20%, var(--surface)); }
.crew-wish-day.absence-urlaub .crew-wish-absence { color: color-mix(in srgb, var(--wish-urlaub, #d99724) 75%, var(--ink)); }
.crew-wish-day.absence-krank .crew-wish-absence { color: color-mix(in srgb, var(--wish-krank, #c2503f) 75%, var(--ink)); }
.crew-wish-day.absence-sonstige .crew-wish-absence { color: color-mix(in srgb, var(--wish-sonstige, #7a6cc4) 75%, var(--ink)); }
.crew-wish-day.absence-feiertag .crew-wish-absence { color: color-mix(in srgb, var(--wish-feiertag, #4f79c8) 75%, var(--ink)); }
.crew-wish-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 9px 2px 0; font-size: 10px; color: var(--muted); }
.crew-wish-legend span { display: inline-flex; align-items: center; gap: 5px; }
.crew-wish-legend .key { width: 10px; height: 10px; border-radius: 3px; }
.crew-wish-legend .key.shift { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.crew-wish-legend .key.absence-urlaub { background: color-mix(in srgb, var(--wish-urlaub, #d99724) 55%, var(--surface)); }
.crew-wish-legend .key.absence-krank { background: color-mix(in srgb, var(--wish-krank, #c2503f) 55%, var(--surface)); }
.crew-wish-legend .key.absence-sonstige { background: color-mix(in srgb, var(--wish-sonstige, #7a6cc4) 55%, var(--surface)); }
.crew-wish-legend .key.absence-feiertag { background: color-mix(in srgb, var(--wish-feiertag, #4f79c8) 55%, var(--surface)); }
.crew-wish-legend .key.wish { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.crew-availability-editor-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
.crew-availability-editor-dismiss { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(22, 29, 27, .34); cursor: default; }
.crew-availability-editor {
  position: relative; z-index: 1; width: min(420px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(20, 31, 28, .24);
}
.crew-availability-editor h3 { margin: 0; font-size: 17px; }
.crew-availability-editor > div:first-child p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.crew-availability-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 12px; }
.crew-availability-time-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.crew-availability-time-grid .crew-availability-time-field,
.crew-availability-time-grid .crew-availability-time-field .tf-input { width: 100%; }
.crew-availability-time-grid .crew-availability-time-field .tf-input { min-height: 38px; background: var(--surface-soft); text-align: left; letter-spacing: normal; }
.crew-availability-editor .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.crew-availability-editor .crew-availability-reset { margin: 0 auto 0 0; white-space: nowrap; }
.crew-person-rules { display: grid; gap: 12px; margin-top: 18px; }
.crew-rule-group {
  min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--surface-soft));
  box-shadow: 0 2px 8px rgba(20, 31, 28, .035);
}
.crew-rule-group h4 { margin: 0 0 10px; color: var(--ink); font-size: 14px; }
.crew-rule-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.crew-rule-title h4 { margin: 0; }
.crew-rule-icon {
  display: inline-grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface)); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.crew-rule-icon svg { width: 16px; height: 16px; }
.crew-planning-grid, .crew-edge-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.crew-free-weekend-rule { grid-column: 1; }
.crew-rule-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.crew-rule-group-head .crew-rule-title { margin-bottom: 0; }
.crew-rule-group-head h4 { margin-bottom: 2px; }
.crew-rule-group-head small { color: var(--muted); font-size: 10px; }
.crew-station-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.crew-station-pill {
  display: inline-flex; align-items: center; min-height: 24px; border: 1px solid color-mix(in srgb, var(--station-pill) 46%, var(--line));
  border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, var(--station-pill) 15%, var(--surface));
  color: color-mix(in srgb, var(--station-pill) 78%, var(--ink)); font-size: 10px; font-weight: 750; white-space: nowrap;
}
.crew-no-edge-rules { grid-column: 1 / -1; margin: 1px 0; color: var(--muted); font-size: 11px; }
.crew-switch-row, .crew-range-row, .crew-number-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--ink); }
.crew-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* In Planung und Stationen/Berechtigungen sorgt bereits die aeussere Bereichskarte fuer
   Struktur. Eigene Karten um jede Schalterzeile erzeugen hier nur unnoetige Rahmen. */
.crew-planning-grid .crew-switch-row,
.crew-edge-rule-grid .crew-switch-row {
  border: 0;
  border-radius: 0;
  padding: 8px 2px;
  background: transparent;
}
.crew-switch-row span { display: flex; flex-direction: column; gap: 2px; }
.crew-switch-row small { color: var(--muted); font-size: 10px; font-weight: 400; }
/* Kippschalter wie auf der Einstellungsseite (.switch-row in styles.css): dieselbe Mechanik,
   dieselbe grüne „an"-Farbe. Vorher stand hier das native Kästchen des Browsers – blau und in
   nichts wie der Rest der App. Etwas kleiner als auf der Einstellungsseite: hier stehen viele
   Zeilen dicht untereinander, in voller Größe zog der Schalter den Blick von der Beschriftung
   weg. */
.crew-switch-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 21px;
  min-height: 21px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.crew-switch-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}
.crew-switch-row input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.crew-switch-row input[type="checkbox"]:checked::before { transform: translateX(15px); }
.crew-switch-row input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.crew-switch-row input[type="checkbox"]:disabled { opacity: 0.45; cursor: default; }
.crew-overtime-rule > span:first-child { margin-right: auto; }
.crew-overtime-rule .crew-overtime-controls { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; }
.crew-overtime-rule.is-plan-disabled { background: transparent; color: var(--muted); }
.crew-overtime-rule.is-plan-disabled > span { opacity: .55; }
.crew-overtime-rule.is-plan-disabled input[type="checkbox"] { opacity: .38; }
/* Wert zwischen zwei Knöpfen statt Zahlenfeld – dieselbe Bedienung wie bei der
   Tagesanpassung (−  Wert  +). */
.crew-overtime-rule .crew-overtime-number { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
.crew-overtime-value-stack { display: flex; min-width: 70px; flex-direction: column; align-items: center; gap: 2px; }
.crew-overtime-value-stack small { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.crew-overtime-rule .crew-overtime-number .crew-step-button {
  width: 32px; min-width: 32px; height: 30px; min-height: 30px; padding: 0;
  border-radius: 8px; font-size: 0; line-height: 0;
}
.crew-overtime-rule .crew-overtime-number .ghost-button:disabled { opacity: 0.4; cursor: default; }
.crew-overtime-rule .crew-overtime-number strong { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.crew-overtime-rule.is-disabled .crew-overtime-number strong { color: var(--muted); opacity: .58; }
.crew-overtime-rule.is-disabled .crew-overtime-value-stack small { opacity: .58; }
.crew-shift-range-rule { border: 0; border-radius: 0; padding: 3px 6px 0; background: transparent; color: var(--ink); }
.crew-person-dual-range { margin-top: 3px; }
/* Nahe Werte bekommen zwei Beschriftungszeilen. So bleiben auch lange Min./Max.-Pills auf
   schmalen Touch-Ansichten getrennt, während ihre Spitzen weiter über dem Wert stehen. */
.crew-person-dual-range.has-close-labels { height: 80px; }
.crew-person-dual-range.has-close-labels::before,
.crew-person-dual-range.has-close-labels::after { top: 45px; }
.crew-person-dual-range.has-close-labels input[type="range"] { top: 30px; }
.crew-person-dual-range.has-close-labels .dual-range-value.min { top: -6px; }
.crew-person-dual-range.has-close-labels .dual-range-value.max { top: 16px; }
/* Bei identischen Grenzen würden beide nativen Griffe exakt übereinanderliegen. Die Griffe
   werden sichtbar getrennt und die farbige Strecke folgt bis zu ihren Mittelpunkten. */
.crew-person-dual-range.is-overlap::after {
  left: calc(9px + (var(--min) - var(--range-min)) / (var(--range-max) - var(--range-min)) * (100% - 30px));
  right: calc(9px + (var(--range-max) - var(--max)) / (var(--range-max) - var(--range-min)) * (100% - 30px));
}
.crew-person-dual-range.is-overlap input:first-of-type::-webkit-slider-thumb { transform: translateX(-6px); }
.crew-person-dual-range.is-overlap input:last-of-type::-webkit-slider-thumb { transform: translateX(6px); }
.crew-person-dual-range.is-overlap input:first-of-type:hover::-webkit-slider-thumb { transform: translateX(-6px) scale(1.08); }
.crew-person-dual-range.is-overlap input:last-of-type:hover::-webkit-slider-thumb { transform: translateX(6px) scale(1.08); }
.crew-person-dual-range.is-overlap input:first-of-type::-moz-range-thumb { transform: translateX(-6px); }
.crew-person-dual-range.is-overlap input:last-of-type::-moz-range-thumb { transform: translateX(6px); }
.crew-range-row { display: grid; gap: 8px; }
.crew-range-row span { display: flex; justify-content: space-between; font-size: 12px; }
.crew-range-row input { width: 100%; accent-color: var(--accent); }
.crew-number-row { display: flex; align-items: center; gap: 8px; }
.crew-number-row span { margin-right: auto; }
.crew-number-row input { width: 64px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); text-align: right; }
.crew-number-row em { color: var(--muted); font-style: normal; }

/* Tageskorrektur: Karten, Stepper und Abstände folgen der Dienstplan-Seite. */
.modal.modal-crew-day { width: min(1040px, 96vw); max-width: 1040px; max-height: min(94vh, 980px); }
.modal-crew-day .modal-body { overflow: auto; }
.crew-day-adjust-modal { display: grid; gap: 12px; color: var(--ink); }
.crew-correction-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 14px; align-items: stretch; }
.crew-correction-planning { display: grid; gap: 9px; }
.crew-correction-opening,
.crew-correction-total,
.crew-correction-references,
.crew-adjust-row,
.crew-correction-notes { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.crew-correction-opening { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; background: var(--surface); }
.crew-correction-section-label { margin-right: auto; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.crew-correction-opening label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.crew-correction-opening .crew-correction-closed { gap: 5px; min-height: 32px; }
.crew-correction-opening .time-field2 .tf-input { width: 78px; min-height: 32px; padding: 0 7px; border-radius: 8px; font-size: 12px; font-weight: 650; }
.crew-correction-opening .time-field2[data-tf-format="12h"] .tf-input { width: 92px; }
.crew-correction-total { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 13px; }
.crew-correction-revenue-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.crew-correction-revenue-label i { display: inline-flex; width: 19px; height: 19px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.crew-correction-revenue-label svg { width: 12px; height: 12px; }
.crew-correction-stepper { display: grid; grid-template-columns: 30px minmax(104px, auto) 30px; align-items: center; gap: 5px; }
.crew-correction-stepper .ghost-button,
.crew-adjust-row .ghost-button { min-width: 30px; min-height: 30px; padding: 2px; border-radius: 8px; font-size: 15px; }
.crew-correction-total-value { display: grid; min-width: 104px; justify-items: center; gap: 1px; }
.crew-correction-total-value strong { text-align: center; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.crew-correction-total-value small { color: var(--muted); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crew-correction-total > .ghost-button.mini { min-width: 30px; min-height: 30px; padding: 0; color: var(--muted); }
.crew-correction-revenue-reset svg { width: 18px; height: 18px; }
.crew-correction-references { display: grid; grid-template-rows: auto 32px auto; gap: 8px; min-width: 0; padding: 11px; background: var(--surface); }
.crew-correction-references > div:first-child { display: grid; gap: 2px; }
.crew-correction-references strong { font-size: 12px; }
.crew-correction-references small { color: var(--muted); font-size: 10px; }
.crew-correction-ref-chips { display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.crew-correction-ref-chips.is-clipped-start:not(.is-clipped-end) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px); mask-image: linear-gradient(to right, transparent 0, #000 28px); }
.crew-correction-ref-chips.is-clipped-end:not(.is-clipped-start) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
.crew-correction-ref-chips.is-clipped-start.is-clipped-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.crew-correction-ref-chips::-webkit-scrollbar { display: none; }
.crew-correction-ref-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 27px; box-sizing: border-box; padding: 3px 6px 3px 9px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: 999px; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 78%, var(--ink)); font-size: 10px; font-weight: 700; }
.crew-correction-ref-chip.is-holiday { border-color: color-mix(in srgb, var(--accent-3) 46%, var(--line)); background: color-mix(in srgb, var(--accent-3) 18%, var(--surface)); color: color-mix(in srgb, var(--accent-3) 86%, var(--ink)); }
.crew-correction-ref-chip.is-weekend { border-color: color-mix(in srgb, var(--muted) 28%, var(--line)); background: color-mix(in srgb, var(--muted) 10%, var(--surface)); color: var(--muted); }
.crew-correction-ref-chip.is-weekday { border-color: var(--line); background: var(--surface); color: var(--ink); }
.crew-correction-ref-chip button { position: relative; display: block; width: 16px; height: 16px; flex: 0 0 16px; align-self: center; border: 0; padding: 0; background: transparent; color: currentColor; opacity: .65; cursor: pointer; font-size: 0; line-height: 0; }
.crew-correction-ref-chip button::before,
.crew-correction-ref-chip button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: center; }
.crew-correction-ref-chip button::before { transform: translate(-50%, -50%) rotate(45deg); }
.crew-correction-ref-chip button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.crew-correction-ref-add { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.crew-correction-ref-add .dp-field,
.crew-correction-ref-add .dp-trigger { width: 100%; }
.crew-correction-ref-add .dp-trigger { min-height: 32px; padding-inline: 9px; font-size: 11px; }
.crew-correction-ref-add .dp-display { font-size: 11px; }
.crew-correction-chart { width: 100%; min-height: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.crew-correction-chart svg { display: block; width: 100%; min-width: 760px; height: auto; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.crew-correction-chart .axis-label { fill: var(--muted); font-size: 8px; }
.crew-correction-chart .crew-correction-axis-end { font-weight: 700; }
.crew-correction-svg-value { fill: color-mix(in srgb, var(--ink) 82%, var(--muted)); font-size: 8px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.crew-correction-svg-value.is-zero { opacity: 0; }
.crew-correction-closed-hour { fill: color-mix(in srgb, var(--muted) 5%, transparent); }
.crew-correction-bar-handle { cursor: ns-resize; fill: transparent; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.crew-correction-bar-grip { fill: var(--accent); opacity: .42; pointer-events: none; transition: opacity 120ms ease; }
.crew-correction-bar-handle:hover + .crew-correction-bar-grip { opacity: .95; }
.crew-correction-after { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(280px, 1.1fr); gap: 12px; align-items: stretch; }
.crew-correction-hours { display: grid; gap: 8px; }
.crew-adjust-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: var(--surface); }
.crew-adjust-row > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.crew-adjust-row > div { display: grid; grid-template-columns: 30px 88px 30px; align-items: center; gap: 5px; }
.crew-adjust-row strong { text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.crew-correction-notes { display: grid; grid-template-rows: auto 1fr; gap: 7px; padding: 12px 13px; color: var(--muted); font-size: 12px; font-weight: 700; }
.crew-correction-notes textarea { width: 100%; min-height: 78px; resize: none; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; box-sizing: border-box; }
.crew-correction-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 0; }
@media (max-width: 760px) {
  .modal.modal-crew-day { width: 96vw; }
  .crew-correction-top,
  .crew-correction-after { grid-template-columns: 1fr; }
  .crew-correction-opening { flex-wrap: wrap; }
  .crew-correction-section-label { width: 100%; }
  .crew-correction-total { grid-template-columns: 1fr auto; }
  .crew-correction-total > .ghost-button { grid-column: 1 / -1; justify-self: end; }
  .crew-correction-chart { min-height: 0; }
}

/* Tagesplanung nach dem ruhigen, kartenbasierten Referenzlayout. Die Regeln stehen
   bewusst nach der älteren Kompaktansicht, damit bestehende Selektoren und Handler
   kompatibel bleiben, während nur die Darstellung ausgetauscht wird. */
.modal.modal-crew-day {
  display: flex;
  flex-direction: column;
  width: min(940px, 94vw);
  max-width: 940px;
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 15px;
  box-shadow: 0 22px 58px rgba(20, 45, 36, .2);
}
.modal-crew-day .modal-body { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 0 14px 14px; }
.modal-crew-day .crew-correction-modal-header { position: relative; z-index: 3; flex: 0 0 auto; min-height: 68px; padding: 13px 14px; background: var(--surface); }
.crew-correction-modal-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crew-correction-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 72%, #003f36)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 5px 13px rgba(17, 120, 101, .16); }
.crew-correction-heading-icon svg { width: 20px; height: 20px; }
.crew-correction-modal-heading h2 { font-size: 21px; line-height: 1.12; letter-spacing: -.022em; }
.crew-correction-modal-heading h2 span { margin-left: 8px; color: var(--accent); font-weight: 760; }
.crew-correction-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 9px; font-weight: 650; }
.crew-correction-meta > span { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 999px; background: var(--surface-soft); white-space: nowrap; }
.crew-correction-meta > span:first-child { border-color: #cbdc91; background: #f1f7dc; color: #587918; }
.crew-correction-meta > span:first-child i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent); }
.crew-correction-meta > span:first-child.is-closed { border-color: color-mix(in srgb, var(--line) 82%, transparent); background: var(--surface-soft); color: var(--muted); }
.crew-correction-meta svg { width: 12px; height: 12px; }
.crew-correction-modal-header > .icon-button { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; }

.crew-day-adjust-modal { gap: 10px; padding-top: 12px; }
.crew-correction-top { grid-template-columns: minmax(230px, .72fr) minmax(230px, .72fr) minmax(330px, 1.1fr); gap: 9px; }
.crew-correction-card { position: relative; display: flex; min-width: 0; min-height: 126px; flex-direction: column; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 11px; background: var(--surface); box-shadow: 0 2px 7px rgba(25, 52, 43, .03); }
.crew-correction-card > header { display: flex; align-items: center; gap: 7px; min-height: 24px; color: var(--ink); font-size: 12px; }
.crew-correction-card > header > span:first-child { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.crew-correction-card > header svg { width: 13px; height: 13px; }
.crew-correction-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.crew-correction-card > footer > .ghost-button { width: 29px; min-width: 29px; min-height: 29px; padding: 0; }
.crew-correction-opening { align-items: stretch; gap: 7px; min-height: 126px; padding: 11px 12px; }
.crew-correction-opening-fields { display: grid; grid-template-columns: 76px auto 76px; width: 100%; align-self: center; align-items: end; justify-content: center; gap: 7px; padding: 0; }
.crew-correction-opening-fields > i { display: grid; height: 28px; align-self: end; place-items: center; color: var(--muted); font-style: normal; line-height: 1; }
.crew-correction-opening label { display: grid; align-items: start; gap: 3px; font-size: 10px; }
.crew-correction-opening .time-field2 { width: 76px; }
.crew-correction-opening .time-field2 .tf-input { width: 76px; height: 28px; min-height: 28px; padding: 0 5px; border-color: transparent; border-radius: 7px; background: var(--surface-soft); font-size: 11px; line-height: 1; text-align: center; box-sizing: border-box; }
.crew-correction-opening .time-field2 .tf-input:hover,
.crew-correction-opening .time-field2 .tf-input:focus { border-color: var(--accent); }
.crew-correction-opening .time-field2[data-tf-format="12h"] .tf-input { width: 76px; }
.crew-correction-opening .crew-correction-closed { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; color: var(--muted); font-size: 9px; cursor: pointer; }
.crew-correction-closed input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 21px;
  min-height: 21px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, var(--surface));
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.crew-correction-closed input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform 160ms ease;
}
.crew-correction-closed input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
.crew-correction-closed input[type="checkbox"]:checked::before { transform: translateX(15px); }
.crew-correction-closed input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.crew-correction-reset-icon { display: inline-grid; width: 26px; min-width: 26px; height: 26px; min-height: 26px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.crew-correction-reset-icon svg { width: 15px; height: 15px; }
.crew-correction-reset-icon:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.crew-correction-reset-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.crew-correction-reset-icon:disabled { opacity: .28; cursor: default; }
.crew-correction-total { grid-template-columns: 1fr; align-items: stretch; gap: 4px; padding: 11px 12px; }
.crew-correction-total .crew-correction-stepper { grid-template-columns: 24px minmax(110px, 1fr) 24px; flex: 1; align-content: center; gap: 8px; }
.crew-step-button.ghost-button { position: relative; display: block; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 6px; font-size: 0; line-height: 0; }
.crew-step-button::before,
.crew-step-button.is-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 1.5px; border-radius: 999px; background: currentColor; transform: translate(-50%, -50%); pointer-events: none; }
.crew-step-button.is-plus::after { width: 1.5px; height: 9px; }
.crew-correction-total-value { min-width: 0; gap: 3px; }
.crew-correction-total-value strong { font-size: 21px; letter-spacing: -.02em; }
.crew-correction-total-value small { font-size: 9px; font-weight: 600; }
.crew-correction-total > footer { margin-top: 0; }
.crew-correction-references { display: flex; grid-template-rows: none; gap: 5px; min-height: 126px; padding: 11px 12px; }
.crew-correction-references > p { min-height: 25px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.crew-correction-ref-add .dp-trigger { min-height: 34px; border-radius: 8px; font-size: 10px; }
.crew-correction-references > footer { min-height: 28px; }
.crew-correction-ref-chips { flex: 1 1 auto; align-items: center; }
.crew-correction-ref-chips .hint { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 10px; white-space: nowrap; }
.crew-correction-ref-chips .hint svg { width: 12px; height: 12px; }

.crew-correction-info-strip { display: grid; grid-template-columns: .9fr .9fr 2.2fr; gap: 7px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--line) 88%, transparent); border-radius: 10px; background: var(--surface); }
.crew-correction-info-tile { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 36px; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface)); }
.crew-correction-info-tile > span:first-child { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.crew-correction-info-tile svg { width: 13px; height: 13px; }
.crew-correction-info-tile > div { display: grid; min-width: 0; gap: 1px; }
.crew-correction-info-tile strong { font-size: 10px; }
.crew-correction-info-tile small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.crew-correction-event-tile { display: grid; grid-template-columns: 23px minmax(90px, 1fr) auto auto; }
.crew-correction-event-copy { display: grid; min-width: 0; gap: 1px; }
.crew-correction-event-meta { display: inline-flex; min-width: 0; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--line) 78%, transparent); color: var(--muted); }
.crew-correction-event-meta svg { flex: 0 0 auto; }
.crew-correction-event-meta small { max-width: 115px; }
.crew-correction-info-tile.has-value { font-weight: 650; }
.crew-correction-info-tile.is-vacation.has-value { border-color: color-mix(in srgb, #2879c8 38%, var(--line)); background: color-mix(in srgb, #2879c8 12%, var(--surface)); }
.crew-correction-info-tile.is-vacation.has-value > span:first-child { background: color-mix(in srgb, #2879c8 18%, var(--surface)); color: #226bab; }
.crew-correction-info-tile.is-holiday.has-value { border-color: color-mix(in srgb, #d17a12 42%, var(--line)); background: color-mix(in srgb, #f0a43c 16%, var(--surface)); }
.crew-correction-info-tile.is-holiday.has-value > span:first-child { background: color-mix(in srgb, #f0a43c 24%, var(--surface)); color: #a75b05; }
.crew-correction-info-tile.is-event.has-value { border-color: color-mix(in srgb, #8b5bb6 40%, var(--line)); background: color-mix(in srgb, #9b6ac4 13%, var(--surface)); }
.crew-correction-info-tile.is-event.has-value > span:first-child { background: color-mix(in srgb, #9b6ac4 20%, var(--surface)); color: #77459f; }

.crew-correction-chart { overflow-x: auto; border-radius: 13px; box-shadow: 0 2px 8px rgba(25, 52, 43, .025); }
.crew-correction-chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 11px 12px 2px; }
.crew-correction-chart-head > div:first-child { display: grid; gap: 3px; }
.crew-correction-chart-head strong { font-size: 13px; }
.crew-correction-chart-head strong span { color: var(--muted); font-weight: 500; }
.crew-correction-chart-head small { color: var(--muted); font-size: 9px; }
.crew-correction-legend { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 9px; }
.crew-correction-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.crew-correction-legend span.is-muted { opacity: .58; }
.crew-correction-legend i { display: inline-block; width: 18px; height: 4px; border-radius: 999px; background: var(--accent); }
.crew-correction-legend i.reference { height: 0; border-top: 1px dashed color-mix(in srgb, var(--muted) 72%, transparent); border-radius: 0; background: transparent; }
.crew-correction-chart svg { min-width: 820px; }
.crew-correction-chart .axis-label { font-size: 7.5px; }
.crew-correction-grid-line { stroke: color-mix(in srgb, var(--line) 52%, transparent); stroke-width: 1; }
.crew-correction-y-label { fill: color-mix(in srgb, var(--muted) 82%, transparent); }
.crew-correction-reference-line { fill: none; stroke: color-mix(in srgb, var(--muted) 72%, transparent); stroke-width: 1.5; stroke-dasharray: 5 5; pointer-events: none; }
.crew-correction-chart .bar { fill: color-mix(in srgb, var(--accent) 88%, #087464); }
.crew-day-adjust-modal .crew-correction-svg-hour .bar {
  transform-box: fill-box; transform-origin: center bottom;
  animation: crewCorrectionBarIn 460ms cubic-bezier(.2, .72, .24, 1) both;
  animation-delay: calc(var(--crew-bar-index, 0) * 18ms);
}
.crew-day-adjust-modal .crew-correction-svg-hour .crew-correction-svg-value:not(.is-zero) {
  animation: crewCorrectionValueIn 220ms ease-out both;
  animation-delay: calc(180ms + var(--crew-bar-index, 0) * 18ms);
}
.crew-day-adjust-modal .crew-correction-chart.is-drag-settled .crew-correction-svg-hour .bar,
.crew-day-adjust-modal .crew-correction-chart.is-drag-settled .crew-correction-svg-hour .crew-correction-svg-value:not(.is-zero) {
  animation: none;
}
@keyframes crewCorrectionBarIn {
  from { opacity: .28; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes crewCorrectionValueIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.crew-correction-closed-hour { fill: color-mix(in srgb, var(--muted) 3%, transparent); }
.crew-correction-bar-grip { opacity: .18; }

.crew-correction-after { grid-template-columns: minmax(0, .92fr) minmax(0, .92fr) minmax(330px, 2.1fr); gap: 9px; }
.crew-adjust-row { display: grid; grid-template-rows: auto 1fr auto; min-height: 100px; align-content: stretch; padding: 10px 11px; border-radius: 10px; }
.crew-adjust-row > header { display: flex; align-items: center; gap: 8px; }
.crew-adjust-row > header > strong { font-size: 11px; }
.crew-adjust-icon { display: inline-flex; color: var(--accent); }
.crew-adjust-icon svg { width: 16px; height: 16px; }
.crew-adjust-row > div { width: auto; grid-template-columns: 24px 96px 24px; align-self: center; align-items: center; justify-content: center; justify-self: center; gap: 8px; }
.crew-adjust-row .crew-step-button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; }
.crew-adjust-row strong[data-crew-adjust-value] { display: grid; min-height: 24px; place-items: center; font-size: 16px; font-weight: 760; line-height: 1; }
.crew-adjust-row > small { color: var(--muted); font-size: 9px; text-align: center; }
.crew-correction-notes { position: relative; grid-template-rows: auto 1fr auto; min-height: 100px; gap: 5px; padding: 10px 11px; border-radius: 10px; }
.crew-correction-notes > span { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.crew-correction-notes > span svg { width: 16px; height: 16px; color: var(--muted); }
.crew-correction-notes textarea { min-height: 52px; padding: 8px; border-radius: 7px; font-size: 10px; line-height: 1.4; }
.crew-correction-notes > small { justify-self: end; color: var(--muted); font-size: 9px; font-weight: 500; }
.crew-correction-actions { position: sticky; z-index: 2; bottom: -14px; margin: 0 -14px -14px; padding: 8px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }

@media (max-width: 1020px) {
  .crew-correction-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-correction-references { grid-column: 1 / -1; }
  .crew-correction-info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-correction-event-tile { grid-column: 1 / -1; }
  .crew-correction-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-correction-notes { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .modal.modal-crew-day { width: 98vw; max-height: 98vh; border-radius: 13px; }
  .modal-crew-day .modal-body { padding-inline: 12px; }
  .modal-crew-day .crew-correction-modal-header { padding: 13px 12px; }
  .crew-correction-heading-icon { width: 42px; height: 42px; flex-basis: 42px; }
  .crew-correction-modal-heading h2 { font-size: 18px; }
  .crew-correction-modal-heading h2 span { display: block; margin: 3px 0 0; }
  .crew-correction-meta { flex-wrap: wrap; }
  .crew-correction-meta > span:last-child { width: 100%; }
  .crew-correction-top,
  .crew-correction-info-strip,
  .crew-correction-after { grid-template-columns: 1fr; }
  .crew-correction-references,
  .crew-correction-event-tile,
  .crew-correction-notes { grid-column: auto; }
  .crew-correction-event-tile { grid-template-columns: 23px minmax(0, 1fr); }
  .crew-correction-event-meta { grid-column: 2; padding: 2px 0 0; border-left: 0; }
  .crew-correction-chart-head { align-items: flex-start; flex-direction: column; }
  .crew-correction-actions { margin-inline: -12px; padding-inline: 12px; }
  .crew-correction-actions .ghost-button,
  .crew-correction-actions .primary-button { min-width: 0; flex: 1 1 0; }
}

/* Lokale Reparatur: je betroffener Schicht eine eigene Entscheidung. */
.modal.modal-crew-repair { width: min(620px, 94vw); max-width: 620px; }
.crew-repair-modal > p { color: var(--muted); margin-top: 0; }
/* Tageswahl als Kalender: links das Raster des veröffentlichten Zeitraums, rechts die
   Person. Der Monat ist keine Auswahl – es stehen nur die Monate da, die veröffentlicht
   wurden, und Tage außerhalb des Zeitraums sind sichtbar, aber nicht anklickbar. */
.crew-repair-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.crew-repair-calendar { display: grid; gap: 6px; }
.crew-repair-caption { font-size: 12px; color: var(--muted); }
.crew-repair-month { display: grid; gap: 4px; }
.crew-repair-month-name { font-size: 12px; font-weight: 700; }
.crew-repair-weekdays, .crew-repair-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.crew-repair-weekdays span { text-align: center; font-size: 10px; color: var(--muted); }
.crew-repair-day { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.crew-repair-day.is-empty { border: 0; background: transparent; }
.crew-repair-day.is-outside { border-style: dashed; background: transparent; color: var(--muted); opacity: .45; cursor: default; }
.crew-repair-day:not(.is-outside):not(.is-empty):hover { border-color: var(--accent, #1f7564); }
.crew-repair-day.is-selected { border-color: var(--accent, #1f7564); background: var(--accent, #1f7564); color: #fff; font-weight: 700; }

/* Wochenende und Feiertag: An diesen Tagen sieht der Plan anders aus, und der gesuchte
   Reparaturtag wird meist über sie gefunden. Der Feiertag gewinnt gegen das Wochenende,
   weil er die seltenere und folgenreichere Angabe ist. Die Auswahl schlägt beides. */
.crew-repair-day.is-weekend:not(.is-selected) { background: color-mix(in srgb, var(--accent, #1f7564) 7%, var(--surface)); }
.crew-repair-day.is-holiday:not(.is-selected) { background: color-mix(in srgb, #c2410c 14%, var(--surface)); border-color: color-mix(in srgb, #c2410c 35%, var(--line)); }
.crew-repair-day.is-holiday:not(.is-selected):not(.is-outside) { font-weight: 700; }

/* Tagesinfo am Kalender. Als reines CSS-Overlay im Button statt als eigenes,
   positioniertes Element: Der Dialog scrollt, und ein per JS gesetzter Tooltip müsste
   bei jedem Scroll nachgeführt werden. `title` schied aus, weil dort keine Grafik geht. */
.crew-repair-day { position: relative; }
.crew-repair-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 40; display: none; width: max-content; max-width: 190px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  color: var(--ink); box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  font-size: 11px; font-weight: 400; text-align: left; pointer-events: none;
}
.crew-repair-day:hover .crew-repair-tip,
.crew-repair-day:focus-visible .crew-repair-tip,
.crew-repair-day.is-peek .crew-repair-tip { display: grid; gap: 4px; }
/* Gedrückthalten soll den Hinweis zeigen, nicht die iOS-Lupe oder das Systemmenü. */
.crew-repair-day { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* In den jeweils zwei äußeren Rasterspalten würde der 190 px breite Tooltip aus dem
   schmalen Kalender und damit aus dem scrollenden Dialog laufen. An beiden Rändern
   nach innen ausrichten, damit Text und Grafik vollständig sichtbar bleiben. */
.crew-repair-grid > .crew-repair-day:nth-child(7n + 1) .crew-repair-tip,
.crew-repair-grid > .crew-repair-day:nth-child(7n + 2) .crew-repair-tip { left: 0; transform: none; }
.crew-repair-grid > .crew-repair-day:nth-child(7n + 6) .crew-repair-tip,
.crew-repair-grid > .crew-repair-day:nth-child(7n) .crew-repair-tip { left: auto; right: 0; transform: none; }
.crew-repair-tip-head { font-weight: 700; }
.crew-repair-tip-rev, .crew-repair-tip-cov { color: var(--muted); }
.crew-repair-tip-spark { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
.crew-repair-tip-spark i { flex: 1 1 0; min-width: 2px; border-radius: 1px; background: var(--muted); }
.crew-repair-tip-spark i.under { background: #dc2626; }
.crew-repair-tip-spark i.ok { background: #16a34a; }
.crew-repair-tip-spark i.over { background: #d97706; }

.crew-repair-employee { display: grid; min-width: 0; width: 100%; gap: 6px; font-size: 12px; color: var(--muted); }
.crew-repair-employee .xsel { min-width: 0; max-width: 100%; }
.crew-repair-employee .xsel-btn { min-width: 0; max-width: 100%; }
.crew-repair-employee .xsel-label { min-width: 0; flex: 1 1 auto; }
@media (max-width: 640px) { .crew-repair-pick { grid-template-columns: 1fr; } }
.crew-repair-shifts { display: grid; gap: 10px; margin: 14px 0; }
.crew-repair-shift { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.crew-repair-shift-head { font-size: 13px; }
/* Die Auswahlfelder nutzen das Dropdown der Seite (xsel) statt der Systemauswahl.
   Die Wege tragen ihre Begründung im Text und sind länger als eine Zeile – anders als
   sonst darf die Liste hier umbrechen, statt beliebig breit zu werden. */
.crew-repair-shift .xsel, .crew-repair-modal .form-grid .xsel { width: 100%; min-width: 0; }
.crew-repair-xsel .xsel-btn { min-height: 38px; }
.crew-repair-xsel-menu { max-width: min(560px, 92vw); }
.crew-repair-xsel-menu .xsel-opt { white-space: normal; line-height: 1.35; }
.crew-repair-shift .hint { margin: 0; color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .crew-settings-layout { grid-template-columns: 1fr; }
  .crew-settings-list { border-right: 0; border-bottom: 1px solid var(--line); margin: -16px -16px 0; padding: 16px; }
  .crew-settings-list [data-crew-settings-employees] { flex: none; max-height: 150px; }
  .crew-settings-detail { padding: 16px 0 0; }
  .crew-planning-grid, .crew-edge-rule-grid { grid-template-columns: 1fr; }
  .crew-free-weekend-rule { grid-column: auto; }
  .crew-rule-group-head { flex-direction: column; }
  .crew-station-pills { justify-content: flex-start; }
  /* Einspaltig gibt es nichts nebeneinander zu scrollen: Der Dialog scrollt wieder am
     Stück, nur die Kopfzeile bleibt stehen. */
  .modal-crew-settings .modal-body { overflow: auto; }
  .modal-crew-settings .crew-settings-layout { height: auto; }
  .modal-crew-settings .crew-settings-detail { overflow: visible; }
}

/* ===== Klartafel 1a – Claude-Design-Handoff ===== */
.crew-klartafel {
  --crew-cold: #2f3e9e;
  --crew-warm: #e08a18;
  --crew-signal: #d9483b;
  --crew-okay: #18b889;
  --crew-ink: #1b1d22;
  --crew-muted: #6e7480;
  --crew-line: #e6e2db;
  --crew-soft: #faf8f5;
  /* Segmentschalter und Zahlenfelder teilen sich Wanne und Kachel. Als Token, weil die
     Werte im Dunkelmodus umgekehrt liegen – eine Mischung gegen #fff ergäbe dort eine
     fast weiße Wanne mit fast weißer Schrift. */
  --crew-seg-bg: #eceae6;
  --crew-seg-active: var(--accent);
  --crew-seg-active-ink: #fff;
  --crew-seg-line: var(--line);
  --crew-seg-shadow: none;
  color: var(--crew-ink);
  font-family: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.crew-klartafel > .toolbar {
  margin-bottom: 12px;
}
/* Gleicher Seitenkopf wie im Reiter „Bedarf": große Überschrift und derselbe ruhige
   Grünverlauf. Die Planungsfelder beginnen darunter auf einer
   eigenen Zeile und nutzen dort die gesamte verfügbare Breite. */
.crew-klartafel > .crew-control-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 14px; align-items: start; min-height: 129px; box-sizing: border-box;
  padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(135deg, #fff 0%, #edf6f2 100%);
  box-shadow: 0 6px 18px rgba(20, 31, 28, .04);
}
.crew-control-hero-copy { min-width: 0; }
.crew-control-hero-copy h1 {
  margin: 3px 0 6px; color: var(--ink); font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.08; letter-spacing: normal;
}
.crew-control-hero-copy p {
  max-width: 760px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45;
}
.crew-klartafel .crew-toolbar-right { gap: 10px; }
.crew-klartafel .crew-toolbar-view { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 1px; scrollbar-width: thin; }
.crew-klartafel .crew-toolbar-view > * { flex: 0 0 auto; }
/* Zweite Zeile: Stellschrauben der Erstellung. Sie darf umbrechen – anders als die
   erste Zeile, die als Ganzes horizontal scrollt. */
.crew-klartafel .crew-toolbar-settings { flex-wrap: wrap; gap: 8px 16px; align-items: center; }
/* Einstellungen und Erstellen bleiben als Paar zusammen und rutschen gemeinsam
   nach rechts bzw. gemeinsam um. */
.crew-toolbar-actions { display: inline-flex; align-items: center; gap: 8px; }
.crew-klartafel .crew-toolbar-settings > .crew-toolbar-actions { margin-left: auto; }
.crew-klartafel .view-title { font-size: 19px; letter-spacing: -.02em; }
/* Planungsgrundlage wie der Gruppen-Schalter der Urlaubsverteilung: eine helle
   Wanne mit feinem Rahmen, die gewählte Variante als grüne Kachel. */
.crew-klartafel .crew-modeswitch {
  gap: 2px; padding: 3px; border-color: var(--crew-seg-line); border-radius: 12px;
  background: var(--crew-seg-bg);
}
.crew-klartafel .crew-modeswitch .crew-mode {
  padding: 7px 14px; border-radius: 9px; background: transparent; color: var(--crew-muted, #6b6f76);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.crew-klartafel .crew-modeswitch .crew-mode + .crew-mode { border-left: 0; }
.crew-klartafel .crew-modeswitch .crew-mode.active,
.crew-klartafel .crew-buildswitch .crew-mode.active {
  background: var(--crew-seg-active); color: var(--crew-seg-active-ink); font-weight: 750;
  box-shadow: var(--crew-seg-shadow);
}
.crew-klartafel .crew-modeswitch .crew-mode:not(.active):hover:not(:disabled) { color: var(--crew-ink); background: color-mix(in srgb, var(--crew-ink) 5%, transparent); }
.crew-klartafel .crew-modeswitch .crew-mode:disabled { opacity: .55; cursor: default; }
/* Zielproduktivität und Rechenzeit als Feldkapseln: dieselbe Wanne wie der
   Segmentschalter, Beschriftung und Einheit grau, der Wert kräftig und mit
   Tabellenziffern – so springt beim Vergleichen nichts. Der Sicherheitsregler trägt
   dieselbe Klasse, bleibt aber ausgenommen; er hat eine eigene Form. */
.crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control) {
  gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px;
  background: var(--crew-seg-bg); color: var(--crew-muted); font-weight: 600;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control):focus-within {
  border-color: color-mix(in srgb, var(--crew-cold) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--crew-cold) 20%, transparent);
}
.crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control) input {
  width: 78px; padding: 5px 40px 5px 2px; border: 0; border-radius: 8px; background: transparent;
  color: var(--crew-ink); font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control) input:focus {
  outline: none; border-color: transparent;
}
/* Ein deaktiviertes Feld während der Berechnung soll ruhig wirken, nicht defekt. */
.crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control):has(input:disabled) { opacity: .55; }
.crew-klartafel .crew-settings-button { margin-left: 0; }
.crew-klartafel .primary-button { background: var(--crew-cold); border-color: var(--crew-cold); }
.crew-klartafel .crew-klartafel 
.crew-klartafel .crew-create-progress { height: 6px; margin: -4px 2px 10px; }
.crew-klartafel .crew-create-progress > span { background: linear-gradient(90deg, #6478d8, var(--crew-cold)); }

.crew-kpi-strip {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px;
  overflow: hidden; border: 1px solid var(--crew-line); border-radius: 13px; background: #fff;
}
.crew-kpi-strip > div { padding: 10px 14px; border-right: 1px solid var(--crew-line); }
.crew-kpi-strip > div:last-child { border-right: 0; }
.crew-kpi-strip span { display: block; margin-bottom: 3px; color: var(--crew-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.crew-kpi-strip strong { font: 700 15px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.crew-kpi-strip small { display: block; margin-top: 2px; color: var(--crew-muted); font-size: 8px; }
.crew-kpi-strip > div:nth-child(1) strong { color: #a66308; }
.crew-kpi-strip > div:nth-child(3) strong,
.crew-kpi-strip > div:nth-child(5) strong { color: var(--crew-signal); }
.crew-kpi-strip > div:nth-child(4) strong { color: var(--crew-cold); }

/* Die linke Planfläche bestimmt die Zeilenhöhe. `stretch` würde sie zunächst auf die
   natürliche Höhe der langen Mitarbeiterliste ziehen; die JS-Messung bekäme dann genau
   diese falsche Höhe zurück und könnte die Seitenleiste nicht mehr verkürzen. */
.crew-klartafel .crew-layout { gap: 10px; align-items: flex-start; }
.crew-klartafel .crew-main { box-sizing: border-box; padding: 11px; border: 1px solid var(--crew-line); border-radius: 15px; background: #fff; min-height: 580px; }
.crew-legend { display: flex; align-items: center; gap: 12px; margin: 0 2px 10px; color: var(--crew-muted); font-size: 10px; }
.crew-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.crew-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--legend-color); }
.crew-legend i.status { border-radius: 50%; }
.crew-legend i.under { background: var(--crew-signal); }
.crew-legend i.ok { background: var(--crew-okay); }
.crew-legend i.over { background: var(--crew-warm); }
.crew-legend-gap { flex: 1; }

.crew-klartafel .crew-strip { align-items: flex-start; gap: 6px; padding: 1px 1px 8px; }
.crew-klartafel .crew-strip .crew-daycol {
  position: relative; flex: 0 0 calc((100% - 36px) / 7); min-width: 0; max-height: none;
  border-color: var(--crew-line); border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(27,29,34,.03);
}
.crew-klartafel .crew-daycol::before { content: ""; height: 4px; flex: 0 0 4px; background: var(--crew-cold); }
.crew-klartafel .crew-daycol.productivity-ok::before { background: var(--crew-okay); }
.crew-klartafel .crew-daycol.productivity-under::before { background: var(--crew-warm); }
.crew-klartafel .crew-daycol.productivity-over::before { background: var(--crew-signal); }
.crew-klartafel .crew-daycol.is-selected { box-shadow: 0 0 0 2px var(--crew-cold), 0 9px 22px rgba(47,62,158,.14); }
/* Wochenenden verwenden dasselbe kühle Blaugrau wie der Dropdown-Kalender.
   Dadurch bleiben sie klar vom warmen Feiertagsorange unterscheidbar. */
.crew-klartafel .crew-daycol.is-weekend {
  border-color: #aeb9d2;
  background: #edf1f8;
  box-shadow: inset 0 0 0 1px rgba(79, 111, 173, .10), 0 2px 8px rgba(27,29,34,.05);
}
.crew-klartafel .crew-daycol.is-weekend .crew-dayhead-row { background: #dde4f1; }
.crew-klartafel .crew-daycol.is-holiday {
  border-color: #d58b66;
  background: #fff2e8;
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .10), 0 2px 8px rgba(27,29,34,.05);
}
.crew-klartafel .crew-daycol.is-holiday .crew-dayhead-row { background: #f8dfcd; }
.crew-klartafel .crew-daycol.is-holiday .crew-dow { display: inline-flex; align-items: center; gap: 4px; }
.crew-klartafel .crew-daycol.is-holiday .crew-dow::after {
  content: "Feiertag";
  padding: 1px 4px;
  border-radius: 999px;
  color: #8e310f;
  background: rgba(194, 65, 12, .12);
  font-size: 6px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .02em;
}
/* Der Streifen rastet an den Kartenanfängen ein. Beim gewählten Tag rastet er
   mittig: Sonst zog das Nachrasten die eben zentrierte Karte sofort wieder an
   den linken Rand oder ganz auf die alte Position zurück. */
.crew-klartafel .crew-strip .crew-daycol.is-selected { scroll-snap-align: center; }
.crew-klartafel .crew-strip .crew-daycol.is-selected.is-holiday {
  background: color-mix(in srgb, var(--crew-cold) 8%, #fff2e8);
  box-shadow: 0 0 0 2px var(--crew-cold), 0 9px 22px rgba(47,62,158,.14);
}
/* Auch Samstag und Sonntag verwenden denselben blauen Auswahlring wie Werktage. */
.crew-klartafel .crew-strip .crew-daycol.is-selected.is-weekend {
  box-shadow: 0 0 0 2px var(--crew-cold), 0 9px 22px rgba(47,62,158,.14);
}
/* Die Produktivitaets-Pille steht nicht mehr IM Kopfknopf, sondern daneben. Nur so
   laesst sie sich in der schmalen Ansicht rechts neben den ganzen Feldstapel stellen
   (siehe Rasterlayout im Mobil-Block). Breit sieht die Zeile dadurch unveraendert aus. */
.crew-dayhead-row { display: flex; align-items: center; }
.crew-dayhead-row > button.crew-dayhead { flex: 1 1 auto; min-width: 0; }
.crew-dayhead-row > .crew-day-productivity { flex: 0 0 auto; margin-right: 7px; }
.crew-klartafel button.crew-dayhead { min-height: 34px; padding: 6px 7px 3px; border-bottom: 0; border-radius: 0; align-items: center; gap: 3px; }
.crew-klartafel .crew-day-date { display: inline-flex; min-width: 0; align-items: baseline; gap: 4px; }
.crew-klartafel .crew-dayhead .crew-dow { font-size: 12px; text-transform: none; letter-spacing: 0; }
.crew-klartafel .crew-dayhead .crew-date { color: #8e8a82; font: 600 8px/1.2 "IBM Plex Mono", ui-monospace, monospace; }
.crew-klartafel .crew-day-productivity { padding: 3px 4px; color: #087967; background: #dcf4ec; font-size: 7px; }
.crew-klartafel .crew-day-productivity.under { color: #9a6418; background: #f8ead1; }
.crew-klartafel .crew-day-productivity.over { color: #9f3028; background: #f8dfdb; }
.crew-klartafel .crew-daymeta { align-items: flex-start; gap: 2px; min-height: 0; padding: 1px 7px 4px; border-bottom: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; text-align: left; }
.crew-klartafel .crew-daymeta-rev { justify-content: flex-start; color: var(--crew-ink); font-size: 12px; font-weight: 750; }
.crew-klartafel .crew-daymeta-h { justify-content: flex-start; font-size: 8px; }
.crew-card-coverage { height: 4px; margin: 0 7px 5px; overflow: hidden; border-radius: 999px; background: #ece9e3; }
.crew-card-coverage span { display: block; height: 100%; border-radius: inherit; background: var(--crew-okay); animation: dpBar .55s ease both; }
.crew-klartafel .status-under .crew-card-coverage span { background: var(--crew-signal); }
.crew-klartafel .status-over .crew-card-coverage span { background: var(--crew-warm); }
.crew-card-spark { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 48px; padding: 2px 7px 7px; border-bottom: 1px solid var(--crew-line); }
.crew-card-spark i { flex: 1; min-width: 3px; max-width: 7px; border-radius: 2px 2px 1px 1px; background: var(--crew-okay); opacity: 1; }
.crew-card-spark i.under { background: var(--crew-signal); }
.crew-card-spark i.over { background: var(--crew-warm); }
.crew-klartafel .crew-daybody { min-height: 0; max-height: none; padding: 4px 5px 6px; gap: 3px; overflow: visible; }
.crew-klartafel .crew-shift-block {
  display: flex; flex-direction: column; gap: 3px; min-height: 0; padding-bottom: 64px; box-sizing: border-box;
}
.crew-klartafel .crew-shift-block-1,
.crew-klartafel .crew-shift-block-2,
.crew-klartafel .crew-shift-block-3 { margin-top: 6px; padding-top: 6px; border-top: 1px solid #d8d3cb; }
.crew-klartafel .crew-shift-block-3 { display: none; }
.crew-klartafel .crew-month.has-night-shift-block .crew-shift-block-3 { display: flex; }
.crew-klartafel .crew-month.has-synced-shift-blocks .crew-shift-block-0 { height: var(--crew-shift-block-0-height); }
.crew-klartafel .crew-month.has-synced-shift-blocks .crew-shift-block-1 { height: var(--crew-shift-block-1-height); }
.crew-klartafel .crew-month.has-night-shift-block.has-synced-shift-blocks .crew-shift-block-2 { height: var(--crew-shift-block-2-height); }
.crew-klartafel .crew-month.has-expanded-day:not(.has-employee-focus):not(.has-month-employee-highlight) .crew-daybody { display: none; }
.crew-klartafel .crew-tile { padding: 3px 4px 3px 6px; border: 1px solid #efebe5; border-left: 3px solid var(--station-color, var(--crew-line)); border-radius: 5px; background: #fff; }
.crew-klartafel button.crew-tile[data-crew-open-shift] { width: 100%; appearance: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.crew-klartafel button.crew-tile[data-crew-open-shift]:hover,
.crew-klartafel button.crew-tile[data-crew-open-shift].is-selected { box-shadow: 0 0 0 2px var(--crew-signal); }
/* Schichtkarte unter dem Zeiger hervorheben. Sie ist klein und steht dicht neben den
   anderen; ohne Hervorhebung ist beim Zeigen mit Maus oder Stift nicht sicher zu sehen,
   welche Karte gemeint ist – und welche ein Rechtsklick treffen würde. `is-touched`
   setzt derselbe Effekt beim Antippen mit dem Finger (Hover gibt es dort nicht). */
.crew-klartafel .crew-tile { transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease; }
html:not(.is-touch) .crew-klartafel .crew-tile:hover,
.crew-klartafel .crew-tile.is-touched,
.crew-klartafel .crew-tile:focus-visible,
.crew-klartafel .crew-tile:focus-within { border-color: var(--station-color, var(--crew-line)); box-shadow: 0 2px 8px rgba(27,29,34,.14); transform: translateY(-1px); }
.crew-klartafel .crew-tile.is-open.ghost-shift { border-color: #efb2ac; border-left-color: var(--crew-signal); background: #fce7e5; opacity: 1; }
.crew-klartafel .crew-tile.is-open.ghost-shift .crew-tile-time,
.crew-klartafel .crew-tile.is-open.ghost-shift .crew-tile-station,
.crew-klartafel .crew-tile.is-open.ghost-shift .crew-empty { color: #9f3028; }
.crew-klartafel .crew-tile-time {
  font: 700 11.5px/1.2 "Inter Shift Times", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.crew-klartafel .crew-tile-station {
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
  font-size: var(--crew-station-font-size, 7.5px);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .035em;
  white-space: nowrap;
}
.crew-klartafel .crew-tile-emps { margin-top: 1px; }
/* Nur in der schmalen Ansicht sichtbar (siehe Media Query weiter unten) – auf dem
   breiten Bildschirm steht die Zeit ohnehin ausgeschrieben neben der Kachel. */
.crew-klartafel .crew-tile-axis { display: none; }
.crew-klartafel .crew-emp-chip { padding: 0; border-radius: 0; background: transparent; font-size: 10.5px; line-height: 1.2; overflow-wrap: anywhere; }
.crew-klartafel .crew-scrollhint { margin-bottom: 0; }
/* Klick auf einen Mitarbeiternamen in der Tagesansicht: Die oberen Tageskarten zeigen
   statt Umsatz/Grafik nur Zeit und Station des persoenlichen Dienstes. */
.crew-card-employee-plan { min-height: 82px; padding: 8px 6px; border-top: 1px solid var(--crew-line); --wish-urlaub: #d99724; --wish-krank: #c2503f; --wish-sonstige: #7a6cc4; }
.crew-card-employee-shifts { display: flex; min-height: 55px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.crew-card-employee-shift { display: flex; min-width: 0; flex-direction: column; align-items: center; text-align: center; }
.crew-card-employee-shift strong { color: var(--crew-ink); font: 750 11.5px/1.25 "Inter Shift Times", Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.crew-card-employee-shift small { margin-top: 2px; color: var(--crew-muted); font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crew-card-employee-empty { display: flex; align-items: center; justify-content: center; min-height: 45px; color: var(--crew-muted); font-size: 9px; font-style: italic; }
.crew-card-employee-plan.absence-urlaub { background: color-mix(in srgb, var(--wish-urlaub) 20%, var(--surface)); }
.crew-card-employee-plan.absence-krank { background: color-mix(in srgb, var(--wish-krank) 20%, var(--surface)); }
.crew-card-employee-plan.absence-sonstige { background: color-mix(in srgb, var(--wish-sonstige) 20%, var(--surface)); }
.crew-card-employee-absence { align-self: center; border-radius: 999px; padding: 2px 7px; background: var(--surface); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.crew-card-employee-plan.absence-urlaub .crew-card-employee-absence { color: color-mix(in srgb, var(--wish-urlaub) 75%, var(--ink)); }
.crew-card-employee-plan.absence-krank .crew-card-employee-absence { color: color-mix(in srgb, var(--wish-krank) 75%, var(--ink)); }
.crew-card-employee-plan.absence-sonstige .crew-card-employee-absence { color: color-mix(in srgb, var(--wish-sonstige) 75%, var(--ink)); }
.crew-klartafel .crew-tile.is-employee-match { border-color: var(--station-color, var(--crew-line)); box-shadow: 0 0 0 1.5px var(--crew-cold, #1f7564); }
.crew-klartafel .crew-tile.is-employee-match .crew-emp-chip { font-weight: 700; }
.crew-klartafel .crew-tile.is-employee-dimmed { opacity: .24; filter: saturate(.45); }
.crew-klartafel .crew-tile[data-crew-focus-shift] { cursor: pointer; }
.crew-klartafel .crew-tile[data-crew-focus-shift]:focus-visible { outline: 2px solid var(--crew-cold); outline-offset: 2px; }

.crew-inline-day { position: relative; margin-top: 16px; padding: 20px; border: 1px solid var(--crew-line); border-radius: 16px; background: #fff; animation: dpExpand .28s ease both; }
.crew-inline-close { appearance: none; position: absolute; z-index: 3; top: 9px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--crew-line); border-radius: 50%; background: #fff; color: var(--crew-muted); cursor: pointer; }
.crew-inline-close svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.crew-inline-day .crew-daynav { min-height: 42px; margin-bottom: 18px; padding-right: 42px; }
.crew-inline-day .crew-day-kpi { padding-right: 6px; }
.crew-inline-day .crew-day-wd { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.crew-inline-day .crew-daycount,
.crew-inline-day .crew-day-kpi { color: var(--crew-muted); font: 600 11px/1.35 "IBM Plex Mono", ui-monospace, monospace; }
.crew-inline-day .ghost-button { min-width: 34px; min-height: 34px; border-color: var(--crew-line); border-radius: 9px; background: #fff; }

/* Tagesraster wie in der Klartafel-Vorlage: ruhige, abgerundete Zahlenbänder. */
.crew-klartafel .crew-dayplan { min-width: 1050px; --label-w: 142px; gap: 4px; }
.crew-klartafel .crew-dayplan .dp-row { gap: 10px; }
.crew-klartafel .crew-dayplan .dp-axis .dp-track { height: 34px; }
.crew-klartafel .crew-dayplan .dp-hourlabel {
  top: 12px; transform: translateX(-50%) rotate(-90deg); transform-origin: center; font-size: 9px;
}
.crew-klartafel .crew-dayplan .dp-label { color: var(--crew-muted); font-size: 12px; font-weight: 600; }
.crew-klartafel .crew-dayplan .dp-label > i { width: 7px; height: 7px; border-radius: 50%; }
.crew-klartafel .crew-rev-row .dp-label > i,
.crew-klartafel .crew-req-row .dp-label > i { background: var(--crew-warm); }
.crew-klartafel .crew-cov-row .dp-label > i { background: var(--crew-cold); }
.crew-klartafel .crew-diff-row .dp-label > i { background: var(--crew-signal); }
.crew-klartafel .crew-dayplan .crew-cov-cells {
  min-height: 16px; overflow: hidden; border: 1px solid #f0ede8; border-radius: 6px; background: #fbfaf8;
}
.crew-klartafel .crew-dayplan .crew-rev-cells { min-height: 16px; }
.crew-klartafel .crew-dayplan .crew-rev-cell,
.crew-klartafel .crew-dayplan .crew-req-cell,
.crew-klartafel .crew-dayplan .crew-cov-cell,
.crew-klartafel .crew-dayplan .crew-diff-cell {
  border-right: 1px solid rgba(255,255,255,.28); font: 700 8px/1 "IBM Plex Mono", ui-monospace, monospace;
}
.crew-klartafel .crew-dayplan .crew-rev-cell {
  color: #71480e; background: color-mix(in srgb, var(--crew-warm) calc(var(--a, 0) * 76%), #fff);
}
.crew-klartafel .crew-dayplan .crew-req-cell { background: #f3d49e; color: #3c352c; }
.crew-klartafel .crew-dayplan .crew-req-cell.from-muster { color: #3c352c; font-style: normal; }
.crew-klartafel .crew-dayplan .crew-cov-cell {
  color: #18245f; background: color-mix(in srgb, var(--crew-cold) calc(var(--a, 0) * 76%), #fff); font-size: 9px; font-weight: 850;
}
.crew-klartafel .crew-dayplan .crew-cov-cell.is-empty { color: transparent; }
.crew-klartafel .crew-dayplan .crew-diff-cell { color: #6f531b; background: #f5ddb0; }
.crew-klartafel .crew-dayplan .crew-diff-cell.neg { color: #8f251d; background: #f1bbb5; }
.crew-klartafel .crew-dayplan .crew-diff-cell.pos { color: #7b5012; background: #f3cc87; }
.crew-klartafel .crew-dayplan .crew-diff-cell.zero { color: transparent; background: transparent; }
.crew-klartafel .crew-dayplan .crew-employee-row { min-height: 38px; }
.crew-klartafel .crew-dayplan .crew-diff-row + .crew-employee-row { margin-top: 10px; padding-top: 15px; border-top: 1px solid var(--crew-line); }
.crew-klartafel .crew-dayplan .dp-label.shift { gap: 9px; color: var(--crew-ink); font-size: 13px; font-weight: 500; }
.crew-klartafel .crew-dayplan .dp-label.shift > i {
  width: 3px; height: 22px; border-radius: 999px; background: var(--station-color, var(--crew-cold));
}
.crew-employee-focus { min-width: 0; overflow: hidden; padding: 3px 4px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.crew-employee-focus:hover { background: #f0f1fa; color: var(--crew-cold); }
.crew-employee-focus[aria-pressed="true"] { background: #e8eafb; color: var(--crew-cold); font-weight: 700; }
.crew-employee-row.is-employee-focus { background: color-mix(in srgb, var(--crew-cold) 9%, transparent); box-shadow: inset 3px 0 0 var(--crew-cold); }
.crew-employee-row.is-employee-focus .gantt-bar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--crew-cold) 68%, transparent); }
.crew-klartafel .crew-dayplan .dp-track.lane {
  height: 32px; overflow: hidden; border-color: #f0ede8; border-radius: 9px; background: #fbfaf8; cursor: default;
}
.crew-klartafel .crew-dayplan .dp-gridline { background: #eeeae3; }
.crew-klartafel .crew-dayplan .dp-gridline.hour { width: 2px; background: #bdb5aa; }
.crew-klartafel .crew-dayplan .gantt-bar {
  top: 3px; bottom: 3px; justify-content: flex-start; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--station-color) 52%, #fff);
  border-radius: 7px; background: color-mix(in srgb, var(--station-color) 14%, #fff); color: var(--station-color);
  box-shadow: none; font: 650 10px/1 "IBM Plex Mono", ui-monospace, monospace;
}
.crew-klartafel .crew-dayplan .gantt-bar-label { display: inline-flex; min-width: 0; align-items: center; gap: 3px; }
.crew-klartafel .crew-dayplan .gantt-bar-label .crew-rule-flag { margin: -4px 0; pointer-events: auto; }
/* Breite unsichtbare Trefferzonen machen beide Kanten mit Finger und Pencil sicher
   erreichbar. Die schmale Innenlinie zeigt, welche Kante der Long-Touch aktiviert hat. */
.crew-klartafel .crew-dayplan .gantt-bar-handle { width: 22px; touch-action: none; }
.crew-klartafel .crew-dayplan .gantt-bar-handle::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 999px;
  background: currentColor; opacity: .28; transition: opacity .12s ease, transform .12s ease;
}
.crew-klartafel .crew-dayplan .gantt-bar-handle.left::after { left: 4px; }
.crew-klartafel .crew-dayplan .gantt-bar-handle.right::after { right: 4px; }
.crew-klartafel .crew-dayplan .gantt-bar.dragging.is-resize-left .gantt-bar-handle.left::after,
.crew-klartafel .crew-dayplan .gantt-bar.dragging.is-resize-right .gantt-bar-handle.right::after {
  opacity: 1; transform: scaleX(1.7); background: var(--accent);
}
.crew-klartafel .crew-dayplan .gantt-bar.dragging.is-resize-left .gantt-bar-handle.right::after,
.crew-klartafel .crew-dayplan .gantt-bar.dragging.is-resize-right .gantt-bar-handle.left::after { opacity: .08; }
.crew-klartafel .crew-dayplan .gantt-bar.ghost-shift {
  border: 1px dashed var(--crew-signal); background: #fff; color: var(--crew-signal);
}
/* Korridor beim Ziehen: Er umfasst die volle Zeilenhöhe. Erlaubte Bereiche werden oben
   und unten grün eingefasst; gesperrte Bereiche sind wie eine Sperrfläche rot schraffiert.
   Das Overlay existiert nur während der Geste und fängt keine Zeigerereignisse ab. */
.crew-drag-band {
  position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; border-radius: inherit;
}
.crew-drag-band span { position: absolute; top: 0; bottom: 0; box-sizing: border-box; }
.crew-drag-band .is-allowed {
  box-shadow: inset 0 3px #2f9e6f, inset 0 -3px #2f9e6f;
}
.crew-drag-band .is-blocked {
  border-right: 3px solid #c9364c; border-left: 3px solid #c9364c;
  /* Die helle Grundfläche verbindet die einzelnen Warnstreifen optisch zu einer
     zusammenhängenden Sperrzone; das Zeitraster bleibt dabei weiterhin ablesbar. */
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(201, 54, 76, .96) 4px 7px, transparent 7px 11px),
    rgba(209, 73, 91, .15);
  box-shadow: inset 0 3px #c9364c, inset 0 -3px #c9364c, inset 0 0 0 1px rgba(165, 31, 51, .22);
}
.crew-klartafel .crew-dayplan .gantt-bar.dragging { z-index: 4; }
/* Die Leiste selbst zeigt zusätzlich an, ob die aktuelle Position zulässig ist –
   der Blick bleibt beim Ziehen ohnehin an der Leiste, nicht am Band darüber. */
.crew-klartafel .crew-dayplan .gantt-bar.is-forbidden { border-color: #d1495b; background: color-mix(in srgb, #d1495b 16%, #fff); color: #a5303f; }
.crew-klartafel .crew-dayplan .crew-employee-drop-preview {
  position: relative; z-index: 4; min-height: 38px; animation: crewEmployeeDropRowIn 145ms ease-out both;
}
.crew-klartafel .crew-dayplan .crew-employee-drop-preview .dp-label.shift { color: var(--crew-cold); font-weight: 700; }
.crew-employee-drop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-klartafel .crew-dayplan .gantt-bar.crew-employee-drop-bar {
  z-index: 4; pointer-events: none; opacity: .62; border-style: dashed; border-color: var(--crew-cold);
  background: color-mix(in srgb, var(--crew-cold) 18%, #fff); color: var(--crew-cold);
  box-shadow: 0 4px 12px rgba(47, 62, 158, .16);
}
.crew-klartafel .crew-dayplan .crew-employee-drop-band { z-index: 3; }
body.crew-employee-drag-active, body.crew-employee-drag-active * { cursor: grabbing !important; }
.crew-employee-drag-warning {
  position: fixed; z-index: 5200; display: flex; align-items: center; gap: 7px; max-width: 230px;
  padding: 7px 9px; border: 1px solid #d1495b; border-radius: 8px; pointer-events: none;
  background: color-mix(in srgb, #d1495b 10%, #fff); color: #9f2637;
  box-shadow: 0 8px 22px rgba(82, 28, 35, .18); font-size: 11px;
  transform: translateZ(0); animation: crewEmployeeDragWarningIn 110ms ease-out both;
}
.crew-employee-drag-warning > span {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #d1495b; color: #fff; font-weight: 850;
}
.crew-employee-drag-warning strong { line-height: 1.25; }
.crew-klartafel .crew-daycol.is-employee-month-drop {
  position: relative; overflow: visible; z-index: 12;
  box-shadow: 0 0 0 2px var(--crew-cold), 0 12px 28px rgba(47, 62, 158, .2);
}
.crew-month-drop-axis {
  position: absolute; left: 5px; right: 5px; z-index: 5; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--crew-cold) 62%, transparent); border-radius: 8px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--crew-cold) 5%, rgba(255,255,255,.9)), rgba(255,255,255,.82));
}
.crew-month-drop-axis::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--crew-month-drop-position, 0%);
  border-top: 2px solid var(--crew-cold); box-shadow: 0 0 8px rgba(47, 62, 158, .25);
}
.crew-month-drop-axis > span {
  position: absolute; right: 4px; z-index: 1; padding: 1px 3px; border-radius: 3px;
  transform: translateY(-50%); background: rgba(255,255,255,.9); color: var(--crew-cold);
  font: 600 8px/1 "IBM Plex Mono", ui-monospace, monospace;
}
.crew-klartafel .crew-daycol.is-employee-month-drop .crew-daybody { position: relative; z-index: 6; }
.crew-klartafel .crew-daycol .crew-month-drop-preview {
  position: relative; z-index: 7; min-height: 42px; margin-block: 6px; pointer-events: none; opacity: .72; border-style: dashed;
  border-color: var(--crew-cold); background: color-mix(in srgb, var(--crew-cold) 13%, #fff);
  color: var(--crew-cold); box-shadow: 0 5px 14px rgba(47,62,158,.18);
}
.crew-klartafel .crew-daycol.is-employee-month-drop .crew-tile:hover { transform: none; }
@keyframes crewEmployeeDropRowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes crewEmployeeDragWarningIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
.crew-klartafel .crew-dayplan button.gantt-bar[data-crew-open-shift] { appearance: none; cursor: pointer; }
.crew-klartafel .crew-dayplan button.gantt-bar[data-crew-open-shift].is-selected { box-shadow: 0 0 0 2px var(--crew-signal); }
.crew-klartafel .crew-dayplan .crew-open-shift .dp-label { color: var(--crew-signal); }
.crew-klartafel .crew-dayplan .crew-open-shift .dp-label > i { background: var(--crew-signal); }

/* Spalte statt Block: Alles über der Mitarbeiterliste behält seine natürliche Höhe,
   die Liste selbst nimmt den Rest der Seitenleiste ein. Sie ist damit genau so hoch
   wie der Monatsstreifen daneben, statt bei einer festen Pixelzahl abzuschneiden. */
.crew-klartafel .crew-aside {
  box-sizing: border-box; display: flex; flex-direction: column; width: 318px;
  height: var(--crew-main-height, auto); min-height: 0; padding: 13px; overflow: hidden;
  border-color: var(--crew-line); border-radius: 15px;
  box-shadow: 0 4px 14px rgba(27,29,34,.035); animation: dpSlideIn .25s ease both;
}
.crew-klartafel .crew-aside > * { flex: none; }
.crew-aside-head { display: flex; align-items: center; justify-content: space-between; }
.crew-aside-head .crew-subhead { margin: 0; font-size: 16px; }
.crew-aside-head button { width: 26px; height: 26px; border: 1px solid var(--crew-line); border-radius: 7px; background: #fff; color: var(--crew-muted); cursor: pointer; }
.crew-klartafel .crew-demand { gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--crew-line); border-radius: 9px; background: #fff; }
.crew-klartafel .crew-demand-row { padding: 7px 9px; border-bottom: 1px solid var(--crew-line); font-size: 11px; }
.crew-klartafel[data-crew-build-mode="musterplan"] .crew-productivity-demand { display: none; }
.crew-klartafel .crew-demand-row:last-child { border-bottom: 0; }
/* Nur die Mitarbeiterliste nimmt den verbleibenden Platz ein. Sind mehr Personen
   vorhanden, als neben den Plan passen, scrollt diese Liste – nicht der Plancontainer. */
.crew-klartafel .crew-eval-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.crew-klartafel .crew-eval-row { grid-template-columns: minmax(0, 1fr); padding: 9px 2px; }
/* Die Auswahlumrahmung braucht rundum genuegend Abstand zu Name, Kennzahlen und
   Fortschrittsleiste. Diese spezifische Regel steht nach dem Klartafel-Override,
   damit dessen kurzes `padding` den Innenabstand nicht wieder auf 2 px reduziert. */
.crew-klartafel .crew-eval-row.is-highlighted { padding: 12px; }
.crew-klartafel .crew-eval-name { font-size: 11px; font-weight: 650; }
.crew-klartafel .crew-eval-progress { height: 7px; background: #ece9e3; }
.crew-klartafel .crew-eval-progress i { background: var(--crew-cold); animation: dpBar .6s ease both; }
.crew-klartafel .crew-eval-progress.ok i { background: var(--crew-okay); }
.crew-klartafel .crew-eval-progress.over i { background: var(--crew-warm); }
.crew-klartafel .crew-eval-num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; }
.crew-aside-collapsed { box-sizing: border-box; width: 46px; height: var(--crew-main-height, auto); flex: 0 0 46px; border: 1px solid var(--crew-line); border-radius: 13px; background: #fff; }
.crew-aside-collapsed button { display: flex; width: 100%; height: 100%; min-height: 310px; padding: 11px 7px; border: 0; border-radius: inherit; background: transparent; color: var(--crew-muted); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; }
.crew-aside-collapsed span { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }

.modal.modal-crew-settings { border: 1px solid var(--crew-line, #e6e2db); border-radius: 16px; box-shadow: 0 25px 70px rgba(27,29,34,.22); }
.modal-crew-settings .crew-settings-list { background: #faf8f5; }
/* Auswahlfarbe wie überall sonst in der App: Grün. Der frühere blaue Sonderfall stammte
   noch aus einer Zeit, in der der Dialog eine eigene Farbwelt hatte. */
.modal-crew-settings .crew-settings-employee.active { background: var(--accent-soft); color: var(--accent); }


/* Dienstplan: dunkle Klartafel inklusive Einstellungen und Umsatzanpassung. */
@media (prefers-color-scheme: dark) {
  .crew-correction-ref-chip.is-holiday { border-color: #b9862f; background: rgba(216, 164, 65, .22); color: #f0bd59; }
  .crew-klartafel {
    --crew-line: #313b38;
    --crew-soft: #202825;
    --crew-ink: #edf3f1;
    --crew-muted: #9ba8a4;
    /* Flächenfarbe für den aktiven Modus-Schalter. Im Hellmodus ist das --crew-ink
       (fast schwarz) mit weißer Schrift; im Dunkelmodus ist --crew-ink fast weiß,
       weiße Schrift darauf wäre unsichtbar. */
    --crew-active-fill: #3d4a76;
    --crew-cold: #91a3ff;
    --crew-warm: #e6a64c;
    --crew-signal: #ef756b;
    --crew-okay: #42cda0;
  }

  /* Im Dunkelmodus bleibt die Auswahl grün, wird für ausreichend Kontrast zur weißen
     Schrift aber etwas dunkler als der allgemeine helle Darkmode-Akzent. */
  .crew-klartafel {
    --crew-seg-bg: #1b2422;
    --crew-seg-active: #287f6d;
    --crew-seg-active-ink: #fff;
    --crew-seg-line: #34423e;
    --crew-seg-shadow: none;
  }
  .crew-klartafel .crew-modeswitch,
  .crew-klartafel .crew-buildswitch { border-color: var(--crew-seg-line); background: var(--crew-seg-bg); }
  .crew-klartafel .crew-modeswitch .crew-mode { color: var(--crew-muted); }
  .crew-klartafel .crew-modeswitch .crew-mode:not(.active):hover:not(:disabled) {
    color: var(--crew-ink); background: color-mix(in srgb, var(--crew-ink) 8%, transparent);
  }

  .crew-klartafel > .toolbar,
  .crew-kpi-strip,
  .crew-klartafel .crew-main,
  .crew-inline-day,
  .crew-klartafel .crew-aside,
  .crew-aside-collapsed {
    border-color: var(--crew-line);
    background: var(--surface);
    color: var(--crew-ink);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
  }
  .crew-klartafel > .crew-control-hero {
    background: linear-gradient(135deg, var(--surface), var(--surface-soft));
  }

  .crew-kpi-strip > div { border-color: var(--crew-line); }
  .crew-kpi-strip > div:nth-child(1) strong { color: #f0b45f; }
  .crew-klartafel   .crew-klartafel .crew-create-progress {
    background: #2c3532;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
  }
  .crew-klartafel .crew-strip .crew-daycol {
    border-color: var(--crew-line);
    background: #1b221f;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  }
  .crew-klartafel .crew-shift-block-1,
  .crew-klartafel .crew-shift-block-2,
  .crew-klartafel .crew-shift-block-3 { border-color: #46504c; }
  .crew-klartafel .crew-daycol.is-weekend {
    border-color: #53627d;
    background: #151b27;
    box-shadow: inset 0 0 0 1px rgba(120, 152, 212, .12), 0 4px 14px rgba(0, 0, 0, .28);
  }
  .crew-klartafel .crew-daycol.is-weekend .crew-dayhead-row { background: #1d2637; }
  .crew-klartafel .crew-daycol.is-holiday {
    border-color: #9b5b3a;
    background: #2b1710;
    box-shadow: inset 0 0 0 1px rgba(255, 175, 124, .12), 0 4px 14px rgba(0, 0, 0, .28);
  }
  .crew-klartafel .crew-daycol.is-holiday .crew-dayhead-row { background: #351c13; }
  .crew-klartafel .crew-daycol.is-holiday .crew-dow::after { color: #ffc19c; background: rgba(255, 154, 92, .18); }
  .crew-month-drop-axis {
    border-color: color-mix(in srgb, var(--crew-cold) 72%, transparent);
    background: linear-gradient(to bottom, rgba(26, 34, 47, .93), rgba(23, 30, 27, .9));
  }
  .crew-month-drop-axis > span { background: rgba(23, 30, 27, .92); color: var(--crew-cold); }
  .crew-klartafel .crew-daycol .crew-month-drop-preview {
    border-color: var(--crew-cold); background: color-mix(in srgb, var(--crew-cold) 18%, #202825); color: #d9deff;
  }
  /* Der Auswahlring war im Dunkelmodus unsichtbar: Die Regel für `.crew-daycol` direkt
     darüber setzt `box-shadow` neu und hat dieselbe Spezifität wie die Auswahl-Regel im
     Hellmodus – sie steht nur später und gewann deshalb. Damit war beim Öffnen der
     Tagesansicht nicht mehr zu erkennen, welcher Tag gerade offen ist. Mit `.crew-strip`
     liegt die Auswahl hier wieder oben; die Tönung macht sie zusätzlich auch dann
     erkennbar, wenn der Ring am Rand des Streifens angeschnitten wird. */
  .crew-klartafel .crew-strip .crew-daycol.is-selected {
    box-shadow: 0 0 0 2px var(--crew-cold), 0 9px 22px rgba(0, 0, 0, .38);
    background: color-mix(in srgb, var(--crew-cold) 13%, #1b221f);
  }
  .crew-klartafel .crew-strip .crew-daycol.is-selected.is-weekend {
    background: color-mix(in srgb, var(--crew-cold) 13%, #151b27);
    box-shadow: 0 0 0 2px var(--crew-cold), 0 9px 22px rgba(0, 0, 0, .42);
  }
  .crew-klartafel .crew-strip .crew-daycol.is-selected.is-holiday {
    background: color-mix(in srgb, var(--crew-cold) 13%, #2b1710);
  }
  .crew-klartafel button.crew-dayhead { color: var(--crew-ink); }
  .crew-klartafel .crew-dayhead .crew-date,
  .crew-klartafel .crew-scrollhint { color: var(--crew-muted); }
  .crew-klartafel .crew-day-productivity { background: rgba(66, 205, 160, .18); color: #70dfba; }
  .crew-klartafel .crew-day-productivity.under { background: rgba(230, 166, 76, .2); color: #f1c278; }
  .crew-klartafel .crew-day-productivity.over { background: rgba(239, 117, 107, .2); color: #ff9b92; }
  .crew-klartafel .crew-card-coverage { background: #2c3532; }
  /* Stationsfarben im Dunkelmodus.
     Zwei Ursachen dafür, dass die Akzentkante der Schichtkarten unsichtbar war:
     1. `border-color` ist eine Kurzform und überschrieb auch border-left-color –
        die Kante bekam die neutrale Rahmenfarbe statt der Stationsfarbe.
     2. Selbst wiederhergestellt sind die dunklen Stationstöne auf dunklem Grund zu
        schwach (Drive #2F3E9E nur 1,66:1, Kasse 2,52:1 gegen #202825).
     Deshalb wird die Stationsfarbe hier mit Weiß aufgehellt: der Farbton bleibt
     erkennbar, der schlechteste Wert über allen 16 Stationsfarben steigt auf 4,1:1. */
  .crew-klartafel .crew-tile,
  .crew-klartafel .crew-legend i,
  .crew-klartafel .crew-dayplan .dp-label.shift > i {
    --station-accent: color-mix(in srgb, var(--station-color, var(--crew-line)) 65%, #fff);
    --legend-accent: color-mix(in srgb, var(--legend-color, var(--crew-line)) 65%, #fff);
  }
  .crew-klartafel .crew-tile {
    border-color: #37413e;
    border-left-color: var(--station-accent);
    background: var(--crew-soft);
    color: var(--crew-ink);
  }
  .crew-klartafel .crew-legend i { background: var(--legend-accent); }
  .crew-klartafel .crew-dayplan .dp-label.shift > i { background: var(--station-accent); }
  /* Unbesetzte Musterschichten: Im Hellmodus stehen Rahmen und Text auf einem hellen
     Rotton (#efb2ac / #9f3028). Ohne eigene Dunkelwerte blieb dieses dunkle Rot auf
     dunklem Grund stehen – die Kacheln waren praktisch nicht lesbar. */
  .crew-klartafel .crew-tile.is-open.ghost-shift {
    border-color: #7d3a35;
    border-left-color: #ff8f84;
    background: rgba(239, 117, 107, .16);
  }
  .crew-klartafel .crew-tile.is-open.ghost-shift .crew-tile-time,
  .crew-klartafel .crew-tile.is-open.ghost-shift .crew-tile-station,
  .crew-klartafel .crew-tile.is-open.ghost-shift .crew-empty { color: #ffaba1; }
  .crew-klartafel .crew-tile.is-open.ghost-shift:hover { background: rgba(239, 117, 107, .26); }
  .crew-klartafel .crew-tile.is-open.ghost-shift.is-selected {
    border-color: #ff8f84;
    background: rgba(239, 117, 107, .3);
  }
  .crew-klartafel .crew-tile.is-open .crew-empty { color: #ffaba1; }

  .crew-inline-close,
  .crew-inline-day .ghost-button,
  .crew-aside-head button {
    border-color: var(--crew-line);
    background: var(--surface-soft);
    color: var(--crew-muted);
  }
  .crew-klartafel .crew-dayplan .crew-cov-cells,
  .crew-klartafel .crew-dayplan .dp-track.lane {
    border-color: #35403c;
    background: #1b2320;
  }
  .crew-klartafel .crew-dayplan .crew-rev-cell {
    color: #f4ce92;
    background: color-mix(in srgb, var(--crew-warm) calc(var(--a, 0) * 48%), #27231c);
  }
  .crew-klartafel .crew-dayplan .crew-req-cell,
  .crew-klartafel .crew-dayplan .crew-req-cell.from-muster { background: #5b4725; color: #f7dfb3; }
  .crew-klartafel .crew-dayplan .crew-cov-cell {
    color: #e2e7ff;
    background: color-mix(in srgb, var(--crew-cold) calc(var(--a, 0) * 48%), #202433);
  }
  .crew-klartafel .crew-dayplan .crew-diff-cell { color: #f7dfac; background: #594727; }
  .crew-klartafel .crew-dayplan .crew-diff-cell.neg { color: #ffd2ce; background: #6a312f; }
  .crew-klartafel .crew-dayplan .crew-diff-cell.pos { color: #ffe0a7; background: #65491e; }
  .crew-klartafel .crew-dayplan .crew-diff-cell.zero { color: transparent; background: transparent; }
  .crew-employee-focus:hover { background: #293044; color: var(--crew-cold); }
  .crew-employee-focus[aria-pressed="true"] { background: #303854; color: var(--crew-cold); }
  .crew-employee-row.is-employee-focus { background: color-mix(in srgb, var(--crew-cold) 14%, transparent); }
  .crew-klartafel .crew-dayplan .dp-gridline { background: rgba(255, 255, 255, .08); }
  .crew-klartafel .crew-dayplan .dp-gridline.hour { background: rgba(255, 255, 255, .3); }
  .crew-klartafel .crew-dayplan .gantt-bar {
    border-color: color-mix(in srgb, var(--station-color) 62%, #26302d);
    background: color-mix(in srgb, var(--station-color) 22%, #202825);
    color: color-mix(in srgb, var(--station-color) 72%, #fff);
  }
  .crew-klartafel .crew-dayplan .gantt-bar.crew-employee-drop-bar {
    border-color: #8f9cff;
    background: color-mix(in srgb, var(--crew-cold) 30%, #1b2320);
    color: #b8c3ff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .32);
  }
  .crew-employee-drag-warning {
    border-color: #f08a97;
    background: color-mix(in srgb, #d1495b 24%, #1b2320);
    color: #ffbdc5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  }
  .crew-klartafel .crew-dayplan .gantt-bar.ghost-shift { background: #202825; color: #ff9389; }
  .crew-rule-flag { color: #f2b53d; }
  .crew-rule-flag.is-hard { color: #f08a97; }
  .crew-klartafel .crew-tile.has-rule-error,
  .crew-klartafel .crew-dayplan .gantt-bar.has-rule-error { border-color: #f08a97; }
  .crew-klartafel .crew-dayplan .gantt-bar.has-rule-error { background: color-mix(in srgb, #f08a97 22%, #1a201e); }

  .crew-klartafel .crew-demand { border-color: var(--crew-line); background: var(--surface-soft); }
  .crew-klartafel .crew-demand-row { border-color: var(--crew-line); }
  .crew-klartafel .crew-eval-progress { background: #2c3532; }
  .crew-aside-collapsed button { color: var(--crew-muted); }

  .modal.modal-crew-settings,
  .modal.modal-crew-day {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .55);
  }
  .modal-crew-settings .modal-header,
  .modal-crew-day .modal-header { border-color: var(--line); background: var(--surface); }
  .crew-correction-meta > span:first-child { border-color: #647b31; background: #29331d; color: #bedb6b; }
  .crew-correction-meta > span:first-child.is-closed { border-color: var(--line); background: var(--surface-soft); color: var(--muted); }
  .modal-crew-settings .crew-settings-list { background: var(--surface-soft); }
  .modal-crew-settings .crew-settings-employee.active {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface-soft));
    color: var(--accent);
  }
  .modal-crew-settings .crew-wish-weekdays span { background: none; }
  /* Im Dunkeln tragen die Tageskacheln mehr Farbe, sonst verschwinden sie im Grund. */
  .crew-settings-detail { --wish-urlaub: #e0a53f; --wish-krank: #e0685a; --wish-sonstige: #9c8ee6; --wish-feiertag: #6f9ee8; }
  .crew-wish-day, .crew-wish-empty { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
  .crew-wish-empty { background: none; }
  .crew-wish-day.weekend { background: color-mix(in srgb, var(--ink) 14%, var(--surface)); }
  .crew-wish-day.absence-urlaub { background: color-mix(in srgb, var(--wish-urlaub) 30%, var(--surface)); }
  .crew-wish-day.absence-krank { background: color-mix(in srgb, var(--wish-krank) 30%, var(--surface)); }
  .crew-wish-day.absence-sonstige { background: color-mix(in srgb, var(--wish-sonstige) 30%, var(--surface)); }
  .crew-wish-day.absence-feiertag { background: color-mix(in srgb, var(--wish-feiertag) 30%, var(--surface)); }
  .modal-crew-settings input,
  .modal-crew-day input { color-scheme: dark; }
  .modal-crew-day .crew-adjust-row { border-color: var(--line); }
  .modal-crew-day .crew-adjust-summary {
    border: 1px solid var(--line);
    background: var(--surface-soft);
  }
  .modal-crew-day .ghost-button {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--ink);
  }
}

@keyframes dpExpand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dpSlideIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes dpBar { from { width: 0; } }
@keyframes crewProgressShimmer { from { left: -42%; } to { left: 108%; } }

/* Einzug von Monats- und Tagesansicht.
   `is-entering` setzt die Ansicht nur dann, wenn sich wirklich die gezeigte Sache ändert
   (anderer Zeitraum, anderer Tag, fertig gerechneter Plan) – nicht bei jedem Sperr-Klick.
   Der Versatz je Element kommt aus --enter-index und ist gedeckelt, damit die letzten
   Spalten eines langen Zeitraums nicht sekundenlang nachlaufen. */
@keyframes crewColumnIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes crewRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes crewBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.crew-month.is-entering .crew-daycol {
  animation: crewColumnIn .34s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--enter-index, 0) * 22ms);
}
/* Schichtkarten der Monatsansicht: Erst steht die Tagesspalte, dann füllt sie sich.
   Die Karten sind im DOM bereits nach Schichtbeginn sortiert (`order`), ihre Reihenfolge
   ist also die zeitliche – der Versatz über `nth-child` liest sich deshalb als Ablauf des
   Tages von früh nach spät. `--enter-index` erbt von der Spalte, sodass die Karten stets
   nach ihrer eigenen Spalte einsteigen und nicht vor ihr. Ab der achten Karte bleibt es
   beim gleichen Versatz: Sonst liefe die Animation an vollen Tagen spürbar nach. */
@keyframes crewTileIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

.crew-month.is-entering .crew-shift-block > .crew-tile {
  animation: crewTileIn .28s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 7 * 26ms);
}
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(1) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(2) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 26ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(3) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 2 * 26ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(4) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 3 * 26ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(5) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 4 * 26ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(6) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 5 * 26ms); }
.crew-month.is-entering .crew-shift-block > .crew-tile:nth-child(7) { animation-delay: calc(var(--enter-index, 0) * 22ms + 150ms + 6 * 26ms); }

/* Wird eine Karte gerade gezogen oder ist sie ausgewählt, darf keine Einstiegsanimation
   ihre Position überschreiben. */
.crew-month.is-entering .crew-shift-block > .crew-tile.dragging { animation: none; transform: none; }

.crew-day.is-entering .dp-row.crew-employee-row {
  animation: crewRowIn .3s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--enter-index, 0) * 26ms);
}
/* Die Leiste wächst aus ihrem Beginn heraus – sie liegt auf einer Zeitachse, ein Wachsen
   von links nach rechts liest sich als „von dann bis dann". */
.crew-day.is-entering .dp-row.crew-employee-row .gantt-bar {
  transform-origin: left center;
  animation: crewBarGrow .34s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--enter-index, 0) * 26ms + 60ms);
}
/* Beim Ziehen darf nichts nachlaufen: Der Balken folgt dem Zeiger und würde sonst mit
   einer noch laufenden Animation um die eigene Position kämpfen. */
.crew-day .gantt-bar.dragging { animation: none; transform: none; }

@media (max-width: 1180px) {
  .crew-klartafel .crew-toolbar-view { flex-wrap: nowrap; }
  .crew-klartafel .crew-strip .crew-daycol { flex-basis: calc((100% - 36px) / 7); }
}
@media (max-width: 900px) {
  .crew-klartafel > .crew-control-hero { grid-template-columns: 1fr; }
  .crew-control-hero-copy p { max-width: 760px; }
  .crew-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .crew-ot-gap-warning { grid-template-columns: 1fr; }
  .crew-ot-gap-warning small { grid-column: 1; }
  .crew-kpi-strip > div { border-bottom: 1px solid var(--crew-line); }
  .crew-klartafel .crew-layout { flex-direction: column; }
  .crew-klartafel .crew-aside, .crew-aside-collapsed { width: 100%; }
  .crew-klartafel .crew-aside, .crew-aside-collapsed { height: auto; }
  .crew-aside-collapsed button { height: auto; min-height: 42px; flex-direction: row; }
  .crew-aside-collapsed span { writing-mode: horizontal-tb; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crew-day-adjust-modal .crew-correction-svg-hour .bar,
  .crew-day-adjust-modal .crew-correction-svg-hour .crew-correction-svg-value:not(.is-zero) { animation: none; }
  .crew-create-progress > span::after { animation: none; display: none; }
  /* Auch die Verzögerung zurücknehmen: Eine gestaffelte Einblendung ist ohne sie
     weiterhin eine Bewegung über die Zeit – der Inhalt erschiene nur später statt gar
     nicht animiert. */
  .crew-klartafel *, .crew-klartafel *::before, .crew-klartafel *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; }
}
/* Resilient Schedule Engine */
.crew-lifecycle { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:8px 0; }
.crew-lifecycle-state { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border, #d9e2df); border-radius:999px; padding:5px 10px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; transition:box-shadow .12s ease; }
.crew-lifecycle-state:hover, .crew-lifecycle-state:focus-visible { box-shadow:0 0 0 2px color-mix(in srgb, currentColor 35%, transparent); }
.crew-lifecycle-caret { font-size:9px; opacity:.7; }
.crew-plan-menu .ctx-note { padding:6px 12px 4px; color:var(--muted, #687671); font-size:11px; }
.crew-lifecycle-state.draft { color:#8a6500; background:#fff8df; }
.crew-lifecycle-state.published { color:#08745f; background:#e7faf4; }
.crew-resilience-results { border:1px solid var(--border, #d9e2df); border-radius:14px; padding:12px; margin:10px 0; background:var(--panel, #fff); }
.crew-resilience-results-head { display:flex; justify-content:space-between; margin-bottom:9px; }
.crew-resilience-results-head span { display:grid; gap:2px; }
.crew-resilience-results-head small { color:var(--muted, #687671); }
.crew-resilience-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.crew-resilience-card { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; text-align:left; padding:11px; border:1px solid var(--border, #d9e2df); border-radius:11px; color:inherit; background:var(--panel-2, #f7faf9); cursor:pointer; }
.crew-resilience-card:hover { border-color:#37b99e; }
.crew-resilience-card.active { border-color:#28b99a; box-shadow:0 0 0 2px color-mix(in srgb,#28b99a 18%,transparent); }
.crew-resilience-card-title { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; }
.crew-resilience-card-title small { color:#08745f; }
.crew-resilience-card span:not(.crew-resilience-card-title) { font-size:11px; color:var(--muted, #687671); }
.crew-resilience-card span b { color:var(--text, #1c2925); }
.crew-resilience-critical { grid-column:1/-1; }
.crew-resilience-help { text-decoration: underline dotted; text-underline-offset: 3px; cursor: inherit; }
.crew-resilience-difference { grid-column:1/-1; padding-top:5px; border-top:1px solid var(--border, #d9e2df); }
.crew-learning-rules { display:grid; gap:8px; border:1px solid var(--border, #d9e2df); border-radius:14px; padding:12px; margin:10px 0; background:var(--panel, #fff); }
.crew-learning-rule { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:8px; border-top:1px solid var(--border, #d9e2df); }
.crew-learning-rule span { display:grid; gap:2px; font-size:12px; }
.crew-learning-rule small { color:var(--muted, #687671); }
/* Trägt zusätzlich .crew-target (Toolbar-Typografie); die Regeln dort setzen für
   Zahlenfelder eine feste Breite und müssen hier gezielt überschrieben werden. */
/* Breit genug, dass die drei Rastpunkte („Effizient", „Ausgewogen", „Robust") nebeneinander
   ohne Umbruch unter den Regler passen. Überschrift und Wirkungszeile stehen im Tooltip.
   Der Abstand nach links und rechts hält den Regler von den Zahlenfeldern („Zielproduktivität",
   „Rechenzeit") weg – ohne ihn klebte die Reglerbahn direkt an den Eingabekästen. Die
   Reglerbahn selbst sitzt dabei auf derselben Höhe wie die Kästen, die Rastpunkte hängen
   darunter, ohne die Zeile insgesamt zu verschieben. */
.crew-target.crew-risk-control {
  display:grid;
  align-items:center;
  gap:3px;
  width:clamp(240px, 26vw, 340px);
  margin:0 18px;
  align-self:center;
  /* = Höhe der Rastpunkt-Zeile: schiebt die Reglerbahn genau so weit nach unten, dass sie
     auf der Mittellinie der Zahlenfelder liegt. */
  padding-top:17px;
}
.crew-target input.crew-risk-range { display:block; box-sizing:border-box; width:100%; min-width:0; padding:0; border:0; background:none; accent-color:#28b99a; margin:0; }
.crew-risk-marks { display:flex; justify-content:space-between; gap:4px; min-width:0; }
.crew-risk-mark { border:0; background:none; padding:0; font-size:10px; line-height:1.4; white-space:nowrap; color:var(--muted, #687671); cursor:pointer; }
.crew-risk-mark:hover { color:#08745f; text-decoration:underline; }
.crew-risk-mark.active { color:#08745f; font-weight:800; }
.crew-risk-mark:disabled { cursor:default; opacity:.55; }
.crew-critical-shifts { display:grid; gap:8px; border:1px solid var(--border, #d9e2df); border-radius:14px; padding:12px; margin:10px 0; background:var(--panel, #fff); }
/* Warnung, aber keine Alarmfarbe: ein warmer Rand und ein sehr blasser Grund reichen,
   um den Bereich vom übrigen Weiß abzuheben, ohne die Seite zu dominieren. */
.crew-critical-shifts.is-warning { border-color:#e2c68a; background:#fdf9f0; }
/* Eingeklappt ist die Zusammenfassung der einzige Inhalt. Statt sie über Innenabstand
   und align-content in die Mitte zu rechnen – wo Zeilenhöhe, Symbolgröße und Pfeil je
   ein paar Zehntelpixel beisteuern und der Text sichtbar zu hoch stand – bekommt die
   Zusammenfassung die volle Höhe des Kastens und zentriert ihren Inhalt selbst. */
/* gap:0 ist der eigentliche Punkt: Der eingeklappte Inhalt bleibt ein Rasterelement mit
   Höhe null, der Raster-Abstand von 8 px wirkt aber weiter und schob die Zusammenfassung
   um genau diese 8 px nach oben. Sichtbar war nur „der Text sitzt zu hoch". */
.crew-critical-shifts:not([open]) { gap:0; min-height:46px; padding-top:0; padding-bottom:0; }
.crew-critical-shifts:not([open]) > summary { min-height:46px; }
/* Symbol, Überschrift, Zusatz und Pfeil haben unterschiedliche Schriftgrößen. Ohne
   ausdrückliche Zentrierung richten sie sich an der Grundlinie aus und stehen sichtbar
   gegeneinander versetzt. */
.crew-critical-shifts > summary { display:flex; align-items:center; gap:8px; min-height:22px; line-height:1.25; cursor:pointer; list-style:none; }
.crew-critical-shifts > summary > * { align-self:center; }
.crew-critical-shifts > summary::-webkit-details-marker { display:none; }
/* Eigener Pfeil statt des Browser-Dreiecks – er dreht sich beim Aufklappen mit. */
/* Der Pfeil ist eine Maske, keine Schriftglyphe: eine Glyphe sitzt im Zeilenkasten
   leicht versetzt und dreht beim Aufklappen sichtbar um den falschen Punkt. */
.crew-critical-shifts > summary::after { content:""; margin-left:auto; align-self:center; width:14px; height:14px; flex:none;
  background:var(--muted, #687671); transition:transform .2s ease;
  -webkit-mask:var(--ui-chevron-right-mask) center/contain no-repeat; mask:var(--ui-chevron-right-mask) center/contain no-repeat; }
.crew-critical-shifts[open] > summary::after { transform:rotate(90deg); }
.crew-critical-shifts.is-closing > summary::after { transform:rotate(0); }
.crew-critical-shifts > summary:focus-visible { outline:2px solid var(--crew-signal, #b24a3a); outline-offset:3px; border-radius:8px; }
.crew-critical-icon { width:16px; height:16px; flex:none; color:#b5820f; }
.crew-critical-summary-note { font-size:11px; color:var(--muted, #687671); }
.crew-critical-content { display:grid; min-height:0; }
.crew-critical-content > small { color:var(--muted, #687671); }
.crew-critical-empty { margin:0; font-size:12px; color:var(--muted, #687671); }
.crew-critical-list { display:grid; gap:4px; min-height:0; margin-top:14px; }
.crew-critical-list.is-scrollable { max-height:var(--crew-critical-list-height, 720px); padding:3px 5px 3px 3px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.crew-critical-shift { appearance:none; display:grid; width:100%; gap:3px; padding:8px 9px; border:1px solid var(--border, #d9e2df); border-radius:11px; background:var(--panel, #fff); color:inherit; font:inherit; font-size:12px; text-align:left; cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.crew-critical-shift:hover,
.crew-critical-shift:focus-visible { border-color:var(--crew-cold, #2f3e9e); box-shadow:0 4px 14px rgba(27,29,34,.12); outline:none; transform:translateY(-1px); }
.crew-critical-shift.is-active { border-color:var(--crew-cold, #2f3e9e); box-shadow:0 0 0 2px color-mix(in srgb, var(--crew-cold, #2f3e9e) 30%, transparent); }
.crew-critical-shift.unrepairable { border-left:4px solid #d1495b; padding-left:9px; }
.crew-critical-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; }
.crew-critical-head em { margin-left:auto; font-style:normal; font-size:11px; font-weight:800; color:#8a6500; text-decoration:underline dotted; text-underline-offset:3px; }
.crew-critical-shift.unrepairable .crew-critical-head em { color:#d1495b; }
.crew-critical-meta { font-size:11px; color:var(--muted, #687671); text-decoration:underline dotted; text-underline-offset:3px; }
.crew-critical-planb { font-size:11px; color:var(--muted, #687671); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crew-critical-options { display:grid; margin-top:2px; font-size:11px; color:var(--muted, #687671); }
.crew-critical-options > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crew-critical-options > span::before { content:"• "; }
.crew-critical-warn { display:-webkit-box; margin-top:2px; overflow:hidden; color:#d1495b; font-size:11px; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.crew-employee-row.is-critical-focus { background:color-mix(in srgb, var(--crew-cold, #2f3e9e) 9%, transparent); }
.gantt-bar.is-critical-focus { z-index:3; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--crew-cold, #2f3e9e); }
@media (max-width: 900px) { .crew-resilience-cards { grid-template-columns:1fr; } }
@media (prefers-color-scheme: dark) {
  .crew-critical-shifts { background:#141d1a; border-color:#30403b; }
  .crew-critical-shifts.is-warning { background:#1d1a12; border-color:#4b4028; }
  .crew-critical-icon { color:#f2cf75; }
  .crew-critical-shift { border-color:#30403b; background:#192420; }
  .crew-critical-head em { color:#f2cf75; }
  .crew-critical-shift.unrepairable .crew-critical-head em,
  .crew-critical-warn { color:#f08a97; }
  .crew-risk-mark.active, .crew-risk-mark:hover { color:#70dcc4; }
  .crew-lifecycle-state.draft { color:#f2cf75; background:#302a18; }
  .crew-lifecycle-state.published { color:#70dcc4; background:#14352e; }
  .crew-resilience-results { background:#141d1a; border-color:#30403b; }
  .crew-resilience-card { background:#192420; border-color:#30403b; }
  .crew-resilience-card span b { color:#edf6f2; }
  .crew-resilience-card-title small { color:#70dcc4; }
  .crew-resilience-difference { border-color:#30403b; }
  .crew-learning-rules { background:#141d1a; border-color:#30403b; }
  .crew-learning-rule { border-color:#30403b; }
}
/* Lokaler, auf Uhrzeitzeichen reduzierter Inter-Schnitt (Google Fonts, SIL OFL 1.1).
   So bleiben die Schichtzeiten auch ohne Internet identisch und Safari fällt nicht
   unbemerkt auf eine andere Monospace-Schrift zurück. */
@font-face {
  font-family: "Inter Shift Times";
  src: url("./assets/fonts/inter-shift-times-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0030-003A, U+2013;
}

/* =====================================================================
   Mobil: derselbe Reiter, unterhalb 640 px neu angeordnet
   =====================================================================
   Kein eigenes App-Gehäuse und keine zweite Ansicht: Es bleibt dieselbe Seite mit
   Topbar, Reiter-Navigation, Klartafel-Karten und den Fenstern der Web-App. Unterhalb
   des Breakpoints wird nur neu angeordnet – der Tagesstreifen wird zur Liste, die
   Auswertung sitzt (wie schon ab 900 px) unter dem Plan, und die Fenster füllen die
   Breite. Alles hier steht ausschließlich in einer Media Query; die breite Ansicht
   bleibt unberührt.

   Diese vier Bausteine gehören zur schmalen Ansicht und sind darüber ausgeblendet. */
.crew-day-summary { display: none; }
.crew-add-manual-shift-label { display: none; }
.crew-scrollhint .crew-hint-narrow { display: none; }
/* Der Platzhalter der Kandidatenliste (siehe syncCrewMobileCandidates in ui.js) darf
   keine Lücke in die Auswertung reißen, solange keine offene Schicht gewählt ist. */
.crew-aside > [data-crew-candidates-home]:empty { display: none; }

/* Dieselbe Bedingung steht als CREW_LIST_LAYOUT_QUERY in ui.js – beide muessen
   uebereinstimmen, sonst rechnet das Verhalten mit einem anderen Layout als das Auge sieht.
   Der zweite Teil faengt das QUERFORMAT eines Telefons ab: Dort ist der Bildschirm zwar
   breiter als 640 px, aber nur rund 400 px hoch. Die breite Ansicht mit sieben Karten
   nebeneinander und 580 px Mindesthoehe passt dann nicht mehr auf den Schirm. */
@media (max-width: 640px), (max-height: 520px) and (max-width: 950px) {
  /* --- Kopfbereich: Überschrift ohne Untertitel, Felder darunter in voller Breite --- */
  .crew-klartafel > .crew-control-hero { min-height: 0; gap: 12px; padding: 13px; }
  .crew-control-hero-copy h1 { margin: 0; font-size: 22px; }
  /* Der erklärende Satz wiederholt, was die Felder darunter ohnehin zeigen. Auf einem
     Telefon kostet er die halbe erste Bildschirmhöhe. */
  .crew-control-hero-copy p { display: none; }

  /* Ohne diese Nullen zöge die Planungsgrundlage – die breiteste Zeile – die Rasterspalte
     des Kopfbereichs auf ihre eigene Mindestbreite auf, und die ganze Seite bekäme einen
     waagerechten Überlauf. Erst mit min-width:0 darf sie schmaler werden als ihr Inhalt
     und in sich selbst scrollen. */
  .crew-klartafel > .crew-control-hero > *,
  .crew-klartafel .crew-toolbar-right,
  .crew-klartafel .crew-toolbar-row,
  .crew-klartafel .crew-toolbar-view > * { min-width: 0; }

  .crew-klartafel .crew-toolbar-view { flex-direction: column; align-items: stretch; gap: 9px; overflow: visible; }
  .crew-rangepick { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
  .crew-range-label { font-size: 12px; }
  /* Die Planungsgrundlage bleibt eine Zeile und scrollt selbst – drei umgebrochene
     Knöpfe sähen aus wie drei getrennte Schalter statt wie eine Auswahl. */
  .crew-klartafel .crew-buildswitch { display: flex; gap: 2px; overflow-x: auto; padding: 3px; border: 1px solid var(--crew-seg-line); border-radius: 12px; background: var(--crew-seg-bg); }
  .crew-klartafel .crew-buildswitch .crew-mode { flex: 0 0 auto; min-height: 38px; border-radius: 9px; }

  .crew-klartafel .crew-toolbar-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Beschriftung, Zahlenfeld und Einheit bleiben eine Zeile: Bricht die Einheit um,
     steht das „€/h" allein unter dem Feld und liest sich wie eine eigene Angabe.
     Umbrechen darf stattdessen die Beschriftung selbst. */
  /* Gleiche Spezifität wie die Kapsel-Regeln oben (dort steht :not(.crew-risk-control)),
     sonst gewönne die Desktop-Breite hier gegen das flexende Mobil-Feld. */
  .crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control) { flex-wrap: nowrap; gap: 5px; font-size: 11px; padding: 0 8px; }
  .crew-klartafel .crew-toolbar-settings .crew-target:not(.crew-risk-control) input {
    flex: 1 1 46px; width: auto; min-width: 0; min-height: 40px; padding: 0 34px 0 4px; text-align: left;
  }
  /* Der Sicherheitsregler braucht die volle Breite; seine Rastpunkte stehen sonst übereinander. */
  .crew-klartafel .crew-toolbar-settings .crew-target.crew-risk-control { grid-column: 1 / -1; width: auto; margin: 0; padding-top: 4px; }
  .crew-klartafel .crew-toolbar-settings > .crew-toolbar-actions { grid-column: 1 / -1; margin-left: 0; display: flex; }
  .crew-klartafel .crew-toolbar-actions > * { min-height: 44px; }
  /* „Erstellen" ist die Handlung der Seite und nimmt den übrigen Platz. */
  .crew-klartafel .crew-toolbar-actions > .primary-button,
  .crew-klartafel .crew-toolbar-actions > [data-crew-cancel] { flex: 1 1 auto; }

  .crew-lifecycle { flex-wrap: wrap; }

  /* --- Kennzahlen: zwei Spalten, die fünfte über die volle Breite --- */
  .crew-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-kpi-strip > div { padding: 9px 12px; border-bottom: 1px solid var(--crew-line); }
  .crew-kpi-strip > div:nth-child(2n) { border-right: 0; }
  .crew-kpi-strip > div:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }

  /* --- Der Tagesstreifen wird zur Liste --- */
  /* `align-items: flex-start` der breiten Ansicht bemisst die Plan- und Auswertungsspalte
     untereinander nach ihrem eigenen Inhalt. Eine einzige nicht umbrechende Zeile in einer
     Tageskarte machte die Planfläche damit breiter als der Bildschirm – sichtbar daran,
     dass die Karten rechts über die Kennzahlen hinausragten. `stretch` bindet beide Spalten
     an die Breite der Seite; zu langer Inhalt wird in der Karte selbst gekürzt. */
  .crew-klartafel .crew-layout { align-items: stretch; }
  .crew-klartafel .crew-main,
  .crew-klartafel .crew-aside,
  .crew-aside-collapsed { width: auto; min-width: 0; max-width: 100%; }
  .crew-klartafel .crew-main { min-height: 0; padding: 10px; }
  /* Die Höhe der Planfläche wird per JS auf die Auswertung gespiegelt, damit beide
     nebeneinander gleich hoch sind. Untereinander steht die Auswertung unter dem Plan;
     dieselbe Höhe würde sie nur abschneiden. */
  .crew-klartafel .crew-aside,
  .crew-aside-collapsed { height: auto; overflow: visible; }

  /* Die Legende erklärt die Stationsfarben der Schichtkacheln. Auf dem Telefon zeigt die
     geschlossene Karte gar keine Kacheln, und aufgeklappt steht die Station auf jeder
     Kachel als Text. Elf Farbkästchen über der Liste kosten dort nur Bildschirmhöhe. */
  .crew-legend { display: none; }

  /* `align-items: stretch` ist hier kein Standardwert, sondern die Korrektur: In der
     breiten Ansicht steht der Streifen auf `flex-start`, damit unterschiedlich hohe
     Karten oben abschließen. Untereinander ist dieselbe Angabe die Kartenbreite – ohne
     sie wäre jede Karte nur so breit wie ihr eigener Inhalt. */
  .crew-klartafel .crew-strip {
    flex-direction: column; align-items: stretch; gap: 7px; padding: 0;
    overflow: visible; scroll-snap-type: none;
  }
  .crew-klartafel .crew-strip .crew-daycol { flex: 0 0 auto; scroll-snap-align: none; }

  .crew-scrollhint .crew-hint-wide { display: none; }
  .crew-scrollhint .crew-hint-narrow { display: inline; }

  /* --- Die Tageskarte als Raster ---------------------------------------------------
     Oben die Kopfzeile über die ganze Breite: links Wochentag mit Feiertagsmerker und
     Datum, rechts die Produktivitäts-Pille. Darunter zwei Spalten – links untereinander
     Umsatz, Stunden und die Zahl der Schichten, rechts daneben die Tagesgrafik. Ganz
     unten über die volle Breite der Deckungsbalken und (geöffnet) die Schichtkacheln. */
  .crew-klartafel .crew-strip .crew-daycol {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 43%;
    grid-template-areas:
      "bar   bar"
      "head  head"
      "meta  spark"
      "count spark"
      "cover cover"
      "body  body";
  }
  .crew-klartafel .crew-strip .crew-daycol::before { grid-area: bar; }
  .crew-klartafel .crew-dayhead-row { grid-area: head; }
  .crew-klartafel .crew-strip .crew-daycol > .crew-card-employee-plan { grid-column: 1 / -1; }
  .crew-klartafel .crew-daymeta { grid-area: meta; }
  .crew-klartafel .crew-day-summary { grid-area: count; }
  .crew-klartafel .crew-card-coverage { grid-area: cover; }
  .crew-klartafel .crew-card-spark { grid-area: spark; align-self: center; }
  .crew-klartafel .crew-daybody { grid-area: body; }

  /* Kartenkopf: Wochentag mit Feiertagsmerker und Datum. Rechts in der Spalte steht der
     Hinweis, dass sich die Karte öffnen lässt; geöffnet wird daraus das Schließen-Kreuz. */
  .crew-klartafel button.crew-dayhead { min-height: 0; padding: 8px 4px 2px 9px; }
  .crew-klartafel .crew-dayhead .crew-day-date { margin-right: auto; }
  .crew-klartafel .crew-dayhead .crew-dow { font-size: 14px; }
  .crew-klartafel .crew-dayhead .crew-date { font-size: 10px; }
  .crew-klartafel .crew-daycol.is-holiday .crew-dow::after { font-size: 8px; }
  /* Etwas tiefer als der Wochentag: So sitzt die Pille auf Höhe der Zahlen darunter und
     drängt sich nicht neben das Datum. */
  .crew-klartafel .crew-dayhead-row { align-items: flex-start; }
  .crew-klartafel .crew-day-productivity { padding: 5px 8px; font-size: 11px; }
  .crew-klartafel .crew-dayhead-row > .crew-day-productivity { margin-top: 12px; }
  /* Weder Pfeil noch Kreuz im Kartenkopf: Beide standen zwischen Datum und Produktivität
     und sagten nichts, was die Karte nicht ohnehin zeigt. Geschlossen wird der geöffnete
     Tag durch einen erneuten Tipp auf denselben Kartenkopf. */
  .crew-klartafel button.crew-dayhead::after { content: none; }

  /* Umsatz über den Stunden – und zugleich die Fläche, die die Tagesplanung öffnet.
     Langes Drücken setzt die Zahlen von Hand (siehe ui.js). Die 44 px sind die
     Mindestgröße einer Fläche, die mit dem Finger sicher zu treffen ist. */
  .crew-klartafel .crew-daymeta {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; min-height: 44px; padding: 2px 9px 4px;
  }
  .crew-klartafel .crew-daymeta-rev { font-size: 16px; }
  .crew-klartafel .crew-daymeta-h { font-size: 11px; }
  .crew-klartafel .crew-card-coverage { margin: 0 9px 7px; }
  /* Die Grafik steht jetzt neben den Zahlen und braucht dort keine eigene Fußlinie. */
  .crew-klartafel .crew-card-spark { height: 46px; padding: 2px 9px 2px 2px; border-bottom: 0; }

  /* Nur die Anzahl, bewusst klein und hellgrau: Die Karte soll auf einen Blick Umsatz
     und Stunden zeigen; wie viele Schichten dahinterstehen, ist die Nebenauskunft. */
  .crew-klartafel .crew-day-summary {
    display: block; margin: 0; padding: 0 9px 6px;
    color: color-mix(in srgb, var(--crew-muted) 72%, transparent);
    font-size: 10.5px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .crew-klartafel .crew-day-summary b { color: var(--crew-signal); font-weight: 700; }

  /* Die Schichtkacheln gehören zum geöffneten Tag. In der Liste stünden sie sonst
     siebenmal untereinander und die Übersicht wäre keine Übersicht mehr. */
  .crew-klartafel .crew-month:not(.has-employee-focus):not(.has-month-employee-highlight) .crew-daycol:not(.is-selected) .crew-daybody { display: none; }
  .crew-klartafel .crew-month.has-expanded-day:not(.has-employee-focus):not(.has-month-employee-highlight) .crew-daycol.is-selected .crew-daybody { display: flex; }
  /* Ist ein Tag geöffnet, ist er der Inhalt der Seite – wie beim Aufklappen der
     Tagesansicht in der breiten Ansicht. Das Kreuz im Kartenkopf führt zurück. */
  .crew-klartafel .crew-month.has-expanded-day:not(.has-employee-focus):not(.has-month-employee-highlight) .crew-strip .crew-daycol:not(.is-selected) { display: none; }

  /* Die gemeinsamen Blockhöhen richten in der breiten Ansicht sieben nebeneinander
     stehende Karten aus. Untereinander gibt es nichts auszurichten. */
  .crew-klartafel .crew-month.has-synced-shift-blocks .crew-shift-block-0,
  .crew-klartafel .crew-month.has-synced-shift-blocks .crew-shift-block-1,
  .crew-klartafel .crew-month.has-night-shift-block.has-synced-shift-blocks .crew-shift-block-2 { height: auto; }
  /* Der 64-px-Fuß der breiten Ansicht ist die Ablagefläche fürs Ziehen mit der Maus.
     Untereinander risse er zwischen den Zeitblöcken eine leere Bahn auf. */
  .crew-klartafel .crew-shift-block {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 0; padding: 0; border-top: 0;
  }
  .crew-klartafel .crew-shift-block:not(:has(> .crew-tile)) { display: none; }

  .crew-klartafel .crew-daybody { padding: 6px 9px 10px; gap: 5px; }
  /* Kachel als Zeile: links Zeit über Station, rechts der Name. Darunter, nur unter der
     Namensspalte, die Zeitachse der Schicht (siehe .crew-tile-axis). Die freie Zelle
     unter Zeit/Station bleibt bewusst leer – kein Element trägt den Namen "spacer". */
  .crew-klartafel .crew-tile {
    display: grid; grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "time name" "station name" "spacer axis";
    align-items: center; column-gap: 9px; min-height: 46px; padding: 6px 8px;
  }
  .crew-klartafel .crew-tile-time { grid-area: time; align-self: end; font-size: 11.5px; }
  .crew-klartafel .crew-tile-station { grid-area: station; align-self: start; }
  .crew-klartafel .crew-tile-emps { grid-area: name; margin-top: 0; }
  .crew-klartafel .crew-tile-emps .crew-emp-chip { font-size: 12px; }
  /* Balken am unteren Rand der Namensspalte: zeigt die Lage der Schicht im Geschäftstag
     (dayStartMinutes bis +24h). Dieselbe Balkenform wie die Bedarfsdeckung der Tageskarte
     (.crew-card-coverage) – nur in der Stationsfarbe statt in Rot/Grün/Gelb. */
  .crew-klartafel .crew-tile-axis {
    display: block; grid-area: axis; position: relative;
    height: 4px; margin-top: 6px; border-radius: 999px; overflow: hidden;
    background: color-mix(in srgb, var(--crew-line) 65%, transparent);
  }
  .crew-klartafel .crew-tile-axis > i {
    position: absolute; top: 0; bottom: 0;
    border-radius: inherit; background: var(--station-color, var(--crew-line));
  }

  .crew-klartafel .crew-add-manual-shift {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; border-radius: 9px; font-size: 22px;
  }
  .crew-add-manual-shift-label { display: inline; font-size: 13px; font-weight: 600; }

  /* Die Kandidatenliste wird per JS in die geöffnete Karte gehängt (ui.js). */
  .crew-klartafel .crew-daybody > .crew-open-candidates { margin: 3px 0 0; }

  /* Die Zeitschiene braucht 1050 px Breite und Ziehgriffe an den Balken. Auf dem
     Telefon zeigen stattdessen die Kacheln des geöffneten Tages dieselben Schichten;
     angetippt öffnen sie dasselbe Fenster „Schicht bearbeiten". */
  .crew-klartafel .crew-inline-day { display: none; }

  /* --- Auswertung: unter dem Plan, volle Breite --- */
  .crew-klartafel .crew-aside { padding: 12px; border-radius: 12px; }
  .crew-klartafel .crew-eval-list { max-height: none; }
  .crew-aside-collapsed { border-radius: 12px; }
  .crew-aside-collapsed button { justify-content: space-between; min-height: 42px; padding: 0 13px; }
    .crew-aside-collapsed button::after { content: ""; width: 13px; height: 13px; flex: none; background: var(--crew-muted);
    -webkit-mask: var(--ui-caret-down-mask) center/contain no-repeat; mask: var(--ui-caret-down-mask) center/contain no-repeat; }
  .crew-aside-collapsed span { letter-spacing: .02em; font-size: 14px; font-weight: 600; text-transform: none; }

  /* --- Fenster werden zu Blättern in voller Breite --- */
  /* Höhere Gewichtung als die Breitenangaben der einzelnen Fenster (.modal.modal-…),
     damit hier keine Ausnahme durchrutscht. */
  .modal-backdrop.open { padding: 10px; align-items: stretch; }
  .modal-backdrop.open > .modal {
    width: 100%; max-width: none; max-height: 100%;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .modal-backdrop.open > .modal > .modal-header { flex: 0 0 auto; }
  .modal-backdrop.open > .modal > .modal-body {
    flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  }
  /* Bestätigen und Abbrechen bleiben sichtbar, statt am Ende eines langen Formulars
     zu stehen. */
  .modal-backdrop.open > .modal > .modal-body > * > .modal-actions,
  .modal-backdrop.open > .modal > .modal-body > .modal-actions {
    position: sticky; bottom: -16px; z-index: 2;
    margin: 0 -16px -16px; padding: 12px 16px;
    border-top: 1px solid var(--line); background: var(--surface);
  }
  .modal-backdrop.open > .modal .modal-actions > button { min-height: 44px; }
}

/* --- Telefon im Querformat -------------------------------------------------------
   Hier gilt bereits der Listen-Breakpoint oben (max-height 520px). Was fehlt, ist die
   Nutzung der Breite: Untereinander gestapelte Karten in voller Breite zeigen auf einem
   nur ~400 px hohen Schirm knapp anderthalb Tage. Zwei Spalten verdoppeln das, ohne die
   Karte selbst zu ändern. Ist ein Tag geöffnet, gehört ihm wieder die ganze Breite. */
@media (max-height: 520px) and (max-width: 950px) and (orientation: landscape) {
  .crew-klartafel .crew-strip {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
    align-items: start;
  }
  .crew-klartafel .crew-month.has-expanded-day .crew-strip { grid-template-columns: minmax(0, 1fr); }
  /* Die Kennzahlen dürfen quer alle fünf nebeneinander stehen. */
  .crew-kpi-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .crew-kpi-strip > div:nth-child(2n) { border-right: 1px solid var(--crew-line); }
  .crew-kpi-strip > div:nth-child(5) { grid-column: auto; border-right: 0; }
  .crew-kpi-strip > div { border-bottom: 0; }
  /* Der Kopfbereich frisst quer sonst den halben Schirm, bevor der Plan beginnt. */
  .crew-klartafel > .crew-control-hero { padding: 9px 13px; gap: 8px; }
  .crew-control-hero-copy h1 { font-size: 18px; }
  .crew-klartafel .crew-toolbar-settings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crew-klartafel .crew-toolbar-settings .crew-target.crew-risk-control { grid-column: 1 / -1; }
  /* Fenster sind quer sonst höher als der Schirm. */
  .modal-backdrop.open { padding: 6px; }
}

/* Pfeil-/Plus-Buttons im Dienstplan: Größe der SVG-Zeichen (siehe styles.css). */
.crew-daynav .ghost-button:has(> .ui-chev) {
  --ui-glyph-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 30px;
  min-width: 30px;
  height: 30px;
}
.crew-aside-head button {
  --ui-glyph-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.crew-add-manual-shift { --ui-glyph-size: 15px; }

.crew-open-candidates-head > button { --ui-glyph-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.crew-correction-ref-chip button { --ui-glyph-size: 10px; }