/* Komponenten-Styles. Farbwerte ausschliesslich ueber Variablen aus marke/farben.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--grau-800);
  background: var(--grau-100);
}

.verborgen { display: none !important; }
.gedaempft { color: var(--grau-600); }
.klein { font-size: 12px; }
.fehlertext { color: var(--rot); font-size: 14px; }

button {
  font: inherit;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  background: var(--ta-dunkelblau);
  color: var(--weiss);
  cursor: pointer;
}
button:hover { background: var(--ta-blau); }
button.sekundaer {
  background: transparent;
  color: var(--ta-dunkelblau);
  border: 1px solid var(--grau-200);
}
button.sekundaer:hover { background: var(--grau-100); }
button.gefahr { background: transparent; color: var(--rot); border: 1px solid var(--grau-200); }
button:disabled { opacity: 0.6; cursor: default; }

input, select, textarea {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--grau-200);
  border-radius: 6px;
  background: var(--weiss);
  color: var(--grau-800);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ta-blau); outline-offset: -1px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }

/* Anmeldung */
.anmeldung {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ta-dunkelblau);
  z-index: 100;
}
.anmeldung-karte {
  background: var(--weiss);
  border-radius: 10px;
  padding: 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anmeldung-karte h1 { margin: 0; font-size: 20px; color: var(--ta-dunkelblau); }
.anmeldung-karte p { margin: 0; }

/* --- Rahmen: Seitenleiste + Hauptbereich (Muster: pm-auto) --- */
.rahmen { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.seitenleiste {
  background: var(--ta-dunkelblau);
  color: var(--weiss);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.marke { padding: 18px 18px 14px; border-bottom: 1px solid color-mix(in srgb, var(--weiss) 12%, transparent); }
.marke-titel {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--weiss) 62%, transparent);
  line-height: 1.5;
}
.marke-programm { display: block; font-size: 16px; letter-spacing: 0.03em; color: var(--weiss); font-weight: 600; }

.navigation { flex: 1; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 18px; }
.nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-gruppentitel {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--weiss) 45%, transparent);
  padding: 0 8px 6px;
}
.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: color-mix(in srgb, var(--weiss) 82%, transparent);
  text-decoration: none;
  font-size: 14px;
}
.nav-eintrag:hover { background: color-mix(in srgb, var(--weiss) 10%, transparent); color: var(--weiss); }
.nav-eintrag.aktiv { background: color-mix(in srgb, var(--weiss) 16%, transparent); color: var(--weiss); font-weight: 600; }
.nav-zeichen { width: 16px; text-align: center; opacity: 0.75; }

.seitenleiste-fuss {
  padding: 14px 18px;
  border-top: 1px solid color-mix(in srgb, var(--weiss) 12%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--weiss) 62%, transparent);
}
.seitenleiste-fuss strong { color: var(--weiss); }

.hauptbereich { display: flex; flex-direction: column; min-width: 0; }
.kopfleiste {
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-200);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf-links h1 { margin: 0; font-size: 19px; color: var(--ta-dunkelblau); }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }

.nutzer { position: relative; display: flex; align-items: center; gap: 10px; }
.nutzer-btn {
  display: flex; align-items: center; gap: 9px;
  background: transparent; color: var(--grau-800); padding: 4px 6px;
}
.nutzer-btn:hover { background: var(--grau-100); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ta-dunkelblau); color: var(--weiss);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.nutzer-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.nutzer-name { font-size: 13px; font-weight: 600; }
.nutzer-rolle { font-size: 11px; color: var(--grau-600); }

.aufgaben-btn {
  background: var(--grau-100); color: var(--grau-800);
  border: 1px solid var(--grau-200); font-size: 13px; padding: 7px 12px;
  display: flex; align-items: center; gap: 8px;
}
.aufgaben-btn:hover { background: var(--ta-hellblau); }
.badge {
  background: var(--rot); color: var(--weiss);
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.klappmenue {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 31, 61, 0.14);
  padding: 8px; min-width: 190px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
}
/* Das display oben schlaegt die Browserregel fuer [hidden], sonst stuenden die
   Klappmenues dauerhaft offen und das Umschalten per Klick bliebe wirkungslos. */
