/* Leitstand — physio+ Schwartz
 *
 * Farben, Schriften und Radien stammen aus dem Corporate-Identity-Handbuch „physio+
 * Schwartz" (V1 · 2026). Nichts davon ist frei gewählt.
 *
 * DIE GESTALTUNGSIDEE (bestätigter Entwurf vom 19.08.2026): oben ein dunkles
 * Anthrazit-Band als Führungs-Kanzel mit Name, Datum, Kalenderwoche und Standort,
 * darunter eine helle Arbeitsfläche, in die sich die Kacheln von unten hineinschieben.
 * Das unterscheidet den Leitstand bewusst von HB-, Calls- und Rezeption-Tool, die alle
 * eine schmale weiße Kopfzeile über hellem Grund haben.
 *
 * ⚠ KONTRAST-REGELN AUS DER CI, die hier den Aufbau bestimmen:
 *   · Anthrazit ist die Textfarbe, nicht Schwarz.
 *   · NIEMALS weißer Text auf Physio-Grün (2,1:1). Grüner Text auf Weiß = Grün-Dunkel.
 *   · Weiß auf Physio-Blau nur für Logo und große Überschriften. Für weißen Fließtext
 *     wird die Fläche in Tiefblau angelegt — deshalb sind alle Knöpfe tiefblau.
 *   · Koralle sparsam und nur mit Anthrazit-Text oder als große fette Schrift.
 *
 * ⚠ JEDER Knopf setzt seine Schriftfarbe AUSDRÜCKLICH. Eine allgemeine Regel wie
 * `button { color:#fff }` färbt sonst auch die hellen Sonderknöpfe mit — genau dieser
 * Fehler wurde in einem früheren physio+-Projekt erst durch einen Kontrast-Scan gefunden.
 *
 * ⚠ KEINE style="…"-Attribute im erzeugten HTML: die Inhaltssicherheitsrichtlinie
 * (server/src/index.js) erlaubt kein 'unsafe-inline' für Stile. Wo etwas berechnet werden
 * muss, setzt app.js die Eigenschaft über element.style.setProperty(…).
 */

/* ---------------------------------------------------------------- Schriften
 * Selbst ausgeliefert statt über Google Fonts: erstens Datenschutz (keine Verbindung zu
 * einem fremden Server), zweitens erlaubt die Inhaltssicherheitsrichtlinie nur die
 * eigene Herkunft. Latin-Ausschnitt, zusammen rund 63 KB. */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/poppins-latin-900-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/mulish-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/mulish-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/mulish-latin-700-normal.woff2') format('woff2');
}

:root {
  /* CI-Farben */
  --blau:         #2DAAE1;
  --gruen:        #9BBF17;
  --anthrazit:    #24333B;
  --tiefblau:     #14536B;
  --gruen-dunkel: #6F8C10;
  --himmelblau:   #A9DCF2;
  --gruen-hell:   #EAF2CE;
  --blau-hell:    #EAF6FC;
  --koralle:      #E8654E;
  /* Koralle-Dunkel: die Ableitung für ALLES, was Schrift trägt.
     Koralle selbst ist eine Signalfläche für große, fette Schrift — als Grund für eine
     12-px-Plakette trägt sie keine lesbare Farbe, EGAL welche: Anthrazit darauf sind
     3,97:1, Weiß 3,3:1, verlangt sind 4,5:1. Dieselbe Ableitung wie „Grün-Dunkel" in der
     CI, hergeleitet im Rezeption-Tool (LEARNINGS B2) und im GF-Assistenz-Handout.
     Weiß darauf: 6,03:1 — hier nachgerechnet, im Browser und außerhalb. ⚠ Das
     Rezeption-Handout nennt für dieselbe Paarung 7,3:1; das ist zu hoch. Beide Wege
     kommen auf 6,03, also gilt diese Zahl. Reicht deutlich für 4,5:1 — aber eine
     abgeschriebene Zahl bleibt eine abgeschriebene Zahl. */
  --koralle-dunkel: #B03A28;
  --grau:         #9D9D9C;

  /* Abgeleitete Töne, ebenfalls aus dem Handbuch */
  --ink:      #24333B;
  --ink-2:    #5A6B73;
  --ink-3:    #7A8790;
  --linie:    #E3EAEE;
  --linie-2:  #CBD8DE;
  --flaeche:  #F4F7F9;
  --weiss:    #FFFFFF;
  --band:     #24333B;
  --band-2:   #1A262C;

  /* Signalfarben — beide aus der CI-Palette, beide auf Kontrast geprüft */
  --warn-text:    #B84A34;
  --warn-flaeche: #FDF5F5;
  --warn-linie:   #F0DADA;
  --ok-text:      #6F8C10;
  --ok-flaeche:   #EAF2CE;
  --ok-linie:     #DCE9B0;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--ink);
  font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

/* ============================================================== Leitstand-Band */
.band {
  background: linear-gradient(168deg, var(--band) 0%, var(--band-2) 100%);
  padding: 16px 30px 74px;
  border-bottom: 3px solid transparent;
  /* Die beiden Hauptfarben in einer Linie — die einzige Zierde der Seite. */
  border-image: linear-gradient(90deg, var(--blau), var(--gruen)) 1;
}
.band.schmal { padding-bottom: 30px; }
.band-oben { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.wortmarke { display: flex; align-items: baseline; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; }
.wortmarke b {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 21px;
  color: #fff; letter-spacing: -.02em;
}
.wortmarke b span { color: var(--blau); }
.wortmarke .trenner { width: 1px; height: 17px; background: rgba(255,255,255,.25); align-self: center; }
.wortmarke em {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--himmelblau);
}

.band-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.standort-chip {
  font-size: 12.5px; font-weight: 600; color: var(--himmelblau);
  border: 1px solid rgba(169,220,242,.32); border-radius: 999px; padding: 4px 12px;
  white-space: nowrap;
}

/* Keine Navigationsleiste im Band -- der Leitstand ist ein KACHELSYSTEM.
 * Hier standen .menuezeile und .menue-* (bis 22.08.2026). Der Weg in einen Bereich
 * fuehrt ueber seine Kachel, der Weg zurueck ueber "<- Uebersicht". Begruendung und
 * Regel: client/rahmen.js bei klappmenue(). */

.begruessung { margin-top: 26px; }
.begruessung h1 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.15;
  letter-spacing: -.025em; color: #fff; margin: 0 0 6px; text-wrap: balance;
}
.begruessung p { margin: 0; font-size: 14px; color: var(--himmelblau); }
.begruessung p b { color: #fff; font-weight: 700; }

/* ------------------------------------------------- Benutzer-Knopf + Klappmenü */
.benutzer { position: relative; }
.benutzer-knopf {
  font: inherit; display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 12px 5px 5px; color: #fff;
}
.benutzer-knopf:hover { background: rgba(255,255,255,.13); }
.benutzer-knopf .name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.benutzer-knopf .pfeil { font-size: 10px; opacity: .7; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blau); color: var(--anthrazit); flex: none;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12.5px;
}

