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

#FooterText{
	background-color: rgba(0, 0, 0, 0.2);
}

/* Für die Buttons im Footer  */
.btn-outline-dark {
    color: #fff;
    border-color: #fff;
}
/* Für die Buttons im Footer  */
.btn-outline-dark:hover {
    color: #fff;
    border-color: #fff;
}

.bg-light { /*switch Dark/Light */
    /*background-color: #fbfbfb!important;*/ /* Light */
	    background-color: rgba(0, 0, 0, 0.2)!important; /* Dark */
}

.navbar-light .navbar-nav .nav-link {
    color: #fff; /*Only Dark Needed*/
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #fff; /*Only Dark Needed*/
}

.navbar-light .navbar-nav .nav-link:focus {
    color: #fff; /*Only Dark Needed*/
}

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

.chipsfilteritems {
	background-color: #e2001a;
	color: white;
	margin-bottom: 0rem;
}

.selectizeItemCustom {
	background-color: #e2001a !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: #424242; /*switch Dark/Light */
	background: #FF2A1B;
}

.btn-warning:hover {
	color: #424242; /*switch Dark/Light */
	background: #FF2A1B;
}

.btn-warning:active {
	color: #424242; /*switch Dark/Light */
	background: #FF2A1B;
}

.btn-warning:focus {
	color: #424242; /*switch Dark/Light */
	background: #FF2A1B;
}

.btn-warning:disabled {
	color: #424242; /*switch Dark/Light */
	background: #FF2A1B;
}

.bg-primary {
	background-color: #FF2A1B!important;
}

.form-control:focus#capture{
	color: #FF2A1B;
	border-color: #FF2A1B;
}

.form-outline .form-control:focus~.form-label {
	color: #FF2A1B;
}

.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid #FF2A1B;
    border-bottom: 0.125rem solid #FF2A1B;
    border-left: 0.125rem solid #FF2A1B;
}

.form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #FF2A1B;
}

.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid #FF2A1B;
    border-bottom: 0.125rem solid #FF2A1B;
    border-right: 0.125rem solid #FF2A1B;
}

.accordion-button:not(.collapsed){
	color: #FF2A1B;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #FF2A1B;
    border-color: #FF2A1B;
}

.accordion-button:not(.collapsed):after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF2A1B'%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")
}

.aqua-gradient {
    background: linear-gradient(135deg, var(--kd-akzent, #FF2A1B) 0%, #6e0c05 100%) !important;
}

.fc-state-default {
    border-color: #FF2A1B;
    color: #FF2A1B;
}

.fc-state-down, .fc-state-active {
    background-color: #FF2A1B;
    color: #FFFFFF;
}

.fc-state-hover{
	background-color: rgba(255, 42, 27, 0.3);
}

.fc-state-disabled {
    background-color: rgba(255, 42, 27, 0.3);
    filter: alpha(opacity=65);
    border: 1px solid rgba(255, 42, 27, 0.3);
    color: #FF2A1B;
}

.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: #424242;
}

.ns-calendar .event-title:hover {
	color: #FF2A1B;
}

.ns-calendar .event-info:hover {
	color: #FF2A1B;
}

.select-input.focused~.select-arrow {
    color: #FF2A1B;
}

.select-input.focused~.select-label {
    color: #FF2A1B;
}

.select-input.focused~.form-notch .form-notch-leading {
    border-top: 2px solid #FF2A1B;
    border-bottom: 2px solid #FF2A1B;
    border-left: 2px solid #FF2A1B;
}

.select-input.focused~.form-notch .form-notch-middle{
    border-bottom: 2px solid;
    border-color: #FF2A1B;
}

.select-input.focused~.form-notch .form-notch-trailing {
    border-color: currentcolor currentcolor currentcolor #FF2A1B;
    border-bottom: 2px solid #FF2A1B;
    border-right: 2px solid #FF2A1B;
    border-top: 2px solid #FF2A1B;
}

.datepicker-toggle-button:focus, .datepicker-toggle-button:hover {
    color: #FF2A1B;
}

.datepicker-header {
    background-color: #FF2A1B;
}

.datepicker-footer-btn{
	color: #FF2A1B;
}

.datepicker-cell.selected .datepicker-cell-content {
    background-color: #FF2A1B;
    color: #ffffff;
}

.datepicker-date-controls, .datepicker-date-text, .datepicker-title-text {
    color: #424242; /*switch Dark/Light */
}

.page-item.active .page-link {
    background-color: #FF2A1B;
}

.form-check-input:checked {
    border-color: #FF2A1B;
}

.form-check-input[type=checkbox]:checked {
    background-color: #FF2A1B;
}

.form-check-input:focus {
    border-color: #FF2A1B;
}

.form-check-input:checked:focus:before {
    box-shadow: 0 0 0 13px #FF2A1B;
}

.form-check-input[type=checkbox]:checked:after {
    border-color: #ffffff;
}

.form-check-input[type=checkbox]:checked:focus {
	border-color: #FF2A1B;
	background-color: #FF2A1B;
}

.form-check-input:checked, .form-check-input:checked:focus {
	border-color: #FF2A1B;
	background-color: #FF2A1B;
}

/* Change Color light Accent */
.badge-primary {
    background-color: rgba(255, 42, 27, 0.18);
}

.badge-primary i {
    color: #FF2A1B;
}

.btn-link {
    color: #FF2A1B;
}

.progress-bar {
	background-color: #FF2A1B;
}

a {
	cursor: pointer;
}

a:hover {
	color: #FF2A1B;
}

.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, rgba(255, 42, 27, 0.16))!important;
}

