/* === Design-Tokens === */
:root {
  --accent:        #0071e3;
  --accent-hover:  #0077ed;
  --accent-active: #006ad1;
  --accent-soft:   #e8f1fd;

  --text:          #1d1d1f;
  --text-muted:    #6e6e73;
  --text-subtle:   #86868b;

  --bg:            #f5f5f7;
  --surface:       #ffffff;
  --surface-alt:   #fafafc;
  --surface-sunk:  #f0f0f2;

  --line:          #d2d2d7;
  --line-soft:     #e8e8ed;

  --green:         #248a3d;
  --amber:         #b25000;
  --red:           #d70015;
  --red-hover:     #e8112d;
  --red-active:    #b8000f;

  /* Flächen des Anwesenheits-Kacheln im Zustand "anwesend" — eigene Tokens,
     weil eine feste rgba-Grünfläche im Dark Mode nicht trägt. */
  --attend-bg:       rgba(36,138,61,.10);
  --attend-bg-hover: rgba(36,138,61,.16);

  /* Kopfband der Wochenbericht-Karten je Änderungsart. Das Band trägt weiße
     Schrift, deshalb etwas dunkler als --green (#248a3d käme nur auf
     Kontrast 4,4 : 1 und bliebe damit unter den 4,5 : 1 für normalen Text). */
  --band-neu:         #0071e3;
  --band-fortschritt: #22823a;

  /* Gelbe Markierung neu hinzugekommener Protokoll-Punkte — bewusst eigenes
     Token statt --band-neu (dort blau, bedeutet "neu kommentiertes Projekt"
     im Wochenbericht — eine andere Bedeutung, die hier kollidieren würde). */
  --protokoll-neu-bg:     #fff6db;
  --protokoll-neu-border: #e6b800;

  /* Die drei Zustände eines Protokoll-Punkts (protokoll_punkte.status) —
     eigene Bezeichner statt direkter --amber/--green/--accent-Nutzung an
     jeder Stelle, damit sich die Farbzuordnung an einer Stelle ändern
     ließe, ohne jede Verwendung einzeln anzufassen. Referenzieren andere
     Tokens per var(), lösen sich also auch im Dark Mode korrekt auf, ohne
     dort erneut definiert zu werden. --status-info-bg ist die Fläche einer
     kompletten Info-Zeile in der Protokoll-Tabelle (color-mix statt fester
     rgba-Werte, damit die Deckkraft in beiden Themes gleich wirkt). */
  --status-offen:    var(--amber);
  --status-erledigt: var(--green);
  --status-info:     var(--accent);
  --status-info-bg:  color-mix(in srgb, var(--accent) 8%, transparent);

  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 980px;

  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --sh-2: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sh-3: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* === Basis & Reset === */
* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.container { padding: 20px 24px; }

/* === App-Shell: globales Menüband oben + linke Navigations-Sidebar +
   Hauptbereich (OpenProject-Anordnung: ein durchgehendes globales Menüband
   trägt Marke, aktuellen Kontext [Sitzung] und alle Aktionen/Konto rechts;
   die Sidebar darunter ist reine Modul-Navigation, sonst nichts) === */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-body  { display: flex; flex: 1; min-height: 0; }
.app-main  { flex: 1; min-width: 0; }

/* Generisches Icon-System (js/icons.js): Icons skalieren wie ein Zeichen mit
   der umgebenden Schriftgröße (1.1em), erben die Textfarbe über currentColor. */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 1.1em; height: 1.1em; display: block; }

/* === Globales Menüband (immer sichtbar, alle Breiten) === */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 12px;
  padding: 8px 20px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}

.mobile-nav-toggle { display: inline-flex; }
@media (min-width: 769px) { .app-topbar .mobile-nav-toggle { display: none; } }

.topbar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-logo  { height: 28px; width: auto; object-fit: contain; }
.topbar-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}


.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.toolbar-group { display: flex; align-items: center; gap: 4px; }

.toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line-soft);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .app-topbar-actions {
    order: 4;
    flex: 1 1 100%;
    margin-left: 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

.header-toggle {
  position: relative;
  z-index: 10;
  padding: 6px 10px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s var(--ease), color .2s var(--ease), transform .1s var(--ease);
}

.theme-toggle-circle:hover { background: var(--line-soft); }
.theme-toggle-circle:active { transform: scale(.95); }

.icon-btn-danger:hover { background: var(--red); color: #fff; }
.icon-btn-danger:active { background: var(--red-active); }

/* Konto-Menü (Avatar-Knopf rechts im Menüband + Dropdown) */
.topbar-user { position: relative; }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s var(--ease);
}

.user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-info {
  padding: 8px 10px 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-muted);
}

/* .menu-item: generischer Zeilen-Knopf/-Link (Text + optionales Icon) —
   genutzt im Konto-Dropdown (dort über .user-menu-dropdown volle Breite) UND
   als Basis für die Sidebar-Unterpunkte (siehe .sidebar-subitem). */
a.menu-item,
button.menu-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border: none;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease);
}

a.menu-item:hover,
button.menu-item:hover { background: var(--surface-sunk); }

.user-menu-dropdown a.menu-item,
.user-menu-dropdown button.menu-item { display: flex; width: 100%; }

/* === Seiten-Navigation (links, reine Modul-Navigation) === */
.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 80vw;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
  box-shadow: var(--sh-3);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform .3s var(--ease);
  display: flex;
  flex-direction: column;
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu-mobile-header {
  display: flex;
  justify-content: flex-end;
  padding: 8px 8px 0;
}
@media (min-width: 769px) { .side-menu-mobile-header { display: none; } }

.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.sidebar-collapse-bar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sidebar-collapse-bar:hover { background: var(--surface-sunk); color: var(--text); }
.sidebar-collapse-bar:active { transform: none; }

#sidebarCollapseIcon { transition: transform .2s var(--ease); }

/* === Wandtafel / Dashboard (js/wand/wand.js) ===
   Touch-Dashboard für ein dauerhaft laufendes Display, gewerke- und
   nutzerübergreifend — ersetzt den früheren Show Mode, der nur die gerade
   angemeldete Sitzung großflächig klonte (keine Aggregation über Gewerke
   oder Nutzer hinweg, siehe CLAUDE.md). Seitenleiste und Kopfzeile blendet
   showTab() über body.wandtafel-aktiv aus: Das Kiosk-Konto ist ein
   gewöhnliches Mitgliedskonto mit echten Schreibrechten — die Kachelfläche
   soll die einzige Berührfläche sein, damit eine zufällige Berührung nicht
   in einen bearbeitbaren Bereich wie "Projekte" führt.
   Aufbau (Eriks Wahl aus dem Vergleich mehrerer Gesamtentwürfe, "Leitstand"-
   Struktur, später in Eriks eigener Logo-Farbwelt umgesetzt): Kopf
   (Marke "Dashboard" + Sitzung/Uhrzeit + Abwesend-Kürzel) → eine
   Kennzahlen-Reihe aus vier Kacheln (Auslastung gesamt, Besprochen gesamt,
   offene Aufgaben, überfällig) → eine Reihe aus drei Panels (Auslastung je
   Gewerk, Besprochen je Gewerk, Aktuell). Verhält sich zusätzlich wie ein
   fester Bildschirmausschnitt statt einer normal scrollenden Seite
   (height:100vh + overflow:hidden auf dem Weg .app-main → .container →
   #wand) — ein unbeaufsichtigtes Display soll von selbst nie scrollen
   müssen; Kopf, Kennzahlen-Reihe und Panel-Reihe strecken sich über die
   volle restliche Höhe.
   AUSNAHME, auf Eriks Wunsch (echter Touch-Monitor, "ich kann mich vor die
   Tafel stellen und scrollen"): unterhalb davon folgt die vollständige
   Projektliste (wandProjektlisteHtml(), js/wand/wand.js), und NUR dieser
   Bereich (#wandContent, Klasse .wand-scrollable, von renderWandboard()
   gesetzt) scrollt — eine offene Übersicht bleibt weiter exakt einen
   Bildschirm hoch, siehe .wand-uebersicht unten. Ohne Berührung kehrt die
   Ansicht nach WAND_IDLE_MS von selbst an den Anfang zurück
   (wandAktivitaetErkannt()/wandBeiUntaetigkeitZuruecksetzen()). */
body.wandtafel-aktiv .app-topbar,
body.wandtafel-aktiv .side-menu,
body.wandtafel-aktiv .side-menu-backdrop { display: none !important; }
body.wandtafel-aktiv .app-main { height: 100vh; overflow: hidden; }
body.wandtafel-aktiv .container {
  height: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 14px 20px;
  background: var(--dash-bg);
}
body.wandtafel-aktiv #wand { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }

/* Eigene Farbwelt der Wandtafel — bewusst GETRENNT von --accent/--surface der
   übrigen App: Eriks Wahl ("Pastell Freundlich", aus dem Design-Vergleich der
   Gesamtentwürfe) nutzt die zwei Farben des Firmenlogos (aus public/logo.ico
   ausgelesen: #94b0cc helles, #116896 dunkles Blau) statt des generischen
   App-Akzents. Jede Fläche (Kennzahlen, Panels) trägt eine eigene, davon
   abgeleitete Tönung. Rot/Gelb bleiben als Warn-/Kritisch-Farben eigenständig
   (müssen unabhängig von der Markenfarbe sofort erkennbar bleiben), nur
   gedeckter gewählt, damit sie zum Blau passen statt dagegen zu stehen.
   --dash-hover ist eine reine Hervorhebung beim Antippen (kein Ersatz einer
   bestehenden Flächenfarbe), deshalb für beide Modi eigens abgestimmt statt
   eines einzigen hartkodierten Werts. */
body.wandtafel-aktiv {
  --dash-bg: #f7fafc;
  --dash-surface: #ffffff;
  --dash-ink: #116896;
  --dash-ink-soft: #94b0cc;
  --dash-text: #20282e;
  --dash-text-muted: #5d7488;
  --dash-text-subtle: #8a9aa6;
  --dash-panel-1: #dde9f1;
  --dash-panel-2: #cfe0ea;
  --dash-panel-3: #e7eff5;
  --dash-kpi-4: #f6e3e0;
  --dash-warn: #9a5a1f;
  --dash-crit: #b8463f;
  --dash-line: #e7eef3;
  --dash-hover: rgba(17, 104, 150, .07);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.wandtafel-aktiv {
    --dash-bg: #10181f; --dash-surface: #141c23;
    --dash-ink: #7fc3dd; --dash-ink-soft: #4a7691;
    --dash-text: #e7eef3; --dash-text-muted: #9fb3c0; --dash-text-subtle: #70838f;
    --dash-panel-1: #16222c; --dash-panel-2: #141e27; --dash-panel-3: #131b22; --dash-kpi-4: #2a1f1c;
    --dash-warn: #e8a15c; --dash-crit: #ef6f63;
    --dash-line: #223039; --dash-hover: rgba(255, 255, 255, .06);
  }
}
html[data-theme="dark"] body.wandtafel-aktiv {
  --dash-bg: #10181f; --dash-surface: #141c23;
  --dash-ink: #7fc3dd; --dash-ink-soft: #4a7691;
  --dash-text: #e7eef3; --dash-text-muted: #9fb3c0; --dash-text-subtle: #70838f;
  --dash-panel-1: #16222c; --dash-panel-2: #141e27; --dash-panel-3: #131b22; --dash-kpi-4: #2a1f1c;
  --dash-warn: #e8a15c; --dash-crit: #ef6f63;
  --dash-line: #223039; --dash-hover: rgba(255, 255, 255, .06);
}

.wand-kopfzeile {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.wand-zurueck {
  appearance: none;
  border: none;
  background: none;
  color: var(--text-subtle);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}
.wand-zurueck:hover { color: var(--text-muted); }

/* wandIdleCountdown (js/wand/wand.js): die verbleibende Zeit bis zum
   automatischen Rücksprung in den Normalzustand (WAND_IDLE_MS) — Erik wollte
   sehen können, wann das passiert, statt davon überrascht zu werden. Sitzt
   bewusst AUSSERHALB von #wandContent, damit sie von dessen Neu-Rendern
   (jeder Datenabgleich, jedes Auf-/Zuklappen) unberührt bleibt. */
.wand-idle-countdown { flex-shrink: 0; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Normalzustand: #wandContent selbst bleibt genau ein Bildschirm hoch, kein
   Scrollen (das ist der Zustand, den eine offene Übersicht ebenfalls nutzt —
   siehe .wand-uebersicht). Erst .wand-scrollable (von renderWandboard()
   gesetzt, wenn KEINE Übersicht offen ist) schaltet auf einen normalen
   Block-Scrollcontainer um, dessen erstes Kind (.wand-ambient) weiterhin
   genau einen Bildschirm hoch ist — die Projektliste danach verlängert den
   Inhalt darüber hinaus und erzeugt dadurch den Scrollbalken. */
.wand-grid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--dash-bg); }
.wand-grid-wrap.wand-scrollable { display: block; overflow-y: auto; }
.wand-ambient { min-height: 100%; display: flex; flex-direction: column; }

/* ===== Kopf: Marke "Dashboard" + Sitzung/Uhrzeit + Abwesend-Mini ===== */
.dash-kopf { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dash-marke { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 19px; color: var(--dash-ink); }
.dash-kopf-rechts { display: flex; align-items: center; gap: 14px; }
.dash-datum { font-size: 12.5px; color: var(--dash-text-muted); background: var(--dash-panel-3); padding: 4px 12px; border-radius: var(--r-pill); }
.dash-abwesend-mini { display: flex; }
.dash-abwesend-mini.ist-klickbar { cursor: pointer; border-radius: var(--r-pill); }
.dash-abwesend-mini.ist-klickbar:hover { filter: brightness(.96); }
.dash-avatar-mini {
  width: 25px; height: 25px; border-radius: 50%; background: var(--dash-panel-2); color: var(--dash-ink);
  font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  margin-left: -7px; border: 2px solid var(--dash-bg);
}
.dash-avatar-mini:first-child { margin-left: 0; }

/* ===== Kennzahlen-Reihe (4 Kacheln) ===== */
.dash-kpi-reihe { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.dash-kpi { border-radius: var(--r-xl); padding: 16px 18px; }
.dash-kpi:nth-child(1) { background: var(--dash-panel-1); }
.dash-kpi:nth-child(2) { background: var(--dash-panel-2); }
.dash-kpi:nth-child(3) { background: var(--dash-panel-3); }
.dash-kpi:nth-child(4) { background: var(--dash-kpi-4); }
.dash-kpi.ist-klickbar { cursor: pointer; }
.dash-kpi.ist-klickbar:hover { filter: brightness(.96); }
.dash-kpi-label { font-size: 11px; font-weight: 700; color: var(--dash-text-muted); margin-bottom: 8px; }
.dash-kpi-wert { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 32px; color: var(--dash-ink); font-variant-numeric: tabular-nums; }
.dash-kpi-wert.ok { color: var(--dash-ink); }
.dash-kpi-wert.info { color: var(--dash-ink-soft); }
.dash-kpi-wert.warn { color: var(--dash-warn); }
.dash-kpi-wert.crit { color: var(--dash-crit); }

/* ===== Drei-Panel-Reihe: Auslastung / Besprochen / Aktuell =====
   Dieselbe Kacheltechnik wie zuvor (space-evenly auf .dash-panel-body) —
   der Inhalt verteilt sich gleichmäßig über die volle Höhe statt oben zu
   kleben, damit ein dünn befülltes Panel neben einem vollen nicht leer
   wirkt. */
.dash-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; }
.dash-panel { border-radius: var(--r-xl); padding: 18px 20px; display: flex; flex-direction: column; min-height: 0; }
.dash-grid > .dash-panel:nth-child(1) { background: var(--dash-panel-1); }
.dash-grid > .dash-panel:nth-child(2) { background: var(--dash-panel-2); }
.dash-grid > .dash-panel:nth-child(3) { background: var(--dash-panel-3); }
.dash-panel-titel { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--dash-ink); margin-bottom: 12px; }
.dash-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; }

/* Meter-Zeilen: Auslastung je Gewerk, Wochenbericht-Fortschritt je Gewerk —
   jede Zeile einzeln antippbar (wandZeigeUebersicht('auslastung'|'besprochen', g)). */
