* {
  box-sizing: border-box;
}

:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --accent: #1d1d1f;
  --soft: #f2f2f7;
  --urlaub: #d4f4e2;
  --schule: #e8f0ff;
  --krank: #fde0d8;
  --block: #ede9fe;
  --sonstiges: #fff3cd;

  /* ── Design-Tokens ──────────────────────────────────────────
     Abstände, Schriftgrößen und Radien als rem (1rem = 16px), damit
     alles mit der Browser-Schriftgröße mitskaliert (Barrierefreiheit).
     Namen = px-Wert der Skala, Wert = das px-Äquivalent in rem.
     1px-Linien und Media-Query-Breakpoints bleiben bewusst px. */

  /* Abstände (padding / margin / gap) */
  --sp-2:  0.125rem;  /*  2px */
  --sp-4:  0.25rem;   /*  4px */
  --sp-6:  0.375rem;  /*  6px */
  --sp-8:  0.5rem;    /*  8px */
  --sp-10: 0.625rem;  /* 10px */
  --sp-12: 0.75rem;   /* 12px */
  --sp-14: 0.875rem;  /* 14px */
  --sp-16: 1rem;      /* 16px */
  --sp-20: 1.25rem;   /* 20px */
  --sp-24: 1.5rem;    /* 24px */
  --sp-28: 1.75rem;   /* 28px */
  --sp-32: 2rem;      /* 32px */
  --sp-40: 2.5rem;    /* 40px */

  /* Schriftgrößen */
  --fs-9:  0.5625rem; /*  9px */
  --fs-11: 0.6875rem; /* 11px */
  --fs-12: 0.75rem;   /* 12px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem;  /* 14px */
  --fs-15: 0.9375rem; /* 15px */
  --fs-16: 1rem;      /* 16px */
  --fs-18: 1.125rem;  /* 18px */
  --fs-22: 1.375rem;  /* 22px */

  /* Radien */
  --r-2:  0.125rem;  /*  2px */
  --r-4:  0.25rem;   /*  4px */
  --r-6:  0.375rem;  /*  6px */
  --r-8:  0.5rem;    /*  8px */
  --r-10: 0.625rem;  /* 10px */
  --r-12: 0.75rem;   /* 12px */
  --r-14: 0.875rem;  /* 14px */
  --r-16: 1rem;      /* 16px */
  --r-18: 1.125rem;  /* 18px */
  --r-20: 1.25rem;   /* 20px */
  --r-22: 1.375rem;  /* 22px */
  --r-24: 1.5rem;    /* 24px */
  --r-full: 62.4375rem;   /* Pille */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-14);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

h1 { font-size: var(--fs-22); }
h2 { font-size: var(--fs-18); }
h3 { font-size: var(--fs-16); }

.app-header {
  padding: var(--sp-14) var(--sp-24);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  align-items: center;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 200;
}

h1, h2, h3 {
  margin: 0;
}

p {
  color: var(--muted);
  margin: var(--sp-6) 0 0;
}

button {
  appearance: none;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  padding: var(--sp-4) var(--sp-16);
  border-radius: var(--r-full);
  /* Buttons erben die App-Schrift nicht von selbst — ohne das rechnet der
     Browser mit 13.333px / line-height:normal, was krumme Höhen (41.5px)
     ergibt und nicht zur Höhe der Eingabefelder passt. */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 650;
  cursor: pointer;
}

button.secondary {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}

button.danger {
  background: #b42318;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.icon-sm {
  width: 1em;
  height: 1em;
}
.icon-md {
  width: 1.25em;
  height: 1.25em;
}
.icon-lg {
  width: 2em;
  height: 2em;
}

.header-actions, .form-actions, .dialog-actions, .section-actions {
  display: flex;
  gap: var(--sp-10);
  flex-wrap: wrap;
  align-items: center;
}

/* Buttons im Header sind in `.header-btn-group` gebündelt: der Abstand vom
   Label (Name bzw. Ordnername) zur Button-Gruppe ist dadurch größer als der
   Abstand der Buttons untereinander. */
.header-btn-group {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.sync-status {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  font-size: var(--fs-12);
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
}

.sync-status.connected {
  background: #d4f4e2;
  border: 1px solid #a3e6c0;
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10);
}


#syncLabel, #personSyncLabel {
  color: var(--muted);
  white-space: nowrap;
}

.sync-status.connected #syncLabel,
.sync-status.connected #personSyncLabel {
  color: #14532d;
  font-weight: 600;
}

.sync-status.connected button {
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--fs-11);
  border-radius: var(--r-full);
}

.header-actions > button,
.header-actions > .sync-status button {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--fs-11);
}

.sync-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  background: #fff3cd;
  border-bottom: 1px solid #eab308;
  color: #7a4900;
  font-size: var(--fs-13);
  padding: var(--sp-8) var(--sp-20);
  overflow: hidden;
  max-height: 3rem;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.sync-banner.hidden {
  display: flex !important;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 0;
}
.sync-banner button {
  flex-shrink: 0;
  padding: var(--sp-6) var(--sp-14);
  font-size: var(--fs-13);
  background: #eab308;
  color: #3d2600;
  border: 1.5px solid #ca8a04;
  border-radius: var(--r-full);
  cursor: pointer;
  font-weight: 650;
}
.sync-banner button:hover {
  background: #ca8a04;
  color: #fff;
}

.person-picker-select {
  font-size: var(--fs-13);
  font-weight: 600;
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--soft);
  color: var(--text);
  cursor: pointer;
  width: max-content;
  max-width: 20rem;
}

.tabs {
  display: flex;
  gap: var(--sp-8);
  padding: var(--sp-14) var(--sp-32);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 199;
}

.tab {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.tab.active {
  background: var(--accent);
  color: #fff;
}

main {
  padding: var(--sp-28) var(--sp-32) 3.75rem;
  /* clip statt hidden: verhält sich gleich, macht main aber nicht zum
     Scroll-Container — sonst funktioniert position:sticky (Hilfe-Navigation) nicht */
  overflow-x: clip;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-20);
  align-items: flex-start;
  margin-bottom: var(--sp-16);
}

.section-actions {
  display: flex;
  gap: var(--sp-8);
  flex-shrink: 0;
  align-items: center;
}

.section-actions button {
  white-space: nowrap;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-20);
  padding: var(--sp-20);
  margin-bottom: var(--sp-20);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(11.25rem, 1fr));
  gap: var(--sp-16);
}

label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--muted);
  gap: var(--sp-8);
}

/* display:contents lässt den Hint-Text mit dem vorangehenden Label-Text zu
   EINEM Textlauf verschmelzen — dadurch landen beide in derselben Zeile statt
   dass der Hint (weil label { display:flex; flex-direction:column }) als
   eigenes Flex-Item auf eine neue Zeile rutscht. Nur für kurze Tags gedacht
   (z. B. "optional") — für lange Beschreibungen .field-hint-block nutzen. */
.field-hint { font-size: var(--fs-11); font-weight: 400; color: var(--muted); display: contents; }

/* Lange, erklärende Hints (ganzer Satz) sollen bewusst als eigene Zeile unter
   dem Label-Text stehen, nicht mit ihm verschmelzen. */
.field-hint-block { font-size: var(--fs-11); font-weight: 400; color: var(--muted); }
.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-10);
  color: var(--text);
}

.checkbox-label input {
  width: auto;
}

.checkbox-label.perm-blocked {
  opacity: 0.38;
  cursor: not-allowed;
}
.checkbox-label.perm-blocked input {
  cursor: not-allowed;
}

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-12);
}

/* Der native Browser-Pfeil lässt sich per padding NICHT vom Rand wegschieben
   (er sitzt in einer eigenen, nicht stylebaren Zone). Deshalb: eigener Pfeil
   (media/icons/angle-down-solid-full.svg) als Hintergrundbild mit echtem,
   kontrolliertem Abstand zum Rand. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%236e6e73' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M297.4 438.6C309.9 451.1 330.2 451.1 342.7 438.6L502.7 278.6C515.2 266.1 515.2 245.8 502.7 233.3C490.2 220.8 469.9 220.8 457.4 233.3L320 370.7L182.6 233.4C170.1 220.9 149.8 220.9 137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7L297.3 438.7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-12) center;
  background-size: var(--sp-12) var(--sp-12);
  padding-right: var(--sp-32);
}

textarea {
  resize: vertical;
}

.full {
  grid-column: 1 / -1;
}

.hidden {
  display: none !important;
}

.form-actions {
  grid-column: 1 / -1;
}

.filters {
  display: flex;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--sp-16);
}

.filters label {
  min-width: 11.25rem;
}

.table-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-20);
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
}

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

th, td {
  text-align: left;
  padding: var(--sp-10) var(--sp-14);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow-wrap: break-word;
  word-break: normal;
}

.plan-table td:first-child strong,
.plan-table td:first-child {
  font-weight: 400;
  font-size: var(--fs-13);
  color: var(--muted);
}

th {
  color: var(--muted);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #fbfbfd;
}

tr:last-child td {
  border-bottom: 0;
}

.plan-table { table-layout: auto; min-width: 62.5rem; }
.plan-table th:nth-child(1), .plan-table td:nth-child(1) { white-space: nowrap; }
.plan-table th:nth-child(2), .plan-table td:nth-child(2) { white-space: nowrap; }
.plan-table th:nth-child(3), .plan-table td:nth-child(3) { white-space: nowrap; }
.plan-table th:nth-child(4), .plan-table td:nth-child(4) { min-width: 13ch; } /* Status – Platz für "Wiederholen" */
.plan-table th:nth-child(10), .plan-table td:nth-child(10) { min-width: 12.5rem; } /* Thema */
.plan-table th:nth-child(12), .plan-table td:nth-child(12) { min-width: 10rem; max-width: 70ch; } /* Kommentar */
.plan-table th:nth-child(13), .plan-table td:nth-child(13) { white-space: nowrap; } /* Aktionen */

