/*
 * Fahrschule Strothmann - CI-Override.
 *
 * Überschreibt nur die Bootstrap-5-Custom-Properties aus
 * vendor/css/core.css (":root, [data-bs-theme=light]"). Muss NACH
 * core.css eingebunden werden, damit die Kaskade ohne !important
 * greift. Die Vendor-Datei selbst bleibt unangetastet (Update-Pfad).
 *
 * Primärfarbe laut Wunsch aus dem Template-Customizer-Test: #E0083A (Rot).
 */
:root {
  /*
   * Schrift: Montserrat, selbst ausgeliefert (schriften.css). Nutzer-
   * Vorgabe 02.10.2026: "mit schönen Schriftstärken, eher dünn als dick".
   * Vorher Public Sans, am selben Tag kurz Helvetica. Bootstrap liest die
   * Schrift überall aus dieser einen Variable; der Rest ist Rückfall,
   * falls die Datei nicht lädt.
   *
   * Das ist der STANDARD. Einstellungen › Design kann Schrift, Stärken,
   * Größen und Abstände überschreiben (Stilblock direkt nach dieser
   * Datei, siehe design_stil()). Die Werte hier müssen
   * Setting\Domain\Designvorgaben::standard() entsprechen -
   * DesignvorgabenTest prüft das.
   *
   * Stärken: Erst eine Stufe unter Bootstrap (Fließtext 350), am selben
   * Tag nachgeschärft ("etwas stärker darf sie sein"): Fließtext 400,
   * "halbfett" 550 statt 600, "fett" 650 statt 700. Überschriften,
   * Knöpfe und Badges bleiben bei Bootstraps 500.
   */
  --bs-font-sans-serif: "Montserrat", Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;

  --bs-primary: #e0083a;
  --bs-primary-rgb: 224, 8, 58;
  --bs-primary-bg-subtle: #fce6eb;
  --bs-primary-border-subtle: #f4a9ba;
  --bs-primary-text-emphasis: #7b0420;

  --bs-info: #e0083a;
  --bs-info-rgb: 224, 8, 58;
}

/*
 * core.css definiert --bs-primary auch direkt auf [data-bs-theme=dark]
 * (eigene Farbpalette für den Dark-Modus). Das Semi-Dark-Menü trägt
 * dieses Attribut auf dem <aside>, daher überschreibt eine geerbte
 * :root-Regel dort NICHT - core.css's direkte Deklaration auf demselben
 * Element gewinnt sonst gegen die geerbte :root-Variable. Ohne diesen
 * zusätzlichen Block bliebe das Menü beim Vuexy-Standard-Lila (#7367f0).
 */
[data-bs-theme=dark] {
  --bs-primary: #e0083a;
  --bs-primary-rgb: 224, 8, 58;
  --bs-primary-bg-subtle: #fce6eb;
  --bs-primary-border-subtle: #f4a9ba;
  --bs-primary-text-emphasis: #7b0420;

  --bs-info: #e0083a;
  --bs-info-rgb: 224, 8, 58;

  /* Sidebar-Hintergrund des Semi-Dark-Menüs. */
  --bs-menu-bg: #0b264e;
  --bs-menu-bg-rgb: 11, 38, 78;
}

/* Sidebar-Logo wirkt bei fester Menü-Kopfhöhe sonst gequetscht. */
.app-brand-logo-img {
  padding-top: 6px;
}

/*
 * DataTables (Listenansichten): Pagination-Zeile hatte keinen
 * Abstand zum unteren Kartenrand, da die Tabelle direkt in
 * ".table-responsive" statt ".card-body" liegt. Zusätzlich: die
 * rohe, noch unstylisierte Tabelle wird bis zur Initialisierung
 * versteckt (kein Flackern bei großen Tabellen) und blendet danach
 * sanft ein.
 */
.dt-container > div:last-child {
  padding: 1rem 1.5rem 1.5rem;
}

.datatable-pending:not(.dataTable) {
  display: none;
}

.dt-container {
  animation: dt-fade-in .2s ease-out;
}

@keyframes dt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
 * Vertrauliche Zahlen verbergen (Nutzer-Vorgabe 29.08.2026: "wir
 * brauchen oben auch ein auge was standardmäßig alle zahlen
 * ausblendet. nur wenn ich aktiv das auge akrtiviere sehe ich
 * vertrauliche zahlen").
 *
 * Standard ist verborgen: Die Klasse am <html>-Element wird erst
 * gesetzt, wenn jemand das Auge aktiv einschaltet. Sie wird bereits im
 * <head> gesetzt (siehe zahlen.js), damit ein freigeschalteter Wert
 * beim Seitenwechsel nicht kurz aufblitzt.
 *
 * Sichtschutz gegen Mitlesen über die Schulter, KEINE Zugriffskontrolle -
 * der Wert steht weiterhin im Quelltext der Seite.
 */
.vertraulich {
  transition: filter .15s ease-out;
}

html:not(.zahlen-sichtbar) .vertraulich {
  filter: blur(0.4em);
  /* Verhindert versehentliches Markieren und Kopieren des Werts. */
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .vertraulich { transition: none; }
}

/*
 * Schnellzugriff-Kacheln im Kopfleisten-Raster (Nutzer-Vorgabe
 * 29.08.2026). Bewusst nur ein dezenter Hintergrund beim Überfahren -
 * das Raster soll ruhig wirken, nicht wie ein zweites Menü.
 */
.kurzwahl-kachel {
  transition: background-color .12s ease-out;
}

.kurzwahl-kachel:hover,
.kurzwahl-kachel:focus-visible {
  background-color: var(--bs-secondary-bg);
}

/*
 * Globale Suche in der Kopfleiste (Nutzer-Vorgabe 29.08.2026).
 * Die Treffer sind einfache Verweise; markiert wird sowohl per Maus als
 * auch per Pfeiltaste - beides soll gleich aussehen.
 */
.suche-treffer:hover,
.suche-treffer.active {
  background-color: var(--bs-secondary-bg);
}

.suche-treffer .min-w-0 {
  min-width: 0;
}

/*
 * Breite der globalen Suche (Nutzer-Rückfrage 29.08.2026: "die spalte
 * muss vieeeel breiter also die suche").
 *
 * Das Vuexy-Template gibt der rechten Seite der Kopfleiste
 * `flex-basis: 100%`. Sie beansprucht damit die volle Breite, und für die
 * Suche blieb nur der Rest - rund 17 % statt der Hälfte. Die rechte Seite
 * nimmt jetzt nur noch, was ihre Symbole brauchen; der freie Platz gehört
 * der Suche.
 *
 * Bewusst hier statt in `vendor/css/core.css` - die Vendor-Datei bleibt
 * unangetastet, damit der Update-Pfad des Templates offen bleibt.
 */
#layout-navbar .navbar-nav-right {
  flex: 0 0 auto;
  /*
   * Und nach rechts, wo das Benutzermenue hingehoert.
   *
   * Die Zeile darueber hat eine Nebenwirkung, die erst im Kundenportal
   * auffiel: Dort gibt es keine Suche, also nichts, was den freien Platz
   * fuellt - der Block blieb schmal und rutschte an den linken Rand. Das
   * Abmelden-Symbol stand damit in allen drei Kundenportalen links
   * (Nutzer-Meldung 15.09.2026: "Das Icon wo ich mich abmelden kann steht
   * noch links es soll nach rechts").
   *
   * Im Adminportal aendert der Abstand nichts: Dort nimmt `.suche-bereich`
   * mit `flex: 1 1 auto` den Platz bereits ein, es bleibt keiner zu
   * verteilen.
   */
  margin-inline-start: auto;
}

#layout-navbar .suche-bereich {
  flex: 1 1 auto;
  min-width: 0;
}

/* Auf kleinen Bildschirmen bräuchte die Suche mehr Platz, als da ist -
   dort tritt sie in die zweite Reihe zurück statt alles zu quetschen. */
@media (max-width: 767.98px) {
  #layout-navbar .suche-bereich {
    display: none;
  }
}

/*
 * Aussehen der globalen Suche (Nutzer-Rückmeldung 29.08.2026: "mach die
 * search bitte wd hell also nicht so mit dunkel grau, etwas leichtes").
 *
 * Vorher lag das Feld als grauer Block (`bg-body-tertiary`, #dfdfe3) auf
 * der weissen Kopfleiste - bei der neuen Breite ein grosser dunkler
 * Balken quer über den Kopf. Jetzt nimmt es dieselbe Fläche wie die
 * Kopfleiste und wird nur durch eine zarte Kontur abgesetzt.
 *
 * `--bs-paper-bg` und `--bs-border-color` sind die Flächen-Token des
 * Templates und kippen im dunklen Theme von selbst mit - deshalb kein
 * fest eingetragenes Weiss und keine eigene Dark-Regel.
 */
#globaleSuche {
  background-color: var(--bs-paper-bg);
  /* Einzelwerte statt der `border`-Kurzschreibweise, damit die
     Fokus-Regel weiter unten nur `border-color` überschreibt und die
     Breite unangetastet lässt. */
  border-width: 1px;
  border-style: solid;
  border-color: var(--bs-border-color);
  box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#globaleSuche:hover {
  border-color: var(--bs-secondary-bg);
}

/* Beim Tippen darf es ruhig sichtbar sein - aber nur über die Kontur,
   nicht über eine Füllung. */
#globaleSuche:focus {
  background-color: var(--bs-paper-bg);
  border-color: rgba(var(--bs-primary-rgb), .5);
  box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .1);
}

/* Der Platzhalter trägt den längsten Text der Kopfleiste - er soll
   lesbar bleiben, aber nicht mit den Menüpunkten konkurrieren. */
#globaleSuche::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

/*
 * Aktenkopf für Personendetailseiten (Nutzer-Vorgabe 29.08.2026:
 * "Personal bitte neu überdenken eher so bauen wie bei webe").
 *
 * Die dunkle Leiste hebt die Aktionen vom Inhalt ab, statt sie irgendwo
 * rechts neben der Überschrift zu parken. Farbe aus dem Menü-Token, damit
 * Kopf und Seitenleiste dieselbe Sprache sprechen.
 */
.akte-aktionsleiste {
  background-color: #0b264e;
}

.akte-bild {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.akte-bild-initialen {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  font-size: 1.5rem;
  font-weight: 500;
}

/* Funktionstest 05.09.2026: Reiterleisten und Abzeichen auf schmalen Bildschirmen.
   Vuexy setzt .nav-pills/.nav-tabs auf flex-wrap: nowrap; mit vier Reitern
   („Aktuelles Jahr", „Vergleich und Ausreißer", …) lief die BWA auf dem Handy
   auf 806 px Breite und die ganze Seite scrollte seitlich. Leisten, die
   bewusst scrollen (.flex-nowrap im overflow-Container, Statistik), bleiben. */
@media (max-width: 991.98px) {
  .nav-pills:not(.flex-nowrap),
  .nav-tabs:not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}
@media (max-width: 575.98px) {
  .badge {
    white-space: normal;
  }
}

/* Reiterbeschriftungen sind deutsche Wörter, keine Titel: „Vergleich und Ausreißer",
   nicht „Vergleich Und Ausreißer". Vuexy setzt auf .nav-link text-transform:
   capitalize (Funktionstest 05.09.2026). */
.nav-pills .nav-link,
.nav-tabs .nav-link {
  text-transform: none;
}
/* Lange Code-Schnipsel (Pfade, Schlüssel) dürfen auf dem Handy umbrechen. */
@media (max-width: 575.98px) {
  code {
    overflow-wrap: anywhere;
  }
}

/* Kennzeichen „VP" vor dem Saldo: Der Fahrschüler hat einmal über VogelPay
   abgerechnet (Nutzer-Vorgabe 07.09.2026: „Ich möchte nur einen kleinen
   Hinweis (VP) in blau vor dem Saldo, damit ich weiß, dass die mal VogelPay
   waren").

   Eigene Klasse statt `bg-label-info`: Vuexys „info" ist #00bad1, also
   Türkis, nicht Blau. Und die Primärfarbe ist unser Rot - die steht schon
   für offene Forderungen und darf hier nicht mitreden. */
.badge-vp {
  background-color: rgba(30, 95, 191, 0.12);
  color: #1e5fbf;
  font-weight: 600;
}
html[data-bs-theme="dark"] .badge-vp {
  background-color: rgba(122, 168, 245, 0.16);
  color: #7aa8f5;
}

/*
 * Breite Tabellen: die erste Spalte bleibt stehen.
 *
 * Nutzer-Meldung 15.09.2026: „Schaue dir die Liste von Fahrerübersicht an,
 * sie kann nicht sauber dargestellt werden."
 *
 * Gemessen am selben Tag: Die Fahrerübersicht ist 1694 px breit, das Fenster
 * 827 px. Man sieht entweder die Namen oder die Module - und wer nach rechts
 * scrollt, liest Ablaufdaten, die zu niemandem mehr gehören. Zwölf Spalten
 * (Name, Geburtsdatum, Klassen, zwei Fristen, fünf Module, Offen,
 * Fahrerkarte), und keine davon ist entbehrlich.
 *
 * Also bleibt die Namensspalte am linken Rand stehen. Der Schatten an ihrer
 * Kante zeigt, dass dort etwas feststeht und der Rest darunter wegläuft -
 * ohne ihn sieht es aus wie ein Darstellungsfehler.
 *
 * Bewusst als eigene Klasse und nicht auf jeder `.table-responsive`: Eine
 * feststehende Spalte kostet Breite und lohnt erst, wenn wirklich gescrollt
 * werden muss.
 */
.tabelle-erste-spalte-fest th:first-child,
.tabelle-erste-spalte-fest td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background-color: var(--bs-card-bg, #fff);
}

.tabelle-erste-spalte-fest thead th:first-child {
  /* Über der Zeile darunter, sonst schiebt sich eine Zelle beim Scrollen
     über den Spaltenkopf. */
  z-index: 3;
}

/* Beim Überfahren muss die feststehende Zelle mitgehen - sonst bleibt sie
   weiss, während die Zeile sich färbt, und die Zeile bricht optisch
   auseinander. */
.tabelle-erste-spalte-fest tbody tr:hover td:first-child {
  background-color: var(--bs-table-hover-bg, #f5f5f6);
}

/* Die Kante: nur sichtbar, solange tatsächlich gescrollt ist. */
.tabelle-erste-spalte-fest th:first-child::after,
.tabelle-erste-spalte-fest td:first-child::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 6px;
  transform: translateX(100%);
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}

/*
 * Und schmaler. Die Vuexy-Vorgabe gibt jeder Zelle rund 1 rem auf beiden
 * Seiten; bei zwölf Spalten sind das über 300 px, die nur Luft sind. Für
 * Datumsangaben und Abzeichen reicht die Hälfte - der Inhalt ist kurz und
 * mittig, es entsteht kein Gedränge.
 */
.tabelle-eng > :not(caption) > * > * {
  padding-inline: 0.55rem;
}

/* Im dunklen Thema trägt ein schwarzer Schatten nichts - dort muss die
   Kante heller sein als der Grund, nicht dunkler. */
html[data-bs-theme="dark"] .tabelle-erste-spalte-fest th:first-child::after,
html[data-bs-theme="dark"] .tabelle-erste-spalte-fest td:first-child::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.10), transparent);
}

/*
 * Auf dem Handy darf die feststehende Spalte nicht die halbe Fläche
 * belegen.
 *
 * Gemessen am 15.09.2026 bei 375 px Fensterbreite: Die Namensspalte nahm
 * 265 px davon ein - daneben blieb ein Streifen, auf dem von „18.04.2029"
 * noch „0.2029" zu sehen war. Die feststehende Spalte ist gerade hier am
 * nützlichsten, weil am meisten gescrollt wird; sie muss nur schmaler sein.
 *
 * Deshalb eine Obergrenze und ein erlaubter Umbruch - „Benkirane El
 * Hiyani, Aadil" steht dann auf zwei Zeilen, und das ist die bessere von
 * zwei unschönen Möglichkeiten.
 */
