/* Analytics, Design-System, 1:1 aus dem abgenommenen Prototyp
   (prototyp/KPI Dashboard Prototyp.dc.html). Farben, Fonts, Radien und
   Schatten sind exakt übernommen; die Inline-Styles des Prototyps sind
   hier in Klassen überführt. */

/* Schriften lokal (DSGVO): kein Laden von fonts.googleapis.com zur Laufzeit.
   Dateien aus dem offiziellen Google-Fonts-CDN gespiegelt (Latin-Subset, deckt
   Deutsch ab). Mulish ist eine Variable Font, eine Datei für 400–800. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/mulish-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/poppins-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/poppins-900-latin.woff2') format('woff2');
}

/* Palette und Schriftstufen (Tech-Debt-Analyse 17.10.2026, Punkt 39). Werte 1:1 aus dem
   Prototyp; Farben, die nur an wenigen Stellen vorkommen, stehen weiter als feste Werte. */
:root {
  --tinte: #24333B;       /* Grundtext, Kopf */
  --grau: #66757C;        /* Nebentext, Beschriftungen */
  --grau-leise: #9D9D9C;  /* Spur, Wer-Zeile */
  --petrol: #14536B;      /* dunkles Blau: Pillentext, Knöpfe */
  --blau: #2DAAE1;        /* Akzent, Links, Fokus */
  --blau-hell: #A9DCF2;   /* helle Balken */
  --eis: #EAF6FC;         /* hellblaue Fläche */
  --rot: #C4472F;         /* roter Text */
  --rot-hell: #FDEEE9;    /* rote Pillenfläche */
  --koralle: #E8654E;     /* rote Balken und Punkte */
  --gruen: #9BBF17;       /* grüne Balken und Punkte */
  --gruen-text: #6F8C10;  /* grüner Text */
  --gruen-hell: #EAF2CE;  /* grüne Pillenfläche */

  --schrift-xs: 11px;
  --schrift-s: 11.5px;
  --schrift-m: 12px;
  --schrift-l: 12.5px;
  --schrift-xl: 13px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--eis);
  font-family: Mulish, system-ui, sans-serif;
  color: var(--tinte);
}

a { color: var(--blau); }
a:hover { color: var(--petrol); }

button { font-family: inherit; }

[hidden] { display: none !important; }

/* Tastaturbedienung (Tech-Debt-Analyse 17.10.2026, Punkt 28): sichtbarer Ring nur bei Tastatur,
   im Blau der Palette. Titel und Upload-Slots mit tabindex="-1" halten den Fokus nur als Anker
   (Dialog geöffnet, Knopf verschwunden), sie bekommen keinen Ring. */
:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

/* Ladezustand beim Start (Punkt 29): bis /api/session geantwortet hat. Erst nach 300 ms sichtbar,
   ein schneller Start blitzt sonst kurz auf. */
#laden { min-height: 100vh; display: flex; align-items: center; justify-content: center; animation: dfade .2s ease .3s both; }

@keyframes dslide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes dfade { from { opacity: 0; } to { opacity: 1; } }

/* ===================== Anmeldung ===================== */

