/* ─────────────────────────────────────────────────────────────────────────────
   dashboard.css — die Oberfläche des Mitarbeiter-Dashboards.

   Angelegt am 28.08.2026. Bis dahin hatte das Dashboard KEINE Stildatei: alles
   stand inline in den Komponenten. Das ist der Grund, warum es flacher wirkte
   als der Kommandostand — nicht die Farben, sondern die fehlenden Zustände.
   Hover, Tastatur-Fokus, Druckpunkt eines Knopfes und die Rücksicht auf
   „Bewegung reduzieren" lassen sich mit Inline-Styles gar nicht ausdrücken.

   ZURÜCKNEHMEN: die eine <link>-Zeile in app/index.html entfernen. Alles hier
   ist Aussehen, nichts davon trägt Funktion. Die Oberfläche sieht dann wieder
   aus wie vorher und arbeitet unverändert.

   Die Farbwerte kommen NICHT aus dieser Datei, sondern aus dem Theme des
   Kommandostands: UI.themeAnwenden() schreibt sie bei jedem Themenwechsel als
   CSS-Variablen an <html>. Damit gibt es weiterhin genau eine Farbquelle.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Rückfallwerte, falls die Variablen noch nicht gesetzt sind (heller Stand). */
  --ks-surface: #FFFFFF;
  --ks-surface2: #F5F5F5;
  --ks-surface3: #EEEEEE;
  --ks-border: #E4E4E4;
  --ks-border-strong: #C8C8C8;
  --ks-text: #111111;
  --ks-muted: rgba(17,17,17,0.58);
  --ks-muted-strong: rgba(17,17,17,0.78);
  --ks-accent: #2754C5;
  --ks-accent-ring: rgba(39,84,197,0.42);
  --ks-lightedge: 1px solid rgba(255,255,255,0.7);
  --ks-lift: 0 0 0 0.5px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.07), 0 12px 32px rgba(0,0,0,0.14);
  --ks-lift-hover: 0 0 0 1.5px var(--ks-accent-ring), 0 2px 4px rgba(0,0,0,0.07), 0 14px 36px rgba(0,0,0,0.16);
  --ks-shadow-card: 0 0 0 0.5px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.07);
  --ks-recessed: inset 0 1px 3px rgba(0,0,0,0.08);
  --ks-recessed-deep: inset 0 1px 4px rgba(0,0,0,0.15);
  --ks-knopf-auf: 0 2px 8px rgba(0,0,0,0.13), 0 1px 0 rgba(255,255,255,0.6);

  --ks-motion: 0.15s cubic-bezier(0.23, 1, 0.32, 1);
  --ks-motion-lang: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  --ks-r-sm: 4px; --ks-r-md: 6px; --ks-r-lg: 10px; --ks-r-xl: 14px;
}

/* ── Karten ──────────────────────────────────────────────────────────────────
   Drei Griffe, die der Kommandostand überall benutzt und das Dashboard bisher
   nirgends: helle Oberkante (die Lichtquelle sitzt oben), dreilagiger Schatten
   (die Karte liegt AUF der Fläche, nicht darin) und ein Hover, der sie anhebt. */
.ks-card {
  border-top: var(--ks-lightedge);
  box-shadow: var(--ks-lift);
  transition: transform var(--ks-motion), box-shadow var(--ks-motion);
}
.ks-card--klickbar { cursor: pointer; }
.ks-card--klickbar:hover,
.ks-card--klickbar:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ks-lift-hover);
}
.ks-card--klickbar:active { transform: translateY(-1px); }

/* Flache Nebenflächen — Hinweiskästen, Listenzeilen — sollen NICHT schweben. */
.ks-flach { box-shadow: var(--ks-shadow-card); border-top: none; }

/* ── Eingelassene Umschalter ─────────────────────────────────────────────────
   Das Detail, an dem man teure von billiger Oberfläche unterscheidet: die
   Wanne ist eingedrückt, der aktive Knopf liegt erhoben darin. Vorbild ist der
   Level-Filter des Kommandostands („Alle | Junior | Coach | Senior"). */
