/*
 * Backoffice — Farbwelt nach Wunsch von Aleks (Fragebogen 29.07.2026):
 * schwarzer Hintergrund, weisse Schrift, farbige Icons in Grün / Orange /
 * Hellblau. Die drei Akzente sind gegen den dunklen Grund auf Kontrast und
 * Farbfehlsichtigkeit geprüft (alle Werte über den Schwellen).
 */

:root {
  color-scheme: dark;

  --plane: #0b0c0e;
  --surface: #16181c;
  --surface-2: #1e2126;
  --surface-3: #262a31;
  --linie: rgba(255, 255, 255, 0.10);
  --linie-stark: rgba(255, 255, 255, 0.18);

  --text: #ffffff;
  --text-2: #a8adb8;
  --text-3: #7c828e;

  /* geprüfte Akzente */
  --blau: #3987e5;
  --orange: #d95926;
  --gruen: #199e70;

  /* Status — fest, nie als Seriefarbe verwenden */
  --gut: #0ca30c;
  --warnung: #fab219;
  --ernst: #ec835a;
  --kritisch: #d03b3b;

  /*
   * Schrift auf einer **farbigen Fläche** — Jahresband (F / K) und Meldezahl.
   * Ob Weiss oder Tinte trägt, hängt vom Ton des Designs ab: die dunklen
   * Designs setzen helle Akzente (weisses «F» auf --blau erreicht dort nur
   * 1,77 bis 2,72), die hellen Designs setzen satte. Darum steht die
   * Schriftfarbe als eigene Marke und nicht fest im Baustein; die vier hellen
   * Designs stellen sie auf Weiss. Nachgemessen in allen elf Designs: mit
   * dieser Wahl liegt jede Stelle über 4,5:1.
   */
  --auf-akzent: #0c0d0f;

  /* Diagrammfarben. Eigene Marken, damit ein Design die Diagramme umfärben
     kann, ohne die Status- und Akzentfarben mitzuziehen. */
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;

  --radius: 10px;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Träger hinter dem Logo. Standard ist keiner: das «Glo» im Logo hat eine
     helle Kontur und steht auf hellem wie dunklem Grund. Ein Design, das
     bewusst ein Schild will, setzt diese vier Marken — dann folgt der Träger
     dem Design, statt als weisser Kasten darin zu kleben. */
  --logo-flaeche: transparent;
  --logo-rand: transparent;
  --logo-radius: var(--radius);
  --logo-polster: 0px;

  /* Breite der Spur, die der Inhalt rechts für den festen Rückmelde-Knopf
     freihält: 56 px Knopf + 22 px Abstand + 14 px Luft. */
  --fb-spur: 92px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--blau); }

/* Grundgrösse für alle eingebetteten Icons; Sonderfälle überschreiben unten.
   Diagramm-SVGs tragen role="img" und bleiben davon unberührt. */
