/* ==========================================================================================================
   KUNDE: Unifit – Umbau aus dem alten customer.css (20.10.2026), Vorlage-Stand 21.10.2026
   Theme hell · Akzent #E21C4D · Glas ja · Verlauf ja · kein Hintergrundbild
   ========================================================================================================== */
/* ==========================================================================================================
   TS-Web2 Kunden-CSS – VORLAGE (modernes Design, Memberarea und Firmenportal)
   ==========================================================================================================

   SO ENTSTEHT DAS CSS FÜR EINEN NEUEN KUNDEN
   1. Diese Datei kopieren und als  Customer/customer.css  beim Kunden ablegen.
   2. Nur die SCHALTER unten anpassen (Abschnitt "SCHALTER", direkt nach dieser Anleitung).
      Alles darunter ("AB HIER NICHTS ÄNDERN") arbeitet nur mit den Variablen aus den Schaltern.

   AUFTRAG AN EINEN KI-AGENTEN (Beispiel)
      "Nimm Customer/Vorlage/customer_vorlage.css als Vorlage für Kunde X:
       helles Theme, Akzentfarbe #0A7CFF, Glaseffekt ja, kein Hintergrundbild."
   Der Agent soll dafür ausschließlich die vier Schalter ändern:

   SCHALTER 1  THEME          "hell" oder "dunkel": Genau einer der beiden Blöcke THEME HELL / THEME DUNKEL bleibt aktiv,
                              der andere wird auskommentiert (in Kommentarzeichen gesetzt; Anleitung direkt über den Blöcken).
   SCHALTER 2  AKZENT         --kd-akzent = Hausfarbe des Kunden (Knöpfe, Kopfzeile, Titelband, Auswahl, Kalender …).
                              Alle Tönungen (Hover, Hinterlegungen, Ränder) werden daraus berechnet.
                              Die Schrift auf der Akzentfarbe wählt TS-Web2 automatisch (weiß oder dunkel, je nach Kontrast).
   SCHALTER 3  HINTERGRUNDBILD optional: --kd-bild mit Bild-URL (mit Abdunklung bzw. Aufhellung für die Lesbarkeit),
                              sonst none. Mit Bild sollten die Karten leicht durchscheinen (Werte stehen im Schalter).
   SCHALTER 4  GLAS           "ja": Block GLAS aktiv lassen; "nein": Block GLAS auskommentieren.
                              Unabhängig vom Hintergrundbild. Glas = feine Lichtkante an den Karten, Glanz, und eine
                              Lichtleiste, die der Maus bzw. dem Finger folgt. Im hellen Theme ist die Lichtleiste dunkel
                              und die Karten werfen zusätzlich einen weichen Schatten von der Maus weg (wie bei einer Lampe).
   SCHALTER 5  VERLAUF        "ja" (Standard): weicher Farbschimmer aus der linken oberen und rechten unteren Ecke, Farbton aus dem
                              Akzent, Helligkeit fest je Theme, Sättigung begrenzt; Karten leicht durchscheinend. "nein": Block
                              VERLAUF auskommentieren. Mit Hintergrundbild (SCHALTER 3) verdeckt das Bild den Verlauf.

   ALTES KUNDEN-CSS UMBAUEN (Erkennungsregeln für den Agenten)
   - AKZENT: die Farbe, die in .btn-warning, .bg-primary, .datepicker-header, .page-item.active, .progress-bar und an den
     Checkboxen überwiegt. Abweichende Einzelfarben (z. B. im Akkordeon-SVG oder in .fc-state-hover) sind meist Reste
     eines anderen Kunden und werden verworfen. Zweitfarben (z. B. an .chipsfilteritems) nennen, nicht übernehmen.
   - THEME: hell, wenn body #ECECEC o. ä. und .bg-light #fbfbfb aktiv ist; dunkel, wenn .bg-light rgba(0, 0, 0, …) aktiv ist
     und Nav-Links bzw. Datepicker-Texte weiß gesetzt sind.
   - HINTERGRUNDBILD: url(...) an body bzw. .mainbackground -> SCHALTER 3 (Variante passend zum Theme).
   - GLAS: im alten CSS nicht enthalten -> Standard "ja".
   - Alles andere aus dem alten CSS ist der alte Standard und entfällt. Nur echte Kunden-Besonderheiten (Logo, ausgeblendete
     Elemente, eigene Bereiche) ans DATEIENDE übernehmen.

   WEITERE EINSTELLUNGEN (selten nötig)
   - Logo: Bilddatei Images/logo.svg (bevorzugt) bzw. Images/logo.png. Feld hinter dem Logo: --kd-logo-grund
     (nicht gesetzt = automatisch, none = nie, Farbe = immer).
   - Seitentitel im Akzent-Kopf: --ts-titel-in-kopf: 1 (an) bzw. 0 (aus).
   - Kunden-spezifische Ergänzungen (z. B. besonderes Logo) ans DATEIENDE schreiben, nicht in die Schalter.

   TECHNIK
   - TS-Web2 lädt immer Content/mdb.dark.min.css. Was die Vorlage nicht selbst gestaltet, ist deshalb dunkel bzw. weiß beschriftet.
     Neue Bausteine immer mit den --kd-* Variablen gestalten, nie mit festen Farben (sonst bricht das helle Theme).
   - Variablen --kd-* = Kundendesign, --vk-* = Vertragsabschluss, --ts-* setzt TS-Web2 selbst (nicht überschreiben).
   - Nur moderne Browser-Funktionen, die alle aktuellen Browser können (color-mix, :has, Masken).
   - Performance: Hintergrundbild als feste Ebene, keine Weichzeichner auf Karten (siehe Abschnitt am Dateiende).
   ========================================================================================================== */



body {
     /* background: #ECECEC;*/ /*Only Light needed */
}

#FooterText{
	background-color: transparent;
}

/* Für die Buttons im Footer  */
.btn-outline-dark {
    color: var(--kd-ink);
    border-color: var(--kd-ink);
}
/* Für die Buttons im Footer  */
.btn-outline-dark:hover {
    color: var(--kd-ink);
    border-color: var(--kd-ink);
}

/* früher fest hell (#fbfbfb) bzw. dunkel (rgba(0,0,0,.2)); jetzt aus dem Theme. Die Kopfzeile (.navbar.bg-light) hat eigene Regeln,
   übrige .bg-light (z. B. Badges in der Kursliste) bekommen die Feldfarbe statt einer festen Tönung */
.bg-light {
    background-color: var(--kd-feld) !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--kd-akzent-text); /*Only Dark Needed*/
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--kd-akzent-text); /*Only Dark Needed*/
}

.navbar-light .navbar-nav .nav-link:focus {
    color: var(--kd-akzent-text); /*Only Dark Needed*/
}

.chipsfiltergroups {
	background-color: gray;
	color: white;
	margin-bottom: 0rem;
}

.chipsfilteritems {
	background-color: var(--kd-akzent);
	color: white;
	margin-bottom: 0rem;
}

.selectizeItemCustom {
	background-color: var(--kd-akzent) !important;
	color: white !important;
	background-image: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	border: 0px solid white !important;
	padding: 4px 8px !important;
	border-radius: 20px !important;
	font-weight: 500;
}

.btn-warning  {
	 color: var(--kd-akzent-text); /*switch Dark/Light */
	background: var(--kd-akzent);
}

.btn-warning:hover {
	color: var(--kd-akzent-text); /*switch Dark/Light */
	background: var(--kd-akzent);
}

.btn-warning:active {
	color: var(--kd-akzent-text); /*switch Dark/Light */
	background: var(--kd-akzent);
}

.btn-warning:focus {
	color: var(--kd-akzent-text); /*switch Dark/Light */
	background: var(--kd-akzent);
}

.btn-warning:disabled {
	color: var(--kd-akzent-text); /*switch Dark/Light */
	background: var(--kd-akzent);
}

.bg-primary {
	background-color: var(--kd-akzent)!important;
}

.form-control:focus#capture{
	color: var(--kd-akzent);
	border-color: var(--kd-akzent);
}

.form-outline .form-control:focus~.form-label {
	color: var(--kd-akzent);
}

.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid var(--kd-akzent);
    border-bottom: 0.125rem solid var(--kd-akzent);
    border-left: 0.125rem solid var(--kd-akzent);
}

.form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: var(--kd-akzent);
}

.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid var(--kd-akzent);
    border-bottom: 0.125rem solid var(--kd-akzent);
    border-right: 0.125rem solid var(--kd-akzent);
}

.accordion-button:not(.collapsed){
	color: var(--kd-akzent);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--kd-akzent);
    border-color: var(--kd-akzent);
}

/* Pfeil im Akkordeon: das SVG ist nur noch die Form (Maske), die Farbe kommt aus der Schrift des Knopfs
   (zugeklappt Schriftfarbe, offen Akzentfarbe). Früher stand die Farbe fest im SVG und musste je Kunde angepasst werden. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* Verlauf von der Akzentfarbe zu einer dunklen Abstufung derselben Farbe (bei #FF2A1B wie früher #6e0c05) */
.aqua-gradient {
    background: linear-gradient(135deg, var(--kd-akzent) 0%, color-mix(in srgb, var(--kd-akzent) 43%, #000) 100%) !important;
}

.fc-state-default {
    border-color: var(--kd-akzent);
    color: var(--kd-akzent);
}

.fc-state-down, .fc-state-active {
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

.fc-state-hover{
	background-color: color-mix(in srgb, var(--kd-akzent) 30%, transparent);
}

.fc-state-disabled {
    background-color: color-mix(in srgb, var(--kd-akzent) 30%, transparent);
    filter: alpha(opacity=65);
    border: 1px solid color-mix(in srgb, var(--kd-akzent) 30%, transparent);
    color: var(--kd-akzent);
}

.border-gray-top {
	border-top-style: solid;
    border-width: 2px;
    border-color: lightgray;
}

.border-gray-bottom {
	border-bottom-style: solid;
    border-width: 2px;
    border-color: lightgray;
}

.btn-rounded {
	border-radius: 0.5rem;
}

.ns-calendar .events .li-calender:hover {
	background: var(--kd-feld);
}

.ns-calendar .event-title:hover {
	color: var(--kd-akzent);
}

.ns-calendar .event-info:hover {
	color: var(--kd-akzent);
}

.select-input.focused~.select-arrow {
    color: var(--kd-akzent);
}

.select-input.focused~.select-label {
    color: var(--kd-akzent);
}

.select-input.focused~.form-notch .form-notch-leading {
    border-top: 2px solid var(--kd-akzent);
    border-bottom: 2px solid var(--kd-akzent);
    border-left: 2px solid var(--kd-akzent);
}

.select-input.focused~.form-notch .form-notch-middle{
    border-bottom: 2px solid;
    border-color: var(--kd-akzent);
}

.select-input.focused~.form-notch .form-notch-trailing {
    border-color: currentcolor currentcolor currentcolor var(--kd-akzent);
    border-bottom: 2px solid var(--kd-akzent);
    border-right: 2px solid var(--kd-akzent);
    border-top: 2px solid var(--kd-akzent);
}

.datepicker-toggle-button:focus, .datepicker-toggle-button:hover {
    color: var(--kd-akzent);
}

.datepicker-header {
    background-color: var(--kd-akzent);
}

.datepicker-footer-btn{
	color: var(--kd-akzent);
}

.datepicker-cell.selected .datepicker-cell-content {
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

.datepicker-date-controls, .datepicker-date-text, .datepicker-title-text {
    color: var(--kd-ink); /*switch Dark/Light */
}

.page-item.active .page-link {
    background-color: var(--kd-akzent);
}

.form-check-input:checked {
    border-color: var(--kd-akzent);
}

.form-check-input[type=checkbox]:checked {
    background-color: var(--kd-akzent);
}

.form-check-input:focus {
    border-color: var(--kd-akzent);
}

.form-check-input:checked:focus:before {
    box-shadow: 0 0 0 13px var(--kd-akzent);
}

.form-check-input[type=checkbox]:checked:after {
    border-color: var(--kd-akzent-text);
}

.form-check-input[type=checkbox]:checked:focus {
	border-color: var(--kd-akzent);
	background-color: var(--kd-akzent);
}

.form-check-input:checked, .form-check-input:checked:focus {
	border-color: var(--kd-akzent);
	background-color: var(--kd-akzent);
}

/* Change Color light Accent */
.badge-primary {
    background-color: color-mix(in srgb, var(--kd-akzent) 18%, transparent);
}

.badge-primary i {
    color: var(--kd-akzent);
}

.btn-link {
    color: var(--kd-akzent);
}

.progress-bar {
	background-color: var(--kd-akzent);
}

a {
	cursor: pointer;
}

a:hover {
	color: var(--kd-akzent);
}

.list-group-item{
	color: var(--kd-ink, #ffffff)!important;
	background-color: var(--kd-feld, #242424)!important;
	border-color: var(--kd-line, rgba(255, 255, 255, 0.08))!important;
}

.list-group-item-action {
	color: var(--kd-ink, #ffffff)!important;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
	background-color: var(--kd-akzent-hell, color-mix(in srgb, var(--kd-akzent) 16%, transparent))!important;
}

.btn-warning {
    color: var(--kd-akzent-text);
    background: var(--kd-akzent);
}

.badge-primary {
    color: var(--kd-ink);
}

.form-check-input[type=radio]:checked:after {
    border-color: var(--kd-akzent);
    background-color: var(--kd-akzent);
}

.loading-spinner{
	color: var(--kd-akzent);
}



/* Profilbild-Kreis (Platzhalter bzw. Foto) 7rem; steht so in allen bisherigen Kunden-CSS und gilt für jedes .rounded-circle */
.rounded-circle {

    min-width: 7rem;
    min-height: 7rem;
    max-width: 7rem;
    max-height: 7rem;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}


.avatar {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  overflow: hidden;          /* wichtig fürs Abschneiden */
  display: flex;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 🔥 zoom + crop statt verzerren */
  object-position: center;   /* Fokus Mitte */
}


@media only screen and (max-width: 800px) {
	/* Force table to not be like tables anymore */
	 table:not(.datepicker-table),
	 thead,
	 tbody:not(.datepicker-table-body),
	 th:not(.datepicker-day-heading),
	 td:not(.datepicker-cell),
	 tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	 thead:not(.datepicker-day-heading) tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	 tr { border: 1px solid var(--kd-line); }

	 td:not(.datepicker-cell) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid var(--kd-line);
		position: relative;
		padding-left: 50%;
		white-space: normal;
		text-align:right;
	}

	 td:not(.datepicker-cell):before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 0px;
		left: 0px;
		width: 45%;
		white-space: nowrap;
		font-weight: bold;
		text-align: left;
		padding: 1rem 1.4rem;
	}

	/*
	Label the data
	*/
	 td:not(.datepicker-cell):before { content: attr(data-title); }

	 /* leere Felder (z. B. Ident-Nr) behalten die Höhe der Beschriftung */
	 td:not(.datepicker-cell) { min-height: 3.25rem; }
}


/* ==========================================================================================================
   SCHALTER  (nur hier ändern – siehe Anleitung ganz oben)
   ========================================================================================================== */

/* ---------- Grundwerte (nicht ändern): Glas und Bild aus, bis die Schalter sie setzen ---------- */
:root {
    --kd-bild: none;
    --kd-verlauf: none;
    --kd-glas-rand: none;
    --kd-glas-glanz: none;
    --kd-glas-innen: 0 0 0 0 transparent;
    --kd-glas-licht: none;
    --kd-glas-schatten: transparent;
    --kd-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ts-titel-in-kopf: 1;
}

/* ---------- SCHALTER 1: THEME (hell oder dunkel) ----------
   Genau einer der beiden Blöcke THEME HELL / THEME DUNKEL ist aktiv, der andere steht in Kommentarzeichen.
   Umschalten: beim aktiven Block das Kommentarende hinter der Beschreibung entfernen und hinter seine schließende Klammer setzen,
   beim anderen Block umgekehrt (Kommentarende hinter die Beschreibung, das Kommentarende nach der Klammer löschen).
   In den beiden Blöcken stehen bewusst keine Kommentare, sonst würde das Auskommentieren zu früh enden.

   Bedeutung der Werte (gilt für beide Blöcke):
   --kd-schema               Farbschema für Auswahl-/Datumsfelder des Browsers: light | dark
   --kd-papier               Seitenhintergrund (Blatt unter dem Akzent-Kopf)
   --kd-karte                Karten (mit Hintergrundbild bzw. Verlauf leicht durchscheinend, siehe SCHALTER 3 und 5)
   --kd-karte-deckend        Karten ohne Transparenz (Menüs, Dialoge, Transparenz reduziert)
   --kd-feld / -deckend      Eingabefelder, Listeneinträge, Umschalter
   --kd-ink                  Überschriften, starke Schrift
   --kd-text                 Fließtext
   --kd-mute                 Nebentext, Beschriftungen (mind. 4,5:1 auch auf der Fußzeile)
   --kd-line                 Haarlinien, Ränder
   --kd-fehler               Fehlermeldungen an Feldern, offene Beträge
   --kd-erfolg               Guthaben, "Aktiv", freie Plätze in der Auslastung
   --kd-warnung              Hinweise, Ampel gelb
   --kd-fuss                 Fußzeile
   --kd-schatten / -hoch     Schatten der Karten (normal / angehoben)
   --kd-glas-…-wert          Glas, wirkt nur mit SCHALTER 4 (hell: dunkle Lichtleiste, die einen Schatten wirft; dunkel: helle Lichtkante)
   --kd-verlauf-farbe        Verlauf, wirkt nur mit SCHALTER 5: Farbe des Schimmers (Farbton aus dem Akzent, Helligkeit je Theme)
   --kd-verlauf-karte/-feld  Karten und Felder mit Verlauf (leicht durchscheinend)
*/

/* ---------- SCHALTER 1: THEME HELL (aktiv) ----------
   Weiße Karten auf hellgrauem Blatt, dunkle Schrift. */
:root {
    --kd-schema: light;
    --kd-papier: #f4f4f2;
    --kd-karte: #ffffff;
    --kd-karte-deckend: #ffffff;
    --kd-feld: #f1f1ef;
    --kd-feld-deckend: #f1f1ef;
    --kd-ink: #141414;
    --kd-text: #3d3d3d;
    --kd-mute: #66665f;
    --kd-line: rgba(20, 20, 20, 0.10);
    --kd-fehler: #c62828;
    --kd-erfolg: #1a6b34;
    --kd-warnung: #8a5a00;
    --kd-fuss: #e9e9e6;
    --kd-schatten: 0 1px 2px rgba(20, 20, 20, 0.06), 0 12px 28px -16px rgba(20, 20, 20, 0.18);
    --kd-schatten-hoch: 0 2px 4px rgba(20, 20, 20, 0.08), 0 22px 40px -20px rgba(20, 20, 20, 0.26);
    --kd-glas-rand-wert: linear-gradient(135deg, rgba(20, 20, 20, 0.16) 0%, rgba(20, 20, 20, 0.04) 35%, rgba(20, 20, 20, 0.02) 60%, rgba(20, 20, 20, 0.10) 100%);
    --kd-glas-glanz-wert: linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 38%);
    --kd-glas-innen-wert: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 20px -18px rgba(20, 20, 20, 0.12);
    --kd-glas-licht-wert: rgba(20, 20, 20, 0.38);
    --kd-glas-schatten-wert: rgba(20, 20, 20, 0.22);
    --kd-verlauf-farbe: oklch(from var(--kd-akzent) 0.86 min(calc(c * 3), 0.085) h);
    --kd-verlauf-karte: rgba(255, 255, 255, 0.8);
    --kd-verlauf-feld: rgba(241, 241, 239, 0.85);
}

/* ---------- SCHALTER 1: THEME DUNKEL (auskommentiert) ----------
   Dunkle Karten auf schwarzem Blatt, helle Schrift (wie SuperFit).
:root {
    --kd-schema: dark;
    --kd-papier: #0e0e0e;
    --kd-karte: #191919;
    --kd-karte-deckend: #191919;
    --kd-feld: #242424;
    --kd-feld-deckend: #242424;
    --kd-ink: #f4f4f4;
    --kd-text: #c9c9c9;
    --kd-mute: #8d8d8d;
    --kd-line: rgba(255, 255, 255, 0.08);
    --kd-fehler: #ff6b5e;
    --kd-erfolg: #3ecf72;
    --kd-warnung: #f5a524;
    --kd-fuss: #060606;
    --kd-schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px -18px rgba(0, 0, 0, 0.8);
    --kd-schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.45), 0 24px 44px -20px rgba(0, 0, 0, 0.9);
    --kd-glas-rand-wert: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0.16) 100%);
    --kd-glas-glanz-wert: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 38%);
    --kd-glas-innen-wert: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -12px 24px -18px rgba(0, 0, 0, 0.6);
    --kd-glas-licht-wert: rgba(255, 255, 255, 0.7);
    --kd-glas-schatten-wert: transparent;
    --kd-verlauf-farbe: oklch(from var(--kd-akzent) 0.34 min(calc(c * 1.5), 0.13) h);
    --kd-verlauf-karte: rgba(25, 25, 25, 0.72);
    --kd-verlauf-feld: rgba(40, 40, 40, 0.8);
}
*/

/* ---------- SCHALTER 2: AKZENT ---------- */
:root {
    --kd-akzent: #E21C4D;                   /* Hausfarbe des Kunden (aus altem customer.css übernommen) */
}

/* ---------- SCHALTER 3: HINTERGRUNDBILD (optional, aus) ----------
   Zum Einschalten die Kommentarzeichen um den passenden Block entfernen und die Bild-URL eintragen.
   Dunkles Theme (Bild abgedunkelt, Karten leicht durchscheinend):
:root {
    --kd-bild: linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.78)), url("/Customer/hintergrund.jpg");
    --kd-karte: rgba(25, 25, 25, 0.72);
    --kd-feld: rgba(40, 40, 40, 0.8);
}
   Helles Theme (Bild aufgehellt, Karten leicht durchscheinend):
:root {
    --kd-bild: linear-gradient(rgba(244, 244, 242, 0.82), rgba(244, 244, 242, 0.82)), url("/Customer/hintergrund.jpg");
    --kd-karte: rgba(255, 255, 255, 0.8);
    --kd-feld: rgba(241, 241, 239, 0.85);
}
*/

/* ---------- SCHALTER 4: GLAS (aktiv) ----------
   Lichtkante, Glanz und Lichtleiste der Karten; die Werte kommen aus dem gewählten Theme. Zum Ausschalten den Block auskommentieren. */
:root {
    --kd-glas-rand: var(--kd-glas-rand-wert);
    --kd-glas-glanz: var(--kd-glas-glanz-wert);
    --kd-glas-innen: var(--kd-glas-innen-wert);
    --kd-glas-licht: var(--kd-glas-licht-wert);
    --kd-glas-schatten: var(--kd-glas-schatten-wert);
    --kd-glas-licht-radius: 280px;          /* Größe des Lichtkreises */
    --kd-glas-licht-rest: 0.35;             /* Restdeckkraft der festen Kante, solange die Lichtleiste aktiv ist */
}

/* ---------- SCHALTER 5: VERLAUF (aktiv) ----------
   Weicher Farbschimmer aus der linken oberen und der rechten unteren Ecke. Farbton aus dem Akzent, Helligkeit und Sättigung aus dem
   gewählten Theme (passt so zu jedem Akzent). Karten werden leicht durchscheinend (gleiche Werte wie mit Hintergrundbild).
   Zum Ausschalten den Block auskommentieren. Browser ohne Farbberechnung (oklch from) zeigen einfach den einfarbigen Hintergrund. */
:root {
    --kd-verlauf:
        radial-gradient(120% 85% at 0% 0%, var(--kd-verlauf-farbe), transparent 62%),
        radial-gradient(120% 85% at 100% 100%, var(--kd-verlauf-farbe), transparent 62%);
    --kd-karte: var(--kd-verlauf-karte);
    --kd-feld: var(--kd-verlauf-feld);
}

/* ==========================================================================================================
   AB HIER NICHTS ÄNDERN – abgeleitete Werte und das Design selbst
   ========================================================================================================== */
:root {
    --kd-akzent-text: var(--ts-akzent-text, #ffffff);   /* Schrift auf Akzentflächen (TS-Web2 berechnet weiß/dunkel) */
    --kd-akzent-hell: color-mix(in srgb, var(--kd-akzent) 16%, transparent);

    /* Moderner Vertragsabschluss (vk-modern) */
    --vk-akzent-hell: color-mix(in srgb, var(--kd-akzent) 18%, transparent);
    --vk-akzent-flaeche: color-mix(in srgb, var(--kd-akzent) 8%, transparent);
    --vk-akzent-rand: color-mix(in srgb, var(--kd-akzent) 55%, transparent);
    --vk-radius: 1.5rem;
    --vk-radius-feld: 1rem;
    --vk-linie: var(--kd-line);
    --vk-feld: var(--kd-feld);
    --vk-schatten: var(--kd-schatten);
    --vk-schatten-hoch: var(--kd-schatten-hoch);
    --kd-schatten-basis: var(--kd-schatten);
}

/* Lichtleiste wirft Schatten (Glas, v. a. helles Theme): jede Karte ergänzt ihren Schatten um --ts-licht-schatten,
   das Site.css je Karte aus der Mausposition setzt. Gilt für alle Karten-Regeln, die --kd-schatten bzw. --vk-schatten nutzen. */
.card {
    --kd-schatten: var(--ts-licht-schatten, 0 0 0 transparent), var(--kd-schatten-basis);
    --vk-schatten: var(--kd-schatten);
}

/* ---------- Grund ---------- */
html, body {
    overflow-x: clip; /* der Titelbogen nutzt 100vw (inkl. Scrollleiste) */
}

body,
body.mainbackground {
    background: var(--kd-bild) center / cover fixed, var(--kd-papier) !important;
    color: var(--kd-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kd-ink);
}

::selection {
    background: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

/* ---------- Kopfzeile: Akzentfarbe, Glas, bleibt stehen ---------- */
.navbar.bg-light {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--kd-akzent) !important;
    border: 0;
    box-shadow: none !important;
    padding-top: 0.75rem;
    padding-bottom: 2.5rem;
}

.navbar.bg-light .navbar-toggler,
.navbar.bg-light .navbar-toggler i {
    color: var(--kd-akzent-text) !important;
    border: 0;
    box-shadow: none;
}

.navbar-brand img {
    height: 42px;
    width: auto;
    border-radius: 0.75rem;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--kd-akzent-text);
}

.navbar-expand-lg #navbarNav .nav-link {
    min-height: 44px;
    padding: 0 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: background-color 160ms ease;
}

.navbar-expand-lg #navbarNav .nav-link:hover,
.navbar-expand-lg #navbarNav .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

@media (min-width: 992px) {
    .navbar-expand-lg #navbarNav .navbar-nav {
        align-items: center;
        gap: 0.375rem;
    }
}

.navbar-expand-lg #navbarNav .dropdown-menu,
.dropdown-menu {
    background: var(--kd-karte-deckend);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--kd-line);
    border-radius: 1.125rem;
    box-shadow: var(--kd-schatten-hoch);
    padding: 0.375rem;
    overflow: hidden;
}

.dropdown-item {
    color: var(--kd-ink);
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--kd-akzent-hell);
    color: var(--kd-ink);
}