/* ENT-D53 Stufe 4 (29.09.2026) · die Reiterleiste nach `stilB`.
   Abstand 2 → 4 px, Knopf-Rundung 14 → 7, Polster 6px 14px → 7px 13px, und der
   erhobene Knopf traegt den EINLAGIGEN Schatten des Entwurfs (`schatten1`)
   statt des zweilagigen von vorher.

   ⚠️ DIE WANNE BLEIBT, und das ist eine bewusste Abweichung vom Entwurf.
   Die Nachtliste sagt, die Leiste sei „im Idiom sogar schon B (Wanne mit
   erhobenem Knopf)" — gelesen im Entwurf steht dort aber nur `leiste:"gap:4px"`,
   also gar keine Wanne. Sie hier zu entfernen waere mehr als die vier Werte,
   die der Auftrag auflistet, und sie traegt eine eigene Begruendung (siehe den
   Kasten darueber). Die Rundung der Wanne geht von 20 auf 10 px: Knopf 7 plus
   Polster 3 — eine Wanne, die runder ist als ihr Inhalt, sieht wie ein Fehler
   aus. */
/* ── Punkt 4 · DIE WANNE IST WEG (01.10.2026) ──────────────────────────────
 *
 * Stefan am 30.09.: „Das Menü oben entspricht ja dann auch gar nicht der neuen
 * Optik, oder sehe ich das falsch?" — Er sah es richtig.
 *
 * Im Entwurf (`_mockups/Feedback-Optik.html`, `stilB`) ist die Leiste NUR eine
 * Reihe mit 4 px Abstand: der gewaehlte Reiter ein flacher Knopf mit Schatten,
 * die uebrigen gedaempfter Text. Eine Wanne gibt es dort nicht.
 *
 * In der Nacht auf den 30.09. wurden die vier Werte gebaut, die die Liste
 * aufzaehlte (Polster 7/13, Rundung 7, Abstand 4, einlagiger Schatten) — die
 * Wanne blieb stehen, weil sie in der Aufzaehlung nicht vorkam. Das war zu
 * vorsichtig: Die Aufzaehlung beschrieb den KNOPF, nicht die LEISTE.
 *
 * ⚠️ `.ks-seg` traegt auch die UNTERREITER („Uebersicht / Mein Monatsabschluss
 * / Statistiken", der Zeitraum-Umschalter). Die aendern sich mit — gewollt,
 * und im Bericht genannt.
 */
.ks-seg {
  display: inline-flex;
  gap: 4px;
}
.ks-seg > button {
  border: 0;
  background: transparent;
  color: var(--ks-muted-strong);
  font-weight: 500;
  border-radius: 7px;
  padding: 7px 13px;
  transition: background var(--ks-motion), color var(--ks-motion),
              box-shadow var(--ks-motion), transform var(--ks-motion);
}
.ks-seg > button:hover { color: var(--ks-text); }
.ks-seg > button[aria-pressed="true"] {
  background: var(--ks-surface);
  color: var(--ks-text);
  font-weight: 600;
  box-shadow: var(--ks-knopf-auf);
  transform: translateY(-0.5px);
  cursor: default;
}

/* Die Reiterleiste ist derselbe Gedanke, nur eckiger. */
.ks-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ks-r-lg);
  background: var(--ks-surface3);
  box-shadow: var(--ks-recessed-deep);
  flex-wrap: wrap;
  /* Die Wanne ist so breit wie die Reiter, nicht wie die Seite. Über die volle
     Breite gezogen sähe sie aus wie ein Balken, nicht wie ein Umschalter. */
  width: max-content;
  max-width: 100%;
}
.ks-tabs > button {
  border: 0;
  background: transparent;
  color: var(--ks-muted-strong);
  font-weight: 500;
  border-radius: var(--ks-r-md);
  padding: 7px 14px;
  transition: background var(--ks-motion), color var(--ks-motion),
              box-shadow var(--ks-motion), transform var(--ks-motion);
}
.ks-tabs > button:hover { color: var(--ks-text); }
.ks-tabs > button[aria-selected="true"],
.ks-tabs > button[aria-pressed="true"] {
  background: var(--ks-surface);
  color: var(--ks-text);
  font-weight: 700;
  box-shadow: var(--ks-knopf-auf);
  transform: translateY(-0.5px);
}

/* ── Eingelassene Flächen: Rinnen und Verlaufs-Panels ──────────────────────── */
.ks-rinne {
  background: var(--ks-surface3);
  box-shadow: var(--ks-recessed);
  border-radius: 999px;
  overflow: hidden;
}
.ks-rinne > .ks-fuellung { transition: width var(--ks-motion-lang); }

.ks-verlauf {
  background: var(--ks-surface2);
  border-radius: var(--ks-r-lg);
  box-shadow: var(--ks-recessed);
}

/* Trendpillen liegen in der Fläche, nicht darauf. */
.ks-pille-eingelassen { box-shadow: var(--ks-recessed); }