.klappmenue[hidden] { display: none; }
.klappmenue button { background: transparent; color: var(--grau-800); text-align: left; padding: 8px 10px; }
.klappmenue button:hover { background: var(--grau-100); }
.aufgaben-menue { width: 380px; max-height: 70vh; overflow-y: auto; padding: 14px; }
.aufgaben-kopf { font-weight: 600; font-size: 13px; margin-bottom: 10px; }

/* Inhalt */
.inhalt { padding: 24px; max-width: 1320px; }
.seitentitel { margin: 0 0 4px; font-size: 22px; color: var(--ta-dunkelblau); }
.untertitel { margin: 0 0 20px; color: var(--grau-600); font-size: 14px; }

/* Karten & Kacheln */
.karte {
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.kachelzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kachel {
  background: var(--weiss);
  border: 1px solid var(--grau-200);
  border-radius: 10px;
  padding: 14px;
}
.kachel .wert { font-size: 24px; font-weight: 600; color: var(--ta-dunkelblau); }
.kachel .beschriftung { font-size: 12px; color: var(--grau-600); margin-top: 2px; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--grau-600);
  padding: 8px 10px;
  border-bottom: 1px solid var(--grau-200);
}
td { padding: 8px 10px; border-bottom: 1px solid var(--grau-100); }

/* Auswahlfelder direkt in der Tabelle: kompakt, aber mit sichtbarer Kontur, damit
   erkennbar ist, dass sie bedienbar sind. */
select.zellenfeld {
  padding: 3px 6px;
  font-size: 13px;
  border: 1px solid var(--grau-200);
  border-radius: 5px;
  background: var(--weiss);
  max-width: 152px;
}
select.zellenfeld:hover { border-color: var(--ta-blau); background: var(--ta-hellblau); }
select.zellenfeld:disabled { opacity: 0.5; }

/* Offene (leere) Felder in der Uebersicht hellrot hinterlegen -- so fallen die
   Luecken beim Durchscrollen auf, ohne dass man jede Zeile lesen muss. */
select.zellenfeld.offen {
  background: var(--offen-hell);
  border-color: var(--offen-rand);
  color: var(--offen-text);
}
select.zellenfeld.offen:hover { background: var(--offen-hell); border-color: var(--rot); }
tr:hover td { background: var(--ta-hellblau); }
a { color: var(--ta-blau); }

.pille {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--grau-100);
  border: 1px solid var(--grau-200);
}

.werkzeugleiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.werkzeugleiste .rechts { margin-left: auto; }

/* Dialog */
.dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--grau-800) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.dialog {
  background: var(--weiss);
  border-radius: 10px;
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dialog h2 { margin: 0; font-size: 18px; color: var(--ta-dunkelblau); }
.dialog .zeile { display: flex; gap: 12px; }
.dialog .zeile > * { flex: 1; }
.dialog .fussleiste { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.dialog .fussleiste .rechts { display: flex; gap: 8px; margin-left: auto; }

/* Ladebalken */
.ladebalken {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ta-blau), var(--termin-neu));
  animation: laden 1s linear infinite;
  z-index: 200;
}
@keyframes laden { from { opacity: 0.5; } 50% { opacity: 1; } to { opacity: 0.5; } }

/* Kalender */
.kalender-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.kalender-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--grau-600); margin-bottom: 12px; align-items: center; }
.legende-farbe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--grau-400); vertical-align: -1px; margin-right: 4px; }