/* Seitentitel gleitet beim Scrollen in die Kopfzeile (Klasse .ts-titel-in-nav setzt das Layout) */
.navbar.ts-main-navbar .ts-nav-seitentitel {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 1rem 0 0.25rem;
    color: var(--kd-akzent-text);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(0.9rem);
    transition: opacity 220ms var(--kd-ease), transform 260ms var(--kd-ease);
    pointer-events: none;
}

.navbar.ts-main-navbar.ts-titel-in-nav .ts-nav-seitentitel {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .navbar.ts-main-navbar .ts-nav-seitentitel {
        font-size: 1.0625rem;
        margin-right: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar.ts-main-navbar .ts-nav-seitentitel {
        transform: none;
        transition: opacity 120ms linear;
    }
}

/* Das dunkle Blatt schiebt sich unter dem Kopf hervor */
.navbar.bg-light::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: calc(2rem + 2px);
    background: var(--kd-bild) center / cover fixed, var(--kd-papier);
    border-radius: 2rem 2rem 0 0; /* wie Titelbogen, Startbild und Fußzeile */
}

/* ---------- Seitentitel sitzt im Akzent-Kopf ---------- */
.row:has(> h4.card-title) {
    margin-top: 0 !important;
}

section > .row > h4.card-title:first-child {
    position: relative;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 3.5rem;
    isolation: isolate; /* Band und Bogen liegen hinter dem Text */
    color: var(--kd-akzent-text);
    text-align: left !important;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-size: clamp(1.875rem, 1.3rem + 2.6vw, 2.75rem);
    text-wrap: balance;
}

/* Akzent-Band über die ganze Breite; endet 1px über der Unterkante innerhalb des Bogens,
   damit Band und Bogen keine gemeinsame Kante haben (sonst feine Linie bei krummen Pixelwerten) */
section > .row > h4.card-title:first-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    bottom: 1px;
    width: calc(100vw - var(--ts-bildlaufleiste, 0px)); /* sichtbare Breite ohne Bildlaufleiste (TS-Web2 setzt --ts-bildlaufleiste) */
    transform: translateX(-50%);
    background: var(--kd-akzent);
}

/* dunkles Blatt mit runder Oberkante */
section > .row > h4.card-title:first-child::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    width: calc(100vw - var(--ts-bildlaufleiste, 0px)); /* sichtbare Breite ohne Bildlaufleiste (TS-Web2 setzt --ts-bildlaufleiste) */
    height: 2rem;
    transform: translateX(-50%);
    background: var(--kd-bild) center / cover fixed, var(--kd-papier);
    border-radius: 2rem 2rem 0 0;
}

/* Hüllen um Formulare (z. B. <div class="mt-3"> in Neue Person), deren erster Inhalt das Titelband ist: kein Abstand nach oben,
   sonst entsteht zwischen Kopfzeile und Band ein Streifen in Seitenfarbe */
.body-content div:has(> section:first-of-type > section > .row > h4.card-title:first-child),
.body-content form:has(> section:first-of-type > section > .row > h4.card-title:first-child) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Seiten mit Titel bzw. Startbild: kein zweiter Bogen unter der Kopfzeile */
.body-content:has(section > .row > h4.card-title:first-child) .navbar.bg-light,
.body-content:has(#carouselExampleIndicators .carousel-item) .navbar.bg-light {
    padding-bottom: 0.75rem;
}

.body-content:has(section > .row > h4.card-title:first-child) .navbar.bg-light::after,
.body-content:has(#carouselExampleIndicators .carousel-item) .navbar.bg-light::after {
    display: none;
}

.body-content section.container > section > .row.mt-5 {
    margin-top: 0.75rem !important;
}

/* ---------- Karten ---------- */
.card {
    background: var(--kd-glas-glanz), var(--kd-karte);
    border: 1px solid var(--kd-line);
    border-radius: 1.5rem;
    box-shadow: var(--kd-glas-innen), var(--kd-schatten) !important;
    color: var(--kd-text);
}

/* Glas-Kante: 1px Lichtkante über dem Rand (nur wenn --kd-glas-rand gesetzt ist); Karten und Tagesblöcke des Kursplans */
.card::before,
.ns-calendar .cal-block::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    padding: 1px;
    border-radius: inherit;
    background: var(--kd-glas-rand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

.card .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--kd-line);
    padding: 1.125rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

h5.card-title {
    font-weight: 800;
    letter-spacing: -0.015em;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--kd-ink);
}

.card h4.card-title,
.card h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-size: 1.375rem;
    color: var(--kd-ink);
}

.card h4:not(.card-title) {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--kd-text);
}

.card-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.dropdown-item) {
    color: var(--kd-ink) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--kd-akzent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.25em;
}

/* Große gefüllte Symbolkreise entfallen */
.card > .d-flex.justify-content-center:has(> .bg-primary.rounded-circle) {
    display: none !important;
}

/* ---------- Schaltflächen ---------- */
.btn {
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: none !important;
    transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--kd-ease);
}

.btn:active {
    transform: scale(0.97);
}

.btn:focus-visible,
a:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--kd-ink);
    outline-offset: 3px;
}

.btn-warning,
.btn-warning:focus,
.btn-warning:active,
.btn-warning:disabled {
    background: var(--kd-akzent);
    color: var(--kd-akzent-text);
    border: 0;
    border-radius: 999px;
    min-height: 48px;
    padding: 0.75rem 1.75rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
}

@media (hover: hover) and (pointer: fine) {
    .btn-warning:hover {
        background: var(--kd-ink);
        color: var(--kd-papier);
    }
}

/* umrandete Knöpfe (z. B. Export, Speichern im Firmenportal) in der Akzentfarbe */
.btn-outline-warning,
.btn-outline-warning:focus {
    color: var(--kd-ink);
    border: 2px solid var(--kd-akzent);
    background: transparent;
    border-radius: 999px;
}

@media (hover: hover) and (pointer: fine) {
    .btn-outline-warning:hover {
        background: var(--kd-akzent);
        border-color: var(--kd-akzent);
        color: var(--kd-akzent-text);
    }
}

/* „Zurück“ als ruhige Pille */
.btn-warning.pull-left,
.btn-warning.pull-left:focus,
.btn-warning.pull-left:active {
    background: var(--kd-feld);
    color: var(--kd-ink);
    margin-top: 1.5rem;
}

.card .btn-warning.pull-left,
.card .btn-warning.pull-left:focus {
    margin-top: 0;
}

.btn-danger,
.btn-danger:focus,
.btn-danger:active {
    background: #b3261e;
    color: #ffffff;
    border: 0;
    border-radius: 1.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    white-space: normal;
    line-height: 1.25;
}

/* ---------- Studio-Auswahl: Karten als Zeilen mit rundem Pfeil ---------- */
/* nicht auf den Seiten des modernen Vertragsabschlusses und nicht für Tarifkarten */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte):not(:has(input, select, textarea, form, table, .row)):has(> .card) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0.75rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    column-gap: 0.875rem;
    align-items: center;
    text-align: left;
    height: auto !important;
    padding: 1rem 1rem 1rem 1.25rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body {
    display: contents;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > h5.card-title {
    grid-column: 1;
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > p {
    grid-column: 1;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kd-text);
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    border: 0;
    padding: 0;
}

/* Runder Pfeil; die ganze Karte ist die Tippfläche */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer > .btn {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    font-size: 0;
    letter-spacing: 0;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer > .btn::before {
    content: "";
    width: 0.625rem;
    height: 0.625rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateX(-2px) rotate(45deg);
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer > .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):active {
    transform: scale(0.985);
}


@media (min-width: 768px) {
    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte):not(:has(input, select, textarea, form, table, .row)):has(> .card) {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        margin-bottom: 1.25rem !important;
    }
}

/* ---------- Auswahlkarten groß und untereinander (Studios, Aktionen) ---------- */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte):not(:has(input, select, textarea, form, table, .row)):has(> .card) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 46rem !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    margin-bottom: 0.875rem !important;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) {
    grid-template-columns: 3.25rem minmax(0, 1fr) 3rem;
    column-gap: 1.125rem;
    padding: 1.25rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body::before {
    content: "\f3c5"; /* Standort */
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kd-akzent-hell);
    color: var(--kd-akzent);
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="GetContractsPage"]) > .card-body::before { content: "\f573"; }            /* Vertrag */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="aktion=True"]) > .card-body::before { content: "\f02b"; }                 /* Aktion */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="firmenvertrag=True"]) > .card-body::before { content: "\f1ad"; }          /* Firmenvertrag */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="BlockCard"]) > .card-body::before { content: "\f3ff"; }                   /* Blockkarte / Event */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="istevent=1"]) > .card-body::before { content: "\f783"; }
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="TrialWorkout"]) > .card-body::before { content: "\f44b"; }                /* Probetraining */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="bringYourFriend=True"]) > .card-body::before { content: "\f500"; }
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)):has(a[href*="Course"]) > .card-body::before { content: "\f073"; }                      /* Kurse */

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > h5.card-title,
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > p {
    grid-column: 2;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > h5.card-title {
    font-size: 1.1875rem;
    margin-bottom: 0.3rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-body > p {
    font-size: 0.9375rem;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer {
    grid-column: 3;
}

.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) > .card-footer > .btn {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
}

/* Auswahlseiten: Zurück-Knopf mit Abstand unter den Karten */
.row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) ~ .col-lg-12 > .btn-warning.pull-left {
    margin-top: 1.25rem;
}

/* ---------- Startbildschirm ---------- */
section.overflow-hidden:has(#carouselExampleIndicators .carousel-item) {
    position: relative;
    background: var(--kd-akzent);
    padding: 0.25rem 1rem 0;
}

section.overflow-hidden:has(#carouselExampleIndicators .carousel-item)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 45%;
    background: var(--kd-bild) center / cover fixed, var(--kd-papier);
    border-radius: 2rem 2rem 0 0;
}

#carouselExampleIndicators {
    position: relative;
    z-index: 1;
    max-width: 1296px;
    margin: 0 auto;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: var(--kd-schatten-hoch);
}

/* Bildpunkte rechts unten, damit sie nichts in der Bildmitte (z. B. Logo) verdecken */
#carouselExampleIndicators .carousel-indicators {
    left: auto;
    right: 1rem;
    bottom: 0.75rem;
    transform: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    gap: 0.375rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

#carouselExampleIndicators .carousel-indicators button {
    width: 1.5rem;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background-color: #ffffff;
}

#carouselExampleIndicators .carousel-indicators .active {
    background-color: var(--kd-akzent);
}

/* Startbild auf dem Handy: ganzes Bild zeigen, nicht zuschneiden.
   Geändert 20.10.2026 (Befund Level20): Banner tragen oft Schrift bis an den Rand; die frühere feste Höhe mit Zuschnitt
   (9.5rem, object-fit: cover) hat diese Schrift links und rechts abgeschnitten. */
@media (max-width: 767.98px) {
    #carouselExampleIndicators .carousel-item img {
        height: auto;
        object-fit: contain;
    }

    #carouselExampleIndicators .carousel-control-prev,
    #carouselExampleIndicators .carousel-control-next {
        display: none;
    }

    #carouselExampleIndicators .carousel-indicators {
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.3rem 0.5rem;
    }

    #carouselExampleIndicators .carousel-indicators button {
        width: 1rem;
    }
}

/* Karten des Startbildschirms (Zeile mit der Konto-Karte): breit, große Überschrift, Knopf rechts */
.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:has(> .card > .card-footer) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 1rem !important;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem; /* gleich breite Knopfspalte: alle Knöpfe bündig untereinander */
    align-items: center;
    column-gap: 2rem;
    text-align: left;
    height: auto !important;
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    border-radius: 1.75rem;
}