svg[aria-hidden] { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

.mono { font-variant-numeric: tabular-nums; }
.leise { color: var(--text-2); }
.klein { font-size: 13px; }

/* ---------------------------------------------------------------- Anmeldung */
.anmeldung {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.anmeldung__karte {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.anmeldung__logo {
  width: 168px;
  margin-bottom: 28px;
  background: var(--logo-flaeche);
  border: 1px solid var(--logo-rand);
  border-radius: var(--logo-radius);
  padding: var(--logo-polster);
}
.anmeldung__feld {
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
}
.anmeldung__feld:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.anmeldung__hinweis {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ------------------------------------------------------------------- Gerüst */
.huelle { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; }

.seitenleiste {
  background: var(--surface);
  border-right: 1px solid var(--linie);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  min-width: 0;
}
/* Das Logo führt zur Übersicht — dafür muss es ein Knopf sein, nicht nur ein Bild. */
.seitenleiste__heim {
  background: var(--logo-flaeche);
  border: 1px solid var(--logo-rand);
  border-radius: var(--logo-radius);
  padding: var(--logo-polster);
  margin-bottom: 18px;
  cursor: pointer;
  align-self: stretch;
  max-width: 100%;
  line-height: 0;
}
.seitenleiste__heim:hover { border-color: var(--linie-stark); }
.seitenleiste__heim:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* max-width, damit ein Design die Breite auf `auto` stellen darf, ohne dass
   das Bild in seiner Originalgrösse aus der Leiste läuft. */
.seitenleiste__logo { width: 128px; max-width: 100%; margin: 4px 8px; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: var(--radius);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14.5px;
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.nav:hover { background: var(--surface-2); color: var(--text); }
.nav--aktiv { background: var(--surface-3); color: var(--text); border-color: var(--linie); }
.nav svg { width: 19px; height: 19px; flex: none; }
.nav__zahl {
  margin-left: auto;
  font-size: 12px;
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: 20px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}
.nav--aktiv .nav__zahl { background: rgba(255, 255, 255, 0.14); color: var(--text); }

.seitenleiste__fuss {
  margin-top: auto;
  padding: 12px 11px 4px;
  border-top: 1px solid var(--linie);
  font-size: 12.5px;
  color: var(--text-3);
}

/* `min-width: 0`: Rasterzellen wachsen sonst auf die Mindestbreite ihres
   Inhalts. Eine breite Zahlentabelle schöbe damit die ganze Seite seitlich
   hinaus, statt in ihrer Karte zu rollen. */
.inhalt { padding: 24px 30px 96px; max-width: 1360px; min-width: 0; }
/*
 * Rechts bleibt eine **Spur frei**: dort schwebt der Rückmelde-Knopf (`.fb`,
 * fest unten rechts). Ohne sie legt er sich je nach Rollstand auf eine
 * Design-Kachel, den Knopf «Alle anzeigen» oder eine Tabellenzelle — gemessen
 * 27 bis 48 px Überdeckung.
 *
 * Die Spur steht als eigene Regel **mit `body` davor**: mehrere Designs setzen
 * das Polster von `.inhalt` neu und würden sie sonst mitwegkürzen. Ihre Breite
 * ist Knopf plus Abstand plus Luft und liegt in `--fb-spur`, damit schmale
 * Fenster mit dem kleineren Knopf auch die schmalere Spur bekommen.
 */
body .inhalt { padding-right: var(--fb-spur); }

.kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.kopf__titel { display: flex; flex-direction: column; gap: 3px; }

/* ------------------------------------------------------------------ Bausteine */
.karte {
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 18px 20px;
}
.karte--hervor {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.18);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* `min-width: 0` an den Zellen: sonst wächst eine Rasterspalte auf die
   Mindestbreite ihres Inhalts — eine rollende Tabelle darin schöbe dann die
   ganze Seite seitlich hinaus, statt in ihrer Karte zu rollen. */
.raster { display: grid; gap: 16px; }
.raster > * { min-width: 0; }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .raster--3, .raster--2 { grid-template-columns: 1fr; }
}

.kachel { display: flex; flex-direction: column; gap: 5px; }
.kachel--klickbar {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.kachel--klickbar:hover { background: var(--surface-2); border-color: var(--linie-stark); }
.kachel--klickbar:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.kachel__pfeil { margin-left: auto; color: var(--text-3); transition: color 0.12s, transform 0.12s; }
.kachel--klickbar:hover .kachel__pfeil { color: var(--text); transform: translateX(2px); }
.kachel__wert { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kachel__bez { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 7px; }
.kachel__bez svg { width: 15px; height: 15px; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--linie-stark);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.knopf:hover { background: var(--surface-3); }
.knopf svg { width: 16px; height: 16px; }
.knopf--haupt { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf--haupt:hover { background: #4d94e9; }
.knopf--klein { padding: 5px 10px; font-size: 13px; }
/* Löschen ist die einzige Tat, die etwas endgültig entfernt — sie trägt als
   einzige die kritische Farbe. Dieselbe Marke wie am iPad
   (`werkstatt-terminal/css/app.css`).

   Die Schrift nimmt `--auf-akzent` und kein festes Weiss: `--kritisch` ist in
   den dunklen Designs ein helles Rot und in den hellen ein sattes — weisse
   Schrift träfe damit nur die Hälfte. Es ist dasselbe geprüfte Paar wie bei
   `.plakette--voll.p-kritisch` weiter unten.

   **Doppelter Wähler mit Absicht:** die Designs überschreiben `.knopf` und
   `.knopf:hover` und werden nach dieser Datei geladen. Bei gleicher Stärke
   gewönne dort der Hintergrund des Designs, und der rote Knopf wäre in acht
   von elf Designs grau. `.knopf--haupt` löst das anders — jedes Design
   schreibt es einzeln nach —; hier steht die Regel lieber an einer Stelle. */
.knopf.knopf--rot { background: var(--kritisch); border-color: transparent; color: var(--auf-akzent); }
.knopf.knopf--rot:hover { background: var(--kritisch); filter: brightness(1.12); }
/* Ein Weg, der beim Kunden nicht hinterlegt ist, wird nicht angeboten — der
   Knopf bleibt sichtbar, damit klar ist, was fehlt, aber er löst nichts aus. */
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }
.knopf[disabled]:hover { background: var(--surface-2); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px;
  border-radius: 20px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
/* Chips tragen manchmal ein Icon und eine Nebenangabe (Weg + Kontakt im
   Dialog «Kunde informieren») — darum als Flex-Reihe. */
.chip { display: inline-flex; align-items: center; gap: 7px; }
.chip svg { width: 15px; height: 15px; }
.chip:hover { border-color: var(--linie-stark); color: var(--text); }
.chip--aktiv { background: var(--surface-3); color: var(--text); border-color: var(--linie-stark); }

/* Status-Plakette: nie nur Farbe — immer Punkt + Wort */
.plakette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  white-space: nowrap;
}
.plakette::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.p-blau { color: var(--blau); }
.p-orange { color: var(--ernst); }
.p-gruen { color: var(--gut); }
.p-grau { color: var(--text-3); }
.p-warnung { color: var(--warnung); }
.p-kritisch { color: var(--kritisch); }

/* Dringlichkeit: **gefüllt** statt nur eingefärbt — die einzige Plakette, die
   das darf. Sie beantwortet die erste Frage des Chefs («was eilt?») und stand
   als blasser Punkt neben fünf gleich blassen Statuspunkten in der Zeile. Die
   Statusplaketten bleiben, wie sie sind: zwei gefüllte Pillen nebeneinander in
   derselben Zeile wären wieder keine Auszeichnung.

   Der Punkt entfällt — die Fläche ist der Farbträger, das Wort steht dabei.
   Die Schrift nimmt `--auf-akzent`: Tinte in den hellen Designs, Weiss in den
   dunklen. Farbe und Schrift stehen darum am **zusammengesetzten** Wähler,
   sonst überschreibt ein Design mit eigener `.p-*`-Regel (siehe `weich.css`)
   die Schriftfarbe und schriebe Ton auf Ton. */
.plakette--voll {
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 600;
}
.plakette--voll::before { display: none; }
.plakette--voll.p-kritisch { background: var(--kritisch); color: var(--auf-akzent); }
.plakette--voll.p-orange { background: var(--ernst); color: var(--auf-akzent); }
.plakette--voll.p-gruen { background: var(--gut); color: var(--auf-akzent); }

/* ------------------------------------------------------------------- Tabelle */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle td { padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr:hover { background: var(--surface-2); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle .r { text-align: right; font-variant-numeric: tabular-nums; }
.tabelle--klickbar tbody tr { cursor: pointer; }
/* Seit die Mitarbeitertabelle eine Spalte «Wochenstunden» mehr trägt, brächen
   die Namen sonst mitten im Vornamen um. */
.tabelle--namen td:first-child { white-space: nowrap; }
.tabelle__leer { padding: 28px 12px; color: var(--text-3); text-align: center; }

/* «Hier ist noch nichts» als ruhige Fläche statt als leerer Bereich — etwa das
   fehlende Annahmeprotokoll: der Satz muss erklären, wann es kommt. */
.leerfeld {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px 16px;
}

/* Breite Zahlentabellen (Überzeit, Zeit pro Arbeit) rollen seitlich in ihrer
   Karte, statt die Spalten mitten im Wort umbrechen zu lassen. */
.tabelle-rollt { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.tabelle-rollt > .tabelle { min-width: 780px; }
/* Für Tabellen in halbbreiten Karten (Stammdaten): dieselbe Machart, aber ein
   Mindestmass, das dort noch hineinpasst. */
.tabelle-rollt--schmal > .tabelle { min-width: 520px; }
/* Und für die schmalen Tabellen in halber Karte («Jetzt in der Werkstatt»,
   «Erfasste Zeit»): vier bis fünf kurze Spalten passen auf 1180 px noch in die
   halbe Breite. Mit 520 px rollten sie dort, obwohl sie es nicht müssten —
   ein Rollhinweis über einer Tabelle, die hineinpasst, ist schlimmer als keiner. */
.tabelle-rollt--eng > .tabelle { min-width: 360px; }
/* Dass eine Tabelle seitlich weitergeht, muss dastehen — ein abgeschnittener
   Rand allein sagt es niemandem. Gezeigt wird der Satz nur dort, wo wirklich
   etwas ausserhalb steht; das entscheidet `rollhinweise()` nach dem Zeichnen. */
.rollhinweis { margin-top: 10px; }

/* Vorzeichenfarbe zum Saldo. Sie kommt immer nur ZUSÄTZLICH zum Wort darunter. */
.saldo-plus { color: var(--gut); font-weight: 600; }
.saldo-minus { color: var(--warnung); font-weight: 600; }

.zeile-warnung { background: rgba(250, 178, 25, 0.07); }
.zeile-warnung:hover { background: rgba(250, 178, 25, 0.12); }

/* In «Zu prüfen» führen die meisten Zeilen weiter — die Ferienzeile nicht:
   dort wird in der Zeile selbst entschieden. Also kein Zeigefinger. */
.tabelle--klickbar tbody tr.zeile-still { cursor: default; }
.zeilenknoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ----------------------------------------------------------------- Regler */

/* Eine Einstellung je Block: links was sie tut, rechts der Zustand. */
.regler { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.regler__text { min-width: 0; }
.regler__bez { font-size: 14.5px; font-weight: 600; }
.regler__wert { font-size: 26px; font-weight: 600; line-height: 1.1; flex: none; }

/* Schalter: Zustand steht als Wort daneben, die Farbe kommt nur dazu. */
.schalter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 4px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.schalter:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: var(--radius); }
.schalter__lauf {
  width: 52px; height: 30px;
  flex: none;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--linie-stark);
  display: flex;
  align-items: center;
  padding: 3px;
  transition: background 0.14s, border-color 0.14s;
}
.schalter__knauf {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.14s, background 0.14s;
}
.schalter__wort { font-size: 14px; color: var(--text-2); min-width: 26px; }
.schalter--an .schalter__lauf { background: var(--gruen); border-color: var(--gruen); }
.schalter--an .schalter__knauf { transform: translateX(22px); background: #fff; }
.schalter--an .schalter__wort { color: var(--gut); font-weight: 600; }

/* Kleine Ausführung für Tabellenzeilen (Arztzeugnis). Das Wort daneben bleibt —
   ein Schalter allein sagt nicht, wofür er steht. */
.schalter--klein { gap: 8px; padding: 2px; }
.schalter--klein .schalter__lauf { width: 38px; height: 22px; padding: 2px; }
.schalter--klein .schalter__knauf { width: 16px; height: 16px; }
.schalter--klein.schalter--an .schalter__knauf { transform: translateX(16px); }
.schalter--klein .schalter__wort { font-size: 13px; min-width: 0; white-space: nowrap; }

/* Kontrollkästchen mit Beschriftung (Marketingeinwilligung am
   Annahmeprotokoll). Kein Wort daneben wie beim Schalter: das Kästchen zeigt
   den Haken selbst, der Zustand hängt also nicht an der Farbe. Die ganze
   Beschriftung ist Klickfläche — ein Satz mit einem 16-px-Ziel davor wäre am
   Bildschirm des Chefs eine Zumutung. */
.haken {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.haken:hover { border-color: var(--linie-stark); }
.haken__kasten {
  width: 18px; height: 18px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--blau);
  cursor: pointer;
}
.haken:focus-within { outline: 2px solid var(--blau); outline-offset: 2px; }

/* Schieber für den Vorlauf. Der Wert steht als Zahl darüber — der Strich
   allein sagt nichts. */
.schieber {
  width: 100%;
  margin: 14px 0 4px;
  accent-color: var(--blau);
  height: 26px;
  cursor: pointer;
}
.schieber:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.schieber__enden { display: flex; justify-content: space-between; }

/* --------------------------------------------------------------- Läuft-noch */
.laeuft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gut);
  font-variant-numeric: tabular-nums;
}
.laeuft__punkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gut);
  animation: puls 2s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .laeuft__punkt { animation: none; } }

/* ------------------------------------------------------------------ Diagramm */
.diagramm { width: 100%; overflow-x: auto; }
.diagramm svg { display: block; }
/* Diagramme, die die ganze Kartenbreite einnehmen: Die Höhe soll mitwachsen
   und mitschrumpfen. Sonst bleibt über und unter dem Bild Leerraum stehen,
   sobald es schmaler dargestellt wird als sein Koordinatenraum breit ist. */
.breitbild .diagramm svg { height: auto; }
.achse { fill: var(--text-3); font-size: 11.5px; }
.gitter { stroke: #2c2f34; stroke-width: 1; }
.grundlinie { stroke: #383c43; stroke-width: 1; }
.balken { transition: opacity 0.12s; }
.balken:hover { opacity: 0.78; }
.wertlabel { fill: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }

.legende { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.legende__eintrag { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.legende__punkt { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.hinweisblase {
  position: fixed;
  z-index: 60;
  background: var(--surface-3);
  border: 1px solid var(--linie-stark);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.hinweisblase--an { opacity: 1; }

/* -------------------------------------------------------------------- Dialog */
.schleier {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
}
.dialog {
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  padding: 24px 26px;
}
/* Für den Nachrichtentext braucht es mehr Platz als für zwei Uhrzeiten. */
.dialog--breit { width: min(660px, 100%); }
.dialog textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.dialog__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.dialog__schliessen {
  background: none; border: none; color: var(--text-3);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.dialog__schliessen:hover { color: var(--text); }
.dialog__fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* Die zwei Listen im Dialog «Alle Spuren entfernen»: was verschwindet, was
   bleibt. Statt Punkten trägt jede Zeile ein Zeichen — × für das, was geht,
   ✓ für das, was bleibt. Zeichen und Farbe sagen dasselbe, und keines von
   beiden sagt es allein: die Überschrift über der Liste schreibt es aus. */
.spuren { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; color: var(--text-2); }
.spuren li { display: flex; gap: 9px; padding: 5px 0; line-height: 1.5; }
.spuren li::before { flex: none; font-weight: 700; }
.spuren--weg li::before { content: "\00d7"; color: var(--kritisch); }
.spuren--bleibt li::before { content: "\2713"; color: var(--gut); }
.spuren strong, .spuren .mono { color: var(--text); }

/* Die stille Gefahrenzeile am Fuss eines Auftrags. Nur ein rötlicher Rand —
   ein voll eingefärbter Kasten hätte den Auftrag zu einem Warnfall gemacht,
   obwohl die Übergabe ein gewöhnlicher Vorgang ist. Doppelter Wähler aus
   demselben Grund wie beim roten Knopf: die Designs schreiben `.karte` nach
   dieser Datei und gewönnen sonst mit ihrem eigenen Rand. */
.karte.gefahr { border-color: rgba(208, 59, 59, 0.30); }
.gefahr__reihe { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }

.feld { display: block; margin-bottom: 14px; }
.feld__bez { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* ----------------------------------------------------------------- Details */
.paar { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.paar:last-child { border-bottom: none; }
.paar__bez { color: var(--text-2); }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.foto {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.foto svg { width: 22px; height: 22px; }

.unterschrift {
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px 14px;
}

.fortschritt { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.fortschritt__wert { height: 100%; border-radius: 4px; background: var(--gruen); }

.meldung {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface-3);
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 70;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.meldung--an { opacity: 1; transform: translateX(-50%) translateY(0); }

.demo-band {
  background: rgba(57, 135, 229, 0.12);
  border: 1px solid rgba(57, 135, 229, 0.35);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 20px;
}
.demo-band strong { color: var(--text); font-weight: 600; }

/* -------------------------------------------------------------- Designwahl */
.designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}

.design {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 12px 12px 15px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 14px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.design:hover { border-color: var(--linie-stark); transform: translateY(-2px); }
.design:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.design--aktiv { border-color: var(--blau); box-shadow: 0 0 0 2px rgba(57, 135, 229, 0.22); }

.design__name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}
.design__marke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--gut);
}
.design__marke svg { width: 13px; height: 13px; }
.design__text { font-size: 13px; color: var(--text-2); line-height: 1.45; }

/* Kleines Abbild der Oberfläche. Alle Farben kommen als --v-* von aussen,
   damit dieselbe Kachel jedes Design zeigen kann. */
.vorschau {
  display: flex;
  height: 132px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--v-grund);
  font-family: var(--v-schrift);
  pointer-events: none;
}
.vorschau__leiste {
  width: 52px;
  flex: none;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--v-flaeche);
  border-right: 1px solid var(--v-linie);
}
.vorschau__logo {
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--v-a1), var(--v-a2) 55%, var(--v-a3));
  margin-bottom: 4px;
}
.vorschau__nav { height: 7px; border-radius: 3px; background: var(--v-linie); }
.vorschau__nav--aktiv { background: var(--v-a1); }

.vorschau__inhalt { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vorschau__reihe { display: flex; gap: 8px; }
.vorschau__kachel {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--v-radius);
  background: var(--v-flaeche);
  border: 1px solid var(--v-linie);
  color: var(--v-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}
.vorschau__kachel--2 { color: var(--v-a2); }
.vorschau__karte {
  flex: 1;
  padding: 10px;
  border-radius: var(--v-radius);
  background: var(--v-flaeche);
  border: 1px solid var(--v-linie);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.vorschau__balken { height: 7px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  .design:hover { transform: none; }
}

/* ------------------------------------------------------------- Kopfzeile */

/* Schmale Leiste über dem Inhalt — sie trägt nur die Glocke. Auf jeder Seite
   an derselben Stelle, damit der Chef nicht suchen muss. */
.kopfleiste { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.glocke-halter { position: relative; }

.glocke {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.glocke:hover { border-color: var(--linie-stark); color: var(--text); }
.glocke:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.glocke svg { width: 19px; height: 19px; }
.glocke--voll { color: var(--text); border-color: var(--linie-stark); }
.glocke--voll svg { color: var(--warnung); }
/* Die Zahl ist nur die Zugabe: das Wort daneben sagt dasselbe noch einmal. */
.glocke__zahl {
  position: absolute;
  top: -3px; left: 20px;
  min-width: 19px; height: 19px;
  border-radius: 10px;
  background: var(--warnung);
  color: var(--auf-akzent);
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 2px solid var(--plane);
  font-variant-numeric: tabular-nums;
}
.glocke__wort { white-space: nowrap; }

.glocken-liste {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  /* Die Liste hängt rechts an der Glocke — und die steht um die freigehaltene
     Rückmelde-Spur (`--fb-spur`) vom Fensterrand ab. Rechnete die Breite nur mit
     `100vw`, ragte die linke Kante auf schmalen Geräten aus dem Bild (gemessen
     −30 px bei 390 px): die ersten Zeichen wären abgeschnitten und unerreichbar,
     denn seitlich rollen lässt sich die Seite nicht. */
  width: min(420px, calc(100vw - var(--fb-spur) - 24px));
  z-index: 45;
  background: var(--surface);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  text-align: left;
}
.glocken-liste__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--linie);
}
.glocken-liste__rumpf { max-height: min(56dvh, 460px); overflow-y: auto; }
.glocken-liste__fuss {
  padding: 11px 15px;
  border-top: 1px solid var(--linie);
  line-height: 1.5;
}

.meldezeile {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 11px 15px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--linie);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.meldezeile:last-child { border-bottom: none; }
.meldezeile:hover { background: var(--surface-2); }
.meldezeile:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.meldezeile--neu { background: rgba(57, 135, 229, 0.07); }
.meldezeile--neu:hover { background: rgba(57, 135, 229, 0.12); }
.meldezeile__ikon { display: flex; padding-top: 1px; }
.meldezeile__ikon svg { width: 18px; height: 18px; }
.meldezeile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.meldezeile__titel { font-size: 14px; font-weight: 600; }
/* «neu» steht als Wort da, nicht nur als eingefärbte Zeile. */
.meldezeile__marke { color: var(--blau); flex: none; }

/* ---------------------------------------------------------- Jahresband */

.jahr { display: flex; flex-direction: column; gap: 6px; }
/* Zwölf Monatsspalten und die Namen davor brauchen Platz. Auf schmalen Geräten
   blieben vom Band 100 px übrig: die Monatskürzel lagen übereinander und
   «keine Abwesenheit» brach in die Nachbarzeile. Darum dasselbe wie bei den
   breiten Tabellen — das Band rollt seitlich in seiner Karte, mit Hinweis. */
.tabelle-rollt > .jahr { min-width: 600px; }
.jahr__zeile { display: flex; align-items: center; gap: 12px; }
.jahr__name {
  width: 150px; flex: none;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jahr__band {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 26px;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: 6px;
  overflow: hidden;
}
.jahr__band--kopf { background: none; border-color: transparent; height: 16px; }
.jahr__monat {
  position: absolute;
  top: 0;
  font-size: 11px;
  color: var(--text-3);
  padding-left: 3px;
  white-space: nowrap;
}
.jahr__linie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linie); }
/* Der heutige Tag als senkrechter Strich — sonst weiss man nicht, wo im Jahr
   man steht. In der Legende steht, was er bedeutet. */
.jahr__heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text-3); }
/* Der Satz liegt über den Monatstrennern und braucht darum seinen eigenen
   Grund — ohne ihn liefen die Striche mitten durch die Schrift und der Satz sah
   in jeder leeren Zeile durchgestrichen aus. */
.jahr__leer {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--text-3);
  padding: 0 3px;
  background: var(--surface-2);
  white-space: nowrap;
}
.jahr__block {
  position: absolute;
  top: 3px; bottom: 3px;
  min-width: 13px;
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  overflow: hidden;
}
/* Die Schriftfarbe steht am Block **und** an der Legendenprobe. Stand sie nur
   am Block, erbte die Probe die gedämpfte Schrift der Legende — das «F» im
   Kästchen war in allen elf Designs unlesbar (Kontrast 1,06 bis 1,62). */
.jahr__block, .jahr__probe { color: var(--auf-akzent); }
.jahr__block--ferien { background: var(--blau); }
.jahr__block--krank { background: var(--ernst); }
/* Offene Anträge gestrichelt — und in der Liste steht «beantragt» im Wortlaut. */
.jahr__block--beantragt {
  background: rgba(57, 135, 229, 0.22);
  border: 1px dashed var(--blau);
  color: var(--text);
}
/* «bis auf Weiteres»: rechts offen, darum kein sauberer Abschluss. */
.jahr__block--laufend { border-right: 2px dotted var(--text); border-radius: 3px 0 0 3px; }

.jahr__legende { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.jahr__probe {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 20px; height: 16px;
  border-radius: 3px;
  font-size: 10.5px; font-weight: 700;
  margin-left: 10px;
}
.jahr__probe:first-child { margin-left: 0; }
.jahr__probe--heute { width: 2px; background: var(--text-3); }

/* ----------------------------------------------------- Nachrichtenverlauf */

.verlauf {
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 11px 14px;
  margin-bottom: 10px;
}
.verlauf:last-child { margin-bottom: 0; }
.verlauf__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verlauf__text {
  margin-top: 6px;
  font-size: 13.5px;
  white-space: pre-wrap;
  color: var(--text-2);
  line-height: 1.55;
}

/* ------------------------------------------------------- Rückmelde-Fenster */
.fb { position: fixed; right: 22px; bottom: 22px; z-index: 90; }

.fb__knopf {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  margin-left: auto;
  transition: background 0.12s, transform 0.12s;
}
.fb__knopf:hover { background: #4d94e9; transform: translateY(-1px); }
.fb__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fb__knopf svg { width: 25px; height: 25px; }

.fb__punkt {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  border-radius: 10px;
  background: var(--warnung);
  color: var(--auf-akzent);
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 2px solid var(--plane);
}

.fb__fenster {
  width: min(348px, calc(100vw - 44px));
  max-height: min(560px, 72dvh);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
}

.fb__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linie);
}
.fb__unterzeile { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.fb__schliessen {
  background: none; border: none; color: var(--text-3);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.fb__schliessen:hover { color: var(--text); }

.fb__verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fb__leer { font-size: 13.5px; color: var(--text-2); line-height: 1.65; }

.fb__blase {
  align-self: flex-end;
  max-width: 92%;
  background: var(--surface-3);
  border: 1px solid var(--linie);
  border-radius: 12px 12px 4px 12px;
  padding: 9px 12px;
}
.fb__text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.fb__fuss { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.fb__ok { color: var(--gut); }
.fb__wartet { color: var(--text-2); }
.fb__fehler { color: var(--warnung); }
.fb__erneut {
  background: none; border: none; padding: 0 0 0 4px;
  color: var(--blau); font: inherit; font-size: 11.5px;
  cursor: pointer; text-decoration: underline;
}

.fb__eingabe {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--linie);
}
.fb__eingabe textarea {
  flex: 1;
  resize: none;
  background: var(--surface-2);
  border: 1px solid var(--linie);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 9px 11px;
  max-height: 120px;
}
.fb__eingabe textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
/*
 * Senden und Mikrofon sind gleichrangige Wege aus demselben Gedanken heraus —
 * sie sehen darum gleich aus und stehen in **einem** Regelsatz. Wer ein Design
 * baut, zieht beide zusammen mit und vergisst keinen.
 */
.fb__senden, .fb__mikro {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  border: none;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.fb__senden:hover, .fb__mikro:hover { background: #4d94e9; }
.fb__senden svg, .fb__mikro svg { width: 19px; height: 19px; }

/*
 * Aufnahmezeile. Sie tritt an die Stelle der Eingabezeile, solange das
 * Mikrofon läuft: ein Punkt, der pulst, die verstrichene Zeit und die zwei
 * Auswege. Nichts sonst — wer spricht, soll nicht auch noch lesen müssen.
 */
.fb__aufnahme {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-top: 1px solid var(--linie);
}
.fb__rot {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--kritisch);
  animation: puls 1.2s ease-in-out infinite;
}
.fb__zaehler {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.fb__verwerfen {
  margin-left: auto;
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  color: var(--text-2);
  font: inherit; font-size: 13px;
  padding: 0 12px;
  /* Höhe nicht selbst setzen: so wächst der Knopf mit «Fertig» mit, und die
     Designs mit grösseren Zielflächen bleiben stimmig. */
  align-self: stretch;
  cursor: pointer;
}
.fb__verwerfen:hover { color: var(--text); border-color: var(--text-3); }
/*
 * «Fertig» **ist** der Senden-Knopf, nur in Worten — es trägt darum zusätzlich
 * .fb__senden und erbt so die Akzentfarbe jedes Designs. Zurückgeholt werden
 * hier nur die Masse: die Designs setzen dort feste Icon-Kantenlängen, und ein
 * Wort passt nicht in ein Quadrat. Die Höhe bleibt beim Design (Kontrast will
 * 44 px), die zwei Klassen im Selektor schlagen dessen einzelne.
 */
.fb__aufnahme .fb__fertig {
  width: auto;
  padding: 0 14px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.fb__hinweis {
  padding: 0 16px 10px;
  font-size: 12.5px;
  color: var(--warnung);
}

@media (prefers-reduced-motion: reduce) { .fb__rot { animation: none; } }

/*
 * Schmale Fenster: Der Rückmelde-Knopf rückt näher an die Ecke und wird
 * kleiner — sonst frässe die freigehaltene Spur zu viel von der Arbeitsfläche.
 * Die Spur schrumpft mit: 46 px Knopf + 12 px Abstand + 12 px Luft.
 */
@media (max-width: 1050px) {
  :root { --fb-spur: 70px; }
  .fb { right: 12px; bottom: 12px; }
  .fb__knopf { width: 46px; height: 46px; }
  .fb__knopf svg { width: 21px; height: 21px; }
}

@media (max-width: 860px) {
  .huelle { grid-template-columns: 1fr; }
  .seitenleiste {
    position: static; height: auto; flex-direction: row; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--linie); padding: 10px;
  }
  .seitenleiste__heim, .seitenleiste__fuss { display: none; }
  .nav { white-space: nowrap; width: auto; }
  .inhalt { padding: 18px 16px 66px; }
}

/* Ganz schmal: das Fenster nimmt die volle Breite, der Knopf bleibt rechts. */
@media (max-width: 560px) {
  .fb { right: 12px; bottom: 12px; left: 12px; }
  .fb__fenster { width: 100%; }
}