#anmeldung {
  min-height: 100vh;
  background: var(--tinte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
}
.login-marke { display: flex; align-items: center; gap: 14px; }
.login-wortmarke { font: 800 26px Poppins, sans-serif; color: #fff; }
.login-wortmarke span { color: var(--blau); }
.login-trenner { width: 1px; height: 26px; background: rgba(255,255,255,.2); }
.login-untertitel { font: 800 var(--schrift-xl) Poppins, sans-serif; letter-spacing: .28em; color: #fff; }
.login-karte {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-karte form { display: flex; flex-direction: column; gap: 14px; }
.login-karte h1 { margin: 0; font: 800 19px Poppins, sans-serif; }
.login-karte p.hinweis { margin: 0; font: 400 var(--schrift-l)/1.5 Mulish; color: var(--grau); }
.login-karte label { display: flex; flex-direction: column; gap: 5px; font: 700 var(--schrift-m) Mulish; color: var(--petrol); }
.login-karte input {
  font: 600 14px Mulish;
  color: var(--tinte);
  border: 1px solid rgba(20,83,107,.2);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.login-karte input:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(45,170,225,.15); }
.login-karte button {
  width: 100%;
  font: 800 13.5px Mulish;
  color: #fff;
  background: var(--blau);
  border: none;
  border-radius: 10px;
  padding: 12px 0;
  cursor: pointer;
  margin-top: 4px;
}
.login-karte button:hover { background: var(--petrol); }
.fehler { margin: 0; font: 700 var(--schrift-l) Mulish; color: var(--rot); min-height: 16px; }
.login-fuss { font: 400 var(--schrift-s) Mulish; color: rgba(255,255,255,.45); }

/* ===================== Kopf (dunkle Variante) ===================== */

.kopf { background: var(--tinte); }
.kopf-zeile {
  max-width: 1560px;
  margin: 0 auto;
  padding: 16px 32px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.kopf-marke { display: flex; align-items: center; gap: 14px; }
.wortmarke { font: 800 20px Poppins, sans-serif; color: #fff; }
.wortmarke span { color: var(--blau); }
.kopf-trenner { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.kopf-titel { font: 800 var(--schrift-m) Poppins, sans-serif; letter-spacing: .28em; color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: 12px; }

.zeitraum { display: flex; background: rgba(255,255,255,.14); border-radius: 99px; padding: 3px; }
.zeitraum button {
  font: 700 var(--schrift-m) Mulish;
  color: rgba(255,255,255,.8);
  background: none;
  border: none;
  padding: 4px 13px;
  border-radius: 99px;
  cursor: pointer;
}
.zeitraum button.aktiv { color: var(--petrol); background: #fff; }

.konto { position: relative; }
.konto-knopf {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: none;
  border-radius: 99px;
  padding: 5px 16px 5px 5px;
  cursor: pointer;
}
.konto-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  font: 800 var(--schrift-xs) Mulish;
  display: flex; align-items: center; justify-content: center;
}
.konto-name { font: 700 var(--schrift-l) Mulish; color: var(--tinte); }

.menu-schleier { position: fixed; inset: 0; z-index: 55; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(20,40,50,.22);
  padding: 6px;
  z-index: 60;
}
.menu-kopf { padding: 9px 12px 8px; border-bottom: 1px solid rgba(20,83,107,.08); margin-bottom: 4px; }
.menu-kopf .name { font: 700 var(--schrift-l) Mulish; color: var(--tinte); }
.menu-kopf .rolle { font: 400 var(--schrift-m) Mulish; color: var(--grau); }
.menu-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: 9px;
  font: 600 var(--schrift-l) Mulish;
  color: var(--tinte);
  cursor: pointer;
}
.menu-eintrag:hover { background: var(--eis); }
.menu-eintrag.rot { color: var(--rot); }
.menu-eintrag.rot:hover { background: var(--rot-hell); }
.menu-trenner { height: 1px; background: rgba(20,83,107,.08); margin: 4px 6px; }

.gruss { max-width: 1560px; margin: 0 auto; padding: 22px 32px 26px; }
.gruss-name { font: 800 30px Poppins, sans-serif; color: #fff; }
.gruss-datum { font: 400 var(--schrift-xl) Mulish; color: rgba(255,255,255,.65); margin-top: 4px; }
.gruss-datum strong { color: #fff; }

/* ===================== Layout ===================== */

.flaeche {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 32px 30px;
}
.spalte-links { flex: 1 1 340px; min-width: 300px; display: flex; flex-direction: column; gap: 18px; }
.spalte-rechts { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.karte {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(20,83,107,.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.karte-klickbar { cursor: pointer; transition: box-shadow .15s ease; }
.karte-klickbar:hover { box-shadow: 0 6px 20px rgba(20,83,107,.14); }
.karte-titel { font: 800 15px Poppins, sans-serif; }
/* Umbruch statt Quetschen (16.10.2026): Rehasport trägt bis zu drei Pillen (Beispielzahlen, Daten
   fehlen, Ø · KW); auf 340px brach sonst die Ø-Pille vierzeilig um. Jetzt rutscht sie als Ganzes
   in eine zweite Zeile, rechtsbündig. */
.karte-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 6px; }
.karte-kopf .hinweis-blau { white-space: nowrap; margin-left: auto; }

.hinweis-blau { font: 700 var(--schrift-xs) Mulish; padding: 3px 9px; }
.zaehler-rot { font: 700 var(--schrift-xs) Mulish; color: #fff; background: var(--koralle); padding: 2px 9px; border-radius: 99px; }

/* Pillen (Punkt 39): Rundung und die drei Farbpaare, die bisher je Pille kopiert waren. Schrift
   und Innenabstand bleiben bei der jeweiligen Pille, sie unterscheiden sich gewollt. */
.pille { border-radius: 99px; }
.pille.blau { color: var(--petrol); background: var(--eis); }
.pille.gruen { color: var(--gruen-text); background: var(--gruen-hell); }
.pille.rot { color: var(--rot); background: var(--rot-hell); }

.fussnote { font: 400 var(--schrift-m) Mulish; color: var(--grau); }

/* ===================== „Jetzt handeln" ===================== */

.segmente { display: flex; gap: 4px; background: var(--eis); border-radius: 99px; padding: 3px; }
.segmente button {
  flex: 1;
  font: 700 var(--schrift-s) Mulish;
  color: var(--grau);
  background: none;
  border: none;
  text-align: center;
  padding: 5px 0;
  border-radius: 99px;
  cursor: pointer;
}
.segmente button.aktiv { color: var(--petrol); background: #fff; box-shadow: 0 1px 3px rgba(20,83,107,.18); }

.aufgaben { display: flex; flex-direction: column; gap: 12px; }
.aufgabe {
  border: 1px solid rgba(20,83,107,.1);
  border-radius: 12px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.aufgabe:hover { border-color: var(--blau); background: #F7FBFE; }
/* Erledigte Aufgaben (Schlüssel geteilt mit der Drawer-Liste), wie .programm-karte.fertig */
.aufgabe.fertig { opacity: .55; }
.aufgabe.fertig .aufgabe-text { text-decoration: line-through; }
.prio { font: 800 10px Mulish; letter-spacing: .08em; padding: 2px 8px; border-radius: 99px; align-self: flex-start; }
.prio-hoch { color: var(--rot); background: var(--rot-hell); }
.prio-mittel { color: var(--petrol); background: var(--eis); }
.aufgabe-text { font: 700 var(--schrift-xl)/1.35 Mulish; }
.aufgabe-aktion { font: 700 var(--schrift-m) Mulish; color: var(--blau); }

.programm-feed { display: flex; flex-direction: column; gap: 9px; }
/* Marker am Tab „Programme" (Verträge-Snapshot fällig/fehlt), Farben wie .daten-status. */
.seg-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; vertical-align: 1px; }
.seg-punkt.rot { background: var(--rot); }
.seg-punkt.blau { background: var(--blau); }
.programm-daten-hinweis { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.programm-daten-hinweis .hinweis-text { font: 600 var(--schrift-xs)/1.4 Mulish; color: var(--grau); }
.programm-karte { border: 1px solid rgba(20,83,107,.1); border-radius: 12px; padding: 10px 12px; }
.programm-karte.fertig { opacity: .55; }
.programm-karte .zeile1 { display: flex; justify-content: space-between; align-items: center; }
.programm-karte .name { font: 700 var(--schrift-l) Mulish; }
.programm-karte .endet { font: 700 var(--schrift-s) Mulish; color: var(--rot); }
.programm-karte .unter { font: 400 var(--schrift-s) Mulish; color: var(--grau); margin-top: 1px; }
.programm-karte .spur { height: 8px; background: var(--eis); border-radius: 99px; margin-top: 6px; }
.programm-karte .balken { height: 8px; border-radius: 99px; background: var(--koralle); }
.programm-karte.fertig .balken { background: var(--gruen); }
.programm-karte .knopfzeile { margin-top: 8px; }
.alle-link { font: 700 var(--schrift-m) Mulish; color: var(--blau); cursor: pointer; border: none; background: none; padding: 0; text-align: left; }

.listen-knopf {
  font: 700 var(--schrift-s) Mulish;
  color: #fff;
  background: var(--petrol);
  border: none;
  width: 100%;
  padding: 7px 0;
  border-radius: 9px;
  text-align: center;
  cursor: pointer;
}
.listen-knopf.fertig { color: var(--gruen-text); background: var(--gruen-hell); }

/* ===================== Aggregatoren ===================== */

.agg-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agg-kachel {
  border: 1px solid rgba(20,83,107,.1);
  border-radius: 12px;
  padding: 12px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
  text-align: left;
  font-family: inherit;
}
.agg-kachel:hover { border-color: var(--blau); background: #F7FBFE; }
.agg-label { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.agg-wert { font: 800 20px/1.2 Poppins, sans-serif; color: var(--tinte); }
.agg-unter { font: 400 var(--schrift-m) Mulish; color: var(--grau); }
.agg-link { font: 700 var(--schrift-xs) Mulish; color: var(--blau); }

/* ===================== Rehasport-Karte ===================== */

.kurs-zeilen { display: flex; flex-direction: column; gap: 9px; }
.kurs-zeile { display: grid; grid-template-columns: 96px 1fr 70px; gap: 8px; align-items: center; }
.kurs-name { font: 700 var(--schrift-s) Mulish; }
.kurs-trainer { font: 400 var(--schrift-xs) Mulish; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kurs-spur { height: 10px; background: var(--eis); border-radius: 99px; }
.kurs-balken { height: 10px; border-radius: 99px; }
.kurs-wert { font: 700 var(--schrift-s) Mulish; text-align: right; }
.kurs-wert.rot { color: var(--rot); }
.wl-badge { font: 800 10px Mulish; padding: 1px 5px; }

/* Kachel-Marker „Daten fällig/fehlen" (aus der uploadBilanz des Ziel-Drawers, kartentyp-unabhängig) */
.daten-status { font: 800 10px Mulish; letter-spacing: 0; text-transform: none; padding: 1px 7px; white-space: nowrap; }
.kpi-kopf .daten-status { margin-left: auto; margin-right: 8px; }
/* Schmale Kacheln (< 270px): Titel + Pille + Punkt passen nicht in eine Zeile, dann
   bekommt die Pille eine eigene Zeile UNTER Titel und Punkt (statt den Punkt mitzureißen). */
.kpi-kachel { container-type: inline-size; }
@container (max-width: 270px) {
  .kpi-kopf .daten-status { order: 3; flex-basis: 100%; margin: 0; }
}
.agg-kachel .daten-status { align-self: flex-start; }
.karte-kopf .daten-status { margin-left: auto; margin-right: 8px; }
/* Kennzeichnung „Beispielzahlen" (demo-daten.js, Feld `beispiel`). Bewusst Bernstein: weder das
   Rot/Blau der Datenstatus-Marker noch das Grün „läuft gut", es ist kein Zustand der Daten,
   sondern die Aussage „hier gibt es noch keine". */
.beispiel-pille { display: inline-block; font: 800 10px Mulish; letter-spacing: 0; text-transform: none; color: #7A5B00; background: #FFF3CC; border: 1px dashed #D9B23F; padding: 0 7px; border-radius: 99px; white-space: nowrap; vertical-align: 1px; cursor: help; }
.karte-kopf .beispiel-pille { margin-left: auto; margin-right: 8px; }
.karte-kopf .beispiel-pille + .daten-status { margin-left: 0; }
.funnel-titel .beispiel-pille { margin-left: 6px; }
.aufgabe-pillen { display: flex; align-items: center; gap: 6px; }
.beispiel-zeile { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 9px 11px; border-radius: 10px; background: #FFFAEB; }
.beispiel-zeile .beispiel-text { font: 600 var(--schrift-s)/1.4 Mulish; color: #6B5A2A; }
.station .daten-status { align-self: flex-start; margin-top: 2px; }
.bestand-label .daten-status { margin-left: 6px; vertical-align: middle; }
.kurs-hinweis { background: #FCE8E2; border-radius: 10px; padding: 9px 12px; margin-top: 0; }
.kurs-hinweis span { font: 700 var(--schrift-s)/1.45 Mulish; color: var(--rot); }

.balken-blau { background: var(--blau); }
.balken-hellblau { background: var(--blau-hell); }
.balken-rot { background: var(--koralle); }
.balken-grau { background: var(--grau); }

/* ===================== KPI-Kacheln ===================== */

.kpi-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.kpi-kachel {
  background: #fff;
  border-radius: 16px;
  padding: 15px 17px;
  box-shadow: 0 2px 10px rgba(20,83,107,.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  border: none;
  text-align: left;
  font-family: inherit;
  transition: box-shadow .15s ease;
}
.kpi-kachel:hover { box-shadow: 0 6px 20px rgba(20,83,107,.14); }
.kpi-kachel.warnung { border: 1.5px solid rgba(232,101,78,.45); }
/* flex-wrap: auf 215px-Kacheln passen Titel + Marker-Pille + Punkt nicht in eine Zeile. */
.kpi-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.kpi-titel { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.kpi-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punkt-gruen { background: var(--gruen); }
.punkt-rot { background: var(--koralle); }
.punkt-grau { background: var(--grau); }
.kpi-zeile { display: flex; align-items: baseline; gap: 6px 9px; flex-wrap: wrap; }
.kpi-wert { font: 800 30px/1 Poppins, sans-serif; color: var(--tinte); }
.kpi-badge { font: 700 var(--schrift-s) Mulish; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.badge-gut { color: var(--gruen-text); background: var(--gruen-hell); }
.badge-schlecht { color: var(--rot); background: var(--rot-hell); }
.badge-neutral { color: rgba(36,51,59,.6); background: var(--eis); }
.kpi-kachel svg { width: 100%; height: 24px; }

.linie-blau { stroke: var(--blau); }
.linie-rot { stroke: var(--koralle); }
.linie-grau { stroke: var(--grau); }
/* Pfeilspitze im Funnel, Farben wie die Linien */
.fuellung-rot { fill: var(--koralle); }
.fuellung-grau { fill: var(--grau); }

/* ===================== Vertrieb & Marketing (Funnel) ===================== */

.funnel-karte { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(20,83,107,.06); }
.funnel-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.funnel-titel { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.legende { display: flex; align-items: center; gap: 14px; }
.legende span { display: flex; align-items: center; gap: 6px; font: 600 var(--schrift-s) Mulish; color: rgba(36,51,59,.65); }
.legende i { width: 8px; height: 8px; border-radius: 3px; }
.legende .gut { background: var(--gruen); }
.legende .engpass { background: var(--koralle); }

.funnel-scroll { overflow-x: auto; overflow-y: hidden; }
.funnel-innen { min-width: 700px; }
.funnel-zeile { display: flex; align-items: stretch; }
.funnel-zeile + .funnel-zeile { margin-top: 14px; }

.station {
  background: #F6FAFC;
  border: 1px solid rgba(20,83,107,.09);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font-family: inherit;
}
.station:hover { border-color: var(--blau); background: #F3F9FD; }
.station-quelle { flex: 1.15; justify-content: flex-start; }
.station-mitte { flex: 1; }
.station-neu { flex: 1.1; }
.station.engpass { background: #FDF6F4; border-color: rgba(232,101,78,.5); }
.station.engpass:hover { border-color: var(--koralle); background: #FCEFEA; }
.station.erfolg { background: #F5F9E6; border: 1.5px solid rgba(155,191,23,.5); }
.station.erfolg:hover { background: #EFF5D8; }
.station-label { font: 700 10.5px Mulish; letter-spacing: .07em; color: var(--grau); }
.station-wert { font: 800 18px/1.2 Poppins, sans-serif; color: var(--tinte); margin-top: 2px; }
.station-unter { font: 400 var(--schrift-m) Mulish; color: var(--grau); }
.station-badge { font: 700 var(--schrift-s) Mulish; padding: 1px 7px; }
.station-wertzeile { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }

.pfeil { width: 86px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pfeil span { font: 700 var(--schrift-xs) Mulish; color: var(--grau); }
.pfeil.rot span { color: var(--rot); }

.funnel-gesamt {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  cursor: pointer;
  flex-wrap: wrap;
}
.funnel-gesamt .text { font: 600 var(--schrift-s) Mulish; color: rgba(36,51,59,.65); }
.funnel-gesamt .text strong { font: 700 var(--schrift-s) Mulish; color: var(--tinte); }
.funnel-gesamt .ziel { font: 700 var(--schrift-xs) Mulish; color: var(--rot); background: var(--rot-hell); padding: 1px 8px; border-radius: 99px; }
.funnel-gesamt .warnung { font: 700 var(--schrift-xs) Mulish; color: var(--rot); }

.bestand-zeile {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,83,107,.08);
  flex-wrap: wrap;
}
.bestand-block { flex: none; cursor: pointer; }
.bestand-label { font: 700 10.5px Mulish; letter-spacing: .07em; color: var(--grau); }
.bestand-wertzeile { display: flex; align-items: baseline; gap: 8px; }
.bestand-wert { font: 800 26px/1.15 Poppins, sans-serif; }
.bestand-badge { font: 700 var(--schrift-xs) Mulish; padding: 1px 7px; }
.bestand-mitte { flex: 1; min-width: 220px; }
.bestand-balken { display: flex; height: 20px; border-radius: 99px; overflow: hidden; }
.bestand-balken .aktiv { background: var(--blau); }
.bestand-balken .risiko { background: var(--koralle); }
/* Ohne Daten (Leerzustand): nur die Spur, Farbe wie die Spur der Balkenlisten. */
.bestand-balken.leer { background: var(--eis); }
.bestand-legende { display: flex; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.bestand-legende span { display: flex; align-items: center; gap: 6px; font: 600 var(--schrift-s) Mulish; color: rgba(36,51,59,.7); }
.bestand-legende i { width: 8px; height: 8px; border-radius: 3px; }
.bestand-legende .link { font: 700 var(--schrift-xs) Mulish; color: var(--blau); cursor: pointer; margin-left: 3px; }
.kuendigungen-block { flex: none; border-left: 1px solid rgba(20,83,107,.1); padding-left: 20px; cursor: pointer; }
.kuendigungen-wert { font: 800 22px/1.2 Poppins, sans-serif; color: var(--rot); }
.kuendigungen-badge { font: 700 var(--schrift-s) Mulish; padding: 1px 7px; }

/* ===================== Drawer ===================== */

.schleier {
  position: fixed;
  inset: 0;
  background: rgba(20,40,50,.4);
  z-index: 40;
  animation: dfade .2s ease;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 560px;
  max-width: 92vw;
  background: #fff;
  z-index: 50;
  box-shadow: -16px 0 50px rgba(20,40,50,.25);
  display: flex;
  flex-direction: column;
  animation: dslide .25s ease;
}
/* Neu gezeichnet, aber derselbe Drawer (renderDrawer, gleicher): nicht noch einmal einfahren. */
.drawer.still, .schleier.still { animation: none; }
.drawer-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 26px 16px;
  border-bottom: 1px solid rgba(20,83,107,.1);
}
.drawer-titel { font: 800 19px Poppins, sans-serif; }
.drawer-sub { font: 400 var(--schrift-l) Mulish; color: var(--grau); margin-top: 2px; }
.drawer-zu {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--eis);
  color: var(--petrol);
  font: 700 15px Mulish;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: none;
}
.drawer-zu:hover { background: #DDEFF9; }
.drawer-inhalt { flex: 1; overflow-y: auto; padding: 20px 26px 26px; }

.drawer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.drawer-badge { font: 700 var(--schrift-m) Mulish; padding: 5px 11px; }

.drawer-ueberschrift { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; color: var(--grau); margin: 20px 0 8px; }
.drawer-ueberschrift:first-child, .drawer-badges + .drawer-ueberschrift { margin-top: 0; }
/* Prototyp: über Aktionslisten nur 6px Abstand statt 8px. */
.drawer-ueberschrift:has(+ .aktionsliste) { margin-bottom: 6px; }

.saeulen { display: flex; align-items: flex-end; gap: 7px; height: 110px; }
.saeulen div { flex: 1; background: var(--blau-hell); border-radius: 5px 5px 0 0; }
.saeulen div.aktuell { background: var(--blau); }
.saeulen-labels { display: flex; gap: 7px; margin-top: 5px; }
.saeulen-labels span { flex: 1; font: 600 10.5px Mulish; color: var(--grau); text-align: center; }
.saeulen-labels span.aktuell { font-weight: 700; color: var(--tinte); }

.balkenliste { display: flex; flex-direction: column; gap: 9px; }
.balkenliste.abstand-unten { margin-bottom: 20px; }
.balken-zeile { display: grid; gap: 10px; align-items: center; }
.balken-zeile .label { font: 700 var(--schrift-m) Mulish; }
.balken-zeile .spur { height: 11px; background: var(--eis); border-radius: 99px; }
.balken-zeile .balken { height: 11px; border-radius: 99px; }
.balkenliste.dick .balken-zeile { gap: 10px; }
.balkenliste.dick .spur, .balkenliste.dick .balken { height: 16px; }
.balkenliste.dick { gap: 8px; }
.balken-zeile .rechts { font: 700 var(--schrift-s) Mulish; text-align: right; }
.balkenliste.dick .rechts { font: 700 var(--schrift-m) Mulish; }
.balken-zeile .rechts.rot { color: var(--rot); }

.verteilung { display: flex; align-items: flex-end; gap: 14px; height: 130px; padding: 0 8px; }
.verteilung > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.verteilung .zahl { font: 700 var(--schrift-xs) Mulish; color: var(--tinte); text-align: center; }
.verteilung .zahl.rot { color: var(--rot); }
.verteilung .saeule { border-radius: 6px 6px 0 0; }
.verteilung-labels { display: flex; gap: 14px; padding: 6px 8px 0; }
.verteilung-labels span { flex: 1; font: 600 var(--schrift-s) Mulish; color: var(--grau); text-align: center; }
.verteilung-labels span.rot { color: var(--rot); }

.aktionsliste .zeile {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20,83,107,.07);
}
.aktionsliste .name { font: 700 var(--schrift-l) Mulish; color: var(--tinte); }
.aktionsliste .zeile.fertig .name { opacity: .45; text-decoration: line-through; }
.feld-badge { font: 600 var(--schrift-xs) Mulish; padding: 3px 8px; text-align: center; }
.feld-leise { font: 400 var(--schrift-s) Mulish; color: var(--grau); }
.feld-leise.rechts { text-align: right; }
.feld-wert { font: 700 var(--schrift-s) Mulish; color: var(--tinte); text-align: right; }
.feld-wert.rot { color: var(--rot); }
.feld-wert.grau { color: var(--grau); }

.drawer-fussnote { font: 600 var(--schrift-m) Mulish; color: var(--grau); padding: 10px 0; }

.info-box { border-radius: 10px; padding: 10px 13px; margin-top: 16px; font: 600 var(--schrift-m)/1.5 Mulish; }
.info-box.blau { background: var(--eis); color: var(--petrol); }
.info-box.rot { background: #FCE8E2; color: var(--rot); }
/* Abstände wie im Prototyp: 18px nach Diagrammen, 0 nach der „… weitere"-Fußnote,
   10px zwischen zwei Boxen (Reihenfolge der Regeln entscheidet bei gleicher Spezifität). */
.balkenliste + .info-box, .verteilung-labels + .info-box { margin-top: 18px; }
.drawer-fussnote + .info-box { margin-top: 0; }
.info-box + .info-box { margin-top: 10px; }
.drawer-link { text-decoration: underline; cursor: pointer; }

.anbieter-karte { border: 1px solid rgba(20,83,107,.12); border-radius: 14px; padding: 14px 16px; }
.anbieter-karte + .anbieter-karte { margin-top: 12px; }
.anbieter-kopf { display: flex; justify-content: space-between; align-items: center; }
.anbieter-name { font: 700 13.5px Mulish; }
.anbieter-badge { font: 700 var(--schrift-xs) Mulish; padding: 2px 8px; }
.anbieter-werte { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.anbieter-betrag { font: 800 16px Poppins, sans-serif; }
.anbieter-detail { font: 600 var(--schrift-m) Mulish; color: rgba(36,51,59,.7); }
.anbieter-spur { height: 11px; background: var(--eis); border-radius: 99px; margin-top: 10px; }
.anbieter-balken { height: 11px; border-radius: 99px; }

.kampagnen { display: flex; flex-direction: column; gap: 12px; }
.kampagne { border: 1px solid rgba(20,83,107,.12); border-radius: 14px; padding: 14px 16px; }
.kampagne.warnung { border: 1.5px solid rgba(232,101,78,.5); background: #FDF6F4; }
.kampagne-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kampagne-name { font: 700 13.5px Mulish; display: flex; align-items: center; }
.kampagne-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; }
.kampagne-badge { font: 700 var(--schrift-xs) Mulish; padding: 2px 8px; white-space: nowrap; }
.kampagne-werte { display: flex; gap: 16px; margin-top: 8px; font: 600 var(--schrift-m) Mulish; color: rgba(36,51,59,.7); flex-wrap: wrap; }
.kampagne-werte .leadpreis { font-weight: 700; }
.kampagne-werte .leadpreis.gruen { color: var(--gruen-text); }
.kampagne-werte .leadpreis.rot { color: var(--rot); }
.kampagne svg { width: 100%; height: 30px; margin-top: 6px; }

/* Aktionsknopf im Drawer (Sitzung 9 Teil B, erster Fall: „Jetzt abrufen" für die Meta-Ausgaben).
   Die Knopf-Optik selbst kommt aus .knopf/.knopf.primaer, hier stehen nur Lage und Abstand,
   und der Hinweis daneben ist leise wie .einst-meta. */
.aktion-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.aktion-knopf { flex: none; }
.aktion-hinweis { font: 400 var(--schrift-s)/1.4 Mulish; color: var(--grau); flex: 1; min-width: 160px; }

.kurs-tabelle { display: flex; flex-direction: column; gap: 10px; }
.kurs-tabelle .zeile {
  display: grid;
  grid-template-columns: 140px 1fr 70px 76px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid rgba(20,83,107,.07);
}
.kurs-tabelle .zeile:last-child { border-bottom: none; }
.kurs-tabelle .name { font: 700 var(--schrift-m) Mulish; }
.kurs-tabelle .trainer { font: 400 var(--schrift-s) Mulish; color: var(--grau); }
.kurs-tabelle .spur { height: 12px; background: var(--eis); border-radius: 99px; }
.kurs-tabelle .balken { height: 12px; border-radius: 99px; }
.kurs-tabelle .belegung { font: 700 var(--schrift-s) Mulish; text-align: right; }
.kurs-tabelle .belegung.rot { color: var(--rot); }
.kurs-tabelle .umsatz { font: 700 var(--schrift-s) Mulish; text-align: right; }
.kurs-tabelle .umsatz.gruen { color: var(--gruen-text); }
.kurs-tabelle .umsatz.rot { color: var(--rot); }
/* 8-Wochen-Zahlenband (Variante B, 16.10.2026): Kästchen = Teilnehmer, Farbe = Auslastung wie die Balken. */
.verlauf-tabelle .zeile { grid-template-columns: minmax(0, 1fr) auto 92px 18px; }
.verlauf-tabelle .verlauf { display: flex; gap: 3px; }
.verlauf-tabelle .zelle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; border-radius: 5px; font: 700 var(--schrift-xs) Mulish; color: var(--petrol);
}
.verlauf-tabelle .zelle-blau { background: var(--blau); color: #fff; }
.verlauf-tabelle .zelle-hellblau { background: var(--blau-hell); }
.verlauf-tabelle .zelle-rot { background: var(--koralle); color: #fff; }
.verlauf-tabelle .zelle.leer { background: var(--eis); color: var(--grau); font-weight: 400; }
.verlauf-tabelle .trend { font: 700 15px Mulish; text-align: center; }
.verlauf-tabelle .trend-hoch { color: var(--gruen-text); }
.verlauf-tabelle .trend-runter { color: var(--rot); }
.verlauf-tabelle .trend-gleich { color: var(--grau); }
@media (max-width: 480px) {
  .verlauf-tabelle .zeile { grid-template-columns: minmax(0, 1fr) 72px 16px; row-gap: 6px; }
  .verlauf-tabelle .verlauf { grid-column: 1 / -1; grid-row: 2; }
  .verlauf-tabelle .zelle { flex: 1; width: auto; max-width: 34px; }
}

.filter-chips { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-chips button {
  font: 700 var(--schrift-s) Mulish; background: var(--eis); color: var(--petrol); padding: 4px 11px;
  border: none; border-radius: 99px; cursor: pointer;
}
.filter-chips button.aktiv { background: var(--petrol); color: #fff; }

/* ---- Programm-Vorgang: Knöpfe und Grund-Tafel in der Karte ---- */
.knopf-leise {
  font: 700 var(--schrift-xs) Mulish; color: var(--blau); background: none; border: none;
  padding: 2px 0; cursor: pointer; text-align: center;
}
.knopf-leise:hover { color: var(--petrol); text-decoration: underline; }
.knopf-leise[disabled], .listen-knopf[disabled] { opacity: .5; cursor: default; }
.vorgang-tafel {
  background: #F4FAFD; border-radius: 12px; padding: 12px 14px; margin: 0 0 10px;
  border-bottom: 1px solid rgba(20,83,107,.07);
}
.vorgang-hinweis { font: 700 var(--schrift-s) Mulish; color: var(--gruen-text); margin-bottom: 6px; }
.vorgang-wahl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vorgang-wahl .knopf.empfohlen { box-shadow: 0 0 0 2px rgba(155,191,23,.45); }
.vorgang-oder { font: 600 var(--schrift-s) Mulish; color: var(--grau); }
.grund-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.grund-chips button {
  font: 700 var(--schrift-s) Mulish; background: #fff; color: var(--petrol); padding: 5px 11px;
  border: 1px solid rgba(20,83,107,.2); border-radius: 99px; cursor: pointer;
}
.grund-chips button:hover { border-color: var(--blau); color: var(--blau); }
.vorgang-notiz {
  width: 100%; font: 400 var(--schrift-m) Mulish; padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(20,83,107,.2); background: #fff; box-sizing: border-box;
}

/* Feed-Karte: beendetes Programm und der Hinweis auf Schritt 2 */
.programm-karte.vorbei .endet { color: var(--rot); }
.programm-karte .karte-hinweis { font: 600 10.5px Mulish; color: var(--grau); margin-top: 5px; text-align: center; }

/* ---- Drawer-Reiter (Programme: Zu tun · Alle Teilnehmer · Auswertung) ---- */
.drawer-reiter { margin-bottom: 16px; }
.drawer-reiter button { padding: 7px 0; font-size: var(--schrift-m); }
.knopf.klein { font-size: var(--schrift-s); padding: 7px 13px; border-radius: 9px; }

/* Check-ins je Programmwoche: ein Balken je Woche, Höhe = Anzahl (gedeckelt bei 4). */
.checkins { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font: 600 var(--schrift-xs) Mulish; color: var(--grau); line-height: 1; }
.checkin-wochen { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.checkin-wochen i { width: 6px; border-radius: 2px 2px 0 0; background: var(--blau); }
.checkin-wochen i.null { height: 3px; background: var(--koralle); }
.checkin-wochen i.unbekannt { height: 14px; border: 1px dashed var(--grau-leise); border-bottom: none; background: none; box-sizing: border-box; }
.checkin-wochen i.offen { height: 14px; border: 1px dashed #C9D6DC; border-bottom: none; background: none; box-sizing: border-box; }
.checkin-summe b { font-weight: 800; color: var(--tinte); }
.checkin-schnitt { font: 800 10.5px Mulish; padding: 2px 7px; }
.checkin-warnung { font-weight: 800; color: var(--rot); }
.checkins.kompakt { margin-top: 0; flex-wrap: nowrap; }

/* Reiter „Zu tun": Karten */
.tn-karten { display: flex; flex-direction: column; gap: 10px; }
.tn-karte { border: 1px solid rgba(20,83,107,.1); border-left: 4px solid var(--blau-hell); border-radius: 14px; padding: 12px 14px; }
.tn-karte.vorbei { border-left-color: var(--rot); }
.tn-karte.termin { border-left-color: var(--gruen); }
.tn-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tn-name { font: 800 13.5px Mulish; }
.tn-ende { font: 700 var(--schrift-s) Mulish; color: var(--petrol); white-space: nowrap; }
.tn-ende.rot { color: var(--rot); }
.tn-unter { display: block; font: 600 var(--schrift-xs) Mulish; color: var(--grau); margin-top: 2px; }
.tn-schritte { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font: 700 var(--schrift-xs) Mulish; color: var(--grau-leise); }
.tn-schritt { display: inline-flex; align-items: center; gap: 5px; }
.tn-schritt i { width: 14px; height: 14px; border-radius: 99px; border: 2px solid #C9D6DC; box-sizing: border-box; }
.tn-schritt.jetzt { color: var(--petrol); }
.tn-schritt.jetzt i { border-color: var(--blau); }
.tn-schritt.ok { color: var(--gruen-text); }
.tn-schritt.ok i { background: var(--gruen); border-color: var(--gruen); }
.tn-strich { width: 16px; height: 2px; background: #C9D6DC; }
.tn-wer { font: 400 var(--schrift-xs) Mulish; color: var(--grau-leise); margin-left: auto; }
.tn-hinweis { margin: 8px 0 0; }
.tn-knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.tn-zurueck { color: var(--grau-leise); margin-left: auto; }
.tn-karte .vorgang-tafel { margin: 10px 0 0; }
.tn-leer { font: 600 var(--schrift-l)/1.5 Mulish; color: var(--grau); background: #F4FAFD; border-radius: 12px; padding: 14px 16px; }

/* Reiter „Alle Teilnehmer": Übersicht ohne Knöpfe */
.tn-zeile { display: grid; grid-template-columns: 1fr 118px 46px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(20,83,107,.07); }
.tn-zeile .tn-name { font-size: var(--schrift-l); }
.tn-zeile .stand-badge { display: inline-block; margin-left: 6px; vertical-align: 1px; font: 700 9.5px Mulish; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; }
.tn-zeile .tn-ende { text-align: right; }
.tn-mitte .spur { display: block; height: 7px; background: var(--eis); border-radius: 99px; }
.tn-mitte .balken { display: block; height: 7px; border-radius: 99px; }

/* Reiter „Auswertung": große Zahlen */
.gross-zahlen { display: flex; gap: 24px; margin-bottom: 18px; }
.gross-wert { font: 800 26px Poppins, sans-serif; color: var(--tinte); }
.gross-wert.blau { color: var(--petrol); }
.gross-text { font: 600 var(--schrift-s) Mulish; color: var(--grau); margin-top: 2px; }

/* Leads-Drawer „Antwort zuerst": Satz, große Zahlen als Kacheln, Details in Klappen. */
.antwort { background: var(--eis); border-radius: 14px; padding: 15px 18px; margin-bottom: 14px; }
.antwort-satz { font: 800 16px/1.35 Poppins, sans-serif; color: var(--petrol); }
.antwort-satz b { color: var(--blau); }
.antwort-text { font: 600 var(--schrift-m)/1.5 Mulish; color: var(--grau); margin-top: 6px; }
.gross-zahlen.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gross-zahlen.kacheln > div { border: 1px solid rgba(20,83,107,.1); border-radius: 12px; padding: 10px 12px; }
.gross-zahlen.kacheln .gross-wert { font-size: 22px; }
.gross-unter { font: 700 var(--schrift-xs) Mulish; color: var(--grau); margin-top: 3px; }
.drawer-klappe { border-top: 1px solid rgba(20,83,107,.1); }
.drawer-klappe:last-child, .drawer-klappe:has(+ :not(.drawer-klappe)) { border-bottom: 1px solid rgba(20,83,107,.1); }
.drawer-klappe-kopf { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 12px 0; cursor: pointer; text-align: left; }
.drawer-klappe-titel { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; color: var(--grau); flex: 1; min-width: 0; }
.drawer-klappe-kopf:hover .drawer-klappe-titel { color: var(--petrol); }
.drawer-klappe-kurz { font: 600 var(--schrift-s) Mulish; color: var(--grau-leise); text-align: right; }
.drawer-klappe-pfeil { color: var(--grau); font-size: var(--schrift-m); transition: transform .15s ease; }
.drawer-klappe-kopf:not(.offen) .drawer-klappe-pfeil { transform: rotate(-90deg); }
.drawer-klappe-inhalt { padding: 2px 0 14px; }
.drawer-klappe-inhalt[hidden] { display: none; }
.gross-zahlen + .drawer-klappe, .info-box + .drawer-klappe { margin-top: 16px; }
/* Schmal: Kacheln bleiben dreispaltig (kleinere Zahl), die Kurzfassung rutscht unter den Titel. */
@media (max-width: 480px) {
  .gross-zahlen.kacheln { gap: 6px; }
  .gross-zahlen.kacheln > div { padding: 8px 9px; }
  .gross-zahlen.kacheln .gross-wert { font-size: 17px; }
  .drawer-klappe-kopf { flex-wrap: wrap; row-gap: 3px; }
  .drawer-klappe-kurz { order: 3; flex-basis: 100%; text-align: left; }
}

/* ---- Upload („Daten aktualisieren") ---- */

.upload-bereich { border-top: 1px solid rgba(20,83,107,.1); margin-top: 20px; padding-top: 16px; }
.upload-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.upload-stand { font: 400 var(--schrift-m) Mulish; color: var(--grau); }
/* Klappbarer Kopf des Upload-Bereichs (mehrere Slots) */
.upload-klapp { width: 100%; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.upload-klapp:hover .drawer-ueberschrift { color: var(--petrol); }
.upload-klapp-rechts { display: inline-flex; align-items: center; gap: 8px; }
.upload-bilanz { font: 600 var(--schrift-s) Mulish; color: var(--grau); }
.upload-bilanz.blau { color: var(--petrol); }
.upload-bilanz.rot { color: var(--rot); }
.upload-klapp-pfeil { color: var(--grau); font-size: var(--schrift-m); transition: transform .15s ease; }
.upload-klapp:not(.offen) .upload-klapp-pfeil { transform: rotate(-90deg); }
.upload-slots[hidden] { display: none; }
.upload-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed rgba(20,83,107,.3);
  border-radius: 12px;
  padding: 18px 14px;
  cursor: pointer;
  text-align: center;
}
.upload-feld:hover, .upload-feld.dragover { border-color: var(--blau); background: #F7FBFE; }
/* Die Datei-Eingabe ist nur visuell versteckt (.sr), mit der Tastatur erreichbar; ihr Fokus zeigt
   sich am Feld drumherum. */
.upload-feld:has(input:focus-visible) { border-color: var(--blau); background: #F7FBFE; outline: 2px solid var(--blau); outline-offset: 2px; }
.upload-feld .zeile1 { font: 700 var(--schrift-l) Mulish; color: var(--petrol); }
.upload-feld .zeile1 u { color: var(--blau); }
.upload-feld .hinweis { font: 400 var(--schrift-m) Mulish; color: var(--grau); }
.upload-fertig {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F5F9E6;
  border: 1px solid rgba(155,191,23,.5);
  border-radius: 12px;
  padding: 12px 14px;
}
.upload-haken {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gruen);
  color: #fff;
  font: 800 var(--schrift-xl) Mulish;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.upload-info { flex: 1; min-width: 0; }
.upload-datei { font: 700 var(--schrift-l) Mulish; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-status { font: 400 var(--schrift-m) Mulish; color: var(--gruen-text); }
.upload-ersetzen { font: 700 var(--schrift-s) Mulish; color: var(--blau); cursor: pointer; flex: none; border: none; background: none; }

/* ---- Upload-Slots (echter Upload, mehrere je Drawer) ---- */

.upload-slot {
  border: 1px solid rgba(20,83,107,.12);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 12px;
}
/* Label und Status-Pille in Zeile 1, der Stand-Text in Zeile 2 über die ganze Breite.
   Vorher standen alle drei in EINER Flex-Zeile, und für den Stand blieben 262 von 476 px,
   gemessen brauchen die Stand-Texte 298–367 px („Stand: KW 53 (28.12.2026–03.01.2027) ·
   hochgeladen 05.01.2027" ist der längste), sie brachen also alle zweizeilig um, auch der
   kurze Stichtag-Fall. Kürzen half nicht: nach „Stand: " (39 px) und „· hochgeladen
   TT.MM.JJJJ" (147 px) bleiben für den Zeitraum 76 px, und „Stichtag 31.08.2026" allein ist
   112 px breit. Mit eigener Zeile passt jeder Fall, ohne Information zu opfern. */
.upload-slot-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  row-gap: 2px;
  margin-bottom: 8px;
}
.upload-slot-kopf .upload-stand { flex: 0 0 100%; }
.upload-slot-label { font: 700 var(--schrift-xl) Mulish; color: var(--tinte); }
/* Fälligkeit je Slot: Warnrahmen (Rezept .kpi-kachel.warnung), Status-Pille neben dem Label
   (margin-right:auto, weil der Kopf space-between ist), Hinweiszeile (Rezept .upload-warnung). */
.upload-slot.fehlt { border-color: rgba(232,101,78,.45); }
.upload-slot-kopf .upload-slot-status { font-size: var(--schrift-xs); padding: 3px 9px; white-space: nowrap; margin-right: auto; }
.upload-statushinweis { font: 600 var(--schrift-s)/1.5 Mulish; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.upload-statushinweis.blau { color: var(--petrol); background: var(--eis); }
.upload-statushinweis.rot { color: var(--rot); background: var(--rot-hell); }
.upload-feldzeile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.upload-feldzeile .feldname { font: 700 var(--schrift-s) Mulish; color: var(--petrol); }
/* Mehrwochen-Upload: „Berichtswoche von" und „bis" untereinander, Selects bündig. */
.upload-feldzeile.spanne .feldname { min-width: 118px; }
.upload-feldhinweis { font: 400 var(--schrift-s) Mulish; color: var(--grau); margin: -2px 0 8px; }
.upload-feldzeile input, .upload-feldzeile select {
  font: 600 var(--schrift-l) Mulish;
  color: var(--tinte);
  border: 1px solid rgba(20,83,107,.2);
  border-radius: 8px;
  padding: 5px 9px;
  background: #fff;
}
.upload-feldzeile input:focus, .upload-feldzeile select:focus {
  outline: none;
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(45,170,225,.15);
}
.upload-laedt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--eis);
  border: 1px solid rgba(45,170,225,.35);
  border-radius: 12px;
  padding: 12px 14px;
  font: 600 var(--schrift-l) Mulish;
  color: var(--petrol);
}
.upload-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(45,170,225,.3);
  border-top-color: var(--blau);
  border-radius: 50%;
  flex: none;
  animation: udreh .8s linear infinite;
}
@keyframes udreh { to { transform: rotate(360deg); } }
.upload-vorschau {
  background: #F6FAFC;
  border: 1px solid rgba(20,83,107,.12);
  border-radius: 12px;
  padding: 12px 14px;
}
.upload-vorschau-datei { font: 600 var(--schrift-m) Mulish; color: var(--grau); }
.upload-vorschau-kennzahl { font: 800 22px/1.2 Poppins, sans-serif; color: var(--tinte); margin-top: 6px; }
.upload-vorschau-kennzahl span { font: 600 var(--schrift-xs) Mulish; color: var(--grau); margin-left: 7px; }
.upload-vorschau-zeile { font: 600 var(--schrift-s)/1.6 Mulish; color: var(--grau); }
.upload-vorschau-zeile strong { color: var(--tinte); }
.upload-warnung {
  font: 600 var(--schrift-s)/1.5 Mulish;
  color: var(--rot);
  background: var(--rot-hell);
  border-radius: 8px;
  padding: 5px 9px;
  margin-top: 6px;
}
.upload-fehler {
  background: #FCE8E2;
  color: var(--rot);
  border-radius: 10px;
  padding: 10px 13px;
  font: 600 var(--schrift-m)/1.5 Mulish;
}
.upload-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* nowrap: „Woche ohne Kündigung melden" brach sonst auf drei Zeilen um (Messung 04.09.2026). */
.upload-knoepfe .knopf { padding: 8px 14px; white-space: nowrap; }
.upload-knoepfe .knopf[disabled] { opacity: .55; cursor: default; }
.upload-exportpfad {
  font: 600 var(--schrift-xs)/1.5 Mulish;
  color: var(--grau);
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed rgba(20,83,107,.12);
}
.upload-exportpfad .pfad { font-weight: 700; color: var(--petrol); }

/* ===================== Dialoge (Passwort, Benutzerverwaltung) ===================== */

.dialog-schleier {
  position: fixed;
  inset: 0;
  background: rgba(20,40,50,.4);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dfade .2s ease;
}
.dialog {
  background: #fff;
  border-radius: 18px;
  padding: 24px 26px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 14px 36px rgba(20,40,50,.22);
}
.dialog.breit { max-width: 620px; }
/* Ladezustand im Dialog (Punkt 29), bis die Daten da sind. */
.dialog .upload-laedt { margin-top: 14px; }
.dialog h2 { margin: 0 0 4px; font: 800 17px Poppins, sans-serif; }
.dialog .unter { margin: 0 0 16px; font: 400 var(--schrift-l) Mulish; color: var(--grau); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog label { display: flex; flex-direction: column; gap: 5px; font: 700 var(--schrift-m) Mulish; color: var(--petrol); }
/* Abschnittsüberschrift im Einstellungsdialog (Sitzung 9 Teil B: „API / Tokens"), dieselbe
   Anmutung wie .drawer-ueberschrift, mit einer Trennlinie darüber. */
.einst-abschnitt {
  font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; text-transform: uppercase; color: var(--grau);
  margin: 20px 0 2px; padding-top: 16px; border-top: 1px solid rgba(20,83,107,.12);
}
.einst-entfernen { align-self: flex-start; padding: 5px 10px; font-size: var(--schrift-s); margin-top: 2px; }
.dialog input, .dialog select {
  font: 600 13.5px Mulish;
  color: var(--tinte);
  border: 1px solid rgba(20,83,107,.2);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  background: #fff;
}
.dialog input:focus, .dialog select:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(45,170,225,.15); }
.dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.knopf {
  font: 800 var(--schrift-l) Mulish;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
}
.knopf.primaer { color: #fff; background: var(--blau); }
.knopf.primaer:hover { background: var(--petrol); }
.knopf.leise { color: var(--petrol); background: var(--eis); }
.knopf.leise:hover { background: #DDEFF9; }
.dialog .fehler { min-height: 0; }
.dialog .ok { margin: 0; font: 700 var(--schrift-l) Mulish; color: var(--gruen-text); }

/* Benutzerverwaltung */
.bv-liste { display: flex; flex-direction: column; margin-bottom: 16px; }
.bv-zeile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20,83,107,.07);
}
.bv-name { font: 700 var(--schrift-l) Mulish; }
.bv-name .benutzername { font: 400 var(--schrift-s) Mulish; color: var(--grau); }
.bv-zeile.inaktiv .bv-name { opacity: .45; }
.bv-rolle { font: 600 var(--schrift-xs) Mulish; color: var(--petrol); background: var(--eis); padding: 3px 8px; border-radius: 99px; }
.bv-aktionen { display: flex; gap: 6px; }
.bv-aktionen button {
  font: 700 var(--schrift-xs) Mulish;
  color: var(--petrol);
  background: var(--eis);
  border: none;
  border-radius: 8px;
  padding: 5px 9px;
  cursor: pointer;
}
.bv-aktionen button:hover { background: #DDEFF9; }
.bv-neu-titel { font: 700 var(--schrift-s) Mulish; letter-spacing: .08em; color: var(--grau); margin: 4px 0 10px; }
.bv-rolle.ohne { color: var(--rot); background: var(--rot-hell); }

/* Benutzer & Rollen (Rechtesystem, 15.10.2026): Reiter, Rollenleiste, Rechte-Tafel. */
.dialog.verwaltung { max-width: 760px; }
.vw-reiter { margin-bottom: 16px; align-self: flex-start; display: inline-flex; }
.vw-reiter button { white-space: nowrap; }
.vw-rollen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vw-rolle {
  font: 700 var(--schrift-m) Mulish; color: var(--petrol); background: var(--eis);
  border: 1px solid transparent; border-radius: 99px; padding: 6px 12px; cursor: pointer;
}
.vw-rolle span { font-weight: 400; color: var(--grau); margin-left: 4px; }
.vw-rolle.aktiv { color: #fff; background: var(--petrol); }
.vw-rolle.aktiv span { color: #CFE6F2; }
.vw-rolle.neu { background: #fff; border-color: rgba(20,83,107,.25); }
.dialog form.vw-rolle-kopf { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; align-items: end; }
.vw-rolle-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; }
.knopf.leise.rot { color: var(--rot); background: var(--rot-hell); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.vw-tafel-rahmen { overflow-x: auto; margin-top: 8px; }
.vw-tafel { width: 100%; border-collapse: collapse; font: 400 var(--schrift-l) Mulish; }
.vw-tafel thead th {
  font: 700 var(--schrift-xs) Mulish; letter-spacing: .06em; text-transform: uppercase; color: var(--grau);
  text-align: center; padding: 6px 8px; border-bottom: 1px solid rgba(20,83,107,.15);
}
.vw-tafel thead th:first-child { text-align: left; }
.vw-tafel tbody th[scope="row"] { text-align: left; font: 700 var(--schrift-l) Mulish; color: var(--tinte); padding: 8px 8px 8px 0; border-bottom: 1px solid rgba(20,83,107,.07); }
.vw-tafel tbody th small { display: block; font: 400 var(--schrift-s) Mulish; color: var(--grau); margin-top: 2px; }
.vw-tafel td { text-align: center; padding: 6px 8px; border-bottom: 1px solid rgba(20,83,107,.07); }
.vw-tafel td.nicht { color: #A9B4B9; cursor: help; }
.vw-tafel .vw-gruppe th {
  text-align: left; font: 700 var(--schrift-xs) Mulish; letter-spacing: .08em; text-transform: uppercase;
  color: var(--petrol); background: #F4FAFD; padding: 6px 8px;
}
.dialog label.vw-haken { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font: 400 10.5px Mulish; color: var(--grau); }
.vw-haken input { width: 17px; height: 17px; accent-color: var(--blau); cursor: pointer; }
.vw-haken input:disabled { cursor: not-allowed; }
.vw-erklaerung { font: 400 var(--schrift-s)/1.5 Mulish; color: var(--grau); margin: 10px 0 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohne-freigabe { padding: 18px 20px; font: 600 var(--schrift-xl) Mulish; color: var(--petrol); }

/* ===================== Schmale Fenster ===================== */

@media (max-width: 720px) {
  .kopf-zeile, .gruss, .flaeche { padding-left: 16px; padding-right: 16px; }
  .drawer { width: 100vw; max-width: 100vw; }
  .kuendigungen-block { border-left: none; padding-left: 0; }
}

/* Einstellungen-Dialog (Sitzung 6): leise Meta-Zeile unter dem Eingabefeld, wie .bv-name .benutzername. */
.einst-meta { font: 400 var(--schrift-s)/1.4 Mulish; color: var(--grau); }

/* Kurzmeldung unten rechts (Sitzung 8), für Fehler, die keinen Dialog rechtfertigen: ein
   Häkchen, das der Server nicht annahm, schnappt sonst still zurück und sieht wie ein
   Fehlklick aus. Über dem Drawer (z-index 60), damit sie auch bei offenem Drawer sichtbar ist. */
#meldung {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  max-width: 360px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--rot-hell);
  color: var(--rot);
  border: 1px solid rgba(196,71,47,.3);
  box-shadow: 0 6px 20px rgba(20,83,107,.16);
  font: 600 var(--schrift-l)/1.45 Mulish;
}
/* Neutrale Variante (Sitzung 9 Teil B): eine Erfolgsmeldung („14 Sätze abgerufen") im roten
   Fehlerkasten wäre die falsche Farbe. Blau wie .drawer-badge.blau, nicht grün, grün heißt im
   Projekt „besser als das Ziel", und abgerufen zu haben ist kein Ergebnis, sondern ein Vorgang. */
#meldung.gut { background: var(--eis); color: var(--petrol); border-color: rgba(20,83,107,.25); }