.topic-table th:nth-child(1), .topic-table td:nth-child(1) { width: 7.5rem; }
.topic-table th:nth-child(2), .topic-table td:nth-child(2) { width: 6.875rem; }
.topic-table th:nth-child(3), .topic-table td:nth-child(3) { width: 7.5rem; }
.topic-table th:nth-child(4), .topic-table td:nth-child(4) { width: 5.9375rem; }
.topic-table th:nth-child(5), .topic-table td:nth-child(5) { width: auto; }
.topic-table th:nth-child(6), .topic-table td:nth-child(6) { width: 10rem; }

.row-muted td {
  color: #a1a1a6;
  background: #f7f7f8;
}

.presence-pill {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--fs-11);
  border: 1px solid rgba(0,0,0,.08);
}
.presence-urlaub         { color: #14532d; }
.presence-berufsschule   { color: #1a3a8f; }
.presence-krank          { color: #7a1f1f; }
.presence-blockunterricht{ color: #5b21b6; }
.presence-sonstiges      { background: var(--sonstiges); color: #7a4900; }
.presence-abwesend       { background: var(--sonstiges); color: #7a4900; }

.presence-label-item { display: inline-flex; align-items: center; gap: var(--sp-10); margin-right: var(--sp-12); }
.presence-comment    { font-size: var(--fs-12); color: var(--muted); }

.presence-urlaub {
  background: var(--urlaub);
}

.presence-berufsschule {
  background: var(--schule);
}

.presence-krank {
  background: var(--krank);
}

.presence-blockunterricht {
  background: var(--block);
}

.status, .difficulty, .source-pill {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  background: var(--soft);
  font-size: var(--fs-11);
  font-weight: 600;
}

.status {
  cursor: pointer;
  user-select: none;
}

.status:hover {
  opacity: 0.8;
}

.status-popover {
  position: fixed;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.status-popover .status {
  display: block;
  text-align: left;
  border-radius: var(--r-full);
  padding: var(--sp-6) var(--sp-12);
  cursor: pointer;
  border: 2px solid transparent;
  font-size: var(--fs-12);
}

.status-popover .status-popover-active {
  border-color: rgba(0,0,0,.25);
}

.status-offen      { background: #e8f0ff; color: #1a3a8f; }
.status-erledigt   { background: #d4f4e2; color: #14532d; }
.status-unsicher   { background: #fff3cd; color: #7a4900; }
.status-wiederholen { background: #fde0d8; color: #7a1f1f; }
.status-entfallt   { background: #f2f2f7; color: #8e8e93; text-decoration: line-through; }
/* Nie eingeplant — bewusst neutral: kein Versäumnis der Person, sondern
   schlicht nicht drangekommen. Deshalb grau statt einer Warnfarbe. */
.status-nichteingeplant { background: #f2f2f7; color: #8e8e93; }

.difficulty-leicht {
  background: #e7f5e9;
}

.difficulty-mittel {
  background: #fff1cc;
}

.difficulty-schwer {
  background: #fde2e2;
}

.dauer-pill {
  display: inline-block;
  font-size: var(--fs-11);
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-20);
  font-weight: 500;
  white-space: nowrap;
}
.dauer-kurz    { background: #d4f4e2; color: #14532d; }
.dauer-normal  { background: #e8f0ff; color: #1a3a8f; }
.dauer-ganztag { background: #fde0d8; color: #7a1f1f; }

.source-pill {
  background: #e9e4ff;
}

.inline-actions {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.inline-actions button {
  padding: var(--sp-2) var(--sp-8);
  font-size: var(--fs-12);
}

details summary {
  cursor: pointer;
  font-weight: 750;
  list-style-position: inside;
}

.topic-detail {
  margin-top: var(--sp-8);
  color: var(--muted);
  line-height: 1.45;
}

.links {
  margin-top: var(--sp-8);
  display: grid;
  gap: var(--sp-4);
}

.links a {
  color: inherit;
  text-decoration: underline;
}

.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-10);
}

.bulk-bar .bulk-count {
  font-size: var(--fs-13);
  color: var(--muted);
}

.bulk-bar .bulk-delete-btn {
  padding: var(--sp-6) var(--sp-12);
  font-size: var(--fs-12);
  flex-shrink: 0;
}

.bulk-bar .bulk-delete-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.row-check, .select-all-check {
  width: 0.9375rem;
  height: 0.9375rem;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

th:has(.select-all-check),
td:has(.row-check) {
  width: var(--sp-32);
  min-width: var(--sp-32);
  padding-left: var(--sp-8);
  padding-right: var(--sp-4);
}

.empty {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--r-20);
  padding: var(--sp-28);
  color: var(--muted);
}

.stats-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-20);
  padding: var(--sp-16) var(--sp-20);
  margin-bottom: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.stats-row {
  display: flex;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.stat-item {
  font-size: var(--fs-13);
  color: var(--muted);
}

.stat-item strong {
  color: var(--text);
}

.progress-bar-track {
  height: var(--sp-8);
  background: var(--soft);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #34c759;
  border-radius: var(--r-full);
  transition: width 0.3s ease;
}

button.topic-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

button.topic-link:hover {
  opacity: 0.65;
}

/* ── Speicher-Feedback ─────────────────────────────────────── */
.btn-success {
  background: #16a34a !important;
  color: #fff !important;
  border-color: #16a34a !important;
}
.save-success {
  color: #16a34a;
  font-size: var(--fs-13);
  font-weight: 600;
  margin: 0;
}
.save-banner {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-10);
  padding: var(--sp-10) var(--sp-16);
  font-size: var(--fs-14);
  font-weight: 600;
  margin-bottom: var(--sp-8);
}
.save-banner.hidden { display: none; }
.view-banner {
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  border-radius: var(--r-10);
  padding: var(--sp-10) var(--sp-16);
  font-size: var(--fs-14);
  font-weight: 600;
  margin-bottom: var(--sp-8);
}
.view-banner.hidden { display: none; }

/* ── Slide-In Menü ────────────────────────────────────────── */
.icon-btn {
  padding: var(--sp-4); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text); opacity: .7;
}
.icon-btn:hover { opacity: 1; }
.slidein-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 900; transition: opacity .2s;
}
.slidein-overlay.hidden { display: none; }
.slidein-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 20rem;
  background: var(--card); box-shadow: -4px 0 24px rgba(0,0,0,.12);
  z-index: 901; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
}
.slidein-panel.open { transform: translateX(0); }
.slidein-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-24) var(--sp-28); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.slidein-title { font-weight: 700; font-size: var(--fs-15); }
.slidein-close-btn {
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  background: var(--soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); flex-shrink: 0;
}
.slidein-close-btn:hover { background: var(--line); }
.slidein-body {
  padding: var(--sp-24) var(--sp-28); display: flex; flex-direction: column; gap: var(--sp-24);
  overflow-y: auto; flex: 1;
}
.slidein-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.slidein-section-label {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: 0 0 var(--sp-4) 0;
}
.slidein-link {
  background: none; border: none; text-align: left;
  padding: var(--sp-6) 0; font-size: var(--fs-14); color: var(--accent);
  cursor: pointer; width: 100%;
}
.slidein-link:hover { text-decoration: underline; }
.slidein-danger { color: #b42318 !important; }

/* ── Firmeneinstellungen ──────────────────────────────────── */
.einst-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-24);
  max-width: 56.25rem;
}
.einst-block-full { grid-column: 1 / -1; }
.einst-block-title {
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-10);
}
.einst-ordner-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12);
}
.einst-ordner-label { font-size: var(--fs-12); font-weight: 700; color: var(--muted); margin-bottom: var(--sp-4); }
.einst-ordner-pfad { font-size: var(--fs-13); color: var(--text); word-break: break-all; }
.abteilung-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-10) 0; border-bottom: 1px solid var(--line); gap: var(--sp-12);
}
.abteilung-item:last-child { border-bottom: none; }
.abteilung-name { font-size: var(--fs-14); font-weight: 500; display: inline-flex; align-items: center; gap: var(--sp-10); }
/* Der Farbkreis IST das Eingabefeld — Klick öffnet den Farbwähler des Systems.
   `appearance: none` entfernt den Rahmen des Browsers, das Farbfeld darin muss
   per ::-webkit-color-swatch rund gemacht werden. */
.abt-farbe { appearance: none; -webkit-appearance: none; width: var(--sp-20); height: var(--sp-20);
             padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
             flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.abt-farbe::-webkit-color-swatch-wrapper { padding: 0; }
.abt-farbe::-webkit-color-swatch { border: 0; border-radius: 50%; }
.abt-farbe::-moz-color-swatch { border: 0; border-radius: 50%; }
.abt-farbe:hover { box-shadow: 0 0 0 2px var(--accent); }
.abteilung-actions { display: flex; gap: var(--sp-6); flex-shrink: 0; }
.abteilung-actions button { padding: var(--sp-2) var(--sp-8); font-size: var(--fs-12); }
.abteilung-kuerzel {
  display: inline-block; margin-left: var(--sp-8);
  padding: var(--sp-2) var(--sp-8); border-radius: var(--r-full);
  background: var(--soft); border: 1px solid var(--line);
  font-size: var(--fs-11); font-weight: 700; color: var(--muted);
  letter-spacing: .04em;
}
.slidein-firmenname { margin-top: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-4); }
.slidein-field-label {
  font-size: var(--fs-12); font-weight: 700; color: var(--muted);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.slidein-field-label input { font-size: var(--fs-13); padding: var(--sp-8) var(--sp-10); }

.app-dialog {
  border: 0;
  border-radius: var(--r-22);
  padding: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: min(28.75rem, calc(100vw - var(--sp-32)));
}
.app-dialog::backdrop {
  background: rgba(0,0,0,.35);
}

#topicDialog      { width: min(32.5rem, calc(100vw - var(--sp-32))); }
#commentDialog    { width: min(35rem, calc(100vw - var(--sp-32))); }
#archivDetailDialog { width: min(40rem, calc(100vw - var(--sp-32))); }

.app-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: var(--sp-24) var(--sp-24) 0;
}

.app-dialog-header h3 {
  font-size: var(--fs-18);
  margin: var(--sp-4) 0 0;
}

.app-dialog-header button {
  width: var(--sp-32);
  height: var(--sp-32);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-2);
}

.app-dialog-body {
  padding: var(--sp-16) var(--sp-24) var(--sp-24);
}


.topic-dialog-bereich {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
}

.topic-dialog-badges {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-14) var(--sp-24) 0;
  flex-wrap: wrap;
}

.topic-dialog-section {
  padding: var(--sp-16) var(--sp-24);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-16);
}