.klappmenue {
  position: absolute; right: 0; top: calc(100% + 10px); width: 272px; z-index: 40;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(20,50,70,.28); overflow: hidden;
}
.klappmenue[hidden] { display: none; }
.klapp-kopf { padding: 15px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.klapp-kopf .kname { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; }
.klapp-kopf .kmail { font-size: 12.5px; color: var(--ink-2); word-break: break-all; }
.klapp-kopf .krolle {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700;
  background: var(--blau-hell); color: var(--tiefblau); border-radius: 999px; padding: 3px 10px;
}
.klapp-gruppe { padding: 6px; }
.klapp-gruppe + .klapp-gruppe { border-top: 1px solid var(--linie); }
.klapp-titel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 4px;
}
.klapp-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 9px; padding: 9px 10px; color: var(--ink);
}
.klapp-eintrag:hover { background: var(--blau-hell); color: var(--tiefblau); }
.klapp-eintrag svg { flex: none; color: var(--ink-3); }
.klapp-eintrag:hover svg { color: var(--tiefblau); }
.klapp-eintrag.abmelden, .klapp-eintrag.abmelden svg { color: var(--warn-text); }
.klapp-eintrag.abmelden:hover { background: var(--warn-flaeche); }

/* ================================================================ Inhaltsfläche */
.inhalt { padding: 0 30px 48px; max-width: 1180px; margin: 0 auto; }
.inhalt.hoch { margin-top: -46px; }
.inhalt.tief { padding-top: 26px; }

.abschnitt-titel {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  margin: 34px 0 12px;
}
/* Abschnittstitel mit (i) daneben: der Außenabstand wandert vom Titel an die Zeile,
   sonst hinge der Knopf unter der Grundlinie. */
.abschnitt-kopf { display: flex; align-items: center; gap: 10px; margin: 34px 0 12px; }
.abschnitt-kopf .abschnitt-titel { margin: 0; }
/* Ein Abschnitt, der zugeklappt startet: der Titel selbst ist der Aufklapp-Knopf
   (Muster: .gruppen-knopf der Rechte-Tafel). Der Zusatz nennt die Kernzahl, damit der
   zugeklappte Kopf schon eine Aussage trägt — nichts Ausgeblendetes ohne Benennung
   (Handout §3.7). Farben wie .abschnitt-titel; Knopf setzt beide ausdrücklich (§3.10). */
.abschnitt-knopf {
  font: inherit; display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--ink-2); text-align: left;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.abschnitt-knopf:hover { color: var(--tiefblau); }