.wand-meter-zeile { display: flex; align-items: center; gap: 12px; }
.wand-meter-zeile.ist-klickbar { cursor: pointer; border-radius: var(--r-md); margin: 0 -6px; padding: 3px 6px; transition: background .15s var(--ease); }
.wand-meter-zeile.ist-klickbar:hover { background: var(--dash-hover); }
.wand-meter-label { flex: 0 0 90px; font-size: 13px; font-weight: 600; color: var(--dash-text); }
.wand-meter {
  flex: 1; height: 14px; background: rgba(127, 127, 127, .18); border-radius: var(--r-pill);
  overflow: hidden; display: flex; align-items: center;
}
.wand-meter-fill { height: 100%; border-radius: var(--r-pill); transition: width .3s var(--ease); }
.wand-meter-leer { font-size: 12px; color: var(--dash-text-subtle); padding-left: 4px; }
.wand-meter-wert {
  flex: 0 0 76px; text-align: right; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: 'Fredoka', sans-serif; color: var(--dash-ink);
}
.wand-einheit { font-size: 11px; font-weight: 400; color: var(--dash-text-subtle); margin-left: 2px; }
.wand-leer-klein { font-size: 11.5px; color: var(--dash-text-subtle); }

/* "Aktuell": flache, chronologisch sortierte Ereignisliste (wandAktuellInhalt(),
   js/wand/wand.js) — ein farbiger Punkt statt einer Pille zeigt die Art
   (Neu/Überfällig/Termin). Jeder Eintrag einzeln antippbar, springt direkt
   ins betroffene Projekt. */
.dash-feed-eintrag {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--dash-line);
  cursor: pointer; border-radius: var(--r-md); transition: background .15s var(--ease);
}
.dash-feed-eintrag:first-of-type { border-top: none; padding-top: 0; }
.dash-feed-eintrag:hover { background: var(--dash-hover); }
.dash-feed-punkt { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.dash-feed-punkt.neu { background: var(--dash-ink); }
.dash-feed-punkt.ueberfaellig { background: var(--dash-crit); }
.dash-feed-punkt.termin { background: var(--dash-warn); }
.dash-feed-text { flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--dash-text); }
.dash-feed-zeit { display: block; font-size: 10.5px; color: var(--dash-text-subtle); margin-top: 2px; }

/* Vollbild-Übersichten (überfällige/offene Aufgaben, Auslastung/Besprochen
   je Gewerk, Abwesenheiten) — ersetzen die Normalansicht vorübergehend
   vollständig (wandUebersicht). Die Liste ist die EINE bewusste Ausnahme vom
   "kein Scrollen"-Grundsatz der Wandtafel: ein gezielter Einstieg mit
   potenziell vielen Zeilen, kein passiver Dauerzustand. In derselben
   Logo-Farbwelt wie die Normalansicht, damit der Wechsel nicht wie ein
   Bruch in eine andere App wirkt. */
.wand-uebersicht {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--dash-surface); border: 1px solid var(--dash-line); border-radius: var(--r-xl);
  box-shadow: var(--sh-2); padding: 20px 24px; color: var(--dash-text);
}
.wand-uebersicht-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-shrink: 0; }
.wand-uebersicht-kopf h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; font-family: 'Fredoka', sans-serif; }
.wand-uebersicht-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.wand-uebersicht-zeile {
  display: flex; align-items: center; gap: 18px; padding: 13px 6px; border-top: 1px solid var(--dash-line);
  transition: background .15s var(--ease);
}
.wand-uebersicht-zeile:first-child { border-top: none; }
.wand-uebersicht-zeile.ist-klickbar { cursor: pointer; }
.wand-uebersicht-zeile.ist-klickbar:hover { background: var(--dash-hover); }
.wand-uebersicht-projekt { flex: 0 0 280px; font-weight: 600; font-size: 14.5px; color: var(--dash-text); }
.wand-uebersicht-titel { flex: 1; font-size: 14.5px; color: var(--dash-text); }
/* Neutral, nicht fest rot: eine Übersichts-Zeile kann auch eine unauffällige
   Angabe zeigen (Stunden, "noch offen", Abwesenheitsende) — .ist-rot
   markiert gezielt die wirklich überfälligen Zeilen. */
.wand-uebersicht-seit { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--dash-text-muted); }
.wand-uebersicht-seit.ist-rot { color: var(--dash-crit); }
.wand-leer { font-size: 13px; color: var(--dash-text-subtle); }

/* Vollständige Projektliste unterhalb der Kennzahlen-/Panel-Reihe
   (wandProjektlisteHtml(), js/wand/wand.js) — nur sichtbar/erreichbar durch
   Herunterscrollen auf
   einem echten Touch-Monitor. Auf Eriks Wunsch optisch identisch mit der
   echten Projektliste: Gruppenüberschrift und Zeilen sind exakt
   .section-title/.board-list/.board-row aus der Projektliste selbst (keine
   eigene Zeilenform hier) — nur der äußere Abstand zu den Kacheln darüber
   ist eine Wandtafel-eigene Ergänzung. */
.wand-projektliste { margin-top: 22px; padding-bottom: 8px; }
.wand-projektliste .section-title:first-child { margin-top: 0; }

.side-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}

.side-menu.open ~ .side-menu-backdrop {
  opacity: 1;
  visibility: visible;
}

/* Ab 769px: Sidebar dauerhaft sichtbar (kein Off-Canvas mehr nötig) */
@media (min-width: 769px) {
  #headerMenu.side-menu {
    position: sticky;
    /* top muss der tatsächlichen Höhe von .app-topbar entsprechen (beide
       sticky, gleicher Scroll-Container) — sonst zieht die Sidebar bei
       Seiten, die länger als ein Bildschirm sind, beim Herunterscrollen mit
       top:0 unter das Menüband statt sich direkt darunter einzureihen, und
       am unteren Rand bleibt eine sidebarlose Lücke in Höhe des Menübands
       übrig (height: calc(100vh - 52px) reichte dann nicht bis nach unten). */
    top: 52px;
    height: calc(100vh - 52px);
    transform: none;
    box-shadow: none;
    width: 260px;
    flex: 0 0 260px;
    border-right: 1px solid var(--line-soft);
  }
  #headerMenu.side-menu .header-toggle { display: none; }
  .side-menu-backdrop { display: none; }

  /* Umschalt-Leiste am unteren Sidebar-Rand nur auf Desktop-Breite sichtbar
     (auf Mobile bleibt es beim reinen Off-Canvas-Menü ohne Zwischenzustand) */
  .sidebar-collapse-bar { display: flex; }

  /* Eingeklappte Sidebar: nur noch eine schmale Icon-Rail mit den 5
     Navigationspunkten, alle Beschriftungen verschwinden */
  #headerMenu.side-menu.collapsed {
    width: 64px;
    flex: 0 0 64px;
  }

  #headerMenu.side-menu.collapsed .sidebar-nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  #headerMenu.side-menu.collapsed .nav-item .nav-label {
    display: none;
  }

  #headerMenu.side-menu.collapsed .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  #headerMenu.side-menu.collapsed #sidebarCollapseIcon {
    transform: rotate(180deg);
  }

  /* In der Icon-Rail ergeben aufgeklappte Unterlisten/Rubrik-Überschriften
     ohne Textbeschriftung keinen Sinn — beides wird vollständig ausgeblendet. */
  #headerMenu.side-menu.collapsed .nav-chevron,
  #headerMenu.side-menu.collapsed .sidebar-section-label,
  #headerMenu.side-menu.collapsed .sidebar-subnav {
    display: none;
  }
}

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

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

/* Hamburger-Knopf im globalen Menüband (nur < 769px sichtbar, öffnet die
   Sidebar als Off-Canvas-Menü, siehe .mobile-nav-toggle weiter oben). */
.menu-corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  transition: background .2s var(--ease);
}

.menu-corner-btn:hover { background: var(--line-soft); }
.menu-corner-btn:active { transform: none; }

/* Hauptnavigation (Sidebar) — ersetzt die alte horizontale .tabs-Leiste */
.sidebar-nav { gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: transparent;
  color: var(--text-muted);
  padding: 9px 12px;
  cursor: pointer;
  border: none;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  font-size: 15px;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .nav-item kann ein echter <a href>-Link sein statt eines Buttons — ohne
   diese Regel würde ein bereits besuchtes Ziel (echte Browser-Historie) mit
   der UA-Standardfarbe für besuchte Links abweichen. */
.nav-item:visited { color: var(--text-muted); }
.nav-item:hover,
.nav-item:visited:hover { background: var(--surface-sunk); color: var(--text); }

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* .sidebar-section-label: kleine Rubrik-Überschrift oberhalb einer Gruppe von
   Sidebar-Einträgen (z. B. "Dashboard", "Navigation"). */
.sidebar-section-label {
  padding: 10px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* .nav-group-toggle: Sidebar-Eintrag, der statt eines Tabs einen
   auf-/zuklappbaren Unterbereich steuert (Einstellungen/Admin, siehe
   toggleSidebarAccordion() in js/ui.js). */
.nav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform .2s var(--ease);
}

.nav-group-toggle.expanded .nav-chevron { transform: rotate(180deg); }

/* .sidebar-subnav: Liste der Aktionen unter einem aufgeklappten
   .nav-group-toggle, per max-height animiert ein-/ausgeblendet. */
.sidebar-subnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s var(--ease), opacity .2s var(--ease);
}

.sidebar-subnav.open {
  /* Reicht für die längste Gruppe („Einstellungen", sieben Punkte); die
     Animation läuft über max-height, deshalb steht hier eine feste Zahl. */
  max-height: 360px;
  opacity: 1;
}

.sidebar-subitem {
  width: 100%;
  padding-left: 34px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.sidebar-subitem:hover { color: var(--text); }
/* .is-active: der gerade gezeigte Abschnitt der Gruppe „Einstellungen"
   (showSettingsSection() in js/settings/settings.js). Die übrigen Gruppen
   lösen Aktionen aus und kennen deshalb keinen dauerhaft aktiven Punkt. */
.sidebar-subitem.is-active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-soft);
}
.sidebar-subitem.danger { color: var(--red); }
.sidebar-subitem.danger:hover { background: var(--red); color: #fff; }

/* === Buttons & Formulare === */
button {
  cursor: pointer;
  border: none;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  background: var(--accent);
  color: #fff;
  letter-spacing: -0.01em;
  transition: background .2s var(--ease), transform .1s var(--ease),
              box-shadow .2s var(--ease);
}

button:hover  { background: var(--accent-hover); }
button:active { background: var(--accent-active); transform: scale(.97); }

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,227,.35);
}

button.secondary {
  background: rgba(0,0,0,.06);
  color: var(--text);
}
button.secondary:hover  { background: rgba(0,0,0,.10); }
button.secondary:active { background: rgba(0,0,0,.14); }

button.danger  { background: var(--red); }
button.danger:hover  { background: var(--red-hover); }
button.danger:active { background: var(--red-active); }

button.small {
  padding: 3px 10px;
  font-size: 11px;
}

select,
input[type=text],
input[type=email],
input[type=date] {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

select:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=date]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.18);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236e6e73' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: var(--surface);
}

.role-checkboxes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.role-checkboxes label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

input[type=checkbox] { accent-color: var(--accent); }

/* === Tabellen & Matrix === */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--surface);
  font-size: 12px;
}

th,
td {
  border: 1px solid var(--line-soft);
  padding: 5px 7px;
  text-align: center;
  vertical-align: middle;
}

thead tr:nth-child(1) th {
  background: var(--surface-sunk);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

tr:nth-child(even) td { background: var(--surface-alt); }

/* === Status-Felder in der Projektzeile === */
.status {
  min-width: 240px;
  position: relative;
  vertical-align: top;
}

.status-edit {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 5px 7px;
  font-size: 11px;
  font-family: inherit;
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.status-edit:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.18);
}

.status-edit.status-new { color: var(--green); }
.status-edit.status-duplicated { color: var(--text); }
.status-edit p { margin: 0 0 4px; }
.status-edit p:last-child { margin-bottom: 0; }
.status-edit b,
.status-edit strong { font-weight: 600; }

/* === Kommentar-Editor im Board und im Wochenbericht ======================
   Ersetzt das frühere contenteditable-Feld samt execCommand-Leiste: Textfeld
   mit Verfasser-Kopfzeile, ausdrücklichem Speichern und dem eingeklappten,
   scrollbaren Verlauf der früheren Sitzungen. Aufgebaut von
   renderCommentEditor() in js/board/board.js. */

.comment-block { display: flex; flex-direction: column; gap: 10px; }

.comment-editor {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.comment-editor-head,
.comment-head-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-soft);
}
.comment-head-line { border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.comment-who { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.comment-unknown { color: var(--text-subtle); font-weight: 400; font-style: italic; }
.comment-sep { color: var(--text-subtle); }
.comment-av {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; flex-shrink: 0;
}
.comment-kbd { margin-left: auto; font-size: 10px; color: var(--text-subtle); white-space: nowrap; }

/* .comment-field ist seit der Umstellung auf contenteditable (Eriks Wunsch
   nach echter statt mit Sternchen markierter Fett-/Kursiv-/Farbschrift,
   public/js/utils.js) ein <div>, kein <textarea> mehr — Selektor deshalb
   klassenbasiert statt elementbasiert, resize entfällt (kein Äquivalent für
   contenteditable), Platzhalter über :empty:before + data-placeholder statt
   ::placeholder (das Pseudo-Element gibt es nur für echte Formularfelder). */
.comment-editor .comment-field {
  width: 100%;
  display: block;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface);
  min-height: 62px;
}
.comment-editor .comment-field:focus { outline: none; box-shadow: none; }
.comment-editor .comment-field:empty::before { content: attr(data-placeholder); color: var(--text-subtle); }

/* .richtext-toolbar (js/utils.js, richtextToolbarHtml()): gemeinsame
   Fett/Kursiv/Farbe-Werkzeugleiste für jedes Textfeld, das Eriks Wunsch nach
   formatierbarem Text bedient (Board-Kommentar, Protokoll-Punkt-Text — siehe
   .richtext-wrap dort). "Angedockte" Darstellung (Eriks Auswahl C aus dem
   Formatierungsleiste-Mockup): eine schattierte Leiste, die direkt auf dem
   Textfeld aufsitzt — eigene Fläche + untere Trennkante statt einzeln
   umrandeter Knöpfe, damit Leiste und Feld wie EIN Kasten statt zwei lose
   übereinanderstehende Elemente wirken. Bewusst KEIN zusätzlicher Rahmen um
   den ganzen .richtext-wrap: das Protokoll-Textfeld soll weiterhin randlos in
   seiner Tabellenzelle sitzen (siehe Kommentar bei .protokoll-thema-cell
   weiter unten), der Board-Kommentar steckt ohnehin schon in der
   umrandeten .comment-editor-Karte — die Leiste muss daher in beiden
   Zusammenhängen funktionieren, ohne selbst Ecken abzurunden (mal steht sie
   ganz oben in ihrer Karte, mal nicht). */
.richtext-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: var(--surface-sunk); border-bottom: 1px solid var(--line-soft);
}
.richtext-btn-group { display: inline-flex; gap: 2px; }
.richtext-btn {
  appearance: none; border: none; background: none; color: var(--text-muted);
  width: 22px; height: 20px; border-radius: 4px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1;
}
.richtext-btn:hover { background: var(--surface-alt); color: var(--text); }
.richtext-divider { width: 1px; height: 14px; background: var(--line); flex-shrink: 0; }
.richtext-farben { display: inline-flex; gap: 6px; }
.richtext-farbe-btn {
  appearance: none; border: none; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.richtext-farbe-btn:hover { outline: 2px solid var(--line); outline-offset: 1px; }
/* .richtext-hinweis: Fett/Kursiv/Farbe wirken nur auf MARKIERTEN Text — ohne
   Markierung tut ein Klick nichts, und das war bisher nirgends ablesbar.
   Solange nichts markiert ist, bleiben die Knöpfe blass und der Hinweis
   fordert zum Markieren auf; .hat-auswahl (von einem selectionchange-
   Lauscher gesetzt, siehe js/plan/plan-protokoll.js) dreht beides um. */
.richtext-hinweis { margin-left: auto; font-size: 10px; color: var(--text-subtle); white-space: nowrap; }
.richtext-toolbar:not(.hat-auswahl) .richtext-btn,
.richtext-toolbar:not(.hat-auswahl) .richtext-farbe-btn { opacity: .45; }
.richtext-toolbar.hat-auswahl { background: var(--accent-soft); }
.richtext-toolbar.hat-auswahl .richtext-hinweis { color: var(--accent); font-weight: 600; }

.comment-editor-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-alt);
}
.comment-foot-spacer { margin-left: auto; }
.comment-dirty { font-size: 10.5px; color: var(--amber); white-space: nowrap; }

.comment-readonly {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 7px 9px;
  font-size: 11.5px;
  line-height: 1.45;
  background: var(--surface);
}

