/*
 * 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-preis { flex: 0 0 auto; font-weight: 700; color: var(--bs-primary); white-space: nowrap; text-align: right; }
.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; }
.pr-details summary { cursor: pointer; font-weight: 600; color: var(--bs-primary); font-size: .9rem; }

/* Ü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); }
.pr-stufe-summe { font-weight: 700; white-space: nowrap; }

/* 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); }
.pr-preis { font-weight: 700; white-space: nowrap; }

/* Ergebnis: auf breiten Schirmen bleibt es beim Scrollen stehen. */
@media (min-width: 992px) { .pr-ergebnis { position: sticky; top: 1.5rem; } }
.pr-summe { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; color: var(--bs-primary); line-height: 1.1; letter-spacing: -.02em; }
.pr-aufstellung td { padding-left: 0; padding-right: 0; font-size: .875rem; vertical-align: top; }
.pr-aufstellung .pr-zeile-uebung td, .pr-aufstellung .pr-zeile-neben:first-of-type td { border-top: 1px dashed var(--bs-border-color); }

/* Handy: Summe als Leiste am unteren Rand, bis die Aufstellung im Bild ist. */
.pr-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff;
  border-top: 1px solid var(--bs-border-color); box-shadow: 0 -6px 18px rgba(20, 20, 43, .08);
  padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); transition: transform .2s ease; }
.pr-leiste-weg { transform: translateY(110%); }
.pr-leiste-summe { font-size: 1.35rem; color: var(--bs-primary); }
@media (max-width: 991.98px) { body.pr-mit-leiste { padding-bottom: 4.5rem; } }

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