.abschnitt-knopf .pfeil { transition: transform .14s ease; font-size: 13px; }
.abschnitt-knopf .pfeil.zu { transform: rotate(-90deg); }
.abschnitt-knopf .zusatz {
  font-family: 'Mulish', 'Segoe UI', system-ui, sans-serif; font-weight: 400;
  font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

.unterkopf { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.unterkopf h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 26px;
  letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
.unterkopf p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); max-width: 68ch; }
.unterkopf .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.zurueck {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--tiefblau);
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
}
.zurueck:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.kachel {
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px;
  padding: 20px; min-height: 152px;
  box-shadow: 0 2px 4px rgba(20,50,70,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kachel:hover {
  transform: translateY(-3px); border-color: var(--blau);
  box-shadow: 0 12px 26px rgba(20,50,70,.13);
}
.kachel-kopf { display: flex; align-items: center; gap: 12px; }
.kachel-symbol { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.kachel-symbol.blau  { background: var(--blau-hell);  color: var(--tiefblau); }
.kachel-symbol.gruen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.kachel-symbol.grau  { background: #EDF1F3;           color: var(--ink-3); }
/* Die Kachel warnt (fehlende Listen): dieselbe Paarung wie .kz-symbol.warn. Die Klasse
   wurde in ansicht-uebersicht.js längst gesetzt, nur die Regel fehlte — das Symbol
   verlor seine Fläche, statt zu warnen. Gemessen 4,81:1; für Grafik gilt 3:1. */
.kachel-symbol.warn  { background: var(--warn-flaeche); color: var(--warn-text); }
.kachel-titel { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.kachel .beschreibung { display: block; font-size: 13.5px; color: var(--ink-2); }
/* „nur ansehen · Veen" bzw. „kein Standort freigegeben" — die Angaben, die vorher in der
   Navigationsleiste standen.
   ⚠ NICHT --ink-2: das wären auf dieser Fläche 4,88:1, und für 12 px fett ist das der
   knappe Rand statt Luft. #41505A ist dieselbe Grau-Familie eine Stufe dunkler und
   gemessen 7,33:1 — nachgerechnet, nicht geschätzt (mein erster Kommentar hier behauptete
   7,04:1 für --ink-2; das war eine geratene Zahl. Genau davor warnt Handout §8.9). */
.kachel-hinweis {
  display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: #41505A; background: #EDF1F3;
  border-radius: 999px; padding: 3px 10px;
}
/* ⚠ UMBRUCH NUR ZWISCHEN PAAREN, nie zwischen Zahl und Beschriftung. Vorher lagen Zahl
   und Text flach in dieser Zeile; auf dem Desktop passten zwei Paare nicht in eine
   Kachelbreite, und dann blieb die zweite Zahl allein am Zeilenende stehen, während ihre
   Beschriftung in die nächste Zeile rutschte. Deshalb steckt jedes Paar in .zahlenpaar
   (client/ansicht-uebersicht.js, zahlPaar). */
.kachel .zahlenzeile {
  margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 10px 22px;
}
.kachel .zahlenpaar { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.kachel .zahl {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 27px; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.kachel .zahl.blau { color: var(--tiefblau); }
.kachel .zahl.rot  { color: var(--warn-text); }
.kachel .zahl-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.25; }

.kachel.geplant { cursor: default; background: #FAFBFC; border-style: dashed; box-shadow: none; }
.kachel.geplant:hover { transform: none; border-color: var(--linie); box-shadow: none; }
.kachel.geplant .kachel-titel, .kachel.geplant .beschreibung { color: var(--ink-3); }
.marke-geplant {
  align-self: flex-start; margin-top: auto;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #EDF1F3; color: var(--ink-2); border-radius: 999px; padding: 4px 10px;
}

/* ------------------------------------------------------------ Leerer Zustand */
.leer {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px;
  padding: 44px 30px; text-align: center;
}
.leer h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 19px; margin: 14px 0 8px; }
.leer p { margin: 0 auto; max-width: 48ch; color: var(--ink-2); font-size: 14.5px; }
.leer svg { color: var(--ink-3); }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 10px; padding: 9px 16px; border: 1px solid var(--tiefblau);
  background: var(--tiefblau); color: #fff; white-space: nowrap;
}
.knopf:hover { background: #0F4257; border-color: #0F4257; color: #fff; }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.hell { background: var(--weiss); color: var(--tiefblau); border-color: var(--linie-2); }
.knopf.hell:hover { background: var(--blau-hell); border-color: var(--blau); color: var(--tiefblau); }
.knopf.warn { background: var(--weiss); color: var(--warn-text); border-color: var(--warn-linie); }
.knopf.warn:hover { background: var(--warn-flaeche); border-color: var(--warn-text); color: var(--warn-text); }
.knopf.klein { font-size: 13px; padding: 6px 12px; }

/* --------------------------------------------------------- Werkzeugleiste */
.werkzeuge {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 18px;
}
.kw-wahl { display: flex; align-items: center; gap: 8px; }
.kw-wahl .kw-text {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; min-width: 196px; text-align: center;
}
.pfeilknopf {
  font: inherit; width: 32px; height: 32px; cursor: pointer; line-height: 1;
  border: 1px solid var(--linie-2); border-radius: 9px; background: var(--weiss); color: var(--ink-2);
}
.pfeilknopf:hover:not(:disabled) { background: var(--blau-hell); color: var(--tiefblau); border-color: var(--blau); }
.pfeilknopf:disabled { opacity: .35; cursor: default; }
.werkzeuge .rechts { margin-left: auto; font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------------ Kennzahl-Karten */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kz {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.kz-titel { display: flex; align-items: center; gap: 10px; }
.kz-titel h3 { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15.5px; margin: 0; }
.kz-symbol { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.kz-symbol.blau { background: var(--blau-hell); color: var(--tiefblau); }
.kz-symbol.warn { background: var(--warn-flaeche); color: var(--warn-text); }
.kz-gross {
  font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 54px; line-height: .95;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.kz-gross.blau { color: var(--tiefblau); }
.kz-gross.rot  { color: var(--warn-text); }
.kz-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.delta { font-weight: 700; font-size: 13px; border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.delta.gut      { background: var(--ok-flaeche);   color: var(--ok-text); }
.delta.schlecht { background: var(--warn-flaeche); color: var(--warn-text); }
.delta.neutral  { background: #EDF1F3;             color: var(--ink-2); }

.balken { display: flex; align-items: flex-end; gap: 6px; height: 84px; }
.balken div {
  flex: 1; border-radius: 4px 4px 0 0; background: var(--himmelblau);
  height: var(--h, 4%); min-height: 4px;
}
.balken div.jetzt { background: var(--blau); }
.balken.warn div { background: #F3D9D3; }
.balken.warn div.jetzt { background: var(--koralle); }
.balken-achse {
  display: flex; gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.balken-achse span { flex: 1; text-align: center; }

.aufteilung { display: flex; gap: 8px; flex-wrap: wrap; }
.aufteilung span {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}

.erklaerung {
  margin-top: 18px; font-size: 12.5px; color: var(--ink-2);
  background: var(--blau-hell); border: 1px solid #CDE5F3; border-radius: 10px; padding: 11px 14px;
}
.erklaerung b { color: var(--tiefblau); }

/* ---------------------------------------------------------------- Tabellen */
.tabellen-rahmen { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.tabellen-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 700px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linie); font-size: 14px; }
th {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); background: var(--flaeche); vertical-align: bottom;
}
th small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-3); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FBFCFD; }
td.rechts, th.rechts { text-align: right; }

.person { display: flex; align-items: center; gap: 11px; }
.person .avatar { width: 34px; height: 34px; font-size: 13px; }
.person .pname { font-weight: 700; }
.person .pmail { font-size: 12.5px; color: var(--ink-2); word-break: break-all; }
.zeilen-aktion { display: flex; gap: 6px; justify-content: flex-end; }

.pill { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; display: inline-block; white-space: nowrap; }
.pill.rolle   { background: var(--blau-hell);  color: var(--tiefblau); }
.pill.ohne    { background: #EDF1F3;           color: var(--ink-2); }
.pill.aktiv   { background: var(--ok-flaeche); color: var(--ok-text); }
.pill.inaktiv { background: #EDF1F3;           color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════ Rechte-Tafel
 * Eine Zeile je Bereich, eine Spalte je Schalter. Die erste Spalte bleibt beim
 * Querlaufen stehen -- ohne sie weiss man nach der dritten Spalte nicht mehr,
 * in welcher Zeile man haekchen setzt. */
.reiterleiste {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 14px;
}
.reiterleiste .modus-knopf { flex-direction: column; align-items: flex-start; gap: 1px; }
.reiterleiste .modus-knopf b { font-size: 13.5px; font-weight: 700; }
.reiterleiste .modus-knopf small { font-size: 11.5px; }
.reiterleiste .modus-knopf[aria-pressed="true"] small { color: var(--himmelblau); }

.rollenblatt { display: grid; gap: 12px; }
.blattkopf { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.blattkopf h3 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 2px;
  color: var(--ink);
}
.blattkopf p { margin: 0; font-size: 13px; color: var(--ink-2); }
.blattkopf .zeilen-aktion { margin-left: auto; }

.rechtetafel th:first-child, .rechtetafel td:first-child {
  position: sticky; left: 0; background: var(--weiss); z-index: 1; text-align: left;
}
.rechtetafel thead th:first-child { background: var(--flaeche); }
.rechtetafel th:not(:first-child), .rechtetafel td:not(:first-child) { text-align: center; }
.rechtetafel .spalte-text, .rechtetafel th.spalte-text { text-align: left; min-width: 240px; }
.rechtetafel .spalte-alle { background: #F4F8FB; }
.rechtetafel tbody tr:hover td:first-child { background: #FBFCFD; }
.recht-name b { font-weight: 700; }
.recht-name small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.spalte-text span { font-size: 13px; color: var(--ink-2); }

/* Der Gruppenkopf -- wie im Vorbild mit Anzahl und Aufklapp-Pfeil. */
.gruppen-zeile th {
  background: var(--flaeche); padding: 0; position: static;
  border-top: 1px solid var(--linie);
}
.gruppen-knopf {
  font: inherit; display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  background: none; border: 0; padding: 9px 14px; text-align: left;
  color: var(--ink-2); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.gruppen-knopf:hover { background: var(--blau-hell); color: var(--tiefblau); }
.gruppen-knopf .pfeil { transition: transform .14s ease; font-size: 13px; }
.gruppen-knopf .pfeil.zu { transform: rotate(-90deg); }

/* Wo ein Schalter nicht gilt, steht ein Grund -- kein graues Kaestchen. Ein ausgegrautes
 * Kaestchen erzeugt die Frage "warum darf ich das nicht"; der Titel beantwortet sie. */
.nicht-anwendbar {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  color: var(--ink-3); cursor: help; font-weight: 700;
}
/* Wenn ein Bereich den Schalter anders nennt, steht der wahre Name unter dem Haekchen.
 * Die Spaltenueberschrift gilt fuer die Spalte, nicht fuer jede Zelle darin. */
.andere-beschriftung {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700;
  color: var(--tiefblau); line-height: 1.2;
}
/* Der Grund unter einem gesperrten Haekchen: es ergibt sich aus einem anderen. */
.ableitung { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.ableitung[hidden] { display: none; }
.zeilen-hinweis { display: block; margin-top: 3px; font-size: 12.5px; color: var(--warn-text); }
.zeilen-hinweis[hidden] { display: none; }

.haken-feld { display: inline-grid; place-items: center; }
.haken-feld input { width: 20px; height: 20px; accent-color: var(--tiefblau); cursor: pointer; }
.haken-feld input:disabled { cursor: progress; opacity: .55; }

/* ---------------------------------------------------------------- Formulare */
.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: 24px;
}
.karte.schmal { max-width: 560px; }
.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 15px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--linie-2); border-radius: 10px; background: var(--weiss); color: var(--ink);
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.feld .hilfe { font-size: 12.5px; color: var(--ink-2); margin: 5px 0 0; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kastenliste { display: flex; flex-direction: column; gap: 8px; }
.kastenliste label {
  display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14.5px;
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; cursor: pointer; margin: 0;
}
.kastenliste label:hover { border-color: var(--blau); background: var(--blau-hell); }
.kastenliste input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--tiefblau); flex: none; }
.kastenliste b { display: block; font-weight: 700; font-size: 14px; }
.kastenliste span { display: block; font-size: 12.5px; color: var(--ink-2); }
.formfuss { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.formfuss .links { margin-right: auto; }

/* ---------------------------------------------------------------- Meldungen */
.meldung {
  border-radius: 10px; padding: 11px 14px; font-size: 14px; margin-bottom: 16px;
  border: 1px solid transparent;
}
.meldung.fehler { background: var(--warn-flaeche); border-color: var(--warn-linie); color: var(--warn-text); }
.meldung.ok     { background: var(--ok-flaeche);   border-color: var(--ok-linie);   color: var(--ok-text); }
.meldung.info   { background: var(--blau-hell);    border-color: #CDE5F3;           color: var(--tiefblau); }

.hinweisstreifen {
  background: #FBF1DC; border: 1px solid #EBD9B2; color: #7A5A16;
  border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px;
}
/* Erklärt eine Markierung, warnt nicht. Deshalb neutral und nicht gelb: ein Streifen in
   Warnfarbe neben einer Tabelle, in der schon Plaketten warnen, macht beide leiser.
   Gemessen 11,46:1. */
.hinweisstreifen.leise {
  background: #EDF1F3; border-color: #DCE3E7; color: var(--ink);
  margin: 0 0 14px; border-radius: 10px 10px 0 0;
}

/* ---------------------------------------------------------------- Dialoge */
.dialog-grund {
  position: fixed; inset: 0; z-index: 60; background: rgba(26,38,44,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.dialog {
  background: var(--weiss); border-radius: 18px; width: 100%; max-width: 540px;
  box-shadow: 0 26px 64px rgba(0,0,0,.34); overflow: hidden;
}
.dialog-kopf {
  padding: 20px 24px; border-bottom: 1px solid var(--linie); background: var(--flaeche);
  display: flex; align-items: center; gap: 12px;
}
.dialog-kopf h2 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; margin: 0;
}
.dialog-kopf .schliessen {
  margin-left: auto; font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--ink-2); padding: 0 4px;
}
.dialog-kopf .schliessen:hover { color: var(--ink); }
.dialog-inhalt { padding: 22px 24px; }

/* ---------------------------------------------------------------- Anmeldung */
.anmeldung {
  min-height: 100vh; display: grid; place-items: center; padding: 40px 20px;
  background: linear-gradient(168deg, #24333B 0%, #14536B 100%);
}
.anmelde-karte {
  width: 100%; max-width: 396px; background: var(--weiss); border-radius: 18px;
  padding: 37px 32px 34px; box-shadow: 0 24px 60px rgba(0,0,0,.32);
  /* Farbstreifen als Hintergrund statt als border-image: der würde die Eckenrundung
     an der Oberkante aufheben. */
  background-image: linear-gradient(90deg, var(--blau), var(--gruen));
  background-repeat: no-repeat; background-size: 100% 3px; background-position: top left;
}
.anmelde-marke { text-align: center; margin-bottom: 26px; }
.anmelde-marke b {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; color: var(--anthrazit); display: block;
}
.anmelde-marke b span { color: var(--blau); }
.anmelde-marke em {
  font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-2);
}
.anmelde-karte .knopf { width: 100%; margin-top: 6px; }
.merken { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
.merken input { width: auto; accent-color: var(--tiefblau); }
.anmelde-fuss {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie);
  font-size: 12.5px; color: var(--ink-2); text-align: center;
}

/* ------------------------------------------------------------------- Laden */
.laedt { padding: 60px 20px; text-align: center; color: var(--ink-2); font-size: 14.5px; }

/* Nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════════════════════════════════════ Standortwahl im Band
 * Derselbe Chip wie vorher, für Berechtigte anklickbar. Wer nur einen Standort sehen
 * darf, bekommt weiterhin eine reine Beschriftung — kein Menü, das nichts anbietet. */
.standortwahl { position: relative; }
.standort-chip.waehlbar {
  font: inherit; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(169,220,242,.10);
}
.standort-chip.waehlbar:hover { background: rgba(169,220,242,.22); color: #fff; }
.standort-chip .pfeil { font-size: 9px; opacity: .75; }
.ort-menue {
  position: absolute; right: 0; top: calc(100% + 9px); width: 236px; z-index: 50;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(20,50,70,.28); overflow: hidden; padding: 6px; text-align: left;
}
.ort-menue[hidden] { display: none; }
.ort-eintrag {
  display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 14px;
  text-align: left; cursor: pointer; background: none; border: 0; border-radius: 9px;
  padding: 9px 10px; color: var(--ink);
}
.ort-eintrag:hover { background: var(--blau-hell); color: var(--tiefblau); }
.ort-eintrag[aria-checked="true"] { font-weight: 700; color: var(--tiefblau); }
.ort-eintrag .haken { width: 15px; color: var(--tiefblau); flex: none; }

/* ══════════════════════════════════════════════════════════ Arbeitsmodus
 * Zwei Tätigkeiten, ein Schalter. Als Segmentwahl und nicht als Auswahlliste: beide
 * Möglichkeiten sollen gleichzeitig sichtbar sein, damit man sieht, worin man NICHT ist. */
.modus-schalter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 11px; padding: 4px;
}
.modus-knopf {
  font: inherit; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  color: var(--ink-2); text-align: left; min-width: 0;
}
.modus-knopf:hover { background: var(--blau-hell); color: var(--tiefblau); }
.modus-knopf .sym { flex: none; display: grid; place-items: center; }
.modus-knopf .txt { min-width: 0; }
.modus-knopf .txt b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; }
.modus-knopf[aria-pressed="true"] {
  background: var(--tiefblau); color: #fff;
  box-shadow: 0 2px 6px rgba(20,50,70,.18);
}
.modus-knopf[aria-pressed="true"]:hover { background: #0F4257; color: #fff; }

/* Auf der Profil-Seite größer und mit Erklärung je Möglichkeit. */
.modus-schalter.gross { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; margin-bottom: 4px; }
.modus-schalter.gross .modus-knopf { align-items: flex-start; padding: 14px 14px; }
.modus-schalter.gross .modus-knopf .sym { margin-top: 2px; }
.modus-schalter.gross .modus-knopf .txt b { font-size: 15px; font-family: 'Poppins', sans-serif; }
.modus-schalter.gross .modus-knopf .txt small {
  display: block; font-size: 12.5px; margin-top: 2px; white-space: normal;
}
.modus-schalter.gross .modus-knopf[aria-pressed="true"] .txt small { color: var(--himmelblau); }

/* Im Klappmenü sitzt er in einer Gruppe und braucht keinen eigenen Rahmen.
 *
 * ⚠ HIER IST EIN KASKADEN-UNFALL PASSIERT (20.08.2026), und die Regeln unten sind
 * seine Behebung. Ursprünglich stand hier:
 *
 *     .klapp-gruppe .modus-knopf { background: var(--weiss); }
 *
 * Das hat DIESELBE Spezifität wie `.modus-knopf[aria-pressed="true"]` (je zwei
 * Bezeichner), steht aber später — also gewann es und färbte auch den GEWÄHLTEN Knopf
 * weiß. Die Schriftfarbe `#fff` kam weiter von der Zustandsregel, weil die spätere
 * Regel sie nicht anfasste. Ergebnis: weißer Text auf weißem Grund, der gewählte Modus
 * war ein leeres Kästchen.
 *
 * Zwei Lehren, die der Dateikopf schon nennt: jeder Knopf setzt Grund UND Schriftfarbe
 * ausdrücklich, und eine Regel, die einen Zustand nicht meint, darf ihn per :not()
 * auch nicht treffen. */
.klapp-gruppe .modus-schalter { border: 0; background: none; padding: 0 4px 4px; }
.klapp-gruppe .modus-knopf:not([aria-pressed="true"]) {
  border: 1px solid var(--linie); background: var(--weiss); color: var(--ink-2);
}
.klapp-gruppe .modus-knopf:not([aria-pressed="true"]):hover {
  border-color: var(--blau); background: var(--blau-hell); color: var(--tiefblau);
}
.klapp-gruppe .modus-knopf[aria-pressed="true"] {
  border: 1px solid var(--tiefblau); background: var(--tiefblau); color: #fff;
}

.karte .karten-satz { margin: 0 0 16px; font-size: 14px; color: var(--ink-2); max-width: 72ch; }

/* Die Brücke zum anderen Modus. Sichtbar genug, um gefunden zu werden — eine leise
 * Textzeile hat am 20.08.2026 nicht gereicht, und dann sah es aus, als fehle die
 * Kachel. Keine Warnfarbe: es ist kein Problem, sondern ein Weg. */
.modus-bruecke {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 18px;
  background: var(--blau-hell); border: 1px solid #CDE5F3; border-radius: 12px;
  padding: 14px 16px;
}
.modus-bruecke .sym {
  width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid;
  place-items: center; background: var(--weiss); color: var(--tiefblau);
}
.modus-bruecke .txt { min-width: 220px; flex: 1; }
.modus-bruecke .txt b { display: block; font-size: 14px; color: var(--tiefblau); }
.modus-bruecke .txt span { display: block; font-size: 13px; color: var(--ink-2); }
.modus-bruecke .knopf { flex: none; }

/* ══════════════════════════════════════════════════ Zustands-Pillen der Abgabe */
.pill.z-abgegeben    { background: var(--ok-flaeche);   color: var(--ok-text); }
.pill.z-offen        { background: var(--blau-hell);    color: var(--tiefblau); }
.pill.z-unbestaetigt { background: var(--gelb-flaeche, #FBF1DC); color: #7A5A16; }
/* „unvollständig" ist derselbe Zustand wie „unbestätigt", nur von der Software erkannt
   statt vom Menschen erklärt — deshalb dieselbe Farbe. Zwei Gelbtöne für dieselbe
   Aussage wären eine Unterscheidung ohne Unterschied. */
.pill.z-unvollstaendig { background: var(--gelb-flaeche, #FBF1DC); color: #7A5A16; }
.pill.z-ueberfaellig { background: var(--warn-flaeche); color: var(--warn-text); }
.pill.z-laufend      { background: #EDF1F3;             color: var(--ink-2); }
.pill.ort            { background: var(--blau-hell);    color: var(--tiefblau); }
/* ⚠ Koralle-DUNKEL, nicht Koralle. Auf Koralle waren es gemessen 3,97:1 — die Plakette,
   die in dieser Tabelle am meisten zählt, war die am schlechtesten lesbare. Grund UND
   Schriftfarbe stehen hier ausdrücklich (Handout §3.10). */
.pill.kandidat       { background: var(--koralle-dunkel); color: var(--weiss); }
.pill.ruht           { background: #EDF1F3;             color: var(--ink-2); }
/* „Grundlage: 3 Termine" — dieselbe Familie wie „unbestätigt": nicht schlecht, sondern
   noch nicht belastbar. Gemessen 5,67:1 (nicht geschätzt, Handout §3.10). */
.pill.duenn          { background: #FBF1DC;             color: #7A5A16; }
/* Die Terminzahl selbst, wenn sie dünn ist. Punktierte Unterstreichung ZUSÄTZLICH zur
   Farbe: eine Aussage darf nie allein an der Farbe hängen — Farbsehschwäche und
   Graustufendruck. Gemessen 6,36:1 auf Weiß. */
td.zahl.duenn        { color: #7A5A16; text-decoration: underline dotted; text-underline-offset: 3px; }

.legende {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 16px;
}
.legende-titel {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2); margin-right: 4px;
}
.legende-satz { font-size: 12.5px; color: var(--ink-2); margin-right: 10px; }
.legende-marke { display: inline-flex; align-items: center; gap: 6px; }
.legende-marke i { width: 2px; height: 13px; background: var(--anthrazit); opacity: .55; display: inline-block; }

.kachel .rhythmus { display: block; font-size: 12.5px; color: var(--ink-3); }
.kachel .statusreihe { margin-top: auto; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.kachel .weiter { font-size: 13px; font-weight: 700; color: var(--tiefblau); }
.kachel .alles-gut {
  margin-top: auto; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px;
  color: var(--gruen-dunkel);
}
.kandidaten-zeile {
  margin-top: auto; border-top: 1px solid var(--linie); padding-top: 11px;
  font-size: 13px; display: flex; align-items: flex-start; gap: 8px;
}
.kandidaten-zeile.gut { color: var(--gruen-dunkel); font-weight: 700; }
.kandidaten-zeile.schlecht { color: var(--warn-text); }
.kandidaten-zeile svg { flex: none; margin-top: 2px; }

.aufgabenstreifen {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--weiss); border: 1px solid var(--warn-linie); border-left: 4px solid var(--koralle);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 16px; font-size: 14px;
}
.aufgabenstreifen b { color: var(--warn-text); }

/* ══════════════════════════════════════════════════════════ Karten-Abschnitte */
.karte + .karte { margin-top: 16px; }
.karten-kopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.karten-kopf .num {
  width: 29px; height: 29px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--anthrazit); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px;
}
.karten-kopf h3 {
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -.02em; margin: 0;
}
.karten-kopf p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); max-width: 68ch; }
.karten-kopf .rechts { margin-left: auto; }
.kachel-symbol.klein { width: 30px; height: 30px; border-radius: 9px; }

.titelzeile { display: flex; align-items: center; gap: 10px; }
.nebenzeile { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.leer-text { color: var(--ink-3); font-size: 13px; }
.leer .nachsatz { margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════ Anleitung */
.anleitung-block + .anleitung-block { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linie); }
.anleitung-block h4 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 11px;
}
.pfadzeile {
  display: inline-block; font-size: 14px; font-weight: 700; color: var(--tiefblau);
  background: var(--blau-hell); border: 1px solid #CDE5F3; border-radius: 9px; padding: 7px 12px;
  margin-bottom: 14px;
}
.schritte { margin: 0; padding-left: 22px; font-size: 14.5px; }
.schritte li { margin-bottom: 7px; }
.schritte li::marker { font-weight: 700; color: var(--ink-3); }
.spaltenliste { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px; align-items: center; }
.spaltenliste code {
  font-size: 12.5px; font-weight: 700; font-family: ui-monospace, Consolas, monospace;
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: 7px; padding: 4px 10px;
}
.spaltenliste .dazu { font-size: 12.5px; color: var(--ink-2); }
.beispielcode {
  margin: 0; overflow-x: auto; font-family: ui-monospace, Consolas, monospace;
  font-size: 13px; line-height: 1.75; background: #F7FAFB; color: var(--ink);
  border: 1px solid var(--linie); border-left: 3px solid var(--gruen); border-radius: 10px;
  padding: 13px 15px; white-space: pre;
}
.fehlerliste { margin: 0; padding-left: 22px; font-size: 14.5px; color: var(--ink-2); }
.fehlerliste li { margin-bottom: 7px; }
.fehlerliste b { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════ Ablegefeld */
.ablegefeld {
  font: inherit; border: 2px dashed var(--linie-2); border-radius: 14px; background: #FAFCFD;
  padding: 34px 24px; text-align: center; cursor: pointer; display: block; width: 100%;
  color: var(--ink); transition: border-color .14s ease, background .14s ease;
}
.ablegefeld:hover { border-color: var(--blau); background: var(--blau-hell); }
.ablegefeld.ueber { border-color: var(--blau); background: var(--blau-hell); border-style: solid; }
.ablegefeld .gross { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; display: block; }
.ablegefeld .klein { font-size: 13px; color: var(--ink-2); display: block; margin-top: 5px; }
.ablegefeld svg { color: var(--ink-3); margin-bottom: 4px; }
.ablegefeld:hover svg, .ablegefeld.ueber svg { color: var(--tiefblau); }

/* ════════════════════════════════════════════════════════════════ Vorschau */
.vorschau { border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; margin-top: 18px; }
.vorschau-kopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
  font-size: 13px; color: var(--ink-2);
}
.vorschau-kopf b { color: var(--ink); }
.vorschau-kopf .dateiname { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.werteliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding: 18px 16px; }
.wertkarte { border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; background: var(--weiss); }
.wertkarte .bez {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
}
.wertkarte .zahl {
  font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 34px; line-height: 1.15;
  letter-spacing: -.03em; color: var(--tiefblau); font-variant-numeric: tabular-nums;
}
.wertkarte .roh { font-size: 12px; color: var(--ink-3); }
.vorschau-warnungen { padding: 0 16px 16px; }
.vorschau-warnungen .meldung { margin-top: 10px; margin-bottom: 0; }
.meldung.warn { background: #FBF1DC; border-color: #EBD9B2; color: #7A5A16; }
.nicht-gespeichert {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--linie); background: #FBF1DC; color: #7A5A16;
  font-size: 13.5px; font-weight: 600;
}
.nicht-gespeichert svg { flex: none; }
.wochenliste { display: flex; gap: 7px; flex-wrap: wrap; padding-top: 4px; }
.wochenmarke {
  font-size: 12px; font-weight: 600; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 7px; padding: 4px 9px; font-variant-numeric: tabular-nums;
}
.wochenmarke.ersetzt { background: var(--blau-hell); border-color: #CDE5F3; color: var(--tiefblau); }
.exportliste { display: flex; gap: 6px; flex-wrap: wrap; }
.exportmarke {
  font-size: 12px; font-weight: 600; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 7px; padding: 3px 8px;
}
/* Eine fehlende Teilliste ist blasser, aber nicht unsichtbar: Was fehlt, muss man sehen
   können — sonst wäre die Zeile eine Aufzählung dessen, was schon da ist, und niemand
   bemerkte die Lücke. Gestrichelt statt grau allein, damit es auch ohne Farbe auffällt. */
.exportmarke.fehlt {
  background: transparent; border-style: dashed; color: var(--ink-3); font-weight: 500;
}
tbody tr.spaet { background: var(--warn-flaeche); }
tbody tr.kandidat { background: var(--warn-flaeche); }
tbody tr.kandidat:hover { background: #FBEEEB; }
.formfuss.oben { margin-top: 0; margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════ Kopfzahlen und Filter */
.kopfzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kz-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; }
.kz-karte .bez {
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-2); display: block;
}
.kz-karte .wert {
  font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 32px; line-height: 1.15;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tiefblau);
}
.kz-karte .wert.gruen { color: var(--gruen-dunkel); }
.kz-karte .wert.rot { color: var(--warn-text); }
.kz-karte .fuss { font-size: 12px; color: var(--ink-3); display: block; }

.filtergruppe { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filtergruppe .titel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px;
}
.filterknopf {
  font: inherit; cursor: pointer; font-size: 13px; font-weight: 600; padding: 5px 12px;
  border-radius: 999px; border: 1px solid var(--linie-2); background: var(--weiss); color: var(--ink-2);
}
.filterknopf:hover { border-color: var(--blau); color: var(--tiefblau); background: var(--blau-hell); }
.filterknopf[aria-pressed="true"] { background: var(--tiefblau); border-color: var(--tiefblau); color: #fff; }

/* ═══════════════════════════════════════════ Balken mit Schwellenmarke */
.balkenzelle { width: 190px; }
.balken2 {
  position: relative; height: 20px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 5px; overflow: hidden;
}
.balken2 .fuellung { height: 100%; width: var(--w, 0%); border-radius: 4px 0 0 4px; }
.balken2 .fuellung.hoch { background: var(--gruen); }
.balken2 .fuellung.mittel { background: var(--blau); }
.balken2 .fuellung.niedrig { background: var(--koralle); }
/* Die Schwelle als Linie: so ist ohne Zahlenlesen sichtbar, wie nah ein Kurs dran ist. */
.balken2 .marke {
  position: absolute; top: -1px; bottom: -1px; left: var(--m, 53%); width: 2px;
  background: var(--anthrazit); opacity: .55;
}
.balkenzelle .unterzeile {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
th.gruppe {
  text-align: center; border-left: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2);
  color: var(--tiefblau); letter-spacing: .1em;
}
td.trennlinie, th.trennlinie { border-left: 1px solid var(--linie-2); }
td.nr { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 1%; }
td.zahl { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.kurs { font-weight: 700; white-space: nowrap; }
.kurs small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.trend { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.trend.steigend { color: var(--gruen-dunkel); }
.trend.fallend { color: var(--warn-text); }
.trend.stabil { color: var(--ink-2); }
.trend.keiner { color: var(--ink-3); font-weight: 400; }

/* ═══════════════════════════════════════════════════ Info hinter dem (i) */
.info-halter { position: relative; display: inline-flex; }
.info-knopf {
  font: inherit; width: 23px; height: 23px; flex: none; cursor: pointer; border-radius: 50%;
  border: 1px solid var(--linie-2); background: var(--weiss); color: var(--ink-2);
  font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 12px; line-height: 1;
  display: grid; place-items: center;
  position: relative; /* Träger für den unsichtbaren Touch-Halo (::after, 640er-Block) */
}
.info-knopf:hover, .info-knopf[aria-expanded="true"] {
  background: var(--tiefblau); border-color: var(--tiefblau); color: #fff;
}
.info-tafel {
  position: absolute; left: 0; top: calc(100% + 10px); width: min(560px, calc(100vw - 48px));
  z-index: 60; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  box-shadow: 0 22px 50px rgba(20,50,70,.26); padding: 18px 20px; text-align: left;
  font-size: 13px; color: var(--ink-2); line-height: 1.62;
}
.info-tafel[hidden] { display: none; }
.info-tafel h4 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px;
}
.info-tafel p { margin: 0 0 12px; }
.info-tafel p:last-child { margin-bottom: 0; }
.info-tafel b { color: var(--ink); }
.info-tafel code {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 5px; padding: 1px 6px;
}
/* Der Schließknopf der Tafel: nur auf schmalen Schirmen sichtbar (640er-Block), wo die
   Tafel ein Blatt am unteren Rand ist — dort gibt es kein Escape, und „außen tippen"
   ist unsichtbares Wissen. Grund UND Schriftfarbe ausdrücklich (Handout §3.10);
   --ink-2 auf Weiß gemessen 5,55:1. */
.info-tafel .schliessen {
  display: none; float: right; width: 40px; height: 40px; margin: -6px -8px 6px 10px;
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  place-items: center; border: 1px solid var(--linie-2); border-radius: 10px;
  background: var(--weiss); color: var(--ink-2);
}

/* ══════════════════════════════════════ Anleitungs-Backend (Verwaltung) */
.zweispalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.feld-reihe.drei { grid-template-columns: repeat(3, 1fr); }
.feld-mit-knopf { display: flex; gap: 8px; align-items: center; }
.feld-mit-knopf input { flex: 1; }
.satzliste { display: flex; flex-direction: column; gap: 7px; }
.satzzeile { display: flex; align-items: center; gap: 6px; }
.satzzeile .nummer {
  width: 20px; flex: none; text-align: right; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.satzzeile input { flex: 1; }
.fehlerzeile { display: flex; align-items: flex-start; gap: 6px; }
.fehlerzeile .felder { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pfeilknopf.weg { color: var(--warn-text); border-color: var(--warn-linie); }
.pfeilknopf.weg:hover:not(:disabled) { background: var(--warn-flaeche); border-color: var(--warn-text); color: var(--warn-text); }
.vorschau-spalte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px;
}
.vorschau-titel {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 14px;
}
.vorschau-rahmen { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; }
.preisblock h4 {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 12px; margin: 0 0 10px;
}
.preisliste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.preiszeile {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px; padding: 7px 10px;
}
.preiszeile .ab { color: var(--ink-2); }
.preiszeile .betrag { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
.preisneu { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.preisneu input { flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: 9px; font: inherit; font-size: 14px; }

/* ═══════════════════════ Nur auf Papier / nur am Schirm (Anleitung drucken) */
.nur-druck { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Die Anleitung soll am Rezeptionsplatz liegen können: alles weg außer Abschnitt 1. */
@media print {
  .band, .zurueck, .unterkopf, .nur-schirm, .aufgabenstreifen, .legende,
  .meldung, .werkzeuge { display: none !important; }
  body { background: #fff; color: #000; }
  .inhalt, .inhalt.tief { padding: 0; max-width: none; margin: 0; }
  .karte { border: 0; padding: 0; }
  .karten-kopf .num { display: none; }
  .beispielcode { border: 1px solid #999; border-left: 3px solid #666; background: #fff; }
  .pfadzeile { border: 1px solid #999; background: #fff; color: #000; }
  .nur-druck { display: block; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid #000; }
  .nur-druck b {
    font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; display: block;
  }
  .nur-druck h2 { font-family: 'Poppins', sans-serif; font-size: 20px; margin: 4px 0 0; }
  .anleitung-block { break-inside: avoid; }
}

/* ============================================================ Handy & Tablet
 * „Desktop und Handy gleichwertig" war die Vorgabe — deshalb bekommt jede Ansicht
 * hier eine eigene Behandlung und nicht nur eine schmalere Spalte. */
@media (max-width: 1100px) {
  /* Anleitung und Vorschau übereinander statt nebeneinander — zwei Spalten unter
     550 px Breite lesen sich beide schlecht. */
  .zweispalten { grid-template-columns: 1fr; }
  .feld-reihe.drei { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .feld-reihe, .feld-reihe.drei { grid-template-columns: 1fr; }

  /* Sieben Spalten sind auf einem Handy nicht lesbar, und der Wagenruecklauf der ganzen
   * Seite ist tabu. Aus jeder Zeile wird deshalb eine Karte: die Beschriftung der Spalte
   * steht vor dem Haekchen (data-label am <td>), und gestapelt statt nebeneinander. */
  .rechtetafel, .rechtetafel thead, .rechtetafel tbody,
  .rechtetafel tr, .rechtetafel th, .rechtetafel td { display: block; }
  /* Die Basisregel fuer table setzt min-width: 700px -- richtig fuer eine echte Tabelle,
   * falsch fuer gestapelte Karten. Ohne diese Zeile laeuft die Tafel INNEN quer, obwohl
   * jede Zeile schon gestapelt ist: gemessen 700 px Inhalt in 341 px Rahmen. */
  .rechtetafel { min-width: 0; }
  .rechtetafel thead { display: none; }
  .rechtetafel tbody tr:not(.gruppen-zeile) {
    border-top: 1px solid var(--linie); padding: 4px 0 10px;
  }
  .rechtetafel th:first-child, .rechtetafel td:first-child { position: static; }
  .rechtetafel td { display: flex; align-items: center; gap: 10px; padding: 5px 14px; text-align: left; }
  .rechtetafel td::before {
    content: attr(data-label); flex: 1; font-size: 13px; color: var(--ink-2);
  }
  .rechtetafel td.spalte-text { display: block; }
  .rechtetafel td.spalte-text::before {
    display: block; font-weight: 700; color: var(--ink-3); font-size: 11.5px;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px;
  }
  .rechtetafel .spalte-alle { background: none; }

  /* ⚠ AUF DEM HANDY GIBT ES KEIN HOVER. Der Grund steckt sonst nur im title-Attribut und
   * im Vorlese-Text -- ein Mensch mit Finger sieht also nur einen Strich und fragt sich,
   * warum. Hier bekommt er deshalb seine eigene Zeile (Handout 3.7). */
  .nicht-anwendbar { display: flex; align-items: baseline; gap: 8px; width: auto; height: auto; cursor: default; }
  .nicht-anwendbar .nur-vorlesen {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
    font-size: 12.5px; font-weight: 400; color: var(--ink-3); text-align: left;
  }
  .rechtetafel td:has(.nicht-anwendbar) { align-items: baseline; }
  .rechtetafel th.recht-halter, .rechtetafel tbody th:first-child { padding: 10px 14px 2px; }
  .recht-name b { font-family: 'Poppins', sans-serif; font-size: 15px; }
  .gruppen-zeile th { border-top: 0; }

  /* Ein Reiter je Rolle untereinander, sonst wird jeder zu schmal fuer den Namen. */
  .reiterleiste { grid-template-columns: 1fr; }
  .blattkopf .zeilen-aktion { margin-left: 0; }

}

@media (max-width: 640px) {
  .band { padding: 12px 16px 66px; }
  .band.schmal { padding-bottom: 24px; }
  .wortmarke .trenner { display: none; }
  .wortmarke b { font-size: 18px; }
  .wortmarke em { font-size: 10px; letter-spacing: .13em; }
  .band-rechts { gap: 8px; }
  /* Die reine Beschriftung steht auch in der Zeile unter der Begrüßung — der
     Umschalter dagegen muss erreichbar bleiben, den gibt es sonst nirgends. */
  .standort-chip:not(.waehlbar) { display: none; }
  .standort-chip.waehlbar { padding: 4px 10px; font-size: 12px; }
  .ort-menue { width: min(236px, calc(100vw - 32px)); }
  /* Neben dem (i) ist auf schmalen Schirmen kein Platz: als Blatt am unteren Rand. */
  .info-tafel {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto;
    max-height: 72vh; overflow-y: auto;
  }
  .balkenzelle { width: 150px; }
  /* Auf dem Handy untereinander: zwei Segmente mit Text werden sonst unlesbar schmal. */
  .modus-schalter, .modus-schalter.gross { grid-template-columns: 1fr; }
  .benutzer-knopf { padding: 4px; }
  .benutzer-knopf .name, .benutzer-knopf .pfeil { display: none; }
  .klappmenue { width: min(272px, calc(100vw - 32px)); }

  .begruessung { margin-top: 18px; }
  .begruessung h1 { font-size: 22px; }
  .begruessung p { font-size: 12.5px; }

  .inhalt { padding: 0 16px 36px; }
  .inhalt.hoch { margin-top: -42px; }
  .inhalt.tief { padding-top: 20px; }

  .kacheln { grid-template-columns: 1fr; gap: 12px; }
  .kachel { min-height: 0; padding: 16px; }

  .unterkopf h2 { font-size: 21px; }
  .unterkopf .rechts { margin-left: 0; width: 100%; }
  .unterkopf .rechts .knopf { flex: 1; }

  .kz-gross { font-size: 42px; }
  .kw-wahl { width: 100%; }
  .kw-wahl .kw-text { flex: 1; min-width: 0; font-size: 14px; }
  .werkzeuge .rechts { margin-left: 0; width: 100%; }

  .karte { padding: 18px; }
  .dialog-grund { padding: 16px 12px 40px; }
  .dialog-inhalt { padding: 18px; }
  .formfuss .knopf { flex: 1; }

  /* Das (i) als Touchziel: sichtbar 30 px, mit unsichtbarem Halo 44 px. */
  .info-knopf { width: 30px; height: 30px; font-size: 14px; }
  .info-knopf::after { content: ''; position: absolute; inset: -7px; }
  .info-tafel .schliessen { display: grid; }
}

/* ══════════════════════════════════════════════════════════ Slack-Meldungen
 * Nur, was es noch nicht gab. Karte, Formularfelder, Tabellen und Meldungsstreifen
 * kommen unveraendert aus dem Bestand -- eine zweite Formsprache fuer eine neue Seite
 * waere eine zweite Oberflaeche. */

/* Der Nachrichtentext, wortgleich wie er nach Slack ginge.
 * ⚠ Als <pre>, damit Zeilenumbrueche stehen bleiben: die Grundlagen-Zeile haengt mit
 * einer Leerzeile darunter, und ohne `white-space: pre-wrap` liefe sie in den Satz
 * hinein. `word-break` faengt lange Kanalnamen ab, sonst schiebt die Karte quer. */
.nachricht-vorschau {
  font: inherit; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; margin: 0 0 18px;
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--tiefblau);
  border-radius: 10px; padding: 14px 16px; color: var(--ink);
}

/* Die Wochen einzeln. Ohne die Ruecknahme der Mindestbreite erzwingt die allgemeine
 * Tabellenregel (min-width: 700px) auch bei vier schmalen Spalten einen Querbalken. */
.grundlage { min-width: 0; }
.grundlage th, .grundlage td { padding: 8px 14px; font-size: 13px; }

/* Kaestchen mit Text daneben -- fuer die Standortauswahl einer Regel. Anders als in der
 * Rechte-Tafel steht die Beschriftung hier direkt am Haken und nicht in der Spalte. */
.haken-reihe { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 6px; }
.haken-mit-text { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.haken-mit-text input { width: 18px; height: 18px; accent-color: var(--tiefblau); cursor: pointer; }

/* Was dem Team zuletzt gesagt wurde -- Plakette, Zeitpunkt und der Knopf zum Nachtragen. */
.regel-stand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.regel-stand small { color: var(--ink-2); }

/* Das aufgeklappte Formular einer Regel: abgesetzt, damit man sieht, was noch zur Karte
 * gehoert und was schon Bearbeitung ist. */
.regel-formular { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linie); }

/* Die dritte Plaketten-Farbe: „hier gilt gerade etwas Besonderes". Nicht rot -- es ist
 * kein Fehler, sondern ein Zustand, den jemand kennen muss. */
.pill.warn { background: #FBF1DC; color: #7A5A16; }

@media (max-width: 720px) {
  .regel-formular .feld-reihe { grid-template-columns: 1fr; }
}