@media (max-width: 767.98px) {
  .tabelle-erste-spalte-fest th:first-child,
  .tabelle-erste-spalte-fest td:first-child {
    max-width: 8.5rem;
    white-space: normal;
  }
}

/*
 * Der Zwischenstand: zwei von vier Bereichen.
 *
 * Weder ein Strich noch ein Datum trifft ihn. Ohne eigene Form sieht ein
 * angefangenes Modul aus wie ein unberührtes - und genau das war der
 * Anlass: Achim Burkert hatte Modul 1 fertig und stand mit fünf Strichen da.
 *
 * Die Herkunft braucht dagegen kein eigenes Zeichen mehr: Seit dem
 * 15.09.2026 stehen die ausserhalb nachgewiesenen Bausteine in eigenen
 * Spalten E1-E5 (Nutzer-Vorgabe). Ein gestrichelter Rand, der dasselbe noch
 * einmal gesagt hätte, ist damit entfallen.
 */
.baustein-teil {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}


/*
 * Fahrerübersicht: die Zeile färbt sich, wenn die Schulungen drängen.
 *
 * Nutzer-Vorgabe 15.09.2026: „Wenn erste Erinnerung raus ist, für Fahrer
 * gelb hinterlegt - wenn nicht genügend Schulungen absolviert sind. Wenn
 * zweite Erinnerung raus ist, rot hinterlegen. Hier zählen nur die
 * Schulungen - die Farbe bei Ablauf von Fahrerkarte und Führerschein
 * bleibt so wie es ist mit Rot."
 *
 * Die Zeile sagt also etwas anderes als die Abzeichen darin: Sie meint die
 * Weiterbildung, die Abzeichen meinen ihr jeweiliges Datum. Deshalb sind
 * die Töne hier blasser als die der Abzeichen - sonst übertönt der
 * Hintergrund das, was er einrahmen soll.
 *
 * Die Farbe läuft über eine Variable, nicht direkt über `background-color`:
 * Die erste Spalte steht beim seitlichen Scrollen fest und trägt einen
 * eigenen Grund (sonst scheint der Inhalt durch). Ohne die Variable bliebe
 * sie weiss, während der Rest der Zeile sich färbt - die Zeile risse
 * optisch auseinander.
 */