/* alle Karten gleich: feine Linie; Hover kommt einheitlich aus TS-Web2 (Content/Site.css) */
.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) {
    border-color: var(--kd-line);
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-body {
    text-align: left;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-body {
    padding: 0;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-body > h5.card-title {
    font-size: clamp(1.625rem, 1.2rem + 2vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-body > .card-text {
    margin: 0;
    max-width: 44ch;
    line-height: 1.55;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-footer {
    border: 0;
    padding: 0;
}

.row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-footer > .btn {
    width: 100%;
    min-height: 56px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
}

@media (max-width: 767.98px) {
    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) {
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4 > .card:has(> .card-footer) > .card-footer > .btn {
        width: 100%;
    }
}

/* Desktop: zwei Spalten. Bei ungerader Anzahl wird die erste Karte breit (meist "Mitglied werden"), damit keine Karte allein steht.
   Schmale Karten: Titel, Text, Knopf untereinander; gleich hoch je Reihe, Knöpfe auf einer Linie. Breite Karte: wie bisher Knopf rechts. */
@media (min-width: 992px) {
    /* gleicher Abstand zwischen Spalten und Reihen */
    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:has(> .card > .card-footer) {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        margin-top: 1.5rem !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:has(> .card > .card-footer) > .card {
        height: 100% !important;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        row-gap: 1.5rem;
        align-items: start;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:has(> .card > .card-footer) > .card > .card-body > .card-text {
        max-width: none;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:has(> .card > .card-footer) > .card > .card-footer > .btn {
        width: auto;
        min-width: 14rem;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:first-child:nth-last-child(odd):has(> .card > .card-footer) {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:first-child:nth-last-child(odd):has(> .card > .card-footer) > .card {
        grid-template-columns: minmax(0, 1fr) 14rem;
        grid-template-rows: auto;
        align-items: center;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:first-child:nth-last-child(odd):has(> .card > .card-footer) > .card > .card-body > .card-text {
        max-width: 44ch;
    }

    .row:has(a[href*="/Account/Login"], a[href*="/Person/MyAccount"]) > .col-lg-4:first-child:nth-last-child(odd):has(> .card > .card-footer) > .card > .card-footer > .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- Formulare ---------- */
.form-outline .form-control,
.form-control:not(.form-outline .form-control),
.form-select,
select.form-control,
.select-input.form-control {
    min-height: 52px;
    padding: 0.75rem 1rem;
    background-color: var(--kd-feld) !important;
    border: 1px solid var(--kd-line);
    border-radius: 1rem;
    color: var(--kd-ink);
    font-size: 1rem;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.form-outline .form-control ~ .form-notch div {
    border-color: transparent !important;
}

.form-outline .form-control ~ .form-label {
    left: 1rem;
    padding-top: 0.9rem;
    color: var(--kd-mute);
}

/* Fokus-Rand in Akzentfarbe. !important, weil MDB an .form-outline .form-control:focus den Schatten mit !important abschaltet –
   sonst war bei Feldern mit Beschriftung im Feld nicht zu sehen, welches Feld aktiv ist (Korrektur 21.10.2026) */
.form-outline .form-control:focus,
.form-control:not(.form-outline .form-control):focus,
.form-select:focus {
    background-color: var(--kd-karte) !important;
    box-shadow: 0 0 0 2px var(--kd-akzent) !important;
}

.form-outline .form-control:focus ~ .form-label,
.form-outline .form-control.active ~ .form-label {
    transform: translateY(-0.6rem) scale(0.72);
    color: var(--kd-mute);
}

.form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-check-label {
    color: var(--kd-ink);
}

.field-validation-error {
    display: block;
    text-align: left;
    color: var(--kd-fehler);
    font-size: 0.875rem;
    margin-top: 0.375rem;
}

/* Anmeldung: schmale Karte, Knopf über die ganze Breite */
.row:has(> .col-lg-4 > form) {
    flex-direction: column;
    align-items: center;
}

/* Login-Karten mittig untereinander mit Abstand */
.row:has(> .col-lg-4 > form) > .col-lg-4 {
    flex: 0 0 auto;
    width: min(100%, 30rem);
    max-width: 30rem;
    margin: 0 auto 1rem !important;
}

.row:has(> .col-lg-4 > form) > .col-lg-4 > form,
.row:has(> .col-lg-4 > form) > .col-lg-4 > .card {
    height: auto !important;
}

.row:has(> .col-lg-4 > form) .card {
    text-align: left;
    height: auto !important;
    border-radius: 1.75rem;
}

.row:has(> .col-lg-4 > form) .card-footer {
    border: 0;
    padding-top: 0;
}

.row:has(> .col-lg-4 > form) .card-footer .btn {
    width: 100%;
    min-height: 56px;
    font-size: 0.9375rem;
}

/* ---------- Tabellen (Beitragskalender, Pokale, Dokumente …) ---------- */
.table {
    background-color: transparent !important;
    color: var(--kd-text);
    --mdb-table-bg: transparent;
    --mdb-table-striped-bg: color-mix(in srgb, var(--kd-ink) 3%, transparent);
    --mdb-table-hover-bg: var(--kd-akzent-hell);
    border-color: var(--kd-line);
}

.table > :not(caption) > * > * {
    border-color: var(--kd-line);
    color: var(--kd-text);
}

.table th,
.table thead td {
    color: var(--kd-ink);
    font-weight: 700;
}

@media only screen and (max-width: 800px) {
    /* jede Tabellenzeile wird zur dunklen Karte */
    .table tr {
        background: var(--kd-feld);
        border: 1px solid var(--kd-line) !important;
        border-radius: 1rem;
        overflow: hidden;
        margin-bottom: 0.75rem;
    }

    .table td:not(.datepicker-cell) {
        border-bottom: 1px solid var(--kd-line) !important;
        box-shadow: none !important;
    }

    .table td:not(.datepicker-cell):last-child {
        border-bottom: 0 !important;
    }

    .table td:not(.datepicker-cell):before {
        color: var(--kd-mute);
        font-weight: 600;
    }
}

/* ---------- Akkordeon (Menü unter „Mein Account“ u. a.) ---------- */
.accordion-item,
.accordion-button {
    background-color: var(--kd-feld) !important;
    color: var(--kd-ink) !important;
    border-color: var(--kd-line) !important;
}

.accordion-item:first-of-type,
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

.accordion-button:not(.collapsed) {
    color: var(--kd-akzent) !important;
    box-shadow: inset 0 -1px 0 var(--kd-line) !important;
}


.accordion-body {
    background-color: var(--kd-karte);
}

/* ---------- Auswahlfelder mit Suche (Selectize, z. B. Filter der Video Area) ---------- */
.selectize-control .selectize-input,
.selectize-control.single .selectize-input,
.selectize-control.multi .selectize-input {
    min-height: 52px;
    padding: 0.75rem 1rem;
    background: var(--kd-feld) !important;
    background-image: none !important;
    border: 1px solid var(--kd-line) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    color: var(--kd-ink);
    font-size: 1rem;
    text-align: left;
}

.selectize-control .selectize-input.focus {
    background: var(--kd-karte) !important;
    box-shadow: 0 0 0 2px var(--kd-akzent) !important;
}

.selectize-control .selectize-input > input {
    color: var(--kd-ink) !important;
}

.selectize-control .selectize-input > input::placeholder {
    color: var(--kd-mute);
}

.selectize-dropdown {
    background: var(--kd-karte) !important;
    border: 1px solid var(--kd-line) !important;
    border-radius: 1rem !important;
    color: var(--kd-ink) !important;
    overflow: hidden;
    margin-top: 0.25rem;
}

.selectize-dropdown .option,
.selectize-dropdown .create {
    padding: 0.6rem 1rem;
    color: var(--kd-ink);
}

.selectize-dropdown .active {
    background: var(--kd-akzent-hell) !important;
    color: var(--kd-ink) !important;
}

/* gewählte Filterwerte und Kategorien an den Videos */
.selectizeItemCustom,
.chipsfilteritems {
    background-color: var(--kd-akzent-hell) !important;
    color: var(--kd-ink) !important;
    border-radius: 999px !important;
}

.chipsfiltergroups {
    background-color: var(--kd-feld);
    color: var(--kd-text);
    border-radius: 999px;
}

/* ---------- Kursplan (Kalender) ---------- */
#calendar {
    text-align: left;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#calendar .fc-button,
#calendar .fc-state-default {
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 1rem;
    background: var(--kd-feld);
    background-image: none;
    border: 0;
    border-radius: 999px !important;
    box-shadow: none;
    text-shadow: none;
    color: var(--kd-ink) !important;
    font-weight: 700;
    font-size: 0.875rem;
    opacity: 1;
}

#calendar .fc-state-active,
#calendar .fc-state-down {
    background: var(--kd-akzent);
    color: var(--kd-akzent-text) !important;
}

#calendar .fc-state-hover {
    background: var(--kd-akzent-hell);
}

#calendar th,
#calendar td,
#calendar .fc-widget-header,
#calendar .fc-widget-content {
    border-color: var(--kd-line);
}

#calendar .fc-event {
    background: var(--kd-akzent);
    border: 0;
    border-radius: 0.625rem;
    color: var(--kd-akzent-text);
    padding: 0.125rem 0.375rem;
    font-weight: 600;
}

/* ---------- Fußzeile ---------- */
/* Luft zwischen den letzten Knöpfen (Zurück, Weiter) und der Fußzeile; die Fußzeile selbst klebt unten (margin-top: auto) */
body.mainbackground > .body-content {
    padding-bottom: 3.5rem;
}

footer {
    background: var(--kd-fuss);
    padding-top: 1.75rem;
    border-radius: 2rem 2rem 0 0;
    border-top: 1px solid var(--kd-line);
}

/* Social-Media- und App-Store-Links (Facebook, Instagram, YouTube, App Store, Google Play): beschriftete Pillen.
   Die Beschriftung kommt per CSS aus dem Symbol (Markennamen, daher sprachunabhängig); die festen Markenfarben aus dem
   style-Attribut der Layout-Seite werden überschrieben. Handy (< 480 px): soziale Netzwerke nur als Symbol, Stores mit Text. */
footer section:has(> .btn-floating) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

footer .btn-floating {
    width: auto !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 1.125rem 0 0.95rem !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    background: var(--kd-karte) !important;
    color: var(--kd-ink) !important;
    border: 1px solid var(--kd-line) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--kd-ink) 6%, transparent) !important;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

footer .btn-floating i {
    font-size: 1.125rem;
    line-height: 1;
    width: auto;
}

footer .btn-floating:has(.fa-facebook-f)::after { content: "Facebook"; }
footer .btn-floating:has(.fa-instagram)::after { content: "Instagram"; }
footer .btn-floating:has(.fa-youtube)::after { content: "YouTube"; }
footer .btn-floating:has(.fa-apple)::after { content: "App Store"; }
footer .btn-floating:has(.fa-google-play)::after { content: "Google Play"; }

@media (hover: hover) and (pointer: fine) {
    footer .btn-floating:hover {
        background: var(--kd-akzent) !important;
        border-color: var(--kd-akzent) !important;
        color: var(--kd-akzent-text) !important;
        transform: translateY(-1px);
    }
}

footer .btn-floating:focus-visible {
    outline: 2px solid var(--kd-ink);
    outline-offset: 2px;
}

@media (max-width: 479.98px) {
    footer section:has(> .btn-floating) {
        gap: 0.4rem;
        padding: 0 0.75rem;
    }

    footer .btn-floating {
        padding: 0 0.9rem 0 0.8rem !important;
        gap: 0.45rem;
        font-size: 0.75rem;
    }

    footer .btn-floating:is(:has(.fa-facebook-f), :has(.fa-instagram), :has(.fa-youtube)) {
        width: 44px !important;
        padding: 0 !important;
        justify-content: center;
    }

    footer .btn-floating:is(:has(.fa-facebook-f), :has(.fa-instagram), :has(.fa-youtube))::after {
        content: none;
    }
}

#FooterText {
    background: transparent;
    border-top: 1px solid var(--kd-line);
    color: var(--kd-mute);
    font-size: 0.8125rem;
    line-height: 2.25;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

#FooterText .btn-outline-dark,
#FooterText .btn-outline-dark:hover {
    border: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--kd-ink);
    background: transparent;
}

#FooterText .btn-outline-dark:hover {
    color: var(--kd-akzent);
}

/* ---------- Cookie-Leiste ---------- */
/* Die Cookie-Leiste sperrt das Scrollen nicht (MDB setzt sonst overflow: hidden am Body,
   wodurch auch die stehende Kopfzeile nicht mehr oben bleibt) */
body.modal-open:has(#CookieModelButtom.show) {
    overflow: visible !important;
    padding-right: 0 !important;
}

#CookieModelButtom .modal-content {
    background: var(--kd-karte);
    border: 0;
    border-radius: 1.5rem 1.5rem 0 0;
}

#CookieModelButtom .btn {
    width: auto;
    border-radius: 999px;
    min-height: 44px;
    padding: 0 1.5rem;
    margin: 0.25rem;
}

#CookieModelButtom .btn-success,
#CookieModelButtom .cookie-consent-accept {
    background: var(--kd-akzent) !important;
    color: var(--kd-akzent-text) !important;
    border: 0 !important;
}

#CookieModelButtom .btn-danger,
#CookieModelButtom .cookie-consent-decline {
    background: var(--kd-feld) !important;
    color: var(--kd-ink) !important;
    border: 0 !important;
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte) > .card:not(:has(input, select, textarea, form, table, .row)) {
        animation: kd-zeile 320ms var(--kd-ease) backwards;
    }

    @keyframes kd-zeile {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active,
    .card:active {
        transform: none !important;
    }
}

/* Helle Akzentfarbe (automatisch erkannt): Pillen in der Kopfzeile dunkel getönt statt weiß */
html.ts-akzent-hell .navbar-expand-lg #navbarNav .nav-link {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html.ts-akzent-hell .navbar-expand-lg #navbarNav .nav-link:hover,
html.ts-akzent-hell .navbar-expand-lg #navbarNav .nav-link:focus-visible {
    background: rgba(0, 0, 0, 0.14);
}

/* Durchscheinende Karten (Option Hintergrundbild): Bild dahinter weichzeichnen */
.card,
.dropdown-menu,
#CookieModelButtom .modal-content {
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}

/* ---------- Glas: Werte stehen oben im Schalter GLAS (unabhängig vom Hintergrundbild) ---------- */
/* System-Einstellung „Transparenz reduzieren“: deckende Karten, keine Unschärfe */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --kd-karte: var(--kd-karte-deckend);
        --kd-feld: var(--kd-feld-deckend);
    }

    .card,
    .dropdown-menu,
    #CookieModelButtom .modal-content,
    footer {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Auswahlkarten zweispaltig, wenn die Breite es zulässt (ungerade Anzahl: letzte Karte mittig) */
@media (min-width: 992px) {
    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) {
        justify-content: center;
    }

    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)) > .col-lg-4:not(.vk-tarifspalte):not(:has(input, select, textarea, form, table, .row)):has(> .card) {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 37rem !important;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------- Studioauslastung (CheckinCounter): Karten wie die Studioauswahl, Ampel als Badge ---------- */
.cc-auslastung {
    --cc-gruen: #34c759;
    --cc-gelb: #ffb800;
    --cc-rot: #ff453a;
    --cc-symbol-grund: var(--kd-akzent-hell, var(--bf-yellow-hell, rgba(0, 0, 0, 0.06)));
    --cc-symbol: var(--kd-akzent, var(--bf-ink, currentColor));
    --cc-linie: var(--kd-line, var(--bf-line, rgba(0, 0, 0, 0.1)));
    --cc-stark: var(--kd-ink, var(--bf-ink, inherit));
    --cc-leise: var(--kd-mute, var(--bf-mute, inherit));
}

/* eine Spalte, ab 992px zwei (ungerade Anzahl: letzte Karte mittig) */
.cc-auslastung > .cc-spalte {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 46rem !important;
    margin: 0 auto 0.875rem !important;
}

@media (min-width: 992px) {
    .cc-auslastung > .cc-spalte {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 37rem !important;
        margin: 0 0 1.25rem !important;
    }
}

.cc-auslastung .cc-karte {
    text-align: left;
}

.cc-auslastung .cc-karte > .card-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 1.125rem;
    align-items: center;
    padding: 1.25rem;
}

/* Standort-Symbol links wie in der Studioauswahl */
.cc-auslastung .cc-karte > .card-body::before {
    content: "\f3c5";
    grid-column: 1;
    grid-row: 1;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-symbol-grund);
    color: var(--cc-symbol);
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.25rem;
}

.cc-auslastung .cc-kopf {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    background: none !important;
    box-shadow: none !important;
    text-align: left;
}

.cc-auslastung .cc-kopf > h4.card-title {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--cc-stark);
}

/* Ampel als Badge mit Punkt */
.cc-auslastung .cc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.25rem 0.7rem !important;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cc-ampel, var(--cc-stark)) !important;
    background: color-mix(in srgb, var(--cc-ampel, currentColor) 16%, transparent);
}

.cc-auslastung .cc-status::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.cc-auslastung .cc-ampel-gruen { --cc-ampel: var(--cc-gruen); }
.cc-auslastung .cc-ampel-gelb { --cc-ampel: var(--cc-gelb); }
.cc-auslastung .cc-ampel-rot { --cc-ampel: var(--cc-rot); }

/* Werte als Zeilen unter dem Kopf: Beschriftung links, Zahl rechts */
.cc-auslastung .cc-wert {
    grid-column: 1 / -1;
    margin: 0;
}

.cc-auslastung .cc-kopf + .cc-wert {
    margin-top: 1rem;
    border-top: 1px solid var(--cc-linie);
}

.cc-auslastung .cc-wert > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0 0;
}

.cc-auslastung .cc-wert > div > label {
    float: none !important;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--cc-leise);
}