.topic-dialog-section:first-of-type {
  margin-top: var(--sp-14);
}

.topic-dialog-section-label {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--sp-10);
}

.topic-dialog-desc {
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--fs-14);
}

/* Anhänge – Formular */
.anhang-section { margin-top: var(--sp-4); }
.anhang-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.anhang-header-buttons { display: flex; gap: var(--sp-8); }
.anhang-header .label-text { font-size: var(--fs-13); font-weight: 600; color: var(--fg); flex: none; }
.anhang-add-form { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: flex-end; background: var(--soft); border-radius: var(--r-10); padding: var(--sp-12); margin-bottom: var(--sp-8); }
.anhang-field-label { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-12); font-weight: 600; color: var(--muted); flex: 1; min-width: 8.75rem; }
.anhang-field-label input, .anhang-field-label select { width: 100%; font-weight: 400; }
.anhang-field-label.hidden { display: none; }
.anhang-form-actions { display: flex; gap: var(--sp-6); align-items: center; padding-top: var(--sp-16); }
.anhang-pfad-label-row { display: flex; align-items: center; gap: var(--sp-6); }
.tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-14); height: var(--sp-14); border-radius: 50%; background: var(--muted); color: var(--card); font-size: var(--fs-9); font-weight: 700; cursor: default; position: relative; flex-shrink: 0; }
.tooltip-icon::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + var(--sp-6)); left: 50%; transform: translateX(-50%); background: #333; color: #fff; font-size: var(--fs-11); font-weight: 400; padding: var(--sp-6) var(--sp-10); border-radius: var(--r-6); white-space: normal; width: 15rem; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 100; }
.tooltip-icon:hover::after { opacity: 1; }
.anhang-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.anhang-item { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-10); background: var(--soft); border-radius: var(--r-8); font-size: var(--fs-13); }
.anhang-icon { font-size: var(--fs-14); }
.anhang-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-aktion { font-size: var(--fs-11); color: var(--muted); white-space: nowrap; }
.anhang-actions { display: flex; gap: var(--sp-6); flex-shrink: 0; }
.anhang-actions .btn-edit { padding: var(--sp-2) var(--sp-10) !important; font-size: var(--fs-11) !important; }
.anhang-actions .btn-del { padding: var(--sp-2) var(--sp-10) !important; font-size: var(--fs-11) !important; }

/* Anhänge – Dialog */
.topic-dialog-anhaenge { display: flex; flex-direction: column; gap: var(--sp-6); }
.anhang-dialog-item { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-8) var(--sp-12); background: var(--soft); border-radius: var(--r-8); text-decoration: none; color: var(--fg); font-size: var(--fs-13); transition: background .15s; }
.anhang-dialog-item:hover { background: var(--line); }
.anhang-aktion-label { font-size: var(--fs-11); color: var(--muted); margin-left: auto; }

#entryDialog {
  border: 0;
  border-radius: var(--r-22);
  padding: 0;
  width: min(47.5rem, calc(100vw - var(--sp-32)));
}

#entryDialog::backdrop {
  background: rgba(0,0,0,.35);
}

.dialog-form {
  padding: var(--sp-24);
  display: grid;
  grid-template-columns: repeat(2, minmax(11.25rem, 1fr));
  gap: var(--sp-16);
}

.dialog-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .app-header, .section-head {
    flex-direction: column;
  }

  main, .app-header, .tabs {
    padding-left: var(--sp-16);
    padding-right: var(--sp-16);
  }

  .form-grid, .dialog-form {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 73.75rem;
  }
}


.editing {
  outline: 3px solid rgba(29, 29, 31, .18);
  box-shadow: 0 0 0 8px rgba(29, 29, 31, .05);
}


.date-combo {
  display: grid;
  grid-template-columns: 1fr 2.875rem;
  gap: var(--sp-8);
  align-items: center;
}

.date-picker {
  min-width: 2.875rem;
  padding: var(--sp-10) var(--sp-8);
}

.order-input {
  max-width: 5.625rem;
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--r-10);
}


.required-pill,
.optional-pill {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.08);
}

.required-pill {
  background: #e8f0ff;
}

.optional-pill {
  background: #f2f2f7;
  color: #6e6e73;
}

.pflicht-check {
  font-size: var(--fs-13);
  font-weight: 700;
  color: #1a3a8f;
  display: block;
  text-align: center;
}

.pflicht-none {
  font-size: var(--fs-13);
  color: #c7c7cc;
  display: block;
  text-align: center;
}

.btn-icon { display: none; }
.btn-text { display: inline; }

.topic-required-label {
  justify-content: flex-start;
  align-self: end;
  padding-bottom: var(--sp-10);
}

/* Responsive: Quelle früh ausblenden */
@media (max-width: 1400px) {
  .plan-table th:nth-child(6),
  .plan-table td:nth-child(6) {
    display: none;
  }
}

/* Responsive: Laptop / 125%-Skalierung */
@media (max-width: 1200px) {
  /* Kommentar ausblenden */
  .plan-table th:nth-child(12),
  .plan-table td:nth-child(12) {
    display: none;
  }

  .plan-table {
    min-width: 43.75rem;
  }

  main {
    padding-left: var(--sp-16);
    padding-right: var(--sp-16);
  }

  .tabs {
    padding-left: var(--sp-16);
    padding-right: var(--sp-16);
  }

  .app-header {
    padding-left: var(--sp-16);
    padding-right: var(--sp-16);
  }

  .btn-text { display: none; }
  .btn-icon { display: inline; }

  .inline-actions button {
    padding: var(--sp-6) var(--sp-10);
    font-size: var(--fs-14);
  }
}


/* v11: one visible German date field, hidden native picker only for opening the browser calendar. */
.date-picker-hidden {
  position: fixed !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -624.9375rem !important;
}

/* ── Hilfe-Tab ──────────────────────────────────────────── */
.hilfe-wrap {
  max-width: 68.75rem;
  padding-bottom: var(--sp-40);
  min-width: 0;
}

/* Hilfe: Layout mit Inhaltsverzeichnis + Suche */
.hilfe-layout { display: grid; grid-template-columns: 14.375rem minmax(0, 1fr); gap: var(--sp-28); align-items: start; }
.hilfe-nav { position: sticky; top: var(--hilfe-top, 170px); display: flex; flex-direction: column; gap: var(--sp-10);
  max-height: calc(100vh - var(--hilfe-top, 170px) - 1.875rem); overflow-y: auto; }
#hilfeSearch { width: 100%; font-size: var(--fs-14); }
.hilfe-toc { display: flex; flex-direction: column; gap: 0.0625rem; }
.hilfe-toc-link { padding: var(--sp-6) var(--sp-10) var(--sp-6) calc(var(--sp-10) + 1.5ch); border-radius: var(--r-8); font-size: var(--fs-13); color: var(--text);
  text-decoration: none; line-height: 1.35; }
.hilfe-toc-link:hover { background: var(--soft); }
.hilfe-toc-link.hilfe-toc-sub { padding-left: calc(var(--sp-10) + 3ch); font-size: var(--fs-12); color: var(--muted); }
.hilfe-toc-link.active { background: #eff6ff; color: var(--accent); font-weight: 600; }
.hilfe-toc-group { padding: var(--sp-8) var(--sp-10) var(--sp-6); margin-top: var(--sp-16); font-size: var(--fs-11); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid var(--line); }
.hilfe-toc-group:first-child { margin-top: 0; }
.hilfe-card { scroll-margin-top: calc(var(--hilfe-top, 170px) + 0.625rem); }
@media (max-width: 900px) {
  .hilfe-layout { grid-template-columns: 1fr; }
  .hilfe-nav { position: static; max-height: none; }
}

.hilfe-wrap h2 {
  margin-bottom: var(--sp-20);
}

.hilfe-version {
  margin-top: var(--sp-28);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  font-size: var(--fs-12);
  color: var(--muted);
  text-align: left;
}

.hilfe-grid {
  /* Abschnitte untereinander in voller Breite — nicht als gequetschtes Karten-Raster */
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.hilfe-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-18);
  padding: var(--sp-20) 1.375rem;
}

.hilfe-card h3 {
  display: flex;
  align-items: center;
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-16);
}

.hilfe-card h3 .icon {
  margin-right: 1ch;
}

.hilfe-crumb-sep {
  display: inline-block;
  margin: 0 0.5em;
  color: var(--muted);
  font-weight: 400;
}

