/* ============================================================================
   WAVEPILOT — Corporate Design System
   KI-Schulungs- & Wellen-App der Akademie Überlingen.
   Dunkles Anthrazit + AÜ-Rot, Wellen-Leitmotiv. Alle Farben aus zentralen Tokens.
   Schriften selbst gehostet (CSP font-src 'self').
   ============================================================================ */

/* --- Selbst gehostete Schriften (Variable Fonts, Latin) --------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.260c81a4759b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.938c6e8019b6.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --- Design-Tokens ---------------------------------------------------------- */
:root {
  /* Flächen — dunkler Look bleibt (Entscheidung 50), nur der Blaustich ist raus:
     neutral-warmes Anthrazit bei gleicher Helligkeit, damit AÜ-Rot nicht gegen
     Navy vibriert. Die -rgb-Tripel erlauben Transparenzstufen ohne Hardcodes. */
  --wp-bg-app: #1a1618;
  --wp-bg-surface: #242023;
  --wp-bg-surface-elevated: #2f292c;
  --wp-bg-interactive: #383033;
  --wp-bg-app-rgb: 26, 22, 24;
  --wp-bg-surface-rgb: 36, 32, 35;
  --wp-bg-surface-elevated-rgb: 47, 41, 44;
  --wp-bg-interactive-rgb: 56, 48, 51;

  /* Marke — AÜ-Rot (Entscheidung 50) */
  --wp-primary: #e20613;
  --wp-primary-strong: #9a1d28;
  --wp-primary-soft: #f04050;
  --wp-secondary: #c70511;
  --wp-primary-rgb: 226, 6, 19;
  --wp-primary-soft-rgb: 240, 64, 80;

  /* Text */
  --wp-text-primary: #e9e4e6;
  --wp-text-secondary: #a89ea2;
  --wp-text-muted: #a39a9e;

  /* Rot für TEXTSTELLEN (Links, Akzentzahlen, Pflicht-Sternchen).
     Eigener Ton, weil das Flächen-Rot auf den Karten farblich zu dicht am
     Untergrund liegt und dadurch stumpf statt kräftig wirkt. Die Marken-
     und Flächenfarben oben bleiben unangetastet (Entscheidungen 50 + 63).
     Beim Überfahren wird es HELLER — auf dunklem Grund ist Aufhellen das
     Signal für „reagiert", Abdunkeln wirkt wie ausgegraut. */
  --wp-primary-text: #ff5c66;
  --wp-primary-text-hover: #ff8085;
  --wp-on-accent: #ffffff;   /* heller Text auf AÜ-Rot */
  --wp-neutral-rgb: 196, 182, 187;   /* neutrale Grautöne für Linien und Spuren */

  /* Linien */
  --wp-border: rgba(var(--wp-neutral-rgb), 0.22);
  --wp-border-strong: rgba(var(--wp-neutral-rgb), 0.34);
  --wp-border-active: rgba(var(--wp-primary-soft-rgb), 0.75);

  /* Statusfarben — Domänen-Ampel, bewusst NICHT umgefärbt */
  --wp-success: #2fc58d;
  --wp-warning: #e8b44f;
  --wp-danger: #df5b65;
  /* „Info" ist keine Ampelfarbe der Fachlogik, sondern ein neutraler Hinweis-Ton
     („online", „Vorschlag", „angefordert"). Der alte Wert lag mitten in der
     abgelösten Cyan-Marke und wirkte als deren letzter Rest — jetzt neutral
     entsättigt, damit er weder nach Marke noch nach Fehler aussieht. */
  --wp-info: #8fa6b8;
  --wp-info-rgb: 143, 166, 184;

  /* Verläufe */
  --wp-gradient-wave: linear-gradient(135deg, #f04050 0%, #e20613 38%, #9a1d28 72%, #6d0f1b 100%);
  --wp-gradient-app: radial-gradient(1200px 680px at 78% -8%, rgba(var(--wp-primary-rgb), 0.10), transparent 60%),
                     radial-gradient(900px 560px at 6% 8%, rgba(var(--wp-primary-soft-rgb), 0.07), transparent 55%),
                     var(--wp-bg-app);

  /* Radien */
  --wp-radius-sm: 8px;
  --wp-radius-md: 14px;
  --wp-radius-lg: 20px;
  --wp-radius-xl: 28px;
  --wp-radius-pill: 999px;

  /* Schatten */
  --wp-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.18);
  --wp-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.24);
  --wp-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.40);
  --wp-shadow-glow: 0 0 24px rgba(var(--wp-primary-rgb), 0.22);

  /* Abstände */
  --wp-space-1: 4px;
  --wp-space-2: 8px;
  --wp-space-3: 12px;
  --wp-space-4: 16px;
  --wp-space-5: 24px;
  --wp-space-6: 32px;
  --wp-space-7: 48px;

  /* Container — WavePilot ist eine reine Desktop-/Laptop-App: die Breite des
     Monitors wird genutzt (Sergej 06.08.2026 und erneut 10.08.2026,
     „keine Schlauch-App"). Der frühere harte Deckel von 1520px ließ auf einem
     1920er-Monitor 400px und auf einem 2560er sogar 1040px ungenutzt — während
     die Mitarbeitenden-Tabelle gleichzeitig Spalten verstecken musste. Jetzt
     sind es durchgehend 94vw mit einem sehr hohen Deckel, der nur noch bei
     extremen Ultrawide-Bildschirmen greift. */
  --wp-container: min(2560px, 94vw);
  /* Fließtext bleibt lesbar begrenzt — eine Zeile über die volle Monitorbreite
     ist nicht mehr erfassbar. Gilt NUR für Text, nicht für Tabellen/Raster. */
  --wp-lesebreite: 105ch;

  /* Typografie */
  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Bewegung */
  --wp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wp-dur: 0.18s;
}

/* --- Reset / Basis ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--wp-text-primary);
  background: var(--wp-gradient-app);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(var(--wp-primary-soft-rgb), 0.30); color: #fff; }

a { color: var(--wp-primary-text); text-decoration: none; }
a:hover { color: var(--wp-primary-text-hover); text-decoration: underline; }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--wp-primary-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Schmaler, markenkonformer Scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--wp-bg-app); }
::-webkit-scrollbar-thumb { background: var(--wp-bg-interactive); border-radius: 999px; border: 3px solid var(--wp-bg-app); }
::-webkit-scrollbar-thumb:hover { background: #4a3f43; }

/* --- Typografie ------------------------------------------------------------- */
h1, h2, h3, h4 { color: #fff; line-height: 1.2; margin: 0; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--wp-space-3);
}
h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: var(--wp-space-6) 0 var(--wp-space-3);
}
h3 { font-size: 1rem; font-weight: 600; margin: var(--wp-space-4) 0 var(--wp-space-2); }
p { margin: 0 0 var(--wp-space-3); }
strong { color: #fff; font-weight: 600; }
small { color: var(--wp-text-secondary); }

/* --- App-Kopf --------------------------------------------------------------- */
.kopf {
  background: linear-gradient(180deg, rgba(var(--wp-bg-surface-rgb), 0.96), rgba(var(--wp-bg-app-rgb), 0.92));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wp-border);
  position: relative;
}
.kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--wp-gradient-wave);
  opacity: 0.55;
}
.kopf-inner {
  max-width: var(--wp-container);
  margin: 0 auto;
  padding: var(--wp-space-3) var(--wp-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp-space-4);
}
.marke { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; }
.marke:hover { text-decoration: none; }
/* Die Logodatei ist quadratisch, das Motiv füllt aber nur 29 % der Höhe.
   Ohne Zuschnitt bliebe bei 46px Rahmenhöhe ein 13px kleines Logo übrig —
   darum wird der leere Rand per object-fit weggeschnitten. */
.marke-logo { height: 44px; width: 132px; object-fit: cover; object-position: center; display: block; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
}
.marke-name b { color: var(--wp-primary-text); font-weight: 700; }
/* Kopfzeilen-Suche (Entscheid 79): steht auf jeder Seite. Sie nimmt den
   mittleren Platz ein, den das space-between des Kopfes ohnehin frei laesst —
   Marke links, Suche mittig, Benutzer rechts. */
.kopf-suche {
  display: flex; align-items: center; gap: var(--wp-space-2);
  margin: 0; flex: 1 1 auto; max-width: 460px;
}
.kopf-suche input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  padding: 0.42rem 0.7rem;
  font-size: 0.86rem;
}
/* Nur fuer Vorlesewerkzeuge — sichtbar waere hier doppelt zum Platzhalter. */
.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 860px) {
  .kopf-suche { max-width: 200px; }
  .kopf-suche button { display: none; }
}
/* Trefferseite der Suche */
.such-hinweis { font-size: 0.85rem; color: var(--wp-text-secondary); margin: var(--wp-space-3) 0 0; }
.such-zahl {
  font-size: 0.78rem; font-weight: 600; color: var(--wp-text-secondary);
  background: rgba(var(--wp-bg-interactive-rgb), 0.55);
  border-radius: var(--wp-radius-md); padding: 0.1rem 0.45rem; margin-left: 0.4rem;
}
.such-marke {
  display: inline-block; margin-left: 0.4rem; font-size: 0.7rem;
  color: var(--wp-text-secondary); border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius-md); padding: 0.05rem 0.4rem;
}
.kopf-nav { display: flex; align-items: center; gap: var(--wp-space-4); }
.kopf-user {
  font-size: 0.82rem; color: var(--wp-text-secondary);
  display: inline-flex; align-items: center; gap: var(--wp-space-2);
}
.kopf-user::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp-primary-soft); box-shadow: 0 0 8px var(--wp-primary-soft);
}
.logout-form { margin: 0; }

/* --- Bereichs-Navigation (Blaupause 2.1, 09.08.2026) ------------------------ */
.app-nav { background: transparent; }
.app-nav-inner {
  max-width: var(--wp-container);
  margin: 0 auto;
  padding: var(--wp-space-4) var(--wp-space-5) 0;
  display: flex; align-items: center; gap: var(--wp-space-2); flex-wrap: wrap;
}
/* O-9 (09.09.2026): Die Leiste traegt jetzt Kurzbeschreibung und Info-Knopf —
   die doppelte Kachelreihe „Bereiche" auf dem Dashboard ist dafuer entfallen.
   Die Huelle traegt Rahmen und Zustand, damit der Info-Knopf NEBEN dem Link
   liegen kann (aufklappbares Element in einem Link waere ungueltiges HTML). */