.cc-auslastung .cc-wert > div > label:last-child {
    font-weight: 700;
    color: var(--cc-stark);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- Menüs der Kopfzeile: Farben auch beim Klicken und für den aktiven Eintrag (sonst MDB-Blau bzw. Hellgrau) ---------- */
.dropdown-menu {
    --cc-dd-grund: var(--kd-karte, var(--bf-card, #ffffff));
    --cc-dd-schrift: var(--kd-ink, var(--bf-ink, #141414));
    --cc-dd-hover: var(--kd-akzent-hell, var(--bf-yellow-hell, rgba(0, 0, 0, 0.06)));
    --cc-dd-linie: var(--kd-line, var(--bf-line, rgba(0, 0, 0, 0.1)));
    color: var(--cc-dd-schrift);
    margin-top: 0.5rem !important;
    min-width: 12rem;
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cc-dd-schrift) !important;
    white-space: normal;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
    background: var(--cc-dd-hover) !important;
    color: var(--cc-dd-schrift) !important;
}

.dropdown-menu .dropdown-item.active {
    background: var(--ts-akzent, var(--kd-akzent, var(--bf-yellow))) !important;
    color: var(--ts-akzent-text, #ffffff) !important;
}

.dropdown-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--ts-akzent, var(--kd-akzent, currentColor));
    outline-offset: -2px;
}

.dropdown-menu .dropdown-item .flag {
    margin-right: 0 !important;
}

/* Haken der gewählten Sprache in Akzentfarbe statt Grün */
.dropdown-menu .dropdown-item .fa-check {
    color: var(--kd-akzent, var(--bf-ink)) !important;
    margin-left: auto !important;
}

.dropdown-menu .dropdown-divider {
    border-top-color: var(--cc-dd-linie);
    margin: 0.375rem 0.25rem;
    opacity: 1;
}

/* geöffneter Knopf bleibt hervorgehoben */
.navbar-expand-lg #navbarNav .nav-link.show,
.navbar-expand-lg #navbarNav .nav-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.28);
}

/* ---------- Kursplan (Wochenansicht): Tage als Karten, Kurse als Kacheln mit Farbstreifen ---------- */
.ns-calendar {
    --kp-karte: var(--kd-karte, var(--bf-card, #ffffff));
    --kp-feld: var(--kd-feld, var(--bf-feld, #f3f3f1));
    --kp-linie: var(--kd-line, var(--bf-line, rgba(0, 0, 0, 0.1)));
    --kp-stark: var(--kd-ink, var(--bf-ink, #141414));
    --kp-leise: var(--kd-mute, var(--bf-mute, #8a8a8a));
    --kp-akzent: var(--ts-akzent, var(--kd-akzent, var(--bf-yellow, #ebc917)));
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.625rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    width: 100%;
    text-align: left;
}

.ns-calendar .cal-block {
    float: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--kp-linie);
    border-radius: 1.25rem;
    background: var(--kd-glas-glanz, none), var(--kp-karte);
    box-shadow: var(--kd-glas-innen, 0 0 0 transparent), var(--kd-schatten, var(--bf-schatten, 0 0 0 transparent));
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
}

/* Tageskopf: Wochentag und Datum, heute in Akzentfarbe */
.ns-calendar .cal-block > h5 {
    margin: 0 0 0.375rem !important;
    padding: 0.5rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--kp-stark);
    border-radius: 0.875rem;
}

.ns-calendar .cal-block.heute {
    border-color: var(--kp-akzent);
}

.ns-calendar .cal-block.heute > h5 {
    background: var(--kp-akzent);
    color: var(--ts-akzent-text, #ffffff);
}

.ns-calendar .events {
    padding: 0;
    margin: 0;
    overflow: visible;
}

.ns-calendar .events:empty::after {
    content: "–";
    display: block;
    padding: 0.75rem 0;
    text-align: center;
    color: var(--kp-leise);
}

/* Kurs: Kachel mit Farbstreifen der Kursfarbe */
.ns-calendar .events .li-calender {
    position: relative;
    margin: 0 0 0.5rem;
    padding: 0.625rem 0.625rem 0.625rem 0.875rem;
    border: 1px solid var(--kp-linie) !important;
    border-left: 4px solid var(--kurs-farbe, var(--kp-akzent)) !important;
    border-radius: 0.875rem;
    background: var(--kp-feld);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--kp-leise);
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ns-calendar .events .li-calender:last-child {
    margin-bottom: 0;
}

.ns-calendar .events .li-calender:hover {
    background: var(--kp-feld);
    border-color: var(--kp-akzent) !important;
    border-left-color: var(--kurs-farbe, var(--kp-akzent)) !important;
    transform: translateY(-1px);
}

.ns-calendar .events .li-calender.vergangen {
    opacity: 0.45;
}

.ns-calendar .li-calender .row {
    margin: 0;
    row-gap: 0.15rem;
}

.ns-calendar .li-calender .row > [class*="col-"] {
    padding: 0;
}

.ns-calendar .event-title {
    float: none;
    width: auto;
    padding-right: 1.5rem;
    margin-bottom: 0.2rem;
    white-space: normal;
    overflow: visible;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--kp-stark);
}

.ns-calendar .event-title:hover {
    color: var(--kp-stark);
}

/* Info als kleiner runder Knopf oben rechts */
.ns-calendar .event-info {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    float: none !important;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.625rem;
    color: var(--kp-leise);
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.ns-calendar .event-info:hover {
    color: var(--kp-akzent);
}

.ns-calendar .li-calender .fa {
    width: 0.9rem;
    margin-right: 0.3rem !important;
    margin-top: 0.15rem !important;
    opacity: 0.7;
    text-align: center;
}

/* Buchungsknöpfe (Kursbuchung) in der Kachel */
.ns-calendar .li-calender .text-center.mt-3 {
    margin-top: 0.5rem !important;
}

.ns-calendar .li-calender .btn {
    width: 100%;
    min-height: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: normal;
}

/* schmaler: Tage untereinander als Karten */
@media (max-width: 1179px) {
    .ns-calendar {
        grid-template-columns: minmax(0, 1fr);
        max-width: 46rem;
        margin: 0 auto;
    }

    .ns-calendar .cal-block {
        padding: 0.75rem;
    }

    .ns-calendar .cal-block > h5 {
        text-align: left !important;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
    }

    .ns-calendar .events .li-calender {
        font-size: 0.875rem;
        padding: 0.75rem 0.875rem 0.75rem 1rem;
    }

    .ns-calendar .event-title {
        font-size: 1rem;
    }
}

/* mittlere Breite: Kurse eines Tages nebeneinander */
@media (min-width: 640px) and (max-width: 1179px) {
    .ns-calendar .events {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .ns-calendar .events .li-calender {
        margin: 0;
    }
}

/* Info-Symbol mittig im Kreis (die Abstände der übrigen Symbole gelten hier nicht) */
.ns-calendar .event-info .fa {
    width: auto;
    margin: 0 !important;
    opacity: 1;
    line-height: 1;
}

/* Schließen-X in Modals (Bootstrap-4-Klasse .close, in MDB 5 ungestaltet und schwarz) */
.modal .close,
.modal .btn-close {
    background: none;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--kd-ink, var(--bf-ink, currentColor));
    opacity: 0.75;
    text-shadow: none;
}

.modal .close:hover,
.modal .close:focus-visible {
    opacity: 1;
    color: var(--kd-akzent, var(--bf-ink, currentColor));
}

/* 7-Tage-Ansicht: Uhrzeit einzeilig, die Dauer bewusst als eigene Zeile darunter (bündig unter der Uhrzeit) statt zufälligem Umbruch */
@media (min-width: 1180px) {
    .ns-calendar .kp-zeit {
        white-space: nowrap;
    }

    .ns-calendar .kp-dauer {
        display: block;
        font-size: 0.72rem;
        opacity: 0.8;
    }
}

/* ---------- Barrierefreiheit (WCAG 2.1 AA): Kursplan ---------- */
/* "heute" mit Schrift: kontrastsichere Akzentfläche (von TS-Web2 berechnet, sonst die Akzentfarbe) */
.ns-calendar .cal-block.heute > h5 {
    background: var(--ts-akzent-flaeche, var(--kp-akzent));
}

/* Info ist ein echter Button: Browser-Stil zurücksetzen, Zielfläche 28 px */
.ns-calendar .event-info {
    border: 0;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    font-size: 0.7rem;
}

/* vergangene Kurse: gedämpfte Farben statt Deckkraft, damit die Schrift lesbar bleibt (mind. 4,5:1) */
.ns-calendar .events .li-calender.vergangen {
    opacity: 1;
    border-left-color: var(--kp-linie) !important;
}

.ns-calendar .events .li-calender.vergangen,
.ns-calendar .events .li-calender.vergangen .event-title {
    color: var(--kp-leise);
}

/* ==========================================================================
   Nachtrag 16.10.2026: Zustimmung (AGB/Hausordnung) und Dialoge im Kartenstil
   ========================================================================== */
/* "Hiermit bestätige ich die AGB und Hausordnung": Links auf einer Linie mit dem Text (der alte Rand m-1 versetzt sie im Flex-Layout) */
.form-check:has(> a[data-mdb-toggle="modal"]) {
    flex-wrap: wrap;
    column-gap: 0.3rem;
    row-gap: 0;
}

.form-check:has(> a[data-mdb-toggle="modal"]) > .form-check-label {
    float: none !important;
}

.form-check > a[data-mdb-toggle="modal"] {
    margin: 0 !important;
    color: var(--kd-akzent, var(--bf-ink));
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.form-check > a[data-mdb-toggle="modal"]:hover,
.form-check > a[data-mdb-toggle="modal"]:focus-visible {
    text-decoration-thickness: 2px;
}

/* Hinweise (z. B. "Der Beitrag wird über Ihren Arbeitgeber abgerechnet") im Kartenstil statt hellblau */
.card .alert-info {
    background: var(--kd-akzent-hell, var(--bf-yellow-hell));
    border: 1px solid var(--kd-line, var(--bf-line));
    border-left: 3px solid var(--kd-akzent, var(--bf-ink));
    border-radius: 0.875rem;
    color: var(--kd-text, var(--bf-text));
    text-align: left;
}

.card .alert-info strong {
    color: var(--kd-ink, var(--bf-ink));
}

/* Dialoge (AGB, Hausordnung, Datenschutz, ...) wie die Karten; Cookie-Hinweis hat eigene Regeln */
.modal:not(#CookieModelButtom) .modal-content {
    /* deckend, auch wenn die Karten halbtransparent sind (Glas-Variante mit Hintergrundbild) */
    background: linear-gradient(var(--kd-karte, var(--bf-card)), var(--kd-karte, var(--bf-card))), var(--kd-papier, var(--bf-paper));
    color: var(--kd-text, var(--bf-text));
    border: 1px solid var(--kd-line, var(--bf-line));
    border-radius: 1.25rem;
    box-shadow: var(--kd-schatten-hoch, var(--bf-schatten-hoch));
    overflow: hidden;
    text-align: left;
}

.modal:not(#CookieModelButtom) .modal-header {
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--kd-line, var(--bf-line));
}

.modal:not(#CookieModelButtom) .modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    color: var(--kd-ink, var(--bf-ink));
}

.modal:not(#CookieModelButtom) .modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: left;
    color: var(--kd-text, var(--bf-text));
    line-height: 1.6;
    scrollbar-color: var(--kd-mute, var(--bf-mute)) transparent;
    scrollbar-width: thin;
}

.modal:not(#CookieModelButtom) .modal-body :is(h1, h2, h3, h4, h5, h6) {
    color: var(--kd-ink, var(--bf-ink));
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    margin: 1.5rem 0 0.5rem;
}

.modal:not(#CookieModelButtom) .modal-body > :first-child,
.modal:not(#CookieModelButtom) .modal-body > :first-child > :first-child {
    margin-top: 0;
}

.modal:not(#CookieModelButtom) .modal-body h1 { font-size: 1.4rem; }
.modal:not(#CookieModelButtom) .modal-body h2 { font-size: 1.15rem; }
.modal:not(#CookieModelButtom) .modal-body :is(h3, h4, h5, h6) { font-size: 1rem; }

/* Rechtstexte linksbündig lesen, auch wenn der hinterlegte Text zentriert ist */
.modal:not(#CookieModelButtom) .modal-body :is(.text-center, [align=center], center) {
    text-align: left !important;
}

.modal:not(#CookieModelButtom) .modal-body p {
    margin-bottom: 0.75rem;
}

.modal:not(#CookieModelButtom) .modal-body a {
    color: var(--kd-akzent, var(--bf-ink));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal:not(#CookieModelButtom) .modal-footer {
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--kd-line, var(--bf-line));
}

.modal:not(#CookieModelButtom) .modal-footer .btn {
    margin: 0;
}

/* Hintergrund hinter dem Dialog leicht abdunkeln und weichzeichnen */
.modal-backdrop.show {
    opacity: 0.7;
}

@supports (backdrop-filter: blur(4px)) {
    .modal:not(#CookieModelButtom).show {
        backdrop-filter: blur(4px);
    }
}

@media (max-width: 575.98px) {
    .modal:not(#CookieModelButtom) .modal-header,
    .modal:not(#CookieModelButtom) .modal-body,
    .modal:not(#CookieModelButtom) .modal-footer {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

/* ==========================================================================
   Nachtrag 16.10.2026: Auswahlfelder (MDB-Select, Selectize) wie die Eingabefelder
   ========================================================================== */
/* Pfeil als feiner Chevron (wie das Kalendersymbol) statt gefülltem Dreieck; zeigt beim Öffnen nach oben */
.select-wrapper .select-arrow {
    content: "" !important;
    font-size: 0 !important;
    width: 0.5rem;
    height: 0.5rem;
    top: 50%;
    right: 1.1rem;
    margin-top: -0.35rem;
    border-right: 2px solid var(--kd-mute, var(--bf-mute));
    border-bottom: 2px solid var(--kd-mute, var(--bf-mute));
    transform: rotate(45deg);
    transition: transform 160ms ease, margin-top 160ms ease, border-color 160ms ease;
    pointer-events: none;
}

.select-wrapper .select-arrow::before,
.select-wrapper .select-arrow::after {
    content: none !important;
}

.select-wrapper .select-input.focused ~ .select-arrow,
.select-wrapper .select-input[aria-expanded="true"] ~ .select-arrow {
    transform: rotate(-135deg);
    margin-top: -0.05rem;
    border-color: var(--kd-akzent, var(--bf-ink));
}

/* Platz für den Pfeil, damit lange Werte nicht darunter laufen */
.select-wrapper .select-input.form-control {
    padding-right: 2.5rem;
    text-overflow: ellipsis;
}

/* Platzhalter-Eintrag ("wählen", "Bitte wählen" ...) ausgewählt: wie ein leeres Feld, nicht wie ein gewählter Wert */
.select-wrapper:has(> select option:checked[value=""]) .select-input.form-control {
    color: var(--kd-mute, var(--bf-mute));
}

/* Aufgeklappte Liste: deckende Karte mit runden Ecken, Einträge als Pillen */
.select-dropdown-container .select-dropdown {
    margin-top: 0.35rem;
    padding: 0.35rem;
    background: linear-gradient(var(--kd-karte, var(--bf-card)), var(--kd-karte, var(--bf-card))), var(--kd-papier, var(--bf-paper));
    border: 1px solid var(--kd-line, var(--bf-line));
    border-radius: 1rem;
    box-shadow: var(--kd-schatten-hoch, var(--bf-schatten-hoch));
    color: var(--kd-text, var(--bf-text));
    overflow: hidden;
}

.select-dropdown-container .select-options-wrapper {
    scrollbar-color: var(--kd-mute, var(--bf-mute)) transparent;
    scrollbar-width: thin;
}

.select-dropdown-container .select-option {
    padding: 0 0.85rem;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--kd-ink, var(--bf-ink));
    font-size: 0.975rem;
}

.select-dropdown-container .select-option:hover,
.select-dropdown-container .select-option.active {
    background: color-mix(in srgb, var(--kd-ink, var(--bf-ink)) 8%, transparent);
}

.select-dropdown-container .select-option.selected {
    background: var(--kd-akzent-hell, var(--bf-yellow-hell));
    color: var(--kd-ink, var(--bf-ink));
    font-weight: 600;
}

.select-dropdown-container .select-option.disabled {
    color: var(--kd-mute, var(--bf-mute));
    opacity: 0.6;
}

/* Menüs der Kopfzeile (Sprache, Konto) wie die Auswahllisten: deckend, sonst färbt die Akzentfarbe der Kopfzeile durch */
.navbar-expand-lg #navbarNav .dropdown-menu,
.dropdown-menu {
    background: linear-gradient(var(--kd-karte, var(--bf-card)), var(--kd-karte, var(--bf-card))), var(--kd-papier, var(--bf-paper));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ... in der Kopfzeile aber in deren Akzentfarbe (leicht abgedunkelt wie die Knöpfe dort), Schrift nach Kontrast (--ts-akzent-text) */
.navbar-expand-lg #navbarNav .dropdown-menu {
    --cc-dd-schrift: var(--ts-akzent-text, #ffffff);
    --cc-dd-hover: rgba(0, 0, 0, 0.14);
    --cc-dd-linie: color-mix(in srgb, var(--ts-akzent-text, #ffffff) 22%, transparent);
    background: linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)), var(--ts-akzent, var(--kd-akzent, var(--bf-yellow)));
    border-color: rgba(0, 0, 0, 0.12);
}

.navbar-expand-lg #navbarNav .dropdown-menu .dropdown-item.active {
    background: rgba(0, 0, 0, 0.24) !important;
    color: var(--cc-dd-schrift) !important;
}

.navbar-expand-lg #navbarNav .dropdown-menu .dropdown-item .fa-check {
    color: var(--cc-dd-schrift) !important;
}

.navbar-expand-lg #navbarNav .dropdown-menu .dropdown-item:focus-visible {
    outline-color: var(--cc-dd-schrift);
}

/* Einträge konzentrisch zum Menü runden (Menü 1.125rem minus Innenabstand und Rand); MDB setzt sonst beim ersten/letzten Eintrag eigene Ecken */
.dropdown-menu .dropdown-item,
.dropdown-menu li:first-child .dropdown-item,
.dropdown-menu li:last-child .dropdown-item {
    border-radius: calc(1.125rem - 0.4375rem) !important;
}

/* Native Auswahlfelder (z. B. Firmenportal): die aufgeklappte Liste zeichnet der Browser; Farbschema und Optionsfarben passend zum Theme */
select.form-select,
select.form-control:not(.select-initialized) {
    color-scheme: var(--kd-schema);
}

select.form-select option,
select.form-control:not(.select-initialized) option {
    background-color: var(--kd-papier, var(--bf-paper));
    color: var(--kd-ink, var(--bf-ink));
}

select.form-select option:checked,
select.form-control:not(.select-initialized) option:checked {
    background-color: color-mix(in srgb, var(--kd-akzent, var(--bf-yellow)) 22%, var(--kd-papier, var(--bf-paper)));
    font-weight: 600;
}

/* Selectize (Video-Filter u. a.) gleich: deckend, Pillen-Einträge */
.selectize-dropdown {
    background: linear-gradient(var(--kd-karte, var(--bf-card)), var(--kd-karte, var(--bf-card))), var(--kd-papier, var(--bf-paper)) !important;
    box-shadow: var(--kd-schatten-hoch, var(--bf-schatten-hoch));
    padding: 0.35rem;
}

.selectize-dropdown .option,
.selectize-dropdown .create {
    border-radius: 0.65rem;
}

/* ==========================================================================
   Nachtrag 16.10.2026: Datepicker (MDB) wie die Karten
   ========================================================================== */
.datepicker-modal-container {
    background: linear-gradient(var(--kd-karte, var(--bf-card)), var(--kd-karte, var(--bf-card))), var(--kd-papier, var(--bf-paper)) !important;
    color: var(--kd-text, var(--bf-text));
    border: 1px solid var(--kd-line, var(--bf-line));
    border-radius: 1.25rem !important;
    box-shadow: var(--kd-schatten-hoch, var(--bf-schatten-hoch));
    overflow: hidden;
}

/* Kopf in der Akzentfarbe, Schrift nach Kontrast (--ts-akzent-text) */
.datepicker-header {
    background: var(--ts-akzent, var(--kd-akzent, var(--bf-yellow))) !important;
    border-radius: 0 !important;
}

.datepicker-header,
.datepicker-header .datepicker-title-text,
.datepicker-header .datepicker-date-text {
    color: var(--ts-akzent-text, #ffffff) !important;
}

/* Monat/Jahr und Pfeile, Wochentage */
.datepicker-main .datepicker-view-change-button,
.datepicker-main .datepicker-previous-button,
.datepicker-main .datepicker-next-button {
    color: var(--kd-ink, var(--bf-ink)) !important;
}

.datepicker-main .datepicker-view-change-button::after {
    border-top-color: var(--kd-ink, var(--bf-ink)) !important;
}

.datepicker-main .datepicker-previous-button::after,
.datepicker-main .datepicker-next-button::after {
    border-top-color: var(--kd-ink, var(--bf-ink)) !important;
    border-left-color: var(--kd-ink, var(--bf-ink)) !important;
}

.datepicker-main .datepicker-previous-button:hover,
.datepicker-main .datepicker-next-button:hover,
.datepicker-main .datepicker-view-change-button:hover {
    background-color: color-mix(in srgb, var(--kd-ink, var(--bf-ink)) 10%, transparent) !important;
    border-radius: 999px;
}

.datepicker-day-heading {
    color: var(--kd-mute, var(--bf-mute)) !important;
    font-weight: 600;
}

/* Tage: wählbar hell, gesperrt (außerhalb min/max) deutlich zurückgenommen, heute mit Akzentring, gewählt in Akzentfarbe */
.datepicker-cell .datepicker-cell-content {
    color: var(--kd-ink, var(--bf-ink));
}

.datepicker-cell.disabled .datepicker-cell-content {
    color: var(--kd-mute, var(--bf-mute)) !important;
    opacity: 0.4;
}

.datepicker-cell:not(.disabled):not(.selected):hover .datepicker-cell-content {
    background-color: color-mix(in srgb, var(--kd-ink, var(--bf-ink)) 10%, transparent) !important;
}

.datepicker-cell.current .datepicker-cell-content {
    border-color: var(--ts-akzent, var(--kd-akzent, var(--bf-ink))) !important;
}

.datepicker-cell.selected .datepicker-cell-content,
.datepicker-cell.selected:hover .datepicker-cell-content {
    background-color: var(--ts-akzent, var(--kd-akzent, var(--bf-yellow))) !important;
    color: var(--ts-akzent-text, #ffffff) !important;
    font-weight: 700;
}

/* Fuß: Knöpfe in Akzentfarbe bzw. bei hellen Akzenten in Schriftfarbe */
.datepicker-footer {
    border-top: 1px solid var(--kd-line, var(--bf-line));
}

.datepicker-footer-btn {
    color: var(--kd-akzent, var(--bf-ink)) !important;
    border-radius: 999px;
}

html.ts-akzent-hell .datepicker-footer-btn {
    color: var(--kd-ink, var(--bf-ink)) !important;
}

.datepicker-footer-btn:hover,
.datepicker-footer-btn:focus {
    background-color: color-mix(in srgb, var(--kd-ink, var(--bf-ink)) 8%, transparent) !important;
}

/* Kalendersymbol im Feld: Schriftfarbe statt fester Farbe, Hover in Akzentfarbe */
.datepicker-toggle-button {
    color: var(--kd-mute, var(--bf-mute)) !important;
}

.datepicker-toggle-button:hover,
.datepicker-toggle-button:focus {
    color: var(--kd-akzent, var(--bf-ink)) !important;
}

/* MDB färbt beim Fokus das Symbol selbst blau (input:focus + .datepicker-toggle-button i): Symbol erbt die Farbe des Knopfs */
.datepicker-toggle-button i,
input:focus + .datepicker-toggle-button i {
    color: inherit !important;
}

input:focus + .datepicker-toggle-button {
    color: var(--kd-akzent, var(--bf-ink)) !important;
}

/* native Datumsfelder (falls noch vorhanden): Kalendersymbol und Auswahl im Farbschema des Themes */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control {
    color-scheme: var(--kd-schema);
}

/* ==========================================================================
   Nachtrag 16.10.2026: flüssiges Scrollen mit Hintergrundbild (--kd-bild)
   - Das Bild liegt als eine fixierte Ebene hinter der Seite (wird von der Grafikkarte verschoben). Vorher hatten body und die
     drei Bögen background-attachment: fixed; schon ein solches Element zwingt Chrome, die ganze Seite auf dem Hauptthread zu
     scrollen und das Bild bei jedem Schritt neu zu zeichnen.
   - Bögen unter Kopfzeile, Seitentitel und Startbild: die runden Ecken werden aus der Akzentfläche ausgestanzt (Maske), statt
     sie mit einer Kopie des Bildes zu übermalen; dahinter scheint der echte Hintergrund durch.
   - Kein Weichzeichner auf Karten, Cookie-Hinweis und Kursplan-Blöcken: bei 72 % deckenden Karten über dem abgedunkelten Bild
     kaum sichtbar, aber bei jedem Bild neu zu berechnen.
   ========================================================================== */
body,
body.mainbackground {
    background: var(--kd-papier) !important;
}

body.mainbackground::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--kd-bild) center / cover no-repeat, var(--kd-papier);
    transform: translateZ(0);
}

/* Kopfzeile: Akzent als eigene Fläche, unten 2rem mit ausgestanzten runden Ecken (das Blatt "schiebt sich darunter hervor") */
.navbar.bg-light {
    background: transparent !important;
}

.navbar.bg-light::before {
    content: "";
    position: absolute;
    inset: 0 0 -2px 0;
    z-index: -1;
    pointer-events: none;
    background: var(--kd-akzent);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 2rem - 2px) no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left 0 bottom 2px / 2rem 2rem no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right 0 bottom 2px / 2rem 2rem no-repeat;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 2rem - 2px) no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left 0 bottom 2px / 2rem 2rem no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right 0 bottom 2px / 2rem 2rem no-repeat;
}

.navbar.bg-light::after {
    display: none !important;
    background: none !important;
}

/* Seiten mit Titel bzw. Startbild: Kopfzeile ganz in Akzentfarbe, der Bogen kommt dort darunter */
.body-content:has(section > .row > h4.card-title:first-child) .navbar.bg-light::before,
.body-content:has(#carouselExampleIndicators .carousel-item) .navbar.bg-light::before {
    inset: 0;
    -webkit-mask: none;
    mask: none;
}

/* Seitentitel: Band bis zur Unterkante, unten 2rem mit ausgestanzten runden Ecken (ersetzt das Blatt ::after) */
section > .row > h4.card-title:first-child::before {
    bottom: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 2rem) no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left bottom / 2rem 2rem no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right bottom / 2rem 2rem no-repeat;
    mask:
        linear-gradient(#000 0 0) top / 100% calc(100% - 2rem) no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left bottom / 2rem 2rem no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right bottom / 2rem 2rem no-repeat;
}

section > .row > h4.card-title:first-child::after {
    display: none;
}

/* Startbild: Akzent oben (55 %), darunter Seitenhintergrund mit runden Ecken */
section.overflow-hidden:has(#carouselExampleIndicators .carousel-item) {
    background: transparent;
}

section.overflow-hidden:has(#carouselExampleIndicators .carousel-item)::before {
    top: 0;
    bottom: 0;
    height: auto;
    border-radius: 0;
    background: var(--kd-akzent);
    -webkit-mask:
        linear-gradient(#000 0 0) top / 100% 55% no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left top / 2rem calc(55% + 2rem) no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right top / 2rem calc(55% + 2rem) no-repeat;
    mask:
        linear-gradient(#000 0 0) top / 100% 55% no-repeat,
        radial-gradient(circle at 100% 100%, #0000 calc(2rem - 0.5px), #000 2rem) left top / 2rem calc(55% + 2rem) no-repeat,
        radial-gradient(circle at 0 100%, #0000 calc(2rem - 0.5px), #000 2rem) right top / 2rem calc(55% + 2rem) no-repeat;
}

/* Weichzeichner nur noch an kleinen Flächen (Menüs, Bildpunkte des Startbilds), nicht auf jeder Karte */
.card,
#CookieModelButtom .modal-content,
.ns-calendar .cal-block {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ==========================================================================
   Nachtrag 19.10.2026: Reste des dunklen MDB-Grundstils an das Theme binden
   TS-Web2 lädt immer Content/mdb.dark.min.css. Alles, was die Vorlage nicht selbst gestaltet, bleibt sonst dunkel bzw. hat
   weiße/hellblaue Schrift und ist im hellen Theme unsichtbar. Alle Regeln nutzen die Theme-Variablen und gelten damit in hell
   und dunkel gleichermaßen. Gefunden per Vergleich mdb.min.css / mdb.dark.min.css gegen die in den Views benutzten Klassen.
   ========================================================================== */

/* Links im Text: MDB-dark färbt sie hellblau (#72a4f7, auf Weiß kaum lesbar). Gleicher Selektor wie in MDB, sonst greift die Regel nicht.
   Schrift in Textfarbe, Unterstreichung in der Akzentfarbe (wie die Links in Karten) */
a:not(.sidenav-link):not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.carousel-control-prev):not(.carousel-control-next) {
    color: var(--kd-ink);
    text-decoration-color: var(--kd-akzent);
    text-underline-offset: 0.2em;
}

a:not(.sidenav-link):not(.btn):not(.dropdown-item):not(.nav-link):not(.navbar-brand):not(.page-link):not(.carousel-control-prev):not(.carousel-control-next):hover {
    color: var(--kd-ink);
    text-decoration-thickness: 2px;
}

/* AGB-/Hausordnungs-Links an der Zustimmung: Akzentfarbe (vorher vom MDB-Link-Hellblau überdeckt); bei heller Akzentfarbe Textfarbe */
.form-check > a[data-mdb-toggle="modal"] {
    color: var(--kd-akzent) !important;
    text-decoration-color: currentColor;
}

html.ts-akzent-hell .form-check > a[data-mdb-toggle="modal"] {
    color: var(--kd-ink) !important;
    text-decoration-color: var(--kd-akzent);
}

/* Beschriftungen und Nebentexte: MDB-dark setzt sie weiß (70 %) bzw. hellgrau */
.form-label,
.form-text,
.input-group-text,
.dropdown-header,
.select-option-group-label,
.select-option-secondary-text,
.select-clear-btn,
caption {
    color: var(--kd-mute);
}

.text-muted {
    color: var(--kd-mute) !important;
}

/* Checkboxen und Radios: Rand war weiß (70 %), im hellen Theme unsichtbar; Fokus-Kreis und Fokus-Füllung ebenso */
.form-check-input {
    border-color: color-mix(in srgb, var(--kd-ink) 45%, transparent);
}

.form-check-input:hover::before,
.form-check-input:focus::before {
    box-shadow: 0 0 0 13px color-mix(in srgb, var(--kd-ink) 60%, transparent);
}

.form-check-input[type=checkbox]:not(:checked):focus::after {
    background-color: var(--kd-karte-deckend);
}

.form-check-input[type=checkbox]:indeterminate {
    border-color: color-mix(in srgb, var(--kd-ink) 45%, transparent);
}

/* Schalter (form-switch): Spur und Knopf passend zum Theme, eingeschaltet in Akzentfarbe */
.form-switch .form-check-input {
    background-color: color-mix(in srgb, var(--kd-ink) 25%, transparent);
}

.form-switch .form-check-input::after {
    background-color: var(--kd-karte-deckend);
}

.form-switch .form-check-input:checked {
    background-color: var(--kd-akzent);
}

/* Reiter (z. B. Mein Dienst, Kurse): inaktive Reiter waren hellgrau (#dee2e6), aktive haben eigene Regeln weiter oben */
.nav-tabs {
    border-bottom-color: var(--kd-line);
}

.nav-tabs .nav-link {
    color: var(--kd-mute);
    background-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--kd-ink);
    background-color: color-mix(in srgb, var(--kd-ink) 5%, transparent);
}

/* aktiver Reiter: Schrift in Textfarbe, Markierung in Akzentfarbe (Akzent als Schrift ist bei hellen Akzenten auf Weiß nicht lesbar) */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--kd-ink);
    border-color: var(--kd-akzent);
}

/* Pillen-Navigation: in MDB-dark dunkelgraue Flächen mit weißer Schrift, aktiv MDB-Blau */
.nav-pills:not(.menu-sidebar) .nav-link {
    background-color: var(--kd-feld);
    color: var(--kd-ink);
}

.nav-pills:not(.menu-sidebar) .nav-link.active,
.nav-pills:not(.menu-sidebar) .show > .nav-link {
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

/* Seitenzahlen (Video Area): Zahlen waren weiß, Hover dunkel getönt */
.page-link {
    color: var(--kd-ink);
    background-color: transparent;
    border-color: var(--kd-line);
}

.page-link:hover,
.page-link:focus {
    color: var(--kd-ink);
    background-color: color-mix(in srgb, var(--kd-ink) 8%, transparent);
}

.page-item.disabled .page-link {
    color: var(--kd-mute);
    background-color: transparent;
}

/* Kartenköpfe (card-header): in MDB-dark dunkelgrau (#424242 !important), auch auf weißen Karten */
.card-header {
    background-color: transparent !important;
    color: var(--kd-ink);
    border-bottom-color: var(--kd-line);
}

/* Rahmen-Hilfsklassen: waren weiß (12 %); farbige Rahmen (border-danger usw.) bleiben unberührt */
:is(.border, .border-top, .border-bottom, .border-start, .border-end):not([class*="border-primary"], [class*="border-secondary"], [class*="border-success"], [class*="border-danger"], [class*="border-warning"], [class*="border-info"], [class*="border-light"], [class*="border-dark"], [class*="border-white"]) {
    border-color: var(--kd-line) !important;
}

/* Grau gemeinte Badges (z. B. "beendet", Anzahl Kurse): statt MDB-Lila (#b23cfd) eine ruhige Fläche */
.badge.bg-secondary,
.badge.badge-secondary {
    background-color: var(--kd-feld) !important;
    color: var(--kd-text) !important;
}

/* Helle Badges mit dunkler Schrift (Kursliste: bg-light text-dark) lesbar in beiden Themes */
.badge.bg-light,
.bg-light.text-dark {
    color: var(--kd-ink) !important;
}

/* Restliche Bootstrap-Knöpfe (Mein Dienst "Anzeigen", Rechnung erstellen, Upgrade "auswählen" …): statt MDB-Blau/-Lila wie die Hauptknöpfe */
.btn-primary,
.btn-info,
.btn-primary:focus,
.btn-info:focus,
.btn-primary:active,
.btn-info:active {
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
    border: 0;
    border-radius: 999px;
}

.btn-primary:hover,
.btn-info:hover {
    background-color: color-mix(in srgb, var(--kd-akzent) 85%, var(--kd-ink));
    color: var(--kd-akzent-text);
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:hover {
    background-color: var(--kd-feld);
    color: var(--kd-ink);
    border: 0;
}

/* Cookie-Hinweis: Site.css zeichnet ihn dunkel mit weißer Schrift (Variablen --cookie-consent-*). Die Vorlage setzt die Karte auf
   die Kartenfarbe, die Schrift blieb weiß: im hellen Theme weiß auf weiß. Jetzt alle Farben aus dem Theme */
#CookieModelButtom {
    --cookie-consent-color: var(--kd-ink);
    --cookie-consent-text-color: var(--kd-text);
    --cookie-consent-bg: var(--kd-karte-deckend);
    --cookie-consent-border-color: var(--kd-line);
    --cookie-consent-shadow-color: rgba(0, 0, 0, 0.18);
}

#CookieModelButtom .modal-content {
    background: var(--kd-karte-deckend);
    border: 1px solid var(--kd-line);
}

/* Fußzeile: _Layout setzt für den AGB-Knopf beim Überfahren fest #212529 (!important); hier wie die übrigen Fußzeilen-Links */
#FooterText .btn.footer-agb-button:hover,
#FooterText .btn.footer-agb-button:focus,
#FooterText .btn.footer-agb-button:active {
    color: var(--kd-akzent) !important;
    border-color: transparent !important;
}

html.ts-akzent-hell #FooterText .btn.footer-agb-button:hover,
html.ts-akzent-hell #FooterText .btn-outline-dark:hover {
    color: var(--kd-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--kd-akzent);
}

/* Terminbuchung (Appointment): Tagesauswahl war fest hell mit Pink (#e91e63). "body" davor, weil der Stil-Block der View später kommt */
body .shift-appointment-day {
    background: var(--kd-feld);
    color: var(--kd-ink);
    border-color: var(--kd-line);
    border-radius: 1rem;
}

body .shift-appointment-day:hover:not(:disabled) {
    border-color: var(--kd-akzent);
}

body .shift-appointment-day.is-active {
    background: var(--kd-akzent);
    border-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

body .shift-appointment-day:disabled {
    background: transparent;
    color: var(--kd-mute);
    opacity: 0.6;
}

body .shift-appointment-duration {
    color: var(--kd-mute);
}

body .shift-appointment-time {
    border-radius: 999px;
}


/* Startseite ohne Sliderbilder: das leere Karussell wird trotzdem ausgegeben. Dann kein Startbild-Layout (sonst fehlt der Bogen unter
   der Kopfzeile), die leere Hülle ausblenden. Alle Startbild-Regeln oben gelten nur, wenn das Karussell Bilder hat (.carousel-item). */
section.overflow-hidden:has(#carouselExampleIndicators):not(:has(#carouselExampleIndicators .carousel-item)) {
    display: none;
}

/* ==========================================================================
   Nachtrag 19.10.2026 (2): Befunde aus dem Test auf der laufenden Seite (helles Theme, Desktop und Handy)
   ========================================================================== */

/* Schwebende Beschriftung in Feldern: Beschriftung und Wert lagen übereinander (z. B. "Vorname" über "Lara").
   Der Wert rückt nach unten, die Beschriftung sitzt darüber. Gilt nur für Felder, die eine Beschriftung haben */
.form-outline:has(> .form-label) > .form-control {
    padding-top: 1.35rem;
    padding-bottom: 0.4rem;
}

.form-outline .form-control:focus ~ .form-label,
.form-outline .form-control.active ~ .form-label {
    transform: translateY(-0.5rem) scale(0.72);
}

/* Kopfzeile ohne Menüeinträge (angemeldet sind die Listen teils leer): Menü-Knopf ausblenden, er öffnete nur eine leere Fläche */
.ts-main-navbar:not(:has(#navbarNav :is(a, button))) .navbar-toggler {
    display: none !important;
}

/* Kursplan: Site.css setzt am letzten Tag margin: auto, im Raster schrumpft die Karte dadurch auf Textbreite (Sonntag) */
.ns-calendar .cal-block:last-child {
    margin: 0;
}

/* Kursplan, Tage ohne Kurse: alte Klasse border-gray-bottom zeichnete eine graue Linie, der Strich stand in der ersten Spalte */
.ns-calendar .events.border-gray-bottom {
    border-bottom: 0;
}

.ns-calendar .events:empty {
    display: block;
}

/* Kartentitel in schmalen Spalten (Terminbuchung: Wochentage) nicht mitten im Wort umbrechen ("Donnersta g"), sondern trennen */
.card .card-title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
}

/* Terminbuchung: Zeit-Knöpfe in den Tageskarten über die volle Breite statt als hohe Ovale */
.card .list-inline-item:has(> .btn) {
    display: block;
    margin: 0 0 0.375rem;
}

.card .list-inline-item > .btn {
    width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

/* Statusfarben aus dem Theme (Guthaben-Chip, Ziele, Ampel der Studioauslastung, Ersparnis): Site.css nutzt --bs-success / --bs-danger,
   fest #2e9e4f bzw. #34c759 waren auf hellem Grund zu blass (2,6:1) */
:root {
    --bs-success: var(--kd-erfolg);
    --bs-danger: var(--kd-fehler);
}

.cc-auslastung {
    --cc-gruen: var(--kd-erfolg);
    --cc-gelb: var(--kd-warnung);
    --cc-rot: var(--kd-fehler);
}

.ma-chip.ma-chip-warnung {
    color: var(--kd-warnung);
}

body .vk-spar {
    color: var(--kd-erfolg);
    background: color-mix(in srgb, var(--kd-erfolg) 14%, transparent);
}

/* Auswahlkarten (Studios, Aktionen): zwei Spalten erst ab 4 Karten. Bei 2 oder 3 Karten (z. B. Aktion / Mitgliedschaft / Probetraining)
   untereinander in einer Spalte, sonst steht bei 3 Karten eine einzelne Karte versetzt unter zweien */
@media (min-width: 992px) {
    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)):not(form .row):not(:has(> .col-lg-8)):not(:has(> .col-lg-4 ~ .col-lg-4 ~ .col-lg-4 ~ .col-lg-4)) > .col-lg-4:not(.vk-tarifspalte):not(:has(input, select, textarea, form, table, .row)):has(> .card) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 46rem !important;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Zurück-Knöpfe (btn-warning pull-left, btn-secondary): Feldfarbe auf dem Seitenhintergrund war kaum zu sehen (#f1f1ef auf #f4f4f2).
   Jetzt Kartenfarbe mit feinem Rand, in Karten die Feldfarbe; beim Überfahren gilt weiter der Hover der Hauptknöpfe */
.btn-warning.pull-left:not([type="submit"]):not(:hover),
.btn-secondary:not(:hover) {
    background: var(--kd-karte-deckend);
    color: var(--kd-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kd-ink) 22%, transparent) !important;
}

.card .btn-warning.pull-left:not([type="submit"]):not(:hover),
.card .btn-secondary:not(:hover) {
    background: var(--kd-feld);
}

/* Auswahlkarten-Raster (Studio-, Aktionsauswahl) nicht auf Formularseiten: Kursanmeldung u. a. haben ebenfalls Titel + col-lg-4-Karte,
   liegen aber in einem Formular bzw. neben einer col-lg-8-Spalte (siehe Bedingung :not(form .row):not(:has(> .col-lg-8)) oben) */

/* Absende-Knöpfe mit Klasse pull-left (Kurs anmelden/abmelden, abschließen, suchen): sind Hauptaktionen, keine Zurück-Knöpfe */
.btn-warning.pull-left[type="submit"]:not(:hover) {
    background: var(--kd-akzent);
    color: var(--kd-akzent-text);
}

/* rechte Knöpfe neben "Zurück" (z. B. "Kündigen zum …") auf gleicher Höhe wie der Zurück-Knopf */
.btn-warning.pull-right {
    margin-top: 1.5rem;
}

.card .btn-warning.pull-right {
    margin-top: 0;
}

/* einfache Checkboxen/Radios ohne MDB-Klasse (z. B. "Ich bestätige die Bedingungen der Anmeldung"): größer und in Akzentfarbe */
input[type="checkbox"]:not(.form-check-input):not(.custom-control-input),
input[type="radio"]:not(.form-check-input):not(.custom-control-input) {
    accent-color: var(--kd-akzent);
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 0.4rem 0 0;
    vertical-align: -0.2rem;
}

/* Unterschriftfeld: statt eingelassener Kasten mit Schatten ein ruhiges Feld mit gestricheltem Rand; die Zeichenfläche bleibt weiß
   (der Stift zeichnet schwarz), Hinweis "Oben unterschreiben" lesbar, "löschen" als Nebenknopf */
.signature-pad {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 1rem;
}

.signature-pad::before,
.signature-pad::after {
    display: none;
}

.signature-pad--body {
    background: #ffffff;
    border: 2px dashed color-mix(in srgb, var(--kd-ink) 28%, transparent);
    border-radius: 1rem;
    overflow: hidden;
}

.signature-pad--body canvas {
    box-shadow: none;
    border-radius: 0;
}

.signature-pad--footer .description {
    color: var(--kd-mute);
    font-size: 0.8125rem;
    margin: 0.5rem 0 0.75rem;
}

.signature-pad--actions .btn-warning:not(:hover) {
    background: var(--kd-feld);
    color: var(--kd-ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kd-ink) 22%, transparent) !important;
}

/* ==========================================================================
   Nachtrag 19.10.2026 (3): Befunde aus dem kompletten Durchlauf (Abschluss, Formulare, Buchungen)
   ========================================================================== */

/* Feine helle Linie zwischen Kopfzeile und Titelband: beide enden auf einem halben Pixel (z. B. 84,39 px), die Kanten
   werden geglättet und der Seitenhintergrund scheint durch. Die Akzentfläche der Kopfzeile reicht deshalb 1 px tiefer */
.body-content:has(section > .row > h4.card-title:first-child) .navbar.bg-light::before,
.body-content:has(#carouselExampleIndicators .carousel-item) .navbar.bg-light::before {
    inset: 0 0 -1px 0;
}

/* Felder, die die Seite per visibility: collapse versteckt (z. B. "Firma" im Vertragsabschluss), ließen eine leere Lücke */
.form-outline[style*="visibility: collapse"],
.form-outline[style*="visibility:collapse"] {
    display: none !important;
}

/* Datepicker auf schmalen Bildschirmen: die Tabellen-Regeln für Handys (Zeilen als Karten) trafen auch den Kalender.
   Wochentage waren ausgeblendet, zwischen den Tagen standen Linien */
@media only screen and (max-width: 800px) {
    .datepicker-table thead {
        display: table-header-group;
    }

    .datepicker-table tbody {
        display: table-row-group;
    }

    .datepicker-table tr,
    .datepicker-table thead tr {
        display: table-row;
        position: static;
        top: auto;
        left: auto;
        border: 0;
    }
}

/* Fehler- und Erfolgstexte (z. B. "Falsches Kennwort", "Ungültiger Anmeldeversuch"): MDB-Rot #f93154 hatte auf Weiß nur 3,7:1 */
.text-danger {
    color: var(--kd-fehler) !important;
}

.text-success {
    color: var(--kd-erfolg) !important;
}

/* Schalter in den Datenschutzeinstellungen (alte Klasse custom-switch, in MDB 5 ungestaltet: nur ein kleines Kästchen) */
.custom-switch {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.custom-switch .custom-control-input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kd-ink) 25%, transparent);
    cursor: pointer;
    transition: background-color 160ms ease;
}

.custom-switch .custom-control-input::before {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--kd-karte-deckend);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 160ms var(--kd-ease);
}

.custom-switch .custom-control-input:checked {
    background: var(--kd-akzent);
}

.custom-switch .custom-control-input:checked::before {
    transform: translateX(1.25rem);
}

.custom-switch .custom-control-input:disabled {
    opacity: 0.6;
    cursor: default;
}

.custom-switch .custom-control-input:focus-visible {
    outline: 2px solid var(--kd-ink);
    outline-offset: 3px;
}

.custom-switch .custom-control-label {
    color: var(--kd-ink);
}

/* Grüne MDB-Knöpfe (z. B. "speichern" in den Datenschutzeinstellungen): wie die Hauptknöpfe */
.btn-success,
.btn-success:focus,
.btn-success:active {
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
    border: 0;
    border-radius: 999px;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--kd-akzent) 85%, var(--kd-ink));
    color: var(--kd-akzent-text);
}

/* Titelband in einer Hülle mit eigenem Abstand (z. B. Vertragsabschluss "Eingaben prüfen": section.container.mt-3 in form > div):
   der Abstand ließ zwischen Kopfzeile und Band einen 16 px hohen Streifen in Seitenfarbe */
.body-content section.container:has(> section > .row > h4.card-title:first-child) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ältere Seiten ohne Container (z. B. "Bereits Mitglied"): Karte direkt unter der Kopfzeile, sonst randlos über die volle Breite */
.body-content > h2:empty {
    display: none;
}

.body-content > .card-deck {
    max-width: 46rem;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.body-content > .card-deck > .card {
    margin-top: 0 !important;
}

/* Seiten mit Karte links (col-lg-4) und Info rechts (col-lg-8), z. B. Termin stornieren, Kursanmeldung: unter 992 px stehen beide
   untereinander, ohne Abstand stießen die Karten aneinander */
@media (max-width: 991.98px) {
    .row > .col-lg-4 + .col-lg-8 {
        margin-top: 1rem;
    }
}

/* ==========================================================================
   Nachtrag 20.10.2026: helle Akzentfarbe als Schrift (Befund TheosGym, Akzent #76b82a)
   ========================================================================== */

/* Ein heller Akzent (z. B. Grün, Gelb, Hellblau) hat als Schrift auf Weiß bzw. den hellen Feldern oft nur 2:1 Kontrast.
   Erkennt TS-Web2 den Akzent als hell (Klasse ts-akzent-hell an <html>), stehen Texte, die sonst in der Akzentfarbe wären,
   in der Schriftfarbe; die Akzentfarbe bleibt an Rahmen, Unterstreichungen und Symbolen (wie bei den AGB-Links oben).
   Dunkle Akzente (ts-akzent-dunkel) sind nicht betroffen. */
html.ts-akzent-hell .accordion-button:not(.collapsed),
html.ts-akzent-hell .nav-tabs .nav-item.show .nav-link,
html.ts-akzent-hell .nav-tabs .nav-link.active,
html.ts-akzent-hell .form-outline .form-control:focus ~ .form-label,
html.ts-akzent-hell .select-input.focused ~ .select-label,
html.ts-akzent-hell .form-control:focus#capture,
html.ts-akzent-hell .btn-link,
html.ts-akzent-hell .datepicker-footer-btn,
html.ts-akzent-hell .fc-state-default,
html.ts-akzent-hell .fc-state-disabled,
html.ts-akzent-hell .ns-calendar .event-title:hover,
html.ts-akzent-hell .ns-calendar .event-info:hover {
    color: var(--kd-ink) !important;
}

html.ts-akzent-hell .btn-link {
    text-decoration: underline;
    text-decoration-color: var(--kd-akzent);
    text-underline-offset: 0.2em;
}

html.ts-akzent-hell #FooterText .btn-outline-dark:hover,
html.ts-akzent-hell #FooterText .btn.footer-agb-button:hover,
html.ts-akzent-hell #FooterText .btn.footer-agb-button:focus,
html.ts-akzent-hell #FooterText .btn.footer-agb-button:active {
    color: var(--kd-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--kd-akzent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

/* ==========================================================================================================
   Nachtrag 20.10.2026 (2): Befunde Level20 – Startbild-Slider (erster Kunde mit echtem Startbild) und Terminliste
   ========================================================================================================== */
/* Nur ein Bild: Bildpunkte und Pfeile ausblenden, es gibt nichts zu blättern */
#carouselExampleIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-indicators,
#carouselExampleIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-control-prev,
#carouselExampleIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-control-next {
    display: none;
}

/* Ältere Slider-Ansicht (Views/Shared/_PartialSlider.cshtml, z. B. Termin nicht erlaubt, Skript- und Geräteseiten) setzt die
   Bildpunkte als <li> statt <button>: gleich gestalten wie auf der Startseite. Seit 20.10.2026 nutzt die View dasselbe Markup wie die
   Startseite (<button>); die Regel bleibt für Server mit älterem TS-Web2-Stand. */
#carouselExampleIndicators .carousel-indicators li {
    width: 1.5rem;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background-color: #ffffff;
}

#carouselExampleIndicators .carousel-indicators li.active {
    background-color: var(--kd-akzent);
}

@media (max-width: 767.98px) {
    #carouselExampleIndicators .carousel-indicators li {
        width: 1rem;
    }
}

/* Terminliste (Views/Appointment/Appointment.cshtml): Zeitknöpfe sind .btn-warning mit fester Statusfarbe im style-Attribut
   (grün = frei, rot = keine Termine). Bei hellem Akzent setzt TS-Web2 dunkle Schrift auf alle .btn-warning; auf Grün wären das
   nur 3,6:1. Diese Knöpfe behalten deshalb weiße Schrift (auf Grün 5,1:1). */
.btn-warning.brightfontcolor[style*="background-color:green"],
.btn-warning.brightfontcolor[style*="background-color:red"] {
    color: #ffffff !important;
}

/* ==========================================================================================================
   Nachtrag 20.10.2026 (3): Probetraining wie der Vertragsabschluss (Befund Unifit)
   Views/TrialWorkout (Formular an /TrialWorkout/…) hat noch das alte Markup ohne die vk-Klassen des Vertragsabschlusses.
   Hier dieselbe Optik per CSS: keine runden Symbolblasen, Karten mit Linie/Radius/Schatten wie .vk-modern,
   Kartentitel mit Symbol-Kachel, Leistungen als Zeilen (Name, darunter Laufzeit links / Datum rechts), Formular volle Breite,
   große Weiter-Taste. Gilt nur für Formulare, deren Ziel /TrialWorkout/ enthält.
   ========================================================================================================== */
form[action*="/TrialWorkout/"] .card > .d-flex.justify-content-center[style*="-43px"] {
    display: none !important;
}

form[action*="/TrialWorkout/"] section.container > section > .row {
    row-gap: 1.25rem;
    align-items: flex-start;
}

form[action*="/TrialWorkout/"] .row > .col-md-8[style*="padding"] {
    padding-left: calc(var(--mdb-gutter-x) / 2) !important;
    padding-right: calc(var(--mdb-gutter-x) / 2) !important;
}

@media (max-width: 991.98px) {
    form[action*="/TrialWorkout/"] .row > .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    form[action*="/TrialWorkout/"] .row > .col-lg-4 > .card {
        position: sticky;
        top: 90px;
    }
}

form[action*="/TrialWorkout/"] .card {
    border: 1px solid var(--vk-linie);
    border-radius: var(--vk-radius) !important;
    box-shadow: var(--vk-schatten) !important;
}

form[action*="/TrialWorkout/"] .card-body {
    padding: 1.5rem;
    text-align: left;
}

/* Kartentitel mit Symbol-Kachel (wie h5.vk-t) */
form[action*="/TrialWorkout/"] .card-body > h5.card-title,
form[action*="/TrialWorkout/"] .card-body > .row > h4:first-child {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: left;
    color: var(--kd-ink);
}

form[action*="/TrialWorkout/"] .card-body > h5.card-title::before,
form[action*="/TrialWorkout/"] .card-body > .row > h4:first-child::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9rem;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--vk-akzent-hell);
    color: var(--kd-ink);
}

form[action*="/TrialWorkout/"] .card-body > h5.card-title::before {
    content: "\f44b";                       /* Hantel */
}

form[action*="/TrialWorkout/"] .card-body > .row > h4:first-child::before {
    content: "\f007";                       /* Person */
}

form[action*="/TrialWorkout/"] .card-body > .row.mt-3:has(> h4:first-child) {
    margin-top: 0 !important;
}

/* Leistungen: Überschrift klein, je Leistung Name als Zeile, darunter Laufzeit links und Datum rechts */
form[action*="/TrialWorkout/"] .card-body h5:has(> b) {
    margin: 0 0 0.25rem !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kd-mute);
}

form[action*="/TrialWorkout/"] .card-body h5:has(> b) > b {
    font-weight: inherit;
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    margin: 0;
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) > div {
    margin: 0 !important;
    color: var(--kd-text);
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) > div:has(> h6) {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    margin-top: 0.6rem !important;
    border-top: 1px solid var(--vk-linie);
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) > div:has(> h6):first-child {
    border-top: 0;
    margin-top: 0 !important;
    padding-top: 0.25rem;
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) h6 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kd-ink);
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) > div:not(:has(> h6)) > b {
    font-weight: 400;
}

form[action*="/TrialWorkout/"] .card-body .col-lg-12 > .form-group:not(:has(input, select, textarea)) > div:not(:has(> h6)):not(:has(> b)) {
    text-align: right;
    font-weight: 700;
    color: var(--kd-ink);
    white-space: nowrap;
}

/* Eingabefelder mit dem Radius des Vertragsabschlusses */
form[action*="/TrialWorkout/"] .form-outline .form-control {
    border-radius: var(--vk-radius-feld);
}

/* Handy: zweite Feldspalte rückt unter die erste, gleicher Abstand wie zwischen den Feldern */
@media (max-width: 767.98px) {
    form[action*="/TrialWorkout/"] .card-body .col-md-6 + .col-md-6 > .form-outline:first-child {
        margin-top: 1rem;
    }
}

/* Weiter / Zurück wie im Vertragsabschluss */
form[action*="/TrialWorkout/"] section.container > section > .col-lg-12:has(> button) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem !important;
}

form[action*="/TrialWorkout/"] section.container > section > .col-lg-12 > .btn {
    float: none !important;
    margin: 0;
    border-radius: 999px;
}

form[action*="/TrialWorkout/"] section.container > section > .col-lg-12 > button[type="submit"] {
    order: 2;
    padding: 0.85rem 2.6rem;
    font-weight: 700;
    font-size: 0.9rem;
}

form[action*="/TrialWorkout/"] section.container > section > .col-lg-12 > button[type="button"] {
    order: 1;
}

@media (max-width: 575px) {
    form[action*="/TrialWorkout/"] section.container > section > .col-lg-12 > button[type="submit"] {
        flex: 1 1 auto;
    }
}

/* ==========================================================================================================
   Nachtrag 20.10.2026 (4): Dokument-Upload im Vertragsabschluss (Befund Unifit)
   Views/Contract (Persönliche Daten): Der Kasten um #vertragsdokumentDatei hat feste Farben im style-Attribut (#f8f9fa, #dfe3e8),
   die Schaltfläche „Datei auswählen“ ist hell auf Grau (Rest aus mdb.dark) und kaum lesbar. Jetzt als Ablagefeld im Stil der
   Formulare: gestrichelter Rahmen in Akzent-Tönung, Symbol, Auswahl-Knopf als Pille in Akzentfarbe, gewählte Datei als Zeile mit
   „Entfernen“. Nur Farben aus den --kd-/--vk-Variablen, deshalb auch im dunklen Theme passend.
   ========================================================================================================== */
div:has(> #vertragsdokumentDatei) {
    position: relative;
    padding: 1.1rem 1.2rem 1rem 4.4rem !important;
    border: 1.5px dashed color-mix(in srgb, var(--kd-akzent) 45%, transparent) !important;
    border-radius: var(--vk-radius-feld) !important;
    background-color: var(--vk-akzent-flaeche) !important;
    text-align: left !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

div:has(> #vertragsdokumentDatei):hover,
div:has(> #vertragsdokumentDatei:focus-visible) {
    border-color: var(--kd-akzent) !important;
    background-color: var(--vk-akzent-hell) !important;
}

/* Symbol links (Dokument mit Pfeil nach oben) */
div:has(> #vertragsdokumentDatei)::before {
    content: "\f574";                       /* file-upload */
    position: absolute;
    left: 1.2rem;
    top: 1.1rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1rem;
    color: var(--kd-akzent-text);
    background: var(--kd-akzent);
}

div:has(> #vertragsdokumentDatei) > label.form-label {
    display: block;
    margin: 0 0 0.6rem;
    font-weight: 700 !important;
    font-size: 1rem;
    color: var(--kd-ink);
}

/* Das Feld selbst: kein grauer Kasten, nur Knopf und Dateiname */
#vertragsdokumentDatei.form-control {
    padding: 0 !important;
    min-height: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--kd-text);
    font-size: 0.9rem;
    line-height: 2.4rem;
}

#vertragsdokumentDatei.form-control:focus {
    box-shadow: none;
}