/* Verlauf: eingeklappt, mit Anzahl im Kopf; die Liste selbst scrollt */
.comment-history {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.comment-history > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--text);
  user-select: none;
}
.comment-history > summary::-webkit-details-marker { display: none; }
.comment-history > summary:hover { background: var(--surface-alt); }
.comment-history-caret {
  color: var(--text-subtle);
  font-size: 9px;
  transition: transform .18s var(--ease);
}
.comment-history[open] > summary .comment-history-caret { transform: rotate(90deg); }
.comment-history-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.comment-history-count.zero { background: var(--surface-sunk); color: var(--text-subtle); }
.comment-history-body { border-top: 1px solid var(--line-soft); padding: 4px 10px 8px; }

.comment-history-list {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.comment-history-entry { padding: 8px 0; }
.comment-history-entry + .comment-history-entry { border-top: 1px solid var(--line-soft); }
.comment-history-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 10.5px;
}
.comment-history-week {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.comment-history-meta { color: var(--text-subtle); }
.comment-history-text { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.comment-history-text b,
.comment-history-text strong { font-weight: 600; color: var(--text); }

.comment-take {
  margin-left: auto;
  padding: 2px 9px;
  font-size: 10px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.comment-take:hover { background: var(--surface-sunk); color: var(--text); }

.status-toolbar {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  box-shadow: var(--sh-2);
  z-index: 10;
}

.status:focus-within .status-toolbar { display: flex; }

.status-toolbar button {
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1.2;
  min-width: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  border: none;
}

.status-toolbar button:hover  { background: rgba(0,0,0,.06); }
.status-toolbar button:active { background: rgba(0,0,0,.10); transform: none; }

.status-toolbar button.color-red   { color: var(--red); }
.status-toolbar button.color-green { color: var(--green); }
.status-toolbar button.color-blue  { color: var(--accent); }
.status-toolbar button.color-black {
  color: var(--text);
  font-weight: 600;
}

.locked-cell {
  cursor: not-allowed !important;
  background: var(--surface-sunk) !important;
  opacity: .65;
}

.locked-cell input {
  background: var(--surface-sunk) !important;
  cursor: not-allowed !important;
  border-color: var(--line-soft) !important;
}

.bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  margin-top: 4px;
  overflow: hidden;
}

.bar > div {
  height: 100%;
  background: var(--green);
  border-radius: var(--r-pill);
  transition: width .3s var(--ease);
}

/* === Projektboard (Listenansicht) ===
   Eine Bubble-Card je Projektgruppe (.board-list) mit den Projekten als
   Listenzeilen (.board-row) — ersetzt die frühere breite Matrix (eine Spalte
   je Person/Leistungsphase). Jede Zeile zeigt nur das Nötigste auf einen
   Blick (Kürzel-Avatare der Zugeordneten, aktive Phase, Status-Vorschau);
   Klick auf die Zeile klappt darunter das Detailpanel (.board-drawer) mit
   Status-Editor, vollständiger Rollen-Zuordnung und allen LPH-Balken auf. */
.board-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.board-row { border-bottom: 1px solid var(--line-soft); }
.board-row:last-child { border-bottom: none; }

.board-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.board-row-main:hover { background: var(--surface-sunk); }

.board-chev {
  flex-shrink: 0;
  color: var(--text-subtle);
  display: inline-flex;
  transition: transform .2s var(--ease);
}
.board-row.open .board-chev { transform: rotate(90deg); }

.board-nr {
  flex-shrink: 0;
  width: 64px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: ui-monospace, 'SF Mono', monospace;
}

.board-name-wrap { flex: 1 1 260px; min-width: 0; }
.board-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.board-name:hover { color: var(--accent); text-decoration: underline; }

.board-status-line {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-newdot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.board-avatar-stack {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 220px;
}

.board-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}

.board-avatar.role-planung.state-1 { background: var(--green); border-color: var(--green); color: #fff; }
.board-avatar.role-projektleitung.state-1 { background: var(--red); border-color: var(--red); color: #fff; }
.board-avatar.role-bauüberwachung.state-1 { background: var(--accent); border-color: var(--accent); color: #fff; }

.board-avatar.role-planung.state-2 { background: transparent; color: var(--green); border-color: var(--green); }
.board-avatar.role-projektleitung.state-2 { background: transparent; color: var(--red); border-color: var(--red); }
.board-avatar.role-bauüberwachung.state-2 { background: transparent; color: var(--accent); border-color: var(--accent); }

.phase-pill {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, 'SF Mono', monospace;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.phase-pill.muted { background: var(--surface-sunk); color: var(--text-subtle); font-family: inherit; font-weight: 500; }

/* --- Detailpanel (.board-drawer) --- */
.board-drawer {
  padding: 18px 24px 22px;
  background: var(--surface-alt);
  border-top: 1px solid var(--line-soft);
}

.board-drawer h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

/* Die Schublade liefert drei gleichrangige Blöcke (Kommentar, Leistungsphasen,
   Beteiligte, siehe renderBoardDrawer() in js/board/board.js). Im Projektboard
   stehen alle drei übereinander: Kommentar über die volle Breite (er teilte
   sich zuvor eine schmale Spalte mit den gestapelten LPH-Zeilen, die ihn auf
   wenig Höhe drückten — Eriks Rückmeldung "Darstellung der Kommentare ist zu
   klein"), darunter die Leistungsphasen als EIN schmaler Streifen
   (board-lph-leiste, dasselbe Muster wie in der dichten Wochenbericht-Karte)
   statt als Liste, darunter die Beteiligten. */
.board-drawer-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "kommentar" "lph" "beteiligte";
  align-content: start;
  gap: 18px;
}
.drawer-col-comment { grid-area: kommentar; }
.drawer-col-lph     { grid-area: lph; }
.drawer-col-people  { grid-area: beteiligte; }

/* Auswahl der beauftragten Leistungsphasen. Genutzt vom Honorar-Dialog der
   Projektplan-Seite (renderHonorarEingaben(), js/plan/plan-honorar.js) und
   vom Neues-Projekt-Modal (openNewProjModal(), js/load/load.js) — deshalb
   hier im gemeinsamen Stylesheet statt inline in einer der beiden Seiten. */
.beauftragte-lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 4px 10px;
}
.beauftragte-lp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

/* --- Wochenbericht: immer aufgeklappte Projekt-Karten ("Neu kommentiert",
   "Fortschritt aktualisiert") — im Unterschied zu .board-list/.board-row
   (Akkordeon der "Unverändert"-Gruppe) ist hier jede Karte ein eigenständiger
   Kasten, kein Container mit Trennlinien. */
.report-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

/* Kopfband: durchgefärbt in der Farbe der Änderungsart, damit beim Scrollen
   ohne Blick auf die Abschnitts-Überschrift erkennbar ist, worum es geht.
   Die Farbe kommt aus --band-neu/--band-fortschritt und lässt sich dort in
   einem Zug abschwächen, falls die Leiste zu kräftig wirkt. */
.report-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-soft);
}
.report-card-head .board-name { cursor: pointer; }

.report-card-neu         > .report-band { background: var(--band-neu); }
.report-card-fortschritt > .report-band { background: var(--band-fortschritt); }

.report-band {
  border-bottom: none;
  color: #fff;
}
.report-band .board-nr { color: rgba(255,255,255,.75); }
.report-band .board-name { color: #fff; font-weight: 600; }
.report-band .board-name:hover { text-decoration: underline; }
.report-band .tag-chip {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: transparent;
}
.report-band .report-reason-badge {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Drei Spalten statt zwei: im Bericht stehen Leistungsphasen und Beteiligte
   nebeneinander, wodurch die Karte flacher wird. Dasselbe Markup wie im
   Projektboard, nur anders angeordnet. */
.report-card .board-drawer {
  padding: 14px 16px 16px;
  border-top: none;
  background: var(--surface);
}
.report-card .board-drawer-grid {
  grid-template-columns: 1.7fr 1fr 1fr;
  grid-template-areas: "kommentar lph beteiligte";
  gap: 22px;
}
.report-card .board-role-label { width: 58px; }

@media (max-width: 860px) {
  .report-card .board-drawer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "kommentar" "lph" "beteiligte";
    gap: 16px;
  }
}

/* === Dichte Fassung der Karte (.board-drawer-dicht, Wochenbericht) ===
   Fokus-Modus (Eriks Wahl "C" aus dem Darstellungs-Vergleich): nur der
   Kommentar liegt offen, Leistungsphasen und Beteiligte stecken in
   aufklappbaren Abschnitten (.bericht-disclosure, siehe renderBoardDrawer()s
   dichte Fassung in js/board/board.js) statt dauerhaft nebeneinander zu
   stehen — bei 29 Projekten wurde der Bericht mit allem gleichzeitig
   sichtbar als "zu überladen" zurückgemeldet. Kein eigenes Raster mehr (die
   drei Blöcke stehen schlicht untereinander), deshalb sitzt die dichte
   Fassung flächig in ihrem Container statt als eigene Schublade mit
   zusätzlichem Rahmen/Hintergrund darin. */
.board-drawer-dicht { padding: 0; background: transparent; border-top: none; }

.bericht-disclosure {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-top: 10px;
  overflow: hidden;
  background: var(--surface);
}
.bericht-disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
}
.bericht-disclosure summary::-webkit-details-marker { display: none; }
.bericht-disclosure summary:hover { background: var(--surface-alt); }
.bericht-disclosure summary .count {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-left: 2px;
}
.bericht-disclosure summary .chev {
  margin-left: auto;
  color: var(--text-subtle);
  display: inline-flex;
  transition: transform .15s var(--ease);
}
.bericht-disclosure[open] summary .chev { transform: rotate(90deg); }
.bericht-disclosure[open] summary { border-bottom: 1px solid var(--line-soft); }
.bericht-disclosure-body { padding: 10px 14px 12px; }

/* Leistungsphasen als Balkenzeilen statt der Kästchen-Leiste des
   Projektboards (.board-lph-leiste/-cell bleiben dort unverändert) — in der
   schmalen Fokus-Spalte brauchen zehn Kästchen nebeneinander zu wenig Platz
   je Phase, eine Zeile je Phase dagegen hat Raum für Label, Balken UND
   Eingabefeld. */
.bericht-lph-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.bericht-lph-label { width: 48px; flex-shrink: 0; color: var(--text-muted); }
.bericht-lph-track { flex: 1; height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.bericht-lph-track i { display: block; height: 100%; background: var(--text-subtle); }
.bericht-lph-row.is-aktiv .bericht-lph-track i { background: var(--accent); }
.bericht-lph-row.is-aktiv .bericht-lph-label { color: var(--accent); font-weight: 650; }
.bericht-lph-pct {
  display: flex; align-items: center; gap: 1px; flex-shrink: 0;
  color: var(--text-subtle); font-variant-numeric: tabular-nums; font-size: 11.5px;
}
/* .bericht-lph-row (zwei Klassen) statt der bloßen Element-Klasse: nötig, um
   den globalen input[type=text]-Grundstil (Polsterung/Rahmen/Hintergrund,
   weiter oben) zu schlagen — sonst gewinnt dessen höhere Spezifität und die
   Polsterung von 7px 10px ließ "100" im 42px schmalen Feld auf "10"
   abschneiden. */
.bericht-lph-row .bericht-lph-input {
  width: 28px; flex-shrink: 0; border: none; border-radius: 0; background: transparent;
  text-align: right; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text);
  font-family: inherit; padding: 1px 0;
}
.bericht-lph-row .bericht-lph-input:focus { outline: 1.5px solid var(--accent); outline-offset: -1px; border-radius: 3px; box-shadow: none; }
.bericht-lph-row .bericht-lph-input.locked-cell { cursor: default; }

/* Der Kommentar bleibt das größte Element der dichten Fassung — etwas
   größere Schrift als im Projektboard, wo er eine Spalte unter mehreren
   teilt. Radius/Schatten wie eine freistehende Karte (Entwurf "Fokus-Modus"). */
.board-drawer-dicht .comment-editor .comment-field,
.board-drawer-dicht .comment-readonly { font-size: 14px; line-height: 1.6; min-height: 76px; }
/* .comment-editor hat bereits overflow:hidden (Basis-Regel) — ein größerer
   Radius hier genügt, Kopf/Fuß werden automatisch mitgerundet. */
.board-drawer-dicht .comment-editor { border-radius: var(--r-lg); box-shadow: var(--sh-1); }

.board-lph-leiste {
  display: flex;
  gap: 3px;
  align-items: stretch;
}
.board-lph-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 2px 4px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  /* Der Füllstand kommt als senkrechter Verlauf aus dem Inline-Stil
     (renderBoardDrawer in js/board/board.js) — so bleibt der Balken erhalten,
     den die Zeilenform als eigenes Element hatte. */
  background-repeat: no-repeat;
}
.board-lph-cell-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}
.board-lph-cell input {
  width: 100%;
  min-width: 0;
  padding: 1px 2px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-family: inherit;
}
.board-lph-cell input:focus {
  outline: 1.5px solid var(--accent);
  outline-offset: -1px;
  border-radius: 3px;
}
.board-lph-cell.lp-aktiv {
  border-color: var(--accent);
}
.board-lph-cell.lp-aktiv .board-lph-cell-label,
.board-lph-cell.lp-aktiv input { color: var(--accent); }
.board-lph-cell.locked-cell input { cursor: default; }

/* Das Rollen-Label steht NEBEN seinen Kürzeln. Über ihnen kostete es drei
   zusätzliche Zeilen, und damit bestimmte die Beteiligten-Spalte die Höhe der
   ganzen Karte (189 px gegenüber 130 für den Kommentar). Die feste Breite ist
   so bemessen, dass "Bauüberwachung" hineinpasst — bei 52 px lief die
   Beschriftung über die Kürzel.

   Die Regeln hängen am Merkmal .board-drawer-dicht, nicht am Ort: Sie
   standen zunächst unter .report-card, und mit dem Umbau des Wochenberichts
   auf die Tagesordnung gab es diesen Container nicht mehr — die dichte
   Karte fiel still auf die Board-Darstellung zurück. Das zusätzliche
   .board-role-mini liefert die Spezifität, die nötig ist, um die dortige
   Regel für .board-role-row zu schlagen. */
