:root {
  color-scheme: light;
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-soft: #edf3f2;
  --ink: #18211f;
  --muted: #687370;
  --line: #dde5e3;
  --accent: #1f7564;
  --accent-soft: #e4f3ef;
  --accent-2: #b24a3a;
  --accent-3: #d99724;
  --accent-4: #4f6fad;
  --good: #2f7d4f;
  --warn: #bd7a13;
  --bad: #b53b32;
  --weekend-bg: rgba(31, 43, 40, 0.07);
  --shadow: 0 18px 44px rgba(20, 31, 28, 0.12);
  --sticky-topbar-offset: 68px;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101513;
    --surface: #171d1b;
    --surface-soft: #202a27;
    --ink: #edf3f1;
    --muted: #9aa8a4;
    --line: #2a3632;
    --accent: #43b69d;
    --accent-soft: #173a33;
    --accent-2: #d36d5e;
    --accent-3: #d8a441;
    --accent-4: #7898d4;
    --good: #77c996;
    --warn: #e1aa4c;
    --bad: #e06f63;
    --weekend-bg: rgba(255, 255, 255, 0.08);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 247, 248, 0.9);
  backdrop-filter: blur(18px);
}
.topbar .brand { justify-self: start; }
.topbar .nav { justify-self: center; }
.topbar .actions { justify-self: end; }
.topbar-user-divider {
  width: 1px;
  height: 28px;
  margin: 0 4px 0 6px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
  border-radius: 999px;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand strong {
  font-size: 18px;
  letter-spacing: 0;
}

.brand span {
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav button,
.ghost-button,
.icon-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 11px;
  background: transparent;
  color: var(--muted);
}

.nav button.active {
  background: #1f2b28;
  color: #fff;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary-button,
.danger-button,
.secondary-button {
  min-height: 34px;
  border-radius: 8px;
  padding: 0 12px;
  color: #fff;
  background: var(--accent);
}

.secondary-button {
  background: var(--ink);
}

.danger-button {
  background: var(--bad);
}

.ghost-button {
  border: 1px solid var(--line);
  background: var(--surface);
}

.link-button {
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.link-button:hover {
  color: var(--accent);
}

.page {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 20px 24px 36px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Rechte Toolbar-Gruppe: Hinweistext + Kachel-Button, Button ganz rechts. */
.toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.period-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  background: #eef4f2;
}

.period-switch button {
  min-height: 26px;
  border-radius: 7px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.period-switch button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
}

.period-switch button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(20, 31, 28, 0.08);
}

.compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: #f8faf9;
  color: var(--muted);
  font-size: 13px;
}

.chart-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.field,
.search-field {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}

.search-field {
  min-width: min(280px, 100%);
}

.search-wrap {
  position: relative;
  display: inline-flex;
  flex: 1 1 280px;
  max-width: 360px;
}

.search-wrap .search-field {
  width: 100%;
  padding-right: 34px;
}

.search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 900;
}

.search-clear:hover {
  background: #e7eeeb;
  color: var(--ink);
}

.search-clear[hidden] {
  display: none !important;
}

.panel-header .search-wrap {
  flex: 0 1 300px;
  max-width: 320px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-card-top-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.profile-metrics {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.metric {
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}

/* Dashboard-Kacheln einheitlich gleich hoch (beide Reihen) + kompaktere Innenabstände. */
.page-dashboard .metric {
  min-height: 118px;
  height: 118px;
  padding: 10px 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.page-dashboard .metric strong { margin-top: 4px; }
.page-dashboard .metric em { margin-top: 4px; }
.page-dashboard .metric-unit { margin-top: 2px; }

.metric-with-icon {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.metric-with-icon > .metric-icon {
  grid-row: 1 / span 3;
  grid-column: 1;
}
/* Urlaubsfortschritt-Kachel auf dem Dashboard hat 4 Inhaltszeilen (Titel, %, Balken, Vorjahr)
   → Icon über alle 4 zentrieren, sonst sitzt es höher als bei den anderen Kacheln. */
.dbk-vac-dash.metric-with-icon > .metric-icon { grid-row: 1 / span 4; }

.metric-with-icon > span:not(.metric-icon),
.metric-with-icon > strong,
.metric-with-icon > em {
  grid-column: 2;
}

.metric-icon {
  width: 42px;
  height: 42px;
}

.metric[data-dashboard-filter],
.metric[data-dashboard-detail] {
  cursor: pointer;
}

.metric[data-dashboard-filter]:hover,
.metric[data-dashboard-detail]:hover {
  border-color: #bfd1ca;
  background: #f7faf8;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1;
}

.metric em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
}

.metric-number,
.metric-unit {
  display: block;
}

.metric strong .metric-number {
  color: var(--ink);
  font-size: inherit;
  line-height: 1;
}

.metric-unit {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.forecast-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 129px;
  box-sizing: border-box;
  padding: 15px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #edf6f2 100%);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}

.forecast-hero h1 {
  margin: 3px 0 6px;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.08;
}

.forecast-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.forecast-eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.forecast-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 230px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.72);
}

.forecast-hero-card strong,
.forecast-hero-card small {
  display: block;
}

.forecast-hero-card small {
  margin-top: 3px;
  color: var(--muted);
}

.forecast-mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin-top: 8px;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

.forecast-month-control {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto 32px minmax(170px, 202px) 32px;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  background: #fbfcfb;
}

.forecast-month-control label {
  display: grid;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.forecast-month-input {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.forecast-month-input span {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  border-right: 1px solid var(--line);
  padding: 0 8px;
  background: var(--surface-soft);
  color: var(--muted);
  white-space: nowrap;
}

.forecast-month-control-title strong,
.forecast-month-control-title small {
  display: block;
}

.forecast-month-control-title strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.forecast-month-control-title small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.forecast-month-control-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

.forecast-month-control-summary strong {
  font-size: 16px;
  line-height: 1;
}

.forecast-month-control-summary small {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.forecast-month-control input {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  padding: 0 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.forecast-month-control .icon-button.small {
  width: 32px;
  min-height: 34px;
}

.icon-button.small {
  width: 30px;
  min-height: 30px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 900;
}

.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.forecast-metric-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 12px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}
/* Überschrift oben (bei allen Kacheln gleiche Höhe), Wert + Notiz vertikal zentriert darunter; Icon mittig. */
.forecast-metric-card > .forecast-icon { align-self: center; }
.forecast-metric-card > .fc-col { display: flex; flex-direction: column; min-width: 0; }
.forecast-metric-card .fc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.forecast-metric-card small,
.forecast-metric-card em {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}
.forecast-metric-card .fc-labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.forecast-metric-card .fc-labelrow small { display: inline; }
.forecast-metric-card .fc-month {
  display: inline-block;
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.forecast-metric-card strong {
  display: block;
  margin: 4px 0;
  font-size: 22px;
  line-height: 1;
}

.forecast-metric-unit {
  display: block;
  margin-top: -2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.forecast-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(340px, 0.9fr);
  align-items: start;
  gap: 14px;
}

.forecast-month-chart-wrap {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.forecast-month-chart-wrap.large {
  margin-bottom: 0;
}

.forecast-month-chart-head {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.forecast-month-chart-head > span:first-child {
  margin-right: auto;
}

.forecast-month-chart-head strong,
.forecast-month-chart-head small {
  display: block;
}

.forecast-month-chart-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.forecast-month-chart-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.forecast-month-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.forecast-month-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.forecast-month-legend i.actual {
  background: var(--accent);
}

.forecast-month-legend i.forecast {
  background: #bfe8d1;
}

.forecast-month-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.forecast-month-chart.compact {
  min-height: 0;
}

.forecast-month-chart.compact .forecast-month-label {
  font-size: 10px;
}

.forecast-month-chart.compact .forecast-month-value {
  font-size: 10px;
}

.forecast-month-chart.large {
  min-height: 0;
}

.forecast-month-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.forecast-month-grid.faint {
  stroke: #edf3f2;
}

.forecast-month-axis,
.forecast-month-label,
.forecast-month-value {
  font-family: inherit;
  letter-spacing: 0;
}

.forecast-month-axis {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.forecast-month-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.forecast-month-value {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.forecast-month-current-bg {
  fill: rgba(240, 250, 246, 0.78);
  stroke: #b7d9ca;
  stroke-width: 2.4;
  filter: drop-shadow(0 10px 16px rgba(31, 117, 100, 0.18));
}

.forecast-month-segment.actual {
  fill: var(--accent);
}

.forecast-month-segment.forecast {
  fill: #bfe8d1;
}

.forecast-month-split {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

.forecast-month-bar.current .forecast-month-label {
  fill: var(--ink);
}

.forecast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
}

.forecast-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* €-Icon (z. B. links vom Bruttoumsatz) kräftiger und größer. */
.forecast-icon.euro svg {
  width: 27px;
  height: 27px;
  stroke-width: 2;
}
/* Tacho-Symbol (Kapazitätsbelastung) größer im Kasten. */
.forecast-icon.gauge svg {
  width: 27px;
  height: 27px;
  stroke-width: 2;
}

.forecast-icon.calendar {
  background: #eaf1ff;
  color: var(--accent-4);
}

/* Urlaubsfortschritt: Kalender-Icon in Urlaubsfarbe (grün/teal), abgesetzt vom blauen Kranktage-Icon. */
.forecast-icon.vacprog {
  background: #e2f6f1;
  color: #1f9e80;
}

.forecast-icon.people,
.forecast-icon.shield,
.forecast-icon.trend {
  background: var(--accent-soft);
  color: var(--accent);
}

.forecast-icon.alert,
.forecast-icon.high {
  background: #fae5e2;
  color: var(--bad);
}

.forecast-icon.plus,
.forecast-icon.medium {
  background: #fff1d9;
  color: var(--warn);
}

.forecast-icon.heat,
.forecast-icon.low {
  background: #e4f3e9;
  color: var(--good);
}

.forecast-icon.clock,
.forecast-icon.calendarDays {
  background: #edf4ff;
  color: #3e67b1;
}

.forecast-icon.pulse,
.forecast-icon.target {
  background: #efeafb;
  color: #7250b6;
}

.forecast-icon.vacation {
  background: #e2f6f1;
  color: #0f7f72;
}

.forecast-icon.gauge {
  background: #efeafb;
  color: #7250b6;
}

/* Semantische Töne (überschreiben die Basisfarbe) */
.forecast-icon.tone-bad {
  background: color-mix(in srgb, var(--bad) 16%, var(--surface));
  color: var(--bad);
}
.forecast-icon.tone-good {
  background: color-mix(in srgb, var(--good) 16%, var(--surface));
  color: var(--good);
}

.forecast-icon.small {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

.forecast-week-labels,
.forecast-heatmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.forecast-week-labels {
  margin-bottom: 8px;
}

.forecast-week-labels span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.forecast-heat-cell {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfcfa;
  color: var(--ink);
  text-align: left;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.forecast-heat-cell:not(.empty):hover,
.forecast-heat-cell.active {
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(20, 31, 28, 0.1);
}

/* Einzelne Tage beim Hover anheben – wie die Mitarbeiterkarten (aktiver Tag bleibt ruhig). */
.forecast-heat-cell:not(.empty):not(.active):hover {
  transform: translateY(-2px);
}

.forecast-heat-cell.active {
  transform: none;
  outline: 0;
  border-width: 1px;
  border-color: rgba(5, 8, 7, 0.5);
  box-shadow: 0 12px 26px rgba(5, 8, 7, 0.2);
  z-index: 5;
}

.forecast-heat-cell.active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 3px solid #050807;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 10px 24px rgba(5, 8, 7, 0.24);
}

.forecast-heat-cell.empty {
  min-height: 86px;
  border: 1px dashed transparent;
  background: transparent;
  pointer-events: none;
}

.forecast-heat-cell.calm {
  border-color: #d8e5e1;
  background: #f3faf7;
}

.forecast-heat-cell.low {
  border-color: #99d7ae;
  background: #d9f3e2;
}

.forecast-heat-cell.medium {
  border-color: #e4b75c;
  background: #ffe8b7;
}

.forecast-heat-cell.high {
  border-color: #dc786b;
  background: #ffd6d0;
}

.forecast-heat-cell.heat-0 {
  border-color: #dfe8e4;
  background: #f7faf8;
}

.forecast-heat-cell.heat-1 {
  border-color: #c9e2d4;
  background: #e8f6ed;
}

.forecast-heat-cell.heat-2 {
  border-color: #99d7ae;
  background: #cdefd8;
}

.forecast-heat-cell.heat-3 {
  border-color: #e2c45b;
  background: #ffefac;
}

.forecast-heat-cell.heat-4 {
  border-color: #e59a4c;
  background: #ffd29a;
}

.forecast-heat-cell.heat-5 {
  border-color: #be4f43;
  background: #e76f61;
  color: #fff;
}

.forecast-heat-cell.heat-5 .forecast-cell-top small,
.forecast-heat-cell.heat-5 .forecast-cell-buffer {
  color: #fff;
}

.forecast-heat-cell.heat-5 .forecast-cell-buffer {
  background: rgba(255, 255, 255, 0.22);
}

.forecast-heat-cell.actual {
  box-shadow: inset 0 0 0 2px rgba(31, 43, 40, 0.05);
}

.forecast-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.forecast-cell-top small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.forecast-cell-top strong {
  font-size: 16px;
}

.forecast-cell-risk {
  font-size: 13px;
  font-weight: 900;
}

.forecast-cell-buffer {
  display: inline-flex;
  justify-content: center;
  min-height: 19px;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.forecast-day-list {
  display: grid;
  gap: 8px;
}

.forecast-day-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  background: #fbfcfa;
  color: var(--ink);
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.forecast-day-row.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Gleiches Hover-Verhalten wie bei den Mitarbeiterkarten: anheben + hervorheben. */
.forecast-day-row:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 12px 24px rgba(20, 31, 28, 0.11);
  transform: translateY(-2px);
}

.forecast-day-row strong,
.forecast-day-row small,
.forecast-row-value strong,
.forecast-row-value small {
  display: block;
}

.forecast-day-row small,
.forecast-row-value small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.forecast-day-row strong,
.forecast-row-value strong {
  font-size: 13px;
}

.forecast-row-value {
  text-align: right;
  white-space: nowrap;
}

.forecast-risk-dot {
  width: 11px;
  height: 38px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.forecast-risk-dot.low {
  background: var(--good);
}

.forecast-risk-dot.medium {
  background: var(--warn);
}

.forecast-risk-dot.high {
  background: var(--bad);
}

.forecast-detail-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.forecast-detail-head .forecast-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.forecast-detail-dashboard-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.forecast-detail-head strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.forecast-detail-unit {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.forecast-detail-head small {
  color: var(--muted);
  font-size: 11px;
}

.forecast-detail-list {
  margin-top: 10px;
  margin-bottom: 18px;
}

.forecast-detail-list .row-item {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 12px;
}

.forecast-detail-list .row-item strong {
  font-size: 12px;
}

.forecast-subtitle {
  margin: 26px 0 16px;
  padding-top: 10px;
  font-size: 13px;
}

.forecast-contribution-list,
.forecast-role-list {
  display: grid;
  gap: 9px;
}

.forecast-contribution-list {
  margin-top: 8px;
  margin-bottom: 14px;
}

.forecast-contribution,
.forecast-role-row {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  background: #fbfcfa;
}

.forecast-contribution {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 58px;
  border-color: rgba(31, 43, 40, 0.28);
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 31, 28, 0.05);
}

.forecast-contribution:hover {
  border-color: var(--accent);
  background: #f2f7f5;
}

.forecast-contribution strong,
.forecast-contribution small,
.forecast-role-row strong,
.forecast-role-row small {
  display: block;
}

.forecast-contribution small,
.forecast-role-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.forecast-contribution strong,
.forecast-role-row strong {
  font-size: 13px;
}

.forecast-contribution strong {
  font-size: 14px;
  line-height: 1.15;
}

.forecast-contribution .employee-avatar {
  width: 34px;
  height: 34px;
  background: #dff2ea;
  color: #116854;
  font-weight: 900;
}

.forecast-percent {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: #dff2ea;
  color: #116854;
  font-size: 10px;
  font-weight: 900;
}

.forecast-role-row {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(330px, 0.9fr);
  align-items: start;
  gap: 14px;
}

.dashboard-layout-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

.dashboard-card-layout-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dashboard-card-toggle {
  min-height: 34px;
  min-width: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card-toggle:hover,
.dashboard-card-toggle.active {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(20, 31, 28, 0.08);
}

.dashboard-layout-bar .rg-svg-icon {
  width: 16px;
  height: 16px;
}

.dashboard-hidden-widgets {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  /* Eigene volle Zeile unter der Button-Leiste, von links beginnend. */
  flex: 0 0 100%;
  width: 100%;
  justify-content: flex-start;
  margin-top: 4px;
}

.dashboard-hidden-widgets button {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dashboard-widget-grip {
  cursor: grab;
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}

.dashboard-cards-editing .metric {
  position: relative;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  cursor: grab;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.dashboard-cards-editing .metric.is-dragging {
  opacity: .38;
  border-color: var(--line);
  background: #eef1ef;
  box-shadow: none;
  transform: none;
}

.dashboard-cards-editing .metric.is-dragging > * {
  opacity: 0;
}

.dashboard-cards-editing .metric.drop-target {
  border-color: var(--line);
  background: #eef1ef;
  box-shadow: none;
  transform: none;
}

.dashboard-cards-editing .metric.drop-before {
  box-shadow: none;
  transform: none;
}

.dashboard-cards-editing .metric.drop-after {
  box-shadow: none;
  transform: none;
}

.dashboard-card-toolbar {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  color: var(--accent);
  pointer-events: auto;
  z-index: 2;
}

.dashboard-card-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.dashboard-card-toolbar button:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(380px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.main-column,
.side-column,
.split-grid {
  display: grid;
  align-content: start;
  gap: 14px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.panel-title {
  margin: 0;
  font-size: 15px;
}

.panel-subtitle {
  color: var(--muted);
  font-size: 12px;
}

.panel-body {
  padding: 14px;
}

.chart {
  width: 100%;
  min-height: 0;
  line-height: 0;
}

.dashboard-chart {
  aspect-ratio: 820 / 300;
}

.vacation-main-chart {
  aspect-ratio: 960 / 416;
}

.chart.compact-chart {
  min-height: 118px;
}

.mini-trend-chart {
  max-height: 118px;
}

.chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.dashboard-chart svg {
  height: 100%;
}

.bar {
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  transform-origin: bottom;
}

.bar:hover,
.heat-cell:hover {
  opacity: 0.78;
}

.axis-label,
.chart-label {
  fill: var(--muted);
  font-size: 11px;
}

.weekend-axis-marker {
  fill: color-mix(in srgb, var(--weekend-bg) 80%, var(--surface-soft));
  stroke: var(--line);
  stroke-width: 1;
}

.weekend-axis-label {
  fill: var(--ink);
  font-weight: 800;
}

.heatmap {
  display: grid;
  grid-template-columns: repeat(14, minmax(22px, 1fr));
  gap: 6px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 5px;
  border: 1px solid rgba(23, 33, 27, 0.08);
  background: var(--surface-soft);
  transition: transform 160ms ease;
}

.heat-cell:hover {
  transform: translateY(-1px);
}

.day-bars {
  display: grid;
  gap: 8px;
}

.day-bar {
  display: grid;
  grid-template-columns: 105px minmax(90px, 1fr) 56px 86px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: #fbfcfa;
  color: var(--ink);
  text-align: left;
}

.day-bar.active {
  border-color: var(--accent);
  background: #edf6f1;
}

.day-bar-date {
  color: var(--muted);
  font-size: 13px;
}

.day-bar-track {
  height: 10px;
  border-radius: 99px;
  background: var(--surface-soft);
  overflow: hidden;
}

.day-bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.day-bar small {
  color: var(--muted);
}

.employee-list,
.absence-timeline {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow: auto;
  /* oben/unten etwas Luft, damit die Hover-Anhebung des ersten/letzten Cards nicht abgeschnitten wird */
  padding: 4px 2px;
}

.employee-card,
.absence-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 8px;
  padding: 10px 11px;
  background: color-mix(in srgb, var(--accent-soft) 34%, #fbfcfb);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 68%, transparent), 0 6px 16px rgba(20, 31, 28, 0.04);
  color: var(--ink);
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.employee-card:hover,
.absence-card:hover,
.risk-row:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 12px 24px rgba(20, 31, 28, 0.11);
  transform: translateY(-2px);
}

.employee-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.08);
}

.absence-card.recent-absence {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.08);
}

/* Auch hervorgehobene/aktive Karten sollen beim Hover angehoben werden (höhere Spezifität, damit es greift). */
.absence-card.recent-absence:hover,
.employee-card.active:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 80%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 12px 24px rgba(20, 31, 28, 0.13);
  transform: translateY(-2px);
}

.employee-card strong,
.absence-card strong {
  display: block;
  margin-bottom: 3px;
}

.employee-card small,
.absence-card small {
  color: var(--muted);
}

.employee-card-stats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.profile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #edf6f2 100%);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}

.profile-identity {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dashboard-profile-title {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dashboard-profile-title strong,
.dashboard-profile-title small {
  display: block;
}

.dashboard-profile-title strong {
  color: var(--ink);
  font-size: 12px;
}

.dashboard-profile-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.profile-hero h1 {
  margin: 0 0 5px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0;
}

.profile-hero p {
  margin: 0;
  color: var(--muted);
}

.profile-personal-line {
  display: grid;
  grid-template-columns: repeat(6, minmax(92px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.profile-personal-line .fact {
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.profile-personal-line .fact small {
  font-size: 11px;
}

.profile-personal-line .fact strong {
  font-size: 13px;
}

.profile-warning-box {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 28%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface));
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}

.profile-warning-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.profile-warning-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface));
  color: var(--accent-2);
}

.profile-warning-icon svg {
  width: 21px;
  height: 21px;
}

.profile-warning-head strong,
.profile-warning-head small {
  display: block;
}

.profile-warning-head strong {
  color: var(--ink);
  font-size: 15px;
}

.profile-warning-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.profile-warning-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.profile-warning-list article {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-2));
}

.profile-warning-list strong {
  color: var(--ink);
  font-size: 13px;
}

.profile-warning-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  font-size: 19px;
}

.profile-hero-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.profile-status-badge {
  align-self: start;
  justify-content: center;
  min-width: 94px;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
}

.profile-link-button {
  color: var(--accent);
  font-weight: 800;
}

.risk-meter {
  display: grid;
  gap: 12px;
}

.risk-meter strong {
  display: block;
  font-size: 34px;
}

.risk-meter small {
  color: var(--muted);
}

.risk-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.risk-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--good), var(--warn), var(--bad));
}

.risk-list {
  display: grid;
  gap: 8px;
  margin: 0;
  /* etwas Luft oben, damit die Hover-Anhebung der ersten Zeile nicht abgeschnitten wird */
  padding: 3px 1px;
  list-style: none;
}

.risk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 7px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent-soft) 28%, #fbfcfa);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 58%, transparent);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

/* .risk-row:hover ist oben mit .absence-card/.employee-card vereinheitlicht. */

.risk-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.risk-row > span:first-child > strong {
  font-size: 14px;
  line-height: 1.15;
}

.risk-mini {
  display: grid;
  gap: 5px;
  justify-items: end;
}

.risk-mini strong {
  font-size: 13px;
}

.risk-mini em {
  display: block;
  height: 5px;
  max-width: 70px;
  min-width: 8px;
  border-radius: 99px;
  background: var(--good);
}

.risk-mini em.warn {
  background: var(--warn);
}

.risk-mini em.bad {
  background: var(--bad);
}

.profile-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.profile-facts.compact {
  grid-template-columns: repeat(5, minmax(88px, 1fr));
}

.fact {
  display: grid;
  gap: 4px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fbfcfa;
}

.fact small {
  color: var(--muted);
  font-size: 12px;
}

.fact strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.weekday-distribution {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.weekday-pill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfa;
}

.weekday-pill.unavailable {
  background: #f4f5f3;
  opacity: 0.68;
}

.weekday-availability-toggle {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #c9d8d1;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.weekday-availability-toggle[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent-soft);
}

.weekday-pill.unavailable .weekday-line em {
  background: #b8c3bd;
}

.weekday-pill span,
.weekday-pill strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.weekday-pill strong {
  color: var(--ink);
  font-size: 15px;
}

.weekday-line {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.weekday-line em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.weekday-pill.active {
  border-color: #e4b3ad;
  background: #fff6f4;
}

.weekday-pill.active .weekday-line em {
  background: var(--accent-2);
}

.detail-list,
.ranking-list,
.absence-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ranking-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.ranking-title-icon.high {
  background: var(--bad);
}

.ranking-title-icon.low {
  background: var(--good);
}

.ranking-title-icon.detail {
  background: var(--accent-4);
}

.ranking-title-icon.forecast {
  background: var(--accent-3);
}

.ranking-list .row-item {
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
}

.ranking-list .row-item > span:nth-child(3) > strong {
  font-size: 14px;
  line-height: 1.15;
}

.ranking-list .row-item > span:nth-child(3) > small {
  font-size: 10px;
}

.ranking-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.row-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfa;
}

[data-employee-detail] {
  cursor: pointer;
}

[data-employee-detail]:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.07);
  transform: translateY(-2px);
}

.row-item[data-employee-detail],
.dashboard-detail-person {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 28%, #fbfcfa);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 58%, transparent);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.row-item[data-employee-detail]:hover,
.dashboard-detail-person:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.07);
  transform: translateY(-1px);
}

.row-item small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.contract-expiry-section {
  margin-top: 18px;
  border: 2px solid #f0c85a;
  border-radius: 10px;
  padding: 10px;
  background: #fff8df;
}

.contract-expiry-section .panel-subtitle {
  display: block;
  margin-top: 2px;
}

.contract-expiry-list {
  margin-top: 10px;
}

.contract-expiry-row {
  cursor: pointer;
}

.contract-expiry-row > span:first-child > strong {
  font-size: 14px;
  line-height: 1.15;
}

.contract-expiry-row > span:first-child > small {
  font-size: 10px;
}

.contract-expiry-date {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-detail-people {
  gap: 8px;
}

.dashboard-detail-person {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 8px 10px;
}

.dashboard-detail-person strong {
  font-size: 14px;
  line-height: 1.15;
  font-weight: 900;
}

.dashboard-detail-person small {
  font-size: 10px;
}

.profile-history-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.profile-history-details .absence-timeline,
.profile-history-details .empty-state {
  margin-top: 12px;
}

.availability-input-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

/* Pfeil „Zeiten auf nächsten Wochentag übertragen" (Modal + Profil). */
.avail-copy-next {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
  z-index: 2;
}
.avail-copy-next svg { width: 13px; height: 13px; }
.avail-copy-next:hover { opacity: 1; background: var(--accent-soft); color: var(--accent); }

.availability-input {
  position: relative;
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f5f3;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  text-align: center;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.availability-input-head input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.availability-input:hover {
  border-color: #9cc9b7;
  transform: translateY(-1px);
}

.availability-input.active,
.availability-input:has(input:checked) {
  border-color: #b7d9ca;
  background: var(--accent-soft);
  color: var(--accent);
}

.availability-input-day {
  line-height: 1;
}

.availability-input small {
  color: inherit;
  font-size: 9px;
  font-weight: 800;
  opacity: 0.72;
}

.status-info-list .row-item {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 10px;
}

.status-info-row {
  align-items: flex-start;
}

.status-info-list .badge {
  min-height: 24px;
  font-weight: 800;
}

.status-info-list small {
  margin-top: 0;
  line-height: 1.35;
}

.ranking-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 99px;
  padding: 0 9px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12px;
  white-space: nowrap;
}

.badge.good {
  background: #e4f3e9;
  color: var(--good);
}

.badge.warn {
  background: #fff1d9;
  color: var(--warn);
}

.badge.bad {
  background: #f6c9c9;
  color: #a3261f;
}

.badge.info {
  background: #dceaf6;
  color: #1f5f8b;
}

.badge.profile-status-badge {
  justify-content: center;
  min-width: 94px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 900;
}

.trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.employee-trend-value .trend-pill,
.metric .trend-pill {
  min-height: 32px;
  gap: 8px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.employee-trend-value .trend-pill span,
.metric .trend-pill span {
  font-size: 20px;
}

.trend-pill span {
  font-size: 15px;
  line-height: 1;
}

.trend-pill.good {
  background: #e4f3e9;
  color: var(--good);
}

.trend-pill.warn {
  background: #fff1d9;
  color: var(--warn);
}

.trend-pill.bad {
  background: #fae5e2;
  color: var(--bad);
}

.trend-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.trend-arrow.good {
  background: #e4f3e9;
  color: var(--good);
}

.trend-arrow.warn {
  background: #fff1d9;
  color: var(--warn);
}

.trend-arrow.bad {
  background: #fae5e2;
  color: var(--bad);
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
}

.split-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.employee-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 78%, var(--surface-soft));
  box-shadow: 0 8px 28px rgba(17, 23, 21, 0.05);
}

.employee-search-field {
  flex: 1 1 280px;
  max-width: 360px;
}

.employee-filter-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 1 auto;
  flex-wrap: wrap;
}

.filter-menu {
  position: relative;
  flex: 0 0 196px;
  width: 196px;
}

.filter-menu summary {
  list-style: none;
}

.filter-menu summary::-webkit-details-marker {
  display: none;
}

.filter-chip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  width: 100%;
  min-width: 0;
  padding: 6px 34px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.filter-chip:hover {
  border-color: #bfd1ca;
  box-shadow: 0 8px 22px rgba(20, 31, 28, 0.08);
  transform: translateY(-1px);
}

.filter-chip::after {
  content: "⌄";
  position: absolute;
  right: 11px;
  top: 50%;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  transform: translateY(-52%);
}

.filter-menu[open] .filter-chip {
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(20, 31, 28, 0.1);
}

.filter-menu-popover {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 7px);
  display: grid;
  gap: 6px;
  min-width: max(100%, 280px);
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(20, 31, 28, 0.16);
}

.filter-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.filter-option:hover,
.filter-option.active {
  border-color: var(--line);
  background: var(--surface-soft);
}

.filter-option > span:not(.employee-avatar):not(.trend-arrow):not(.badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.filter-option > strong {
  color: var(--accent);
  font-size: 13px;
}

.filter-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 5px 2px;
}

.filter-group-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 4px 6px;
}

.filter-group-seg {
  display: flex;
  width: 100%;
}

.filter-group-seg button {
  flex: 1;
  padding: 6px 8px;
  font-size: 13px;
}

.filter-menu-footer {
  position: sticky;
  bottom: -8px;
  display: flex;
  justify-content: flex-end;
  margin: 2px -8px -8px;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.filter-menu-footer .primary-button {
  min-height: 28px;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 12px;
}

.filter-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 12px;
}

.filter-chip .trend-arrow {
  width: 34px;
  height: 34px;
}

.filter-chip .badge {
  min-height: 28px;
  padding: 0 10px;
  font-weight: 800;
}

.status-filter-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e4f3e9;
}