/* ── Tabellenzeilen ──────────────────────────────────────────────────────────
   Eine Zeile, die sich anfassen lässt, muss auf den Zeiger reagieren. */
.ks-zeile { transition: background var(--ks-motion); }
.ks-zeile:hover { background: var(--ks-surface2); }
.ks-zeile--klickbar { cursor: pointer; }

/* ── Festgehaltene Spalten in wischbaren Listen ──────────────────────────────
   Auf dem Handy wandern die Zahlenspalten unter dem Namen weg; Name (und
   Bild) bleiben stehen. Damit beim Wischen nichts sichtbar durch sie
   hindurchzieht, brauchen sie einen Grund — und dieser Grund muss beim Zeigen
   mit der Maus MITGEHEN. Stünde er als fester Wert im Stil-Objekt der Zelle,
   bliebe die Namensspalte als heller Block stehen, während der Rest der Zeile
   sich färbt. Genau deshalb steht er hier und nicht in `UI.festeSpalte`.
   Der Rest der Mechanik (Position, Abstände, Kante) steht dort. */
.ks-fest { background: var(--ks-surface); }
.ks-zeile:hover .ks-fest { background: var(--ks-surface2); }

/* Der linke Innenabstand der Karte gehört keiner Spalte, wandert beim Wischen
   aber mit: ein schmaler Streifen, durch den der Inhalt durchzieht. Ein
   Schatten deckt ihn zu, ohne am Layout etwas zu ändern (ein negativer
   Außenabstand plus gleich großer Innenabstand schöbe die Zelle nach rechts
   aus dem Bild — am 24.09.2026 genau so passiert und zurückgebaut).
   12 px ist `TOKENS.space.md`, der Innenabstand der Karte — hier als Zahl,
   weil CSS die Tabelle der Maße nicht lesen kann. Ändert sich das Maß dort,
   gehört es hier nachgezogen. */
.ks-fest--deckel { box-shadow: -12px 0 0 0 var(--ks-surface); }
.ks-zeile:hover .ks-fest--deckel { box-shadow: -12px 0 0 0 var(--ks-surface2); }

/* Die Kante zum wandernden Teil. */
.ks-fest--kante { box-shadow: 6px 0 6px -6px rgba(0, 0, 0, 0.22); }
.ks-fest--deckel.ks-fest--kante {
  box-shadow: -12px 0 0 0 var(--ks-surface), 6px 0 6px -6px rgba(0, 0, 0, 0.22);
}
.ks-zeile:hover .ks-fest--deckel.ks-fest--kante {
  box-shadow: -12px 0 0 0 var(--ks-surface2), 6px 0 6px -6px rgba(0, 0, 0, 0.22);
}

/* ── Knöpfe und Eingaben ─────────────────────────────────────────────────────
   Ein Knopf ohne Druckpunkt fühlt sich an wie ein Bild von einem Knopf. */
button, [role="button"] { transition: filter var(--ks-motion), transform var(--ks-motion); }
button:not(:disabled):hover { filter: brightness(0.97); }
button:not(:disabled):active { transform: translateY(0.5px); filter: brightness(0.94); }
button:disabled { cursor: not-allowed; }

input, select, textarea { transition: box-shadow var(--ks-motion), border-color var(--ks-motion); }
input:focus, select:focus, textarea:focus { outline: none; }

/* Tastaturbedienung sichtbar machen — vorher war der Ring die Textfarbe. */
:focus-visible {
  outline: 2px solid var(--ks-accent);
  outline-offset: 2px;
  border-radius: var(--ks-r-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ks-recessed), 0 0 0 3px var(--ks-accent-ring);
}

/* ── Wer Bewegung reduziert haben will, bekommt keine ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .ks-card--klickbar:hover { transform: none; }
}

/* ── Farbschema-Wahl ─────────────────────────────────────────────────────────
   Sechs Kreise in einer eingelassenen Wanne. Der gewählte sitzt erhoben darin
   und trägt einen Akzentring — man sieht auf einen Blick, welcher gilt, ohne
   dass die anderen verschwinden. */