.nav-huelle {
  position: relative; display: flex; flex: 1 1 12rem; min-width: 11rem; max-width: 15rem;
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
  background: rgba(var(--wp-bg-interactive-rgb), 0.45);
  transition: background var(--wp-dur) var(--wp-ease),
              border-color var(--wp-dur) var(--wp-ease),
              box-shadow var(--wp-dur) var(--wp-ease);
}
.nav-huelle:hover { background: var(--wp-bg-interactive); border-color: var(--wp-border-active); }
.nav-huelle.aktiv {
  background: var(--wp-gradient-wave); border-color: transparent; box-shadow: var(--wp-shadow-glow);
}
.nav-punkt {
  flex: 1; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.5rem 2rem 0.55rem 0.85rem;
  font-family: var(--font-body); text-decoration: none; color: var(--wp-text-secondary);
  min-width: 0;
}
.nav-punkt:hover { text-decoration: none; color: var(--wp-text-primary); }
.nav-titel {
  display: inline-flex; align-items: center; gap: var(--wp-space-2);
  font-size: 0.9rem; font-weight: 600; line-height: 1.2; color: var(--wp-text-primary);
}
.nav-text {
  font-size: 0.72rem; line-height: 1.3; color: var(--wp-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nav-huelle.aktiv .nav-titel, .nav-huelle.aktiv .nav-text, .nav-huelle.aktiv .nav-punkt {
  color: var(--wp-on-accent);
}
.nav-info { position: absolute; top: 0.4rem; right: 0.4rem; }
.nav-info > summary {
  list-style: none; cursor: pointer; width: 1.25rem; height: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--wp-border-strong);
  background: var(--wp-bg-surface); color: var(--wp-text-secondary);
  font-size: 0.72rem; font-weight: 700; font-style: italic;
}
.nav-info > summary::-webkit-details-marker { display: none; }
.nav-info > summary:hover { color: var(--wp-text-primary); }
.nav-info > p {
  position: absolute; right: 0; top: 1.6rem; z-index: 20; width: min(24rem, 80vw);
  margin: 0; padding: var(--wp-space-3);
  background: var(--wp-bg-surface-elevated); border: 1px solid var(--wp-border-strong);
  border-radius: var(--wp-radius-md); font-size: 0.82rem; line-height: 1.5;
  color: var(--wp-text-secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.btn-aktualisieren { white-space: nowrap; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; padding: 0.1em 0.45em;
  border-radius: var(--wp-radius-pill);
  background: var(--wp-danger); color: #fff; font-size: 0.78rem; font-weight: 700;
}
/* --- Schulungsstand-Karte (Blaupause 2.3, S7) ------------------------------- */
.stand-zahlen { display: flex; gap: var(--wp-space-6); flex-wrap: wrap; margin-bottom: var(--wp-space-5); }
.stand-zahl { display: flex; flex-direction: column; gap: var(--wp-space-1); }
.stand-wert { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--wp-text-primary); }
.stand-wert.stand-gruen { color: var(--wp-success); }
.stand-label { color: var(--wp-text-secondary); font-size: 0.88rem; }
.stand-balken {
  display: flex; width: 100%; height: 22px; border-radius: var(--wp-radius-pill);
  overflow: hidden; background: var(--wp-bg-interactive);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.3);
}
.stand-segment { display: block; height: 100%; min-width: 0; transition: width var(--wp-dur) var(--wp-ease); }
.stand-segment.rot { background: linear-gradient(180deg, #e97078, var(--wp-danger)); }
.stand-segment.gelb { background: linear-gradient(180deg, #f0c56d, var(--wp-warning)); }
.stand-segment.gelb.stufe-3 { background: linear-gradient(180deg, #d9ab4a, #c9962f); }
.stand-segment.gruen { background: linear-gradient(180deg, #4fd6a2, var(--wp-success)); box-shadow: 0 0 14px rgba(47,197,141,.35); }
.stand-legende { display: flex; gap: var(--wp-space-5); flex-wrap: wrap; margin-top: var(--wp-space-4); }
.stand-legende .legende-punkt.gelb.stufe-3 { background: #c9962f; }
.stand-ausnahmen { display: flex; flex-direction: column; gap: var(--wp-space-2); margin-top: var(--wp-space-4); }
.stand-ausnahme { font-size: 0.9rem; color: var(--wp-text-secondary); text-decoration: none; }
.stand-ausnahme.warn { color: var(--wp-warning); font-weight: 600; }
a.stand-ausnahme.warn:hover { color: var(--wp-text-primary); }
.stand-ausnahme.grau { color: var(--wp-text-muted); }
.aktion-karte.leer { opacity: 0.55; }
a.aktion-karte { text-decoration: none; }
a.aktion-karte:hover { transform: translateY(-2px); text-decoration: none; }

/* --- Listen-Umbau S8 (Tabs, Rubriken, Aufklapp-Aktionen) -------------------- */
.status-detail { font-size: 0.82rem; color: var(--wp-text-secondary); margin-top: 4px; }
.rubrik-zeile td {
  background: var(--wp-bg-interactive); color: var(--wp-text-primary);
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  border-top: 2px solid var(--wp-border-strong);
}
.zeilen-aufklapp { margin-top: 6px; }
.zeilen-aufklapp summary {
  cursor: pointer; color: var(--wp-text-secondary); font-size: 0.85rem;
  font-weight: 600; list-style: none;
}
.zeilen-aufklapp summary::before { content: "▸ "; }
.zeilen-aufklapp[open] summary::before { content: "▾ "; }
.zeilen-aufklapp[open] {
  background: var(--wp-bg-surface-elevated); border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius-sm); padding: var(--wp-space-3); margin-top: 8px;
}
.zeilen-aufklapp .zeilen-form { margin-top: 6px; }
.liste-neu td { vertical-align: top; }

/* --- Aktionsspalte + Dialog „Status ändern" (15.09.2026, Sergej) ------------
   Vorher standen fünf Formulare untereinander in einer schmalen Tabellenzelle:
   Beschriftungen und Felder gequetscht, „Löschen" überlappte den Rahmen. Jetzt
   trägt die Zelle nur eine Knopfleiste; die Prozess-Aktionen liegen in einem
   modalen Dialog mit drei nummerierten Abschnitten. Ohne JavaScript klappt
   derselbe Inhalt in der Zeile auf (.aktion-dialog[open]). */
.zelle-aktion { min-width: 11rem; }
.aktion-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-2); }
.btn-klein { padding: 0.5rem 0.9rem; font-size: 0.82rem; white-space: nowrap; }
.aktion-leiste .inline-form { display: inline-flex; }
.aktion-loeschen {
  display: inline-block; margin-top: var(--wp-space-3); padding: 0.15rem 0;
  font-size: 0.8rem; font-weight: 600; color: var(--wp-danger); text-decoration: none;
  border-bottom: 1px dashed rgba(223, 91, 101, 0.45);
}
.aktion-loeschen:hover { color: #ff8a90; border-bottom-style: solid; text-decoration: none; }
.aktion-followup { display: flex; flex-wrap: wrap; gap: var(--wp-space-2); width: 100%; }
.aktion-followup input { flex: 1 1 9rem; min-width: 0; padding: 0.45rem 0.7rem; font-size: 0.85rem; }

.aktion-dialog > summary { list-style: none; }
.aktion-dialog > summary::-webkit-details-marker { display: none; }
.aktion-dialog[open] > .aktion-panel { margin-top: var(--wp-space-3); }
.aktion-dialog:not([open]) > .aktion-panel { display: none; }

.aktion-modal {
  width: min(44rem, calc(100vw - 2rem)); max-height: min(92vh, 60rem);
  padding: 0; border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-lg);
  background: linear-gradient(180deg, var(--wp-bg-surface-elevated), var(--wp-bg-surface));
  color: var(--wp-text-primary); box-shadow: var(--wp-shadow-lg);
  overflow: auto; color-scheme: dark;
}
.aktion-modal::backdrop { background: rgba(10, 8, 9, 0.66); backdrop-filter: blur(3px); }
.aktion-modal[open] { animation: aktion-auf var(--wp-dur) var(--wp-ease); }
@keyframes aktion-auf { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aktion-modal[open] { animation: none; } }

.aktion-panel {
  background: linear-gradient(180deg, var(--wp-bg-surface-elevated), var(--wp-bg-surface));
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
}
.aktion-modal .aktion-panel { border: none; border-radius: 0; background: none; }
.aktion-kopf {
  position: relative; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--wp-space-4); padding: var(--wp-space-5) var(--wp-space-5) var(--wp-space-4);
  border-bottom: 1px solid var(--wp-border);
}
.aktion-kopf::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wp-gradient-wave);
}
.aktion-ueberzeile {
  margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wp-text-muted);
}
.aktion-titel { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.aktion-stand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-2) var(--wp-space-4); margin-top: var(--wp-space-2); }
.aktion-stand-termin { font-size: 0.85rem; color: var(--wp-text-secondary); }
.aktion-schliessen {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--wp-border-strong); background: rgba(255, 255, 255, 0.04);
  color: var(--wp-text-primary); font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.aktion-schliessen:hover { background: rgba(255, 255, 255, 0.10); }
.aktion-schliessen:focus-visible { outline: 2px solid var(--wp-border-active); outline-offset: 2px; }

.aktion-abschnitt { padding: var(--wp-space-4) var(--wp-space-5); }
.aktion-abschnitt + .aktion-abschnitt { border-top: 1px solid var(--wp-border); }
.aktion-abschnitt-haupt { background: rgba(var(--wp-primary-rgb), 0.04); }
.aktion-abschnitt-titel {
  display: flex; align-items: center; gap: var(--wp-space-2);
  margin: 0 0 var(--wp-space-3); font-size: 0.95rem; font-weight: 700; color: var(--wp-text-primary);
}
.aktion-nr {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none;
  border-radius: 50%; font-size: 0.78rem; font-weight: 700;
  background: rgba(var(--wp-neutral-rgb), 0.14); color: var(--wp-text-secondary);
}
.aktion-abschnitt-haupt .aktion-nr { background: var(--wp-gradient-wave); color: var(--wp-on-accent); }
.aktion-form { margin: 0; }
.aktion-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp-space-3) var(--wp-space-4); }
.aktion-feld { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.aktion-feld-name { font-size: 0.8rem; font-weight: 600; color: var(--wp-text-primary); }
.aktion-optional { font-weight: 400; color: var(--wp-text-muted); }
.aktion-feld input, .aktion-feld select { width: 100%; }
.aktion-hinweis { margin: var(--wp-space-3) 0 0; font-size: 0.8rem; color: var(--wp-text-secondary); max-width: none; }
.aktion-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--wp-space-2); margin-top: var(--wp-space-3); }
.aktion-form-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap; }
.aktion-form-zeile .aktion-hinweis { margin: 0; flex: 1 1 18rem; }
@media (max-width: 640px) {
  .aktion-felder { grid-template-columns: 1fr; }
  .aktion-kopf, .aktion-abschnitt { padding-left: var(--wp-space-4); padding-right: var(--wp-space-4); }
  .aktion-knoepfe .btn { width: 100%; }
}

