/*
 * 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 {
  --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);
}

/* 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);
}