#vertragsdokumentDatei.form-control::file-selector-button {
    margin: 0 0.9rem 0 0;
    padding: 0 1.3rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

#vertragsdokumentDatei.form-control::-webkit-file-upload-button {
    margin: 0 0.9rem 0 0;
    padding: 0 1.3rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background-color: var(--kd-akzent);
    color: var(--kd-akzent-text);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

#vertragsdokumentDatei.form-control:hover:not(:disabled)::file-selector-button {
    background-color: var(--kd-akzent);
    filter: brightness(1.08);
}

#vertragsdokumentDatei.form-control:hover:not(:disabled)::-webkit-file-upload-button {
    background-color: var(--kd-akzent);
}

#vertragsdokumentDatei.form-control:focus-visible::file-selector-button {
    outline: 2px solid var(--kd-akzent);
    outline-offset: 2px;
}

/* Hinweis „Erlaubt sind …“ */
div:has(> #vertragsdokumentDatei) > small:not(.text-danger) {
    color: var(--kd-mute) !important;
    font-size: 0.8rem;
}

/* Gewählte Datei: Zeile mit Häkchen und „Entfernen“ */
#vertragsdokumentAuswahl {
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.7rem !important;
    padding: 0.5rem 0.6rem 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--kd-karte);
    border: 1px solid var(--kd-line);
    color: var(--kd-ink);
    font-size: 0.9rem;
}