/* Datum-/Uhrzeitfelder im dunklen Look: Das Feld „datetime-local" stand in keiner
   Formularregel und erschien deshalb hell mit schwarzer Schrift (15.09.2026). */
input[type="datetime-local"] {
  padding: 0.62rem 0.8rem; font-size: 0.92rem; font-family: var(--font-body);
  color: var(--wp-text-primary); background: var(--wp-bg-app);
  border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-sm);
}
input[type="date"], input[type="datetime-local"] { color-scheme: dark; }

.ruecklink-zeile { margin: 0 0 var(--wp-space-4); }
.ruecklink {
  display: inline-flex; align-items: center; gap: var(--wp-space-2);
  color: var(--wp-text-secondary); font-weight: 600; font-size: 0.88rem;
  text-decoration: none;
}
.ruecklink:hover { color: var(--wp-text-primary); text-decoration: none; }
@media (max-width: 520px) { .nav-punkt { font-size: 0.82rem; padding: 0.5rem 0.75rem; } }

/* --- Inhalt / Fuß ----------------------------------------------------------- */
.inhalt { flex: 1; max-width: var(--wp-container); width: 100%; margin: 0 auto; padding: var(--wp-space-5); }
.inhalt-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-4); flex-wrap: wrap; margin-bottom: var(--wp-space-4); }

.fuss {
  border-top: 1px solid var(--wp-border);
  color: var(--wp-text-muted);
  font-size: 0.75rem; text-align: center;
  padding: var(--wp-space-4);
  background: rgba(var(--wp-bg-app-rgb), 0.6);
}

/* --- Karten / Tafeln -------------------------------------------------------- */
.tafel {
  background: linear-gradient(180deg, var(--wp-bg-surface-elevated), var(--wp-bg-surface));
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius-lg);
  padding: var(--wp-space-5) var(--wp-space-6);
  margin-bottom: var(--wp-space-5);
  box-shadow: var(--wp-shadow-sm);
}
/* Alt-Klasse aus dem AÜ-Design: jetzt dezenter Wellen-Akzent statt Rot. */
.tafel-rot-akzent, .tafel-akzent { position: relative; overflow: hidden; }
.tafel-rot-akzent::before, .tafel-akzent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wp-gradient-wave);
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wp-space-2);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; line-height: 1;
  padding: 0.62rem 1.15rem; border-radius: var(--wp-radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background var(--wp-dur) var(--wp-ease), border-color var(--wp-dur) var(--wp-ease),
              transform var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease), opacity var(--wp-dur);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primaer {
  background: var(--wp-gradient-wave); color: var(--wp-on-accent);
  box-shadow: var(--wp-shadow-sm);
}
.btn-primaer:hover { box-shadow: var(--wp-shadow-md), var(--wp-shadow-glow); color: var(--wp-on-accent); }

.btn-sekundaer {
  background: rgba(var(--wp-bg-interactive-rgb), 0.4); color: var(--wp-text-primary);
  border-color: var(--wp-border-active);
}
.btn-sekundaer:hover { background: var(--wp-bg-interactive); color: #fff; }

.btn-schlicht {
  background: rgba(255, 255, 255, 0.04); color: var(--wp-text-primary);
  border-color: var(--wp-border-strong);
}
.btn-schlicht:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }

/* Tertiär (transparent) */
.btn-tertiaer { background: transparent; color: var(--wp-primary-text); }
.btn-tertiaer:hover { background: rgba(var(--wp-primary-soft-rgb), 0.08); color: var(--wp-primary-text-hover); }

/* Kritisch — nur Löschen/Abbruch/sicherheitskritisch */
.btn-kritisch { background: transparent; color: var(--wp-danger); border-color: rgba(223, 91, 101, 0.5); }
.btn-kritisch:hover { background: rgba(223, 91, 101, 0.12); color: #ff8a90; }

/* --- Formulare -------------------------------------------------------------- */
.feld { margin-bottom: var(--wp-space-4); }
.feld label { display: block; font-weight: 600; font-size: 0.82rem; color: var(--wp-text-primary); margin-bottom: 0.35rem; }
.feld input:not([type="checkbox"]):not([type="radio"]), .feld select, .feld textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
  width: 100%; padding: 0.62rem 0.8rem; font-size: 0.92rem; font-family: var(--font-body);
  color: var(--wp-text-primary);
  background: var(--wp-bg-app);
  border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-sm);
  transition: border-color var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease);
}
.feld input::placeholder, textarea::placeholder { color: var(--wp-text-muted); }
.feld input:focus, .feld select:focus, .feld textarea:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--wp-border-active);
  box-shadow: 0 0 0 3px rgba(var(--wp-primary-soft-rgb), 0.18);
}
.feld select option { background: var(--wp-bg-surface); color: var(--wp-text-primary); }
.feld select[multiple] { min-height: 132px; }

/* Mehrfachauswahl als Checkbox-/Radio-Liste (Django CheckboxSelectMultiple) */
.feld input[type="checkbox"], .feld input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--wp-primary); cursor: pointer; flex: 0 0 auto;
}
.feld ul { list-style: none; margin: 0.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.feld ul li { margin: 0; }
.feld ul label, .feld ul li label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 400; font-size: 0.88rem; margin: 0; cursor: pointer;
  color: var(--wp-text-primary);
}
/* Django 5 rendert CheckboxSelectMultiple/RadioSelect als <div><div><label>…
   — dieselbe umbrechende Reihe wie bei <ul> (17.08.2026, A-6: sonst stapeln
   sich 15 Professionen als Schlauch untereinander). */
.feld > div:has(> div > label > input[type="checkbox"]),
.feld > div:has(> div > label > input[type="radio"]) {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.1rem;
}
.feld > div > div > label:has(> input[type="checkbox"]),
.feld > div > div > label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 400; font-size: 0.88rem; margin: 0; cursor: pointer;
}
.feld ul:empty::after, .feld ul li:only-child:empty::after { content: "Keine Einträge vorhanden. Bitte zuerst in den Stammdaten pflegen."; color: var(--wp-text-muted); font-size: 0.82rem; }
.feld .hilfetext, .hilfetext { font-size: 0.78rem; color: var(--wp-text-secondary); margin-top: 0.25rem; max-width: var(--wp-lesebreite); }
/* Erklärtexte und aufgeklappte Info-Kästen bleiben lesbar schmal, während
   Tabellen und Raster die volle Monitorbreite bekommen. */
.karten-info p, .kachel-info p, details.karten-info, details.kachel-info p { max-width: var(--wp-lesebreite); }
/* Passwort-Auge (A-9, 17.08.2026): Umschalt-Knopf rechts im Passwortfeld. */
.pw-huelle { position: relative; }
.pw-huelle input { padding-right: 2.8rem !important; }
.pw-auge {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; border-radius: var(--wp-radius-sm);
  color: var(--wp-text-secondary); cursor: pointer; font-size: 1.05rem; line-height: 1;
  padding: 0.3rem 0.45rem;
}
.pw-auge:hover, .pw-auge:focus-visible { color: var(--wp-text-primary); background: rgba(255, 255, 255, 0.06); outline: none; }
.pw-auge:focus-visible { box-shadow: 0 0 0 3px rgba(var(--wp-primary-soft-rgb), 0.35); }
.pw-auge-offen { color: var(--wp-primary-text); }
.formfehler { color: #ff9aa0; font-size: 0.82rem; margin-top: 0.3rem; }
.pflicht { color: var(--wp-primary-text); }
.form-aktionen { display: flex; gap: var(--wp-space-3); margin-top: var(--wp-space-5); flex-wrap: wrap; }
/* 17.08.2026 (Sergej, Entscheidung 97): 680 -> 960 px, Felder zweispaltig ueber
   .form-raster (siehe Auth-Block) — „weniger Schlauch nach unten, in der gesamten App". */
.tafel-formular { max-width: 960px; margin-left: auto; margin-right: auto; }

/* Aktions-/Filterzeilen und Inline-Formulare in Tabellen */
.aktion-gruppe { display: flex; gap: var(--wp-space-2); flex-wrap: wrap; }
.inline-form { display: inline; margin: 0; }
.zeilen-form { margin: 0.4rem 0 0; }
.zeilen-form select { width: auto; min-width: 190px; max-width: 100%; }
.filterzeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wp-space-3);
  margin: 0 0 var(--wp-space-4); padding: var(--wp-space-4);
  background: rgba(var(--wp-bg-app-rgb), 0.5); border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
}
.filterzeile label { display: block; font-weight: 600; font-size: 0.74rem; color: var(--wp-text-secondary); margin-bottom: 0.25rem; }
.filterzeile select { width: auto; min-width: 170px; }

/* Info-Knöpfe an Kacheln und Karten (S13, Block P) — reines <details>,
   kein JavaScript (CSP script-src 'self'). */
.kachel-huelle { position: relative; display: flex; }
.kachel-huelle .kachel { flex: 1; }
.kachel-info { position: absolute; top: 0.55rem; right: 0.55rem; }
.kachel-info > summary {
  list-style: none; cursor: pointer; width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--wp-border-strong);
  background: var(--wp-bg-surface); color: var(--wp-text-secondary);
  font-size: 0.8rem; font-weight: 700; font-style: italic;
}
.kachel-info > summary::-webkit-details-marker { display: none; }
.kachel-info > summary:hover { color: var(--wp-text-primary); }
.kachel-info[open] > p, .kachel-info > p {
  position: absolute; right: 0; top: 1.9rem; z-index: 5; width: min(22rem, 70vw);
  margin: 0; padding: var(--wp-space-3);
  background: var(--wp-bg-surface-elevated); border: 1px solid var(--wp-border-strong);
  border-radius: var(--wp-radius-md); font-size: 0.82rem; line-height: 1.5;
  color: var(--wp-text-secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.karten-info { margin-top: var(--wp-space-3); }
.karten-info > summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 600;
  color: var(--wp-text-secondary);
}
.karten-info > p {
  margin: var(--wp-space-2) 0 0; font-size: 0.84rem; line-height: 1.6;
  color: var(--wp-text-secondary);
}

/* Sichtbare Filter-Chips + Sammelaktion (S9, Blaupause 4c.4/4c.5) */
.filter-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-2);
  margin: 0 0 var(--wp-space-4);
}
.filter-chips-titel { font-size: 0.78rem; font-weight: 600; color: var(--wp-text-secondary); }
.filter-treffer { font-size: 0.78rem; color: var(--wp-text-secondary); margin-left: auto; }
/* N27-F2CHIP: lange Standortnamen ohne Trennstelle brechen im Chip um,
   statt die Seite auf schmalen Fenstern seitlich zu sprengen. */