.board-drawer-dicht .board-role-mini .board-role-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 4px;
}
.board-drawer-dicht .board-role-mini .board-role-label {
  flex: 0 0 auto;
  /* Bemessen am längsten Rollennamen: "BAUÜBERWACHUNG" braucht bei 10 px in
     Versalien diese Breite — bei 88 px fehlte der letzte Buchstabe. */
  width: 104px;
  padding-top: 4px;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Schmale Fenster: Dort reicht die Breite für Label UND Kürzel nicht mehr,
   also wieder übereinander — lieber drei Zeilen mehr als abgeschnittene
   Beschriftungen. */
@media (max-width: 1100px) {
  .board-drawer-dicht .board-role-mini .board-role-row { display: block; }
  .board-drawer-dicht .board-role-mini .board-role-label {
    width: auto;
    padding-top: 0;
    margin-bottom: 2px;
  }
}

.report-reason-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
/* Innerhalb einer Report-Karte braucht das Detailpanel nicht den
   Zeilen-Einzug/die obere Trennlinie, die es im Board-Akkordeon ausrichtet. */
.report-card .board-drawer {
  padding: 16px 20px 20px;
  border-top: none;
}

/* .board-lph-row/-list/-label/-wert: reine Anzeige-Zeile für Leistungsphasen,
   seit Variante A (Board-Drawer) nicht mehr für den Drawer selbst gebraucht
   (siehe .board-lph-leiste/-cell dort), aber weiterhin für die
   Fortschrittsliste im Projektbereich-Dashboard (#planLphList,
   renderPlanInfo() in js/plan/plan-info.js) — eine großzügig bemessene,
   eigene Fläche statt einer schmalen Drawer-Spalte, wo die gestapelte Form
   kein Platzproblem hat. */
.board-lph-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.board-lph-row {
  display: grid;
  grid-template-columns: 42px 1fr 50px;
  align-items: center;
  gap: 10px;
}
.board-lph-row.is-ansicht{ cursor: default; }

.board-lph-row .bar { flex: 1; margin-top: 0; }

.board-lph-label {
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', monospace;
  color: var(--text-muted);
}

.board-lph-row.lp-aktiv .board-lph-label { color: var(--accent); font-weight: 600; }

/* Der Prozentwert einer Leistungsphase an der Stelle des Eingabefeldes. Die
   Breite entspricht dem Feld, damit die Balken aller Zeilen gleich weit
   reichen; tabular-nums hält die Ziffern in einer Spalte. */
.board-lph-wert{
  min-width: 52px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.board-role-mini { display: flex; flex-direction: column; gap: 10px; }
.board-role-mini .board-role-row { display: flex; align-items: center; gap: 10px; }
.board-role-mini .board-role-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.board-role-mini .board-role-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.section-title {
  font-size: 17px;
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* === Lade-/Auswertungsübersicht === */
.load-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.load-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
}

/* === Auslastung: das Lastband ===
   Eine Zeile je Person und Rolle; der Balken ist nach Projekten aufgeteilt.
   Zuvor stand jede Person in einer eigenen .load-card mit ihrer Projektliste
   klein darunter — man sah die Zahl, aber nicht, woraus sie besteht. Die
   Frage nach einer Auslastung von 1,80 ist aber immer dieselbe: aus einem
   großen Projekt oder aus fünf kleinen, und was davon lässt sich abgeben?
   .load-card/.load-row/.load-num/.load-detail bleiben bestehen — das
   Dashboard (js/dashboard/dashboard.js) und die Ressourcenansicht des
   Projektbereichs (js/plan/plan-gantt.js) bauen darauf auf. */
.load-rolle { width: 100%; }

.load-rolle-titel {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.load-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.load-zeile:last-child { border-bottom: none; }
.load-zeile:hover { background: var(--surface); }

/* Wer — Name oben, Kürzel und Zusätze darunter. Feste Breite, damit die
   Bänder aller Zeilen an derselben Stelle beginnen und vergleichbar sind. */
.load-wer {
  flex: 0 0 200px;
  min-width: 0;
}
.load-wer-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.load-wer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 1px;
}

/* Das Band. Die Segmente füllen es von links; was frei bleibt, ist die
   Restkapazität bis zum Skalenende (Vorgabe 8, firmenweit einstellbar). */
.load-band {
  flex: 1;
  display: flex;
  align-items: center;
  height: 22px;
  min-width: 140px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.load-seg {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 7px;
  min-width: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.4);
  transition: filter .15s var(--ease);
}
.load-seg:last-of-type { border-right: none; }
.load-seg:hover { filter: brightness(1.12); }
.load-seg span { overflow: hidden; }

.load-band-leer {
  font-size: 11px;
  color: var(--text-subtle);
  padding-left: 9px;
}

.load-wert {
  flex: 0 0 62px;
  text-align: right;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.load-anbahnung {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Kopfzeile: was die Zahlen abdecken. Sie steht oben, weil die Aussagekraft
   der ganzen Seite daran hängt — eine Auslastung aus drei von 29 Projekten
   ist etwas anderes als eine aus 29. */
.load-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
  font-size: 13px;
}
.load-kopf-zahl strong {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.load-kopf-warnung {
  color: var(--red);
  font-weight: 600;
}
.load-kopf-warnung::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 7px;
  vertical-align: middle;
}

.load-luecken {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  font-size: 12px;
}
.load-luecke {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.load-luecke:last-child { border-bottom: none; }
.load-luecke b { color: var(--text-muted); font-weight: 500; white-space: nowrap; }

/* Summenzeile je Mensch: ein durchgehender Riegel statt der Projektsegmente.
   Sie beantwortet die Frage, die die Rollenzeilen nicht beantworten können —
   wer in drei Rollen arbeitet, hat trotzdem nur eine Arbeitswoche. */
.load-zeile-summe .load-wer-name { font-weight: 600; }
.load-seg-summe { border-right: none; }

/* Marke der vollen Kapazität im Band. Sie sitzt am rechten Rand, weil das
   volle Band genau die Wochenkapazität ist; ein Riegel, der sie erreicht,
   stößt sichtbar an. */
.load-kapazitaet {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--text-subtle);
  opacity: .5;
}
.load-zeile-summe .load-band { position: relative; }

.load-einheit {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-subtle);
  margin-left: 2px;
}

.load-legende-item em {
  font-style: normal;
  color: var(--text-subtle);
  margin-left: 3px;
}

/* Legende der Projektfarben, nur für die tatsächlich vorkommenden Projekte.
   Nötig, weil in schmalen Segmenten die Projektnummer keinen Platz findet. */
.load-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--text-muted);
}
.load-legende-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.load-legende-item i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}

@media (max-width: 720px) {
  .load-wer { flex-basis: 128px; }
  .load-zeile { gap: 10px; }
  .load-wert { flex-basis: 52px; font-size: 16px; }
}

.load-row-title {
  grid-column: 1 / -1;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px 0;
  padding-top: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.load-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  min-width: 0;
  width: 100%;
  box-shadow: var(--sh-2);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.load-card:hover {
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
}

.load-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.load-num {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.load-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
}

.load-detail div {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}

.load-detail div:last-child { border-bottom: none; }

/* === Modal, Form-Elemente & Listen === */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  /* Über Menüband (.app-topbar, 140) UND Seitenleiste (.side-menu, 200):
     Mit dem früheren Wert 100 blieb die Navigation neben einem offenen Dialog
     sichtbar und anklickbar — auch hinter dem "blockierenden" Login-Fenster —
     und die Seitenleiste verdeckte bei mittleren Fensterbreiten die linke
     Kante breiter Dialoge. */
  z-index: 300;
}

.modal {
  background: var(--surface);
  padding: 28px;
  border-radius: var(--r-xl);
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow: auto;
  box-shadow: var(--sh-3);
}

.modal h2 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.form-row {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-row label {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}

/* Gesperrte Bedienelemente: Ohne eigene :disabled-Regeln schlagen die
   Farbangaben oben die Browser-Voreinstellung, und ein deaktivierter Knopf
   sieht exakt aus wie ein bedienbarer (z. B. in gesperrten Sitzungen oder
   bei der eigenen Zeile in der Benutzerverwaltung). */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
button:disabled:hover,
select:disabled:hover {
  filter: none;
  transform: none;
}

/* Warnband unten rechts, wenn das Speichern fehlschlägt (showSyncProblem() in
   js/store.js). Liegt über allem, damit es auch neben einem offenen Dialog
   sichtbar bleibt. */
.sync-problem-bar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  max-width: 340px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
  padding: 11px 15px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}

/* Hinweisband gesperrter Sitzungen (renderBoard()/renderWochenbericht()).
   Vorher standen die Farben als Inline-Angaben im Markup und waren damit im
   Dunkelmodus grell weiß-rosa. */
.lock-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--surface-alt);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--r-md);
  padding: 9px 13px;
  margin-bottom: 12px;
  font-size: 13px;
}

/* === LP-Aufwand-Maske als Matrix-Tabelle ===
   Zeilen = Leistungsphasen, Spalten = Rollen + "amtierend" (Radio). */
.lp-matrix {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 12px;
}
.lp-matrix thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.lp-matrix th.lp-lph {
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  white-space: nowrap;
}
.lp-matrix td {
  padding: 3px 8px;
}
.lp-matrix td input[type=text] {
  width: 64px;
  padding: 4px 7px;
  font-size: 13px;
}
.lp-matrix tbody th.lp-lph,
.lp-matrix tbody td {
  border-bottom: 1px solid var(--line-soft);
}
.lp-matrix tbody tr:last-child th.lp-lph,
.lp-matrix tbody tr:last-child td {
  border-bottom: none;
}
.lp-matrix tbody tr:nth-child(even) th.lp-lph,
.lp-matrix tbody tr:nth-child(even) td {
  background: var(--surface-alt);
}

/* LP-Aufwand- und Neues-Projekt-Modal etwas breiter für die Matrix-Tabelle */
#lpModal .modal,
#newProjModal .modal {
  max-width: 640px;
}

/* .bubble-card: gemeinsame "Bubble-Card"-Optik für Projekt- und
   Personen-Karten (Projekte-/Projektbeteiligte-Tab) — gleicher Radius/
   Schatten wie .load-card (Dashboard/Auslastung), aber ohne Hover-Anhebung,
   weil die Projekt-Karten Formularelemente enthalten (eine Anhebung beim
   Überfahren wäre dort irritierend). */
.bubble-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--sh-2);
  transition: box-shadow .2s var(--ease);
}

.bubble-card:hover {
  box-shadow: var(--sh-3);
}

.person-list-item,
.person-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.person-list-item {
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex-direction: row;
}

.person-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  overflow-x: auto;
  transition: background .2s var(--ease);
}

.person-header:hover { background: var(--surface-sunk); }

/* Schaltflächen-Optik auch für Links: Ein <a class="secondary"> in einer
   Knopfleiste sah sonst aus wie ein blauer Standardlink, weil .secondary
   ausschließlich für <button> definiert war. */
a.secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
a.secondary:hover { background: var(--surface-sunk); border-color: var(--text-subtle); }

/* Trennzeichen in der Board-Legende (Rollenfarben | Art der Zuordnung) */
.legend-sep { color: var(--text-subtle); }

/* Zugehörigkeit zur aktuellen Sitzung + Schaltfläche rechts in der Zeile
   (renderPeople(), js/people/people.js). */
.person-week-state {
  margin-left: auto;
  font-size: 12px;
  color: var(--green);
  white-space: nowrap;
}
.person-header button { flex: 0 0 auto; }

.person-toggle {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-subtle);
  width: 14px;
  text-align: center;
}

.person-toggle .icon {
  transition: transform .2s var(--ease);
}

.person-card.open .person-toggle .icon {
  transform: rotate(90deg);
}

.person-list-item span.drag-handle,
.person-header span.drag-handle {
  flex: 0 0 auto;
  color: var(--text-subtle);
  cursor: grab;
}

.person-list-item input[type=text],
.person-header input[type=text] { flex: 0 0 auto; max-width: 25vw; }
.person-list-item input[type=text]:nth-of-type(1),
.person-header input[type=text]:nth-of-type(1) { max-width: 80px; }
.person-list-item input[type=text]:nth-of-type(2),
.person-header input[type=text]:nth-of-type(2) { max-width: 180px; }

.person-list-item select,
.person-header select,
.person-header .role-checkboxes {
  flex: 0 0 auto;
  min-width: 110px;
}

.person-list-item button,
.person-header button {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* .projects-sortable: Listen-Container je Projekt-Gruppe im Projekte-Tab
   (projects.js) — eine Bubble-Card mit den Projekten als Listenzeilen
   (kein Karten-Raster mehr, siehe .project-item). Der Container-Klassenname
   bleibt unverändert, damit die Drag-and-Drop-Selektoren (handleDrop/
   reorderProjects) weiter greifen. */
.projects-sortable {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

/* .people-readonly: Listen-Container im Projektbeteiligte-Tab (people.js) —
   eine Bubble-Card mit den Personen als Listenzeilen (kein Karten-Raster
   mehr, siehe .person-card). */
.people-readonly {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

/* .person-card: eine Listenzeile im Projektbeteiligte-Tab (ersetzt die
   vormalige eigene Bubble-Card je Person) — der klickbare .person-header
   bleibt die sichtbare Zeile, .person-absences klappt darunter auf. */
.person-card {
  border-bottom: 1px solid var(--line-soft);
  padding: 0 16px;
}
.person-card:last-child { border-bottom: none; }

/* .sidebar-nav-divider: trennt die Modul-Navigation von Einstellungen/Admin. */
.sidebar-nav-divider {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 8px 6px;
}

/* .project-item: eine Listenzeile im Projekte-Tab (ersetzt die vormalige
   eigene Bubble-Card je Projekt) — überschreibt die Zeilen-Basis von
   .person-list-item mit einer umbrechenden Zeile plus rechtsbündigen
   Aktionen (.project-card-footer); das Karten-Attribut (data-project-id) und
   die Drag-Handler bleiben unverändert. */
.project-item {
  overflow-x: visible;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  transition: background .15s var(--ease);
}
.project-item:last-child { border-bottom: none; }
.project-item:hover { background: var(--surface-sunk); }

.project-tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 0;
}

.project-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* Überschreibt die generische .person-list-item-button-Regel (margin-left:
   auto auf jedem direkten Button), sonst würden sich die beiden Footer-
   Buttons gegenseitig auseinanderschieben statt gruppiert zu bleiben — nur
   der Footer als Ganzes soll rechtsbündig sein. */
.project-card-footer button { margin-left: 0; }

.tag-input { width: 110px; font-size: 12px; padding: 3px 8px; }

/* === Hinweise & Hilfsklassen === */
.legend {
  font-size: 11px;
  color: var(--text-muted);
  margin: 10px 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}


/* === Anwesenheit der Sitzung ============================================
   Fokus-Modus (Eriks Wahl "C"): ein aufklappbarer Abschnitt wie Leistungs-
   phasen/Beteiligte im Wochenbericht (.bericht-disclosure, siehe weiter
   oben), kein dauerhaft sichtbarer Block mehr. Zustände bleiben binär
   (anwesend / nicht anwesend, Tabelle attendance); der Zähler in der
   Kopfzeile macht sichtbar, wenn noch niemand geklickt hat. */
#weekAttendance .bericht-disclosure { margin-top: 16px; }
.attendance-actions { display: flex; gap: 8px; margin-bottom: 10px; }

.attendance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.attendance-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  padding: 9px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.attendance-tile:hover { border-color: var(--text-subtle); background: var(--surface-alt); }
.attendance-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.attendance-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.attendance-name {
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}
.attendance-note {
  font-size: 9.5px;
  color: var(--amber);
  line-height: 1.2;
  text-align: center;
}
/* Der Haken trägt den Zustand zusätzlich zur Farbe — nicht jede Person
   unterscheidet Grün und Grau zuverlässig. */
.attendance-mark {
  position: absolute;
  top: 4px; right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}

.attendance-tile.present {
  border-color: var(--green);
  background: var(--attend-bg);
  color: var(--green);
  font-weight: 500;
}
.attendance-tile.present:hover { background: var(--attend-bg-hover); border-color: var(--green); }
.attendance-tile.present .attendance-av { background: var(--green); color: #fff; }

.attendance-tile.locked-cell { cursor: not-allowed; opacity: .7; }
.attendance-tile.locked-cell:hover { border-color: var(--line); background: var(--surface); }
.attendance-tile.present.locked-cell:hover { background: var(--attend-bg); border-color: var(--green); }

/* Legende ist seit der Trennung reine Namenserklärung, nicht mehr klickbar */


.swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.table-wrap {
  overflow: auto;
  max-height: 75vh;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
  background: var(--surface);
}

/* Fehlermeldung direkt am Formularfeld (Passwort-Dialog, Aufgaben-Dialog)
   statt als alert() — der Fehler steht dort, wo er entstanden ist. */
.field-error { font-size: 11.5px; color: var(--red); }

.hint {
  color: var(--text-subtle);
  font-size: 12px;
  margin: 8px 0;
}

.del-proj {
  color: var(--red);
  cursor: pointer;
  font-weight: 600;
}

.lock-notice button { margin-left: 12px; }


input[type=text].edit-name {
  border: 1px solid transparent;
  background: transparent;
  font-weight: 600;
  width: 100%;
  font-size: 12px;
  padding: 3px 5px;
  border-radius: var(--r-sm);
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}

input[type=text].edit-name:hover { background: rgba(0,0,0,.03); }

input[type=text].edit-name:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.18);
  outline: none;
}

/* === Scrollbars (WebKit) === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); background-clip: content-box; }

/* ============================================================
   === DARK MODE ===
   Automatisch nach Systemeinstellung ODER manuell per
   <html data-theme="dark"> auslösbar.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }

  html:not([data-theme="light"]) {
    /* Auf Eriks Wunsch ("das gesamte dark mode Farbschema an das der
       Wandtafel anpassen") übernimmt der GESAMTE App-Dark-Mode die
       Logo-Blau-Familie des Dashboards (--dash-* in body.wandtafel-aktiv
       weiter oben) statt des vorherigen, generischen Apple-Blaus — alle
       Komponenten der App lesen ausschließlich über diese Tokens, eine
       Änderung hier genügt also für die ganze Anwendung. Rot/Gelb/Grün
       bleiben als eigenständige Statusfarben bestehen (müssen unabhängig
       von der Markenfarbe sofort erkennbar sein, siehe Ampel-Logik in
       js/load/load.js), nur in denselben gedeckteren Tönen wie am Dashboard. */
    --accent:        #7fc3dd;
    --accent-hover:  #96cfe3;
    --accent-active: #5fa3c0;
    --accent-soft:   #16222c;

    --text:          #e7eef3;
    --text-muted:    #9fb3c0;
    --text-subtle:   #70838f;

    --bg:            #10181f;
    --surface:       #141c23;
    --surface-alt:   #16222c;
    --surface-sunk:  #1c2730;

    --line:          #2c3e49;
    --line-soft:     #1f2b33;

    --green:         #4cd080;
    --amber:         #e8a15c;
    --red:           #ef6f63;
    --red-hover:     #f58a7f;
    --red-active:    #c65349;

    --attend-bg:       rgba(76,208,128,.14);
    --attend-bg-hover: rgba(76,208,128,.22);

    /* Auf Weiß gesetzt — deshalb dunkler als --band-neu/--green gebraucht
       (Kontrastgrund wie im Hell-Modus): --band-neu ist das dunkle
       Logo-Blau selbst (dasselbe #116896 wie am Dashboard). */
    --band-neu:         #116896;
    --band-fortschritt: #1f7a4f;

    --protokoll-neu-bg:     rgba(255,214,10,.14);
    --protokoll-neu-border: #ffd60a;

    --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
    --sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;

  --accent:        #7fc3dd;
  --accent-hover:  #96cfe3;
  --accent-active: #5fa3c0;
  --accent-soft:   #16222c;

  --text:          #e7eef3;
  --text-muted:    #9fb3c0;
  --text-subtle:   #70838f;

  --bg:            #10181f;
  --surface:       #141c23;
  --surface-alt:   #16222c;
  --surface-sunk:  #1c2730;

  --line:          #2c3e49;
  --line-soft:     #1f2b33;

  --green:         #4cd080;
  --amber:         #e8a15c;
  --red:           #ef6f63;
  --red-hover:     #f58a7f;
  --red-active:    #c65349;

  --attend-bg:       rgba(76,208,128,.14);
  --attend-bg-hover: rgba(76,208,128,.22);

  --band-neu:         #116896;
  --band-fortschritt: #1f7a4f;

  --protokoll-neu-bg:     rgba(255,214,10,.14);
  --protokoll-neu-border: #ffd60a;

  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --sh-2: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
  --sh-3: 0 12px 40px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
}

