:root {
  /* DLRG-Rot – exakt aus dem Vereinslogo (static/img/dlrg-logo.png)
     entnommen (#e30613), damit Header und Logo nahtlos ineinander
     übergehen. Für den Status "Entschuldigt" gibt es bewusst eine eigene
     Farbe (--status-entschuldigt), damit er sich weiterhin klar von
     "Abwesend"/"Urlaub" unterscheidet, statt auch rot zu werden. */
  --brand: #e30613;
  --brand-dark: #a80410;
  --status-entschuldigt: #0057a3;
  --green: #1c8a4c;
  --red: #c0392b;
  --amber: #b8860b;
  /* Kräftiger als die pastelligen Badge-Farben oben, damit die Markierung
     auf der Live-Anzeige/dem Kiosk auch aus einigen Metern Entfernung noch
     klar als "hervorgehoben" erkennbar ist, nicht nur als leichter Tonwert. */
  --ziel-erreicht-bg: #bdeecb;
  --schwimmt-bg: #fff0a3;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1a2733;
  --muted: #63737f;
  --border: #dde3e8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Seit v250 (Torstens Rückmeldung: "auf dem Handy ist alles etwas
     außerhalb und zu groß"): overflow-wrap ist eine vererbte Eigenschaft
     (siehe MDN) – einmal hier gesetzt, gilt sie für JEDE Überschrift/
     jeden Text auf jeder Seite, ohne jede einzelne h1/h2/Karten-Überschrift
     separat behandeln zu müssen. Betroffen war konkret z.B. die
     Karten-Überschrift "Einverständnis-/Gesundheitserklärung"
     (#erklaerung-card in eltern.html) – ein einzelnes, zu langes Wort ohne
     Umbruchstelle drückte dort (wie zuvor schon in der Kopfzeile, siehe
     header.app-header h1 oben) die ganze Karte über den Bildschirmrand
     hinaus. Bewusst zusätzlich zur bereits bestehenden, spezifischeren
     Regel für die Kopfzeile (die bleibt als Dokumentation des
     ursprünglich gefundenen Falls stehen). */
  overflow-wrap: break-word;
}

header.app-header {
  background: var(--brand);
  color: white;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Seit v310 (Torstens Wunsch: "kannst du den zurück Button in den roten
     Kasten immer nach rechts unten setzen") – Bezugsrahmen für die
     absolute Positionierung von #kompakt-header-zurueck-btn weiter unten,
     damit dieser IMMER an derselben Ecke der Kopfzeile klebt, egal wie
     hoch sie gerade ist (z.B. bei langem Kursnamen in #header-ansicht
     oder umgebrochener Marke auf schmalen Handys). */
  position: relative;
  /* Seit v250 (Torstens Rückmeldung: "auf dem Handy ist alles etwas
     außerhalb und zu groß"): ohne dieses min-width:0 verweigert sich ein
     Flex-Item standardmäßig, unter die Breite seines eigenen Inhalts zu
     schrumpfen ("min-width: auto") – bei einem schmalen Handy-Bildschirm
     drückte das lange Wort "Gesundheitserklärung" (siehe .brand-Kette
     unten) dadurch die GANZE Kopfzeile über den sichtbaren Rand hinaus,
     statt in der zweiten Zeile umzubrechen. Betrifft dieselbe
     .brand/<a>/<div>-Verschachtelung in allen Seiten mit dieser Kopfzeile
     (siehe grep auf class="brand" – mcc.html, eltern.html,
     erklaerung.html, erklaerung-neu.html, kiosk.html, anzeige.html,
     event.html, mein-profil.html, personen-detail.html,
     personen-profil.html, start.html), daher hier zentral statt in jeder
     Datei einzeln behoben. */
  min-width: 0;
}

header.app-header .brand,
/* Die Marke ist teils zusätzlich in ein <a href="/"> mit demselben
   inline display:flex gepackt (Klick aufs Logo führt zur Startseite,
   siehe Kommentar in mcc.html) – dieselbe min-width:0-Kette muss dann
   auch für dieses <a> gelten, sonst wirkt sie nur auf .brand selbst und
   das Problem bleibt eine Ebene tiefer bestehen. */
header.app-header .brand > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

header.app-header .brand > div,
header.app-header .brand > a > div {
  min-width: 0;
}

header.app-header .logo {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 4px;
  /* Ein Flex-Item schrumpft sonst zuerst gleichmäßig mit den anderen
     Items statt zuletzt – ohne flex-shrink:0 würde das Logo bei sehr
     schmalen Bildschirmen mitgequetscht, bevor der eigentlich lange Text
     daneben umbricht. */
  flex-shrink: 0;
}

header.app-header h1 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 600;
  /* Bricht auch ein einzelnes, sehr langes Wort (z.B.
     "Gesundheitserklärung") innerhalb der Zeile um, statt es unverändert
     über den Rand hinausragen zu lassen – das eigentliche Gegenstück zum
     min-width:0 oben, das dafür nur den PLATZ dafür freimacht. */
  overflow-wrap: break-word;
}

header.app-header .sub {
  font-size: 0.8rem;
  opacity: 0.85;
  overflow-wrap: break-word;
}

/* Seit v265 (Torstens Rückmeldung, mit Fotos vom iPhone 17 Pro Max: "die
   Ansicht beim Benutzer Login im MCC auf einen iPhone 17 Pro max ist
   nicht schön") – auf den Fotos war der Markenblock ("MCC (Mönsheim
   Control Center)") auf eine einstellige Zeichenbreite zusammengequetscht
   und das Logo dadurch mittig in der dadurch sehr hohen Spalte
   "versunken". Ursache: header.app-header ist EIN einziges,
   nicht-umbrechendes Flex-Row (kein flex-wrap), und .brand hat seit v250
   bewusst min-width:0 (siehe dortiger Kommentar), damit ein einzelnes
   langes Wort nicht die ganze Kopfzeile über den Rand schiebt. Genau das
   erlaubt es dem Flex-Algorithmus aber auch, .brand fast auf 0 Breite zu
   quetschen, sobald die rechte Seite (bei einer Admin-Anmeldung mit
   "angemeldet als …", Versionslink, "Als App speichern", "Mein Profil",
   "abmelden" UND der Nav-Zeile darunter) mehr Platz beansprucht, als auf
   einem Handy übrig bleibt – h1 bricht dann (overflow-wrap:break-word)
   buchstabenweise um, statt normal an Wortgrenzen.
   Fix: unterhalb dieser Breite wird die Kopfzeile zur Spalte – Marke oben
   in voller Breite (h1 bricht dort wieder normal an Wortgrenzen um), die
   rechte Seite darunter, ebenfalls linksbündig und mit flex-wrap, damit
   ihre Buttons/Links sauber untereinander/nebeneinander umbrechen statt
   die Marke zu verdrängen. Derselbe Header-Aufbau (.app-header/.brand)
   steckt unverändert in allen Seiten mit dieser Kopfzeile (siehe
   Kommentar bei .brand oben) – die Regel hier wirkt daher zentral überall
   mit, ohne dass jede Datei einzeln angefasst werden muss. */
@media (max-width: 700px) {
  header.app-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  header.app-header > .brand {
    width: 100%;
  }
  header.app-header .header-actions {
    width: 100%;
    align-items: flex-start;
  }
  header.app-header .header-meta-row,
  header.app-header .header-nav-row {
    justify-content: flex-start;
  }
}

/* Seit v313 (Torstens Wunsch: "in der Handy/Tablet Ansicht muss die
   Titelleiste oben verankert werden") – auf Handy & Tablet bleibt die
   rote Kopfzeile beim Scrollen oben am Bildschirmrand kleben, statt mit
   dem übrigen Seiteninhalt wegzuscrollen – u.a. bleibt so der
   "← Zurück"-Knopf (#kompakt-header-zurueck-btn oben) auf einer langen,
   tief scrollenden Seite jederzeit erreichbar. Auf dem Desktop
   (>1024px) bleibt die Kopfzeile bewusst wie bisher normal im
   Textfluss (reine Platz-/Layout-Frage, unabhängig von der seit v391
   auf jeder Breite gleichen Navigations-Logik in mcc.js). Derselbe
   Header-Aufbau steckt unverändert in allen Seiten mit dieser Kopfzeile
   (siehe Kommentar bei .brand oben) – die Regel wirkt daher zentral
   überall mit. z-index deutlich unter den
   Modal-Overlays (1000, siehe .modal-overlay weiter unten), damit ein
   offenes Modal die Kopfzeile weiterhin zuverlässig überdeckt. */
@media (max-width: 1024px) {
  header.app-header {
    position: sticky;
    top: 0;
    z-index: 500;
  }
}

/* Seit v265: löst die bisher direkt inline gestylten Buttons/Links rechts
   in der Kopfzeile (mcc.html) in wiederverwendbare Klassen auf – vor
   allem, damit .header-meta-row/.header-nav-row per flex-wrap sauber
   umbrechen können (statt sich als reiner Fließtext krumm zu stapeln) und
   die obige Media-Query sie gezielt links ausrichten kann. Rein optisch
   unverändert auf breiten Bildschirmen (dieselben Farben/Abstände wie
   zuvor). */
.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.header-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 8px;
  row-gap: 4px;
  color: white;
  font-size: 0.8rem;
}
.header-pill {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
}
/* Seit v521 (Torstens Wunsch: "oben in der Titelzeile hätte ich gerne für
   Admins und Super Admins noch eine Suche über alles") – Suchfeld in der
   roten Kopfzeile, daher heller Innenraum statt des sonst dort üblichen
   durchsichtigen .header-pill-Stils (bessere Lesbarkeit für einen frei
   eingetippten Suchtext als bei einer reinen Knopf-Beschriftung). Feste
   Breite auf breiten Bildschirmen, schrumpft auf schmalen (siehe
   .header-actions-Media-Query weiter unten, dieselbe Stelle, die bereits
   die übrigen Kopfzeilen-Elemente fürs Handy anpasst). */
.header-suche-input {
  width: 270px;
  max-width: 40vw;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 0.85rem;
}
.header-suche-input::placeholder {
  color: #6b7785;
}
/* Bis v398 stand hier die Positionierung von #kompakt-header-zurueck-btn
   rechts unten in der roten Kopfzeile (seit v310) sowie die dafür nötige
   zusätzliche Kopfzeilen-Höhe auf breiten Bildschirmen (seit v311). Seit
   v399 (Torstens Wunsch, siehe ausführlichen Kommentar bei
   .header-actions in mcc.html) lebt der Knopf nicht mehr in der
   Kopfzeile, sondern als erstes Element in <main> – die Regeln dafür
   stehen jetzt direkt bei #kompakt-header-zurueck-btn weiter unten in
   dieser Datei, diese Kopfzeilen-spezifischen Regeln sind ersatzlos
   entfallen. */
.header-version-link {
  color: white;
  text-decoration: underline;
  opacity: 0.85;
}
.header-nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 14px;
  row-gap: 4px;
}
.header-nav-row a {
  color: white;
  font-size: 0.8rem;
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 16px;
}

/* Seit 16.09.2026 (Torsten zur Kassieren-Ansicht, per Screenshot: "hier
   wird ganz viel Platz verschwendet und dafür sind die Buttons alle sehr
   gedrungen und dicht beieinander, auf dem PC Display sollte das
   deutlich breiter und luftiger sein") – die globale <main>-Breite
   (780px, siehe oben) ist für text-/formularschwere Ansichten bewusst so
   gewählt und bleibt für alle anderen ~270 Bereiche unverändert. NUR für
   die Kassieren-Ansicht (ein Knopf-Raster, kein Fließtext – auf einem
   breiten PC-Monitor gibt es dafür keinen Lesbarkeits-Grund, schmal zu
   bleiben) wird <main> per .main-kasse-breit deutlich breiter, sobald
   #view-kasse sichtbar ist – siehe ladeInhaltFuerKnoten() in mcc.js (der
   EINE zentrale Router, über den jede Navigation läuft), der diese
   Klasse dort zusammen mit den beiden bestehenden Polling-Stopp-Aufrufen
   setzt/entfernt, unabhängig davon, WOHER die Ansicht gerade geöffnet/
   verlassen wird. Erst ab 900px wirksam – auf Tablet/Handy bleibt die
   Kassieren-Ansicht bewusst unverändert schmal/einspaltig. */
@media (min-width: 900px) {
  /* Seit v765 (Torsten: "egal wie, jede Kasse läuft immer auf einem Full
     HD Monitor, wir können da ruhig die volle breite Nutzen, oder
     Variabel abhängig von der Bildschirmauflösung") – kein festes
     1400px-Limit mehr: die Kassieren-Ansicht nutzt die komplette
     Fensterbreite. Bei 1920px stehen damit ~1250px für die Artikel-Spalte
     zur Verfügung (2/3 von .kasse-layout), also rund 8 quadratische
     Knöpfe je Zeile statt 6. Auf schmaleren Schirmen passiert nichts,
     dort greift die Regel ohnehin erst ab 900px. */
  main.main-kasse-breit {
    max-width: none;
  }
}

/* Seit 17.09.2026 (Torsten zur Seminar-Verwaltung, analog zur Kassieren-
   Ansicht oben: "diese App bitte PC optimiert bauen, sprich deutlich
   breite 1400px") – die Seminar-Verwaltung (Seminarliste, Voraussetzungen,
   Optionsgruppen, Zahlungsarten/Autoaktionen/Jahres-Rollover-Modale, …)
   ist eine dichte Verwaltungsoberfläche mit vielen Tabellen/Formularen
   nebeneinander (ähnlich dem offiziellen ISC-Vorbild), keine Fließtext-
   Ansicht – auf einem breiten PC-Monitor gibt es keinen Lesbarkeits-Grund,
   bei 780px zu bleiben. Exakt dasselbe Muster wie .main-kasse-breit: erst
   ab 900px wirksam, auf Tablet/Handy bleibt die Ansicht unverändert
   schmal/einspaltig. */
@media (min-width: 900px) {
  main.main-seminar-breit {
    max-width: 1400px;
  }
}

/* Seit v759 (Webmail, Torstens Wunsch "ein Webmail Client mit imap
   Anbindung wäre auch noch klasse"): Ordnerspalte und Nachrichtenliste
   liegen nebeneinander, Betreffzeilen werden bei 780px schnell abgeschnitten
   – dasselbe Muster wie .main-kasse-breit/.main-seminar-breit, gesetzt in
   ladeInhaltFuerKnoten() in mcc.js. */
@media (min-width: 900px) {
  main.main-webmail-breit {
    max-width: 1200px;
  }
}

/* Seit v778: Dateien-App (Navigation + Liste + Detail-Seitenleiste wie
   Nextcloud), gesetzt in ladeInhaltFuerKnoten() in mcc.js. Nicht ganz
   randlos wie die Kasse: auf einem 2560er-Monitor würde die Tabelle sonst
   so breit, dass Name und Datum auseinanderfallen. */
@media (min-width: 900px) {
  main.main-dateien-breit {
    max-width: 1640px;
  }
}

/* Seit 16.09.2026, siehe Kommentar oben – dieselben drei Kategorie-
   Spalten und Artikel-Knöpfe wie bisher (kasseRenderArtikelAuswahl()/
   kasseArtikelKnopfHtml() in mcc.js), nur jetzt über feste Klassen statt
   komplett fest verdrahteter Inline-Styles, damit hier per Media-Query
   auf breiten Bildschirmen mehr Luft (größere Abstände/Knopfhöhe) dazu
   kommen kann, ohne die ansonsten unveränderten Inline-Werte (Farbe bei
   Bestandswarnung) anzufassen. Die Werte hier sind 1:1 die bisherigen
   Inline-Defaults – ändert an Tablet/Handy nichts. */
.kasse-spalten {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.kasse-spalte {
  flex: 1 1 220px;
  min-width: 0;
}
/* Seit 16.09.2026, Abend (Torsten zu den drei "Alkoholhaltig"-Knöpfen, per
   Screenshot mit Ausrichtungsstrichen nach links und rechts: "Zeilen
   bündig aber eine Zeile tiefer") – die Zwischen-Überschrift des ZWEITEN
   Kategorie-Blocks einer Spalte ("Alkoholhaltig" unter "Süßes")
   beansprucht jetzt genau die Höhe EINER kompletten Knopfzeile
   (Knopfhöhe minus der 4px, die der Knöpfe-Container per margin-top
   selbst beisteuert) statt einer freien Textzeile plus 16px Abstand.
   Dadurch sitzen die Knöpfe darunter wieder exakt auf demselben
   Zeilenraster wie die Nachbarspalten – eine Zeile tiefer, und die
   freigehaltene Zeile trägt die Überschrift. flex-end setzt den Text
   unten in diese Zeile, also direkt über seine eigenen Knöpfe (die
   Luft entsteht oberhalb, als Trennung zum Block darüber). Siehe
   kasseRenderArtikelAuswahl() in mcc.js. */
.kasse-block-titel-versetzt {
  height: 44px;
  display: flex;
  align-items: flex-end;
}
.kasse-artikel-knopf {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
  margin: 0 0 4px 0;
}
@media (min-width: 900px) {
  .kasse-spalten {
    gap: 28px;
  }
  .kasse-spalte {
    flex: 1 1 300px;
  }
  .kasse-artikel-knopf {
    height: 72px;
    margin: 0 0 12px 0;
    padding: 14px 20px;
  }
  /* Zeilenraster auf breiten Bildschirmen: 72px Knopf + 12px Abstand =
     84px pro Zeile, davon 4px steuert der Knöpfe-Container selbst bei –
     siehe .kasse-block-titel-versetzt oben. */
  .kasse-block-titel-versetzt {
    height: 80px;
  }
  /* Seit 16.09.2026, 2. Ergänzung (Torsten: "schon viel besser jetzt die
     Schrift noch deutlich größer") – höher gesetzt als der ursprüngliche
     erste Anlauf (1.05rem). #view-kasse statt nur .kasse-artikel-knopf,
     damit auch Knöpfe ohne .kasse-artikel-knopf-Klasse mitwachsen
     (kasseArtikelKnopfHtml() mit block=false, z.B. im Auffangbereich
     einer unbekannten Kategorie – bis v688 auch die inzwischen
     entfallene "Eintritt"-Kachel) – die untere Aktionsreihe (Bar
     bezahlt/Karte/Warenkorb leeren/Storno) nutzt keine .btn-mini-Klasse
     und bleibt davon unberührt. */
  #view-kasse .btn-mini {
    font-size: 1.35rem;
  }
  /* Seit v765: die quadratischen Artikel-Knöpfe tragen zwei Zeilen
     (Kurztext + kleine Preis-/Bestandszeile) – 1.35rem wie bei den
     früheren breiten Knöpfen würde dort jedes zweite Wort umbrechen.
     1.05rem ist auf 2 m Abstand noch gut lesbar und lässt "Bratwurst"
     einzeilig. */
  #view-kasse .kasse-artikel-knopf {
    font-size: 1.05rem;
  }
}

/* Seit 16.09.2026, 3. Ergänzung (Torsten: "das schaut gut aus, in der
   Kassieren Ansicht die Schrift bitte noch auf Fett ändern") – bewusst
   NICHT in die 900px-Media-Query oben gepackt: anders als Breite/
   Schriftgröße (die Torsten ausdrücklich nur für den breiten PC-Monitor
   wollte) nennt er hier kein Gerät – fett wirkt auch auf einem
   schmäleren Bildschirm nicht schlechter, gilt daher überall. Trifft
   dieselben Knöpfe wie oben (alles unter #view-kasse mit .btn-mini), die
   untere Aktionsreihe bleibt auch hier unberührt. */
#view-kasse .btn-mini {
  font-weight: 700;
}

/* ===== Kassieren-Ansicht v765 (Torstens Wunschliste vom 22.09.2026) =====
   "der Kunden Warenkorb sollte rechts oben beginnen incl der Zahl Buttons
   darunter, also links Artikel rechts Warenkorb" mit "ich denke 2/3
   Artikel zu 1/3 Warenkorb sollte passen": zweispaltiges Grid, aber erst
   ab 900px – auf Handy/Tablet bleiben Artikel und Warenkorb wie bisher
   untereinander (der Warenkorb steht dort als zweite Karte darunter).
   Die rechte Spalte klebt beim Scrollen oben (position:sticky), damit
   Summe und Zahl-Knöpfe auch bei langer Artikelliste sichtbar bleiben. */
.kasse-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) {
  .kasse-layout {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
  .kasse-spalte-korb {
    position: sticky;
    top: 12px;
  }
}

/* "Artikel Buttons lieber quadratisch nicht ganz so breit damit man mehr
   Platz hat dafür Kurztext" – aspect-ratio 1/1 statt der bisherigen festen
   Höhe/Mindestbreite, als Raster mit fester Spaltenzahl (dadurch passen
   mehr Knöpfe in eine Zeile als mit der alten flex-Reihe). Die Knöpfe
   liegen in .kasse-artikel-raster (kasseRenderArtikelAuswahl() in mcc.js). */
.kasse-artikel-raster {
  display: grid;
  /* Auf dem Handy bewusst kleiner (3 Knöpfe je Zeile), am PC größer –
     siehe Media-Query weiter unten. */
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
@media (min-width: 900px) {
  .kasse-artikel-raster {
    /* ~6 Knöpfe je Zeile in der 2/3-breiten Artikelspalte: groß genug,
       dass gängige Kurztexte ("Bratwurst", "Apfelsaft") in EINE Zeile
       passen und nicht mitten im Wort umbrechen. */
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }
}
.kasse-artikel-knopf {
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  overflow: hidden;
  text-align: center;
  line-height: 1.15;
  hyphens: auto;
}
.kasse-artikel-titel {
  display: block;
  overflow: hidden;
  width: 100%;
  /* break-word statt anywhere: bricht NUR, wenn ein Wort allein zu lang
     ist ("Bratwurst" bleibt zusammen, statt als "Bratwur|st" zu brechen). */
  overflow-wrap: break-word;
}
/* "Preis und Bestand nur halb so groß unter den Kurztext" – 0.5em wirkt
   relativ zur (auf breiten Schirmen vergrößerten) Knopfschrift, bleibt
   also überall genau halb so groß wie der Kurztext darüber. */
/* Bestandswarnung: weißer Grund mit farbigem Rand/Text statt der früheren
   inline-Farbe auf dem roten Knopf (dort war die Schrift rot auf rot und
   damit unlesbar – Bugfix v765). Bewusst KEIN disabled-Knopf: bestand<=0
   kann trotzdem noch physisch Ware bedeuten, das Personal entscheidet
   (siehe KassenArtikel.bestand-Docstring in app/models.py). */
.kasse-artikel-knopf.bestand-leer,
.kasse-artikel-knopf.bestand-warnung {
  background: var(--card);
}
.kasse-artikel-knopf.bestand-leer {
  color: var(--red);
  border: 2px solid var(--red);
}
.kasse-artikel-knopf.bestand-warnung {
  color: var(--amber);
  border: 2px solid var(--amber);
}
.kasse-artikel-klein {
  display: block;
  font-size: 0.5em;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}

/* Zahl-Knöpfe unter dem Warenkorb (rechte Spalte) – volle Breite
   untereinander bzw. zwei pro Zeile, damit sie auch mit Handschuhen/
   feuchten Fingern gut zu treffen sind. */
.kasse-zahl-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.kasse-zahl-knoepfe button {
  width: 100%;
  font-size: 1.05rem;
  padding: 12px 8px;
}

/* Wechselgeld-Dialog: Münz-/Schein-Knöpfe (Torsten: "Eingabe womit bezahlt
   wurde über Münz- und Schein Symbole") – Scheine rechteckig/grünlich,
   Münzen rund, damit man sie im Blindflug auseinanderhält. */
.kasse-geld-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.kasse-geld-knopf {
  min-width: 62px;
  padding: 10px 8px;
  font-size: 1rem;
  font-weight: 700;
}
.kasse-geld-knopf.schein {
  background: #e7f5ea;
  color: #14532d;
  border: 2px solid #4caf7d;
  border-radius: 6px;
}
.kasse-geld-knopf.muenze {
  background: #fdf6e3;
  color: #7a5c00;
  border: 2px solid #d4af37;
  border-radius: 999px;
  min-width: 58px;
}
.kasse-rueckgeld {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.45rem;
  font-weight: 800;
  text-align: center;
}
.kasse-rueckgeld.ok { background: var(--ziel-erreicht-bg); color: #14532d; }
.kasse-rueckgeld.fehlt { background: #ffd9d4; color: var(--red); }
.kasse-rueckgeld.neutral { background: var(--bg); color: var(--muted); }

/* Seit 16.09.2026 (Torsten: "für die Essens und Getränkeausgabe brauche
   ich noch eine 'Bestellungen' Kachel, da werden als große Liste (Tablet
   hochkant) alle Bestellungen die gerade an der Kasse bezahlt wurden
   aufgelistet und per Tab als ausgegeben markiert und verschwinden
   dann") – siehe renderKasseBestellungen() in mcc.js. Bewusst von
   vornherein groß (kein "erst ab 900px" wie bei .kasse-artikel-knopf
   oben) – Zielgerät ist laut Torsten ein SCHMALES Tablet im Hochformat,
   aus der Hand bedient, nicht der breite PC-Monitor der Kassieren-
   Ansicht. */
.bestellung-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bestellung-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 1.3rem;
}
.bestellung-zeit {
  font-weight: 400;
  font-size: 1rem;
  color: var(--muted);
  white-space: nowrap;
}
.bestellung-positionen {
  font-size: 1.2rem;
  line-height: 1.5;
}
.bestellung-ausgeben-btn {
  font-size: 1.3rem;
  padding: 16px;
  font-weight: 700;
}

/* Seit v399 (Torstens Wunsch mit Screenshot: "den zurück Button bitte
   immer dort links wo die Linie endet", per Rückfrage präzisiert:
   "linksbündig über dem ToDo Listen Titel") – bis v398 saß dieser Knopf
   rechts unten in der roten Kopfzeile (siehe deren Kommentar-Rest in
   style.css). Jetzt ist er per HTML-Reihenfolge (siehe mcc.html) das
   erste Element in <main>, diese Regel macht daraus nur noch einen
   normalen linksbündigen Block mit Abstand zur darunterliegenden Karte –
   keine Positionierungstricks mehr nötig, da <main> ohnehin bei jeder
   Ansicht bei Null anfängt. display:none/inline-block weiterhin von
   aktualisiereBereichsNavigation() in mcc.js gesteuert (unverändert). */
#kompakt-header-zurueck-btn {
  margin-bottom: 12px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--brand);
  color: white;
}

button.secondary {
  background: white;
  color: var(--brand);
  border: 1px solid var(--brand);
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Seit v477 (Torstens Wunsch: der "zurück"/"schließen"-Link auf den
   Personen-Detailseiten sollte direkt über der Namens-Karte stehen statt
   in der roten Kopfzeile) – ein <a>-Element, das wie ein sekundärer Button
   aussieht (siehe button.secondary oben), aber bewusst eine EIGENE Klasse
   ist statt die button-Selektoren zu erweitern: so bleibt jeder
   bestehende <button> im System unberührt, und #zurueck-link
   (personen-detail.html/personen-profil.html, weiterhin per JS mit .href/
   .onclick/.textContent gesteuert, siehe setupZurueckOderSchliessenLink()
   in den jeweiligen .js-Dateien) kann ein echtes <a> bleiben (nötig für
   den href-Fallback, wenn window.close() nicht greift). */
a.zurueck-schliessen-btn {
  display: inline-block;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--brand);
  border-radius: 8px;
  padding: 6px 12px;
  background: white;
  color: var(--brand);
  text-decoration: none;
  font-size: 0.85rem;
}

input, select {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  width: 100%;
}

/* Checkboxen/Radios sollen NICHT die width:100% von oben erben – sonst
   blähen sie sich (v.a. innerhalb eines <label>) auf die volle Breite des
   Elternelements auf und schieben den danebenstehenden Beschriftungstext
   in die nächste Zeile bzw. verdrängen ihn ganz (Bug in v85/v86 gemeldet:
   Checkbox "Trainer pro Kind" ohne sichtbare Beschriftung). */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  flex: 0 0 auto;
}

label { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 4px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.unbekannt { background: #eceff1; color: var(--muted); }
.badge.anwesend { background: #e2f4e9; color: var(--green); }
.badge.abwesend_manuell { background: #fdeceb; color: var(--red); }
.badge.entschuldigt { background: #eaf1fb; color: var(--status-entschuldigt); }

.btn-mini { padding: 5px 9px; font-size: 0.78rem; border-radius: 6px; }

/* Seit v565 (Torsten zur Inventarliste: "in der Inventarliste fehlt jetzt
   ein bearbeiten Button ... bei allen Medizin und PSA Produkten ist der
   Stift durch das Symbol verdeckt oder in das andere Symbol geändert") –
   die Aktions-Spalte der Inventarliste-/PSA-Prüfung-Übersichtstabelle
   (renderInventarlisteGenerischListe()/renderPsaPruefungGenerischListe()
   in mcc.js) hatte bis dahin `white-space:nowrap` auf der ganzen Zelle:
   bei mehreren Knöpfen (📎/📘/🦺/🚑/✏️/🗑️ je nach Gegenstand) wuchs die
   Spalte je nach dem Gegenstand mit den MEISTEN Knöpfen in der ganzen
   Tabelle (Tabellenspalten teilen sich die Breite über alle Zeilen) auf
   eine Breite, die auf dem Handy weit über den Bildschirmrand hinausragte
   – der ✏️-Bearbeiten-Knopf blieb dann bei Gegenständen mit einem
   zusätzlichen Verknüpfungs-Knopf (z.B. 🚑 bei einem verlinkten
   Medizinprodukt) unsichtbar außerhalb des sichtbaren Bereichs, ohne dass
   auf den ersten Blick klar war, dass man die ganze Tabelle noch weiter
   nach rechts scrollen müsste. Jetzt bricht die Knopf-Gruppe stattdessen
   INNERHALB ihrer eigenen Zelle um (flex-wrap, feste Maximalbreite für
   zwei Knöpfe je Zeile) – die Aktions-Spalte selbst bleibt dadurch immer
   schmal und alle Knöpfe einer Zeile bleiben ohne zusätzliches Scrollen
   sichtbar, unabhängig davon, wie viele Verknüpfungs-Knöpfe ein einzelner
   Gegenstand hat. */
.aktions-btn-gruppe { display: flex; flex-wrap: wrap; gap: 4px; width: 76px; }

/* Eltern-Ansicht: Liste der künftigen Kurstage */
.kt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.kt-row:last-child { border-bottom: none; }
.kt-datum { flex: 1 1 160px; font-weight: 600; color: var(--text); font-size: 0.92rem; }
.kt-grund { flex: 1 1 140px; max-width: 200px; }

/* Seit v267 (Torstens Wunsch: "um den Voraussetzungsblock sollte ein
   Rahmen sein oder eine andere Art der Kenntlichmachung damit man das
   sofort erkennt dass das benötigt wird") – umschließt im Tab "Teilnehmer"
   (renderDetailsPanel() in mcc.js) die drei Blöcke Mitgliedschaft/
   Erklärung/Eintrittsgeld sichtbar als EINEN "das hier muss erfüllt
   sein"-Bereich, statt nur durch die dünnen gestrichelten Trennlinien
   zwischen den einzelnen Blöcken erkennbar zu sein. Amber statt Rot, weil
   der Rahmen selbst kein Fehlerzustand ist (der ist bereits, wo zutreffend,
   an den einzelnen Chips/Zeilen selbst rot markiert, siehe z.B.
   renderMitgliedschaftChip()) – der Rahmen markiert nur "hier hinschauen",
   nicht "hier fehlt etwas". */
.kt-voraussetzungen {
  margin-top: 12px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 2px 14px 12px 14px;
  background: #fffaf0;
}
.kt-voraussetzungen-titel {
  margin-top: 10px;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--amber);
}

/* Kursziel erreicht / schwimmt – dieselben Markierungsfarben wie auf
   Live-Anzeige/Kiosk (siehe --ziel-erreicht-bg/--schwimmt-bg oben), hier
   zusätzlich in der internen Übersicht (Matrix), der Teilnehmer-Liste und
   (seit v296) der Schwimmcamp-Trainer-Übersicht (table.ta-matrix, siehe
   matrixHtml() in mcc.js). */
.kt-row.ziel-erreicht, .matrix td.person-col.ziel-erreicht, #roster-body tr.ziel-erreicht, table.ta-matrix td.ziel-erreicht { background: var(--ziel-erreicht-bg); }
.kt-row.schwimmt-status, .matrix td.person-col.schwimmt-status, #roster-body tr.schwimmt-status, table.ta-matrix td.schwimmt-status { background: var(--schwimmt-bg); }
.btn-mini.schwimmt-active { background: var(--schwimmt-bg); color: var(--text); border-color: var(--amber); }
.btn-mini.ziel-active { background: var(--ziel-erreicht-bg); color: var(--text); border-color: var(--green); }

/* Seit 15.09.2026 (Torsten: "wenn die Gäste sich gescannt haben öffnet der
   Datensatz") – kurzzeitige Hervorhebung der Zeile, die soeben per
   "Datensatz öffnet auf dem anderen Rechner"-Funktion automatisch
   angesprungen wurde (siehe oeffneHundeschwimmenZeileNachDeeplink()/
   oeffneSchwimmcampZeileNachDeeplink() in mcc.js) – die Tabs "🐕
   Hundeschwimmen"/"🏕️ Schwimmcamp" haben (anders als der Tab "Teilnehmer")
   kein aufklappbares Detail-Panel, das die Zeile sonst schon von selbst
   auffällig macht, darum hier ein eigener, deutlich anderer Blauton als
   ziel-erreicht (grün)/schwimmt (gelb) oben, mit weichem Ausblenden statt
   hartem Verschwinden (per JS nach 4 Sekunden wieder entfernt, siehe
   dort). */
.kt-row-highlight {
  background: #d7e9f7;
  transition: background 1.5s ease-out;
}

/* Erreichte Kursziele als kleine Chips (seit v67 mehrere pro Teilnehmer
   möglich statt eines einzelnen Häkchens, siehe ParticipantKursziel) –
   dieselbe grüne Markierungsfarbe wie zuvor der "Kursziel erreicht"-Button. */
.kursziel-chips { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.chip.ziel-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--ziel-erreicht-bg); border: 1px solid var(--green);
  border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 0.78rem; color: var(--text);
}
.chip.ziel-chip .chip-remove {
  cursor: pointer; color: var(--muted); font-weight: 700; padding: 0 5px;
  border-radius: 50%; line-height: 1.4;
}
.chip.ziel-chip .chip-remove:hover { background: rgba(0,0,0,0.08); color: var(--red); }

#reader { width: 100%; max-width: 420px; margin: 0 auto; }

.hint { color: var(--muted); font-size: 0.85rem; }

/* Seit v266: admin-editierbare Hinweistexte (siehe [data-text-key] in
   mcc.html sowie ladeTextInhalteUndAnwenden() in mcc.js). Das Stift-Symbol
   sitzt inline direkt hinter dem Text, dezent und nur bei Hover/Fokus des
   umgebenden Absatzes deutlich sichtbar, damit es im normalen Lesefluss
   nicht ablenkt. */
.text-edit-wrapper { position: relative; }
.text-edit-stift {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85em;
  opacity: 0.35;
  padding: 0 0 0 6px;
  vertical-align: middle;
}
.text-edit-wrapper:hover .text-edit-stift,
.text-edit-stift:focus { opacity: 1; }
/* Werkzeugleiste (Fett/Schriftgröße) über dem Bearbeiten-Textfeld, seit
   v328 (Torstens Wunsch: "die Textformatierung muss anpassbar sein
   (Schriftgröße und Fett)"), siehe textBearbeitenStarten() in mcc.js. */
.text-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.text-edit-toolbar select { font: inherit; padding: 2px 4px; }
.text-edit-toolbar .hint { color: var(--muted, #777); font-size: 0.8em; }
.text-edit-textarea {
  width: 100%;
  min-height: 70px;
  font: inherit;
  color: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  box-sizing: border-box;
  resize: vertical;
}
.text-edit-msg { color: var(--red); font-size: 0.85rem; margin-top: 4px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 0.9rem; }
.flash.ok { background: #e2f4e9; color: var(--green); }
.flash.error { background: #fdeceb; color: var(--red); }

.center { text-align: center; }

/* Kursübersicht: Matrix Teilnehmer × Kurstage */
.matrix-wrap { overflow-x: auto; }
table.matrix { border-collapse: collapse; }
table.matrix th, table.matrix td { padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.matrix thead th.date-col { background: var(--brand); color: white; text-align: center; font-weight: 600; }
table.matrix thead th.date-col .hint { color: rgba(255,255,255,0.85); }
.person-col { position: sticky; left: 0; background: var(--card); text-align: left; z-index: 1; box-shadow: 1px 0 0 var(--border); }
thead .person-col { background: var(--brand); color: white; z-index: 2; }

/* Seit 14.09.2026 (Torstens Rückmeldung zur Inventarliste: "man kann den
   bearbeiten Button nicht mehr sehen und bei tausenden Artikeln ist der
   Scrollbalken quasi nicht erreichbar") – die letzte Spalte (Aktions-
   Knöpfe: Bearbeiten/Löschen/Sprung-Icons) bleibt beim horizontalen
   Scrollen einer breiten Tabelle in .matrix-wrap rechts fixiert sichtbar,
   analog zu .person-col oben (dasselbe Prinzip, nur rechts statt links
   fixiert) – kein horizontales Scrollen mehr nötig, um an Bearbeiten/
   Löschen zu kommen, und der (bei tausenden Zeilen ohnehin praktisch
   unerreichbare) horizontale Scrollbalken am unteren Tabellenende ist
   dafür nicht mehr nötig. Verwendet z.B. in renderInventarlisteGenerisch
   Liste()/renderPsaPruefungGenerischListe() in mcc.js. */
.aktionen-spalte-sticky { position: sticky; right: 0; background: var(--card); z-index: 1; box-shadow: -1px 0 0 var(--border); }

/* Rechte-Tabelle (eigene Kachel seit v441, davor v440 als Dropdown-
   Option in der Rechte-Übersicht – siehe renderRechteTabellePanel()/
   renderRechteUebersichtTabelleHtml() in mcc.js) – alle Rollen als
   Spalten, ganzer Navigationsbaum als Zeilen. Gleiches Grund-Muster wie
   .matrix-wrap/.person-col oben (sticky erste Spalte), zusätzlich mit
   sticky Kopfzeile, da diese Tabelle je nach Struktur deutlich mehr
   Zeilen hat als die Kursübersicht. */
.rt-rollen-filter { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 12px; }
.rt-rollen-filter label { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--text); margin-bottom: 0; }
.rechte-tabelle-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
table.rechte-tabelle { border-collapse: collapse; font-size: 0.85rem; width: 100%; }
table.rechte-tabelle th, table.rechte-tabelle td { padding: 5px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: center; }
table.rechte-tabelle thead th { position: sticky; top: 0; background: var(--brand); color: white; font-weight: 600; z-index: 2; }
table.rechte-tabelle .rt-name-col { position: sticky; left: 0; background: var(--card); text-align: left; z-index: 1; box-shadow: 1px 0 0 var(--border); font-weight: 400; }
table.rechte-tabelle thead .rt-name-col { background: var(--brand); z-index: 3; }
/* Seit v475 (NavKnotenZusatzGruppe, siehe Docstring in app/models.py) –
   ersetzt das frühere .rt-gruppe-hinweis (reiner Text-Hinweis bei
   exklusiv gruppen-gebundenen Knoten, jetzt entfallen): eine eigene,
   normal umbrechende Spalte mit Chips je zusätzlich freigegebener Gruppe
   plus einem kleinen Auswahlfeld zum Hinzufügen weiterer. */
table.rechte-tabelle .rt-gruppen-col { text-align: left; white-space: normal; min-width: 140px; }
.rt-gruppen-zelle { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rt-gruppe-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: #eef2f7; color: var(--text);
  border-radius: 999px; padding: 1px 6px 1px 9px; font-size: 0.76rem; white-space: nowrap;
}
.rt-gruppe-chip-x {
  border: none; background: none; cursor: pointer; color: inherit; font-size: 0.9rem;
  line-height: 1; padding: 0 0 0 2px; opacity: 0.65;
}
.rt-gruppe-chip-x:hover { opacity: 1; }
.rt-gruppe-hinzufuegen { font-size: 0.72rem; max-width: 90px; }

/* Seit v476 (Auf-/Zuklappen je Bereich, siehe rechteTabelleOffen-Kommentar
   in mcc.js) – gleiches ▸/▾-Pfeil-Muster wie die ältere Einzelrollen-
   Ansicht ("Rechte-Übersicht"), hier innerhalb der Tabellenzelle. */
table.rechte-tabelle .rt-pfeil {
  display: inline-block; width: 16px; text-align: center; cursor: pointer; color: var(--text);
}
table.rechte-tabelle .rt-pfeil-leer { cursor: default; }
table.rechte-tabelle .rt-name-klickbar { cursor: pointer; }

/* Seit v280: Trainer-Übersicht im Tab "Events"/"Schwimmcamp" – Zeit×Platz-
   Matrix, dieselbe Datengrundlage wie der Excel-Export (siehe matrixHtml()
   in mcc.js), mit editierbaren Trainer-Feldern direkt in der Zelle. Torstens
   Meldung 02.09.: "Die Zuordnung der Trainer für das Schwimmcamp ist zu
   unübersichtlich wir müssen das so wie auf dem Export hinbekommen". Feste
   Rahmenlinien statt der sonst üblichen reinen Unterstriche, damit die
   Spaltenblöcke je Stufe optisch genauso klar abgegrenzt sind wie im Excel. */
table.ta-matrix { border-collapse: collapse; font-size: 0.85rem; }
table.ta-matrix th, table.ta-matrix td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  vertical-align: top;
  min-width: 110px;
}
table.ta-matrix thead th { text-transform: none; letter-spacing: normal; text-align: center; color: var(--text); }
table.ta-matrix tbody td:first-child, table.ta-matrix tbody td:nth-child(2) {
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  min-width: unset;
}
.ta-matrix-name { font-weight: 600; margin-bottom: 2px; }
.ta-matrix-trainer { width: 100%; font-size: 0.85rem; }
/* Seit v315 (Torstens Wunsch: "in der Trainer-Übersicht des Schwimmcamps
   sollen die Trainer Felder rot sein, wenn ein Termin gebucht ist aber
   noch kein Trainer eingetragen ist") – dieselbe Rot-Palette wie bei
   .ta-pille.voll/.slot-belegung.voll (#f5dcd7-Hintergrund + var(--red)),
   hier auf das <select>-Feld selbst statt auf die ganze Zelle angewendet,
   damit es sich klar von der bestehenden grün/gelb-Zellmarkierung
   (.ziel-erreicht/.schwimmt-status, siehe weiter unten) unterscheidet. Wird
   nur gesetzt, wenn matrixHtml() in mcc.js einen belegten Platz/Zeitslot
   ohne eingetragenen Trainer erkennt (siehe eventTrainerSelectHtml()). */
.ta-matrix-trainer.ta-matrix-trainer-fehlt { background: #f5dcd7; border-color: var(--red); color: var(--red); }
/* Seit v400 (Torstens Wunsch: "für die Schwimmcamp Trainer Ansicht
   brauchen wir zusätzlich eine nur gucken nicht anfassen Kategorie") –
   reiner Text statt <select> für Accounts mit SchwimmcampTrainerZugriff.
   stufe == "nur_lesen" (siehe eventTrainerSelectHtml() in mcc.js), gleiche
   Rot-Markierung wie oben für einen belegten Platz ohne Trainer. */
.ta-matrix-trainer-text { display: inline-block; width: 100%; font-size: 0.85rem; padding: 2px 4px; }
.ta-matrix-trainer-text.ta-matrix-trainer-fehlt { background: #f5dcd7; border-radius: 4px; color: var(--red); }
.ta-matrix-pause { text-align: center; font-style: italic; color: var(--muted); background: var(--card); }
/* Seit v410 (Torstens Wunsch anhand eines Screenshots der Trainer-Übersicht:
   "bei deaktivierten Slots ein großes dünnes Kreuz durch das entsprechende
   Feld") – markiert einen über die Zeitslot-Karte deaktivierten, unbelegten
   Platz (siehe matrixHtml() in mcc.js) mit einem großen, dünnen X quer durch
   die ganze Zelle statt eines bearbeitbaren Feldes oder des bisherigen
   "frei"-Labels. Zwei sehr schmale (0.5px) diagonale Verlaufslinien in der
   dezenten --muted-Farbe ergeben das X, ohne echten Inhalt/DOM-Aufwand. */
table.ta-matrix td.ta-matrix-deaktiviert {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--muted) calc(50% - 0.5px), var(--muted) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--muted) calc(50% - 0.5px), var(--muted) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-color: var(--card);
}

/* Seit v204 (Torstens Wunsch: "können wir dann auch Badges für ungelesene
   Nachrichten erscheinen lassen?") – ein einziger runder, roter
   Ungelesen-Badge-Stil für alle Einsatzorte: der Nav-Tab/die Kachel
   "💬 Nachrichten" (nav-badge, siehe renderHubTiles()/renderKompaktKinderNav()
   in mcc.js), die Chat-Liste (ersetzt die bisherige reine "(3)"-Textanzeige in
   renderNachrichtenChatsListe()) sowie identisch im Eltern-Chat
   (renderElternChat(), eltern.js). Absichtlich derselbe Klassenname/
   dieselbe Optik an allen Stellen statt eigener Varianten, damit "Badge
   für ungelesene Nachrichten" im ganzen Tool einheitlich aussieht. */
.unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: white; font-size: 0.72rem; font-weight: 700;
  line-height: 18px;
}
.nav-badge { margin-left: 6px; }

/* Seit v377 (Torstens Wunsch: "neue Nachrichten müssen auch außerhalb der
   Nachrichten App in der Titelleiste signalisiert werden") – eigene Variante
   für #header-nachrichten-badge (siehe mcc.html) direkt in der roten
   Kopfzeile (header.app-header, background:var(--brand)): der normale
   .unread-badge ist rot auf hellem Grund und dort praktisch unsichtbar, hier
   stattdessen DLRG-Gelb mit dunkler Schrift für echten Kontrast. Als kleiner
   Zähler oben rechts auf der Glocke positioniert statt inline daneben. */
#header-nachrichten-badge-btn { position: relative; font-size: 1.05rem; line-height: 1; }
.unread-badge-header {
  position: absolute; top: -6px; right: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ffed00; color: #1a1a1a; font-size: 0.72rem; font-weight: 700;
  line-height: 18px; box-shadow: 0 0 0 2px var(--brand);
}

.count-badges { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }
.count-badge { min-width: 18px; padding: 1px 5px; border-radius: 5px; font-size: 0.7rem; font-weight: 700; color: white; text-align: center; }
.count-badge.anwesend { background: var(--green); }
.count-badge.abwesend_manuell { background: var(--red); }

/* Seit 16.09.2026 (Torsten: "die Buttons bitte alle quadratisch und etwas
   größer damit ich die auch mit meinen dicken Fingern treffe") – gilt für
   ALLE .pill-Knöpfe der Kurs-Übersicht-Matrix (Anw/Ent bei normalen
   Schwimmkursen UND die 4 Hundeschwimmen-Badges Impf./Vers./Check/Bez.,
   siehe renderPills()/renderHundeschwimmenBadges() in mcc.js) – vorher
   schmale, kaum als Fläche wahrnehmbare Knöpfchen (padding 4px 7px,
   0.68rem), jetzt feste 44×44px-Quadrate (Apple/Google-Richtwert für
   Touch-Ziele) mit zentriertem, bei Bedarf zweizeilig umbrechendem Text. */
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--border);
  background: white;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  flex: 0 0 44px;
}
/* Seit 16.09.2026 – die "Bezahlt"-Kachel in renderHundeschwimmenBadges()
   ist bewusst NICHT klickbar (siehe deren Docstring in mcc.js, per
   disabled-Attribut), soll aber optisch trotzdem genauso deutlich
   rot/grün zu erkennen sein wie die anderen drei Quadrate – ohne die
   beiden Regeln hier würde der Browser einen disabled-Button standardmäßig
   ausgegraut/abgedunkelt darstellen. */
.pill.nicht-klickbar { cursor: default; }
.pill:disabled { opacity: 1; cursor: default; }
.pill.active.anwesend { background: var(--green); border-color: var(--green); color: white; }
.pill.active.abwesend_manuell { background: var(--red); border-color: var(--red); color: white; }
.pill.active.entschuldigt { background: var(--status-entschuldigt); border-color: var(--status-entschuldigt); color: white; }

/* Tab-Navigation */
nav.tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
nav.tabs .tab-btn {
  background: white;
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
nav.tabs .tab-btn.active { background: var(--brand); color: white; }
/* Seit v438: Titelbild-Override in der schmalen Untertab-Zeile
   (renderKompaktKinderNav() in mcc.js), Gegenstück zu .hub-tile .icon img
   für die volle Kachel-Ansicht. */
.nav-ebene-icon-img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
}

/* Seit v132: "in Vorbereitung"-Platzhalter innerhalb der Bereichs-Nav bzw.
   von .subtabs (siehe #bereich-nav-kompakt-kinder/#einsatz-subtabs in
   mcc.html) –
   analog zur bestehenden .hub-tile.disabled auf der Startseite: sichtbar,
   aber ausgegraut und nicht klickbar (pointer-events:none, statt gar kein
   onclick zu setzen, damit ein versehentlich doch gesetztes onclick nie
   greifen kann). */
nav.tabs .tab-btn.disabled, .subtabs .subtab-btn.disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* Statistik: Auswertung gezielt wählen statt alle Karten gleichzeitig
   untereinander anzuzeigen – bewusst kleiner/zurückhaltender als die
   Haupt-Tabs oben (nav.tabs), damit auf einen Blick klar bleibt, dass das
   eine Auswahl INNERHALB von "Statistik" ist, keine eigene App-Ebene. */
.subtabs { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.subtabs .subtab-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
}
.subtabs .subtab-btn.active { background: var(--brand); color: white; border-color: var(--brand); }

/* Seit v255 (ToDo-Liste, Torstens Wunsch: "die unterkategorien hätte ich
   gerne auch als buttons, wenn ich auf eine hauptkategorie klicke gehen die
   unterkategorien auf") – dieselbe Buttonreihen-Optik wie .subtabs oben,
   nur etwas kleiner/zurückhaltender, damit auf einen Blick klar bleibt,
   dass dies eine Auswahl INNERHALB der oben gewählten Hauptkategorie ist,
   keine gleichrangige zweite Tab-Ebene. */
.subtabs.subtabs-unter .subtab-btn {
  padding: 4px 11px;
  font-size: 0.76rem;
}

/* /anzeige und /kiosk laufen auf fest eingerichteten Bildschirmen ohne Maus/
   Touch – ein Scrollbalken wäre dort schlicht unbedienbar. fitAnzeigeLists()
   in anzeige.js/kiosk.js sorgt bereits aktiv dafür, dass alle Namenslisten
   in die verfügbare Höhe passen; dieses overflow:hidden ist zusätzlich ein
   harter Sicherheitsnetz-Fallback, falls trotzdem mal ein paar Pixel Rand
   (z.B. Abstände zwischen Kurskarten) über den sichtbaren Bereich hinausgehen
   – dann wird lieber ein winziger Rand unsichtbar abgeschnitten, als dass
   ein Scrollbalken erscheint. Wichtig: NUR auf diesen beiden Kiosk-Seiten
   (Klasse no-scroll-page), nicht global – die Trainer-Ansicht etc. sollen
   ganz normal scrollen können. */
html:has(body.no-scroll-page), body.no-scroll-page { overflow: hidden; height: 100%; }

/* Live-Anzeige (zweiter Monitor) & Einlass-Kiosk */
/* ALLE heute sichtbaren Kurse (egal ob zeitgleich oder nur zeitlich
   überlappend sichtbar, siehe ANZEIGE_SICHTBAR_MINUTEN_NACH_START im
   Backend) landen nebeneinander in einer Reihe statt untereinander
   gestapelt – so bekommt jeder Kurs die volle Bildschirmhöhe statt sich
   diese mit anderen Kursen teilen zu müssen, was gerade auf schmalen/
   hochkant montierten Bildschirmen deutlich lesbarer ist. Reicht die
   Breite für alle Kurse in einer Zeile nicht mehr aus (viele Kurse
   gleichzeitig sichtbar), bricht der Rest per flex-wrap automatisch in
   eine weitere Zeile um – fitAnzeigeLists() in anzeige.js/kiosk.js
   erkennt das anhand der tatsächlich gerenderten Position jeder Karte und
   reserviert für nachfolgende Zeilen ausreichend Platz, damit auch die
   letzte Zeile nicht über den Bildschirm hinausragt.

   Seit v592 (Torsten, direkt im Anschluss an die neue Kiosk-Einstellung
   "wie viele Kurse gleichzeitig": "bitte in der Anzeige noch ändern das
   in der ersten Zeile max 3 Kurse stehen") – bis dahin war die Basisbreite
   ein FESTER Pixelwert (flex: 1 1 300px), wie viele Karten in eine Zeile
   passten, hing dadurch rein vom Bildschirm zufällig ab (auf einem
   breiten Monitor konnten so auch 4 oder 5 Karten in eine einzige Zeile
   passen). calc((100% - 40px) / 3) macht die Basisbreite stattdessen
   IMMER exakt ein Drittel der verfügbaren Breite (40px = die zwei
   20px-Lücken zwischen drei Karten, siehe gap unten) – ab der vierten
   Karte reicht der Platz in der Zeile dadurch nie mehr, sie bricht
   zuverlässig um, unabhängig von der Bildschirmbreite. Bei WENIGER als
   drei Kursen (der Alltag) wächst jede Karte dank flex-grow (die führende
   "1") weiterhin ganz normal über dieses Drittel hinaus, bis sie die
   Zeile ausfüllt – KEIN max-width hier, das würde genau dieses Wachsen
   verhindern und an einem normalen Tag mit nur ein oder zwei Kursen
   unnötig schmale Karten erzwingen. min-width bleibt als Untergrenze für
   sehr schmale Bildschirme unverändert. */
.anzeige-time-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 28px; }
.anzeige-time-row .anzeige-course {
  flex: 1 1 calc((100% - 40px) / 3);
  min-width: 260px;
  margin-bottom: 0;
  border: 2px solid var(--brand-dark);
  border-radius: 16px;
  padding: 16px 16px 18px;
  background: #eef1f5;
}
/* Seit v594 (Torsten: "in der Kiosk Ansicht ist über dem Kursnamen immer
   noch 1cm Platz den können wir auch noch einsparen") – margin-top:0 war
   hier bisher NICHT gesetzt, h2 hatte also weiterhin seinen normalen
   Browser-Standardabstand nach oben (bei der hier verwendeten Schriftgröße
   gemessen ca. 20px) ZUSÄTZLICH zum Karten-Padding (16px, siehe oben) –
   zusammen fast genau der von Torsten geschätzte 1cm. Der Browser-
   Standardabstand ist reiner Zufall der UA-Stylesheet-Vorgabe für <h2>,
   keine bewusste Gestaltung – jetzt entfernt, das Karten-Padding allein
   reicht als Abstand nach oben. */
.anzeige-course h2 { margin-top: 0; margin-bottom: 4px; }
/* Trainer-Name im Kiosk-Display (".kiosk-trainer-name", siehe kiosk.js):
   bewusst genauso groß wie der Kursname direkt darüber, damit er von
   Eltern auch auf Distanz am Beckenrand gut lesbar ist – 1.5em relativ
   zum selben Eltern-Element (.anzeige-course) wie h2 (kein eigener fester
   Wert), damit beide IMMER exakt gleich groß bleiben, auch wenn sich die
   Größe von h2 mal ändert. Nur im Kiosk, NICHT in der Live-Anzeige
   (dort weiterhin die kleine ".hint"-Zeile) – dort wurde nur die Größe
   im Kiosk gewünscht. */
.anzeige-course .kiosk-trainer-name {
  font-size: 1.5em;
  font-weight: 700;
  color: var(--text);
  margin: -4px 0 10px;
}
/* Bewusst IMMER genau 2 Spalten nebeneinander (nicht auto-fit/minmax), auch
   wenn die Kurskarte durch einen parallel laufenden zweiten Kurs sehr schmal
   wird: mit auto-fit würden die Spalten bei zu wenig Breite untereinander
   stapeln, was die Karte deutlich höher macht, als auf den Bildschirm passt.
   Bei wenig Breite werden die Namenslisten stattdessen automatisch schmaler
   und – falls nötig – von fitAnzeigeLists() (anzeige.js/kiosk.js) auf
   kleinere Schrift/mehr Spalten umgestellt. minmax(0, …fr) statt
   minmax(min-content,…fr) verhindert, dass eine sehr lange Kurskarte die
   Grid-Spalten wieder aufbläht.

   Seit v593 (Torsten: "die Felder in der Ansicht nach 'Anwesend' und
   'nicht anwesend' auf 2/3 Breite für anwesend ändern") – bis dahin exakt
   50/50 (repeat(2, minmax(0, 1fr))). "Anwesend" (siehe .anzeige-col.
   anwesend in anzeige.js/kiosk.js – IMMER die erste der beiden Spalten,
   "Noch nicht da"/.unbekannt IMMER die zweite) bekommt jetzt 2/3, "Noch
   nicht da" 1/3 der Breite. fitAnzeigeLists() liest die tatsächliche
   Spaltenbreite ohnehin live per col.clientWidth aus (siehe dortiger
   Kommentar) – passt sich also automatisch an, keine JS-Änderung nötig. */
.anzeige-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
/* Seit v595 (Torsten, während des laufenden Schwimmcamps: "wenn drei
   Kurse in einer Zeile sind wird die Summenzahl nicht nebeneinander
   angezeigt") – container-type:inline-size macht JEDE einzelne Spalte
   (Anwesend/Noch nicht da) zu einem eigenen Container-Query-Kontext, auf
   dessen TATSÄCHLICHE gerenderte Breite die @container-Regel bei h3
   unten reagieren kann. Nötig geworden durch das Zusammenspiel zweier
   vorheriger, für sich genommen harmloser Änderungen: v592 (max. 3
   Kurskarten pro Zeile) UND v593 (Anwesend:Noch-nicht-da 2:1 statt 1:1)
   zusammen machten die "Noch nicht da"-Spalte bei drei Karten pro Zeile
   so schmal (real gemessen ca. 155px), dass die große, extra gut
   lesbare Badge (siehe deren eigener Kommentar unten) nicht mehr neben
   die Überschrift passte und stattdessen den Überschriftstext mitten im
   Wort umbrach ("Noch nicht" / "da") – optisch flackernd/unruhig, weil
   sich das von Kurs zu Kurs (je nach ein- oder zweistelliger Zahl)
   unterschiedlich verhielt. */
.anzeige-col { border-radius: 12px; padding: 14px; background: var(--card); border: 2px solid var(--border); container-type: inline-size; }
.anzeige-col h3 { margin: 0 0 10px 0; font-size: 1.1rem; display:flex; justify-content:space-between; white-space: nowrap; }
.anzeige-col.unbekannt { border-color: var(--border); }
.anzeige-col.anwesend { border-color: var(--green); }
.anzeige-col.entschuldigt { border-color: var(--status-entschuldigt); }
.anzeige-col.abwesend_manuell { border-color: var(--red); }
/* Live-Anzeige & Kiosk: die Anwesend-/Noch-nicht-da-/Entschuldigt-Summen
   sind auf Distanz (zweiter Monitor, Kiosk-Bildschirm) mit der sonst
   überall verwendeten kleinen .badge-Größe schwer ablesbar – hier deutlich
   größer, unabhängig von den (bewusst kleinen) Status-Badges in der
   Trainer-Ansicht. */
.anzeige-col h3 .badge, .anzeige-subdivider h4 .badge {
  font-size: 1.4rem;
  padding: 3px 15px;
  min-width: 2ch;
}
/* Greift NUR, wenn die einzelne Spalte selbst schmal ist (siehe
   container-type oben an .anzeige-col) – bei zwei oder weniger Karten
   pro Zeile (v592) bleibt die große, gut lesbare Badge unverändert wie
   gewohnt. Verkleinert Badge UND Überschrift gemeinsam moderat, genau
   so weit, dass "Noch nicht da"/"Entschuldigt" + eine zweistellige Zahl
   auf dieser schmalen Spalte zuverlässig in einer Zeile nebeneinander
   bleiben, statt umzubrechen. */
@container (max-width: 210px) {
  .anzeige-col h3 { font-size: 0.92rem; }
  .anzeige-col h3 .badge, .anzeige-subdivider h4 .badge {
    font-size: 1rem;
    padding: 2px 8px;
    min-width: 1.5ch;
  }
}
/* Namenslisten: Standardmäßig eine einfache Liste. Passt eine Liste nicht
   mehr ohne Scrollbalken in die verfügbare Höhe, rechnet fitAnzeigeLists()
   in anzeige.js/kiosk.js live aus, wie viele Spalten nötig sind, und setzt
   dafür per JS display:grid + grid-auto-flow:column direkt auf dem <ul>
   (siehe dort) – CSS column-width wurde bewusst NICHT verwendet, weil es
   nur auf verfügbare BREITE reagiert, nicht auf Höhe, und bei knapper Höhe
   Teilnehmer unbemerkt "verschluckt" statt sie in weitere Spalten zu
   verteilen. .list-compact/.list-tiny sind Ausweichstufen mit kleinerer
   Schrift, die fitAnzeigeLists() zuschaltet, wenn selbst mehrspaltig bei
   normaler Schriftgröße nicht genug Platz in der Breite ist. Die Karte
   selbst wächst in die Breite, wenn Platz ist (z.B. wenn nur ein Kurs
   läuft), siehe .anzeige-time-row .anzeige-course. */
.anzeige-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* white-space: nowrap + text-overflow: ellipsis ist hier keine Kosmetik,
   sondern PFLICHT für die JS-Einpassung (fitAnzeigeLists() in
   anzeige.js/kiosk.js): die rechnet mit einer einheitlichen Zeilenhöhe pro
   Liste. Dürfte ein langer Vor-/Nachname (z.B. "Sareena Raveendralingam")
   in einer schmalen Spalte umbrechen, wäre diese eine Zeile plötzlich
   doppelt so hoch wie angenommen – die ganze Höhenrechnung würde nicht mehr
   stimmen und Namen könnten wieder (unsichtbar) über den Rand hinausragen.
   Ein zu langer Name wird stattdessen mit „…" abgeschnitten – klar lesbar
   schlechter als der volle Name, aber niemals unsichtbar. */
.anzeige-col li {
  padding: 5px 0;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anzeige-col li:last-child { border-bottom: none; }
.anzeige-col ul.list-compact li { padding: 3px 0; font-size: 0.88rem; }
.anzeige-col ul.list-tiny li { padding: 1px 0; font-size: 0.74rem; }
/* Kursziel erreicht / schwimmt – reine Hintergrundfarbe, verändert
   bewusst keine Höhe/Breite/Schrift, damit die JS-Einpassung oben
   (einheitliche Zeilenhöhe pro Liste) davon unberührt bleibt. */
.anzeige-col li.ziel-erreicht { background: var(--ziel-erreicht-bg); }
.anzeige-col li.schwimmt-status { background: var(--schwimmt-bg); }
.anzeige-empty { color: var(--muted); font-size: 1rem; }
.anzeige-clock { font-size: 1rem; opacity: 0.85; }

/* Trennlinie innerhalb der "Anwesend"-Spalte, darunter die entschuldigten/
   Urlaub-Kinder – zusammengelegt statt eigener Spalte. */
.anzeige-subdivider {
  border-top: 2px dashed var(--border);
  margin: 12px 0 8px;
  padding-top: 8px;
}
.anzeige-subdivider h4 { margin: 0; font-size: 0.95rem; color: var(--status-entschuldigt); display: flex; justify-content: space-between; white-space: nowrap; }

/* Scan-Popup auf der Live-Anzeige: großer Hinweis bei jedem Scan */
#scan-popup {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  font-size: 6rem;
  font-weight: 800;
  color: white;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#scan-popup.show { opacity: 1; }
#scan-popup.ok { background: var(--green); }
#scan-popup.error { background: var(--red); font-size: 3.2rem; }
/* Seit v161 (Torstens Wunsch: "eine der Pflicht Sachen fehlt ... rot
   leuchten und neben dem Namen anzeigen welche Sachen fehlen") – zwei
   Zeilen statt des sonst einzelnen Textknotens, daher #scan-popup oben auf
   flex-direction:column umgestellt (ändert am einzeiligen Fall nichts). */
#scan-popup .scan-popup-missing {
  font-size: 0.4em;
  font-weight: 600;
  margin-top: 16px;
}

@media (max-width: 900px) {
  #scan-popup.ok { font-size: 3.5rem; }
  #scan-popup.error { font-size: 2rem; }
}

/* Seit v481 (In-App-Popup bei neuen Nachrichten, siehe
   pruefeNeueNachrichtenPopups()/zeigeNachrichtenPopup() in mcc.js) –
   höherer z-index als #matrix-modal-overlay & Co. (1000), damit eine
   neue Nachricht auch sichtbar bleibt, während gerade ein Popup-Fenster
   offen ist. */
#nachrichten-popup-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
  pointer-events: none;
}
.nachrichten-popup {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 10px 30px 10px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  pointer-events: auto;
  animation: nachrichten-popup-ein 0.2s ease;
}
@keyframes nachrichten-popup-ein {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.nachrichten-popup-titel {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 2px;
}
.nachrichten-popup-absender {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.nachrichten-popup-text {
  font-size: 0.82rem;
  color: var(--text);
  margin-top: 2px;
  overflow-wrap: break-word;
}
.nachrichten-popup-x {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted, #888);
  line-height: 1;
  padding: 2px 4px;
}
.nachrichten-popup-x:hover { color: var(--text); }

/* Scan-Leiste unten fest auf der Kiosk-Seite (/kiosk) – schlanker Streifen
   mit nur dem Scan-Feld, damit der Bildschirm überwiegend die große
   Live-Übersicht zeigt statt der vollen Trainer-Bedienoberfläche. */
#kiosk-scan-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border-top: 3px solid var(--brand);
  padding: 14px 24px;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
  z-index: 400;
}
#kiosk-scan-bar label { width: auto; flex-shrink: 0; color: var(--muted); font-size: 0.9rem; }
#kiosk-scan-bar input {
  flex: 1;
  font-size: 1.3rem;
  padding: 12px 16px;
}
#kiosk-scan-bar span {
  flex-shrink: 0;
  font-size: 1.05rem;
  min-width: 220px;
  text-align: right;
}

@media (max-width: 700px) {
  #kiosk-scan-bar { flex-wrap: wrap; }
  #kiosk-scan-bar label { display: none; }
  #kiosk-scan-bar span { width: 100%; text-align: left; min-width: 0; }
}

/* Seit v430 (Offline-Modus, Phase 1) – siehe kioskUpdateOfflineBadge() in
   kiosk.js. Rot während der Kiosk offline arbeitet (mit wartenden Scans),
   dezentes Grau kurz nach der Rückkehr online (bis das Abzeichen nach
   ein paar Sekunden wieder ausgeblendet wird). */
.kiosk-offline-badge {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  min-width: 0 !important;
  text-align: center !important;
}
.kiosk-offline-badge.offline { background: #fdecea; color: #b3261e; border: 1px solid #f2b8b5; }
.kiosk-offline-badge.synced { background: #eef7ee; color: #2e7d32; border: 1px solid #c8e6c9; }

/* Seit v201 (Torstens Wunsch: "das ganze sollte zweiseitig aufgebaut
   werden ... zumindest auf dem Smartphone auf dem Desktop / Laptop passt
   es auch so wie bisher") – "💬 Nachrichten" (#nachrichten-layout in
   mcc.html) zeigt auf schmalen Bildschirmen immer nur EINE der beiden
   Spalten: die Chat-Liste (#nachrichten-spalte-liste) ODER den Inhalt
   (#nachrichten-spalte-inhalt, Thread/Neue-Nachricht/Mitteilung), je
   nachdem ob #nachrichten-layout die Klasse "nachrichten-zeigt-inhalt"
   trägt (siehe nachrichtenMobilZeigeInhalt()/nachrichtenMobilZeigeListe()
   in mcc.js). Der "← Zurück"-Button (#nachrichten-zurueck-btn) existiert
   nur für diese Mobil-Ansicht und bleibt auf breiteren Bildschirmen
   unsichtbar. Über 700px (Desktop/Laptop) bleibt alles exakt wie seit
   v193: beide Spalten permanent nebeneinander sichtbar. */
#nachrichten-zurueck-btn { display: none; }
@media (max-width: 700px) {
  #nachrichten-layout { flex-direction: column; }
  #nachrichten-spalte-liste { max-width: none; border-right: none; border-bottom: 1px solid var(--border); }
  /* !important nötig, weil beide Spalten ihr display:flex per Inline-
     style (mcc.html) mitbringen, das sonst jede externe Regel schlägt. */
  #nachrichten-layout:not(.nachrichten-zeigt-inhalt) #nachrichten-spalte-inhalt { display: none !important; }
  #nachrichten-layout.nachrichten-zeigt-inhalt #nachrichten-spalte-liste { display: none !important; }
  #nachrichten-zurueck-btn { display: inline-block; }
}

/* Seit v526 (Torstens Meldung: "Auf dem Handy sind alle drei Felder, Name,
   Kennwort, anmelden auf unterschiedlichen höhen") – #login-view (sowie
   die zwei strukturell identischen Mini-Formulare direkt darunter,
   "Passwort vergessen"/"Eigenes Passwort vergeben") nutzen die generische
   ".row"-Klasse (display:flex, flex-wrap:wrap, align-items:center) mit
   je zwei/drei Kindern: zwei Feld-<div>s mit flex:1 (Label + input,
   input selbst width:100% laut Grundregel oben) und einem <button> ohne
   jedes flex-Wachstum. Auf einem breiten Bildschirm ergibt das sauber
   drei Spalten nebeneinander. Auf einem schmalen Handy-Bildschirm greift
   der flex-wrap – dabei behalten die Feld-<div>s ihre flex:1-Wachstums-
   eigenschaft (füllen eine Zeile, auf der sie allein stehen, komplett
   aus), der <button> aber NICHT (bleibt bei seiner reinen Inhaltsbreite,
   linksbündig in seiner eigenen Zeile) – drei Elemente mit UNGLEICHER
   Breite und dadurch wirkendem Zeilenabstand/uneinheitlicher optischer
   Flucht, genau das von Torsten beschriebene "auf unterschiedlichen
   Höhen". Fix: unterhalb 480px (typische Handy-Breite, bewusst enger als
   die 700px-Grenzen oben, die für größere Layout-Umbrüche gedacht sind –
   ein normales Tablet im Hochformat soll die reguläre Zeilen-Darstellung
   behalten) zwingt eine eigene Regel genau diese drei Formulare auf
   Spaltenlayout mit einheitlicher, voller Breite für JEDES Kind
   (`align-items:stretch` statt `center`, Button zusätzlich explizit auf
   volle Breite) – alle drei Elemente stehen danach garantiert exakt
   untereinander mit gleichem Abstand, unabhängig von ihrer jeweiligen
   Inhaltsbreite. Bewusst NICHT die generische ".row"-Klasse selbst
   geändert – die wird an Dutzenden anderen Stellen in der ganzen App
   verwendet, eine globale Änderung hätte dort unabsehbare Nebenwirkungen;
   diese Regel gilt nur innerhalb der drei genannten Login-nahen
   Formulare. */
@media (max-width: 480px) {
  #login-view .row,
  #passwort-vergessen-box .row,
  #passwort-aendern-pflicht-view .row {
    flex-direction: column;
    align-items: stretch;
  }
  #login-view .row > button,
  #passwort-vergessen-box .row > button,
  #passwort-aendern-pflicht-view .row > button {
    width: 100%;
  }
}

/* ===========================================================================
   Zeitslot-Kacheln auf der öffentlichen Anmeldeseite (seit 27.08.2026, auf
   Torstens Wunsch "so soll es aussehen") – ein Kärtchen-Raster je Stufe mit
   farbiger Belegungs-Ampel. Ein Klick auf ein freies Kärtchen öffnet (seit
   v88, Torstens Wunsch "Popup nach wählen eines Zeitslots zur Dateneingabe
   bzw. scan") direkt das Anmelde-Popup statt (wie zuvor) eine Radio-Auswahl
   zu markieren – die Kärtchen sind daher jetzt normale <button>-Elemente,
   kein <label>/<input type="radio"> mehr. Siehe renderStufen() und
   oeffneAnmeldeModal() in event.js.
   ========================================================================= */
.stufe-gruppe { margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.stufe-gruppe:last-child { border-bottom: none; }
/* Seit v88 (Torstens Wunsch "die einzelnen Kurse (Stufen) auf und
   zuklappbar machen"): die Stufenüberschrift ist jetzt ein <button>, der
   den darunterliegenden Termine-Bereich (.stufe-termine) auf-/zuklappt –
   siehe toggleStufe() in event.js. Name + Beschreibung bleiben immer
   sichtbar, nur die Zeitslot-Auswahl steckt hinter dem Klapp-Pfeil. */
.stufe-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 1.15rem;
  color: inherit;
  cursor: pointer;
}
.stufe-kopf:hover .stufe-name { color: var(--brand); }
.stufe-kopf .stufe-name { flex: 1; }
.stufe-kopf .hint { font-weight: 500; font-size: 0.85rem; }
.stufe-chevron {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.stufe-kopf.aufgeklappt .stufe-chevron,
.ta-collapse-kopf.aufgeklappt .stufe-chevron { transform: rotate(90deg); }
.stufe-beschreibung-text { margin: 2px 0 0; }
.stufe-termine { margin-top: 10px; }
/* Klapp-Köpfe in der Trainer-Ansicht (Event-Einstellungen + je Stufe,
   seit v88, Torstens Wunsch "auf der Events Seite … das auf und zuklappen
   der Stufen … einbauen" und "auch das Event Feld selber zum auf und zu
   klappen") – gleiche Mechanik/Chevron wie .stufe-kopf auf der
   öffentlichen Seite, nur dezenter (kein Fett/große Schrift), da hier
   Kontext (Formularfelder) statt einer reinen Übersicht gezeigt wird.
   Siehe toggleAdminCollapse() in mcc.js. */
.ta-collapse-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 2px 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  cursor: pointer;
}
.ta-collapse-kopf:hover .stufe-name { color: var(--brand); }
.ta-collapse-kopf .stufe-name { flex: 1; }
.slot-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.slot-kachel {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--card);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.slot-kachel:hover { border-color: var(--brand); }
.slot-kachel.ausgebucht { opacity: 0.55; cursor: not-allowed; }
.slot-zeit { display: block; font-weight: 600; font-size: 0.9rem; }
.slot-belegung {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-top: 4px;
}
.slot-belegung.frei-viel { background: var(--ziel-erreicht-bg); color: var(--green); }
.slot-belegung.frei-wenig { background: #fdf0d9; color: var(--amber); }
.slot-belegung.voll { background: #f5dcd7; color: var(--red); }

/* ===========================================================================
   Anmelde-Popup (seit v88) – öffnet sich nach Klick auf einen Zeitslot
   (bzw. direkt bei einer Stufe mit nur einem, unsichtbaren Slot) und
   enthält QR-Scan-Button sowie die Namens-/Kontaktfelder, die vorher
   statisch unter allen Stufen standen. Modell: renderModal() im alten
   Node-Anmeldetool (siehe INTEGRATIONSPLAN-Vereinstools.md), an dessen
   Optik sich Torsten wiederholt orientiert hat. Siehe event.html/event.js.
   ========================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 31, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.modal-box {
  position: relative;
  background: var(--card);
  border-radius: 12px;
  padding: 22px;
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
/* Seit v281 (Torstens Rückmeldung zur Trainer-Übersicht: "sollte sich aber
   noch als Popup öffnen lassen um die ganze Bildschirmgröße zu nutzen") –
   Zusatzklasse für Popups mit breitem Inhalt (z.B. die Zeit×Stufe-Matrix
   in #matrix-modal-overlay), die mit der schmalen 480px-Standardbox oben
   nicht auskommen. Ersetzt max-width, nicht width, damit die Box auf sehr
   breiten Bildschirmen nicht unnötig über den eigentlichen Tabelleninhalt
   hinausragt (die Tabelle selbst bleibt über ihren eigenen .matrix-wrap
   horizontal scrollbar, falls sie trotzdem breiter als 96vw wird). */
.modal-box.modal-box-gross {
  max-width: 96vw;
  max-height: 94vh;
}
/* Seit v540 (Torsten zur v539-Popup-Umstellung der Seitenstruktur: "das
   Popup bitte etwas kleiner") – Zwischengröße für die ganze Familie der
   "Bearbeiten/Neu anlegen"-Popups dieses Releases (Seitenstruktur,
   ToDo-Hauptkategorien, Checklisten-Vorlage, Inventarliste, PSA-Gegenstand,
   Buchverzeichnis, Wachplan-Plan/-Vorlage): deren Formulare haben mehrere
   Felder/Checkboxen/Dropdowns untereinander (kein breiter Tabellen- oder
   Matrix-Inhalt wie bei .modal-box-gross, z.B. #matrix-modal-overlay), für
   die die schmale 480px-Standardbox zu eng, aber 96vw viel zu breit wäre. */
.modal-box.modal-box-mittel {
  max-width: 640px;
  max-height: 92vh;
}
/* Seit v721 (Torstens Rückmeldung zum "Seminar bearbeiten"-Popup per
   Screenshot: "das bearbeiten Popup darf auf dem PC gerne genauso breit
   sein wie das Feld oben") – dieselbe 1400px-Breite wie main.main-
   seminar-breit (siehe dessen Kommentar oben, exakt dieselbe Seminar-
   Verwaltungsansicht), NUR ab 900px wirksam, exakt nach demselben Muster.
   Auf Tablet/Handy bleibt es bei der schmaleren modal-box-mittel-Breite
   (640px, siehe oben) – dort steht ohnehin nur die volle Bildschirmbreite
   zur Verfügung, ein max-width von 1400px wäre wirkungslos. Wird ZUSÄTZLICH
   zu modal-box-mittel auf dasselbe Element gesetzt (siehe #seminar-
   formular-modal-overlay in mcc.html); gleiche Selektor-Spezifität wie
   .modal-box.modal-box-mittel, gewinnt aber durch die spätere Position
   in dieser Datei, sobald die Media-Query greift. */
@media (min-width: 900px) {
  .modal-box.modal-box-seminar-breit {
    max-width: 1400px;
  }
}

/* Seit v721 (Torstens Rückmeldung per Screenshot: "das Beschreibungen Feld
   so groß wie auf dem Screenshot und mit der Möglichkeit da wysiwyg etwas
   anzupassen") – Quill setzt für .ql-editor von sich aus keine feste
   Mindesthöhe (die Editierfläche wächst sonst nur mit dem eingegebenen
   Text mit und wäre leer winzig). Bewusst nur für DIESEN einen Editor
   (siehe seminar-form-beschreibung-quill-wrapper in mcc.js), damit der
   bereits bestehende E-Mail-Vorlagen-Editor (vorlage-quill-wrapper)
   unverändert bleibt. */
.seminar-beschreibung-quill-wrapper .ql-editor {
  min-height: 120px; /* seit 1.27 (vorher 220px): wächst mit dem Text, nimmt leer aber nicht den halben Bildschirm ein */
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
}
.modal-close:hover { color: var(--text); }
/* Seit 16.09.2026 (Torsten: "nach einer Kartenzahlung muss ein Popup
   erscheinen mit erfolgreich (grün) oder fehlgeschlagen (rot)") – siehe
   #kasse-karte-ergebnis-overlay in mcc.html / kasseKarteErgebnisAnzeigen()
   in mcc.js. Der "×"-Schließen-Knopf bleibt auf beiden Farben lesbar
   (leicht transparentes Weiß statt der normalen grauen --muted-Farbe).*/
.modal-box.kasse-karte-erfolg { background: var(--green); color: white; }
.modal-box.kasse-karte-fehler { background: var(--red); color: white; }
.modal-box.kasse-karte-erfolg .modal-close, .modal-box.kasse-karte-fehler .modal-close { color: rgba(255,255,255,0.85); }
.modal-box.kasse-karte-erfolg .modal-close:hover, .modal-box.kasse-karte-fehler .modal-close:hover { color: white; }
.modal-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand);
  margin: 0 26px 2px 0;
}
.modal-titel {
  margin: 0 26px 16px 0;
  font-size: 1.25rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Seit v167 (Torstens Wunsch bei allgemeinen Events wie Hundeschwimmen:
   "ich benötige wie auf der alten Hundeschwimmen Anmeldung ein Fenster wo
   gleich die Badeordnung steht und das Bestätigen dieser dann zu dem
   Anmeldeformular führt") – verwandelt den sonst schwebenden
   Anmelde-Dialog (#anmelde-modal-overlay) in eine normale Karte im
   Seitenfluss, ohne die Formularfelder zu duplizieren (siehe
   initEinfacheAnmeldung() in event.js: setzt diese Klasse zusätzlich zu
   .modal-overlay). Auf einer durchgehenden Seite gibt es nichts zum
   "Schließen", darum werden Schließen-Kreuz und "Abbrechen"-Knöpfe hier
   ausgeblendet. */
.modal-overlay.modal-inline {
  position: static;
  background: none;
  padding: 0;
  z-index: auto;
}
.modal-overlay.modal-inline .modal-box {
  max-width: none;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.modal-overlay.modal-inline .modal-close,
.modal-overlay.modal-inline .modal-abbrechen-btn {
  display: none;
}

/* ===========================================================================
   Trainer-Zuordnung als Karten-Raster in der Trainer-Ansicht (seit
   27.08.2026, auf Torstens Wunsch "so in der Art soll es aussehen") – ein
   Kärtchen pro Zeitslot, direkt darin die Kinder dieses Slots samt
   Trainer-Feld. Siehe slotCardHtml() in mcc.js.
   ========================================================================= */
.ta-slot-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.ta-slot-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--card);
}
.ta-slot-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ta-slot-zeit { font-weight: 600; font-size: 0.9rem; }
.ta-pille {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.ta-pille.frei-viel { background: var(--ziel-erreicht-bg); color: var(--green); }
.ta-pille.frei-wenig { background: #fdf0d9; color: var(--amber); }
.ta-pille.voll { background: #f5dcd7; color: var(--red); }
.ta-slot-kapazitaet { width: 100%; box-sizing: border-box; margin-bottom: 6px; font-size: 0.8rem; padding: 4px 6px; }
.ta-kind-zeile { padding: 6px 0; border-top: 1px dashed var(--border); }
.ta-kind-zeile:first-child { border-top: none; padding-top: 0; }
.ta-kind-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.ta-kind-name { font-weight: 600; font-size: 0.85rem; }
.ta-mail { color: var(--brand); cursor: help; font-weight: 400; margin-left: 2px; }
.ta-kind-aktionen { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.ta-kind-aktionen select { flex: 1 1 100px; font-size: 0.75rem; padding: 3px 4px; }
.ta-icon-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--red);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  line-height: 1;
  font-size: 12px;
  flex-shrink: 0;
  padding: 0;
}
.ta-icon-btn:hover { border-color: var(--red); background: #f5dcd7; }
.ta-kind-neu {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.ta-kind-neu input { flex: 1 1 60px; min-width: 0; font-size: 0.75rem; padding: 4px 6px; }
.ta-kind-neu button { flex-shrink: 0; }

/* Hub-Kacheln (Startseite: Verzeichnis der Bereiche + offene Events; seit
   v98 auch der Offene-Events-Hinweis in eltern.html) – ursprünglich nur
   inline in start.html, seit v98 hierher verschoben, damit auch andere
   Seiten dieselbe Optik nutzen können (Torstens Wunsch: "in der Eltern
   Ansicht sollten wir die Event Anmeldung noch integrieren"). */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.hub-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  /* Seit v438: Bezugsrahmen für die absolut positionierten
     Fällig-Hinweis-Badges (.kachel-faellig-badges weiter unten). */
  position: relative;
}
.hub-tile.active:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.hub-tile .icon { font-size: 1.8rem; }
/* Seit v438 (Torstens Wunsch "Titelbilder ... entweder Icon auswählen
   oder ein Bild auswählen"): ein per KachelBild hinterlegtes Bild
   ersetzt das Text-Icon 1:1 an derselben Stelle, siehe kachelIconHtml()
   in static/js/mcc.js. */
.hub-tile .icon img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.hub-tile h3 { margin: 0; font-size: 1.05rem; }
.hub-tile p { margin: 0; font-size: 0.85rem; color: var(--muted); }
/* Seit v557 (Torstens Wunsch: "in den beiden Karten rechts soll die Höhe
   der Karte halbiert werden indem der Text neben das Icon kommt") – reine
   Zusatz-Klasse, der Basis-Aufbau .hub-tile oben bleibt für alle anderen
   Kachel-Arten unverändert stehen. Ursprünglich nur von
   renderKompaktKacheln() gesetzt (die Ordner-Navigation innerhalb eines
   Bereichs, z.B. die Kacheln "Prüfungskarten abhaken"/"Leistungsstand
   abhaken" SELBST) – seit v558 (Torstens Meldung: "die 557 brachte keine
   Änderung bei der Ansicht ... es sollte aber auch für die Ansichten
   sein die ich dir gerade geschickt habe") zusätzlich von
   renderKursAuswahlKacheln() gesetzt, also auch für die Kursauswahl-
   Kacheln DAHINTER (z.B. "01: 18:00 Anfänger" / "24 Teilnehmer" unterhalb
   von "Prüfungskarten abhaken"). Deren Titel+Teilnehmerzahl stecken dafür
   in einem gemeinsamen .kompakt-text-Wrapper (siehe dort) statt direkt
   als Kind von .hub-tile, damit beide Zeilen weiterhin UNTEREINANDER
   stehen, nur eben neben statt unter dem Icon. Seit v382 zeigen reine
   Ordner-Kacheln ohnehin schon nur noch Icon+Titel (keine Beschreibung/
   "Öffnen →"-Zeile mehr, siehe dortiger Kommentar) – dadurch lassen sich
   beide Varianten gefahrlos nebeneinander statt übereinander stellen.
   Seit v559 (Torsten: "die 'halbierte' Kachelgröße bitte auch für
   Checklisten, ToDo und Notizen ... Nur die Startseite soll bei den
   großen Kacheln bleiben") zusätzlich von renderTodoHauptkategorienTabs()/
   checklistenRubrikKachelHtml()/notizzettelKachelHtml() gesetzt – also
   deren jeweils EIGENE Kategorie-Startseite innerhalb der App
   (ToDo-Hauptkategorien, Checklisten-Rubriken, Notizzettel-Kategorien).
   BEWUSST WEITERHIN UNANGETASTET: renderHubTiles() (die eigentliche
   MCC-Startseite/Hauptmenü mit den großen Bereichs-Kacheln, exakt
   Torstens "Nur die Startseite soll ... groß bleiben"), sowie
   renderSchwimmkurseVerwaltungKacheln()/renderPersonenverwaltungKacheln()
   (nicht angefragt). */
.hub-tile.kompakt {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.hub-tile.kompakt .icon { font-size: 1.5rem; flex-shrink: 0; }
.hub-tile.kompakt .icon img { width: 1.5rem; height: 1.5rem; }
/* Seit v559 (Torstens Fund: "bei Medizin ist eine Schrift außerhalb" –
   der Titel "Medizinprodukteverzeichnis" lief bei renderKompaktKacheln()
   seitlich aus der Karte heraus): ein Flex-Kind ist per CSS-Vorgabe
   standardmäßig NIE schmaler als sein unumbrochener Inhalt (min-width:
   auto), ein einzelnes langes, bindestrichloses Wort ohne Leerzeichen
   sprengt dadurch die Karte statt zu umbrechen. min-width:0 hebt diese
   Vorgabe auf, overflow-wrap:break-word erlaubt nötigenfalls sogar einen
   Umbruch MITTEN im Wort – gilt für den direkten Titel (Ordner-/
   Kategorie-Kacheln ohne zweite Zeile, z.B. renderKompaktKacheln()/ToDo-
   Hauptkategorien/Notizzettel-Kategorien) UND, s.u., für den
   .kompakt-text-Wrapper (Kacheln MIT zweiter Zeile). */
.hub-tile.kompakt h3 { font-size: 1rem; min-width: 0; overflow-wrap: break-word; }
/* Seit v558, siehe .hub-tile.kompakt-Docstring oben – hält Titel+
   Unterzeile (z.B. Teilnehmerzahl bei renderKursAuswahlKacheln(), Anzahl
   Checklisten bei checklistenRubrikKachelHtml()) als eigene, weiterhin
   vertikal gestapelte Spalte NEBEN dem Icon zusammen. min-width:0 lässt
   lange Titel bei Bedarf sauber umbrechen statt den flex-Elter zu
   sprengen (siehe v559-Kommentar oben). */
.hub-tile.kompakt .kompakt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hub-tile.kompakt .kompakt-text p { font-size: 0.8rem; overflow-wrap: break-word; }
.hub-tile.disabled {
  opacity: 0.6;
  cursor: default;
}
.hub-tile .status {
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Seit v438 (Torstens Wunsch: "auf den Kacheln soll ein Hinweis stehen
   wie viele Aufgaben darin fällig sind auch nach Prio geordnet so als
   kleiner Kreis darüber in dem 1/2/3 in den Prio Farben steht") – bis zu
   drei kleine Kreis-Badges oben rechts auf einer Notizzettel-Kategorie-
   Kachel (nur für Prioritäten mit Anzahl > 0, siehe
   notizzettelKachelHtml() in static/js/mcc.js), Farben identisch zu
   NOTIZ_PRIO_ICON dort. */
.kachel-faellig-badges {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 4px;
}
.kachel-faellig-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--card);
}
.kachel-faellig-badge.prio-hoch { background: #d32f2f; }
.kachel-faellig-badge.prio-normal { background: #1976d2; }
.kachel-faellig-badge.prio-niedrig { background: #9e9e9e; }

.hub-tile.active .status { color: var(--green); }
.hub-tile.disabled .status { color: var(--muted); }
.hub-tile.extern .status { color: var(--amber); }

/* Seit v442 (Torstens Wunsch: "die Unterkategorien in den Notizen über die
   einzelnen Notizen aber als kleinere Buttons") – schmales Pendant zur
   großen .hub-tile-Kachel, nur für die Unterkategorien-Leiste INNERHALB
   einer bereits geöffneten Notizzettel-Kategorie (siehe
   notizzettelUnterkategorieChipHtml() in mcc.js); die Übersichtsseite
   selbst (#notizzettel-kacheln-oben) zeigt weiterhin die großen Kacheln. */
.notiz-unterkat-leiste { display: flex; flex-wrap: wrap; gap: 8px; }
.notiz-unterkat-chip { display: inline-flex; align-items: center; gap: 6px; }
.notiz-unterkat-chip-icon-img { width: 1.1rem; height: 1.1rem; object-fit: cover; border-radius: 4px; display: block; }
.notiz-unterkat-chip-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
}
.notiz-unterkat-chip-badge.prio-hoch { background: #d32f2f; }
.notiz-unterkat-chip-badge.prio-normal { background: #1976d2; }
.notiz-unterkat-chip-badge.prio-niedrig { background: #9e9e9e; }

/* Seit v560 (Torstens Wunsch: "einzelne Kategorien oder Unter Kategorien
   u.s.w. als Favoriten markieren können, diese werden dann auf der ToDo
   Startseite ganz oben angezeigt") – der ⭐/☆-Favoriten-Knopf, siehe
   todoFavoritSternHtml() in mcc.js. Auf einer Hauptkategorie-Kachel sitzt
   er als dritter Flex-Zeile-Eintrag rechts neben Icon+Titel
   (margin-left:auto schiebt ihn an den rechten Kartenrand); bei einem
   Unterkategorie-Chip steht er als eigenständiger zweiter Knopf in
   .todo-unterkat-chip-wrap direkt neben dem Chip selbst (kein <button>
   im <button>, siehe todoUnterkategorieChipHtml()-Docstring). */
.todo-favorit-stern {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 4px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--muted);
}
.todo-favorit-stern.favorisiert { color: var(--amber); }
.todo-favorit-stern:hover { opacity: 0.75; }
.todo-unterkat-chip-wrap { display: inline-flex; align-items: center; gap: 0; }

/* Seit v415 (Torstens Wunsch: "sowohl bei Leistungsstand abhaken als auch
   bei Prüfungskarten abhaken sollen die Kurse darunter als Kacheln
   angezeigt werden nicht als drop down Feld") – Kurs-Auswahl-Kacheln
   (renderKursAuswahlKacheln() in mcc.js) sind ganz normale .hub-tile,
   bekommen aber zusätzlich diese eine Modifikator-Klasse: einerseits einen
   Cursor-Hinweis, dass eine Kachel hier eine Auswahl trifft statt zu
   navigieren, andererseits (".gewaehlt") eine optische Hervorhebung der
   gerade aktiven Kachel – das Pendant zum Wert eines <select>, das durch
   das Kacheln-Grid ersetzt wurde. */
.kachel-auswahl { cursor: pointer; }
.kachel-auswahl.gewaehlt {
  border-color: var(--brand);
  border-width: 2px;
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
}

/* Seit v238 (Torstens Wunsch: "die klicken an wir zahlen 15€ bar dann
   blinkt die Anzeige so lange rot bis wir auf bezahlt klicken") – für eine
   von den Eltern gemeldete, aber noch nicht von einem Trainer/Admin
   bestätigte Eintrittsnachweis-Meldung (siehe renderEintrittsnachweisBlock()
   in mcc.js/personen-profil.js). Bewusst eine dezente Opacity-Animation
   (kein hartes An/Aus) statt einer aggressiven Farb-Invertierung, damit der
   Text dabei lesbar bleibt. */
@keyframes eintrittsnachweis-blinken {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.chip-blinkt-rot {
  background: var(--red);
  color: #fff;
  animation: eintrittsnachweis-blinken 1.1s ease-in-out infinite;
}

/* Seit v253 (Torstens Wunsch: "Die Teilnehmerlisten brauchen einen 'nach
   oben' Button sonst scrollt man sich wund") – global schwebender Knopf,
   siehe #nach-oben-btn in mcc.html sowie setupNachObenButton()/
   scrollNachOben() in mcc.js. z-index bewusst deutlich unter den
   Modal-Overlays (1000, siehe .modal-overlay oben), damit ein offenes
   Modal ihn zuverlässig verdeckt statt darüber zu schweben. */
#nach-oben-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 500;
}
#nach-oben-btn:hover { opacity: 0.9; }
@media (max-width: 600px) {
  /* Auf dem Handy weiter oben, damit er nicht mit der PWA-Installations-
     Leiste/dem Scanner-Feld o.ä. am unteren Rand kollidiert. */
  #nach-oben-btn { bottom: 76px; right: 14px; }
}

/* Seit v264 (Torstens Rückmeldung: "der rote 'To Top' Pfeil soll direkt
   neben der A,B,C... Sprungleiste stehen") – kleine, inline sitzende
   Variante desselben roten Knopfs, direkt neben #teilnehmer-az statt frei
   schwebend (siehe #teilnehmer-sticky-leiste in mcc.html). Bewusst
   dieselbe Farbe/Form wie #nach-oben-btn, nur kleiner, damit sie neben den
   A-Z-Buchstaben nicht dominiert. */
.nach-oben-inline {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nach-oben-inline:hover { opacity: 0.9; }

/* ===========================================================================
   Chat-Design (seit v336, Torstens Wunsch: "der Nachrichten Block soll
   deutlich schöner werden, angelehnt an das Design und Handling vom
   WhatsApp ... wirklich deutlich schöner, sehr modern und sehr intuitiv")
   – gemeinsames Designsystem für den Tab "💬 Nachrichten" in MCC
   (ladeNachrichtenThreadInhalt()/renderNachrichtenChatsListe() in mcc.js)
   UND den Eltern-Chat (renderElternChat() in eltern.js). Bewusst als
   Klassen hier zentral statt der bisherigen Inline-Styles, damit beide
   Seiten garantiert identisch aussehen. Messenger-Konventionen (eigene
   Nachrichten rechts in zartem Grün, fremde links in Weiß, Schwänzchen an
   der ersten Blase einer Gruppe, Datums-Chips, Zeit klein unten rechts in
   der Blase, runder Senden-Knopf) – ohne fremdes Branding, Farben aus
   einer eigenen Palette. */
:root {
  --chat-bg: #e8e2da;            /* Verlaufs-Hintergrund (warmes Beige) */
  --chat-bg-muster: rgba(0, 0, 0, 0.025);
  --chat-blase-eigen: #d9f4cf;   /* eigene Nachrichten: zartes Grün */
  --chat-blase-fremd: #ffffff;   /* fremde Nachrichten: Weiß */
  --chat-gruen: #1f9d55;         /* Senden-Knopf + Ungelesen-Badge */
  --chat-gruen-dunkel: #177a42;
}

/* --- Verlauf ------------------------------------------------------------ */
.chat-verlauf {
  background:
    radial-gradient(var(--chat-bg-muster) 1px, transparent 1.5px),
    var(--chat-bg);
  background-size: 22px 22px, auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}
.chat-datum-chip {
  align-self: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  margin: 10px 0 4px;
}
.chat-nachricht {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 1px 0;
  /* Bezugsrahmen für .chat-reaktion-picker (siehe unten) – die Zeile ist
     immer so breit wie der ganze Verlauf, der Picker kann daher nie aus
     dem scrollenden Verlauf herausragen und abgeschnitten werden (genau
     das passierte, als er noch am kleinen 🙂-Knopf verankert war). */
  position: relative;
}
.chat-nachricht.eigen { justify-content: flex-end; }
.chat-nachricht.gruppe-start { margin-top: 8px; }

/* --- Sprechblase --------------------------------------------------------- */
.chat-blase {
  position: relative;
  max-width: 78%;
  padding: 6px 9px 5px;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
  font-size: 0.95rem;
  line-height: 1.35;
}
.chat-blase.eigen { background: var(--chat-blase-eigen); }
.chat-blase.fremd { background: var(--chat-blase-fremd); }
/* Schwänzchen nur an der ERSTEN Blase einer zusammenhängenden Gruppe
   (Klasse "schwanz", vergeben in ladeNachrichtenThreadInhalt()/
   renderElternChat()) – kleines Dreieck oben außen, in Blasenfarbe. */
.chat-blase.schwanz.eigen { border-top-right-radius: 2px; }
.chat-blase.schwanz.fremd { border-top-left-radius: 2px; }
.chat-blase.schwanz::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 9px solid;
  border-top-color: inherit;
}
.chat-blase.schwanz.eigen::before {
  right: -7px;
  color: var(--chat-blase-eigen);
  border-top-color: var(--chat-blase-eigen);
  border-left: 8px solid transparent;
}
.chat-blase.schwanz.fremd::before {
  left: -7px;
  color: var(--chat-blase-fremd);
  border-top-color: var(--chat-blase-fremd);
  border-right: 8px solid transparent;
}
.chat-absender {
  font-weight: 600;
  font-size: 0.8rem;
  margin-bottom: 1px;
}
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 1px;
  user-select: none;
}
.chat-blase img { max-width: min(240px, 100%); border-radius: 8px; display: block; }
.chat-anhang { margin-top: 4px; }

/* --- Sende-/Lese-Haken (seit v363, Torstens Wunsch: "die übertragen und
   gelesen Haken wie in whatsapp wären schön") – nur bei EIGENEN Nachrichten,
   direkt hinter der Uhrzeit in .chat-meta. Ein Haken = "gesendet", zwei
   graue Haken = "zugestellt", zwei blaue Haken = "gelesen" – exakt das
   WhatsApp-Muster. Serverseitig berechnet in _nachricht_empfangsstatus()
   (app/main.py), hier nur reine Darstellung dreier fester Zustände. */
.chat-status-haekchen { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.chat-status-haekchen svg { display: block; }
.chat-status-haekchen.gesendet, .chat-status-haekchen.zugestellt { color: var(--muted); }
.chat-status-haekchen.gelesen { color: #34b7f1; }

/* --- Reaktionen (vergebene Chips immer sichtbar, klein unter der Blase) -- */
.chat-reaktionen {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.chat-reaktion-chip {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 11px;
  padding: 0 7px;
  font-size: 0.8rem;
  line-height: 20px;
  cursor: pointer;
}
.chat-reaktion-chip.eigene { background: #e3f0fb; border-color: #9cc3e5; }

/* --- Aktionen (🙂-Picker + 🗑️): erst bei Hover/Antippen sichtbar --------- */
.chat-aktionen {
  display: flex;
  gap: 2px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s;
  flex: 0 0 auto;
  padding-bottom: 2px;
}
.chat-nachricht:hover .chat-aktionen,
.chat-nachricht.aktionen-offen .chat-aktionen { opacity: 1; }
.chat-aktion-btn {
  border: none;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  padding: 0;
}
.chat-aktion-btn:hover { background: #fff; }
.chat-reaktion-picker {
  display: none;
  position: absolute;
  /* Verankert an der ganzen .chat-nachricht-Zeile (nicht am 🙂-Knopf) –
     knapp über der Zeile, seitlich per Inline-Style (right/left je nach
     Blasen-Seite) immer nach INNEN wachsend. Die Datums-/Gruppen-Chips
     bzw. die Vorgänger-Nachricht darüber bieten dafür stets Platz. */
  bottom: calc(100% - 4px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 6px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 1.05rem;
}
.chat-reaktion-picker span { cursor: pointer; padding: 2px 4px; }

/* --- Eingabezeile (Composer) --------------------------------------------- */
.chat-eingabe {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 8px 10px;
  background: var(--card);
  border-top: 1px solid var(--border);
}
.chat-eingabe textarea {
  flex: 1 1 auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 9px 14px;
  font: inherit;
  resize: none;
  max-height: 132px;
  overflow-y: auto;
  min-width: 0;
  background: var(--bg);
}
.chat-eingabe textarea:focus { outline: none; border-color: var(--chat-gruen); background: var(--card); }
.chat-senden-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--chat-gruen);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 2px;
}
.chat-senden-btn:hover { background: var(--chat-gruen-dunkel); }
.chat-icon-btn {
  border: none;
  background: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 6px 4px;
  line-height: 1;
  flex: 0 0 auto;
  margin: 0;
}
.chat-icon-btn:hover { opacity: 0.7; }

/* --- Chat-Liste (linke Spalte) ------------------------------------------- */
.chat-listen-eintrag {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.chat-listen-eintrag:hover { background: #f2f4f6; }
.chat-listen-eintrag.aktiv { background: #e9eef3; }
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  font-size: 1.1rem;
  overflow: hidden;
}
.chat-avatar.klein { width: 32px; height: 32px; font-size: 0.95rem; }
/* Seit 15.09.2026 (Torsten: "Gegenstände und auch Behälter sollen Symbole
   (Icons oder Bilder) bekommen") – siehe inventarSymbolHtml() in mcc.js. */
.inventar-symbol-bild { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto; vertical-align: middle; }
.inventar-symbol-emoji { font-size: 1.2rem; line-height: 1; vertical-align: middle; display: inline-block; width: 28px; text-align: center; flex: 0 0 auto; }
.chat-listen-mitte { flex: 1 1 auto; min-width: 0; }
.chat-listen-zeile1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-listen-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-listen-zeit { font-size: 0.72rem; color: var(--muted); flex: 0 0 auto; }
.chat-listen-zeit.ungelesen { color: var(--chat-gruen); font-weight: 700; }
.chat-listen-zeile2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 1px; }
.chat-listen-vorschau {
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.chat-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--chat-gruen);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex: 0 0 auto;
}
/* Seit v366 (siehe KonversationFixiert-Docstring in app/models.py): ein
   fixierter Chat bekommt einen dezenten gelblichen Hintergrund (auch im
   ".aktiv"-Zustand, daher die eigene, spezifischere Regel darunter) UND
   eine kleine Stecknadel rechts, die bei NICHT-fixierten Chats erst beim
   Hovern der Zeile sichtbar wird (Torstens Wunsch nach einer aufgeräumten
   Liste, kein dauerhaft sichtbares Icon bei jedem einzelnen Chat) – bei
   bereits fixierten Chats bleibt sie dagegen immer voll sichtbar, damit
   erkennbar bleibt, welche Chats fixiert sind, ohne jeden einzeln hovern
   zu müssen. */
.chat-listen-eintrag.fixiert { background: #fdf6e3; }
.chat-listen-eintrag.fixiert:hover { background: #faecc0; }
.chat-listen-eintrag.fixiert.aktiv { background: #f5e2a0; }
.chat-listen-pin {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  opacity: 0.2;
  transition: opacity 0.1s, background 0.1s;
}
.chat-listen-eintrag:hover .chat-listen-pin { opacity: 0.55; }
.chat-listen-pin:hover { opacity: 1 !important; background: rgba(0, 0, 0, 0.06); }
.chat-listen-pin.fixiert { opacity: 0.9; }

/* --- Thread-Kopfzeile ----------------------------------------------------- */
.chat-thread-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.chat-thread-kopf h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.02rem;
}

/* ===========================================================================
   Listen & Schalter (seit v337, Torstens Wunsch: "kannst du die Mitglieder
   Verwaltung ähnlich schön gestalten wie die Nachrichten Sektion? ... das
   Handling der Berechtigungsverwaltung ist immer noch etwas altbacken") –
   gemeinsame Bausteine für die modernisierten Personen-Listen (Avatare wie
   in der Chat-Liste, siehe personZeileHtml() in mcc.js) und die neue
   Stufen-Schalter-Bedienung der Berechtigungen (ersetzt die vierstufigen
   <select>-Dropdowns in Rechte-Übersicht, "🔐 Wer ist berechtigt?",
   Login-Berechtigungen und Personen-Profil – siehe stufenSchalterHtml()
   in mcc.js bzw. personen-profil.js). */

/* --- Personen-/Eintrags-Listen ------------------------------------------- */
.listen-eintrag {
  display: flex;
  gap: 10px;
  padding: 8px 6px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.listen-eintrag:hover { background: #f2f4f6; }
.listen-eintrag .listen-mitte { flex: 1 1 auto; min-width: 0; }
.listen-eintrag .listen-name { font-weight: 600; }
.listen-eintrag .listen-name a { color: inherit; text-decoration: none; }
.listen-eintrag .listen-name a:hover { text-decoration: underline; }
.listen-eintrag .listen-sub {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.listen-eintrag .listen-aktionen {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Stufen-Schalter (Standard / ✅ voll / 👁️ lesen / 🚫 gesperrt) -------- */
.stufen-schalter {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
  flex: 0 0 auto;
}
.stufen-schalter button {
  border: none;
  background: none;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.3;
  border-right: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.stufen-schalter button:last-child { border-right: none; }
.stufen-schalter button:hover { background: #f2f4f6; }
.stufen-schalter button.aktiv { color: #fff; font-weight: 600; }
.stufen-schalter button.aktiv.standard { background: var(--muted); }
.stufen-schalter button.aktiv.voll { background: var(--chat-gruen, #1f9d55); }
.stufen-schalter button.aktiv.lesend { background: #0277bd; }
.stufen-schalter button.aktiv.gesperrt { background: var(--red); }

/* --- Moderner Ein/Aus-Schalter (ersetzt Checkboxen, z.B. Rollen-Sicht) --- */
.ui-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.ui-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch .schieber {
  position: absolute;
  inset: 0;
  background: #c3ccd3;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.ui-switch .schieber::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.ui-switch input:checked + .schieber { background: var(--chat-gruen, #1f9d55); }
.ui-switch input:checked + .schieber::before { transform: translateX(16px); }
.ui-switch input:disabled + .schieber { opacity: 0.45; cursor: default; }

/* Seit v383 (Torsten: "erlaubt künftig das verschieben von allen Blöcken
   und Unterseiten an jede beliebige Stelle", per Rückfrage bestätigt als
   "echtes Drag & Drop") – Seitenreihenfolge-Baum (siehe
   strukturDragStart()/strukturDragMove()/strukturDragEnde() in mcc.js).
   .struktur-zeile ist die pro Knoten wiederverwendete Zeilen-Hülle (siehe
   renderStrukturBaum()), .struktur-drag-griff der "⠿"-Ziehpunkt davor –
   nur dort beginnt ein Drag, damit ein normaler Klick auf Name/Buttons
   (Bearbeiten, Auf-/Zuklappen, …) unangetastet bleibt. */
.struktur-drag-griff {
  display: inline-block;
  width: 18px;
  text-align: center;
  cursor: grab;
  touch-action: none; /* verhindert Scrollen der Seite während des Ziehens auf Touch-Geräten */
  color: var(--muted);
  user-select: none;
}
.struktur-drag-griff:active { cursor: grabbing; }
/* Während des Ziehens bleibt die Original-Zeile sichtbar, aber abgeblendet
   (statt sie zu verstecken) – so sieht man jederzeit, welcher Knoten gerade
   bewegt wird, auch während man über andere Zeilen hinwegzieht. */
.struktur-zeile.struktur-wird-gezogen { opacity: 0.4; }
/* Ablage-Indikatoren am jeweils unter dem Zeiger liegenden Zielknoten,
   gesetzt von strukturDragMove() je nach Zeiger-Position innerhalb der
   Zeile (oberes Drittel: davor, unteres Drittel: danach, mittleres
   Drittel: als Kind). */
.struktur-zeile.struktur-drop-davor > .kt-row { box-shadow: inset 0 2px 0 0 var(--brand); }
.struktur-zeile.struktur-drop-danach > .kt-row { box-shadow: inset 0 -2px 0 0 var(--brand); }
.struktur-zeile.struktur-drop-kind > .kt-row { background: var(--ziel-erreicht-bg); border-radius: 6px; }
/* Schwebende Kopie des Zeilentitels, folgt dem Zeiger (siehe
   strukturDragMove()) – rein visuelles Feedback, nimmt selbst keine
   Zeiger-Events entgegen, damit elementFromPoint() darunterliegende Zeilen
   findet statt der Ghost-Kachel selbst. */
.struktur-drag-ghost {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-size: 0.9rem;
  white-space: nowrap;
  opacity: 0.95;
}

/* ===========================================================================
   Seminar-Verwaltung seit v745 (Torsten: "Das anlegen neuer Seminare und
   die Verwaltung von den Seminaren sind noch zu kompliziert und zu wenig
   intuitiv, das muss übersichtlicher werden") – Übersicht als Zeilenliste
   mit Filter-Pillen + Seminar-Seite mit Seitennavigation statt Popup.
   Siehe Blockkommentar über SEMINAR_SEITE_BEREICHE in mcc.js.
   =========================================================================== */
.seminar-uebersicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seminar-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.seminar-filter-pille { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 5px 13px; font-weight: 600; font-size: 0.85rem; }
.seminar-filter-pille.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.seminar-filter-pille.active .hint { color: rgba(255,255,255,0.8); }
.seminar-filter input[type="search"] { max-width: 260px; margin-left: auto; }
.seminar-liste { display: flex; flex-direction: column; gap: 10px; }
.seminar-zeile { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; cursor: pointer; }
.seminar-zeile:hover, .seminar-zeile:focus-visible { border-color: var(--brand); outline: none; }
.seminar-zeile .titel { font-weight: 700; font-size: 1rem; }
.seminar-zeile .marker { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.seminar-zeile .kap { min-width: 140px; }
.seminar-zeile .kap .zahl { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seminar-zeile .kap .balken { height: 6px; border-radius: 999px; background: var(--border); margin-top: 4px; overflow: hidden; }
.seminar-zeile .kap .balken i { display: block; height: 100%; background: var(--green); }
.seminar-zeile .kap .balken i.voll { background: var(--amber); }
@media (max-width: 720px) {
  .seminar-zeile { grid-template-columns: 1fr; gap: 8px; }
  .seminar-zeile .marker { justify-content: flex-start; }
  .seminar-filter input[type="search"] { max-width: none; margin-left: 0; flex: 1 1 100%; }
}

.seminar-seite-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seminar-seite-kopf h2 { font-size: 1.3rem; }
.seminar-seite-kopf .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seminar-seite-editor { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.seminar-seite-nav { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; position: sticky; top: 10px; }
.seminar-seite-nav button { display: flex; width: 100%; text-align: left; background: transparent; color: var(--text); padding: 9px 10px; border-radius: 7px; align-items: center; gap: 8px; font-weight: 500; border: none; }
.seminar-seite-nav button:hover { background: var(--bg); }
.seminar-seite-nav button.active { background: #fdecee; color: var(--brand); font-weight: 700; }
.seminar-seite-nav .st { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.seminar-seite-nav .st.fertig { background: #e2f4e9; color: var(--green); }
.seminar-seite-nav .st.offen { background: #fdf1d6; color: var(--amber); }
.seminar-seite-nav .st.zahl { background: var(--border); color: var(--muted); }
.seminar-seite-nav .trenner { border-top: 1px solid var(--border); margin: 6px 4px; }
.seminar-seite-nav .gruppe { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 10px 3px; }
.seminar-seite-inhalt { margin-bottom: 0; }
.seminar-seite-inhalt h3 { font-size: 1.05rem; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seminar-seite-intro { margin: 0 0 14px; max-width: 65ch; }
.seminar-seite-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.seminar-seite-felder .breit { grid-column: 1 / -1; }
.seminar-seite-block { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; }
.seminar-seite-block h4 { font-size: 0.92rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seminar-seite-sofort { font-size: 0.7rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.seminar-seite-speichern-leiste { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--border); margin: 18px -16px -16px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 0 0 10px 10px; z-index: 2; }
.seminar-seite-speichern-leiste .status { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.seminar-seite-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; }
.seminar-seite-punkt.dirty { background: var(--amber); }
.seminar-seite-speichern-leiste .rechts { margin-left: auto; display: flex; gap: 8px; }
.seminar-seite-checkliste { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.seminar-seite-checkliste h4 { font-size: 0.85rem; margin: 0 0 6px; }
.seminar-seite-checkliste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 3px 14px; font-size: 0.85rem; }
.seminar-seite-checkliste li::before { content: "○"; color: var(--amber); margin-right: 6px; font-weight: 700; }
.seminar-seite-checkliste li.ok::before { content: "✓"; color: var(--green); }
.seminar-seite-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--text); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 50; }
.seminar-seite-toast.zeigen { opacity: 1; }
@media (max-width: 760px) {
  .seminar-seite-editor { grid-template-columns: 1fr; }
  .seminar-seite-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .seminar-seite-nav .trenner, .seminar-seite-nav .gruppe { display: none; }
  .seminar-seite-nav button { width: auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .seminar-seite-toast { transition: none; } }


/* ===========================================================================
   Dateien-App im Nextcloud-Stil (seit v778, vorher v770–v777 eine schlichte
   Liste) – Torsten: "Die Dateien App sieht noch sehr spärlich aus, kannst
   du die in Optik und Funktionsumfang noch deutlich näher oder über
   Nextcloud bringen". Aufbau siehe static/js/dateien.js.

   Alle Knöpfe hier bekommen eigene Klassen und setzen den roten
   Standard-<button> (siehe "button {" oben) bewusst zurück – sonst wäre die
   Seitenleiste eine Wand aus roten Flächen.
   =========================================================================== */
:root {
  --d-hover: #f3f5f7;
  --d-auswahl: #fdeced;
  --d-auswahl-rand: #f5b8bd;
  --d-nav-bg: #f7f8fa;
  --d-schatten: 0 8px 28px rgba(20, 30, 40, 0.18);
  --d-text-leise: #6b7a86;
  --d-radius: 8px;
}

.dateien-karte { padding: 0; overflow: hidden; }
.dateien-app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: calc(100vh - 190px);
  position: relative;
}
.dateien-app.detail-offen { grid-template-columns: 236px minmax(0, 1fr) 340px; }

/* --- Linke Navigation --- */
.dateien-nav {
  background: var(--d-nav-bg);
  border-right: 1px solid var(--border);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.dateien-nav-gruppe { display: flex; flex-direction: column; gap: 1px; }
.dateien-nav-gruppe + .dateien-nav-gruppe { border-top: 1px solid var(--border); padding-top: 10px; }
.dateien-nav-eintrag {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; color: var(--text); border: none; border-radius: var(--d-radius);
  padding: 8px 10px; font-size: 0.93rem; min-height: 38px;
}
.dateien-nav-eintrag:hover { background: #eceff2; }
.dateien-nav-eintrag.aktiv { background: var(--d-auswahl); color: var(--brand-dark); font-weight: 600; }
.dateien-nav-eintrag.ablage-ziel { outline: 2px dashed var(--brand); background: var(--d-auswahl); }
.dateien-nav-symbol { width: 20px; text-align: center; flex: 0 0 auto; }
.dateien-nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateien-nav-zahl, .dateien-nav-marke { font-size: 0.78rem; color: var(--d-text-leise); }
.dateien-nav-ueberschrift {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--d-text-leise); padding: 2px 10px 4px; font-weight: 600;
}
.dateien-nav-mini { background: none; color: inherit; padding: 2px 6px; border-radius: 6px; }
.dateien-nav-mini:hover { background: #eceff2; }
.dateien-nav-leer { font-size: 0.8rem; color: var(--d-text-leise); margin: 2px 10px; }
.dateien-nav-fuss { margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.dateien-nav-platz { padding: 4px 10px 8px; font-size: 0.8rem; color: var(--d-text-leise); }
.dateien-nav-platz-text { margin-bottom: 4px; }
.dateien-tag-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.dateien-nav-schleier { display: none; }

/* --- Hauptbereich --- */
.dateien-haupt { min-width: 0; padding: 10px 16px 24px; position: relative; }
.dateien-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.dateien-icon-knopf {
  background: none; color: var(--text); border: 1px solid transparent;
  border-radius: var(--d-radius); padding: 6px 10px; min-width: 36px; min-height: 36px; line-height: 1;
}
.dateien-icon-knopf:hover { background: var(--d-hover); }
.dateien-icon-knopf.aktiv { background: var(--d-auswahl); color: var(--brand-dark); border-color: var(--d-auswahl-rand); }
.dateien-nur-mobil { display: none; }
.dateien-pfad { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; flex: 1 1 180px; min-width: 0; }
.dateien-pfad-teil {
  background: none; color: var(--d-text-leise); border: none; border-radius: 6px;
  padding: 6px 8px; font-size: 0.95rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dateien-pfad-teil:hover { background: var(--d-hover); color: var(--text); }
.dateien-pfad-teil.aktuell { color: var(--text); font-weight: 700; max-width: 380px; }
.dateien-pfad-teil.ablage-ziel { outline: 2px dashed var(--brand); background: var(--d-auswahl); }
.dateien-pfad-pfeil { font-size: 0.75rem; color: var(--d-text-leise); }
.dateien-pfad-trenner { color: #b3bcc4; }
.dateien-pfad-titel { font-weight: 700; font-size: 1.05rem; padding: 6px 4px; }
.dateien-neu-knopf { padding: 8px 14px; font-weight: 600; }
.dateien-suche { flex: 0 1 260px; min-width: 140px; }
.dateien-suche input {
  width: 100%; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--d-hover);
}
.dateien-suche input:focus { background: white; border-color: var(--d-auswahl-rand); outline: none; box-shadow: 0 0 0 3px var(--d-auswahl); }
.dateien-umschalter { display: flex; border: 1px solid var(--border); border-radius: var(--d-radius); overflow: hidden; }
.dateien-umschalter .dateien-icon-knopf { border-radius: 0; border: none; }

.dateien-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 8px; padding-top: 6px; }
.dateien-werkzeuge-rechts { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.dateien-werkzeug {
  background: none; color: var(--d-text-leise); border: 1px solid var(--border);
  border-radius: 16px; padding: 4px 12px; font-size: 0.85rem;
}
.dateien-werkzeug:hover { color: var(--text); background: var(--d-hover); }
.dateien-lesemarke { font-size: 0.85rem; color: var(--d-text-leise); }
.dateien-ansicht-hinweis { margin: 0; }

.dateien-meldung { margin: 6px 0 0; min-height: 0; font-size: 0.9rem; color: var(--green); display: none; }
.dateien-meldung.sichtbar { display: block; }
.dateien-meldung.fehler { color: var(--red); }

.dateien-platz { font-size: 0.85rem; }
.dateien-platz-leise { margin: 6px 0 0; font-size: 0.8rem; }
.dateien-marke.abgabe { background: #e8f3ff; color: #0a5ca8; }
.dateien-platz-zeile { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dateien-balken { height: 6px; background: #e6eaee; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.dateien-balken > div { height: 100%; background: #0a5ca8; transition: width 0.2s; }
.dateien-balken > div.knapp { background: #e08a00; }
.dateien-balken > div.voll { background: var(--red); }
.dateien-balken.gross { height: 8px; margin: 6px 0 8px; }

/* --- Auswahlleiste --- */
.dateien-auswahlleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--d-auswahl); border: 1px solid var(--d-auswahl-rand);
  border-radius: var(--d-radius); padding: 6px 8px 6px 14px; margin-top: 8px;
  position: sticky; top: 0; z-index: 5;
}
.dateien-auswahl-zahl { font-weight: 600; }
.dateien-auswahl-knoepfe { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.dateien-auswahl-knoepfe button {
  background: white; color: var(--text); border: 1px solid var(--border); padding: 6px 10px; font-size: 0.88rem;
}
.dateien-auswahl-knoepfe button:hover { background: var(--d-hover); }
.dateien-auswahl-knoepfe button.gefahr { color: var(--red); }
.dateien-auswahl-knoepfe .dateien-auswahl-weg { background: none; border-color: transparent; }

/* --- Tabelle --- */
.dateien-liste { margin-top: 6px; }
.dateien-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dateien-tabelle th {
  text-align: left; font-weight: 500; color: var(--d-text-leise); font-size: 0.85rem;
  border-bottom: 1px solid var(--border); padding: 4px 6px; height: 40px;
}
.dateien-tabelle td { border-bottom: 1px solid #eef1f4; padding: 0 6px; height: 54px; vertical-align: middle; }
.d-sp-auswahl { width: 40px; text-align: center; }
.d-sp-aktion { width: 48px; text-align: right; }
.d-sp-groesse { width: 110px; text-align: right; color: var(--d-text-leise); font-size: 0.88rem; white-space: nowrap; }
.d-sp-zeit { width: 130px; text-align: right; color: var(--d-text-leise); font-size: 0.88rem; white-space: nowrap; }
.dateien-tabelle th.d-sp-groesse, .dateien-tabelle th.d-sp-zeit { text-align: right; }
.dateien-sortknopf { background: none; color: inherit; padding: 4px 6px; font-weight: inherit; border-radius: 6px; }
.dateien-sortknopf:hover { background: var(--d-hover); color: var(--text); }
.dateien-sortpfeil { font-size: 0.7rem; margin-left: 2px; }
.dateien-tabelle input[type="checkbox"], .dateien-kachel-auswahl { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); }
.dateien-zeile { cursor: default; transition: background 0.08s; }
.dateien-zeile:hover { background: var(--d-hover); }
.dateien-zeile.ausgewaehlt { background: var(--d-auswahl); }
.dateien-zeile.detail-aktiv { box-shadow: inset 3px 0 0 var(--brand); background: var(--d-auswahl); }
.dateien-zeile.gesperrt { opacity: 0.55; }
.dateien-zeile.ablage-ziel, .dateien-kachel.ablage-ziel { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--d-auswahl); }
.dateien-name-zelle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dateien-symbol {
  flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
}
.dateien-symbol.ordner { font-size: 1.75rem; }
.dateien-symbol { position: relative; }
.dateien-symbol-stern {
  position: absolute; right: -4px; top: -4px; font-size: 0.8rem; color: #e0a800; line-height: 1;
  text-shadow: 0 0 2px white, 0 0 2px white;
}
.dateien-symbol.bild img {
  width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: #eef1f4; opacity: 0; transition: opacity 0.15s;
}
.dateien-symbol.bild img.geladen { opacity: 1; }
.dateien-name-block { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.dateien-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dateien-name-link { color: var(--text); text-decoration: none; }
.dateien-name-link:hover { text-decoration: underline; }
.dateien-name-stamm { font-weight: 500; }
.dateien-name-endung { color: var(--d-text-leise); }
.dateien-marken { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.dateien-marke { font-size: 0.72rem; color: var(--d-text-leise); background: #eef1f4; border-radius: 8px; padding: 0 6px; line-height: 1.5; }
.dateien-marke.stern { background: none; color: #e0a800; font-size: 0.95rem; padding: 0; }
.dateien-tag {
  --tag: #0a5ca8;
  font-size: 0.72rem; line-height: 1.5; padding: 0 7px; border-radius: 9px; cursor: pointer;
  color: var(--tag); background: color-mix(in srgb, var(--tag) 12%, white); border: 1px solid color-mix(in srgb, var(--tag) 35%, white);
  white-space: nowrap;
}
.dateien-tag.gross { font-size: 0.85rem; padding: 2px 4px 2px 10px; display: inline-flex; align-items: center; gap: 2px; cursor: default; }
.dateien-tag.gross button { background: none; color: inherit; padding: 0 6px; font-size: 0.8rem; border-radius: 8px; }
.dateien-tag.klein { font-size: 0.78rem; padding: 2px 8px; }
.dateien-ort { font-size: 0.78rem; color: var(--d-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateien-mehr {
  background: none; color: var(--d-text-leise); padding: 4px 10px; font-size: 1.2rem; line-height: 1; border-radius: 6px;
  opacity: 0.55;
}
.dateien-zeile:hover .dateien-mehr, .dateien-kachel:hover .dateien-mehr, .dateien-mehr:focus { opacity: 1; }
.dateien-mehr:hover { background: #e3e8ec; color: var(--text); }

.dateien-inline-eingabe { width: 100%; padding: 6px 8px; font: inherit; border: 1px solid var(--d-auswahl-rand); border-radius: 6px; }
.dateien-inline-neu {
  display: flex; align-items: center; gap: 8px; padding: 8px; margin: 6px 0;
  background: var(--d-hover); border-radius: var(--d-radius);
}
.dateien-inline-neu input { flex: 1 1 auto; }
.dateien-inline-neu button { padding: 7px 12px; }

.dateien-leer { text-align: center; padding: 50px 16px; color: var(--d-text-leise); }
.dateien-leer-symbol { font-size: 3.5rem; opacity: 0.6; }
.dateien-leer-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.dateien-laedt { padding: 20px; }

/* --- Kacheln --- */
.dateien-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding-top: 10px; }
.dateien-kachel {
  position: relative; border: 1px solid #e6eaee; border-radius: 10px; overflow: hidden; background: white;
  display: flex; flex-direction: column; transition: box-shadow 0.12s, border-color 0.12s;
}
.dateien-kachel:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); border-color: #d3dae0; }
.dateien-kachel.ausgewaehlt, .dateien-kachel.detail-aktiv { border-color: var(--brand); box-shadow: 0 0 0 2px var(--d-auswahl-rand); }
.dateien-kachel.gesperrt { opacity: 0.55; }
.dateien-kachel-auswahl { position: absolute; top: 8px; left: 8px; z-index: 2; opacity: 0; transition: opacity 0.1s; }
.dateien-kachel:hover .dateien-kachel-auswahl, .dateien-kachel.ausgewaehlt .dateien-kachel-auswahl, .dateien-kachel-auswahl:focus { opacity: 1; }
.dateien-kachel-stern { position: absolute; top: 6px; right: 8px; color: #e0a800; z-index: 2; text-shadow: 0 0 3px white; }
.dateien-kachel-bild {
  height: 130px; display: flex; align-items: center; justify-content: center; background: #f4f6f8; cursor: pointer;
}
.dateien-kachel-bild .dateien-symbol { width: 100%; height: 100%; font-size: 3.4rem; }
.dateien-kachel-bild .dateien-symbol.bild img { width: 100%; height: 130px; border-radius: 0; }
.dateien-kachel-fuss { display: flex; align-items: flex-start; gap: 4px; padding: 8px 4px 8px 10px; }
.dateien-kachel-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dateien-kachel-meta { font-size: 0.76rem; color: var(--d-text-leise); }

/* --- Ablegen aus dem Explorer --- */
.dateien-ablage-schleier {
  position: absolute; inset: 8px; z-index: 20; border: 3px dashed var(--brand); border-radius: 12px;
  background: rgba(253, 236, 237, 0.92); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 1.2rem; font-weight: 600; color: var(--brand-dark); pointer-events: none;
}
.dateien-ziehbild {
  position: fixed; top: -100px; left: -100px; background: var(--brand); color: white; padding: 6px 12px; border-radius: 16px; font-weight: 600;
}

/* --- Kontextmenü --- */
.dateien-kontextmenue {
  position: fixed; z-index: 3000; min-width: 220px; background: white; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--d-schatten); padding: 6px;
}
.dateien-menue-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 0.92rem;
}
.dateien-menue-eintrag:hover, .dateien-menue-eintrag:focus { background: var(--d-hover); outline: none; }
.dateien-menue-eintrag.gefahr { color: var(--red); }
.dateien-menue-symbol { width: 20px; text-align: center; }
.dateien-menue-trenner { height: 1px; background: var(--border); margin: 4px 2px; }

/* --- Detail-Seitenleiste --- */
.dateien-detail {
  border-left: 1px solid var(--border); background: white; min-width: 0;
  position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto;
}
.dateien-detail-kopf { display: flex; justify-content: flex-end; padding: 6px 6px 0; }
.dateien-detail-bild {
  height: 170px; margin: 0 16px; display: flex; align-items: center; justify-content: center;
  background: #f4f6f8; border-radius: 10px; font-size: 4.5rem; overflow: hidden;
}
.dateien-detail-bild.mit-bild { cursor: zoom-in; }
.dateien-detail-bild img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.15s; }
.dateien-detail-bild img.geladen { opacity: 1; }
.dateien-detail-titel { display: flex; align-items: flex-start; gap: 6px; padding: 12px 16px 0; }
.dateien-detail-titel h3 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; overflow-wrap: anywhere; }
.dateien-stern { background: none; color: #b8c1c9; font-size: 1.4rem; padding: 0 4px; line-height: 1; }
.dateien-stern.an { color: #e0a800; }
.dateien-detail-unter { margin: 4px 16px 0; font-size: 0.85rem; color: var(--d-text-leise); }
.dateien-detail-aktionen { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px 0; }
.dateien-detail-aktionen button { padding: 7px 12px; font-size: 0.9rem; }
.dateien-detail-tabs {
  display: flex; flex-wrap: wrap; gap: 0 2px; border-bottom: 1px solid var(--border); margin-top: 14px; padding: 0 10px;
}
.dateien-detail-tab {
  background: none; color: var(--d-text-leise); border-radius: 0; padding: 9px 6px; font-size: 0.84rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.dateien-detail-tab:hover { color: var(--text); }
.dateien-detail-tab.aktiv { color: var(--brand-dark); border-bottom-color: var(--brand); font-weight: 600; }
.dateien-detail-inhalt { padding: 12px 16px 24px; font-size: 0.92rem; }
.dateien-detail-h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-text-leise); margin: 18px 0 8px; }
.dateien-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
.dateien-info dt { color: var(--d-text-leise); }
.dateien-info dd { margin: 0; overflow-wrap: anywhere; }
.dateien-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dateien-tag-neu { display: flex; gap: 6px; margin-top: 8px; }
.dateien-tag-neu input { flex: 1 1 auto; padding: 6px 10px; }
.dateien-tag-neu button { padding: 4px 12px; }
.dateien-tag-vorschlaege { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.dateien-tag-vorschlaege .dateien-tag { background: white; }
.dateien-detail-liste-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.dateien-detail-liste-knoepfe button { padding: 6px 10px; font-size: 0.86rem; }
button.secondary.gefahr { color: var(--red); border-color: var(--red); }

.dateien-kommentare { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.dateien-kommentar-kopf { display: flex; align-items: center; gap: 8px; }
.dateien-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--d-auswahl); color: var(--brand-dark);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex: 0 0 auto;
}
.dateien-kommentar-text { margin: 4px 0 0 34px; overflow-wrap: anywhere; }
.dateien-kommentar-weg { margin-left: auto; background: none; color: var(--d-text-leise); padding: 2px 6px; }
.dateien-kommentar-neu { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dateien-kommentar-neu textarea { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.dateien-kommentar-neu button { align-self: flex-end; padding: 7px 16px; }
.dateien-aktivitaet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dateien-aktivitaet li { display: flex; gap: 10px; align-items: flex-start; }
.dateien-aktivitaet-symbol { width: 26px; height: 26px; border-radius: 50%; background: #eef1f4; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0.85rem; }
.dateien-versionen { list-style: none; margin: 0 0 8px; padding: 0; }
.dateien-versionen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef1f4; }
.dateien-versionen li.aktuell { font-weight: 500; }
.dateien-versionen-knoepfe { display: flex; gap: 4px; }

/* --- Ordnerbaum (Verschieben/Kopieren) --- */
.dateien-baum { border: 1px solid var(--border); border-radius: 8px; max-height: 50vh; overflow-y: auto; padding: 4px 0; margin: 8px 0; }
.dateien-baum-zeile { display: flex; align-items: center; gap: 2px; }
.dateien-baum-zeile.gewaehlt { background: var(--d-auswahl); }
.dateien-baum-pfeil { background: none; color: var(--d-text-leise); padding: 6px; width: 28px; }
.dateien-baum-name { background: none; color: var(--text); text-align: left; padding: 7px 8px; flex: 1 1 auto; border-radius: 6px; }
.dateien-baum-name:hover:not(:disabled) { background: var(--d-hover); }
.dateien-baum-zeile.gesperrt .dateien-baum-name { color: #9aa5ae; }

/* --- Upload-Fortschritt --- */
.dateien-upload-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 2500; width: min(400px, calc(100vw - 32px));
  background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--d-schatten); padding: 12px 14px;
}
.dateien-upload-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dateien-upload-liste { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; font-size: 0.85rem; }
.dateien-upload-liste li { display: grid; grid-template-columns: 22px 1fr; column-gap: 6px; padding: 4px 0; border-bottom: 1px solid #f0f2f4; }
.dateien-upload-liste li .dateien-balken { grid-column: 2; margin-top: 2px; }
.dateien-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateien-upload-info { grid-column: 2; color: var(--d-text-leise); font-size: 0.78rem; }
.dateien-upload-liste li.fehler .dateien-upload-info { color: var(--red); }

/* --- Lightbox --- */
body.dateien-overlay-offen { overflow: hidden; }
.dateien-lightbox {
  position: fixed; inset: 0; z-index: 4000; background: rgba(12, 16, 20, 0.94);
  flex-direction: column; color: white;
}
.dateien-lb-leiste {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
}
.dateien-lb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dateien-lb-zahl { font-weight: 400; opacity: 0.7; margin-left: 6px; }
.dateien-lb-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }
.dateien-lb-knoepfe button { background: rgba(255, 255, 255, 0.12); color: white; padding: 8px 12px; }
.dateien-lb-knoepfe button:hover { background: rgba(255, 255, 255, 0.24); }
.dateien-lb-buehne { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 60px 24px; min-height: 0; overflow: auto; }
.dateien-lb-bild { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.dateien-lb-pdf { width: min(1000px, 100%); height: 100%; border: none; background: white; border-radius: 4px; }
.dateien-lb-text {
  background: white; color: var(--text); max-width: 900px; width: 100%; max-height: 100%; overflow: auto;
  padding: 24px 28px; border-radius: 8px; white-space: pre-wrap; font-size: 0.95rem; margin: 0;
}
.dateien-lb-text.breit { max-width: 1200px; white-space: normal; }
.dateien-lb-text.dateien-md { white-space: normal; }
.dateien-lb-audio { text-align: center; }
.dateien-lb-laedt { text-align: center; opacity: 0.85; }
.dateien-lb-laedt button { margin-top: 12px; }
.dateien-lb-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255, 255, 255, 0.12); color: white; font-size: 2rem; width: 46px; height: 64px; padding: 0; border-radius: 8px;
}
.dateien-lb-pfeil:hover { background: rgba(255, 255, 255, 0.25); }
.dateien-lb-pfeil.links { left: 8px; }
.dateien-lb-pfeil.rechts { right: 8px; }

/* --- Markdown-Darstellung --- */
.dateien-md h1, .dateien-md h2, .dateien-md h3 { margin: 0.9em 0 0.4em; line-height: 1.25; }
.dateien-md h1 { font-size: 1.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
.dateien-md h2 { font-size: 1.3rem; }
.dateien-md h3 { font-size: 1.1rem; }
.dateien-md > :first-child { margin-top: 0; }
.dateien-md p { margin: 0 0 0.8em; line-height: 1.55; }
.dateien-md ul, .dateien-md ol { margin: 0 0 0.8em; padding-left: 1.6em; }
.dateien-md li.aufgabe { list-style: none; margin-left: -1.2em; }
.dateien-md code { background: #f0f2f4; padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.dateien-md pre { background: #f4f6f8; padding: 12px; border-radius: 8px; overflow-x: auto; }
.dateien-md pre code { background: none; padding: 0; }
.dateien-md blockquote { margin: 0 0 0.8em; padding: 4px 14px; border-left: 4px solid var(--d-auswahl-rand); color: #4a5864; }
.dateien-md table { border-collapse: collapse; margin: 0 0 0.8em; }
.dateien-md th, .dateien-md td { border: 1px solid var(--border); padding: 4px 10px; }
.dateien-md th { background: #f4f6f8; text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--text); font-weight: 600; }
.dateien-md hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.dateien-md a { color: #0a5ca8; }
.dateien-csv-lesen { border-collapse: collapse; font-size: 0.88rem; }
.dateien-csv-lesen th, .dateien-csv-lesen td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.dateien-csv-lesen th { background: #f4f6f8; text-transform: none; letter-spacing: normal; font-size: inherit; color: var(--text); }

/* --- Editor --- */
.dateien-editor-overlay {
  position: fixed; inset: 0; z-index: 3500; background: rgba(20, 30, 40, 0.55);
  align-items: stretch; justify-content: center; padding: 16px;
}
.dateien-editor-box {
  background: white; border-radius: 12px; width: min(1400px, 100%); display: flex; flex-direction: column;
  box-shadow: var(--d-schatten); overflow: hidden;
}
.dateien-ed-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dateien-ed-titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.dateien-ed-status { font-size: 0.85rem; color: var(--d-text-leise); flex: 1 1 auto; }
.dateien-ed-status.ungespeichert { color: #b36b00; font-weight: 600; }
.dateien-ed-status.ok { color: var(--green); }
.dateien-ed-status.fehler { color: var(--red); }
.dateien-ed-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dateien-ed-knoepfe > button { padding: 8px 14px; }
.dateien-ed-gruppe { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dateien-ed-modus { background: white; color: var(--d-text-leise); border-radius: 0; padding: 7px 12px; font-size: 0.88rem; }
.dateien-ed-modus.aktiv { background: var(--d-auswahl); color: var(--brand-dark); font-weight: 600; }
.dateien-ed-konflikt {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  background: #fff4e0; border-bottom: 1px solid #f0d49b; padding: 10px 14px; font-size: 0.9rem;
}
.dateien-ed-konflikt button { padding: 6px 12px; font-size: 0.86rem; margin: 2px; }
.dateien-ed-koerper { flex: 1 1 auto; display: grid; min-height: 0; }
.dateien-ed-koerper.modus-text, .dateien-ed-koerper.modus-schreiben { grid-template-columns: 1fr; }
.dateien-ed-koerper.modus-geteilt { grid-template-columns: 1fr 1fr; }
.dateien-ed-koerper.modus-vorschau, .dateien-ed-koerper.modus-tabelle { grid-template-columns: 1fr; }
.dateien-ed-text {
  width: 100%; height: 100%; min-height: 50vh; border: none; resize: none; padding: 16px 18px; outline: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; line-height: 1.55; tab-size: 4;
}
.dateien-ed-vorschau { padding: 16px 22px; overflow-y: auto; border-left: 1px solid var(--border); background: #fcfcfd; }
.dateien-ed-tabelle { overflow: auto; padding: 8px 12px; }
.dateien-ed-koerper .dateien-ed-vorschau, .dateien-ed-koerper .dateien-ed-tabelle { display: none; }
.dateien-ed-koerper.modus-geteilt .dateien-ed-vorschau, .dateien-ed-koerper.modus-vorschau .dateien-ed-vorschau { display: block; }
.dateien-ed-koerper.modus-vorschau .dateien-ed-text, .dateien-ed-koerper.modus-tabelle .dateien-ed-text { display: none; }
.dateien-ed-koerper.modus-vorschau .dateien-ed-vorschau { border-left: none; max-width: 900px; width: 100%; margin: 0 auto; }
.dateien-ed-koerper.modus-tabelle .dateien-ed-tabelle { display: block; }
.dateien-ed-fuss { padding: 8px 14px; font-size: 0.8rem; color: var(--d-text-leise); border-top: 1px solid var(--border); }
.dateien-csv-werkzeuge { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dateien-csv-rahmen { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--border); border-radius: 6px; }
.dateien-csv { border-collapse: collapse; font-size: 0.88rem; }
.dateien-csv th {
  background: #f4f6f8; color: var(--d-text-leise); font-weight: 500; padding: 3px 6px; border: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.dateien-csv th.dateien-csv-nr { position: sticky; left: 0; z-index: 1; text-align: right; }
.dateien-csv th.dateien-csv-ecke { left: 0; z-index: 2; }
.dateien-csv td { border: 1px solid var(--border); padding: 0; min-width: 120px; }
.dateien-csv td input { width: 100%; border: none; padding: 5px 7px; font: inherit; background: transparent; min-width: 110px; }
.dateien-csv td input:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: white; }
.dateien-csv tr.kopfzeile td input { font-weight: 700; background: #fafbfc; }
.dateien-csv-weg { background: none; color: #a0aab3; padding: 0 3px; font-size: 0.72rem; }
.dateien-csv-weg:hover { color: var(--red); }
.dateien-bild-werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.dateien-bild-werkzeuge button { background: white; color: var(--text); border: 1px solid var(--border); padding: 6px 12px; font-size: 0.88rem; }
.dateien-bild-werkzeuge button:hover:not(:disabled) { background: var(--d-hover); }
.dateien-bild-werkzeuge button.aktiv { background: var(--d-auswahl); border-color: var(--brand); color: var(--brand-dark); }
.dateien-bild-werkzeuge #dateien-bild-schnitt-ok { background: var(--brand); color: white; border-color: var(--brand); }
.dateien-bild-groesse { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; }
.dateien-bild-buehne {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto;
  background: repeating-conic-gradient(#eef1f4 0% 25%, #f8f9fa 0% 50%) 50% / 20px 20px;
}
.dateien-bild-rahmen { position: relative; line-height: 0; touch-action: none; }
.dateien-bild-rahmen.schneiden { cursor: crosshair; }
.dateien-bild-rahmen canvas { max-width: 100%; max-height: calc(100vh - 250px); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2); }
.dateien-bild-auswahl {
  position: absolute; border: 2px dashed white; outline: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); pointer-events: none;
}

/* --- OnlyOffice-Editor (seit v779, siehe static/js/onlyoffice.js) --- */
.office-overlay {
  position: fixed; inset: 0; z-index: 3600; background: #f4f6f8; flex-direction: column;
}
.office-leiste {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: white;
  border-bottom: 1px solid var(--border); min-height: 46px; flex-wrap: wrap;
}
.office-titel { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.office-hinweis { font-size: 0.82rem; color: var(--d-text-leise); flex: 1 1 auto; min-width: 0; }
.office-zu { background: white; color: var(--brand); border: 1px solid var(--brand); padding: 6px 14px; }
.office-buehne { flex: 1 1 auto; min-height: 0; position: relative; }
#office-platz { position: absolute; inset: 0; }
.office-laedt { text-align: center; padding: 60px 16px; color: var(--d-text-leise); }
.oo-schritte { list-style: none; padding: 0; margin: 8px 0; font-size: 0.9rem; }
.oo-schritte li { padding: 3px 0; }
.oo-schritte li.fehler { color: var(--red); }

/* --- Handy/Tablet --- */
@media (max-width: 1100px) {
  .dateien-app.detail-offen { grid-template-columns: 236px minmax(0, 1fr); }
  .dateien-app.detail-offen .dateien-detail {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 2200; max-height: none;
    box-shadow: var(--d-schatten);
  }
}
@media (max-width: 860px) {
  .dateien-app, .dateien-app.detail-offen { grid-template-columns: minmax(0, 1fr); }
  .dateien-nur-mobil { display: inline-block; }
  .dateien-nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; z-index: 2300; overflow-y: auto;
    transform: translateX(-105%); transition: transform 0.18s ease-out; box-shadow: var(--d-schatten);
  }
  .dateien-app.nav-offen .dateien-nav { transform: none; }
  .dateien-app.nav-offen .dateien-nav-schleier { display: block; position: fixed; inset: 0; z-index: 2250; background: rgba(0, 0, 0, 0.3); }
  .dateien-haupt { padding: 8px 10px 20px; }
  .dateien-suche { flex: 1 1 100%; order: 5; }
  .d-sp-groesse { display: none; }
  .d-sp-zeit { width: 88px; font-size: 0.8rem; }
  .dateien-ed-koerper.modus-geteilt { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .dateien-ed-koerper.modus-geteilt .dateien-ed-vorschau { border-left: none; border-top: 1px solid var(--border); }
  .dateien-editor-overlay { padding: 0; }
  .dateien-editor-box { border-radius: 0; }
  .dateien-lb-buehne { padding: 4px 4px 16px; }
  .dateien-lb-pfeil { display: none; }
  .dateien-lb-knoepfe button { padding: 8px 10px; }
  .dateien-mehr { opacity: 1; }
  .dateien-kachel-auswahl { opacity: 1; }
}
@media (max-width: 520px) {
  .d-sp-zeit { display: none; }
  .dateien-kacheln { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .dateien-kachel-bild { height: 100px; }
  .dateien-kachel-bild .dateien-symbol.bild img { height: 100px; }
  .dateien-auswahl-knoepfe button { padding: 6px 8px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dateien-nav, .dateien-balken > div, .dateien-symbol.bild img { transition: none; }
}

/* ===========================================================================
   Öffentliche Anmeldeseiten: größer und besser lesbar (seit v774)

   Torsten nach Rückmeldungen zur Hundeschwimmen-Anmeldung: "die
   Anmeldemaske wurde als zu klein, zu schlecht lesbar und mit zu kleiner
   Schrift kritisiert ... deutlich größer und besser lesbar". Auf Rückfrage:
   die Vergrößerung gilt für ALLE öffentlichen Anmeldeseiten, der
   Schritt-Assistent unten nur fürs Hundeschwimmen.

   Bewusst über die Klasse .anmeldung-gross am <body> von event.html gelöst
   und nicht global: die interne MCC-Oberfläche (mcc.html) soll ihre
   kompakte Informationsdichte behalten, dort arbeiten Geübte am großen
   Bildschirm. Hier tippen Gäste einmalig auf dem Handy, oft draußen bei
   Sonne, teils mit Lesebrille.
   ========================================================================= */
body.anmeldung-gross main {
  max-width: 940px;
}
body.anmeldung-gross {
  font-size: 1.08rem;
}
body.anmeldung-gross .card {
  padding: 20px 22px;
}
body.anmeldung-gross h2 {
  font-size: 1.7rem;
}
body.anmeldung-gross h3 {
  font-size: 1.35rem;
}
body.anmeldung-gross label {
  /* Feldbeschriftungen waren der Hauptkritikpunkt: 0.85rem grau ist auf
     einem Handy in der Sonne kaum zu lesen. */
  font-size: 1.02rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 6px;
}
body.anmeldung-gross input,
body.anmeldung-gross select,
body.anmeldung-gross textarea {
  font-size: 1.12rem;
  padding: 13px 14px;
  min-height: 52px;
  border-width: 2px;
}
body.anmeldung-gross textarea {
  min-height: 92px;
}
body.anmeldung-gross input[type="checkbox"] {
  /* Große Tippfläche – 16px-Kästchen trifft mit nassen Fingern niemand. */
  width: 28px;
  height: 28px;
  min-height: 28px;
  accent-color: var(--brand);
}
body.anmeldung-gross button {
  font-size: 1.1rem;
  padding: 14px 22px;
  min-height: 54px;
}
body.anmeldung-gross button.btn-mini {
  font-size: 1rem;
  padding: 11px 16px;
  min-height: 48px;
}
body.anmeldung-gross .hint {
  font-size: 1rem;
  line-height: 1.5;
}

/* ===========================================================================
   Anmelde-Assistent: ein Schritt je Seite (seit v774)

   Torsten: "bitte zerlege das in einzelschritte ... also alles als
   geführter Assistent". Acht Schritte (Badeordnung, Daten, Hund,
   Versicherung, Impfpass-Doppelseite, Tollwutimpfung, Bestätigungen,
   Prüfen) – siehe ASSI_SCHRITTE in static/js/event.js. Für jeden anderen
   Formular-Typ setzt event.js die Klasse .assi-aus, dann sind alle Schritte
   gleichzeitig sichtbar und die Navigation verschwindet: die
   Schwimmcamp-/Standard-Anmeldung bleibt dadurch exakt wie vorher, nur
   größer.
   ========================================================================= */
.assi-schritt {
  display: none;
}
.assi-schritt.aktiv,
.assi-aus .assi-schritt {
  display: block;
}
/* Im ausgeschalteten Modus verschwinden Fortschritt, Schritt-Überschriften
   und Schritt-Erklärungen – NICHT aber .assi-nav: dort steckt der
   Absenden-Knopf (beim ersten Testdurchlauf war die Standard-Anmeldung
   dadurch nicht absendbar). Die beiden Schritt-Knöpfe darin sind von sich
   aus verborgen und werden nur von zeigeAssiSchritt() eingeblendet, das im
   ausgeschalteten Modus gar nicht läuft. */
.assi-aus .assi-fortschritt,
.assi-aus .assi-kopf,
.assi-aus .assi-erklaerung {
  display: none;
}

.assi-fortschritt {
  margin: 0 0 18px;
}
.assi-fortschritt-zeile {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.assi-fortschritt-balken {
  flex: 1 1 0;
  height: 10px;
  border-radius: 5px;
  background: var(--border);
}
.assi-fortschritt-balken.erledigt {
  background: #1e7a3c;
}
.assi-fortschritt-balken.aktuell {
  background: var(--brand);
}
.assi-fortschritt-text {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}

.assi-kopf {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 700;
}
.assi-erklaerung {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

/* Die Navigation steht am Ende des Schritts, nicht klebend: ein
   sticky-Balken hat auf dem Handy die Beispielbilder des Schritts
   überdeckt (beim ersten Durchklicken aufgefallen). Weil jeder Schritt
   jetzt kurz ist, ist das Ende ohnehin nach kurzem Scrollen erreicht. */
.assi-nav {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  background: var(--card);
}
.assi-nav button {
  flex: 1 1 160px;
}

/* Beispielbilder: "so ist es richtig" / "so bitte nicht" nebeneinander,
   auf dem Handy untereinander. */
.assi-beispiele {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}
.assi-beispiel {
  border: 3px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  background: var(--card);
}
.assi-beispiel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.assi-beispiel-titel {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.assi-beispiel.gut {
  border-color: #1e7a3c;
}
.assi-beispiel.gut .assi-beispiel-titel {
  color: #1e7a3c;
}
.assi-beispiel.schlecht {
  border-color: var(--red);
}
.assi-beispiel.schlecht .assi-beispiel-titel {
  color: var(--red);
}

/* Checkliste "das muss auf dem Bild zu sehen sein" */
.assi-checkliste {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.assi-checkliste li {
  position: relative;
  padding: 8px 0 8px 34px;
  font-size: 1.05rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
}
.assi-checkliste li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 7px;
  color: #1e7a3c;
  font-weight: 700;
  font-size: 1.2rem;
}

/* Große Auswahlflächen für Datei/Kamera statt eines schmalen Dateifelds */
.assi-upload-knoepfe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.assi-upload-knoepfe button {
  min-height: 78px;
  font-size: 1.12rem;
  font-weight: 600;
}
.assi-datei-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  font-size: 1.05rem;
}
.assi-datei-status.gewaehlt {
  border-style: solid;
  border-color: #1e7a3c;
  background: var(--ziel-erreicht-bg);
  color: #14532d;
}
.assi-datei-vorschau {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.assi-datei-vorschau img {
  max-width: 140px;
  max-height: 140px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Zusammenfassung im letzten Schritt */
/* Links Bezeichnung über Wert, rechts der Bearbeiten-Knopf: nebeneinander
   passte auf Handy-Breite nicht (der Knopf rutschte in eine eigene Zeile
   und machte die Liste doppelt so lang). */
.assi-pruefen-zeile {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}
.assi-pruefen-zeile .assi-pruefen-text {
  flex: 1 1 auto;
  min-width: 0;
}
.assi-pruefen-zeile .assi-pruefen-was {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
}
.assi-pruefen-zeile .assi-pruefen-wert {
  display: block;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.assi-pruefen-zeile button {
  flex: 0 0 auto;
}
.assi-pruefen-zeile .assi-pruefen-fehlt {
  color: var(--red);
  font-weight: 700;
}

/* Schritte, die nur beim Hundeschwimmen-Formular gelten, bleiben bei jedem
   anderen Formular-Typ auch im .assi-aus-Modus (alles gleichzeitig
   sichtbar) verborgen – siehe assiSchritteVorbereiten() in event.js. */
.assi-schritt.assi-versteckt {
  display: none !important;
}

/* =========================================================================
   Eingabe-/Bestätigungsdialoge (seit v781, static/js/dialog.js) – Ersatz für
   die Browser-Fenster prompt()/confirm().
   ========================================================================= */
.mcc-dialog-schleier {
  position: fixed; inset: 0; z-index: 5000; background: rgba(15, 23, 32, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: mcc-dialog-ein 0.12s ease-out;
}
@keyframes mcc-dialog-ein { from { opacity: 0; } to { opacity: 1; } }
.mcc-dialog {
  background: white; border-radius: 14px; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); padding: 20px 22px 16px;
}
.mcc-dialog-titel { margin: 0 0 6px; font-size: 1.08rem; }
.mcc-dialog-text { margin: 0 0 12px; color: var(--muted); white-space: pre-line; line-height: 1.4; }
.mcc-dialog-felder { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.mcc-dialog-feld { flex: 1 1 100%; min-width: 0; }
.mcc-dialog-feld.halb { flex: 1 1 calc(50% - 6px); }
.mcc-dialog-feld textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
.mcc-dialog-feld input:focus, .mcc-dialog-feld textarea:focus, .mcc-dialog-feld select:focus { outline: 2px solid rgba(227, 6, 19, 0.25); border-color: var(--brand); }
.mcc-dialog-hinweis { margin: 3px 0 0; font-size: 0.78rem; color: var(--muted); }
.mcc-dialog-haken { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.92rem; flex: 1 1 100%; }
.mcc-dialog-fehler { color: var(--red); min-height: 1em; margin: 8px 0 0; font-size: 0.85rem; }
.mcc-dialog-fehler:empty { display: none; }
.mcc-dialog-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.mcc-dialog-knoepfe button.gefahr { background: var(--red); }
@media (max-width: 560px) {
  .mcc-dialog-schleier { align-items: flex-end; padding: 0; }
  .mcc-dialog { border-radius: 16px 16px 0 0; width: 100%; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .mcc-dialog-feld.halb { flex-basis: 100%; }
  .mcc-dialog-knoepfe button { flex: 1; }
}

/* =========================================================================
   ToDo, zweiter Ausbau (seit v781, static/js/todo.js)
   ========================================================================= */
.todo-werkzeug { margin-bottom: 12px; }
.todo-schnell {
  position: relative; background: white; border: 1px solid var(--border); border-radius: 12px;
  padding: 4px 10px 4px 36px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.todo-schnell:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.todo-schnell-plus { position: absolute; left: 12px; top: 11px; color: var(--brand); font-weight: 700; }
.todo-schnell-eingabe { border: none !important; padding: 9px 0 !important; outline: none; background: transparent; }
.todo-schnell-vorschau { display: flex; gap: 6px; flex-wrap: wrap; }
.todo-schnell-vorschau:not(:empty) { padding: 0 0 8px; }
.todo-leiste-zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.todo-ansicht-wahl { display: inline-flex; background: #eceff2; border-radius: 10px; padding: 3px; gap: 2px; }
.todo-ansicht-knopf { background: transparent; color: var(--text); padding: 6px 12px; border-radius: 8px; font-size: 0.88rem; }
.todo-ansicht-knopf.aktiv { background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); font-weight: 600; }
.todo-suche { flex: 1 1 180px; max-width: 320px; border-radius: 10px !important; }

.todo-flaeche { color: var(--text); }
.todo-karten { display: flex; flex-direction: column; gap: 6px; }
.todo-gruppe-kopf { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 16px 2px 6px; }
.todo-gruppe-kopf.ueberfaellig { color: var(--red); }
.todo-gruppe-kopf.heute { color: var(--brand-dark); }
.todo-karte {
  display: flex; align-items: flex-start; gap: 10px; background: white; border: 1px solid var(--border);
  border-left: 4px solid transparent; border-radius: 10px; padding: 10px 10px 10px 12px; cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s, transform 0.12s; position: relative;
}
.todo-karte:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); }
.todo-karte:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.todo-karte.gewaehlt { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.15); }
.todo-karte.prio-hoch { border-left-color: var(--red); }
.todo-karte.prio-niedrig { border-left-color: #c5ccd3; }
.todo-karte.erledigt { opacity: 0.62; }
.todo-karte.erledigt .todo-karte-titel { text-decoration: line-through; color: var(--muted); }
.todo-karte.zieht { opacity: 0.4; transform: rotate(1deg); }
.todo-haken {
  appearance: none; -webkit-appearance: none; width: 20px !important; height: 20px; flex: 0 0 20px;
  border: 2px solid #b4bec7; border-radius: 50%; margin: 1px 0 0; cursor: pointer; display: grid; place-content: center;
  transition: background 0.12s, border-color 0.12s; background: white;
}
.todo-haken:hover:not(:disabled) { border-color: var(--green); }
.todo-haken:checked { background: var(--green); border-color: var(--green); }
.todo-haken:checked::after { content: "✓"; color: white; font-size: 13px; font-weight: 700; line-height: 1; }
.todo-haken.gross { width: 26px !important; height: 26px; flex-basis: 26px; margin-top: 4px; }
.todo-karte-mitte { flex: 1; min-width: 0; }
.todo-karte-titel { font-weight: 600; line-height: 1.3; word-break: break-word; }
.todo-prio-hoch { display: inline-block; color: white; background: var(--red); border-radius: 4px; font-size: 0.72rem; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
.todo-karte-beschreibung { font-size: 0.85rem; color: var(--muted); margin-top: 2px; white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.todo-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.todo-chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 0.76rem; padding: 2px 8px; border-radius: 999px;
  background: #eef1f4; color: #3c4a56; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.todo-chip.faellig.ueberfaellig { background: #fdeceb; color: var(--red); font-weight: 600; }
.todo-chip.faellig.heute { background: #fff4d6; color: #8a5a00; font-weight: 600; }
.todo-chip.faellig.bald { background: #eaf1fb; color: #1b4f8a; }
.todo-chip.in-arbeit { background: #e7f0ff; color: #1b4f8a; }
.todo-chip.fertig { background: #e3f5ea; color: var(--green); }
.todo-chip.kategorie { background: transparent; border: 1px dashed var(--border); }
.todo-fortschritt { height: 4px; background: #eceff2; border-radius: 99px; margin-top: 7px; overflow: hidden; }
.todo-fortschritt span { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width 0.2s; }
.todo-fortschritt.gross { height: 6px; margin: 2px 0 8px; }
.todo-avatare { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.todo-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #dfe8f1; color: #1b4f8a; font-size: 0.7rem; font-weight: 700;
  display: inline-grid; place-content: center; border: 2px solid white; margin-left: -6px;
}
.todo-avatar.gruppe { background: #efe7f7; }
.todo-karte-aktionen { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.todo-karte:hover .todo-karte-aktionen, .todo-karte:focus-within .todo-karte-aktionen { opacity: 1; }
.todo-mini {
  background: transparent; color: var(--muted); padding: 4px 7px; border-radius: 6px; font-size: 0.85rem; line-height: 1;
}
.todo-mini:hover { background: #eef1f4; color: var(--text); }
.todo-link { background: none; color: var(--brand); padding: 0 4px; font-size: 0.85rem; display: inline; }
.todo-link:hover { text-decoration: underline; }
.todo-leer { text-align: center; padding: 36px 12px; color: var(--muted); }
.todo-leer-icon { font-size: 2.2rem; margin-bottom: 6px; }
@media (hover: none) { .todo-karte-aktionen { opacity: 1; } }

/* Board */
.todo-board { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.todo-spalte { background: #eef1f4; border-radius: 12px; padding: 8px; min-height: 160px; transition: background 0.12s, box-shadow 0.12s; }
.todo-spalte.drueber { background: #e3ecf7; box-shadow: inset 0 0 0 2px #8fb0d8; }
.todo-spalte header { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9rem; padding: 4px 6px 8px; }
.todo-spalte.spalte-in_arbeit header { color: #1b4f8a; }
.todo-spalte.spalte-erledigt header { color: var(--green); }
.todo-spalte-zahl { background: white; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; color: var(--muted); }
.todo-spalte-karten { display: flex; flex-direction: column; gap: 6px; }
.todo-spalte .todo-karte { flex-wrap: wrap; }
.todo-spalte .todo-karte-aktionen { position: absolute; top: 4px; right: 4px; background: white; border-radius: 6px; }
.todo-spalte-leer { border: 2px dashed #cdd5dc; border-radius: 10px; padding: 18px; text-align: center; color: var(--muted); font-size: 0.85rem; }
@media (max-width: 760px) { .todo-board { grid-template-columns: repeat(3, 82vw); scroll-snap-type: x mandatory; } .todo-spalte { scroll-snap-align: start; } }

/* Detail-Seitenleiste */
.todo-detail-schleier { position: fixed; inset: 0; z-index: 2400; pointer-events: none; }
.todo-detail-schleier.offen { pointer-events: auto; background: rgba(15, 23, 32, 0.18); }
.todo-detail {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: #fbfcfd; overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.16); transform: translateX(105%); transition: transform 0.18s ease-out;
}
.todo-detail-schleier.offen .todo-detail { transform: none; }
.todo-detail-kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 0 18px; position: sticky; top: 0; background: #fbfcfd; z-index: 1; }
.todo-detail-pfad { font-size: 0.8rem; color: var(--muted); }
.todo-detail-block { padding: 10px 18px; border-bottom: 1px solid #eef1f4; }
.todo-detail-titelzeile { display: flex; gap: 10px; align-items: flex-start; }
.todo-detail-titel {
  flex: 1; font: inherit; font-size: 1.2rem; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px;
  resize: none; overflow: hidden; background: transparent; line-height: 1.3;
}
.todo-detail-titel:hover:not([readonly]), .todo-detail-titel:focus { border-color: var(--border); background: white; outline: none; }
.todo-status-wahl { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.todo-status-knopf { background: white; color: var(--text); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; }
.todo-status-knopf.aktiv.st-offen { background: #3c4a56; border-color: #3c4a56; color: white; }
.todo-status-knopf.aktiv.st-in_arbeit { background: #1b4f8a; border-color: #1b4f8a; color: white; }
.todo-status-knopf.aktiv.st-erledigt { background: var(--green); border-color: var(--green); color: white; }
.todo-detail-raster { display: grid; grid-template-columns: 100px 1fr; gap: 8px 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #eef1f4; }
.todo-detail-raster > label { margin: 0; }
.todo-zeile { display: flex; gap: 6px; flex-wrap: wrap; }
.todo-zeile > * { flex: 1 1 90px; min-width: 0; }
.todo-wiederholung input[type=number] { flex: 0 0 64px; }
.todo-wied-text { margin: 0; font-size: 0.8rem; }
.todo-personen { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.todo-detail-ueberschrift { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.todo-detail-beschreibung { width: 100%; font: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 70px; background: white; }
.todo-schritte { list-style: none; margin: 0; padding: 0; }
.todo-schritt { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; }
.todo-schritt:hover { background: #f0f3f6; }
.todo-schritt.zieht { opacity: 0.4; }
.todo-schritt.erledigt .todo-schritt-text { text-decoration: line-through; color: var(--muted); }
.todo-schritt-text { flex: 1; word-break: break-word; }
.todo-griff { cursor: grab; color: #b4bec7; font-size: 0.8rem; letter-spacing: -2px; user-select: none; }
.todo-schritt .todo-mini { opacity: 0; }
.todo-schritt:hover .todo-mini { opacity: 1; }
@media (hover: none) { .todo-schritt .todo-mini { opacity: 1; } }
.todo-schritt-neu { margin-top: 4px; border-style: dashed !important; background: transparent; }
.todo-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.todo-anhang { background: white; border: 1px solid var(--border); border-radius: 8px; padding: 3px 4px 3px 8px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 2px; }
.todo-anhang a { text-decoration: none; color: var(--text); }
.todo-kommentare { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.todo-kommentar { display: flex; gap: 8px; align-items: flex-start; }
.todo-kommentar .todo-avatar { margin: 0; }
.todo-kommentar-blase { flex: 1; background: white; border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; padding: 6px 10px; min-width: 0; }
.todo-kommentar-kopf { font-size: 0.8rem; display: flex; gap: 6px; align-items: center; }
.todo-kommentar-kopf span { color: var(--muted); flex: 1; }
.todo-kommentar-kopf .todo-mini { opacity: 0; padding: 2px 5px; }
.todo-kommentar:hover .todo-mini { opacity: 1; }
.todo-kommentar-text { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.todo-kommentar-neu { display: flex; gap: 6px; align-items: flex-end; }
.todo-kommentar-neu textarea { flex: 1; font: inherit; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.todo-verlauf summary { cursor: pointer; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.todo-verlauf ul { margin: 8px 0; padding-left: 16px; font-size: 0.85rem; line-height: 1.55; }
.todo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1f2b36; color: white; padding: 9px 16px;
  border-radius: 10px; font-size: 0.9rem; z-index: 5200; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; max-width: 90vw;
}
.todo-toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.todo-toast.fehler { background: var(--red); }
@media (max-width: 560px) {
  .todo-detail { width: 100vw; }
  .todo-detail-raster { grid-template-columns: 1fr; gap: 4px; }
  .todo-detail-raster > label { margin-top: 6px; }
  .todo-suche { max-width: none; }
}
/* Seit v781: das ToDo-Board braucht drei Spalten nebeneinander. */
@media (min-width: 900px) {
  main.main-todo-breit { max-width: 1240px; }
}
.todo-wiederholung #todo-wied-ab { flex: 1 1 100%; }

/* =========================================================================
   Checklisten, zweiter Ausbau (seit v782, static/js/checklisten.js)
   ========================================================================= */
.cl-karten { display: flex; flex-direction: column; gap: 8px; }
.cl-karte {
  display: flex; gap: 12px; align-items: center; background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; border-left: 4px solid #c5ccd3;
}
.cl-karte.ist-faellig { border-left-color: var(--red); }
.cl-karte-text { flex: 1; min-width: 0; }
.cl-karte-titel { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-marke { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #eef1f4; color: #3c4a56; }
.cl-marke.faellig { background: #fdeceb; color: var(--red); }
.cl-marke.ok { background: #e3f5ea; color: var(--green); }
.cl-marke.mangel { background: #fff4d6; color: #8a5a00; }
.cl-entwurf-hinweis { margin-top: 4px; font-size: 0.85rem; color: #1b4f8a; }
.cl-start { flex: 0 0 auto; border-radius: 10px; font-weight: 600; }

/* Vollbild-Ausfüllen */
body.cl-offen { overflow: hidden; }
.cl-ausfuellen { position: fixed; inset: 0; z-index: 2600; background: rgba(15, 23, 32, 0.45); display: none; justify-content: center; }
.cl-rahmen { background: #f4f6f8; width: min(760px, 100%); height: 100%; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
.cl-kopf { display: flex; align-items: center; gap: 10px; background: var(--brand); color: white; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
.cl-zu { background: rgba(255, 255, 255, 0.18); color: white; font-size: 1.5rem; line-height: 1; padding: 4px 12px 8px; border-radius: 10px; }
.cl-kopf-text { flex: 1; min-width: 0; }
.cl-titel { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-unter { font-size: 0.8rem; opacity: 0.9; }
.cl-zaehler { font-weight: 700; background: rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 4px 10px; font-size: 0.9rem; }
.cl-balken { height: 4px; background: #f3c2c5; }
.cl-balken span { display: block; height: 100%; background: var(--green); transition: width 0.2s; }
.cl-koerper { flex: 1; overflow-y: auto; padding: 14px 14px 30px; -webkit-overflow-scrolling: touch; }
.cl-beschreibung { margin: 0 0 12px; color: var(--muted); white-space: pre-line; }
.cl-alles-ok { width: 100%; background: white; color: var(--green); border: 2px dashed #9fd4b4; margin-bottom: 12px; font-weight: 600; }
.cl-feld { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; transition: box-shadow 0.15s, border-color 0.15s; }
.cl-feld.fehlt { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.cl-frage { font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.cl-pflicht { color: var(--red); margin-left: 3px; }
.cl-hinweis { font-size: 0.82rem; color: var(--muted); margin: -4px 0 8px; }
.cl-feld textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; }
.cl-feld input[type=text], .cl-feld input[type=number], .cl-feld input[type=date] { font-size: 1rem; padding: 11px 12px; }
.cl-abschnitt { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 8px; }
.cl-okm { display: flex; gap: 8px; }
.cl-okm-knopf { flex: 1; background: white; color: var(--text); border: 2px solid var(--border); font-weight: 700; font-size: 1rem; padding: 12px; border-radius: 10px; }
.cl-okm-knopf.entfaellt { flex: 0 0 54px; color: var(--muted); }
.cl-okm-knopf.ok.aktiv { background: var(--green); border-color: var(--green); color: white; }
.cl-okm-knopf.mangel.aktiv { background: var(--red); border-color: var(--red); color: white; }
.cl-okm-knopf.entfaellt.aktiv { background: #63737f; border-color: #63737f; color: white; }
.cl-mangel-box { margin-top: 10px; background: #fdeceb; border-radius: 10px; padding: 10px; }
.cl-optionen, .cl-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-option { background: white; color: var(--text); border: 2px solid var(--border); border-radius: 999px; padding: 8px 14px; font-weight: 600; }
.cl-option.aktiv { background: #1b4f8a; border-color: #1b4f8a; color: white; }
.cl-schalter { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--text); cursor: pointer; margin: 0; }
.cl-schalter input { display: none; }
.cl-schalter span { width: 52px; height: 30px; border-radius: 999px; background: #c5ccd3; position: relative; transition: background 0.15s; }
.cl-schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: white; transition: left 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.cl-schalter input:checked + span { background: var(--green); }
.cl-schalter input:checked + span::after { left: 25px; }
.cl-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.cl-foto { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #e6ecef; }
.cl-foto img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.cl-foto button { position: absolute; top: 3px; right: 3px; background: rgba(0, 0, 0, 0.55); color: white; padding: 1px 6px; border-radius: 6px; font-size: 0.75rem; }
.cl-foto-neu { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 84px; padding: 0 14px; border: 2px dashed #b4bec7; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 0.9rem; margin: 0; background: white; }
.cl-foto-neu.gross { height: 64px; flex: 1; font-size: 1rem; }
.cl-unterschrift-knopf { width: 100%; background: white; color: var(--text); border: 2px dashed #b4bec7; padding: 18px; font-size: 1rem; }
.cl-unterschrift-fertig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cl-unterschrift-fertig img { max-height: 70px; max-width: 240px; background: white; border-bottom: 1px solid #b4bec7; }
.cl-sig-dialog { width: min(560px, 100%); }
.cl-sig-flaeche { width: 100%; height: 200px; border: 2px solid var(--border); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.cl-fehler { color: var(--red); font-weight: 600; }
.cl-fehler:empty { display: none; }
.cl-fuss { display: flex; gap: 8px; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid var(--border); }
.cl-fuss button { flex: 1; padding: 13px; font-weight: 700; border-radius: 10px; }
.cl-lightbox { position: fixed; inset: 0; z-index: 5100; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.cl-lightbox img { max-width: 96vw; max-height: 94vh; }
@media (min-width: 761px) { .cl-rahmen { height: calc(100% - 40px); margin-top: 20px; border-radius: 14px; overflow: hidden; } }

/* Mängel */
.cl-maengel { margin-bottom: 14px; }
.cl-maengel-kopf { font-weight: 700; margin-bottom: 6px; }
.cl-mangel { display: flex; gap: 10px; background: #fff8f0; border: 1px solid #f3d9b1; border-left: 4px solid #e08e0b; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cl-mangel.behoben { background: #f3faf6; border-color: #cfe9da; border-left-color: var(--green); }
.cl-mangel-text { flex: 1; min-width: 0; }
.cl-mangel-kommentar { margin: 3px 0; white-space: pre-line; }
.cl-behoben-info { color: var(--green); font-size: 0.85rem; margin-top: 3px; }
.cl-mangel-aktion { flex: 0 0 auto; }
.cl-verw-maengel { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.cl-verw-maengel summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.cl-verw-maengel .cl-filter { margin: 10px 0; }
.cl-einstellungen { margin-top: 12px; padding: 12px; background: #f6f8fa; border-radius: 10px; }
.cl-einstellung-zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text); font-size: 0.92rem; }

/* Editor */
.cl-editor { display: grid; grid-template-columns: 170px 1fr 300px; gap: 14px; align-items: start; }
.cl-ed-titel { font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; }
.cl-ed-palette { position: sticky; top: 0; display: flex; flex-direction: column; gap: 5px; }
.cl-ed-palette .hint { margin: 0 0 4px; font-size: 0.78rem; }
.cl-ed-baustein { background: white; color: var(--text); border: 1px solid var(--border); text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 0.86rem; cursor: grab; }
.cl-ed-baustein:hover { border-color: var(--brand); background: #fff5f5; }
.cl-ed-liste { list-style: none; margin: 0; padding: 0; min-height: 80px; display: flex; flex-direction: column; gap: 6px; }
.cl-ed-feld { display: flex; gap: 8px; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.cl-ed-feld.typ-ueberschrift { background: #eef1f4; }
.cl-ed-feld.zieht { opacity: 0.4; }
.cl-ed-griff { cursor: grab; color: #b4bec7; user-select: none; padding-top: 8px; letter-spacing: -2px; }
.cl-ed-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cl-ed-zeile { display: flex; gap: 6px; align-items: center; }
.cl-ed-typ { flex: 0 0 150px; padding: 6px !important; font-size: 0.85rem; }
.cl-ed-label { flex: 1; font-weight: 600; }
.cl-ed-pflicht { display: inline-flex; gap: 4px; align-items: center; margin: 0; white-space: nowrap; font-size: 0.8rem; }
.cl-ed-hinweis { font-size: 0.82rem; padding: 5px 8px !important; }
.cl-ed-optionen textarea { width: 100%; font: inherit; font-size: 0.88rem; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
.cl-ed-leer { border: 2px dashed var(--border); border-radius: 10px; padding: 24px; text-align: center; color: var(--muted); }
.cl-ed-marke { height: 4px; background: var(--brand); border-radius: 2px; }
.cl-ed-handy { border: 10px solid #1f2b36; border-radius: 26px; background: #f4f6f8; height: 540px; display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 0; }
.cl-ed-handy-kopf { background: var(--brand); color: white; font-weight: 700; padding: 10px 12px; font-size: 0.9rem; }
.cl-ed-handy-inhalt { overflow-y: auto; padding: 8px; zoom: 0.82; }
.cl-ed-handy-inhalt .cl-feld { pointer-events: none; }
@media (max-width: 1100px) { .cl-editor { grid-template-columns: 1fr; } .cl-ed-palette { position: static; flex-direction: row; flex-wrap: wrap; } .cl-ed-handy { height: 420px; position: static; } }
@media (max-width: 560px) { .cl-ed-zeile { flex-wrap: wrap; } .cl-ed-typ { flex-basis: 100%; } }
body.cl-offen .todo-toast { bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 5200; }

/* =========================================================================
   Dienstplan einfacher (seit v783, static/js/dienstplan.js)
   ========================================================================= */
.dp-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 12px; }
@media (max-width: 760px) { .dp-kopf { grid-template-columns: minmax(0, 1fr); } }
.dp-kasten { background: #f6f8fa; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.dp-kasten.gebraucht { background: #fff8f0; border-color: #f3d9b1; }
.dp-kasten-titel { font-weight: 700; font-size: 0.92rem; margin-bottom: 2px; }
.dp-mein, .dp-gebraucht { display: flex; align-items: center; gap: 10px; background: white; border: 1px solid var(--border); border-left: 4px solid #cfe3f7; border-radius: 10px; padding: 7px 10px; }
.dp-gebraucht { border-left-color: #e08e0b; }
.dp-datum { flex: 0 0 64px; display: flex; flex-direction: column; line-height: 1.15; font-size: 0.85rem; }
.dp-datum span { color: var(--muted); font-size: 0.8rem; }
.dp-mein-text { flex: 1; min-width: 0; }
.dp-mein-titel { font-weight: 600; }
.dp-fehlt { font-size: 0.74rem; font-weight: 700; color: #8a5a00; background: #fff4d6; border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.dp-mini { background: transparent; color: var(--muted); padding: 4px 8px; border-radius: 6px; font-size: 0.95rem; }
.dp-mini:hover { background: #eef1f4; color: var(--text); }
.dp-eintragen { background: var(--green); padding: 8px 14px; border-radius: 8px; font-weight: 600; flex: 0 0 auto; }
.dp-ansicht-leiste { display: flex; justify-content: flex-end; margin: 4px 0 8px; }
.dp-monat-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dp-monat-kopf strong { font-size: 1.05rem; min-width: 160px; text-align: center; }
.dp-legende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dp-legende .dp-chip { cursor: default; }
.dp-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dp-wt { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0; }
.dp-tag { min-height: 78px; background: white; border: 1px solid var(--border); border-radius: 8px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.dp-tag.leer { background: transparent; border: none; }
.dp-tag.heute { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.dp-tag-nr { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.dp-tag.heute .dp-tag-nr { color: var(--brand); }
.dp-chip { display: block; width: 100%; text-align: left; font-size: 0.72rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; background: #eef1f4; color: var(--text); border-left: 3px solid var(--plan, #cfe3f7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-legende .dp-chip { width: auto; display: inline-block; }
.dp-chip.ich { background: #e3f5ea; color: #145c33; font-weight: 600; }
.dp-chip.fehlt { background: #fff4d6; color: #7a4f00; }
.dp-chip.kannnicht { background: #f3f4f6; color: #9aa4ad; text-decoration: line-through; }
.dp-chip-zeit { font-weight: 700; }
@media (max-width: 560px) { .dp-tag { min-height: 56px; } .dp-chip-zeit { display: none; } .dp-chip { font-size: 0.64rem; padding: 1px 3px; } }
.dp-hinweis { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1f2b36; color: white; padding: 8px 10px 8px 16px; border-radius: 10px; z-index: 5200; display: flex; gap: 10px; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; max-width: 94vw; }
.dp-hinweis.sichtbar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dp-hinweis button { background: rgba(255, 255, 255, 0.16); padding: 6px 10px; font-size: 0.85rem; }
/* Saison-Assistent */
.dp-saison-dialog { width: min(720px, 100%); }
.dp-saison-kopf { display: flex; justify-content: space-between; align-items: center; }
.dp-schritte { list-style: none; display: flex; gap: 4px; padding: 0; margin: 6px 0 14px; }
.dp-schritte li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.78rem; color: var(--muted); font-weight: 700; position: relative; }
.dp-schritte li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.dp-schritte li:first-child::before { display: none; }
.dp-schritte li > b { width: 28px; height: 28px; border-radius: 50%; background: white; border: 2px solid var(--border); display: grid; place-content: center; position: relative; z-index: 1; }
.dp-schritte li.aktiv > b { border-color: var(--brand); background: var(--brand); color: white; }
.dp-schritte li.fertig > b { border-color: var(--green); background: var(--green); color: white; }
.dp-schritte li.aktiv { color: var(--brand); }
.dp-schritte li.fertig { color: var(--green); }
.dp-erkl { margin: 0 0 12px; color: var(--muted); line-height: 1.4; }
.dp-wahl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dp-radio { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.95rem; margin: 0; background: #f6f8fa; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.dp-farbe { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.1); }
.dp-zeile { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.dp-zeile > div { min-width: 0; }
.dp-rollen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dp-rolle { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--text); font-size: 0.9rem; margin: 0; cursor: pointer; background: white; }
.dp-rolle.an { border-color: #1b4f8a; background: #eaf1fb; }
.dp-rolle input { display: none; }
.dp-schicht { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #fbfcfd; }
.dp-pos { margin-left: 12px; }
.dp-wochentage { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-summe { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dp-summe > div { flex: 1; min-width: 110px; background: #eaf1fb; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.dp-summe strong { font-size: 1.5rem; color: #1b4f8a; }
.dp-summe span { font-size: 0.8rem; color: var(--muted); }
.dp-summe .grau { background: #f3f4f6; }
.dp-summe .grau strong { color: var(--muted); }
.dp-vorschau-liste { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.dp-vorschau-monat { margin-bottom: 8px; }
.dp-vorschau-monat-titel { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.dp-vt { display: inline-block; font-size: 0.78rem; background: #e3f5ea; color: #145c33; border-radius: 6px; padding: 2px 6px; margin: 0 4px 4px 0; }
.dp-vt.weg { background: #f3f4f6; color: #9aa4ad; text-decoration: line-through; }
@media (max-width: 560px) { .dp-kasten > .dp-gebraucht:nth-child(n+5), .dp-kasten > .dp-mein:nth-child(n+4) { display: none; } }

/* =========================================================================
   Einrichtungs-Assistent (seit v784, static/js/einrichtung.js)
   ========================================================================= */
.ein-banner { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, #fff5f5, #fff); border: 1px solid #f3c2c5; border-left: 5px solid var(--brand); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.ein-banner-icon { font-size: 1.8rem; }
.ein-banner-text { flex: 1; min-width: 0; }
.ein-banner-text .hint { margin-top: 3px; }
.ein-x { background: transparent; color: var(--muted); padding: 4px 8px; }
.ein-balken { height: 6px; background: #eceff2; border-radius: 99px; overflow: hidden; margin-top: 6px; max-width: 360px; }
.ein-balken span { display: block; height: 100%; background: var(--green); transition: width 0.3s; }
.ein-balken.gross { max-width: none; margin: 4px 0 12px; }
.ein-link { text-align: center; margin: 14px 0 0; }
.ein-dialog { width: min(900px, 100%); }
.ein-kopf { display: flex; align-items: center; gap: 10px; }
.ein-kopf .mcc-dialog-titel { flex: 1; margin: 0; }
.ein-stand { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.ein-rumpf { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; min-height: 380px; }
.ein-nav { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border); padding-right: 10px; }
.ein-nav-punkt { display: flex; gap: 8px; align-items: center; text-align: left; background: transparent; color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; }
.ein-nav-punkt:hover { background: #f3f5f7; }
.ein-nav-punkt.aktiv { background: #fdeceb; color: var(--brand-dark); font-weight: 700; }
.ein-haken { width: 20px; height: 20px; border-radius: 50%; display: grid; place-content: center; font-size: 0.75rem; background: #eceff2; color: var(--muted); flex: 0 0 20px; }
.ein-nav-punkt.fertig .ein-haken { background: var(--green); color: white; }
.ein-inhalt h4 { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ein-inhalt > p { line-height: 1.45; }
.ein-inhalt .mcc-dialog-felder { margin-bottom: 12px; }
.ein-inhalt > button { margin: 4px 6px 4px 0; }
.ein-ok { color: var(--green); font-weight: 600; }
.ein-test { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ein-gruppen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.ein-apps { display: flex; flex-direction: column; gap: 6px; max-height: 330px; overflow-y: auto; margin-bottom: 10px; }
.ein-app { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #f6f8fa; border-radius: 8px; padding: 6px 10px; }
.ein-app-name { flex: 1 1 180px; font-weight: 600; }
.ein-app select { width: auto; flex: 0 1 220px; padding: 6px 8px; }
@media (max-width: 700px) {
  .ein-rumpf { grid-template-columns: 1fr; }
  .ein-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 8px; }
  .ein-nav-punkt { flex: 0 0 auto; }
  .ein-banner { flex-wrap: wrap; }
}

/* Seit v785: „Zuletzt geöffnet“ auf der Startseite (static/js/bequem.js). */
.bq-zuletzt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bq-zuletzt-titel { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.bq-chip { display: inline-flex; align-items: center; gap: 6px; background: white; color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 0.88rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.bq-chip:hover { border-color: var(--brand); }
.bq-chip .icon { display: inline-flex; font-size: 1.05rem; margin: 0; width: auto; height: auto; }
.bq-chip img { width: 20px; height: 20px; object-fit: contain; }

/* Seit v786 (Optimierungsrunde „alles möglichst einfach“):
   – Auf Touch-Geräten sind die kleinen Knöpfe (btn-mini, über 500 Stellen,
     u.a. „schwimmt“, Kursziele, + Kurs) groß genug für den Finger.
   – Breite Tabellen scrollen auf dem Handy seitlich in ihrer Karte, statt
     die ganze Seite zu verbreitern. */
@media (pointer: coarse) {
  .btn-mini { min-height: 38px; padding: 8px 12px; font-size: 0.85rem; }
}
@media (max-width: 700px) {
  section.card table:not(.kein-scroll) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Seit v787 – fehlendes Pflichtfeld in öffentlichen Formularen: rot
   umrandet, bis etwas eingegeben wird (siehe seminarFeldFehltZeigen()). */
.feld-fehlt { outline: 2px solid var(--red, #c0392b) !important; outline-offset: 2px; border-radius: 6px; }
input.feld-fehlt, textarea.feld-fehlt, select.feld-fehlt { background: #fff6f5; }

/* Seit v788 – Klick neben ein Formular mit Eingaben: kurzes Wackeln statt
   Schließen (siehe _mccDialogOeffnen() in dialog.js). */
@keyframes mcc-wackeln { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.mcc-dialog-wackeln { animation: mcc-wackeln 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .mcc-dialog-wackeln { animation: none; outline: 2px solid var(--red, #c0392b); } }

/* Seit v788 – leere Listen mit Knopf zum ersten Eintrag (mccLeerHtml()). */
.bq-leer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; }
.bq-leer .hint { margin: 0; }

/* Seit v788 – Suchfeld vor langen Personen-Auswahlen (mccSelectSuche()). */
.mcc-select-suche { display: block; width: 100%; max-width: 320px; margin: 0 0 4px; padding: 6px 10px; font-size: 0.92em; }

/* Seit v788 – Datumsliste zum Anklicken (mccDatumsListe() in dialog.js). */
.mcc-datumsliste-eingabe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mcc-datumsliste-eingabe input[type=date] { width: auto; min-width: 150px; }
.mcc-datumsliste-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mcc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--card-hover, #eef1f5); border: 1px solid var(--border); font-size: 0.9em; }
.mcc-chip button { background: none; border: none; color: var(--muted); padding: 0 6px; min-height: 0; font-size: 1.1em; cursor: pointer; }
.mcc-link-knopf { background: none; border: none; color: var(--accent, #1565c0); text-decoration: underline; padding: 2px 4px; font-size: 0.88em; cursor: pointer; }

/* Seit v789 – Suchfeld über Listen (data-listenfilter, siehe dialog.js). */
.mcc-listenfilter { display: block; width: 100%; max-width: 360px; margin: 0 0 8px; padding: 7px 10px; }

/* Seit v790 – gerade gespeicherte Zeile leuchtet kurz auf (mccZeileHervorheben()). */
@keyframes mcc-neu-leuchten { 0%, 40% { background-color: #fff3b0; } 100% { background-color: transparent; } }
.mcc-neu, .mcc-neu > td { animation: mcc-neu-leuchten 2.8s ease-out; }

/* Seit v790 – „Für dich“ auf der Startseite (bqFuerDichZeichnen()). */
.bq-fuer-dich { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.bq-fuer-dich .bq-fd-dienst { border-color: var(--accent, #1565c0); }
.bq-fuer-dich .bq-fd-offen { background: #fff6e0; border-color: #e6b54a; }
.bq-fd-mehr { margin: 0; }

/* Seit v791 – Passwort anzeigen (mccPasswortAuge() in dialog.js). */
.mcc-pw-wrap { position: relative; display: block; }
.row > .mcc-pw-wrap { flex: 1; }
.mcc-pw-wrap > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.mcc-pw-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px 8px; min-height: 0; font-size: 1.05em; cursor: pointer; opacity: 0.7; box-shadow: none; }
.mcc-pw-auge:hover { opacity: 1; background: none; }

/* Seit v791 – Hinweis auf neue Version statt Neuladen mitten im Tippen. */
.mcc-update-hinweis { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3000; display: flex; gap: 12px; align-items: center; background: #1f2933; color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); max-width: calc(100vw - 32px); flex-wrap: wrap; }
.mcc-update-hinweis button { background: #fff; color: #1f2933; border: none; }

/* Seit v792 – Handy: Einrichtungs-Hinweis bricht sauber um (Text in voller
   Breite, Knopf darunter) statt den Text auf eine Wortbreite zu quetschen. */
@media (max-width: 600px) {
  .ein-banner .ein-banner-text { flex: 1 1 calc(100% - 90px); }
  .ein-banner > button:not(.ein-x) { flex: 1 1 auto; order: 5; }
  .ein-banner .ein-x { order: 3; }
}

/* Seit v792 – Handy: Startseite zweispaltig. Die Kacheln bleiben groß
   (Symbol über dem Namen, wie gewünscht „nur die Startseite groß“), es
   passen aber doppelt so viele auf den Bildschirm – halb so viel Scrollen. */
@media (max-width: 560px) {
  #hub-grid.hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #hub-grid .hub-tile { padding: 14px 12px; }
  #hub-grid .hub-tile h3 { font-size: clamp(0.82rem, 3.9vw, 0.98rem); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  #hub-grid .hub-tile p { font-size: 0.8rem; }
}

/* Seit v792 – Handy: die (seit v313 oben klebende) rote Kopfzeile nahm mit
   Suche, Knöpfen und „angemeldet als …“ fast ein Viertel des Bildschirms
   ein. Kompakter: „angemeldet als“ entfällt (der Name bleibt), die Knöpfe
   sind flacher und stehen in einer Zeile mit der Suche. */
@media (max-width: 600px) {
  .header-angemeldet-label { display: none; }
  header.app-header .header-meta-row { column-gap: 6px; row-gap: 6px; }
  header.app-header .header-pill { min-height: 32px; padding: 4px 9px; font-size: 0.8rem; }
  header.app-header .header-suche-input { width: 150px; max-width: 46vw; }
  header.app-header .brand h1, header.app-header .brand .titel { font-size: 1.05rem; }
}
@media (max-width: 600px) {
  /* Reihenfolge am Handy: Suche · 🔔 · 📝 · Profil | Name · Version · abmelden */
  #header-user-info > #header-suche-box { order: 1; }
  #header-user-info > #header-nachrichten-badge-btn { order: 2; }
  #header-user-info > #header-notizzettel-quicklink-btn { order: 3; }
  #header-user-info > #header-mein-profil-link { order: 4; }
  #header-user-info > .header-angemeldet-label,
  #header-user-info > #header-username { order: 5; }
  #header-user-info > #header-version { order: 6; }
  #header-user-info > #pwa-install-btn { order: 7; }
  #header-user-info > button[onclick="logout()"] { order: 8; }
  header.app-header .header-suche-input { width: 132px; }
}
@media (max-width: 600px) {
  .header-lang { display: none; }
  header.app-header a.header-pill { line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 350px) {
  header.app-header .header-suche-input { width: 104px; }
  header.app-header .header-pill { padding: 4px 7px; }
}

/* Seit v793 – Datenprüfung für Super-Admins (bqDatenpruefungLaden()). */
.bq-datenpruefung { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff6e0; border: 1px solid #e6b54a; border-left: 5px solid #d99a00; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.bq-dp-liste { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin: 8px 0; }
.bq-dp-zeile { display: flex; gap: 10px; align-items: flex-start; background: #f6f8fa; border-radius: 8px; padding: 8px 10px; font-weight: normal; }
.bq-dp-zeile input { width: auto; margin-top: 3px; }

/* =========================================================================
   Seit v794 – Seitenbreite am PC dynamisch nach Bildschirmauflösung
   (Torsten: „wir haben noch diverse Apps die mit fester Seitenbreite auf
   dem PC hinterlegt sind, das auf dynamisch abhängig der Auflösung
   ändern“). Nur im MCC selbst (main.mcc-haupt) – die öffentlichen Seiten
   (Anmeldungen, Elternbereich, Event) bleiben bewusst schmal.
   - Alle Apps: statt fester 780px wächst die Breite mit dem Bildschirm
     (72 % der Fensterbreite, mindestens 780px, höchstens 1400px).
     1366px-Laptop ≈ 980px, Full HD ≈ 1380px.
   - Die bisher breiten Apps (Seminar-Verwaltung 1400px, Webmail/Foto-
     verkauf 1200px, Dateien 1640px, ToDo-Board 1240px) nutzen jetzt
     96 % der Fensterbreite; die Kasse blieb schon randlos.
   - Das Anmeldefenster bleibt kompakt in der Mitte.
   ========================================================================= */
@media (min-width: 1100px) {
  main.mcc-haupt { max-width: clamp(780px, 72vw, 1400px); }
  main.mcc-haupt.main-seminar-breit,
  main.mcc-haupt.main-webmail-breit,
  main.mcc-haupt.main-dateien-breit,
  main.mcc-haupt.main-todo-breit { max-width: 96vw; }
  main.mcc-haupt.main-kasse-breit { max-width: none; }
  main.mcc-haupt #login-view { max-width: 620px; margin-left: auto; margin-right: auto; }
  .modal-box.modal-box-seminar-breit { max-width: min(94vw, 2000px); }
}

/* Seit v796 – Sammelversand der Zugangsdaten (zugangsdatenSammelversandOeffnen()). */
.bq-sv-dialog { width: min(760px, 100%); }
.bq-sv-zahlen { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 10px; }
.bq-sv-wahl { border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px 8px; margin: 0 0 10px; }
.bq-sv-wahl legend { font-weight: 700; padding: 0 4px; }
.bq-sv-wahl label { display: flex; gap: 8px; align-items: center; font-weight: normal; margin: 4px 0; }
.bq-sv-wahl input { width: auto; }
.bq-sv-liste { max-height: 40vh; overflow: auto; border-top: 1px solid var(--border); }
.bq-sv-liste table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bq-sv-liste td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.bq-sv-ohne_email td, .bq-sv-ohne_person td { color: var(--muted); }

/* Seit v797 – Verknüpfungspakete (bequem.js paketeZeichnen()/paketFormular(),
   Startseite verknuepfungsOrdnerOeffnen() in mcc.js). */
.vp-paket { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--card, #fff); }
.vp-paket.vp-aus { opacity: 0.6; }
.vp-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.vp-pfeile, .vp-knoepfe { display: inline-flex; gap: 4px; white-space: nowrap; }
.vp-knoepfe { margin-left: auto; }
.vp-icon { font-size: 1.6rem; line-height: 1; }
.vp-titel { flex: 1 1 200px; min-width: 0; }
.vp-fuer { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.9rem; }
.vp-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg, #f3f5f7); border: 1px solid var(--border); border-radius: 14px; padding: 2px 8px; font-size: 0.88rem; }
.vp-chip-weg { background: none; color: var(--muted); border: none; padding: 0 2px; min-height: 0; cursor: pointer; font-size: 0.85rem; }
.vp-warnung { color: #b45309; font-size: 0.88rem; }
.vp-inhalt { margin-top: 6px; overflow-wrap: anywhere; }
.vp-dialog { width: min(720px, 100%); }
.vp-dialog label { display: block; margin-top: 8px; }
.vp-dialog input:not([type="checkbox"]):not([type="radio"]), .vp-dialog select { width: 100%; }
.vp-form-zeile { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.vp-form-icon { flex: 0 0 76px; }
.vp-form-icon input { text-align: center; font-size: 1.2rem; }
.vp-form-name { flex: 1 1 200px; min-width: 0; }
.vp-form-zeile > input, .vp-form-zeile > select { flex: 1 1 200px; width: auto !important; }
.vp-anzeige { border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px 8px; margin: 12px 0 0; }
.vp-anzeige legend { font-weight: 700; padding: 0 4px; }
.vp-anzeige label { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; margin: 6px 0; cursor: pointer; }
.vp-anzeige input { width: auto; margin-top: 3px; }
.vp-abschnitt { margin: 16px 0 6px; font-size: 0.98rem; }
.vp-eintrag { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vp-eintrag-name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.vp-eintrag select.vp-zugriff { width: auto !important; flex: 0 0 auto; }
.vp-zugriff-platz { flex: 0 0 auto; }
.vp-eintrag-knoepfe { display: inline-flex; gap: 4px; }
.vp-hinzu { margin-top: 8px; }
.vp-treffer { display: block; width: 100%; text-align: left; margin: 2px 0; background: var(--bg, #f3f5f7); color: var(--text); border: 1px solid var(--border); padding: 6px 10px; }
.vp-treffer:hover { border-color: var(--brand); }
.vp-link-neu, .vp-ordner-neu { margin-top: 10px; }
/* Seit v804: Ordner im Verknüpfungspaket */
.vp-ordner { border: 1px solid var(--border); border-radius: 8px; padding: 2px 10px 4px; margin: 8px 0; background: var(--bg, #f7f9fb); }
.vp-ordner-kopf { border-bottom: 1px dashed var(--border); }
.vp-ordner-felder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp-ordner-felder .vp-ordner-icon-feld { width: 3.2em !important; flex: 0 0 auto; text-align: center; }
.vp-ordner-felder .vp-ordner-name-feld { flex: 1 1 160px; width: auto !important; min-width: 0; font-weight: 600; }
.vp-im-ordner { padding-left: 18px; }
.vp-ordner .vp-eintrag:last-child { border-bottom: none; }
.vp-eintrag select.vp-ort { width: auto !important; flex: 0 0 auto; max-width: 11em; }
.vp-ziel-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.vp-ziel-zeile select { width: auto !important; flex: 1 1 200px; }
.vp-treffer.vp-alle { font-weight: 600; border-color: var(--brand); }
.vp-link-neu summary, .vp-ordner-neu summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.verknuepfungs-ordner-dialog { width: min(760px, 100%); }
.verknuepfungs-ordner-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 8px; }
.verknuepfungs-ordner-grid .hub-tile { padding: 12px; }
.verknuepfungs-ordner-grid .hub-tile h3 { font-size: 0.92rem; margin: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.verknuepfungs-ordner-kachel .verknuepfungs-ordner-zahl { position: absolute; top: 8px; right: 10px; background: var(--brand, #e30613); color: #fff; border-radius: 10px; font-size: 0.72rem; padding: 1px 7px; font-weight: 700; }
.verknuepfungs-link-kachel h3 { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .verknuepfungs-ordner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-knoepfe { margin-left: 0; }
}

/* Seit v798 – Umstell-Assistent „Rolle → Gruppen“ (bequem.js ruZeichnen()/ruAssistent()). */
.ru-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.ru-kopf .hint { flex: 1 1 260px; margin: 0; }
.ru-warnung { border: 1px solid #f0c36d; background: #fff8e6; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; }
.ru-auff-zeile, .ru-verlauf-zeile { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.ru-verlauf { margin: 0 0 10px; }
.ru-verlauf summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ru-rueck { opacity: 0.6; }
.ru-dialog { width: min(680px, 100%); }
.ru-dialog label { display: block; margin-top: 10px; font-weight: 600; }
.ru-dialog select { width: 100%; }
.ru-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.ru-vorschau:empty { display: none; }
.ru-vorschau { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.ru-vorschau h4 { margin: 0 0 6px; }
.ru-liste { margin: 4px 0 8px; padding-left: 20px; max-height: 26vh; overflow: auto; }
.ru-verlierer summary { cursor: pointer; }

/* Seit v800 – mehrere Gruppen je Dienstplan (wachplanPlanGruppenAuswahlHtml()). */
.wp-gruppen-auswahl input[type="search"] { width: 100%; margin-bottom: 6px; }
.wp-gruppen-liste { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.wp-gruppen-liste label { display: flex; align-items: center; gap: 6px; font-weight: normal; padding: 4px 0; cursor: pointer; }
.wp-gruppen-liste input { width: auto; }


/* Seit v806: Seminar-Info-Seite in der Eltern-App (siehe #seminar-info-seite
   in eltern.html). */
.seminar-info-seite { position: fixed; inset: 0; z-index: 900; background: var(--bg, #f4f6f8); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.seminar-info-inhalt { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
.seminar-info-inhalt .card { margin-top: 12px; }
.seminar-info-inhalt h1 { font-size: 1.45rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.seminar-info-beschreibung img { max-width: 100%; height: auto; }
.seminar-info-steckbrief { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; margin: 0; }
.seminar-info-steckbrief dt { color: var(--muted, #667); font-weight: 600; }
.seminar-info-steckbrief dd { margin: 0; overflow-wrap: anywhere; }
.seminar-info-platz { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.88em; font-weight: 600; }
.seminar-info-platz.frei { background: #e3f6e8; color: #1e7d3a; }
.seminar-info-platz.warteliste { background: #fdf1d6; color: #8a6116; }
.seminar-info-platz.voll, .seminar-info-platz.geschlossen { background: #fbe6e4; color: #a4322a; }
.seminar-info-dokumente { display: flex; flex-wrap: wrap; gap: 8px; }
.seminar-info-aktion { position: sticky; bottom: 0; background: var(--bg, #f4f6f8); padding: 12px 0 4px; margin-top: 12px; }
.seminar-info-aktion button.gross { width: 100%; padding: 12px; font-size: 1.05rem; }
.seminar-kachel-klickbar { cursor: pointer; }
.seminar-kachel-klickbar:hover { border-color: var(--brand, #e30613); }
@media (max-width: 480px) {
  .seminar-info-steckbrief { grid-template-columns: 1fr; gap: 0 0; }
  .seminar-info-steckbrief dd { margin-bottom: 8px; }
}

/* Seit v807: Gruppen-Freigabe bei Kalendern/Adressbüchern/Postfächern. */
.ls-gruppen-liste { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; margin-top: 6px; }
.ls-gruppen-liste thead th { position: sticky; top: 0; background: var(--card, #fff); z-index: 1; }

/* Seit v808: nachgetragene Dienste (siehe static/js/nachtraege.js). */
.nachtrag-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.nachtrag-zeile:last-child { border-bottom: none; }
.nachtrag-haupt { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.nachtrag-text { color: var(--text); margin-top: 2px; white-space: pre-line; }
.nachtrag-grund { color: var(--red, #c0392b); font-size: 0.9em; margin-top: 2px; }
.nachtrag-status { font-size: 0.85em; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.nachtrag-status.offen { background: #fdf1d6; color: #8a6116; }
.nachtrag-status.bestaetigt { background: #e3f6e8; color: #1e7d3a; }
.nachtrag-status.abgelehnt { background: #fbe6e4; color: #a4322a; }
.nachtrag-knoepfe { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.nachtrag-stunden { flex: 0 0 auto; min-width: 80px; }
.nachtrag-stunden input { width: 90px !important; }
.nachtrag-zeitart { border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px 8px; margin: 8px 0 4px; }
.nachtrag-zeitart label { display: inline-flex; gap: 6px; align-items: center; margin-right: 16px; font-weight: normal; cursor: pointer; }
.nachtrag-zeitart input { width: auto; }
.nachtrag-taetigkeiten summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.nachtrag-taetigkeit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.nachtrag-taetigkeit.aus { opacity: 0.6; }
.nachtrag-taetigkeit .nt-t-icon, .nachtrag-taetigkeit #nt-t-neu-icon { width: 3.2em !important; text-align: center; flex: 0 0 auto; }
.nachtrag-taetigkeit .nt-t-name, .nachtrag-taetigkeit #nt-t-neu-name { flex: 1 1 180px; width: auto !important; min-width: 0; }


/* Seit v809: „Dienst nachtragen“ und „Geleistete Stunden“ als Kästen direkt
   unter „Meine nächsten Dienste“. */
.dp-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dp-eigenes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.dp-spalte .dp-eigenes { margin-bottom: 0; }
.dp-eigenes .dp-kasten { min-width: 0; }
.dp-eigenes-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-stunden-knopf { width: 100%; background: none; border: none; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.dp-stunden-knopf:hover .dp-kasten-titel { color: var(--brand); }
#wachplan-meine-stunden-bereich { overflow-x: auto; }
.dp-eigenes .nachtrag-zeile { padding: 6px 0; }
.dp-eigenes .nachtrag-haupt { flex-basis: 200px; }

/* Seit v811: ohne gesuchte Positionen entfällt der Gebraucht-Kasten. */
.dp-kopf.ohne-gebraucht { grid-template-columns: minmax(0, 1fr); }

/* Seit v812: Diensttitel als Knopf (öffnet „Angemeldete Personen“). */
.dp-titel-knopf { display: inline-flex; align-items: center; gap: 6px; font-size: 1.1em; font-weight: 700; color: var(--text); background: var(--card, #fff); border: 1.5px solid var(--border); border-radius: 8px; padding: 4px 10px; cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.dp-titel-knopf:hover, .dp-titel-knopf:focus-visible { border-color: var(--brand); color: var(--brand); }
.dp-titel-knopf-icon { font-size: 0.85em; }

/* v816: Rechte-Steckbriefe */
.sb-leiste { margin: 0 0 10px; }
.sb-alle { margin: 6px 0 10px; }
.sb-dialog { max-width: 820px; width: calc(100vw - 32px); }
.sb-liste { max-height: 55vh; overflow: auto; border: 1px solid var(--border, #ddd); border-radius: 6px; }
.sb-liste table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.sb-liste th, .sb-liste td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border, #eee); vertical-align: top; }
.sb-liste th { position: sticky; top: 0; background: var(--card, #fff); }
.sb-stufe { white-space: nowrap; }
.sb-stufe-lesend .sb-stufe { color: #b26a00; }
.sb-stufe-gesperrt td { color: #999; text-decoration: line-through; }
.sb-stufe-gesperrt td:last-child { text-decoration: none; }
.sb-weg { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 7px; border-radius: 10px; font-size: 0.85em; background: #eef1f5; white-space: nowrap; }
.sb-weg-rolle { background: #e6f0ff; }
.sb-weg-gruppe { background: #e7f6ea; }
.sb-weg-verknuepfung { background: #fff3dc; }
.sb-weg-paket { background: #f3e8ff; }
.sb-weg-ausnahme { background: #ffe5e5; }
.sb-test { font-size: 0.7em; background: #fff3dc; padding: 1px 8px; border-radius: 10px; vertical-align: middle; }
.sb-mitglieder { margin: 10px 0 0; }
@media (max-width: 600px) { .sb-weg { white-space: normal; } }

/* v818: Vereins-Adressbuch – Zustimmung */
.abf-liste { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.abf-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border, #ddd); border-radius: 6px; cursor: pointer; }
.abf-zeile input { margin: 0; flex: 0 0 auto; width: auto; }
.abf-feld { font-weight: 600; min-width: 90px; }
.abf-wert { color: var(--muted, #666); overflow-wrap: anywhere; }
.abf-leer { opacity: 0.55; cursor: default; }
.abf-pflicht { cursor: default; background: var(--bg-soft, #f7f7f7); }
.abf-dialog { max-width: 560px; }
.abf-knoepfe { flex-wrap: wrap; }

/* v820: Umfrage – eigenes Seminar als letzter Schritt */
.umfrage-seminar-karte { border: 1px solid var(--border, #ddd); border-left: 4px solid #8e44ad; border-radius: 8px; padding: 10px 12px; background: var(--card, #fff); width: 100%; box-sizing: border-box; }
.umfrage-seminar-titel { font-weight: 700; font-size: 1.05em; }
.umfrage-seminar-knopf { margin-top: 10px; font-size: 1.02em; padding: 10px 20px; }


/* Seit v832: Workshop-/Kursstufen-Auswahl als klar getrennte Karten
   (öffentliche Anmeldeseite + Eltern-App). */
.option-gruppe { margin: 14px 0; }
.option-gruppe > strong { display: inline-block; margin-bottom: 6px; }
.option-karte { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 12px; margin: 8px 0 !important; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); cursor: pointer; font-weight: normal; color: var(--text, inherit); transition: border-color .15s, background .15s; }
.option-karte:hover { border-color: var(--brand, #e30613); }
.option-karte input { width: auto !important; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--brand, #e30613); }
.option-karte:has(input:checked) { border-color: var(--brand, #e30613); background: #fff5f5; box-shadow: 0 0 0 1px var(--brand, #e30613) inset; }
.option-karte.ausgebucht { opacity: .55; cursor: not-allowed; }
.option-karte-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-karte-titel { font-weight: 700; }
.option-karte-info { font-size: .92em; color: var(--muted); }
.option-karte-plaetze { flex: 0 0 auto; font-size: .8em; font-weight: 600; color: #1e7d3a; background: #e3f6e8; border-radius: 999px; padding: 2px 10px; white-space: nowrap; margin-top: 1px; }
.option-karte.ausgebucht .option-karte-plaetze { color: #a4322a; background: #fbe6e4; }
@media (max-width: 560px) {
  .option-karte { grid-template-columns: auto 1fr; }
  .option-karte-plaetze { grid-column: 2; justify-self: start; }
}


/* Seit v835: „Mehr Rechte als die Rolle“ */
.mar-dialog { max-width: 760px !important; width: 100%; }
.mar-filter { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; }
.mar-filter label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; }
.mar-filter input { width: auto; }
.mar-liste { max-height: 60vh; overflow-y: auto; }
.mar-person { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.mar-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mar-bereiche { list-style: none; margin: 8px 0 0; padding: 0; }
.mar-bereiche li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-top: 1px dashed var(--border); font-size: .92em; }
.mar-quellen { display: flex; flex-wrap: wrap; gap: 4px; }
.mar-quelle { background: #eef3fb; color: #2a4d8a; border-radius: 999px; padding: 1px 8px; font-size: .85em; white-space: nowrap; }


/* Seit v837: Verknüpfungspakete auf-/zuklappbar */
.vp-klapp { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
.vp-klapp:hover .vp-titel strong { text-decoration: underline; }
.vp-pfeil { width: 1em; color: var(--muted); }
.vp-klapp .vp-titel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-meta { margin-left: 8px; font-weight: normal; }
.vp-knoepfe, .vp-pfeile { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.vp-notiz { margin-top: 6px; font-size: .88rem; color: var(--muted); }
@media (max-width: 560px) { .vp-meta { display: none; } }

/* Seit v844: Umfrage-Ablaufplan (eingerückter Baum) */
.umfrage-ablauf-ul { list-style: none; margin: 2px 0 2px 6px; padding-left: 14px; border-left: 2px solid var(--border, #ddd); }
.umfrage-ablauf-ul > li { margin: 3px 0; }
/* Seit v844: Status des Umfrage-Seminars in der Zusammenfassung */
.umfrage-seminar-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .9em; font-weight: 600; }
.umfrage-seminar-status.ok { background: rgba(46,158,62,.12); color: #1e7a2c; }
.umfrage-seminar-status.offen { background: rgba(224,168,0,.15); color: #7a5a00; }
/* Seit v846: mehrere Personen an einer Checkliste */
.checkliste-person-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--border, #ddd); border-radius: 999px; background: var(--card-alt-bg, #f4f4f4); font-size: .92em; }
.checkliste-person-chip button { border: 0; background: transparent; color: inherit; padding: 0 6px; cursor: pointer; min-height: 0; font-size: .9em; }
/* Seit v847: Personen-Suche mit Trefferliste (Checklisten) */
.checkliste-person-suche-wrap { position: relative; max-width: 420px; }
.checkliste-person-suche-wrap input { width: 100%; box-sizing: border-box; }
.checkliste-person-treffer { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: 2px; background: var(--card, #fff); border: 1px solid var(--border, #ccc); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); max-height: 260px; overflow-y: auto; }
.checkliste-person-treffer-eintrag { padding: 7px 10px; cursor: pointer; }
.checkliste-person-treffer-eintrag:hover, .checkliste-person-treffer-eintrag.aktiv { background: rgba(0,94,168,.1); }
/* Seit v848: Suchfeld mit Trefferliste statt Auswahlliste (select[data-suche]) */
select.mcc-select-versteckt { display: none !important; }
.mcc-select-suche-wrap { position: relative; flex: 1; min-width: 200px; max-width: 420px; }
.mcc-select-suche-wrap .mcc-select-suche { max-width: none; width: 100%; box-sizing: border-box; margin: 0; }
.mcc-select-treffer { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 2px; background: var(--card, #fff); border: 1px solid var(--border, #ccc); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); max-height: 260px; overflow-y: auto; text-align: left; }
.mcc-select-treffer-eintrag { padding: 7px 10px; cursor: pointer; }
.mcc-select-treffer-eintrag:hover, .mcc-select-treffer-eintrag.aktiv { background: rgba(0,94,168,.1); }
.mcc-select-treffer-eintrag.gewaehlt { font-weight: 600; }
.mcc-select-treffer-leer { padding: 7px 10px; color: var(--muted, #777); }
/* Seit v848: Rubrik-Zuordnung (Gruppen) */
.cl-rubrik-gruppen { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.cl-rubrik-gruppe { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; padding: 4px 10px; border: 1px solid var(--border, #ddd); border-radius: 6px; cursor: pointer; }
.cl-rubrik-gruppe:has(input:checked) { border-color: var(--brand, #e30613); background: rgba(227,6,19,.06); }
/* Seit v849: privater Bereich (privat.js) */
.hub-tile.privat-kachel { border-style: dashed; }
.privat-box { max-width: 720px; }
.privat-neu-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.privat-neu-zeile input { flex: 1; min-width: 200px; }
.privat-listen { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.privat-listen-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--border, #ddd); border-radius: 8px; background: var(--card, #fff); color: inherit; cursor: pointer; font: inherit; }
.privat-listen-eintrag:hover { border-color: var(--brand, #e30613); }
.privat-listen-icon { font-size: 1.3em; }
.privat-listen-text { flex: 1; display: flex; flex-direction: column; }
.privat-badge { background: var(--brand, #e30613); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .85em; font-weight: 700; }
.privat-kopf { display: flex; align-items: center; gap: 8px; margin-right: 30px; }
.privat-titel-feld { flex: 1; font-size: 1.15em; font-weight: 700; border: 1px solid transparent; background: transparent; padding: 4px 6px; }
.privat-titel-feld:hover, .privat-titel-feld:focus { border-color: var(--border, #ccc); background: var(--card, #fff); }
.privat-punkte { list-style: none; margin: 8px 0; padding: 0; }
.privat-punkt { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--border, #eee); flex-wrap: wrap; }
.privat-haken { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; font-weight: normal; cursor: pointer; margin: 0; }
.privat-haken input { width: 20px; height: 20px; flex: 0 0 auto; }
.privat-punkt.erledigt .privat-punkt-text { text-decoration: line-through; opacity: .6; }
.privat-datum { width: auto; font-size: .85em; padding: 2px 4px; }
.privat-faellig { font-size: .85em; color: var(--muted, #666); }
.privat-faellig.ueberfaellig { color: var(--red, #c62828); font-weight: 600; }
.privat-punkt-weg { border: 0; background: transparent; color: var(--muted, #888); cursor: pointer; padding: 2px 6px; min-height: 0; }
.privat-notiz { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; min-height: 260px; }
/* Seit v851: Workshops automatisch nach Abzeichen */
.seminar-auto-badge { background: #e8f1fb !important; color: #1d4f8a; font-weight: 600; }
.seminar-auto-kasten { border: 1px solid var(--border, #ddd); border-left: 4px solid #1d4f8a; border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px; }
.option-karte-auto { display: inline-block; margin-left: 6px; font-size: .78em; font-weight: 600; color: #1e7a2c; background: rgba(46,158,62,.12); padding: 1px 6px; border-radius: 4px; }
/* Seit v852: Dashboard-Verknüpfung mit mehreren Zielen */
.dv-ziele { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.dv-ziel-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border: 1px solid var(--border, #ddd); border-radius: 999px; background: var(--card-alt-bg, #f4f4f4); font-size: .9em; }
.dv-ziel-chip button { border: 0; background: transparent; color: inherit; padding: 0 6px; cursor: pointer; min-height: 0; }
/* Seit v858: Dienstplan-Zähler (angemeldet / kann nicht) */
.dp-zaehler { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .82em; font-weight: 700; cursor: pointer; line-height: 1.5; white-space: nowrap; }
.dp-zaehler.gruen { background: rgba(46,158,62,.14); color: #1e7a2c; }
.dp-zaehler.rot { background: rgba(198,40,40,.12); color: #b3261e; }
.dp-zaehler:hover { filter: brightness(.95); }
/* Seit v861: aufgeräumte Dienst-Karte (persönliche Dienstübersicht) */
.dp-karte { margin-bottom: 10px; padding: 12px 14px; }
.dp-karte .dp-karte-titel { display: flex; width: 100%; justify-content: space-between; align-items: center; text-align: left; box-sizing: border-box; }
.dp-karte-fuss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 10px; }
.dp-fuss-links { display: flex; justify-content: flex-start; align-items: center; gap: 6px; }
.dp-fuss-mitte { display: flex; justify-content: center; align-items: center; gap: 6px; white-space: nowrap; }
.dp-fuss-rechts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; }
.dp-fuss-knopf { white-space: nowrap; }

/* v862: Wer darf Dienste nachtragen? */
.nt-freigabe-modi { display: flex; flex-direction: column; gap: 4px; }
.nt-freigabe-modus { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: normal; cursor: pointer; }

/* v863: „MCC“ allein oben, „(Mönsheim Control Center)“ kleiner darunter */
h1.mcc-titel { font-size: 1.45rem !important; line-height: 1.1; letter-spacing: .02em; }
h1.mcc-titel .mcc-titel-lang { display: block; font-size: .78rem; font-weight: 500; letter-spacing: 0; opacity: .92; margin-top: 1px; }

/* v863/v864: Dienst-Karten. Handy wie bisher; am PC (≥ 900 px) „Kalenderblatt“:
   eine Spalte, Datum-Kachel links, Text Mitte, Zähler + Knöpfe rechts bündig. */
.dp-termin-raster { display: flex; flex-direction: column; gap: 10px; }
.dp-termin-zelle { min-width: 0; }
.dp-termin-raster .dp-karte { margin-bottom: 0; }
.dp-datum-kachel, .dp-nur-pc, .dp-monat-trenner { display: none; }
@media (min-width: 900px) {
  .dp-termin-raster { gap: 6px; }
  .dp-nur-handy { display: none; }
  .dp-nur-pc { display: inline; }
  div.dp-nur-pc { display: block; }
  .dp-monat-trenner { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280); }
  .dp-monat-trenner:first-child { margin-top: 4px; }
  .dp-monat-trenner::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
  .dp-termin-raster .dp-karte {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
    grid-template-areas: "datum haupt fuss" "unten unten unten";
    align-items: center; column-gap: 16px; padding: 10px 14px;
    border: 1px solid #eceef1 !important; border-radius: 10px; box-shadow: none; background: #fff;
  }
  .dp-termin-raster .dp-karte:hover { border-color: #d5dae1 !important; background: #fcfcfd; }
  .dp-termin-raster .dp-karte.dp-ich { background: #f1faf3; border-color: #cde9d4 !important; }
  .dp-datum-kachel { grid-area: datum; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; padding: 5px 0; line-height: 1.1; min-height: 56px; }
  .dp-datum-kachel b { font-size: 1.3rem; }
  .dp-datum-kachel small { font-size: .68rem; font-weight: 600; opacity: .9; }
  .dp-karte-haupt { grid-area: haupt; min-width: 0; }
  .dp-termin-raster .dp-karte .dp-karte-titel { display: inline-flex; width: auto; border: 0; background: none; padding: 0; font-size: 1.05rem; font-weight: 700; box-shadow: none; gap: 8px; cursor: pointer; }
  .dp-termin-raster .dp-karte .dp-karte-titel:hover span:first-child { text-decoration: underline; }
  .dp-termin-raster .dp-karte .dp-titel-knopf-icon { font-size: .8em; opacity: .55; }
  .dp-termin-raster .dp-karte .dp-zeile-zeit { margin-top: 2px !important; }
  .dp-dabei, .dp-termin-raster .dp-dabei-text { color: #1e7b34 !important; font-size: .85rem; font-weight: 600; margin-top: 2px !important; }
  .dp-karte-unten { grid-area: unten; margin-top: 8px; }
  .dp-termin-raster .dp-karte-fuss { grid-area: fuss; display: grid; grid-template-columns: auto auto; justify-content: end; gap: 8px; min-width: 230px; margin: 0; padding: 0; }
  .dp-termin-raster .dp-fuss-mitte { order: 0; justify-content: flex-start; }
  .dp-termin-raster .dp-fuss-links { order: 1; justify-content: flex-end; }
  .dp-termin-raster .dp-fuss-rechts { order: 2; }
  .dp-termin-raster .dp-karte-fuss .dp-fuss-knopf { padding: 6px 14px; font-size: .9rem; }
  .dp-termin-raster .dp-absagen-knopf { background: #fff !important; color: #4b5563 !important; border: 1px solid #d1d5db !important; }
  .dp-termin-raster .dp-absagen-knopf:hover { color: var(--red) !important; border-color: var(--red) !important; }
}

/* v865: Zähler rechts im Titel, ganze „Meine nächsten Dienste“-Zeile klickbar */
.dp-karte-titel .dp-titel-text { min-width: 0; overflow-wrap: anywhere; }
.dp-titel-zaehler { display: inline-flex; gap: 4px; flex-shrink: 0; margin-left: auto; font-size: .78rem; }
.dp-titel-zaehler .dp-zaehler { font-size: 1em; }
.dp-karte-fuss { grid-template-columns: auto 1fr auto; }
.dp-karte-fuss .dp-fuss-rechts { grid-column: 3; }
.dp-mein-klick { cursor: pointer; transition: background .15s, border-color .15s; }
.dp-mein-klick:hover, .dp-mein-klick:focus-visible { background: #f7f9fc; outline: none; box-shadow: 0 0 0 2px rgba(0,0,0,.06); }
.dp-mein-klick:active { background: #eef2f7; }
@media (min-width: 900px) {
  .dp-termin-raster .dp-karte-fuss .dp-fuss-rechts { grid-column: auto; }
  .dp-termin-raster .dp-karte .dp-titel-zaehler { font-size: .8rem; margin-left: 10px; }
}

/* v866: PC – Felder zeigen beim Überfahren mit der Maus, dass sie aktiv sind */
@media (min-width: 900px) and (hover: hover) {
  .dp-termin-raster .dp-karte { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
  .dp-termin-raster .dp-karte:hover { border-color: #b9c2cd !important; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .09); transform: translateY(-1px); }
  .dp-termin-raster .dp-karte.dp-ich:hover { background: #ebf7ee; border-color: #8fcf9f !important; }
  .dp-termin-raster .dp-karte:hover .dp-titel-text { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .dp-termin-raster .dp-karte-unten { cursor: default; }
  .dp-mein, .dp-gebraucht { transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
  .dp-mein-klick:hover, .dp-gebraucht:hover { border-color: #b9c2cd; box-shadow: 0 4px 12px rgba(15, 23, 42, .08); transform: translateY(-1px); background: #fff; }
  .dp-mein-klick:hover .dp-mein-titel { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .dp-mein-klick:hover .dp-mini { color: var(--brand); }
  .dp-eigenes .dp-kasten { transition: border-color .15s, box-shadow .15s; }
  .dp-eigenes .dp-kasten:hover { border-color: #b9c2cd; box-shadow: 0 4px 12px rgba(15, 23, 42, .07); }
  .dp-stunden-knopf:hover .dp-kasten-titel { color: var(--brand); }
  .dp-karte-fuss button, .dp-eintragen { transition: filter .15s, box-shadow .15s; }
  .dp-karte-fuss button:hover, .dp-eintragen:hover { filter: brightness(.92); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
}

/* v869: Anhänge/Screenshot bei neuen Nachrichten */
.nachricht-neu-anhang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 8px; }
.nachricht-neu-anhang .chat-anhang-knopf, .nachricht-neu-anhang button { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 5px 10px; font-size: .85rem; font-weight: 500; border: 1px solid var(--brand); color: var(--brand); background: #fff; border-radius: 6px; line-height: 1.3; }
.nachricht-neu-anhang .chat-anhang-knopf:hover, .nachricht-neu-anhang button:hover { background: #fff3f3; }
.nachricht-anhang-vorschau { align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#nachricht-neu-anhang-vorschau { padding: 6px 8px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); }
.nachricht-anhang-mini { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
@media (max-width: 899px) { .nur-pc-hinweis { display: none; } }

/* v872: Datei aus MCC anhängen */
.mcc-datei-auswahl-box { max-width: 560px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; }
#mcc-datei-auswahl-suche { width: 100%; margin: 4px 0 6px; }
.mcc-datei-auswahl-pfad { font-size: .85rem; margin-bottom: 6px; color: var(--muted, #6b7280); overflow-x: auto; white-space: nowrap; }
.mcc-datei-pfad-teil { background: none; border: 0; padding: 2px 4px; color: var(--brand); cursor: pointer; font: inherit; }
.mcc-datei-auswahl-liste { overflow-y: auto; flex: 1 1 auto; min-height: 120px; border: 1px solid var(--border); border-radius: 8px; }
.mcc-datei-zeile { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; color: var(--text); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 9px 12px; cursor: pointer; font: inherit; }
.mcc-datei-zeile:last-child { border-bottom: 0; }
.mcc-datei-zeile:hover:not(.gesperrt) { background: #f5f7fa; }
.mcc-datei-zeile.gesperrt { opacity: .45; cursor: not-allowed; }
.mcc-datei-icon { width: 22px; text-align: center; }
.mcc-datei-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v873: Vorschau „Ansehen als“ */
#mcc-vorschau-banner { position: sticky; top: 0; z-index: 3000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 14px; background: #fff4c2; color: #5b4500; border-bottom: 2px solid #e0b000; font-size: .92rem; text-align: center; }
#mcc-vorschau-banner button { background: #5b4500; color: #fff; border: 0; border-radius: 6px; padding: 5px 12px; font-size: .85rem; cursor: pointer; }
body.mcc-vorschau-aktiv header.app-header { outline: 3px dashed #e0b000; outline-offset: -3px; }

/* v875: Autovervollständigung „Anmeldung hinzufügen“ (Seminare) */
.seminar-manuell-treffer { margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); max-width: 700px; max-height: 260px; overflow-y: auto; }
.seminar-manuell-treffer-eintrag { padding: 7px 10px; cursor: pointer; border-top: 1px solid var(--border); }
.seminar-manuell-treffer-eintrag:hover, .seminar-manuell-treffer-eintrag.aktiv { background: #fff3f3; }

/* v876: Standard-Antworten + WYSIWYG im Seminar-Mailfenster */
.seminar-baustein-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.seminar-baustein-leiste select { flex: 1 1 200px; max-width: 320px; margin: 0; }
.seminar-mail-editor { background: #fff; }
.seminar-mail-editor .ql-container { min-height: 180px; font-size: .95rem; }
.seminar-baustein-liste { border: 1px solid var(--border); border-radius: 8px; }
.seminar-baustein-zeile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.seminar-baustein-zeile:last-child { border-bottom: 0; }
#seminar-bausteine-overlay { z-index: 1010; }

/* v877: Anmeldung mit Person verknüpft */
.seminar-manuell-verknuepft { align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; background: #eef8f0; border: 1px solid #cde9d4; border-radius: 8px; color: #1e6b32; font-size: .9rem; width: fit-content; }
.seminar-person-link { text-decoration: none; font-size: .9em; }

/* v878: „{ } Variablen“ – systemweit für Editoren und Mail-Felder */
.ql-toolbar .mcc-variablen-knopf, .ql-snow.ql-toolbar button.mcc-variablen-knopf:hover, .ql-snow.ql-toolbar button.mcc-variablen-knopf:focus { width: auto !important; height: auto !important; padding: 2px 8px !important; font-size: .8rem; font-weight: 600; color: var(--brand) !important; border: 1px solid var(--brand) !important; border-radius: 5px; line-height: 1.4; white-space: nowrap; background: #fff; }
.ql-toolbar .mcc-variablen-knopf:hover { background: #fff3f3; }
.mcc-variablen-feld-wrap { position: relative; display: block; }
.mcc-variablen-feld-wrap > input, .mcc-variablen-feld-wrap > textarea { padding-right: 44px; width: 100%; box-sizing: border-box; }
.mcc-variablen-knopf.feld { position: absolute; right: 6px; top: 6px; margin: 0; padding: 2px 7px; font-size: .78rem; font-weight: 700; color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 5px; cursor: pointer; line-height: 1.4; }
.mcc-variablen-menue { position: fixed; z-index: 5000; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 320px; overflow-y: auto; }
.mcc-variablen-kopf { padding: 6px 10px; font-size: .78rem; font-weight: 700; color: var(--muted, #6b7280); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
.mcc-variablen-menue button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; background: #fff; color: var(--text); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 7px 10px; cursor: pointer; font: inherit; }
.mcc-variablen-menue button:hover { background: #fff3f3; }
.mcc-variablen-menue button code { color: var(--brand); font-weight: 700; font-size: .88rem; }
.mcc-variablen-menue button span { font-size: .8rem; color: var(--muted, #6b7280); }

/* v880: Vorschläge „Gibt es schon?“ in der Seminar-Anmeldeliste */
.seminar-vorschlag { margin-top: 3px; font-size: .85rem; color: #7a5a00; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.seminar-vorschlag-knopf { background: #fff7db; border: 1px solid #e8cf7a; color: #5b4500; border-radius: 999px; padding: 1px 8px; font-size: .82rem; cursor: pointer; }
.seminar-vorschlag-knopf:hover { background: #ffefb3; }
.seminar-vorschlag-suche { background: none; border: 0; color: var(--brand); font-size: .8rem; cursor: pointer; padding: 0 2px; text-decoration: underline; }
#seminar-person-suche-overlay .seminar-manuell-treffer-eintrag { cursor: pointer; }

/* Seit v883: Optionen je Seminar-Dokument */
.seminar-dokument-zeile { border-bottom:1px solid var(--border, #e2e5ea); padding:6px 0 8px; margin-bottom:6px; }
.seminar-dokument-optionen { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:0.9em; }
.seminar-dokument-optionen label { display:flex; align-items:center; gap:6px; font-weight:normal; margin:0; color:var(--text); }
.seminar-dokument-optionen input { width:auto; margin:0; }

/* Seit v884: Felder im Dokument */
.seminar-dok-felder-tabelle { width:100%; border-collapse:collapse; margin:8px 0; }
.seminar-dok-felder-tabelle td { padding:6px 6px; border-bottom:1px solid var(--border, #e2e5ea); vertical-align:middle; }
.seminar-dok-feld-auto { color:var(--green, #1a7f37); font-size:0.9em; }
.seminar-dok-feld-online { color:var(--brand, #e30613); font-size:0.9em; font-weight:600; margin-right:8px; }
.seminar-dok-feld-pflicht { display:inline-flex; align-items:center; gap:4px; font-weight:normal; margin:0 8px 0 0; }
.seminar-dok-feld-pflicht input { width:auto; margin:0; }
.seminar-dok-felder-tabelle td:first-child { white-space:nowrap; }
.seminar-dok-felder-tabelle .btn-mini { padding:2px 8px; font-size:0.85em; }

/* Seit v886: Zusatzfelder bearbeiten */
.seminar-zusatzfeld-reihenfolge { display:flex; flex-direction:column; gap:2px; }
.seminar-zusatzfeld-reihenfolge .btn-mini { padding:0 6px; line-height:1.3; min-width:0; }
.seminar-zusatzfeld-label-eingabe { width:100%; }

/* Seit v890: Kachel „🏠 Vereinsheim“ (Home Assistant) */
.vh-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin:8px 0 14px; }
.vh-karte { border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--card-bg, #fff); display:flex; flex-direction:column; gap:6px; }
.vh-karte.vh-aus { opacity:.55; }
.vh-kopf { display:flex; align-items:center; gap:8px; font-weight:600; }
.vh-symbol { font-size:1.4em; }
.vh-zustand { font-size:1.15em; font-weight:700; }
.vh-aktionen { display:flex; flex-wrap:wrap; gap:6px; }
.vh-hinweis { margin:0; font-size:.85em; }
.vh-bereich { margin:14px 0 4px; }

/* Seit v891: Reiter für Unterbereiche + Freigabe-Auswahl */
.vh-reiter { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.vh-reiter-knopf { background:var(--card-muted, #f1f2f4); color:var(--text); border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-weight:600; }
.vh-reiter-knopf.aktiv { background:var(--brand, #e30613); color:#fff; border-color:var(--brand, #e30613); }
.ha-freigabe .wp-gruppen-liste { max-height:160px; overflow:auto; margin-bottom:6px; }

/* Seit v893: Geräteliste nach Bereichen zuklappbar, Auswahl nur Treffer */
.ha-geraete-bereich { border:1px solid var(--border); border-radius:10px; padding:6px 10px; margin:8px 0; }
.ha-geraete-bereich > summary { cursor:pointer; font-weight:600; padding:4px 0; }
.ha-geraete-bereich[open] > summary { margin-bottom:6px; }
.ha-auswahl-liste { min-height:0; }
.ha-auswahl-leer { padding:4px 2px; grid-column:1 / -1; }

/* Seit v894: Kamerabilder in der Kachel „Vereinsheim“ */
.vh-karte.vh-kamera { grid-column:span 2; }
@media (max-width:560px) { .vh-karte.vh-kamera { grid-column:auto; } }
.vh-bild-knopf { all:unset; cursor:zoom-in; display:block; }
.vh-bild { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; background:#111; display:block; }
.vh-bild.vh-bild-fehler { opacity:.35; }
.vh-bild-gross-box { max-width:min(1100px, 96vw); width:96vw; }
#vh-bild-gross { width:100%; height:auto; border-radius:8px; background:#111; }

/* Seit v895: Livebild */
.vh-bild-gross-rahmen { position:relative; }
.vh-live-marke { position:absolute; top:10px; left:10px; background:#d0021b; color:#fff; font-weight:700; font-size:.8em; padding:2px 8px; border-radius:6px; letter-spacing:.05em; }

/* v897 – Kopfzeile: Name mit 👤 ist der Profil-Link, Rolle + Version in
   Klammern dahinter. Lupe (#header-suche-knopf) nur am Handy. */
.header-ich { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.header-ich-link { color: white; text-decoration: none; display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.header-ich-link[href]:hover strong { text-decoration: underline; }
.header-ich-link.ohne-profil { cursor: default; }
.header-ich-link.ohne-profil .header-ich-icon { display: none; }
.header-rolle { white-space: nowrap; opacity: .92; }
.header-rolle .header-version-link { opacity: 1; }
#header-suche-knopf, #header-mikro-handy { display: none !important; }

/* v897 – Handy (Torsten: „in der Titelleiste auf dem Handy müssen wir
   dringend aufräumen“): Zeile 1 = Logo + „MCC Bereich“ auf einer Höhe,
   Zeile 2 = 👤 Name (Rolle · Version) · 🔍 · abmelden. Glocke und
   Notizzettel entfallen am Handy, die Suche ist nur noch eine Lupe. */
@media (max-width: 600px) {
  header.mcc-kopf { padding: 8px 12px; gap: 6px; }
  header.mcc-kopf .logo { height: 38px; }
  header.mcc-kopf .brand > a { gap: 10px; }
  header.mcc-kopf .mcc-marke {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px; align-items: baseline; min-width: 0;
  }
  header.mcc-kopf .mcc-marke h1.mcc-titel { display: contents; font-size: 1.3rem !important; }
  header.mcc-kopf .mcc-marke .mcc-titel-lang { grid-column: 1 / -1; grid-row: 2; font-size: .7rem; }
  /* v898 (Torsten: „auf dem Handy muss der Bereich gar nicht in der
     Titelzeile stehen“) – am Handy nur noch „MCC“ + Langname. */
  header.mcc-kopf .mcc-marke #header-ansicht { display: none; }
  header.mcc-kopf .header-actions { gap: 0; }
  header.mcc-kopf #header-user-info { width: 100%; flex-wrap: nowrap; column-gap: 6px; }
  header.mcc-kopf #header-user-info > .header-ich {
    order: 1; flex: 1 1 auto; overflow: hidden; white-space: nowrap; font-size: .85rem;
  }
  header.mcc-kopf .header-ich-link strong { overflow: hidden; text-overflow: ellipsis; }
  header.mcc-kopf #header-nachrichten-badge-btn,
  header.mcc-kopf #header-notizzettel-quicklink-btn { display: none !important; }
  header.mcc-kopf #header-user-info > #header-suche-knopf { order: 2; flex-shrink: 0; }
  header.mcc-kopf #header-user-info > #header-mikro-handy { order: 2; flex-shrink: 0; }
  header.mcc-kopf #header-user-info > #header-mikro-handy:not([style*="display: none"]) { display: inline-flex !important; }
  header.mcc-kopf #header-user-info > #header-mikro-handy.vh-hoert { background: #fff; color: #E30613; animation: vh-puls 1s infinite; }
  header.mcc-kopf #header-suche-box #header-mikro { display: none !important; }
  header.mcc-kopf #header-user-info > #header-suche-knopf:not([style*="display: none"]) { display: inline-flex !important; }
  header.mcc-kopf #header-user-info > #pwa-install-btn { order: 3; flex-shrink: 0; }
  header.mcc-kopf #header-user-info > button[onclick="logout()"] { order: 4; flex-shrink: 0; }
  header.mcc-kopf:not(.suche-offen) #header-suche-box { display: none !important; }
  header.mcc-kopf.suche-offen #header-user-info { flex-wrap: wrap; row-gap: 6px; }
  header.mcc-kopf.suche-offen #header-user-info > #header-suche-box { order: 10; flex: 1 1 100%; }
  header.mcc-kopf.suche-offen .header-suche-input { width: 100%; max-width: none; font-size: 16px; padding: 7px 10px; }
  header.mcc-kopf.suche-offen #header-suche-ergebnisse { width: 100% !important; max-width: none !important; }
}

/* v900 – Vereinsheim: Summen (Lichter an / Schlösser) und Schloss-Stand je Reiter */
.vh-summen { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
.vh-summe { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 14px; font-weight:600; font-size:.95rem; border:1px solid var(--border); background:var(--card); color:var(--text); }
button.vh-summe { cursor:pointer; }
.vh-summe.vh-licht.vh-an { background:#fff4c2; border-color:#e6b800; color:#6b5200; }
.vh-summe.vh-licht.aktiv { outline:2px solid #e6b800; outline-offset:1px; }
.vh-summe.vh-zu, .vh-schloss-stand.vh-zu { background:#e6f6ea; border-color:#5bb974; color:#1e6b34; }
.vh-summe.vh-offen, .vh-schloss-stand.vh-offen { background:#fde8e8; border-color:#e06666; color:#9b1c1c; }
.vh-summe.vh-unklar, .vh-schloss-stand.vh-unklar { background:#fff4e0; border-color:#e0a040; color:#7a4a00; }
.vh-schloss-stand { border:1px solid; border-radius:10px; padding:10px 14px; margin:0 0 12px; font-size:1rem; }
.vh-summen-liste { margin-bottom:14px; }
.vh-summe-pfeil { font-size:.8em; opacity:.7; }
.vh-summe.vh-schloss.aktiv { outline:2px solid currentColor; outline-offset:1px; }
.vh-reiter-marke { display:inline-block; margin-left:4px; padding:0 6px; border-radius:999px; font-size:.78rem; line-height:1.5; }
.vh-reiter-marke.vh-zu { background:#5bb974; color:#fff; }
.vh-reiter-marke.vh-offen { background:#d93025; color:#fff; }
.vh-reiter-marke.vh-unklar { background:#e0a040; color:#fff; }
/* v903 – Master-Knopf „Alle Lichter aus“ */
.vh-master { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.vh-master-knopf { background:#1f2937; color:#fff; border:none; border-radius:10px; padding:10px 18px; font-weight:700; font-size:1rem; }
.vh-master-knopf:disabled { background:#c9ced6; color:#fff; cursor:default; }
/* v904 – Räume innerhalb eines Bereichs, Einschalten grün / Ausschalten rot */
.vh-raum { margin: 0 0 12px; }
.vh-raum-titel { margin: 6px 0 6px; font-size: .95rem; color: var(--muted, #5b6573); text-transform: none; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.vh-aktionen .vh-knopf-an { background:#1e8e3e; border-color:#1e8e3e; color:#fff; }
.vh-aktionen .vh-knopf-an.secondary { background:transparent; color:#1e8e3e; }
.vh-aktionen .vh-knopf-aus { background:#d93025; border-color:#d93025; color:#fff; }
.vh-aktionen .vh-knopf-aus.secondary { background:transparent; color:#d93025; }

/* v907 (Torsten: „das wirkt noch sehr unaufgeräumt, bekommen wir das ganze
   gleichmäßig auf zwei Spalten aufgeteilt?“) – Summen-Knöpfe und Reiter als
   gleich breite Kacheln im Raster: Handy 2 Spalten, breiter entsprechend mehr. */
.vh-summen, .vh-reiter { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.vh-summen { margin:0 0 10px; }
.vh-reiter { margin:0 0 12px; padding-top:10px; border-top:1px solid var(--border); }
.vh-summen .vh-summe, .vh-reiter .vh-reiter-knopf {
  width:100%; min-width:0; min-height:46px; margin:0; display:flex; align-items:center; justify-content:flex-start; gap:6px;
  border-radius:12px; padding:8px 12px; text-align:left; line-height:1.2; font-size:.95rem;
}
.vh-summe .vh-summe-pfeil { margin-left:auto; }
.vh-reiter .vh-reiter-knopf .vh-reiter-marke { margin-left:auto; }
@media (max-width: 600px) {
  .vh-summen, .vh-reiter { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vh-summen .vh-summe, .vh-reiter .vh-reiter-knopf { font-size:.88rem; padding:8px 10px; }
}
.vh-summe-text { min-width:0; }

/* v909 (Torsten: „die Raumnamen bitte größer und in Fett oder evtl.
   hinterlegt“) – Raum-Überschrift als hinterlegtes Band mit Akzentkante. */
.vh-raum-titel {
  margin: 10px 0 8px; padding: 7px 12px; font-size: 1.08rem; font-weight: 700; color: var(--text);
  background: var(--card-muted, #f1f2f4); border: none; border-left: 4px solid var(--brand, #e30613);
  border-radius: 8px;
}

/* v910 – Räume zuklappbar, Marken für Lichter an / Fenster & Schlösser offen */
.vh-raum-knopf { width:100%; display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left; font-family:inherit; }
.vh-raum-knopf .vh-raum-name { flex:0 1 auto; }
.vh-raum-knopf .vh-raum-anzahl { font-size:.8rem; font-weight:600; color:var(--muted, #5b6573); background:rgba(0,0,0,.06); border-radius:999px; padding:1px 8px; }
.vh-raum-knopf .vh-raum-pfeil { margin-left:auto; transition:transform .15s; opacity:.7; }
.vh-raum.offen .vh-raum-pfeil { transform:rotate(180deg); }
.vh-raum-klappbar:not(.offen) > .vh-raster { display:none; }
.vh-raum-marke { font-size:.85rem; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap; }
.vh-raum-marke.vh-licht-an, .vh-reiter-marke.vh-licht-an { background:#fff4c2; color:#6b5200; border:1px solid #e6b800; }
.vh-raum-marke.vh-offen { background:#fde8e8; color:#9b1c1c; border:1px solid #e06666; }
button.vh-raum-knopf, button.vh-raum-knopf:hover, button.vh-raum-knopf:focus { background: var(--card-muted, #f1f2f4); color: var(--text); border: none; border-left: 4px solid var(--brand, #e30613); box-shadow: none; }
button.vh-raum-knopf:hover { filter: brightness(.97); }

/* v911 – Thermostat-Bedienung */
.vh-klima { display:flex; align-items:center; gap:10px; margin:6px 0 8px; }
.vh-klima-knopf { width:44px; height:44px; border-radius:50%; font-size:1.5rem; font-weight:700; line-height:1; padding:0; display:inline-flex; align-items:center; justify-content:center; background:var(--card-muted, #f1f2f4); color:var(--text); border:1px solid var(--border); }
.vh-klima-knopf:hover:not(:disabled) { background:#e6e8eb; }
.vh-klima-soll { min-width:110px; text-align:center; font-size:1.05rem; }
.vh-klima.vh-klima-wartet .vh-klima-soll strong { color:#b35c00; }
.vh-klima-aus { color:var(--muted, #5b6573); font-weight:600; }

/* v912 – Status direkt auf den Bereichs-Kacheln */
.vh-reiter .vh-reiter-knopf.vh-reiter-offen { background:#fde8e8; border-color:#e06666; }
.vh-reiter .vh-reiter-knopf.vh-reiter-an { background:#fff8d6; border-color:#e6b800; }
.vh-reiter .vh-reiter-knopf .vh-reiter-marke { white-space:nowrap; font-size:.8rem; padding:2px 8px; }
.vh-reiter .vh-reiter-knopf .vh-reiter-marke + .vh-reiter-marke { margin-left:4px; }
.vh-reiter .vh-reiter-knopf { flex-wrap:wrap; row-gap:4px; }
.vh-reiter { border-top:none; padding-top:0; }
.vh-reiter-marke.vh-heizung-an, .vh-raum-marke.vh-heizung-an { background:#ffe9d6; color:#8a3b00; border:1px solid #f08a3c; }
.vh-reiter .vh-reiter-knopf.vh-reiter-heizt { background:#fff1e6; border-color:#f08a3c; }
.vh-symbol.vh-symbol-aus { filter: grayscale(1); opacity: .45; }
.vh-raum-marke.vh-temperatur { background:#eef4fb; color:#1d4f86; border:1px solid #9cc0e6; font-weight:700; }

/* v916 – offene/geschlossene Symbole für Schlösser und Fenster */
.vh-ico { width:1.15em; height:1.15em; vertical-align:-0.2em; display:inline-block; }
.vh-raum-marke.vh-zu { background:#e6f6ea; color:#1e6b34; border:1px solid #5bb974; }
.vh-raum-marke.vh-unklar { background:#fff4e0; color:#7a4a00; border:1px solid #e0a040; }
.vh-reiter-marke.vh-zu, .vh-reiter-marke.vh-offen { display:inline-flex; align-items:center; gap:4px; }
.vh-symbol .vh-fenster-zu { color:#1e6b34; }
.vh-symbol .vh-fenster-offen { color:#c5221f; }
.vh-symbol .vh-ico { width:1.3em; height:1.3em; }
.vh-birne-aus { filter: grayscale(1); opacity: .6; }

/* v925: zuklappbare Abschnitte in „📁 Datei-Ordner“ */
.ad-bereich { border-top: 1px solid var(--border, #e3e5e8); margin-top: 6px; }
.ad-bereich-kopf { cursor: pointer; font-weight: 700; font-size: 1.08rem; padding: 10px 2px; list-style-position: inside; }
.ad-bereich-kopf .hint { font-weight: 400; font-size: .85rem; }
.ad-bereich-inhalt { padding: 0 2px 10px; }

/* Seit v937: Standbild eines Videos mit ▶ darüber */
.dateien-symbol.bild.video { position: relative; }
.dateien-symbol.bild.video::after {
  content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 1.9em; height: 1.9em; line-height: 1.9em; text-align: center; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.8em; pointer-events: none;
}
.dateien-kachel-bild .dateien-symbol.bild.video::after { font-size: 1.3em; }

/* Seit v939: „Kind wechseln“ (mcc.js familieKopfzeileZeichnen). */
#mcc-familie-banner { position: sticky; top: 0; z-index: 3000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 8px 14px; background: #e3f2ff; color: #0b3a66; border-bottom: 2px solid #3b8ad9; font-size: .92rem; text-align: center; }
#mcc-familie-banner button { background: #0b3a66; color: #fff; border: 0; border-radius: 6px; padding: 5px 12px; font-size: .85rem; cursor: pointer; }
body.mcc-familie-aktiv header.app-header { outline: 3px solid #3b8ad9; outline-offset: -3px; }
.familie-kinder-menue { position: fixed; z-index: 4000; width: 260px; max-width: calc(100vw - 16px); background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 6px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.familie-kinder-menue .familie-kind { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: .95rem; }
.familie-kinder-menue .familie-kind:hover { background: var(--bg, #f3f3f3); }
.familie-kinder-menue .familie-kind.aktiv { border-color: #3b8ad9; font-weight: 600; }
.familie-kinder-leer { padding: 8px 10px; font-size: .88rem; opacity: .8; }

/* Seit v946: Abschnitte, Suche und „✏️ Anordnen“ auf Ordner-Seiten (mcc.js renderKompaktKacheln). */
.kompakt-kacheln-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.kompakt-kacheln-kopf input[type="search"] { flex: 1 1 260px; max-width: 420px; margin: 0; }
.kachel-abschnitt-titel { grid-column: 1 / -1; font-weight: 700; font-size: 0.95rem; color: var(--muted, #555); margin: 14px 2px 0; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.kachel-abschnitt-titel:first-child { margin-top: 0; }
.hub-tile.kompakt .kachel-beschreibung { margin: 0; font-size: 0.8rem; color: var(--muted, #666); font-weight: normal; line-height: 1.25; }
.anordnen-abschnitt { grid-column: 1 / -1; background: var(--card); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.anordnen-abschnitt.ziel { border-color: var(--brand, #e30613); background: rgba(227, 6, 19, 0.04); }
.anordnen-abschnitt-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.anordnen-abschnitt-kopf .anordnen-titel { flex: 1 1 220px; font-weight: 700; margin: 0; }
.anordnen-icon { width: 3.2em; text-align: center; margin: 0; flex: 0 0 auto; }
.anordnen-kachel { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--border); background: var(--card); }
.anordnen-griff { cursor: grab; opacity: 0.6; padding: 0 4px; user-select: none; }
.anordnen-felder { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 320px; min-width: 0; }
.anordnen-felder input { flex: 1 1 150px; margin: 0; min-width: 0; }
.anordnen-felder .anordnen-name { font-weight: 600; }
.anordnen-auswahl { flex: 0 1 190px; margin: 0; }
/* Seit v949: private Listen als eigene Kacheln (privat.js privatKachelnFuellen). */
.hub-tile.privat-kachel { position: relative; }
.privat-kachel-badge { position: absolute; top: 8px; right: 10px; }
.hub-tile.privat-kachel-neu { opacity: .85; }
/* Seit v950: „Mein Postfach“ – Eingabe nur des Teils vor @domain. */
.wpf-adresse { display: flex; align-items: stretch; }
.wpf-adresse input { flex: 1 1 auto; min-width: 0; margin: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wpf-adresse .wpf-domain { display: flex; align-items: center; padding: 0 10px; background: var(--bg, #f3f4f6); border: 1px solid var(--border); border-left: 0; border-radius: 0 6px 6px 0; color: var(--muted, #555); white-space: nowrap; }
.wpf-sig-vorschau { white-space: pre-wrap; font-family: inherit; font-size: 0.85em; background: var(--bg, #f6f7f9); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 4px 0 0; max-height: 260px; overflow: auto; }

/* Seit v954 (Torsten: "auf dem Handy ist die App nicht wirklich zu nutzen
   auf dem PC schaut es gut aus") – Webmail auf dem Handy: Postfach-Auswahl
   über die volle Breite, Knöpfe nur als Symbol, Ordner als waagerecht
   wischbare Leiste statt Spalte, Nachrichten zweizeilig (Absender + Zeit,
   darunter Betreff) und Lesen/Schreiben als Vollbild. Am PC bleibt alles
   wie bisher. */
@media (max-width: 700px) {
  #view-webmail .webmail-karte { padding: 12px 10px; }
  #view-webmail .webmail-kopf { flex-wrap: wrap; row-gap: 6px; }
  #view-webmail .webmail-kopf h2 { font-size: 1.15em; }
  #view-webmail .webmail-werkzeuge { width: 100%; flex-wrap: nowrap; }
  #view-webmail #webmail-postfach-select { flex: 1 1 auto; min-width: 0; max-width: none !important; width: auto; font-size: 16px; }
  #view-webmail .webmail-werkzeuge .btn-mini { flex: 0 0 auto; min-width: 42px; min-height: 40px; font-size: 1.1em; padding: 4px 8px; }
  #view-webmail .wm-btn-text { display: none; }

  #view-webmail .webmail-layout { flex-direction: column; gap: 6px !important; align-items: stretch !important; }
  #view-webmail .webmail-ordner {
    flex: 0 0 auto !important; min-width: 0 !important; width: 100%;
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  #view-webmail .webmail-ordner::-webkit-scrollbar { display: none; }
  #view-webmail .webmail-ordner > .hint { margin: 0; }
  #view-webmail .webmail-ordner-eintrag {
    flex: 0 0 auto; flex-wrap: nowrap; border: 1px solid var(--border) !important;
    border-radius: 18px !important; padding: 6px 12px !important; white-space: nowrap; gap: 6px;
  }
  #view-webmail .webmail-ordner-eintrag.aktiv { border-color: var(--brand) !important; }
  #view-webmail .webmail-ordner-eintrag > span:first-child { flex: 0 0 auto !important; }
  #view-webmail .webmail-liste { flex: 1 1 auto !important; width: 100%; }

  #view-webmail .webmail-zeile {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    grid-template-areas: "punkt von datum" "punkt betreff betreff";
    column-gap: 8px !important; row-gap: 2px; padding: 10px 2px;
  }
  #view-webmail .webmail-zeile .wm-punkt { grid-area: punkt; align-self: start; font-size: 0.7em; padding-top: 3px; }
  #view-webmail .webmail-zeile .wm-von { grid-area: von; min-width: 0 !important; }
  #view-webmail .webmail-zeile .wm-datum { grid-area: datum; }
  #view-webmail .webmail-zeile .wm-betreff { grid-area: betreff; font-size: 0.93em; }
  #view-webmail .webmail-zeile:not(.ungelesen) .wm-betreff { color: var(--muted, #5b6770); }

  .webmail-modal-overlay { padding: 0 !important; align-items: stretch !important; }
  .webmail-modal-overlay .webmail-modal-box {
    max-width: none !important; width: 100%; max-height: none !important; height: 100%;
    border-radius: 0; padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .webmail-modal-overlay .modal-close { font-size: 1.8em; }
  .webmail-modal-overlay input, .webmail-modal-overlay select, .webmail-modal-overlay textarea { font-size: 16px; }
  .webmail-lesen-aktionen .btn-mini { min-height: 38px; }
  .webmail-lesen-iframe { height: 62vh !important; }
  .webmail-lesen-text { max-height: none !important; }
}

/* Seit v955 (Torsten: „ja bitte kompakter machen“ zur hohen roten
   Kopfzeile am Handy) – alles in EINE Zeile: Logo + „MCC“ links,
   👤 Name + Version, 🔍 und abmelden rechts. Langname und Rolle entfallen
   am Handy (Rolle steht in „Mein Profil“), die Version bleibt klein als
   Link auf die Neuigkeiten. Zurück-Knopf und Seitenrand etwas schmaler. */
@media (max-width: 600px) {
  header.mcc-kopf { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap; padding: 6px 10px; gap: 8px; }
  header.mcc-kopf > .brand { width: auto !important; flex: 0 0 auto; }
  header.mcc-kopf .logo { height: 30px; }
  header.mcc-kopf .brand > a { gap: 8px; }
  header.mcc-kopf .mcc-marke .mcc-titel-lang { display: none; }
  header.mcc-kopf .mcc-marke h1.mcc-titel { font-size: 1.15rem !important; }
  header.mcc-kopf .header-actions { width: auto !important; flex: 1 1 auto; min-width: 0; align-items: stretch !important; }
  header.mcc-kopf #header-user-info { justify-content: flex-end; }
  header.mcc-kopf #header-user-info > .header-ich { flex: 0 1 auto; font-size: .8rem; }
  header.mcc-kopf .header-angemeldet-label { display: none; }
  header.mcc-kopf #header-rolle { font-size: 0; }
  header.mcc-kopf #header-rolle #header-version { font-size: .7rem; margin-left: 4px; opacity: .85; }
  header.mcc-kopf .header-pill { padding: 5px 9px; font-size: .85rem; min-height: 32px; }
  header.mcc-kopf #pwa-install-btn,
  header.mcc-kopf #header-kind-wechseln-btn { font-size: 0; }
  header.mcc-kopf #pwa-install-btn::before { content: "📱"; font-size: .95rem; }
  header.mcc-kopf #header-kind-wechseln-btn::before { content: "👶"; font-size: .95rem; }
  header.mcc-kopf.suche-offen { flex-wrap: wrap; }
  main.mcc-haupt { padding: 10px; }
  main.mcc-haupt #kompakt-header-zurueck-btn { padding: 6px 12px; margin-bottom: 8px; font-size: .95rem; }
}

/* v956 – Webmail: bei nur einem Postfach keine Auswahl, Adresse klein unter „Webmail“. */
.webmail-postfach-einzeln { display: block; font-size: .8rem; font-weight: 400; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  #view-webmail .webmail-kopf.webmail-ein-postfach { flex-wrap: nowrap; }
  #view-webmail .webmail-kopf.webmail-ein-postfach h2 { flex: 1 1 auto; overflow: hidden; }
  #view-webmail .webmail-kopf.webmail-ein-postfach .webmail-werkzeuge { width: auto; flex: 0 0 auto; }
}

/* v957 – Webmail: Empfänger-Vorschläge aus den Adressbüchern */
.wm-vorschlaege { border: 1px solid var(--border); border-radius: 8px; background: var(--card); margin: 2px 0 6px; max-height: 260px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.wm-vorschlag { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.wm-vorschlag:last-child { border-bottom: none; }
.wm-vorschlag:hover, .wm-vorschlag.aktiv { background: var(--bg); }
.wm-vorschlag-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-vorschlag-mail { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seit v987: WhatsApp-Posteingang */
.wa-pe-raster { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .wa-pe-raster { grid-template-columns: 320px 1fr; } }
.wa-pe-liste { display: flex; flex-direction: column; gap: 4px; max-height: 70vh; overflow-y: auto; }
.wa-pe-eintrag { text-align: left; border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 8px; background: var(--card, #fff); cursor: pointer; color: var(--text); }
.wa-pe-eintrag.aktiv { border-color: var(--red); }
.wa-pe-eintrag .wa-pe-vorschau { display: block; font-size: 0.85em; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-pe-verlauf { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; padding: 4px; }
.wa-pe-blase { max-width: 80%; padding: 6px 10px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.wa-pe-blase.ein { align-self: flex-start; background: #f1f1f1; color: #222; }
.wa-pe-blase.aus { align-self: flex-end; background: #dcf8c6; color: #222; }
.wa-pe-blase .wa-pe-meta { display: block; font-size: 0.75em; opacity: 0.7; margin-top: 2px; }
.wa-pe-blase img { max-width: 100%; border-radius: 6px; display: block; }

/* Seit v992: Mein DLRG-Jahr */
.mj-held { display:flex; align-items:center; gap:18px; margin:14px 0 8px; flex-wrap:wrap; }
.mj-held-zahl { font-size: 4rem; font-weight: 800; color: var(--brand); line-height: 1; }
.mj-held-text { font-size: 1.1rem; font-weight: 600; }
.mj-monate { display:flex; gap:4px; align-items:flex-end; height:110px; margin-top:8px; }
.mj-monat { flex:1 1 0; display:flex; flex-direction:column; align-items:center; height:100%; min-width:0; }
.mj-balken-feld { flex:1 1 auto; width:100%; display:flex; align-items:flex-end; }
.mj-balken { width:100%; background: var(--brand); border-radius:4px 4px 0 0; min-height:2px; opacity:.85; }
.mj-monat-name { font-size:.72rem; color: var(--muted); margin-top:2px; }
.mj-kacheln { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.mj-kachel { background: var(--bg); border-radius:10px; padding:12px; }
.mj-zahl { font-size:1.8rem; font-weight:800; line-height:1.1; }
.mj-text { font-size:.9rem; }
.mj-abzeichen { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:10px; }
.mj-abz { display:flex; gap:10px; align-items:center; border:1px solid var(--border); border-radius:10px; padding:10px; }
.mj-abz-icon { font-size:1.8rem; }

/* Seit v995: WhatsApp-Einladung */
.wa-einladung { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; width: min(560px, calc(100% - 24px));
  background: var(--card); border: 1px solid var(--border); border-left: 5px solid #25d366; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wa-einladung-text { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; }
.wa-einladung-text span { color: var(--muted); }
.wa-einladung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wa-einladung .link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 4px; cursor: pointer; }

/* Seit v996: Ehrenamts-Auswertung */
.ea-tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ea-tabelle th, .ea-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.ea-tabelle th:first-child, .ea-tabelle td:first-child { text-align: left; white-space: normal; }
.tabelle-scroll { overflow-x: auto; }

/* Seit v1000 */
.v1000-zahl { text-align:center; font-size: 4.2rem; font-weight: 900; color: var(--brand); line-height: 1; letter-spacing: 2px; animation: v1000-pop .6s ease-out; }
@keyframes v1000-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.v1000-liste { margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }

/* Seit 1.01: Mitteilungen */
.mitteilung-icon { text-align:center; font-size: 2.6rem; line-height: 1.1; }
.mitteilung-text { line-height: 1.5; max-height: 55vh; overflow:auto; overflow-wrap:anywhere; }
.mitteilung-zeile { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--border); flex-wrap: wrap; }
.mitteilung-zeile.inaktiv { opacity: .6; }
.mitteilung-vorschau { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1.04: breiter Dialog für die Preis-Import-Vorschau */
.mcc-dialog.mcc-dialog-breit { width: min(1200px, 100%); }
.ip-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ip-werkzeuge input[type="search"] { flex: 1 1 260px; min-width: 0; }
.ip-tabelle-scroll { max-height: calc(100vh - 360px); min-height: 240px; overflow: auto; border: 1px solid var(--border, #ddd); border-radius: 8px; }
.ip-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ip-tabelle thead th { position: sticky; top: 0; background: #f6f6f6; z-index: 1; }
.ip-tabelle td, .ip-tabelle th { padding: 6px 8px; vertical-align: top; border-bottom: 1px solid #eee; }
.ip-tabelle .ip-quelle { min-width: 220px; }
.ip-tabelle .ip-alt { color: var(--muted); text-decoration: line-through; }
.ip-tabelle tr.ip-aus td { opacity: 0.45; }
@media (max-width: 640px) {
  .ip-tabelle-scroll { max-height: 55vh; }
  .ip-tabelle { font-size: 0.85rem; }
}
.ip-tabelle th, .ip-tabelle td { text-align: left; }
.ip-tabelle .ip-zahl { text-align: right; white-space: nowrap; }

/* 1.05: Fahrzeug-Infoblatt + Sondersignal-Bedienung */
.fzi-panel { flex-wrap: nowrap !important; }
.fzi-panel .fzi-zeile { align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.fzi-panel .fzi-block { border-top: 1px solid #eee; padding-top: 6px; }
.fzi-pruefen { background: #fff3b0; border-radius: 6px; }
.fzi-panel .fzi-pruefen { padding: 4px 6px; }
.fzi-bild { display: block; max-width: 100%; max-height: 260px; margin: 4px 0 10px; border-radius: 8px; border: 1px solid #ddd; }
.fzi-tasten { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; border: 1px solid #d5dbe0; border-radius: 8px; overflow: hidden; }
.fzi-taste { display: contents; }
.fzi-taste > div { padding: 8px 10px; border-bottom: 1px solid #e3e7ea; font-size: 1.02rem; line-height: 1.35; }
.fzi-taste-name { font-weight: 600; background: #f4f8fb; }
.fzi-taste.fzi-pruefen > div { background: #fff3b0; }
.fzi-pruefen-hinweis { color: #8a6d00; font-size: 0.85em; white-space: nowrap; }
.fzi-folgt { font-style: italic; color: var(--muted); }
.fzi-regeln { margin-top: 12px; border: 2px solid #e30613; background: #fdecee; border-radius: 8px; padding: 8px 12px; }
.fzi-regeln strong { color: #e30613; }
.fzi-regeln ul { margin: 6px 0 0; padding-left: 18px; }
.fzi-details { margin-top: 12px; }
.fzi-details summary { cursor: pointer; font-weight: 600; }
.fzi-daten { border-collapse: collapse; margin: 6px 0; }
.fzi-daten th { text-align: left; padding: 4px 10px 4px 0; color: var(--muted); font-weight: 600; }
.fzi-daten td { padding: 4px 0; }
.fzi-abschnitt { color: #fff; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin-top: 10px; }
.fzi-abschnitt.blau { background: #0069b4; } .fzi-abschnitt.grau { background: #5a6670; } .fzi-abschnitt.rot { background: #e30613; }
.fzi-liste { margin: 6px 0; padding-left: 18px; }
@media (max-width: 560px) {
  .fzi-tasten { grid-template-columns: 1fr; }
  .fzi-taste-name { border-bottom: none !important; padding-bottom: 2px !important; }
  .fzi-taste-fn { padding-top: 2px !important; }
}
.fzi-block-aussen > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.fzi-block-aussen > summary::-webkit-details-marker { display: none; }
.fzi-block-aussen > summary::before { content: "▶"; font-size: 0.8em; color: var(--muted); margin-right: 6px; transition: transform .15s; }
.fzi-block-aussen[open] > summary::before { transform: rotate(90deg); }
/* 1.08: Beladung im Fahrtenbuch (lesend) */
.fzb-lese-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid #eef0f2; flex: 1 1 auto; }
.fzb-lese-zeile.eingerueckt { margin-left: 22px; }
.fzb-lese-name { font-weight: 500; }
.fzb-lese-box > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.fzb-lese-box > summary::-webkit-details-marker { display: none; }
.fzb-lese-box > summary::before { content: "▶"; font-size: 0.75em; color: var(--muted); transition: transform .15s; }
.fzb-lese-box[open] > summary::before { transform: rotate(90deg); }
.fzb-lese-anzahl { white-space: nowrap; }
/* 1.11: offene Checklisten-Mängel in der Fahrzeug-Beladung */
.fzb-mangel-badge { display: inline-block; background: #fde2e2; color: #b00012; border: 1px solid #f5b5b5; border-radius: 10px; padding: 0 8px; font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.fzb-maengel { list-style: none; margin: 2px 0 6px; padding: 6px 10px; background: #fff4f4; border-left: 3px solid #e30613; border-radius: 4px; font-size: 0.92rem; }
.fzb-maengel.eingerueckt { margin-left: 22px; }
.fzb-maengel li { margin: 2px 0; }
/* 1.12: Mängelliste in Checklisten zuklappbar */
details.cl-maengel-auf > summary { cursor: pointer; list-style: none; }
details.cl-maengel-auf > summary::-webkit-details-marker { display: none; }
details.cl-maengel-auf > summary::before { content: "▶"; font-size: 0.8em; color: var(--muted); margin-right: 6px; display: inline-block; transition: transform .15s; }
details.cl-maengel-auf[open] > summary::before { transform: rotate(90deg); }
details.cl-maengel-auf[open] > summary .hint { display: none; }
details.cl-maengel-auf .cl-maengel > .cl-maengel-kopf:empty { display: none; }
/* 1.14: Checklisten einer Rubrik nach Fahrzeug gruppiert */
.cl-fz-kopf { font-weight: 700; margin: 14px 0 2px; padding-bottom: 2px; border-bottom: 2px solid #0069b4; color: #0069b4; }
.cl-karten > .cl-fz-kopf:first-child { margin-top: 2px; }

/* 1.15: Inventarliste – mehr Knöpfe je Zeile nebeneinander (weniger hohe Zeilen) */
.aktions-btn-gruppe.breit { width: 120px; }
@media (max-width: 640px) { .aktions-btn-gruppe.breit { width: 76px; } }
/* 1.16: NFC-Tag beschreiben */
.nfc-status { background: #eef6fc; border-radius: 8px; padding: 10px 12px; white-space: pre-line; line-height: 1.4; }
.nfc-status.fertig { background: #e6f6ea; }
/* 1.18: Scan-Ziel (QR/NFC) – Auswahl der Checkliste */
.scan-ziel-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.scan-ziel-eintrag { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; width: 100%;
  background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.scan-ziel-eintrag:hover { border-color: #e30613; }
/* 1.19: Mängel-Verlauf und Protokoll-Export */
.cl-verlauf { margin-top: 2px; }
.cl-verlauf-alt { color: var(--muted); font-size: 0.88rem; }
.cl-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; }
/* 1.20: Dienst nachbereiten & abschließen */
.dnb-badge-offen { background: #fff3cd; color: #7a5a00; }
.btn-mini.dnb-knopf-fertig { background: var(--green); color: #fff; border: 1px solid var(--green); font-weight: 600; }
.dnb-karten-zeile { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.dnb-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: #fff3cd; color: #5c4400;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; line-height: 1.35; }
.mcc-dialog.mcc-dialog-breit.dnb-dialog { width: min(760px, 100%); }
.dnb-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; margin: 4px 0 2px; }
.dnb-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dnb-zeile.dnb-neu { background: #f1faf3; margin: 0 -8px; padding: 8px; border-radius: 8px; }
.dnb-zeile.dnb-weg .dnb-name > div:first-child { text-decoration: line-through; color: var(--muted); }
.dnb-name { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.dnb-punkt { color: #2e9e4d; }
.dnb-da { font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid #c9d2db; background: #f4f6f8; color: #6b7785; cursor: pointer; margin-right: 6px; min-height: 0; line-height: 1.4; }
.dnb-da.ist-da { background: #e6f4ea; color: #1e7b34; border-color: #a8d5b4; font-weight: 600; }
.dnb-marke { background: var(--green); color: #fff; border-radius: 6px; padding: 0 6px; font-size: 0.75rem; }
.dnb-zeiten { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.dnb-zeiten input[type="time"] { width: 7.2em; padding: 6px 8px; font: inherit; border: 1px solid var(--border); border-radius: 6px; }
.dnb-std { min-width: 4.6em; text-align: right; color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.dnb-std.dnb-std-anders { color: var(--text); font-weight: 600; }
.dnb-weg-knopf { flex: 0 0 auto; }
.dnb-nachtragen { margin-top: 14px; padding: 10px 12px; background: #f6f7f9; border-radius: 10px; }
.dnb-nachtragen-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.dnb-suche-huelle { position: relative; flex: 2 1 220px; min-width: 0; }
.dnb-suche-huelle input { width: 100%; }
.dnb-nachtragen-zeile select { flex: 1 1 180px; min-width: 0; }
.dnb-treffer { position: absolute; z-index: 6; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  max-height: 240px; overflow-y: auto; box-shadow: 0 4px 14px rgba(0,0,0,0.16); }
.dnb-treffer-zeile { padding: 9px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.dnb-treffer-zeile:last-child { border-bottom: 0; }
.dnb-treffer-zeile:hover { background: #f1faf3; }
.dnb-knoepfe { flex-wrap: wrap; }
@media (max-width: 560px) {
  .dnb-zeile { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
  .dnb-name { grid-column: 1; grid-row: 1; }
  .dnb-weg-knopf { grid-column: 2; grid-row: 1; align-self: start; }
  .dnb-zeiten { grid-column: 1 / -1; grid-row: 2; }
  .dnb-zeiten input[type="time"] { flex: 1 1 0; width: auto; min-width: 0; }
  .dnb-knoepfe button { flex: 1 1 45%; }
  .dnb-knoepfe #dnb-abschliessen { flex: 1 1 100%; order: -1; }
}
/* 1.21: Anmeldungen in der Seminar-Verwaltung – aufgeräumte Liste (static/js/seminar-anmeldungen.js) */
.seminar-seite-speichern-leiste.sa-versteckt { display: none; }
.sa-titel { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sa-titel h3 { margin: 0; }
.sa-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sa-kz { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 14px; cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.sa-kz:hover { border-color: #9aa5b1; }
.sa-kz.aktiv { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(227, 6, 19, 0.15); }
.sa-kz-zahl { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sa-kz-text { display: flex; flex-direction: column; font-size: 0.86rem; line-height: 1.2; color: var(--muted); }
.sa-kz-text small { font-size: 0.8rem; color: var(--text); font-weight: 600; }
.sa-kz.warn .sa-kz-zahl { color: #b26a00; }
.sa-kz.gut .sa-kz-zahl { color: var(--green); }
.sa-kz.voll .sa-kz-zahl { color: #b26a00; }
.sa-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sa-leiste #sa-suche { flex: 1 1 180px; min-width: 0; max-width: 280px; }
.sa-leiste > button, .sa-leiste-rechts > button, .sa-mehr > summary { padding: 8px 12px; font-size: 0.95rem; }
.sa-leiste-rechts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.sa-mehr { position: relative; }
.sa-mehr > summary { list-style: none; cursor: pointer; display: inline-block; border: 1px solid var(--brand); color: var(--brand); background: #fff;
  border-radius: 8px; user-select: none; }
.sa-mehr > summary::-webkit-details-marker { display: none; }
.sa-mehr-menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); min-width: 280px; padding: 4px; display: flex; flex-direction: column; }
.sa-mehr-menue button { background: none; border: 0; color: var(--text); text-align: left; padding: 10px 12px; border-radius: 6px; font: inherit; cursor: pointer; }
.sa-mehr-menue button:hover { background: #f3f5f7; }
.sa-auswahl-leiste { align-items: center; gap: 8px; flex-wrap: wrap; background: #eef4fb; border: 1px solid #c9dcf0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.sa-link { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; text-decoration: underline; }
.sa-link.aktiv { color: var(--text); font-weight: 700; text-decoration: none; cursor: default; }
.sa-listenkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 12px; color: var(--muted); font-size: 0.88rem; }
.sa-sortierung { margin-left: auto; }
.sa-liste { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.sa-zeile + .sa-zeile { border-top: 1px solid var(--border); }
.sa-zeile-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.sa-zeile-kopf:has(.sa-position) { grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
.sa-zeit { white-space: nowrap; font-size: 0.82rem; }
.sa-zeile-kopf:hover { background: #f8f9fb; }
.sa-zeile.offen > .sa-zeile-kopf { background: #f3f5f7; }
.sa-zeile.gewaehlt > .sa-zeile-kopf { background: #eef4fb; }
.sa-zeile.storniert .sa-name strong { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.sa-check { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.sa-check-platz { width: 18px; display: inline-block; }
.sa-position { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.sa-name { min-width: 0; overflow-wrap: anywhere; }
.sa-name .hint { margin-top: 1px; }
.sa-zahlung { min-width: 92px; text-align: right; }
.sa-pfeil { color: var(--muted); width: 1em; text-align: center; }
.sa-merker { display: inline-block; font-size: 0.74rem; line-height: 1.5; padding: 0 7px; border-radius: 999px; background: #eef1f4; color: #3d4a57; white-space: nowrap; vertical-align: 1px; }
.sa-merker.rot { background: #fbe6e4; color: #a4322a; }
.sa-merker.frage { background: #fdf1d6; color: #7a5a00; }
.sa-zahlung-knopf { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 0.84rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; }
span.sa-zahlung-knopf { cursor: default; }
.sa-zahlung-knopf.offen { background: #fff; color: #a4322a; border-color: #e3a29c; }
button.sa-zahlung-knopf.offen:hover { background: #e6f6ea; color: #17643a; border-color: #8fceaa; }
.sa-zahlung-knopf.bezahlt { background: var(--green); color: #fff; }
.sa-zahlung-knopf.erlassen { background: #8a939c; color: #fff; }
.sa-detail { padding: 4px 16px 14px 42px; background: #f8f9fb; border-top: 1px dashed var(--border); cursor: default; }
.sa-detail h5 { margin: 12px 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sa-detail h5 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sa-detail-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.sa-angabe { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 3px 0; font-size: 0.92rem; }
.sa-angabe > span { color: var(--muted); overflow-wrap: anywhere; }
.sa-angabe > div { overflow-wrap: anywhere; }
.sa-frage { background: #fdf1d6; border-radius: 8px; padding: 6px 10px; white-space: pre-line; }
.sa-frage.erledigt { background: #eef1f4; color: var(--muted); }
.sa-knopfzeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sa-person { margin: 0; }
.sa-wahlgruppe { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.sa-wahl { background: #fff; color: var(--text); border: 0; border-right: 1px solid var(--border); padding: 5px 12px; font: inherit; font-size: 0.88rem; cursor: pointer; border-radius: 0; }
.sa-wahl:last-child { border-right: 0; }
.sa-wahl.aktiv { font-weight: 700; color: #fff; }
.sa-wahl.aktiv.offen { background: #c0392b; }
.sa-wahl.aktiv.bezahlt { background: var(--green); }
.sa-wahl.aktiv.erlassen { background: #8a939c; }
.sa-wahl:disabled { cursor: default; opacity: 0.75; }
.sa-notiz { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; resize: vertical; background: #fff; }
.sa-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sa-verschieben { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sa-verschieben select { max-width: 240px; width: auto; padding: 4px 8px; font-size: 0.86rem; }
.sa-aktionen .sa-loeschen { margin-left: auto; }
.btn-mini.sa-gruen { background: var(--green); border-color: var(--green); color: #fff; }
.sa-block { margin-top: 18px; }
.sa-warteliste-modus { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.sa-warteliste-modus label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 0.9rem; }
.sa-stornierte { margin-top: 18px; }
.sa-stornierte > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.sa-stornierte .sa-liste { margin-top: 6px; }
.sa-leer { border: 1px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; }
.sa-leer p { margin: 0 0 4px; }
.sa-keine-treffer { padding: 10px 12px; margin: 0; }
.sa-wahl-liste { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.sa-wahl-liste button { background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; text-align: left; font: inherit; cursor: pointer; }
.sa-wahl-liste button:hover:not(:disabled) { border-color: var(--brand); }
.sa-wahl-liste button:disabled { opacity: 0.5; cursor: default; }
.sa-empfaenger { margin-top: 4px; }
.sa-empfaenger summary { cursor: pointer; color: var(--brand); }
@media (max-width: 720px) {
  .sa-zeile-kopf { gap: 8px; padding: 10px; grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .sa-zeile-kopf:has(.sa-position) { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
  .sa-zeit { display: none; }
  .sa-zahlung { min-width: 0; }
  .sa-detail { padding-left: 14px; }
  .sa-detail-spalten { grid-template-columns: minmax(0, 1fr); }
  .sa-angabe { grid-template-columns: 104px minmax(0, 1fr); }
  .sa-wahl { padding: 5px 9px; white-space: nowrap; }
  .sa-leiste #sa-suche { max-width: none; flex-basis: 100%; }
  .sa-leiste-rechts { margin-left: 0; }
  .sa-leiste { position: relative; }
  .sa-mehr { position: static; }
  .sa-mehr-menue { left: 0; right: 0; min-width: 0; top: auto; }
  .sa-sortierung { margin-left: 0; }
  .sa-aktionen .sa-loeschen { margin-left: 0; }
  .sa-verschieben select { max-width: 100%; }
}
/* 1.22: Seminare – Überblick „Was ist zu tun?“ (static/js/seminar-ueberblick.js) */
.su-kopf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.su-wann { font-size: 1.05rem; }
.su-wann-marke { display: inline-block; background: #eef4fb; color: #1d4f86; border-radius: 999px; padding: 1px 10px; font-size: 0.84rem; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.su-anmeldung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.su-lampe { width: 10px; height: 10px; border-radius: 50%; background: #9aa5b1; flex: 0 0 auto; }
.su-anmeldung.offen .su-lampe { background: var(--green); box-shadow: 0 0 0 3px rgba(28, 138, 76, 0.18); }
.su-anmeldung.geschlossen .su-lampe { background: #c0392b; }
.su-anmeldung.noch_nicht .su-lampe, .su-anmeldung.entwurf .su-lampe { background: #d9a400; }
.su-titel { margin: 18px 0 8px; }
.su-punkte { display: flex; flex-direction: column; gap: 8px; }
.su-punkt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); border-left: 5px solid #d9a400; border-radius: 10px; padding: 10px 14px; background: #fff; }
.su-punkt.dringend { border-left-color: #c0392b; background: #fff8f7; }
.su-punkt.hinweis { border-left-color: #9aa5b1; }
.su-hinweise { margin-top: 8px; }
.su-icon { font-size: 1.3rem; flex: 0 0 auto; width: 1.6em; text-align: center; }
.su-punkt-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.su-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.su-nichts { border: 1px dashed #8fceaa; background: #f1faf3; color: #17643a; border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.su-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.su-karte { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: #fff; }
.su-karte h4 { margin: 0 0 8px; }
.su-letzte-liste { display: flex; flex-direction: column; }
.su-letzte { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 6px 0;
  font: inherit; color: var(--text); text-align: left; cursor: pointer; border-radius: 0; flex-wrap: wrap; }
.su-letzte:last-child { border-bottom: 0; }
.su-letzte:hover { color: var(--brand); }
.su-schnell { display: flex; flex-wrap: wrap; gap: 8px; }
.su-heute { border: 1px solid #f0d99a; background: #fffaf0; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.su-heute h3 { margin: 0 0 6px; font-size: 1.05rem; }
.su-heute-leer { color: #17643a; background: #f1faf3; border-color: #bfe3cc; font-weight: 600; }
.su-heute-zeile { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2.4fr) auto; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid #f0e2bd; cursor: pointer; border-radius: 8px; }
.su-heute-zeile:hover { background: #fff3d6; }
.su-heute-titel { min-width: 0; overflow-wrap: anywhere; }
.su-heute-punkte { display: flex; flex-wrap: wrap; gap: 6px; }
.su-chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.84rem; background: #fdf1d6; color: #5c4400; white-space: nowrap; }
.su-chip.dringend { background: #fbe6e4; color: #a4322a; font-weight: 600; }
.su-heute-pfeil { font-size: 1.4rem; color: var(--muted); }
@media (max-width: 720px) {
  .su-zwei { grid-template-columns: minmax(0, 1fr); }
  .su-heute-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .su-heute-punkte { grid-column: 1 / -1; grid-row: 2; }
  .su-heute-pfeil { grid-row: 1; grid-column: 2; }
  .su-chip { white-space: normal; }
  .su-knoepfe { flex: 1 1 100%; }
}
/* 1.23: Neues Seminar in einem Fenster (static/js/seminar-neu.js) */
.mcc-dialog.mcc-dialog-breit.sn-dialog { width: min(760px, 100%); }
.sn-vorlage { background: #f1faf3; border: 1px solid #bfe3cc; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.sn-vorlage label { font-weight: 600; color: var(--text); }
.sn-vorlage select { width: 100%; }
.sn-form .mcc-dialog-feld input:not([type=checkbox]):not([type=radio]), .sn-form .mcc-dialog-feld select { width: 100%; }
.sn-zeit { display: flex; gap: 10px; }
.sn-zeit > div { flex: 1 1 0; min-width: 0; }
.sn-termine { display: flex; flex-direction: column; gap: 6px; }
.sn-termine label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 0.95rem; flex-wrap: wrap; }
.sn-termine input[type=radio] { width: auto; }
.sn-form .sn-termine #sn-anzahl { width: 4.6em; padding: 4px 6px; }
#sn-vorschau { color: var(--text); font-weight: 600; min-height: 1.2em; }
.sn-knoepfe { align-items: center; flex-wrap: wrap; }
.sn-knoepfe .sn-leer { margin-right: auto; font-size: 0.88rem; }
.btn-mini.sn-veroeffentlichen-knopf { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
@media (max-width: 560px) { .sn-knoepfe .sn-leer { flex: 1 1 100%; text-align: left; order: 9; } }
/* 1.24: Kontoauszug abgleichen (static/js/seminar-kontoabgleich.js) */
.mcc-dialog.mcc-dialog-breit.sk-dialog { width: min(920px, 100%); }
.sk-ablage { display: flex; align-items: center; justify-content: center; border: 2px dashed #9aa5b1; border-radius: 12px; padding: 26px 16px; cursor: pointer; background: #f8f9fb; position: relative; margin: 10px 0 4px; }
.sk-ablage:hover, .sk-ablage.ziel { border-color: var(--brand); background: #fff5f5; }
.sk-ablage input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.sk-ablage-text { font-weight: 600; color: var(--text); }
.sk-hilfe { margin: 8px 0; }
.sk-hilfe summary { cursor: pointer; color: var(--brand); }
.sk-hilfe ul { margin: 6px 0; padding-left: 20px; }
.sk-zusammenfassung { margin: 0 0 10px; }
.sk-block { margin-bottom: 14px; }
.sk-block h4 { margin: 0 0 6px; }
.sk-ohne > summary { cursor: pointer; font-weight: 600; }
.sk-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px;
  background: #fff; color: var(--text); cursor: pointer; font-size: 0.95rem; font-weight: 400; }
.sk-zeile:has(.sk-haken:checked) { border-color: #8fceaa; background: #f1faf3; }
.sk-zeile-ohne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); cursor: default; }
.sk-zeile-ohne select { width: 100%; }
.sk-haken { width: 20px; height: 20px; margin: 0; }
.sk-umsatz, .sk-ziel { min-width: 0; overflow-wrap: anywhere; }
.sk-pfeil { color: var(--muted); font-size: 1.2rem; }
.sk-gruende { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 4px; }
.sk-knoepfe { align-items: center; flex-wrap: wrap; }
.sk-knoepfe #sk-andere { margin-right: auto; }
.btn-mini.sk-einstieg { margin-left: 10px; vertical-align: 2px; font-weight: 400; }
@media (max-width: 640px) {
  .sk-zeile { grid-template-columns: auto minmax(0, 1fr); }
  .sk-pfeil { display: none; }
  .sk-ziel { grid-column: 2; }
  .sk-zeile-ohne { grid-template-columns: minmax(0, 1fr); }
}
/* 1.25: Seminare – Kurstag (static/js/seminar-kurstag.js) */
.kt-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.kt-kopf h3 { margin: 0; }
.kt-termin { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.kt-termin select { width: auto; max-width: 100%; min-width: 0; font-weight: 600; }
.kt-kz { cursor: default; }
.kt-vorbereiten { border: 1px dashed var(--border); border-radius: 12px; padding: 16px; }
.kt-vorbereiten p { margin: 0 0 8px; }
.kt-liste { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.kt-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-left: 5px solid #d5dae0; flex-wrap: wrap; }
.kt-zeile + .kt-zeile { border-top: 1px solid var(--border); }
.kt-zeile.anwesend { border-left-color: var(--green); background: #f6fbf7; }
.kt-zeile.entschuldigt { border-left-color: #2f6fb7; }
.kt-zeile.abwesend_manuell { border-left-color: #c0392b; }
.kt-name { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.kt-zusatz { margin-top: 2px; }
.kt-zusatz a { color: inherit; }
.kt-notiz { color: #7a5a00; }
.kt-offen { display: inline-flex; align-items: center; gap: 6px; background: #fbe6e4; color: #a4322a; border-radius: 999px; padding: 1px 10px; font-size: 0.82rem; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.kt-offen .btn-mini { padding: 1px 8px; font-size: 0.78rem; }
.kt-knoepfe { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.kt-status { background: #fff; color: var(--text); border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 9px 14px; font: inherit; font-size: 0.92rem; cursor: pointer; min-width: 64px; }
.kt-status:last-child { border-right: 0; }
.kt-status:hover:not(:disabled) { background: #f3f5f7; }
.kt-status.aktiv { color: #fff; font-weight: 700; }
.kt-status.aktiv.anwesend { background: var(--green); }
.kt-status.aktiv.entschuldigt { background: #2f6fb7; }
.kt-status.aktiv.abwesend_manuell { background: #c0392b; }
.kt-status:disabled { cursor: default; opacity: 0.7; }
.seminar-seite-inhalt { min-width: 0; }
.sa-leiste #kt-suche { flex: 1 1 180px; min-width: 0; max-width: 280px; }
@media (max-width: 640px) {
  .kt-termin { margin-left: 0; width: 100%; }
  .kt-termin select { flex: 1 1 0; width: 0; }
  .sa-leiste #kt-suche { max-width: none; flex-basis: 100%; }
  .kt-knoepfe { width: 100%; }
  .kt-status { flex: 1 1 0; padding: 11px 6px; }
}

/* ===== 1.26: Seminare – Abschluss (static/js/seminar-abschluss.js) ===== */
.sb-kopf h3 { margin: 0 0 2px; }
.sb-kopf .hint { margin: 0 0 14px; }
.sb-schritt { border: 1px solid var(--border); border-left: 5px solid #9aa5b1; border-radius: 12px; background: #fff; padding: 14px 16px; margin-bottom: 12px; }
.sb-schritt.offen { border-left-color: #d9a400; }
.sb-schritt.fertig { border-left-color: var(--green); }
.sb-schritt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sb-schritt-kopf h4 { margin: 0; font-size: 1.05rem; }
.sb-nr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #eef1f4; color: var(--text); font-weight: 700; font-size: 0.9rem; flex: 0 0 auto; }
.sb-nr.offen { background: #fdf2cc; color: #7a5a00; }
.sb-nr.fertig { background: var(--green); color: #fff; }
.sb-schritt-inhalt { padding-left: 36px; min-width: 0; }
.sb-schritt-inhalt p { margin: 0 0 8px; }
.sb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-knoepfe.sb-haupt { margin: 12px 0 8px; }
.sb-auswahl-leiste { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-schnell { font-size: 0.88rem; color: var(--muted); }
.sb-liste { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sb-zeile { display: flex; align-items: center; gap: 10px 12px; padding: 8px 12px; margin: 0; font-weight: normal; cursor: pointer; flex-wrap: wrap; }
.sb-zeile + .sb-zeile { border-top: 1px solid var(--border); }
.sb-zeile.an { background: #f6fbf7; }
.sb-zeile .sb-haken { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.sb-name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.sb-anwesenheit { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.sb-balken { display: inline-block; width: 90px; height: 8px; border-radius: 999px; background: #e8ecf0; overflow: hidden; flex: 0 0 auto; }
.sb-balken-fuellung { display: block; height: 100%; border-radius: 999px; background: #c0392b; }
.sb-balken-fuellung.gut { background: var(--green); }
.sb-balken-fuellung.mittel { background: #d9a400; }
.sb-quote { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }
.sb-quote.gut { color: var(--green); }
.sb-quote.mittel { color: #9a7400; }
.sb-quote.wenig { color: #c0392b; }
.sb-marke { display: inline-block; background: #eef1f4; color: #4a5560; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; margin-left: 4px; }
.sb-marke.warn { background: #fbe6e4; color: #a4322a; }
.sb-marke.gut { background: #e3f4e7; color: #1f6b33; }
.sb-hinweis { background: #fdf6dc; border: 1px solid #ecd98a; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 0.92rem; }
.sb-felder { display: grid; gap: 10px; margin-top: 14px; }
.sb-felder label { margin: 0; font-weight: 600; }
.sb-felder textarea, .sb-felder input[type="text"] { margin-top: 4px; width: 100%; font: inherit; font-weight: normal; }
.sb-felder .sb-option { font-weight: normal; display: flex; align-items: center; gap: 8px; }
.sb-felder .sb-option input { width: auto; margin: 0; }
@media (max-width: 640px) {
  .sb-schritt-inhalt { padding-left: 0; }
  .sb-knoepfe button { flex: 1 1 auto; }
}

/* ===== 1.27: Seminare – „Einrichten“ in Klartext ===== */
/* Textfelder waren winzig und in Schreibmaschinenschrift (Browser-Standard). */
#seminar-formular textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; line-height: 1.4; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); resize: vertical; min-height: 64px; }
#seminar-formular textarea:focus { outline: 2px solid rgba(227, 6, 19, 0.25); outline-offset: 0; border-color: var(--brand); }
.seminar-feld-hilfe { display: block; margin: 3px 0 0; font-size: 0.78rem; }
.seminar-zeile .titel { color: var(--text); }
.seminar-seite-nav button.mehr { color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.seminar-seite-nav button.mehr .st.pfeil { background: transparent; color: var(--muted); font-size: 0.8rem; padding: 0; }
.seminar-seite-nav button.selten { padding-left: 22px; }
@media (max-width: 760px) {
  .seminar-seite-nav button.selten { padding-left: 10px; }
}

/* ===== 1.28: Seminare – Erinnerung vor dem Seminar (static/js/seminar-erinnerung.js) ===== */
.se-karte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border); border-left: 5px solid #9aa5b1; border-radius: 10px; padding: 10px 14px; background: #fff; margin: 12px 0 0; }
.se-karte.an { border-left-color: var(--green); }
.se-icon { font-size: 1.2rem; }
.se-text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.se-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.se-warnung { color: #a4322a; font-size: 0.88rem; margin-top: 4px; }
.mcc-dialog.mcc-dialog-breit.se-dialog { width: min(640px, 100%); }
.se-an { flex-wrap: wrap; margin-bottom: 12px; }
.se-an select, .mcc-dialog .sn-erinnerung-block select { width: auto; flex: 0 0 auto; display: inline-block; margin: 0 4px; padding: 4px 8px; }
.se-vorschau { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-top: 4px; }
.se-vorschau summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.se-vorschau-betreff { font-weight: 600; margin: 8px 0 4px; font-size: 0.9rem; }
.se-vorschau pre { white-space: pre-wrap; font: inherit; font-size: 0.9rem; background: #f6f7f9; border-radius: 6px; padding: 10px 12px; margin: 0 0 6px; max-height: 260px; overflow: auto; }
.sn-erinnerung-block .mcc-dialog-haken { flex-wrap: wrap; }

/* ===== 1.31: „Personen & Zugänge“ – ein Modul (static/js/personen-modul.js) ===== */
.pm { --pm-radius: 16px; --pm-linie: #e6eaef; --pm-flaeche: #fff; --pm-weich: #f3f5f8; --pm-tinte: #16202b; --pm-leise: #66727f; max-width: 1080px; margin: 0 auto 18px; color: var(--pm-tinte); }
.pm button { font: inherit; }
.pm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }
.pm-kopf h2 { margin: 0; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.15; }
.pm-kopf p { margin: 4px 0 0; color: var(--pm-leise); }
.pm-haupt { background: var(--brand); color: #fff; border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 650; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 16px rgba(227, 6, 19, 0.22); transition: transform 0.12s, box-shadow 0.12s; }
.pm-haupt:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(227, 6, 19, 0.28); }
.pm-haupt.klein { padding: 9px 16px; font-size: 0.94rem; box-shadow: none; }
.pm-reiter { display: inline-flex; gap: 4px; padding: 4px; background: #e9edf2; border-radius: 14px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; }
.pm-reiter button { background: transparent; color: var(--pm-leise); border: 0; border-radius: 11px; padding: 9px 16px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 0; }
.pm-reiter button:hover { color: var(--pm-tinte); background: rgba(255, 255, 255, 0.55); }
.pm-reiter button.aktiv { background: #fff; color: var(--pm-tinte); box-shadow: 0 1px 3px rgba(22, 32, 43, 0.14); }
.pm-zahl { background: #dfe5eb; color: #47525e; border-radius: 999px; padding: 0 8px; font-size: 0.78rem; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pm-reiter button.aktiv .pm-zahl { background: #fdecee; color: var(--brand); }
.pm-inhalt { min-width: 0; }
.pm-werkzeug { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pm-suchfeld { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--pm-linie); border-radius: 14px; padding: 0 14px; min-height: 50px; box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04); }
.pm-suchfeld:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.pm-suchfeld input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.02rem; padding: 0; margin: 0; box-shadow: none; }
.pm-werkzeug select { flex: 0 1 220px; width: auto; border: 1px solid var(--pm-linie); border-radius: 14px; background: #fff; padding: 0 14px; min-height: 50px; font: inherit; margin: 0; }
.pm-pillen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pm-pille { background: #fff; color: var(--pm-tinte); border: 1px solid var(--pm-linie); border-radius: 999px; padding: 7px 8px 7px 14px; font-size: 0.92rem; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 0; }
.pm-pille span { background: var(--pm-weich); border-radius: 999px; padding: 0 8px; font-size: 0.8rem; font-weight: 700; color: #47525e; font-variant-numeric: tabular-nums; }
.pm-pille:hover { border-color: #b9c2cc; }
.pm-pille.aktiv { background: var(--pm-tinte); color: #fff; border-color: var(--pm-tinte); }
.pm-pille.aktiv span { background: rgba(255, 255, 255, 0.18); color: #fff; }
.pm-hinweis { color: var(--pm-leise); font-size: 0.88rem; margin: 8px 2px 10px; }
.pm-liste { background: #fff; border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); overflow: hidden; box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04); }
.pm-zeile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; color: inherit; border: 0; border-radius: 0; padding: 12px 16px; cursor: pointer; min-height: 0; }
.pm-zeile + .pm-zeile { border-top: 1px solid var(--pm-linie); }
.pm-zeile:hover { background: #f8fafb; }
.pm-zeile.offen { background: #fff5f5; box-shadow: inset 3px 0 0 var(--brand); }
.pm-avatar { flex: 0 0 auto; display: inline-flex; }
.pm-avatar .chat-avatar { width: 44px; height: 44px; font-size: 1rem; }
.pm-avatar.gross .chat-avatar { width: 64px; height: 64px; font-size: 1.4rem; }
.pm-wer { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-wer strong { font-size: 1.02rem; font-weight: 650; overflow-wrap: anywhere; }
.pm-unter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.84rem; color: var(--pm-leise); }
.pm-login { font-variant-numeric: tabular-nums; }
.pm-login::after { content: "·"; margin-left: 6px; color: #b3bcc6; }
.pm-rolle { background: #16202b; color: #fff; border-radius: 6px; padding: 0 7px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.pm-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2f6; color: #33404d; border-radius: 999px; padding: 1px 10px; font-size: 0.8rem; font-weight: 550; white-space: nowrap; }
.pm-chip.auto { background: transparent; border: 1px dashed #c3ccd5; color: var(--pm-leise); }
.pm-chip.mehr { background: transparent; color: var(--pm-leise); padding: 1px 4px; }
.pm-chip.gross { font-size: 0.92rem; padding: 5px 12px; }
.pm-chip.gross button { background: transparent; color: #66727f; border: 0; padding: 0 0 0 4px; font-size: 1.1rem; line-height: 1; cursor: pointer; min-height: 0; border-radius: 50%; }
.pm-chip.gross button:hover { color: var(--brand); }
.pm-leer { color: #9aa5b1; font-style: italic; }
.pm-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; font-weight: 650; white-space: nowrap; }
.pm-status.gut { background: #e4f5ea; color: #17703d; }
.pm-status.wartet { background: #fdf3d7; color: #8a6400; }
.pm-status.warn { background: #fde8e6; color: #a4322a; }
.pm-status.aus { background: #eef1f4; color: #66727f; }
.pm-pfeil { flex: 0 0 auto; color: #b3bcc6; font-size: 1.3rem; line-height: 1; }
.pm-leer-karte { background: #fff; border: 1px dashed #c9d1d9; border-radius: var(--pm-radius); padding: 34px 20px; text-align: center; }
.pm-leer-karte p { color: var(--pm-leise); margin: 6px 0 14px; }
.pm-link { background: transparent; border: 0; color: var(--brand); font-weight: 600; cursor: pointer; padding: 0; text-decoration: none; min-height: 0; }
.pm-link:hover { text-decoration: underline; }
.pm-reiter-kopf { margin: 0 2px 12px; }
.pm-reiter-kopf p { margin: 0 0 8px; color: var(--pm-leise); max-width: 70ch; }
.pm-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pm-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pm-karte { display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; color: inherit; border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); padding: 16px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04); min-height: 0; }
.pm-karte:hover { border-color: #b9c2cc; transform: translateY(-1px); }
.pm-karte-icon { font-size: 1.6rem; flex: 0 0 auto; }
.pm-karte > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-karte small { color: var(--pm-leise); font-size: 0.86rem; }
/* die bisherigen Bereiche (Gruppen, Aufräumen) eingebettet */
.pm-alt { max-width: 1080px; margin: 0 auto; border-radius: 16px; }
/* Seitenleiste */
.pm-leiste-huelle { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.pm-leiste-schatten { position: absolute; inset: 0; background: rgba(22, 32, 43, 0.28); opacity: 0; transition: opacity 0.18s; }
.pm-leiste { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; box-shadow: -14px 0 40px rgba(22, 32, 43, 0.18); transform: translateX(102%); transition: transform 0.2s ease-out; overflow-y: auto; padding: 22px 22px 28px; color: #16202b; }
.pm-leiste-huelle.offen { pointer-events: auto; }
.pm-leiste-huelle.offen .pm-leiste-schatten { opacity: 1; }
.pm-leiste-huelle.offen .pm-leiste { transform: translateX(0); }
.pm-leiste-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pm-leiste-kopf > div { flex: 1 1 auto; min-width: 0; }
.pm-leiste-kopf h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pm-leiste-kopf p { margin: 2px 0 0; color: #66727f; font-size: 0.88rem; }
.pm-zu { flex: 0 0 auto; background: #f3f5f8; color: #47525e; border: 0; border-radius: 50%; width: 36px; height: 36px; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; min-height: 0; }
.pm-zu:hover { background: #e6eaef; }
.pm-leiste section { border-top: 1px solid #e6eaef; padding: 16px 0 4px; margin-top: 14px; }
.pm-leiste h4 { margin: 0 0 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: #66727f; }
.pm-leiste h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.84rem; margin-left: 4px; }
.pm-feldzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pm-feldzeile > span, .pm-feldzeile > label { flex: 0 0 110px; color: #66727f; font-size: 0.9rem; margin: 0; font-weight: 400; }
.pm-feldzeile > strong { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pm-feldzeile input, .pm-feldzeile select { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; border: 1px solid #e6eaef; border-radius: 10px; padding: 8px 10px; font: inherit; background: #fff; }
.pm-feldzeile input:focus, .pm-feldzeile select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.pm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pm-dazu { width: 100%; border: 1px dashed #c3ccd5; border-radius: 10px; padding: 8px 10px; background: #fff; color: #47525e; font: inherit; margin: 0; }
.pm-zugang-stand { margin: 0 0 12px; line-height: 1.6; }
.pm-zugang-stand .pm-status { margin-right: 6px; }
.pm-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.pm-neben { background: #fff; color: #16202b; border: 1px solid #d5dbe2; border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; font-weight: 550; cursor: pointer; min-height: 0; }
.pm-neben:hover { border-color: #9aa5b1; background: #f8fafb; }
.pm-neben.gefahr { color: #a4322a; border-color: #f0c9c5; margin-left: auto; }
.pm-neben.gefahr:hover { background: #fde8e6; }
.pm-klein { color: #66727f; font-size: 0.84rem; margin: 6px 0 0; line-height: 1.45; }
.pm-leiste-fuss { display: flex; flex-direction: column; gap: 2px; }
.pm-leiste-fuss small { color: #9aa5b1; }
/* Fenster „Neues Mitglied“ */
.mcc-dialog.mcc-dialog-breit.pm-dialog { width: min(680px, 100%); }
.pm-schritt { display: flex; gap: 14px; padding: 14px 0 6px; border-top: 1px solid #e6eaef; margin-top: 10px; }
.pm-schritt:first-of-type { border-top: 0; margin-top: 0; }
.pm-nr { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #16202b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.88rem; }
.pm-schritt-inhalt { flex: 1 1 auto; min-width: 0; }
.pm-schritt-inhalt h4 { margin: 3px 0 10px; font-size: 1rem; }
.pm-schritt-inhalt h4 small { font-weight: 400; color: #66727f; font-size: 0.84rem; margin-left: 4px; }
.pm-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
.pm-raster .mcc-dialog-feld { margin: 0; }
.pm-raster input, .pm-raster select { width: 100%; }
.pm-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-wahl-chip { margin: 0; cursor: pointer; font-weight: 500; }
.pm-wahl-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pm-wahl-chip span { display: inline-block; border: 1px solid #d5dbe2; border-radius: 999px; padding: 7px 14px; background: #fff; color: #33404d; font-size: 0.92rem; transition: background 0.12s, border-color 0.12s; }
.pm-wahl-chip:hover span { border-color: #9aa5b1; }
.pm-wahl-chip input:checked + span { background: #16202b; border-color: #16202b; color: #fff; }
.pm-wahl-chip input:checked + span::before { content: "✓ "; }
.pm-wahl-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.22); }
.pm-schalter { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 0 0 10px; cursor: pointer; }
.pm-schalter input { width: 20px; height: 20px; margin: 0; }
.pm-gleich { background: #fdf6dc; border: 1px solid #ecd98a; border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 0.92rem; }
.pm-gleich-liste { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; }
@media (max-width: 640px) {
  .pm-kopf h2 { font-size: 1.4rem; }
  .pm-haupt { width: 100%; }
  .pm-reiter { display: flex; }
  .pm-werkzeug select { flex: 1 1 100%; }
  .pm-zeile { flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
  .pm-wer { flex-basis: calc(100% - 60px); }
  .pm-status { margin-left: 58px; }
  .pm-zeile .pm-pfeil { display: none; }
  .pm-leiste { width: 100%; padding: 18px 16px 28px; }
  .pm-feldzeile > span, .pm-feldzeile > label { flex-basis: 92px; }
  .pm-neben.gefahr { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pm-leiste, .pm-leiste-schatten, .pm-haupt, .pm-karte { transition: none; } }

/* ===== 1.32: Personen & Zugänge – Reiter „Gruppen“ ===== */
.pm-gkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.pm-gkarte { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; background: #fff; color: #16202b; border: 1px solid #e6eaef; border-radius: 16px; padding: 16px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04); min-height: 132px; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.pm-gkarte:hover { border-color: #b9c2cc; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22, 32, 43, 0.07); }
.pm-gkarte.offen { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.pm-gkarte-kopf { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.pm-gkarte-kopf strong { flex: 1 1 60%; min-width: 0; font-size: 1.08rem; font-weight: 650; overflow-wrap: break-word; hyphens: auto; }
.pm-gkarte-kopf .pm-gkarte-zahl { margin-left: auto; }
.pm-gkarte-zahl { flex: 0 0 auto; background: #f3f5f8; color: #33404d; border-radius: 999px; padding: 2px 11px; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pm-marke { display: inline-block; background: #eef2f6; color: #47525e; border-radius: 6px; padding: 0 7px; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; }
.pm-marke.auto { background: transparent; border: 1px dashed #c3ccd5; color: #66727f; }
.pm-stapel { display: inline-flex; align-items: center; padding-left: 8px; min-height: 30px; }
.pm-avatar.mini .chat-avatar { width: 30px; height: 30px; font-size: 0.74rem; border: 2px solid #fff; }
.pm-stapel .pm-avatar.mini { margin-left: -8px; }
.pm-stapel-mehr { margin-left: 6px; color: #66727f; font-size: 0.84rem; font-weight: 600; }
.pm-gkarte-frei { font-size: 0.86rem; color: #66727f; margin-top: auto; line-height: 1.35; }
.pm-gkarte-frei strong { color: #33404d; font-weight: 600; }
.pm-gkarte-frei.leer { color: #9aa5b1; }
.pm-erweitert { margin: 16px 2px 10px; font-size: 0.92rem; }
.pm-gruppe-symbol { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; background: #f3f5f8; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.pm-dazu-suche { position: relative; margin-bottom: 10px; }
.pm-dazu-suche input { width: 100%; border: 1px dashed #c3ccd5; border-radius: 10px; padding: 9px 12px; font: inherit; margin: 0; background: #fff; }
.pm-dazu-suche input:focus { outline: 0; border-style: solid; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12); }
.pm-treffer { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.pm-treffer:not(:empty) { border: 1px solid #e6eaef; margin-top: 6px; }
.pm-treffer-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: #fff; color: #16202b; border: 0; border-radius: 0; padding: 9px 12px; font: inherit; cursor: pointer; min-height: 0; }
.pm-treffer-zeile + .pm-treffer-zeile { border-top: 1px solid #e6eaef; }
.pm-treffer-zeile span { color: var(--brand); font-size: 0.84rem; font-weight: 600; }
button.pm-treffer-zeile:hover { background: #fff5f5; }
.pm-treffer-zeile.drin { color: #9aa5b1; cursor: default; }
.pm-treffer-zeile.drin span { color: #9aa5b1; font-weight: 400; }
.pm-mitglieder { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.pm-mitglieder li { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.pm-mitglieder li.pm-leer { padding: 6px 0; }
.pm-mitglied-name { flex: 1 1 auto; min-width: 0; text-align: left; background: transparent; color: #16202b; border: 0; padding: 0; font: inherit; font-weight: 550; cursor: pointer; overflow-wrap: anywhere; min-height: 0; }
.pm-mitglied-name:hover { color: var(--brand); text-decoration: underline; }
.pm-status.klein { padding: 2px 8px; font-size: 0.78rem; }
.pm-mitglied-weg { flex: 0 0 auto; background: transparent; color: #9aa5b1; border: 0; border-radius: 50%; width: 28px; height: 28px; padding: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; min-height: 0; }
.pm-mitglied-weg:hover { background: #fde8e6; color: #a4322a; }
.pm-bereiche { list-style: none; margin: 0 0 6px; padding: 0; }
.pm-bereiche li { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.pm-bereich-icon { flex: 0 0 24px; text-align: center; }
.pm-bereiche small { display: block; color: #66727f; font-size: 0.84rem; line-height: 1.4; margin-top: 1px; }
.pm-schalter.klein { font-weight: 500; font-size: 0.94rem; margin: 8px 0; }
.pm-schalter.klein input { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .pm-gkarte { transition: none; } }

/* ===== 1.33: Personen & Zugänge – „Was darf diese Person – und warum?“ ===== */
.pm-rechte-satz { margin: 0 0 10px; color: #33404d; line-height: 1.45; }
.pm-rechte-ausnahme { display: inline-block; background: #fdf3d7; color: #8a6400; border-radius: 999px; padding: 1px 10px; font-size: 0.8rem; font-weight: 650; margin-left: 4px; }
.pm-rechte { --pm-linie: #e6eaef; --pm-weich: #f3f5f8; --pm-tinte: #16202b; --pm-leise: #66727f; color: var(--pm-tinte); }
.mcc-dialog.mcc-dialog-breit.pm-dialog.pm-rechte-dialog { width: min(760px, 100%); }
.pm-rechte-wer { margin: -4px 0 14px; color: var(--pm-leise); line-height: 1.9; }
.pm-rechte-wer strong { color: var(--pm-tinte); }
.pm-rechte-werkzeug { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.pm-rechte-werkzeug .pm-suchfeld { flex: 0 0 auto; min-height: 46px; }
.pm-rechte-werkzeug .pm-pillen { margin: 0; }
.pm-rechte-liste { max-height: min(54vh, 560px); overflow-y: auto; border: 1px solid var(--pm-linie); border-radius: 14px; background: #fff; }
.pm-rb-block { border-top: 1px solid var(--pm-linie); }
.pm-rb-block:first-child { border-top: 0; }
.pm-rb-block > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; }
.pm-rb-block > summary::-webkit-details-marker { display: none; }
.pm-rb-block > summary::after { content: "›"; margin-left: 4px; color: #9aa5b1; font-size: 1.2rem; transition: transform 0.15s; }
.pm-rb-block[open] > summary::after { transform: rotate(90deg); }
.pm-rb-block > summary:hover { background: #f8fafb; }
.pm-rb-block > summary strong { flex: 1 1 auto; min-width: 0; }
.pm-rb-block[open] > summary { background: var(--pm-weich); }
.pm-rb-stand { flex: 0 0 auto; font-size: 0.8rem; font-weight: 650; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.pm-rb-stand.gut { background: #e4f5ea; color: #17703d; }
.pm-rb-stand.teil { background: #fdf3d7; color: #8a6400; }
.pm-rb-stand.aus { background: #eef1f4; color: #66727f; }
.pm-rb { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px 9px calc(14px + var(--pm-tiefe, 0) * 20px); border-top: 1px solid #f0f2f5; }
.pm-rb-block.einzeln .pm-rb { border-top: 0; padding-top: 12px; padding-bottom: 12px; }
.pm-rb-icon { flex: 0 0 24px; text-align: center; }
.pm-rb-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-rb-text strong { font-weight: 600; overflow-wrap: anywhere; }
.pm-rb.stufe-gesperrt .pm-rb-text strong { color: #66727f; font-weight: 550; }
.pm-rb-grund { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pm-rb-grund small { color: #66727f; font-size: 0.84rem; line-height: 1.45; }
.pm-rb-grund small.pm-rb-sperre { color: #8a4b12; }
.pm-rb-grund small.pm-rb-sperre strong { color: inherit; font-weight: 700; }
.pm-rb-knopf { background: #fff; color: var(--brand); border: 1px solid #f0c9c5; border-radius: 999px; padding: 2px 12px; font: inherit; font-size: 0.84rem; font-weight: 650; cursor: pointer; min-height: 0; }
.pm-rb-knopf:hover { background: #fff3f2; border-color: var(--brand); }
.pm-rb .pm-status { margin-top: 1px; }
/* Reiter „Rechte“: Freigaben, die nicht wirken */
.pm-sperren { margin-top: 22px; background: #fff; border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); padding: 18px 20px; }
.pm-sperren h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.pm-sperren > p { margin: 0 0 12px; color: var(--pm-leise); max-width: 78ch; line-height: 1.5; }
.pm-sperren > p.pm-hinweis, .pm-sperren > p.pm-sperren-gut { margin: 0; }
.pm-sperren-gut { color: #17703d !important; font-weight: 600; }
.pm-sperre { border-top: 1px solid var(--pm-linie); padding: 12px 0 4px; }
.pm-sperre-was { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pm-sperre-wer { color: var(--pm-leise); font-size: 0.92rem; margin-top: 6px; line-height: 1.6; }
@media (max-width: 600px) {
  .pm-rb { padding-left: calc(10px + var(--pm-tiefe, 0) * 12px); padding-right: 10px; }
  .pm-rechte-liste { max-height: 50vh; }
}
.pm-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff8e6; color: #5c4400; border: 1px solid #f1d88f; border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; cursor: pointer; line-height: 1.4; }
.pm-banner:hover { background: #fff3d1; border-color: #e3c05c; }
.pm-banner > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.pm-banner strong { color: #3f2f00; }
.pm-banner-los { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.pm-sperren.offen { border-color: #f1d88f; background: #fffdf6; }
.pm-sperren-fuss { margin-top: 14px; }
.pm-sperren-fuss.klein { color: var(--pm-leise); font-size: 0.88rem; margin: 14px 0 0; border-top: 1px solid var(--pm-linie); padding-top: 12px; }
.pm-sperren > p.pm-sperren-fuss.klein:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pm-rb-grund small em { font-style: normal; font-weight: 650; }

/* ===== 1.34: Personen & Zugänge – Rechte je Gruppe und Grundstufe ===== */
.pm-abschnitt { margin: 26px 2px 10px; font-size: 1.02rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pm-abschnitt small { font-weight: 400; color: var(--pm-leise); font-size: 0.9rem; }
.pm-qkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.pm-qkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: #fff; color: inherit; border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); padding: 14px 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(22, 32, 43, 0.04); transition: transform 0.12s, border-color 0.12s; min-height: 0; }
.pm-qkarte:hover { border-color: #b9c2cc; transform: translateY(-1px); }
.pm-qkarte-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.pm-qkarte-kopf strong { overflow-wrap: anywhere; }
.pm-qkarte-zahl { background: #e4f5ea; color: #17703d; border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; font-weight: 650; }
.pm-qkarte-zahl.leer { background: #eef1f4; color: #66727f; }
.pm-qkarte small { color: var(--pm-leise); font-size: 0.84rem; }
.pm-bz { align-items: center; }
.pm-bz .pm-rb-text strong { color: #66727f; font-weight: 550; }
.pm-bz.an .pm-rb-text strong { color: #16202b; font-weight: 650; }
.pm-bz-haken { flex: 0 0 auto; position: relative; display: inline-flex; width: 42px; height: 26px; cursor: pointer; margin: 0; }
.pm-bz-haken input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.pm-bz-haken span { width: 42px; height: 26px; border-radius: 999px; background: #cfd6de; transition: background 0.15s; position: relative; }
.pm-bz-haken span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 32, 43, 0.3); transition: transform 0.15s; }
.pm-bz-haken input:checked + span { background: #1f9d55; }
.pm-bz-haken input:checked + span::after { transform: translateX(16px); }
.pm-bz-haken input:focus-visible + span { outline: 3px solid rgba(227, 6, 19, 0.35); outline-offset: 2px; }
.pm-bz-haken input:disabled { cursor: default; }
.pm-bz-haken input:disabled + span { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .pm-bz-haken span, .pm-bz-haken span::after, .pm-qkarte { transition: none; } }

/* ===== 1.35: Personen & Zugänge – Reiter „Aufräumen“ ===== */
.pm-auf { background: #fff; border: 1px solid var(--pm-linie); border-radius: var(--pm-radius); padding: 18px 20px 10px; margin-bottom: 14px; }
.pm-auf h3 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.pm-auf > p { margin: 0 0 10px; color: var(--pm-leise); max-width: 78ch; line-height: 1.5; }
.pm-auf-zeile { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--pm-linie); padding: 12px 0; flex-wrap: wrap; }
.pm-auf-wer { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.pm-auf-wer strong { overflow-wrap: anywhere; }
.pm-auf-wer small { color: var(--pm-leise); font-size: 0.86rem; }
.pm-auf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-auf-knoepfe .pm-neben.gefahr { margin-left: 0; }
.pm-auf-dublette { border-top: 1px solid var(--pm-linie); padding: 14px 0; }
.pm-auf-wahl { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.pm-auf-eintrag { display: flex; align-items: flex-start; gap: 10px; background: var(--pm-weich); border-radius: 10px; padding: 9px 12px; cursor: pointer; margin: 0; font-weight: 400; line-height: 1.5; }
.pm-auf-eintrag input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; }
.pm-auf-eintrag:has(input:checked) { background: #e9f6ee; box-shadow: inset 0 0 0 1px #9fd4b3; }
.pm-auf-treffer { margin-top: 10px; border: 1px solid #e6eaef; min-height: 0; }
.pm-auf-treffer:empty { border: 0; }
.pm-auf-treffer .pm-klein { padding: 8px 12px; margin: 0; }

/* ===== 1.37: Checkliste ausfüllen – Prüfpunkte je Behälter zusammengefasst ===== */
.cl-gruppe { --cl-gf: #1f6fb2; --cl-gf-hell: #e8f1f9; margin: 0 0 16px; border-left: 5px solid var(--cl-gf); border-radius: 12px; background: var(--cl-gf-hell); padding: 0 8px 4px 8px; }
.cl-gruppe.farbe-0 { --cl-gf: #b7791f; --cl-gf-hell: #fbf3e2; }
.cl-gruppe.lose { --cl-gf: #7a8794; --cl-gf-hell: #eef1f4; }
.cl-gruppe-kopf { position: sticky; top: -14px; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--cl-gf-hell); padding: 10px 6px 8px; margin: 0 -8px 2px -8px; border-radius: 0 12px 0 0; border-bottom: 1px solid rgba(22, 32, 43, 0.08); }
.cl-gruppe-name { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cl-gruppe-name strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.cl-gruppe-name small { color: var(--muted); font-size: 0.8rem; }
.cl-gruppe-zahl { flex: 0 0 auto; background: #fff; border: 1px solid rgba(22, 32, 43, 0.14); border-radius: 999px; padding: 2px 10px; font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-gruppe.fertig .cl-gruppe-zahl { background: var(--green); border-color: var(--green); color: #fff; }
.cl-gruppe.mit-mangel .cl-gruppe-zahl { background: var(--red); border-color: var(--red); color: #fff; }
.cl-gruppe-ok { flex: 0 0 auto; background: #fff; color: var(--green); border: 2px dashed #9fd4b4; border-radius: 999px; padding: 4px 12px; font-size: 0.86rem; font-weight: 700; min-height: 0; }
.cl-gruppe .cl-feld { margin-bottom: 8px; scroll-margin-top: 64px; }
.cl-gruppe .cl-feld:last-child { margin-bottom: 4px; }

/* ===== 1.38: Kisten-Aufkleber (Euroboxen, PSA-Kisten) ===== */
.mcc-dialog.mcc-dialog-breit.ak-dialog { width: min(980px, 100%); }
.mcc-dialog.mcc-dialog-breit.ak-dialog.ak-auswahl { width: min(760px, 100%); }
.ak-zwei { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; }
.ak-form label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 0.9rem; }
.ak-form > label:first-child { margin-top: 0; }
.ak-form select, .ak-form input[type="number"], .ak-form input:not([type]), .ak-form textarea { width: 100%; box-sizing: border-box; }
.ak-form textarea { font-family: inherit; font-size: 0.92rem; line-height: 1.4; resize: vertical; min-height: 110px; border: 1px solid #d5dbe1; border-radius: 10px; padding: 8px 10px; }
.ak-form textarea.ak-nur-lesen { background: #f3f5f7; color: #5b6570; }
.ak-masse { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ak-masse label { margin-top: 10px; }
.ak-klein { color: var(--muted); font-size: 0.82rem; line-height: 1.4; margin: 6px 0 0; }
.ak-wahl { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.ak-form label.ak-wahl-eintrag, .ak-haken label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; cursor: pointer; min-height: 30px; }
.ak-wahl-eintrag input, .ak-haken input, .ak-alle input, .ak-zeile-haken input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.ak-wahl-eintrag small { color: var(--muted); }
.ak-haken { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.ak-vorschau { min-width: 0; position: sticky; top: 0; }
.ak-vorschau-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ak-vorschau-kopf span { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.ak-svg-rahmen { background: #e9edf1; border-radius: 12px; padding: 14px; display: flex; justify-content: center; }
.ak-svg { display: block; width: 100%; height: auto; box-shadow: 0 2px 10px rgba(22, 32, 43, 0.18); background: #fff; }
.ak-hinweis { background: #fff6e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; font-size: 0.88rem; line-height: 1.4; }
.ak-knoepfe { flex-wrap: wrap; }
.ak-knoepfe .ak-luecke { flex: 1 1 auto; }
.ak-werkzeug { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ak-werkzeug .ak-alle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; cursor: pointer; }
.ak-werkzeug input[type="search"] { flex: 1 1 160px; min-width: 0; }
.ak-sammel { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; }
.ak-sammel select { flex: 1 1 auto; min-width: 0; }
.ak-liste { max-height: min(52vh, 460px); overflow: auto; border: 1px solid #e3e8ed; border-radius: 12px; }
.ak-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid #edf0f3; flex-wrap: wrap; }
.ak-zeile:first-child { border-top: 0; }
.ak-zeile.an { background: #eef6ff; }
.ak-zeile-haken { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; margin: 0; font-weight: 400; cursor: pointer; }
.ak-zeile-name, .ak-zeile-mass { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ak-zeile-name strong { overflow-wrap: anywhere; color: #16202b; font-size: 0.98rem; }
.ak-zeile-name small, .ak-zeile-mass small { color: var(--muted); font-size: 0.8rem; }
.ak-zeile-mass { flex: 0 1 230px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ak-zeile-warn { cursor: help; }
@media (max-width: 760px) {
  .ak-zwei { grid-template-columns: 1fr; }
  .ak-vorschau { position: static; order: -1; }
  .ak-zeile-mass { flex: 1 1 100%; padding-left: 28px; }
}

/* ===== 1.39: Seminare – Schwimmkurs (eigener/bestehender Kurs, Übernahme auf Knopfdruck) ===== */
.ss-wahlen { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; max-width: 760px; }
.ss-wahl { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #dfe5ea; border-radius: 14px; padding: 12px 14px; margin: 0; font-weight: 400; cursor: pointer; background: #fff; }
.ss-wahl.an { border-color: #1f6fb2; box-shadow: inset 0 0 0 1px #1f6fb2; background: #f3f8fd; }
.ss-wahl.fest { cursor: default; }
.ss-wahl.fest:not(.an) { opacity: 0.55; }
.ss-wahl input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.ss-wahl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; line-height: 1.4; }
.ss-wahl-text strong { color: #16202b; }
.ss-wahl-text small { color: var(--muted); font-size: 0.86rem; }
.ss-wahl-text select { margin-top: 8px; width: 100%; max-width: 520px; }
.ss-stand { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; border-radius: 14px; background: #eef6ff; border: 1px solid #cfe2f5; padding: 14px 16px; margin: 12px 0 4px; max-width: 760px; }
.ss-stand-kurs { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.ss-stand-titel { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.ss-stand-kurs small, .ss-stand-zahl small { color: #4b5a68; font-size: 0.86rem; }
.ss-stand-zahl { display: flex; flex-direction: column; align-items: flex-start; font-variant-numeric: tabular-nums; }
.ss-stand-zahl strong { font-size: 1.25rem; line-height: 1.1; }
.ss-stand-zahl.offen strong { color: #b45309; }
.ss-stand-zahl.fertig strong { color: var(--green); }
.ss-stand-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1 100%; }
.ss-ok { color: var(--green); font-weight: 600; }
.ss-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: #fff6e0; border: 1px solid #f0d58a; border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; line-height: 1.4; }
.ss-banner span { flex: 1 1 240px; }
.mcc-dialog.mcc-dialog-breit.ss-dialog { width: min(760px, 100%); }
.ss-liste { max-height: min(56vh, 520px); overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.ss-zeile { border: 1px solid #e3e8ed; border-radius: 12px; padding: 10px 12px; background: #fff; }
.ss-zeile.an { border-color: #9fc4e6; background: #f6fafe; }
.ss-zeile.offen { border-color: #f0d58a; background: #fffaf0; }
.ss-zeile-kopf { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; }
.ss-zeile-kopf > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ss-zeile-kopf small { color: var(--muted); }
.ss-zeile-kopf strong, .ss-kand strong { color: #16202b; }
.ss-zeile-kopf input, .ss-kand input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.ss-kandidaten { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0 28px; }
.ss-kand { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; border-radius: 10px; padding: 7px 10px; background: #f3f5f7; line-height: 1.35; }
.ss-kand.an { background: #e4f0fb; box-shadow: inset 0 0 0 1px #9fc4e6; }
.ss-kand input { margin-top: 2px; }
.ss-kand > span { min-width: 0; overflow-wrap: anywhere; }
.ss-kand small { display: block; color: var(--muted); font-size: 0.84rem; }
.ss-kand small.ss-grund { color: #1b6b3a; }
.ss-kand small.ss-grund.schwach { color: #b45309; }
.ss-marke { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 0.76rem; font-weight: 700; background: #e3e8ed; color: #33404c; white-space: nowrap; }
.ss-marke.ok { background: #dcf3e4; color: #1b6b3a; }
.ss-marke.neu { background: #e4ecf6; color: #24507d; }
.ss-marke.warn { background: #fdecc8; color: #8a4b06; }
.ss-mehr { margin-top: 10px; font-size: 0.9rem; }
.ss-mehr summary { cursor: pointer; color: var(--muted); }
.ss-mehr p { margin: 6px 0 0; color: var(--muted); line-height: 1.5; }
.ss-knoepfe { align-items: center; flex-wrap: wrap; }
.ss-summe { flex: 1 1 200px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ss-kurs-hinweis { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: #eef6ff; border: 1px solid #cfe2f5; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; line-height: 1.45; }
.ss-kurs-hinweis span { flex: 1 1 280px; }
@media (max-width: 640px) {
  .ss-kandidaten { margin-left: 0; }
  .ss-stand-knoepfe button { flex: 1 1 100%; }
}

/* ===== 1.40: Jedes Seminar ist ein Kurs – Bestand-Helfer ===== */
.ss-bestand { max-width: 760px; margin: 14px 0 6px; border: 1px solid #e3e8ed; border-radius: 12px; padding: 8px 14px; }
.ss-bestand summary { cursor: pointer; color: #33404c; font-weight: 600; }
.ss-bestand[open] summary { margin-bottom: 4px; }
.ss-bestand-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 8px; }
.ss-bestand-zeile select { flex: 1 1 320px; min-width: 0; }

/* ===== 1.41: Kurs-Einstellungen und Kinder im Kurs auf der Seminar-Seite ===== */
.sk-karte { max-width: 760px; margin: 14px 0 0; border: 1px solid #e3e8ed; border-radius: 14px; padding: 12px 16px 14px; background: #fff; }
.sk-karte h4 { margin: 0 0 8px; font-size: 1rem; }
.sk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; border-top: 1px solid #eef1f4; flex-wrap: wrap; }
.sk-zeile:first-of-type { border-top: 0; }
.sk-zeile > label:first-child { flex: 0 0 120px; font-weight: 600; font-size: 0.92rem; padding-top: 6px; }
.sk-zeile > select, .sk-zeile > span, .sk-zeile > div { flex: 1 1 240px; min-width: 0; }
.sk-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-betrag input { width: 80px; }
.sk-haken { display: flex; gap: 6px 10px; flex-wrap: wrap; }
.sk-haken label, .sk-stufe { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; border: 1px solid #dfe5ea; border-radius: 999px; padding: 4px 12px 4px 8px; background: #fff; }
.sk-stufe.an { border-color: #1f6fb2; background: #eef6ff; }
.sk-haken input { width: 16px; height: 16px; margin: 0; }
.sk-tabelle { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.sk-tabelle th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.82rem; padding: 4px 6px; border-bottom: 1px solid #e3e8ed; }
.sk-tabelle td { padding: 7px 6px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.sk-tabelle td small { color: var(--muted); display: block; }
.sk-marke { color: var(--muted); }
.sk-marke.warn { color: #b45309; }
.sk-stufe-marke { display: inline-block; background: #dcf3e4; color: #1b6b3a; border-radius: 999px; padding: 1px 8px; font-size: 0.8rem; margin: 1px 0; }
.sk-aktionen { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .sk-zeile > label:first-child { flex: 1 1 100%; padding-top: 0; }
  .sk-tabelle th:nth-child(2), .sk-tabelle td:nth-child(2) { display: none; }
}

/* ===== 1.42: Anmeldungen – Kurs-Stand ===== */
.sa-merker.gruen { background: #dcf3e4; color: #1b6b3a; }
.sa-merker-kurs { cursor: pointer; }

/* ===== 1.43: Kurs-Auswahl – Seminare und ältere Kurse getrennt ===== */
.kachel-gruppe-titel { flex: 1 1 100%; width: 100%; grid-column: 1 / -1; color: var(--muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 10px 0 2px; }

/* ===== 1.44: Inventarliste – Anschaffungspreis direkt in der Zeile ===== */
.inv-preis-zelle { white-space: nowrap; }
.inv-preis-feld { display: inline-flex; align-items: center; gap: 4px; }
input.inv-preis-eingabe { width: 5.6rem; min-width: 0; margin: 0; padding: 5px 7px; text-align: right; font-variant-numeric: tabular-nums; font-size: 0.95rem; border: 1px solid var(--border, #d5d9e0); border-radius: 6px; background: var(--card, #fff); color: inherit; }
input.inv-preis-eingabe:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
input.inv-preis-eingabe.offen { border-color: #d9a200; }
input.inv-preis-eingabe.fehler { border-color: #c62828; background: #fdecec; color: #7a1010; }
.inv-preis-euro { color: var(--muted); }
.inv-preis-stand { display: inline-block; width: 1.1em; text-align: center; font-weight: 700; }
.inv-preis-stand.ok { color: #1b7a3d; }
.inv-preis-stand.fehler { color: #c62828; cursor: help; }
.inv-preis-stand.laeuft { color: var(--muted); }
.inv-preisfilter { margin: -6px 0 10px; }
@media (max-width: 640px) { input.inv-preis-eingabe { width: 4.8rem; font-size: 16px; } }

/* ===== 1.45: Seminar – Kurstage ohne Termin ===== */
.stk-hinweis { margin: 12px 0; padding: 12px 14px; border: 1px solid #e6c65c; border-left-width: 4px; border-radius: 8px; background: #fff8e1; color: #4a3a00; }
.stk-hinweis .hint { color: #6b5a1a; margin: 4px 0 8px; }
.stk-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.stk-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid #efdf9f; }
.stk-liste li .hint { margin: 0; flex: 1 1 180px; }
.stk-tag { font-weight: 600; white-space: nowrap; }

/* ===== 1.46: ToDo – Erinnerungen & Versand ===== */
.tv-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.tv-leiste-stand { margin: 0; }
.mcc-dialog.mcc-dialog-breit.tv-dialog { width: min(760px, 100%); }
.tv-inhalt { display: flex; flex-direction: column; gap: 14px; max-height: min(72vh, 760px); overflow-y: auto; padding-right: 4px; }
.tv-karte { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.tv-karte h4, .tv-formular h4 { margin: 0 0 8px; font-size: 1rem; }
.tv-karte .hint { margin: 8px 0 0; }
.tv-karte-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tv-schalter, .tv-zeile { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 0; }
.tv-schalter input, .tv-zeile input, .tv-wahl input, .tv-haken-liste input { width: auto; margin: 0; flex: 0 0 auto; }
.tv-nf-felder { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 26px; }
.tv-nf-felder.aus { opacity: 0.45; }
input.tv-zahl { width: 4.6rem; display: inline-block; margin: 0 4px; padding: 5px 7px; text-align: right; }
.tv-status.ok { color: #1b7a3d; font-weight: 600; }
.tv-status.fehler { color: #c62828; }
.tv-warnung { margin: 0; padding: 10px 12px; border-radius: 8px; background: #fff8e1; border: 1px solid #e6c65c; color: #4a3a00; }
.tv-plan { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--border); }
.tv-plan:first-child { border-top: 0; }
.tv-plan.aus .tv-plan-text { opacity: 0.55; }
.tv-plan-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 260px; min-width: 0; }
.tv-plan-text small { color: var(--muted); }
.tv-plan-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-formular { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.tv-formular fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-formular legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; }
.tv-wahl { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; margin: 0; cursor: pointer; }
.tv-wahl input { margin-top: 4px; }
.tv-wahl span { display: flex; flex-direction: column; }
.tv-wahl small { color: var(--muted); }
.tv-haken-liste { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tv-haken-liste label { display: flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; }
.tv-haken-liste.tv-personen { max-height: 150px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; flex-direction: column; flex-wrap: nowrap; gap: 3px; }
.tv-tage { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-tage label { margin: 0; cursor: pointer; }
.tv-tage input { position: absolute; opacity: 0; width: 0; height: 0; }
.tv-tage span { display: inline-block; min-width: 2.5rem; text-align: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; background: var(--card); }
.tv-tage input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.tv-tage input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.tv-wann input[type="date"], .tv-uhr select, .tv-formular select { width: auto; display: inline-block; margin: 0 4px; }
.tv-vorschau:not(:empty) { border-radius: 8px; background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tv-v-warn { color: #8a5a00; }
.tv-vorschau.veraltet { opacity: 0.45; }
.tv-beispiel { margin-top: 6px; }
.tv-beispiel summary { cursor: pointer; color: var(--brand); }
.tv-mail { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #1a2733; overflow: hidden; }
.tv-mail-betreff { padding: 8px 12px; font-weight: 700; border-bottom: 1px solid var(--border); background: #f4f6f8; }
.tv-mail-text { padding: 4px 12px 8px; font-size: 0.92rem; }
.tv-mail-text ul { margin: 4px 0 8px; padding-left: 20px; }
.tv-form-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .tv-plan-knoepfe { width: 100%; } .tv-form-knoepfe button { flex: 1 1 auto; } }

/* ===== 1.48: Mehrfach erinnern je Rubrik/Kategorie; Fenster schließt nicht mehr mit Eingaben ===== */
.tv-nf-modus { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0 0 10px; }
.tv-nf-tabelle { display: flex; flex-direction: column; }
.tv-nf-reihe { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--border); }
.tv-nf-reihe .tv-nf-name { flex: 1 1 160px; min-width: 0; }
.tv-nf-werte { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.tv-nf-reihe.aus .tv-nf-werte { opacity: 0.4; }
@media (max-width: 600px) {
  .tv-nf-reihe.aus .tv-nf-werte { display: none; } /* 1.48: am Handy nur die angehakten Zeilen ausklappen */
}

/* ===== 1.49: Seminar – E-Mail-Verlauf (alle Mails, je Person) ===== */
.smv-inhalt { display: flex; flex-direction: column; gap: 10px; }
.smv-einleitung, .smv-fuss { margin: 0; }
.smv-leiste { display: flex; flex-direction: column; gap: 8px; }
.smv-leiste input[type="search"] { width: 100%; box-sizing: border-box; }
.smv-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.smv-chip { border: 1px solid var(--border); background: var(--card); color: inherit; border-radius: 999px; padding: 3px 10px; font-size: 0.85rem; cursor: pointer; }
.smv-chip.aktiv { background: var(--red, #e30613); border-color: var(--red, #e30613); color: #fff; }
.smv-eintrag { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--card); margin-bottom: 8px; }
.smv-eintrag.alt { border-style: dashed; }
.smv-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.smv-art { font-weight: 600; }
.smv-wann { color: var(--muted); font-size: 0.85rem; }
.smv-betreff { font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }
.smv-zeile { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.smv-status { font-size: 0.88rem; white-space: nowrap; }
.smv-status.ok { color: #1b7a3d; font-weight: 600; }
.smv-status.fehler { color: #c62828; font-weight: 600; white-space: normal; }
.smv-status.offen { color: #8a6100; }
.smv-status.aus { color: var(--muted); }
.smv-grund { font-weight: normal; }
.smv-text, .smv-empfaenger { margin-top: 6px; }
.smv-text > summary, .smv-empfaenger > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.smv-mailtext, .smv-einzeltext { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg, #f6f7f9); border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 0.93rem; }
.smv-einzel-betreff { font-weight: 600; margin-bottom: 4px; }
.smv-person { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.smv-person:first-of-type { border-top: 0; }
.smv-person-name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.smv-einzeltext { flex: 1 1 100%; }
.smv-leer { padding: 14px 0; text-align: center; }
.smv-einzel-anhang { margin-top: 6px; color: var(--muted); }

/* ===== 1.51: Seminar – Ausweise mit Check-in-Code ===== */
.sau-inhalt { display: flex; flex-direction: column; gap: 10px; }
.sau-felder { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.sau-felder label { display: flex; flex-direction: column; gap: 3px; font-weight: normal; margin: 0; }
.sau-felder input, #sau-kontakt { width: 100%; box-sizing: border-box; }
.sau-knoepfe { margin-bottom: 6px; }
.sau-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; max-height: 34vh; overflow: auto; padding: 2px; }
.sau-person { align-items: flex-start; }
.sau-marke { font-size: 0.78rem; background: #eef1f4; color: #55606b; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.sau-marke.warn { background: #fff3cd; color: #7a5b00; }
.sau-druck { margin: 0; }
@media (max-width: 600px) { .sau-felder { grid-template-columns: 1fr; } }

/* ===== 1.52: Personen – Ausweise mit persönlichem Check-in-Code ===== */
.pau-dazu { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.pau-dazu select { max-width: 220px; }
.pau-suchfeld { position: relative; flex: 1 1 260px; }
.pau-suchfeld input { width: 100%; box-sizing: border-box; }
.pau-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 4px; max-height: 240px; overflow: auto; }
.pau-treffer button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 8px 10px; border-radius: 6px; font: inherit; cursor: pointer; }
.pau-treffer button:hover:not(:disabled) { background: #f3f5f7; }
.pau-treffer button:disabled { opacity: .55; cursor: default; }
.pau-treffer p { margin: 6px 10px; }
#pau-liste { max-height: 34vh; overflow: auto; }
.pau-kopf, .pau-reihe { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(150px, 1fr) minmax(140px, 1.2fr) 28px; gap: 8px; align-items: center; padding: 5px 2px; }
.pau-kopf { font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); }
.pau-reihe { border-bottom: 1px solid var(--border); }
.pau-reihe.ohne { background: #fff8e1; }
.pau-reihe input { width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 0.9rem; }
.pau-nummer { display: flex; gap: 6px; align-items: center; }
.pau-nr { font-variant-numeric: tabular-nums; }
.pau-name { overflow-wrap: anywhere; }
.pau-weg { background: none; border: 0; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 2px 6px; }
.pau-weg:hover { color: #c62828; }
.pau-leer { margin: 8px 0; }
@media (max-width: 600px) {
  .pau-kopf { display: none; }
  .pau-reihe { grid-template-columns: 1fr 28px; }
  .pau-reihe .pau-name { grid-column: 1; font-weight: 600; }
  .pau-reihe .pau-weg { grid-column: 2; grid-row: 1; }
  .pau-reihe > span:nth-child(2), .pau-reihe > span:nth-child(3) { grid-column: 1 / -1; }
}
#pau-kontakt { display: block; width: 100%; box-sizing: border-box; font: inherit; margin-top: 3px; }
#sau-kontakt { display: block; font: inherit; margin-top: 3px; }

/* ===== 1.53: Profilbild ausrichten ===== */
.pbz-dialog { max-width: 420px; }
.pbz-inhalt { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pbz-buehne { position: relative; width: min(300px, 74vw); aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; border-radius: 12px; background: #222; cursor: grab; touch-action: none; user-select: none; outline-offset: 3px; }
.pbz-buehne:active { cursor: grabbing; }
.pbz-buehne canvas { position: absolute; max-width: none; pointer-events: none; }
.pbz-kreis { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28); border: 2px solid rgba(255, 255, 255, 0.9); pointer-events: none; }
.pbz-regler { display: flex; align-items: center; gap: 8px; }
.pbz-regler input[type="range"] { flex: 1; }
.pbz-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pbz-hinweis { margin: 0; }
.pau-foto { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: 1rem; line-height: 1; }
.pau-foto:hover { filter: brightness(0.8); }

/* ===== 1.54: E-Mail an mehrere Seminare ===== */
.ssm-dialog { width: min(820px, 100%); }
.ssm-inhalt { display: flex; flex-direction: column; gap: 10px; }
.ssm-inhalt .tv-karte h4 { margin: 0 0 8px; }
#ssm-schritt-1, #ssm-schritt-2 { display: flex; flex-direction: column; gap: 10px; }
.ssm-inhalt .tv-karte { margin: 0; }
.ssm-schritte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted, #6b7280); }
.ssm-schritt { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); }
.ssm-schritt.aktiv { background: var(--red, #e30613); border-color: var(--red, #e30613); color: #fff; font-weight: 600; }
.ssm-pfeil { color: var(--muted, #6b7280); }
.ssm-leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ssm-leiste input[type="search"] { flex: 1 1 180px; min-width: 150px; margin: 0; }
.ssm-leiste select { width: auto; margin: 0; }
.ssm-pillen { display: flex; gap: 6px; flex-wrap: wrap; }
.ssm-knoepfe { margin: 8px 0 6px; }
.ssm-seminare { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.ssm-seminar { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); cursor: pointer; margin: 0; font-weight: 400; }
.ssm-seminar:last-child { border-bottom: 0; }
.ssm-seminar:hover { background: #fff8e1; }
.ssm-seminar.gewaehlt { background: #fff3c4; }
.ssm-seminar input { margin: 0; flex: 0 0 auto; width: auto; }
.ssm-seminar-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.ssm-seminar-titel .hint { display: block; font-weight: 400; }
.ssm-seminar-zahl { flex: 0 0 auto; font-size: 0.85rem; color: var(--muted, #6b7280); text-align: right; }
.ssm-marke { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #eef1f4; color: #47525d; vertical-align: middle; }
.ssm-marke.archiv { background: #e8e2f5; color: #4b3a80; }
.ssm-marke.kurs { background: #dff0fb; color: #0b5a85; cursor: help; } /* seit 1.55: älterer Kurs aus der Kursverwaltung */
.ssm-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ssm-chips:empty { display: none; }
.ssm-chip { border: 1px solid var(--border); background: #fff3c4; color: inherit; border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; cursor: pointer; }
.ssm-status { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.ssm-status .tv-zeile { margin: 0; }
.ssm-summe { margin: 0; font-size: 1.02rem; }
.ssm-liste { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--card); }
.ssm-liste summary { cursor: pointer; font-weight: 600; }
.ssm-liste[open] { max-height: 260px; overflow-y: auto; }
.ssm-liste .ssm-person { margin: 4px 0 0; }
.ssm-ohne { border-color: #f0c36d; background: #fffaf0; }
.ssm-person-ohne { padding: 3px 0; }
.ssm-zusammenfassung { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff8e1; border: 1px solid #f3dc8a; }
.ssm-feld { margin-bottom: 10px; }
.ssm-feld > label { display: block; font-weight: 600; margin-bottom: 3px; }
.ssm-feld input[type="text"], .ssm-feld select { width: 100%; margin: 0; }
.ssm-feld .mcc-variablen-feld-wrap { width: 100%; }
.ssm-inhalt p.ssm-platzhalter { margin: 0 0 14px; }
.ssm-platzhalter code { background: #f3f4f6; padding: 0 4px; border-radius: 4px; }
.ssm-dialog .mcc-dialog-knoepfe .ssm-links { margin-right: auto; }
.ssm-fertig { text-align: center; padding: 18px 8px 6px; }
.ssm-fertig h4 { margin: 8px 0 4px; font-size: 1.15rem; }
.ssm-fertig p { margin: 4px 0; }
.ssm-fertig-haken { width: 54px; height: 54px; line-height: 54px; border-radius: 50%; background: #1e8e3e; color: #fff; font-size: 1.8rem; margin: 0 auto; }
.ssm-verlauf-einzel .smv-mailtext { margin-bottom: 6px; }
.smv-sammel { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #fff3c4; color: #6b5200; vertical-align: middle; cursor: help; }
/* Die Datei-Auswahl aus der Dateiablage muss auch über den neuen Fenstern liegen. */
#ablage-auswahl-modal-overlay { z-index: 5200; }
@media (max-width: 560px) {
  .ssm-seminar { flex-wrap: wrap; }
  .ssm-seminar-zahl { flex-basis: 100%; text-align: left; padding-left: 26px; }
}

/* ===== 1.56: sehr schmale Handys (bis 340 px, z.B. 320 px) – ab 360 px unverändert ===== */
/* Seit v897 steht die Version hinter dem Namen. Auf 320 px breiten Geräten blieb für den Namen kein Platz mehr – er war gar nicht
   mehr zu sehen (gefunden beim Aufräumen der alten Browser-Tests, pw_handy_v792). Dort entfällt die Version in der Kopfzeile;
   sie steht weiter unter „Neuigkeiten“ und in „Mein Profil“. */
@media (max-width: 340px) {
  header.mcc-kopf #header-rolle { display: none; }
  header.mcc-kopf { padding: 6px 8px; gap: 6px; }
  header.mcc-kopf .logo { height: 24px; }
  header.mcc-kopf .brand > a { gap: 6px; }
  header.mcc-kopf .mcc-marke h1.mcc-titel { font-size: 1rem !important; }
  header.mcc-kopf #header-user-info { column-gap: 4px; }
  header.mcc-kopf .header-pill { padding: 4px 7px; font-size: .78rem; }
}

/* ===== 1.57: Seminar-Grunddaten in zuklappbaren Karten (Bianca: „unordentlich und unübersichtlich“) ===== */
#seminar-form-tab-grunddaten { max-width: 860px; }
.sgd { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sgd-leiste { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.sgd-leiste .sa-link { font-size: .85rem; }
.sgd-karte { border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow: hidden; }
.sgd-karte[open] { box-shadow: 0 1px 4px rgba(0, 0, 0, .06); }
.sgd-kopf { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; margin: 0; user-select: none; }
.sgd-kopf::-webkit-details-marker { display: none; }
.sgd-kopf::after { content: "›"; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--muted); transform: rotate(90deg); transition: transform .15s; align-self: center; }
.sgd-karte[open] > .sgd-kopf::after { transform: rotate(-90deg); }
.sgd-kopf:hover { background: rgba(0, 0, 0, .025); }
.sgd-name { font-weight: 600; font-size: 1rem; white-space: nowrap; flex: 0 0 auto; }
.sgd-kurz { color: var(--muted); font-size: .88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.sgd-karte[open] .sgd-kurz { display: none; }
.sgd-inhalt { padding: 2px 16px 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.sgd-inhalt > .sgd-feld + .sgd-feld { margin-top: 12px; }
.sgd-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sgd-feld > label { margin: 0; font-size: .85rem; color: var(--muted); }
.sgd-feld input:not([type=checkbox]), .sgd-feld select { width: 100%; }
.sgd-hilfe { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.sgd-ort { display: flex; gap: 8px; }
.sgd-ort input { flex: 1 1 auto; min-width: 0; }
.sgd-ort select { flex: 0 0 200px; width: 200px !important; }
.sgd-wann { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.sgd-datum { flex: 0 0 190px; }
.sgd-termine { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding-bottom: 10px; }
.sgd-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sgd-zeitraum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 4px; }
.sgd-paar { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.sgd-haken { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .93rem; color: var(--text); cursor: pointer; }
.sgd-haken input { width: auto; margin: 0; }
.sgd-abstand { margin-top: 14px; }
.sgd-unterkopf { margin: 18px 0 8px; font-size: .9rem; font-weight: 600; color: var(--text); }
.sgd-auswahl { width: 100%; margin-bottom: 10px; }
.seminar-beschreibung-quill-wrapper .ql-editor { font-family: inherit; font-size: .95rem; line-height: 1.5; min-height: 140px; }
@media (max-width: 640px) {
  .sgd-drei, .sgd-zeitraum { grid-template-columns: 1fr; }
  .sgd-ort { flex-direction: column; }
  .sgd-ort select { flex-basis: auto; width: 100% !important; }
  .sgd-datum { flex: 1 1 100%; }
  .sgd-kopf { flex-wrap: wrap; row-gap: 2px; padding: 11px 12px; }
  .sgd-kurz { flex-basis: 100%; order: 3; }
  .sgd-inhalt { padding: 12px 12px 14px; }
}
/* Status-Auswahl im Kopf der Seminar-Seite */
select.seminar-status-wahl { width: auto; min-height: 0; padding: 3px 24px 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; }
select.seminar-status-wahl.st-veroeffentlicht { background-color: var(--green); color: #fff; }
select.seminar-status-wahl.st-entwurf { background-color: #e5e5e5; color: #333; }
select.seminar-status-wahl.st-archiviert { background-color: #999; color: #fff; }
select.seminar-status-wahl option { background: #fff; color: #222; }

/* ===== 1.57: „Neues Seminar“ – ruhiger, Beschriftung links, „Mehr“ zugeklappt, ein Knopf ===== */
.mcc-dialog.mcc-dialog-breit.sn-dialog { width: min(680px, 100%); }
.sn-titelzeile { display: flex; align-items: baseline; gap: 12px; }
.sn-titelzeile .sn-leer { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.sn-vorlage-haken { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sn-vorlage-haken > div { margin-top: 6px; }
.sn-vorlage-haken .mcc-dialog-hinweis { margin: 2px 0 0 26px; }
.sn-felder { display: flex; flex-direction: column; gap: 12px; }
.sn-zeile { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.sn-zeile > label, .sn-zeile > .sn-zeile-label { margin: 0; padding-top: 9px; font-size: .92rem; color: var(--muted); font-weight: 400; }
.sn-zeile input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.sn-wann { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sn-wann > input[type=date] { flex: 1 1 170px; width: auto !important; }
.sn-zeit-paar { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; }
.sn-zeit-paar input { flex: 1 1 0; min-width: 0; }
.sn-zeit-paar span { color: var(--muted); }
.sn-termine { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; padding-top: 8px; }
.sn-anzahl-zeile { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--text); font-size: .95rem; }
.sn-form .sn-anzahl-zeile #sn-anzahl { width: 5em !important; padding: 5px 8px; }
.sn-zwei { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.sn-innen-label { margin: 0; font-size: .92rem; color: var(--muted); white-space: nowrap; }
.sn-mehr { border-top: 1px solid var(--border); padding-top: 10px; }
.sn-mehr > summary { cursor: pointer; color: var(--text); font-weight: 600; font-size: .92rem; list-style: none; display: flex; gap: 6px; align-items: baseline; }
.sn-mehr > summary::-webkit-details-marker { display: none; }
.sn-mehr > summary::before { content: "▸"; color: var(--muted); }
.sn-mehr[open] > summary::before { content: "▾"; }
.sn-mehr-kurz { font-weight: 400; color: var(--muted); }
.sn-mehr[open] .sn-mehr-kurz { display: none; }
.sn-mehr > .sn-zeile { margin-top: 12px; }
.sn-knoepfe .sn-gleich { margin: 0 auto 0 0; font-size: .95rem; }
@media (max-width: 560px) {
  .sn-zeile { grid-template-columns: 1fr; gap: 4px; }
  .sn-zeile > label, .sn-zeile > .sn-zeile-label { padding-top: 0; }
  .sn-knoepfe .sn-gleich { flex: 1 1 100%; }
}

/* ===== 1.58: Anmeldeformular und Kurs in zuklappbaren Karten (wie die Grunddaten 1.57) ===== */
#seminar-form-tab-formular, #seminar-form-tab-schwimmkurs { max-width: 860px; }
.sfo-pflicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.sfo-pflicht .sgd-haken { align-items: flex-start; }
.sfo-pflicht .sgd-haken input { margin-top: 3px; }
.sfo-info + .sfo-info { margin-top: 14px; }
.sfo-info { margin-top: 10px; }
.sfo-info-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 4px; }
.sfo-info-kopf > label:first-child { margin: 0; font-size: .85rem; color: var(--muted); }
.sfo-anzeigen { font-size: .85rem; }
.sfo-info textarea, .sgd-feld textarea { width: 100%; }
#seminar-zusatzfelder-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.sfo-frage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.sfo-frage .seminar-zusatzfeld-reihenfolge { display: flex; flex-direction: column; gap: 2px; }
.sfo-frage .seminar-zusatzfeld-reihenfolge .btn-mini { padding: 0 6px; line-height: 1.2; font-size: .75rem; min-height: 0; }
.sfo-frage .seminar-zusatzfeld-label-eingabe { width: 100%; }
.sfo-frage .hint { font-size: .78rem; }
.sfo-frage-pflicht { font-size: .85rem; white-space: nowrap; }
.sfo-frage-weg { padding: 4px 9px; }
.sfo-neu { border-top: 1px dashed var(--border); padding-top: 10px; }
/* Kurs: die beiden Karten nutzen das Karten-Aussehen der Grunddaten */
.sk-karte.sgd-karte { max-width: none; margin: 12px 0 0; padding: 0; border-radius: 10px; border-color: var(--border); background: var(--card); }
#seminar-form-tab-schwimmkurs .ss-stand { max-width: none; }
.ss-schloss { font-size: .82rem; margin: 6px 0 0; }
.skk-zeile { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid #eef1f4; flex-wrap: wrap; }
.skk-zeile:first-child { border-top: 0; padding-top: 0; }
.skk-zeile > label:first-child { flex: 0 0 110px; margin: 0; font-size: .9rem; color: var(--muted); padding-top: 6px; }
.skk-zeile > select, .skk-zeile > span, .skk-zeile > div { flex: 1 1 240px; min-width: 0; }
.skk-haken { display: flex; gap: 6px 8px; flex-wrap: wrap; }
.skk-haken label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; border: 1px solid #dfe5ea; border-radius: 999px; padding: 4px 12px 4px 8px; background: #fff; }
.skk-haken input { width: 16px; height: 16px; margin: 0; }
.sk-karte.sgd-karte .sk-kopf { justify-content: flex-end; margin-bottom: 8px; }
.sk-zur-anmeldung { background: none; border: 0; padding: 2px 6px; cursor: pointer; font-size: 1rem; border-radius: 6px; }
.sk-zur-anmeldung:hover { background: #f1f3f5; }
@media (max-width: 640px) {
  .sfo-pflicht { grid-template-columns: 1fr 1fr; }
  .sfo-frage { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sfo-frage-pflicht { grid-column: 2; }
  .skk-zeile > label:first-child { flex: 1 1 100%; padding-top: 0; }
}

/* ===== 1.58: Sammel-Mail – Seminare/Kurse nach Jahr, zuklappbar ===== */
.ssm-jahr { border-bottom: 1px solid var(--border); }
.ssm-jahr:last-child { border-bottom: 0; }
.ssm-jahr > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; background: #f6f7f9; position: sticky; top: 0; z-index: 1; }
.ssm-jahr > summary::-webkit-details-marker { display: none; }
.ssm-jahr > summary::before { content: "▸"; color: var(--muted); width: 10px; }
.ssm-jahr[open] > summary::before { content: "▾"; }
.ssm-jahr-name { font-weight: 700; }
.ssm-jahr-alle { margin-left: auto; font-size: .85rem; }

/* ===== 1.59: Seminarnummer „JJJJ-NNNN“ ===== */
.seminar-nr { display: inline-block; font-variant-numeric: tabular-nums; font-size: .78em; font-weight: 600; color: #4b5a68; background: #eef1f4; border-radius: 6px; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; letter-spacing: .02em; }
#seminar-seite-status-badge .seminar-nr { font-size: .85rem; margin-right: 6px; }

/* ===== 1.63: „Wer darf was?“, Gruppen und einzelne Benutzer zuklappbar ===== */
.ls-rechte { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.ls-rechte > summary { cursor: pointer; padding: 10px 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; list-style: none; }
.ls-rechte > summary::-webkit-details-marker { display: none; }
.ls-rechte > summary::before { content: "▸"; color: var(--muted, #6b7785); width: 1em; }
.ls-rechte[open] > summary::before { content: "▾"; }
.ls-rechte-titel { font-weight: 600; }
.ls-rechte-kurz { font-size: .88em; min-width: 0; }
.ls-rechte[open] { padding-bottom: 10px; }
.ls-klapp { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.ls-klapp > summary { cursor: pointer; font-weight: 600; }
.ls-klapp > summary .hint { font-weight: normal; }
.ls-klapp > input[type="search"] { width: 100%; }
.ls-nutzer-block > p.hint { margin: 10px 0 0; }

/* ===== 1.64: Events „nur Kursteilnehmer“ – Rückmeldung und doppelte Teilnehmer ===== */
.event-nicht-zugeordnet { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #fff6e0; color: var(--text, #222); }
.event-nicht-zugeordnet ul { margin: 4px 0 0; padding-left: 20px; }
.event-doppelte-box { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.event-doppelte-tabelle { width: 100%; }
.event-doppelte-tabelle td { vertical-align: top; }
.event-doppelte-tabelle td:first-child, .event-doppelte-tabelle th:first-child { width: 28px; }
.event-doppelte-tabelle input[type="checkbox"] { width: auto; }

/* ===== 1.65: Alter hinter dem Namen in der Anmeldeliste ===== */
.sa-alter { font-weight: normal; color: #5b6772; font-variant-numeric: tabular-nums; }

/* ===== 1.66: Fahrgemeinschaften (persönliche Seite + Karte im Seminar-Überblick) ===== */
.fg-main { max-width: 760px; margin: 0 auto; padding: 0 12px 40px; }
.fg-form .fg-feld { margin-bottom: 8px; }
.fg-form .fg-feld label { display: block; font-weight: 600; margin-bottom: 2px; }
.fg-form input { width: 100%; box-sizing: border-box; }
.fg-zeile { display: flex; gap: 8px; }
.fg-zeile .fg-feld { flex: 1 1 auto; min-width: 0; }
.fg-zeile .fg-plz { flex: 0 0 110px; }
.fg-einverstanden { display: flex; gap: 10px; align-items: flex-start; font-weight: normal; padding: 10px 12px; background: #fff8e1; border-radius: 10px; margin: 6px 0 10px; }
.fg-einverstanden input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.fg-fehler { color: var(--red); min-height: 1em; margin: 4px 0; }
.fg-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.fg-ich-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fg-termin h3 { margin: 0 0 6px; }
.fg-abschnitt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6772; margin: 12px 0 6px; }
.fg-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-wahl button { background: #fff; color: var(--text, #222); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: .92rem; }
.fg-wahl button.aktiv { background: var(--red, #e2001a); color: #fff; border-color: var(--red, #e2001a); }
.fg-details { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; align-items: flex-end; }
.fg-details label { font-weight: normal; display: flex; flex-direction: column; gap: 2px; }
.fg-details select { width: auto; }
.fg-details .fg-notiz-feld { flex: 1 1 220px; }
.fg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fg-eintrag { border: 1px solid var(--border); border-left: 4px solid #2e7dd7; border-radius: 8px; padding: 8px 10px; }
.fg-eintrag.suche { border-left-color: #f0a500; }
.fg-eintrag-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fg-art { font-weight: 600; }
.fg-notiz { margin: 2px 0; font-style: italic; }
.fg-kontakt { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.fg-kontakt a { overflow-wrap: anywhere; }
.fg-leer { margin: 0; }
@media (max-width: 420px) { .fg-zeile { flex-direction: column; gap: 0; } .fg-zeile .fg-plz { flex: 1 1 auto; } }

/* ===== 1.69: öffentliche Infoseiten „Was kann das MCC?“ + Pflege ===== */
.info-main { max-width: 820px; margin: 0 auto; padding: 0 12px 40px; }
.info-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.info-nav a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text, #222); font-weight: 600; font-size: .92rem; }
.info-nav a.aktiv { background: var(--red, #e2001a); border-color: var(--red, #e2001a); color: #fff; }
.info-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.info-kachel { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; margin: 0; }
.info-kachel:hover { border-color: var(--red, #e2001a); }
.info-kachel-icon { font-size: 1.8rem; }
.info-kopf h2 { margin: 0 0 6px; }
.info-untertitel { margin: 0; font-size: 1.05rem; color: #3b4651; }
.info-abschnitt h3 { margin: 0 0 6px; }
.info-versprechen { font-style: italic; margin: 0 0 8px; }
.info-einstieg { background: #f3f6f9; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.info-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.info-punkte li { border-left: 3px solid var(--red, #e2001a); padding-left: 10px; }
.info-frage { font-weight: 700; }
.info-wo { display: inline-block; font-size: .78rem; color: #5b6772; background: #eef1f4; border-radius: 6px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }
.info-weiter, .info-fuss { text-align: center; margin-top: 16px; }
@media print { .info-nav, .info-fuss, .info-weiter, .app-header { display: none; } .info-abschnitt { break-inside: avoid; } }
.isv-links { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.isv-link-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.isv-link-zeile code { font-size: .85rem; overflow-wrap: anywhere; }
.isv-abschnitt { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 10px 0; }
.isv-abschnitt-kopf { display: flex; justify-content: space-between; gap: 6px; align-items: center; flex-wrap: wrap; }
.isv-punkt { display: grid; grid-template-columns: 1fr 1.6fr 140px auto; gap: 6px; align-items: start; margin: 4px 0; }
.isv-punkt textarea, .isv-punkt input { width: 100%; box-sizing: border-box; }
.isv-feld { width: 100%; box-sizing: border-box; }
@media (max-width: 700px) { .isv-punkt { grid-template-columns: 1fr; } }
.login-info-links { margin: 14px 0 0; font-size: .88rem; text-align: center; }
.login-info-links a { white-space: nowrap; }

/* 1.71: Team auf dem Seminar-Kurstag */
.kt-team { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--border, #dde3ea); }
.kt-team h4 { margin: 0 0 8px; }
.kt-team-dazu { margin-top: 8px; }
.kt-team-dazu input { width: 100%; max-width: 420px; }
#kt-team-treffer { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }

/* 1.71: Team des Tages am Kiosk */
.kiosk-team { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 10px; font-size: 1rem; }
.kiosk-team-titel { font-weight: 700; color: var(--red, #e30613); margin-right: 2px; }
.kiosk-team-name { padding: 3px 10px; border-radius: 999px; background: #eef1f4; color: #5a6670; border: 1px solid #dde3ea; }
.kiosk-team-name.da { background: #e6f4ea; color: #1e7b34; border-color: #a8d5b4; font-weight: 600; }
.kiosk-leitung { font-size: 1.15rem; }
.kiosk-leitung .kiosk-team-name { font-size: 1.1rem; }
.kiosk-dienst-zeit { font-size: 0.6em; font-weight: 600; color: #5a6670; margin-left: 6px; white-space: nowrap; }

/* ===== 1.73: 🏊 Lernbahn ===== */
#view-lernbahn { --lb-wasser: #0a7cc4; --lb-wasser-hell: #e3f2fb; --lb-gelb: #ffed00; }
.lb-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--brand); color: #fff; position: relative; overflow: hidden; padding-right: 70px; }
.lb-kopf::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: var(--lb-gelb);
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%); }
.lb-kopf h2 { margin: 0 0 2px; color: #fff; }
.lb-kopf .hint { color: rgba(255,255,255,.92); margin: 0; }
.lb-kopf-text { flex: 1 1 320px; }
.lb-reiter { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-reiter button { background: rgba(255,255,255,.95); color: var(--brand); padding: 8px 12px; border: 1px solid var(--brand); }
.lb-reiter button.aktiv { background: var(--brand-dark); color: #fff; border-color: #fff; }
.lb-abschnitt { margin: 18px 4px 6px; }
.lb-abschnitt-hinweis { margin: 0 4px 8px; }
.lb-module { display: grid; gap: 12px; }
.lb-modul-karte { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0; border-left: 5px solid var(--border); }
.lb-modul-karte.bestanden, .lb-modul-karte.erledigt { border-left-color: var(--green); }
.lb-modul-karte.begonnen, .lb-modul-karte.wartet { border-left-color: var(--lb-wasser); }
.lb-modul-karte.abgelaufen, .lb-modul-karte.laeuft_ab { border-left-color: var(--amber); }
.lb-modul-icon { font-size: 2.1rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--lb-wasser-hell); }
.lb-modul-text h3 { margin: 0 0 4px; }
.lb-modul-text .hint { margin: 0 0 6px; }
.lb-modul-fuss { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-modul-knoepfe { display: flex; flex-direction: column; gap: 6px; }
.lb-bahn-mini { height: 8px; border-radius: 99px; margin: 4px 0 8px; max-width: 360px;
  background: repeating-linear-gradient(90deg, var(--lb-wasser-hell) 0 14px, #fff 14px 18px); border: 1px solid #cfe5f3; overflow: hidden; }
.lb-bahn-mini span { display: block; height: 100%; background: var(--lb-wasser); border-radius: 99px; }
.lb-chip { display: inline-block; font-size: .78rem; padding: 2px 9px; border-radius: 99px; background: #eef1f4; color: var(--muted); border: 1px solid var(--border); font-weight: 600; }
.lb-chip.gut { background: #e6f4ea; color: #1e7b34; border-color: #a8d5b4; }
.lb-chip.begonnen { background: var(--lb-wasser-hell); color: #075d93; border-color: #b6dbf1; }
.lb-chip.warn { background: #fff4d6; color: #8a6100; border-color: #f1d58a; }
.lb-chip.pflicht { background: #fde8e9; color: var(--brand-dark); border-color: #f5b9bd; vertical-align: middle; }
a.button-link { display: inline-block; padding: 10px 14px; border-radius: 8px; background: var(--brand); color: #fff; text-decoration: none; text-align: center; }
a.button-link.secondary { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.lb-nachweis summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-top: 6px; }
.lb-nachweis-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.lb-nachweis-form label { margin: 0; }
/* Lernansicht */
.lb-modul-kopf h2 { margin: 8px 0 4px; }
.lb-bahn { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 22px 6px 6px; min-height: 40px; }
.lb-bahn-leine { position: absolute; left: 16px; right: 16px; top: 50%; height: 6px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--brand) 0 10px, #fff 10px 14px, var(--lb-wasser) 14px 24px, #fff 24px 28px); border-radius: 99px; opacity: .35; }
.lb-bahn-leine span { display: block; height: 100%; background: var(--lb-wasser); border-radius: 99px; }
.lb-bahn-schwimmer { position: absolute; top: -20px; transform: translateX(-60%); font-size: 1.3rem; transition: left .5s ease; pointer-events: none; margin-left: 16px; }
.lb-boje { position: relative; z-index: 1; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: #fff; color: var(--muted); border: 2px solid var(--border); font-weight: 700; }
.lb-boje.fertig { background: var(--lb-wasser); border-color: var(--lb-wasser); color: #fff; }
.lb-boje.aktuell { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(227,6,19,.18); }
.lb-boje.ziel { background: var(--lb-gelb); border-color: #e2c900; color: #000; }
.lb-boje.ziel.aktuell { box-shadow: 0 0 0 4px rgba(255,237,0,.45); }
.lb-kapitel h3 { margin-top: 0; font-size: 1.35rem; }
.lb-text { font-size: 1.05rem; line-height: 1.6; }
.lb-text ul { padding-left: 1.3em; }
.lb-bild { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--border); margin: 6px 0 12px; }
.lb-weiter { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lb-frage { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.lb-frage legend { font-weight: 700; padding: 0 6px; }
.lb-frage-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .8rem; margin-right: 4px; }
.lb-antwort { display: flex; gap: 10px; align-items: center; color: var(--text); font-size: 1rem; padding: 8px 6px; border-radius: 8px; cursor: pointer; margin: 0; }
.lb-antwort:hover { background: var(--bg); }
.lb-antwort input { width: 20px; height: 20px; margin: 0; flex: none; }
.lb-ergebnis { text-align: center; }
.lb-ergebnis.bestanden { border-top: 6px solid var(--green); }
.lb-ergebnis.nicht { border-top: 6px solid var(--amber); }
.lb-ergebnis-zahl { font-size: 3rem; font-weight: 800; color: var(--lb-wasser); }
.lb-ergebnis.bestanden .lb-ergebnis-zahl { color: var(--green); }
.lb-falsch { text-align: left; background: #fffaf0; border-radius: 10px; padding: 8px 14px; }
/* Pflegen */
.lb-titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-titelzeile h3 { margin: 0; }
.lb-zeile { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.lb-zeile-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lb-offen { border-left: 5px solid var(--lb-wasser); }
.lb-editor label { margin-top: 10px; }
.lb-editor input:not([type=checkbox]):not([type=file]), .lb-editor textarea, .lb-editor select { width: 100%; box-sizing: border-box; }
.lb-e-grund { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.lb-e-grund label { flex: 0 0 auto; }
.lb-e-grund .lb-e-breit { flex: 1 1 260px; }
.lb-e-grund input[type=number], .lb-e-grund #lbe-icon { width: auto !important; }
.lb-ziel { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-top: 12px; }
.lb-ziel-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; max-height: 260px; overflow: auto; }
.lb-check { display: flex; gap: 8px; align-items: center; color: var(--text); margin: 4px 0 !important; font-size: .95rem; }
.lb-check input { width: auto !important; margin: 0; }
.lb-e-block { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; background: #fbfcfd; }
.lb-e-kopf { display: flex; justify-content: space-between; align-items: center; }
.lb-e-antwort { display: flex; gap: 8px; align-items: center; }
.lb-e-antwort input[type=checkbox] { width: 20px; height: 20px; flex: none; }
.lb-e-bild img { max-height: 90px; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.lb-upload { display: inline-block; cursor: pointer; padding: 6px 10px; border: 1px solid var(--brand); color: var(--brand); border-radius: 8px; font-size: .85rem; background: #fff; }
.lb-e-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Wer hat was */
.lb-tabelle-wrap { overflow: auto; max-height: 70vh; margin-top: 8px; }
.lb-tabelle { border-collapse: collapse; font-size: .9rem; }
.lb-tabelle th, .lb-tabelle td { border: 1px solid var(--border); padding: 6px 8px; text-align: center; text-transform: none; letter-spacing: normal; color: var(--text); }
.lb-tabelle tbody th, .lb-tabelle tfoot th { text-align: left; white-space: nowrap; position: sticky; left: 0; background: #fff; }
.lb-tabelle thead th { position: sticky; top: 0; background: #fff; max-width: 140px; font-size: .8rem; vertical-align: bottom; }
.lb-tabelle td.gut { background: #e6f4ea; color: #1e7b34; font-weight: 700; }
.lb-tabelle td.begonnen { background: var(--lb-wasser-hell); color: #075d93; }
.lb-tabelle td.warn { background: #fff4d6; color: #8a6100; font-weight: 700; }
.lb-tabelle td.schlecht { background: #fde8e9; color: var(--brand-dark); font-weight: 700; }
.lb-tabelle td.leer { background: #f6f7f9; }
@media (max-width: 640px) {
  .lb-modul-karte { grid-template-columns: auto 1fr; }
  .lb-modul-knoepfe { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .lb-modul-knoepfe > * { flex: 1 1 auto; }
  .lb-kopf { padding-right: 46px; }
  .lb-kopf::after { width: 34px; }
  .lb-boje { width: 28px; height: 28px; font-size: .8rem; }
}

/* 1.76: Videos in der Lernbahn */
.lb-video { display: block; width: 100%; max-height: 460px; background: #000; border-radius: 10px; margin: 6px 0 12px; }
.lb-e-video { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.lb-e-video .lb-video { max-width: 420px; max-height: 240px; margin: 0; }

/* 1.78: Bilder im Fließtext, Trennlinie */
.lb-bild-text { margin: 10px auto 4px; background: #fff; }
.lb-text em { color: var(--muted); font-style: italic; }
.lb-trenner { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }

/* 1.78 Lernbahn: aufklappbarer Bereich (+++) und Kernsätze */
.lb-kapitel details.lb-mehr { margin: 18px 0 6px; border: 1px solid #d8dee4; border-radius: 10px; background: #f7f9fb; }
.lb-kapitel details.lb-mehr > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #1f5f99; list-style: none; }
.lb-kapitel details.lb-mehr > summary::before { content: "▸ "; }
.lb-kapitel details.lb-mehr[open] > summary::before { content: "▾ "; }
.lb-kapitel details.lb-mehr > :not(summary) { margin-left: 14px; margin-right: 14px; }
.lb-kapitel details.lb-mehr[open] { padding-bottom: 8px; }
.lb-kapitel img.lb-bild-text { display: block; max-width: 100%; max-height: 85vh; margin: 12px auto; border-radius: 12px; }

/* 1.83 Lernbahn: Bereiche */
details.lb-bereich { margin: 0 0 14px; background: var(--card, #fff); border: 1px solid var(--border, #dde3e8); border-radius: 14px; padding: 4px 12px 10px; }
details.lb-bereich > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
details.lb-bereich > summary::-webkit-details-marker { display: none; }
details.lb-bereich > summary::after { content: "▾"; margin-left: 4px; color: var(--muted, #6b7785); transition: transform .15s; }
details.lb-bereich:not([open]) > summary::after { transform: rotate(-90deg); }
.lb-bereich-icon { font-size: 1.9em; line-height: 1; }
.lb-bereich-titel { flex: 1; display: flex; flex-direction: column; }
.lb-bereich-titel strong { font-size: 1.12em; }
.lb-bereich-titel small { color: var(--muted, #6b7785); }
.lb-bereich-stand { font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #eef2f6; white-space: nowrap; }
.lb-bereich-stand.gut { background: #e3f5e9; color: #1c7a40; }
.lb-bereich-bahn { height: 6px; border-radius: 3px; background: #eef2f6; overflow: hidden; margin: 0 2px 12px; }
.lb-bereich-bahn > span { display: block; height: 100%; background: linear-gradient(90deg, #0069b4, #1c9c4a); }
details.lb-bereich .lb-module { margin-bottom: 4px; }
.lb-bereich-gruppe { margin: 10px 0 16px; }
.lb-bereich-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: #f2f6fa; border-radius: 10px; border-left: 5px solid var(--red, #e30613); }
.lb-bereich-kopf.ohne { border-left-color: #8a98a5; }
.lb-bereich-gruppe .lb-zeile { padding-left: 14px; }
.lb-bereich-gruppe .lb-leer { margin: 8px 14px; }
.lb-bereich-dialog { min-width: 0; max-width: 100%; }  /* seit 2.42: passte nicht in den Dialog (rechts abgeschnitten) */
.lb-bereich-dialog input:not([type=checkbox]) { box-sizing: border-box; max-width: 100%; }
.lb-bereich-dialog .lb-e-grund .lb-e-breit { flex: 1 1 180px; min-width: 0; }
.lb-bereich-dialog .lb-e-breit input, #lbb-text, #lbb-empf-suche { width: 100%; }
.lb-bereich-kopf { cursor: pointer; }
.lb-bereich-kopf.zu { opacity: .85; }

/* Seit 2.00: Abschnitte innerhalb eines Bereichs (IuK: AV 710 · AV 711 · AV 715) */
.lb-unterabschnitt { margin: 10px 0 0; padding: 6px 10px; border-left: 4px solid #e30613; background: #f6f8fa; border-radius: 6px; font-size: 1em; font-weight: 700; }
.lb-unterabschnitt small { font-weight: 400; color: var(--muted, #6b7785); margin-left: 6px; }
.lb-unterabschnitt.pflege { margin: 12px 0 2px; }

/* Seit 2.01: 🎓 Prüfungsbahn */
.pb-unter { margin: 0 0 12px; }
.pb-kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pb-regeln { margin: 8px 0 10px 18px; } .pb-regeln li { margin: 4px 0; }
.pb-warn { background: #fdecea; border-left: 4px solid #e30613; padding: 8px 12px; border-radius: 6px; }
.pb-hinweis { background: #fff7b8; padding: 8px 12px; border-radius: 6px; }
.pb-zaehler { font-weight: 700; margin: 10px 0 4px; }
.pb-rot { background: #e30613 !important; color: #fff !important; }
.pb-auswahl { margin: 8px 0; } .pb-auswahl summary { cursor: pointer; font-weight: 600; }
.pb-check { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-weight: normal; }
.pb-treffer { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .pb-gewaehlt { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-x { border: 0; background: none; padding: 0 2px; cursor: pointer; font-weight: 700; }
.pb-liste { max-height: 50vh; overflow: auto; }
.pb-antwort-zeile { display: flex; gap: 8px; align-items: center; margin: 4px 0; } .pb-antwort-zeile .pbf-ant { flex: 1; }
.pb-frage-zeile { border-top: 1px solid var(--border, #dde3e8); padding: 8px 0; } .pb-frage-zeile summary { cursor: pointer; }
.pb-frage-zeile.inaktiv summary { color: var(--muted, #6b7785); }
.pb-frage-zeile li.richtig, .pb-ausw li.richtig { color: #1c7c3c; font-weight: 600; }
.pb-ausw { border-left: 4px solid #1c9c4a; padding: 4px 10px; margin: 8px 0; } .pb-ausw.falsch { border-left-color: #e30613; }
.pb-ausw ul { list-style: none; padding-left: 4px; }
body.pb-gesperrt { overflow: hidden; }
#pb-modus { position: fixed; inset: 0; z-index: 2147483000; background: #f4f7fa; overflow: auto; padding: 16px; -webkit-user-select: none; user-select: none; }
#pb-modus .pb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #e30613; color: #fff; padding: 10px 14px; border-radius: 12px; max-width: 760px; margin: 0 auto 12px; }
#pb-modus .pb-kopf .hint { color: #ffe8e8; }
.pb-uhr { font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; } .pb-uhr.knapp { color: #ffed00; }
.pb-punkte { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 0 auto 12px; }
.pb-punkte button { width: 36px; height: 36px; border-radius: 50%; padding: 0; background: #fff; color: #1d2630; border: 2px solid #c5ced6; }
.pb-punkte button.fertig { background: #1c9c4a; color: #fff; border-color: #1c9c4a; } .pb-punkte button.jetzt { border-color: #e30613; border-width: 3px; }
#pb-modus .pb-frage { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 16px; }
#pb-modus .pb-knoepfe { max-width: 760px; margin: 12px auto; }
.pb-bestaetigen { max-width: 760px; margin: 12px auto; background: #fff7b8; border-radius: 12px; padding: 12px 16px; }
.pb-ende { max-width: 560px; margin: 12vh auto 0; background: #fff; border-radius: 16px; padding: 24px; text-align: center; border-top: 8px solid #1c9c4a; }
.pb-ende.abbruch, .pb-ende.nicht { border-top-color: #e30613; } .pb-ende-ic { font-size: 3em; } .pb-ende-zahl { font-size: 1.6em; font-weight: 700; }

/* Seit 2.02: „Wer hat was“ – Prozent in der Zelle, Antworten ansehen */
.lb-prozent { display: block; font-size: .72em; font-weight: 600; color: var(--muted, #6b7785); line-height: 1.1; }
.lb-zellknopf { background: none; border: 0; padding: 2px 6px; margin: 0; color: inherit; font: inherit; cursor: pointer; min-width: 100%; }
.lb-klick:hover { outline: 2px solid #0069b4; outline-offset: -2px; }
.lb-ant-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-ant-zahl { font-size: 1.5em; font-weight: 700; padding: 2px 10px; border-radius: 10px; background: #e6f5ec; color: #1c7c3c; }
.lb-ant-zahl.warn { background: #fdecea; color: #c0000f; }
.pb-ausw li.falsch-gewaehlt { color: #c0000f; font-weight: 600; }
.lb-ant-dialog { max-height: 80vh; overflow: auto; }
.lb-ant-alle { margin: 10px 0; } .lb-ant-alle summary { cursor: pointer; font-weight: 600; }

/* Seit 2.06: Verpflegung nach dem Dienst (static/js/dienst-verpflegung.js) */
.dv-zeile { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: #fff8e1; border: 1px solid #f3dd8a; font-size: 0.92em; }
.dv-antwort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.dv-frage { font-weight: 600; }
.dv-ja, .dv-nein { min-width: 64px; padding: 4px 12px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.dv-ja { background: var(--green, #1c9c4a); border: 1px solid var(--green, #1c9c4a); color: #fff; }
.dv-nein { background: #fff; border: 1px solid #9ca3af; color: #374151; }
.dv-ok { color: var(--green, #1c9c4a); font-weight: 600; }
.dv-nicht { color: #6b7280; font-weight: 600; }
.dv-aendern, .dv-zahl { background: none; border: none; padding: 0; color: #0069b4; text-decoration: underline; cursor: pointer; font-size: inherit; }
.dv-zahl { font-weight: 600; }
.dv-liste { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; }
.dv-person { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eee; }
.dv-wahlen { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.dv-wahl { padding: 3px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer; min-width: 52px; font-weight: 600; }
.dv-wahl.ja.aktiv { background: var(--green, #1c9c4a); border-color: var(--green, #1c9c4a); color: #fff; }
.dv-wahl.nein.aktiv { background: #6b7280; border-color: #6b7280; color: #fff; }
.dv-wahl:disabled { opacity: 0.5; cursor: default; }
.dv-summe { font-weight: 600; }
/* Seit 2.07: doppelte Kinder bei der Übernahme */
.ss-doppelt { margin: 4px 0 6px; padding: 6px 10px; border-radius: 8px; background: #eef6ff; border: 1px solid #c7ddf5; font-size: 0.9em; color: #1f3b57; }
.sk-guthaben { white-space: nowrap; }
.sk-guthaben-stand { font-weight: 600; margin-right: 4px; }
/* Seit 2.08: Umfrage pausieren */
.umfrage-status { font-size: 0.85em; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.umfrage-status.aktiv { background: #e7f6ec; color: #1c7a3c; }
.umfrage-status.pausiert { background: #fff4d6; color: #8a5a00; }
/* Seit 2.09: Kleiderkammer */
.kk-reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.kk-warn-zahl { background: #f59e0b; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 0.8em; margin-left: 4px; }
.kk-treffer { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.kk-treffer-knopf { text-align: left; background: #fff; color: inherit; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 8px 10px; }
.kk-person-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.kk-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0; }
.kk-tabelle th, .kk-tabelle td { text-align: left; padding: 6px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.kk-tabelle th { font-size: 0.8em; color: #6b7280; text-transform: uppercase; }
.kk-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.kk-neu-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 64px auto; gap: 6px; margin-bottom: 6px; }
.kk-neu-zeile select, .kk-neu-zeile input { width: 100%; min-width: 0; }
.kk-beleg { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.kk-beleg.offen { border-color: #f59e0b; background: #fffbeb; }
.kk-beleg-status { margin-top: 4px; font-size: 0.9em; }
.kk-fehlt { color: #b45309; font-weight: 600; }
.kk-hochladen { cursor: pointer; display: inline-flex; align-items: center; }
.kk-hinweis { background: #fffbeb; border: 1px solid #f3dd8a; }
.kk-link { background: none; border: none; padding: 0; color: #0069b4; text-decoration: underline; cursor: pointer; font: inherit; }
.kk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kk-artikel.aus { opacity: 0.6; }
.kk-artikel-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.kk-groessen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.kk-groesse { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; text-align: center; }
.kk-groesse.knapp { border-color: #f59e0b; background: #fffbeb; }
.kk-g-name { font-weight: 700; }
.kk-g-zahl { font-size: 1.5em; font-weight: 700; }
.kk-g-knoepfe { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.kk-wer { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.kk-wer label { font-weight: normal; }
@media (max-width: 520px) { .kk-neu-zeile { grid-template-columns: 1fr 1fr; } .kk-tabelle th:nth-child(5), .kk-tabelle td:nth-child(5) { display: none; } }
/* Seit 2.11: Kleiderkammer – Rubriken zugeklappt, Ausweis scannen */
.kk-such-zeile { display: flex; gap: 6px; flex-wrap: wrap; }
.kk-such-zeile input { flex: 1 1 240px; min-width: 0; }
.kk-reader { max-width: 360px; margin-top: 8px; }
.kk-rubrik { padding: 0; margin-bottom: 10px; }
.kk-rubrik > summary { cursor: pointer; list-style: none; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.kk-rubrik > summary::-webkit-details-marker { display: none; }
.kk-rubrik > summary::before { content: "▸"; color: #6b7280; }
.kk-rubrik[open] > summary::before { content: "▾"; }
.kk-r-name { font-weight: 700; font-size: 1.1em; }
.kk-rubrik .kk-artikel { margin: 0 10px 8px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.kk-artikel > summary { cursor: pointer; list-style: none; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.kk-artikel > summary::-webkit-details-marker { display: none; }
.kk-artikel > summary::before { content: "▸"; color: #9ca3af; }
.kk-artikel[open] > summary::before { content: "▾"; }
.kk-a-name { font-weight: 600; }
.kk-a-info { font-size: 0.88em; color: #6b7280; }
.kk-knapp-marke { color: #b45309; font-weight: 600; }
.kk-artikel-inhalt { padding: 0 10px 10px; }
.kk-groessen { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.kk-groesse { padding: 4px; }
.kk-g-zahl { font-size: 1.25em; }
.kk-mail-haken { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin-top: 8px; }
.kk-mail-vorschau { width: 100%; height: 55vh; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
/* Seit 2.13 */
.kk-kat { display: inline-block; font-size: 0.78em; font-weight: 600; background: #eef2f7; color: #374151; border-radius: 6px; padding: 1px 6px; margin-right: 2px; }
.kk-lieferant { font-size: 0.9em; margin: 2px 0 4px; }
/* Seit 2.15: Kategorie als eigene Ebene */
.kk-kategorie { margin: 0 10px 8px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
.kk-kategorie > summary { cursor: pointer; list-style: none; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.kk-kategorie > summary::-webkit-details-marker { display: none; }
.kk-kategorie > summary::before { content: "▸"; color: #6b7280; }
.kk-kategorie[open] > summary::before { content: "▾"; }
.kk-k-name { font-weight: 700; }
.kk-kategorie .kk-artikel { margin: 0 8px 6px; }

/* Seit 2.18: Patientenablage */
.pa-plane { display: flex; flex-direction: column; gap: 6px; background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px); border: 2px dashed #9ca3af; border-radius: 12px; padding: 8px; }
.pa-tor { text-align: center; font-weight: 600; font-size: 0.85em; background: #fff; border-radius: 8px; padding: 4px 8px; }
.pa-zonen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pa-zone { background: #fff; border: 3px solid var(--z); border-radius: 10px; overflow: hidden; min-height: 80px; }
.pa-zone.klickbar { cursor: pointer; }
.pa-zone.klickbar:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--z) 35%, transparent); }
.pa-zone-kopf { background: var(--z); color: var(--zt); padding: 4px 8px; font-size: 0.9em; display: flex; justify-content: space-between; }
.pa-zone-hinweis { font-size: 0.75em; color: #6b7280; padding: 3px 8px 0; }
.pa-plaetze { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 8px 8px; }
.pa-platz.leer { min-width: 38px; height: 30px; border: 1px dashed #cbd5e1; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 0.75em; }
.pa-chip { background: #fff; color: #111827; border: 2px solid var(--z, #6b7280); border-radius: 6px; padding: 3px 7px; font-size: 0.82em; min-height: 30px; }
.pa-chip.aktiv { outline: 3px solid #2563eb; }
.pa-chip.ueber { border-style: dashed; background: #fef2f2; }
.pa-chip.gross { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 44px; }
.pa-chip.gross span { font-size: 0.75em; color: #6b7280; }
.pa-chip.lang { animation: pa-blink 1.2s infinite; }
@keyframes pa-blink { 50% { background: #fecaca; } }
.pa-ohne-platz { width: 100%; font-size: 0.8em; color: #b91c1c; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pa-eingang { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.pa-karte { text-align: left; background: #fff; color: inherit; border: 1px solid #d1d5db; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 0.9em; }
.pa-karte.aktiv { border: 2px solid #2563eb; background: #eff6ff; }
.pa-gewaehlt { margin-bottom: 0; }
.pa-uebung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.pa-uhr { font-variant-numeric: tabular-nums; font-weight: 600; }
.pa-lagetext { background: #fff7ed; border-left: 4px solid #f97316; padding: 6px 10px; border-radius: 6px; margin: 8px 0 0; }
.pa-marke { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.8em; font-weight: 600; background: #e5e7eb; }
.pa-lagen { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.pa-lage { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pa-laeuft { color: #16a34a; font-weight: 600; font-size: 0.85em; }
.pa-punkte { font-size: 1.1em; margin: 4px 0 8px; }
.pa-punkte-zahl { font-size: 1.8em; font-weight: 700; }
.pa-warnung { background: #fef3c7; border-radius: 8px; padding: 6px 10px; }
.pa-auswertung { display: flex; flex-direction: column; gap: 6px; }
.pa-aw-zeile { border-left: 5px solid #16a34a; background: #f9fafb; border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.pa-aw-zeile.zu_niedrig, .pa-aw-zeile.falsch, .pa-aw-zeile.offen { border-left-color: #dc2626; background: #fef2f2; }
.pa-aw-zeile.zu_hoch { border-left-color: #f59e0b; background: #fffbeb; }
.pa-erklaerung { font-size: 0.9em; }
.pa-zahlen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pa-zahl { padding: 3px 10px; border-radius: 12px; font-size: 0.85em; }
.pa-zahl.grau { background: #e5e7eb; }
.pa-sk-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pa-sk { background: #fff; color: #111827; border: 3px solid var(--z); }
.pa-sk.aktiv { background: var(--z); color: var(--zt); }
.pa-lagemeldung { background: #f3f4f6; padding: 8px 10px; border-radius: 8px; }
.pa-foto { max-width: 100%; max-height: 320px; border-radius: 10px; margin-bottom: 8px; display: block; }
.pa-gl-titel { margin: 12px 0 4px; }
.pa-gl-liste { margin: 0 0 6px; padding-left: 20px; }
.pa-gl-liste li { margin: 2px 0; }
.pa-zone-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; margin-bottom: 6px; background: #f9fafb; border-radius: 8px; }
.pa-zone-edit input[type=color] { width: 40px; height: 32px; padding: 0; }
.pa-zone-edit .pa-kurz { width: 80px; }
.pa-zone-edit .pa-zahl-ein { width: 60px; }
.pa-zone-edit .pa-hinweis-ein { flex: 1 1 200px; }
.pa-pat-edit { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.pa-datei { cursor: pointer; display: inline-block; padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 6px; }
/* Seit 2.19: Kleiderkammer – Ausgeben per Antippen */
.kk-korb { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.kk-korb-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 5px 8px; }
.kk-korb-gr { background: #fff; border: 1px solid #d1d5db; border-radius: 6px; padding: 0 6px; font-weight: 600; }
.kk-korb-knoepfe { display: flex; gap: 4px; flex-shrink: 0; }
.kk-korb-leer { margin: 0 0 8px; }
.kk-auswahl { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; background: #fafafa; }
.kk-wahl-suche input { width: 100%; }
.kk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.kk-chip { background: #fff; color: inherit; border: 1px solid #d1d5db; border-radius: 16px; padding: 4px 12px; font-size: 0.9em; }
.kk-chip.aktiv { background: var(--dlrg-rot, #e30613); border-color: var(--dlrg-rot, #e30613); color: #fff; }
.kk-wahl-kat { margin-bottom: 8px; }
.kk-wahl-kat-titel { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin: 6px 0 2px; }
.kk-wahl-artikel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid #eee; }
.kk-wahl-name { flex: 1 1 180px; font-weight: 600; }
.kk-wahl-groessen { display: flex; flex-wrap: wrap; gap: 5px; }
.kk-gr-knopf { background: #fff; color: #111827; border: 1px solid #9ca3af; border-radius: 8px; padding: 3px 9px; min-width: 46px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.kk-gr-knopf small { font-size: 0.7em; color: #6b7280; }
.kk-gr-knopf.leer { border-style: dashed; color: #9ca3af; }
.kk-gr-knopf.drin { background: #ecfdf5; border-color: #10b981; }
/* Seit 2.65: „−“ an einer ausgewählten Größe nimmt eins zurück – direkt rechts angehängt (nichts wird abgeschnitten) */
.kk-gr-wrap { display: inline-flex; align-items: stretch; }
.kk-gr-wrap .kk-gr-knopf.drin { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.kk-gr-minus { min-width: 32px; padding: 0 6px; border-radius: 0 8px 8px 0; background: #fff; color: #b91c1c; border: 1px solid #10b981; border-left: none;
  font-weight: 700; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.kk-gr-minus:hover { background: #fee2e2; }
/* Seit 2.20: Lernbahn – interaktive Übungen und Animationen */
.lb-aufgabe { margin: 16px 0; border: 2px solid #ffd54a; border-radius: 14px; background: #fffdf3; padding: 12px 14px 12px; }
.lb-aufgabe.geschafft { border-color: #4caf50; background: #f4fbf4; }
.lb-aufgabe-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.lb-aufgabe-art { font-weight: 700; color: #7a5a00; }
.lb-aufgabe.geschafft .lb-aufgabe-art { color: #2e7d32; }
.lb-aufgabe-stand { font-size: .82em; background: #ffe68a; color: #5a4300; border-radius: 10px; padding: 2px 9px; font-weight: 600; }
.lb-aufgabe.geschafft .lb-aufgabe-stand { background: #c8e6c9; color: #1b5e20; }
.lb-aufgabe-frage { font-weight: 600; margin: 0 0 8px; font-size: 1.02em; }
.lb-aufgabe-body .hint { margin: 0 0 8px; }
.lb-aufgabe-feedback { margin-top: 8px; border-radius: 8px; padding: 0; font-size: .95em; }
.lb-aufgabe-feedback.gut { background: #e3f4e4; padding: 8px 10px; }
.lb-aufgabe-feedback.warn { background: #fdecea; padding: 8px 10px; }
.lb-aufgabe-feedback:empty { display: none; }
.lb-aufgabe-feedback .btn-mini { margin-top: 6px; }
.lb-aufgabe-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.lb-chip-knopf { background: #fff; color: #1f2937; border: 1.5px solid #c8cfd6; border-radius: 10px; padding: 7px 12px; text-align: left; font-size: .95em; line-height: 1.3; }
.lb-chip-knopf.aktiv { border-color: #0069b4; background: #e8f1fb; box-shadow: 0 0 0 2px rgba(0,105,180,.2); }
.lb-chip-knopf.fest { background: #c8e6c9; border-color: #4caf50; color: #1b5e20; }
.lb-chip-knopf.benutzt { opacity: .35; }
.lb-chip-knopf.wackel { animation: lb-wackel .4s; border-color: #e30613; }
@keyframes lb-wackel { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.lb-sort-reihe { list-style: none; padding: 0; margin: 0 0 8px; min-height: 36px; border: 1px dashed #c8cfd6; border-radius: 10px; padding: 6px; }
.lb-sort-reihe li { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #c8cfd6; border-radius: 10px; padding: 6px 8px; margin: 4px 0; }
.lb-sort-reihe li.richtig { border-color: #4caf50; background: #eef9ee; }
.lb-sort-reihe li.falsch { border-color: #e30613; background: #fdecea; }
.lb-sort-reihe li span:nth-child(2) { flex: 1; }
.lb-sort-nr { width: 26px; height: 26px; border-radius: 50%; background: #0069b4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85em; flex: none; }
.lb-sort-weg { background: none; border: none; color: #8a98a5; padding: 2px 6px; font-size: 1em; }
.lb-sort-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-zuordnen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-zu-spalte { display: flex; flex-direction: column; gap: 6px; }
.lb-luecken-text { line-height: 2; font-size: 1.02em; }
.lb-luecke { display: inline-block; min-width: 70px; border: 2px dashed #0069b4; border-radius: 8px; background: #fff; padding: 2px 10px; margin: 0 2px; font-weight: 600; color: #0069b4; }
.lb-luecke.aktiv { background: #e8f1fb; box-shadow: 0 0 0 2px rgba(0,105,180,.25); }
.lb-luecke.voll { border-style: solid; color: #1f2937; }
.lb-luecke.richtig { border-color: #4caf50; background: #eef9ee; }
.lb-luecke.falsch { border-color: #e30613; background: #fdecea; }
.lb-wortbank { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lb-rf-karte { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.lb-rf-karte p { margin: 4px 0 0; font-size: 1.05em; }
.lb-rf-ja { background: #2e7d32; }
.lb-rf-nein { background: #c62828; }
.lb-rf-ende { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; font-size: 1.05em; }
.lb-karte { width: 100%; min-height: 150px; background: transparent; border: none; padding: 0; perspective: 900px; color: inherit; }
.lb-karte-innen { position: relative; width: 100%; min-height: 150px; transition: transform .5s; transform-style: preserve-3d; }
.lb-karte.offen .lb-karte-innen { transform: rotateY(180deg); }
.lb-karte-vorn, .lb-karte-hinten { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px; border-radius: 14px; backface-visibility: hidden; font-size: 1.05em; }
.lb-karte-vorn { background: #0069b4; color: #fff; }
.lb-karte-vorn small { margin-top: 8px; opacity: .75; font-size: .75em; }
.lb-karte-hinten { background: #fff; border: 2px solid #0069b4; transform: rotateY(180deg); }
.lb-fall { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.lb-fall-alt { color: #6b7280; font-size: .9em; padding-left: 10px; border-left: 3px solid #c8cfd6; margin-bottom: 6px; }
.lb-fall-text { font-size: 1.05em; margin-bottom: 10px; }
.lb-fall-optionen { display: flex; flex-direction: column; gap: 6px; }
.lb-fall-option { text-align: left; background: #fff; color: #1f2937; border: 1.5px solid #c8cfd6; border-radius: 10px; padding: 9px 12px; }
.lb-fall-option.richtig { border-color: #4caf50; background: #eef9ee; }
.lb-fall-option.falsch { border-color: #e30613; background: #fdecea; }
.lb-schaetz { display: flex; flex-direction: column; gap: 4px; }
.lb-schaetz-wert { font-size: 1.6em; font-weight: 700; text-align: center; }
.lb-schaetz input { width: 100%; }
.lb-schaetz-skala { display: flex; justify-content: space-between; font-size: .8em; color: #6b7280; }
.lb-rechnen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lb-rechnen input { width: 140px; }
.lb-auswahl .lb-antwort.richtig { background: #eef9ee; border-radius: 8px; }
.lb-auswahl .lb-antwort.falsch { background: #fdecea; border-radius: 8px; text-decoration: line-through; }
.lb-hotspot { position: relative; max-width: 360px; margin: 0 auto; cursor: crosshair; }
.lb-hotspot img, .lb-hotspot svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.lb-figur { background: #fff; border: 1px solid #e5e7eb; }
.lb-hotspot-marken { position: absolute; inset: 0; pointer-events: none; }
.lb-hot-marke { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 3px solid #4caf50; background: rgba(76,175,80,.25); aspect-ratio: 1; }
.lb-hot-marke.zeig { border-color: #0069b4; background: rgba(0,105,180,.2); }
.lb-hot-punkt { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(227,6,19,.6); animation: lb-punkt .7s forwards; }
@keyframes lb-punkt { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
.lb-hotspot-liste { font-size: .9em; color: #6b7280; }
.lb-hot-ziel.gut { color: #2e7d32; font-weight: 600; }
.lb-hot-ziel.zeig { color: #0069b4; }
.lb-anim-kopf p { margin: 0 0 8px; }
.lb-anim-buehne { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 6px; }
.lb-svg { width: 100%; height: auto; max-height: 460px; display: block; }
.lb-svg-t { font-size: 11px; font-weight: 700; fill: #1f2937; }
.lb-svg-k { font-size: 8.5px; fill: #4b5563; }
.lb-anim-steuer { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; }
.lb-anim-steuer label { display: flex; align-items: center; gap: 6px; font-size: .9em; }
.lb-anim-wert { font-size: 1.05em; }
.lb-anim-wert strong { font-size: 1.4em; }
.lb-anim-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lb-anim-station { font-weight: 600; color: #0069b4; }
.lb-stationen { columns: 2; font-size: .9em; margin: 8px 0 0; padding-left: 22px; }
.lb-stationen li { padding: 1px 4px; border-radius: 6px; break-inside: avoid; }
.lb-stationen li.aktiv { background: #ffe68a; font-weight: 600; }
.lb-mini-tabelle { border-collapse: collapse; margin-top: 8px; font-size: .9em; width: 100%; }
.lb-mini-tabelle td, .lb-mini-tabelle th { border-bottom: 1px solid #eee; padding: 4px 8px; text-align: left; }
.lb-zs-leiste { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 0 8px; }
.lb-zs-punkt { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #c8cfd6; background: #fff; color: #4b5563; font-weight: 700; padding: 0; }
.lb-zs-punkt.vorbei { border-color: #0069b4; color: #0069b4; }
.lb-zs-punkt.aktiv { background: #e30613; border-color: #e30613; color: #fff; transform: scale(1.12); }
.lb-zs-strich { flex: 1 0 14px; height: 3px; background: #c8cfd6; }
.lb-zs-karte { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px 16px 12px; overflow: hidden; }
.lb-zs-karte.lb-zs-neu { animation: lb-ein .35s; }
@keyframes lb-ein { from { opacity: 0; transform: translateY(6px); } }
.lb-zs-balken { position: absolute; left: 0; top: 0; right: 0; height: 4px; background: #eee; }
.lb-zs-balken span { display: block; height: 100%; background: #e30613; width: 0; }
.lb-zs-icon { font-size: 2em; line-height: 1; }
.lb-zs-karte h4 { margin: 6px 0 4px; }
.lb-zs-karte p { margin: 0; }
.lb-stufen { display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: stretch; margin-bottom: 8px; }
.lb-stufen-skala { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lb-stufen-fuell { width: 26px; flex: 1; min-height: 160px; border: 2px solid #9ca3af; border-radius: 14px; background: #f3f4f6; position: relative; overflow: hidden; }
.lb-stufen-fuell span { position: absolute; left: 0; right: 0; bottom: 0; background: #e05555; transition: height .25s; }
.lb-stufen-skala output { font-weight: 700; font-size: 1.1em; }
.lb-stufen-text { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; }
.lb-stufen-text h4 { margin: 0 0 6px; }
.lb-stufen-slider { width: 100%; }
.lb-hlw-reiter { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.lb-hlw-tab { background: #fff; color: #1f2937; border: 1.5px solid #c8cfd6; }
.lb-hlw-tab.aktiv { background: #0069b4; color: #fff; border-color: #0069b4; }
.lb-hlw-takt { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.lb-hlw-kreis { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #fff; border: 4px solid #e30613; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-hlw-puls { position: absolute; inset: -4px; border-radius: 50%; border: 4px solid #e30613; opacity: 0; }
.lb-hlw-puls.an { animation: lb-hlwpuls .35s ease-out; }
@keyframes lb-hlwpuls { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.lb-hlw-zahl { font-size: 2.6em; font-weight: 800; line-height: 1; }
.lb-hlw-was { font-size: .85em; color: #6b7280; text-align: center; padding: 0 10px; }
.lb-hlw-tiefe { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 160px; text-align: center; }
.lb-hlw-tiefe-balken { width: 22px; height: 110px; border: 2px solid #9ca3af; border-radius: 8px; position: relative; overflow: hidden; background: #f3f4f6; }
.lb-hlw-tiefe-balken span { position: absolute; left: 0; right: 0; top: 0; background: #e30613; height: 0; }
.lb-hlw-knopf { width: 100%; max-width: 320px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 34px 10px; font-size: 1.6em; border-radius: 20px; background: #e30613; color: #fff; user-select: none; touch-action: manipulation; }
.lb-hlw-knopf small { font-size: .55em; opacity: .85; margin-top: 4px; }
.lb-hlw-knopf.an { transform: scale(.96); }
.lb-schock { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.lb-schock-figur svg { width: 100%; height: auto; }
.lb-schock-werte label { display: block; margin-bottom: 8px; }
.lb-schock-werte input[type=number] { width: 70px; }
.lb-schock-werte input[type=range] { width: 100%; }
.lb-schock-tab.stufe2 td:last-child { color: #b45309; }
.lb-schock-tab.stufe3 td:last-child { color: #b91c1c; font-weight: 600; }
.lb-o2 { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start; }
.lb-o2-svg { width: 100%; max-height: 240px; }
.lb-o2-werte label { display: block; margin-bottom: 8px; }
.lb-o2-werte input[type=range] { width: 100%; }
.lb-o2-fl { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lb-o2-fl .aktiv { background: #0069b4; color: #fff; border-color: #0069b4; }
.lb-o2-formel { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; font-size: .95em; }
.lb-rr { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 14px; align-items: start; }
.lb-rr-svg { width: 100%; }
.lb-rr-ton { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.lb-rr-herz { font-size: 2em; color: #ccc; }
.lb-rr-herz.an { animation: lb-herzan .25s; color: #e30613; }
@keyframes lb-herzan { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
.lb-rr-pump { user-select: none; touch-action: manipulation; }
.lb-puls { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
.lb-puls-kreis { position: relative; width: 120px; height: 120px; border-radius: 50%; background: #fdecea; display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: 800; }
.lb-puls-welle { position: absolute; inset: 0; border-radius: 50%; background: #e30613; opacity: 0; }
.lb-puls-welle.an { animation: lb-pulswelle .3s ease-out; }
@keyframes lb-pulswelle { 0% { opacity: .5; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.1); } }
.lb-puls-kreis span { position: relative; }
.lb-puls-eingabe label, .lb-atemz-eingabe label { display: block; margin: 6px 0; }
.lb-puls-eingabe input, .lb-atemz-eingabe input { width: 80px; }
.lb-puls-r.aktiv { background: #0069b4; color: #fff; border-color: #0069b4; }
.lb-atemz { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: start; }
.lb-zeit-knopf { width: 100%; max-width: 320px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding: 28px 10px; font-size: 1.4em; border-radius: 20px; user-select: none; touch-action: manipulation; }
.lb-zeit-knopf small { font-size: .6em; opacity: .85; margin-top: 4px; }
.lb-zeit-knopf.an { background: #0069b4; transform: scale(.97); }
.lb-zeit-ergebnis { margin-top: 8px; }
@media (max-width: 560px) {
  .lb-zuordnen { grid-template-columns: 1fr 1fr; }
  .lb-stationen { columns: 1; }
  .lb-schock, .lb-o2, .lb-rr, .lb-puls, .lb-atemz { grid-template-columns: 1fr; }
  .lb-schock-figur, .lb-o2-svg { max-width: 140px; margin: 0 auto; }
  .lb-rr-svg { max-width: 260px; margin: 0 auto; }
}

/* 2.21 – Tauchdruck-Animation (San B) */
.lb-tauch { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }
.lb-tauch-svg { width: 180px; height: auto; border-radius: 10px; }
.lb-tauch-werte label { display: block; font-weight: 600; margin-bottom: 6px; }
.lb-tauch-werte input[type=range] { width: 100%; }
@media (max-width: 600px) { .lb-tauch { grid-template-columns: 1fr; } .lb-tauch-svg { width: 100%; max-width: 260px; margin: 0 auto; display: block; } }

/* Seit 2.23: Flugbuch */
.fb-tabelle-wrap { overflow-x: auto; }
.fb-zeile { cursor: pointer; }
.fb-auswahl-leiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 8px; }
.fb-zeile:hover td { background: #f3f7fb; }
.fb-fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; margin: 6px 0 10px; }
.fb-dialog.mcc-dialog { max-width: 640px; }
.fb-spur-svg, .fb-profil-svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.fb-karte { position: relative; width: 100%; aspect-ratio: 520 / 300; overflow: hidden; border-radius: 8px; margin-top: 6px; }
.fb-karte-kacheln { position: absolute; inset: 0; transform-origin: 0 0; }
.fb-karte .fb-spur-svg { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.fb-form label { display: block; margin-bottom: 8px; }
.fb-form input:not([type=checkbox]):not([type=radio]), .fb-form select, .fb-form textarea { width: 100%; box-sizing: border-box; }
.fb-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 14px; }
.fb-person { position: relative; margin-bottom: 8px; }
.fb-person-treffer { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.fb-block { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.fb-block h4 { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; }
.fb-info-kopf { display: grid; grid-template-columns: 110px 90px; font-size: 0.75em; color: #6b7280; font-weight: normal; text-align: center; }
.fb-check-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 3px 0; }
.fb-check-zeile .fb-text { width: 100%; box-sizing: border-box; }
.fb-info-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px; align-items: center; padding: 3px 0; text-align: center; }
.fb-info-zeile > span { text-align: left; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fb-info-zeile .fb-tel { width: 130px; }
.fb-status { font-size: 0.85em; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.fb-status.offen { background: #fff4d6; color: #8a5a00; }
.fb-status.frei { background: #e7f6ec; color: #1c7a3c; }
.fb-status.zu { background: #e5e7eb; color: #374151; }
.fb-unterschrieben { background: #e7f6ec; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
@media (max-width: 600px) {
  .fb-check-zeile { grid-template-columns: 1fr; }
  .fb-info-zeile { grid-template-columns: minmax(0, 1fr) 70px 70px; }
  .fb-info-kopf { grid-template-columns: 70px 70px; }
}

#flach-zurueck { display: none; }
/* Seit 2.26/2.27: „Flach“-Modus für breite Bildschirme mit wenig Höhe – die DJI-Fernsteuerung RC Plus (7", Querformat,
   Browser ≈ 960×500 CSS-px). Torsten: „die Titelleiste nimmt viel zu viel Platz weg und das Menü dann noch mal
   etwas mehr … die ganze Menüstruktur nimmt immer noch sehr sehr viel Platz weg“. Kopfzeile einzeilig mit
   Zurück-Knopf, Bereichskopf (Titel + Reiter) als schmale Leiste, Karten eng, Checklisten zweispaltig. */
@media (min-width: 601px) and (max-height: 640px) {
  header.mcc-kopf { padding: 2px 10px; gap: 10px; }
  header.mcc-kopf .logo { height: 24px; }
  header.mcc-kopf .brand > a { gap: 8px; }
  header.mcc-kopf .mcc-marke { display: flex; align-items: baseline; gap: 8px; }
  header.mcc-kopf h1.mcc-titel { font-size: 0.95rem; }
  header.mcc-kopf .mcc-titel-lang { display: none; }
  header.mcc-kopf #header-ansicht { font-size: 0.8rem; }
  header.mcc-kopf #flach-zurueck.flach-zurueck-da { display: inline-flex; flex-shrink: 0; margin-right: auto; }
  header.mcc-kopf .header-angemeldet-label, header.mcc-kopf #header-rolle, header.mcc-kopf #pwa-install-btn,
  header.mcc-kopf .header-ich-icon { display: none !important; }
  header.mcc-kopf #header-user-info { row-gap: 2px; }
  header.mcc-kopf .header-suche-input { width: 130px; padding: 2px 8px; font-size: 0.85rem; }
  header.mcc-kopf .btn-mini, header.mcc-kopf .header-pill { padding: 2px 8px; font-size: 0.85rem; }
  main { padding: 4px 10px; }
  main #kompakt-header-zurueck-btn { display: none !important; }
  .card { padding: 6px 10px; margin-bottom: 6px; }
  .card h2 { font-size: 1rem; }
  .card h3 { font-size: 1rem; }
  .card h4 { margin: 2px 0 4px; }
  /* Bereichskopf als schmale Leiste (Flugbuch, Kleiderkammer, Patientenablage …) */
  .flach-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 3px 10px; background: transparent; border: none; margin-bottom: 4px; }
  .flach-kopf > .hint { display: none; }
  .flach-kopf > h2 { margin: 0 !important; font-size: 0.95rem; }
  .flach-kopf .kk-reiter button, .kk-knoepfe button { padding: 3px 10px; font-size: 0.88rem; }
  /* Flugbuch */
  #view-flugbuch .kk-filter select { width: auto; flex: 1 1 140px; padding: 3px 6px; }
  #view-flugbuch .kk-knoepfe + .hint { display: none; }
  .fb-e-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .fb-e-kopf h3 { margin: 0 !important; font-size: 0.95rem; }
  .fb-e-kopf button { padding: 3px 10px; font-size: 0.88rem; }
  .fb-e-kopf .kk-person-kopf { gap: 8px; }
  .fb-e-kopf #fb-e-meldung { margin: 0 !important; margin-left: auto !important; }
  .fb-form label { margin-bottom: 3px; }
  .fb-form input:not([type=checkbox]):not([type=radio]), .fb-form select { padding: 3px 6px; }
  .fb-zwei { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 10px; }
  .fb-bloecke { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
  .fb-block { padding: 3px 8px; margin-bottom: 0; }
  .fb-block h4 { margin: 0 0 2px; font-size: 0.9rem; }
  .fb-check-zeile, .fb-info-zeile { padding: 1px 0; font-size: 0.9rem; }
  .fb-info-zeile { grid-template-columns: minmax(0, 1fr) 80px 70px; }
  .fb-info-kopf { grid-template-columns: 80px 70px; }
  .fb-info-zeile .fb-tel { width: 90px; padding: 2px 4px; }
  .kk-tabelle th, .kk-tabelle td { padding: 3px 5px; }
}
.fb-offline { background: #fff4d6; border: 1px solid #f3dd8a; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }
/* Seit 2.28: Einsatztagebuch / Funkprotokoll */
.eb-neu-form { display: grid; grid-template-columns: 170px 1fr 1fr 150px; gap: 6px 10px; align-items: end; }
.eb-neu-form label { display: block; }
.eb-neu-form input:not([type=checkbox]), .eb-neu-form select, .eb-neu-form textarea { width: 100%; box-sizing: border-box; }
.eb-neu-form .eb-haken { display: flex; align-items: center; gap: 6px; }
.eb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.eb-neu-form .eb-breit { grid-column: 1 / -1; }
.eb-neu-form .eb-haken { grid-column: 1 / -1; }
.eb-senden { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eb-tabelle td { vertical-align: top; }
.eb-storno td { color: #9ca3af; text-decoration: line-through; }
.eb-storno .eb-storno-text { text-decoration: none; color: #b45309; font-size: 0.85em; }
.eb-offen td { background: #fffbeb; }
.eb-kat { font-size: 0.75em; background: #e5e7eb; border-radius: 8px; padding: 1px 6px; }
@media (max-width: 700px) { .eb-neu-form { grid-template-columns: 1fr 1fr; } }
@media (min-width: 601px) and (max-height: 640px) {
  .eb-neu-form { gap: 3px 8px; }
  .eb-neu-form textarea { rows: 1; height: 34px; }
  .eb-neu .card { padding: 4px 8px; }
}

/* Seit 2.36: 🎓 Ausbildungsnachweise (ATN) – static/js/atn.js, atn-formular.js, Mein Profil */
.atn-chip { display: inline-block; font-size: 0.78em; border-radius: 10px; padding: 1px 8px; margin-left: 2px; white-space: nowrap; }
.atn-gruen { background: #dcf3e4; color: #166534; }
.atn-gelb { background: #fef3c7; color: #92400e; }
.atn-rot { background: #fde2e1; color: #9b1c1c; }
.atn-grau { background: #eef1f4; color: #475569; }
.atn-eintrag { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: var(--card); }
.atn-eintrag.atn-alt { opacity: 0.75; }
.atn-eintrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.atn-chips { margin-left: auto; }
.atn-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.atn-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.atn-filter input, .atn-filter select { width: auto; min-width: 0; flex: 1 1 200px; }
.atn-tabelle-wrap { overflow-x: auto; }
.atn-person-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.atn-bereich-titel { margin: 12px 0 4px; font-size: 0.95em; color: var(--muted); }
@media (max-width: 600px) { .atn-chips { margin-left: 0; width: 100%; } }

/* Seit 2.37: „Mein Profil“ in aufklappbaren Gruppen (static/js/mein-profil-gruppen.js) */
.mp-gruppe { margin-bottom: 12px; padding: 0; }
.mp-gruppe > summary { cursor: pointer; list-style: none; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mp-gruppe > summary::-webkit-details-marker { display: none; }
.mp-gruppe > summary::before { content: "▸"; color: var(--muted); width: 12px; }
.mp-gruppe[open] > summary::before { content: "▾"; }
.mp-gruppe-titel { font-weight: 700; font-size: 1.05rem; }
.mp-gruppe-hinweis { margin: 0; }
.mp-gruppe-inhalt { padding: 0 16px 6px; }
.mp-gruppe .mp-teil { border: none; box-shadow: none; border-top: 1px solid var(--border); border-radius: 0; padding: 14px 0 10px; margin: 0 !important; background: transparent; }
.mp-gruppe .mp-teil > h3 { font-size: 1rem; }

/* Seit 2.39: Verwaltungsleiste über einem Bereich (Bereich · Verwaltung · Archiv …), siehe verwaltungsLeisteZeigen() in mcc.js */
.verwaltungs-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.verwaltungs-leiste button { font-size: 0.92rem; padding: 6px 12px; }

/* Seit 2.41: Lernbahn – Unterlagen und eingebettete Animationen */
.lb-unterlagen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.lb-unterlagen-titel { font-weight: 600; font-size: 0.9rem; }
.lb-einbettung { width: 100%; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.lb-einbettung iframe { width: 100%; height: 100%; border: 0; display: block; }
.lb-einbettung:fullscreen { border-radius: 0; height: 100% !important; }
@media (max-width: 600px) { .lb-einbettung { height: 70vh !important; } }

/* Seit 2.42: Lernbahn-Rückmeldung (Mein Profil) und Empfänger-Auswahl im Bereich */
.lrm-block { margin: 10px 0; }
.lrm-reihe { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.lrm-wahl { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; cursor: pointer; }
.lbb-empf-liste { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.lbb-empf-liste label { display: flex; align-items: center; gap: 8px; font-weight: normal; padding: 2px 0; }
.lbb-empf-gewaehlt { margin-top: 4px; }

/* Seit 2.44: Kleiderkammer – Artikel ziehen, Knöpfe in der Zeile */
.kk-artikel > summary .kk-a-knoepfe { margin-left: auto; align-self: center; display: inline-flex; gap: 6px; }
.kk-rubrik > summary .kk-kat-neu, .kk-rubrik > summary .kk-kat-umbenennen { align-self: center; }
.kk-griff { color: #9ca3af; cursor: grab; user-select: none; }
.kk-artikel > summary[draggable=true] { cursor: grab; }
.kk-ziehen .kk-rubrik { outline: 2px dashed #d1d5db; outline-offset: -2px; }
.kk-ziehen .kk-rubrik.kk-ziel { outline: 2px dashed var(--dlrg-rot, #e30613); background: #fff5f5; }
.kk-g-min { background: none; border: 0; padding: 0 2px; margin: 0; font-size: 0.78em; color: #6b7280; text-decoration: underline dotted; cursor: pointer; min-height: 0; }
.kk-groesse.knapp .kk-g-min { color: #b45309; font-weight: 600; }

/* Seit 2.46: Vorschlags-Knöpfe unter Formularfeldern */
.mcc-dialog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mcc-dialog-chip { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px; font-size: 0.85em; min-height: 0; cursor: pointer; }
.mcc-dialog-chip:hover { background: #fee2e2; border-color: #fca5a5; }

/* Seit 2.52: 🚑 Sanitätsdienste */
.sd-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sd-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sd-zahl { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: .85em; }
.sd-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; text-align: left; background: #fff; color: inherit;
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; cursor: pointer; font-weight: normal; }
.sd-zeile:hover { border-color: #fca5a5; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .82em; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: #374151; }
.sd-chip.gut { background: #dcfce7; color: #166534; }
.sd-chip.warn { background: #fef3c7; color: #92400e; }
.sd-weg { background: none; border: 0; padding: 0 2px; min-height: 0; color: #6b7280; cursor: pointer; }
.sd-jahr > summary { cursor: pointer; }
.sd-termine { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.sd-termin { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #fff; color: inherit; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 8px 10px; cursor: pointer; font-weight: normal; }
.sd-termin:hover { border-color: #e30613; }
.sd-termin.angelegt { background: #f9fafb; }
.sd-check-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.sd-punkte { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.sd-punkt, .sd-klar label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.sd-klar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; }
.sd-mangel { width: 100%; box-sizing: border-box; font: inherit; }
.sd-vorkommnis { background: #fef3c7; border-radius: 8px; padding: 6px 10px; }
.sd-karten-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.sd-ausr-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f1f2f4; }
.sd-ausr-zeile.aus { opacity: .6; }
.sd-team-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-team-treffer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Seit 2.53: HvO, Statistik */
.sd-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px 18px; }
.sd-zeit { display: flex; align-items: center; gap: 6px; font-weight: normal; }
.sd-zeit span { flex: 0 0 7.2em; }
.sd-zeit input { flex: 1 1 auto; min-width: 0; }
.sd-hvo label { display: block; margin-top: 6px; }
.sd-hvo input:not([type=checkbox]):not([type=time]):not([type=number]) { width: 100%; box-sizing: border-box; }
.sd-hvo .sd-zeit, .sd-hvo .sd-klar label { display: flex; }
.sd-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sd-kachel { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.sd-kachel b { font-size: 1.6em; color: #e30613; }
.sd-kachel span { font-size: .85em; color: #6b7280; }
.sd-monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; }
.sd-monat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sd-balken { height: 90px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.sd-balken i { width: 40%; display: block; border-radius: 3px 3px 0 0; min-height: 1px; }
.sd-balken i.san { background: #e30613; } .sd-balken i.hvo { background: #f59e0b; }
.sd-monate + .hint, h3 .hint { font-weight: normal; }
.sd-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sd-tab { width: 100%; border-collapse: collapse; }
.sd-tab td { padding: 4px 6px; border-bottom: 1px solid #f1f2f4; }
.sd-tab td:last-child { text-align: right; font-weight: 600; }

/* Seit 2.54: Leitfarbe + Kleiderschrank-Kisten */
.ak-farbpunkt { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); flex: 0 0 auto; margin-right: 2px; }
.ak-listenfarbe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 10px; }
.ak-listenfarbe select { width: auto; min-width: 160px; }
.ak-artikel { max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #ddd); border-radius: 10px; padding: 4px 6px; margin: 4px 0; }
.ak-art-kat { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 8px 2px 2px; }
.ak-art { display: flex; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 6px; cursor: pointer; }
.ak-art.an { background: rgba(10, 92, 168, .08); }
.ak-art input { width: auto; margin: 0; }
.ak-art small { color: var(--muted); }
#ak-art-suche { margin-top: 2px; }
.ak-scan-artikel { padding: 8px 0; border-bottom: 1px solid var(--border, #eee); }
.ak-scan-groessen { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.ak-scan-gr { background: #eef4fb; border-radius: 8px; padding: 2px 8px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ak-scan-gr.leer { background: #fdecec; color: #a32020; }

/* Seit 2.54: HvO-Einsatz, an dem man nicht beteiligt ist */
.sd-zeile.sd-zeile-zu { opacity: .75; background: #f6f7f9; }

/* Seit 2.59: Patientenprotokoll nach MIND3/ABCDE, Übergabe RD, Divera-Archiv */
.sd-wahl { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.sd-wahl button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; }
#sd-ed { max-width: 820px; }
.sd-ed-leiste { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sd-ed-leiste-knoepfe { display: flex; gap: 6px; }
.sd-ed-abschnitt > summary { font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.sd-ed-nr { display: inline-flex; width: 1.6em; height: 1.6em; align-items: center; justify-content: center; border-radius: 50%; background: #e30613; color: #fff; font-size: .85em; margin-right: 4px; }
.sd-ed-feld { display: block; margin: 8px 0 0; font-weight: 400; }
.sd-ed-feld > span { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 3px; }
.sd-ed-feld input, .sd-ed-feld textarea, .sd-ed-feld select { width: 100%; box-sizing: border-box; font-size: 1rem; }
.sd-ed-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sd-ed-gruppe { border-top: 1px solid #eef0f3; padding-top: 6px; margin-top: 8px; }
.sd-ed-gruppe h4 { margin: 4px 0; }
.sd-tipp { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-tipp button { background: #fff; color: #111827; border: 1px solid #d1d5db; border-radius: 999px; padding: 7px 12px; font-size: .95rem; min-height: 40px; }
.sd-tipp button.an { background: #e30613; color: #fff; border-color: #e30613; }
.sd-helfer { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d1d5db; border-radius: 999px; padding: 6px 10px; font-weight: 400; }
.sd-messung { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; margin: 8px 0; }
.sd-messung-kopf { display: flex; align-items: center; gap: 8px; }
.sd-messung-kopf strong { flex: 1; }
.sd-messung-kopf input { width: auto; }
.sd-messung-werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 6px; }
.sd-messung-werte label { font-weight: 400; font-size: .8rem; color: var(--muted); }
.sd-messung-werte input { width: 100%; box-sizing: border-box; font-size: 1rem; }
.sd-mass-zeile { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px; margin-top: 6px; align-items: center; }
.sd-ueb { position: fixed; inset: 0; z-index: 3000; background: #fff; overflow-y: auto; padding: 0 14px 40px; font-size: 1.12rem; line-height: 1.45; }
.sd-ueb-kopf { position: sticky; top: 0; background: #e30613; color: #fff; margin: 0 -14px 8px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; }
.sd-ueb-kopf button { background: #fff; color: #e30613; }
.sd-ueb-abschnitt { border-bottom: 2px solid #f1f2f4; padding: 6px 0 10px; }
.sd-ueb-abschnitt h3 { margin: 6px 0; color: #e30613; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.sd-ueb-abschnitt dl { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 3px 12px; margin: 0; }
.sd-ueb-abschnitt dt { color: #6b7280; }
.sd-ueb-abschnitt dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sd-ueb-tab { overflow-x: auto; }
.sd-ueb-tab table { border-collapse: collapse; min-width: 100%; }
.sd-ueb-tab th, .sd-ueb-tab td { border: 1px solid #e5e7eb; padding: 4px 8px; text-align: left; white-space: nowrap; }
.sd-ueb-tab th { background: #fde8e8; font-size: .9rem; }
body.sd-ueb-offen { overflow: hidden; }
@media (max-width: 520px) { .sd-mass-zeile { grid-template-columns: 92px 1fr auto; } }
#sd-ed textarea, #sd-arch-text { font-family: inherit; }

/* Seit 2.60: abgeschlossene Dienste/Einsätze je Monat */
.sd-monat-gruppe { border-top: 1px solid #eef0f3; padding: 6px 0; }
.sd-monat-gruppe > summary { cursor: pointer; padding: 4px 2px; }
.sd-monat-gruppe[open] > summary { margin-bottom: 4px; }

/* Seit 2.62: Balken „HvO-Einsatz läuft“ */
.hvo-balken { position: sticky; top: 0; z-index: 900; margin: 0 0 8px; }
.hvo-balken-knopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; text-align: left; background: #b00010; color: #fff;
  border: 0; border-radius: 0 0 12px 12px; padding: 12px 16px; font-size: 1.05rem; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.hvo-balken-knopf:hover { background: #8f000d; }
.hvo-balken-los { margin-left: auto; background: #fff; color: #b00010; border-radius: 999px; padding: 4px 14px; font-weight: 700; }
.hvo-balken-blink { animation: hvo-blink 1.2s infinite; }
@keyframes hvo-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .hvo-balken-blink { animation: none; } }

/* Seit 2.63: Speicherstand im Patienten-Editor */
.sd-ed-stand { display: block; font-size: .8rem; color: #6b7280; margin-top: 2px; }
/* Seit 2.64: Stand-Text darf den „Fertig“-Knopf nie verschieben (sonst geht ein Tipp ins Leere) */
.sd-ed-leiste { flex-wrap: nowrap; }
.sd-ed-leiste > span:first-child { flex: 1 1 auto; min-width: 0; }
.sd-ed-leiste .sd-ed-stand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-ed-leiste-knoepfe { flex: 0 0 auto; }
.sd-ed-stand.offline { color: #92400e; }
.sd-ed-stand.gespeichert { color: #15803d; }
.sd-ed-stand.fehler { color: #b91c1c; font-weight: 600; }
#sd-ed textarea { font: inherit !important; font-size: 1rem !important; }

/* Seit 2.67: Kleiderkammer „Hat aktuell“ mit Preis, Wert und Summe */
.kk-tabelle .kk-zahl { text-align: right; white-space: nowrap; }
.kk-tabelle tfoot .kk-summe td { border-top: 2px solid #9ca3af; padding-top: 6px; }

/* Seit 2.68: Kleiderkammer „Preise nachtragen“ */
.kk-zaehler { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #e30613; color: #fff; font-size: .8em; text-align: center; }
.kk-pn-dialog { max-width: 760px; width: calc(100vw - 32px); }
.kk-pn-liste { max-height: 60vh; overflow-y: auto; margin-top: 6px; }
.kk-pn-stand { margin: 4px 0 8px; }
.kk-pn-kat { font-size: .8rem; text-transform: uppercase; color: #6b7280; margin: 10px 0 2px; }
.kk-pn-zeile { display: grid; grid-template-columns: 1fr 120px 120px 20px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #eee; }
.kk-pn-zeile.inaktiv .kk-pn-name { color: #6b7280; }
.kk-pn-zeile label { display: flex; flex-direction: column; font-size: .72rem; color: #6b7280; margin: 0; }
.kk-pn-zeile input { width: 100%; box-sizing: border-box; text-align: right; }
.kk-pn-zeile input.kk-pn-fehler { border-color: #b91c1c; background: #fef2f2; }
.kk-pn-ok { color: #15803d; font-weight: 700; }
@media (max-width: 560px) {
  .kk-pn-zeile { grid-template-columns: 1fr 1fr 20px; }
  .kk-pn-zeile .kk-pn-name { grid-column: 1 / -1; }
}

/* Seit 2.69: „Wer hat was“ je Person zugeklappt */
.kk-wer { border-bottom: 1px solid #eee; }
.kk-wer > summary { cursor: pointer; padding: 8px 4px; }
.kk-wer-inhalt { padding: 0 4px 10px 22px; line-height: 1.6; }
.kk-wer-stand { margin: 4px 0 6px; }

/* Seit 2.70: Lagerwert */
.kk-lagerwert { padding: 10px 14px; margin-bottom: 10px; }

/* Seit 2.71: „Hat aktuell“ zugeklappt */
.kk-hat { margin: 10px 0; }
.kk-hat > summary { cursor: pointer; padding: 6px 0; font-size: 1.05em; }

/* Seit 2.72: Kleiderordnung und „Meine Kleidung“ */
.kk-ko-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kk-ko > p { margin: 0 0 10px; }
.kk-ko-abschnitt { border-bottom: 1px solid #eee; }
.kk-ko-abschnitt > summary { cursor: pointer; padding: 9px 2px; font-weight: 600; color: #b30510; }
.kk-ko-inhalt { padding: 0 4px 10px 4px; }
.kk-ko-inhalt ul { margin: 0; padding-left: 20px; }
.kk-ko-inhalt li { margin: 3px 0; }
.kk-meine-pflege { margin: 8px 0; }

/* Seit 2.73: Lernbahn – Hinweis bei Versuchen mit inzwischen geänderten Fragen */
.lb-ant-alt { background: #fff7e6; border: 1px solid #f3c56b; border-radius: 8px; padding: 8px 10px; font-size: .92em; }

/* Seit 2.75: E-Mail-Fundstellen */
.pv-mail-liste { max-height: 55vh; overflow-y: auto; }
.pv-mail-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #eee; }
.pv-mail-zeile > span { flex: 1; }
.pv-mail-test { display: inline-block; font-size: .72em; background: #fff4d6; border: 1px solid #f3dd8a; border-radius: 6px; padding: 0 5px; }

/* Seit 2.80 (Torsten: „wenn ich hier mit der Maus drüber fahre sollte das ganze Feld hervorgehoben werden“):
   Artikelzeile beim Überfahren deutlich markieren – auf großen Bildschirmen sieht man sonst nicht, wo man ist. */
.kk-wahl-artikel { padding: 6px 8px; margin: 0 -8px; border-radius: 8px; border-left: 4px solid transparent; transition: background-color .12s, border-color .12s; }
@media (hover: hover) {
  .kk-wahl-artikel:hover { background: #fde2e2; border-left-color: #e30613; }
  .kk-wahl-artikel:hover .kk-wahl-name { font-weight: 700; }
  .kk-gr-knopf:not(.leer):hover { border-color: #e30613; box-shadow: 0 0 0 2px rgba(227, 6, 19, .25); }
}
.kk-wahl-artikel:focus-within { background: #fde2e2; border-left-color: #e30613; }

/* Seit 2.84: 🚦 Fristen-Ampel */
.atn-ampel-bereich > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.atn-ampel-zeile { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; border-left: 4px solid transparent; cursor: pointer; }
.atn-ampel-zeile:hover { background: #f3f4f6; }
.atn-ampel-zeile.atn-ampel-rot { border-left-color: #dc2626; }
.atn-ampel-zeile.atn-ampel-gelb { border-left-color: #f59e0b; }
.atn-ampel-zeile.atn-ampel-gruen { border-left-color: #16a34a; }
.atn-ampel-zeile.atn-ampel-fehlt { border-left-color: #9ca3af; }
.atn-ampel-licht { font-size: 1.2em; }
.atn-ampel-wer { display: flex; flex-direction: column; }
.atn-ampel-formular { margin-top: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.atn-ampel-formular label { display: block; margin: 6px 0; }
.atn-ampel-katalog { max-height: 360px; overflow: auto; border: 1px solid #eee; border-radius: 8px; padding: 6px 10px; }
.atn-ampel-haken { display: flex !important; gap: 6px; align-items: center; font-weight: normal; }
.atn-meine-ampel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.atn-ampel-chip { border-radius: 14px; padding: 3px 10px; background: #f3f4f6; }
.atn-ampel-chip small { color: #4b5563; }
.atn-ampel-chip.atn-ampel-gruen { background: #dcf3e4; }
.atn-ampel-chip.atn-ampel-gelb { background: #fef3c7; }
.atn-ampel-chip.atn-ampel-rot { background: #fde2e1; }

/* Seit 2.90: heutige Kurstage ganz oben in der Seminarliste – groß, auch fürs Handy */
.su-kurstag-heute { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.su-kurstag-knopf { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px;
  background: #e30613; color: #fff; border: none; font-size: 1.05em; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.su-kurstag-knopf:hover, .su-kurstag-knopf:focus-visible { background: #c10510; }
.su-kurstag-icon { font-size: 1.8em; line-height: 1; }
.su-kurstag-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.su-kurstag-text strong { font-size: 1.15em; }
.su-kurstag-oben { font-size: .85em; opacity: .95; }
.su-kurstag-ort { font-size: .85em; opacity: .9; }
.su-kurstag-pfeil { font-size: 1.8em; line-height: 1; }

/* Seit 2.90 (Torsten: „damit man nicht im TN verrutscht“): Kurstag-Liste abwechselnd hinterlegt, klare Trennlinien */
.kt-liste .kt-zeile:nth-child(even):not(.anwesend):not(.entschuldigt):not(.abwesend_manuell) { background: #f1f3f6; }
.kt-liste .kt-zeile + .kt-zeile { border-top: 1px solid #c9d0d8; }
.kt-liste { border: 1px solid #c9d0d8; border-radius: 10px; overflow: hidden; }
.kt-zeile.entschuldigt { background: #f2f7fd; }
.kt-zeile.abwesend_manuell { background: #fdf3f2; }

/* Seit 2.94: „Meine Kleidung“ nach Kategorien, zugeklappt */
.kk-meine-kat { border-bottom: 1px solid #eee; }
.kk-meine-kat > summary { cursor: pointer; padding: 10px 4px; }
.kk-meine-kat > summary:hover { background: #fef2f2; }
.kk-meine-kat > .kk-tabelle { margin: 0 0 10px; }
.kk-meine-summe { display: flex; justify-content: space-between; padding: 10px 4px; border-top: 2px solid #ddd; margin-top: 4px; }

/* Seit 2.97: Rettungsschwimmpass – Verlängerung eindrucken */
.pv-karte > summary { cursor: pointer; }
.pv-hinweis { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 10px 12px; }
.pv-schritt { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; }
.pv-nr { flex: 0 0 30px; height: 30px; border-radius: 50%; background: #e30613; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pv-felder { flex: 1; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; }
.pv-felder > label { display: flex; flex-direction: column; gap: 4px; min-width: 190px; flex: 1 1 190px; }
.pv-label { width: 100%; font-weight: 600; }
.pv-stufen { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-stufe { min-width: 120px; padding: 12px 16px; font-size: 1.05em; border: 2px solid #d1d5db; background: #fff; color: #1f2933; border-radius: 10px; }
.pv-stufe b { font-size: 1.2em; margin-right: 4px; }
.pv-stufe.pv-B.an { background: #b0703c; border-color: #b0703c; color: #fff; }
.pv-stufe.pv-S.an { background: #8a929b; border-color: #8a929b; color: #fff; }
.pv-stufe.pv-G.an { background: #c9a227; border-color: #c9a227; color: #fff; }
.pv-pass { flex: 1 1 100%; display: flex; gap: 6px; background: #f6b1a8; padding: 8px; border-radius: 8px; max-width: 560px; }
.pv-seite { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pv-seite-titel { font-size: 0.8em; color: #7a2a20; text-align: center; margin-bottom: 2px; }
.pv-zeile { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; background: #fbd3cd; border: 1px solid #c97a6f; border-radius: 4px; color: #7a2a20; text-align: left; font-weight: normal; }
.pv-zeile:hover { background: #fff; }
.pv-zeile.an { background: #fff; border: 2px solid #e30613; color: #1f2933; font-weight: 600; }
.pv-zeile b { font-size: 1.1em; }
.pv-druck { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border-top: 1px solid #eee; padding-top: 12px; }
.pv-druckknopf { font-size: 1.15em; padding: 12px 28px; }
.pv-druckknopf:disabled { opacity: 0.45; cursor: not-allowed; }
.pv-ok { color: #15803d; font-weight: 600; }
.pv-unten { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pv-verwaltung { margin-top: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa; }
.pv-verwaltung h4 { margin: 10px 0 6px; }
.pv-tab { border-collapse: collapse; width: 100%; max-width: 720px; }
.pv-tab td, .pv-tab th { padding: 3px 4px; text-align: left; }
.pv-tab input, .pv-tab select { width: 100%; }
.pv-tab .pv-anz { color: #6b7280; white-space: nowrap; font-size: 0.9em; }
.pv-versatz { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pv-versatz input { width: 80px; }
.pv-zeile span { white-space: nowrap; }
.pv-datum { display: flex; gap: 6px; align-items: stretch; }
.pv-datum .btn-mini { padding-top: 0; padding-bottom: 0; }
.pv-datum input { flex: 1; font-size: 1.05em; letter-spacing: 0.5px; }
.pv-datum input.pv-fehler { border-color: #e30613; background: #fff1f2; }
.pv-datum-hinweis { color: #6b7280; font-weight: normal; }

/* Seit 3.01 (Torsten: „die Urkunden-Verwaltung nimmt so viel zu viel Platz weg das muss einzeilig werden“) */
.urkv-tabelle td { padding-top: 4px; padding-bottom: 4px; vertical-align: middle; }
.urkv-tabelle .aktions-btn-gruppe { width: auto; flex-wrap: nowrap; gap: 3px; }
.urkv-tabelle .aktions-btn-gruppe .btn-mini { padding: 3px 6px; min-width: 0; margin: 0; }
.urkv-tabelle td a.btn-mini { white-space: nowrap; }

/* Seit 3.02: Sanitätsdienst – Fahrzeug / Rucksacksatz */
.sd-saetze { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.sd-satz { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; font-size: 1.05em; }
.sd-satz .hint { font-size: 0.8em; font-weight: normal; color: rgba(255,255,255,0.9); }
.sd-satz.secondary .hint { color: #6b7280; }
.sd-ausr-satz { margin: 10px 0 4px; font-weight: 700; color: #b30510; border-bottom: 1px solid #f1d0d0; padding-bottom: 2px; }

/* Seit 3.03: Ausrüstung zum Dienst ankreuzen (mehrere Fahrzeuge) */
.sd-wahl { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; max-height: 60vh; overflow: auto; }
.sd-wahl-gruppe { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; }
.sd-wahl-kopf { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #b30510; margin-bottom: 4px; }
.sd-wahl-teil { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 26px; font-weight: normal; }
.sd-wahl input[type=checkbox] { width: 20px; height: 20px; }

/* Seit 3.04: Lernbahn – Pflichtmodule */
.lb-pflicht-hinweis { border-left: 5px solid #e30613; background: #fff5f5; }
.lb-pflicht-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid #fde2e2; }
.lb-pflicht-zeile:first-of-type { border-top: 0; }
.lb-pflicht-zeile .hint { margin-left: 6px; }

/* Seit 3.05: Kisten-Wert */
.kk-kw-summe { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.kk-kw-summe > div { flex: 1 1 120px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; }
.kk-kw-summe strong { font-size: 1.4em; }
.kk-kw-warn { color: #b45309; }
.kk-kw-teil { border-top: 1px solid #eee; padding: 6px 0; }
.kk-kw-teil > summary { cursor: pointer; padding: 6px 0; }
.kk-kw-alle { margin: 6px 0 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kk-kw-preis.kk-kw-ok { border-color: #16a34a; background: #f0fdf4; }

/* Seit 3.07: E-Mail-Verlauf – erneut senden */
.smv-erneut-zeile { margin-top: 8px; }
.smv-erneut { font-size: 0.95em; }

/* Seit 3.11: Kisten-Scan in der Kleiderkammer */
.kk-scanziel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 4px; }
.kk-scanziel .kk-chip[disabled] { opacity: .45; cursor: not-allowed; }
.kk-kiste-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin: 6px 0 8px;
  border-left: 4px solid #005ea8; background: #eef5fb; border-radius: 6px; }
.kk-korb-kiste { color: #4b5563; margin-left: 4px; white-space: nowrap; }
tr.kk-gescannt td { background: #fff7d6; }
@media (prefers-color-scheme: dark) {
  .kk-kiste-leiste { background: #12324a; }
  .kk-korb-kiste { color: #cbd5e1; }
  tr.kk-gescannt td { background: #4a3f12; }
}

/* Seit 3.12: Kisten-Wert – Inventar-Kisten */
.kk-kw-liste { margin: 6px 0; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 8px; }
.kk-kw-liste > summary { cursor: pointer; padding: 4px 0; }
tr.kk-kw-vorschlag td { background: #f0f7ff; }

/* Seit 3.13: 🚦 Besetzung prüfen */
.wb-badge { margin-left: 4px; }
.wb-kopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 10px; }
.wb-kopf select { width: auto; }
.wb-melden { display: flex; gap: 6px; align-items: center; font-size: .92em; }
.wb-termin { border: 1px solid #e5e7eb; border-left: 5px solid #f59e0b; border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.wb-termin.rot { border-left-color: #e30613; }
.wb-termin > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.wb-datum { font-weight: 700; min-width: 4.6em; }
.wb-zahlen { margin-left: auto; display: inline-flex; gap: 4px; }
.wb-pill { border-radius: 999px; padding: 0 8px; font-size: .85em; font-weight: 700; }
.wb-pill.rot { background: #fde2e2; color: #a80410; }
.wb-pill.gelb { background: #fef3c7; color: #92400e; }
.wb-liste { margin: 6px 0 2px; padding-left: 4px; list-style: none; }
.wb-liste li { padding: 3px 0; }
.wb-liste li.rot { color: #a80410; }
.wb-liste li.gelb { color: #92400e; }
.wb-ok { padding: 10px 12px; background: #ecfdf5; border-radius: 8px; color: #065f46; }

/* Seit 3.14: Einsatzbereitschaft im Sanitätsdienst */
details.sd-bereit { border-left: 5px solid #e30613; }
details.sd-bereit > summary { cursor: pointer; }
.sd-bereit-zeile { border-top: 1px solid #e5e7eb; padding: 8px 0; }
.sd-bereit-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-bereit-liste { margin: 4px 0; white-space: pre-wrap; }

/* Seit 3.15: passende Termine in der eigenen Fristen-Ampel */
.atn-termine { margin: 8px 0 4px; padding: 8px 10px; background: #fff7d6; border-radius: 8px; }
.atn-termine-gruppe + .atn-termine-gruppe { margin-top: 6px; }
.atn-termin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 3px 0; }

/* Seit 3.16: Vereinsjahr in Zahlen */
.ea-vj { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.ea-vj-block h4 { margin: 0 0 4px; }
.ea-vj-block table { width: 100%; }
tr.ea-vj-unter td:first-child { padding-left: 18px; color: #555; }

/* Seit 3.17: Kleiderkammer – Austritt / Größe prüfen */
.kk-austritt-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; padding: 6px 0; border-top: 1px solid #f0e2b6; }
details.kk-hinweis > summary { cursor: pointer; }

/* Seit 3.29: Fahrgemeinschaften – Mitfahren anfragen/bestätigen (persönliche Seite) */
.fg-badge { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: #fff3cd; color: #7a5a00; margin-left: 4px; }
.fg-badge.ok { background: #e3f4e6; color: #1e6b2f; }
.fg-aktion { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.fg-aktion:empty { display: none; }
.fg-mitfahrt { border-radius: 10px; padding: 8px 10px; margin: 10px 0 4px; background: #fff8e1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fg-mitfahrt.bestaetigt { background: #e3f4e6; }
/* Seit 3.29: Kachel „Fahrgemeinschaften“ */
#view-fahrgemeinschaften { max-width: 900px; margin: 0 auto; }
.fgk-abschnitt { font-size: 1rem; margin: 18px 0 8px; }
.fgk-karte { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; color: inherit; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.fgk-karte:hover { border-color: var(--red, #e2001a); }
.fgk-icon { font-size: 1.5rem; }
.fgk-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fgk-text small { color: #5b6772; }
.fgk-text small.fgk-warn { color: #a04a00; font-weight: 600; }
.fgk-pfeil { font-size: 1.4rem; color: #9aa4ad; }
.fgk-termin { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; background: #fff; }
.fgk-termin > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.fgk-unter { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5b6772; margin: 12px 0 6px; }
.fgk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fgk-fahrer, .fgk-sucht { border: 1px solid var(--border); border-left: 4px solid #2e7dd7; border-radius: 8px; padding: 6px 10px; }
.fgk-sucht { border-left-color: #f0a500; }
.fgk-badge { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: #eef1f4; color: #39434c; }
.fgk-badge.frei { background: #e3f4e6; color: #1e6b2f; }
.fgk-badge.voll { background: #fde8e8; color: #9b1c1c; }
.fgk-mitfahrer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fgk-chip { display: inline-flex; align-items: center; gap: 4px; background: #f3f5f7; border-radius: 999px; padding: 2px 6px 2px 10px; font-size: .88rem; }
.fgk-chip.angefragt { background: #fff3cd; }
.fgk-x { background: none; border: none; color: #9b1c1c; padding: 0 4px; font-size: .9rem; cursor: pointer; }
.fgk-zuordnen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.fgk-zuordnen select { width: auto; max-width: 100%; }
.fgk-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.fgk-tabelle td { vertical-align: middle; }

/* Seit 3.32: Schwimmkurse › Administration – Anordnen-Knopf über den Kacheln */
.skv-kopf { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* Seit 3.34: Webmail – Postfach-Reiter mit Zahl ungelesener Mails */
.webmail-postfach-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.webmail-postfach-knopf { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--text, #222); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: .92rem; cursor: pointer; max-width: 100%; }
.webmail-postfach-knopf .wpk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webmail-postfach-knopf .wpk-zusatz { font-size: .75rem; color: #6b7480; }
.webmail-postfach-knopf.hat-neue { font-weight: 700; }
.webmail-postfach-knopf.aktiv { background: var(--red, #e2001a); border-color: var(--red, #e2001a); color: #fff; }
.webmail-postfach-knopf.aktiv .wpk-zusatz { color: #ffe1e4; }
.webmail-postfach-knopf .wpk-zahl { background: var(--red, #e2001a); color: #fff; border-radius: 10px; padding: 0 7px; font-size: .78rem; font-weight: 700; }
.webmail-postfach-knopf.aktiv .wpk-zahl { background: #fff; color: var(--red, #e2001a); }

/* Seit 3.41: Helfer-Hinweis auf der Fahrgemeinschafts-Seite */
.fg-helfer-info { background: #eef6ff; border-left: 4px solid #2e7dd7; }
p.fg-helfer-info { padding: 8px 10px; border-radius: 8px; }

/* Seit 3.46: Nutzungsübersicht je Kachel */
.nav-nutzung-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.nav-nutzung-tabelle th, .nav-nutzung-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.nav-nutzung-tabelle .hinweis { color: var(--muted); font-size: 0.8rem; }
.kompakt-kopf-knoepfe { display: inline-flex; gap: 6px; }

/* Seit 3.47: Fahrberechtigungen */
.fbr-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fbr-tabelle th.fbr-spalte { font-size: 0.8rem; text-align: center; min-width: 90px; }
.fbr-tabelle td.fbr-zelle { text-align: center; }
.fbr-tabelle .hinweis, .fbr-editor .hinweis, .fbr-darf .hinweis { color: var(--muted); font-size: 0.8rem; }
.fbr-mein { margin: 0 0 12px; padding: 10px 12px; }
.fbr-klickbar { cursor: pointer; }
.fbr-klickbar:hover { background: rgba(0,0,0,0.03); }
.fbr-kopf { margin: 0 0 10px; }
.fbr-kopf input[type="search"] { max-width: 420px; }
.fbr-editor { display: flex; flex-wrap: wrap; gap: 14px; }
.fbr-fotos { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.fbr-foto { margin: 0; }
.fbr-foto img { max-width: 100%; border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; }
.fbr-foto img.fbr-gross { position: fixed; inset: 10px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); margin: auto; z-index: 10000; background: #fff; cursor: zoom-out; object-fit: contain; }
.fbr-foto figcaption { font-size: 0.8rem; color: var(--muted); }
.fbr-form { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.fbr-klassen { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fbr-kontrolle { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fbr-kontrolle > div { flex-basis: 100%; }
.fbr-upload { cursor: pointer; display: inline-block; }
@media (max-width: 640px) { .fbr-foto img.fbr-gross { inset: 0; } }
.fbr-form .mcc-dialog-knoepfe button { white-space: nowrap; }
#fbr-gespann-fz, #fbr-gespann-anh { width: auto; max-width: 260px; display: inline-block; }
.fbr-form .mcc-dialog-knoepfe > span { display: inline-flex; gap: 8px; }

/* Seit 3.52: Visitenkarten */
.vka-kopf { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.vka-druck { margin-top: 16px; padding: 14px 16px; }
.vka-bogen { display: grid; grid-template-columns: repeat(2, 86px); gap: 3px; margin: 8px 0; padding: 8px; background: #eef1f4; border-radius: 6px; width: max-content; }
.vka-platz { width: 86px; height: 40px; border: 1px dashed #9aa6b2; background: #fff; border-radius: 3px; cursor: pointer; font-size: 15px; color: #6a7783; }
.vka-platz.voll { background: #fde3e4; border: 1px solid #e30613; color: #1d2630; }
.vka-platz.weg { background: #d5dbe0; color: #8a98a5; }
.vka-form { display: flex; flex-direction: column; gap: 8px; }
.vka-zwei { display: flex; gap: 10px; flex-wrap: wrap; }
.vka-zwei > label { flex: 1 1 160px; }
.vka-form textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--border, #d5dbe0); border-radius: 8px; }

/* Seit 3.53: erste Notiz-Zeile unter dem Namen in der Inventarliste */
.inv-notiz-zeile { font-size: 0.85rem; color: var(--text, inherit); opacity: 0.85; max-width: 32em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Seit 3.60: Kisten-Wert – Größe/Deckel/Preis bleiben im Dialog */
.mcc-dialog.kk-kw-dialog { width: min(680px, 100%); box-sizing: border-box; }
.kk-kw-tabelle { table-layout: fixed; }
.kk-kw-tabelle td { overflow-wrap: break-word; hyphens: auto; }
.kk-kw-tabelle select.kk-kw-groesse { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.kk-kw-tabelle input.kk-kw-preis { width: 4.6em; max-width: calc(100% - 1.2em); box-sizing: border-box; text-align: right; padding-left: 4px; padding-right: 4px; }
.kk-kw-alle select { max-width: 100%; }

/* Seit 3.62: Eintritt bei Diensten + Bademeister-Übersicht */
.de-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 10px; }
.de-zahlen > div { background: var(--card-alt, #f6f7f9); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; }
.de-zahlen strong { font-size: 1.4rem; }
.de-bademeister { border: 1px solid #d5dbe0; border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.de-text { white-space: pre-wrap; font-family: inherit; font-size: 0.9rem; margin: 6px 0; background: transparent; }
.de-gruppen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.de-frei td { color: #6b7280; }
.kt-bar { margin-left: 6px; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid #d97706; background: #fff7ed; color: #92400e; cursor: pointer; }
.kt-bar.an { border-color: #16a34a; background: #f0fdf4; color: #166534; }
.kt-bar:disabled { opacity: .6; cursor: default; }
/* seit 3.71: Mitfahrer durch die Verwaltung eintragen */
.fgk-eintragen { margin-top: 6px; }
.fgk-eintragen > summary { cursor: pointer; list-style: none; }
.fgk-muendlich { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; }
.fgk-muendlich[hidden] { display: none; }
.fgk-muendlich input { margin-top: 3px; flex: 0 0 auto; }
.kt-team:empty { display: none; }
/* seit 3.75: Guthaben im Kurstag */
.kt-gh { margin-left: 6px; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; white-space: nowrap; }
button.kt-gh { cursor: pointer; }
.kt-gh.warn { border-color: #d97706; background: #fff7ed; color: #92400e; }
.kt-gh.rot { border-color: #dc2626; background: #fef2f2; color: #b91c1c; font-weight: 600; }
.kt-gh-plus { opacity: .7; margin-left: 2px; }
/* seit 3.76: Kurstag offline */
.kt-offline { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #7c2d12; font-size: .9rem; }
.kt-offline[hidden] { display: none; }
/* seit 3.77: Abzeichen kassieren */
.abz-liste { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.abz-posten { display: flex; align-items: center; gap: 8px; font-weight: normal; padding: 6px 10px; border: 1px solid var(--border, #dde3ea); border-radius: 10px; }
.abz-posten span { flex: 1; }
.abz-summe { margin: 6px 0; font-size: 1.05rem; }
.abz-knoepfe { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.abz-preise select { width: 100%; max-width: 260px; }
.abz-extern label { display: block; margin: 6px 0; }
.abz-extern input[type="text"], .abz-extern input[type="date"], .abz-extern select { width: 100%; }
.abz-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .abz-zwei { grid-template-columns: 1fr; } }
.abz-extern .abz-haken { display: flex; gap: 8px; align-items: center; font-weight: normal; }
.abz-plz-ort { display: grid; grid-template-columns: 7em 1fr; gap: 10px; }

/* Seit 3.95: 📘 Dienstbuch (static/js/dienstbuch.js) – Tabellen wie im Heft */
.dbu-zeile { display:flex; gap:8px; align-items:baseline; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); padding:8px 4px; color:inherit; cursor:pointer; flex-wrap:wrap; }
.dbu-zeile:hover { background: var(--bg); }
.dbu-chip { display:inline-block; margin-top:4px; padding:2px 10px; border-radius:999px; background:var(--bg); font-size:.9em; }
.dbu-chip.gruen { background:#e6f6ea; color:#14632b; }
.dbu-chip.rot { background:#fde8e8; color:#9b1c1c; }
.dbu-tab { width:100%; border-collapse:collapse; margin:6px 0 12px; font-size:.95em; }
.dbu-tab th { text-align:left; font-weight:600; padding:4px 6px; white-space:nowrap; }
.dbu-tab td { padding:3px 6px; vertical-align:top; }
.dbu-raster th, .dbu-raster td { border:1px solid #333; }
.dbu-raster th { background:#d9d9d9; text-align:center; font-size:.85em; }
.dbu-tab input { width:100%; box-sizing:border-box; padding:4px 6px; }
.dbu-auto { color:#6b7280; font-style:italic; }
.dbu-auto.klein { font-size:.8em; }
.dbu-balken { margin:14px 0 0; padding:6px; text-align:center; border:1px solid #333; border-bottom:0; }
.dbu-balken.blau { background:#20b2e8; }
.dbu-balken.gruen { background:#92d050; }
.dbu-balken.rot { background:#e30613; color:#ffed00; }
.dbu-balken.gelb { background:#ffff00; }
.dbu-arten { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:6px 24px; margin:6px 0 12px; }
.dbu-art { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #333; padding:2px 0; }
.dbu-art input { width:auto; transform:scale(1.2); }
.dbu-rahmen { border:1px solid #333; padding:8px; margin-bottom:10px; }
.dbu-unterschrift { border-top:1px solid #333; padding-top:6px; margin-bottom:10px; }
.dbu-text { white-space:normal; font-size:.95em; line-height:1.45; }
.dbu-fortb td { font-size:.92em; }
@media (max-width: 640px) { .dbu-raster { font-size:.82em; } .dbu-raster th, .dbu-raster td { padding:2px 3px; } }

/* Seit 3.97: Ausbildungsnachweise – Eingabe wie im ISC (atn-urkunden.js) */
.atnu-form { display:flex; flex-direction:column; gap:8px; max-height:65vh; overflow:auto; padding-right:4px; }
.atnu-zeile { display:grid; grid-template-columns: 11em 1fr; gap:8px; align-items:start; }
.atnu-zeile > label { font-weight:600; padding-top:6px; }
.atnu-zwei { display:flex; gap:6px; }
.atnu-zwei > input { flex:1 1 0; min-width:0; }
.atnu-geschlecht { display:flex; gap:12px; flex-wrap:wrap; padding-top:6px; }
.atnu-geschlecht input, .atnv-wahl input { width:auto; }
.atnv-wahl { display:block; padding:3px 0; }
.atn-urkunden td, .atn-urkunden th { font-size:.9em; }
.atn-nowrap { white-space:nowrap; }
@media (max-width: 640px) { .atnu-zeile { grid-template-columns: 1fr; } .atnu-zeile > label { padding-top:0; } }
.mcc-dialog:has(.atnu-form) { max-width: 780px; width: 96vw; }
.atn-urkunden { min-width: 980px; }

/* Seit 3.98: Ordner einlesen – breiter, Ergebnisliste scrollt */
.mcc-dialog:has(.atns-ergebnis) { width: min(900px, calc(100vw - 32px)); max-width: none; }
.atns-ergebnis { max-height: 55vh; overflow: auto; }
.atns-ergebnis td { vertical-align: top; }

/* Seit 3.99: JET-Ausbildungsbuch */
.jet-fortschritt { display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--bg); border:1px solid var(--border); overflow:hidden; vertical-align:middle; }
.jet-fortschritt > span { display:block; height:100%; background:#2e9e4f; }
.jet-tab td:nth-child(1) { white-space:nowrap; width:5em; }
.jet-tab td:nth-child(3) { text-align:center; width:4.5em; }
.jet-tab td:nth-child(4) { width:10.5em; }
.jet-tab tr.jet-fett td { font-weight:600; }
.jet-tab tr.jet-erledigt td { background:#f0faf2; }
.jet-tab tr.jet-abschnitt td { background:#92d050; }
.jet-tab tr.jet-abschnitt.rot td { background:#e30613; color:#ffed00; }
.jet-tab tr.jet-info td { background:#f2f2f2; }
.jet-haken { display:flex; gap:6px; align-items:center; }
.jet-haken input[type=checkbox] { width:auto; }
.jet-haken input[type=date] { min-width:0; }
.jet-abend { display:flex; flex-direction:column; gap:8px; max-height:65vh; overflow:auto; }
.jet-abend-liste { display:flex; flex-direction:column; gap:2px; max-height:26vh; overflow:auto; border:1px solid var(--border); border-radius:6px; padding:6px; margin-top:4px; }
.mcc-dialog:has(.jet-abend) { width:min(720px, calc(100vw - 32px)); max-width:none; }

/* Seit 4.00: Urkunde zum Abgleich neben der Eingabemaske */
.mcc-dialog:has(.atnu-vergleich) { width:min(1400px, calc(100vw - 24px)); max-width:none; }
.atnu-vergleich { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; }
.atnu-vergleich .atnu-form { max-height:72vh; }
.atnu-dokument { display:flex; flex-direction:column; gap:4px; }
.atnu-dokument iframe { width:100%; height:68vh; border:1px solid var(--border); border-radius:6px; background:#fff; }
.atnu-dokument img { width:100%; max-height:68vh; object-fit:contain; border:1px solid var(--border); border-radius:6px; }
@media (max-width: 900px) { .atnu-vergleich { grid-template-columns:1fr; } .atnu-dokument iframe { height:50vh; } }
.atnu-form textarea { width:100%; box-sizing:border-box; }
.jet-zeile { display:flex; align-items:center; gap:6px; }
.jet-zeile .dbu-zeile { flex:1 1 auto; }
.jet-zeile.jet-aus { opacity:.55; }
#pm-inhalt > section.pm-nutzung > h2:first-child { display:none; }

/* Seit 4.06: Nachweise zugeklappt – eine Zeile je Nachweis */
details.atn-klapp > summary { cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
details.atn-klapp > summary::-webkit-details-marker { display:none; }
details.atn-klapp > summary::before { content:"▸"; color:var(--muted); width:1em; }
details.atn-klapp[open] > summary::before { content:"▾"; }
details.atn-klapp > summary .atn-chips { margin-left:auto; }
details.atn-klapp > .hint, details.atn-klapp > .atn-knoepfe { margin-left:1.4em; }
details.atn-klapp:not([open]) { padding-top:8px; padding-bottom:8px; }

/* Seit 4.08: eine Zeile, etwas kleiner – auch lange Namen passen */
details.atn-klapp > summary { display:grid; grid-template-columns:1em minmax(0, 1fr) auto auto; column-gap:8px; align-items:baseline; font-size:.92em; }
details.atn-klapp > summary strong { font-weight:600; overflow-wrap:anywhere; }
details.atn-klapp > summary .hint { white-space:nowrap; font-size:.95em; }
details.atn-klapp > summary .atn-chips { margin-left:0; white-space:nowrap; }
details.atn-klapp > .hint { font-size:.88em; }

/* Seit 4.20: kompakte Gruppen-Karten im Reiter „Rechte“ */
.pm-qkarten.klein { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pm-qkarte.klein { padding: 8px 10px; gap: 4px; font-size: 0.9rem; }
.pm-qkarte.klein strong { font-size: 0.92rem; line-height: 1.25; overflow-wrap: anywhere; }
.pm-qkarte-unten { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.pm-qkarte.klein .pm-qkarte-zahl { font-size: 0.74rem; padding: 1px 8px; }
.pm-qkarte.klein small { font-size: 0.76rem; }

/* Seit 4.22: Umstellung auf Gruppen */
.pm-umstellung { background: #fff; border: 1px solid var(--pm-linie, #dfe4e8); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.pm-umstellung > summary { cursor: pointer; }
.pm-umst-eintrag { border-top: 1px solid #eef1f4; padding: 10px 0; }
.pm-umst-aktion { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pm-umst-aktion select { width: auto; max-width: 100%; }
.pm-warn { color: #8a5a00; }

/* Seit 4.23: kompaktere Gruppen-Karten im Reiter „Gruppen“ */
.pm-gkarten.klein { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pm-gkarten.klein .pm-gkarte { padding: 10px 12px; gap: 6px; min-height: 0; border-radius: 12px; }
.pm-gkarten.klein .pm-gkarte-kopf strong { font-size: 0.95rem; }
.pm-gkarten.klein .pm-gkarte-zahl { font-size: 0.78rem; padding: 1px 8px; }
.pm-gkarten.klein .pm-gkarte-frei { font-size: 0.78rem; }
.pm-gkarten.klein .pm-marke.auto { display: none; }
.pm-gkarten.klein .pm-stapel { min-height: 24px; padding-left: 6px; }
.pm-gkarten.klein .pm-avatar.mini .chat-avatar { width: 24px; height: 24px; font-size: 0.62rem; }
.pm-gkarten.klein .pm-stapel .pm-avatar.mini { margin-left: -6px; }
.pm-gkarten.klein .pm-stapel-mehr { font-size: 0.76rem; }

/* Seit 4.25: Ausnahmen anklickbar */
button.pm-rechte-ausnahme { border: none; cursor: pointer; }
button.pm-rechte-ausnahme:hover { background: #f8e7b3; }
.pm-ausnahmen-kopf { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fdf8e9; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }

/* Seit 4.30: Stufe ansehen/bearbeiten je Gruppe */
.pm-bz-stufe { width: auto; margin-left: auto; padding: 3px 6px; font-size: 0.84rem; border-radius: 8px; flex: 0 0 auto; }

/* Seit 4.35: Scan-Protokoll */
.scan-protokoll-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.scan-protokoll-tabelle td { padding: 4px 6px; border-bottom: 1px solid var(--border, #ddd); vertical-align: top; }
.scan-protokoll-tabelle td:first-child { white-space: nowrap; color: var(--muted); }
.scan-protokoll-fehler td:nth-child(2) { color: #c0392b; font-weight: 600; }

/* Seit 4.36: Abzeichen-Wand (Meine Familie) */
.abz-ziel { border: 2px solid var(--abz, #e2001a); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; background: color-mix(in srgb, var(--abz, #e2001a) 8%, transparent); }
.abz-ziel-kopf { font-size: 1.05rem; }
.abz-balken { height: 10px; border-radius: 6px; background: rgba(0,0,0,.08); margin: 10px 0 8px; overflow: hidden; }
.abz-balken span { display: block; height: 100%; background: var(--abz, #e2001a); border-radius: 6px; }
.abz-teile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.abz-teil { font-size: .82rem; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.06); color: var(--muted, #666); }
.abz-teil.ok { background: #e3f4e8; color: #1e7a3c; font-weight: 600; }
.abz-reihe-titel { margin: 18px 0 8px; font-size: 1rem; }
.abz-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.abz-kachel { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.abz-kachel:hover, .abz-kachel.abz-aktiv { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.03); }
.abz-klein { cursor: default; }
.abz-medaille { position: relative; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff8 0, transparent 45%), var(--abz, #e2001a); box-shadow: 0 3px 8px rgba(0,0,0,.18), inset 0 0 0 4px #ffffff55; }
.abz-symbol { font-size: 1.7rem; position: relative; z-index: 1; }
.abz-zahl { font-size: 1.15rem; font-weight: 800; color: #fff; }
.abz-offen .abz-medaille { background: #d9dde2; box-shadow: inset 0 0 0 4px #ffffff88; }
.abz-offen .abz-symbol { filter: grayscale(1); opacity: .45; }
.abz-offen .abz-zahl { color: #8a929b; filter: none; opacity: 1; }
.abz-ring { position: absolute; inset: -4px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 31px, #000 32px); mask: radial-gradient(circle, transparent 31px, #000 32px); }
.abz-geschafft .abz-medaille { animation: abz-glanz .6s ease-out; }
@keyframes abz-glanz { from { transform: scale(.85); } to { transform: scale(1); } }
.abz-name { font-weight: 600; font-size: .8rem; text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.abz-unter { font-size: .75rem; color: var(--muted, #666); }
.abz-detail { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.04); }
.abz-anwesend { font-size: 1rem; margin-bottom: 6px; }

/* Seit 4.38: Abstimmung in Mitteilungen */
.mitteilung-abstimmung { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.mitteilung-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border, #ddd); border-radius: 12px; background: #fff; font: inherit; font-size: 1.05rem; text-align: left; cursor: pointer; color: inherit; }
.mitteilung-option-knopf:hover { border-color: var(--red, #e2001a); background: #fff5f5; }
.mitteilung-frei { padding: 10px 12px; border-radius: 12px; }
.mt-erg { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.04); font-size: .9rem; }
.mt-erg-zeile { margin-top: 4px; }
.mt-erg-balken { height: 6px; border-radius: 4px; background: rgba(0,0,0,.08); overflow: hidden; }
.mt-erg-balken span { display: block; height: 100%; background: var(--red, #e2001a); }

/* Seit 4.39: Förder-Blick */
.bq-fuer-dich .bq-fd-foerder { background: #eef7ee; border-color: #6fbf73; }
.mcc-dialog.fb-dialog { max-width: 760px; width: min(760px, 96vw); }
.fb-liste { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.fb-person { border: 1px solid var(--border, #ddd); border-radius: 12px; padding: 10px 12px; }
.fb-person.fb-ansprache { border-color: #e2001a55; background: #fff7f7; }
.fb-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-tipp { margin-left: auto; font-weight: 600; color: #c0392b; }
.fb-zahlen { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; color: var(--muted, #666); margin: 6px 0; }
.fb-felder label { display: block; font-size: .85rem; margin-top: 4px; }
.fb-felder input { width: 100%; box-sizing: border-box; }
.fb-kontakt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; margin-top: 6px; }

/* Seit 4.40: Pflicht-Dialog ohne Abbrechen (leerer Text) */
.mcc-dialog-abbrechen:empty { display: none; }

/* Seit 4.44: Seminar-Termine in der Elternansicht wie im Dienstplan */
.el-termin { border: 1px solid var(--border, #ddd); border-left: 5px solid #cfd4da; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.el-termin.el-dabei { border-left-color: var(--green, #2e9e4f); background: #f3faf5; }
.el-termin.el-abgesagt { border-left-color: #9aa4ad; background: #f6f7f8; }
.el-termin.el-offen { border-left-color: #e6b54a; background: #fffaf0; }
.el-termin-kopf { font-size: 1.02rem; }
.el-info { margin-top: 4px; }
.el-termin-fuss { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 8px; }
.el-zaehler { text-align: center; font-size: .82rem; }
.el-gruen { background: var(--green, #2e9e4f) !important; color: #fff !important; border-color: var(--green, #2e9e4f) !important; }
.el-rot { background: var(--red, #e30613) !important; color: #fff !important; border-color: var(--red, #e30613) !important; }

/* Seit 4.45: Anmeldeweg im Personen-Seitenfenster */
.pm-anmeldeweg { margin: 8px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.04); font-size: .88rem; line-height: 1.4; }
.pm-anmeldeweg-kopf { font-weight: 600; margin-bottom: 2px; }

/* Seit 4.52: Prüfungsweg an der Ausbildung */
.atn-pw-an { background: #fff3cd !important; border-color: #e6b54a !important; }
.atn-pw-zeile td { background: #fffdf5; }
.atn-pw { padding: 8px 10px; }
.atn-pw-felder { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.atn-pw-felder label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; }
.atn-pw-felder input, .atn-pw-felder select { width: auto; min-width: 9ch; }
.atn-pw-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

/* Seit 4.57: Schwimmcamp als Seminar (seminar-camp.js) */
.sc-start { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.sc-stufen { display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.sc-stufe { padding:8px 10px; background:var(--card-bg, #fff); border:1px solid var(--border, #e3e3e3); border-radius:8px; display:flex; flex-direction:column; gap:6px; }
.sc-zeile { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sc-zeile input[type=color] { width:36px; height:30px; padding:0; border:none; background:none; }
.sc-raster-wrap { overflow-x:auto; }
.sc-raster { border-collapse:collapse; font-size:.9em; }
.sc-raster th, .sc-raster td { border:1px solid var(--border, #e3e3e3); padding:4px 6px; text-align:center; white-space:nowrap; }
.sc-raster th { font-weight:600; }
.sc-raster .sc-zeit { font-variant-numeric:tabular-nums; font-weight:600; }
.sc-zelle input[type=number] { width:5ch; padding:2px; }
.sc-zelle.aus { opacity:.45; background:repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 8px); }
.sc-zelle.voll .sc-belegt { color:var(--red, #c00); font-weight:700; }
.sc-belegt { font-size:.85em; margin-left:4px; font-variant-numeric:tabular-nums; }
.sc-leer { color:#bbb; }
.sc-ohne, .sc-bel-stufe { padding:8px 10px; margin-bottom:10px; border:1px solid var(--border, #e3e3e3); border-radius:8px; }
.sc-ohne { border-color:#f0b400; background:#fff9e6; }
.sc-bel-slot { margin:6px 0 0 4px; padding-top:6px; border-top:1px dashed var(--border, #e3e3e3); }
.sc-bel-kopf { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sc-kind { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:4px 0 0 12px; }
.sc-kind > span { flex:1 1 16ch; }
.sc-kind select, .sc-bel-kopf select { max-width:24ch; }
.sc-kurs { display:flex; gap:6px; align-items:center; }
.kt-camp { padding:1px 6px; border-radius:6px; font-weight:600; }
.sc-zeile select, .sc-zeile input[type=text], .sc-zeile input[type=number] { width:auto; min-width:0; }
.sc-zeile input[type=text] { flex:1 1 20ch; }
.ct-raster td.ct-zelle { text-align:left; vertical-align:top; min-width:16ch; white-space:normal; }
.ct-kind { padding:2px 0; }
.ct-kind.meins { font-weight:700; background:#fff3c4; border-radius:4px; padding:2px 4px; }
.ct-sel { max-width:20ch; font-size:.85em; padding:2px; margin:2px 0; }
.ct-trainer { font-size:.85em; color:var(--muted, #555); }

/* Seit 4.60: Grundausstattung (kleiderkammer.js) */
.kk-ga { margin:10px 0; border:1px solid var(--border, #e3e3e3); border-radius:8px; padding:6px 10px; }
.kk-ga summary { cursor:pointer; }
.kk-ga-liste { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.kk-ga-zeile { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:4px 6px; border-radius:6px; }
.kk-ga-zeile.fehlt { background:#fff4e5; }
.kk-ga-zeile.hand { background:#f4f5f7; }
.kk-ga-name { flex:1 1 22ch; }
.kk-ga-zahl { font-variant-numeric:tabular-nums; font-weight:600; min-width:7ch; text-align:right; }
.kk-ga-kopf { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.kk-ga-kopf select { width:auto; }
.kk-ga-pos { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:4px 0; border-bottom:1px dashed var(--border, #e3e3e3); }
.kk-ga-pos input[type=text], .kk-ga-pos input[type=number] { width:auto; min-width:0; }
.kk-ga-art { flex:1 1 100%; font-size:.85em; }
.kk-ga-wahl { display:flex; gap:6px; align-items:center; margin-left:8px; }
.kk-ga-kat { margin-bottom:4px; }

/* Seit 4.61: Erklärung-Formular komplett (mcc.js) */
.erkl-kern td { vertical-align:middle; }
.erkl-kern tr.erkl-aus td { opacity:.55; }
.erkl-vorschau-box { margin-top:16px; border:1px solid var(--border, #e3e3e3); border-radius:8px; padding:8px 12px; }
.erkl-vorschau { max-width:560px; margin-top:8px; padding:12px; background:var(--card-bg, #fff); border:1px dashed var(--border, #ccc); border-radius:8px; }
.erkl-vorschau label { display:block; margin-top:8px; font-weight:600; }
.erkl-vorschau input, .erkl-vorschau textarea { width:100%; box-sizing:border-box; }
.erkl-vorschau .erkl-vorschau-haken { display:flex; gap:6px; align-items:center; font-weight:normal; }
.erkl-vorschau .erkl-vorschau-haken input { width:auto; }

/* Seit 4.66: 📅 Tagesansicht der Seminar-App (static/js/seminar-tag.js) */
.stag-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.stag-seminar { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.stag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.stag-kopf::-webkit-details-marker { display: none; }
.stag-zeit { font-weight: 700; min-width: 7.5em; color: var(--red, #e30613); }
.stag-titel { flex: 1 1 220px; display: flex; flex-direction: column; }
.stag-zahlen { display: flex; flex-wrap: wrap; gap: 6px; }
.stag-kz { font-size: 0.85em; padding: 2px 8px; border-radius: 999px; background: #f1f3f5; white-space: nowrap; }
.stag-kz.gut { background: #e6f4ea; color: #1e7b34; }
.stag-kz.warn { background: #fdecea; color: #b42318; }
.stag-inhalt { padding: 0 12px 12px; }

/* Seit 4.75: Uptime Kuma (static/js/uptime.js) */
.uk-gruppen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.uk-gruppe { display: flex; align-items: center; gap: 4px; font-weight: normal; margin: 0; }
.uk-gruppe input { width: auto; margin: 0; }
/* Seit 4.76: 🚦 Systemüberwachung (static/js/uptime.js) */
.uk-schalter { border-left: 6px solid #9e9e9e; }
.uk-schalter.uk-an { border-left-color: #2e7d32; }
.uk-gross { display: flex; align-items: center; gap: 10px; font-size: 1.15em; margin: 0 0 6px; cursor: pointer; }
.uk-gross input { width: 22px; height: 22px; margin: 0; }
.uk-karte { padding: 0; }
.uk-tabelle { width: 100%; border-collapse: collapse; }
.uk-tabelle th, .uk-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.uk-tabelle td:first-child { width: 1.6em; }
.uk-zeile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.uk-wenn { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.uk-wenn input { width: 160px; margin: 0; }
.uk-dann { margin-top: 6px; }
.uk-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uk-chip { display: inline-flex; align-items: center; gap: 6px; background: #e3f2fd; color: #0d47a1; border-radius: 14px; padding: 3px 4px 3px 10px; }
.uk-chip small { opacity: .75; }
.uk-chip button { background: none; border: none; color: inherit; padding: 0 6px; cursor: pointer; min-height: 0; }
.uk-plus { width: auto; min-width: 150px; margin: 0; }
.uk-verlauf { list-style: none; padding: 0; margin: 0; }
.uk-verlauf li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.uk-adresse { word-break: break-all; }
@media (max-width: 600px) { .uk-tabelle th:nth-child(3), .uk-tabelle td:nth-child(3) { display: none; } }

/* Seit 4.77: Übersicht wie in Uptime Kuma */
.uk-ue-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.uk-ue-zeile { display: grid; grid-template-columns: 84px minmax(140px, 1fr) minmax(0, 2fr); align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.uk-ue-kopfzeile { grid-template-columns: 84px 1fr; }
.uk-ue-kind { padding-left: 18px; }
.uk-ue-name { display: flex; flex-direction: column; min-width: 0; }
.uk-ue-name small { font-size: .82em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-pill { display: inline-block; text-align: center; border-radius: 12px; padding: 2px 8px; font-size: .82em; font-weight: 600; color: #fff; white-space: nowrap; }
.uk-p-gruen { background: #5cdd8b; } .uk-p-rot { background: #dc3545; } .uk-p-gelb { background: #f8a306; } .uk-p-blau { background: #1747f5; } .uk-p-grau { background: #9e9e9e; }
.uk-balken { display: flex; justify-content: flex-end; gap: 3px; overflow: hidden; height: 22px; }
.uk-balken i { flex: 0 0 6px; height: 100%; border-radius: 4px; background: #e9ecef; }
.uk-balken i:hover { opacity: .7; }
.uk-b-gruen { background: #5cdd8b !important; } .uk-b-rot { background: #dc3545 !important; } .uk-b-gelb { background: #f8a306 !important; } .uk-b-blau { background: #1747f5 !important; }
.uk-warnung { background: #fff3cd; color: #664d03; border-radius: 8px; padding: 8px 10px; }
.uk-skript { white-space: pre-wrap; word-break: break-all; font-size: .8em; background: var(--bg, #f6f6f6); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
@media (max-width: 700px) { .uk-ue-zeile { grid-template-columns: 74px 1fr; } .uk-balken { grid-column: 1 / -1; } .uk-ue-kind { padding-left: 8px; } }

/* Seit 4.89: Beschreibung/Schlagwörter aus Uptime Kuma */
.uk-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.uk-tag { display: inline-block; max-width: 100%; border-radius: 10px; padding: 1px 8px; font-size: .78em; color: #fff; white-space: normal; line-height: 1.35; }
.uk-tag-text { background: #6b7280; }
.uk-b-np { background: #8e9bd6 !important; }   /* seit 4.90: Nachtpause */

/* Seit 4.84: Personen-Chip in der Systemüberwachung */
.uk-chip-person { background: #f3e5f5; color: #4a148c; }
/* Seit 4.85: Dienste bestätigen (static/js/dienst-bestaetigung.js) */
.db-tabelle { width: 100%; border-collapse: collapse; }
.db-tabelle th, .db-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.db-knoepfe { white-space: nowrap; text-align: right; }
.db-knoepfe button { margin-left: 4px; }
@media (max-width: 700px) { .db-tabelle td { display: block; border: none; padding: 2px 4px; } .db-tabelle tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; } .db-knoepfe { text-align: left; } }

/* 4.88: Geleistete Stunden je Jahr zugeklappt */
.dp-stunden-jahr { border-bottom: 1px solid var(--border); }
.dp-stunden-jahr > summary { cursor: pointer; padding: 8px 6px; display: flex; align-items: baseline; gap: 6px; list-style: none; }
.dp-stunden-jahr > summary::-webkit-details-marker { display: none; }
.dp-stunden-jahr > summary::before { content: "▸"; display: inline-block; width: 1em; }
.dp-stunden-jahr[open] > summary::before { content: "▾"; }
.dp-stunden-jahr-summe { margin-left: auto; font-weight: 600; }
.dp-stunden-gesamt { display: flex; justify-content: space-between; padding: 8px 6px; font-weight: bold; border-top: 2px solid var(--border); }

/* Seit 4.91: Dienstorganisation › Termine nach Jahr und Monat */
.wp-jahr { margin: 0 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); }
.wp-jahr > summary { cursor: pointer; padding: 10px 14px; font-size: 1.1em; list-style-position: inside; }
.wp-monat { margin: 0 10px 8px; border-top: 1px solid var(--border); }
.wp-monat > summary { cursor: pointer; padding: 8px 4px; list-style-position: inside; }
.wp-monat[open] { padding-bottom: 6px; }

/* Seit 4.92: Statistischer Jahresbericht (ISC) */
.isj-kopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.isj-kopf select { width: auto; }
.isj-abschnitt { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; padding: 0 10px; }
.isj-abschnitt > summary { cursor: pointer; padding: 9px 2px; }
.isj-tabelle { width: 100%; }
.isj-tabelle td, .isj-tabelle th { vertical-align: middle; }
.isj-tabelle input[type=number], .isj-tabelle select { width: 96px; margin: 0; padding: 4px 6px; text-align: right; }
.isj-c { text-align: right; white-space: nowrap; }
.isj-gruppe td { background: var(--bg, #f4f4f4); font-weight: 600; }
.isj-auto { color: #6b7280; cursor: help; }
.isj-auto.isj-aktiv { color: inherit; font-weight: 600; }
.isj-eintragen h4 { background: #E30613; color: #fff; padding: 6px 10px; border-radius: 6px; margin: 14px 0 4px; }
.isj-e-gruppe { font-weight: 600; margin: 8px 0 2px; }
.isj-e-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0 3px 12px; border-bottom: 1px solid var(--border); }
.isj-e-zeile.isj-leer { opacity: .55; }
.isj-kopier { min-width: 72px; padding: 2px 10px; text-align: right; font-weight: 700; background: #fff; color: #111; border: 1px solid var(--border); }

/* Seit 4.94: Grundriss in der Kachel Vereinsheim */
.vh-ansicht { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 0 0 10px; }
.vh-ansicht button { border: 0; border-radius: 0; background: transparent; color: inherit; padding: 6px 14px; margin: 0; font-weight: 600; }
.vh-ansicht button.aktiv { background: #E30613; color: #fff; }
.vh-plan-leiste { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-bottom: 6px; }
.vh-plan-leiste .sgd-haken { margin: 0; }
.vh-plan-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.vh-pl-m { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-left: 6px; }
.vh-pl-offen { background: rgba(220,53,69,.45); } .vh-pl-licht { background: rgba(255,193,7,.55); } .vh-pl-heiz { background: rgba(253,126,20,.35); }
.vh-plan-weitere { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vh-plan-weitere .aktiv { outline: 2px solid #E30613; }
.vh-plan-pflege { margin-top: 14px; }
.vh-plan-pflege summary { cursor: pointer; }

/* Seit 4.95: Wo ist was? */
.vh-ort-suche { margin: 0 0 10px; }
.vh-ort-zeile { display: flex; gap: 6px; }
.vh-ort-zeile input { flex: 1; margin: 0; font-size: 1.05em; }
.vh-mikro { margin: 0; font-size: 1.2em; padding: 4px 12px; }
.vh-mikro.vh-hoert { background: #E30613; color: #fff; animation: vh-puls 1s infinite; }
@keyframes vh-puls { 50% { opacity: .55; } }
.vh-ort-treffer { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.vh-ort-treffer li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.vh-ort-treffer li.aktiv { border-color: #E30613; box-shadow: 0 0 0 2px rgba(227,6,19,.15); }
.vh-ort-knopf { flex: 1; display: flex; gap: 10px; align-items: center; text-align: left; background: none; border: 0; color: inherit; padding: 2px 0; margin: 0; font-weight: normal; }
.vh-ort-sym { font-size: 1.3em; width: 1.6em; text-align: center; }
.vh-ort-raum { color: #0b6e8a; font-weight: 600; }

/* Seit 4.97: Abschluss-Check */
.vh-ab { border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; }
.vh-ab-ok { background: #e7f6ec; color: #14532d; }
.vh-ab-warn { background: #fff4e0; color: #5c3b00; border: 1px solid #f0a63a; }
.vh-ab summary { cursor: pointer; }
.vh-ab-gruppe { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 0; border-top: 1px dashed rgba(0,0,0,.12); }
.vh-ab-gruppe .btn-mini { margin: 0 0 0 auto; }
.vh-ab-raum { opacity: .75; }
.vh-ab-hinweis { margin: 6px 0 0; font-size: .9em; }
.vh-ab-kiosk { font-size: 1.35rem; padding: 16px 20px; margin: 10px 0 16px; }
.vh-ab-kiosk .vh-ab-kopf { font-weight: 700; font-size: 1.5rem; margin-bottom: 6px; }

/* Seit 4.97: Mikrofon an der Suche in der Kopfzeile */
.header-mikro { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 2px 9px; margin: 0 0 0 4px; font-size: 1em; line-height: 1.4; vertical-align: middle; align-items: center; }
.header-mikro.vh-hoert { background: #fff; color: #E30613; animation: vh-puls 1s infinite; }

/* Seit 5.04: Lagerorte & Nummern */
.lo-tab th, .lo-tab td { text-align: left; vertical-align: top; }
.lo-tab td:last-child, .lo-tab th:last-child { text-align: right; }
/* Seit 5.05: Ortsbaum */
.lo-baum { list-style: none; margin: 0; padding-left: 18px; }
.lo-baum.lo-wurzel { padding-left: 0; }
.lo-ort-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
summary.lo-ort-zeile { cursor: pointer; }
.lo-ort-name { flex: 1 1 auto; min-width: 0; }
.lo-ort-knoepfe { display: inline-flex; gap: 4px; }
.lo-kuerzel { display: inline-block; background: #E30613; color: #fff; font-weight: 700; border-radius: 4px; padding: 0 6px; font-size: .85em; }
.lo-standort > details > summary, .lo-standort > .lo-ort-zeile { font-size: 1.05em; }
/* Seit 5.06: Boxenliste bricht um statt rechts herauszulaufen */
.lo-tab { table-layout: fixed; width: 100%; }
.lo-tab td, .lo-tab th { white-space: normal; overflow-wrap: anywhere; }
.lo-tab td:last-child { width: 28%; }
.lo-gruppe > summary { list-style: revert; }
/* Seit 5.07: Verbund */
.vb-wahl { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.vb-eintrag { text-align: left; padding: 10px 12px; border-radius: 8px; }
.vb-aktiv { background: #e6f6ea; border: 1px solid #5bb974; }
.vb-module { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 12px; margin: 8px 0 12px; }
.vb-code-kasten { margin: 10px 0; padding: 8px; background: #fff8e1; border: 1px solid #e6b54a; border-radius: 8px; }
@media (max-width: 600px) { header.mcc-kopf #header-user-info > #header-verbund { order: 2; flex-shrink: 0; }
  header.mcc-kopf #header-user-info > #header-verbund:not([style*="display: none"]) { display: inline-flex !important; } }