#vertragsdokumentAuswahl:not([style*="none"]) {
    display: flex !important;
}

#vertragsdokumentAuswahl::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--kd-erfolg);
}

#vertragsdokumentAuswahlText {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

#vertragsdokumentEntfernen.btn {
    margin: 0 !important;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--kd-line);
    background: transparent;
    color: var(--kd-fehler);
    box-shadow: none;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#vertragsdokumentEntfernen.btn:hover {
    background: color-mix(in srgb, var(--kd-fehler) 10%, transparent);
    border-color: var(--kd-fehler);
    color: var(--kd-fehler);
}

#vertragsdokumentFehler {
    margin-top: 0.5rem !important;
    color: var(--kd-fehler) !important;
}

/* Handy: Symbol über dem Text statt links daneben */
@media (max-width: 575.98px) {
    div:has(> #vertragsdokumentDatei) {
        padding: 1rem !important;
    }

    div:has(> #vertragsdokumentDatei)::before {
        position: static;
        margin-bottom: 0.6rem;
    }

    #vertragsdokumentDatei.form-control {
        line-height: 1.4;
    }

    #vertragsdokumentDatei.form-control::file-selector-button {
        display: block;
        width: 100%;
        margin: 0 0 0.5rem;
    }
}

/* ==========================================================================================================
   Nachtrag 20.10.2026 (5): Slider auf der Vertragsseite (Befund Level20)
   Views/Contract/NewContract.cshtml zeigt bei Aktionsverträgen (Einstellung „Slider auf Aktions-Vertragsseite anzeigen“) die
   Sliderbilder über dem Titelband, mit eigener ID #carouselActionContractIndicators in einer Hülle .col-lg-12.mb-4. Die Regeln der
   Startseite (#carouselExampleIndicators) griffen dort nicht: Bild randlos und eckig, darunter ein Streifen in Seitenfarbe vor dem
   Titelband, Pfeile auch bei nur einem Bild. Jetzt wie auf der Startseite: Bild als runde Karte auf dem Akzent, der Akzent läuft von
   der Kopfzeile über das Bild bis in das Titelband.
   ========================================================================================================== */
.body-content .col-lg-12:has(> #carouselActionContractIndicators .carousel-item) {
    margin-bottom: -1px !important; /* 1px unter das Titelband, sonst bei krummen Pixelwerten feine Linie dazwischen */
    padding: 0.25rem 1rem calc(0.5rem + 1px);
    background: var(--kd-akzent);
}

#carouselActionContractIndicators {
    position: relative;
    max-width: 1296px;
    margin: 0 auto;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow: var(--kd-schatten-hoch);
}

/* Bildpunkte rechts unten (wie Startseite) */
#carouselActionContractIndicators .carousel-indicators {
    left: auto;
    right: 1rem;
    bottom: 0.75rem;
    transform: none;
    margin: 0;
    padding: 0.5rem 0.75rem;
    gap: 0.375rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

#carouselActionContractIndicators .carousel-indicators button {
    width: 1.5rem;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background-color: #ffffff;
}

#carouselActionContractIndicators .carousel-indicators .active {
    background-color: var(--kd-akzent);
}

/* Nur ein Bild: Bildpunkte und Pfeile ausblenden */
#carouselActionContractIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-indicators,
#carouselActionContractIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-control-prev,
#carouselActionContractIndicators:not(:has(.carousel-item + .carousel-item)) .carousel-control-next {
    display: none;
}

/* Handy: ganzes Bild zeigen (Schrift im Banner), keine Pfeile, kleinere Bildpunkte, Karte etwas weniger rund */
@media (max-width: 767.98px) {
    #carouselActionContractIndicators {
        border-radius: 1.25rem;
    }

    #carouselActionContractIndicators .carousel-item img {
        height: auto;
        object-fit: contain;
    }

    #carouselActionContractIndicators .carousel-control-prev,
    #carouselActionContractIndicators .carousel-control-next {
        display: none;
    }

    #carouselActionContractIndicators .carousel-indicators {
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.3rem 0.5rem;
    }

    #carouselActionContractIndicators .carousel-indicators button {
        width: 1rem;
    }
}

/* ==========================================================================================================
   Nachtrag 20.10.2026 (6): Texte aus der Datenbank einheitlich (Befund Unifit)
   Beschreibungen der Verträge (Vertragsauswahl .contract-description, Vertragskarte im Abschluss) kommen als HTML mit eigenen
   style-Attributen aus der Datenbank: Arial statt Roboto, Schwarz (#222) und Grau gemischt, feste helle Flächen (#f7f7f7, #fff),
   die im dunklen Theme nicht passen. Hier zentral:
   - Schrift: immer die Seitenschrift (Roboto). Symbolschriften (Font Awesome) bleiben unberührt.
   - Schriftfarbe: eine Farbe für alle Texte (--kd-db-text, Standard = --kd-ink). Ersetzt werden nur Texte ohne eigene Farbe
     und schwarze/graue Angaben (#000 … #999, #3d3d3d, #6c757d, black, gray …).
   - Neutrale Flächen (Weiß und helle Grautöne: #fff, #f7f7f7, #f8f9fa, #eee …) bekommen die Feldfarbe des Themes.
     Ergänzung 21.10.2026 (Befund MichaelK dunkel): auch die Grautöne aus Tailwind (#f8fafc, #f9fafb, #f1f5f9, #f3f4f6, #e5e7eb …)
     und weitere helle Grautöne; außerdem gelten die Regeln auch für die Vertragsbedingungen im Abschluss
     (#contractsCard, Neue Person / Vertragsnutzer / Prüfen). Vorher blieben dort weiße Kästen mit heller Schrift stehen.
   - Symbole ✔/✗ in Grün (#2fa84f, green) / Rot (#d33, red) bekommen die Theme-Farben --kd-erfolg/--kd-fehler.
   Kopfzeile, Titelband, Knöpfe und der rote Beitragskasten sind keine Datenbank-Inhalte und bleiben wie sie sind.

   EIGENE FARBEN IN DER DATENBANK (Ergänzung 20.10.2026, Wunsch Unifit)
   - Eigene Schriftfarbe: direkt inline, z. B. <p style="color:#0b5cad">. Bleibt erhalten (nur Schwarz/Grau wird vereinheitlicht).
   - Eigene Fläche: jede Hintergrundfarbe außer neutralem Weiß/Grau bleibt erhalten, z. B. <div style="background:#fff7e6"> (Creme)
     oder <div style="background:#e21c4d; color:#fff">. Texte darin ohne eigene Farbe übernehmen die Farbe der Fläche
     (color an der Fläche), sonst --kd-db-text. Bei eigener Fläche deshalb immer auch color mitgeben.
   - Ein Element ganz unverändert lassen (auch Weiß/Grau, auch Symbole): class="ts-eigen" (oder data-ts-eigen). Nur die Schrift
     bleibt Roboto.
   - Damit es auch im dunklen Theme passt, am besten Theme-Farben verwenden, z. B. style="background: var(--kd-akzent-hell);
     color: var(--kd-ink)". Für den Kontrast eigener Farben ist die Eingabe in der Datenbank verantwortlich.
   ========================================================================================================== */
:root {
    --kd-db-text: var(--kd-ink);            /* eine Schriftfarbe für alle Texte aus der Datenbank */
}

/* Schrift: Wrapper mit eigener Schriftart und alles darin, außer Symbolschriften */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]),
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :not(i, svg, svg *, .fa, .fas, .far, .fab, .fal, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"]) {
    font-family: inherit !important;
}

/* Schriftfarbe 1: Texte außerhalb eigener Flächen (ts-eigen selbst ausgenommen) – ohne eigene Farbe oder mit Schwarz/Grau -> eine Farbe */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]):not(:is([style^="color" i], [style*=";color" i], [style*="; color" i]):not([style*="color:#000" i], [style*="color: #000" i], [style*="color:#111" i], [style*="color: #111" i], [style*="color:#222" i], [style*="color: #222" i], [style*="color:#333" i], [style*="color: #333" i], [style*="color:#444" i], [style*="color: #444" i], [style*="color:#555" i], [style*="color: #555" i], [style*="color:#666" i], [style*="color: #666" i], [style*="color:#777" i], [style*="color: #777" i], [style*="color:#888" i], [style*="color: #888" i], [style*="color:#999" i], [style*="color: #999" i], [style*="color:#3d3d3d" i], [style*="color: #3d3d3d" i], [style*="color:#212529" i], [style*="color: #212529" i], [style*="color:#495057" i], [style*="color: #495057" i], [style*="color:#4f4f4f" i], [style*="color: #4f4f4f" i], [style*="color:#6c757d" i], [style*="color: #6c757d" i], [style*="color:black" i], [style*="color: black" i], [style*="color:gray" i], [style*="color: gray" i], [style*="color:grey" i], [style*="color: grey" i], [style*="color:rgb(0," i], [style*="color: rgb(0," i], [style*="color:rgb(0 " i], [style*="color: rgb(0 " i], [style*="color:rgba(0," i], [style*="color: rgba(0," i], [style*="color:rgba(0 " i], [style*="color: rgba(0 " i])),
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :is(div, p, span, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, small, label, summary, td, th, a:not(.btn), font):not(:is([style^="color" i], [style*=";color" i], [style*="; color" i]):not([style*="color:#000" i], [style*="color: #000" i], [style*="color:#111" i], [style*="color: #111" i], [style*="color:#222" i], [style*="color: #222" i], [style*="color:#333" i], [style*="color: #333" i], [style*="color:#444" i], [style*="color: #444" i], [style*="color:#555" i], [style*="color: #555" i], [style*="color:#666" i], [style*="color: #666" i], [style*="color:#777" i], [style*="color: #777" i], [style*="color:#888" i], [style*="color: #888" i], [style*="color:#999" i], [style*="color: #999" i], [style*="color:#3d3d3d" i], [style*="color: #3d3d3d" i], [style*="color:#212529" i], [style*="color: #212529" i], [style*="color:#495057" i], [style*="color: #495057" i], [style*="color:#4f4f4f" i], [style*="color: #4f4f4f" i], [style*="color:#6c757d" i], [style*="color: #6c757d" i], [style*="color:black" i], [style*="color: black" i], [style*="color:gray" i], [style*="color: gray" i], [style*="color:grey" i], [style*="color: grey" i], [style*="color:rgb(0," i], [style*="color: rgb(0," i], [style*="color:rgb(0 " i], [style*="color: rgb(0 " i], [style*="color:rgba(0," i], [style*="color: rgba(0," i], [style*="color:rgba(0 " i], [style*="color: rgba(0 " i])):not(.ts-eigen, [data-ts-eigen]):not(:is(.ts-eigen, [data-ts-eigen], [style*="background" i]:not([style*="transparent" i], [style*="background:none" i], [style*="background: none" i])) *) {
    color: var(--kd-db-text) !important;
}

/* Schriftfarbe 2: in eigenen Flächen und ts-eigen übernehmen Texte ohne eigene Farbe die Farbe der Fläche */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :is(.ts-eigen, [data-ts-eigen], [style*="background" i]:not([style*="transparent" i], [style*="background:none" i], [style*="background: none" i])) :is(div, p, span, li, ul, ol, h1, h2, h3, h4, h5, h6, b, strong, em, small, label, summary, td, th, a:not(.btn), font):not([style^="color" i], [style*=";color" i], [style*="; color" i]) {
    color: inherit !important;
}

/* Feste Breite aus der Datenbank (max-width: 520px) aufheben: Text nutzt die Kartenbreite wie der übrige Inhalt */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"])[style*="max-width"] {
    max-width: none !important;
}