/* Gemeinsame Dark-Style-Regeln (System oder manuell) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .app-topbar {
    background: rgba(28,28,30,.75);
    border-bottom: 1px solid var(--line);
  }
  html:not([data-theme="light"]) .toolbar-divider { background: var(--line); }
  html:not([data-theme="light"]) .sidebar-nav-divider { border-top-color: var(--line); }
  html:not([data-theme="light"]) .side-menu {
    background: var(--surface);
    border-right-color: var(--line);
  }
  html:not([data-theme="light"]) .side-menu-mobile-header,
  html:not([data-theme="light"]) .sidebar-collapse-bar {
    border-color: var(--line);
  }
  html:not([data-theme="light"]) .user-menu-dropdown {
    background: var(--surface);
    border-color: var(--line);
  }
  html:not([data-theme="light"]) .user-menu-info { border-bottom-color: var(--line); }
  html:not([data-theme="light"]) a.menu-item:hover,
  html:not([data-theme="light"]) button.menu-item:hover { background: rgba(255,255,255,.08); }
  html:not([data-theme="light"]) .sidebar-collapse-bar:hover { background: rgba(255,255,255,.08); }
  html:not([data-theme="light"]) .theme-toggle-circle {
    background: var(--surface-sunk);
    border-color: var(--line);
    color: var(--text);
  }
  html:not([data-theme="light"]) .menu-corner-btn {
    background: var(--surface-sunk);
    border-color: var(--line);
    color: var(--text);
  }
  html:not([data-theme="light"]) .menu-corner-btn:hover { background: var(--line); }
  html:not([data-theme="light"]) .topbar-logo { filter: brightness(.92); }
  html:not([data-theme="light"]) .nav-item:hover  { background: rgba(255,255,255,.08); }
  html:not([data-theme="light"]) .nav-item.active { background: var(--accent-soft); }

  html:not([data-theme="light"]) button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); }
  html:not([data-theme="light"]) button.secondary        { background: rgba(255,255,255,.10); color: var(--text); }
  html:not([data-theme="light"]) button.secondary:hover  { background: rgba(255,255,255,.15); }
  html:not([data-theme="light"]) button.secondary:active { background: rgba(255,255,255,.20); }
  html:not([data-theme="light"]) button.danger        { background: #d70015; }
  html:not([data-theme="light"]) button.danger:hover  { background: var(--red-hover); }
  html:not([data-theme="light"]) button.danger:active { background: var(--red-active); }

  html:not([data-theme="light"]) select,
  html:not([data-theme="light"]) input[type=text],
  html:not([data-theme="light"]) input[type=email],
  html:not([data-theme="light"]) input[type=date] {
    background-color: var(--surface-sunk);
    border-color: var(--line);
    color: var(--text);
  }
  html:not([data-theme="light"]) select:focus,
  html:not([data-theme="light"]) input[type=text]:focus,
  html:not([data-theme="light"]) input[type=email]:focus,
  html:not([data-theme="light"]) input[type=date]:focus {
    box-shadow: 0 0 0 3px rgba(10,132,255,.28);
  }
  html:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  }
  html:not([data-theme="light"]) ::placeholder { color: var(--text-subtle); }

  html:not([data-theme="light"]) .status-edit {
    background: var(--surface-sunk);
    border-color: var(--line);
  }
  html:not([data-theme="light"]) .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); }
  html:not([data-theme="light"]) .status-edit.status-new { color: var(--green); }
  html:not([data-theme="light"]) .status-toolbar {
    background: rgba(44,44,46,.9);
    border-color: var(--line);
  }
  html:not([data-theme="light"]) .status-toolbar button:hover  { background: rgba(255,255,255,.10); }
  html:not([data-theme="light"]) .status-toolbar button:active { background: rgba(255,255,255,.16); }

  html:not([data-theme="light"]) .locked-cell { background: #38383a !important; opacity: .55; }
  html:not([data-theme="light"]) .locked-cell input {
    background: #38383a !important;
    border-color: var(--line) !important;
    color: var(--text-muted) !important;
  }

  html:not([data-theme="light"]) .bar { background: #38383a; }
  html:not([data-theme="light"]) .board-avatar { border-color: var(--line); }

  html:not([data-theme="light"]) .load-card { border-color: var(--line); }
  html:not([data-theme="light"]) .bubble-card,
  html:not([data-theme="light"]) .projects-sortable,
  html:not([data-theme="light"]) .people-readonly,
  html:not([data-theme="light"]) .board-list { border-color: var(--line); }
  html:not([data-theme="light"]) .modal-bg { background: rgba(0,0,0,.6); }
  html:not([data-theme="light"]) .modal    { border: 1px solid var(--line); }

  html:not([data-theme="light"]) .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  html:not([data-theme="light"]) .table-wrap { border-color: var(--line); }
  html:not([data-theme="light"]) .del-proj { color: var(--red); }
  html:not([data-theme="light"]) input[type=text].edit-name { border-color: transparent; background: transparent; }
  html:not([data-theme="light"]) input[type=text].edit-name:hover { background: rgba(255,255,255,.06); }
  html:not([data-theme="light"]) input[type=text].edit-name:focus {
    background: var(--surface-sunk);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,.28);
  }

  html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
  html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; }
}

html[data-theme="dark"] .app-topbar {
  background: rgba(28,28,30,.75);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .toolbar-divider { background: var(--line); }
html[data-theme="dark"] .sidebar-nav-divider { border-top-color: var(--line); }
html[data-theme="dark"] .side-menu {
  background: var(--surface);
  border-right-color: var(--line);
}
html[data-theme="dark"] .side-menu-mobile-header,
html[data-theme="dark"] .sidebar-collapse-bar {
  border-color: var(--line);
}
html[data-theme="dark"] .user-menu-dropdown {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .user-menu-info { border-bottom-color: var(--line); }
html[data-theme="dark"] a.menu-item:hover,
html[data-theme="dark"] button.menu-item:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .sidebar-collapse-bar:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .theme-toggle-circle {
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .menu-corner-btn {
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] .menu-corner-btn:hover { background: var(--line); }
html[data-theme="dark"] .topbar-logo { filter: brightness(.92); }
html[data-theme="dark"] .nav-item:hover  { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .nav-item.active { background: var(--accent-soft); }

html[data-theme="dark"] button:focus-visible { box-shadow: 0 0 0 3px rgba(10,132,255,.45); }
html[data-theme="dark"] button.secondary        { background: rgba(255,255,255,.10); color: var(--text); }
html[data-theme="dark"] button.secondary:hover  { background: rgba(255,255,255,.15); }
html[data-theme="dark"] button.secondary:active { background: rgba(255,255,255,.20); }
html[data-theme="dark"] button.danger        { background: #d70015; }
html[data-theme="dark"] button.danger:hover  { background: var(--red-hover); }
html[data-theme="dark"] button.danger:active { background: var(--red-active); }

html[data-theme="dark"] select,
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date] {
  background-color: var(--surface-sunk);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input[type=text]:focus,
html[data-theme="dark"] input[type=date]:focus {
  box-shadow: 0 0 0 3px rgba(10,132,255,.28);
}
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23a1a1a6' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] ::placeholder { color: var(--text-subtle); }

html[data-theme="dark"] .status-edit {
  background: var(--surface-sunk);
  border-color: var(--line);
}
html[data-theme="dark"] .status-edit:focus { box-shadow: 0 0 0 3px rgba(10,132,255,.28); }
html[data-theme="dark"] .status-edit.status-new { color: var(--green); }
html[data-theme="dark"] .status-toolbar {
  background: rgba(44,44,46,.9);
  border-color: var(--line);
}
html[data-theme="dark"] .status-toolbar button:hover  { background: rgba(255,255,255,.10); }
html[data-theme="dark"] .status-toolbar button:active { background: rgba(255,255,255,.16); }

html[data-theme="dark"] .locked-cell { background: #38383a !important; opacity: .55; }
html[data-theme="dark"] .locked-cell input {
  background: #38383a !important;
  border-color: var(--line) !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .bar { background: #38383a; }
html[data-theme="dark"] .board-avatar { border-color: var(--line); }

html[data-theme="dark"] .load-card { border-color: var(--line); }
html[data-theme="dark"] .bubble-card,
html[data-theme="dark"] .projects-sortable,
html[data-theme="dark"] .people-readonly,
html[data-theme="dark"] .board-list { border-color: var(--line); }
html[data-theme="dark"] .modal-bg { background: rgba(0,0,0,.6); }
html[data-theme="dark"] .modal    { border: 1px solid var(--line); }

html[data-theme="dark"] .swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
html[data-theme="dark"] .table-wrap { border-color: var(--line); }
html[data-theme="dark"] .del-proj { color: var(--red); }
html[data-theme="dark"] input[type=text].edit-name { border-color: transparent; background: transparent; }
html[data-theme="dark"] input[type=text].edit-name:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] input[type=text].edit-name:focus {
  background: var(--surface-sunk);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(10,132,255,.28);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.34); background-clip: content-box; }

/* === GANTT / Projektplan === */
.modal-wide {
  max-width: 900px;
  width: 92%;
}

.gantt-container {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 12px 0;
  box-shadow: var(--sh-1);
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gantt-chart {
  width: 100%;
  min-width: 0;
  position: relative;
}

.gantt-row {
  display: flex;
  align-items: center;
  position: relative;
  height: 32px;
  border-bottom: 1px solid var(--line-soft);
}

.gantt-row.gantt-header,
.gantt-row.gantt-days {
  height: 26px;
  border-bottom: 1px solid var(--line);
}

.gantt-timeline {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.gantt-row.gantt-project {
  height: 34px;
}

.gantt-row.gantt-project.highlighted {
  background: var(--accent-soft);
}

.gantt-row.gantt-vacation {
  height: 22px;
  background: transparent;
  font-size: 11px;
  color: var(--text-muted);
}

.gantt-label {
  width: 220px;
  flex: 0 0 220px;
  min-width: 220px;
  max-width: 220px;
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 12px;
  border-right: 1px solid var(--line-soft);
  position: sticky;
  left: 0;
  z-index: 10;
  background: var(--surface);
  display: flex;
  align-items: center;
}

.gantt-row.gantt-header .gantt-label,
.gantt-row.gantt-days .gantt-label {
  background: var(--surface);
  z-index: 15;
}

.gantt-row.gantt-project.highlighted .gantt-label {
  background: var(--accent-soft);
}

.gantt-row.gantt-vacation .gantt-label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
}

.gantt-row.gantt-todo .gantt-label {
  background: var(--surface);
}

.gantt-vacation-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
}

.gantt-month,
.gantt-day {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.gantt-month {
  background: var(--surface-sunk);
  font-weight: 600;
}

.gantt-day {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gantt-day.weekend {
  background: var(--surface-sunk);
  opacity: .7;
}

.gantt-day.gantt-week {
  font-weight: 600;
  color: var(--text);
  border-right: 1px solid var(--line);
}

/* Raster-Overlay: liegt über die gesamte Timeline-Breite (rechts der Labels).
   Wochenend-Flächen zeichnen ohne z-index (Zeilen liegen darüber, sind aber
   transparent); die Heute-Linie bekommt z-index, damit sie über den Balken,
   aber unter den sticky Labels liegt. */
.gantt-grid-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 220px;
  right: 0;
  pointer-events: none;
}

.gantt-grid-weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--surface-sunk);
  opacity: .55;
}

.gantt-grid-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid var(--red);
  opacity: .7;
  z-index: 9;
}

.gantt-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--sh-1);
}

.gantt-bar.project {
  color: #fff;
  display: flex;
  align-items: center;
}

.gantt-bar .gantt-progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.22);
  pointer-events: none;
}

.gantt-bar-label {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-bar.vacation {
  top: 4px;
  bottom: 4px;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 159, 10, .55),
    rgba(255, 159, 10, .55) 6px,
    rgba(255, 159, 10, .35) 6px,
    rgba(255, 159, 10, .35) 12px
  );
  border: 1px solid var(--amber);
  border-radius: var(--r-pill);
}

.gantt-row.gantt-todo { height: 26px; font-size: 11px; }
.gantt-row.gantt-todo.done { opacity: .55; }
.gantt-row.gantt-milestone-row { height: 40px; font-size: 11px; background: transparent; }
.gantt-row.gantt-milestone-row .gantt-milestone { top: 6px; }
.gantt-row.gantt-milestone-row .gantt-milestone-label { top: 24px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.gantt-row.gantt-todo-add {
  height: 34px;
  font-size: 12px;
  background: var(--surface-alt);
  position: relative;
}
.gantt-todo-add-sticky {
  position: sticky;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  background: var(--surface-alt);
  border-right: 1px solid var(--line-soft);
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
}
.gantt-todo-add-sticky .gantt-label {
  position: static;
  border-right: none;
  background: transparent;
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}
.gantt-bar.todo {
  top: 5px;
  bottom: 5px;
  background: var(--accent);
  border-radius: var(--r-sm);
}
.gantt-bar.todo.done {
  background: var(--green);
}
.gantt-bar.todo.critical {
  background: var(--red);
  box-shadow: 0 0 0 2px rgba(215,0,21,.25);
}
.gantt-todo-add-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
  flex-shrink: 0;
  padding-right: 8px;
}
.gantt-todo-add input[type=text],
.gantt-todo-add input[type=date] {
  padding: 4px 7px;
  font-size: 12px;
}
.gantt-todo-add input[type=text] {
  flex: 0 0 180px;
  width: 180px;
  min-width: 140px;
}
.gantt-todo-add input[type=date] {
  flex: 0 0 120px;
  width: 120px;
  min-width: 120px;
}
.gantt-todo-add button {
  flex: 0 0 auto;
  padding: 4px 12px;
  font-size: 12px;
}
.gantt-todo-add .gantt-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  overflow: hidden;
}
.gantt-todo-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}

/* === GANTT Abhängigkeiten (Dependencies) === */
.gantt-dependencies-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.gantt-dep-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  transition: stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
}

.gantt-dep-path.conflict {
  stroke: var(--red);
  stroke-dasharray: 5 3;
}

.gantt-dep-path.done {
  stroke: var(--green);
}

.gantt-dep-path.highlight {
  stroke-width: 3.5px;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(0, 113, 227, 0.4));
}

.gantt-dep-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 6px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid rgba(0, 113, 227, 0.2);
}

.gantt-dep-badge.conflict {
  background: rgba(215, 0, 21, 0.1);
  color: var(--red);
  border-color: rgba(215, 0, 21, 0.2);
}
.gantt-todo-actions button {
  padding: 2px 7px;
  font-size: 10px;
}

.gantt-milestone {
  position: absolute;
  top: 2px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--red);
  transform: translateX(-50%);
  z-index: 2;
  cursor: grab;
}
.gantt-milestone:active { cursor: grabbing; }

.gantt-milestone-label {
  position: absolute;
  top: 16px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.gantt-bar.project,
.gantt-bar.vacation { cursor: grab; }
.gantt-bar.project:active,
.gantt-bar.vacation:active { cursor: grabbing; }

.gantt-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 3;
}
.gantt-resize-left { left: 0; }
.gantt-resize-right { right: 0; }
.gantt-resize:hover { background: rgba(255,255,255,.25); }

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