.hilfe-card h4 {
  font-size: var(--fs-14);
  color: var(--muted);
  margin: var(--sp-12) 0 var(--sp-6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hilfe-card ol,
.hilfe-card ul {
  margin: var(--sp-14) 0 0;
  padding-left: var(--sp-16);
  line-height: 1.7;
  font-size: var(--fs-13);
}

.hilfe-card p {
  font-size: var(--fs-13);
  margin: var(--sp-8) 0 0;
  line-height: 1.55;
}

.hilfe-hint {
  color: var(--muted);
  font-size: var(--fs-12) !important;
  margin-top: var(--sp-10) !important;
}

.hilfe-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  margin-top: var(--sp-14);
}

.hilfe-table th {
  text-align: left;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.hilfe-table td {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.hilfe-table tr:last-child td {
  border-bottom: none;
}

/* Erste Spalte immer auf Inhaltsbreite + fester Abstand zur nächsten Spalte —
   gilt für jede Hilfe-Tabelle, damit sich Label/Pill/Button nicht über die
   ganze Breite strecken (einheitliches Bild in allen Karten). */
.hilfe-table th:first-child,
.hilfe-table td:first-child {
  width: 1%;
  white-space: nowrap;
  padding-right: 5ch;
}

/* Tabellen mit drei Spalten (z. B. Themen » Dauer-Konzept): auch die mittlere
   Spalte auf Inhaltsbreite schrumpfen, sonst zieht sie den gleichen zu
   großen Abstand zur letzten Spalte wie vorher bei der ersten Spalte. */
.hilfe-table--3col th:nth-child(2),
.hilfe-table--3col td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
  padding-right: 5ch;
}

.hilfe-subhead {
  margin-top: var(--sp-20) !important;
}

/* Tabelle/Liste, die direkt auf eine kurze Label-Zwischenüberschrift folgt
   (h4 wie "Einmalige Einrichtung", oder .hilfe-subhead wie "Buttons:"),
   rückt eng heran — das ist eine Caption, kein eigener Absatz. Echte
   Beschreibungs-Absätze (normales <p> ohne .hilfe-subhead) behalten den
   normalen Abstand zu ihrer Tabelle/Liste. */
.hilfe-card h4 + table,
.hilfe-card h4 + ul,
.hilfe-card h4 + ol,
.hilfe-subhead + table,
.hilfe-subhead + ul,
.hilfe-subhead + ol {
  margin-top: var(--sp-6);
}

/* ── Kommentar-Dialog ─────────────────────────────────────── */
#commentDialogBody {
  padding: var(--sp-16) var(--sp-24) var(--sp-24);
}

#commentDialogBody textarea {
  width: 100%;
  min-height: 7.5rem;
}

/* ── Kommentar-Zelle ──────────────────────────────────────── */
.comment-cell {
  cursor: pointer;
  display: block;
  min-width: 5rem;
  min-height: var(--sp-20);
  border-radius: var(--r-6);
  padding: var(--sp-2) var(--sp-4);
  transition: background 0.15s;
  color: var(--text);
}
.comment-cell:hover {
  background: var(--soft);
}
.comment-empty {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-11);
  font-weight: 600;
  line-height: 1.6;
}

/* ── Beurteilung ──────────────────────────────────────────── */
#beurteilungDialog { width: min(35rem, calc(100vw - var(--sp-32))); }

/* Zwei Spalten für den ganzen Block: Beschriftung | Noten. Die Zeilen sind
   `display: contents`, damit alle Beschriftungen in derselben Grid-Spalte
   liegen — die Notenblöcke beginnen dadurch bei jeder Zeile an derselben
   Stelle, egal wie lang der Text links ist. Mit Flex je Zeile wanderten sie
   mit der Textlänge nach rechts. */
.beurteilung-grades {
  display: grid;
  /* Zweite Spalte `minmax(0, 1fr)`, nicht `auto`: Eine aufgeklappte Erläuterung
     spannt über beide Spalten, und mit `auto` würde ihr Text das ganze Raster
     breiter ziehen als den Dialog. */
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-12);
}
.beurteilung-row {
  display: contents;
}
.beurteilung-label {
  min-width: 10rem;
  font-size: var(--fs-13);
  color: var(--muted);
  font-weight: 500;
}
/* Deckelt die Beschriftungsspalte: Ein langer Name soll umbrechen, nicht die
   Noten aus dem Dialog schieben. `flex-direction: row` ist nötig, weil die
   globale `label`-Regel Spalten-Flex setzt — sonst rutscht das Fragezeichen
   unter den Namen statt daneben. */
.beurteilung-grades .beurteilung-label {
  max-width: 24ch;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.grade-btns {
  display: flex;
  gap: var(--sp-6);
}
.grade-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-8);
  border: 2px solid var(--line);
  background: var(--soft);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  padding: 0;
}
.grade-btn:hover { border-color: var(--accent); }
.grade-btn.active[data-grade="1"] { background: #22c55e; border-color: #16a34a; color: #fff; }
.grade-btn.active[data-grade="2"] { background: #84cc16; border-color: #65a30d; color: #fff; }
.grade-btn.active[data-grade="3"] { background: #eab308; border-color: #ca8a04; color: #fff; }
.grade-btn.active[data-grade="4"] { background: #f97316; border-color: #ea580c; color: #fff; }
.grade-btn.active[data-grade="5"] { background: #ef4444; border-color: #dc2626; color: #fff; }
.grade-btn.active[data-grade="6"] { background: #991b1b; border-color: #7f1d1d; color: #fff; }
.beurteilung-gesamt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
}
.gesamt-note {
  font-size: 1.375rem;
  font-weight: 800;
  min-width: 2.25rem;
  text-align: center;
}
/* Beurteilungen Tab */
.beurteilungen-wrap {
  padding: var(--sp-24) 0;
}
.beurteilungen-today-box {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-16);
  padding: var(--sp-20) var(--sp-24);
  margin-bottom: var(--sp-28);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  align-items: center;
}
.beurteilungen-today-box h3 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-15);
}
.beurteilungen-empty {
  color: var(--muted);
  font-size: var(--fs-14);
}
.beurteilungen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}
.beurteilungen-table th {
  text-align: left;
  padding: var(--sp-6) var(--sp-10);
  font-size: var(--fs-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.beurteilungen-table td {
  padding: var(--sp-10) var(--sp-10);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-28);
  height: var(--sp-28);
  border-radius: var(--r-8);
  font-weight: 800;
  font-size: var(--fs-13);
  color: #fff;
}
.grade-pill[data-grade="1"] { background: #22c55e; }
.grade-pill[data-grade="2"] { background: #84cc16; }
.grade-pill[data-grade="3"] { background: #eab308; }
.grade-pill[data-grade="4"] { background: #f97316; }
.grade-pill[data-grade="5"] { background: #ef4444; }
.grade-pill[data-grade="6"] { background: #991b1b; }
.grade-pill[data-grade="—"] { background: var(--soft); color: var(--muted); }
.heute-beurteilung-widget {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-14) var(--sp-16);
  margin-bottom: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}
.heute-beurteilung-widget > strong { font-size: var(--fs-13); color: var(--muted); }
.heute-beurteilung-list { display: flex; flex-direction: column; }
.heute-beurteilung-row {
  display: grid;
  grid-template-columns: 6.25rem 1fr auto;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--line);
}
.heute-beurteilung-row--noname {
  grid-template-columns: 1fr auto;
}
.heute-beurteilung-row:last-child { border-bottom: none; }
.heute-b-meta { display: flex; align-items: center; }
.heute-b-noten { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.heute-b-noten .beurteilung-label { margin-left: 6ch; }
.heute-b-noten .beurteilung-label:first-child { margin-left: 0; }
.heute-b-actions { display: flex; gap: var(--sp-6); justify-content: flex-end; }
.heute-b-actions button { font-size: var(--fs-12); padding: var(--sp-2) var(--sp-8); }
.beurteilung-von {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--fg);
  background: var(--line);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-10);
  margin-right: var(--sp-4);
}
.beurteilung-comment {
  margin-left: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-13);
}
.heute-beurteilung-widget .beurteilung-label { min-width: auto; }
.beurteilungen-overall {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-12) 0 var(--sp-20);
  font-size: var(--fs-14);
  color: var(--muted);
  font-weight: 500;
}

.rollen-konfig-box {
  margin-top: var(--sp-40);
  padding-top: var(--sp-32);
  border-top: 1px solid var(--line);
}
.rollen-konfig-box h3 {
  font-size: var(--fs-16);
  font-weight: 600;
  margin: 0 0 var(--sp-6);
}
.rollen-konfig-hint {
  font-size: var(--fs-13);
  color: var(--muted);
  margin: 0 0 var(--sp-16);
}
.rollen-konfig-table {
  border-collapse: collapse;
  font-size: var(--fs-14);
}
.rollen-konfig-table th {
  text-align: left;
  padding: var(--sp-8) var(--sp-16);
  border-bottom: 2px solid var(--line);
  font-weight: 600;
}
.rollen-konfig-table th:not(:first-child) { text-align: center; min-width: 5.625rem; }
.rollen-konfig-table td {
  padding: var(--sp-8) var(--sp-16);
  border-bottom: 1px solid var(--line);
}
.rollen-cell, .rollen-cell-na { text-align: center; }
.rollen-cell-na { color: var(--muted); }
.rollen-konfig-table tr:hover td { background: var(--soft); }

/* Nimmt sich vom globalen `table { min-width: 73.75rem }` der Schmal-Media-Query
   aus (gilt den breiten Plan-Tabellen), sonst wäre die Tabelle immer breiter als
   ihr Container und die Kürzel-Notbremse würde dauerhaft greifen. */
.berufe-table { min-width: 0; }
/* Die Aktions-Spalte schrumpft auf ihren Inhalt (width:1% ist der übliche
   Shrink-to-fit-Trick in auto-Layout-Tabellen), dadurch bekommt die
   Abteilungs-Spalte den restlichen Platz und die Buttons sitzen ganz rechts.
   Das Flex-Layout der Buttons liegt bewusst auf einem inneren <div>, NICHT auf
   der Zelle selbst: ein `display:flex` am <td> nimmt ihm `table-cell` und die
   Zelle (samt Trennlinie) endet dann vor dem rechten Tabellenrand. */
.berufe-table th:last-child,
.berufe-table td.berufe-actions { width: 1%; white-space: nowrap; }
.berufe-actions-inner { display: flex; gap: var(--sp-6); justify-content: flex-end; }
.berufe-actions-inner button { padding: var(--sp-2) var(--sp-8); font-size: var(--fs-12); }
/* Spaltenabstand 5ch; die Spaltenbreiten selbst kommen berechnet aus
   renderBerufListe() (längster Inhalt + 3ch), deshalb kein Umbruch. */
.berufe-table th:not(:last-child),
.berufe-table td:not(:last-child) { padding-right: 5ch; white-space: nowrap; }

.beurteilungen-section-title {
  margin: 2.25rem 0 var(--sp-6);
  font-size: var(--fs-16);
  font-weight: 600;
}
.beurteilungen-vergleich-hint {
  font-size: var(--fs-13);
  color: var(--muted);
  margin: 0 0 var(--sp-14);
  line-height: 1.5;
}
tr.vergleich-abweichung td {
  background: #fff1f0;
}

/* Prevent responsive column-hiding from affecting Beurteilungen table */
.beurteilung-plan-table th,
.beurteilung-plan-table td { display: table-cell !important; }
.beurteilung-plan-table th:nth-child(6),
.beurteilung-plan-table td:nth-child(6) { min-width: 10rem; max-width: 70ch; }
.beurteilung-plan-table th:nth-child(7),
.beurteilung-plan-table td:nth-child(7) { white-space: nowrap; }

/* ── Login / Setup Screen ─────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-24);
  padding: var(--sp-40);
  width: min(25rem, calc(100vw - var(--sp-32)));
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
.login-card h1 { font-size: var(--fs-22); margin-bottom: var(--sp-4); }
.login-subtitle { color: var(--muted); margin-bottom: var(--sp-24); }
.login-error { color: #b42318; font-size: var(--fs-13); margin-top: var(--sp-6); }

/* ── Active User Badge ────────────────────────────────────── */
.active-user-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-12);
  font-size: var(--fs-12);
  font-weight: 600;
}
.active-user-badge button {
  padding: var(--sp-4) var(--sp-10);
  font-size: var(--fs-11);
  border-radius: var(--r-full);
}

/* ── Permissions ──────────────────────────────────────────── */
.person-permissions {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  padding: var(--sp-16);
}
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: var(--sp-10);
}