.filter-chips .chip-filter { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
a.chip-filter { text-decoration: none; }
a.chip-filter:hover { border-color: var(--wp-border-strong); }
.sammel-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-3);
  margin: 0 0 var(--wp-space-3);
}
.sammel-leiste .hilfetext { margin: 0; }
.auswahl-spalte { width: 2.4rem; text-align: center; }
.auswahl-spalte input { width: 1.05rem; height: 1.05rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Tabellen --------------------------------------------------------------- */
.tabelle-rahmen { overflow-x: auto; border-radius: var(--wp-radius-md); border: 1px solid var(--wp-border); }
table.liste, table.tabelle {
  width: 100%; border-collapse: collapse;
  background: var(--wp-bg-surface); font-size: 0.88rem;
}
table.liste th, table.tabelle th {
  background: var(--wp-bg-surface-elevated); color: var(--wp-text-secondary);
  text-align: left; font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--wp-border-strong);
}
table.liste td, table.tabelle td {
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--wp-border); color: var(--wp-text-primary);
}
table.liste tbody tr:last-child td, table.tabelle tbody tr:last-child td { border-bottom: none; }
/* Laptop-Breiten: die zehnspaltige Mitarbeitenden-Liste braucht ab etwa 1700px
   abwärts etwas engere Zellen, sonst müsste sie Spalten hinter einem seitlichen
   Scrollbalken verstecken. KEIN Handy-Kompromiss — WavePilot ist eine reine
   Desktop-/Laptop-App (Sergej 10.08.2026). */
@media (max-width: 1700px) {
  table.liste th, table.liste td,
  table.tabelle th, table.tabelle td { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* UX-03 (Audit 06.09.2026): KEIN `anywhere` — damit schrumpfte die Spalte auf
     Null und brach zeichenweise um (Screenshot 1440 px). Mindestbreite haelt die
     Adresse lesbar; wird es enger, scrollt der Tabellen-Rahmen (overflow-x). */
  .zelle-email { overflow-wrap: break-word; }
}
.zelle-email { min-width: 13rem; overflow-wrap: break-word; }
/* Kleinere Laptop-Auflösungen (1536 und darunter sind weit verbreitet):
   ein Hauch kleinere Tabellenschrift bringt die letzten Spalten ins Bild. */
@media (max-width: 1550px) {
  table.liste, table.tabelle { font-size: 0.82rem; }
  table.liste th, table.tabelle th { font-size: 0.70rem; }
}
table.liste tbody tr:hover td, table.tabelle tbody tr:hover td { background: rgba(var(--wp-bg-interactive-rgb), 0.35); }

/* --- Status-Chips ----------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.6rem; border-radius: var(--wp-radius-pill);
  font-size: 0.74rem; font-weight: 600; line-height: 1.4;
  background: rgba(var(--wp-neutral-rgb), 0.12); color: var(--wp-text-secondary);
  border: 1px solid var(--wp-border);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-neutral { color: var(--wp-text-secondary); }
.chip-info { color: var(--wp-info); background: rgba(var(--wp-info-rgb), 0.12); border-color: rgba(var(--wp-info-rgb), 0.3); }
.chip-aktiv { color: var(--wp-primary-text); background: rgba(var(--wp-primary-soft-rgb), 0.12); border-color: rgba(var(--wp-primary-soft-rgb), 0.32); }
.chip-warnung { color: var(--wp-warning); background: rgba(232, 180, 79, 0.12); border-color: rgba(232, 180, 79, 0.3); }
.chip-erfolg { color: var(--wp-success); background: rgba(47, 197, 141, 0.12); border-color: rgba(47, 197, 141, 0.3); }
.chip-kritisch { color: var(--wp-danger); background: rgba(223, 91, 101, 0.12); border-color: rgba(223, 91, 101, 0.3); }

/* --- Ampel (Domänen-Status, dezent) ----------------------------------------- */
.ampel { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--wp-text-secondary); }
.ampel-punkt { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }
.ampel-rot .ampel-punkt { background: var(--wp-danger); color: var(--wp-danger); }
.ampel-gelb .ampel-punkt { background: var(--wp-warning); color: var(--wp-warning); }
.ampel-gruen .ampel-punkt { background: var(--wp-success); color: var(--wp-success); }
.ampel-summen { display: flex; flex-wrap: wrap; gap: var(--wp-space-5); margin: var(--wp-space-2) 0 var(--wp-space-4); }

/* --- Meldungen -------------------------------------------------------------- */
.meldungen { margin-bottom: var(--wp-space-4); }
.meldung {
  padding: 0.7rem 1rem; border-radius: var(--wp-radius-md); margin-bottom: var(--wp-space-2);
  font-size: 0.88rem; border: 1px solid var(--wp-border); background: var(--wp-bg-surface-elevated);
  border-left-width: 3px;
}
.meldung-success { border-left-color: var(--wp-success); color: #b6f0d6; }
.meldung-error   { border-left-color: var(--wp-danger);  color: #ffc2c6; }
.meldung-info    { border-left-color: var(--wp-info);    color: #d3dde5; }
.meldung-warning { border-left-color: var(--wp-warning); color: #f6e0b3; }

/* --- Hinweiskachel (dauerhaft, nicht wegklickbar) --------------------------- */
/* Unterschied zu .meldung: Die Meldung gehoert zu einer gerade ausgefuehrten
   Aktion und verschwindet danach. Diese Kachel steht dauerhaft in einer Maske
   und traegt eine Regel, die man VOR dem Ausfuellen kennen muss. Deshalb
   Symbolflaeche links, kraeftigere Kontur und eigener Titel. */
.hinweis-kachel {
  display: flex; gap: var(--wp-space-3); align-items: flex-start;
  padding: 0.85rem 1rem; margin: 0 0 var(--wp-space-4);
  border: 1px solid rgba(232, 180, 79, 0.38);
  border-left: 4px solid var(--wp-warning);
  border-radius: var(--wp-radius-md);
  background: rgba(232, 180, 79, 0.08);
}
.hinweis-kachel .hinweis-zeichen {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--wp-warning); color: #2a2118;
  font-weight: 800; font-size: 1rem; line-height: 1;
}
.hinweis-kachel .hinweis-inhalt { min-width: 0; }
.hinweis-kachel .hinweis-titel {
  margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 700; color: #f6e0b3;
  letter-spacing: 0.01em;
}
.hinweis-kachel p { margin: 0 0 0.35rem; font-size: 0.88rem; line-height: 1.5; color: var(--wp-text-primary); }
.hinweis-kachel p:last-child { margin-bottom: 0; }
.hinweis-kachel .hinweis-weg { font-size: 0.83rem; color: var(--wp-text-secondary); }
.hinweis-kachel .hinweis-weg strong { color: #f6e0b3; font-weight: 600; }

/* --- Warn-Kachel (rot) ------------------------------------------------------ */
/* Sergej-Auftrag 20.09.2026, 12:05: Der Hinweis "Link nicht weitergeben" ist keine
   Nebenbemerkung, sondern eine Regel mit Folgen — deshalb Rot statt des gelben
   Hinweis-Tons. Gleiche Bauform wie .hinweis-kachel, nur andere Statusfarbe: Wer
   eine der beiden kennt, erkennt die andere sofort.
   Die Farbe ist --wp-danger aus der Domaenen-Ampel; es kommt KEIN neuer Farbwert
   dazu, damit die Ampel dreifarbig bleibt. */
.warn-kachel {
  display: flex; gap: var(--wp-space-3); align-items: flex-start;
  padding: 0.85rem 1rem; margin: var(--wp-space-4) 0 0;
  border: 1px solid rgba(223, 91, 101, 0.42);
  border-left: 4px solid var(--wp-danger);
  border-radius: var(--wp-radius-md);
  background: rgba(223, 91, 101, 0.09);
}
.warn-kachel .warn-zeichen {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--wp-danger); color: #fff;
  font-weight: 800; font-size: 1rem; line-height: 1;
}
.warn-kachel .warn-inhalt { min-width: 0; }
.warn-kachel .warn-titel {
  margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 700; color: #ffc2c6;
  letter-spacing: 0.01em;
}
.warn-kachel p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--wp-text-primary); }

/* --- Terminwahl (Auswahlseite, Aufgabe 2e) ---------------------------------- */
/* Jeder Termin ist eine eigene, gross genug anklickbare Flaeche: Die Seite wird
   ohne Anmeldung aufgerufen, haeufig auf dem Telefon, von Menschen die sie einmal
   sehen. Ein kleiner Radioknopf neben Fliesstext waere dort die falsche Wahl.
   Die Zahl freier Plaetze steht hier bewusst NICHT — nur das Wort „frei" (S7). */
.termin-wahl { list-style: none; margin: var(--wp-space-4) 0; padding: 0; display: grid; gap: var(--wp-space-3); }
.termin-wahl li { margin: 0; }
.termin-wahl label {
  display: flex; gap: var(--wp-space-3); align-items: flex-start;
  padding: 0.8rem 1rem; cursor: pointer;
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
  background: rgba(var(--wp-neutral-rgb), 0.05);
  transition: border-color 120ms ease, background 120ms ease;
}
.termin-wahl label:hover { border-color: var(--wp-border-active); background: rgba(var(--wp-neutral-rgb), 0.09); }
.termin-wahl input[type="radio"] { margin-top: 0.25rem; flex: 0 0 auto; }
.termin-wahl input[type="radio"]:checked + .termin-wahl-text { color: var(--wp-text-primary); }
.termin-wahl label:has(input:checked) { border-color: var(--wp-primary-soft, var(--wp-border-active)); background: rgba(var(--wp-primary-rgb), 0.08); }
.termin-wahl-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.termin-wahl-zusatz { font-size: 0.85rem; color: var(--wp-text-secondary); }

/* --- Kachel-Grid (Dashboard) ------------------------------------------------ */
/* auto-FIT, nicht auto-fill: auto-fill legt auf breiten Bildschirmen Spalten
   auf Vorrat an (bei 1920 px sieben fuer fuenf Kacheln) und laesst die leeren
   stehen — das war der Rand rechts. auto-fit klappt leere Spalten zusammen,
   die vorhandenen Kacheln fuellen die Breite. Gleiches Muster wie .kpi-grid. */
.kachel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--wp-space-4); margin: var(--wp-space-5) 0 var(--wp-space-2);
}
.kachel {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  padding: var(--wp-space-5); min-height: 104px;
  background: linear-gradient(180deg, var(--wp-bg-surface-elevated), var(--wp-bg-surface));
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-lg);
  text-decoration: none; color: var(--wp-text-primary); overflow: hidden;
  transition: transform var(--wp-dur) var(--wp-ease), box-shadow var(--wp-dur) var(--wp-ease), border-color var(--wp-dur) var(--wp-ease);
}
.kachel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wp-gradient-wave); opacity: 0.85;
  transform: scaleX(0.3); transform-origin: left; transition: transform var(--wp-dur) var(--wp-ease);
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--wp-shadow-md); border-color: var(--wp-border-active); text-decoration: none; }
.kachel:hover::before { transform: scaleX(1); }
.kachel-titel { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff; }
.kachel-text { font-size: 0.82rem; color: var(--wp-text-secondary); line-height: 1.45; }