.gantt-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gantt-form-row input[type=date] { flex: 1 1 140px; }
.gantt-form-row input[type=text] { flex: 2 1 200px; }

.gantt-modal-preview .gantt-chart {
  min-width: auto;
}

/* === Datumsbereich-Picker (Von/Bis in einem Kalenderfenster) === */
.range-picker {
  position: fixed;
  z-index: 1100;
  width: 288px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 10px;
  font-size: 13px;
}

.range-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.range-picker-title {
  font-weight: 600;
  font-size: 13px;
}

.range-picker-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 6px;
}

.range-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.range-picker-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 0;
}

.range-picker-day {
  text-align: center;
  padding: 5px 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background .15s var(--ease);
}

.range-picker-day:hover { background: var(--surface-sunk); }
.range-picker-day.weekend { color: var(--text-subtle); }
.range-picker-day.today { outline: 1px solid var(--accent); outline-offset: -1px; }
.range-picker-day.in-range { background: var(--accent-soft); border-radius: 0; }
.range-picker-day.sel-start,
.range-picker-day.sel-end {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.range-picker-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

/* Anzeige-Feld, das den Picker öffnet */
.range-picker-display {
  cursor: pointer;
  background: var(--surface);
  min-width: 170px;
}

.person-absences {
  padding: 8px 8px 8px 40px;
  margin-top: 4px;
  border-radius: var(--r-md);
  background: var(--surface-alt);
}

.absence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.absence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px;
}

.absence-chip small {
  color: var(--text-muted);
  font-size: 11px;
}

.absence-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.absence-form input[type=date] { width: 130px; }
.absence-form select { min-width: 110px; }

/* Tag-Chips: editierbar in der Projekte-Liste (projects.js), read-only auf
   Board-Zeilen, Dashboard-Aufgabenkarten und der Projektplan-Kopfzeile.
   Farben ausschließlich über CSS-Variablen, die in beiden Dark-Mode-Blöcken
   bereits passend umdefiniert sind — keine zusätzlichen Dark-Overrides nötig. */
.tag-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

.tag-chip .tag-remove {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-subtle);
  line-height: 1;
  transition: color .15s var(--ease);
}

.tag-chip .tag-remove:hover { color: var(--red); }

/* === Dashboard ("Meine Aufgaben"-Tab, js/dashboard/dashboard.js) ===
   Aufbau: Kopf — Band — zwei Zonen. Die frühere Anordnung stellte die
   Uhrzeit als größte Zahl heraus, zeigte vier gleich große Kennzahlkacheln
   (meist drei davon mit einer Null) und legte alles untereinander, sodass
   der Urlaub eines Kollegen gleichrangig unter den eigenen offenen Aufgaben
   stand. */