.kalender-rahmen { overflow-x: auto; background: var(--weiss); border: 1px solid var(--grau-200); border-radius: 10px; }
.kalender-raster { display: grid; min-width: 900px; }
.kalender-kopf {
  position: sticky;
  top: 0;
  background: var(--grau-100);
  border-bottom: 1px solid var(--grau-200);
  border-right: 1px solid var(--grau-200);
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--ta-dunkelblau);
  z-index: 2;
}
.kalender-zeit {
  border-right: 1px solid var(--grau-200);
  border-bottom: 1px solid var(--grau-100);
  font-size: 11px;
  color: var(--grau-400);
  text-align: right;
  padding: 2px 6px 0 0;
}
.kalender-zelle {
  position: relative;
  border-right: 1px solid var(--grau-200);
  border-bottom: 1px solid var(--grau-100);
  min-height: 56px;
  cursor: pointer;
}
.kalender-zelle:hover { background: var(--ta-hellblau); }
.kalender-zelle.ziel { background: color-mix(in srgb, var(--termin-neu) 30%, var(--weiss)); }

.termin {
  position: absolute;
  inset: 1px 2px auto 2px;
  border-radius: 6px;
  border: 1px solid;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  cursor: grab;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.termin:active { cursor: grabbing; }
.termin.wird-gezogen { opacity: 0.5; }
.termin .titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin .detail { color: var(--grau-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termin .chips { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 1px; line-height: 1; }
.chip {
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 10px;
  background: color-mix(in srgb, var(--weiss) 70%, transparent);
  color: var(--grau-800);
}
.chip.initiator { background: var(--ta-dunkelblau); color: var(--weiss); font-weight: 700; }

/* Termin-Farben folgen den vier Kundenkategorien (Punkt 10/12). */
.termin.typ-BESTANDSKUNDE { background: var(--termin-existing-hell); border-color: var(--termin-existing-rand); }
.termin.typ-NEUKUNDE { background: var(--termin-neu-hell); border-color: var(--termin-neu-rand); }
.termin.typ-PARTNER_NETZWERK_SUB { background: var(--termin-partner-hell); border-color: var(--termin-partner-rand); }
.termin.typ-BESTANDSKUNDE_TOP10 { background: var(--termin-top-hell); border-color: var(--termin-top-rand); }
.termin.typ-NEUKUNDE_TOP10 { background: var(--termin-top10-neu-hell); border-color: var(--termin-top10-neu-rand); }
.termin.typ-EVENING_EVENT { background: var(--termin-abend-hell); border-color: var(--termin-abend-rand); }
.termin.typ-DEPARTURE { background: var(--termin-unbestaetigt-hell); border-color: var(--termin-unbestaetigt-rand); }
/* Blocker: kein Kundentyp -- bewusst verblasst (reduzierte Deckkraft + gestrichelter
   Rand), damit er sich von echten Terminen klar unterscheidet. */
.termin.typ-BLOCKER { background: var(--termin-blocker-hell); border-color: var(--termin-blocker-rand); border-style: dashed; opacity: 0.65; }
.termin.typ-BLOCKER:hover { opacity: 0.85; }

/* Kundentyp-Auswahl im Dialog */
.typ-auswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.typ-auswahl button {
  background: var(--grau-100);
  color: var(--grau-800);
  border: 1px solid var(--grau-200);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}
.typ-auswahl button.gewaehlt.typ-BESTANDSKUNDE { background: var(--termin-existing); border-color: var(--termin-existing-rand); }
.typ-auswahl button.gewaehlt.typ-NEUKUNDE { background: var(--termin-neu); border-color: var(--termin-neu-rand); }
.typ-auswahl button.gewaehlt.typ-PARTNER_NETZWERK_SUB { background: var(--termin-partner); border-color: var(--termin-partner-rand); }
.typ-auswahl button.gewaehlt.typ-BESTANDSKUNDE_TOP10 { background: var(--termin-top); border-color: var(--termin-top-rand); }
.typ-auswahl button.gewaehlt.typ-NEUKUNDE_TOP10 { background: var(--termin-top10-neu); border-color: var(--termin-top10-neu-rand); }
.typ-auswahl button.gewaehlt.typ-EVENING_EVENT { background: var(--termin-abend); border-color: var(--termin-abend-rand); }
.typ-auswahl button.gewaehlt.typ-DEPARTURE { background: var(--termin-unbestaetigt); border-color: var(--termin-unbestaetigt-rand); }
.typ-auswahl button.gewaehlt.typ-BLOCKER { background: var(--termin-blocker); border-color: var(--termin-blocker-rand); border-style: dashed; }

/* Terminfindung: Zustand eines gemeinsamen Zeitfensters.
   Frei wird hervorgehoben (das ist die gesuchte Information), belegt und
   vorläufig treten zurück. Zusätzlich zur Farbe unterscheidet sich das Muster,
   damit der Zustand nicht allein über Farbe transportiert wird. */
.kalender-zelle.slot-frei { background: color-mix(in srgb, var(--gruen) 16%, var(--weiss)); cursor: pointer; }
.kalender-zelle.slot-frei:hover { background: color-mix(in srgb, var(--gruen) 30%, var(--weiss)); }
.kalender-zelle.slot-vorlaeufig {
  background: repeating-linear-gradient(45deg,
    var(--termin-blocker-hell) 0 6px, var(--weiss) 6px 12px);
  cursor: pointer;
}
.kalender-zelle.slot-belegt { background: var(--grau-200); cursor: not-allowed; }
.kalender-zelle.slot-belegt:hover { background: var(--grau-200); }

/* Terminfindungs-Assistent im Anlage-Dialog */
.assistent { border: 1px solid var(--grau-200); border-radius: 8px; background: var(--grau-100); }
.assistent summary {
  cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600;
  color: var(--ta-dunkelblau); list-style: none;
}
.assistent summary::before { content: "▸ "; }
.assistent[open] summary::before { content: "▾ "; }
.assistent-inhalt { padding: 0 12px 12px; }
.assistent-raster { display: flex; gap: 14px; flex-wrap: wrap; }
.assistent-tag { flex: 1; min-width: 150px; }
.assistent-tagtitel { font-size: 11.5px; font-weight: 600; color: var(--grau-600); margin-bottom: 6px; }
.assistent-slots { display: flex; flex-wrap: wrap; gap: 3px; }
.assistent-slot {
  padding: 3px 6px; font-size: 10.5px; border-radius: 4px;
  border: 1px solid var(--grau-200); background: var(--weiss); color: var(--grau-600);
  font-variant-numeric: tabular-nums;
}
.assistent-slot.frei { background: color-mix(in srgb, var(--gruen) 16%, var(--weiss)); border-color: var(--gruen); color: var(--gruen); }
.assistent-slot.frei:hover { background: color-mix(in srgb, var(--gruen) 32%, var(--weiss)); }
.assistent-slot.vorlaeufig { background: var(--termin-blocker-hell); border-color: var(--termin-blocker-rand); color: var(--grau-600); }
.assistent-slot.belegt { background: var(--grau-200); color: var(--grau-400); cursor: not-allowed; }
.assistent-slot.gewaehlt { outline: 2px solid var(--ta-blau); font-weight: 700; }
.typ-auswahl button.gesperrt { opacity: 0.4; cursor: not-allowed; }

/* Fortschrittsleiste (Kundenseite) */
.fortschritt { display: flex; gap: 4px; margin: 12px 0 18px; flex-wrap: wrap; }
.fortschritt-stufe {
  flex: 1; min-width: 116px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--grau-100); border: 1px solid var(--grau-200);
  font-size: 12.5px; color: var(--grau-400);
}
.fortschritt-stufe.erledigt { background: color-mix(in srgb, var(--gruen) 12%, var(--weiss)); border-color: var(--gruen); color: var(--gruen); }
.fortschritt-stufe.aktiv { background: var(--weiss); border-color: var(--ta-blau); color: var(--ta-dunkelblau); font-weight: 600; }
.fortschritt-punkt {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.fortschritt-stufe.erledigt .fortschritt-punkt { background: var(--gruen); color: var(--weiss); border-color: var(--gruen); }

/* Ansprache vorbereiten */
.vorbereitung-block { margin-bottom: 18px; }
.block-titel { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ankreuz-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.ankreuz {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--grau-200); border-radius: 999px;
  background: var(--weiss); font-size: 13px; font-weight: 400; cursor: pointer;
  flex-direction: row;
}
.ankreuz:hover { background: var(--ta-hellblau); }
.ankreuz:has(input:checked) { background: var(--ta-hellblau); border-color: var(--ta-blau); font-weight: 600; }
.ankreuz.gesperrt { opacity: 0.45; cursor: not-allowed; }
.ankreuz.mittig { justify-content: center; border: none; background: transparent; padding: 4px; }
.ankreuz.mittig:hover { background: transparent; }

/* Freies Thema: sieht wie ein Ankreuzfeld aus, tragt aber ein Textfeld statt einer
   festen Beschriftung. Das Eingabefeld selbst bleibt rahmenlos, damit die Pille
   als ein Element wirkt. */
.ankreuz.frei { padding: 4px 6px 4px 11px; }
.ankreuz.frei input[type="text"] {
  border: none; background: transparent; padding: 2px 4px;
  font: inherit; font-weight: inherit; width: 190px;
}
.ankreuz.frei input[type="text"]:focus { outline: none; }
.ankreuz.frei input[type="text"]::placeholder { color: var(--grau-400); font-weight: 400; }
.ankreuz.frei:has(input:checked) input[type="text"] { font-weight: 600; }

.zeitraster { width: auto; }
.zeitraster th { text-transform: none; font-size: 12px; letter-spacing: 0; padding: 6px 14px; }
.zeitraster td { text-align: center; padding: 4px 14px; }
.zeitraster tbody th { text-align: left; color: var(--grau-800); font-weight: 500; }

/* Stufen & Nachweise */
.stufen-liste { display: flex; flex-direction: column; gap: 2px; }
.stufen-zeile { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 12px; border-radius: 8px; }
.stufen-zeile.aktiv { background: var(--ta-hellblau); }
.stufen-zeile.gesperrt { opacity: 0.55; }
.stufen-marke {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grau-200); color: var(--grau-600); font-size: 12px; font-weight: 700;
}
.stufen-zeile.erledigt .stufen-marke { background: var(--gruen); color: var(--weiss); }
.stufen-zeile.aktiv .stufen-marke { background: var(--ta-blau); color: var(--weiss); }
.stufen-titel { font-weight: 600; font-size: 14px; }
.stufen-fehlt { font-size: 12.5px; color: var(--bernstein); margin-top: 2px; }
.stufen-ok { font-size: 12.5px; color: var(--gruen); margin-top: 2px; }
.stufen-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }

/* Datei-Upload */
.upload-feld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-liste { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.datei-pille {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: 999px; padding: 4px 10px; font-size: 12.5px;
}
.datei-weg { color: var(--rot); text-decoration: none; font-weight: 700; }
.upload-knopf {
  display: inline-block; padding: 6px 12px; border-radius: 6px;
  border: 1px dashed var(--ta-blau); color: var(--ta-blau);
  font-size: 12.5px; cursor: pointer; font-weight: 500;
}
.upload-knopf:hover { background: var(--ta-hellblau); }
.upload-feld.gesperrt { opacity: 0.5; }

/* Prioritäts-Farbskala (Kundenliste) */
.prio { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.prio-HOCH { background: color-mix(in srgb, var(--rot) 14%, var(--weiss)); color: var(--rot); border: 1px solid color-mix(in srgb, var(--rot) 35%, var(--weiss)); }
.prio-MITTEL { background: color-mix(in srgb, var(--bernstein) 14%, var(--weiss)); color: var(--bernstein); border: 1px solid color-mix(in srgb, var(--bernstein) 35%, var(--weiss)); }
.prio-NIEDRIG { background: color-mix(in srgb, var(--gruen) 12%, var(--weiss)); color: var(--gruen); border: 1px solid color-mix(in srgb, var(--gruen) 32%, var(--weiss)); }

/* Kategorie-Pillen */
.pille.kat-BESTANDSKUNDE { background: var(--termin-existing-hell); border-color: var(--termin-existing-rand); }
.pille.kat-NEUKUNDE { background: var(--termin-neu-hell); border-color: var(--termin-neu-rand); }
.pille.kat-PARTNER_NETZWERK_SUB { background: var(--termin-partner-hell); border-color: var(--termin-partner-rand); }
.pille.kat-BESTANDSKUNDE_TOP10 { background: var(--termin-top-hell); border-color: var(--termin-top-rand); }
.pille.kat-NEUKUNDE_TOP10 { background: var(--termin-top10-neu-hell); border-color: var(--termin-top10-neu-rand); }
.pille.kat-OFFEN { background: var(--offen-hell); border-color: var(--offen-rand); color: var(--offen-text); }

/* Stufenkette (Kundenliste): erledigt / offen / gesperrt */
.stufenkette { display: inline-flex; gap: 3px; }
.stufe {
  min-width: 30px; text-align: center;
  padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--grau-200); background: var(--grau-100); color: var(--grau-400);
  cursor: help;
}
.stufe.erledigt { background: color-mix(in srgb, var(--gruen) 16%, var(--weiss)); border-color: var(--gruen); color: var(--gruen); }
.stufe.offen { background: var(--weiss); border-color: var(--ta-blau); color: var(--ta-blau); }
.stufe.entfaellt { background: var(--grau-100); color: var(--grau-400); text-decoration: line-through; }

/* Zeitplan (Dashboard) */
/* Platz oben fuer die Beschriftung der Heute-Linie. */
.zeitplan { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.zeitplan-zeile { display: grid; grid-template-columns: 250px 1fr 92px; gap: 14px; align-items: center; }
.zeitplan-titel { font-size: 13.5px; font-weight: 600; }
.zeitplan-unter { font-size: 11.5px; color: var(--grau-600); line-height: 1.35; }
.zeitplan-spur { position: relative; height: 24px; background: var(--grau-100); border-radius: 4px; }
.zeitplan-balken { position: absolute; top: 0; bottom: 0; border-radius: 4px; overflow: hidden; }
.zeitplan-balken.laufend { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ta-blau) 35%, transparent); }
.zeitplan-fortschritt { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--gruen) 70%, transparent); }
.zeitplan-zahl { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
/* Die Heute-Linie liegt ueber allen Balken. Ihre Position wird in JS als calc()
   gesetzt, weil sie sich auf die Balkenspur beziehen muss (nicht auf die ganze
   Zeile): links steht die 250px-Textspalte, rechts die 92px-Zahlenspalte, dazu
   je 14px Abstand. */
.zeitplan-heute {
  position: absolute; top: 20px; bottom: -4px;
  border-left: 2px solid var(--rot); z-index: 3; pointer-events: none;
}
.zeitplan-heute span {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; color: var(--weiss);
  background: var(--rot); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* Laufende Phase hervorheben, sonst die als naechstes anstehende. */
.zeitplan-zeile.ist-laufend { background: var(--ta-hellblau); border-radius: 6px; }
.zeitplan-zeile.ist-laufend .zeitplan-titel { color: var(--ta-dunkelblau); }
.zeitplan-zeile.ist-naechste .zeitplan-titel { color: var(--ta-blau); }
.phasen-marke {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; vertical-align: 1px;
}
.phasen-marke.laufend { background: var(--ta-blau); color: var(--weiss); }
.phasen-marke.naechste {
  background: var(--weiss); color: var(--ta-blau); border: 1px solid var(--ta-blau);
}

/* Kategorie-Farben in Balken */
.auslast-balken.kat-BESTANDSKUNDE { background: var(--termin-existing-rand); }
.auslast-balken.kat-NEUKUNDE { background: var(--termin-neu-rand); }
.auslast-balken.kat-PARTNER_NETZWERK_SUB { background: var(--termin-partner-rand); }
.auslast-balken.kat-BESTANDSKUNDE_TOP10 { background: var(--termin-top-rand); }
.auslast-balken.kat-NEUKUNDE_TOP10 { background: var(--termin-top10-neu-rand); }
.auslast-balken.kat-OFFEN { background: var(--offen-rand); }

/* Gestapelte Säulen je Mitarbeiter:in (Verteilungsseite).
   Je Person zwei Säulen: Lead (breit) und gewünschte Teilnahme (schmal),
   jeweils nach Kundenkategorie gestapelt. */
.saeulen {
  position: relative;
  display: flex; align-items: flex-end; gap: 18px;
  padding: 8px 4px 0;
  overflow-x: auto;
  min-height: calc(var(--saeulen-hoehe) + 46px);
}
.saeulen-marke {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--grau-600); z-index: 1; pointer-events: none;
}
.saeulen-gruppe { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.saeulen-paar { display: flex; align-items: flex-end; gap: 3px; height: var(--saeulen-hoehe); }
.saeule {
  position: relative;
  width: 30px; min-height: 3px;
  display: flex; flex-direction: column-reverse;
  border-radius: 3px 3px 0 0; overflow: visible;
}
.saeule.wunsch { width: 15px; opacity: 0.75; }
.saeulen-teil { display: block; width: 100%; }
.saeulen-teil:first-child { border-radius: 3px 3px 0 0; }
.saeulen-leer { display: block; width: 100%; height: 3px; background: var(--grau-200); }
.saeulen-zahl {
  position: absolute; bottom: 100%; left: 0; right: 0;
  text-align: center; font-size: 10.5px; color: var(--grau-600);
  font-variant-numeric: tabular-nums; padding-bottom: 2px;
}
.saeule.ueberlastet .saeulen-zahl { color: var(--rot); font-weight: 700; }
.saeulen-name { font-size: 12px; font-weight: 600; color: var(--grau-600); }

.saeulen-teil.kat-BESTANDSKUNDE, .legende-farbe.kat-BESTANDSKUNDE { background: var(--termin-existing); }
.saeulen-teil.kat-NEUKUNDE, .legende-farbe.kat-NEUKUNDE { background: var(--termin-neu); }
.saeulen-teil.kat-PARTNER_NETZWERK_SUB, .legende-farbe.kat-PARTNER_NETZWERK_SUB { background: var(--termin-partner); }
.saeulen-teil.kat-BESTANDSKUNDE_TOP10, .legende-farbe.kat-BESTANDSKUNDE_TOP10 { background: var(--termin-top); }
.saeulen-teil.kat-NEUKUNDE_TOP10, .legende-farbe.kat-NEUKUNDE_TOP10 { background: var(--termin-top10-neu); }
.saeulen-teil.kat-OFFEN, .legende-farbe.kat-OFFEN { background: var(--offen-rand); }

/* Auslastung je Person (Verteilungsseite) */
.auslastung { display: flex; flex-direction: column; gap: 5px; }
.auslast-zeile { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; }
.auslast-name { color: var(--grau-600); font-weight: 600; }
.auslast-spur { position: relative; height: 14px; background: var(--grau-100); border-radius: 3px; overflow: hidden; }
.auslast-balken { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ta-blau); border-radius: 3px; }
.auslast-balken.ueberlastet { background: var(--rot); }
.auslast-marke { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed var(--grau-600); }
.auslast-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--grau-600); }

/* Aufgabenblöcke (Meine Aufgaben) */
.aufgaben-block { margin-bottom: 18px; }
.aufgaben-block h3 { margin: 0 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 8px; }
.aufgaben-block h3 .zahl {
  background: var(--ta-dunkelblau); color: var(--weiss);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.aufgaben-block.dringend h3 .zahl { background: var(--rot); }
.aufgaben-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.aufgaben-liste li a {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--grau-200);
  border-radius: 999px; background: var(--weiss); font-size: 13px; text-decoration: none;
}
.aufgaben-liste li a:hover { background: var(--ta-hellblau); }
.aufgaben-liste li .tage { color: var(--rot); font-size: 11px; }

.hinweisbox {
  background: color-mix(in srgb, var(--bernstein) 8%, var(--weiss));
  border: 1px solid color-mix(in srgb, var(--bernstein) 30%, var(--weiss));
  color: var(--bernstein);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}