/* --- KPI-Karten ------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wp-space-4); margin: var(--wp-space-4) 0; }
.kpi {
  background: linear-gradient(180deg, var(--wp-bg-surface-elevated), var(--wp-bg-surface));
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-lg);
  padding: var(--wp-space-5); display: flex; flex-direction: column; gap: 0.3rem;
}
.kpi-wert { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.kpi-label { font-size: 0.8rem; color: var(--wp-text-secondary); }
.kpi-akzent { color: var(--wp-primary-text); }
.kpi-gruen { color: var(--wp-success); }
.kpi-rot { color: var(--wp-danger); }
.kpi-blau { color: #5fa8ff; }
.kpi-gelb { color: var(--wp-warning); }
.kpi-ikon { font-size: 1.1rem; line-height: 1; }

/* --- Donut (reines CSS-Diagramm, kein externes JS) -------------------------- */
.diagramm-karte { display: flex; align-items: center; gap: var(--wp-space-7); flex-wrap: wrap; }
.donut { position: relative; width: 172px; height: 172px; border-radius: 50%; flex: 0 0 auto; box-shadow: var(--wp-shadow-sm); }
.donut::after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: var(--wp-bg-surface); }
.donut-mitte { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-zahl { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; }
.donut-unterzahl { font-size: 0.72rem; color: var(--wp-text-secondary); margin-top: 0.25rem; }
.donut-legende { display: flex; flex-direction: column; gap: 0.65rem; min-width: 190px; }
.legende-zeile { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--wp-text-secondary); }
.legende-punkt { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.legende-punkt.rot { background: var(--wp-danger); }
.legende-punkt.gelb { background: var(--wp-warning); }
.legende-punkt.gruen { background: var(--wp-success); }
.legende-zeile strong { margin-left: auto; color: #fff; }

/* ============================================================================
   AUTH-SHELL — Login / Registrierung / Warteseite (Hero, ohne App-Chrome)
   ============================================================================ */
.auth-shell {
  min-height: 100vh; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(2rem, 6vh, 4.5rem) var(--wp-space-5) calc(var(--wp-space-6) + 1.5rem);
  position: relative; overflow: hidden;
}
.auth-wave {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.auth-wave svg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; display: block; }
.auth-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -18%; right: -10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--wp-primary-rgb), 0.18), transparent 62%);
  filter: blur(6px);
}

.auth-marke { position: relative; z-index: 1; text-align: center; margin: 0 0 var(--wp-space-2); }
.auth-logo { width: min(440px, 88vw); height: clamp(150px, 20vw, 200px); object-fit: cover; object-position: center; display: block; margin: 0 auto; filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.5)); }
.auth-name {
  font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 2.9rem);
  font-weight: 700; letter-spacing: -0.01em; color: #fff; margin: 0;
}
.auth-name b { color: var(--wp-primary-text); font-weight: 700; }
.auth-tagline { color: var(--wp-text-secondary); font-size: 1.05rem; margin-top: 0.55rem; }

/* 17.08.2026 (Sergej, Entscheidung 97): Karte 420 -> 640 px — „etwas mehr in die
   Breite, weniger Schlauch nach unten". Design/Logo/Welle unveraendert. Die
   Registrier-Felder stehen zweispaltig (.form-raster), Login bleibt einspaltig,
   die Knoepfe stehen nebeneinander. Fuss-Waechter (core/test_auth_fuss_layout.py)
   ist davon unberuehrt: der Fuss bleibt im Fluss. */
.auth-card {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  margin: auto 0;
  background: linear-gradient(180deg, rgba(var(--wp-bg-surface-elevated-rgb), 0.92), rgba(var(--wp-bg-surface-rgb), 0.92));
  backdrop-filter: blur(12px);
  border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-xl);
  box-shadow: var(--wp-shadow-lg);
  padding: var(--wp-space-6);
}
.auth-card h1 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.auth-card .auth-intro { color: var(--wp-text-secondary); font-size: 0.88rem; margin-bottom: var(--wp-space-4); }
.auth-card .btn { flex: 1 1 0; width: auto; margin-top: var(--wp-space-2); text-align: center; }
.auth-card .form-aktionen { flex-direction: row; gap: var(--wp-space-3); margin-top: var(--wp-space-4); }
/* Zweispaltiges Feld-Raster (Registrieren, App-Formulare). Fehler, Hilfetexte
   ueber volle Breite, Textbereiche und Kaestchen-/Radio-Listen ebenfalls —
   die brauchen Platz in der Breite, nicht eine halbe Spalte. */
.form-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp-space-5); }
.form-raster > .formfehler, .form-raster > .form-aktionen, .form-raster > fieldset,
.form-raster > .feld:has(> textarea), .form-raster > .feld:has(input[type="checkbox"]),
.form-raster > .feld:has(input[type="radio"]), .form-raster > .feld:has(> ul), .form-raster > .feld.feld-breit,
.form-raster > .hilfetext, .form-raster > p { grid-column: 1 / -1; }
/* Ein Django-Formular kann versteckte Eingaben (csrf, Verwaltungsfelder) direkt
   im Raster haben — die belegen keine Zelle. */
.form-raster > input[type="hidden"] { display: none; }
/* 12.08.2026 — Der Fuss steht im normalen Fluss, NICHT mehr absolut.
   Vorgeschichte: Mit `position: absolute; bottom: …` schwebte er ueber dem Inhalt
   und wusste nichts von der Karte ueber ihm. Sobald die Karte weit genug nach
   unten reichte, schob er sich darueber. Auf Live nachgemessen (login):
   1080px Hoehe = 97px Abstand · 900px = 13px · 880px = 3px · 768px = 48px
   UEBERLAPPUNG, die „Neu registrieren" halb verdeckte. Kipppunkt 877px — also
   schon auf einem normalen 1920x1080-Arbeitsplatz nur eine Lesezeichenleiste
   vom Kippen entfernt, und auf 1366x768-Laptops immer kaputt.
   Betraf alle drei base_auth-Seiten (login, registrieren, warteseite).

   `margin-top: auto` in der Flex-Spalte `.auth-shell` (min-height: 100vh)
   drueckt ihn an den unteren Rand — und der Fluss haelt ihn zugleich von der
   Karte weg. Das ist gegen JEDE Logo-Groesse und Fensterhoehe robust, waehrend
   ein kleineres Logo nur den naechsten Kipppunkt verschoben haette
   (Sackgasse 89: was an einem Pixel haengt, ist nicht repariert).

   `position: relative` bleibt noetig, damit `z-index` weiter greift und der Fuss
   ueber der SVG-Wellengrafik (.auth-wave) liegt. Waechter: core/test_auth_fuss_layout.py */
.auth-fuss {
  position: relative; z-index: 1;
  margin-top: auto; width: 100%;
  padding-top: var(--wp-space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--wp-space-3);
}
/* AÜ-Logo, Negativ-Fassung (12.08.2026): Der graue Schriftzug ist in
   `aue_logo_negativ.png` auf Weiss gesetzt, der Claim behaelt das AÜ-Rot.
   Dadurch steht das Logo frei auf dem dunklen Grund — die vorherige weisse
   Kachel entfaellt (Sergej-Vorgabe 12.08.: praesenter, keine Kachel). */
.auth-aue-logo {
  height: 58px; width: auto; max-width: min(320px, 80vw);
  display: block; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
  opacity: 0.96;
}
@media (max-width: 480px) {
  .auth-aue-logo { height: 44px; }
}
.auth-fuss-text { font-size: 0.75rem; color: var(--wp-text-muted); text-align: center; margin: 0; }
.auth-meldungen { position: relative; z-index: 1; width: 100%; max-width: 640px; }

/* ============================================================================
   STATISTIK-BAUSTEINE — Handlungsbedarf, Wellen, Termine, Datenqualität
   Drei-Köpfe-Brainstorming 2026-06-19. Reines CSS/SVG, kein externes Chart-JS.
   ============================================================================ */

.punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.punkt.rot { background: var(--wp-danger); }
.punkt.gelb { background: var(--wp-warning); }
.punkt.gruen { background: var(--wp-success); }

/* --- Handlungsbedarf-Karten ------------------------------------------------- */
.aktion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--wp-space-3); margin-top: var(--wp-space-2); }
.aktion-karte { padding: var(--wp-space-4); border: 1px solid var(--wp-border); border-left-width: 3px; border-left-color: var(--wp-text-muted); border-radius: var(--wp-radius-md); background: rgba(var(--wp-bg-app-rgb), 0.4); }
.aktion-karte.rot { border-left-color: var(--wp-danger); }
.aktion-karte.gelb { border-left-color: var(--wp-warning); }
.aktion-karte.abgeschlossen { border-left-color: var(--wp-success); }
.aktion-zahl { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; }
.aktion-text { font-size: 0.8rem; color: var(--wp-text-secondary); margin-top: 0.3rem; }

/* --- Wellen-Pipeline (Mini-Stapelbalken je Welle) --------------------------- */
.wellen-leiste { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(var(--wp-neutral-rgb), 0.12); min-width: 90px; }
.wellen-leiste i { display: block; height: 100%; }
.wellen-leiste i.rot { background: var(--wp-danger); }
.wellen-leiste i.gelb { background: var(--wp-warning); }
.wellen-leiste i.gruen { background: var(--wp-success); }
/* Abgebrochen/Sonstiges steht ausserhalb des Prozessflusses — bewusst neutral. */
.wellen-leiste i.grau { background: var(--wp-text-muted); }

