:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1f2933;
  --muted: #586273;        /* WCAG 1.4.3: dunkler für ≥4.5:1 auf Karten/Badges */
  --line: #e2e5ea;
  --accent: #1f4e79;
  --accent-dark: #163a5a;
  --frei: #cdebd2;
  --frei-ink: #1d6b34;
  --voll: #fbe7b3;
  --voll-ink: #8a6100;
  --ueber: #f3bcbc;
  --ueber-ink: #9b2222;
  --inaktiv: #eceef1;
  /* Fokus-Indikator (WCAG 2.4.7) – einheitlich, kontraststark. */
  --focus-ring: #ffb000;
  --focus-ring-dark: #1f4e79;
  --abstand: 8px;
}

* { box-sizing: border-box; }

/* hidden-Attribut zuverlässig durchsetzen (auch bei inline-block-Elementen). */
[hidden] { display: none !important; }

/* ---- Barrierefreiheit: nur für Screenreader sichtbar ---- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- Sichtbarer Fokus-Indikator (WCAG 2.4.7 Focus Visible) ---- */
:focus-visible {
  outline: 3px solid var(--focus-ring-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Auf dunklen Flächen (Topbar/Akzent) heller Ring. */
.topbar :focus-visible,
table.matrix tr.gruppe :focus-visible,
.sim-banner :focus-visible,
.btn:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Skip-Link (WCAG 2.4.1 Bypass Blocks) ---- */
.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: #fff; color: var(--accent);
  padding: 8px 14px; border-radius: 0 0 6px 6px;
  font-weight: 600; z-index: 200;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--accent); }

/* ---- Topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 0 16px;
  height: 56px;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
.topbar .brand-icon {
  height: 38px;
  width: auto;
  display: block;
}

/* Logo auf Login-Seite */
.login-logo {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 8px auto;
}

/* Modal-Dialoge (Abwesenheit bearbeiten, ggf. später wiederverwendbar) */
dialog.abw-modal {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px 24px;
  min-width: 360px;
  max-width: 540px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
}
dialog.abw-modal::backdrop {
  background: rgba(0,0,0,.45);
}

/* Visualisiert eine Zelle, die durch Auto-Save gerade abgesendet wird. */
.zelle-dirty {
  background: #fff3c2 !important;
}