/* Links in Datenbank-Texten bleiben als Links erkennbar */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Neutrale Flächen (Weiß/helles Grau) -> Feldfarbe des Themes; nicht bei ts-eigen */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :is([style*="background:#fff;" i], [style*="background:#fff " i], [style*="background:#fff!" i], [style*="background: #fff;" i], [style*="background: #fff " i], [style*="background: #fff!" i], [style*="background:#ffffff;" i], [style*="background:#ffffff " i], [style*="background:#ffffff!" i], [style*="background: #ffffff;" i], [style*="background: #ffffff " i], [style*="background: #ffffff!" i], [style*="background:white;" i], [style*="background:white " i], [style*="background:white!" i], [style*="background: white;" i], [style*="background: white " i], [style*="background: white!" i], [style*="background:#fafafa;" i], [style*="background:#fafafa " i], [style*="background:#fafafa!" i], [style*="background: #fafafa;" i], [style*="background: #fafafa " i], [style*="background: #fafafa!" i], [style*="background:#f8f9fa;" i], [style*="background:#f8f9fa " i], [style*="background:#f8f9fa!" i], [style*="background: #f8f9fa;" i], [style*="background: #f8f9fa " i], [style*="background: #f8f9fa!" i], [style*="background:#f7f7f7;" i], [style*="background:#f7f7f7 " i], [style*="background:#f7f7f7!" i], [style*="background: #f7f7f7;" i], [style*="background: #f7f7f7 " i], [style*="background: #f7f7f7!" i], [style*="background:#f5f5f5;" i], [style*="background:#f5f5f5 " i], [style*="background:#f5f5f5!" i], [style*="background: #f5f5f5;" i], [style*="background: #f5f5f5 " i], [style*="background: #f5f5f5!" i], [style*="background:#f2f2f2;" i], [style*="background:#f2f2f2 " i], [style*="background:#f2f2f2!" i], [style*="background: #f2f2f2;" i], [style*="background: #f2f2f2 " i], [style*="background: #f2f2f2!" i], [style*="background:#f1f1f1;" i], [style*="background:#f1f1f1 " i], [style*="background:#f1f1f1!" i], [style*="background: #f1f1f1;" i], [style*="background: #f1f1f1 " i], [style*="background: #f1f1f1!" i], [style*="background:#f0f0f0;" i], [style*="background:#f0f0f0 " i], [style*="background:#f0f0f0!" i], [style*="background: #f0f0f0;" i], [style*="background: #f0f0f0 " i], [style*="background: #f0f0f0!" i], [style*="background:#eee;" i], [style*="background:#eee " i], [style*="background:#eee!" i], [style*="background: #eee;" i], [style*="background: #eee " i], [style*="background: #eee!" i], [style*="background:#eeeeee;" i], [style*="background:#eeeeee " i], [style*="background:#eeeeee!" i], [style*="background: #eeeeee;" i], [style*="background: #eeeeee " i], [style*="background: #eeeeee!" i], [style*="background:#e9ecef;" i], [style*="background:#e9ecef " i], [style*="background:#e9ecef!" i], [style*="background: #e9ecef;" i], [style*="background: #e9ecef " i], [style*="background: #e9ecef!" i], [style*="background:#fcfcfc;" i], [style*="background:#fcfcfc " i], [style*="background:#fcfcfc!" i], [style*="background: #fcfcfc;" i], [style*="background: #fcfcfc " i], [style*="background: #fcfcfc!" i], [style*="background:#fbfbfb;" i], [style*="background:#fbfbfb " i], [style*="background:#fbfbfb!" i], [style*="background: #fbfbfb;" i], [style*="background: #fbfbfb " i], [style*="background: #fbfbfb!" i], [style*="background:#f9f9f9;" i], [style*="background:#f9f9f9 " i], [style*="background:#f9f9f9!" i], [style*="background: #f9f9f9;" i], [style*="background: #f9f9f9 " i], [style*="background: #f9f9f9!" i], [style*="background:#f8f8f8;" i], [style*="background:#f8f8f8 " i], [style*="background:#f8f8f8!" i], [style*="background: #f8f8f8;" i], [style*="background: #f8f8f8 " i], [style*="background: #f8f8f8!" i], [style*="background:#f6f6f6;" i], [style*="background:#f6f6f6 " i], [style*="background:#f6f6f6!" i], [style*="background: #f6f6f6;" i], [style*="background: #f6f6f6 " i], [style*="background: #f6f6f6!" i], [style*="background:#f4f4f4;" i], [style*="background:#f4f4f4 " i], [style*="background:#f4f4f4!" i], [style*="background: #f4f4f4;" i], [style*="background: #f4f4f4 " i], [style*="background: #f4f4f4!" i], [style*="background:#f3f3f3;" i], [style*="background:#f3f3f3 " i], [style*="background:#f3f3f3!" i], [style*="background: #f3f3f3;" i], [style*="background: #f3f3f3 " i], [style*="background: #f3f3f3!" i], [style*="background:#ececec;" i], [style*="background:#ececec " i], [style*="background:#ececec!" i], [style*="background: #ececec;" i], [style*="background: #ececec " i], [style*="background: #ececec!" i], [style*="background:#e9e9e9;" i], [style*="background:#e9e9e9 " i], [style*="background:#e9e9e9!" i], [style*="background: #e9e9e9;" i], [style*="background: #e9e9e9 " i], [style*="background: #e9e9e9!" i], [style*="background:#f8fafc;" i], [style*="background:#f8fafc " i], [style*="background:#f8fafc!" i], [style*="background: #f8fafc;" i], [style*="background: #f8fafc " i], [style*="background: #f8fafc!" i], [style*="background:#f1f5f9;" i], [style*="background:#f1f5f9 " i], [style*="background:#f1f5f9!" i], [style*="background: #f1f5f9;" i], [style*="background: #f1f5f9 " i], [style*="background: #f1f5f9!" i], [style*="background:#e2e8f0;" i], [style*="background:#e2e8f0 " i], [style*="background:#e2e8f0!" i], [style*="background: #e2e8f0;" i], [style*="background: #e2e8f0 " i], [style*="background: #e2e8f0!" i], [style*="background:#f9fafb;" i], [style*="background:#f9fafb " i], [style*="background:#f9fafb!" i], [style*="background: #f9fafb;" i], [style*="background: #f9fafb " i], [style*="background: #f9fafb!" i], [style*="background:#f3f4f6;" i], [style*="background:#f3f4f6 " i], [style*="background:#f3f4f6!" i], [style*="background: #f3f4f6;" i], [style*="background: #f3f4f6 " i], [style*="background: #f3f4f6!" i], [style*="background:#e5e7eb;" i], [style*="background:#e5e7eb " i], [style*="background:#e5e7eb!" i], [style*="background: #e5e7eb;" i], [style*="background: #e5e7eb " i], [style*="background: #e5e7eb!" i], [style*="background-color:#fff;" i], [style*="background-color:#fff " i], [style*="background-color:#fff!" i], [style*="background-color: #fff;" i], [style*="background-color: #fff " i], [style*="background-color: #fff!" i], [style*="background-color:#ffffff;" i], [style*="background-color:#ffffff " i], [style*="background-color:#ffffff!" i], [style*="background-color: #ffffff;" i], [style*="background-color: #ffffff " i], [style*="background-color: #ffffff!" i], [style*="background-color:white;" i], [style*="background-color:white " i], [style*="background-color:white!" i], [style*="background-color: white;" i], [style*="background-color: white " i], [style*="background-color: white!" i], [style*="background-color:#fafafa;" i], [style*="background-color:#fafafa " i], [style*="background-color:#fafafa!" i], [style*="background-color: #fafafa;" i], [style*="background-color: #fafafa " i], [style*="background-color: #fafafa!" i], [style*="background-color:#f8f9fa;" i], [style*="background-color:#f8f9fa " i], [style*="background-color:#f8f9fa!" i], [style*="background-color: #f8f9fa;" i], [style*="background-color: #f8f9fa " i], [style*="background-color: #f8f9fa!" i], [style*="background-color:#f7f7f7;" i], [style*="background-color:#f7f7f7 " i], [style*="background-color:#f7f7f7!" i], [style*="background-color: #f7f7f7;" i], [style*="background-color: #f7f7f7 " i], [style*="background-color: #f7f7f7!" i], [style*="background-color:#f5f5f5;" i], [style*="background-color:#f5f5f5 " i], [style*="background-color:#f5f5f5!" i], [style*="background-color: #f5f5f5;" i], [style*="background-color: #f5f5f5 " i], [style*="background-color: #f5f5f5!" i], [style*="background-color:#f2f2f2;" i], [style*="background-color:#f2f2f2 " i], [style*="background-color:#f2f2f2!" i], [style*="background-color: #f2f2f2;" i], [style*="background-color: #f2f2f2 " i], [style*="background-color: #f2f2f2!" i], [style*="background-color:#f1f1f1;" i], [style*="background-color:#f1f1f1 " i], [style*="background-color:#f1f1f1!" i], [style*="background-color: #f1f1f1;" i], [style*="background-color: #f1f1f1 " i], [style*="background-color: #f1f1f1!" i], [style*="background-color:#f0f0f0;" i], [style*="background-color:#f0f0f0 " i], [style*="background-color:#f0f0f0!" i], [style*="background-color: #f0f0f0;" i], [style*="background-color: #f0f0f0 " i], [style*="background-color: #f0f0f0!" i], [style*="background-color:#eee;" i], [style*="background-color:#eee " i], [style*="background-color:#eee!" i], [style*="background-color: #eee;" i], [style*="background-color: #eee " i], [style*="background-color: #eee!" i], [style*="background-color:#eeeeee;" i], [style*="background-color:#eeeeee " i], [style*="background-color:#eeeeee!" i], [style*="background-color: #eeeeee;" i], [style*="background-color: #eeeeee " i], [style*="background-color: #eeeeee!" i], [style*="background-color:#e9ecef;" i], [style*="background-color:#e9ecef " i], [style*="background-color:#e9ecef!" i], [style*="background-color: #e9ecef;" i], [style*="background-color: #e9ecef " i], [style*="background-color: #e9ecef!" i], [style*="background-color:#fcfcfc;" i], [style*="background-color:#fcfcfc " i], [style*="background-color:#fcfcfc!" i], [style*="background-color: #fcfcfc;" i], [style*="background-color: #fcfcfc " i], [style*="background-color: #fcfcfc!" i], [style*="background-color:#fbfbfb;" i], [style*="background-color:#fbfbfb " i], [style*="background-color:#fbfbfb!" i], [style*="background-color: #fbfbfb;" i], [style*="background-color: #fbfbfb " i], [style*="background-color: #fbfbfb!" i], [style*="background-color:#f9f9f9;" i], [style*="background-color:#f9f9f9 " i], [style*="background-color:#f9f9f9!" i], [style*="background-color: #f9f9f9;" i], [style*="background-color: #f9f9f9 " i], [style*="background-color: #f9f9f9!" i], [style*="background-color:#f8f8f8;" i], [style*="background-color:#f8f8f8 " i], [style*="background-color:#f8f8f8!" i], [style*="background-color: #f8f8f8;" i], [style*="background-color: #f8f8f8 " i], [style*="background-color: #f8f8f8!" i], [style*="background-color:#f6f6f6;" i], [style*="background-color:#f6f6f6 " i], [style*="background-color:#f6f6f6!" i], [style*="background-color: #f6f6f6;" i], [style*="background-color: #f6f6f6 " i], [style*="background-color: #f6f6f6!" i], [style*="background-color:#f4f4f4;" i], [style*="background-color:#f4f4f4 " i], [style*="background-color:#f4f4f4!" i], [style*="background-color: #f4f4f4;" i], [style*="background-color: #f4f4f4 " i], [style*="background-color: #f4f4f4!" i], [style*="background-color:#f3f3f3;" i], [style*="background-color:#f3f3f3 " i], [style*="background-color:#f3f3f3!" i], [style*="background-color: #f3f3f3;" i], [style*="background-color: #f3f3f3 " i], [style*="background-color: #f3f3f3!" i], [style*="background-color:#ececec;" i], [style*="background-color:#ececec " i], [style*="background-color:#ececec!" i], [style*="background-color: #ececec;" i], [style*="background-color: #ececec " i], [style*="background-color: #ececec!" i], [style*="background-color:#e9e9e9;" i], [style*="background-color:#e9e9e9 " i], [style*="background-color:#e9e9e9!" i], [style*="background-color: #e9e9e9;" i], [style*="background-color: #e9e9e9 " i], [style*="background-color: #e9e9e9!" i], [style*="background-color:#f8fafc;" i], [style*="background-color:#f8fafc " i], [style*="background-color:#f8fafc!" i], [style*="background-color: #f8fafc;" i], [style*="background-color: #f8fafc " i], [style*="background-color: #f8fafc!" i], [style*="background-color:#f1f5f9;" i], [style*="background-color:#f1f5f9 " i], [style*="background-color:#f1f5f9!" i], [style*="background-color: #f1f5f9;" i], [style*="background-color: #f1f5f9 " i], [style*="background-color: #f1f5f9!" i], [style*="background-color:#e2e8f0;" i], [style*="background-color:#e2e8f0 " i], [style*="background-color:#e2e8f0!" i], [style*="background-color: #e2e8f0;" i], [style*="background-color: #e2e8f0 " i], [style*="background-color: #e2e8f0!" i], [style*="background-color:#f9fafb;" i], [style*="background-color:#f9fafb " i], [style*="background-color:#f9fafb!" i], [style*="background-color: #f9fafb;" i], [style*="background-color: #f9fafb " i], [style*="background-color: #f9fafb!" i], [style*="background-color:#f3f4f6;" i], [style*="background-color:#f3f4f6 " i], [style*="background-color:#f3f4f6!" i], [style*="background-color: #f3f4f6;" i], [style*="background-color: #f3f4f6 " i], [style*="background-color: #f3f4f6!" i], [style*="background-color:#e5e7eb;" i], [style*="background-color:#e5e7eb " i], [style*="background-color:#e5e7eb!" i], [style*="background-color: #e5e7eb;" i], [style*="background-color: #e5e7eb " i], [style*="background-color: #e5e7eb!" i], [style$="background:#fff" i], [style$="background: #fff" i], [style$="background:#ffffff" i], [style$="background: #ffffff" i], [style$="background:white" i], [style$="background: white" i], [style$="background:#fafafa" i], [style$="background: #fafafa" i], [style$="background:#f8f9fa" i], [style$="background: #f8f9fa" i], [style$="background:#f7f7f7" i], [style$="background: #f7f7f7" i], [style$="background:#f5f5f5" i], [style$="background: #f5f5f5" i], [style$="background:#f2f2f2" i], [style$="background: #f2f2f2" i], [style$="background:#f1f1f1" i], [style$="background: #f1f1f1" i], [style$="background:#f0f0f0" i], [style$="background: #f0f0f0" i], [style$="background:#eee" i], [style$="background: #eee" i], [style$="background:#eeeeee" i], [style$="background: #eeeeee" i], [style$="background:#e9ecef" i], [style$="background: #e9ecef" i], [style$="background:#fcfcfc" i], [style$="background: #fcfcfc" i], [style$="background:#fbfbfb" i], [style$="background: #fbfbfb" i], [style$="background:#f9f9f9" i], [style$="background: #f9f9f9" i], [style$="background:#f8f8f8" i], [style$="background: #f8f8f8" i], [style$="background:#f6f6f6" i], [style$="background: #f6f6f6" i], [style$="background:#f4f4f4" i], [style$="background: #f4f4f4" i], [style$="background:#f3f3f3" i], [style$="background: #f3f3f3" i], [style$="background:#ececec" i], [style$="background: #ececec" i], [style$="background:#e9e9e9" i], [style$="background: #e9e9e9" i], [style$="background:#f8fafc" i], [style$="background: #f8fafc" i], [style$="background:#f1f5f9" i], [style$="background: #f1f5f9" i], [style$="background:#e2e8f0" i], [style$="background: #e2e8f0" i], [style$="background:#f9fafb" i], [style$="background: #f9fafb" i], [style$="background:#f3f4f6" i], [style$="background: #f3f4f6" i], [style$="background:#e5e7eb" i], [style$="background: #e5e7eb" i], [style$="background-color:#fff" i], [style$="background-color: #fff" i], [style$="background-color:#ffffff" i], [style$="background-color: #ffffff" i], [style$="background-color:white" i], [style$="background-color: white" i], [style$="background-color:#fafafa" i], [style$="background-color: #fafafa" i], [style$="background-color:#f8f9fa" i], [style$="background-color: #f8f9fa" i], [style$="background-color:#f7f7f7" i], [style$="background-color: #f7f7f7" i], [style$="background-color:#f5f5f5" i], [style$="background-color: #f5f5f5" i], [style$="background-color:#f2f2f2" i], [style$="background-color: #f2f2f2" i], [style$="background-color:#f1f1f1" i], [style$="background-color: #f1f1f1" i], [style$="background-color:#f0f0f0" i], [style$="background-color: #f0f0f0" i], [style$="background-color:#eee" i], [style$="background-color: #eee" i], [style$="background-color:#eeeeee" i], [style$="background-color: #eeeeee" i], [style$="background-color:#e9ecef" i], [style$="background-color: #e9ecef" i], [style$="background-color:#fcfcfc" i], [style$="background-color: #fcfcfc" i], [style$="background-color:#fbfbfb" i], [style$="background-color: #fbfbfb" i], [style$="background-color:#f9f9f9" i], [style$="background-color: #f9f9f9" i], [style$="background-color:#f8f8f8" i], [style$="background-color: #f8f8f8" i], [style$="background-color:#f6f6f6" i], [style$="background-color: #f6f6f6" i], [style$="background-color:#f4f4f4" i], [style$="background-color: #f4f4f4" i], [style$="background-color:#f3f3f3" i], [style$="background-color: #f3f3f3" i], [style$="background-color:#ececec" i], [style$="background-color: #ececec" i], [style$="background-color:#e9e9e9" i], [style$="background-color: #e9e9e9" i], [style$="background-color:#f8fafc" i], [style$="background-color: #f8fafc" i], [style$="background-color:#f1f5f9" i], [style$="background-color: #f1f5f9" i], [style$="background-color:#e2e8f0" i], [style$="background-color: #e2e8f0" i], [style$="background-color:#f9fafb" i], [style$="background-color: #f9fafb" i], [style$="background-color:#f3f4f6" i], [style$="background-color: #f3f4f6" i], [style$="background-color:#e5e7eb" i], [style$="background-color: #e5e7eb" i]):not(.ts-eigen, [data-ts-eigen], :is(.ts-eigen, [data-ts-eigen]) *) {
    background: var(--kd-feld) !important;
    border-color: var(--kd-line) !important;
}