/* --- Termin-Vorschau -------------------------------------------------------- */
.termin-liste { display: flex; flex-direction: column; gap: var(--wp-space-2); margin-top: var(--wp-space-2); }
.termin-zeile { display: flex; align-items: center; gap: var(--wp-space-3); padding: 0.6rem 0.85rem; border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md); background: rgba(var(--wp-bg-surface-elevated-rgb), 0.5); }
.termin-tag { font-family: var(--font-display); font-weight: 700; color: var(--wp-primary-text); min-width: 6rem; font-size: 0.82rem; }
.termin-info { flex: 1; min-width: 0; }
.termin-titel { color: #fff; font-size: 0.9rem; }
.termin-meta { font-size: 0.76rem; color: var(--wp-text-secondary); }
.stat-leer { color: var(--wp-text-muted); font-size: 0.85rem; padding: 0.4rem 0; }

/* --- Datenqualität (Erfassungsgrad-Balken) ---------------------------------- */
.dq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--wp-space-4); margin-top: var(--wp-space-2); }
.dq-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--wp-text-secondary); margin-bottom: 0.35rem; }
.dq-kopf b { color: #fff; font-size: 0.95rem; }
.dq-spur { height: 8px; background: rgba(var(--wp-neutral-rgb), 0.12); border-radius: 999px; overflow: hidden; }
.dq-fuell { height: 100%; border-radius: 999px; background: var(--wp-gradient-wave); min-width: 3px; }
.dq-hinweis { font-size: 0.74rem; color: var(--wp-text-muted); margin-top: 0.3rem; }


/* --- Dimensions-Aufschlüsselung (Standort/Marktbereich/Profession) ---------- */
/* min() statt fester 290px: auf schmalen Geräten darf die Spalte kleiner werden,
   statt das umgebende Raster aufzuspreizen. */
/* 280px statt 290px: bei der 7/12-Breite der Tafel passen damit auf 1920 px
   alle DREI Gruppen in eine Reihe (3x280 + Abstaende < verfuegbare Breite).
   Bei 290px blieb die dritte allein in Reihe zwei stehen. Schmalere Fenster
   fallen weiterhin auf zwei bzw. eine Spalte zurueck. */
.dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--wp-space-5); margin-top: var(--wp-space-2); }
.dim-block h3 { margin-top: 0; color: var(--wp-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; }
.dim-liste { display: flex; flex-direction: column; gap: var(--wp-space-2); }
/* Balken 88px statt 110px: seit die Tafel drei Spalten nebeneinander zeigt,
   ist jede Spalte schmaler. Gemessen: die laengste Beschriftung
   ("Ausbildungsbegleitung") braucht 147px, hatte aber nur 125px und wurde
   abgeschnitten. Die Breite kommt vom Balken — er zeigt ein Verhaeltnis und
   bleibt auch schmaler ablesbar, ein abgeschnittenes Wort nicht.
   80px, nicht 88px: bei 88px blieben rechnerisch 146,7px fuer 147px Bedarf —
   das lag so knapp daneben, dass die Messung es durchwinkte, das Auge den
   Auslassungspunkt aber sah. Knapp bestanden ist nicht bestanden. */
/* Audit 09.09.2026, F-03: die Wertspalte traegt seit dem Umbau ZWEI Zahlen („135 – 135“), 2.6rem
   schnitt sie ab. 5.4rem fasst dreistellig – dreistellig samt Trenner. */
.dim-zeile { display: grid; grid-template-columns: 1fr 80px 5.4rem; align-items: center; gap: var(--wp-space-3); min-height: 1.6rem; }
/* Die gemeinsame Mindestbreite von .fk-leiste (120px) wuerde die 88px-Spalte
   wieder aufdruecken — in der Aufschluesselung ausdruecklich aufheben. */
.dim-zeile .fk-leiste { min-width: 0; }
/* 12.08.2026 — Schluss mit der Pixel-Rechnerei: Das Etikett darf jetzt umbrechen,
   statt abgeschnitten zu werden. Vorgeschichte: „Ausbildungsbegleitung" braucht
   147px, hatte 146,7px und stand deshalb weiterhin als „Ausbildungsbegleit…" da
   (im Bild nachgewiesen am 12.08. bei 1280px Fensterbreite) — obwohl der Balken
   extra von 110px auf 80px geschrumpft wurde. Eine Loesung, die an einem
   einzelnen Pixel haengt, faellt beim naechsten langen Wort wieder um.
   Umbruch ist gegen JEDE Laenge robust; `overflow-wrap: anywhere` faengt
   zusaetzlich Woerter ab, die selbst allein nicht in die Spalte passen.
   `hyphens: auto` trennt dabei an Silbengrenzen (die Seite ist als `lang="de"`
   ausgezeichnet), `overflow-wrap: break-word` ist nur der Notnagel fuer Woerter,
   die selbst getrennt nicht passen — bewusst NICHT `anywhere`, das trennte
   „Ausbildungsbegleitun / g" mitten im Wort. */
/* 27.09.2026 (Audit F2): `min-width: 0` dazu. Ohne sie ist die Mindestbreite
   der 1fr-Spalte die Breite des laengsten Wortes; ein Standortname ohne
   Trennstelle machte die Startseite bei 390px 730px breit und schob bei
   1024px Balken und Zahl aus der Zeile, weil `break-word` die
   Mindestbreite nicht senkt. Jetzt bleibt jede Zeile in ihrem Block, und
   `break-word` bricht nur Woerter, die sonst nicht hineinpassen. */
.dim-label {
  font-size: 0.85rem; color: var(--wp-text-primary);
  white-space: normal; overflow-wrap: break-word; hyphens: auto;
  line-height: 1.25; min-width: 0;
}
.dim-wert { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }

/* Zwei Zahlen je Zeile (09.09.2026): Gesamt – davon geschult. Aus einem Farbbalken
   laesst sich keine Menge ablesen; die Steuerung braucht die Zahl daneben. */
.dim-legende { font-size: 0.7rem; color: var(--wp-text-muted); margin: 0 0 var(--wp-space-2); text-align: right; }
.dim-trenner { color: var(--wp-text-muted); font-weight: 400; padding: 0 0.15em; }
.dim-gruen { color: var(--wp-success, #34d399); }

/* Aufklappbare Volltafel mit Suchfeld — Ersatz fuer die entfallene Buendelung. */
.dim-alle { margin-top: var(--wp-space-3); }
.dim-alle > summary {
  cursor: pointer; font-size: 0.78rem; color: var(--wp-text-secondary);
  padding: 0.35rem 0; list-style: none;
}
.dim-alle > summary::-webkit-details-marker { display: none; }
.dim-alle > summary::before { content: "▸ "; }
.dim-alle[open] > summary::before { content: "▾ "; }
.dim-alle > summary:hover { color: var(--wp-text-primary); }
.dim-suchzeile { margin: var(--wp-space-2) 0; }
.dim-suche {
  width: 100%; padding: 0.4rem 0.6rem; font-size: 0.82rem;
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
  background: var(--wp-bg-surface); color: var(--wp-text-primary);
}
.dim-liste-lang { max-height: 22rem; overflow-y: auto; padding-right: 0.3rem; }

/* Kopier-Knopf fuer die E-Mail-Adressen eines Terminblocks (09.09.2026). */
.mails-kopieren { white-space: nowrap; margin-top: var(--wp-space-2); }
.mails-kopieren.kopiert { border-color: var(--wp-success, #34d399); color: var(--wp-success, #34d399); }

/* Terminbloecke aus bestaetigten Personenterminen (09.09.2026) --------------- */
.zeile-personenblock { background: rgba(var(--wp-bg-interactive-rgb), 0.25); }
.block-teilnehmer > summary,
.stillstand-liste > summary {
  cursor: pointer; font-size: 0.82rem; color: var(--wp-text-secondary);
  padding: 0.3rem 0; list-style: none;
}
.block-teilnehmer > summary::-webkit-details-marker,
.stillstand-liste > summary::-webkit-details-marker { display: none; }
.block-teilnehmer > summary::before,
.stillstand-liste > summary::before { content: "▸ "; }
.block-teilnehmer[open] > summary::before,
.stillstand-liste[open] > summary::before { content: "▾ "; }
.block-teilnehmer > summary:hover,
.stillstand-liste > summary:hover { color: var(--wp-text-primary); }
.teilnehmer-liste {
  list-style: none; margin: var(--wp-space-2) 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.teilnehmer-liste li {
  display: flex; gap: var(--wp-space-3); flex-wrap: wrap;
  font-size: 0.82rem; line-height: 1.4;
}
.teilnehmer-name { color: var(--wp-text-primary); font-weight: 600; }
.teilnehmer-mail { color: var(--wp-text-secondary); font-family: var(--font-mono, monospace); font-size: 0.78rem; }
.kal-pille-person { border-left: 3px solid var(--wp-info, #60a5fa); }
.stillstand-liste { margin-top: var(--wp-space-3); }
.tabelle-kompakt th, .tabelle-kompakt td { padding: 0.35rem 0.5rem; font-size: 0.8rem; }

/* Kennzeichen und Schnellfilter in der Mitarbeitendenliste (09.09.2026) ------ */
.label-festgefahren {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  color: var(--wp-warning, #fbbf24);
}
/* Nie eingeladen, seit über sechs Wochen angelegt (26.09.2026, STILLSTAND-NEU) */
.label-einladung-ueberfaellig {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  color: var(--wp-warning, #fbbf24);
}
/* Gruppen-Zusage in der Mitarbeitendenliste (19.09.2026, Entwurf 2b) */
.label-gruppe {
  display: inline-block; font-size: 0.74rem; font-weight: 600;
  color: var(--wp-text-muted);
}
.schnellfilter {
  display: flex; align-items: center; gap: var(--wp-space-2);
  flex-wrap: wrap; margin: var(--wp-space-3) 0;
}
.schnellfilter-titel { font-size: 0.78rem; color: var(--wp-text-muted); }
.schnellfilter .chip-filter.aktiv {
  background: var(--wp-gradient-wave); color: var(--wp-on-accent); border-color: transparent;
}
.kopf-hinweis { align-self: center; }
.dim-platzhalter { display: flex; }

/* --- Führungskraft-Übersicht (neutral, kein Ranking) ------------------------ */
.fk-leiste { min-width: 120px; }

/* --- Säulen-Diagramm (Burnup kumuliert / Velocity je Woche) ----------------- */
.saeulen { display: flex; align-items: flex-end; gap: var(--wp-space-2); height: 150px; margin-top: var(--wp-space-3); }
.saeule { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; height: 100%; min-width: 0; }
.saeule-balken { width: 100%; max-width: 36px; border-radius: 6px 6px 0 0; background: var(--wp-gradient-wave); min-height: 2px; transition: height var(--wp-dur) var(--wp-ease); }
.saeule-balken.flach { background: rgba(var(--wp-neutral-rgb), 0.25); }
.saeule-wert { font-size: 0.72rem; color: #fff; font-weight: 600; }
.saeule-label { font-size: 0.66rem; color: var(--wp-text-muted); white-space: nowrap; }

/* --- Stillstand-Liste (Führungskraft, eigenes Team namentlich) -------------- */
.stillstand-liste { display: flex; flex-direction: column; gap: var(--wp-space-2); margin-top: var(--wp-space-2); }
.stillstand-zeile { display: flex; align-items: center; gap: var(--wp-space-3); padding: 0.55rem 0.85rem; border: 1px solid var(--wp-border); border-left-width: 3px; border-left-color: var(--wp-warning); border-radius: var(--wp-radius-md); background: rgba(var(--wp-bg-app-rgb), 0.4); }
.stillstand-zeile.rot { border-left-color: var(--wp-danger); }
.stillstand-name { color: #fff; font-size: 0.9rem; flex: 1; min-width: 0; }
.stillstand-status { font-size: 0.78rem; color: var(--wp-text-secondary); }
.stillstand-tage { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wp-warning); font-size: 0.85rem; }

@media (max-width: 620px) {
  .dim-zeile { grid-template-columns: 1fr 80px 4.8rem; }
}

/* --- Hilfsklassen ----------------------------------------------------------- */
.text-zentriert { text-align: center; }
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Schmale Fenster: Raster wieder einspaltig, Auth-Knoepfe untereinander (A-6). */
  .form-raster { grid-template-columns: minmax(0, 1fr); }
  .auth-card .form-aktionen { flex-direction: column; gap: var(--wp-space-2); }
  .auth-card .btn { width: 100%; }
  .kopf-inner { padding: var(--wp-space-3) var(--wp-space-4); }
  .marke-logo { height: 36px; width: 108px; }
  .inhalt { padding: var(--wp-space-4); }
  .tafel { padding: var(--wp-space-4); }
  .app-nav-inner { padding: var(--wp-space-3) var(--wp-space-4) 0; }
  h2 { margin-top: var(--wp-space-5); }
}
/* 27.09.2026 (Audit F2): Kopfleiste bricht auf schmalen Fenstern um.
   Vorher standen Marke, Suche und die drei Knoepfe starr in einer Zeile: bei
   390px ragte die Knopfleiste 85px ueber den Rand (Dokument 475px breit),
   zwischen 430 und 600px sogar bis 587px, und das Logo wurde auf 0px
   zusammengedrueckt. Jetzt: erste Zeile Logo und Suche, zweite Zeile Name
   links und Knoepfe rechts. Ab 981px bleibt alles wie bisher einzeilig. */
@media (max-width: 980px) {
  .kopf-inner { flex-wrap: wrap; row-gap: var(--wp-space-2); }
  .marke { flex: 0 0 auto; }
  .kopf-suche { flex: 1 1 0; min-width: 0; max-width: none; }
  .kopf-nav { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: var(--wp-space-2) var(--wp-space-3); }
  .kopf-user { flex: 1 1 10rem; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .kopf-user { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .kopf-nav { gap: var(--wp-space-2); }
  .kopf-nav .btn { padding: 0.45rem 0.75rem; font-size: 0.82rem; }
}
@media (max-width: 420px) {
  .marke-logo { height: 32px; }
  .kopf-user { display: none; }
  .auth-card { padding: var(--wp-space-5); }
}

/* --- Warn-Label: Lizenz-Klärung (geringe Wochenstunden / Minijob) -----------
   Markenkonform aus Tokens: dezenter Warn-Chip im Dunkel-Design (vorher
   Hell-Theme-Rest mit hartkodierten Farben). */
.label-klaerung {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--wp-warning);
  background: rgba(232, 180, 79, 0.14);
  border: 1px solid rgba(232, 180, 79, 0.42);
  border-radius: var(--wp-radius-pill);
  vertical-align: middle;
}

/* --- Kennzeichen „Lizenz entfallen" (Sergej-Auftrag 01.09.2026) -------------
   Diese Person hatte eine Langdock-Lizenz und hat sie heute nicht mehr — der
   Grund bleibt bewusst offen (ausgeschieden ODER Lizenz mangels Bedarf
   entzogen). Der Datensatz bleibt fuer Quote und Auswertung erhalten.

   Rot, aber ABSICHTLICH anders als die Ampel: `--wp-danger` steht in der Ampel
   fuer "noch nicht bearbeitet" (offene Aufgabe). Deshalb faerbt dieses
   Kennzeichen NUR die Zeile und den eigenen Chip — die Ampel-Zelle bleibt
   unberuehrt und zeigt weiter den echten Schulungsstand.

   Und es steht nie nur die Farbe: der Chip traegt das Wort "Lizenz entfallen".
   Farbe allein ist fuer Farbsehschwache kein Signal. */
.zeile-lizenz-entfallen > td {
  background: rgba(223, 91, 101, 0.10);
  box-shadow: inset 3px 0 0 0 var(--wp-danger);
}
.zeile-lizenz-entfallen > td:not(:first-child) {
  box-shadow: none;
}

.label-lizenz-entfallen {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.4rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--wp-danger);
  background: rgba(223, 91, 101, 0.14);
  border: 1px solid rgba(223, 91, 101, 0.45);
  border-radius: var(--wp-radius-pill);
  vertical-align: middle;
}

/* --- Wunschtermine (Formset-Zeilen) — Tokens statt Hell-Theme-Reste -------- */
.wunsch-block { margin: 1rem 0; padding: var(--wp-space-4) var(--wp-space-4); border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md); background: rgba(var(--wp-bg-app-rgb), 0.4); }
.wunsch-block legend { font-weight: 700; padding: 0 0.4rem; color: var(--wp-text-primary); }
.wunsch-zeile { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-bottom: 0.5rem; }
.wunsch-feld { display: flex; flex-direction: column; gap: 0.2rem; }
.wunsch-feld label { font-size: 0.82rem; color: var(--wp-text-secondary); }
.wunsch-zeile .wunsch-DELETE { justify-content: flex-end; }

/* ============================================================================
   DASHBOARD-REDESIGN — Bento-Grid, Themen-Sektionen, KPI-Hero
   (großer Redesign 2026-06-21). Marke unverändert; nur Anordnung + Hierarchie.
   ============================================================================ */

/* --- Themen-Sektion mit Kopfzeile + Trennlinie ------------------------------ */
.dash-section { margin-top: var(--wp-space-6); }
.dash-section:first-of-type { margin-top: var(--wp-space-4); }
.dash-section-kopf { display: flex; align-items: center; gap: var(--wp-space-3); margin: 0 0 var(--wp-space-4); }
.dash-section-kopf h2 { margin: 0; font-size: 1.05rem; white-space: nowrap; }
.dash-section-ikon {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; color: var(--wp-primary-text);
  background: rgba(var(--wp-primary-soft-rgb), 0.12); border: 1px solid rgba(var(--wp-primary-soft-rgb), 0.22);
}
.dash-section-ikon svg { width: 17px; height: 17px; }
.dash-section-linie { flex: 1; height: 1px; background: var(--wp-border); }

/* --- Bento-Raster (12 Spalten, klappt mobil auf 1 Spalte) ------------------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--wp-space-5); align-items: stretch; }
/* Ohne min-width:0 kann ein Rasterfeld nicht unter die Mindestbreite seines
   Inhalts schrumpfen — auf dem Handy schob das die Tafeln 70px aus dem Bild. */
.bento > * { min-width: 0; }
.bento > .tafel { margin-bottom: 0; height: 100%; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr; gap: var(--wp-space-4); }
  .bento > * { grid-column: 1 / -1 !important; }
}
/* Erste Überschrift einer Tafel: kein doppelter Oben-Abstand im Raster */
.tafel > h2:first-child { margin-top: 0; }

/* --- KPI-Hero (prominente Kennzahlen-Reihe oben) ---------------------------- */
.kpi-hero { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi-hero .kpi { position: relative; overflow: hidden; gap: var(--wp-space-3); padding-top: var(--wp-space-6); }
.kpi-hero .kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--wp-gradient-wave); opacity: 0.8;
}
.kpi-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-2); }
.kpi-ikon {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--wp-primary-text);
  background: rgba(var(--wp-primary-soft-rgb), 0.12); border: 1px solid rgba(var(--wp-primary-soft-rgb), 0.22);
}
.kpi-ikon svg { width: 19px; height: 19px; }
.kpi-hero .kpi-wert { font-size: 2.3rem; }
.kpi-trend { font-size: 0.74rem; color: var(--wp-text-muted); }

/* --- Schulungskalender (Tag/Woche/Monat/Jahr) ------------------------------- */
.kal-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; margin: 0 0 var(--wp-space-4); padding: 3px; border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md); background: var(--wp-bg-surface-elevated); }
/* N28-K2: lange E-Mail-Adressen in der Angabentabelle brechen innerhalb der Tafel um. */
.angaben-umbruch td { overflow-wrap: anywhere; }
/* REP31: von Hand eingetragener Teams-Link auf "Termin verwalten" bricht innerhalb der Tafel um. */
.handlink-umbruch { overflow-wrap: anywhere; }
.kal-tab { padding: 0.35rem 0.9rem; border-radius: calc(var(--wp-radius-md) - 3px); font-size: 0.85rem; font-weight: 600; color: var(--wp-text-secondary); text-decoration: none; }
.kal-tab:hover { color: var(--wp-text-primary); background: var(--wp-bg-interactive); }
.kal-tab.aktiv { color: var(--wp-on-accent); background: var(--wp-gradient-wave); }

.kal-kopf { display: flex; align-items: center; gap: var(--wp-space-3); margin: var(--wp-space-4) 0 var(--wp-space-3); }
.kal-titel { margin: 0; font-size: 1.15rem; }
.kal-nav { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md); color: var(--wp-text-secondary); text-decoration: none; font-size: 1.1rem; line-height: 1; }
.kal-nav:hover { color: var(--wp-text-primary); background: var(--wp-bg-interactive); border-color: var(--wp-border-strong); }

.kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-wt { padding: 0.3rem 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp-text-muted); }
.kal-zelle { min-height: 84px; padding: 0.3rem; border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm); background: var(--wp-bg-surface); }
.kal-zelle.leer { border-style: dashed; opacity: 0.35; }
.kal-tag { font-size: 0.75rem; font-weight: 700; color: var(--wp-text-secondary); margin-bottom: 0.2rem; }