.tabelle-erste-spalte-fest tbody tr {
  --zeilen-grund: var(--bs-card-bg, #fff);
}

tbody tr.zeile-schulung-gelb {
  --zeilen-grund: rgba(255, 171, 0, 0.09);
  background-color: var(--zeilen-grund);
}

tbody tr.zeile-schulung-rot {
  --zeilen-grund: rgba(255, 62, 29, 0.09);
  background-color: var(--zeilen-grund);
}

.tabelle-erste-spalte-fest tbody td:first-child {
  background-color: var(--zeilen-grund);
}

/* Beim Überfahren gewinnt die Hover-Farbe - auch in der festen Spalte. */
.tabelle-erste-spalte-fest tbody tr:hover {
  --zeilen-grund: var(--bs-table-hover-bg, #f5f5f6);
}

/*
 * Die Farbprobe in der Legende - kräftiger als die Zeile selbst.
 *
 * In der Zeile ist der Ton mit Absicht blass, damit er die Abzeichen darin
 * nicht übertönt. Auf 1,6 rem Fläche sieht derselbe Ton nach gar nichts
 * aus; gemessen am 15.09.2026 war die Probe von weiss nicht zu
 * unterscheiden. Sie zeigt deshalb dieselbe Farbe in kräftiger.
 */
.legende-probe {
  display: inline-block;
  width: 1.6rem;
  height: 0.85rem;
  vertical-align: -0.1rem;
  border: 1px solid var(--bs-border-color, #dbdade);
  border-radius: 2px;
}

.legende-probe.zeile-schulung-gelb {
  background-color: rgba(255, 171, 0, 0.35);
}

.legende-probe.zeile-schulung-rot {
  background-color: rgba(255, 62, 29, 0.32);
}

/*
 * Eine Kartenleiste, die beim Scrollen stehen bleibt.
 *
 * Nutzer-Vorgabe 15.09.2026: „Die Buttons sollen oben bei der Leiste Aktive
 * Fahrer sein - diese soll auch stehen bleiben, wenn ich scrolle."
 *
 * Bei 61 Fahrern kreuzt man unten in der Liste an und müsste zum Melden
 * wieder hochscrollen. Die Leiste folgt deshalb mit.
 *
 * `background` muss gesetzt sein, sonst scheinen die Tabellenzeilen
 * durch; der `z-index` hält sie über der feststehenden ersten Spalte
 * anderer Tabellen (die liegt bei 2 bis 3).
 */
:root {
  /*
   * Wo die feste Kopfleiste aufhört.
   *
   * Vuexy setzt `#layout-navbar` auf `position: fixed`, 56 px hoch mit 16 px
   * Abstand nach oben - zusammen 72 px, gemessen am 15.09.2026; eine eigene
   * Variable dafür gibt es im Template nicht.
   *
   * Der Wert muss genau passen: Ist er kleiner, verschwindet die
   * stehenbleibende Leiste unter der Kopfleiste. Ist er grösser, schimmert
   * im Spalt dazwischen die durchlaufende Liste durch - bei 4,75 rem waren
   * das vier Pixel, in denen eine halbe Zeile mitwanderte.
   */
  --kopfleiste-unterkante: 4.5rem;
}

.leiste-bleibt {
  position: sticky;
  top: var(--kopfleiste-unterkante);
  z-index: 5;
  background-color: var(--bs-card-bg, #fff);
  /* Ohne die eigene Kante verschwimmt sie beim Überlappen mit der ersten
     Zeile darunter. */
  box-shadow: 0 1px 0 var(--bs-border-color, #dbdade);
}

/*
 * Eine Karte, die auffallen soll.
 *
 * Nutzer-Vorgabe 15.09.2026 zum Unterlagen-Kasten beim Anlegen eines
 * Fahrers: „Das soll auffälliger sein - damit die meisten das nutzen."
 *
 * Der Rahmen nimmt die Hausfarbe auf, der Kopf einen sehr blassen Ton
 * davon. Bewusst keine Fläche in Vollton: Der Kasten ist ein Angebot, keine
 * Warnung - und neben einem roten Block läse niemand mehr das Formular
 * daneben.
 */
.karte-hervorgehoben {
  border: 1px solid rgba(224, 8, 58, 0.45);
  box-shadow: 0 2px 10px rgba(224, 8, 58, 0.08);
}

.karte-hervorgehoben > .card-header {
  background-color: rgba(224, 8, 58, 0.04);
  border-bottom: 1px solid rgba(224, 8, 58, 0.18);
}

.karte-hervorgehoben > .card-header h5 {
  color: #E0083A;
}

/* ──────────────────────────────────────────────────────────────────────
   Belegte Termine in der BKF-Terminsuche

   Nutzer-Vorgabe 15.09.2026: „Es soll deutlicher zu erkennen sein, wenn
   Fahrer für den Termin angemeldet sind." Ein Kästchen mit Namen weiter
   unten reichte nicht - beim Überfliegen der Liste sah man nur freie
   Plätze und Knöpfe. Jetzt trägt die ganze Zeile eine Kante in der
   Signalfarbe, dazu oben eine Zählung.
   ────────────────────────────────────────────────────────────────────── */
.termin-belegt {
    border-inline-start: 4px solid var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .04);
}

.namen-angemeldet {
    background-color: rgba(var(--bs-success-rgb), .08);
}

/* ──────────────────────────────────────────────────────────────────────
   Terminkarten in Portal-Schulungen und -Kursen

   Nutzer-Vorgabe 15.09.2026: „Die Schulungen sollen moderner wirken zum
   Anmelden zum Kurs." Vorher war es eine Textliste - Datum, Titel, Zahl,
   Knopf, alles gleich gewichtet. Wer sich anmelden soll, muss zuerst
   sehen, WANN und WAS; der Rest ist Beiwerk.

   Deshalb: ein Datumsblock als Anker links, das Modul als kräftiges
   Merkmal, die Belegung als Balken statt als Satz. Keine neuen
   Abhängigkeiten - Bootstrap-Raster und diese Datei reichen.
   ────────────────────────────────────────────────────────────────────── */
.termin-karte {
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background-color: var(--bs-body-bg);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.termin-karte:hover {
    border-color: rgba(var(--bs-primary-rgb), .4);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}

/* Der Datumsblock: Tag gross, Monat klein, Wochentag darüber. */
.termin-datum {
    flex: 0 0 4.5rem;
    text-align: center;
    border-radius: .5rem;
    padding: .5rem .25rem;
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    line-height: 1.1;
}

.termin-datum .tag {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.termin-datum .monat,
.termin-datum .wochentag {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.termin-datum .wochentag {
    opacity: .75;
}

/* Modul- und Kennungsmerkmal. */
.termin-modul {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: 2rem;
    padding: .15rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}

.termin-titel {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Belegung als schmaler Balken - eine Zahl sagt wenig, ein Balken zeigt. */
.termin-balken {
    /* Feste Breite, nicht nur eine Obergrenze: Als Flex-Kind ohne Inhalt
       schrumpfte der Balken auf 0 - die Füllung ist prozentual, und 56 %
       von nichts sind nichts (gemessen 15.09.2026). */
    flex: 0 0 auto;
    width: 12rem;
    max-width: 100%;
    height: .375rem;
    border-radius: 1rem;
    background-color: var(--bs-secondary-bg);
    overflow: hidden;
}

.termin-balken span {
    display: block;
    height: 100%;
    border-radius: 1rem;
    background-color: var(--bs-success);
}

.termin-balken.knapp span { background-color: var(--bs-warning); }
.termin-balken.voll span { background-color: var(--bs-danger); }

/* Belegte Termine: dieselbe Signalfarbe wie bisher, jetzt als Karte. */
.termin-karte.termin-belegt {
    border-color: rgba(var(--bs-success-rgb), .5);
    background-color: rgba(var(--bs-success-rgb), .03);
}

/* ──────────────────────────────────────────────────────────────────────
   Angemeldete auf einer Terminkarte (BKF-Termine, Inhouse, Kurse)

   Nutzer-Vorgabe 02.10.2026: „BKF Termine - der angemeldete Fahrer soll
   auffälliger dargestellt werden" und „Bei Kurse soll das wie bei
   BKF-Termine auffälliger dargestellt werden - abmelden über extra
   button". Jede Person ist ein eigener Streifen in der Signalfarbe des
   belegten Termins, mit Kürzel und kräftigem Namen. Wer nur angefragt,
   wartet oder abgelehnt ist, bleibt blass - der Streifen gehört dem, der
   dabei ist. Teilstück: `Core/Views/partials/teilnehmerliste.php`.
   ────────────────────────────────────────────────────────────────────── */
.teilnehmer-liste ol {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.teilnehmer-zeile {
    padding: .625rem .875rem;
    border: 1px solid rgba(var(--bs-success-rgb), .35);
    border-inline-start: 4px solid var(--bs-success);
    border-radius: .5rem;
    background-color: rgba(var(--bs-success-rgb), .1);
}

.teilnehmer-zeile.blass {
    border-color: var(--bs-border-color);
    border-inline-start-color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
}

.teilnehmer-nummer {
    flex: 0 0 1.25rem;
    text-align: end;
}

.teilnehmer-avatar {
    flex: 0 0 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    background-color: var(--bs-success);
    color: #fff;
}

.teilnehmer-zeile.blass .teilnehmer-avatar {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.teilnehmer-person {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.teilnehmer-name {
    display: block;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bs-heading-color, var(--bs-body-color));
}

.teilnehmer-aktionen {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Schmal: Marke und Knopf unter den Namen, damit der Name Platz behält. */
@media (max-width: 575.98px) {
    .teilnehmer-zeile {
        flex-wrap: wrap;
        row-gap: .5rem !important;
    }

    .teilnehmer-person {
        flex-basis: calc(100% - 5.5rem);
    }

    /* Den ganzen Namen zeigen statt „Asenoguan, Matthew Osa…". */
    .teilnehmer-name.text-truncate {
        white-space: normal;
    }

    .teilnehmer-aktionen {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Meine Fahrer im Unternehmensportal

   Vorschläge vom 02.10.2026, umgesetzt auf „Setzte das alles um": BKF-Frist
   und nächster Termin je Fahrer, Melden im Menü, und auf dem Handy eine
   Karte je Fahrer statt einer Tabelle, die mehr als doppelt so breit war
   wie der Bildschirm (762 px Inhalt auf 343 px, gemessen 02.10.2026).
   Ansicht: `Company/Views/meine_fahrer.php`.
   ────────────────────────────────────────────────────────────────────── */
.termin-hinweis {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border-radius: .375rem;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .12);
}

.termin-hinweis:hover {
    color: var(--bs-success);
    background-color: rgba(var(--bs-success-rgb), .2);
}

/* Lange Kursnamen kürzen statt die Tabelle zu verbreitern; der volle
   Name steht im Titel des Verweises. */
.termin-hinweis > span {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Namen einzeilig erst, wenn genug Platz ist; darunter brechen lange
   Doppelnamen um, statt die Tabelle zu verbreitern. */
@media (min-width: 1400px) {
    .fahrer-tabelle .fahrer-name-zelle {
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    /* Sieben Spalten statt fünf: etwas engere Zellen, damit die Tabelle
       ab 1.280 px ohne seitliches Scrollen auskommt. */
    .fahrer-tabelle > :not(caption) > * > * {
        padding-inline: .75rem;
    }
}

.termin-hinweis.wartet {
    color: var(--bs-warning);
    background-color: rgba(var(--bs-warning-rgb), .14);
}

/* Der Kreis mit fünf Modulen (Nutzer-Vorgabe 02.10.2026), Teilstück
   `Company/Views/teile/modulring.php`. Grün = absolviert, grau = offen;
   alle fünf: die Zahl wird zum Haken-Grün. */
.modulring {
    display: inline-flex;
    line-height: 0;
}

.modulring circle {
    fill: none;
    stroke-width: 4.5;
    stroke: var(--bs-secondary-bg);
}

.modulring circle.hat {
    stroke: var(--bs-success);
}

.modulring .zahl {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    fill: var(--bs-heading-color, var(--bs-body-color));
}

.modulring.komplett .zahl {
    fill: var(--bs-success);
}

@media (max-width: 767.98px) {
    .fahrer-tabelle,
    .fahrer-tabelle tbody {
        display: block;
    }

    .fahrer-tabelle thead {
        display: none;
    }

    .fahrer-tabelle tbody tr.fahrer-zeile {
        display: grid;
        grid-template-columns: 1.75rem auto 1fr auto;
        column-gap: .5rem;
        row-gap: .25rem;
        padding: .875rem 1rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .fahrer-tabelle tbody tr.fahrer-zeile > td {
        display: block;
        grid-column: 2 / 4;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .fahrer-tabelle tbody tr.fahrer-zeile > td.fahrer-wahl-zelle {
        grid-column: 1;
        grid-row: 1;
        padding-top: .125rem;
    }

    .fahrer-tabelle tbody tr.fahrer-zeile > td.fahrer-name-zelle {
        grid-column: 2 / 4;
        grid-row: 1;
        font-size: .9375rem;
    }

    /* Der Modulkreis rechts oben in der Karte, neben Name und Frist. */
    .fahrer-tabelle tbody tr.fahrer-zeile > td.fahrer-modul-zelle {
        grid-column: 4;
        grid-row: 1 / span 2;
        justify-self: end;
    }

    .fahrer-tabelle td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--bs-secondary-color);
        font-size: .8125rem;
    }

    /* Hochladen links, Melden rechts daneben - eine Zeile statt zwei. */
    .fahrer-tabelle tbody tr.fahrer-zeile > td.fahrer-aktion-zelle {
        grid-column: 2;
        padding-top: .25rem;
    }

    .fahrer-tabelle tbody tr.fahrer-zeile > td.fahrer-aktion-zelle:last-child {
        grid-column: 3;
        grid-row: span 1;
        align-self: start;
    }

    .fahrer-tabelle tbody tr.hochladen-zeile.show,
    .fahrer-tabelle tbody tr.hochladen-zeile.collapsing,
    .fahrer-tabelle tbody tr.fahrer-leer:not(.d-none),
    .fahrer-tabelle tbody tr.hochladen-zeile > td,
    .fahrer-tabelle tbody tr.fahrer-leer > td {
        display: block;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Überblick über den Terminkarten: wo Ihre Fahrer schon stehen

   Vorschlag 02.10.2026, umgesetzt auf „Setzte das alles um". Teilstück
   `Core/Views/partials/anmeldeueberblick.php`, auf BKF-Terminen und Kursen
   in Unternehmens- und Fahrerportal.
   ────────────────────────────────────────────────────────────────────── */
.anmelde-ueberblick {
    padding: .75rem 1rem;
    border: 1px solid rgba(var(--bs-success-rgb), .35);
    border-inline-start: 4px solid var(--bs-success);
    border-radius: .75rem;
    background-color: rgba(var(--bs-success-rgb), .06);
}

.anmelde-sprung {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border: 1px solid rgba(var(--bs-success-rgb), .4);
    border-radius: 2rem;
    font-size: .8125rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.anmelde-sprung:hover {
    border-color: var(--bs-success);
    color: var(--bs-success);
}

/* Die Kopfleiste steht fest - ohne Abstand landete die Karte darunter. */
.termin-karte {
    scroll-margin-top: 6rem;
}

/* Monatsüberschrift zwischen den Karten. */
.termin-monat {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .termin-datum {
        flex-basis: 3.75rem;
    }

    .termin-balken {
        width: 8rem;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Modulstand in der Fahrerauswahl

   Nutzer-Vorgabe 15.09.2026: „eine Liste, wo man erkennt, welche Module
   die Fahrer schon absolviert haben". Fünf kleine Marken je Fahrer sagen
   das auf einen Blick - gefüllt heisst absolviert, blass heisst offen.
   ────────────────────────────────────────────────────────────────────── */
.modulmarke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.modulmarke.hat {
    background-color: rgba(var(--bs-success-rgb), .16);
    color: var(--bs-success);
}

/* Grössere Terminüberschrift mit Eckdaten (Nutzer-Vorgabe 15.09.2026:
   „soll bei BKF-Terminen grösser dargestellt werden - mit Datum und
   Preis"). Die Überschrift trägt Modul, Kennung und Sache in einer Zeile;
   darunter Datum, Zeit, Ort und Preis gleich gewichtet. */
.termin-titel {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

.termin-kennung {
    display: inline-block;
    border-radius: .375rem;
    padding: .1rem .45rem;
    font-size: .8125rem;
    font-weight: 600;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    vertical-align: middle;
}

.termin-eckdaten {
    font-size: .875rem;
    color: var(--bs-body-color);
}

.termin-eckdaten .text-body-secondary {
    color: var(--bs-secondary-color) !important;
}

/* Kopf des Auswahldialogs: der Termin bleibt sichtbar, während man die
   Fahrerliste durchgeht (Nutzer-Vorgabe 15.09.2026: „in dem PopUp oben
   festgeschrieben die Weiterbildungsdaten, Unterkenntnisbereiche,
   Modulname, Preis, Datum, Ort"). */
.fahrerauswahl-kopf {
    background-color: var(--bs-secondary-bg);
    border-block: 1px solid var(--bs-border-color);
}

.bereichsmarke {
    display: inline-block;
    border-radius: .25rem;
    padding: .05rem .35rem;
    margin-inline-end: .25rem;
    font-size: .75rem;
    font-weight: 600;
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--bs-primary);
}

/* ── Kopf eines Modultermins ───────────────────────────────────────────
   Nutzer-Vorgabe 16.09.2026: „Überschrift soll farblich hinterlegt sein
   der besseren Erkennung."

   Hinterlegt wird nach MODULNUMMER, nicht einheitlich: Wer zwischen zwei
   Terminen wechselt, erkennt am Farbton, ob er noch beim selben Modul
   ist. Fünf Töne für die fünf Module nach § 5 BKrFQG, dazu ein neutraler
   für alles, was sich nicht zuordnen lässt.

   Nutzer-Vorgabe 16.09.2026: „Nicht in Lila bitte, in dem Blau der
   Fahrschule." Die Reihe läuft deshalb vom Hausrot #E0083A ins Hausblau
   #0b264e - dieselben zwei Farben, die das Logo und die Seitenleiste
   tragen. Dazwischen liegen drei Abstufungen, kein Violett: Der Weg geht
   über gedämpftes Rot und Graublau, nicht über den Regenbogen. */
.modulkopf {
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    border-left: 5px solid var(--modulkopf-linie, #E0083A);
    background: var(--modulkopf-grund, rgba(224, 8, 58, .07));
}

.modulkopf h4 { color: var(--modulkopf-linie, #E0083A); }

.modulkopf .modulkopf-eckdaten {
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.modulkopf-1 { --modulkopf-linie: #E0083A; --modulkopf-grund: rgba(224,   8,  58, .07); }
.modulkopf-2 { --modulkopf-linie: #A81C43; --modulkopf-grund: rgba(168,  28,  67, .07); }
.modulkopf-3 { --modulkopf-linie: #6E2A4A; --modulkopf-grund: rgba(110,  42,  74, .07); }
.modulkopf-4 { --modulkopf-linie: #38304C; --modulkopf-grund: rgba( 56,  48,  76, .07); }
.modulkopf-5 { --modulkopf-linie: #0B264E; --modulkopf-grund: rgba( 11,  38,  78, .07); }
.modulkopf-0 { --modulkopf-linie: #6b6570; --modulkopf-grund: rgba(107, 101, 112, .07); }

/* Die Nummer als Marke im Kopf - sie trägt die Farbe als Fläche, damit
   sie auch dann erkennbar bleibt, wenn der Hintergrund blass wirkt. */
.modulkopf-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    background: var(--modulkopf-linie, #E0083A);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Hinweiskasten in der Hausfarbe
 *
 *  Nutzer-Vorgabe 17.09.2026: „die Erklärung gerne rot unterlegt zum
 *  sauberen Lesen."
 *
 *  Warum nicht `bg-label-danger`: Die Vuexy-Klasse färbt Hintergrund UND
 *  Schrift. In der Mitarbeiterliste steht seit dem 15.09.2026 aber „Rot =
 *  das brauchen wir" - wenn der ganze Kasten rot ist, sagt Rot nichts mehr.
 *  Hier also nur der Grund in einer weichen Tönung der Hausfarbe, die
 *  Schrift bleibt schwarz, und das kräftige Rot bleibt den Pflichtangaben.
 * ──────────────────────────────────────────────────────────────────────── */
.hinweis-rot {
    background: rgba(224, 8, 58, 0.06);
    border: 1px solid rgba(224, 8, 58, 0.25);
}

/* Im dunklen Aufzug reicht weniger Deckkraft, sonst leuchtet der Kasten. */
[data-bs-theme="dark"] .hinweis-rot {
    background: rgba(224, 8, 58, 0.12);
    border-color: rgba(224, 8, 58, 0.35);
}

/* ──────────────────────────────────────────────────────────────────────
   Abwesenheitskalender - ein Jahr als Raster.

   Nutzer-Vorgabe 18.09.2026: „ein eigenes Untermenü ... mit einer
   Kalenderfunktion, wo ich die Tage anklicken kann. Wie bei Personizer
   hätte ich das gerne aufgebaut."

   Zwölf Zeilen, einunddreissig Spalten - feste Breite je Tag, damit man
   senkrecht vergleichen kann. Das ist der Zweck der Ansicht: sehen, wer
   wann weg ist, ohne zu blättern.

   Bei schmalen Bildschirmen wird das Raster waagerecht rollbar statt
   umgebrochen. Ein umgebrochener Monat wäre kein Raster mehr.
   ────────────────────────────────────────────────────────────────────── */
.jahresraster {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.jahresraster__zeile {
    display: grid;
    grid-template-columns: 6.5rem repeat(31, 1.85rem);
    gap: .2rem;
    align-items: center;
}

.jahresraster__monat {
    text-align: right;
    padding-right: .75rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.jahresraster__tag {
    height: 1.85rem;
    border: 0;
    border-radius: .3rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    padding: 0;
    line-height: 1.85rem;
    transition: outline-color .1s ease-in-out;
    outline: 2px solid transparent;
    outline-offset: 1px;
}

.jahresraster__tag:hover,
.jahresraster__tag:focus-visible {
    outline-color: var(--bs-primary);
}

/* Der 31. Februar ist kein Tag - er hält nur die Spalte. */
.jahresraster__tag--leer {
    background: transparent;
    pointer-events: none;
}

.jahresraster__tag--wochenende {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

.jahresraster__tag--feiertag {
    background-color: #2f6fb3;
    color: #fff;
    font-weight: 600;
}

.jahresraster__tag--belegt {
    color: #fff;
    font-weight: 600;
    /* Die Ziffer steht auf der Farbe des Tages - ohne Kontur wäre sie auf
       dem hellen Grün kaum zu lesen. */
    text-shadow: 0 0 2px rgba(0, 0, 0, .45);
}

/* Ein noch nicht genehmigter Antrag: schraffiert statt zweifarbig. Eine
   zweite Farbe je Art hätte die Legende verdoppelt. */
.jahresraster__tag--offen {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .55) 0,
        rgba(255, 255, 255, .55) 2px,
        transparent 2px,
        transparent 5px
    );
}

.jahresraster__tag--heute {
    outline-color: var(--bs-primary);
    font-weight: 700;
}

.jahresraster__punkt {
    width: .85rem;
    height: .85rem;
    border-radius: .25rem;
    display: inline-block;
}

.jahresraster__punkt--feiertag {
    background-color: #2f6fb3;
}

/* Der Urlaubsring: verbleibende Tage als Anteil am Gesamtanspruch. Ein
   `conic-gradient` statt eines Diagramms - es sind zwei Zahlen, kein
   Datensatz. */
.urlaubsring {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(#43a994 var(--anteil, 0%), var(--bs-tertiary-bg) 0);
    display: grid;
    place-items: center;
}

.urlaubsring__zahlen {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: var(--bs-body-bg);
    display: grid;
    place-items: center;
    line-height: 1.1;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.urlaubsring__zahlen strong {
    display: block;
}

.urlaubsring__zahlen span {
    display: block;
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--bs-border-color);
    padding-top: .1rem;
}

/*
 * /partner - Funktionsübersicht und Anmeldung für Unternehmen
 * (01.10.2026, nach dem Flyer „Neu für unsere Partner").
 */
.partner-seite { background: #f5f6f9; }
.partner-kopf { background: #fff; border-bottom: 1px solid rgba(11, 38, 78, .08); position: sticky; top: 0; z-index: 10; }
.partner-hero {
  color: #fff;
  background:
    radial-gradient(60rem 30rem at 110% -10%, rgba(224, 8, 58, .55), transparent 60%),
    linear-gradient(135deg, #0b264e 0%, #12376e 100%);
}
.partner-marke { letter-spacing: .06em; text-transform: uppercase; font-size: .75rem; }
.partner-titel { color: #fff; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; max-width: 22ch; text-wrap: balance; }
.partner-unterzeile { font-size: clamp(1.1rem, 2.2vw, 1.4rem); opacity: .9; margin-bottom: .75rem; }
.partner-einleitung { max-width: 60ch; opacity: .85; margin-bottom: 0; }
.partner-abschnitt { color: #0b264e; font-size: 1.5rem; margin-bottom: 1.5rem; text-wrap: balance; }
.partner-karte { background: #fff; border-radius: .5rem; padding: 1.5rem; box-shadow: 0 .125rem .5rem rgba(11, 38, 78, .06); }
.partner-symbol, .partner-rund {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary); margin-bottom: .75rem;
}
.partner-symbol .icon-base, .partner-rund .icon-base { font-size: 1.4rem; }
.partner-rund { width: 3.25rem; height: 3.25rem; background: #0b264e; color: #fff; margin-bottom: 0; }
.partner-hell { background: #fff; }
.partner-liste { list-style: none; padding-left: 0; display: grid; gap: .6rem; }
.partner-liste li { display: flex; gap: .5rem; align-items: flex-start; }
.partner-liste .icon-base { color: var(--bs-primary); font-size: 1.15rem; flex-shrink: 0; margin-top: .1rem; }
.partner-gruppe { color: #0b264e; margin: 2rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(11, 38, 78, .1); }
.partner-gruppe:first-of-type { margin-top: 0; }
.partner-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.partner-fuss { background: #0b264e; color: rgba(255, 255, 255, .8); }
.partner-fuss a { color: #fff; }

/*
 * Schriftstärken für Montserrat, etwas unter Bootstrap (siehe :root oben).
 * Die Bootstrap-Hilfsklassen tragen !important, deshalb hier ebenso.
 */
b,
strong {
  font-weight: 650;
}
.fw-semibold {
  font-weight: 550 !important;
}
.fw-bold,
.fw-bolder,
.fw-extrabold {
  font-weight: 650 !important;
}

/* Schulungsplan (02.10.2026): schmales Zahlenfeld (Minuten je Block, Folge der Dozenten). */
.splan-minuten { width: 5.5rem; }

/* Theorieunterricht, Unterschriftslink je Schüler (03.10.2026): Linkfeld lesbar, QR-Code nie breiter als der Schirm. */
.theorie-link { max-width: 40rem; }
.theorie-qr svg { max-width: 100%; height: auto; }

/*
 * Preisrechner - strothmann.app/preisrechner (Jonas 05.10.2026).
 * Öffentliche Seite im Stil von /kursangebote, mobil zuerst. Farben nur
 * über --bs-primary / --bs-primary-rgb.
 */
.pr-body { background: #f6f6f8; }
.pr-seite { max-width: 74rem; }
.pr-kopf { background: #fff; border-bottom: 1px solid var(--bs-border-color); }
.pr-hero {
  background:
    radial-gradient(60rem 22rem at 100% 0%, rgba(var(--bs-primary-rgb), .10), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fbf7f8 100%);
  border-bottom: 1px solid var(--bs-border-color);
}
.pr-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pr-oberzeile { letter-spacing: .08em; }
.pr-einleitung { max-width: 42rem; }
.pr-fakt { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 2rem;
  background: #fff; border: 1px solid var(--bs-border-color); font-size: .875rem; }
.pr-fakt i { color: var(--bs-primary); }
.pr-schritt { display: flex; gap: .9rem; align-items: center; margin: 0 0 1rem; }
.pr-schritt h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0 0 .1rem; }
.pr-nummer { flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-primary); color: #fff; font-weight: 700; }
.pr-karte { background: #fff; border: 1px solid var(--bs-border-color); border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(20, 20, 43, .04); }
.pr-symbol { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: .75rem; display: grid; place-items: center;
  background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); --bs-icon-size: 1.35rem; }

/* Schritt 1, Klassenwahl: Kacheln als Links, auf dem Handy eine Spalte mit
   großer Tippfläche, ab sm zwei, ab xl drei Spalten. */
.pr-kacheln { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 576px) { .pr-kacheln { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .pr-kacheln { grid-template-columns: 1fr 1fr 1fr; } }
.pr-kachel { display: flex; align-items: center; gap: .85rem; min-height: 4.5rem; padding: .85rem 1rem;
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: .9rem; color: var(--bs-body-color);
  transition: border-color .15s ease, box-shadow .15s ease; }
.pr-kachel:hover, .pr-kachel:focus-visible { border-color: var(--bs-primary); box-shadow: 0 4px 14px rgba(20, 20, 43, .06); color: var(--bs-body-color); }
.pr-kachel:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.pr-kachel-kennung { flex: 0 0 3.2rem; height: 3.2rem; border-radius: .75rem; display: grid; place-items: center;
  background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.pr-kachel-mitte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pr-kachel-name { font-weight: 600; line-height: 1.3; }
.pr-kachel-text { font-size: .8rem; color: var(--bs-secondary-color); line-height: 1.35; }
.pr-kachel-pfeil { flex: 0 0 auto; color: var(--bs-secondary-color); }

/* Schritt 2 */
.pr-zurueck { display: inline-flex; align-items: center; font-size: .875rem; font-weight: 600; }

/* Übungsfahrten */
.pr-zahl { font-size: 1.6rem; font-weight: 700; color: var(--bs-primary); line-height: 1; }
.pr-spanne { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pr-stufe { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .3rem; min-width: 0;
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem; font-size: .8rem; color: var(--bs-body-color); }
.pr-stufe:hover, .pr-stufe:focus-visible { border-color: var(--bs-primary); }
.pr-stufe.aktiv { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); }
.pr-stufe-name { font-weight: 600; }
.pr-stufe-zahl { color: var(--bs-secondary-color); }

/* Nebenkosten */
.pr-wahl { display: flex; align-items: center; gap: .85rem; cursor: pointer; margin: 0;
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: .8rem 1rem; }
.pr-wahl:has(input:checked) { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .035); }

/* Entgelttabellen nach § 32 FahrlG (Vorgabe 14.10.2026): Zeilenköpfe in
   normaler Schrift (das Vendor-CSS setzt jedes th in Versalien), lange
   gesetzliche Bezeichnungen brechen um, auf 360 px ohne Querscrollen.
   Keine Summe im Blickfang, keine Leiste am unteren Rand. */
.pr-entgelte { table-layout: auto; }
.pr-entgelte th, .pr-entgelte td { vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.pr-entgelte tbody th { text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--bs-body-color); }
.pr-entgelte thead th { white-space: nowrap; }
.pr-entgelte caption { color: var(--bs-body-color); font-weight: 600; }
@media (max-width: 575.98px) { .pr-entgelte th, .pr-entgelte td { padding-left: .6rem; padding-right: .6rem; } }
/* Barrierefreiheit (Vorgabe 14.10.2026): Das Grau des Themes (#acaab1)
   erreicht auf Weiss nur 2,3:1 - auf den öffentlichen Preisrechner-Seiten
   ein dunkleres Grau mit mindestens 4,5:1 (WCAG AA). */
.pr-body { --bs-secondary-color: #66646f; --bs-secondary-color-rgb: 102, 100, 111; }
.pr-wichtig .badge { background: #fff; color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
/* Summe des Rechenbeispiels (Jonas 14.10.2026: „trotzdem den
   zusammengerechneten Preis"): gut sichtbar, aber nur im Rechenbeispiel,
   mit Fahrtenzahl und Vorbehalt im selben Kasten. */
.pr-beispiel-summe { border: 1px solid var(--bs-border-color); border-radius: .85rem; padding: 1rem 1.1rem; background: rgba(var(--bs-primary-rgb), .04); }
.pr-beispiel-betrag { font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--bs-body-color); }
.pr-entgelte tfoot th, .pr-entgelte tfoot td { border-top: 2px solid var(--bs-border-color); font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--bs-body-color); }

/* Hervorgehobene Tipps „So sparen Sie am meisten" (Jonas 05.10.2026). */
.pr-wichtig { background: rgba(var(--bs-primary-rgb), .06); border: 2px solid var(--bs-primary); border-radius: 1rem; padding: 1.1rem 1.25rem; }
.pr-wichtig h2 { font-size: 1.15rem; font-weight: 700; color: var(--bs-primary); margin: 0 0 .6rem; }
.pr-wichtig ol, .pr-wichtig ul { padding-left: 1.2rem; }
.pr-wichtig li { margin-bottom: .55rem; font-size: .9rem; line-height: 1.45; }
.pr-wichtig li:last-child { margin-bottom: 0; }
/* BKF-Planer: Modulwoche ab 2027 - „davon GC" und „zweiter Kurs nötig"
   unter der Teilnehmerzahl (Seminar\Domain\Modulbelegung). */
.badge.bkf-gc-hinweis { display: inline-block; margin-top: .25rem; white-space: normal; }

/* Schulungsplan v5 (06.10.2026): Auswahl + Knopf in der Themen-Dozenten-
   Tabelle und beim Tausch - der Knopf schrumpft nicht und bricht nicht um,
   die Auswahl nimmt den Rest (sonst stiess „Vorschau" bei 1024 px an). */
.splan-auswahl { min-width: 17rem; }
.splan-auswahl .btn { flex-shrink: 0; white-space: nowrap; }

/* Personal › Weiterbildungsübersicht (06.10.2026): Die Namensspalte bleibt
   beim seitlichen Wischen stehen - auf dem Telefon ist die Matrix breiter
   als der Bildschirm, und ohne Namen sind die Ampeln nichts wert. */
.wb-matrix > :not(caption) > * > :first-child { position: sticky; left: 0; z-index: 1; background: var(--bs-card-bg, var(--bs-body-bg)); }
.wb-matrix .badge { min-width: 4.5rem; }

/* Arbeitssicherheit (06.10.2026): QR-Codes der Unterweisung passen sich der
   Spalte an; die Teilnehmerauswahl scrollt statt die Seite zu verlängern. */
.as-qr svg { max-width: 160px; height: auto; }
.as-teilnehmerliste { max-height: 18rem; overflow-y: auto; }
/* Aufgaben und Fristen auf dem Telefon: Stand, Pflicht und Fälligkeit passen
   ohne seitliches Wischen - lange Wörter („Arbeitsschutzausschuss") werden
   getrennt, die Zellen rücken enger. */
@media (max-width: 575.98px) {
    .as-tabelle > :not(caption) > * > * { padding-left: .4rem; padding-right: .4rem; }
    .as-tabelle td:nth-child(2) { hyphens: auto; overflow-wrap: anywhere; }
}

/* AZAV › Audit-Vorbereitung (06.10.2026): „Termin eintragen" klappt in der
   Zeile auf, ohne Pfeil; das Formular bekommt eine Mindestbreite, damit das
   Datumsfeld auf dem Telefon nicht zusammenfällt. */
.audit-termin > summary { list-style: none; }
.audit-termin > summary::-webkit-details-marker { display: none; }
.audit-termin[open] > form { min-width: 15rem; max-width: 22rem; }

/* AZAV › Audit-Vorbereitung › Meldeliste (06.10.2026): die Tabelle mit 29
   Zeilen scrollt in ihrem Rahmen (table-responsive), nicht die Seite; die
   Eingabefelder behalten eine lesbare Breite. In der Checkliste darf der
   Text eines Punkts schrumpfen, damit „Nachweis hochladen" daneben passt. */
.meldeliste-tabelle input[type="number"] { width: 4.75rem; }
.meldeliste-tabelle input[inputmode="decimal"] { width: 6.5rem; }
.meldeliste-tabelle td:nth-child(5) input { min-width: 12rem; }
.meldeliste-tabelle .meldeliste-ziel { min-width: 14rem; }
.audit-punkt { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }

/* BKF- und Kurs-Planer › Übersicht (07.10.2026): Einladungsampel je Termin -
   grün alle erreicht, gelb teilweise/wartet, rot fällig und offen, grau
   noch nicht fällig. Der Text darunter bricht um, statt die Tabelle zu
   verbreitern; auf dem Telefon reicht der Punkt mit der Zahl. */
/* Go-live-Abnahme 07.10.2026 (F-022): `position: relative`, damit der
   `visually-hidden`-Text (position: absolute) in der Ampel bleibt - ohne
   Bezugsrahmen verbreiterte er die Seite auf 1.342/1.609 px (375/1280). */
.einladung-ampel { position: relative; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-weight: 600; }
.einladung-ampel-punkt { width: .75rem; height: .75rem; border-radius: 50%; flex-shrink: 0; background: var(--bs-secondary); }
.einladung-ampel-gruen .einladung-ampel-punkt { background: var(--bs-success); }
.einladung-ampel-gelb .einladung-ampel-punkt { background: var(--bs-warning); }
.einladung-ampel-rot .einladung-ampel-punkt { background: var(--bs-danger); }
.einladung-ampel-gruen { color: var(--bs-success); }
.einladung-ampel-rot { color: var(--bs-danger); }
.einladung-ampel-grau { color: var(--bs-secondary-color); font-weight: 400; }
.einladung-ampel-text { min-width: 9rem; max-width: 15rem; white-space: normal; line-height: 1.25; }
@media (max-width: 575.98px) {
    .einladung-ampel-text { display: none !important; }
}

/* Go-live-Abnahme 12.10.2026 (Schritt 13): Pflichtfelder app-weit markiert.
   Ein Label bekommt den roten Stern, wenn direkt danach ein Feld mit
   `required` steht (auch in einer input-group); bei .form-floating steht
   das Label hinter dem Feld. Labels, die ihren Stern schon als
   <span class="text-danger">*</span> tragen, bleiben unverändert -
   handgeschriebene „ *" vor `required`-Feldern sind dafür entfernt. Wer ein
   Pflichtfeld markieren will, setzt also nur `required`. */
.form-label:not(:has(.text-danger, .pflicht-stern)):has(+ :is(input, select, textarea)[required]:not([type="hidden"]))::after,
.form-label:not(:has(.text-danger, .pflicht-stern)):has(+ .input-group :is(input, select, textarea)[required])::after,
.form-floating > :is(input, select, textarea)[required] ~ label::after {
    content: " *";
    color: var(--bs-danger);
}

/* Postausgang › Detail (F-haus-admin-B-003): das eingebettete Mail-HTML
   (Signaturtabellen, feste Breiten) scrollt in seinem Rahmen, statt die
   Seite bei 375 px auf 567 px zu weiten. */
.mail-vorschau { max-width: 100%; overflow-x: auto; }
.mail-vorschau img { max-width: 100%; height: auto; }

/* ApexCharts (F-haus-bueroleitung-A-001): ein Diagramm wird nie breiter als
   seine Spalte, auch wenn Apex beim ersten Zeichnen eine größere Breite
   gemessen hat (Zahlungseingänge: Canvas 430 px bei 375 px Seite). */
.apexcharts-canvas,
.apexcharts-canvas > svg { max-width: 100%; }

/*
 * Theorieunterricht: Anwesenheit per QR-Code im Raum (Auftrag Jonas
 * 14.10.2026). Seite des Fahrschülers (`/da/...`) und Vollbild für
 * Beamer oder Fernseher (`/theorie-qr/...`).
 */
.anwesenheit-seite { background: #f4f5fa; }
.anwesenheit-schmal { max-width: 34rem; }
.anwesenheit-schritte { list-style: none; padding: 0; display: flex; gap: .5rem; }
.anwesenheit-schritte li { flex: 1; text-align: center; font-size: .8rem; padding: .5rem .25rem; border-radius: .5rem;
                           background: #eef0f4; color: #6d6b77; }
.anwesenheit-schritte li.aktiv { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-weight: 600; }
.anwesenheit-schritte li.erledigt { background: #e7f5ee; color: #1f8a5b; font-weight: 600; }
.anwesenheit-schritte li.erledigt::before { content: "✓ "; }

.anwesenheit-anzeige { background: #fff; margin: 0; min-height: 100vh; }
.anwesenheit-raum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4vw; align-items: center;
                    min-height: 100vh; padding: 4vh 5vw; }
.anwesenheit-logo { height: 6vh; min-height: 34px; margin-bottom: 4vh; }
.anwesenheit-kurs { color: #6d6b77; font-size: clamp(1rem, 1.6vw, 1.6rem); }
.anwesenheit-thema { font-size: clamp(1.6rem, 3vw, 3.2rem); margin: .5rem 0 2vh; color: #0b264e; }
.anwesenheit-phase { display: inline-block; background: var(--bs-primary); color: #fff; font-weight: 700;
                     font-size: clamp(1.2rem, 2.2vw, 2.4rem); padding: .4em .9em; border-radius: .6em; margin-bottom: 3vh; }
.anwesenheit-anleitung { font-size: clamp(.95rem, 1.4vw, 1.5rem); color: #2f2b3d; padding-left: 1.2em; }
.anwesenheit-anleitung li { margin-bottom: .4em; }
.anwesenheit-zahlen { display: flex; gap: 2vw; font-size: clamp(1rem, 1.6vw, 1.7rem); color: #0b264e; margin-top: 2vh; }
.anwesenheit-zahlen span { font-weight: 800; color: var(--bs-primary); }
.anwesenheit-namen { columns: 2; margin-top: 1rem; font-size: clamp(.85rem, 1.1vw, 1.2rem); }
.anwesenheit-rechts { text-align: center; }
.anwesenheit-qr svg { width: min(80vh, 42vw); height: auto; }
.anwesenheit-takt { color: #6d6b77; font-size: clamp(.9rem, 1.3vw, 1.4rem); margin-top: 1vh; }
@media (max-width: 767.98px) {
    .anwesenheit-raum { grid-template-columns: 1fr; padding: 16px; }
    .anwesenheit-qr svg { width: 90vw; }
}

/* Bildschirm im Unterrichtsraum unter der festen Adresse des Standorts
   (/raesfeld, /borken, /heiden, /weseke - Vorgabe Jonas 14.10.2026). */
.raum-anzeige { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
                background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, #fdecef 100%); color: #0b264e; }
.raum-kopf { display: flex; align-items: center; gap: 2vw; padding: 3vh 4vw 0; }
.raum-logo { height: 7vh; min-height: 36px; }
.raum-ort { font-size: clamp(1.2rem, 2.2vw, 2.4rem); font-weight: 600; color: #0068b4; letter-spacing: .02em; }
.raum-uhr { margin-left: auto; font-size: clamp(1.4rem, 3vw, 3.2rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.raum-inhalt { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 2vh 4vw; }
.raum-block { display: grid; grid-template-columns: minmax(0, 1.1fr) auto; gap: 4vw; align-items: center;
              background: #fff; border-radius: 2vh; padding: 3vh 3vw; box-shadow: 0 1vh 4vh rgba(11, 38, 78, .08); }
.raum-phase { display: inline-block; background: #e40039; color: #fff; font-weight: 700; border-radius: 99px;
              padding: .35em 1em; font-size: clamp(1.1rem, 2.4vw, 2.6rem); margin-bottom: 2vh; }
.raum-thema { font-size: clamp(1.6rem, 3.4vw, 3.8rem); line-height: 1.15; margin: 0 0 1.5vh; color: #0b264e; }
.raum-zeit { font-size: clamp(1rem, 1.8vw, 2rem); color: #5b6475; }
.raum-zahlen { font-size: clamp(1rem, 1.8vw, 2rem); margin-top: 2vh; }
.raum-zahlen strong { color: #e40039; }
.raum-qr { text-align: center; }
.raum-qr svg { width: min(58vh, 36vw); height: auto; display: block; }
.raum-block:nth-child(n+2) .raum-qr svg, .raum-inhalt:has(.raum-block + .raum-block) .raum-qr svg { width: min(34vh, 26vw); }
.raum-takt { color: #5b6475; font-size: clamp(.9rem, 1.4vw, 1.5rem); margin-top: 1vh; }
.raum-leer { text-align: center; }
.raum-leer-titel { font-size: clamp(2rem, 6vw, 6rem); font-weight: 800; color: #0b264e; }
.raum-leer-text { font-size: clamp(1.1rem, 2.4vw, 2.6rem); color: #5b6475; margin-top: 2vh; }
.raum-fuss { display: flex; justify-content: center; flex-wrap: wrap; gap: 1vh 4vw; padding: 2vh 4vw 3vh;
             background: #0b264e; color: #fff; font-size: clamp(.9rem, 1.6vw, 1.8rem); }
@media (max-width: 767.98px) {
    .raum-block { grid-template-columns: 1fr; }
    .raum-qr svg, .raum-inhalt:has(.raum-block + .raum-block) .raum-qr svg { width: 80vw; margin: 0 auto; }
}

/* Das „i“ neben jedem Recht (Personalakte ▸ Rechte, Rollen bearbeiten;
   Vorgabe Jonas 14.10.2026). */
.recht-info-knopf { width: 1.4rem; height: 1.4rem; padding: 0; vertical-align: -.15rem; margin-left: .15rem; }
.recht-info-knopf .icon-base { font-size: 1rem; }
.recht-info { font-size: .78rem; color: #4b4b5a; background: #f6f7fb; border-left: 3px solid var(--bs-primary);
              border-radius: .375rem; padding: .45rem .6rem; margin: .25rem 0 .5rem 1.5rem; max-width: 46rem; }
.recht-info-fakten { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: #7a7887; margin-top: .25rem; }
.recht-info-fakten code { font-size: .72rem; }

/* Aushang der Selbstlernphase (QR-Anwesenheit Schritt 3, 14.10.2026): fester QR-Code, groß genug für den Scan aus einem Meter. */
.selbstlernen-aushang-qr svg { width: 110mm; max-width: 100%; height: auto; }
@media print { .selbstlernen-aushang { background: #fff; } }

/*
 * /kursangebote im Look der neuen Website „Kurse und Termine“
 * (Vorgabe Jonas 15.10.2026: „Farben übernehmen von der Website“).
 * Werte von new.fahrschule-strothmann.de abgelesen: Navy #0B264E für
 * Überschriften und aktive Filter, Fließtext #363D57, Blau #005AA9 für
 * Kursart und Links, Rot (--bs-primary) für Knöpfe, Kartenrand #E4E9F1
 * mit 12 px Rundung, Filterknöpfe mit Rand #9AA5B8 und 8 px Rundung.
 * Nur unter `body.ka-web` (die öffentliche Kursseite und ihre Danke-Seite).
 */
body.ka-web {
  --ka-navy: #0b264e;
  --ka-text: #363d57;
  --ka-blau: #005aa9;
  --ka-rand: #e4e9f1;
  --ka-filterrand: #9aa5b8;
  --ka-hg: #f4f6fa;
  color: var(--ka-text);
  background: #fff;
}
body.ka-web h1, body.ka-web h2, body.ka-web h5, body.ka-web h6, body.ka-web .text-heading { color: var(--ka-navy); }
body.ka-web .ka-hero { background: var(--ka-hg); border-bottom: 0; }
body.ka-web .ka-hero h1 { font-weight: 500; }
body.ka-web .ka-hero .lead { color: var(--ka-text); }
body.ka-web .ka-nummer { background: var(--ka-navy); }
body.ka-web .ka-karte { border-color: var(--ka-rand); border-radius: 12px; box-shadow: none; }
body.ka-web .ka-link { color: var(--ka-blau); text-decoration: underline; }
/* Breiter als die übrige Seite, damit drei Karten nebeneinander passen (15.10.2026). */
body.ka-web .ka-seite { max-width: 92rem; }
.ka-auswahl-weg { flex: 0 0 auto; align-self: flex-start; border: 0; background: transparent; color: var(--ka-filterrand);
                  border-radius: 6px; padding: .1rem .25rem; line-height: 1; --bs-icon-size: 1.1rem; }
.ka-auswahl-weg:hover, .ka-auswahl-weg:focus-visible { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }

.ka-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.ka-filter-knopf { border: 1px solid var(--ka-filterrand); background: #fff; color: var(--ka-navy); border-radius: 8px;
                   padding: .5rem .9rem; font-weight: 600; font-size: .875rem; display: inline-flex; align-items: center;
                   gap: .4rem; --bs-icon-size: 1rem; }
.ka-filter-knopf .tabler-check { display: none; }
.ka-filter-knopf[aria-pressed="true"] { background: var(--ka-navy); border-color: var(--ka-navy); color: #fff; }
.ka-filter-knopf[aria-pressed="true"] .tabler-check { display: inline-block; }
.ka-filter-knopf:focus-visible { outline: 2px solid var(--ka-blau); outline-offset: 2px; }

.ka-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.ka-termin { position: relative; border: 1px solid var(--ka-rand); border-radius: 12px; background: #fff; }
.ka-termin[hidden] { display: none; }
.ka-termin > label { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.25rem; margin: 0; cursor: pointer; }
.ka-termin input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ka-termin .ka-art { color: var(--ka-blau); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ka-termin .ka-titel { color: var(--ka-navy); font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.ka-termin .ka-zeilen { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; --bs-icon-size: 1.05rem; }
.ka-termin .ka-zeilen i { color: var(--ka-filterrand); margin-right: .45rem; vertical-align: -.2em; }
.ka-termin .ka-preis { color: var(--ka-navy); font-weight: 700; }
.ka-termin .ka-marken { display: flex; flex-wrap: wrap; gap: .35rem; }
.ka-termin .ka-knopf { margin-top: auto; padding-top: .6rem; }
.ka-termin .ka-knopf > span { display: flex; justify-content: center; align-items: center; gap: .35rem; border-radius: 8px;
                              padding: .6rem 1rem; font-weight: 600; --bs-icon-size: 1rem; }
.ka-termin .ka-knopf-aus { background: var(--bs-primary); color: #fff; }
.ka-termin .ka-knopf-an { display: none !important; background: var(--ka-navy); color: #fff; }
.ka-termin:hover { border-color: var(--ka-filterrand); }
.ka-termin:has(input:checked) { border-color: var(--ka-navy); box-shadow: 0 0 0 1px var(--ka-navy) inset; }
.ka-termin:has(input:checked) .ka-knopf-aus { display: none; }
.ka-termin:has(input:checked) .ka-knopf-an { display: flex !important; }
.ka-termin:has(input:focus-visible) { outline: 2px solid var(--ka-blau); outline-offset: 2px; }
.ka-termin.ka-voll { background: #eef1f6; }
.ka-termin.ka-voll > label { padding-top: 2.75rem; }
.ka-termin.ka-voll .ka-titel, .ka-termin.ka-voll .ka-zeilen, .ka-termin.ka-voll .ka-preis { color: #8a94a8; }
/* Warteliste auffällig (Vorgabe Jonas 15.10.2026): Orange auf der grauen Karte. */
.ka-termin.ka-voll .ka-knopf-aus { background: #f59e0b; color: #fff; }
.ka-termin.ka-voll:hover .ka-knopf-aus { background: #d97f06; }
.ka-termin.ka-voll:has(input:checked) { border-color: #f59e0b; box-shadow: 0 0 0 1px #f59e0b inset; }
.ka-termin.ka-voll .ka-knopf-an { background: #b45309; }
.ka-warteliste-hinweis { display: inline-flex; align-items: center; gap: .35rem; background: #fef3c7; color: #92400e;
                         border: 1px solid #f59e0b; border-radius: 8px; padding: .3rem .6rem; font-size: .8rem; font-weight: 700;
                         --bs-icon-size: 1rem; }
.ka-warteliste-marke { display: inline-block; background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; border-radius: 6px;
                       padding: 0 .35rem; font-size: .72rem; font-weight: 700; }
.ka-auswahl .tabler-hourglass { color: #d97f06 !important; }
/* Oben rechts statt über den Angaben: Datum und Ort braucht, wer sich auf die Warteliste setzt. */
.ka-termin .ka-stempel { position: absolute; top: .9rem; right: .9rem; transform: rotate(-8deg);
                         border: 2.5px solid #b3261e; color: #b3261e; background: rgba(255, 255, 255, .85); border-radius: 6px;
                         padding: .1rem .55rem; font-weight: 800; font-size: .85rem; letter-spacing: .12em;
                         text-transform: uppercase; pointer-events: none; }

/* ────────────────────────────────────────────────────────────────────
   Personal neu ordnen (Designvorschlag 15.10.2026, Entscheidung Jonas):
   Reiterleiste mit roter Unterstreichung, Cockpit-Kacheln, Kürzel.
   ──────────────────────────────────────────────────────────────────── */
.personal-reiter.nav-tabs {
  border-bottom: 1px solid var(--bs-border-color);
  gap: .25rem;
  box-shadow: none;
  background: transparent;
}
.personal-reiter.nav-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-weight: 500;
  padding: .65rem 1rem;
  box-shadow: none;
}
.personal-reiter.nav-tabs .nav-link:hover {
  color: var(--bs-body-color);
}
.personal-reiter.nav-tabs .nav-link.active {
  color: var(--bs-heading-color, var(--bs-body-color));
  font-weight: 700;
  border-bottom-color: var(--bs-primary);
  background: transparent;
}
.personal-reiter .badge {
  font-size: .7rem;
}
.cockpit-kachel .card-body {
  padding: 1rem 1.1rem;
}
.cockpit-kachel .cockpit-l {
  font-size: .8rem;
  color: var(--bs-secondary-color);
}
.cockpit-kachel .cockpit-z {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bs-heading-color, var(--bs-body-color));
}
.cockpit-kachel .cockpit-z span {
  font-size: .95rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}
.cockpit-kachel .cockpit-t {
  font-size: .78rem;
  margin-top: .15rem;
  color: var(--bs-body-color);
}
.cockpit-kachel.cockpit-warn {
  background: #fff4e0;
  border: 1px solid #f2c48a;
}
.cockpit-kachel.cockpit-alarm {
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
}
a:hover > .cockpit-kachel {
  box-shadow: 0 .25rem 1rem rgba(21, 36, 71, .12);
}
.cockpit-kuerzel {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bs-secondary-bg, #eef0f4);
  color: var(--bs-body-color);
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.6rem;
  text-align: center;
  margin-right: .5rem;
}
.cockpit-achtung td {
  padding-top: .55rem;
  padding-bottom: .55rem;
}
[data-bs-theme="dark"] .cockpit-kachel.cockpit-warn {
  background: rgba(242, 196, 138, .12);
}

/* Urlaubsplaner (Personal neu ordnen, 15.10.2026): Monat als Zeitleiste. */
.urlaubsplaner {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
  font-size: .7rem;
}
.urlaubsplaner th,
.urlaubsplaner td {
  height: 1.55rem;
  min-width: 1.4rem;
  text-align: center;
  border-bottom: 1px solid var(--bs-border-color-translucent, #f0f1f4);
  border-right: 1px solid var(--bs-border-color-translucent, #f6f7f9);
  padding: 0;
}
.urlaubsplaner th {
  color: var(--bs-secondary-color);
  font-weight: 600;
  line-height: 1.1;
  height: 2.2rem;
}
.urlaubsplaner .urlaubsplaner__name {
  width: 11rem;
  text-align: left;
  padding: 0 .6rem;
  font-size: .8rem;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--bs-card-bg, #fff);
  z-index: 1;
}
.urlaubsplaner .up-we { background-color: var(--bs-tertiary-bg, #f3f4f7); }
.urlaubsplaner .up-ft, .up-ft { background-color: #efe9fb; }
.urlaubsplaner .up-heute { box-shadow: inset 2px 0 0 var(--bs-primary); }
.urlaubsplaner .up-beantragt {
  background: repeating-linear-gradient(45deg, #cfe9d8, #cfe9d8 3px, transparent 3px, transparent 6px);
}
.urlaubsplaner .urlaubsplaner__summe td {
  color: var(--bs-secondary-color);
  font-weight: 700;
}
.urlaubsplaner .up-eng, .up-eng {
  background-color: #fff4e0;
  color: #b26b00 !important;
}
#personal-reiter {
  scrollbar-width: none;
}
#personal-reiter::-webkit-scrollbar {
  display: none;
}

/* „Meine Zeit“ auf dem Handy: Leiste unten (Personal neu ordnen, 15.10.2026). */
.meine-zeit-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bs-body-bg, #fff);
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -.25rem 1rem rgba(21, 36, 71, .08);
}
.meine-zeit-leiste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .45rem 0 .55rem;
  font-size: .72rem;
  color: var(--bs-secondary-color);
}
.meine-zeit-leiste a:active,
.meine-zeit-leiste a:hover {
  color: var(--bs-primary);
}
@media (max-width: 991.98px) {
  body:has(.meine-zeit-leiste) .content-wrapper {
    padding-bottom: 4.5rem;
  }
}

/* Stundenzettel unterschreiben (Entscheidung Jonas 16.10.2026). */
.stundenzettel-blatt iframe {
  width: 100%;
  aspect-ratio: 210 / 297;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background: #fff;
}
.stundenzettel-unterschrift canvas {
  display: block;
  width: 100%;
  height: 170px;
  border: 1px dashed var(--bs-border-color);
  border-radius: .5rem;
  background: #fff;
  touch-action: none;
}

/* ────────────────────────────────────────────────────────────────────
   Führerschein-Anfrage /anfrage (Entscheidung Jonas 16.10.2026): Schritte
   wie die Website-Anfrage, Farben wie /kursangebote (`body.ka-web`).
   Ohne Skript stehen alle Schritte untereinander; mit Skript (`.anf-js`)
   immer nur einer.
   ──────────────────────────────────────────────────────────────────── */
body.anf-web { background: #fff; }
.anf-seite { max-width: 48rem; }
.anf-kopf { background: #fff; border-bottom: 1px solid var(--ka-rand, var(--bs-border-color)); }
.anf-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -.01em; line-height: 1.25; }
.anf-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.anf-fortschritt { margin-bottom: 1.5rem; color: var(--ka-text); }
.anf-balken { height: 6px; border-radius: 3px; background: var(--ka-rand, #e4e9f1); overflow: hidden; }
.anf-balken > span { display: block; height: 100%; width: 20%; background: var(--ka-navy, #0b264e); transition: width .25s ease; }
.anf-balken > span.anf-voll { width: 100%; }

.anf-schritt { margin-bottom: 2.5rem; }
.anf-js .anf-schritt { margin-bottom: 1.5rem; }
.anf-frage { font-size: 1.35rem; font-weight: 600; line-height: 1.3; margin: 0 0 .35rem; color: var(--ka-navy); }
.anf-frage:focus { outline: none; }
.anf-hinweis { color: var(--ka-text); font-size: .9rem; margin-bottom: 1rem; }

/* Schritt 1: Kacheln */
.anf-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; margin-top: 1rem; }
.anf-kachel { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
              padding: 1.1rem .75rem; border: 1px solid var(--ka-rand); border-radius: 12px; background: #fff; cursor: pointer;
              margin: 0; --bs-icon-size: 2rem; }
.anf-kachel i { color: var(--ka-blau); }
.anf-kachel-titel { font-weight: 600; color: var(--ka-navy); }
.anf-kachel-text { font-size: .8rem; color: var(--ka-text); line-height: 1.3; }
.anf-kachel input, .anf-wahl input[type="radio"], .anf-wahl input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anf-kachel:hover, .anf-wahl:hover { border-color: var(--ka-filterrand); }
.anf-kachel:has(input:checked), .anf-wahl:has(input:checked) { border-color: var(--ka-navy); box-shadow: 0 0 0 1px var(--ka-navy) inset; }
.anf-kachel:has(input:focus-visible), .anf-wahl:has(input:focus-visible) { outline: 2px solid var(--ka-blau); outline-offset: 2px; }

/* Schritte 2, 3 und Danke: Liste mit Häkchen bzw. Punkt */
.anf-gruppe { margin-bottom: 1.25rem; }
.anf-gruppe-titel { font-size: 1rem; font-weight: 600; color: var(--ka-navy); margin: 0 0 .5rem; }
.anf-js .anf-gruppe-titel { display: none; }
.anf-liste { display: grid; gap: .6rem; }
.anf-wahl { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: .9rem 1rem; margin: 0;
            border: 1px solid var(--ka-rand); border-radius: 12px; background: #fff; cursor: pointer; }
.anf-wahl::before { content: ""; flex: 0 0 1.25rem; height: 1.25rem; margin-top: .1rem; border: 2px solid var(--ka-filterrand);
                    border-radius: 5px; background: #fff center / .8rem no-repeat; }
.anf-wahl-rund::before { border-radius: 50%; }
.anf-wahl:has(input:checked)::before { border-color: var(--ka-navy); background-color: var(--ka-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E"); }
.anf-wahl > span { display: flex; flex-direction: column; gap: .1rem; }
.anf-wahl-titel { font-weight: 600; color: var(--ka-navy); }
.anf-wahl-text { font-size: .875rem; color: var(--ka-text); --bs-icon-size: .95rem; }
.anf-punkt { cursor: default; --bs-icon-size: 1.4rem; }
.anf-punkt::before { display: none; }
.anf-punkt > i { color: var(--ka-blau); margin-top: .1rem; }
.anf-punkt:hover { border-color: var(--ka-rand); }

/* Weiter / Zurück */
.anf-knoepfe { display: flex; justify-content: space-between; gap: .75rem; }
.anf-knoepfe [data-anf-weiter] { margin-left: auto; }
.anf-absenden { width: 100%; }
@media (min-width: 576px) { .anf-absenden { width: auto; } }

/* Danke */
.anf-danke { text-align: center; padding: 1.5rem 0 .5rem; }
.anf-danke h1 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.3; }
.anf-danke-symbol { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; margin-bottom: 1rem;
                    background: rgba(var(--bs-success-rgb, 40, 199, 111), .12); color: var(--bs-success, #28c76f); --bs-icon-size: 2.4rem; }
/* Post ▸ Führerschein-Anfragen (Haus) */
.anf-spalte-nachricht { min-width: 12rem; }
.anf-bearbeiten { min-width: 15rem; }

/* ────────────────────────────────────────────────────────────────────
   Chat / Team-Chat (Entscheidungen Jonas 16. und 17.10.2026,
   app/Modules/Teamchat). Seite „Chat“ wie Entwurf A (Liste | Verlauf |
   Im Chat + Dateien), Chat-Fenster wie Entwurf C (Knopf unten rechts,
   Fenster am rechten Rand, nur ≥ 992 px). Weiße Spalten mit Rand #e8e6ee
   auf #f6f5f8, eigene Nachrichten rot (--bs-primary), Avatare mit
   Initialen (Gruppen als abgerundete Quadrate), Online-Punkt grün.
   ──────────────────────────────────────────────────────────────────── */
.tc-symbol-gross { --bs-icon-size: 2rem; }
.tc-kopf { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tc-kopf-titel { flex: 1 1 8rem; min-width: 0; }
.tc-kopf-titel h4, .tc-kopf-titel h5 { overflow-wrap: anywhere; }
.tc-kopf-knoepfe { display: flex; gap: .5rem; align-items: center; }

.tc-punkt { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--bs-secondary-color, #a8aaae);
            border: 2px solid #fff; flex: 0 0 auto; }
.tc-punkt.tc-online { background: var(--bs-success, #28c76f); }
.tc-punkt-inline { margin-right: .35rem; vertical-align: middle; border-width: 0; }

/* Avatare: Initialen, feste Farbe je Person bzw. Gruppe (Ansicht::farbe) */
.tc-avatar { position: relative; display: inline-grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem;
             border-radius: 50%; font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.tc-avatar-gruppe { border-radius: .75rem; }
.tc-avatar-klein { flex-basis: 2rem; width: 2rem; height: 2rem; font-size: .6875rem; }
.tc-avatar .tc-punkt { position: absolute; right: -2px; bottom: -2px; }
.tc-farbe-0 { background: #ffd9c2; color: #8a3b00; }
.tc-farbe-1 { background: #dfe7ff; color: #23408e; }
.tc-farbe-2 { background: #e3f4ea; color: #146c3a; }
.tc-farbe-3 { background: #f1ecff; color: #5b3cc4; }
.tc-farbe-4 { background: #fce6eb; color: #a3052a; }
.tc-farbe-5 { background: #e2f3f6; color: #0b5f6e; }

/* Seite: drei Spalten */
.tc-app { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); height: calc(100dvh - 12.5rem); min-height: 30rem;
          border: 1px solid #e8e6ee; border-radius: .5rem; overflow: hidden; background: #fff; }
.tc-spalte { min-width: 0; min-height: 0; }
.tc-spalte-liste { display: flex; flex-direction: column; border-right: 1px solid #e8e6ee; background: #fff; }
.tc-spalte-mitte { display: flex; flex-direction: column; background: #f6f5f8; }
.tc-spalte-info { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 300px; display: none; flex-direction: column;
                  padding: 1.25rem; overflow-y: auto; background: #fff; border-left: 1px solid #e8e6ee; box-shadow: -.5rem 0 1.5rem rgba(47, 43, 61, .12); }
.tc-info-offen .tc-spalte-info { display: flex; }
.tc-nur-schmal { display: none; }
@media (min-width: 1400px) {
    .tc-app-mit-info { grid-template-columns: 300px minmax(0, 1fr) 280px; }
    .tc-app-mit-info .tc-spalte-info { position: static; display: flex; width: auto; box-shadow: none; }
    .tc-info-knopf { display: none; }
}

/* Liste */
.tc-liste-kopf { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.25rem .5rem; }
.tc-suche { display: flex; align-items: center; gap: .5rem; height: 2.5rem; margin: 0; padding: 0 .75rem; border: 1px solid #dbdade;
            border-radius: .5rem; color: var(--bs-secondary-color); }
.tc-suche:focus-within { border-color: var(--bs-primary); }
.tc-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bs-body-color); font: inherit; }
.tc-liste-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: .5rem; }
.tc-liste-fuss { border-top: 1px solid #e8e6ee; padding: .75rem 1.25rem; }
.tc-abschnitt { margin: 0; padding: 1rem 1.25rem .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
                color: var(--bs-secondary-color); }
.tc-abschnitt-leer { margin: 0; padding: .25rem 1.25rem .75rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.tc-eintrag { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.25rem; color: var(--bs-body-color); text-decoration: none; }
.tc-eintrag[hidden] { display: none; }
.tc-eintrag:hover, .tc-eintrag:focus-visible { background: #f6f5f8; color: var(--bs-body-color); }
.tc-eintrag.tc-aktiv { background: rgba(var(--bs-primary-rgb), .08); }
.tc-eintrag-mitte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.tc-eintrag-zeile { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tc-eintrag-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--bs-heading-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-eintrag-vorschau { flex: 1 1 auto; min-width: 0; font-size: .8125rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-ungelesen .tc-eintrag-vorschau { color: var(--bs-heading-color); font-weight: 500; }
.tc-stumm { color: var(--bs-secondary-color); --bs-icon-size: .9rem; }
/* Anpinnen (17.10.2026): Knöpfe am Eintrag beim Zeigen/Fokus, auf Touch-Geräten immer */
.tc-eintrag-box { position: relative; }
.tc-eintrag-box[hidden] { display: none; }
.tc-eintrag-box:hover > .tc-eintrag { background: #f6f5f8; }
.tc-eintrag-box:hover > .tc-eintrag.tc-aktiv { background: rgba(var(--bs-primary-rgb), .08); }
.tc-pin { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); display: flex; gap: .125rem; padding: .125rem;
          border-radius: .5rem; background: #fff; box-shadow: 0 .125rem .5rem rgba(47, 43, 61, .16); opacity: 0; pointer-events: none; }
.tc-eintrag-box:hover > .tc-pin, .tc-pin:focus-within { opacity: 1; pointer-events: auto; }
.tc-pin form { margin: 0; }
.tc-pin-knopf { width: 1.75rem; height: 1.75rem; --bs-icon-size: 1rem; }
@media (hover: none) {
    .tc-eintrag-box { display: flex; align-items: center; }
    .tc-eintrag-box > .tc-eintrag { flex: 1 1 auto; min-width: 0; padding-right: .25rem; }
    .tc-pin { position: static; transform: none; margin-right: .75rem; background: transparent; box-shadow: none; opacity: 1; pointer-events: auto; }
}
.tc-zeit { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.tc-auswahl { max-height: 16rem; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .5rem .75rem; background: #fff; }
.tc-auswahl .form-check { margin-bottom: .35rem; }

/* Mitte: Kopf, leerer Zustand, Formulare */
.tc-mitte-kopf { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; min-height: 4.25rem; padding: .625rem 1.25rem;
                 background: #fff; border-bottom: 1px solid #e8e6ee; }
.tc-mitte-leer { margin: auto; max-width: 28rem; padding: 2rem 1.5rem; text-align: center; }
.tc-mitte-leer-symbol { display: inline-grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: 1rem; border-radius: 50%;
                        background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); --bs-icon-size: 2rem; }
.tc-mitte-formular { width: 100%; max-width: 36rem; padding: 1.5rem; overflow-y: auto; }

/* Verlauf */
.tc-verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem 1.5rem;
              background: #f6f5f8; }
.tc-zeile { display: flex; align-items: flex-end; gap: .625rem; max-width: min(100%, 44rem); }
.tc-zeile.tc-eigen { align-self: flex-end; justify-content: flex-end; }
.tc-zeile-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 0; }
.tc-eigen .tc-zeile-inhalt { align-items: flex-end; }
.tc-blase { max-width: 100%; padding: .625rem .875rem; border: 1px solid #e8e6ee; border-radius: 14px 14px 14px 4px; background: #fff;
            line-height: 1.5; overflow-wrap: anywhere; }
.tc-eigen .tc-blase { border-color: var(--bs-primary); border-radius: 14px 14px 4px 14px; background: var(--bs-primary); color: #fff; }
.tc-absender { font-size: .75rem; font-weight: 600; color: var(--bs-heading-color); margin-bottom: .15rem; }
.tc-text { white-space: normal; }
.tc-fuss { display: flex; align-items: center; gap: .35rem; padding: 0 .25rem; }
.tc-lese { display: inline-flex; align-items: center; gap: .2rem; font-size: .75rem; color: var(--bs-secondary-color); --bs-icon-size: .95rem; }
.tc-lese-voll { color: var(--bs-info, #00bad1); }
.tc-system { align-self: center; max-width: 90%; padding: .25rem .75rem; border-radius: 10px; background: #ecebf0; text-align: center;
             font-size: .75rem; color: var(--bs-secondary-color); }
.tc-neu { display: flex; align-items: center; gap: .5rem; color: var(--bs-primary); font-size: .75rem; font-weight: 600; }
.tc-neu::before, .tc-neu::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .4; }
.tc-anhang { display: flex; align-items: center; gap: .6rem; width: 15rem; max-width: 100%; margin-top: .35rem; padding: .5rem .65rem;
             border: 1px solid #e8e6ee; border-radius: .6rem; background: #fff; color: var(--bs-heading-color); font-size: .8125rem;
             text-decoration: none; --bs-icon-size: 1.35rem; }
.tc-anhang .icon-base { color: var(--bs-primary); }
.tc-anhang-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tc-anhang-groesse { color: var(--bs-secondary-color); font-size: .75rem; white-space: nowrap; margin-left: auto; }
.tc-bild { display: block; margin-top: .35rem; }
.tc-bild img { display: block; max-width: 100%; max-height: 16rem; border-radius: .5rem; }
/* Antworten (Jonas 22.10.2026, „wie bei WhatsApp und Teams“): Zitat oben in der Blase, Pfeil im Fuß,
   Leiste über dem Eingabefeld, kurzes Aufleuchten nach dem Sprung, Wischen nach rechts am Handy. */
.tc-zitat { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 9rem; margin: .1rem 0 .4rem; padding: .3rem .6rem;
            border: 0; border-left: 3px solid var(--bs-primary); border-radius: .4rem; background: rgba(47, 43, 61, .06);
            color: inherit; font: inherit; font-size: .8125rem; line-height: 1.35; text-align: left; cursor: pointer; }
.tc-zitat:hover, .tc-zitat:focus-visible { background: rgba(47, 43, 61, .1); }
.tc-eigen .tc-zitat { border-left-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .18); }
.tc-eigen .tc-zitat:hover, .tc-eigen .tc-zitat:focus-visible { background: rgba(255, 255, 255, .26); }
.tc-zitat-name { font-weight: 600; color: var(--bs-primary); }
.tc-eigen .tc-zitat-name { color: #fff; }
.tc-zitat-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .85; }
.tc-zitat-fehlt { cursor: default; font-style: italic; }
.tc-antworten { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .25rem; border: 0; border-radius: .3rem; background: none;
                color: var(--bs-secondary-color); font-size: .75rem; --bs-icon-size: .95rem; opacity: 0; transition: opacity .15s; }
.tc-zeile:hover .tc-antworten, .tc-antworten:focus-visible { opacity: 1; }
.tc-antworten:hover { color: var(--bs-primary); }
@media (hover: none) {
  .tc-antworten { opacity: .7; }
  .tc-antworten-text { display: none; }
}
.tc-zeile.tc-markiert .tc-blase { animation: tc-aufleuchten 2s ease-out; }
@keyframes tc-aufleuchten { 0%, 40% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .35); } 100% { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0); } }
.tc-zeile.tc-wischt { transition: none; }
.tc-zeile { touch-action: pan-y pinch-zoom; transition: transform .2s ease-out; }
.tc-hinweis-kurz { align-self: center; padding: .25rem .75rem; border-radius: 10px; background: #ecebf0; font-size: .75rem; color: var(--bs-secondary-color); }
.tc-antwortleiste { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; padding: .4rem .5rem .4rem .75rem;
                    border-left: 3px solid var(--bs-primary); border-radius: .5rem; background: var(--bs-paper-bg, #fff);
                    color: var(--bs-primary); --bs-icon-size: 1.1rem; }
.tc-antwortleiste[hidden] { display: none; }
.tc-antwortleiste-inhalt { flex: 1 1 auto; min-width: 0; color: var(--bs-body-color); font-size: .8125rem; line-height: 1.35; }
.tc-antwortleiste-name { font-weight: 600; color: var(--bs-primary); }
.tc-antwortleiste-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-secondary-color); }

/* Eingabe */
.tc-eingabe { flex: 0 0 auto; padding: .75rem 1.5rem 1rem; background: #f6f5f8; }
.tc-eingabe-feld { display: flex; align-items: flex-end; gap: .5rem; padding: .375rem .375rem .375rem .875rem; border: 1px solid #dbdade;
                   border-radius: .75rem; background: #fff; }
.tc-eingabe-feld:focus-within { border-color: var(--bs-primary); }
.tc-eingabe-feld textarea { flex: 1 1 auto; min-width: 0; min-height: 2.375rem; max-height: 11.25rem; padding: .45rem 0; border: 0; outline: 0;
                            resize: none; background: transparent; color: var(--bs-body-color); font: inherit; line-height: 1.5; }
/* Emoji-Auswahl (Vorgabe Jonas 19.10.2026): Knopf im Eingabefeld, Fläche darüber */
.tc-eingabe-feld { position: relative; }
.tc-emoji { align-self: flex-end; }
.tc-emoji-panel { position: absolute; left: 0; bottom: calc(100% + .5rem); z-index: 5; width: min(21.5rem, 100%); max-height: 17rem;
                  display: flex; flex-direction: column; border: 1px solid var(--bs-border-color); border-radius: .75rem;
                  background: var(--bs-paper-bg, var(--bs-body-bg)); box-shadow: 0 .5rem 1.5rem rgba(46, 38, 61, .18); overflow: hidden; }
.tc-emoji-panel[hidden] { display: none; }
.tc-emoji-reiter { display: flex; flex: 0 0 auto; gap: .125rem; padding: .375rem; border-bottom: 1px solid var(--bs-border-color); }
.tc-emoji-reiter-knopf { flex: 1 1 0; min-width: 0; min-height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent;
                         font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--bs-body-color); }
.tc-emoji-reiter-knopf[hidden] { display: none; }
.tc-emoji-reiter-knopf:hover, .tc-emoji-reiter-knopf:focus-visible { background: var(--bs-gray-100, rgba(115, 103, 240, .08)); outline: 0; }
.tc-emoji-reiter-knopf[aria-pressed="true"] { background: rgba(var(--bs-primary-rgb), .14); }
.tc-emoji-gitter, .tc-emoji-zuletzt { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .125rem; padding: .5rem; overflow-y: auto;
                                      overscroll-behavior: contain; }
.tc-emoji-gitter[hidden], .tc-emoji-zuletzt[hidden] { display: none; }
.tc-emoji-zeichen { min-height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; font-size: 1.4rem; line-height: 1;
                    cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; }
.tc-emoji-zeichen:hover, .tc-emoji-zeichen:focus-visible { background: rgba(var(--bs-primary-rgb), .12); outline: 0; }
.tc-emoji-zeichen:focus-visible, .tc-emoji-reiter-knopf:focus-visible, .tc-emoji-knopf:focus-visible { box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .45); }
html[data-bs-theme="dark"] .tc-emoji-panel { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5); }
.tc-dateiname { margin-top: .35rem; padding: 0 .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rechte Spalte: Im Chat, Dateien */
.tc-mitglieder li { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.tc-mitglied-text { min-width: 0; font-size: .8125rem; overflow-wrap: anywhere; }
.tc-mitglieder .tc-avatar .tc-punkt { width: .6rem; height: .6rem; }
.tc-dateien li a { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; color: var(--bs-heading-color); font-size: .8125rem;
                   text-decoration: none; }
.tc-dateien li a:hover .tc-anhang-name { text-decoration: underline; }
.tc-dateien .tc-anhang-name { flex: 1 1 auto; font-weight: 500; }
.tc-dateien .icon-base { color: var(--bs-primary); }

/* Handy: nur Ansicht A - Liste ODER Verlauf */
@media (max-width: 991.98px) {
    .tc-app { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 10rem); min-height: 24rem; }
    .tc-app-start { height: auto; min-height: 0; }
    .tc-app-start .tc-spalte-mitte { display: none; }
    .tc-app-mitte .tc-spalte-liste { display: none; }
    .tc-nur-schmal { display: inline-flex; }
    .tc-spalte-info { width: min(300px, 100%); }
    .tc-mitte-kopf { padding: .5rem .75rem; gap: .5rem; }
    .tc-verlauf { padding: 1rem .75rem; }
    .tc-eingabe { padding: .5rem .75rem .75rem; }
    .tc-zeile { max-width: 100%; }
    .tc-zeile-inhalt { max-width: calc(100% - 2.6rem); }
    .tc-eigen .tc-zeile-inhalt { max-width: 88%; }
}

/* Chat-Fenster: eigene, schlanke Seite im Rahmen (/teamchat/fenster…) */
.tc-fensteransicht { display: flex; flex-direction: column; height: 100vh; height: 100dvh; margin: 0; overflow: hidden; background: #fff; }
.tc-fensteransicht .tc-mitte-kopf { padding: .5rem 1rem; min-height: 3.75rem; }
.tc-fensteransicht .tc-verlauf { padding: 1rem; }
.tc-fensteransicht .tc-eingabe { padding: .5rem 1rem .75rem; }
.tc-fensteransicht .tc-eintrag { padding: .625rem 1rem; }
.tc-fensteransicht .tc-abschnitt-leer { padding: 1rem; }
.tc-fensteransicht .tc-zeile-inhalt { max-width: calc(100% - 2.6rem); }
.tc-fensteransicht .tc-eigen .tc-zeile-inhalt { max-width: 88%; }
.tc-fenster-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .25rem 0; }
.tc-fenster-fuss { display: flex; gap: 1rem; padding: .625rem 1rem; border-top: 1px solid #e8e6ee; font-size: .8125rem; }

/* Knopf und Fenster am rechten Rand (Seiten des Hauses außer Chat) */
.tc-dock-knopf { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1080; display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
                 border: 0; border-radius: 50%; background: var(--bs-primary); color: #fff; box-shadow: 0 .5rem 1.5rem rgba(47, 43, 61, .28);
                 --bs-icon-size: 1.6rem; }
.tc-dock-knopf:hover { filter: brightness(.92); }
.tc-dock-knopf:focus-visible { outline: 3px solid rgba(var(--bs-primary-rgb), .4); outline-offset: 3px; }
.tc-dock-zahl { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px;
                background: #fff; color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary); font-size: .75rem; font-weight: 700; line-height: 1.4rem; }
.tc-dock-offen .tc-dock-knopf { display: none; }
.tc-dock-fenster { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1085; display: flex; flex-direction: column; width: 400px; max-width: 100vw;
                   background: #fff; border-left: 1px solid #e8e6ee; box-shadow: -.5rem 0 2rem rgba(47, 43, 61, .16); }
.tc-dock-fenster[hidden] { display: none; }
.tc-dock-kopf { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid #e8e6ee; }
.tc-dock-kopf strong { font-size: 1rem; color: var(--bs-heading-color); }
.tc-dock-rahmen { flex: 1 1 auto; width: 100%; border: 0; }
@media (max-width: 991.98px) {
    .tc-dock { display: none !important; }
}

/* Post ▸ Schulungsanmeldungen je Person (18.10.2026): drei Fälle, Angaben zum Kopieren */
.anmeldung-person { padding-top: 1rem; padding-bottom: 1rem; }
.anmeldung-fall { display: inline-block; font-size: .8125rem; font-weight: 600; white-space: normal; text-align: left; line-height: 1.35; }
.anmeldung-angaben-liste { margin: .5rem 0 0; padding: 0; list-style: none; }
.anmeldung-angaben-liste > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; padding: .2rem 0; border-bottom: 1px dashed #ebe9f1; }
.anmeldung-angaben-liste > li:last-child { border-bottom: 0; }
.anmeldung-angaben-liste .kopier-label { flex: 0 0 12rem; max-width: 100%; color: var(--bs-secondary-color); font-size: .8125rem; }
.anmeldung-angaben-liste .kopier-wert { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.kopier-knopf { flex: 0 0 auto; padding: .1rem .4rem; line-height: 1; --bs-icon-size: .95rem; }
.kopier-knopf.kopiert { color: var(--bs-success); border-color: var(--bs-success); }
.anmeldung-kopie { max-height: 16rem; overflow: auto; white-space: pre-wrap; -webkit-user-select: all; user-select: all; font-size: .8125rem; background: #f8f7fa; border-radius: .375rem; padding: .5rem .75rem; margin: .5rem 0 0; }
/* Nachweise aus der Website-Anmeldung (18.10.2026) */
.anmeldung-nachweise { padding: .5rem .75rem; border: 1px solid #ebe9f1; border-radius: .375rem; }
.anmeldung-nachweis + .anmeldung-nachweis { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #ebe9f1; }
.anmeldung-termine { margin: .75rem 0 0; padding: 0; list-style: none; }
.anmeldung-termine > li { padding: .5rem 0; border-top: 1px solid #ebe9f1; }
@media (max-width: 575.98px) {
    .anmeldung-angaben-liste .kopier-label { flex-basis: 100%; }
    .anmeldung-termine .btn { flex: 1 1 auto; }
}

/* „gebucht“ in der Fahrer-Matrix und auf /kursangebote (Befund Jonas 18.10.2026,
   Live-Bild): Vuexy füllt jedes .badge ohne eigene Farbe mit --bs-primary (rot),
   „border-success text-success“ ergab rote Fläche mit grüner Schrift. Gewollt
   ist ein helles Feld mit grünem Rahmen - Termin steht in Vogel, zählt aber
   noch nicht. */
.badge.badge-gebucht {
  background-color: var(--bs-card-bg, #fff);
  color: #1b7a43;
  border: 1.5px solid #28a95c;
  font-weight: 600;
}
html[data-bs-theme="dark"] .badge.badge-gebucht {
  color: #7fd6a3;
  border-color: #3fbf73;
}

/* ─── Handy: feste Leiste unten (Entwurf D, Entscheidung Jonas 18.10.2026) ───
   Nur schmal (< 992 px), Haus und fl.; Portal/Views/_handyleiste.php.
   Aussehen seit 18.10.2026 abends wie die schwebende Leiste von WhatsApp
   (Vorlage Jonas): abgerundet, mit Abstand zum Rand, durchscheinend mit
   Unschärfe, aktiver Knopf grau hinterlegt, Zahl als Blase am Symbol.
   Unter dem aufgeklappten Menü (z-index), über dem Inhalt. */
.handyleiste { display: none; }
@media (max-width: 991.98px) {
  .handyleiste {
    --hl-hoehe: 4rem;
    --hl-abstand: .625rem;
    position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--hl-abstand) + env(safe-area-inset-bottom, 0px)); z-index: 1075;
    display: flex; align-items: stretch; justify-content: space-between; gap: .125rem;
    height: var(--hl-hoehe); padding: .3rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(47, 43, 61, .08);
    box-shadow: 0 10px 30px rgba(47, 43, 61, .16), 0 1px 3px rgba(47, 43, 61, .08);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .handyleiste { background: rgba(255, 255, 255, .97); }
  }
  .handyleiste-knopf {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .25rem 0; border: 0; border-radius: 1.7rem; background: none;
    color: #2f2b3d; font-size: .6875rem; font-weight: 500; line-height: 1.1; text-decoration: none;
    transition: background-color .15s ease;
  }
  .handyleiste-knopf:active { background: rgba(47, 43, 61, .06); }
  .handyleiste-knopf.aktiv { background: rgba(47, 43, 61, .09); color: #1d1b24; font-weight: 700; }
  .handyleiste-knopf.aktiv .ti { color: var(--bs-primary); }
  .handyleiste-knopf:focus-visible { outline: 2px solid #2f2b3d; outline-offset: -2px; }
  .handyleiste-symbol { position: relative; display: inline-flex; }
  .handyleiste-symbol .ti { font-size: 1.5rem; }
  .handyleiste-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .handyleiste-zahl {
    position: absolute; top: -.4rem; left: .95rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px;
    background: var(--bs-primary); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1.25rem; text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }
  .handyleiste-zahl[hidden] { display: none; }
  html[data-bs-theme="dark"] .handyleiste { background: rgba(37, 41, 60, .8); border-color: rgba(255, 255, 255, .08); }
  html[data-bs-theme="dark"] .handyleiste-knopf { color: #e1def5; }
  html[data-bs-theme="dark"] .handyleiste-knopf.aktiv { background: rgba(255, 255, 255, .12); color: #fff; }
  html[data-bs-theme="dark"] .handyleiste-zahl { box-shadow: 0 0 0 2px #25293c; }
  /* Platz für die Leiste, damit nichts dahinter verschwindet. */
  body:has(.handyleiste) .layout-page { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  body:has(.handyleiste) .tc-app { height: calc(100dvh - 15.5rem); }
  /* „Meine Zeit“ hat eine eigene Leiste (Heute, Woche, Urlaub, Krank): sie sitzt darüber. */
  body:has(.handyleiste) .meine-zeit-leiste { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
  body:has(.handyleiste):has(.meine-zeit-leiste) .layout-page { padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)); }
  /* Im Chat bei offener Unterhaltung: Leiste weg, Eingabe frei über der Tastatur. */
  body:has(.tc-app-mitte) .handyleiste { display: none; }
  body:has(.tc-app-mitte) .layout-page { padding-bottom: 0; }
  body:has(.tc-app-mitte) .tc-app { height: calc(100dvh - 10rem); }
}

/* ─── UI/UX-Audit 18.10.2026, Paket 1: Grundlagen (Entscheidung Jonas 18.10.2026) ─── */

/* F-04: Sprunglink, erst beim Tastaturfokus sichtbar; die Landmarke selbst ohne Fokusrahmen. */
.sprunglink {
  position: absolute; left: .75rem; top: -4rem; z-index: 2000;
  padding: .5rem 1rem; border-radius: .375rem;
  background: #2f2b3d; color: #fff; font-weight: 600; text-decoration: none;
}
.sprunglink:focus { top: .75rem; color: #fff; }
#inhalt:focus { outline: none; }

/* F-02: sichtbarer Tastaturfokus auf allen Knöpfen (der Fokus-Schatten glich dem Ruhezustand). */
.btn:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid #2f2b3d;
  outline-offset: 2px;
}
html[data-bs-theme="dark"] .btn:focus-visible,
html[data-bs-theme="dark"] .page-link:focus-visible,
html[data-bs-theme="dark"] .nav-link:focus-visible,
html[data-bs-theme="dark"] .dropdown-item:focus-visible,
.layout-menu .btn:focus-visible { outline-color: #fff; }

/* F-03, F-27: Kontrast ≥ 4,5:1 auf Weiß und #f8f7fa (nur helles Design; das dunkle Menü behält seine Töne).
   Grau #716e7b statt #acaab1 (2,3:1), Orange #9a5200 statt #ff9f43 (2,1:1), Rot #c8102e statt #ff4c51 (3,1:1),
   Grün #16794a statt #28c76f; Flächen der Knöpfe und Abzeichen bleiben. */
html:not([data-bs-theme="dark"]) { --bs-secondary-color: #716e7b; }
html:not([data-bs-theme="dark"]) .text-body-secondary:not(.layout-menu *),
html:not([data-bs-theme="dark"]) .text-muted:not(.layout-menu *) { color: #716e7b !important; }
html:not([data-bs-theme="dark"]) .text-warning:not(.layout-menu *) { color: #9a5200 !important; }
html:not([data-bs-theme="dark"]) .text-danger:not(.layout-menu *) { color: #c8102e !important; }
html:not([data-bs-theme="dark"]) .text-success:not(.layout-menu *) { color: #16794a !important; }
html:not([data-bs-theme="dark"]) .bg-label-primary:not(.layout-menu *) { color: #b0062d !important; }
html:not([data-bs-theme="dark"]) .bg-label-warning:not(.layout-menu *) { color: #8a4b00 !important; }
html:not([data-bs-theme="dark"]) .bg-label-danger:not(.layout-menu *) { color: #b0062d !important; }
html:not([data-bs-theme="dark"]) .bg-label-success:not(.layout-menu *) { color: #16794a !important; }
html:not([data-bs-theme="dark"]) .alert-warning { color: #8a4b00; }
html:not([data-bs-theme="dark"]) .btn-outline-secondary { --bs-btn-color: #6d6b77; color: #6d6b77; border-color: #8f8c99; }
html:not([data-bs-theme="dark"]) .btn-outline-secondary:hover { color: #fff; }

/* F-05, F-28: Eingaben auf dem Handy mindestens 16 px - sonst zoomt iOS beim Antippen. */
@media (max-width: 575.98px) {
  .form-control, .form-select, select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]) { font-size: 16px; }
}

/* F-23: „Jetzt unterschreiben“ auf schmalen Bildschirmen in voller Breite unter dem Text. */
@media (max-width: 575.98px) {
  .kostenuebernahme-unterschreiben { width: 100%; }
}

/* ─── UI/UX-Audit 18.10.2026, Paket 2: Tabellen auf dem Handy ───
   Zentral für alle Tabellen: Zahlen in gleicher Breite, Scroll-Schatten an
   der Kante, solange noch Spalten rechts verdeckt sind (F-01, F-08). */
.table td, .table th { font-variant-numeric: tabular-nums; }
.table td.zahl, .table th.zahl { text-align: end; white-space: nowrap; }
/* Zahlenspalten erkennt tabellen.js selbst (F-08); `tabelle-ohne-zahl` schaltet das je Tabelle ab. */
.table-responsive {
  background:
    linear-gradient(to right, var(--bs-card-bg, #fff) 30%, rgba(255,255,255,0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--bs-card-bg, #fff) 30%, rgba(255,255,255,0)) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(47,43,61,.16), rgba(47,43,61,0)) left center / .75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(47,43,61,.16), rgba(47,43,61,0)) right center / .75rem 100% no-repeat scroll;
}
.table-responsive > .table { --bs-table-bg: transparent; }

/* Karten statt Querscrollen (Muster /unternehmen/fahrer): Tabelle mit
   `tabelle-karten`; Beschriftung aus dem Spaltenkopf (tabellen.js). Erste
   Spalte = Kartentitel, Spalte mit `.tabelle-aktion` oder die letzte = volle
   Breite unten. `tabelle-karten-kompakt`: Zellen als kleine Kacheln
   nebeneinander (Matrizen wie /unternehmen/uebersicht). */
@media (max-width: 767.98px) {
  .table-responsive:has(> .tabelle-karten), .table-responsive:has(> .tabelle-karten-kompakt) { background: none; overflow: visible; }
  table.tabelle-karten, table.tabelle-karten-kompakt { display: block !important; min-width: 0 !important; width: 100% !important; border: 0; }
  table.tabelle-karten thead, table.tabelle-karten-kompakt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.tabelle-karten tbody, table.tabelle-karten-kompakt tbody { display: block; }
  table.tabelle-karten tbody tr, table.tabelle-karten-kompakt tbody tr {
    display: block; margin: 0 0 .75rem; padding: .625rem .875rem;
    border: 1px solid var(--bs-border-color, #e6e6e8); border-radius: .5rem; background: var(--bs-card-bg, #fff);
  }
  table.tabelle-karten tbody td, table.tabelle-karten-kompakt tbody td {
    border: 0 !important; padding: .2rem 0 !important; background: none !important; box-shadow: none !important;
    position: static !important; white-space: normal !important; text-align: start !important;
  }
  /* Beschriftung links in fester Spalte, Inhalt rechts daneben (klassisches gestapeltes Muster). */
  table.tabelle-karten tbody td { display: block; position: relative !important; min-height: 1.6rem; padding-left: 38% !important; }
  table.tabelle-karten tbody td::before {
    content: attr(data-label); position: absolute; left: 0; top: .2rem; width: 35%;
    color: var(--bs-secondary-color); font-family: var(--bs-body-font-family); font-size: .8125rem; font-weight: 400; line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
  }
  table.tabelle-karten tbody td[data-label=""] { padding-left: 0 !important; }
  table.tabelle-karten tbody td[data-label=""]::before { content: none; }
  /* Kartentitel: die Zelle mit `.tabelle-titel`, sonst die erste (ohne reine Auswahlspalte). */
  table.tabelle-karten tbody tr { display: flex; flex-direction: column; position: relative; }
  table.tabelle-karten:not(:has(td.tabelle-titel)) tbody td:first-child:not(:has(> input[type="checkbox"]:only-child)),
  table.tabelle-karten:not(:has(td.tabelle-titel)) tbody td:first-child:has(> input[type="checkbox"]:only-child) + td,
  table.tabelle-karten tbody td.tabelle-titel { order: -1; display: block; padding-left: 0 !important; font-weight: 600; font-size: 1rem; padding-bottom: .35rem !important; padding-right: 2rem !important; }
  table.tabelle-karten:not(:has(td.tabelle-titel)) tbody td:first-child:not(:has(> input[type="checkbox"]:only-child))::before,
  table.tabelle-karten:not(:has(td.tabelle-titel)) tbody td:first-child:has(> input[type="checkbox"]:only-child) + td::before,
  table.tabelle-karten tbody td.tabelle-titel::before { content: none; }
  table.tabelle-karten tbody td.tabelle-titel > *, table.tabelle-karten tbody td:first-child > * { text-align: start; }
  table.tabelle-karten tbody td.zahl { text-align: start; }
  /* Auswahlkästchen oben rechts in der Karte. */
  table.tabelle-karten tbody td:has(> input[type="checkbox"]:only-child) { position: absolute !important; top: .55rem; right: .75rem; padding: 0 !important; min-height: 0; }
  table.tabelle-karten tbody td:has(> input[type="checkbox"]:only-child)::before { content: none; }
  table.tabelle-karten tbody td.tabelle-aktion,
  table.tabelle-karten:not(:has(td.tabelle-aktion)) tbody td:last-child:not(:first-child) { order: 99; display: block; padding-left: 0 !important; padding-top: .5rem !important; }
  table.tabelle-karten tbody td.tabelle-aktion::before,
  table.tabelle-karten:not(:has(td.tabelle-aktion)) tbody td:last-child:not(:first-child)::before { content: none; }
  table.tabelle-karten tbody td.tabelle-mobil-aus { display: none !important; }
  /* Kleine Marke (z. B. „neu“ bei Aufgaben) oben rechts in der Karte. */
  table.tabelle-karten tbody td.tabelle-marke { position: absolute !important; top: .7rem; right: .75rem; padding: 0 !important; min-height: 0; }
  table.tabelle-karten tbody td.tabelle-marke::before { content: none; }
  /* Zellen mit Balken oder mehreren Zeilen: Beschriftung darüber statt daneben. */
  table.tabelle-karten tbody td.tabelle-block { display: block !important; min-width: 0 !important; padding-left: 0 !important; }
  table.tabelle-karten tbody td.tabelle-block::before { content: attr(data-label) !important; position: static; display: block; width: auto; margin-bottom: .2rem; }
  table.tabelle-karten tbody td.tabelle-block > * { text-align: start; }
  table.tabelle-karten tbody td:empty { display: none !important; }
  /* Leerzeile von DataTables („keine Einträge“) ohne Kartenrahmen. */
  table.tabelle-karten tbody td.dt-empty, table.tabelle-karten tbody td.dataTables_empty { display: block; padding-left: 0 !important; text-align: center !important; font-weight: 400; }

  table.tabelle-karten-kompakt tbody tr { display: flex; flex-wrap: wrap; gap: .375rem; }
  table.tabelle-karten-kompakt tbody td { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.25rem; }
  table.tabelle-karten-kompakt tbody td::before { content: attr(data-label); color: var(--bs-secondary-color); font-size: .6875rem; line-height: 1.2; }
  table.tabelle-karten-kompakt tbody td:first-child { flex: 1 0 100%; align-items: flex-start; font-weight: 600; }
  table.tabelle-karten-kompakt tbody td:first-child::before { content: none; }
}

/* ─── UI/UX-Audit 18.10.2026, Paket 3: Bedienung und Beschriftung ─── */

/* F-07, F-26: Touchziele auf dem Handy (WCAG 2.5.8 mindestens 24 px, Knöpfe 44 px Höhe). */
@media (max-width: 767.98px) {
  .form-check-input { width: 1.5rem; height: 1.5rem; }
  .form-check { min-height: 1.75rem; }
  .layout-menu-toggle .nav-link, .layout-menu-toggle a { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
  .table td > a:not(.btn), .table td > .text-nowrap > a:not(.btn) { display: inline-block; padding-block: .3rem; }
  .content-footer a, .footer a { display: inline-block; padding-block: .35rem; }
  .btn:not(.btn-sm):not(.btn-xs):not(.btn-icon):not(.input-group .btn):not(.btn-group .btn) { min-height: 2.75rem; }
  .btn-sm, .btn-icon { min-height: 2rem; min-width: 2rem; }
  .table thead th.dt-orderable-asc, .table thead th.dt-orderable-desc, .table thead th.sorting { padding-block: .6rem; }
}

/* F-17: Filter auf /kursangebote auf dem Handy als eine wischbare Zeile statt neun Zeilen. */
@media (max-width: 575.98px) {
  .ka-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; margin-inline: -1rem; padding-inline: 1rem; scroll-snap-type: x proximity; }
  .ka-filter::-webkit-scrollbar { display: none; }
  .ka-filter-knopf { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}

/* F-19: Rechtstexte auf /einwilligung - am Rechner eigener Scrollbereich, auf dem Handy ohne
   (zwei geschachtelte Scrollfelder ließen sich mit dem Daumen kaum bedienen). */
.einwilligung-text { max-height: 22rem; overflow-y: auto; white-space: pre-wrap; }
@media (max-width: 767.98px) {
  .einwilligung-text { max-height: none; overflow: visible; }
}

/* F-14: Brotkrumen über der Überschrift, klein und zurückhaltend. */
.brotkrumen .breadcrumb { font-size: .8125rem; --bs-breadcrumb-divider: "›"; }
.brotkrumen .breadcrumb-item, .brotkrumen .breadcrumb-item.active { color: var(--bs-secondary-color); }
.brotkrumen .breadcrumb-item a { color: var(--bs-secondary-color); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Chat auf dem Handy: offene Unterhaltung im Vollbild wie WhatsApp (Jonas 18.10.2026) ───
   Kopf der Unterhaltung oben fest, Eingabe unten fest über der Tastatur; App-Kopf, Rand,
   Fußzeile und Leiste weg. Im Einzelchat ohne Avatar und Namen je Nachricht. Die Höhe folgt
   der sichtbaren Fläche (teamchat.js setzt sie bei offener Tastatur, `--tc-hoehe`). */
@media (max-width: 991.98px) {
  body:has(.tc-app-mitte) .layout-navbar,
  body:has(.tc-app-mitte) .content-footer,
  body:has(.tc-app-mitte) .brotkrumen,
  body:has(.tc-app-mitte) .wa-installieren { display: none !important; }
  body:has(.tc-app-mitte) { overflow: hidden; }
  .tc-app.tc-app-mitte {
    position: fixed; left: 0; right: 0; top: var(--tc-oben, 0px); z-index: 1090;
    height: var(--tc-hoehe, 100dvh) !important; min-height: 0; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; background: #efeae2;
  }
  .tc-app-mitte .tc-spalte-mitte { height: 100%; min-height: 0; background: #efeae2; }
  .tc-app-mitte .tc-mitte-kopf {
    padding: calc(.4rem + env(safe-area-inset-top, 0px)) .5rem .4rem; min-height: 0;
    background: var(--bs-paper-bg, #fff); border-bottom: 1px solid rgba(47, 43, 61, .08);
  }
  .tc-app-mitte .tc-verlauf { padding: .625rem .625rem .5rem; gap: .3rem; }
  .tc-app-mitte .tc-eingabe { padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom, 0px)); background: #efeae2; }
  .tc-app-mitte .tc-eingabe-feld { border-radius: 1.5rem; }
  .tc-app-mitte .tc-blase { padding: .4rem .7rem; border-radius: 12px 12px 12px 4px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); border-color: transparent; }
  .tc-app-mitte .tc-eigen .tc-blase { border-radius: 12px 12px 4px 12px; }
  .tc-app-mitte .tc-zeile-inhalt { gap: .1rem; }
  .tc-app-mitte .tc-zeit { font-size: .6875rem; }
  .tc-art-einzel .tc-zeile > .tc-avatar,
  .tc-art-einzel .tc-absender { display: none; }
  .tc-art-einzel .tc-zeile-inhalt { max-width: 85%; }
}
@media (max-width: 991.98px) {
  html[data-bs-theme="dark"] .tc-app.tc-app-mitte,
  html[data-bs-theme="dark"] .tc-app-mitte .tc-spalte-mitte,
  html[data-bs-theme="dark"] .tc-app-mitte .tc-eingabe { background: #0b141a; }
}

/* ─── iPhone: Web-App sauber in Notch und Home-Balken (Jonas 18.10.2026, Screenshots) ───
   Das Haus-Layout setzt `viewport-fit=cover`; erst damit liefert iOS die
   `env(safe-area-inset-*)`-Werte, mit denen Handy-Leiste, Chat-Eingabe und
   „Meine Zeit“ über dem Home-Balken bleiben (vorher überall 0). Die Kopfleiste
   rückt unter eine überlagernde Statusleiste, seitlich bleibt Platz für die
   Notch im Querformat. */
@media (max-width: 991.98px) {
  #layout-navbar { top: env(safe-area-inset-top, 0px); }
  .layout-page { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
/* Kopfleiste auf schmalen Handys: sieben Symbole passen nur mit engeren
   Abständen; vorher wurde das Profilbild rechts abgeschnitten (390 px: 33 px zu breit). */
@media (max-width: 575.98px) {
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item { margin-right: .125rem !important; }
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item > .nav-link { padding-left: .3rem !important; padding-right: .3rem !important; }
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item > .nav-link.gap-2 { gap: .3rem !important; }
  #layout-navbar .navbar-nav-right .navbar-nav > .nav-item:last-child { margin-right: 0 !important; }
}
@media (max-width: 991.98px) {
  /* Fußzeile (Copyright, Version) steht sonst über der Leiste und kostet eine Zeile. */
  body:has(.handyleiste) .content-footer { display: none; }
  /* Chat-Kopf: „Zuletzt online am …“ einzeilig statt umbrochen. */
  .tc-app-mitte .tc-kopf-titel { min-width: 0; overflow: hidden; }
  .tc-app-mitte .tc-kopf-titel > * { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Unter 400 px (iPhone mini/SE/13/14) reicht der Platz auch so nicht: dann nur Punkt und Zahl. */
@media (max-width: 399.98px) {
  #layout-navbar .online-wort { display: none; }
}

/* ─── Update-Hinweis der Web-App (app-version.js, Jonas 18.10.2026) ───
   Oben mittig über allem, unter Notch/Statusleiste; auf dem Handy volle Breite. */
.app-update {
  position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%);
  top: calc(.75rem + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  max-width: calc(100vw - 1.5rem); padding: .5rem .5rem .5rem 1rem;
  background: var(--bs-paper-bg, #fff); color: var(--bs-heading-color, #2f2b3d);
  border: 1px solid rgba(47, 43, 61, .12); border-radius: .75rem;
  box-shadow: 0 .5rem 1.5rem rgba(47, 43, 61, .18);
}
.app-update-text { font-weight: 500; margin-right: .25rem; }
@media (max-width: 575.98px) {
  .app-update { left: .75rem; right: .75rem; transform: none; max-width: none; }
  .app-update-text { flex: 1 1 100%; }
}

/* ─── Ablagefläche zum Hochladen (Unternehmensportal, Jonas 20.10.2026) ─── */
.upload-ablage {
  padding: .75rem; border: 2px dashed rgba(47, 43, 61, .25); border-radius: .5rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-ablage-aktiv { border-color: var(--bs-primary, #7367f0); background-color: rgba(115, 103, 240, .08); }
.upload-ablage-hinweis { margin-top: .35rem; }