/* Engpass-Karten auf /management */
.engpass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin: 12px 0 24px 0;
}
.engpass-karte {
  background: #fff7e8;
  border: 1px solid #e0c272;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.engpass-karte.dringend {
  background: #fde2e1;
  border-color: #e8a8a6;
}
.engpass-team {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.engpass-zeile {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  margin: 2px 0;
}
.engpass-label {
  color: var(--muted);
  min-width: 14em;
}
.engpass-datum {
  color: var(--muted);
  font-size: 12px;
}
.engpass-frist {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d8c596;
}

/* Erklärtext unter Komponente in den Berechnungs-Breakdown-Tabellen */
.komponente-erklaerung {
  font-size: 11px;
  color: var(--muted);
  font-weight: normal;
  margin-top: 2px;
  max-width: 460px;
  line-height: 1.4;
}

/* PSP-Element-Tag (Buchungskonto) */
.psp-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: #eef2f7;
  color: #2a4a72;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: help;
}
.topbar nav { display: flex; align-items: center; gap: 7px; }
.topbar nav a {
  color: #d6e2ee;
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 12px;
  white-space: nowrap;
}
.topbar nav a:hover { background: var(--accent-dark); color: #fff; }
.topbar nav a.aktiv { background: #fff; color: var(--accent); }
/* Gruppierte Hauptnavigation: vier gerahmte Blöcke mit Gruppen-Label. */
.nav-gruppe {
  display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 2px 5px 3px;
}
.nav-gruppe-titel {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6); line-height: 1.2;
  padding: 0 3px; user-select: none; white-space: nowrap;
}
.nav-gruppe-links { display: flex; gap: 1px; }
/* „Leitungssicht": eigenständiger, hervorgehobener Nav-Punkt (keine Gruppe).
   Gefülltes Bernstein-Pill hebt sich klar vom blauen Topbar-Hintergrund ab. */
.topbar nav a.nav-leitung {
  background: var(--focus-ring);      /* #ffb000 */
  color: var(--ink);
  font-weight: 700;
  border: 1px solid #d99500;
  border-radius: 6px;
  padding: 7px 12px;
}
.topbar nav a.nav-leitung:hover { background: #ffc233; color: var(--ink); }
.topbar nav a.nav-leitung.aktiv {
  background: #fff; color: var(--accent); border-color: #fff;
}
.topbar-rechts {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap; white-space: nowrap;
}
/* Aktive Rolle als dezentes Pill-Badge in der Topbar. */
.rollen-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.rollen-badge.simuliert {
  background: rgba(217, 119, 6, 0.85); border-color: #d97706; color: #fff;
}
.meldung-link {
  color: #fff; text-decoration: none; padding: 5px 12px; border-radius: 5px;
  border: 1px solid #d6e2ee; font-weight: 600;
}
.meldung-link:hover { background: var(--accent-dark); }
.meldung-link.aktiv { background: #fff; color: var(--accent); border-color: #fff; }
/* Sichtbare Text-Labels neben den Header-Icons (Issue #20). */
.meldung-link-text { font-size: 0.92em; }
.user-menu-hint { font-size: 0.82em; font-weight: 500; opacity: 0.8; }

.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
/* Eigenes ▾-Zeichen (bewusst gesetzt, da der native Marker oben ausgeblendet ist);
   dreht sich beim Öffnen. inline-block, damit transform greift. */
.user-menu > summary span[aria-hidden] { display: inline-block; transition: transform 0.15s ease; }
.user-menu[open] > summary span[aria-hidden] { transform: rotate(180deg); }
.user-menu-popup {
  position: absolute; right: 0; top: 38px; z-index: 50;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px; min-width: 220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  display: flex; flex-direction: column; gap: 8px;
}
.user-menu-popup a {
  color: var(--accent); text-decoration: none;
  padding: 4px 0;
}
.user-menu-popup a:hover { text-decoration: underline; }
.user-menu-info { font-size: 13px; color: var(--muted); }
.menu-trenner {
  border: none; border-top: 1px solid var(--rand, #ddd); margin: 4px 0;
}
/* Dezenter Vortext zur Rollen-Badge in der Topbar. */
.rolle-label {
  font-size: 11px; color: rgba(255, 255, 255, 0.7);
  align-self: center; white-space: nowrap;
}

main {
  padding: 20px clamp(16px, 2vw, 32px);
  /* Lesefreundlich auf 2K/4K – Inhalte laufen nicht unbegrenzt breit.
     Breite Spezial-Tabellen (heatmap/raster/matrix/fte) scrollen via eigene
     Rahmen mit overflow-x:auto und sind davon nicht betroffen. */
  max-width: 1700px;
  margin: 0 auto;
}

/* ---- Überschriften / allgemein ---- */
h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 24px 0 10px; }
.untertitel { color: var(--muted); margin: 0 0 18px; }
.kopfzeile {
  display: flex; justify-content: space-between;
  align-items: flex-start; flex-wrap: wrap; gap: 12px;
}

/* ---- Karten ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.kacheln { display: flex; gap: 14px; flex-wrap: wrap; }
.kachel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px 20px; min-width: 150px; flex: 1;
}
.kachel .zahl { font-size: 28px; font-weight: 700; color: var(--accent); }
.kachel .label { color: var(--muted); }

/* Zwei gleich breite Spalten (Veranstaltungen: Vorschlag | Anlegen). */
.veranstaltung-spalten { align-items: stretch; }
.veranstaltung-spalten > .kachel { flex: 1 1 420px; min-width: 380px; }
/* Vorschlags-Tabelle darf schmaler Spalte nicht sprengen. */
.tabelle-scroll { overflow-x: auto; }

/* ---- Buttons ---- */
.btn, button {
  font: inherit; cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  padding: 7px 14px; border-radius: 5px; text-decoration: none;
  display: inline-block;
}
.btn:hover, button:hover { background: var(--accent-dark); }
.btn.sekundaer {
  background: #fff; color: var(--accent);
}
.btn.sekundaer:hover { background: #eef2f6; }
.btn.gefahr, button.gefahr {
  background: #fff; color: var(--ueber-ink); border-color: #d8a0a0;
}
.btn.gefahr:hover, button.gefahr:hover { background: #f8e9e9; }
.btn.klein, button.klein { padding: 4px 9px; font-size: 13px; min-height: 24px; }
.btn-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* WCAG 2.5.8 Target Size: interaktive Mindesthöhe für kleine Buttons/Links. */
.btn, button { min-height: 24px; }

/* ---- Tabellen ---- */
table { border-collapse: collapse; width: 100%; background: var(--card); }
.card table { background: transparent; }
th, td {
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
th { background: #eef1f4; font-weight: 600; }
tbody tr:hover { background: #f8f9fb; }
.tabelle-rahmen {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}

/* ---- Formulare ---- */
form .feld { margin-bottom: 14px; }
form label { display: block; font-weight: 600; margin-bottom: 4px; }
/* Hinweis-Text unter einem Form-Feld immer als eigene Zeile darstellen
   (nicht inline neben dem Input fließen). */
form .feld > small,
form .feld > small.untertitel {
  display: block; margin-top: 4px;
}
input[type=file] { font: inherit; }
input[type=text], input[type=number], input[type=date], select, textarea {
  font: inherit; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 5px;
  width: 100%; max-width: 420px; background: #fff;
}
textarea { max-width: 100%; min-height: 60px; }
.feld-gruppe { display: flex; gap: 12px; flex-wrap: wrap; }
.feld-gruppe .feld { flex: 1; min-width: 90px; }
.hinweis { color: var(--muted); font-size: 13px; margin-top: 3px; }
fieldset {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 16px; margin: 0 0 14px;
}
fieldset legend { font-weight: 600; padding: 0 6px; }

/* ---- Filterleiste ---- */
.filter {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.filter .feld { margin: 0; }
.filter select { width: auto; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 600; background: var(--inaktiv);
  color: var(--muted);
}
.badge.aktiv { background: var(--frei); color: var(--frei-ink); }
.badge.geplant { background: var(--voll); color: var(--voll-ink); }
.badge.warnung { background: var(--ueber); color: var(--ueber-ink); }
.badge.extern { background: #d9e4f2; color: #2a4a72; }
/* CAPA-Aggregat (Projekt-/Vertragszeile): dezent, neutral, kein Alarmton. */
.badge.capa-badge {
  background: #eef1f4; color: var(--muted);
  border: 1px solid var(--line); font-weight: 500; font-size: 11px;
}

/* Rollen-Badges in der Mitarbeiter-Liste: kompakter, monospaced kuerzel */
.rolle-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--accent);
  color: #fff;
  vertical-align: middle;
  cursor: help;
}
.rolle-badge small {
  font-weight: 500;
  opacity: 0.85;
  margin-left: 2px;
}
.rolle-badge.vertretung {
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--accent);
  padding: 0 5px;
}

/* Schneller CSS-Tooltip auf data-tip (statt browser-title mit 700-4000ms delay). */
.rolle-badge[data-tip] { position: relative; }
.rolle-badge[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  /* Tooltip UNTER der Pille — oben wird er in Tabellen-Headern oft abgeschnitten. */
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #2a3340;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  /* Sehr kurzes delay damit kein flicker bei mouseover */
  animation: tip-in 80ms ease-out;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-2px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.check-zeile {
  display: flex; align-items: center; gap: 8px;
  font-weight: normal; margin-bottom: 0;
}
.check-zeile input[type=checkbox] { width: 16px; height: 16px; }

/* Aktuelle Kalenderwoche hervorheben (Heatmap und Planungsraster) */
table.heatmap th.aktuelle-kw, table.heatmap td.aktuelle-kw,
table.raster th.aktuelle-kw, table.raster td.aktuelle-kw {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Quartal-Header-Zeile (Q1–Q4) über den KW-Spalten */
table.heatmap tr.quartal-zeile th,
table.raster tr.quartal-zeile th {
  font-size: 11px; font-weight: 700; text-align: center;
  padding: 3px 0; border-bottom: 2px solid var(--accent);
}
table.heatmap tr.quartal-zeile th.quartal-corner,
table.raster tr.quartal-zeile th.quartal-corner,
table.heatmap tr.quartal-zeile th.quartal-end,
table.raster tr.quartal-zeile th.quartal-end {
  background: var(--card); border-bottom: 2px solid var(--line);
}
table.heatmap tr.quartal-zeile th.quartal-corner,
table.raster tr.quartal-zeile th.quartal-corner {
  position: sticky; left: 0; z-index: 4;
}
.quartal-q1 { background: #d8e7f5; color: #1d3a5c; }
.quartal-q2 { background: #d6eecf; color: #1d6b34; }
.quartal-q3 { background: #f7e8b4; color: #8a6100; }
.quartal-q4 { background: #f1cbd1; color: #8a2330; }
/* Header-Zeile darunter braucht extra top-position, weil zwei Reihen sticky werden. */
table.heatmap tr.quartal-zeile th { position: sticky; top: 0; z-index: 4; }
table.heatmap thead tr:nth-child(2) th { top: 24px; }
table.raster tr.quartal-zeile th { position: sticky; top: 0; z-index: 4; }
table.raster thead tr:nth-child(2) th { top: 24px; }
.kw-eintritt { color: var(--frei-ink); font-weight: 700; margin-left: 2px; cursor: help; }
.kw-austritt { color: var(--ueber-ink); font-weight: 700; margin-left: 2px; cursor: help; }
.vormals {
  color: #2a4a72; font-size: 12px; background: #e3ecf5;
  padding: 1px 8px; border-radius: 8px; margin-left: 6px;
}

/* ---- Hilfe / Online-Dokumentation ---- */
.hilfe-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
.hilfe-sidebar {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px; position: sticky; top: 16px;
}
.hilfe-sidebar h2 { font-size: 14px; margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.hilfe-sidebar h3 { font-size: 13px; margin: 18px 0 6px; color: var(--muted); }
.hilfe-sidebar nav ol { margin: 0; padding-left: 18px; }
.hilfe-sidebar nav li { margin: 4px 0; }
.hilfe-sidebar nav a { color: var(--ink); text-decoration: none; display: block; padding: 3px 6px; border-radius: 4px; }
.hilfe-sidebar nav a:hover { background: #eef1f4; }
.hilfe-sidebar nav a.aktiv { background: var(--accent); color: #fff; }
.hilfe-toc ul { padding-left: 16px; margin: 0; font-size: 13px; }
.hilfe-toc a { color: var(--accent); text-decoration: none; }
.hilfe-toc a:hover { text-decoration: underline; }

.hilfe-inhalt {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 24px 32px; max-width: 920px;
  line-height: 1.6;
}
.hilfe-inhalt h1 { font-size: 26px; margin: 0 0 12px; }
.hilfe-inhalt h2 { font-size: 20px; margin: 28px 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.hilfe-inhalt h3 { font-size: 16px; margin: 22px 0 8px; }
.hilfe-inhalt p { margin: 8px 0 14px; }
.hilfe-inhalt ul, .hilfe-inhalt ol { padding-left: 22px; }
.hilfe-inhalt li { margin: 4px 0; }
.hilfe-inhalt code {
  background: #eef1f4; padding: 1px 6px; border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
}
.hilfe-inhalt pre {
  background: #f5f6f8; border: 1px solid var(--line);
  border-radius: 6px; padding: 12px 14px; overflow-x: auto;
}
.hilfe-inhalt pre code { background: transparent; padding: 0; }
.hilfe-inhalt blockquote {
  margin: 12px 0; padding: 10px 16px; background: #f0f4f9;
  border-left: 3px solid var(--accent); border-radius: 4px;
}
.hilfe-inhalt table { margin: 12px 0; border-collapse: collapse; }
.hilfe-inhalt table th, .hilfe-inhalt table td {
  border: 1px solid var(--line); padding: 6px 12px; text-align: left;
}
.hilfe-inhalt table th { background: #eef1f4; }
.hilfe-inhalt a { color: var(--accent); }
.hilfe-inhalt .toc { display: none; }   /* Inhaltsverzeichnis zeigt die Sidebar */
.hilfe-inhalt h2[id]::before,
.hilfe-inhalt h3[id]::before {
  content: ""; display: block; height: 60px; margin-top: -60px; visibility: hidden;
}

@media (max-width: 900px) {
  .hilfe-layout { grid-template-columns: 1fr; }
  .hilfe-sidebar { position: static; }
}
table.heatmap tr.admin-row td { background: #f3f0e6; font-style: italic; }
table.heatmap tr.admin-row td.name-spalte { background: #ede8d6; }

/* ---- Projektbaum ---- */
.baum-vertrag { margin-bottom: 14px; }
.baum-vertrag > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
}
.baum-vertrag[open] > summary { border-radius: 8px 8px 0 0; }
.baum-inhalt {
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 8px 8px; padding: 8px 16px 14px;
  background: var(--card);
}
.baum-projekt { margin: 10px 0 4px; }
.baum-projekt > summary {
  cursor: pointer; font-weight: 600; padding: 6px 8px;
  background: #eef1f4; border-radius: 5px;
  display: flex; align-items: center; gap: 8px;
}
/* Aufklapp-Affordanz (Issue #27): `display:flex` auf <summary> entfernt das native
   Disclosure-Dreieck. Daher ein eigenes Chevron, das den Auf-/Zu-Zustand zeigt und
   sich beim Öffnen dreht (gleiches Muster wie .lead-warnungen). */
.baum-vertrag > summary::before,
.baum-projekt > summary::before {
  content: "▶"; font-size: 0.8em; color: var(--muted); flex-shrink: 0;
  display: inline-block; transition: transform 0.15s ease;
}
.baum-vertrag[open] > summary::before,
.baum-projekt[open] > summary::before { transform: rotate(90deg); }
.baum-vertrag > summary:hover, .baum-projekt > summary:hover { background: #e6ebf1; }
.baum-ap-liste { margin: 6px 0 6px 18px; }
.baum-ap {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.baum-ap:last-child { border-bottom: none; }
/* Name nimmt den freien Raum, schrumpft bei Bedarf und kürzt mit Ellipsis. */
.baum-ap .ap-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.baum-ap .ap-name a { overflow: hidden; text-overflow: ellipsis; }
.laufzeit { color: var(--muted); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.spacer { flex: 1; }
/* Aktions-Buttons der AP-Zeile als rechtsbündige, zusammenhängende Gruppe. */
.ap-aktionen { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }

/* Vertrags-/Projekt-Aktionen als zusammenhängende Button-Gruppe direkt unter der
   Titelzeile (Sibling NACH <summary>, ein Klick darauf toggelt das <details> NICHT).
   In-Flow + flex-wrap: bei schmaler Breite (z.B. iPad Pro 11" quer, 1194px) und
   langen Namen/vielen Buttons bricht die Gruppe INNERHALB des Containers auf eine
   zweite Zeile um, statt rechts herauszulaufen (Issue #26). */
.baum-aktionen {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.baum-vertrag > .baum-aktionen {
  padding: 10px 16px 12px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  background: var(--card);
}
.baum-projekt > .baum-aktionen { padding: 6px 8px; }
.baum-aktionen form { margin: 0; }
.baum-aktionen .spacer { display: none; }

/* ---- Auslastungs-Heatmap ---- */
.heatmap-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.heatmap { width: auto; min-width: 100%; font-size: 12px; }
table.heatmap th, table.heatmap td {
  padding: 3px 4px; text-align: center; border: 1px solid var(--line);
  white-space: nowrap;
}
table.heatmap th.name-spalte, table.heatmap td.name-spalte {
  text-align: left; position: sticky; left: 0; z-index: 2;
  background: #eef1f4; min-width: 160px;
}
table.heatmap td.name-spalte { background: var(--card); font-weight: 600; }
table.heatmap thead th { position: sticky; top: 0; z-index: 1; }
table.heatmap thead th.name-spalte { z-index: 3; }
.zelle-leer { background: #fff; color: #c2c8d0; }
.zelle-frei { background: var(--frei); color: var(--frei-ink); }
.zelle-voll { background: var(--voll); color: var(--voll-ink); }
.zelle-ueber { background: var(--ueber); color: var(--ueber-ink); font-weight: 700; }
.zelle-inaktiv { background: var(--inaktiv); color: #b3b9c0; }
.summe-spalte { background: #eef1f4; font-weight: 700; }

/* Zeilenkopf-Zellen (th scope=row) in Sticky-Tabellen wie die früheren <td>
   darstellen (weiße Kartenfarbe statt Standard-th-Grau). WCAG 1.3.1. */
table.heatmap tbody th.name-spalte,
table.raster tbody th.name-spalte { background: var(--card); font-weight: 600; text-align: left; }
table.kalender tbody th.ma-spalte { background: var(--card); font-weight: 600; text-align: left; }
table.fte-tabelle tbody th.ap-spalte { background: var(--card); font-weight: 600; text-align: left; }

/* ---- Planungsraster ---- */
.raster-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.raster { width: auto; min-width: 100%; font-size: 12px; }
table.raster th, table.raster td {
  padding: 3px 4px; text-align: center; border: 1px solid var(--line);
}
table.raster th.name-spalte, table.raster td.name-spalte {
  text-align: left; position: sticky; left: 0; background: #eef1f4;
  min-width: 205px; max-width: 205px; z-index: 1;
}
table.raster td.name-spalte { background: var(--card); }
/* Name (+Team) und ✕-Entfernen immer einzeilig: Name schrumpft mit Ellipsis. */
.ma-namenszelle { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ma-namenszelle .ma-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.raster input {
  width: 46px; padding: 3px 2px; text-align: center; border-radius: 3px;
  border: 1px solid var(--line);
}
table.raster th.ausserhalb { background: #f3bcbc; color: var(--ueber-ink); }
table.raster td.ausserhalb { background: #faf0f0; position: relative; }
table.raster td.ausserhalb input { background: #f3d4d4; }
table.raster td.abwesend { background: #fdf6d2; position: relative; }
table.raster td.abwesend input { background: #f7eaa0; color: #6b5a14; }
/* Lock-Icon im raster (AP-Detail). */
table.raster td.ausserhalb::before,
table.raster td.abwesend::before {
  content: "🔒"; font-size: 9px; position: absolute; top: 0; right: 2px;
  opacity: 0.65; pointer-events: none;
}

/* Editierbare Zellen innerhalb der Mitarbeiter-Heatmap */
table.heatmap td.kw-input-zelle { padding: 1px; }
table.heatmap td.kw-input-zelle input {
  width: 42px; padding: 2px 3px; text-align: center; border: 1px solid var(--line);
  border-radius: 2px; font-size: 12px; background: transparent;
}
/* Spinner-Buttons (Pfeile) bei number-Inputs ausblenden – stören bei
   schneller Tastatur-Eingabe, Zahl reicht. */
table.heatmap td input[type=number]::-webkit-outer-spin-button,
table.heatmap td input[type=number]::-webkit-inner-spin-button,
table.raster td input[type=number]::-webkit-outer-spin-button,
table.raster td input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
table.heatmap td input[type=number],
table.raster td input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
table.heatmap td.kw-input-zelle.zelle-frei input { background: rgba(255,255,255,0.55); }
table.heatmap td.ausserhalb { background: #faf0f0; padding: 1px; position: relative; }
table.heatmap td.ausserhalb input {
  width: 42px; padding: 2px 3px; text-align: center;
  background: #f3d4d4; color: #7a3030; border: 1px solid #e0a3a3;
  border-radius: 2px; cursor: not-allowed;
}
/* Gesperrt wegen Abwesenheit: gelbe Markierung mit Lock-Icon. */
table.heatmap td.zelle-inaktiv.kw-input-zelle {
  background: #fdf6d2; padding: 1px; position: relative;
}
table.heatmap td.zelle-inaktiv.kw-input-zelle input {
  width: 42px; padding: 2px 3px; text-align: center;
  background: #f7eaa0; color: #6b5a14; border: 1px solid #d4be4a;
  border-radius: 2px; cursor: not-allowed;
}
/* Pseudo-Element: kleines Lock-Icon oben rechts in gesperrten Zellen. */
table.heatmap td.ausserhalb::before,
table.heatmap td.zelle-inaktiv.kw-input-zelle::before {
  content: "🔒"; font-size: 9px; position: absolute; top: 0; right: 2px;
  opacity: 0.65; pointer-events: none;
}

/* Legende-Block über der Heatmap. */
.sperr-legende {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 12px; color: var(--ink-soft, #555);
  background: #fafaf6; border: 1px solid #e5e0c8;
  border-radius: 4px; padding: 8px 12px; margin: 8px 0 4px;
}
.sperr-legende .lock-beispiel {
  display: inline-flex; align-items: center; gap: 6px;
}
.sperr-legende .lock-swatch {
  display: inline-block; width: 22px; height: 18px;
  border-radius: 3px; border: 1px solid #ccc;
  position: relative;
}
.sperr-legende .lock-swatch::after {
  content: "🔒"; font-size: 8px; position: absolute;
  top: 0; right: 1px; opacity: 0.7;
}
.sperr-legende .lock-swatch.abwesenheit { background: #f7eaa0; border-color: #d4be4a; }
.sperr-legende .lock-swatch.ausserhalb { background: #f3d4d4; border-color: #e0a3a3; }

/* Mitarbeiter-Liste: alle Bereich-Tabellen sollen gleiche Spaltenbreiten haben. */
/* Kompakte, links­bündige Mitarbeitertabelle (keine überdehnten Spalten auf
   großen Displays). Feste Breiten für kurze Spalten, Name nimmt den Rest. */
table.ma-liste {
  /* Inhaltsbasierte Breite: die Tabelle ist nur so breit wie ihre Spalten
     zusammen (Name wächst auf den längsten Namen), max. 1100px. Linksbündig. */
  table-layout: auto; width: auto; max-width: 1100px;
  margin-left: 0; margin-right: auto;
}
/* Rahmen NUR um die Mitarbeiter-Liste schrumpft auf die Tabellenbreite, sodass er
   rechts direkt hinter der Aktionsspalte abschließt. Die generische
   .tabelle-rahmen-Regel bleibt für heatmap/raster/matrix/fte unverändert. */
.tabelle-rahmen:has(> table.ma-liste) { display: inline-block; max-width: 100%; }
table.ma-liste th, table.ma-liste td {
  overflow: hidden; text-overflow: ellipsis;
}
/* Name (Spalte 1) nimmt die Restbreite; Badges dürfen umbrechen. */
table.ma-liste th:nth-child(1), table.ma-liste td:nth-child(1) {
  width: auto; white-space: normal;
}
table.ma-liste th:nth-child(2), table.ma-liste td:nth-child(2) { width: 110px; }
table.ma-liste th:nth-child(3), table.ma-liste td:nth-child(3) { width: 95px; }
table.ma-liste th:nth-child(4), table.ma-liste td:nth-child(4) { width: 105px; }
table.ma-liste th:nth-child(5), table.ma-liste td:nth-child(5) { width: 105px; }
table.ma-liste th:nth-child(6), table.ma-liste td:nth-child(6) { width: 100px; }
table.ma-liste th:nth-child(7), table.ma-liste td:nth-child(7) {
  width: 110px; text-align: right;
}

/* ---- SVG-Trendcharts ---- */
.trendchart { width: 100%; height: auto; display: block; margin-top: 6px; }
.trend-legende {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--ink); margin-bottom: 4px;
}
.trend-legende span { display: flex; align-items: center; gap: 6px; }
.trend-strich {
  display: inline-block; width: 18px; height: 3px; border-radius: 2px;
}
table.raster input:disabled { cursor: not-allowed; color: #b9888a; }
.entfernen-btn { padding: 0 6px; font-size: 12px; flex-shrink: 0; margin-left: auto; }

.legende { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; }
.legende span { display: flex; align-items: center; gap: 6px; }
.legende .swatch {
  width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--line);
  display: inline-block;
}

/* ---- Zuordnungsmatrix ---- */
.matrix-rahmen {
  overflow: auto; border: 2px solid var(--line); border-radius: 8px;
  max-height: 78vh;
}
form.bearbeitung .matrix-rahmen { border-color: var(--accent); }
table.matrix { width: auto; border-collapse: separate; border-spacing: 0; font-size: 12px; }
table.matrix th, table.matrix td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
table.matrix th.ecke {
  position: sticky; top: 0; left: 0; z-index: 5;
  background: #e4e8ec; min-width: 240px; max-width: 240px;
  text-align: left; padding: 8px 10px; vertical-align: bottom;
  font-size: 12px;
}
table.matrix th.ma-kopf {
  position: sticky; top: 0; z-index: 3;
  background: #eef1f4;
  /* height wirkt bei Tabellenzellen als Mindesthöhe – längere Namen lassen die
     Kopfzeile mitwachsen, statt abgeschnitten zu werden. */
  height: 160px; width: 28px; min-width: 28px; max-width: 28px;
  padding: 8px 0 6px; vertical-align: bottom; text-align: center;
}
/* Senkrechte Spaltenköpfe: Name steht vertikal und liest sich von unten nach
   oben. Der Text liegt IM Fluss der Zelle (kein absolutes Überragen mehr), daher
   bestimmt die Zellenhöhe den Platz und nichts wird vom Scroll-Rahmen geclippt. */
table.matrix th.ma-kopf span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
  font-size: 11px;
}
table.matrix td.ap-spalte, table.matrix th.ap-spalte {
  position: sticky; left: 0; z-index: 2;
  background: var(--card); min-width: 240px; max-width: 240px;
  text-align: left; padding: 5px 10px; font-weight: 600;
}
table.matrix td.ap-spalte a, table.matrix th.ap-spalte a { display: block; }
table.matrix td.ap-spalte .laufzeit, table.matrix th.ap-spalte .laufzeit { display: block; font-weight: 400; }
table.matrix tr.gruppe td, table.matrix tr.gruppe th {
  position: sticky; left: 0;
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 5px 10px; text-align: left;
}
table.matrix tbody td {
  text-align: center; padding: 3px; background: var(--card);
}
table.matrix tbody tr:hover td { background: #f4f6f8; }
table.matrix tbody tr:hover td.ap-spalte,
table.matrix tbody tr:hover th.ap-spalte { background: #eef1f4; }
table.matrix td.hat-stunden { background: #d8ebd8; }
table.matrix tbody tr:hover td.hat-stunden { background: #cde3cd; }
table.matrix td { position: relative; }
table.matrix input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
table.matrix input[type=checkbox]:disabled { cursor: default; }
form.bearbeitung table.matrix td:hover { outline: 2px solid var(--accent); }

.meldung {
  padding: 10px 14px; border-radius: 6px; margin-bottom: 14px;
  background: #fef3cd; border: 1px solid #f5d97a; color: #7a5b00;
}
/* Fehler-Variante der Flash-Box (WCAG 3.3.1: Text + Rolle, nicht nur Farbe). */
.meldung-fehler { background: #fde2e1; border-color: #e8a8a6; color: #7a1c19; }
/* Pflichtfeld-Marker (WCAG 3.3.2). */
.pflicht { color: var(--ueber-ink); font-weight: 700; margin-left: 2px; }

/* ---- Bug-Reports / Feature-Requests ---- */
.meldung-eintrag {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 10px;
}
.meldung-eintrag.status-erledigt { border-left-color: var(--frei-ink); opacity: 0.85; }
.meldung-eintrag.status-abgelehnt { border-left-color: #888; opacity: 0.7; }
.meldung-eintrag.status-in_arbeit { border-left-color: var(--voll-ink); }
.meldung-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.meldung-id { color: var(--muted); font-family: ui-monospace, monospace; }
.meldung-titel { font-size: 15px; }
.meldung-text {
  margin-top: 8px; white-space: pre-wrap;
  background: #f8f9fb; border-radius: 4px; padding: 8px 12px;
}
.meldung-antwort { margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--frei-ink); }
.meldung-antwort-kopf { font-weight: 600; color: var(--frei-ink); }

.badge.art-bug { background: var(--ueber); color: var(--ueber-ink); }
.badge.art-feature { background: #d9e4f2; color: #2a4a72; }
.badge.status-offen { background: var(--voll); color: var(--voll-ink); }
.badge.status-in_arbeit { background: #d9e4f2; color: #2a4a72; }
.badge.status-erledigt { background: var(--frei); color: var(--frei-ink); }
.badge.status-abgelehnt { background: var(--inaktiv); color: var(--muted); }
.badge.zielgruppe-alle { background: #fde68a; color: #92400e; }
.badge.zielgruppe-lead { background: #c7d2fe; color: #3730a3; }
.badge.zielgruppe-mitarbeiter { background: #d1fae5; color: #065f46; }
.badge.zielgruppe-extern { background: #fce7f3; color: #9d174d; }
.badge.fte-badge { background: #fef3c7; color: #78350f; }

/* CAPA-Inline-Edit-Form */
.capa-edit { display: inline-block; }
.capa-edit summary { display: inline-block; cursor: pointer; }
.capa-edit summary::-webkit-details-marker { display: none; }
.capa-edit-form {
  display: flex; gap: 6px; align-items: center;
  margin-top: 6px; flex-wrap: wrap;
  background: #f4f6f8; padding: 8px; border-radius: 4px;
}
.capa-edit-form input { padding: 3px 6px; }
.capa-edit-form input[type="text"] { flex: 1; min-width: 100px; }
.capa-edit-form button { padding: 3px 10px; font-size: 12px; }
.btn.klein { font-size: 12px; padding: 3px 8px; }
.btn.primary.klein { background: var(--accent); color: #fff; }

/* FTE-Vergleichs-Sicht im Management-Dashboard */
.fte-summe {
  background: #f4f6f8; border-radius: 6px;
  padding: 10px 14px; margin: 10px 0;
  font-size: 13px; line-height: 1.7;
}
.fte-q-summe {
  display: inline-block; margin-right: 18px;
}
.fte-q-label {
  display: inline-block; background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: 3px; font-weight: 700; margin-right: 4px;
}
.fte-detail { margin-top: 10px; }
.fte-detail summary { cursor: pointer; }
.fte-detail summary::-webkit-details-marker { display: none; }
table.fte-tabelle {
  border-collapse: separate; border-spacing: 0;
  font-size: 12px; width: auto; min-width: 100%;
}
table.fte-tabelle th, table.fte-tabelle td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 4px 8px;
}
table.fte-tabelle th.ap-spalte, table.fte-tabelle td.ap-spalte {
  position: sticky; left: 0; background: #eef1f4; min-width: 260px;
  text-align: left; z-index: 1;
}
table.fte-tabelle td.ap-spalte { background: var(--card); font-weight: 600; }
table.fte-tabelle th.quartal-kopf {
  background: var(--accent); color: #fff; text-align: center;
}
table.fte-tabelle th.fte-sub {
  background: #eef1f4; font-size: 11px; font-weight: 500; text-align: center;
}
table.fte-tabelle td.fte-zelle { text-align: center; min-width: 56px; }
table.fte-tabelle td.fte-bedarf { background: #fee2e2; color: #991b1b; font-weight: 600; }
table.fte-tabelle td.fte-mehr   { background: #fef3c7; color: #92400e; }
table.fte-tabelle td.fte-weniger { background: #dbeafe; color: #1e40af; }
/* Projekt-Rollup: aufklappbare AP-Lernwerte je Projektzeile. */
table.fte-tabelle details > summary { cursor: pointer; font-weight: 600; }
.fte-ap-liste { margin: 6px 0 4px; padding-left: 16px; font-size: 11px; font-weight: 400; }
.fte-ap-liste li { margin: 2px 0; }

/* Tutorial-Banner auf dem Dashboard */
.tutorial-banner {
  background: #eff6ff; border: 1px solid #93c5fd;
  border-radius: 8px; padding: 12px 18px; margin: 14px 0 10px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tutorial-banner-icon { font-size: 22px; }
.tutorial-banner strong { color: #1e40af; }

/* Tutorial-Seite */
.tutorial-block { margin-bottom: 14px; }
.tutorial-version { margin-bottom: 8px; }
.tutorial-version .badge { margin-right: 6px; background: #dbeafe; color: #1e40af; }
.tutorial-inhalt ul { margin: 6px 0 6px 18px; }
.tutorial-inhalt p { margin: 6px 0; }
.tutorial-inhalt code { background: #f4f6f8; padding: 1px 5px; border-radius: 3px; font-size: 92%; }
.tutorial-actions { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
.leer-hinweis { color: var(--muted); padding: 16px 0; }
.pfad { color: var(--muted); font-size: 13px; margin-bottom: 4px; }

/* Termin-Vorschlag: Abwesende-Liste */
.abwesende-liste {
  list-style: none; padding: 0; margin: 4px 0 0; font-size: 12px;
}
.abwesende-liste li { padding: 2px 0; }
.abwesende-liste li.lead-abwesend {
  background: #fff4e5; border-left: 3px solid #d97706;
  padding: 2px 6px; margin: 2px 0; border-radius: 3px;
}
.abwesende-liste .laufzeit { color: var(--muted); font-size: 11px; }
.lead-warnung {
  background: #fff4e5; color: #92400e; font-weight: 600;
  padding: 4px 8px; border-radius: 4px; margin-bottom: 6px;
  font-size: 12px;
}

/* Upload-Vorschau im Meldungs-Formular */
.bild-vorschau { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.bild-vorschau img {
  display: block; margin-top: 6px; max-width: 260px; max-height: 180px;
  border: 1px solid var(--line); border-radius: 6px;
}

/* Screenshot-Anhang in Meldungs-Einträgen */
.meldung-bild {
  margin: 10px 0; padding: 6px;
  background: #f4f6f8; border-radius: 6px; display: inline-block;
}
.meldung-bild img {
  max-width: 100%; max-height: 360px;
  border-radius: 4px; display: block;
  border: 1px solid var(--line);
}

/* Banner für neue Antworten auf eigene Meldungen */
.meldung-antwort-banner {
  background: #dbeafe; border: 1px solid #2563eb; border-radius: 8px;
  padding: 12px 18px; margin: 14px 0 10px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: #1e40af;
}

/* Diskussions-Thread auf einer Meldung */
.meldung-thread {
  margin-top: 8px; padding-left: 16px;
  border-left: 3px solid #cbd5e1;
}
.meldung-thread-eintrag {
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.meldung-thread-eintrag:last-child { border-bottom: 0; }
.meldung-thread-kopf {
  display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px;
}
.meldung-antwort-form {
  display: flex; gap: 8px; margin-top: 10px;
  align-items: flex-end;
}
.meldung-antwort-form textarea {
  flex: 1; resize: vertical; min-height: 36px;
  padding: 6px 8px; font-family: inherit; font-size: 13px;
}

/* Abgelehnt-Sektion klar abgesetzt: rote Akzente, gedämpfter Inhalt. */
.abgelehnt-kopf { color: #991b1b; border-bottom: 2px solid #fee2e2; padding-bottom: 4px; }
.abgelehnt-block { opacity: 0.78; }
.abgelehnt-block .meldung-eintrag {
  background: #fef2f2; border-left: 4px solid #dc2626;
}
.abgelehnt-block .meldung-titel { text-decoration: line-through; text-decoration-color: #dc2626; text-decoration-thickness: 1px; }
.abgelehnt-block .badge.status-abgelehnt {
  background: #dc2626; color: #fff; font-weight: 700;
}

/* CATS-Widget („Wie CATS ich diese Woche?") */
.cats-widget {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 20px; margin: 12px 0 24px;
}
.cats-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cats-kw-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cats-kw-form input[type=week] {
  width: auto; padding: 4px 8px; font-size: 13px;
}
table.cats-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  margin-top: 8px;
}
table.cats-table th, table.cats-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 10px; text-align: center;
}
table.cats-table thead th { background: #eef1f4; }
table.cats-table td:first-child, table.cats-table th:first-child { text-align: left; }
table.cats-table td.cats-cell { font-weight: 600; }
table.cats-table tr.cats-pauschal td { background: #f3f0e6; }
table.cats-table tr.cats-veranst td { background: #fff4e5; }
table.cats-table tr.cats-info td { color: var(--muted); font-style: italic; }
table.cats-table tfoot th { background: #eef1f4; }

/* Vertretungs-Indikator in der Lead-Heatmap */
.zelle-vertretung {
  background: linear-gradient(135deg, var(--frei) 0%, #fde68a 100%);
}
.vertretung-indikator {
  font-size: 9px; color: #d97706; margin-right: 1px; cursor: help;
}

/* Abwesende Leads (persönliche Detailseite) */
.lead-abw-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.lead-abw-eintrag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 6px; border-bottom: 1px solid var(--line);
}
.lead-abw-eintrag:last-child { border-bottom: 0; }
.lead-abw-eintrag.laeuft-aktuell {
  background: #fff4e5; border-left: 3px solid #d97706;
  border-radius: 4px; border-bottom-color: transparent;
}

/* Lead-Abwesenheits-Warnungen im LS-Dashboard */
.lead-warnungen {
  background: #fff4e5; border: 1px solid #d97706;
  border-radius: 8px; padding: 12px 18px;
  margin: 12px 0 18px;
}
.lead-warnungen > summary {
  cursor: pointer; color: #92400e; font-size: 15px;
  list-style: none; padding: 2px 0;
}
.lead-warnungen > summary::-webkit-details-marker { display: none; }
.lead-warnungen > summary::before {
  content: "▶"; display: inline-block; margin-right: 8px;
  transition: transform 0.15s; font-size: 11px;
}
.lead-warnungen[open] > summary::before { transform: rotate(90deg); }
.lead-warnungen[open] > summary { margin-bottom: 6px; }
.lead-warnung-block {
  background: #fff; border-left: 3px solid #d97706;
  padding: 8px 12px; border-radius: 4px;
  margin-top: 8px;
}
.warnung-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.warnung-abwesende { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.warnung-abwesende li { margin-bottom: 2px; }

/* Abwesenheitskalender (Monatsansicht) */
.kalender-nav {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 8px;
}
.kalender-legende {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
}
.kal-kuerzel {
  display: inline-block; width: 18px; height: 18px; line-height: 18px;
  border-radius: 3px; text-align: center; font-weight: 700; font-size: 11px;
  color: #fff; margin-right: 4px;
}
.kal-kuerzel.kuerzel-U, .kalender td.kuerzel-U { background: #2563eb; color: #fff; }
.kal-kuerzel.kuerzel-D, .kalender td.kuerzel-D { background: #7c3aed; color: #fff; }
/* WCAG 1.4.3: dunklere Töne für ≥4.5:1 mit weißer Schrift. */
.kal-kuerzel.kuerzel-F, .kalender td.kuerzel-F { background: #047857; color: #fff; }
.kal-kuerzel.kuerzel-A, .kalender td.kuerzel-A { background: #b45309; color: #fff; }
/* Veranstaltungs-Teilnahme (Onside/Leadership) — read-only Overlay, eigene
   Farbe, abgesetzt von echten Abwesenheiten (Issue #48). #0e7490 ≥4.5:1 mit Weiß. */
.kal-kuerzel.kuerzel-V, .kalender td.kuerzel-V { background: #0e7490; color: #fff; }

.kalender-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
table.kalender {
  border-collapse: separate; border-spacing: 0;
  width: auto; font-size: 12px;
}
table.kalender th, table.kalender td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
table.kalender th.ma-spalte, table.kalender td.ma-spalte {
  position: sticky; left: 0; z-index: 2;
  background: #eef1f4; min-width: 220px; max-width: 220px;
  text-align: left; padding: 6px 10px;
}
table.kalender td.ma-spalte { background: var(--card); font-weight: 600; }
table.kalender thead th { position: sticky; top: 0; background: #eef1f4; z-index: 3; }
table.kalender thead th.ma-spalte { z-index: 4; }
table.kalender th.tag-kopf {
  min-width: 22px; padding: 4px 0; line-height: 1.1;
}
table.kalender th.tag-kopf .tag-kuerzel {
  display: block; font-size: 10px; color: var(--muted); font-weight: 500;
}
table.kalender th.tag-kopf .tag-zahl { display: block; font-weight: 700; }
/* Wochenenden deutlich dunkler, damit sich Werktage klar abheben.
   Abwesenheits-Zellen (kuerzel-*) behalten ihre Farbe → :not() ausschließen. */
table.kalender thead th.wochenende { background: #c8cfda; }
table.kalender td.kal-zelle.wochenende:not([class*="kuerzel-"]) { background: #d7dce4; }
table.kalender .heute { outline: 2px solid var(--accent); outline-offset: -2px; }
table.kalender td.kal-zelle {
  width: 22px; height: 24px; font-weight: 700;
}

/* Versions-Log (Changelog-Markdown) */
.changelog-rahmen { max-width: 880px; }
.changelog-rahmen h1 { margin-top: 0; }
.changelog-rahmen h2 {
  margin-top: 28px; padding: 10px 16px;
  background: #eef1f4; border-left: 4px solid var(--accent);
  border-radius: 4px;
}
.changelog-rahmen h3 {
  margin-top: 18px; color: var(--accent);
  font-size: 15px;
}
.changelog-rahmen hr {
  border: 0; border-top: 1px solid var(--line); margin: 24px 0;
}
.changelog-rahmen ul { padding-left: 22px; }
.changelog-rahmen li { margin-bottom: 4px; }

/* Rollen-Simulations-Banner */
.sim-banner {
  background: #fef3c7; color: #92400e;
  padding: 8px 16px; border-bottom: 2px solid #d97706;
  font-size: 13px; text-align: center;
}
.sim-banner-btn {
  margin-left: 12px; padding: 3px 10px;
  background: #d97706; color: #fff; border: 0;
  border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.sim-banner-btn:hover { background: #b45309; }
/* Nur-Lese-Banner: dezent blau, klar als Hinweis erkennbar (nicht alarmierend). */
.readonly-banner {
  background: #e7eef6; color: #1f4e79;
  padding: 8px 16px; border-bottom: 2px solid #1f4e79;
  font-size: 13px; text-align: center;
}

/* Rollen-Simulator im Nav-Bar (Dropdown + Beenden-Icon) */
.sim-dropdown {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 6px; padding: 3px 8px;
  background: rgba(217, 119, 6, 0.22); border-radius: 6px;
  border: 1px solid rgba(217, 119, 6, 0.45);
}
.sim-dropdown.aktiv {
  background: rgba(217, 119, 6, 0.65); border-color: #d97706;
}
.sim-dropdown .sim-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.sim-dropdown .sim-label {
  color: #fff; font-size: 12px;
  font-weight: 600; margin: 0;
}
.sim-dropdown select {
  background: #fff; color: #1c2833;
  border: 0; border-radius: 3px;
  padding: 2px 6px; font-size: 12px;
  cursor: pointer; max-width: 180px;
  font-weight: 500;
}
.sim-beenden-form { display: inline; margin: 0; }
.sim-beenden-btn {
  background: #d97706; color: #fff;
  border: 0; border-radius: 50%;
  width: 24px; height: 24px; min-height: 24px;
  font-size: 16px; line-height: 1;
  cursor: pointer; padding: 0;
  font-weight: 700;
}
.sim-beenden-btn:hover { background: #b45309; }

/* --------------------------------------------------------------------- */
/* Leitungssicht: rollender 3-Jahres-Horizont (4 Leitfragen)             */
/* --------------------------------------------------------------------- */
main { min-width: 1194px; }   /* iPad Pro quer, keine Mobile-Optimierung */

.leitfragen-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 4px; position: sticky; top: 0; z-index: 5;
  background: var(--bg, #f6f7f9); padding: 8px 0;
}
.leitfragen-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: #1f2a37; text-decoration: none; font-weight: 600;
  font-size: 14px;
}
.leitfragen-nav a:hover { border-color: #1f4e79; color: #1f4e79; }
.leitfragen-nav a .nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #1f4e79; color: #fff; font-size: 12px;
}
.leitfrage { margin-top: 30px; scroll-margin-top: 64px; }
.leitfrage > h2 {
  border-bottom: 2px solid #1f4e79; padding-bottom: 6px;
}
.hochrechnung-projekte { list-style: none; padding-left: 0; font-size: 13px; }
.hochrechnung-projekte li { padding: 2px 0; border-bottom: 1px dashed var(--line); }
tr.vorschlag-deckt td { background: #fff4e0; }

/* Inline-Aktion (Bearbeiten-Panel) in Tabellen-Aktionsspalten (Issue #81):
   öffnet sich als rechtsbündige Karte über dem Inhalt, statt die Zeile zu
   strecken. Pattern für Edit-Formulare direkt neben „Löschen". */
details.inline-aktion { vertical-align: top; }
details.inline-aktion > summary { display: inline-block; }
.inline-aktion-panel {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 280px;
  max-width: 360px;
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  text-align: left;
}
.inline-aktion-panel label { display: grid; gap: 3px; font-size: 13px; }
.inline-aktion-panel .form-actions { margin-top: 2px; }

/* CATS-Wochennavigation: Pfeil-Buttons neben dem KW-Picker (Issue #82). */
.cats-kw-pfeil {
  text-decoration: none;
  min-width: 28px;
  text-align: center;
  line-height: 1.2;
  font-weight: 600;
}