/* ── Person table extras ──────────────────────────────────── */
.role-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  background: var(--soft);
  border: 1px solid var(--line);
}
.role-badge.admin {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
}
.role-badge.ausbilder {
  background: #1e3a8a;
  color: #fff;
  border-color: #1e3a8a;
}
.scope-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  vertical-align: middle;
}
.scope-badge.scope-alle {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}
#changePasswordDialog {
  width: min(26.25rem, calc(100vw - var(--sp-32)));
}

/* ── Initialen / Zuständigkeit ────────────────────────────── */
.zustaendig-wrap { white-space: nowrap; cursor: default; }
.zustaendig-full { font-size: var(--fs-13); }
.zustaendig-wrap .zustaendig-ini { display: none; }

/* Unter 1100px auf Initialen umschalten */
@media (max-width: 1100px) {
  .zustaendig-wrap .zustaendig-full { display: none; }
  .zustaendig-wrap .zustaendig-ini  { display: inline-flex; }
}

.initialen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-4);
  font-size: var(--fs-12);
  font-weight: 700;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: default;
  letter-spacing: 0.03em;
}

/* ── Zeitplan ─────────────────────────────────────────────── */
.zp-wrap { overflow-x: auto; background: #fff; border-radius: var(--r-8); }
.zp-table { border-collapse: collapse; font-size: var(--fs-13); }
.zp-th, .zp-td { white-space: nowrap; border-right: 1px solid var(--line); }
.zp-th:last-child, .zp-td:last-child { border-right: none; }
.zp-name-th { text-align: left; padding: var(--sp-6) var(--sp-12); font-size: var(--fs-12); color: var(--muted); position: sticky; left: 0; background: var(--bg); z-index: 2; min-width: 8.75rem; box-shadow: inset -1px 0 0 var(--line); }
.zp-th { padding: var(--sp-6) var(--sp-4); font-size: var(--fs-11); color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }
.zp-name { padding: var(--sp-6) var(--sp-12); font-weight: 600; font-size: var(--fs-13); position: sticky; left: 0; background: var(--bg); z-index: 1; border-bottom: 1px solid var(--line); box-shadow: inset -1px 0 0 var(--line); overflow: hidden; text-overflow: ellipsis; }
.zp-td { padding: var(--sp-4) var(--sp-2); text-align: center; border-bottom: 1px solid var(--line); }
.zp-td.zp-today { background: #eff6ff; }
.zp-badge { display: inline-block; padding: var(--sp-2) var(--sp-6); border-radius: var(--r-4); font-size: var(--fs-11); font-weight: 700; color: #fff; cursor: default; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; box-sizing: border-box; }
.zp-abs-row { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2); cursor: default; }
.zp-abs-stripe { display: inline-block; width: 100%; max-width: var(--sp-28); height: var(--sp-4); border-radius: var(--r-2); }
.zp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: center; margin-top: var(--sp-10); font-size: var(--fs-12); color: var(--text); }
.zp-legend-item { display: inline-flex; align-items: center; gap: var(--sp-6); }

/* ── Bereichs-Zeitleiste ─────────────────────────────────────────────────
   Baut auf den Zeitplan-Klassen (.zp-*) auf, ergänzt nur das Nötige:
   klickbare Zellen, Belegung und Zugvorschau. */
.bz-wrap { user-select: none; }              /* sonst markiert das Ziehen Text */
/* Feste Spaltenbreiten und ein scrollender Wrapper: Ein ganzes Jahr sind 53
   Spalten — würde die Tabelle sie auf die Containerbreite quetschen, wären die
   KW-Köpfe unlesbar. `table-layout: fixed` hält außerdem die Balkenbeschriftung
   davon ab, einzelne Spalten breiter zu ziehen. */
.bz-table { table-layout: fixed; width: auto; min-width: 100%; }
.bz-name-th, .bz-name { width: 16ch; min-width: 16ch; white-space: nowrap; }   /* „Blockunterricht" passt sonst nicht */
.bz-th { width: 2.75rem; }
.bz-td { height: var(--sp-32); cursor: pointer; }
.bz-td:not(.bz-bar-td):hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.bz-legend { margin-bottom: var(--sp-24); }   /* sonst klebt die Tabelle darunter */
.einteilung-jahr { margin: 0; font-size: var(--fs-12); color: var(--muted); min-width: 7rem; }

/* Beurteilungskriterien in den Firmeneinstellungen */
.kriterium-aus { opacity: .6; }
.beurteilung-inaktiv { font-size: var(--fs-11); color: var(--muted); font-weight: 400; }

/* Erläuterung hinter einem Fragezeichen — der Text steht im Tooltip, damit die
   Oberfläche bei mehreren erklärten Einträgen nicht zutextet. */
.hinweis-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-16); height: var(--sp-16); flex: 0 0 auto;
  border: 0; padding: 0; border-radius: 50%;
  background: var(--soft); color: var(--muted);
  vertical-align: middle; cursor: pointer;
}
.hinweis-badge:hover { background: var(--line); color: var(--text); }
.hinweis-badge[aria-expanded="true"] { background: var(--accent); color: #fff; }
.hinweis-badge .icon { width: 0.625rem; height: 0.625rem; }
/* Aufgeklappte Erläuterung: über die ganze Breite, damit auch längere Texte
   lesbar umbrechen — deshalb kein Tooltip. */
.hinweis-text {
  font-size: var(--fs-12); color: var(--muted); font-weight: 400;
  line-height: 1.45; background: var(--soft); border-radius: var(--r-8);
  padding: var(--sp-8) var(--sp-10);
}
.kriterium-item { flex-wrap: wrap; }
/* Die beiden Elemente mit wechselndem Text bekommen eine feste Mindestbreite
   (längster Text + 2ch), sonst rutschen die Knöpfe einer Zeile seitlich weg,
   sobald ein Kriterium inaktiv ist: „Aktivieren" ist kürzer als „Deaktivieren",
   „inaktiv" breiter als „aktiv". */
.kriterium-item .einteilung-status { min-width: 9ch; }    /* „inaktiv" */
.kriterium-item [data-krit-toggle] { min-width: 14ch; }   /* „Deaktivieren" */
.kriterium-item .hinweis-text { width: 100%; margin-bottom: var(--sp-4); }
/* Im Notenraster über beide Spalten */
.beurteilung-grades .hinweis-text { grid-column: 1 / -1; min-width: 0; }
/* Feste Zeilen (Abwesenheiten): kein Zeigefinger, kein Hover-Rahmen. */
.bz-td[data-fest] { cursor: default; }
.bz-td[data-fest]:hover { outline: none; }
.bz-bar-text { flex: 1 1 auto; min-width: 0; color: #fff; font-size: var(--fs-11); font-weight: 700;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* Wochen-Spalte klebt neben der Namensspalte, damit sie beim Scrollen
   durchs Jahr sichtbar bleibt. */
.bz-wochen-th, .bz-wochen { width: 7ch; min-width: 7ch; text-align: center; color: var(--muted); font-size: var(--fs-12);
                            position: sticky; left: 16ch; background: var(--bg); z-index: 1;
                            box-shadow: inset -1px 0 0 var(--line); }
.bz-wochen-th { z-index: 2; }
.bz-wochen { cursor: default; }
/* Der Balken liegt absolut in seiner Zelle. Sonst zählt seine Beschriftung zur
   Mindestbreite der Zelle und zieht einzelne KW-Spalten auf — ein Einwochen-
   Balken wäre dreimal so breit wie seine Nachbarn. (`table-layout: fixed`
   allein hilft nicht: Bei `width: auto` fällt der Browser auf Auto-Layout
   zurück, und dann zählt der Inhalt doch wieder mit.) */
.bz-bar-td { padding: var(--sp-2); cursor: default; position: relative; }
.bz-bar-td .bz-bar { position: absolute; inset: var(--sp-4) var(--sp-2); height: auto; }

/* Balken über mehrere Wochen: Griffe außen, Zeitraum in der Mitte. */
.bz-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
          height: var(--sp-24); border-radius: var(--r-4); padding: 0 var(--sp-2); overflow: hidden; }
.bz-grip { flex: 0 0 auto; width: var(--sp-8); height: 100%; cursor: ew-resize; border-radius: var(--r-2);
           background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 1px, transparent 1px 3px);
           background-position: center; background-repeat: no-repeat; background-size: 5px 55%; }