.status-filter-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--good);
}

.filter-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.filter-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-text {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.filter-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 128px;
  width: 128px;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

.filter-reset span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  line-height: 1;
}

.filter-reset.inactive {
  visibility: hidden;
  pointer-events: none;
}

.data-table th,
.data-table td {
  padding: 10px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.data-table th:first-child,
.data-table td:first-child {
  width: 34px;
  text-align: center;
}

.data-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.data-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.employee-list-more {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--surface));
  color: var(--muted);
  font-size: 12px;
}

.sort-header {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.sort-header:hover,
.sort-header.active {
  color: var(--accent);
}

.sort-header em {
  min-width: 12px;
  font-style: normal;
  line-height: 1;
}

.data-table tr {
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
}

.employee-overview-table {
  min-width: 1100px;
}

.employee-overview-table th,
.employee-overview-table td {
  padding-left: 6px;
  padding-right: 6px;
}

.employee-overview-table th:nth-child(2),
.employee-overview-table td:nth-child(2) {
  min-width: 280px;
  width: 320px;
}

.employee-overview-table th:nth-child(3),
.employee-overview-table td:nth-child(3) {
  width: 118px;
}

.employee-overview-table th:nth-child(5),
.employee-overview-table td:nth-child(5),
.employee-overview-table th:nth-child(6),
.employee-overview-table td:nth-child(6),
.employee-overview-table th:nth-child(7),
.employee-overview-table td:nth-child(7),
.employee-overview-table th:nth-child(8),
.employee-overview-table td:nth-child(8) {
  width: 62px;
  white-space: nowrap;
}

.employee-overview-table th:nth-child(5),
.employee-overview-table th:nth-child(6),
.employee-overview-table th:nth-child(7),
.employee-overview-table th:nth-child(8),
.employee-overview-table td:nth-child(5),
.employee-overview-table td:nth-child(6),
.employee-overview-table td:nth-child(7),
.employee-overview-table td:nth-child(8) {
  font-size: 12px;
  line-height: 1.15;
}

.employee-overview-table td:nth-child(5) strong,
.employee-overview-table td:nth-child(8) strong {
  font-size: 12px;
}

.employee-overview-table th:nth-child(10),
.employee-overview-table td:nth-child(10) {
  width: 78px;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
}

.employee-overview-table th:nth-child(11),
.employee-overview-table td:nth-child(11) {
  width: 74px;
}

.employee-overview-table tbody tr.has-exit-date {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--ink) 30%);
}

.employee-overview-table tbody tr.has-exit-date:hover {
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--ink) 38%);
}

.employee-trend-cell {
  padding-left: 14px !important;
}

.employee-table-person {
  display: inline-grid;
  grid-template-columns: 38px minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.employee-table-person strong,
.employee-table-person small {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.employee-table-person strong {
  font-weight: 800;
}

.employee-table-person small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.employee-table-person:hover strong {
  color: var(--accent);
}

.employee-contract-cell {
  display: grid;
  gap: 2px;
}

.employee-contract-cell strong {
  font-size: 13px;
  font-weight: 700;
}

.employee-contract-cell small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.compact-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.data-table td.compact-actions {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
}

.data-table td.compact-actions .icon-button {
  margin-left: 6px;
}

.icon-button {
  width: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.employee-modal-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.employee-modal-avatar {
  position: sticky;
  top: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 12px;
  background: #f7faf8;
  text-align: center;
}

.employee-modal-avatar strong {
  margin-top: 4px;
}

.employee-modal-avatar small {
  color: var(--muted);
  line-height: 1.35;
}

.employee-modal-fields,
.form-section {
  display: grid;
  gap: 12px;
}

.form-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfcfb;
}

.form-section h3 {
  margin: 0;
  font-size: 14px;
}

.form-grid label,
.import-box label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.form-grid input,
.form-grid select,
.import-box input {
  min-height: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}
/* Datei-Auswahl-Button vertikal mittig im 34px-Feld. */
.import-box input[type="file"] { padding: 5px 10px; line-height: 22px; }

.readonly-field {
  color: var(--muted);
  background: var(--surface-soft) !important;
}

.inline-date-input {
  min-height: 30px;
  width: 138px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.type-toggle-group,
.absence-type-picker,
.vacation-month-selector {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.absence-type-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.type-toggle,
.month-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.absence-type-picker .type-toggle {
  justify-content: center;
  min-height: 40px;
  border-radius: 8px;
  padding: 0 8px;
}

.type-toggle input,
.month-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

.type-toggle.active,
.month-check.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
  color: var(--ink);
}

.type-toggle-group > strong {
  color: var(--muted);
  font-size: 12px;
}

.vacation-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

.vacation-donut {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.vacation-donut-ring {
  position: relative;
  width: min(220px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--donut);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent), 0 14px 34px rgba(31, 43, 40, 0.12);
}

.vacation-donut-ring::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: inherit;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.vacation-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  z-index: 1;
}

.vacation-donut-center strong {
  font-size: 32px;
  line-height: 1;
}

.vacation-donut-center small,
.vacation-donut-center em {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vacation-donut-center em {
  margin-top: 3px;
  color: var(--ink);
  font-style: normal;
}

.vacation-donut-legend {
  display: grid;
  width: 100%;
  gap: 8px;
}

.vacation-donut-legend span {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.vacation-donut-legend strong {
  color: var(--ink);
  display: inline-grid;
  justify-items: end;
  line-height: 1.1;
}

.vacation-donut-legend small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-dot.taken {
  background: var(--accent);
}

.legend-dot.planned {
  background: #8ed0b6;
}

.legend-dot.remaining {
  background: #d9efe6;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}

/* Verteilungs-Pillen exakt unter den Balken: gleiche Aufteilung wie das SVG
   (pad 42 / 960 = 4.375 %, Lücke 10 / 960 = 1.0417 %, 12 Spalten). */
.vacation-distribution-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.0417%;
  padding: 4px 4.375% 0;
  box-sizing: border-box;
  width: 100%;
}
.vac-dist-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.vac-dist-pill:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.vac-dist-pill.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.vac-dist-pill input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.vacation-calendar {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.vacation-calendar-head,
.vacation-calendar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) repeat(var(--days, 31), minmax(18px, 1fr));
  gap: 4px;
  align-items: center;
  min-width: 100%;
}

.vacation-calendar-head span,
.vacation-calendar-head strong {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.vacation-calendar-row {
  min-height: 34px;
  border-radius: 8px;
  transition: background 160ms ease;
}

.vacation-calendar-row:hover {
  background: #f7faf8;
}

.vacation-calendar-row > span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-right: 8px;
}

.vacation-calendar-row .employee-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 11px;
}

.vacation-calendar-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
/* Urlaub-Reiter: Namensspalte passt sich dem längsten Namen an, keine Abschneidung. */
.vacation-calendar-fit .vacation-calendar-head,
.vacation-calendar-fit .vacation-calendar-row {
  grid-template-columns: var(--namecol, 160px) repeat(var(--days, 31), minmax(18px, 1fr));
}
.vacation-calendar-fit .vacation-calendar-row strong {
  overflow: visible;
  text-overflow: clip;
}

.vacation-calendar-row i {
  width: 100%;
  min-width: 18px;
  height: 24px;
  border-radius: 6px;
  background: var(--surface-soft);
}

.vacation-calendar-row i.booked {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.vacation-calendar-row i.weekend,
.vacation-calendar-head .weekend {
  opacity: 0.42;
}

.fluctuation-box {
  margin-top: 14px;
}

.fluctuation-chart {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 116px;
  margin-top: 10px;
}

.fluctuation-bar {
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--muted);
  font-size: 11px;
}

.fluctuation-bar div {
  display: flex;
  align-items: end;
  width: 100%;
  height: 74px;
  border-radius: 8px;
  background: var(--surface-soft);
  overflow: hidden;
}

.fluctuation-bar i {
  display: block;
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: var(--accent-2);
}

.form-grid input:focus,
.form-grid select:focus,
.field:focus,
.search-field:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-color: var(--accent);
}

.absence-form {
  display: grid;
  gap: 12px;
}

.workspace-grid .main-column .absence-form {
  min-height: 540px;
}

.quick-entry-form {
  display: grid;
  gap: 12px;
}

.quick-entry-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8faf9;
}

.quick-entry-section[hidden] {
  display: none !important;
}

.quick-entry-grid {
  display: grid;
  gap: 10px;
}

.quick-entry-grid label,
.quick-entry-section label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.quick-entry-grid textarea,
.quick-entry-section textarea {
  min-height: 116px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.45;
}

.quick-preview {
  min-height: 54px;
}

.quick-preview-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
  background: #fbfcfa;
}

.quick-preview-row strong {
  font-size: 12px;
  white-space: nowrap;
}

.quick-preview-row.warn {
  border-color: #f0d49d;
  background: #fff8ea;
}

.quick-preview-row.bad {
  border-color: #efc0bb;
  background: #fff0ee;
  color: var(--bad);
}

.absence-entry-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(250px, 0.92fr);
  gap: 14px;
}

.employee-pick-panel,
.date-pick-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 9px;
  align-content: start;
}
.employee-picker-list { min-width: 0; }

/* AU-/Krankmeldungs-Upload (Drag&Drop + Klick → OCR). */
.au-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border: 1.5px dashed var(--line); border-radius: 12px;
  background: #f7faf8; cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.au-drop:hover, .au-drop.au-drag { border-color: var(--accent); background: var(--accent-soft); }
.au-drop-ico {
  width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent);
}
.au-drop-ico svg { width: 20px; height: 20px; }
.au-drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.au-view-btn { margin-left: auto; flex: none; padding: 5px 11px; border: 0.5px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.au-view-btn:hover { background: var(--accent-soft); }
.au-drop-text strong { font-size: 13px; font-weight: 700; }
.au-drop-text small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-drop.au-busy { border-style: solid; border-color: var(--accent-4); cursor: progress; }
.au-drop.au-busy .au-drop-ico { background: color-mix(in srgb, var(--accent-4) 16%, var(--surface)); color: var(--accent-4); animation: au-pulse 1s ease-in-out infinite; }
.au-drop.au-ok { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.au-drop.au-ok .au-drop-ico { background: var(--accent); color: #fff; }
.au-drop.au-err { border-style: solid; border-color: var(--accent-2); }
.au-drop.au-err .au-drop-ico { background: #fae5e2; color: #b3261e; }
@keyframes au-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
/* „+Abwesenheit"-Button als Ablagefläche markieren, wenn eine Datei darübergezogen wird. */
button.au-drag { outline: 2px dashed var(--accent); outline-offset: 3px; }

.employee-pick-panel label,
.date-pick-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.employee-picker-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.employee-picker-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.employee-picker-list {
  display: grid;
  gap: 8px;
  max-height: 290px;
  overflow: auto;
  padding: 2px;
}

.workspace-grid .main-column .employee-picker-list {
  max-height: 410px;
}

.employee-picker-search-wrap {
  position: relative;
  display: block;
}

.employee-picker-search-wrap .field {
  width: 100%;
  padding-right: 34px;
}

.employee-pick-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--accent-soft) 34%, #fbfcfb);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 68%, transparent), 0 6px 16px rgba(20, 31, 28, 0.04);
  color: var(--ink);
  text-align: left;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.employee-pick-card[hidden],
.employee-picker-empty[hidden] {
  display: none !important;
}

.employee-pick-card:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 54%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.07);
  transform: translateY(-1px);
}

.employee-pick-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 72%, #fbfcfb);
  box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(20, 31, 28, 0.08);
}

.fixed-employee-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--accent-soft) 34%, #fbfcfb);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 68%, transparent), 0 6px 16px rgba(20, 31, 28, 0.04);
}

.fixed-employee-card strong,
.fixed-employee-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed-employee-card small {
  margin-top: 2px;
  color: var(--muted);
}

.employee-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #dfeee9;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0;
}

.employee-avatar.has-pattern-warning {
  position: relative;
}

.employee-pattern-warning {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #b44747;
  opacity: .72;
  pointer-events: auto;
}

.employee-pattern-warning svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: color-mix(in srgb, currentColor 28%, transparent);
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.employee-pick-main {
  min-width: 0;
}

.employee-pick-main strong,
.employee-pick-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-pick-main small {
  margin-top: 2px;
  color: var(--muted);
}

.employee-pick-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.pick-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #dfeee9;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.employee-pick-card.active .pick-check {
  background: var(--accent);
  color: #fff;
}