.ks-farbwahl {
  background: var(--ks-surface3);
  box-shadow: var(--ks-recessed-deep);
}
.ks-farbknopf {
  transition: transform var(--ks-motion), box-shadow var(--ks-motion);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.ks-farbknopf:hover { transform: scale(1.08); }
.ks-farbknopf--an {
  transform: translateY(-0.5px) scale(1.06);
  box-shadow: 0 0 0 2px var(--ks-accent), var(--ks-knopf-auf);
}
.ks-farbknopf--an:hover { transform: translateY(-0.5px) scale(1.06); }

/* ── Detailansicht: Karte links, Inhalt rechts ──────────────────────────────
   Auf schmalen Fenstern untereinander, ab 900 px nebeneinander — die Karte
   links behält dabei eine feste, ruhige Breite. */
.ks-detailraster { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .ks-detailraster { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; }
}

/* ── Kalender ────────────────────────────────────────────────────────────────
   Monat links, Tagesliste rechts. Unter 1000 px untereinander — auf dem Handy
   ist der Monat schmal genug, dass sieben Spalten noch lesbar bleiben. */
/* `minmax(0, 1fr)` und nicht `1fr`: eine Rasterspur mit `1fr` kann nicht
   schmaler werden als der Inhalt der Karte darin. Auf dem Handy hiess das,
   der Monatskalender zog die Seite auf. (25.09.2026, gemessen) */
.ks-kalraster { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
  .ks-kalraster { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; }
}
.ks-kaltag { transition: border-color var(--ks-motion), background var(--ks-motion), transform var(--ks-motion); }
.ks-kaltag:hover { border-color: var(--ks-border-strong); transform: translateY(-1px); }
.ks-kaltag--gewaehlt { box-shadow: 0 0 0 1px var(--ks-accent); }

.ks-minitag { transition: background var(--ks-motion), color var(--ks-motion); }
.ks-minitag:hover { background: var(--ks-surface3); }
.ks-minitag--heute:hover { background: var(--ks-accent); filter: brightness(1.05); }

/* ── Dialog ──────────────────────────────────────────────────────────────────
   Der einzige Ort im Dashboard, an dem etwas über der Seite liegt. Deshalb
   dunkler Grund, damit klar ist: hier ist gerade nur eine Sache zu tun. */
.ks-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.ks-dialog {
  background: var(--ks-surface);
  border-top: var(--ks-lightedge);
  border-radius: var(--ks-r-xl);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10), 0 32px 64px rgba(0,0,0,.14);
  width: 100%; max-width: 520px;
  animation: ks-dialog-auf 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes ks-dialog-auf {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.ks-dialog-kopf   { padding: 18px 22px 14px; border-bottom: 1px solid var(--ks-border); }
.ks-dialog-koerper{ padding: 18px 22px 4px; }
.ks-dialog-fuss   {
  padding: 14px 22px; background: var(--ks-surface2);
  border-top: 1px solid var(--ks-border);
  border-radius: 0 0 var(--ks-r-xl) var(--ks-r-xl);
  display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
}

/* Der Mini-Kalender in der Kopfzeile hängt in einem Feld, das aufklappt. */
.ks-minikal-feld {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  background: var(--ks-surface); border-radius: var(--ks-r-lg);
  border-top: var(--ks-lightedge);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.12);
  padding: 14px;
}

/* Das Coaching-Detail braucht mehr Fläche als ein Formular: zwei Diagramme
   nebeneinander lesen sich nur, wenn die Balken breit genug sind. */
.ks-dialog--breit { max-width: 780px; }

/* ── Der Optik-Fragebogen: die Reiterleiste bei Frage 1 (CS-FRAGE, 11.09.2026)
   Sie pulsiert leise, SOLANGE niemand getippt hat — danach hoert sie auf. Ein
   Hinweis, der bleibt, nachdem man ihn verstanden hat, ist Laerm.

   Warum das hier steht und nicht als Inline-Stil: Keyframes gibt es in einem
   style-Attribut nicht. Und warum `animation-name: none` unten ausdruecklich
   noch einmal: Der globale Block fuer `prefers-reduced-motion` weiter oben
   setzt nur Dauer und Wiederholung — der NAME der Animation bliebe stehen, und
   genau den misst der Pruefpunkt (FB16). Ein Punkt, der ein Merkmal statt der
   Sache misst, ist blind; hier ist der Name die Sache. */
.ks-optik-leiste--stups {
  animation: ks-optik-stups 1.9s ease-in-out infinite;
}
@keyframes ks-optik-stups {
  0%, 100% { box-shadow: 0 0 0 0 var(--ks-accent-ring); }
  50%      { box-shadow: 0 0 0 4px var(--ks-accent-ring); }
}
@media (prefers-reduced-motion: reduce) {
  /* Kein Pulsieren — aber der Hinweis geht nicht verloren: Statt der Bewegung
     eine ruhige farbige Umrandung. */
  .ks-optik-leiste--stups {
    animation-name: none;
    box-shadow: 0 0 0 2px var(--ks-accent-ring);
  }
}