.btn-warning {
    color: #fff;
    background: #FF2A1B;
}

.badge-primary {
    color: #ffffff;
}

.form-check-input[type=radio]:checked:after {
    border-color: #FF2A1B;
    background-color: #FF2A1B;
}

.loading-spinner{
	color: #FF2A1B;
}



.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 rgba(255, 255, 255, 0.12); }

	 td:not(.datepicker-cell) {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		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; }
}


/* ==========================================================================
   Modernes Design – Dunkel (Aufbau wie die BODYfit-Demo, 10/2026)
   Akzentfarbiger Kopf mit Seitentitel, darunter schiebt sich ein schwarzes Blatt
   mit runder Oberkante hervor; dunkle Karten mit Haarlinie, Pillen-Knöpfe.
   Farben nur hier oben ändern.
   ========================================================================== */

:root {
    --kd-akzent: #FF2A1B;
    --kd-akzent-text: var(--ts-akzent-text, #ffffff); /* Schrift auf Akzentflächen: automatisch Weiß oder Dunkel (TS-Web2 berechnet --ts-akzent-text) */
    --kd-akzent-hell: rgba(255, 42, 27, 0.16);
    --kd-papier: #0e0e0e;                 /* Blatt / Seitenhintergrund */
    /* Optional Hintergrundbild statt Schwarz (abgedunkelt für die Lesbarkeit), z. B.:
       --kd-bild: linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.78)), url("/Customer/hintergrund.jpg");
       dazu Karten leicht durchscheinend: --kd-karte: rgba(25, 25, 25, 0.82); --kd-feld: rgba(40, 40, 40, 0.85); */
    --kd-bild: none;
    /* Feld hinter dem Logo in der Kopfzeile: nicht gesetzt = automatisch (nur wenn das Logo sonst verschwindet), none = nie, Farbe = immer, z. B. --kd-logo-grund: #ffffff; */
    /* Glas-Effekt der Karten (sinnvoll mit Hintergrundbild), leer = aus. Beispielwerte siehe Abschnitt „Glas“ am Dateiende. */
    --kd-glas-rand: none;
    --kd-glas-glanz: none;
    --kd-glas-innen: 0 0 0 0 transparent;
    /* Bewegliche Lichtkante: folgt Maus bzw. Finger (Farbe des Lichts), none = feste Kante. Nur zusammen mit --kd-glas-rand. */
    --kd-glas-licht: none;
    --kd-karte: #191919;
    --kd-feld: #242424;                   /* Eingabefelder, Umschalter */
    --kd-ink: #f4f4f4;                    /* Überschriften, starke Schrift */
    --kd-text: #c9c9c9;
    --kd-mute: #8d8d8d;
    --kd-line: rgba(255, 255, 255, 0.08);
    --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-ease: cubic-bezier(0.23, 1, 0.32, 1);

    /* Seiten ohne Titel im Kopf: erste Überschrift wird in den Akzent-Kopf übernommen (TS-Web2-Layout) */
    --ts-titel-in-kopf: 1;

    /* Moderner Vertragsabschluss (vk-modern) */
    --vk-akzent-hell: rgba(255, 42, 27, 0.18);
    --vk-akzent-flaeche: rgba(255, 42, 27, 0.08);
    --vk-akzent-rand: rgba(255, 42, 27, 0.55);
    --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);
}