.bz-grip:hover { background-color: rgba(0,0,0,.18); }
/* Balken während des Ziehens: hebt sich ab, rastet aber in der KW ein. */
.bz-bar-zug { box-shadow: 0 0 0 2px var(--text); opacity: .9; }
.bz-bar-label { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; margin: 0;
                color: #fff; font-size: var(--fs-11); font-weight: 700; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.bz-bar-label:hover { text-decoration: underline; }
/* ── Datumsfeld mit Kalenderwochen (kwdp) ─────────────────────────
   Eigener Kalender, weil der des Browsers keine KW-Spalte kennt. */
.kwdp { position: relative; }
.kwdp-feld { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
             width: 100%; text-align: left; background: #fff; color: var(--text);
             border: 1px solid var(--line); border-radius: var(--r-8);
             padding: var(--sp-10) var(--sp-12); font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.kwdp-feld:hover { border-color: var(--accent); }
.kwdp-leer { color: var(--muted); font-weight: 400; }
.kwdp-tag { font-size: var(--fs-11); font-weight: 700; color: var(--muted);
            background: var(--soft); border-radius: var(--r-4); padding: var(--sp-2) var(--sp-6); }
.kwdp-pop { position: absolute; z-index: 30; top: calc(100% + var(--sp-4)); left: 0;
            background: #fff; border: 1px solid var(--line); border-radius: var(--r-8);
            box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: var(--sp-10); }
/* Inline im Dialog: kein Popover, sondern ein Block, der den Dialog wachsen lässt. */
.kwdp-inline:empty { display: none; }
.kwdp-inline .kwdp-pop { position: static; box-shadow: none; }
.kwdp-inline .kwdp-tab { width: 100%; }
.kwdp-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8);
             margin-bottom: var(--sp-8); font-size: var(--fs-13); }
.kwdp-nav { background: none; border: 0; color: var(--text); cursor: pointer;
            font-size: var(--fs-16); line-height: 1; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-4); }
.kwdp-nav:hover { background: var(--soft); }
/* Nimmt sich vom globalen `table { min-width: 73.75rem }` der Schmal-Media-Query
   aus — ein Monatskalender ist immer schmal. */
.kwdp-tab { border-collapse: collapse; font-size: var(--fs-12); min-width: 0; width: auto; }
.kwdp-tab th, .kwdp-tab td { border-bottom: 0; }
.kwdp-tab th { padding: var(--sp-4); font-size: var(--fs-11); color: var(--muted); font-weight: 600; }
.kwdp-tab td { padding: var(--sp-4) var(--sp-6); text-align: center; border-radius: var(--r-4); cursor: pointer; }
.kwdp-kw-th, .kwdp-kw { color: var(--muted); font-weight: 700;
                        border-right: 1px solid var(--line); padding-right: var(--sp-8) !important; }
.kwdp-kw:hover { background: var(--soft); color: var(--text); }
.kwdp-tag-zelle:hover { background: var(--soft); }
.kwdp-fremd { color: var(--muted); opacity: .55; }
.kwdp-heute { box-shadow: inset 0 0 0 1px var(--accent); }
.kwdp-gewaehlt { background: var(--accent); color: #fff; font-weight: 700; }
.kwdp-fuss { margin-top: var(--sp-8); text-align: right; }
.kwdp-heute-btn { background: none; border: 0; color: var(--accent); font-size: var(--fs-12);
                  cursor: pointer; padding: var(--sp-2) var(--sp-4); }

/* ── Person: Einteilung (Abteilungs-Timeline) ────────────────── */
.einteilung-table tr.einteilung-vergangen { opacity: 0.55; }
.einteilung-status { display: inline-block; padding: var(--sp-2) var(--sp-10); border-radius: var(--r-full); font-size: var(--fs-11); font-weight: 700; text-align: center; }
.einteilung-status.status-aktuell { background: #d4f4e2; color: #14532d; }
.einteilung-status.status-zukuenftig { background: #e8f0ff; color: #1a3a8f; }
.einteilung-status.status-vergangen { background: var(--soft); color: var(--muted); }
.einteilung-abteilung { font-weight: 400; }
.einteilung-table tr.einteilung-aktuell .einteilung-abteilung { font-weight: 700; }
.einteilung-kontakt { color: var(--accent); text-decoration: none; }
.einteilung-kontakt:hover { text-decoration: underline; }
.zp-table tbody tr:hover .zp-name,
.zp-table tbody tr:hover .zp-td { background: var(--soft); }
.zp-table tbody tr:hover .zp-today { background: #dbeafe; }
.zp-row-active .zp-name { border-left: 3px solid var(--accent); padding-left: var(--sp-8); }
.zp-row-active .zp-name,
.zp-row-active .zp-td { background: #eff6ff; }
.zp-row-active .zp-today { background: #dbeafe; }

/* ── Filter Bar ───────────────────────────────────────────── */
.filter-bar { display: flex; gap: var(--sp-16); align-items: flex-end; margin-bottom: var(--sp-16); flex-wrap: wrap; flex-direction: row; }
.filter-bar-label { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.filter-bar-label select { font-size: var(--fs-14); min-width: 11.25rem; }
.filter-bar.hidden { display: none; }
.filter-bar-checkbox { display: flex; flex-direction: row; align-items: center; align-self: center; gap: var(--sp-8); font-size: var(--fs-14); font-weight: 500; color: var(--text); cursor: pointer; }
.filter-bar-checkbox input[type="checkbox"] { width: var(--sp-16); height: var(--sp-16); cursor: pointer; }

/* ── Inner Tabs (Personen Übersicht / Person) ─────────────── */
.inner-tab-bar {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-20);
}
.inner-tab, .stellen-tab, .einst-tab {
  padding: var(--sp-6) var(--sp-16);
  border-radius: var(--r-6);
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
  font-size: var(--fs-14);
  cursor: pointer;
  font-weight: 500;
}
.inner-tab.active, .stellen-tab.active, .einst-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.inner-tab-bar.hidden { display: none; }

/* ── Personen Übersicht Tabelle ────────────────────────────── */
.personen-uebersicht-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.personen-uebersicht-table th { text-align: left; padding: var(--sp-8) var(--sp-12); font-size: var(--fs-12); color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.personen-uebersicht-table td { padding: var(--sp-10) var(--sp-12); border-bottom: 1px solid var(--line); vertical-align: middle; }
.personen-uebersicht-table tr:last-child td { border-bottom: none; }
.pu-row:hover td { background: var(--soft); cursor: pointer; }
.pu-row-active td { background: #eff6ff; border-left: 3px solid var(--accent); }
.pu-row-active:hover td { background: #dbeafe; }
.pu-row-active td:not(:first-child) { border-left: none; }
.pu-th { cursor: pointer; user-select: none; }
.pu-th:hover { color: var(--text); }
.pu-th-active { color: var(--accent) !important; }
.pu-name { font-weight: 600; }
.pu-active-badge { display: inline-block; margin-left: var(--sp-6); padding: 0.0625rem var(--sp-8); border-radius: var(--r-10); font-size: var(--fs-11); font-weight: 600; background: var(--accent); color: #fff; vertical-align: middle; }
.pu-abt-badge { display: inline-block; padding: var(--sp-2) var(--sp-8); border-radius: var(--r-4); font-size: var(--fs-12); background: var(--soft); border: 1px solid var(--line); }
.pu-zeitraum { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-2); }
.pu-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-16); }
.pu-pager-info { font-size: var(--fs-13); }
.pu-pager button:disabled { opacity: 0.4; cursor: default; }

/* ── Azubi Archiv ─────────────────────────────────────────── */
.archiv-list { display: flex; flex-direction: column; gap: var(--sp-10); margin-top: var(--sp-8); }
.archiv-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-14);
  padding: var(--sp-14) var(--sp-20);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-16);
  align-items: center;
  cursor: pointer;
  transition: box-shadow .15s;
}
.archiv-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.archiv-card-info { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.archiv-card-headline { display: flex; align-items: baseline; gap: var(--sp-10); flex-wrap: wrap; }
.archiv-card-name { font-weight: 600; font-size: var(--fs-15); white-space: nowrap; }
.archiv-card-beruf { font-size: var(--fs-13); color: var(--muted); }
.archiv-card-zeitraum { font-size: var(--fs-13); color: var(--muted); }
.archiv-card-stats { display: flex; gap: var(--sp-20); align-items: center; }
.archiv-card-stat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.archiv-card-stat-label { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.archiv-progress-wrap { width: 6.25rem; height: var(--sp-8); background: var(--line); border-radius: 99px; overflow: hidden; }
.archiv-progress-bar { height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.archiv-card-actions { display: flex; gap: var(--sp-8); align-items: center; }
.archiv-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.125rem, 1fr));
  gap: var(--sp-12);
  margin: var(--sp-16) 0;
}
.archiv-stat {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: var(--sp-12) var(--sp-16);
  text-align: center;
}
.archiv-stat-value { font-size: 1.5rem; font-weight: 700; }
.archiv-stat-label { font-size: var(--fs-12); color: var(--muted); margin-top: var(--sp-2); }
.archiv-bereich-list { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.archiv-bereich-row { display: grid; grid-template-columns: 7.5rem 1fr 2.75rem 2.75rem; align-items: center; column-gap: 0; gap: 0; font-size: var(--fs-13); }
.archiv-bereich-row > *:nth-child(1) { padding-right: var(--sp-10); }
.archiv-bereich-row > *:nth-child(3) { padding: 0 var(--sp-4) 0 var(--sp-6); text-align: right; }
.archiv-bereich-row > *:nth-child(4) { padding-left: var(--sp-16); }
.archiv-bereich-bar-wrap { height: 0.4375rem; background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.archiv-bereich-bar { height: 100%; background: var(--accent); border-radius: var(--r-full); }
.archiv-bereich-note { display: flex; align-items: center; gap: var(--sp-6); }
.abschluss-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-8);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  background: #d4f4e2;
  color: #14532d;
  border: 1px solid #86efac;
}

/* ── Rückfragen Badge ── */
.rueckfrage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
  margin-left: var(--sp-4);
  vertical-align: middle;
  cursor: default;
}

.wiederhol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  margin-left: var(--sp-4);
  vertical-align: middle;
  cursor: default;
}

/* ── Rückfragen in Dialog ── */
.rueckfragen-list { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-10); }
.rueckfrage-empty { color: var(--muted); font-size: var(--fs-13); margin: 0 0 var(--sp-8); }
.rueckfrage-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-10) var(--sp-12); background: var(--soft); border-radius: var(--r-8); }
.rueckfrage-item.erledigt { opacity: 0.5; }
.rueckfrage-item.erledigt .rueckfrage-text { text-decoration: line-through; }
.rueckfrage-text { flex: 1; font-size: var(--fs-14); }
.rueckfrage-meta { display: flex; align-items: center; gap: var(--sp-8); flex-shrink: 0; }
.rueckfrage-date { font-size: var(--fs-11); color: var(--muted); }
.rueckfrage-erledigt-label { font-size: var(--fs-12); color: #15803d; font-weight: 600; }
.btn-rq-del { padding: var(--sp-2) var(--sp-8) !important; font-size: var(--fs-11) !important; }
.btn-rq-erledigt { padding: var(--sp-2) var(--sp-10) !important; font-size: var(--fs-11) !important; }
.rueckfrage-form { display: flex; gap: var(--sp-8); align-items: center; }
.rueckfrage-input { flex: 1; padding: var(--sp-6) var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-8); font-size: var(--fs-13); background: var(--bg); color: var(--fg); }
.rueckfrage-input:focus { outline: none; border-color: var(--accent); }