/* Aufgeklappter Inhalt unter einer Leiste (neutral): Kartenfarbe mit Rand, damit er sich von der Leiste absetzt */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) details > summary + div:is([style*="background:#fff;" i], [style*="background:#fff " i], [style*="background:#fff!" i], [style*="background: #fff;" i], [style*="background: #fff " i], [style*="background: #fff!" i], [style*="background:#ffffff;" i], [style*="background:#ffffff " i], [style*="background:#ffffff!" i], [style*="background: #ffffff;" i], [style*="background: #ffffff " i], [style*="background: #ffffff!" i], [style*="background:white;" i], [style*="background:white " i], [style*="background:white!" i], [style*="background: white;" i], [style*="background: white " i], [style*="background: white!" i], [style*="background:#fafafa;" i], [style*="background:#fafafa " i], [style*="background:#fafafa!" i], [style*="background: #fafafa;" i], [style*="background: #fafafa " i], [style*="background: #fafafa!" i], [style*="background:#f8f9fa;" i], [style*="background:#f8f9fa " i], [style*="background:#f8f9fa!" i], [style*="background: #f8f9fa;" i], [style*="background: #f8f9fa " i], [style*="background: #f8f9fa!" i], [style*="background:#f7f7f7;" i], [style*="background:#f7f7f7 " i], [style*="background:#f7f7f7!" i], [style*="background: #f7f7f7;" i], [style*="background: #f7f7f7 " i], [style*="background: #f7f7f7!" i], [style*="background:#f5f5f5;" i], [style*="background:#f5f5f5 " i], [style*="background:#f5f5f5!" i], [style*="background: #f5f5f5;" i], [style*="background: #f5f5f5 " i], [style*="background: #f5f5f5!" i], [style*="background:#f2f2f2;" i], [style*="background:#f2f2f2 " i], [style*="background:#f2f2f2!" i], [style*="background: #f2f2f2;" i], [style*="background: #f2f2f2 " i], [style*="background: #f2f2f2!" i], [style*="background:#f1f1f1;" i], [style*="background:#f1f1f1 " i], [style*="background:#f1f1f1!" i], [style*="background: #f1f1f1;" i], [style*="background: #f1f1f1 " i], [style*="background: #f1f1f1!" i], [style*="background:#f0f0f0;" i], [style*="background:#f0f0f0 " i], [style*="background:#f0f0f0!" i], [style*="background: #f0f0f0;" i], [style*="background: #f0f0f0 " i], [style*="background: #f0f0f0!" i], [style*="background:#eee;" i], [style*="background:#eee " i], [style*="background:#eee!" i], [style*="background: #eee;" i], [style*="background: #eee " i], [style*="background: #eee!" i], [style*="background:#eeeeee;" i], [style*="background:#eeeeee " i], [style*="background:#eeeeee!" i], [style*="background: #eeeeee;" i], [style*="background: #eeeeee " i], [style*="background: #eeeeee!" i], [style*="background:#e9ecef;" i], [style*="background:#e9ecef " i], [style*="background:#e9ecef!" i], [style*="background: #e9ecef;" i], [style*="background: #e9ecef " i], [style*="background: #e9ecef!" i], [style*="background:#fcfcfc;" i], [style*="background:#fcfcfc " i], [style*="background:#fcfcfc!" i], [style*="background: #fcfcfc;" i], [style*="background: #fcfcfc " i], [style*="background: #fcfcfc!" i], [style*="background:#fbfbfb;" i], [style*="background:#fbfbfb " i], [style*="background:#fbfbfb!" i], [style*="background: #fbfbfb;" i], [style*="background: #fbfbfb " i], [style*="background: #fbfbfb!" i], [style*="background:#f9f9f9;" i], [style*="background:#f9f9f9 " i], [style*="background:#f9f9f9!" i], [style*="background: #f9f9f9;" i], [style*="background: #f9f9f9 " i], [style*="background: #f9f9f9!" i], [style*="background:#f8f8f8;" i], [style*="background:#f8f8f8 " i], [style*="background:#f8f8f8!" i], [style*="background: #f8f8f8;" i], [style*="background: #f8f8f8 " i], [style*="background: #f8f8f8!" i], [style*="background:#f6f6f6;" i], [style*="background:#f6f6f6 " i], [style*="background:#f6f6f6!" i], [style*="background: #f6f6f6;" i], [style*="background: #f6f6f6 " i], [style*="background: #f6f6f6!" i], [style*="background:#f4f4f4;" i], [style*="background:#f4f4f4 " i], [style*="background:#f4f4f4!" i], [style*="background: #f4f4f4;" i], [style*="background: #f4f4f4 " i], [style*="background: #f4f4f4!" i], [style*="background:#f3f3f3;" i], [style*="background:#f3f3f3 " i], [style*="background:#f3f3f3!" i], [style*="background: #f3f3f3;" i], [style*="background: #f3f3f3 " i], [style*="background: #f3f3f3!" i], [style*="background:#ececec;" i], [style*="background:#ececec " i], [style*="background:#ececec!" i], [style*="background: #ececec;" i], [style*="background: #ececec " i], [style*="background: #ececec!" i], [style*="background:#e9e9e9;" i], [style*="background:#e9e9e9 " i], [style*="background:#e9e9e9!" i], [style*="background: #e9e9e9;" i], [style*="background: #e9e9e9 " i], [style*="background: #e9e9e9!" i], [style*="background:#f8fafc;" i], [style*="background:#f8fafc " i], [style*="background:#f8fafc!" i], [style*="background: #f8fafc;" i], [style*="background: #f8fafc " i], [style*="background: #f8fafc!" i], [style*="background:#f1f5f9;" i], [style*="background:#f1f5f9 " i], [style*="background:#f1f5f9!" i], [style*="background: #f1f5f9;" i], [style*="background: #f1f5f9 " i], [style*="background: #f1f5f9!" i], [style*="background:#e2e8f0;" i], [style*="background:#e2e8f0 " i], [style*="background:#e2e8f0!" i], [style*="background: #e2e8f0;" i], [style*="background: #e2e8f0 " i], [style*="background: #e2e8f0!" i], [style*="background:#f9fafb;" i], [style*="background:#f9fafb " i], [style*="background:#f9fafb!" i], [style*="background: #f9fafb;" i], [style*="background: #f9fafb " i], [style*="background: #f9fafb!" i], [style*="background:#f3f4f6;" i], [style*="background:#f3f4f6 " i], [style*="background:#f3f4f6!" i], [style*="background: #f3f4f6;" i], [style*="background: #f3f4f6 " i], [style*="background: #f3f4f6!" i], [style*="background:#e5e7eb;" i], [style*="background:#e5e7eb " i], [style*="background:#e5e7eb!" i], [style*="background: #e5e7eb;" i], [style*="background: #e5e7eb " i], [style*="background: #e5e7eb!" i], [style*="background-color:#fff;" i], [style*="background-color:#fff " i], [style*="background-color:#fff!" i], [style*="background-color: #fff;" i], [style*="background-color: #fff " i], [style*="background-color: #fff!" i], [style*="background-color:#ffffff;" i], [style*="background-color:#ffffff " i], [style*="background-color:#ffffff!" i], [style*="background-color: #ffffff;" i], [style*="background-color: #ffffff " i], [style*="background-color: #ffffff!" i], [style*="background-color:white;" i], [style*="background-color:white " i], [style*="background-color:white!" i], [style*="background-color: white;" i], [style*="background-color: white " i], [style*="background-color: white!" i], [style*="background-color:#fafafa;" i], [style*="background-color:#fafafa " i], [style*="background-color:#fafafa!" i], [style*="background-color: #fafafa;" i], [style*="background-color: #fafafa " i], [style*="background-color: #fafafa!" i], [style*="background-color:#f8f9fa;" i], [style*="background-color:#f8f9fa " i], [style*="background-color:#f8f9fa!" i], [style*="background-color: #f8f9fa;" i], [style*="background-color: #f8f9fa " i], [style*="background-color: #f8f9fa!" i], [style*="background-color:#f7f7f7;" i], [style*="background-color:#f7f7f7 " i], [style*="background-color:#f7f7f7!" i], [style*="background-color: #f7f7f7;" i], [style*="background-color: #f7f7f7 " i], [style*="background-color: #f7f7f7!" i], [style*="background-color:#f5f5f5;" i], [style*="background-color:#f5f5f5 " i], [style*="background-color:#f5f5f5!" i], [style*="background-color: #f5f5f5;" i], [style*="background-color: #f5f5f5 " i], [style*="background-color: #f5f5f5!" i], [style*="background-color:#f2f2f2;" i], [style*="background-color:#f2f2f2 " i], [style*="background-color:#f2f2f2!" i], [style*="background-color: #f2f2f2;" i], [style*="background-color: #f2f2f2 " i], [style*="background-color: #f2f2f2!" i], [style*="background-color:#f1f1f1;" i], [style*="background-color:#f1f1f1 " i], [style*="background-color:#f1f1f1!" i], [style*="background-color: #f1f1f1;" i], [style*="background-color: #f1f1f1 " i], [style*="background-color: #f1f1f1!" i], [style*="background-color:#f0f0f0;" i], [style*="background-color:#f0f0f0 " i], [style*="background-color:#f0f0f0!" i], [style*="background-color: #f0f0f0;" i], [style*="background-color: #f0f0f0 " i], [style*="background-color: #f0f0f0!" i], [style*="background-color:#eee;" i], [style*="background-color:#eee " i], [style*="background-color:#eee!" i], [style*="background-color: #eee;" i], [style*="background-color: #eee " i], [style*="background-color: #eee!" i], [style*="background-color:#eeeeee;" i], [style*="background-color:#eeeeee " i], [style*="background-color:#eeeeee!" i], [style*="background-color: #eeeeee;" i], [style*="background-color: #eeeeee " i], [style*="background-color: #eeeeee!" i], [style*="background-color:#e9ecef;" i], [style*="background-color:#e9ecef " i], [style*="background-color:#e9ecef!" i], [style*="background-color: #e9ecef;" i], [style*="background-color: #e9ecef " i], [style*="background-color: #e9ecef!" i], [style*="background-color:#fcfcfc;" i], [style*="background-color:#fcfcfc " i], [style*="background-color:#fcfcfc!" i], [style*="background-color: #fcfcfc;" i], [style*="background-color: #fcfcfc " i], [style*="background-color: #fcfcfc!" i], [style*="background-color:#fbfbfb;" i], [style*="background-color:#fbfbfb " i], [style*="background-color:#fbfbfb!" i], [style*="background-color: #fbfbfb;" i], [style*="background-color: #fbfbfb " i], [style*="background-color: #fbfbfb!" i], [style*="background-color:#f9f9f9;" i], [style*="background-color:#f9f9f9 " i], [style*="background-color:#f9f9f9!" i], [style*="background-color: #f9f9f9;" i], [style*="background-color: #f9f9f9 " i], [style*="background-color: #f9f9f9!" i], [style*="background-color:#f8f8f8;" i], [style*="background-color:#f8f8f8 " i], [style*="background-color:#f8f8f8!" i], [style*="background-color: #f8f8f8;" i], [style*="background-color: #f8f8f8 " i], [style*="background-color: #f8f8f8!" i], [style*="background-color:#f6f6f6;" i], [style*="background-color:#f6f6f6 " i], [style*="background-color:#f6f6f6!" i], [style*="background-color: #f6f6f6;" i], [style*="background-color: #f6f6f6 " i], [style*="background-color: #f6f6f6!" i], [style*="background-color:#f4f4f4;" i], [style*="background-color:#f4f4f4 " i], [style*="background-color:#f4f4f4!" i], [style*="background-color: #f4f4f4;" i], [style*="background-color: #f4f4f4 " i], [style*="background-color: #f4f4f4!" i], [style*="background-color:#f3f3f3;" i], [style*="background-color:#f3f3f3 " i], [style*="background-color:#f3f3f3!" i], [style*="background-color: #f3f3f3;" i], [style*="background-color: #f3f3f3 " i], [style*="background-color: #f3f3f3!" i], [style*="background-color:#ececec;" i], [style*="background-color:#ececec " i], [style*="background-color:#ececec!" i], [style*="background-color: #ececec;" i], [style*="background-color: #ececec " i], [style*="background-color: #ececec!" i], [style*="background-color:#e9e9e9;" i], [style*="background-color:#e9e9e9 " i], [style*="background-color:#e9e9e9!" i], [style*="background-color: #e9e9e9;" i], [style*="background-color: #e9e9e9 " i], [style*="background-color: #e9e9e9!" i], [style*="background-color:#f8fafc;" i], [style*="background-color:#f8fafc " i], [style*="background-color:#f8fafc!" i], [style*="background-color: #f8fafc;" i], [style*="background-color: #f8fafc " i], [style*="background-color: #f8fafc!" i], [style*="background-color:#f1f5f9;" i], [style*="background-color:#f1f5f9 " i], [style*="background-color:#f1f5f9!" i], [style*="background-color: #f1f5f9;" i], [style*="background-color: #f1f5f9 " i], [style*="background-color: #f1f5f9!" i], [style*="background-color:#e2e8f0;" i], [style*="background-color:#e2e8f0 " i], [style*="background-color:#e2e8f0!" i], [style*="background-color: #e2e8f0;" i], [style*="background-color: #e2e8f0 " i], [style*="background-color: #e2e8f0!" i], [style*="background-color:#f9fafb;" i], [style*="background-color:#f9fafb " i], [style*="background-color:#f9fafb!" i], [style*="background-color: #f9fafb;" i], [style*="background-color: #f9fafb " i], [style*="background-color: #f9fafb!" i], [style*="background-color:#f3f4f6;" i], [style*="background-color:#f3f4f6 " i], [style*="background-color:#f3f4f6!" i], [style*="background-color: #f3f4f6;" i], [style*="background-color: #f3f4f6 " i], [style*="background-color: #f3f4f6!" i], [style*="background-color:#e5e7eb;" i], [style*="background-color:#e5e7eb " i], [style*="background-color:#e5e7eb!" i], [style*="background-color: #e5e7eb;" i], [style*="background-color: #e5e7eb " i], [style*="background-color: #e5e7eb!" i], [style$="background:#fff" i], [style$="background: #fff" i], [style$="background:#ffffff" i], [style$="background: #ffffff" i], [style$="background:white" i], [style$="background: white" i], [style$="background:#fafafa" i], [style$="background: #fafafa" i], [style$="background:#f8f9fa" i], [style$="background: #f8f9fa" i], [style$="background:#f7f7f7" i], [style$="background: #f7f7f7" i], [style$="background:#f5f5f5" i], [style$="background: #f5f5f5" i], [style$="background:#f2f2f2" i], [style$="background: #f2f2f2" i], [style$="background:#f1f1f1" i], [style$="background: #f1f1f1" i], [style$="background:#f0f0f0" i], [style$="background: #f0f0f0" i], [style$="background:#eee" i], [style$="background: #eee" i], [style$="background:#eeeeee" i], [style$="background: #eeeeee" i], [style$="background:#e9ecef" i], [style$="background: #e9ecef" i], [style$="background:#fcfcfc" i], [style$="background: #fcfcfc" i], [style$="background:#fbfbfb" i], [style$="background: #fbfbfb" i], [style$="background:#f9f9f9" i], [style$="background: #f9f9f9" i], [style$="background:#f8f8f8" i], [style$="background: #f8f8f8" i], [style$="background:#f6f6f6" i], [style$="background: #f6f6f6" i], [style$="background:#f4f4f4" i], [style$="background: #f4f4f4" i], [style$="background:#f3f3f3" i], [style$="background: #f3f3f3" i], [style$="background:#ececec" i], [style$="background: #ececec" i], [style$="background:#e9e9e9" i], [style$="background: #e9e9e9" i], [style$="background:#f8fafc" i], [style$="background: #f8fafc" i], [style$="background:#f1f5f9" i], [style$="background: #f1f5f9" i], [style$="background:#e2e8f0" i], [style$="background: #e2e8f0" i], [style$="background:#f9fafb" i], [style$="background: #f9fafb" i], [style$="background:#f3f4f6" i], [style$="background: #f3f4f6" i], [style$="background:#e5e7eb" i], [style$="background: #e5e7eb" i], [style$="background-color:#fff" i], [style$="background-color: #fff" i], [style$="background-color:#ffffff" i], [style$="background-color: #ffffff" i], [style$="background-color:white" i], [style$="background-color: white" i], [style$="background-color:#fafafa" i], [style$="background-color: #fafafa" i], [style$="background-color:#f8f9fa" i], [style$="background-color: #f8f9fa" i], [style$="background-color:#f7f7f7" i], [style$="background-color: #f7f7f7" i], [style$="background-color:#f5f5f5" i], [style$="background-color: #f5f5f5" i], [style$="background-color:#f2f2f2" i], [style$="background-color: #f2f2f2" i], [style$="background-color:#f1f1f1" i], [style$="background-color: #f1f1f1" i], [style$="background-color:#f0f0f0" i], [style$="background-color: #f0f0f0" i], [style$="background-color:#eee" i], [style$="background-color: #eee" i], [style$="background-color:#eeeeee" i], [style$="background-color: #eeeeee" i], [style$="background-color:#e9ecef" i], [style$="background-color: #e9ecef" i], [style$="background-color:#fcfcfc" i], [style$="background-color: #fcfcfc" i], [style$="background-color:#fbfbfb" i], [style$="background-color: #fbfbfb" i], [style$="background-color:#f9f9f9" i], [style$="background-color: #f9f9f9" i], [style$="background-color:#f8f8f8" i], [style$="background-color: #f8f8f8" i], [style$="background-color:#f6f6f6" i], [style$="background-color: #f6f6f6" i], [style$="background-color:#f4f4f4" i], [style$="background-color: #f4f4f4" i], [style$="background-color:#f3f3f3" i], [style$="background-color: #f3f3f3" i], [style$="background-color:#ececec" i], [style$="background-color: #ececec" i], [style$="background-color:#e9e9e9" i], [style$="background-color: #e9e9e9" i], [style$="background-color:#f8fafc" i], [style$="background-color: #f8fafc" i], [style$="background-color:#f1f5f9" i], [style$="background-color: #f1f5f9" i], [style$="background-color:#e2e8f0" i], [style$="background-color: #e2e8f0" i], [style$="background-color:#f9fafb" i], [style$="background-color: #f9fafb" i], [style$="background-color:#f3f4f6" i], [style$="background-color: #f3f4f6" i], [style$="background-color:#e5e7eb" i], [style$="background-color: #e5e7eb" i]):not(.ts-eigen, [data-ts-eigen], :is(.ts-eigen, [data-ts-eigen]) *) {
    background: var(--kd-karte) !important;
    border: 1px solid var(--kd-line) !important;
    border-top: 0 !important;
}

/* Symbole ✔ / ✗ in Theme-Farben (Kontrast auf Feld- und Kartenfarbe, auch im dunklen Theme); nicht bei ts-eigen */
:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :is([style*="color:#2fa84f" i], [style*="color: #2fa84f" i], [style*="color:green" i], [style*="color: green" i]):not(.ts-eigen, [data-ts-eigen], :is(.ts-eigen, [data-ts-eigen]) *) {
    color: var(--kd-erfolg) !important;
}

:is(.contract-description, #contractsCard .col-md-12[style*="margin-top:10px"], .card [style*="font-family"], .modal-body [style*="font-family"]) :is([style*="color:#d33" i], [style*="color: #d33" i], [style*="color:red" i], [style*="color: red" i]):not(.ts-eigen, [data-ts-eigen], :is(.ts-eigen, [data-ts-eigen]) *) {
    color: var(--kd-fehler) !important;
}

/* SEPA-Mandatstext (Text aus der Konfiguration, Label der Checkbox LastschriftverfahrenCheckbox, Vertragsabschluss u. a.):
   gleiche Größe, Zeilenabstand und Farbe wie die Vertragsbeschreibungen (14 px, 1,45). Ergänzung 20.10.2026, Wunsch Unifit. */
label.form-check-label[for="LastschriftverfahrenCheckbox"] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--kd-db-text);
}

/* ==========================================================================
   Nachtrag 21.10.2026: Akzent-Verlauf im Hintergrund (SCHALTER 5)
   - Der Verlauf liegt in derselben fixierten Ebene wie das Hintergrundbild (Nachtrag 16.10.2026), zwischen Bild und Seitenfarbe.
     Er bleibt beim Scrollen stehen und kostet keine Rechenzeit; die ausgestanzten Bögen (Kopfzeile, Titel, Startbild) zeigen ihn mit.
   - Ohne Unterstützung für „oklch(from …)“ ist die Ebene ungültig, dann wirkt nur die Seitenfarbe am body.
   ========================================================================== */
body.mainbackground::before {
    background: var(--kd-bild) center / cover no-repeat, var(--kd-verlauf), var(--kd-papier);
}

/* =======================================================================
   Nachtrag 21.10.2026 (2): Layout bei mittlerer Fensterbreite (ca. 992–1200 px, z. B. Laptop mit Zoom, Tablet quer)
   - Tarifkarten (Vertragsauswahl): Das Raster der Karte (.vk-stapel, Stil aus Contract/NewContract.cshtml) war so breit wie die
     Laufzeit-Knöpfe in einer Zeile; bei drei Spalten unter ca. 1200 px überlappten sich die Karten. Jetzt passt sich die Karte
     der Spalte an; ist sie schmal, stehen die Laufzeit-Knöpfe in zwei Reihen.
   - Linke Spalte im Abschluss („Im Vertrag enthalten“): Bei schmaler Spalte wurden Namen mitten im Wort getrennt
     („Servicepa-uschale“). Jetzt rutscht der Betrag in die nächste Zeile, Wörter bleiben ganz (Silbentrennung erlaubt).
   - Kopfzeile: Lange Menüeinträge („Mitglied werden / Probetraining buchen“) brachen in zwei Zeilen um. Jetzt einzeilig,
     zwischen 992 und 1200 px etwas kompakter.
   ========================================================================== */
.vk-tarifspalte .vk-stapel {
    grid-template-columns: minmax(0, 1fr);
}

.vk-tarifspalte .vk-variante {
    container-type: inline-size;
}

@container (max-width: 320px) {
    .vk-tarifspalte .vk-seg {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 1.25rem;
    }

    .vk-tarifspalte .vk-seg:has(> .btn:nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vk-tarifspalte .vk-seg .btn {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
}

.card .zk-inkl > li {
    flex-wrap: wrap;
    column-gap: 0.6rem;
}

.card .zk-inkl .zk-name {
    flex: 1 1 7rem;
    overflow-wrap: normal;
    hyphens: auto;
}

.card .zk-inkl .zk-betrag {
    margin-left: auto;
}

.navbar-expand-lg #navbarNav .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-expand-lg #navbarNav .nav-link {
        padding: 0 0.7rem;
        font-size: 0.875rem;
    }

    .navbar-expand-lg #navbarNav .navbar-nav {
        gap: 0.25rem;
    }
}

/* ==========================================================================================================
   KUNDEN-SPEZIFISCH (nur hier ergänzen)
   ========================================================================================================== */


/* Logo (Images/logo.png, 625 × 626) ist ein deckendes Quadrat genau in der Akzentfarbe #E21C4D mit orangem Zeichen. Ohne Rahmen
   verschwindet das Quadrat in der Kopfzeile und es bleibt nur ein kleines Zeichen sichtbar. Deshalb als App-Kachel: abgerundet, mit
   heller Kante (Schriftfarbe auf dem Akzent) und Schatten. Kein Feld der Logo-Automatik dahinter. */
:root {
    --kd-logo-grund: none;
}

.ts-main-navbar .navbar-brand {
    perspective: 320px;                     /* Tiefe für den 3D-Effekt beim Hover */
}

/* Selektor mit .navbar-brand, damit er die feste Logo-Größe aus _Layout.cshtml (Inline-<style> nach customer.css) schlägt */
.ts-main-navbar .navbar-brand .navbar-brand-logo {
    width: 42px;
    height: 42px;
    max-width: none;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--kd-akzent-text), 0 4px 12px rgba(0, 0, 0, 0.25);
    transform-origin: 50% 60%;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2), box-shadow 0.35s ease, filter 0.35s ease;
    will-change: transform;
}

/* Hover/Fokus: Kachel kippt leicht nach hinten und hebt sich an, Schatten wird länger, etwas mehr Leuchtkraft */
.ts-main-navbar .navbar-brand:hover .navbar-brand-logo,
.ts-main-navbar .navbar-brand:focus-visible .navbar-brand-logo {
    transform: translateY(-2px) rotateX(16deg) rotateY(-18deg) scale(1.08);
    box-shadow: 0 0 0 2px var(--kd-akzent-text), 6px 10px 18px rgba(0, 0, 0, 0.35);
    filter: saturate(1.15) brightness(1.06);
}

.ts-main-navbar .navbar-brand:active .navbar-brand-logo {
    transform: translateY(0) rotateX(8deg) rotateY(-9deg) scale(1.02);
    transition-duration: 0.12s;
}

@media (max-width: 768px) {
    .ts-main-navbar .navbar-brand .navbar-brand-logo {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-main-navbar .navbar-brand .navbar-brand-logo {
        transition: none;
    }
    .ts-main-navbar .navbar-brand:hover .navbar-brand-logo,
    .ts-main-navbar .navbar-brand:focus-visible .navbar-brand-logo {
        transform: none;
    }
}