/* ---------- 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: rgba(25, 25, 25, 0.92);
    -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) .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) .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 #ffffff;
    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: #ffffff;
        color: #111111;
    }
}

/* 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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) > .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)) ~ .col-lg-12 > .btn-warning.pull-left {
    margin-top: 1.25rem;
}

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

section.overflow-hidden:has(#carouselExampleIndicators)::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: feste Höhe und zuschneiden statt verkleinern (Banner sind meist sehr breit) */
@media (max-width: 767.98px) {
    #carouselExampleIndicators .carousel-item img {
        height: 9.5rem;
        object-fit: cover;
        object-position: center;
    }

    #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);
}

.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);
}

.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: #ff6b5e;
    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: rgba(255, 255, 255, 0.03);
    --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: #060606;
    padding-top: 1.75rem;
    border-radius: 2rem 2rem 0 0;
    border-top: 1px solid var(--kd-line);
}

footer .btn-floating {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 0;
    color: #ffffff;
    width: 46px;
    height: 46px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

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

#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: #ffffff;
    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)) > .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 (Option, zusammen mit --kd-bild) ----------
   Beispielwerte für :root:
   --kd-glas-rand: linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.16) 100%);
   --kd-glas-glanz: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%);
   --kd-glas-innen: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 24px -18px rgba(0,0,0,.6);
   --kd-glas-licht: rgba(255,255,255,.7);   (optional: Lichtkante folgt Maus/Finger; dazu --kd-glas-licht-radius: 280px; --kd-glas-licht-rest: .35;)
*/
/* System-Einstellung „Transparenz reduzieren“: deckende Karten, keine Unschärfe */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --kd-karte: #191919;
        --kd-feld: #242424;
    }

    .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)) {
        justify-content: center;
    }

    .row:has(> h4.card-title):not(.vk-modern .row):not(:has(form)) > .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: dark;
}

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: dark;
}

/* ==========================================================================
   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) .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) {
    background: transparent;
}

section.overflow-hidden:has(#carouselExampleIndicators)::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;
}


/* lokaler Test SuperFit: Hintergrundbild der Live-Seite + Glas */
:root {
    --kd-bild: linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.78)), url("https://member.superfit.club/Customer/superbackground.jpg");
    --kd-karte: rgba(25, 25, 25, 0.72);
    --kd-feld: rgba(40, 40, 40, 0.8);
    --kd-glas-rand: linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.16) 100%);
    --kd-glas-glanz: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 38%);
    --kd-glas-innen: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -12px 24px -18px rgba(0,0,0,.6);
    --kd-glas-licht: rgba(255,255,255,.7);
}

/* SuperFit: Logo als SVG (transparent) mit dem dunklen, abgerundeten Kasten wie die bisherige logo.png */
.navbar-brand img.navbar-brand-logo[src$=".svg"] {
    box-sizing: border-box;
    padding: 6px 10px;
    background: #141414;
    border-radius: 0.75rem;
}