.employee-picker-empty {
  padding: 18px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: #fbfcfb;
}

.absence-summary {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8faf9;
}

.absence-summary span {
  color: var(--muted);
  font-size: 12px;
}

.absence-summary strong {
  font-size: 24px;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.hint {
  color: var(--muted);
  font-size: 13px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 33, 27, 0.38);
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  width: min(720px, 100%);
  max-height: min(88vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* Neue Abwesenheit (mit Mitarbeiterliste): breiter, damit die 2 Spalten nicht überlappen. */
.modal.modal-absence { width: min(960px, 96vw); }
/* Mitarbeiterliste (links) etwas schmaler, Art/Zeitraum (rechts) bekommt mehr Platz. */
.modal-absence .absence-entry-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 0.92fr); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 16px;
}

.modal-body {
  padding: 16px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  min-width: min(360px, calc(100vw - 48px));
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}

.empty-state {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.empty-state.compact {
  margin-top: 10px;
  padding: 14px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  font-size: 12px;
}

.import-box {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.data-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.file-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--muted) !important;
  cursor: pointer;
}

.file-action input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.privacy-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1040px) {
  :root { --sticky-topbar-offset: 148px; }
  .topbar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .topbar .nav, .topbar .actions { justify-self: start; }

  .dashboard-grid,
  .forecast-layout,
  .split-grid,
  .workspace-grid,
  .vacation-dashboard-grid,
  .absence-entry-grid,
  .profile-facts,
  .profile-hero,
  .profile-hero-meta,
  .profile-personal-line {
    grid-template-columns: 1fr;
  }

  .profile-status-badge {
    min-height: 44px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-card-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .forecast-hero,
  .forecast-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) and (min-width: 1041px) {
  .forecast-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .page,
  .topbar {
    padding-left: 14px;
    padding-right: 14px;
  }

  .metrics,
  .dashboard-card-top-grid,
  .forecast-metrics,
  .form-grid,
  .employee-modal-layout,
  .weekday-distribution {
    grid-template-columns: 1fr;
  }

  .forecast-week-labels,
  .forecast-heatmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .forecast-week-labels {
    display: none;
  }

  .employee-modal-avatar {
    position: static;
  }

  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-table {
    min-width: 720px;
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .nav,
  .actions {
    width: 100%;
    justify-content: stretch;
  }

  .nav button,
  .actions button {
    flex: 1;
  }

  .chart {
    overflow-x: auto;
  }

  .chart svg {
    min-width: 680px;
  }

  .panel-body {
    overflow-x: auto;
  }

  .forecast-week-labels,
  .forecast-heatmap {
    min-width: 650px;
  }

  .availability-input-grid,
  .weekday-distribution {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    position: static;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand strong {
    font-size: 16px;
  }

  .brand span {
    font-size: 11px;
  }

  .nav,
  .actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .nav button,
  .actions button {
    flex: 0 0 auto;
    min-height: 38px;
  }

  .page {
    padding-top: 12px;
    padding-bottom: 28px;
  }

  .period-switch {
    width: 100%;
  }

  .period-switch button {
    flex: 1;
    padding: 0 6px;
    font-size: 12px;
  }

  .filters,
  .search-field,
  .field {
    width: 100%;
  }

  .employee-filter-bar {
    width: 100%;
    padding: 7px;
  }

  .employee-search-field,
  .search-wrap,
  .employee-filter-actions,
  .filter-menu {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .employee-filter-actions {
    justify-content: stretch;
  }

  .filter-chip,
  .filter-reset {
    width: 100%;
    min-width: 0;
  }

  .filter-menu-popover {
    left: 0;
    right: 0;
    min-width: 100%;
  }

  .filter-reset {
    margin-left: 0;
  }

  .toolbar .hint {
    width: 100%;
    text-align: left;
  }

  .metric {
    min-height: 78px;
    padding: 12px;
  }

  /* Mobil: feste Kachelhöhe lösen, sonst wird der Hinweistext abgeschnitten. */
  .page-dashboard .metric {
    height: auto;
    min-height: 92px;
    overflow: visible;
  }

  .metric strong {
    font-size: 28px;
  }

  .panel-header,
  .profile-toolbar,
  .form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-header .compare-toggle,
  .panel-header .forecast-month-control,
  .panel-header .search-wrap,
  .profile-toolbar .actions,
  .form-footer .primary-button,
  .form-footer .ghost-button {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .forecast-month-control {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
  }

  .forecast-month-control-title,
  .forecast-month-control-summary {
    grid-column: 1 / -1;
  }

  .forecast-month-input {
    grid-column: 2;
  }

  .employee-pick-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .employee-pick-meta {
    grid-column: 2;
    justify-self: start;
  }

  .date-pick-panel {
    grid-template-columns: 1fr;
  }

  .quick-preview-row,
  .row-item,
  .absence-card {
    grid-template-columns: 1fr;
  }

  .employee-card-stats,
  .compact-actions {
    justify-content: flex-start;
  }

  .modal {
    width: 100%;
    max-height: 92vh;
  }

  .toast {
    right: 12px;
    bottom: 12px;
    min-width: calc(100vw - 24px);
  }
}

@media (prefers-color-scheme: dark) {
  .topbar {
    background: rgba(16, 21, 19, 0.92);
  }

  .nav button.active,
  .secondary-button {
    background: #e8f1ee;
    color: #111715;
  }

  .ghost-button,
  .field,
  .search-field,
  .form-grid input,
  .form-grid select,
  .import-box input,
  .quick-entry-grid textarea,
  .quick-entry-section textarea,
  .file-action,
  .icon-button {
    background: var(--surface);
    color: var(--ink);
  }

  .period-switch,
  .compare-toggle,
  .absence-summary,
  .quick-entry-section,
  .fixed-employee-card,
  .employee-filter-bar {
    background: #151c19;
  }

  .filter-chip {
    background: var(--surface);
    border-color: #2a3834;
  }

  .filter-menu-popover {
    background: var(--surface);
    border-color: #2a3834;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  }

  .filter-menu-footer {
    background: var(--surface);
    border-color: #2a3834;
  }

  .filter-option:hover,
  .filter-option.active {
    border-color: #3b514b;
    background: #1d2824;
  }

  .status-filter-dot {
    background: #173424;
  }

  .filter-reset {
    background: #18352f;
    color: #8fd2b7;
    border-color: #2c5d50;
  }

  .period-switch button:hover,
  .period-switch button.active {
    background: #24302c;
    color: var(--ink);
  }

  .metric,
  .panel,
  .profile-hero {
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .profile-hero {
    background: linear-gradient(135deg, #171d1b 0%, #20312c 100%);
  }

  .day-bar,
  .employee-card,
  .absence-card,
  .row-item,
  .risk-row,
  .fact,
  .quick-preview-row,
  .employee-pick-card,
  .employee-picker-empty,
  .fixed-employee-card {
    background: color-mix(in srgb, var(--accent-soft) 14%, #151c19);
  }

  .day-bar:hover,
  .employee-card:hover,
  .absence-card:hover,
  .risk-row:hover,
  .metric[data-dashboard-filter]:hover,
  .metric[data-dashboard-detail]:hover,
  .employee-pick-card:hover,
  [data-employee-detail]:hover,
  .data-table tbody tr:hover,
  .clickable-row:hover {
    border-color: #3b514b;
    background: #1d2824;
  }

  .day-bar.active,
  .employee-card.active,
  .employee-pick-card.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 26%, #18352f);
    box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(0, 0, 0, 0.18);
  }

  .badge.good,
  .trend-pill.good,
  .trend-arrow.good {
    background: #173424;
    color: var(--good);
  }

  .badge.warn,
  .trend-pill.warn,
  .trend-arrow.warn,
  .quick-preview-row.warn {
    background: #3a2a12;
    color: var(--warn);
  }

  .badge.bad,
  .trend-pill.bad,
  .trend-arrow.bad,
  .quick-preview-row.bad {
    background: #3b1d1b;
    color: var(--bad);
  }

  .quick-preview-row.warn {
    border-color: #5d4219;
  }

  .quick-preview-row.bad {
    border-color: #63302c;
  }

  .heat-cell,
  .day-bar-track,
  .risk-track,
  .employee-pick-meta,
  .badge,
  .trend-pill,
  .trend-arrow {
    background: var(--surface-soft);
  }

  .employee-avatar,
  .pick-check {
    background: #203a34;
    color: var(--accent);
  }

  .employee-pick-card.active .pick-check {
    background: var(--accent);
    color: #101513;
  }

  .axis-label,
  .chart-label {
    fill: var(--muted);
  }

  .modal-backdrop {
    background: rgba(0, 0, 0, 0.58);
  }

  .toast {
    background: #e8f1ee;
    color: #111715;
  }
}

/* ---- Bewegung & dynamische Effekte ---- */
.bar {
  transform-box: fill-box;
}

button {
  transition:
    transform 120ms ease,
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

button:active {
  transform: scale(0.97);
}

.metric,
.forecast-metric-card,
.panel {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.metric:hover,
.forecast-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20, 31, 28, 0.1);
}

.page-dashboard .metric.dashboard-metric-enter {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
}

.page-dashboard .metric.dashboard-metric-enter.dashboard-metric-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.page-dashboard .metric.dashboard-metric-enter.dashboard-metric-in:hover {
  transform: translateY(-2px);
}

.panel:hover {
  box-shadow: 0 12px 30px rgba(20, 31, 28, 0.08);
}

.page.view-anim {
  animation: viewFade 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes viewFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-backdrop.open {
  animation: backdropFade 200ms ease;
}

@keyframes backdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-backdrop.open .modal {
  animation: modalPop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.toast {
  animation: toastIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.risk-track span,
.day-bar-track span,
.weekday-line em {
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger-item {
  opacity: 0;
  transform: translateY(8px);
}

.stagger-item.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.42s ease,
    transform 0.42s ease;
}

/* Anhebbare Karten beim Hover anheben – höhere Spezifität als .stagger-item.in (sonst überschreibt
   die Einblendung das Anheben). Nicht-anhebbare Zeilen (z. B. Tabellen) bleiben so unverändert (nur Farbe). */
.absence-card.stagger-item:hover,
.risk-row.stagger-item:hover,
.forecast-day-row.stagger-item:hover,
[data-employee-detail].stagger-item:hover {
  transform: translateY(-2px);
}

.heat-pop {
  opacity: 0;
  transform: scale(0.6);
}

.heat-pop.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.34s ease,
    transform 0.34s ease;
}

/* Mitarbeiter-Tabelle: kompaktere Spalten */
.employee-overview-table th {
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
}
.employee-overview-table .sort-header {
  white-space: normal;
}
.employee-overview-table .col-fixedterm {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.employee-overview-table .inline-date-input {
  width: 116px;
  font-size: 11px;
}

/* Urlaubs-Progressbar in der Mitarbeiterliste */
.vacation-progress-cell {
  min-width: 156px;
}
.vac-bar {
  display: grid;
  gap: 4px;
}
.vac-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #d9f0e6;
  overflow: hidden;
}
.vac-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.vac-bar.overused .vac-bar-track {
  background: color-mix(in srgb, var(--bad) 18%, var(--surface-soft));
}

.vac-bar.overused .vac-bar-fill {
  background: var(--bad);
}
.vac-bar-nums {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.vac-num.total {
  color: var(--muted);
}
.vac-num.used {
  color: var(--accent);
}
.vac-num.rest {
  color: var(--good);
}

.vac-bar.overused .vac-num.used,
.vac-bar.overused .vac-num.rest {
  color: var(--bad);
}

.vacation-segment-value {
  font-size: 11px;
  font-weight: 800;
  paint-order: stroke;
  pointer-events: none;
}

.vacation-segment-value.dark {
  fill: #fff;
  stroke: rgba(31, 43, 40, 0.55);
  stroke-width: 3px;
}

.vacation-segment-value.medium,
.vacation-segment-value.light {
  fill: var(--ink);
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 3px;
}

/* Donut-Eintritts-Animation (Urlaub-Reiter) */
@keyframes donutEnter {
  from {
    opacity: 0;
    transform: rotate(-110deg) scale(0.85);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}
.vacation-donut-ring.donut-enter {
  animation: donutEnter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Custom Datepicker (Dropdown-Kalender)
   ============================================================ */
.dp-field {
  position: relative;
  display: block;
  width: 100%;
}

.dp-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.dp-trigger:hover {
  border-color: var(--accent);
}

.dp-trigger:focus-visible,
.dp-field[data-dp-field] .dp-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dp-trigger .dp-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dp-display {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-display.dp-placeholder {
  color: var(--muted);
}

/* Kompaktes Datumsfeld in der Mitarbeiter-Tabelle */
.employee-overview-table .dp-field {
  width: 150px;
}

.employee-overview-table .dp-trigger {
  min-height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
}

.employee-overview-table .dp-trigger .dp-icon {
  width: 15px;
  height: 15px;
}

.employee-overview-table .dp-display {
  font-size: 12px;
}

/* Popup-Kalender */
.dp-popup {
  position: fixed;
  z-index: 1000;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  animation: dpPopIn 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dpPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.dp-title {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

/* Eigene Monat/Jahr-Dropdowns im Kalender – Liste im Stil der übrigen App-Dropdowns. */
.dp-sel-wrap { position: relative; flex: 1 1 0; min-width: 0; }
.dp-sel-month { flex: 1.25 1 0; }
.dp-sel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.dp-sel:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.dp-sel[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dp-sel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-sel-arrow { display: inline-flex; flex: 0 0 auto; color: var(--muted); transition: transform 150ms ease; }
.dp-sel[aria-expanded="true"] .dp-sel-arrow { transform: rotate(180deg); }
.dp-sel-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 14px 36px rgba(20, 31, 28, 0.22);
  max-height: 220px;
  overflow: auto;
  overscroll-behavior: contain;
}
.dp-sel-menu[hidden] { display: none; }
.dp-sel-opt { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.dp-sel-opt:hover { background: var(--accent-soft); }
.dp-sel-opt.sel { background: var(--accent); color: #fff; font-weight: 700; }

.dp-nav {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  transition: background 140ms ease;
}

.dp-nav:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.dp-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.dp-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.dp-day:hover:not(.dp-past):not(.dp-empty) {
  background: var(--accent-soft);
  color: var(--accent);
  transform: scale(1.06);
}

.dp-day.dp-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  font-weight: 700;
}

/* Gesetzliche Feiertage (je Bundesland) markieren – gleiche Farbe wie in der Besetzung-Heatmap. */
.dp-day.dp-holiday {
  color: var(--accent-3);
  background: rgba(217, 151, 36, 0.13);
}

.dp-day.dp-selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.dp-day.dp-empty {
  pointer-events: none;
}

/* Vergangenheit ausgeblendet */
.dp-day.dp-past {
  visibility: hidden;
  pointer-events: none;
}

.dp-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.dp-clear,
.dp-today-btn {
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  transition: background 140ms ease;
}

.dp-today-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dp-clear:hover { background: var(--accent-soft); color: var(--accent); }
.dp-today-btn:hover { filter: brightness(1.05); }

/* Mobile: zentriertes Sheet */
.dp-popup.dp-popup-sheet {
  position: fixed;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 24px));
  animation: dpSheetIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dpSheetIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.dp-popup.dp-popup-sheet .dp-day {
  font-size: 16px;
}

/* ============================================================
   Jahr-Umschalter für Urlaubsgrafiken
   ============================================================ */
.year-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.year-switch .year-step {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  transition: background 140ms ease, color 140ms ease;
}

.year-switch .year-step:hover {
  background: var(--accent);
  color: #fff;
}

.year-switch .year-current {
  min-width: 52px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================
   Merktermine
   ============================================================ */
.reminder-section {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--accent-3);
  border-radius: 14px;
  background: rgba(217, 151, 36, 0.10);
}

.reminder-section .panel-title {
  color: var(--accent-3);
}

.reminder-dashboard-row {
  cursor: pointer;
}

.reminder-dashboard-date {
  font-weight: 700;
  color: var(--accent-3);
  white-space: nowrap;
}

.reminder-form {
  display: grid;
  gap: 10px;
}

.reminder-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.reminder-form input[name="reminderLabel"] {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}

.reminder-list .reminder-row {
  align-items: center;
}

/* ============================================================
   Mobile-Optimierung (Ergänzung)
   ============================================================ */
@media (max-width: 680px) {
  .reminder-form .primary-button {
    width: 100%;
  }

  .year-switch {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .dp-popup {
    padding: 14px;
  }

  .reminder-section {
    padding: 12px;
  }

  .profile-toolbar,
  .profile-period-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .profile-toolbar .actions {
    width: 100%;
  }

  .metric {
    min-width: 0;
  }
}

/* ============================================================
   Moderne Abwesenheits-Typ-Auswahl + Diagramm-Legende
   ============================================================ */
.type-toggle-pill[data-type="krank"],
.type-legend-chip[data-type="krank"] { --type-color: var(--accent-2); }
.type-toggle-pill[data-type="urlaub"],
.type-legend-chip[data-type="urlaub"] { --type-color: var(--accent); }
.type-toggle-pill[data-type="sonstige"],
.type-legend-chip[data-type="sonstige"] { --type-color: var(--accent-3); }

/* Auswahl neuer Abwesenheiten (Radio-Pills) */
.absence-type-picker .type-toggle-pill {
  position: relative;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.absence-type-picker .type-toggle-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-toggle-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--type-color);
  opacity: 0.4;
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.absence-type-picker .type-toggle-pill:hover {
  border-color: var(--type-color);
  transform: translateY(-1px);
}

.absence-type-picker .type-toggle-pill.active {
  border-color: var(--type-color);
  background: color-mix(in srgb, var(--type-color) 14%, var(--surface));
  color: var(--ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--type-color) 22%, transparent);
}

.absence-type-picker .type-toggle-pill.active .type-toggle-dot {
  opacity: 1;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--type-color) 22%, transparent);
}

/* Diagramm-Legende als farbige Auswahl-Chips unter dem Diagramm */
.type-legend-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.type-legend-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 15px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.type-legend-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--type-color);
  opacity: 0.38;
  transition: opacity 160ms ease, box-shadow 160ms ease;
}

.type-legend-chip:hover {
  border-color: var(--type-color);
  transform: translateY(-1px);
}

.type-legend-chip.active {
  border-color: var(--type-color);
  background: color-mix(in srgb, var(--type-color) 13%, var(--surface));
  color: var(--type-color);
}

.type-legend-chip.active .type-legend-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--type-color) 24%, transparent);
}

@media (max-width: 520px) {
  /* Art-Buttons bleiben nebeneinander (3 Spalten), statt zu drei hohen Vollbreit-Buttons zu stapeln. */
  .absence-type-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .absence-type-picker .type-toggle { padding: 0 4px; font-size: 12px; }
}

/* ============================================================
   Verfügungszeiten (Zeitfenster je Wochentag)
   ============================================================ */
.availability-time-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.availability-time-grid .availability-input {
  display: flex;
  flex-direction: column;
  place-items: stretch;
  gap: 8px;
  min-height: 0;
  padding: 10px;
}
.availability-input-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.availability-times {
  display: flex;
  align-items: center;
  gap: 6px;
}
.availability-times[hidden] { display: none; }
.availability-time-grid .availability-time-field {
  position: static;
  opacity: 1;
  pointer-events: auto;
  flex: 1;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 4px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}
.availability-time-sep { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 10px; flex: 0 0 auto; font-size: 0; color: transparent; }
.availability-time-sep::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: var(--muted); transform: translateX(2px); }

/* ============================================================
   Musterdienstplan
   ============================================================ */
.view-title { font-size: 18px; margin: 0; }

.musterplan-day-bar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

/* Wochentag-Kacheln: links Tag + Stunden (gestapelt), rechts daneben die Mini-Schichtleisten. */
.musterplan-day-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
.musterplan-day-pill:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 31, 28, 0.08); }
.musterplan-day-pill.active { border-color: var(--accent); background: var(--accent-soft); }
.musterplan-day-pill.active .mp-pill-day { color: var(--accent); }
.musterplan-day-pill.holiday.active { border-color: var(--accent-3); background: rgba(217,151,36,0.12); }
.musterplan-day-pill.holiday.active .mp-pill-day { color: var(--accent-3); }
.mp-pill-info { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex: 0 0 auto; }
.mp-pill-day { font-size: 13px; font-weight: 800; color: var(--ink); }
.musterplan-day-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.musterplan-day-pill.holiday .musterplan-day-count { background: var(--accent-3); }
/* In den Schichtzeiten geschlossener Wochentag: gesperrt, 0 h, kein Hover-Lift. */
.musterplan-day-pill.is-closed {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-soft);
  box-shadow: none;
}
.musterplan-day-pill.is-closed:hover { border-color: var(--line); transform: none; box-shadow: none; }
.musterplan-day-pill.is-closed .mp-pill-day { color: var(--muted); }
.musterplan-day-count.closed { background: var(--muted); color: #fff; }
.mp-lock { width: 13px; height: 13px; vertical-align: -2px; margin-left: 4px; color: var(--muted); }
/* Mini-Schichtleisten: je Schicht ein dünner Balken über 06:00–06:00 (ohne Stationsnamen, ohne Hintergrund). */
.mp-pill-mini { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; align-self: stretch; justify-content: center; }
.mp-pill-mini-empty { min-height: 4px; }
.mp-mini-row { position: relative; height: 2.5px; }
.mp-mini-bar { position: absolute; top: 0; bottom: 0; border-radius: 1px; min-width: 2px; }

.coverage-grid-wrap, .hm-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.coverage-grid { min-width: 1120px; display: grid; gap: 4px; }
.coverage-row {
  display: grid;
  grid-template-columns: 92px repeat(var(--slots), minmax(0, 1fr));
  gap: 2px;
  align-items: center;
}
.coverage-rowlabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coverage-rowlabel i {
  width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto;
  background: var(--station-color, var(--accent));
}
.coverage-hourlabel {
  font-size: 9px;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}
.coverage-hourlabel.tick { border-left: 1px solid var(--line); padding-left: 1px; }
.coverage-cell {
  display: flex; align-items: center; justify-content: center;
  height: 26px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  background: color-mix(in srgb, var(--c, var(--accent)) calc(var(--a, 0) * 100%), transparent);
}
.coverage-cell.total { background: color-mix(in srgb, var(--ink) calc(var(--a, 0) * 100%), transparent); color: var(--surface); }
.coverage-total .coverage-rowlabel { font-weight: 900; }

.shift-form, .station-form, .holiday-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}
.shift-form label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.shift-form select, .shift-form input[type="time"], .station-form input, .holiday-form input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}
.station-form, .holiday-form { flex-wrap: nowrap; }
.station-form input, .holiday-form input[name="name"] { flex: 1; }
.holiday-form { flex-wrap: wrap; }
.holiday-form label { flex: 1; min-width: 150px; display: grid; gap: 5px; font-size: 12px; color: var(--muted); }

.shift-chip-list, .station-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shift-chip, .station-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--station-color, var(--accent)) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--station-color, var(--accent)) 10%, var(--surface));
  font-size: 13px;
}
.shift-chip i, .station-chip i {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--station-color, var(--accent));
}
.shift-chip-station { font-weight: 700; }
.shift-chip-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.shift-chip-remove, .station-chip-remove {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1;
}
.shift-chip-remove:hover, .station-chip-remove:hover { background: var(--accent-2); color: #fff; }

.musterplan-copy { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.musterplan-copy-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ghost-button.mini { min-height: 30px; padding: 0 10px; font-size: 12px; }
.info-list .row-item { background: transparent; border-color: transparent; box-shadow: none; }

/* Musterplan: Stationen links schmal, Besetzung rechts breit */
.musterplan-top { grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2.5fr); }

/* Zeitachse deutlicher sichtbar */
.coverage-hourlabel { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.coverage-hourlabel.tick { border-left: 1px solid var(--ink); padding-left: 2px; color: var(--ink); }

/* Stationenliste (links) */
.station-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.station-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--station-color, var(--accent)) 35%, var(--line));
  background: color-mix(in srgb, var(--station-color, var(--accent)) 8%, var(--surface));
  font-size: 13px; font-weight: 600;
}
.station-row i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: var(--station-color, var(--accent)); }
.station-row span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Interaktiver Schichtplan (Gantt) */
.gantt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gantt { min-width: 1120px; display: grid; gap: 6px; user-select: none; }
.gantt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; }
.gantt-rowlabel {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-rowlabel i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; background: var(--station-color, var(--accent)); }
.gantt-track {
  position: relative; height: 38px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2, var(--surface));
  cursor: crosshair; touch-action: none;
}
.gantt-axis .gantt-track { height: 20px; border: 0; background: transparent; cursor: default; }
.gantt-hourlabel {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gantt-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.gantt-gridline.hour { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.gantt-bar {
  position: absolute; top: 3px; bottom: 3px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--station-color, var(--accent)) 78%, transparent);
  color: #fff; font-size: 11px; font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: grab; overflow: hidden; min-width: 2px;
}
.gantt-bar.dragging { cursor: grabbing; opacity: 0.92; }
.gantt-bar.creating { background: color-mix(in srgb, var(--station-color, var(--accent)) 55%, transparent); pointer-events: none; }
.gantt-bar-label { font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.gantt-bar-handle { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.gantt-bar-handle.left { left: 0; }
.gantt-bar-handle.right { right: 0; }
.gantt-bar-remove {
  position: absolute; top: 1px; right: 9px;
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(0,0,0,0.25); color: #fff; font-size: 12px; line-height: 1; cursor: pointer;
}
.gantt-bar-remove:hover { background: var(--accent-2); }

/* Jahresübersicht Stunden */
.hours-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 760px; }
.hours-table th, .hours-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hours-table th:first-child, .hours-table td:first-child { text-align: left; }
.hours-table thead th { color: var(--muted); font-weight: 700; }
.hours-table .sum { font-weight: 800; border-left: 1px solid var(--line); }
.hours-table tfoot td { font-weight: 800; border-top: 2px solid var(--line); }
.hours-station { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.hours-station i { width: 9px; height: 9px; border-radius: 3px; background: var(--station-color, var(--accent)); }

/* Einstellungen: Feiertage/Bundesland */
.holiday-generate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.subhead { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.holiday-manual { border-top: 1px solid var(--line); margin-top: 14px; }

/* Verfügungszeiten im Profil */
.weekday-pill-times { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; margin: 2px 0; }
.weekday-pill-times .availability-time-field { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 0 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
.weekday-pill-times .availability-time-sep { flex: 0 0 auto; color: var(--muted); }
.weekday-pill-times[hidden] { display: none; }

/* Wochentage-Verfügbarkeit über volle Seitenbreite */
.profile-weekday-section { margin-bottom: 14px; }

/* Kombinierter Tagesplan: Besetzung + Schichtplan mit gemeinsamer Zeitachse */
.dayplan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dayplan { min-width: 1180px; display: grid; gap: 4px; --label-w: 150px; user-select: none; }
.dp-row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); gap: 10px; align-items: center; }
.dp-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dp-label i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; background: var(--station-color, var(--accent)); }

/* Klickbares Farbquadrat + Farbpalette je Station. */
.station-color-dot {
  width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto; padding: 0;
  border: 1px solid rgba(20, 31, 28, 0.18); cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.station-color-dot:hover { transform: scale(1.18); box-shadow: 0 0 0 3px var(--accent-soft); }
.station-color-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.station-palette {
  position: fixed; z-index: 400;
  display: grid; grid-template-columns: repeat(8, 18px); gap: 6px;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: 0 14px 34px rgba(20, 31, 28, 0.2);
}
.station-palette[hidden] { display: none; }
.station-swatch {
  width: 18px; height: 18px; border-radius: 5px; padding: 0; cursor: pointer;
  border: 1px solid rgba(20, 31, 28, 0.12);
  transition: transform 90ms ease;
}
.station-swatch:hover { transform: scale(1.2); }
.station-swatch.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.dp-track { position: relative; }
.dp-axis .dp-track { height: 18px; }
.dp-hourlabel {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dp-subhead {
  grid-column: 1 / -1; margin: 10px 0 2px;
  font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dp-cells { display: grid; grid-template-columns: repeat(var(--slots), 1fr); height: 26px; }
.dp-cell {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: color-mix(in srgb, var(--c, var(--accent)) calc(var(--a, 0) * 100%), transparent);
  border-right: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.dp-cell.total { background: color-mix(in srgb, var(--ink) calc(var(--a, 0) * 100%), transparent); color: var(--surface); }
.dp-total .dp-label { font-weight: 900; }
.dp-track.lane {
  height: 28px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2, var(--surface)); cursor: crosshair; touch-action: none;
}
.dp-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); pointer-events: none; }
.dp-gridline.hour { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.dp-label.edit { gap: 4px; }
.station-rename {
  flex: 1; min-width: 0; width: 100%;
  border: 1px solid transparent; border-radius: 6px; padding: 3px 6px;
  background: transparent; color: var(--ink); font-size: 12px; font-weight: 700;
}
.station-rename:hover { border-color: var(--line); }
.station-rename:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.dp-addrow { margin-top: 6px; }
.dp-addrow .station-form { margin: 0; flex-wrap: nowrap; gap: 6px; align-items: center; }
.dp-addrow .station-form input {
  flex: 1; min-width: 0; min-height: 26px; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--ink); font-size: 12px;
}
.dp-addrow .station-form .primary-button {
  flex: 0 0 auto; width: 26px; min-height: 26px; height: 26px;
  padding: 0; font-size: 15px; line-height: 1; border-radius: 7px;
}
.hours-rowlabel { font-weight: 800; }
.holiday-readonly { margin-top: 6px; }

/* Bundesland-Auswahl wie die übrigen Felder */
.import-box select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.import-box select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23748' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
  cursor: pointer;
}
.import-box select:hover { border-color: var(--accent); }
.import-box select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* Station-Dropdown im Schichtplan */
.dp-label.shift { gap: 4px; }
.station-select {
  flex: 1; min-width: 0;
  min-height: 26px;
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0 6px;
  background: var(--surface); color: var(--ink);
  font-size: 12px; font-weight: 700;
}
.station-select:focus { border-color: var(--accent); outline: none; }
.dp-label.shift i { background: var(--station-color, var(--accent)); }

/* Jahresübersicht: Monate als zweizeilige Buttons (wie Wochentage) */
.month-hours-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.month-hours-top .year-switch { margin: 0; }
.month-hours-hint { flex: 1; min-width: 120px; }
.month-hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.primary-button.mini { min-height: 32px; padding: 0 14px; font-size: 13px; }
.month-hours-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.month-hours-pill {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 0; min-height: 52px; padding: 6px 10px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: inherit; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
button.month-hours-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.month-hours-pill.selected { border-color: var(--accent); background: var(--accent-soft); }
.month-hours-pill.selected .mh-month { color: var(--accent); }
.month-hours-pill.selected .mh-hours { color: var(--accent); }
.month-hours-pill .mh-month { font-size: 12px; font-weight: 700; color: var(--muted); }
.month-hours-pill .mh-hours { font-size: 15px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.month-hours-pill.total { border-color: var(--accent); background: var(--accent-soft); }
.month-hours-pill.total .mh-month { color: var(--accent); }
.month-hours-pill.total .mh-hours { color: var(--accent); }

/* Besetzung vertikal kompakter */
.dp-cov-row .dp-cells { height: 17px; }
.dp-cov-row .dp-cell { font-size: 10px; }
.dp-cov-row .station-rename { min-height: 22px; padding: 1px 5px; font-size: 11px; }
.dp-cov-row .station-chip-remove { width: 15px; height: 15px; font-size: 13px; }
.dp-cov-row .dp-label.edit { gap: 3px; }
.dp-total .dp-cells { height: 17px; }

/* Jugendlich-Schalter im Schichtplan */
.youth-toggle {
  flex: 0 0 auto; width: 22px; height: 28px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--muted);
  font-size: 11px; font-weight: 800; cursor: pointer;
}
.youth-toggle:hover { border-color: var(--accent-3, #d99724); }
.youth-toggle.active { background: var(--accent-3, #d99724); border-color: var(--accent-3, #d99724); color: #fff; }

/* Schichtplan-Dropdown modern (eigener Pfeil) */
.station-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23748' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 11px;
  cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.station-select:hover { border-color: var(--accent); }
.station-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* Verfügbarkeit: „Frei" wenn Tag nicht aktiv */
.availability-free { display: none; font-size: 12px; color: var(--muted); padding: 4px 2px; text-align: center; }
.availability-input:not(.active) .availability-free { display: block; }
.availability-input.active .availability-free { display: none; }
/* Profil-Wochentage: „Frei" wenn Tag nicht verfügbar */
.weekday-pill .availability-free { display: none; }
.weekday-pill.unavailable .availability-free { display: block; }

/* Feiertage im Urlaubskalender (orange) */
.vacation-calendar-head strong.holiday { color: #b5740d; background: rgba(217, 151, 36, 0.20); border-radius: 4px; }
.vacation-calendar-row i.holiday:not(.booked) { background: rgba(217, 151, 36, 0.28); }

/* Hover-Vorschau Urlaubsverteilung in der MA-Liste */
.vac-hover-tip {
  position: fixed; z-index: 200; width: 480px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  padding: 12px 14px; pointer-events: none;
}
.vac-hover-tip .mini-trend-chart { width: 100%; height: auto; }
.vac-hover-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.vac-hover-empty { font-size: 12px; color: var(--muted); padding: 6px 0; }

/* Bereichs-Datepicker */
.dp-range-hint { text-align: center; font-size: 12px; font-weight: 700; color: var(--accent); margin: 0 0 6px; }
.dp-in-range { background: var(--accent-soft); border-radius: 0 !important; }
.dp-range-start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.dp-range-end { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* ============================================================
   Besetzung Heatmap
   ============================================================ */
.hm-month-switch { margin: 0; }
.hm-month-switch .year-current { min-width: 86px; }
.hm-status { font-size: 12px; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.hm-status.busy { color: var(--accent); font-weight: 600; }
.hm-status.stale { color: var(--accent-3); font-weight: 600; }
/* Moderner Toggle-Switch (Besetzung „Pausen abziehen" + Geschäftszeiten „geschlossen"). */
.hm-breaks-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); white-space: nowrap; cursor: pointer; user-select: none; }
.hm-breaks-toggle input,
.bh-row label.bh-closed input,
.bh-exc-add label.bh-closed input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 38px; height: 22px; min-height: 22px; box-sizing: border-box;
  border: none !important; border-radius: 999px; background: var(--line); padding: 0;
  position: relative; cursor: pointer; transition: background 160ms ease;
}
.hm-breaks-toggle input::before,
.bh-row label.bh-closed input::before,
.bh-exc-add label.bh-closed input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20, 31, 28, 0.25);
  transition: transform 160ms ease;
}
.hm-breaks-toggle input:checked,
.bh-row label.bh-closed input:checked,
.bh-exc-add label.bh-closed input:checked { background: var(--accent); }
.hm-breaks-toggle input:checked::before,
.bh-row label.bh-closed input:checked::before,
.bh-exc-add label.bh-closed input:checked::before { transform: translateX(16px); }
.hm-breaks-toggle input:focus-visible,
.bh-row label.bh-closed input:focus-visible,
.bh-exc-add label.bh-closed input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hm-legend { display: flex; gap: 16px; margin-bottom: 12px; }
.hm-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.hm-legend-item i { width: 14px; height: 14px; border-radius: 4px; }

.hm-grid { min-width: 1180px; display: grid; gap: 2px; }

/* Öffnen-Animation: Tageszeilen nacheinander einblenden. */
.hm-row.hm-reveal { opacity: 0; transform: translateY(8px); }
.hm-row.hm-reveal.in { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }

/* „Arbeitet…"-Animation beim Neu-Berechnen: ein einzelner diagonaler Schein-Streif,
   der flüssig von oben-links nach unten-rechts über das Raster läuft (1 Element). */
.hm-grid.hm-computing { position: relative; overflow: hidden; }
.hm-grid.hm-computing::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translate(-120%, -120%);
  will-change: transform;
  animation: hmShine 1.2s linear 2;
}
@keyframes hmShine {
  from { transform: translate(-120%, -120%); }
  to { transform: translate(120%, 120%); }
}
.hm-row {
  display: grid;
  grid-template-columns: 56px repeat(var(--slots), minmax(0, 1fr)) 66px;
  gap: 2px;
  align-items: center;
  border-radius: 4px;
}
/* Wochenende-/Feiertag-Markierung über horizontale Rahmenlinien (kein linker Balken):
   Samstag oben, Sonntag unten → klammert das Wochenende; Feiertag oben + unten. */
.hm-row.weekend { background: rgba(178,74,58,0.15); }
.hm-row.holiday { background: rgba(217,151,36,0.13); }
.hm-row.hm-sat { border-top: 2px solid var(--accent-2); }
.hm-row.hm-sun { border-bottom: 2px solid var(--accent-2); }
.hm-row.holiday { border-top: 2px solid var(--accent-3); border-bottom: 2px solid var(--accent-3); }
.hm-row.weekend .hm-daylabel { color: var(--accent-2); }
.hm-row.holiday .hm-daylabel { color: var(--accent-3); }
.hm-row.closed { opacity: 0.82; }
/* Zelle außerhalb der Geschäftszeiten / geschlossen: nicht befüllt, dezent schraffiert */
.hm-cell.hm-closed { background: repeating-linear-gradient(45deg, rgba(20,31,28,0.05) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px rgba(20,31,28,0.06); cursor: default; }
.hm-cell.hm-closed:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(20,31,28,0.06); }
.hm-cell.hm-empty { background: transparent; box-shadow: inset 0 0 0 1px rgba(20,31,28,0.05); cursor: default; }
.hm-cell.hm-empty:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(20,31,28,0.05); }
/* Gesamtstunden-Fußzeile */
.hm-row.hm-foot { grid-template-columns: 1fr 66px; margin-top: 4px; padding-top: 6px; border-top: 1.5px solid var(--line); }
.hm-foot-label { text-align: right; font-size: 11px; font-weight: 700; color: var(--muted); padding-right: 8px; }
.hm-grandtotal { font-size: 13px; font-weight: 800; }

/* ===== Geschäftszeiten / Schichtzeiten (Einstellungen) ===== */
.bh-grid { display: flex; flex-direction: column; gap: 3px; }
.bh-row { display: flex; align-items: center; gap: 10px; padding: 1px 0; }
.bh-row.is-closed .bh-times { opacity: 0.4; }
.bh-day { width: 88px; flex: none; font-size: 13px; font-weight: 600; color: var(--ink); }
.bh-times { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.bh-times .time-field2 { flex: 0 0 84px; width: 84px; }
.bh-sep { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 12px; height: 34px; font-size: 0; color: transparent; }
.bh-sep::before { content: ""; width: 9px; height: 2px; border-radius: 1px; background: var(--muted); transform: translateX(4px); }
/* Checkbox + Text nebeneinander (überschreibt die globale .import-box label { display:grid }). */
.bh-row label.bh-closed, .bh-exc-add label.bh-closed { display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.bh-exc-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.bh-exc-daterange { flex: 0 0 auto; }
.bh-exc-daterange .dp-range-field .dp-trigger { min-width: 200px; }
.bh-exc-add .time-field2 { flex: 0 0 84px; width: 84px; }
/* Alle Eingabefelder in den Einstellungen auf einheitliche Höhe (34px). */
.import-box .time-field2 .tf-input { min-height: 34px; height: 34px; }
.import-box .dp-trigger { min-height: 34px; height: 34px; box-sizing: border-box; }
.bh-exc-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.bh-exc-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 5px 8px; background: var(--surface-soft); border-radius: 8px; font-size: 12px; }
.bh-exc-date { font-weight: 700; color: var(--ink); }
.bh-exc-info { color: var(--muted); }
.hm-daytotal {
  text-align: right; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums; padding-right: 4px;
  white-space: nowrap;
}
.hm-daytotal.neg { color: var(--accent-2); }
.hm-daytotal.pos { color: var(--accent); }
.hm-daytotal-head { color: var(--muted); font-weight: 700; }
.hm-daylabel {
  display: flex; flex-direction: column; line-height: 1.1;
  font-size: 11px; color: var(--muted);
}
.hm-daylabel strong { font-size: 13px; color: var(--ink); }
.hm-row.weekend .hm-daylabel strong, .hm-row.holiday .hm-daylabel strong { color: inherit; }
.hm-hourlabel { font-size: 9px; color: var(--muted); white-space: nowrap; }
.hm-hourlabel.tick { border-left: 1px solid var(--line); padding-left: 1px; }
.hm-cell {
  height: 20px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(20,31,28,0.78);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: transform 90ms ease;
}
.hm-cell:hover { transform: scale(1.25); box-shadow: inset 0 0 0 1.5px var(--ink); z-index: 2; }

.hm-tooltip {
  position: fixed;
  z-index: 1200;
  min-width: 170px;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  pointer-events: none;
  font-size: 12px;
}
.hm-tooltip-head { font-weight: 800; margin-bottom: 4px; }
.hm-tooltip-avail { color: var(--muted); margin-bottom: 6px; }
.hm-tooltip-avail strong { color: var(--accent); font-size: 14px; }
.hm-tooltip-stations { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hm-tooltip-stations li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hm-tooltip-stations li span { display: inline-flex; align-items: center; gap: 6px; }
.hm-tooltip-stations li i { width: 9px; height: 9px; border-radius: 3px; background: var(--station-color, var(--accent)); }
.hm-tooltip-empty { color: var(--muted); font-style: italic; }
.hm-tooltip-names { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); }
.hm-tooltip .hmt-time { font-weight: 800; font-size: 13px; margin-bottom: 2px; }
.hm-tooltip .hmt-sub { color: var(--muted); margin-bottom: 6px; font-size: 11px; }
.hm-tooltip .hmt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 0; }
.hm-tooltip .hmt-row b { font-variant-numeric: tabular-nums; }
.hm-tooltip .hmt-total { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); font-weight: 700; }
.hm-tooltip .hmt-none { color: var(--muted); font-style: italic; }

@media (max-width: 680px) {
  .shift-form, .station-form, .holiday-form { flex-wrap: wrap; }
  .musterplan-day-bar { grid-template-columns: repeat(4, 1fr); }
  .musterplan-day-pill { padding: 10px; }
}

/* === Icon-only Aktionen oben rechts === */
.actions .icon-only {
  width: 42px; height: 42px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.actions .icon-only svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* === Geschäftstag-Anfang (Zeitfeld modern) === */
.time-field-wrap { display: inline-flex; }
.time-field {
  min-height: 40px; border: 1px solid var(--line); border-radius: 8px;
  padding: 0 12px; background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.time-field:hover { border-color: var(--accent); }
.time-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* === Besetzung: Kopf mit Umschalter, Umsortieren === */
.dp-subhead-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; grid-column: 1 / -1; }
.dp-drag { flex: 0 0 auto; width: 14px; text-align: center; cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.dp-drag:active { cursor: grabbing; }
.dp-cov-row.reorderable { border-radius: 8px; }
/* Sortieren: schwebende Station folgt dem Cursor */
.dp-drag-floating {
  position: fixed; z-index: 300; pointer-events: none;
  margin: 0; border-radius: 10px; background: var(--surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  opacity: 0.98; transform: scale(1.015);
}
/* leerer Slot zeigt das Ziel an */
.dp-cov-row.dp-drag-placeholder { outline: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); outline-offset: -2px; border-radius: 10px; background: var(--accent-soft); }
.dp-cov-row.dp-drag-placeholder > * { visibility: hidden; }
body.dp-sorting { cursor: grabbing; user-select: none; }
body.dp-sorting .dp-drag { cursor: grabbing; }

/* === Tagessumme unter dem Schichtplan === */
.dp-daytotal { grid-column: 1 / -1; text-align: right; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.dp-daytotal strong { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; margin-left: 4px; }

/* === Animation „Schema übertragen auf" === */
@keyframes copyFlash {
  0% { background: var(--accent); color: #fff; transform: scale(1); }
  40% { background: var(--accent); color: #fff; transform: scale(1.12); }
  100% { background: var(--surface); color: var(--muted); transform: scale(1); }
}
.ghost-button.mini.copy-flash { animation: copyFlash 0.46s ease; }

/* === Urlaubs-Tooltip: Beschriftung schwarz === */
.vac-hover-tip .axis-label, .vac-hover-tip .chart-label { fill: var(--ink); font-weight: 700; }

/* === Ein-/Ausklapp-Animation der Besetzungsstationen === */
@keyframes stationExpand {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.6); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
.dp-cov-row.anim-station {
  animation: stationExpand 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--anim-i, 0) * 35ms);
  transform-origin: top center;
}

/* === Tooltip Gesamtbesetzung === */
.total-cov-tip { width: 640px; max-width: 94vw; }
.total-cov-chart { width: 100%; height: auto; display: block; }
.total-cov-chart .axis-label { fill: var(--ink); font-size: 11px; font-weight: 600; }

/* === Eigenes Zeitfeld: EIN Feld (HH:MM zusammen) === */
.time-field2 { display: inline-flex; align-items: center; }
.time-field2 .tf-input {
  width: 92px; min-height: 38px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 9px;
  padding: 0 12px; background: var(--surface); color: var(--ink);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; letter-spacing: 0.5px;
}
.time-field2 .tf-input:hover { border-color: var(--accent); }
.time-field2 .tf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.time-field2.ampm .tf-input, .ampm .time-field2 .tf-input { width: 104px; }
/* in den schmalen Verfügbarkeits-Pills kompakter */
.weekday-pill-times .tf-input { width: 100%; min-width: 56px; min-height: 30px; padding: 0 4px; font-size: 12px; }
.availability-times .tf-input { width: 84px; min-height: 32px; }

/* === Moderner Segment-Schalter (Zeitformat) === */
.seg-toggle {
  display: inline-flex; position: relative; gap: 0;
  width: fit-content; align-self: flex-start; flex: 0 0 auto;
  padding: 3px; border-radius: 999px; background: var(--surface-soft, #eef0ee);
  border: 1px solid var(--line); margin-top: 6px;
}
.seg-option {
  position: relative; z-index: 1;
  min-height: 30px; padding: 0 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
  border-radius: 999px; transition: color 160ms ease;
}
.seg-option.active {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.seg-option:not(.active):hover { color: var(--ink); }

/* Drag-Icon (drei Striche) rechts vom Stationsnamen */
.dp-drag {
  flex: 0 0 auto; width: 22px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab; color: var(--muted); font-size: 14px; line-height: 1;
  border-radius: 6px; user-select: none;
}
.dp-drag:hover { color: var(--ink); background: var(--surface-soft, rgba(0,0,0,0.05)); }
.dp-drag:active { cursor: grabbing; }

/* === Schichtbalken-Animation beim Öffnen/Tageswechsel === */
@keyframes barIn { from { opacity: 0; transform: scaleX(0.15); } to { opacity: 1; transform: scaleX(1); } }
.gantt-bar.anim-bar {
  transform-origin: left center;
  animation: barIn 0.34s cubic-bezier(.2, 1, .36, 1) both;
  animation-delay: calc(var(--anim-i, 0) * 45ms);
}

/* === Monatsstunden-Pop beim Übertragen === */
@keyframes hoursPop { 0% { transform: scale(0.55); opacity: 0.2; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.mh-hours.anim-hours { display: inline-block; animation: hoursPop 0.5s ease; }

/* === Einstellungen: links Einstellungen, rechts Import/Export === */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.settings-col { display: grid; gap: 14px; align-content: start; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }

/* === Bedarf-Tabelle (Finanz-/Personalplanung) === */
.bedarf-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.bedarf-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 1000px; }
.bedarf-table th, .bedarf-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bedarf-table thead th { color: var(--muted); font-weight: 700; text-align: right; position: sticky; top: 0; background: var(--surface); }
.bedarf-table tbody th { text-align: left; font-weight: 600; color: var(--ink); position: sticky; left: 0; background: var(--surface); }
.bedarf-table thead th:first-child { text-align: left; left: 0; z-index: 1; }
.bedarf-sum { font-weight: 800; border-left: 1px solid var(--line); }
.bedarf-input-row { background: var(--accent-soft); }
.bedarf-input-row th { background: var(--accent-soft); }
.bedarf-cell {
  width: 64px; min-height: 26px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  background: var(--surface); color: var(--ink); font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.bedarf-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); outline: none; }
.bedarf-readonly-value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 24px;
  width: 100%;
  line-height: 1;
}
.bedarf-readonly-value > span { line-height: 1; }
.bedarf-readonly-value.is-forecast { color: var(--ink); }
.bedarf-warning-icon {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: #f3c84b;
  stroke: #9a6a0a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bedarf-strong td, .bedarf-strong th { font-weight: 800; }
.bedarf-need th { color: var(--accent); }
.bedarf-table .neg { color: var(--accent-2); font-weight: 700; }
.bedarf-table .pos { color: var(--accent); font-weight: 700; }

/* === Bedarf-Tabelle: modernes Design + neue Felder === */
.bedarf-table tbody tr:hover td, .bedarf-table tbody tr:hover th { background: var(--accent-soft); }
.bedarf-table tbody tr { transition: background 120ms ease; }
.bedarf-table tbody td { transition: background 120ms ease; }
.bedarf-input-row td { vertical-align: top; }
.bedarf-eur { margin-top: 2px; font-size: 10px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.bedarf-eur .pos { color: var(--accent); }
.bedarf-eur .neg { color: var(--accent-2); }
.bedarf-auto th { color: var(--accent); font-style: italic; }
.bedarf-auto td { color: var(--ink); }
/* Kein Fragezeichen-Cursor in der Bedarf-Tabelle */
.bedarf-table td[title], .bedarf-table [data-tip-vj], .bedarf-table .cap { cursor: default; }
/* Eigener Hover-Hint (Vorjahr + Entwicklung mit Pfeil) */
.bedarf-tip {
  position: fixed; z-index: 2000; transform: translate(-50%, -100%);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 6px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  pointer-events: none; box-shadow: 0 10px 28px rgba(20, 31, 28, 0.22);
}
.bedarf-tip .pos { color: var(--accent); }
.bedarf-tip .neg { color: var(--accent-2); }
/* Umsatz-Brutto-Eingabe etwas breiter für „+5%" + € */
.bedarf-input-row .bedarf-cell { width: 72px; }

/* === Bedarf: seitenbreit + Einheiten + Filter-Dropdowns === */
.bedarf-table.fit { table-layout: fixed; width: 100%; min-width: 0; }
.bedarf-table.fit th:first-child, .bedarf-table.fit td:first-child { width: 210px; }
.bedarf-table.fit thead th.bedarf-sum, .bedarf-table.fit td.bedarf-sum { width: 84px; }
.bedarf-table.fit td, .bedarf-table.fit th { padding: 4px 6px; }
.bedarf-table.fit thead th { font-size: 11px; }
.unit-input { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.unit-input input { width: 100%; min-width: 0; text-align: right; }
.unit-input em { font-style: normal; color: var(--muted); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
/* Eingabe-Zahlen rechtsbündig wie die berechneten Spalten → alles untereinander.
   Input-Padding 0, damit die Zahl genau am Zellen-Innenrand (wie die Rechenzeilen) endet. */
.bedarf-table .bedarf-cell { text-align: right; padding-right: 0; padding-left: 0; }
.bedarf-table .unit-input { gap: 0; }
.bedarf-table .unit-input em { margin-left: 2px; }
.bedarf-cell { width: 100%; box-sizing: border-box; }
.bedarf-filter {
  width: 100%; max-width: 100%; min-height: 28px;
  border: 1px solid var(--accent); border-radius: 7px;
  padding: 0 6px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231f7564' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 10px; padding-right: 20px;
}
.bedarf-filter:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* === Bedarf: abgesetzte Unter-Tabellen (Stunden-Block, Personalbedarf) === */
.bedarf-spacer td { padding: 0 !important; border: 0 !important; height: 10px; background: transparent !important; }
.bedarf-table tbody.bedarf-subtable { box-shadow: inset 0 0 0 1px var(--line); }
.bedarf-table tbody.bedarf-subtable td, .bedarf-table tbody.bedarf-subtable th { background: var(--accent-soft); }
.bedarf-table tbody.bedarf-subtable tr:last-child td, .bedarf-table tbody.bedarf-subtable tr:last-child th { border-bottom: 0; }
.bedarf-table tbody.bedarf-subtable tr:hover td, .bedarf-table tbody.bedarf-subtable tr:hover th { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }

/* === Bedarf v2: KPI-Kacheln, Top-Steuerung, Sektions-Schienen === */
.bedarf-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bedarf-head { display: flex; flex-direction: column; gap: 2px; }
.bedarf-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bedarf-opt { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.bedarf-opt select {
  min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 600; padding: 0 28px 0 10px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23687370' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 11px;
}
.bedarf-opt select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bedarf-export { align-self: center; }

.bkpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.bkpi { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; min-height: 96px; box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04); }
/* Bedarf-Kachel-Icons: eckig mit runden Ecken (wie auf dem Dashboard), nicht rund. */
.bkpi-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.bkpi-ic svg { width: 22px; height: 22px; }
/* €-Icon kräftiger/größer. */
.bkpi-ic-euro svg { width: 27px; height: 27px; }
.bkpi-ic-percent svg { width: 28px; height: 28px; }
.bkpi-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bkpi-label { font-size: 11px; color: var(--muted); white-space: normal; line-height: 1.25; }
.bkpi-val { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap; }
.bkpi-sub { font-size: 11px; color: var(--muted); }
.bkpi-sub.pos { color: var(--accent); font-weight: 700; }
.bkpi-sub.neg { color: var(--accent-2); font-weight: 700; }
.bkpi-visual { flex: 0 0 auto; }
.bkpi-spark { width: 96px; height: 38px; display: block; }
@media (max-width: 1100px) { .bkpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bedarf-table.rail { table-layout: fixed; width: 100%; border-collapse: collapse; }
.bedarf-table.rail th.brail, .bedarf-table.rail td.brail { width: 30px; padding: 0; }
.bedarf-table.rail th.blabel, .bedarf-table.rail td.blabel { width: 210px; }
.bedarf-table.rail td, .bedarf-table.rail th { padding: 4px 6px; }
.bedarf-table.rail thead th { font-size: 13px; font-weight: 700; color: var(--ink); }
.bedarf-table.rail thead th.blabel, .bedarf-table.rail thead th:first-child { color: var(--muted); }
.bsec-grp .brail { background: var(--accent); }
.bsec .brail { vertical-align: middle; text-align: center; }
.bsec .brail svg { width: 18px; height: 18px; color: #fff; margin: 0 auto; display: block; }
.bsec-name { text-align: left; font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); letter-spacing: 0.02em; }
.bsec-grp .blabel { text-align: left; }
.brow .blabel { font-weight: 600; color: var(--ink); }
/* Trennlinie über der Schichtführungs-/Management-Untergruppe in „Stundenplanung". */
.bedarf-table.rail .bedarf-sep th, .bedarf-table.rail .bedarf-sep td { border-top: 2px solid var(--line); padding-top: 9px; }

/* Schichtführungs-Einstellung: kompaktes Raster mit schmalen Eingabefeldern. */
.shiftlead-grid { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.shiftlead-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); width: 58px; }
.shiftlead-grid-2 .shiftlead-field { width: auto; }
.shiftlead-field input { width: 58px; box-sizing: border-box; min-height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font-weight: 700; text-align: center; }
.shiftlead-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bedarf-table.rail .bedarf-strong td { font-weight: 800; }
.bedarf-table.rail .bedarf-need .blabel { color: var(--accent); }
/* Linke Beschriftungen einheitlich: nicht kursiv, nicht fett, gleiche Größe (12px). */
.bedarf-table.rail .brow .blabel,
.bedarf-table.rail .brow .blabel .bedarf-filter,
.bedarf-table.rail .brow .blabel select {
  font-weight: 600;
  font-style: normal;
  font-size: 12px;
}
/* Filter-Dropdowns: kein sichtbarer Rahmen, Text exakt bündig mit den normalen Labels. */
.bedarf-table.rail .brow .blabel .bedarf-filter {
  width: auto;
  max-width: 100%;
  min-height: 0;
  height: auto;
  border: 0;
  padding-left: 0;
  background-color: transparent;
}
.bedarf-table.rail .brow .blabel .bedarf-filter:hover,
.bedarf-table.rail .brow .blabel .bedarf-filter:focus { border: 0; outline: none; box-shadow: none; background-color: transparent; }
/* Alle Tabellenzeilen gleich hoch (auch Eingabezeilen mit Inputfeld). */
.bedarf-table.rail .brow th, .bedarf-table.rail .brow td { height: 32px; box-sizing: border-box; vertical-align: middle; padding-top: 2px; padding-bottom: 2px; }
.bedarf-table.rail .brow .bedarf-cell { min-height: 24px; height: 24px; padding-top: 0; padding-bottom: 0; }
.bedarf-table.rail .bedarf-input-row td { vertical-align: middle; }
/* Label-Spalte breiter, damit auch lange Dropdown-Texte vollständig sichtbar sind. */
.bedarf-table.rail th.blabel, .bedarf-table.rail td.blabel { width: 248px; }
.bedarf-table.rail tbody tr:hover td:not(.brail), .bedarf-table.rail tbody tr:hover th:not(.brail) { background: var(--accent-soft); }
.cap { display: inline-block; padding: 1px 7px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.cap-green { background: rgba(29,158,117,0.15); color: #14805e; }
.cap-amber { background: rgba(239,159,39,0.18); color: #a86808; }
.cap-red { background: rgba(226,75,74,0.16); color: #c0322f; }
.unit-tag { font-size: 10px; font-weight: 700; color: var(--muted); }
.bedarf-table.rail tbody th, .bedarf-table.rail thead th:first-child, .bedarf-table.rail thead th.blabel { position: static; }
.bedarf-table.rail td.brail, .bedarf-table.rail th.brail { border-bottom: 0; }

/* === Bedarf v3: Ausrichtung, Toolbar-Ebene, Tabellen-Karte === */
.bedarf-controls { align-items: center; }
.bedarf-controls .year-switch, .bedarf-controls .secondary-button { height: 38px; display: inline-flex; align-items: center; }
.bedarf-controls .year-switch { margin: 0; }
.bedarf-section { display: flex; flex-direction: column; gap: 16px; }
.bedarf-section .bkpi-grid { margin-bottom: 0; }
.bedarf-tablecard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04); padding: 14px; }
.bkpi { justify-content: space-between; min-height: 80px; }
.bkpi-visual { display: flex; align-items: center; justify-content: flex-end; width: 96px; }

/* === Webseiten-Dropdown (xsel) === */
.xsel { position: relative; display: inline-flex; width: 100%; }
.xsel-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.xsel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.xsel-btn:hover { border-color: var(--accent); }
.xsel-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.xsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xsel-arrow { width: 12px; height: 12px; flex: 0 0 auto; color: var(--muted); transition: transform 150ms ease; }
.xsel-btn[aria-expanded="true"] .xsel-arrow { transform: rotate(180deg); }
.xsel-menu {
  position: fixed; z-index: 20000; margin: 0; padding: 5px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 14px 36px rgba(20, 31, 28, 0.22); max-height: 300px; overflow: auto; min-width: 160px;
  overscroll-behavior: contain;
}
.xsel-opt { padding: 7px 10px; border-radius: 7px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.xsel-opt:hover { background: var(--accent-soft); }
.xsel-opt.sel { background: var(--accent); color: #fff; font-weight: 700; }
/* Gruppen-Header in der xsel-Liste (z. B. Berichtskategorien) – nicht wählbar. */
.xsel-group { padding: 9px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.xsel-group:first-child { padding-top: 3px; }
/* Bericht-Auswahl: höheres Feld passend zum Berichts-Generator. */
.rg-report-row .xsel-btn { height: 42px; border-radius: 11px; border-color: #e3e6e3; font-weight: 500; font-size: 14px; }
/* Bedarf-Filter (Label-Spalte): kompakter, transparenter xsel-Button wie zuvor. */
.bedarf-table .blabel .xsel-btn { min-height: 24px; padding: 0 4px; border: 0; background: transparent; color: var(--accent); font-size: 11px; font-weight: 700; }
.bedarf-table .blabel .xsel-btn:hover { border: 0; box-shadow: none; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bedarf-table .blabel .xsel-btn[aria-expanded="true"] { box-shadow: none; }
.bedarf-table .blabel .xsel-arrow { color: var(--accent); }
/* Station-Dropdown im Schichtplan kompakt */
.dp-label.shift .xsel { flex: 1; min-width: 0; }
.dp-label.shift .xsel-btn { min-height: 26px; padding: 0 6px; border-radius: 7px; font-size: 12px; font-weight: 700; }

/* === Bedarf v4: rahmenlose Eingaben, Sektionsfarben, Kapazität, Export-Dropdown, Animation === */
/* Eingaben ohne sichtbaren Rahmen (nur bei Hover/Fokus) */
.bedarf-table .bedarf-cell { border: 1px solid transparent; background: transparent; border-radius: 6px; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; }
.bedarf-table .bedarf-cell:hover { border-color: var(--line); }
.bedarf-table .bedarf-cell:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
/* Keine Spinner-Pfeile in den Zahlenfeldern */
.bedarf-table .bedarf-cell { -moz-appearance: textfield; appearance: textfield; }
.bedarf-table .bedarf-cell::-webkit-outer-spin-button, .bedarf-table .bedarf-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Filter-Dropdowns (LFZ-Urlaub, Krank, Management, Differenz, Produktivität): rahmenlos, Rahmen nur bei Hover */
.bedarf-filter { border-color: transparent; background: transparent; color: var(--accent); transition: border-color 120ms ease, background 120ms ease; }
.bedarf-filter:hover { border-color: var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.bedarf-filter:focus { border-color: var(--accent); background: var(--accent-soft); }
/* Station-Combobox im Schichtplan: rahmenlos, hellgrauer Rahmen bei Hover */
.dp-label.shift .xsel-btn { border-color: transparent; background: transparent; }
.dp-label.shift .xsel-btn:hover { border-color: var(--line); }
.dp-label.shift .xsel-btn[aria-expanded="true"] { border-color: var(--accent); }

/* Sektions-Abstände */
.bedarf-table tbody.bsec-gap td { padding: 0; border: 0; height: 12px; background: transparent; }

/* Sektions-Farben (blass) – Schiene kräftiger, Zeilen sehr dezent getönt */
.sec-umsatz .brail { background: var(--accent); }
.sec-abwesenheit .brail { background: var(--accent-3); }
.sec-stunden .brail { background: var(--accent-4); }
.sec-prod .brail { background: #7b6fd0; }
.sec-personal .brail { background: #4f9a52; }
.sec-umsatz .bsec-name { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.sec-abwesenheit .bsec-name { color: var(--accent-3); background: color-mix(in srgb, var(--accent-3) 12%, var(--surface)); }
.sec-stunden .bsec-name { color: var(--accent-4); background: color-mix(in srgb, var(--accent-4) 12%, var(--surface)); }
.sec-prod .bsec-name { color: #7b6fd0; background: color-mix(in srgb, #7b6fd0 12%, var(--surface)); }
.sec-personal .bsec-name { color: #4f9a52; background: color-mix(in srgb, #4f9a52 12%, var(--surface)); }
.sec-umsatz .brow td, .sec-umsatz .brow th { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.sec-abwesenheit .brow td, .sec-abwesenheit .brow th { background: color-mix(in srgb, var(--accent-3) 5%, var(--surface)); }
.sec-stunden .brow td, .sec-stunden .brow th { background: color-mix(in srgb, var(--accent-4) 5%, var(--surface)); }
.sec-prod .brow td, .sec-prod .brow th { background: color-mix(in srgb, #7b6fd0 5%, var(--surface)); }
.sec-personal .brow td, .sec-personal .brow th { background: color-mix(in srgb, #4f9a52 5%, var(--surface)); }
.bedarf-table.rail tbody.bsec-grp tr:hover td:not(.brail), .bedarf-table.rail tbody.bsec-grp tr:hover th:not(.brail) { background: var(--accent-soft); }

/* Kapazität: größer + klarere Ampelfarben */
.cap { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.cap-green { background: rgba(29, 158, 117, 0.22); color: #0f6e56; }
.cap-amber { background: rgba(239, 159, 39, 0.28); color: #8a5400; }
.cap-red { background: rgba(226, 75, 74, 0.24); color: #b32622; }
@media (prefers-color-scheme: dark) {
  .cap-green { background: rgba(29, 158, 117, 0.30); color: #5dcaa5; }
  .cap-amber { background: rgba(239, 159, 39, 0.34); color: #f2c061; }
  .cap-red { background: rgba(226, 75, 74, 0.32); color: #f09595; }
}

/* Export-Dropdown im Button-Look */
.bedarf-exportsel { width: auto; }
.bedarf-exportsel .xsel-btn {
  width: auto; gap: 8px; font-weight: 700; min-height: 38px; padding: 0 14px;
  border-radius: 10px; background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.bedarf-exportsel .xsel-btn:hover { background: color-mix(in srgb, var(--accent) 88%, #000); border-color: var(--accent); box-shadow: none; }
.bedarf-exportsel .xsel-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.bedarf-exportsel .xsel-lead { width: 16px; height: 16px; flex: 0 0 auto; }
.bedarf-exportsel .xsel-arrow { color: rgba(255, 255, 255, 0.85); }
.bedarf-exportsel .xsel-menu { min-width: 200px; }
.bedarf-exportsel .xsel-opt { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-weight: 600; }
.bedarf-exportsel .xsel-opt svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
.bedarf-exportsel .xsel-opt:hover svg { color: inherit; }

/* === Fehlzeiten-Reiter === */
.view-hero,
.fehlzeiten-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 129px;
  box-sizing: border-box;
  padding: 15px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #edf6f2 100%);
  box-shadow: 0 6px 18px rgba(20, 31, 28, 0.04);
}
.view-hero h1,
.fehlzeiten-hero h1 {
  margin: 3px 0 6px;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.08;
}
.view-hero p,
.fehlzeiten-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.view-hero-controls,
.fehlzeiten-hero-controls { justify-content: flex-end; }
.view-hero-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.view-hero-controls .year-switch {
  height: 40px;
  margin: 0;
  box-sizing: border-box;
}
.view-hero-controls .bedarf-exportsel .xsel-btn {
  height: 40px;
  min-height: 40px;
  box-sizing: border-box;
}
.view-hero-controls .xsel {
  align-items: center;
}
.view-hero-current {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.fehlzeiten-section .bkpi-grid { margin-bottom: 0; }
.fehlzeiten-section .fz-kpi {
  height: 120px;
  min-height: 120px;
  box-sizing: border-box;
  align-items: stretch;
  padding: 12px 14px;
}
.fehlzeiten-section .fz-kpi .bkpi-ic {
  align-self: center;
}
.fehlzeiten-section .fz-kpi .bkpi-main {
  display: grid;
  grid-template-rows: 24px minmax(0, 1fr);
  gap: 2px;
  min-height: 74px;
}
.fehlzeiten-section .fz-kpi .bkpi-label {
  align-self: start;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
}
.fehlzeiten-section .fz-kpi .bkpi-val {
  align-self: center;
  font-size: 27px;
}
.fehlzeiten-section .fz-kpi .bkpi-sub {
  min-height: 14px;
  font-size: 13px;
}
.fz-kpi-center {
  align-self: center;
  display: grid;
  gap: 4px;
  justify-items: start;
}
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(1) .fz-kpi-center,
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(3) .fz-kpi-center {
  transform: translateY(-8px);
}
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(1) .bkpi-sub,
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(3) .bkpi-sub {
  margin-left: 10px;
  line-height: 1.2;
}
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(1) .bkpi-sub {
  font-size: 13px;
}
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(3) .fz-trend-arrow {
  transform: translateX(10px);
}
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(1) .bkpi-ic { background: #e4f1ec; color: #16624d; }
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(2) .bkpi-ic { background: #eef0ff; color: #4453a6; }
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(3) .bkpi-ic { background: #fff0da; color: #a45d00; }
.fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(4) .bkpi-ic { background: #f9e6e4; color: #b32622; }
.fz-empty-kpi .bkpi-val { color: var(--muted); }
.fz-empty-kpi { min-height: 80px; }
.fz-add { width: min(260px, 100%); }
.fz-search-wrap { display: inline-flex; align-items: center; width: min(260px, 100%); }
.fz-search { height: 38px; width: 100%; min-width: 180px; }
.fz-kpi .bkpi-val:has(.fz-prob-pair),
.fz-kpi .bkpi-val:has(.fz-clean-pair) { white-space: normal; }
.fz-prob-pair { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; justify-items: start; width: max-content; }
.fz-prob-pair .fz-prob-row { display: grid; grid-template-columns: max-content max-content; align-items: baseline; column-gap: 8px; white-space: nowrap; }
.fz-prob-pair strong { font-size: 24px; line-height: 1; font-weight: 800; color: var(--ink); }
.fz-prob-pair small { font-size: 13px; font-weight: 400; color: var(--muted); }
.fz-clean-pair { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; justify-items: start; width: max-content; }
.fz-clean-row { display: grid; grid-template-columns: max-content max-content; align-items: baseline; column-gap: 8px; white-space: nowrap; }
.fz-clean-row strong { font-size: 24px; line-height: 1; font-weight: 800; color: var(--ink); }
.fz-clean-row small { font-size: 13px; font-weight: 400; color: var(--muted); }
.fz-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  width: 100%;
  transform: translateY(4px);
}
.fz-combo-input {
  min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 9px 0 0 9px;
  background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700;
  padding: 0 30px 0 8px; outline: none; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.fz-combo-clear { right: 32px; width: 18px; height: 18px; font-size: 12px; z-index: 2; }
.fz-combo-arrow {
  height: 34px; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; font-weight: 400; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.fz-combo:hover .fz-combo-input,
.fz-combo:hover .fz-combo-arrow { border-color: var(--line); background: var(--surface); }
.fz-combo:focus-within .fz-combo-input,
.fz-combo:focus-within .fz-combo-arrow { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent-soft); }
.fz-combo-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20000; max-height: 250px; overflow: auto;
  margin: 0; padding: 5px; list-style: none; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); box-shadow: 0 14px 28px rgba(20,31,28,.14); text-align: left;
}
.fz-combo-menu button {
  width: 100%; border: 0; border-radius: 7px; background: transparent; color: var(--ink);
  padding: 8px 9px; text-align: left; font: inherit; font-size: 12px; font-weight: 400; cursor: pointer;
}
.fz-combo-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.fz-combo-empty { padding: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
.fz-name .xsel { width: 100%; }
.fz-name .xsel-btn { min-height: 32px; font-size: 12px; border-color: transparent; background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.fz-name .xsel-btn:hover { border-color: var(--accent); background: var(--surface); }
.fz-name .secondary-button { width: 100%; min-height: 32px; justify-content: center; font-size: 12px; }
.fz-table thead th { position: sticky; top: var(--sticky-topbar-offset); z-index: 70; }
.fz-table thead th.fz-name { z-index: 90; overflow: visible; vertical-align: middle; padding-top: 4px; padding-bottom: 4px; }
.fz-table thead { position: relative; z-index: 70; }
.fz-name .xsel-menu { min-width: 260px; }
.fz-chartcard { display: grid; gap: 12px; overflow: hidden; }
.fz-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fz-card-head strong { display: block; font-size: 14px; color: var(--ink); }
.fz-card-head span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.fz-chart-title strong { font-size: 14px; line-height: 1.2; }
.fz-chart-title span { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.fz-chart-title-employee strong { font-size: 22px; letter-spacing: 0; }
.fz-chart-title-employee span { font-size: 13px; }
.fz-chart-scope { margin-top: 6px; }
.fz-chart-legend { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fz-chart-legend span { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.fz-chart-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.fz-chart-legend .actual { background: #2e6a53; }
.fz-chart-legend .forecast { background: #a9d8c7; }
.fz-trend-arrow { display: inline-block; font-size: 28px; line-height: 1; font-weight: 800; }
.fz-trend-arrow.up { color: #b32622; }
.fz-trend-arrow.down { color: var(--accent); }
.fz-trend-arrow.flat { color: var(--muted); }
.fz-segmented { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fz-segmented button {
  height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fz-segmented button:hover { border-color: var(--accent); }
.fz-segmented button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.fz-chart-grid {
  display: grid; grid-template-columns: 210px repeat(12, minmax(0, 1fr)); align-items: end;
  min-height: 310px; color: var(--muted);
}
.fz-chart-axis {
  height: 270px;
}
.fz-chart-month {
  min-width: 0; height: 300px; display: grid; grid-template-rows: minmax(0, 1fr) 24px;
  justify-items: center;
}
.fz-chart-plot {
  height: 264px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 5px; padding: 8px 3px 0; box-sizing: border-box; border-bottom: 1px solid rgba(104,115,112,.22);
}
.fz-chart-value { color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1; }
.fz-chart-bar { width: min(52px, 82%); min-height: 2px; border-radius: 7px 7px 3px 3px; display: block; }
.fz-chart-bar.actual { background: #2e6a53; }
.fz-chart-bar.forecast { background: #a9d8c7; }
.fz-chart-label { align-self: start; justify-self: center; font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fz-wrap { margin-top: 0; overflow-x: visible; }
.fz-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 11px; }
.fz-table th, .fz-table td { height: 25px; padding: 2px 4px; text-align: right; vertical-align: middle; }
.fz-table thead th { background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); }
.fz-table thead th:not(.fz-name),
.fz-table tbody td,
.fz-table tfoot td { border-left: 1px solid var(--line); }
.fz-table thead th:not(.fz-name) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 18%, transparent); }
.fz-table tbody tr.fz-row-reveal {
  opacity: 0;
  transform: translateY(8px);
}
.fz-table tbody tr.fz-row-reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.fz-table .fz-name,
.fz-table .fz-employee,
.fz-table tfoot th {
  position: sticky; left: 0; z-index: 2; width: 210px; text-align: left; background: var(--surface);
}
.fz-table thead .fz-name { z-index: 90; }
.fz-table .fz-employee { font-weight: 400; color: var(--ink); font-size: 12px; }
.fz-table .fz-employee .fz-employee-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  max-width: 130px; vertical-align: middle;
}
.fz-table .fz-avatar {
  width: 20px; height: 20px; border-radius: 6px; margin-right: 5px;
  font-size: 10px; vertical-align: middle;
}
.fz-remove {
  width: 16px; height: 16px; margin-right: 5px; border: 0; border-radius: 5px;
  background: transparent; color: color-mix(in srgb, var(--muted) 54%, transparent); font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle;
  opacity: 0.55;
}
.fz-remove:hover { background: #fbeeec; color: #a3261f; opacity: 1; }
.fz-month { text-align: center !important; font-weight: 800; color: var(--accent) !important; background: var(--surface) !important; padding-top: 4px !important; padding-bottom: 4px !important; }
.fz-month small { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; font-weight: 700; line-height: 1.08; white-space: normal; }
.fz-month-name { display: block; margin-bottom: 5px; font-size: 11px; line-height: 1.02; }
.fz-month-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 0; }
.fz-head-tray {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  min-height: 40px;
  box-sizing: border-box;
  border-radius: 11px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
}
.fz-head-pair {
  min-width: 0;
  display: grid;
  grid-template-rows: 16px 16px;
  align-items: center;
  justify-items: center;
  row-gap: 0;
  border-radius: 8px;
}
.fz-head-pair + .fz-head-pair {
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent) 13%, transparent);
}
.fz-head-icon {
  width: 100%;
  min-width: 0;
  height: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fz-head-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fz-head-icon:hover,
.fz-head-icon:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  outline: none;
  box-shadow: none;
}
.fz-month-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: -1px; }
.fz-total-value {
  min-width: 0;
  min-height: 16px;
  padding: 0 3px;
  border-radius: 5px;
  background: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fz-diff { display: block; margin-top: 3px; color: var(--muted) !important; font-size: 10px; font-style: normal; font-weight: 800; }
.fz-month-value { background: var(--surface); }
.fz-month-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; justify-items: center; align-items: center; }
.fz-month-cell label { display: flex; justify-content: center; align-items: center; margin: 0; min-width: 0; width: 100%; }
.fz-month-cell label span { color: var(--muted); font-size: 9px; font-weight: 800; text-align: left; }
.fz-cell {
  width: 34px; min-width: 0; height: 18px; box-sizing: border-box; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--muted); text-align: center; font: inherit; font-size: 11px; font-variant-numeric: tabular-nums;
  font-weight: 400;
  padding: 0 3px; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  -moz-appearance: textfield; appearance: textfield;
}
.fz-cell::-webkit-outer-spin-button, .fz-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fz-cell:hover { border-color: var(--line); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.fz-cell:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.fz-table tbody tr:hover td,
.fz-table tbody tr:hover th { background: var(--accent-soft); }
.fz-table tbody tr { cursor: pointer; }
.fz-table tbody tr:has(input:focus) { cursor: default; }
.fz-table tbody tr.fz-row-selected td,
.fz-table tbody tr.fz-row-selected th {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.fz-table tbody tr.fz-row-selected th {
  color: var(--accent);
}
.fz-table tbody tr:hover td.fz-alert,
.fz-alert {
  background: var(--surface);
  box-shadow: none;
}
.fz-table tbody tr:hover td.fz-alert {
  background: var(--accent-soft);
}
.fz-table tbody tr.fz-row-selected td.fz-alert {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.fz-alert .fz-cell {
  width: 34px;
  height: 19px;
  border-color: rgba(179, 38, 34, 0.34);
  border-radius: 999px;
  background: #f4b7b2;
  color: #7f1d1a;
  font-weight: 400;
  text-align: center;
}
.fz-alert .fz-cell:hover,
.fz-alert .fz-cell:focus { border-color: #b32622; background: #ffd0cc; box-shadow: inset 0 0 0 1px rgba(179, 38, 34, 0.18); }
.fz-table tfoot th,
.fz-table tfoot td { border-top: 2px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); font-weight: 400; }
.fz-correction { font-weight: 400; color: var(--accent-2); }
@media (max-width: 900px) {
  .view-hero,
  .fehlzeiten-hero { grid-template-columns: 1fr; }
  .view-hero-controls,
  .fehlzeiten-hero-controls { justify-content: flex-start; }
  .fz-card-head { align-items: flex-start; }
  .fz-add { width: 100%; }
  .fz-chartcard { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fz-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fz-table { font-size: 10px; }
  .fz-table { min-width: 860px; }
  .fz-table .fz-name, .fz-table .fz-employee, .fz-table tfoot th { width: 150px; }
  .fz-chart-grid { min-width: 760px; grid-template-columns: 150px repeat(12, minmax(42px, 1fr)); }
  .fz-table .fz-employee span { max-width: 108px; }
  .fz-table th, .fz-table td { padding-left: 2px; padding-right: 2px; }
}

/* KPI-Kachel-Animation beim Öffnen – wie die Dashboard-Kacheln (gleichmäßiges Einblenden, kein Stagger). */
.bkpi-enter { opacity: 0; }
.bkpi-enter.in { opacity: 1; animation: bkpiReveal 0.42s ease; }
@keyframes bkpiReveal { from { opacity: 0; } to { opacity: 1; } }
/* Bedarf-Kacheln: Aussehen + Hover identisch zu den Dashboard-Kacheln (.metric). */
.bkpi {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.bkpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20, 31, 28, 0.1);
}

/* === Dashboard: 5 Bedarf-Kacheln (aktueller + nächster Monat) === */
.dbk { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.dbk-head { font-size: 11px; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbk-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dbk-dot-rev { background: var(--accent); }
.dbk-dot-crew { background: var(--accent-4); }
.dbk-dot-cap { background: var(--accent-3); }
.dbk-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dbk-val { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.dbk-sub { font-size: 12px; color: var(--muted); }
.dbk-dev { font-size: 11px; font-weight: 700; }
.dbk-dev.pos { color: var(--accent); }
.dbk-dev.neg { color: var(--accent-2); }
.dbk-caprow { display: flex; align-items: center; gap: 8px; }
.dbk-cap-mon { font-size: 13px; font-weight: 400; color: var(--muted); }
.metric strong .cap { vertical-align: middle; }
/* Obere Bedarf-Kacheln genauso groß wie die untere Metrik-Reihe */
.dash-bedarf .metric { min-height: 118px; }
/* Zahl inline, damit der %-Badge klein direkt dahinter steht (nicht in voller Schriftgröße) */
.dash-bedarf .metric strong { white-space: normal; }
.dash-bedarf .metric strong .metric-number { display: inline; }
.dash-bedarf .metric strong .dbk-dev { font-size: 12px; font-weight: 700; margin-left: 4px; }
.dash-bedarf .metric strong .dbk-dev.pos { color: var(--accent); }
.dash-bedarf .metric strong .dbk-dev.neg { color: var(--accent-2); }
/* Kapazitäts-Pill (aktueller Monat) behält Ampelfarbe trotz .metric-number-Farbe */
.dash-bedarf .metric strong .metric-number.cap-green { color: #0f6e56; }
.dash-bedarf .metric strong .metric-number.cap-amber { color: #8a5400; }
.dash-bedarf .metric strong .metric-number.cap-red { color: #b32622; }
@media (prefers-color-scheme: dark) {
  .dash-bedarf .metric strong .metric-number.cap-green { color: #5dcaa5; }
  .dash-bedarf .metric strong .metric-number.cap-amber { color: #f2c061; }
  .dash-bedarf .metric strong .metric-number.cap-red { color: #f09595; }
}

/* === Mitarbeiter: Vollständigkeitsprüfung === */
.employee-name-cell { display: flex; align-items: center; gap: 8px; }
/* Roter Streifen mit Warnzeichen links vom Namen */
.incomplete-flag {
  flex: 0 0 auto; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; min-height: 30px;
  background: #e24b4a; color: #fff;
  font-size: 11px; line-height: 1;
  border-radius: 3px; cursor: help;
}
.completeness-toggle.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* === Dashboard: Monat als farbige Bubble + Kennzahl-Art === */
.dash-bedarf .metric > span:not(.metric-icon):first-of-type,
.dash-bedarf .metric-with-icon > span:not(.metric-icon) {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  align-self: start;
}
.dbk-month-bubble {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.5;
}
.dbk-month-bubble.cur { background: var(--accent-soft); color: var(--accent); }
.dbk-month-bubble.next { background: color-mix(in srgb, var(--accent-4) 16%, var(--surface)); color: var(--accent-4); }
.dbk-kind { font-size: 13px; font-weight: 600; color: var(--muted); }

.dbk-combo .dbk-month-bubble { padding: 1px 7px; font-size: 10px; font-weight: 700; }

/* Umsatz – eigene Kachel je Monat: Überschrift „Umsatz" oben, Bubble + Werte darunter vertikal zentriert. */
.dbk-umsatz-single.metric-with-icon, .dbk-crewtile.metric-with-icon { grid-template-rows: auto 1fr; }
.dbk-umsatz-single.metric-with-icon > .metric-icon, .dbk-crewtile.metric-with-icon > .metric-icon { grid-row: 1 / span 2; }
.dbk-um-body { display: flex; align-items: flex-start; gap: 12px; }
.dbk-um-body .dbk-month-bubble { margin-top: 1px; }
.dbk-umsatz-single .dbk-month-bubble { font-size: 11.5px; padding: 2px 10px; flex: none; }
.dbk-um-vals { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dbk-um-brutto { white-space: nowrap; }
.dbk-um-brutto b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dbk-um-brutto .dbk-pct-sm { font-size: 11px; font-weight: 700; margin-left: 4px; }
.dbk-um-netto { font-size: 12px; color: var(--ink); white-space: nowrap; margin-left: 12px; }
.dbk-um-netto span:first-child { font-weight: 500; font-variant-numeric: tabular-nums; }
.dbk-um-netto .dbk-pct-nt { font-size: 11px; font-weight: 700; margin-left: 4px; }

/* Crew zu verplanen: Monate untereinander; Stunden untereinander, Produktivität kleiner; Bedarf rechtsbündig
   auf Höhe des Produktivitäts-€ (Raster packt links, „justify-content: start"). */
.dbk-crew-months { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; }
.dbk-crewm { display: grid; grid-template-columns: 40px auto auto; column-gap: 8px; row-gap: 0; align-items: baseline; justify-content: start; }
.dbk-crewm-bedarf { line-height: 1.1; }
.dbk-crewtile .dbk-month-bubble { justify-content: center; width: 40px; padding-left: 0; padding-right: 0; }
.dbk-crew-std { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbk-crew-prod { font-size: 10px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbk-crewm-bedarf { grid-column: 1 / -1; text-align: right; font-size: 11px; font-weight: 700; white-space: nowrap; }
.dbk-crewm-bedarf.has-need { color: var(--accent-2); }
.dbk-crewm-bedarf.no-need { color: #b9c0bc; font-weight: 400; }

/* Zwei zusätzliche Urlaub-Kacheln (Fortschritt + Vorjahresvergleich) – gleiche Breite wie die oberen Kacheln. */
.vac-extra-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vac-extra-metrics .dbk-vac-foot { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 4px; }
.vac-extra-metrics .dbk-vac-foot b { color: var(--ink); font-weight: 700; }
/* Untere Kacheln so kompakt wie möglich; obere etwas erhöhen → beide gleich hoch. */
.vac-extra-metrics .metric strong { margin-top: 4px; }
.vac-extra-metrics .dbk-vac-bar { margin-top: 5px; }
.page-vacation .metrics .metric { min-height: 120px; box-sizing: border-box; }
/* Mobil/Tablet: untere Urlaub-Kacheln wie die oberen umbrechen (sonst zu schmal). */
@media (max-width: 1040px) { .vac-extra-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .vac-extra-metrics { grid-template-columns: 1fr; } }

/* Urlaubs-Fortschritt-Kachel. */
.dbk-vac-diff.neg { color: var(--accent-2); }
.dbk-vac-diff.pos { color: var(--accent); }
.dbk-vac .dbk-vac-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); margin-top: 7px; overflow: hidden; }
.dbk-vac .dbk-vac-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 200ms ease; }
.dbk-vac .dbk-vac-bar i.low { background: var(--accent-2); }
.dbk-vac .dbk-vac-bar i.ok { background: var(--accent-4); }
.dbk-vac .dbk-vac-bar i.full { background: var(--accent); }
.dbk-vac em, .dbk-vac em { line-height: 1.5; }

/* Leere Platzhalter-Kachel. */
.dbk-empty { background: transparent; box-shadow: none; border: 1px dashed var(--line); }

.hint-split { color: var(--muted); }

/* === Mobil-Anpassungen === */
@media (max-width: 680px) {
  .bkpi-grid { grid-template-columns: 1fr; }
  .bedarf-table.rail { min-width: 940px; }
  .bedarf-toolbar { gap: 10px; }
  .bedarf-controls { width: 100%; flex-wrap: wrap; }
  .bedarf-tablecard { padding: 8px; }
  .bkpi { min-height: 0; }
  .bedarf-section { gap: 12px; }
  .profile-warning-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .brand strong { font-size: 16px; }
  .brand span { font-size: 11px; }
  /* Navigation: eine horizontal scrollbare Zeile statt 4 umgebrochener Reihen. */
  .nav { gap: 6px; flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button, .actions button { flex: 0 0 auto; }
  .nav button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .view-title { font-size: 18px; }
  .bedarf-tablecard { padding: 6px; }
  .report-gen .rg-head { flex-direction: column; align-items: stretch; }
  .rg-toolbar { width: 100%; flex-wrap: wrap; min-width: 0; }
  .rg-toolbar > * { min-width: 0; }
  .rg-toolbar .rg-btn { flex: 1 1 120px; min-width: 0; padding: 0 10px; }
  .rg-stage { padding-left: 6px; padding-right: 6px; }
}

/* Kapazitäts-Prozentzahl in der KPI-Kachel farbig (wie Dashboard-Ampel), nur Textfarbe */
.bkpi-val .capc { font: inherit; }
.capc-green { color: #0f6e56; }
.capc-amber { color: #8a5400; }
.capc-red { color: #b32622; }
@media (prefers-color-scheme: dark) {
  .capc-green { color: #5dcaa5; }
  .capc-amber { color: #f2c061; }
  .capc-red { color: #f09595; }
}

/* === Urlaubsseite: Steuerleiste + Gruppen-Umschalter === */
.vacation-chart-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.vacation-chart-controls .year-switch { margin: 0; }
.seg-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.seg-toggle button {
  border: 0; background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 9px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.seg-toggle button:hover { color: var(--ink); }
.seg-toggle button.active { background: var(--accent); color: #fff; }
/* Zeitformat-Schalter (Einstellungen) stärker abgerundet – pill-Optik wie die Toggles. */
.import-box .seg-toggle { border-radius: 999px; }
.import-box .seg-toggle .seg-option, .import-box .seg-toggle button { border-radius: 999px; }

/* Kapazitäts-Bubble in der KPI-Kachel etwas größer (wie ein Wert) */
.bkpi-val .cap { font-size: 16px; padding: 3px 12px; }

/* Personalbedarf-Bubbles alle gleich groß (unabhängig von -2 / 1 / 0). */
.cap-need { min-width: 34px; padding-left: 4px; padding-right: 4px; text-align: center; box-sizing: border-box; }
/* Differenz-Bubbles alle gleich groß (größere Stunden-Zahlen, z. B. -295 … 1.155). */
.cap-diff { min-width: 52px; padding-left: 5px; padding-right: 5px; text-align: center; box-sizing: border-box; }
/* Beschriftung der „Optimale Urlaubsstunden"-Linie. */
.vacation-optimal-label { fill: #111111; font-size: 12px; font-weight: 500; }


/* Urlaubs-Umschalter exakt so hoch wie der Jahres-Schalter daneben */
.vacation-chart-controls .year-switch,
.vacation-chart-controls .seg-toggle {
  height: 40px; box-sizing: border-box; display: inline-flex; align-items: center;
}
/* Seg-Toggle nicht tiefer setzen: globalen margin-top/align-self im Urlaubskontext aufheben. */
.vacation-chart-controls .seg-toggle {
  margin-top: 0; align-self: center;
}

/* === Vertragsanpassungen (MA-Profil) === */
.cc-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft);
}
.cc-item-main { display: flex; flex-direction: column; gap: 1px; }
.cc-item-main strong { font-size: 13px; }
.cc-item-main small { font-size: 12px; color: var(--muted); }
.cc-empty { font-size: 12px; color: var(--muted); padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.cc-add { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.cc-add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cc-field:last-child { grid-column: 1 / -1; }
.cc-select, .cc-input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.cc-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231f7564' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
.cc-select:hover, .cc-input:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.cc-input { cursor: text; font-weight: 700; }
.cc-select:focus, .cc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cc-add-btn { width: 100%; }
.contract-change-dot { color: var(--accent); font-size: 9px; vertical-align: middle; }

/* === Berichte-Reiter === */
.reports-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reports-toolbar .actions { display: flex; align-items: center; gap: 10px; }
.reports-page { display: flex; flex-direction: column; gap: 14px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 900px; }
.rep-table th, .rep-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rep-table thead th { color: var(--muted); font-weight: 700; position: sticky; top: 0; background: var(--surface); }
.rep-table th.rep-label { text-align: left; font-weight: 600; color: var(--ink); position: sticky; left: 0; background: var(--surface); }
.rep-table thead th.rep-label { z-index: 1; }
.rep-table tbody tr:hover td, .rep-table tbody tr:hover th { background: var(--accent-soft); }
.rep-table .rep-sum { font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.rep-emp th.rep-label { min-width: 180px; }
.rep-emp td:nth-child(2) { text-align: left; }

/* Druck: nur die Berichtsseite, ohne Navigation/Buttons */
@media print {
  .topbar, .reports-toolbar .actions, .privacy-note, .toast { display: none !important; }
  body, .app-shell, .page { background: #fff !important; }
  .reports-page { gap: 10px; }
  .panel { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .rep-table { min-width: 0; font-size: 10px; }
  .rep-table thead th, .rep-table th.rep-label { position: static; }
}

/* ===== Berichts-Generator (Berichte-Reiter) ===== */
.report-gen { display: flex; flex-direction: column; gap: 16px; }
.report-gen .rg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.report-gen .rg-sub { margin: 4px 0 0; font-size: 13px; color: #6c7570; }
.rg-config { background: #fff; border: 0.5px solid #e9ebe9; border-radius: 14px; padding: 16px 18px; }
.rg-report-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.rg-report-row-inner { display: flex; align-items: center; gap: 13px; }
.rg-ico { width: 42px; height: 42px; border-radius: 11px; background: #e7f2ec; color: #2e6a53; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.rg-grow { flex: 1; }
.rg-lbl { display: block; font-size: 12px; color: #6c7570; margin-bottom: 5px; }
.rg-report-select { width: 100%; height: 42px; border: 1px solid #e3e6e3; border-radius: 11px; background: #fff; padding: 0 12px; font-size: 14px; font-weight: 500; }
.rg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; }
.rg-field { position: relative; }
.rg-combo { width: 100%; height: 42px; border: 1px solid #e3e6e3; border-radius: 10px; background: #fff; padding: 0 10px; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #1c1c1c; cursor: pointer; }
.rg-combo:hover { border-color: #cdd5cf; }
.rg-combo[disabled], .rg-combo-disabled { opacity: .55; cursor: default; pointer-events: none; }
/* Nur die Label-/Chips-Fläche wächst – der Pfeil bleibt rechts (nicht mittig). */
.rg-combo > span:not(.rg-caret) { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; }
.rg-caret { flex: 0 0 auto; margin-left: auto; color: #8a918c; font-size: 15px; display: inline-flex; align-items: center; }
.rg-combo > span:not(.rg-caret) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chips (Kennzahlen): einzeilig, horizontal scrollbar → gleiche Höhe wie die übrigen Felder. */
.rg-combo-chips .rg-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.rg-combo-chips .rg-chips::-webkit-scrollbar { display: none; }
.rg-chip { display: inline-flex; align-items: center; gap: 3px; background: #e7f2ec; color: #2e6a53; font-size: 12px; padding: 3px 5px 3px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.rg-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%; background: rgba(46,106,83,.14); color: #2e6a53; cursor: pointer; }
.rg-chip-x:hover { background: #2e6a53; color: #fff; }
.rg-chip-x .rg-svg-icon { width: 10px; height: 10px; vertical-align: 0; }
.rg-muted { color: #717b77; font-size: 12px; }
.rg-dropdown { position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; right: 0; background: #fff; border: 0.5px solid #e3e6e3; border-radius: 11px; padding: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.10); max-height: 290px; overflow: auto; }
.rg-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; background: none; border-radius: 8px; font-size: 13px; color: #1c1c1c; cursor: pointer; text-align: left; }
.rg-opt:hover { background: #f2f5f3; }
.rg-opt.on { background: #eef5f1; }
.rg-check { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1px solid #cdd2cd; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.rg-opt.on .rg-check { background: #2e6a53; border-color: #2e6a53; }
.rg-opt.on .rg-check .rg-svg-icon { color: #fff; }
.rg-opt .ti-chart-bar, .rg-opt .ti-chart-donut, .rg-opt .ti-table, .rg-opt .ti-layout-cards { color: #6c7570; font-size: 16px; }
.rg-opt.on .ti-chart-bar, .rg-opt.on .ti-table, .rg-opt.on .ti-layout-cards { color: #2e6a53; }
.rg-dropdown-emp { padding: 8px; }
.rg-dropdown-label { padding: 8px 9px 4px; color: #717b77; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rg-scope { margin-bottom: 8px; }
.rg-emp-search { width: 100%; height: 34px; border: 1px solid #e3e6e3; border-radius: 8px; padding: 0 10px; font-size: 13px; margin-bottom: 6px; }
.rg-emp-list { max-height: 200px; overflow: auto; }

.rg-preview { background: #eef1ef; border-radius: 14px; padding: 0 0 22px; }
.rg-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.rg-preview-label { font-size: 12px; color: #6c7570; }
.rg-toolbar { display: flex; align-items: center; gap: 8px; }
/* Format-Umschalter: nur Icons, quadratische Buttons. */
.rg-iconseg button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; }
.rg-iconseg .rg-svg-icon { width: 16px; height: 16px; vertical-align: 0; }
/* Zoom-Steuerung der Vorschau. */
.rg-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.rg-zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: none; border-radius: 9px; background: none; color: #4a524d; cursor: pointer; }
.rg-zoom-btn:hover { background: #fff; color: var(--accent); }
.rg-zoom-btn .rg-svg-icon { width: 15px; height: 15px; vertical-align: 0; }
.rg-zoom-val { min-width: 42px; text-align: center; font-size: 12px; font-weight: 600; color: #4a524d; font-variant-numeric: tabular-nums; }
/* Drucken & PDF: identische Geometrie (angeglichen), nur Akzentfarbe unterscheidet. */
.rg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 108px; height: 34px; padding: 0 14px; border: 1px solid #e3e6e3; border-radius: 9px; background: #fff; font-size: 13px; font-weight: 600; color: #1c1c1c; cursor: pointer; }
.rg-btn:hover { border-color: #cdd5cf; }
.rg-btn .rg-svg-icon { width: 16px; height: 16px; vertical-align: 0; }
.rg-btn-primary { background: #2e6a53; border-color: #2e6a53; color: #fff; }
.rg-btn-primary:hover { background: #285c49; border-color: #285c49; }
/* Vorschau-Bereich begrenzt + nur er selbst scrollt (nicht die ganze Seite).
   align-items:flex-start verhindert, dass die A4-Seiten im Flex-Container gestaucht werden. */
.rg-stage { display: flex; justify-content: center; align-items: flex-start; padding: 8px 16px 18px; overflow: auto; max-height: 72vh; }
.rg-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content; max-width: none; transform: scale(var(--rg-zoom, 1)); transform-origin: top center; transition: transform 120ms ease; }
.rg-page { flex: none; }
/* Feste A4-Box in mm (210×297) → exakt 1:1 im Druck, kein kumulativer Versatz. Rand 14 mm (Daten nicht am Rand). */
.rg-page { background: #fff; border: 0.5px solid #dfe8e2; border-radius: 6px; box-shadow: 0 10px 32px rgba(20, 31, 28, 0.08); padding: 14mm 15mm; color: #1c1c1c; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.rg-page.portrait { width: 210mm; height: 297mm; }
.rg-page.landscape { width: 297mm; height: 210mm; }
.rg-page-foot { margin-top: auto; }
.rg-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 0; padding: 10px 12px 11px; margin: -4px -4px 16px; border-radius: 8px; background: linear-gradient(135deg, #eff7f3 0%, #f9fbfa 70%); box-shadow: inset 0 -1px 0 #d7e5dd; }
.rg-page-title { font-size: 19px; font-weight: 800; color: #15231d; letter-spacing: 0; }
.rg-page-sub { font-size: 11px; color: #587067; margin-top: 3px; font-weight: 700; }
.rg-page-headmain { min-width: 0; padding-right: 14px; }
.rg-page-desc { font-size: 11px; color: #4a524d; margin-top: 6px; line-height: 1.4; max-width: 62ch; }
.rg-page-brand { font-size: 11px; color: #587067; text-align: right; line-height: 1.35; font-weight: 700; }
.rg-page-head, .rg-kpis, .rg-block, .rg-page-foot { flex-shrink: 0; }
.rg-page-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; color: #64736d; border-top: 0.5px solid #dfe8e2; padding-top: 8px; margin-top: auto; }
.rg-kpis { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.rg-kpi { flex: 1; min-width: 110px; background: #fff; border: 0.5px solid #dfe8e2; border-radius: 8px; padding: 11px 13px; min-height: 54px; box-sizing: border-box; box-shadow: 0 5px 14px rgba(20, 31, 28, 0.04); }
.rg-kpi-l { display: block; font-size: 10px; color: #64736d; font-weight: 800; }
.rg-kpi-v { display: block; font-size: 20px; font-weight: 800; color: #174d3d; margin-top: 3px; }
.rg-block { margin-bottom: 20px; }
.rg-block-title { font-size: 12px; color: #28342d; margin-bottom: 10px; font-weight: 800; }
.rg-bars { display: flex; align-items: flex-end; gap: 16px; height: 118px; padding: 0 6px 8px; border-bottom: 0.5px solid #dfe8e2; background: linear-gradient(180deg, rgba(231,242,236,.36), transparent 62%); border-radius: 8px 8px 0 0; }
.rg-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.rg-bar-val { font-size: 10px; color: #6c7570; }
.rg-bar { width: 100%; max-width: 54px; border-radius: 5px 5px 0 0; box-shadow: inset 0 -10px 18px rgba(0,0,0,.08); }
.rg-bar-lbl { font-size: 10px; color: #717b77; }
.rg-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rg-table thead th { text-align: right; font-size: 10px; font-weight: 800; color: #587067; padding: 0 0 6px; border-bottom: 0.5px solid #dfe8e2; }
.rg-table thead th:first-child { text-align: left; }
.rg-table tbody td { text-align: right; padding: 5px 0; border-bottom: 0.5px solid #eef3f0; color: #4a524d; }
.rg-table tbody td.rg-name { text-align: left; color: #1c1c1c; font-weight: 700; }
.rg-table th, .rg-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-table-sm { font-size: 10px; }
.rg-table-sm td, .rg-table-sm th { padding: 3px 2px; }
.rg-block-wide { overflow: hidden; }
.rg-block-wide .rg-table { table-layout: fixed; }
.rg-block-wide .rg-table th:first-child,
.rg-block-wide .rg-table td:first-child { width: 22mm; }
.rg-calendar-report { margin-bottom: 0; }
.rg-cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 5px; font-size: 9px; color: #717b77; text-align: center; font-weight: 600; }
.rg-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rg-cal-cell { min-height: 24mm; border: 0.5px solid #e3e8e4; border-radius: 6px; padding: 4px 5px; background: #fff; overflow: hidden; box-sizing: border-box; }
.rg-cal-cell strong { display: block; font-size: 10px; color: #28342d; margin-bottom: 3px; }
.rg-cal-cell div { display: grid; gap: 2px; }
.rg-cal-cell span, .rg-cal-cell em { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; padding: 2px 4px; background: #e7f2ec; color: #2e6a53; font-size: 8px; font-style: normal; line-height: 1.2; }
.rg-cal-cell em { background: #f1f4f1; color: #717b77; }
.rg-cal-cell.has { border-color: #b8d9ca; background: #fbfefd; }
.rg-cal-cell.weekend { background: #f7f8f7; }
.rg-cal-empty { background: transparent; border-color: transparent; }
.rg-calendar-matrix { margin-bottom: 12px; }
.rg-cal-m-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 7px; }
.rg-cal-m-head .rg-block-title { margin-bottom: 1px; }
.rg-cal-m-head small { color: #717b77; font-size: 9px; }
.rg-cal-m-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: #717b77; white-space: nowrap; }
.rg-cal-m-legend span { display: inline-flex; align-items: center; gap: 4px; }
.rg-cal-m-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.rg-cal-m-legend .sick::before { background: #c0504d; }
.rg-cal-m-legend .vacation::before { background: #2e6a53; }
.rg-cal-m-legend .other::before { background: #8d78b8; }
.rg-cal-m-days, .rg-cal-m-row { display: grid; grid-template-columns: 34mm minmax(0, 1fr); gap: 4px; align-items: stretch; }
.rg-cal-m-days { margin-bottom: 3px; font-size: 8px; color: #717b77; font-weight: 600; }
.rg-cal-m-days > strong { display: flex; align-items: end; padding: 0 4px 2px 0; font-size: 9px; color: #4a524d; }
.rg-cal-m-days > div, .rg-cal-m-row > div { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; }
.rg-cal-m-days span { min-width: 0; text-align: center; border-bottom: 0.5px solid #dfe5e0; padding-bottom: 2px; }
.rg-cal-m-days span.weekend { color: #a0aaa4; }
.rg-cal-m-days b, .rg-cal-m-days em { display: block; font-style: normal; line-height: 1.05; overflow: hidden; text-overflow: clip; }
.rg-cal-m-body { display: grid; gap: 2px; }
.rg-cal-m-row > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 600; color: #28342d; border-bottom: 0.5px solid #edf0ee; padding: 3px 4px 3px 0; }
.rg-cal-m-row > div > span { min-height: 14px; border-radius: 3px; background: #f4f6f4; border: 0.5px solid #eef1ef; color: transparent; text-align: center; font-size: 8px; line-height: 13px; font-weight: 700; overflow: hidden; }
.rg-cal-m-row > div > span.weekend { background: #f8f9f8; border-color: #f1f3f1; }
.rg-cal-m-row > div > span.mark { color: #fff; border-color: transparent; }
.rg-cal-m-row > div > span.krank { background: #c0504d; }
.rg-cal-m-row > div > span.urlaub { background: #2e6a53; }
.rg-cal-m-row > div > span.sonstige { background: #8d78b8; }
.rg-cal-m-empty { padding: 18px 0; text-align: center; color: #717b77; font-size: 11px; border: 1px dashed #dfe5e0; border-radius: 6px; }
.rg-page.landscape .rg-kpis { margin-bottom: 13px; }
.rg-page.landscape .rg-block { margin-bottom: 14px; }
.rg-page.landscape .rg-bars { height: 92px; gap: 11px; }
.rg-page.landscape .rg-table { font-size: 11px; }
.rg-page.landscape .rg-table-sm { font-size: 9px; }
.rg-page.landscape .rg-table tbody td { padding-top: 4px; padding-bottom: 4px; }
.rg-page.landscape .rg-block-wide .rg-table th:first-child,
.rg-page.landscape .rg-block-wide .rg-table td:first-child { width: 25mm; }
.rg-page.landscape .rg-cal-cell { min-height: 18mm; }
.rg-page.landscape .rg-cal-m-days, .rg-page.landscape .rg-cal-m-row { grid-template-columns: 38mm minmax(0, 1fr); }
.rg-page.landscape .rg-cal-m-row > div > span { min-height: 12px; line-height: 11px; }
.rg-empty { text-align: center; color: #717b77; padding: 70px 0; }
.rg-empty .ti { font-size: 34px; }
.rg-empty p { margin: 12px 0 2px; font-size: 14px; color: #6c7570; }
.rg-empty span { font-size: 12px; }

@media print {
  /* Größe/Ausrichtung wird beim Report-Druck per injiziertem @page (#report-print-page) gesetzt
     (Hoch-/Querformat). Hier nur der Rand. */
  @page { margin: 0; }
  /* Beim Druck hängen die Seiten direkt unter <body> (.rg-print-root). Alles andere ausblenden –
     per display:none (nimmt keinen Platz ein → kein Versatz), nicht per visibility. */
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.report-print, body.report-print * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body.report-print > *:not(.rg-print-root) { display: none !important; }
  /* WICHTIG: Block-Layout (kein Flex!) für den Druck-Container. Flex-Items fragmentieren in
     manchen Browsern nicht sauber → kumulativer Seiten-Versatz. Block + break-after:page ist exakt. */
  body.report-print .rg-print-root {
    display: block; gap: 0 !important;
    width: auto; margin: 0 !important; padding: 0 !important;
    transform: none !important; max-height: none !important; overflow: visible !important;
  }
  /* A4-Box bleibt exakt A4 (210×297 mm = 1:1) – jede Seite genau ein Blatt, ohne kumulativen Drift. */
  body.report-print .rg-page {
    width: var(--rg-print-page-width) !important;
    height: var(--rg-print-page-height) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0;
    margin: 0 !important;
    break-inside: avoid;
    break-after: page;
    page-break-after: always;
  }
  body.report-print .rg-page:last-child { break-after: auto; page-break-after: auto; }
}

/* ===== Mitarbeiterliste: Mehrfach-Sortierung ===== */
.esort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.esort-label { font-size: 12px; color: #6c7570; font-weight: 500; }
.esort-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef3ef; border: 0.5px solid #dde3df; border-radius: 999px; padding: 3px 5px 3px 4px; font-size: 12px; }
.esort-rank { width: 16px; height: 16px; border-radius: 50%; background: #2e6a53; color: #fff; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.esort-key { color: #27513c; font-weight: 500; padding: 0 3px; }
.esort-btn { border: none; background: #fff; border-radius: 6px; width: 20px; height: 20px; cursor: pointer; color: #4a524d; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.esort-btn:hover { background: #dde8e1; }
.esort-x:hover { background: #fbe6e6; color: #b3261e; }
.esort-hint { font-size: 11px; color: #717b77; margin-left: auto; }
.sort-header .sort-rank { font-size: 9px; color: #2e6a53; margin-left: 1px; vertical-align: super; }

/* ===== Urlaubsanspruch-Korrektur: Reset-Icon ===== */
.correction-field { position: relative; display: block; }
.correction-field input { width: 100%; padding-right: 36px; }
.correction-reset { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background: #f0f3f1; color: #6c7570; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.correction-reset:hover { background: #e7f2ec; color: #2e6a53; }

/* ===== MA-Modal: breit, Buttons im Header, 3 Spalten ===== */
/* Niedriger + scrollbar; Header (mit Buttons) bleibt beim Scrollen oben. */
.modal-employee { width: min(1040px, 96vw); max-height: min(88vh, 760px); display: flex; flex-direction: column; overflow: hidden; }
.modal-employee .modal-header { flex: none; }
.modal-employee .modal-body { overflow: auto; min-height: 0; flex: 1 1 auto; }
.modal-header-actions { display: flex; align-items: center; gap: 8px; }
@media (min-width: 860px) {
  .modal-employee .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modal-employee .employee-modal-fields { gap: 10px; }
  .modal-employee .form-section { padding: 10px 12px; gap: 9px; }
  .modal-employee .availability-time-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
  .modal-employee .availability-time-grid .availability-input { padding: 7px 8px; gap: 6px; }
  .modal-employee .form-footer { margin-top: 8px; }
}
/* Verfügungszeiten: Von-/Bis-Felder füllen die Kachel (keine fixe Breite → kein Abschneiden). */
.modal-employee .availability-times .time-field2 { flex: 1 1 0; min-width: 0; }
.modal-employee .availability-times .tf-input { width: 100%; min-width: 0; padding: 0 4px; font-size: 12px; letter-spacing: 0; }
/* ===== Abwesenheit: Art-Buttons (krank/Urlaub/sonstige) auf Höhe des 1. Mitarbeiters
   (inkl. AU-Upload-Feld über der Mitarbeitersuche). ===== */
@media (min-width: 760px) {
  .absence-entry-grid .absence-type-picker { margin-top: 138px; }
}

/* ===== Befristung: rote Bubble (kräftigeres Rot, roter Text). Neg. Rand nur in der Tabellenspalte (bündig). ===== */
.fixedterm-bubble { display: inline-block; background: #f6c9c9; color: #a3261f; border-radius: 999px; padding: 2px 8px; }
.col-fixedterm .fixedterm-bubble { margin: 0 -8px; }

/* ===== Optimale-Urlaubsstunden-Linie: Einblend-Animation (Reveal von links) ===== */
@keyframes vacOptimalDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.vacation-optimal-anim { animation: vacOptimalDraw 0.75s cubic-bezier(.2,1,.36,1) 0.1s both; }

/* #3 Austrittsfeld in der Liste: Rahmen/Hintergrund nur bei Zeilen-/Feld-Hover oder Fokus */
.employee-overview-table .dp-trigger { border-color: transparent; background: transparent; }
.employee-overview-table tr:hover .dp-trigger,
.employee-overview-table .dp-trigger:hover,
.employee-overview-table .dp-trigger:focus,
.employee-overview-table .dp-trigger:focus-within { border-color: var(--line); background: var(--surface); }

/* #9 Inline-SVG-Icons im Berichts-Generator (ersetzt die Tabler-Webfont – ein Icon-System) */
.rg-svg-icon { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.rg-ico .rg-svg-icon { width: 20px; height: 20px; vertical-align: 0; }
.rg-opt .rg-svg-icon { color: #6c7570; }
.rg-opt.on .rg-svg-icon { color: #2e6a53; }
.rg-caret { display: inline-flex; align-items: center; }
.correction-reset .rg-svg-icon { width: 15px; height: 15px; }

/* ============================================================
   Authentifizierung: Login / Erst-Einrichtung / Adminbereich
   ============================================================ */
.auth-host { position: fixed; inset: 0; z-index: 4000; opacity: 0; transition: opacity 280ms ease; }
.auth-host.auth-in { opacity: 1; }
.auth-screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
  background:
    radial-gradient(1200px 600px at 50% -10%, #f3ede0 0%, #efe9dd 38%, #e9e2d3 100%);
}
@media (prefers-color-scheme: dark) {
  .auth-screen { background: radial-gradient(1200px 600px at 50% -10%, #1c211f 0%, #161b1a 60%, #111514 100%); }
}
/* Hintergrundbild (Datei: assets/login-bg.png) – per Multiply über die Pergament-Farbe geblendet,
   damit die warme Farbe erhalten bleibt und nur die Zeichnung sichtbar wird. */
.auth-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: url("./assets/login-bg.png") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.62;
}
@media (prefers-color-scheme: dark) { .auth-bg { mix-blend-mode: screen; filter: invert(1); opacity: 0.32; } }
.dv-ink { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dvDraw 5.5s ease forwards; }
.dv-ink > * { animation: dvFloat 14s ease-in-out infinite alternate; }
@keyframes dvDraw { to { stroke-dashoffset: 0; } }
@keyframes dvFloat { from { transform: translateY(-4px); } to { transform: translateY(6px); } }

/* Karte */
.auth-card {
  position: relative; z-index: 1; width: min(420px, 100%);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 20px; padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(20, 31, 28, 0.18), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: none; opacity: 1;
  animation: authRise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms backwards;
}
@keyframes authRise { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-card-modal { width: min(400px, 100%); }
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-logo { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--accent); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent); }
.auth-logo svg { width: 28px; height: 28px; }
.auth-brand h1 { margin: 12px 0 2px; font-size: 21px; letter-spacing: -0.01em; }
.auth-brand p { margin: 0; color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 13px; }
.auth-field { display: grid; gap: 6px; }
.auth-field span { font-size: 12px; font-weight: 700; color: var(--muted); }
.auth-field input {
  height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--ink); font-size: 15px; transition: border-color 140ms ease, box-shadow 140ms ease;
}
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-hint { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.auth-error { background: #fae5e2; color: #a3261f; border-radius: 10px; padding: 9px 12px; font-size: 13px; font-weight: 600; }
.auth-error[hidden] { display: none; }
.auth-row { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.auth-row .auth-submit, .auth-row .auth-secondary { flex: 1 1 0; height: 44px; margin-top: 0; padding: 0; border-radius: 11px; font-size: 14px; font-weight: 700; box-sizing: border-box; }
.auth-row .auth-secondary { display: inline-flex; align-items: center; justify-content: center; }
.auth-submit {
  height: 46px; margin-top: 4px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  transition: filter 140ms ease, transform 120ms ease;
}
.auth-submit:hover { filter: brightness(1.06); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled, .auth-submit.is-busy { opacity: 0.65; cursor: progress; }
.auth-secondary { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; }
.auth-secondary:hover { border-color: var(--accent); }
.auth-danger { height: 40px; padding: 0 14px; border: 1px solid #e7c3bd; border-radius: 10px; background: #fbeeec; color: #a3261f; font-weight: 700; font-size: 13px; cursor: pointer; }
.auth-shake { animation: authShake 360ms ease; }
@keyframes authShake { 10%,90% { transform: translateX(-2px); } 30%,70% { transform: translateX(4px); } 50% { transform: translateX(-6px); } }
.auth-modal-screen { background: rgba(18, 24, 22, 0.55); backdrop-filter: blur(3px); }
.auth-modal-screen .auth-card { box-shadow: 0 30px 70px rgba(0,0,0,0.3); }
/* Inaktivitäts-Abmeldefenster: „Erneut anmelden"-Button mittig (Button steht sonst links, da kein Formular-Grid). */
.auth-card-modal { text-align: center; }
.auth-card-modal .auth-submit { display: inline-block; padding: 0 28px; }
.auth-card-modal .auth-relogin-submit { height: 38px; border-radius: 10px; font-size: 14px; }

/* Benutzer-Leiste in der Topbar: nur Avatar-Logo + Dropdown */
.userbar { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
.userbar-ava-btn { display: inline-flex; padding: 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; line-height: 0; }
.userbar-ava-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.userbar-ava { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); transition: filter 140ms ease, transform 120ms ease; }
.userbar-ava-btn:hover .userbar-ava { filter: brightness(1.07); transform: translateY(-1px); }
.userbar-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 210px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 7px;
  box-shadow: 0 16px 38px rgba(20, 31, 28, 0.18); display: grid; gap: 2px;
  transform-origin: top right; animation: userMenuIn 150ms ease; }
.userbar-menu[hidden] { display: none; }
@keyframes userMenuIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.userbar-menu-head { padding: 6px 10px 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbar-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.userbar-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.userbar-menu-item svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.userbar-menu-sec { padding: 8px 10px 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.userbar-menu-divider { height: 1px; margin: 5px 4px; background: var(--line); }
.userbar-menu-item.is-active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); color: var(--accent); }
.userbar-menu-item .uvi-ava { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); font-size: 11px; font-weight: 800; flex: none; stroke: none; }
.userbar-menu-item .uvi-check { margin-left: auto; width: 16px; height: 16px; color: var(--accent); }
.userbar-viewbadge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.userbar.is-viewing .userbar-ava { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-2); }

/* Adminbereich */
.auth-admin-screen { background: rgba(18, 24, 22, 0.5); backdrop-filter: blur(3px); align-items: flex-start; }
.admin-panel { position: relative; z-index: 1; width: min(760px, 100%); margin: 32px auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.28); overflow: hidden;
  transform: translateY(14px); opacity: 0; animation: authRise 460ms cubic-bezier(0.2,0.7,0.2,1) 60ms forwards; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.admin-head h1 { margin: 0 0 3px; font-size: 19px; }
.admin-head p { margin: 0; color: var(--muted); font-size: 13px; }
.admin-body { padding: 18px 22px 24px; display: grid; gap: 14px; max-height: calc(100vh - 160px); overflow: auto; }
.admin-loading { color: var(--muted); }
.admin-user { border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; display: grid; gap: 11px; background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface)); }
.admin-user-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-user-id { display: flex; align-items: center; gap: 10px; }
.admin-user-id strong { font-size: 15px; }
.admin-user-id small { display: block; color: var(--muted); font-size: 12px; }
.admin-user-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.admin-note { margin: 0; color: var(--muted); font-size: 12px; }
.admin-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 12px; }
.admin-tab { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.admin-tab input { width: 16px; height: 16px; accent-color: var(--accent); }
.admin-row-foot { display: flex; align-items: center; gap: 10px; }
.admin-saved { color: var(--accent); font-size: 12px; font-weight: 700; }
.admin-saved[hidden] { display: none; }
.admin-create { border-top: 1px dashed var(--line); padding-top: 16px; margin-top: 2px; }
.admin-create h2 { margin: 0 0 11px; font-size: 15px; }
.admin-create-form { display: grid; gap: 12px; }
.admin-create-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-create-top label { display: grid; gap: 5px; }
.admin-create-top span { font-size: 12px; font-weight: 700; color: var(--muted); }
.admin-create-top input { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 14px; }
@media (max-width: 560px) { .admin-create-top { grid-template-columns: 1fr; } .admin-user-head { align-items: flex-start; } }

/* Mobil: Avatar steht links (Topbar gestapelt) → Dropdown links verankern, nicht rechts. */
@media (max-width: 1040px) {
  .userbar-menu { left: 0; right: auto; }
}

/* Hinweisseite: Benutzer ohne freigeschaltete Reiter */
.no-access { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.no-access-card {
  max-width: 460px; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 36px 30px;
  box-shadow: 0 16px 40px rgba(20, 31, 28, 0.07);
}
.no-access-ico {
  display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center;
  border-radius: 18px; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px;
}
.no-access-ico svg { width: 32px; height: 32px; }
.no-access-card h1 { margin: 0 0 10px; font-size: 22px; }
.no-access-card p { margin: 0 0 8px; color: var(--ink); font-size: 15px; line-height: 1.6; }
.no-access-sub { color: var(--muted) !important; font-size: 13.5px !important; }

/* „Passwort anzeigen"-Auge in Passwortfeldern (Login/Setup/Modals) */
.auth-pw-wrap { position: relative; display: block; }
.auth-pw-wrap input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.auth-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.auth-pw-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.auth-pw-toggle svg { width: 19px; height: 19px; }

/* === Dark-Mode-Nachzügler: Flächen/Text, die hartcodiert hell waren und keinen Dark-Override hatten.
   Nur im Dark-Modus aktiv – das Light-Design bleibt unverändert. === */
@media (prefers-color-scheme: dark) {
  /* Hero-Karten (Seitenkopf) */
  .view-hero, .fehlzeiten-hero { background: linear-gradient(135deg, var(--surface), var(--surface-soft)); }
  .view-hero-current, .forecast-hero-card { background: var(--surface); }

  /* Forecast-Bereich (hatte keinen Dark-Override) */
  .forecast-month-control,
  .forecast-day-row,
  .forecast-role-row,
  .forecast-contribution { background: var(--surface); }
  .forecast-heat-cell,
  .forecast-heat-cell.heat-0 { background: var(--surface-soft); }

  /* Einzelne App-Flächen */
  .period-switch { background: var(--surface-soft); }
  .weekday-pill { background: var(--surface-soft); }
  .availability-input { background: var(--surface); }
  .employee-modal-avatar { background: var(--surface-soft); }
  .form-section { background: var(--surface-soft); }
  .empty-state.compact { background: var(--surface-soft); }
  .au-drop { background: var(--surface-soft); }

  /* Berichte-Generator – Bedienoberfläche (das Druck-„Papier" bleibt bewusst hell) */
  .rg-config { background: var(--surface); border-color: var(--line); }
  .rg-report-select,
  .rg-combo,
  .rg-btn { background: var(--surface); border-color: var(--line); color: var(--ink); }
  .rg-dropdown { background: var(--surface); border-color: var(--line); }
  .rg-opt { color: var(--ink); }
  .rg-opt.on { background: var(--accent-soft); }
  .rg-preview { background: var(--surface-soft); }
  .rg-ico { background: var(--accent-soft); color: var(--accent); }
  .rg-sub, .rg-lbl { color: var(--muted); }

  /* Auth-Panels (helle Rot-Flächen) */
  .auth-error { background: rgba(224, 111, 99, 0.16); color: var(--bad); }
  .auth-danger { background: rgba(224, 111, 99, 0.12); border-color: rgba(224, 111, 99, 0.35); color: var(--bad); }

  /* Listen-Karten: Basis war hart #fbfcfa → dunkle Fläche; gleiche Akzent-Formeln, nur var(--surface) als helle Komponente.
     Betrifft Dashboard Top-10, Höchste Ausfallwahrscheinlichkeit, Auffällige Planungstage, größte Beiträge usw. */
  .row-item { background: var(--surface-soft); }
  .row-item[data-employee-detail],
  .dashboard-detail-person { background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
  [data-employee-detail]:hover,
  .row-item[data-employee-detail]:hover,
  .dashboard-detail-person:hover { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }

  /* Sortier-Reihenfolge-Bubble (1, 2 …) auf der Mitarbeiterliste */
  .esort-rank { background: var(--accent); }

  /* Vertrags-Ablauf-Kasten (war hellgelb) */
  .contract-expiry-section { background: rgba(217, 151, 36, 0.12); border-color: rgba(217, 151, 36, 0.5); }

  /* Prognose-Überschriftkasten (eigene Klasse) + Tageskarten aktiv/hover (mischten hartes #fbfcfb) */
  .forecast-hero { background: linear-gradient(135deg, var(--surface), var(--surface-soft)); }
  .forecast-day-row.active { background: color-mix(in srgb, var(--accent-soft) 54%, var(--surface)); }
  .forecast-day-row:hover { background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface)); }
  .forecast-role-row { background: var(--surface-soft); }
  .forecast-contribution:hover { background: var(--surface-soft); }

  /* Prognose-Grafik: helles Hilfsgitter + heller Hervorhebungs-Kasten des aktuellen Monats */
  .forecast-month-grid.faint { stroke: var(--line); }
  .forecast-month-current-bg { fill: rgba(67, 182, 157, 0.12); stroke: var(--accent); }

  /* Prognose-Heatmap: helle Pastell-Intensitäten → dunkle Tönungen (heller Text bleibt lesbar) */
  .forecast-heat-cell.heat-1 { background: rgba(67, 182, 157, 0.12); border-color: rgba(67, 182, 157, 0.28); }
  .forecast-heat-cell.heat-2 { background: rgba(67, 182, 157, 0.24); border-color: rgba(67, 182, 157, 0.45); }
  .forecast-heat-cell.heat-3 { background: rgba(216, 164, 65, 0.20); border-color: rgba(216, 164, 65, 0.42); }
  .forecast-heat-cell.heat-4 { background: rgba(224, 140, 60, 0.30); border-color: rgba(224, 140, 60, 0.55); }
  .forecast-heat-cell.heat-5 { background: rgba(224, 111, 99, 0.55); border-color: rgba(224, 111, 99, 0.75); }

  /* Dashboard Button-Kacheln (Layout-Umschalter): transparent, Hover = Surface */
  .dashboard-card-toggle { background: transparent; }

  /* Mitarbeiter-Sortier-Chips (Austritt/Name) – waren komplett hell */
  .esort-label, .esort-hint { color: var(--muted); }
  .esort-chip { background: var(--surface-soft); border-color: var(--line); }
  .esort-key { color: var(--accent); }
  .esort-btn { background: var(--surface); color: var(--ink); }
  .esort-btn:hover { background: var(--accent-soft); }
  .esort-x:hover { background: rgba(224, 111, 99, 0.18); color: var(--bad); }

  /* Prognose-Heatmap: helle „Puffer"-Bubble behält dunklen Text (sonst hell auf hell) */
  .forecast-cell-buffer { color: #18211f; }

  /* „Größte Beiträge"-Karten exakt wie die Dashboard-Top-10-Karten (akzentgetönt + Akzent-Balken) */
  .forecast-contribution {
    background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 58%, transparent);
  }
  .forecast-contribution:hover {
    background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    box-shadow: inset 4px 0 0 var(--accent), 0 10px 22px rgba(0, 0, 0, 0.35);
  }

  /* Kachel-Icon-Bubbles: hartcodierte helle Pastelltöne → dunkle Tönungen derselben Farbe (einheitlich, dunkel-tauglich) */
  .forecast-icon.calendar,
  .forecast-icon.clock,
  .forecast-icon.calendarDays { background: color-mix(in srgb, var(--accent-4) 20%, var(--surface)); color: var(--accent-4); }
  .forecast-icon.alert,
  .forecast-icon.high { background: color-mix(in srgb, var(--bad) 20%, var(--surface)); }
  .forecast-icon.plus,
  .forecast-icon.medium { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); }
  .forecast-icon.heat,
  .forecast-icon.low { background: color-mix(in srgb, var(--good) 20%, var(--surface)); }
  .forecast-icon.vacprog,
  .forecast-icon.vacation { background: color-mix(in srgb, var(--good) 20%, var(--surface)); color: var(--good); }
  .forecast-icon.pulse,
  .forecast-icon.target,
  .forecast-icon.gauge { background: color-mix(in srgb, #7250b6 26%, var(--surface)); color: #b9a3e6; }

  /* Fehlzeiten-KPI-Icon-Bubbles (waren helle Pastelltöne) */
  .fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(1) .bkpi-ic { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--good); }
  .fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(2) .bkpi-ic { background: color-mix(in srgb, var(--accent-4) 18%, var(--surface)); color: var(--accent-4); }
  .fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(3) .bkpi-ic { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); }
  .fehlzeiten-section .bkpi-grid .fz-kpi:nth-child(4) .bkpi-ic { background: color-mix(in srgb, var(--bad) 18%, var(--surface)); color: var(--bad); }
}

/* === Berichte-Vorschau-Blätter im Dark-Mode dunkel — NUR am Bildschirm.
   Bewusst `screen`, damit der Ausdruck/PDF (über @media print) weiterhin weißes Papier nutzt. === */
@media screen and (prefers-color-scheme: dark) {
  .rg-page { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4); }
  .rg-page-head { background: linear-gradient(135deg, var(--surface-soft) 0%, var(--surface) 70%); box-shadow: inset 0 -1px 0 var(--line); }
  .rg-page-title { color: var(--ink); }
  .rg-page-sub, .rg-page-desc, .rg-page-brand, .rg-cal-weekdays { color: var(--muted); }
  .rg-page-foot { color: var(--muted); border-top-color: var(--line); }
  .rg-kpi { background: var(--surface-soft); border-color: var(--line); }
  .rg-kpi-l { color: var(--muted); }
  .rg-kpi-v { color: var(--accent); }
  .rg-block-title { color: var(--ink); }
  .rg-table thead th { color: var(--muted); border-bottom-color: var(--line); }
  .rg-table tbody td { color: var(--muted); border-bottom-color: var(--line); }
  .rg-table tbody td.rg-name { color: var(--ink); }
  .rg-cal-cell { background: var(--surface-soft); border-color: var(--line); }
  .rg-cal-cell strong { color: var(--ink); }
  .rg-cal-cell span, .rg-cal-cell em { background: var(--accent-soft); color: var(--accent); }
}