/* ---------- Kopf: Begrüßung links, Nebensachen rechts ---------- */
.dash-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-gruss {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.dash-gruss em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}
.dash-kopf-rechts {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dash-sitzung {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
}
.dash-uhr {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Band: der Befund als Satz ---------- */
.dash-band {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: var(--surface-sunk);
  border-radius: var(--r-lg);
}
/* Ohne Befund bleibt das Band farblos — eine Null in Alarmfarbe behauptet
   ein Problem, das es nicht gibt. */
.dash-band.ist-ruhig {
  background: transparent;
  border: 1px solid var(--line-soft);
}
.dash-befund {
  margin: 0;
  flex: 1 1 300px;
  min-width: 0;
  font-size: 17px;
}
/* Die Zahl größer als der Satz: Sie ist die Nachricht, und ab 19 px fett
   gilt für den Kontrast die Schwelle für große Schrift — die Ampelfarbe
   erreicht auf der abgesetzten Bandfläche sonst nur 4,1:1 im dunklen Thema. */
.dash-befund b {
  font-size: 1.15em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-befund b.ist-rot { color: var(--red); }
.dash-befund b.ist-ruhig { color: var(--green); }

.dash-band-zahlen { display: flex; gap: 20px; flex-wrap: wrap; }
.dash-zahl { display: flex; flex-direction: column; gap: 1px; min-width: 74px; }
.dash-zahl b {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.dash-zahl span { font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.dash-zahl.ist-null b { color: var(--text-subtle); }

/* ---------- Zwei Zonen: links der Arbeitsstrom, rechts der Rand ---------- */
.dash-zonen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.dash-abschnitt { margin-bottom: 24px; }
.dash-abschnitt:last-child { margin-bottom: 0; }
.dash-abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-abschnitt-titel {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-abschnitt-zahl {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.dash-abschnitt-zusatz {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-subtle);
}

.dash-karte {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.dash-leer { padding: 16px 18px; font-size: 13px; color: var(--text-subtle); }

/* ---------- Meine Aufgaben: Zeilen statt halbseitiger Karten ---------- */
.dash-auf {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s var(--ease);
}
.dash-auf:last-child { border-bottom: none; }
.dash-auf:hover { background: var(--surface-sunk); }
.dash-auf:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.dash-auf-text { flex: 1 1 auto; min-width: 0; }
.dash-auf-titel {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-auf-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 1px;
  font-size: 11px;
  color: var(--text-subtle);
}
.dash-auf-tag {
  font-size: 10px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  color: var(--text-muted);
}

.dash-auf-fortschritt { flex: 0 0 96px; display: flex; align-items: center; gap: 8px; }
.dash-auf-bar {
  flex: 1;
  height: 5px;
  background: var(--surface-sunk);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.dash-auf-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.dash-auf-pct {
  min-width: 30px;
  text-align: right;
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

.dash-auf-frist {
  flex: 0 0 118px;
  text-align: right;
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.dash-auf-frist em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-subtle); }
.dash-auf-frist.ist-ueberfaellig, .dash-auf-frist.ist-ueberfaellig em { color: var(--red); }
.dash-auf-frist.ist-bald { color: var(--amber); }

/* ---------- Rechte Zone: Freigaben und Abwesenheiten ---------- */
.dash-rand-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.dash-rand-zeile:last-child { border-bottom: none; }
.dash-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface-sunk);
  color: var(--text-muted);
}
.dash-rand-text { flex: 1; min-width: 0; }
.dash-rand-name {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-rand-meta {
  display: block;
  font-size: 10.5px;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-chip {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  white-space: nowrap;
}
/* Wer heute fehlt, ist die eigentliche Nachricht. */
.dash-chip.ist-heute { background: var(--red); color: #fff; }

@media (max-width: 1080px) {
  .dash-zonen { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dash-auf-fortschritt { display: none; }
  .dash-gruss { font-size: 19px; }
}

/* Farbe je Abwesenheitsart. Genutzt von .absence-chip (Projektbeteiligte,
   Benutzerverwaltung, Projektbereich) und von .dash-chip im Dashboard.
   .absence-chip-live ist entfallen — das Dashboard kennzeichnet eine heute
   laufende Abwesenheit über .dash-chip.ist-heute. */
.absence-type-urlaub      { background: rgba(36,138,61,.12);  color: var(--green); border-color: transparent; }
.absence-type-krank       { background: rgba(215,0,21,.10);   color: var(--red);   border-color: transparent; }
.absence-type-fortbildung { background: rgba(178,80,0,.12);   color: var(--amber); border-color: transparent; }

/* Dark mode GANTT */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .gantt-container { border-color: var(--line); }
  html:not([data-theme="light"]) .gantt-row { border-color: var(--line); }
  html:not([data-theme="light"]) .gantt-row.gantt-header,
  html:not([data-theme="light"]) .gantt-row.gantt-days { border-color: var(--line); }
  html:not([data-theme="light"]) .gantt-month { background: var(--surface-sunk); }
  html:not([data-theme="light"]) .gantt-day.weekend { background: var(--surface-sunk); }
  html:not([data-theme="light"]) .gantt-row.gantt-project.highlighted { background: var(--accent-soft); }
  html:not([data-theme="light"]) .person-absences { background: var(--surface-sunk); border-color: var(--line); }
  html:not([data-theme="light"]) .absence-chip { background: var(--surface); border-color: var(--line); }
  html:not([data-theme="light"]) .absence-type-urlaub      { background: rgba(48,209,88,.16); }
  html:not([data-theme="light"]) .absence-type-krank       { background: rgba(255,69,58,.16); }
  html:not([data-theme="light"]) .absence-type-fortbildung { background: rgba(255,159,10,.16); }
}

html[data-theme="dark"] .gantt-container { border-color: var(--line); }
html[data-theme="dark"] .gantt-row { border-color: var(--line); }
html[data-theme="dark"] .gantt-row.gantt-header,
html[data-theme="dark"] .gantt-row.gantt-days { border-color: var(--line); }
html[data-theme="dark"] .gantt-month { background: var(--surface-sunk); }
html[data-theme="dark"] .gantt-day.weekend { background: var(--surface-sunk); }
html[data-theme="dark"] .gantt-row.gantt-project.highlighted { background: var(--accent-soft); }
html[data-theme="dark"] .person-absences { background: var(--surface-sunk); border-color: var(--line); }
html[data-theme="dark"] .absence-chip { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .absence-type-urlaub      { background: rgba(48,209,88,.16); }
html[data-theme="dark"] .absence-type-krank       { background: rgba(255,69,58,.16); }
html[data-theme="dark"] .absence-type-fortbildung { background: rgba(255,159,10,.16); }
/* === Bereich „Einstellungen" (js/settings/settings.js) ===
   Karten in einem Raster: „Mein Konto" und „Honorar" sind schmal, die
   Vorlagen-Pflege bekommt über .settings-card-wide die volle Breite, weil
   dort eine Liste mit Bezeichnung, Versatz/Dauer und Lösch-Knopf steht. Die
   Felder der beiden firmenweiten Abschnitte nutzen weiterhin die Klassen aus
   plan-styles.css (.honorar-anteil-field, .template-admin-row …) — sie sind
   mit den Masken aus den Projekt-Dialogen hierher gezogen und mussten dafür
   nicht umbenannt werden. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  /* Seit immer nur EIN Abschnitt sichtbar ist (showAdminSection()), füllt
     eine einzelne Karte sonst die ganze Fensterbreite — Beschriftung links,
     Eingabefeld ganz rechts. Die Grenze hält Feld und Bezeichnung beisammen
     und lässt der Aufwands-Matrix trotzdem genug Platz. */
  max-width: 1180px;
}
/* Ausnahme fuer breite Abschnitte (Kennzeichen wide in ADMIN_SECTIONS,
   js/admin/admin.js): Die Benutzertabelle hat zehn Spalten und scrollte in
   der begrenzten Breite quer. Sie darf das Fenster ausnutzen. */
.settings-grid.is-wide { max-width: none; }
.settings-card-wide { grid-column: 1 / -1; }

.settings-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--sh-1);
}
.settings-card-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
/* Reichweite einer Einstellung — „firmenweit" heißt: wirkt bei allen. */
.settings-scope {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

.settings-kv { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.settings-kv-row {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
}
.settings-kv-row:last-child { border-bottom: none; }
.settings-kv-key { width: 150px; flex-shrink: 0; color: var(--text-muted); }
.settings-warn { color: var(--amber); }
.settings-email-edit { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; }
.settings-email-edit input[type=email] { flex: 1; max-width: 320px; min-width: 160px; }

.settings-inline-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 10px;
}
.settings-inline-field select { min-width: 120px; }

/* KI-Zugangsdaten (Einstellungen -> Mein Konto, js/settings/settings.js):
   ein umrandeter Block je Anbieter statt eines durchgehenden Feld-Rasters —
   ChatGPT und Claude sind zwei getrennte Zugänge, keine vier gleichrangigen
   Felder. Design-Entwurf mit Erik abgestimmt (Artifact d7ab2945). */
.ai-provider { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 16px; }
.ai-provider + .ai-provider { margin-top: 12px; }
.ai-provider-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ai-provider-info { min-width: 0; }
.ai-provider-mark {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: -.02em;
}
.ai-provider-mark.chatgpt { background: #10a37f; }
.ai-provider-mark.claude  { background: #c96442; }
.ai-provider-name { font-weight: 600; font-size: 13px; }
.ai-provider-sub  { font-size: 11.5px; color: var(--text-subtle); }

/* Status-Pill: derselbe Punkt-plus-Text-Aufbau wie an anderen Stellen der
   App (z. B. .protokoll-status-dot), hier als Pill neben dem Anbieternamen. */
.ai-status-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  color: var(--text-muted);
  flex-shrink: 0;
}
.ai-status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); flex-shrink: 0; }
.ai-status-chip.is-on { color: var(--green); }
.ai-status-chip.is-on .dot { background: var(--green); }

.ai-provider-row { display: flex; gap: 8px; }
.ai-provider-row input[type=password],
.ai-provider-row input[type=text] {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
}
.ai-provider-row input::placeholder { color: var(--text-subtle); }
.ai-provider-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Häkchen-Knopf statt Textknopf "Speichern" — spricht für sich, direkt neben
   dem Feld, das er betrifft. "Entfernen" bleibt ein leiser Text-Link, weil
   er der seltenere, destruktivere Pfad ist. */
.ai-icon-btn {
  flex-shrink: 0;
  width: 30px; height: 30px; padding: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.ai-icon-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* flex-shrink:0 ist hier kein Stil-Detail, sondern die Abhilfe für einen
   Chromium-Eigenheit: ein <svg> als Flex-Kind schrumpft ohne explizites
   flex-shrink:0 auf Breite 0 (min-width:auto berechnet die Inhaltsgröße
   eines SVG offenbar als 0), wodurch das Häkchen-Icon unsichtbar wurde. */
.ai-icon-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.ai-text-btn {
  flex-shrink: 0;
  border: none; background: none;
  font-size: 11.5px; color: var(--text-subtle);
  cursor: pointer; padding: 0 2px;
}
.ai-text-btn:hover { color: var(--red); }
.ai-text-btn:disabled { opacity: .4; cursor: default; }
.ai-text-btn:disabled:hover { color: var(--text-subtle); }

/* Cloud/Eigener-Server-Umschalter: ersetzt den früheren, eingeklappten
   "API-URL"-Link. Ein eigener Server (LM Studio, Ollama) ist ein Kernfall,
   kein Nebendetail — genau das wollte Erik als Erstes ausprobieren, als
   er die Karte in echt benutzte — deshalb jetzt eine sichtbare Wahl statt
   eines kleinen Links, den man erst entdecken muss. */
.ai-mode-toggle {
  display: inline-flex; background: var(--surface-sunk); border-radius: var(--r-pill);
  padding: 3px; gap: 2px; margin-top: 12px;
}
.ai-mode-toggle button {
  border: none; background: none; padding: 5px 13px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.ai-mode-toggle button.is-active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--sh-1); }

.ai-url-panel { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-soft); display: none; }
.ai-url-panel.is-open { display: block; }
.ai-url-panel label { display: block; font-size: 11px; color: var(--text-subtle); margin-bottom: 5px; }
.ai-url-panel .ai-provider-row { margin-bottom: 0; }
/* Zweites Label-/Zeilenpaar im selben Panel (Modellname, unter der
   Server-Adresse): braucht Abstand nach oben, den das erste (am
   Panel-Anfang) nicht haben darf — gleiches Muster wie .drawer-h4-zweit. */
.ai-url-panel label:nth-of-type(2) { margin-top: 12px; }

/* "Neu verbinden": prüft die gespeicherte Konfiguration wirklich (POST
   /my-ai-settings/test), statt nur anzuzeigen, dass irgendein Schlüssel
   gespeichert ist. Umrandet statt gefüllt, da kein primärer Speichern-
   Knopf — sitzt direkt neben dem Status-Pill, den er betrifft. */
.ai-reconnect-btn {
  flex-shrink: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.ai-reconnect-btn:hover { background: var(--surface-alt); color: var(--accent); border-color: var(--accent); }
.ai-reconnect-btn:disabled { opacity: .4; cursor: default; }
.ai-reconnect-btn:disabled:hover { background: var(--surface); color: var(--text-muted); border-color: var(--line); }
.ai-reconnect-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.ai-reconnect-btn.is-testing svg { animation: ai-reconnect-spin .9s linear infinite; }
@keyframes ai-reconnect-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Fehler aus "Neu verbinden": bleibt stehen, bis der nächste Test läuft
   oder erfolgreich ist — kein flüchtiger Hinweis. Dieselbe Lehre wie beim
   Protokoll-Import-Banner: ein Toast neben einer sich gleichzeitig
   ändernden Ansicht wird leicht übersehen. :empty blendet die Zeile aus,
   solange kein Fehler ansteht, ohne eigenes hidden-Attribut in JS. */
.ai-test-error { font-size: 11.5px; color: var(--red); margin-top: 8px; }
.ai-test-error:empty { display: none; }

/* Bestätigung nach dem Speichern. Bewusst kein alert(): ein gelungener
   Speichervorgang soll den Arbeitsfluss nicht anhalten. */
.settings-note {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--green);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.settings-note.show { opacity: 1; }

/* Felder und Matrix der firmenweiten Einstellungen (js/settings/settings.js).
   Die Aufwands-Matrix kann breiter werden als die Karte — sie scrollt dann in
   ihrem eigenen Container, statt die Seite quer zu ziehen. */
.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 16px;
  margin-bottom: 12px;
}
.settings-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}
.settings-field input { width: 88px; padding: 4px 7px; font-size: 12.5px; text-align: right; }

.settings-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  margin: 4px 0 2px;
}

.settings-subtitle {
  margin: 16px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.settings-matrix-wrap { overflow-x: auto; margin-bottom: 10px; }
.settings-matrix { border-collapse: collapse; font-size: 12px; }
.settings-matrix th, .settings-matrix td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.settings-matrix thead th { color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.settings-matrix tbody th { text-align: left; font-weight: 500; white-space: nowrap; }
.settings-matrix input { width: 62px; padding: 3px 6px; font-size: 12px; text-align: right; }

.settings-holiday-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

/* Abweichende Stelle im Auslastungs-Tab (js/load/load.js) — steht nur da,
   wenn die Person nicht voll beschäftigt ist. */
.load-capacity {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  padding: 1px 7px;
  margin-left: 6px;
}

/* Benutzerverwaltung (Abschnitt „Benutzerverwaltung" des Bereichs #admin,
   js/admin-users.js). Diese Regeln standen als <style>-Block in der frueheren
   eigenstaendigen Seite public/admin-users.html; die Regeln der dortigen
   Seiten-Huelle (.admin-page/.admin-header/.admin-body) sind mit ihr
   entfallen, weil der Abschnitt jetzt in der normalen App-Huelle liegt. */
.admin-toolbar { margin-bottom: 14px; }
td.actions-cell { white-space: nowrap; }
td.actions-cell button { margin: 2px; }
.badge-active { color: var(--green); font-weight: 600; }
.badge-inactive { color: var(--text-muted); }
.badge-warn { color: var(--amber); font-weight: 600; }
/* Das einmalig angezeigte Passwort laesst sich mit einem Klick markieren. */
#generatedPasswordBox {
  display: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  font-size: 13px;
}
#generatedPasswordBox b { user-select: all; }

/* === Verlauf: die Kacheln der Vorwochen (js/wochenbericht/wochenbericht.js)
   Im wöchentlichen Teammeeting wird jedes Projekt angesehen; der Verlauf
   zeigt auf Knopfdruck, wie der Stand in den Sitzungen davor war. Waagerecht
   und scrollbar, weil der Bericht ohnehin sehr lang ist — eine Liste
   untereinander hätte ihn je Projekt um ein Vielfaches verlängert. === */
.timeline-block {
  grid-column: 1 / -1;
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.timeline-block > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-muted);
  list-style: none;
  user-select: none;
}
.timeline-block > summary::-webkit-details-marker { display: none; }
/* Der Zähler schiebt sich sonst über die ganze Kartenbreite ans rechte Ende
   (margin-left:auto von .comment-history-count) und steht dort verloren —
   hier gehört er direkt an das Wort "Verlauf". */
.timeline-block > summary .comment-history-count { margin-left: 0; }
.timeline-block > summary:hover { color: var(--text); }
.timeline-block[open] > summary .comment-history-caret { transform: rotate(90deg); }

.timeline-body { padding-top: 10px; }

/* Die Schiene scrollt waagerecht; die Karte selbst darf dabei nicht breiter
   werden, deshalb min-width:0 am Elternraster (siehe .board-drawer). */
.timeline-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.timeline-card {
  flex: 0 0 190px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  font-size: 12px;
}
.timeline-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.timeline-kw { font-weight: 600; white-space: nowrap; }
.timeline-datum { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

/* Der Kommentar wird auf sechs Zeilen begrenzt, damit alle Kacheln einer
   Schiene gleich hoch bleiben; der vollständige Text steht im Tooltip. */
.timeline-text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  min-height: 3em;
}
.timeline-leer { color: var(--text-muted); font-style: italic; }

.timeline-lph-list { display: flex; flex-direction: column; gap: 1px; }
.timeline-lph {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.timeline-termine { display: flex; flex-direction: column; gap: 1px; }
.timeline-termin { color: var(--text-muted); font-size: 11.5px; }

/* Gegenüber der Kachel DAVOR geänderte Werte. Dezent, aber auffindbar: Bei
   zehn Leistungsphasen findet man die eine geänderte Zahl sonst nicht. */
.timeline-lph.is-changed,
.timeline-termin.is-changed { color: var(--accent); font-weight: 600; }

/* "übernehmen" in der Verlaufs-Kachel: übernimmt die einzige Funktion, die
   der entfallene Aufklapper "Frühere Sitzungen" über das Anzeigen hinaus
   hatte. Dezent, weil es in jeder Kachel steht und nicht mit dem Kommentar
   um Aufmerksamkeit ringen soll. */
.timeline-take {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.timeline-take:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.timeline-take:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Der Verfasser steht in der dichten Fassung in der Fußzeile neben den
   Knöpfen statt in einer eigenen Kopfzeile darüber. */
/* Der Verfasser teilt sich die Fußzeile mit den Knöpfen. Er darf sie nicht
   zweizeilig machen — deshalb bleibt er auf einer Zeile und wird lieber
   gekürzt; der vollständige Eintrag steht ohnehin im Verlauf. */
.comment-foot-author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-subtle);
}
.comment-foot-author * { display: inline; white-space: nowrap; }
/* Das Verfasser-Kürzel klebte sonst am Namen: Der Avatar ist in der Fußzeile
   inline gesetzt und bringt keinen eigenen Abstand mehr mit. */
.comment-foot-author .comment-av { margin-right: 4px; }
.comment-foot-author .comment-sep { margin: 0 4px; }

.timeline-people { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding-top: 2px; }
.timeline-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
}

/* === Wochenbericht als Tagesordnung, Fokus-Modus (Eriks Wahl "C" aus dem
   Darstellungs-Vergleich, js/wochenbericht/wochenbericht.js) ===
   Links eine schmale Nummern-Leiste (jedes Projekt nur eine Position + ggf.
   ein Änderungs-Punkt, Name im Tooltip), rechts das gewählte Projekt — nur
   Kommentar und Kernstatus liegen dort offen, Leistungsphasen/Beteiligte/
   Anwesenheit stecken in aufklappbaren Abschnitten (.bericht-disclosure).
   Ersetzt die vorherige ausgeschriebene Liste|Detail-Darstellung, die mit
   Gewerke-Dropdown, Fortschrittsbalken, Suchfeld, mehreren Badges je Zeile
   und allem gleichzeitig sichtbar als "zu überladen" zurückgemeldet wurde.
   Eine ganze Fläche (.bericht-panel), nicht zwei lose nebeneinanderstehende
   Karten — genau wie im freigegebenen Entwurf: eine Kopfleiste mit eigenem
   Hintergrund/Trennlinie, darunter die Leiste als Spalte MIT dem Ergebnis
   verbunden (Trennlinie statt eigenem Rahmen). */
.bericht-titelzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bericht-titelzeile button { margin-left: auto; }

.bericht-panel {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
}

.bericht-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--line-soft);
}
.bericht-gewerk-select {
  font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: var(--r-sm); background: var(--surface-alt);
  border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.bericht-ring {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bericht-ring span { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); display: block; }
.bericht-fortschritt-text { font-size: 11.5px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
/* Reines Textlink, kein Knopf — im Entwurf steht an dieser Stelle nur der
   Fortschritt, nicht noch eine zusätzliche Schaltfläche daneben. */
.bericht-reset-link {
  font-size: 11.5px; font-weight: 600; border: none; background: none;
  color: var(--text-subtle); cursor: pointer; padding: 0; text-decoration: underline;
  text-decoration-color: var(--line);
}
.bericht-reset-link:hover { color: var(--text); }
.bericht-search-btn {
  margin-left: auto; border: 1px solid var(--line); background: var(--surface-alt);
  color: var(--text-subtle); font-size: 12px; padding: 5px 10px;
  border-radius: var(--r-pill); cursor: pointer;
}
.bericht-search-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.bericht-suche-input {
  margin-left: auto; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-sunk); color: var(--text); font-size: 12px;
  padding: 6px 12px; width: 170px;
}
.bericht-suche-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- Planung (Terminplan-Sandbox, js/planung/planung.js) ---------- */
.planung-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line-soft);
  margin-bottom: 8px; cursor: pointer; transition: background .15s var(--ease);
}
.planung-row:hover { background: var(--surface-alt); }
.planung-row-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.planung-row-icon.honorar { background: var(--accent-soft); color: var(--accent); }
.planung-row-icon.leer { background: var(--surface-sunk); color: var(--text-subtle); }
.planung-row-main { flex: 1; min-width: 0; }
.planung-row-name { font-size: 14px; font-weight: 600; margin: 0; }
.planung-row-meta { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.planung-row-stat { text-align: right; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.planung-row-stat b { display: block; color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

.planung-choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card {
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 14px 12px;
  cursor: pointer; background: var(--surface-alt); transition: border-color .15s ease;
}
.choice-card:hover { border-color: var(--accent); }
.choice-card.is-gewaehlt { border-color: var(--accent); }
.choice-card-icon { font-size: 18px; margin-bottom: 8px; display: block; }
.choice-card-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.choice-card-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.empty-hint { text-align: center; padding: 60px 20px; color: var(--text-subtle); font-size: 13px; }
.empty-hint .big { font-size: 15px; color: var(--text-muted); margin-bottom: 6px; display: block; }

/* ---------- Plan Checker (Studenten, js/planchecker/planchecker.js) ----------
   Darstellung "Arbeitsfläche" (Eriks Wahl "B" aus dem Design-Vergleich): zwei
   Spalten dauerhaft nebeneinander — links Upload/Konfiguration, rechts das
   Ergebnis, damit ein erneutes Prüfen nach einer Korrektur das vorherige
   Ergebnis nicht aus dem Blick verliert. Eigene .pc-*-Klassen statt
   bestehender Komponenten (.board-drawer, .settings-card …): keine davon
   passt auf eine Zwei-Spalten-Arbeitsfläche mit Ablagefläche + Ergebnisliste,
   ein Zurechtbiegen hätte mehr Sonderfälle erzeugt als eine schlanke eigene
   Regelgruppe. */
.pc-layout { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .pc-layout { grid-template-columns: 1fr; } }

.pc-panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 20px; }

.pc-drop {
  display: block; border: 1.5px dashed var(--line); border-radius: var(--r-md);
  padding: 20px 14px; text-align: center; color: var(--text-muted);
  background: var(--surface-alt); cursor: pointer; font-size: 12.5px;
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
}
.pc-drop:hover, .pc-drop.is-dragover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.pc-drop-name { font-weight: 650; color: var(--text); margin-top: 4px; font-size: 13px; word-break: break-word; }

.pc-section { margin-top: 18px; }
.pc-label { display: block; font-size: 11.5px; font-weight: 650; color: var(--text-muted); margin-bottom: 5px; }

.pc-merkmal-chip { font-size: 12.5px; padding: 5px 2px; color: var(--text-muted); }
.pc-zusatz { margin-top: 8px; }
.pc-zusatz .pc-input { width: 100%; }

/* background-color statt der background-Kurzschreibweise: Die Kurzschreibweise
   setzt background-repeat/-position implizit auf ihre Vorgabewerte zurück
   (repeat/0% 0%) und schlägt dabei wegen höherer Klassen-Spezifität die
   globalen select-Regeln (background-repeat:no-repeat, siehe weiter oben),
   die den eigenen SVG-Pfeil sonst nur einmal rechts zeigen — das gekachelte
   Pfeil-Muster, das als "komisch" auffiel, war genau das. */
.pc-select, .pc-input {
  border: 1px solid var(--line); border-radius: var(--r-md); background-color: var(--surface);
  color: var(--text); font-size: 13px; font-family: inherit; padding: 8px 10px;
}
.pc-select:focus, .pc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.pc-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: var(--r-md); cursor: pointer;
}
.pc-btn:hover { background: var(--surface-alt); }
.pc-btn:disabled { opacity: .6; cursor: default; }
.pc-btn-primary { border: none; background: var(--accent); color: #fff; }
.pc-btn-primary:hover { background: var(--accent-hover); }
.pc-error { color: var(--red); margin: 8px 0 0; }

.pc-verdict {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff;
}
.pc-verdict.ok { background: var(--green); }
.pc-verdict.fail { background: var(--red); }

.pc-results { min-height: 420px; display: flex; flex-direction: column; }
.pc-results-empty { margin: auto; text-align: center; color: var(--text-subtle); padding: 40px 20px; }
.pc-results-empty .big { font-size: 14px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.pc-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.pc-result-head .filename { font-weight: 650; }
.pc-result-head .meta { color: var(--text-subtle); font-size: 12px; margin-left: auto; }
.pc-result-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.pc-result-row:last-child { border-bottom: none; }
.pc-result-row .titel { font-weight: 650; margin-bottom: 2px; font-size: 13px; }
.pc-result-row .begruendung { color: var(--text-muted); font-size: 12.5px; }
.pc-result-text { flex: 1 1 auto; min-width: 0; }
/* pc-result-shot: Screenshot des Planausschnitts, den die KI für das Merkmal
   als Beleg gewählt hat (server.js, pruefePlanMitKI(), bildIndex) — nur
   vorhanden, wenn die KI einen gültigen Bild-Index geliefert hat. Ein
   <button>, kein <a> (öffnet #pcShotModal statt eines Links auf die
   data:-URL, s. planCheckerZeigeScreenshot() — ein Link blieb wirkungslos,
   da Chrome das Öffnen einer data:-URL in einem neuen Tab blockiert),
   deshalb die Button-Vorgaben zurückgesetzt. */
.pc-result-shot { flex: 0 0 auto; display: block; background: none; border: none; padding: 0; cursor: pointer; }
.pc-result-shot img {
  width: 110px; height: 80px; object-fit: cover; display: block;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-alt);
}
.pc-result-shot:hover img { border-color: var(--accent); }
.bericht-layout { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 760px) { .bericht-layout { grid-template-columns: 48px minmax(0, 1fr); } }

.bericht-rail {
  background: var(--surface-alt);
  border-right: 1px solid var(--line-soft);
  padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  /* Die Leiste bleibt beim Scrollen im Blick — sie IST die Tagesordnung. Kein
     eigener Rahmen/Radius/Schatten mehr und keine eigene Höhenbegrenzung:
     die Fläche gehört zu .bericht-panel, und eine gedeckelte Höhe zwang den
     eigenen (inzwischen entfernten) Tooltip zum Abschneiden — ein Element mit
     overflow-y ungleich visible schneidet nach der CSS-Spezifikation auch in
     X-Richtung ab. */
  position: sticky; top: 64px;
}
.bericht-rail-item {
  position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-subtle); cursor: pointer;
}
.bericht-rail-item:hover { background: var(--surface-sunk); color: var(--text); }
.bericht-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bericht-rail-item.is-aktiv { background: var(--accent); color: #fff; }
/* Abgehakt: zurückgenommen, aber erkennbar — man muss im Meeting noch sehen
   können, was man schon besprochen hat. */
.bericht-rail-item.is-ab { opacity: .55; }
.bericht-rail-item.is-aktiv.is-ab { opacity: 1; }
.bericht-rail-num { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bericht-rail-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; }
.bericht-rail-dot.is-new, .bericht-rail-dot.is-status { background: var(--band-neu); }
.bericht-rail-dot.is-progress { background: var(--band-fortschritt); }
.bericht-rail-item.is-aktiv .bericht-rail-dot { outline: 1.5px solid var(--accent-soft); outline-offset: -1px; }
.bericht-rail-tooltip {
  position: absolute; left: 48px; top: 50%; transform: translateY(-50%);
  background: var(--text); color: var(--surface); font-size: 11px; padding: 4px 8px;
  border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s var(--ease); z-index: 5;
}
.bericht-rail-item:hover .bericht-rail-tooltip,
.bericht-rail-item:focus-visible .bericht-rail-tooltip { opacity: 1; }

/* max-width: die Hauptspalte bleibt eine schmale Lesespalte statt bis zum
   rechten Rand zu laufen — Teil der Fokus-Idee, nicht nur die Nebeninfos
   wegzuklappen, sondern auch dem Kommentar selbst keine unnötige Breite zu
   geben. */
.bericht-main { padding: 26px 36px 30px; max-width: 640px; min-width: 0; }

.bericht-head-line { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bericht-head-nr {
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 11.5px;
  color: var(--text-subtle);
}
.bericht-change-pill {
  font-size: 10.5px; font-weight: 700; color: #fff; padding: 2px 9px; border-radius: var(--r-pill);
}
.bericht-change-pill.is-new, .bericht-change-pill.is-status { background: var(--band-neu); }
.bericht-change-pill.is-progress { background: var(--band-fortschritt); }
.bericht-h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.012em; margin: 0 0 3px; }
.bericht-sub { color: var(--text-subtle); font-size: 12px; margin-bottom: 16px; }

.bericht-abwesend-hinweis {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font-size: 12px; margin-bottom: 16px;
}

/* Der Kommentar der Vorwoche steht ÜBER dem Eingabefeld: "Was hatten wir
   letzte Woche vereinbart?" ist die häufigste Frage im Meeting. */
.bericht-vorwoche {
  background: var(--surface-sunk); border-radius: var(--r-md);
  padding: 9px 12px; margin-bottom: 14px; font-size: 12px; color: var(--text-muted);
}
.bericht-vorwoche-label {
  display: block; font-weight: 600; color: var(--text-subtle);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; margin-bottom: 3px;
}
.bericht-vorwoche-text { color: var(--text-muted); }

.bericht-detail-fuss { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.bericht-fuss-spacer { flex: 1; }

.person-chip-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.protokoll-text {
  width: 100%; font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 12px; line-height: 1.5; resize: vertical;
}

/* === Projektbereich: Leistungsstand & Abrechnung ===========================
   Karte im Dashboard des Projektbereichs (renderPlanLeistung() in
   js/plan/plan-leistung.js): erbrachter Leistungswert aus Honorar, HOAI-Anteil
   je Leistungsphase und Fortschritt der Phase. Ausschliesslich Design-Tokens,
   damit die Karte in hellem und dunklem Thema ohne eigene Dark-Regeln traegt.
   Die Tabelle nutzt .lp-matrix als Grundlage; .num/.strong sind hier eigene
   Regeln, weil die gleichnamigen des Honorar-Dialogs auf .honorar-table
   eingeschraenkt sind (plan-styles.css). */

.leistung-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.leistung-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 160px;
  min-width: 150px;
  padding: 10px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}
.leistung-kpi-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.leistung-kpi-value {
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.leistung-kpi-value.accent { color: var(--accent); }
.leistung-kpi-sub {
  font-size: 11.5px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* Fortschrittsbalken: derselbe Prozentwert wie die Kennzahl darueber, nur als
   Flaeche — bei zehn Leistungsphasen ist die Gesamtlage sonst nur aus der
   Tabelle zu erschliessen. */
.leistung-balken {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  overflow: hidden;
  margin: 0 0 14px;
}
.leistung-balken > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width .25s var(--ease);
}

.leistung-table { font-size: 12.5px; }
.leistung-table th.num,
.leistung-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.leistung-table td.strong { font-weight: 600; }
.leistung-table tfoot th,
.leistung-table tfoot td {
  border-top: 1px solid var(--line);
  padding: 6px 8px;
  font-weight: 600;
  background: var(--surface-alt);
}

/* Hinweis, wenn die Rechnung nicht moeglich ist (kein Honorar, keine
   beauftragte Phase, keine Anteile). Bewusst als Text und nicht als "0 EUR":
   unbekannt ist nicht dasselbe wie nichts erbracht. */
.leistung-leer {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: var(--surface-alt);
  border-left: 2px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* === Auftragsstatus: Kennzeichen an der Projektzeile und Auswahlfeld in den
   Pflegemasken (js/auftrag.js) ===
   Die Farbflächen entstehen mit color-mix aus den Ampel-Tokens, damit sie im
   hellen und im dunklen Erscheinungsbild von selbst mitwandern (feste rgba-
   Flächen tragen im Dark Mode nicht, siehe --attend-bg). Die Schriftfarbe ist
   dasselbe Token — es dreht je Erscheinungsbild ins jeweils kontrastreichere
   Ende. */
.auftrag-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  color: var(--text-muted);
}
/* Anfrage: hereinkommend, noch nichts entschieden. */
.auftrag-chip-anfrage {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
/* Angebot: draußen, Entscheidung offen — dieselbe Warnfarbe wie die Ampel. */
.auftrag-chip-angebot {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber);
}
/* Beauftragt: der Regelfall. Wird an der Projektzeile normalerweise gar nicht
   gezeigt (auftragsstatusChip() gibt dafür einen leeren String zurück), nur in
   Masken, die den Status ausdrücklich ausweisen. */
.auftrag-chip-beauftragt {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
}
/* Abgeschlossen: erledigt, tritt bewusst zurück. */
.auftrag-chip-abgeschlossen {
  background: var(--surface-sunk);
  border-color: var(--line);
  color: var(--text-subtle);
}

/* Status-Chip einer Sitzung in der Admin-Liste "Termine & Sitzungen"
   (renderAdminSitzungen(), js/admin/admin.js) — dasselbe Muster wie
   .auftrag-chip: eine neutrale Grundform, drei eingefärbte Zustände. */
.sitzung-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  color: var(--text-muted);
}
.sitzung-chip.ist-geoeffnet {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  color: var(--green);
}
.sitzung-chip.ist-entsperrt {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.sitzung-chip.ist-gesperrt {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber);
}

.auftrag-select {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}
.auftrag-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ===========================================================
   Ein Ort je Angabe — Anzeige statt Eingabe
   ===========================================================
   Kommentar, Fortschritt und Zuordnung werden nur noch im Wochenbericht
   erfasst. Die Projektliste und der Projektbereich zeigen dieselben Werte in
   derselben Anordnung, aber ohne Eingabefelder (Klasse is-ansicht) — daneben
   steht der Weg zur Bearbeitung (.drawer-verweis/.plan-verweis). */

/* Der Kommentar als Text: dieselbe Fläche wie der Editor, nur ruhiger. */
.status-edit.is-ansicht{
  cursor: default;
  background: var(--surface-sunk);
  border-style: dashed;
}

.board-lph-cell.is-ansicht{ cursor: default; }

/* Ein Kürzel, das nicht angeklickt werden kann, zeigt das auch. */
.board-avatar.is-ansicht{ cursor: default; }

/* Der Verweis auf den Erfassungsort. Er steht unter der Karte, in einer
   Zeile mit der Begründung, warum hier nichts einzugeben ist. */
.drawer-verweis{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 2px;
}
.plan-verweis{
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.plan-verweis:hover{ background: var(--accent-soft); }
.plan-verweis:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===========================================================
   Projektliste: die Listenoperationen des früheren Projekte-Tabs
   =========================================================== */

/* Öffnen/Löschen am Zeilenende. Sichtbar erst beim Überfahren der Zeile,
   damit die Liste im Ruhezustand ruhig bleibt — auf Tastatur-Fokus aber
   ebenfalls, sonst wären die Knöpfe nicht erreichbar. */
.board-row-actions{
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .12s;
}
.board-row:hover .board-row-actions,
.board-row.open .board-row-actions,
.board-row-actions:focus-within{ opacity: 1; }

/* Der Ziehgriff steht vor dem Aufklapp-Pfeil. */
.board-row .drag-handle{
  flex: 0 0 auto;
  cursor: grab;
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
}
.board-row .drag-handle:active{ cursor: grabbing; }

/* Die Gruppe ist eine Ablagefläche: sie behält eine Mindesthöhe, damit eine
   leer geräumte Gruppe ein Ziel bleibt. */
.board-list.projects-sortable{ min-height: 34px; }

/* Der Verweis unter einer Anzeige-Karte im Projektbereich. */
.plan-verweis-row{
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
.plan-verweis-row:empty{ display: none; }

/* Die Schlagwörter-Liste in den Projekteinstellungen darf umbrechen. */
#settingsProjTags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#settingsProjTags .tag-input{ width: 110px; }

/* === Dashboard: Termine meiner Projekte ===
   Die Aufgaben und Meilensteine der Projekte, denen man zugeordnet ist
   (GET /my-dashboard, Feld projectDates). Bewusst eine Liste und keine
   Kartenwand wie "Meine Aufgaben": Hier geht es um Reihenfolge in der Zeit,
   und Termine, die untereinander stehen, lassen sich der Reihe nach
   abarbeiten. */
/* Die Gruppen sitzen in derselben .dash-karte wie die eigenen Aufgaben
   darüber — beides ist der eigene Arbeitsstrom und soll gleich aussehen.
   Die Titelzeile ist deshalb ein abgesetzter Streifen innerhalb der Karte
   und kein freistehender Abschnittstitel mehr. */
.fristen-gruppe + .fristen-gruppe { border-top: 1px solid var(--line); }

.fristen-gruppe-titel {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 6px;
  background: var(--surface-alt);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fristen-gruppe-titel span {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  letter-spacing: 0;
}
.fristen-gruppe.ist-ueberfaellig .fristen-gruppe-titel { color: var(--red); }
.fristen-gruppe.ist-ueberfaellig .fristen-gruppe-titel span {
  background: var(--red);
  color: #fff;
}
.fristen-gruppe.ist-bald .fristen-gruppe-titel { color: var(--amber); }

/* Eine Zeile: Datum — Art — Bezeichnung — Projekt — Zuständige.
   Die Bezeichnung nimmt den freien Platz, alles andere hat feste Breiten,
   damit die Spalten über alle Zeilen fluchten. */
.fristen-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s var(--ease);
}
.fristen-zeile:last-child { border-bottom: none; }
.fristen-zeile:hover { background: var(--surface); }
.fristen-zeile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.fristen-datum {
  flex: 0 0 104px;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.fristen-datum b { font-size: 13px; font-weight: 600; }
.fristen-datum em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-subtle);
}
.ist-ueberfaellig .fristen-datum b,
.ist-ueberfaellig .fristen-datum em { color: var(--red); }
.ist-bald .fristen-datum b { color: var(--amber); }

.fristen-art {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  color: var(--text-muted);
  white-space: nowrap;
}
.fristen-art.ist-meilenstein {
  background: var(--accent-soft);
  color: var(--accent);
}

.fristen-titel {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fristen-projekt {
  flex: 0 0 auto;
  max-width: 230px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fristen-wer {
  flex: 0 0 140px;
  font-size: 11px;
  color: var(--text-subtle);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Warn-Kachel im Kennzahlenband. Eine Null bleibt neutral — "0
   überfällig" ist eine gute Nachricht und darf nicht rot sein (siehe
   renderStatTile()). */
.load-num-warnung { color: var(--red); }

@media (max-width: 860px) {
  .fristen-projekt, .fristen-wer { display: none; }
  .fristen-datum { flex-basis: 92px; }
}

/* Überfälliges Datum in der Aufgabenkarte des Dashboards — dieselbe
   Kennzeichnung wie in der Terminliste darunter, damit die Kachel
   "Überfällig" und die Listen zusammenpassen. */
.load-detail b.ist-ueberfaellig { color: var(--red); }

/* === Assistent "Neues Projekt" (js/projekt-wizard.js) ===
   Ersetzt den früheren Dialog #newProjModal, der alle Felder auf einmal
   zeigte. Sechs Schritte, und jeder muss vollständig sein, bevor es
   weitergeht — genau die Lücken, die sonst entstehen (kein Honorar, keine
   Phase, niemand zugeordnet), sind der Grund für Projekte, die später in
   der Auslastung als "nicht bewertbar" erscheinen. */
.wizard-modal {
  max-width: 820px;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.wiz-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.wiz-kopf h2 { margin: 0; flex: 1; }
.wiz-schliessen {
  font-size: 20px;
  line-height: 1;
  padding: 2px 9px;
  background: none;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
}
.wiz-schliessen:hover { color: var(--text); background: none; }

/* Schrittleiste: erledigte Stationen tragen einen Haken, damit auch bei
   sechs Schritten jederzeit erkennbar ist, was noch aussteht. */
.wiz-leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 24px 0;
}
.wiz-stufe {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-subtle);
}
.wiz-stufe b {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-sunk);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.wiz-stufe.ist-aktiv { color: var(--text); font-weight: 600; }
.wiz-stufe.ist-aktiv b { background: var(--accent); color: #fff; }
.wiz-stufe.ist-fertig b { background: var(--green); color: #fff; }
.wiz-strich {
  flex: 1 1 16px;
  min-width: 10px;
  height: 1px;
  background: var(--line);
  margin: 0 8px;
}

.wiz-inhalt {
  padding: 20px 24px 22px;
  min-height: 300px;
  max-height: 58vh;
  overflow-y: auto;
}
.wiz-titel { margin: 0 0 3px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.wiz-unter { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); }
.wiz-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wiz-pflicht { color: var(--red); }

/* Fußzeile: Der Weiter-Knopf bleibt gesperrt, solange etwas fehlt — und
   daneben steht, WAS fehlt. Ein gesperrter Knopf ohne Begründung ist eine
   Sackgasse. */
.wiz-fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-alt);
}
.wiz-zaehler { font-size: 12px; color: var(--text-subtle); }
.wiz-fuss-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wiz-fehlt { font-size: 11.5px; color: var(--amber); text-align: right; }

/* Auswahl-Chips (Gewerke, Phasen, Schlagwörter, Grundlage) */
.wiz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-chip {
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
}
.wiz-chip:hover { border-color: var(--accent); background: var(--surface); }
.wiz-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-chip-gewerk { font-weight: 600; letter-spacing: .02em; padding: 6px 14px; }

/* Beteiligte je Rolle */
.wiz-rollen { display: flex; flex-direction: column; gap: 12px; }
.wiz-rolle { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.wiz-rolle-name {
  flex: 0 0 116px;
  font-size: 11.5px;
  font-weight: 600;
  padding-top: 7px;
  color: var(--text-muted);
}
.wiz-person {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  padding: 0;
}
.wiz-person[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.wiz-person[data-rolle="Projektleitung"][aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.wiz-person[data-rolle="Bauüberwachung"][aria-pressed="true"] { background: var(--green); border-color: var(--green); }
/* Wer aus einem anderen Gewerk dazugeholt wurde: gestrichelter Rand, damit
   die Herkunft sichtbar bleibt, ohne eine zweite Farbe einzuführen. */
.wiz-person.ist-fremd { border-style: dashed; border-width: 1.5px; }

.wiz-fremd { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.wiz-fremd label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.wiz-fremd select { width: 100%; max-width: 420px; }
.wiz-fremd-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wiz-fremd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--line);
  color: var(--text-muted);
}
.wiz-fremd-chip button {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-subtle);
  padding: 0 2px;
}
.wiz-fremd-chip button:hover { color: var(--red); background: none; }

/* Hinweis anstelle eines Schritts, der gerade nicht möglich ist */
.wiz-sperre {
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
}
.wiz-sperre b { display: block; font-size: 14px; margin-bottom: 6px; }
.wiz-sperre p { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); max-width: 58ch; }
.wiz-sperre p:last-child { margin-bottom: 0; }

.wiz-schalter { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.wiz-schalter input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Terminplan-Tabelle */
.wiz-plan {
  margin-top: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.wiz-plan-zeile {
  display: grid;
  grid-template-columns: 78px 62px 1fr 64px 170px;
  gap: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-soft);
  font-variant-numeric: tabular-nums;
}
.wiz-plan-zeile:last-child { border-bottom: none; }
.wiz-plan-zeile span:nth-child(2),
.wiz-plan-zeile span:nth-child(3),
.wiz-plan-zeile span:nth-child(4) { text-align: right; }
.wiz-plan-kopf {
  background: var(--surface-alt);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.wiz-plan-summe { background: var(--surface-alt); font-weight: 600; }

/* Zusammenfassung */
.wiz-pruef { font-size: 13.5px; }
.wiz-pruef-zeile {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.wiz-pruef-zeile:last-child { border-bottom: none; }
.wiz-pruef-zeile span { color: var(--text-muted); flex: 0 0 auto; }
.wiz-pruef-zeile b { font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wiz-pruef-zeile b.fehlt { color: var(--text-subtle); font-weight: 400; font-style: italic; }

/* Abschluss */
.wiz-fertig { text-align: center; padding: 44px 24px; }
.wiz-haken {
  width: 52px; height: 52px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: var(--green);
  color: #fff;
}
.wiz-fertig h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.wiz-fertig p { margin: 0 auto 20px; color: var(--text-muted); max-width: 46ch; font-size: 13.5px; }

@media (max-width: 760px) {
  .wiz-zeile { grid-template-columns: 1fr; }
  .wiz-stufe span { display: none; }
  .wiz-plan-zeile { grid-template-columns: 66px 1fr 130px; }
  .wiz-plan-zeile span:nth-child(2),
  .wiz-plan-zeile span:nth-child(4) { display: none; }
}