.kal-pille { display: block; margin: 0.15rem 0; padding: 0.2rem 0.4rem; border-radius: var(--wp-radius-sm); background: rgba(var(--wp-primary-rgb), 0.14); border: 1px solid rgba(var(--wp-primary-rgb), 0.3); color: var(--wp-text-primary); font-size: 0.74rem; line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.kal-pille:hover { background: rgba(var(--wp-primary-rgb), 0.26); border-color: var(--wp-border-active); }
.kal-zeit { font-weight: 700; color: var(--wp-primary-text); }
.kal-pille-breit { font-size: 0.88rem; padding: 0.5rem 0.7rem; }
/* 21.09.2026 (Rückverfolgung Nr. 37/42): Nachbereitungsstand je begonnenem Termin.
   Linker Rand + ausgeschriebener Text — die Farbe ist nie die einzige Aussage. */
.kal-pille-nb-offen { border-left: 3px solid var(--wp-warning); }
.kal-pille-nb-erledigt { border-left: 3px solid var(--wp-success); }
.kal-nb { display: block; font-size: 0.68rem; font-weight: 600; white-space: normal; }
.kal-pille-nb-offen .kal-nb { color: var(--wp-warning); }
.kal-pille-nb-erledigt .kal-nb { color: var(--wp-success); }
.kal-pille-breit .nb-stand { margin-left: 0.4rem; }
.kal-tageszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.kal-tageszeile .kal-pille-breit { flex: 1 1 320px; }
.kal-nebenlink { font-size: 0.8rem; }
.nb-direktlinks { margin: var(--wp-space-2) 0 0; padding-left: 1.2rem; font-size: 0.85rem; }
.nb-direktlinks li { margin-bottom: 0.2rem; }
.nb-abschnitt-notiz { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--wp-text-secondary); }
.kal-tagesliste { display: flex; flex-direction: column; gap: 0.3rem; max-width: 680px; }
.kal-leer { color: var(--wp-text-muted); }