/* ── Report Dialog ── */
#reportDialog { width: min(53.75rem, calc(100vw - var(--sp-32))); max-height: 90vh; padding: 0; border-radius: var(--r-18); overflow: hidden; }
#reportDialog::backdrop { background: rgba(0,0,0,.45); }
.report-dialog-inner { display: flex; flex-direction: column; height: 90vh; max-height: 90vh; }
.report-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-16) var(--sp-24); border-bottom: 1px solid var(--line); flex-shrink: 0; }
#reportContent { overflow-y: auto; padding: var(--sp-32) var(--sp-40); flex: 1; }

/* Report Sections */
.report-cover { margin-bottom: var(--sp-32); padding-bottom: var(--sp-24); border-bottom: 2px solid var(--line); }
.report-cover h1 { font-size: 1.375rem; margin: 0 0 var(--sp-4); }
.report-cover .report-meta { font-size: var(--fs-13); color: var(--muted); display: flex; gap: var(--sp-24); flex-wrap: wrap; margin-top: var(--sp-12); align-items: flex-end; }
.report-cover .report-meta span { display: flex; flex-direction: column; gap: var(--sp-4); }
.report-cover .report-meta strong { color: var(--fg); font-size: var(--fs-15); font-weight: 700; display: flex; align-items: center; height: var(--sp-28); }
.report-section { margin-bottom: var(--sp-32); }
.report-section h2 { font-size: var(--fs-15); font-weight: 700; margin: 0 0 var(--sp-14); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.report-stat-row { display: flex; gap: var(--sp-12); flex-wrap: wrap; margin-bottom: var(--sp-16); }
.report-stat-box { background: var(--soft); border-radius: var(--r-12); padding: var(--sp-12) var(--sp-16); min-width: 6.25rem; text-align: center; }
.report-stat-box .val { font-size: 1.375rem; font-weight: 700; }
.report-stat-box .lbl { font-size: var(--fs-11); color: var(--muted); margin-top: var(--sp-2); }
.report-themen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.report-themen-col h4 { font-size: var(--fs-12); font-weight: 600; color: var(--muted); text-transform: uppercase; margin: 0 0 var(--sp-8); }
.report-themen-col ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-13); display: flex; flex-direction: column; gap: var(--sp-2); }
.report-staerken-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.report-staerken-col h4 { font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; margin: 0 0 var(--sp-8); }
.report-staerken-col.gut h4 { color: #16a34a; }
.report-staerken-col.schwach h4 { color: #dc2626; }
.report-staerken-col ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-13); display: flex; flex-direction: column; gap: var(--sp-4); }
.report-monat-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.report-monat-table th { text-align: left; padding: var(--sp-6) var(--sp-10); border-bottom: 1px solid var(--line); font-size: var(--fs-11); color: var(--muted); text-transform: uppercase; }
.report-monat-table td { padding: var(--sp-6) var(--sp-10); border-bottom: 1px solid var(--soft); }
.report-auffaellig-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.report-auffaellig-row { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-13); padding: var(--sp-6) var(--sp-10); background: var(--soft); border-radius: var(--r-8); }
.report-auffaellig-bereich { font-size: var(--fs-11); color: var(--muted); }