.kal-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-wspalte { min-height: 120px; padding: 0.3rem; border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm); background: var(--wp-bg-surface); }
.kal-wkopf { font-size: 0.74rem; font-weight: 700; color: var(--wp-text-secondary); margin-bottom: 0.25rem; }
.kal-wkopf.heute { color: var(--wp-primary-text); }

.kal-jahr { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--wp-space-3); }
.kal-jmonat { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--wp-space-3); border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md); background: var(--wp-bg-surface); text-decoration: none; }
.kal-jmonat:hover { background: var(--wp-bg-interactive); border-color: var(--wp-border-active); }
.kal-jmonat.leer { opacity: 0.55; }
.kal-jname { font-weight: 700; color: var(--wp-text-primary); }
.kal-janzahl { font-size: 0.78rem; color: var(--wp-text-secondary); }

@media (max-width: 720px) {
  .kal-gitter, .kal-woche { grid-template-columns: repeat(7, minmax(64px, 1fr)); overflow-x: auto; }
  .kal-zelle { min-height: 60px; }
}

/* --- Reduzierte Bewegung ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Zwei-Sterne-Modell (06.08.2026): goldener Stern = Prioritaet (Fuehrungskraft),
   blauer Stern = Schulung abgeschlossen (GESCHULT_GRUEN). */
/* Die beiden Sterne sind ein Paar und müssen gleich präsent wirken. Beide waren
   auf dem dunklen Grund zu dunkel — Blau (#174476) war faktisch unsichtbar,
   Gold (#b8860b) wirkte matt. Jetzt liegen sie auf gleicher Leuchtstärke. */
.stern-gold { color: #d9a520; }
.stern-blau { color: #4fb0f0; }

/* --- Druckansicht (S10, Ersatz fuer CSV-Export — Blaupause 4b.13) ----------- */
@media print {
  .kopf, .app-nav, .fuss, .aktion-gruppe, .filterzeile, .kal-tabs,
  .zeilen-form, .zeilen-aufklapp, .aktion-dialog, .aktion-modal, .aktion-loeschen, .aktion-followup, .seiten-nav .btn, .btn,
  .sammel-leiste, .auswahl-spalte { display: none !important; }
  /* Aktive Filter bleiben im Ausdruck sichtbar — sonst weiss niemand,
     welchen Ausschnitt das Blatt zeigt (S9). */
  .filter-chips .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .tafel { border: none; box-shadow: none; background: #fff; }
  .tabelle th, .tabelle td { color: #000; border-color: #999; }
}

/* Gruppen-Planung: Begruendung des Vorschlags (03.09.2026) */
.gruppen-warum { font-size: 0.82rem; color: var(--wp-text-secondary); max-width: 34rem; }
.gruppen-begruendung { margin-bottom: 1rem; }
.begruendung-liste { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.begruendung-liste li { margin-bottom: 0.2rem; }

/* =========================================================================
   Gruppen-Planung Version 3 (03.09.2026) — Karten statt Tabellenzeilen.
   Eine Gruppe ist ein Gegenstand, keine Zeile: Titel, was verbindet, wer drin ist,
   wie gut jeder passt. Die Passungs-Leiste ist relativ innerhalb der Gruppe lesbar
   (wer ist der Außenseiter), die Chips beantworten „warum zusammen".
   ========================================================================= */
.steuer-kachel {
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
  padding: var(--wp-space-4); margin-bottom: var(--wp-space-5);
  background: rgba(var(--wp-bg-surface-elevated-rgb), 0.55);
}
.steuer-kachel .filterzeile { margin-bottom: var(--wp-space-2); }
.steuer-erklaerung { max-width: 100ch; margin: 0; }
.bereich-titel { display: flex; align-items: baseline; gap: 0.6rem; margin-top: var(--wp-space-6); }
.bereich-zahl {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--wp-text-secondary);
  border: 1px solid var(--wp-border-strong); border-radius: var(--wp-radius-pill); padding: 0.05rem 0.55rem;
}
.karten-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--wp-space-4); align-items: start;
}
.gruppen-karte {
  display: flex; flex-direction: column; gap: var(--wp-space-3);
  border: 1px solid var(--wp-border); border-radius: var(--wp-radius-md);
  background: rgba(var(--wp-bg-surface-elevated-rgb), 0.75);
  padding: var(--wp-space-4);
}
.gruppen-karte-stern { border-color: rgba(232, 180, 79, 0.45); }
.karte-kopf { display: flex; flex-direction: column; gap: 0.25rem; }
.karte-nr { font-size: 0.78rem; color: var(--wp-text-muted); letter-spacing: 0.02em; }
.karte-titel { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.karte-titel a { color: var(--wp-text-primary); text-decoration: none; }
.karte-titel a:hover { color: var(--wp-primary-text); }
.karte-meta { margin: 0; font-size: 0.88rem; color: var(--wp-text-secondary); }
.karte-meta strong { color: var(--wp-text-primary); }
.chip-gold { color: var(--wp-warning); background: rgba(232, 180, 79, 0.10); border-color: rgba(232, 180, 79, 0.35); align-self: flex-start; }
.karte-kopf .chip-warnung { align-self: flex-start; }
.karte-merkmale { display: flex; flex-direction: column; gap: 0.35rem; }
.merkmal-zeile { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.merkmal-label { font-size: 0.8rem; color: var(--wp-text-secondary); margin-right: 0.2rem; }
.chip-merkmal { gap: 0.35rem; color: var(--wp-text-primary); background: rgba(var(--wp-neutral-rgb), 0.08); border-color: var(--wp-border); }
.chip-merkmal::before { display: none; }
.chip-merkmal small { font-size: 0.7rem; color: var(--wp-text-muted); }
.chip-merkmal em { font-style: normal; font-size: 0.75rem; color: var(--wp-text-secondary); }
.chip-merkmal-alle { background: rgba(var(--wp-primary-soft-rgb), 0.14); border-color: rgba(var(--wp-primary-soft-rgb), 0.4); }
.karte-mitglieder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mitglied-zeile {
  display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(0, 1.4fr) 5.5rem 2.2rem;
  gap: 0.6rem; align-items: center; font-size: 0.88rem;
  padding: 0.3rem 0; border-top: 1px solid rgba(var(--wp-neutral-rgb), 0.10);
}
.mitglied-name { color: var(--wp-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mitglied-profs { color: var(--wp-text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passung-leiste { display: block; height: 8px; border-radius: 999px; background: rgba(var(--wp-neutral-rgb), 0.14); overflow: hidden; }
.passung-leiste i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--wp-primary-soft), var(--wp-primary)); }
.passung-leiste-gross { width: 9rem; display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.passung-zahl { font-variant-numeric: tabular-nums; color: var(--wp-text-secondary); font-size: 0.85rem; text-align: right; }
.karte-fuss { display: flex; gap: var(--wp-space-3); align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: var(--wp-space-2); }
.karte-alt { margin: 0; }
.rest-tabelle td:nth-child(4) { max-width: 26ch; }
.verbindet { margin: var(--wp-space-4) 0 var(--wp-space-5); display: flex; flex-direction: column; gap: 0.5rem; }
.verbindet h2 { margin-bottom: 0.2rem; }
.warum-satz { max-width: 38ch; font-size: 0.88rem; color: var(--wp-text-secondary); }
.mitglieder-tabelle td { vertical-align: middle; }
.punktekarte td, .punktekarte th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechenweg { max-width: 90ch; }
.rechenweg ul { padding-left: 1.2rem; }
.rechenweg li { margin: 0.25rem 0; color: var(--wp-text-secondary); font-size: 0.9rem; }
@media (max-width: 640px) {
  .mitglied-zeile { grid-template-columns: 1fr 4rem 2rem; }
  .mitglied-profs { display: none; }
}

/* Gruppe zusammenstellen (Schritt 4, 07.09.2026) */
.zeile-gesperrt td { color: var(--wp-text-secondary); }
.zeile-gesperrt td:nth-child(2) { text-decoration: none; opacity: 0.75; }
.hinweisband { margin: var(--wp-space-2) 0 0; padding-left: 1.2rem; }
.hinweisband li { margin-bottom: 0.25rem; }