/* ── Print Styles ── */
@media print {
  @page {
    size: A4 portrait;
    margin: 15mm 18mm 20mm;
    @bottom-right {
      content: "Seite " counter(page) " von " counter(pages);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 9pt;
      color: #999;
    }
  }
  html, body { background: white !important; }
  body > *:not(#reportDialog) { display: none !important; }
  #reportDialog { display: block !important; position: static !important; width: 100% !important; max-height: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .report-dialog-inner { height: auto !important; max-height: none !important; overflow: visible !important; }
  .no-print { display: none !important; }
  #reportContent { overflow: visible !important; padding: 0 !important; }
  .report-cover { page-break-after: avoid; padding-top: 4mm; }
  .report-section { page-break-inside: avoid; }
  .report-section.page-break { page-break-before: always; }
  .report-themen-grid, .report-staerken-grid { grid-template-columns: 1fr 1fr; }
  .grade-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .archiv-bereich-bar, .archiv-progress-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-stat-box { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-auffaellig-row { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Person Views ── */
.person-plan-table { min-width: unset; table-layout: auto; width: 100%; }
.person-plan-table th:nth-child(1), .person-plan-table td:nth-child(1) { white-space: nowrap; width: 6.875rem; }
.person-plan-table th:nth-child(2), .person-plan-table td:nth-child(2) { white-space: nowrap; width: 3rem; }
.person-plan-table th:nth-child(3), .person-plan-table td:nth-child(3) { white-space: nowrap; width: 4rem; }
.person-plan-table th:nth-child(4), .person-plan-table td:nth-child(4) { white-space: nowrap; width: 6.875rem; min-width: unset; }
.person-plan-table th:nth-child(5), .person-plan-table td:nth-child(5) { white-space: nowrap; width: 8.125rem; }
.person-plan-table th:nth-child(6), .person-plan-table td:nth-child(6) { white-space: normal; min-width: 10rem; padding-left: 4ch; }

.person-plan-filters { display: flex; gap: var(--sp-6); }
.person-plan-filter { padding: var(--sp-6) var(--sp-14) !important; font-size: var(--fs-13) !important; }
.person-plan-filter.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

.person-themen-list { display: flex; flex-direction: column; gap: var(--sp-12); }
.person-thema-card { background: var(--soft); border-radius: var(--r-12); padding: var(--sp-16) var(--sp-16); border: 1px solid var(--line); }
.person-thema-header { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.person-thema-bereich { font-size: var(--fs-11); color: var(--muted); background: var(--line); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-8); margin-left: auto; }
.person-thema-meta { font-size: var(--fs-12); color: var(--muted); margin-bottom: var(--sp-6); }
.person-thema-erklaerung { font-size: var(--fs-14); margin: 0; color: var(--fg); }

/* Meine Themen — neue Ansicht */
.pt-bereich-section { margin-bottom: var(--sp-24); }
.pt-bereich-header { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-10) 0 var(--sp-8); border-bottom: 2px solid var(--border); margin-bottom: var(--sp-8); }
.pt-bereich-name { font-weight: 700; font-size: var(--fs-15); }
.pt-bereich-progress { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; }
.pt-progress-bar { width: 5rem; height: var(--sp-6); background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.pt-progress-fill { height: 100%; background: var(--success, #22c55e); border-radius: var(--r-full); transition: width .3s; }
.pt-progress-label { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }

.pt-gruppe-row td { background: var(--soft) !important; padding: var(--sp-6) var(--sp-16) !important; }
.pt-gruppe-header { font-size: var(--fs-11); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
/* Feste Spaltenbreiten (Prozent) → alle Bereichs-Tabellen identisch ausgerichtet */
.pt-themen-table { min-width: 75rem; table-layout: fixed; width: 100%; }
.pt-themen-table th, .pt-themen-table td { overflow: hidden; text-overflow: ellipsis; }
.pt-themen-table th:nth-child(1),
.pt-themen-table td:nth-child(1) { width: 11%; white-space: nowrap; text-align: left; padding-right: 4ch; }
.pt-themen-table th:nth-child(2),
.pt-themen-table td:nth-child(2) { width: 31%; text-align: left; }
.pt-themen-table th:nth-child(3),
.pt-themen-table td:nth-child(3) { width: 20%; white-space: nowrap; font-size: var(--fs-13); color: var(--muted); text-align: left; }
.pt-themen-table th:nth-child(4),
.pt-themen-table td:nth-child(4) { width: 14%; white-space: nowrap; text-align: left; }
.pt-themen-table th:nth-child(5),
.pt-themen-table td:nth-child(5) { width: 24%; white-space: nowrap; text-align: left; }
.pt-last-who-cell { font-size: var(--fs-13); color: var(--muted); }
.pt-erklaert-inner { display: inline-flex; align-items: center; gap: var(--sp-8); }
.pt-actions-cell { display: flex; align-items: center; gap: var(--sp-6); justify-content: flex-end; }
.pt-history-btn { font-size: var(--fs-12) !important; padding: var(--sp-2) var(--sp-8) !important; }
.pt-wiederholen-btn { font-size: var(--fs-12) !important; padding: var(--sp-2) var(--sp-8) !important; }
.pt-wiederholen-btn[disabled] { cursor: default; opacity: 1; }
.pt-wiederholen-btn.gewuenscht { background: #ffedd5 !important; border-color: #ffedd5 !important; color: #9a3412 !important; }
.pt-wiederholen-btn.wiederholt { background: #d4f4e2 !important; border-color: #d4f4e2 !important; color: #14532d !important; }
.pt-pending { opacity: 0.42; }

.pt-row-actions { position: relative; display: flex; align-items: center; gap: var(--sp-6); justify-content: flex-start; }
.pt-bericht-btn { font-size: var(--fs-12) !important; padding: var(--sp-2) var(--sp-10) !important; max-width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-bericht-btn.eingereicht { background: #ffedd5 !important; border-color: #ffedd5 !important; color: #9a3412 !important; }
.pt-bericht-btn.freigegeben { background: #d4f4e2 !important; border-color: #d4f4e2 !important; color: #14532d !important; }
.pt-bericht-btn.abgelehnt { background: #fee2e2 !important; border-color: #fee2e2 !important; color: #991b1b !important; }
.pt-grund-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--sp-24); height: var(--sp-24);
  border-radius: 50%; border: none; background: #fee2e2; color: #991b1b; cursor: pointer;
  margin-left: var(--sp-6); vertical-align: middle; padding: 0; }
.pt-grund-btn:hover { background: #fecaca; }

.pt-bericht-popover { position: fixed; z-index: 1000; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-12); padding: var(--sp-6); box-shadow: 0 4px 20px rgba(0,0,0,.15); width: 17.5rem; max-height: 17.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.pt-bericht-week { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--r-8); padding: var(--sp-8) var(--sp-10); font-size: var(--fs-13); cursor: pointer; color: var(--fg); }
.pt-bericht-week:hover:not(:disabled) { background: var(--soft); }
.pt-bericht-week.active { background: #d4f4e2; color: #14532d; }
.pt-bericht-week:disabled { opacity: 0.35; cursor: not-allowed; }
.pt-bericht-empty { padding: var(--sp-10); font-size: var(--fs-13); color: var(--muted); }

.bericht-status { display: inline-block; padding: var(--sp-2) var(--sp-10); border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 600; }
.bericht-status.eingereicht { background: #ffedd5; color: #9a3412; }
.bericht-status.freigegeben { background: #d4f4e2; color: #14532d; }
.bericht-status.abgelehnt { background: #fee2e2; color: #991b1b; }

/* Berichtsheft: Vorgaben je Abteilung (Admin/Ausbilder) */
.bh-vorgaben { margin-bottom: var(--sp-20); }
.bh-abt-fixed { display: inline-flex; align-items: center; padding: var(--sp-8) var(--sp-12); border-radius: var(--r-10);
  background: var(--soft); border: 1px solid var(--line); font-size: var(--fs-14); color: var(--text); }
.bh-vorgaben-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-12); }
.bh-vorgaben-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.bh-vorgaben-grid label { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.bh-vorgaben-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .bh-vorgaben-grid { grid-template-columns: 1fr; } }

/* Berichtsheft-Infobox bei der Person (Meine Themen) */
.bh-infobox { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--r-12); padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-13); margin-bottom: var(--sp-16); }
.bh-infobox > div { display: flex; align-items: center; gap: var(--sp-8); }
.bh-mail-btn { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-14); border-radius: var(--r-full);
  background: var(--accent); color: #fff; font-size: var(--fs-12); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bh-mail-btn:hover { opacity: 0.9; }

/* Feste Berichtsthemen (Person, Meine Themen) */
.bh-fest-card { margin-bottom: var(--sp-16); }
.bh-fest-head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-10); }
.bh-fest-head strong { display: inline-flex; align-items: center; gap: var(--sp-8); }
.bh-fest-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) 0; border-bottom: 1px solid var(--soft); font-size: var(--fs-13); }
.bh-fest-row:last-child { border-bottom: none; }
.bh-fest-nr { flex-shrink: 0; width: var(--sp-24); height: var(--sp-24); border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: 700; }
.bh-fest-thema { flex: 1; font-weight: 600; }
.bh-fest-action { display: inline-flex; align-items: center; }

/* Feste Themen: Pflege-Liste in der Vorgaben-Karte */
.bh-vorgaben-field { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--fs-13); font-weight: 600; color: var(--muted); }
.bh-fest-edit-list { display: flex; flex-direction: column; }
.bh-fest-edit-row { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-6) 0; border-bottom: 1px solid var(--soft);
  font-weight: 400; color: var(--text); }
.bh-fest-edit-row:last-child { border-bottom: none; }
.bh-fest-remove { font-size: var(--fs-12) !important; padding: var(--sp-2) var(--sp-10) !important; margin: 0 !important; }
.bh-fest-add { display: flex; gap: var(--sp-8); align-items: center; margin-top: var(--sp-4); }
.bh-fest-add select { flex: 1; min-width: 0; }
.bericht-freigabe-meta { margin-left: var(--sp-8); font-size: var(--fs-12); color: var(--muted); }
.berichtsheft-table { min-width: 0; table-layout: auto; width: 100%; }
.bericht-action-cell { white-space: nowrap; text-align: right; }

.pt-history-popover { position: absolute; z-index: 200; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-12); padding: var(--sp-12); box-shadow: 0 4px 20px rgba(0,0,0,.15); min-width: 16.25rem; max-width: 20rem; }
.pt-history-title { font-weight: 600; font-size: var(--fs-13); margin-bottom: var(--sp-8); color: var(--fg); }
.pt-history-item { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.pt-history-item:last-child { border-bottom: none; }
.pt-history-date { color: var(--muted); white-space: nowrap; min-width: 4.0625rem; }
.pt-history-who { flex: 1; }
.pt-row-meta { position: relative; }

.fortschritt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); align-items: stretch; }
.fortschritt-left { background: var(--card); border-radius: var(--r-14); padding: var(--sp-20); border: 1px solid var(--line); min-width: 0; }
/* Zeilen bewusst nicht fixiert — es können vier oder fünf Karten sein,
   je nachdem ob es nicht eingeplante Themen gibt. */
.fortschritt-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-12); align-content: start; }
.fortschritt-stat-card { border-radius: var(--r-14); padding: var(--sp-20) var(--sp-16); text-align: center; border: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fortschritt-erledigt  { background: #d4f4e2; color: #14532d; }
.fortschritt-offen     { background: #e8f0ff; color: #1a3a8f; }
.fortschritt-unsicher  { background: #fff3cd; color: #7a4900; }
.fortschritt-wiederholen { background: #fde0d8; color: #7a1f1f; }
.fortschritt-nichteingeplant { background: #f2f2f7; color: #8e8e93; }
.fortschritt-stat-zahl { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.fortschritt-stat-label { font-size: var(--fs-12); font-weight: 600; margin-top: var(--sp-6); opacity: .75; }
.fortschritt-gesamt-label { font-size: var(--fs-14); font-weight: 600; color: var(--muted); margin-bottom: var(--sp-8); }
.fortschritt-hinweis { font-weight: 400; opacity: .8; }
.fortschritt-gesamt-bar-wrap { background: var(--line); border-radius: var(--r-full); height: var(--sp-12); margin-bottom: var(--sp-24); overflow: hidden; }
.fortschritt-gesamt-bar { background: #34c759; height: 100%; border-radius: var(--r-full); transition: width .4s; }
.fortschritt-bereiche { display: flex; flex-direction: column; gap: var(--sp-14); }
.fortschritt-bereich-header { display: flex; justify-content: space-between; margin-bottom: var(--sp-6); font-size: var(--fs-14); font-weight: 600; }
.fortschritt-prozent { font-size: var(--fs-13); color: var(--muted); font-weight: 400; }
.fortschritt-bar-wrap { background: var(--line); border-radius: var(--r-full); height: var(--sp-8); overflow: hidden; }
.fortschritt-bar { background: #34c759; height: 100%; border-radius: var(--r-full); transition: width .4s; }
@media (max-width: 680px) { .fortschritt-layout { grid-template-columns: 1fr; } .fortschritt-cards { grid-template-columns: repeat(2, 1fr); } }