/* ============================================================
   Knigge Spirit – Kalender Optimierungen
   Termin-Karten (Optik angelehnt an The Events Calendar)

   Wrapper-Klassen:
     .ks-home-events-calendar-style           Basis (Startseite)
     .ks-home-events-calendar-style.ks-events--compact   Dashboard-Variante

   Farben: LITERALE CI-Werte (1.87.2). Die früheren var(--ks-primary) u.Ä.
   wurden entfernt — sie sind im Divi-Overlay (Buchungs-Pillen) undefiniert;
   eine undefinierte Variable macht die ganze Deklaration ungültig (color →
   erbt Overlay-Weiß, border-Kurzform → verschwindet). CLAUDE.md-Regel ohnehin.
   Die Definitionen in .ks-home-events-calendar-style bleiben als Referenz.
   ============================================================ */

.ks-home-events-calendar-style {
	/* --- CI-Farben ---
	   🔴 HIER (und sonst nirgends im Plugin) WERDEN KEINE --ks-*-FARBEN DEFINIERT.
	   Der Namensraum --ks-<rolle> gehört dem Darkmode-Plugin, das ihn mit Light-
	   UND Dark-Werten belegt (Vertrag: _vertraege/darkmode.md, „Farb-Tokens für
	   Consumer"). Der Kalender ist reiner KONSUMENT und schreibt immer
	   `var(--ks-TOKEN, <CI-Literal>)`; das Literal ist der Light-Fallback, damit
	   die Farbe auch ohne Darkmode korrekt ist.

	   Historie: 1.91.1 entfernte die lokalen Defs hier, das Rosa blieb aber —
	   die zweite Quelle war das Inline-CSS aus den Einstellungen
	   (KS_Kalender_Settings::inline_css() gab `--ks-accent` aus der Option
	   `color_accent` = Mauve `#b07a8a` aus und gewann als späteres CSS).
	   Vollständig behoben in 1.91.3, dort auch die Migration der Option.

	   Eigene Variablen nur als --kskal-* (siehe Schriftstacks unten). */

	/* --- CI-Schriftstacks ---
	   ⚠️ Der Familienname MUSS den Zusatz tragen. knigge-spirit.com liefert
	   Yantramanav lokal aus (TTF-Uploads), aber unter den Familien
	   „Yantramanav Light“ / „Yantramanav Regular“ / „Yantramanav Thin“.
	   Eine Familie „Yantramanav“ OHNE Zusatz existiert dort NICHT — sie matcht
	   nichts, wird still übersprungen und fällt auf die Systemschrift zurück.
	   (Ursachenanalyse Cockpit 0.91.0, am Live-HTML verifiziert; Warnblock in
	   _vertraege/cockpit.md.) NIE extern nachladen — die Dateien sind da.

	   Zweiter Fallstrick: Alle Schnitte sind mit font-weight:100 deklariert
	   (Divi-Upload-Muster). font-weight:400/500 findet keine passende Face und
	   wird vom Browser synthetisiert → Gewicht über die FAMILIENWAHL steuern:
	   Light für Fließtext, Regular für Buttons/aktive Zustände. */
	--kskal-font-body: 'Yantramanav Light', 'Yantramanav Regular', 'Yantramanav',
		-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kskal-font-ui: 'Yantramanav Regular', 'Yantramanav Light', 'Yantramanav',
		-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--kskal-font-display: 'Cinzel', Georgia, serif;

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--ks-text, #253d54);
}

/* Überschrift (nur wenn heading="" nicht leer, i. d. R. Banner/Startseite) */
.ks-home-events-calendar-style .ks-home-events-heading {
	margin: 0 0 20px;
	color: var(--ks-text, #253d54);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
}

/* Liste */
.ks-home-events-calendar-style .ks-home-events-list {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: 100%;
	margin: 0;
}

/* Einzelne Karte */
.ks-home-events-calendar-style .ks-home-event-card {
	width: 100%;
	background: var(--ks-surface, #ffffff);
	border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ks-home-events-calendar-style .ks-home-event-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Ganze Karte klickbar */
.ks-home-events-calendar-style .ks-home-event-card-link {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr) 320px;
	align-items: center;
	gap: 34px;
	min-height: 160px;
	padding: 24px 24px 24px 34px;
	/* !important, weil Divi/BuddyBoss die a-Farbe global setzen. */
	color: var(--ks-text, #253d54) !important;
	text-decoration: none !important;
}

/* Ohne Bild */
.ks-home-events-calendar-style .ks-home-event-card.no-image .ks-home-event-card-link {
	grid-template-columns: 90px minmax(0, 1fr);
}

/* Datum links */
.ks-home-events-calendar-style .ks-home-event-datebox {
	text-align: center;
	line-height: 1;
	padding: 0 10px;
}

/* Wochentag (Mauve) */
.ks-home-events-calendar-style .ks-home-event-weekday {
	display: block;
	margin-bottom: 8px;
	color: var(--ks-accent, #326569);
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Tag */
.ks-home-events-calendar-style .ks-home-event-day {
	display: block;
	color: var(--ks-text, #253d54);
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
}

/* Inhalt Mitte */
.ks-home-events-calendar-style .ks-home-event-main {
	min-width: 0;
}

/* Datumszeile */
.ks-home-events-calendar-style .ks-home-event-date-line {
	display: block;
	margin-bottom: 10px;
	color: var(--ks-text, #253d54);
	font-size: 14px;
	line-height: 1.35;
}

/* Titel */
.ks-home-events-calendar-style .ks-home-event-title {
	margin: 0 0 12px;
	color: var(--ks-text, #253d54);
	font-family: inherit;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	transition: color 0.2s ease;
}

/* Ort */
.ks-home-events-calendar-style .ks-home-event-venue {
	display: block;
	margin-bottom: 14px;
	color: var(--ks-text, #111111);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 700;
}

/* Auszug */
.ks-home-events-calendar-style .ks-home-event-excerpt {
	margin: 0;
	color: var(--ks-text, #253d54);
	font-size: 14px;
	line-height: 1.55;
}

/* Bild rechts */
.ks-home-events-calendar-style .ks-home-event-image {
	width: 100%;
	height: 130px;
	overflow: hidden;
	background: var(--ks-surface-raised, #f3f1ed);
}

.ks-home-events-calendar-style .ks-home-event-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover-Zustände */
.ks-home-events-calendar-style .ks-home-event-card:hover .ks-home-event-title {
	color: var(--ks-accent, #326569);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ks-home-events-calendar-style .ks-home-event-card:hover .ks-home-event-weekday,
.ks-home-events-calendar-style .ks-home-event-card:hover .ks-home-event-day,
.ks-home-events-calendar-style .ks-home-event-card:hover .ks-home-event-date-line {
	color: var(--ks-accent, #326569);
}

/* Bild-Zoom beim Hover seit 1.30.0 entfernt (Nutzerwunsch: zu unruhig). */

/* Footer */
.ks-home-events-calendar-style .ks-home-events-footer {
	margin-top: 26px;
}

/* Startseiten-Link (Dashboard nutzt .ks-dashboard-button des Themes) */
.ks-home-events-calendar-style .ks-home-events-link,
.ks-home-events-calendar-style .ks-home-events-link:visited {
	display: inline-block;
	color: var(--ks-text, #253d54) !important;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.ks-home-events-calendar-style .ks-home-events-link:hover {
	color: var(--ks-accent, #326569) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Spaltenzahl je Einbindung überschreiben: [ks_startseite_termine spalten="1"]
   (gewinnt gegen die globale Einstellung aus inline_css, da spezifischer). */
/* (a) Variable auf dem Wrapper SELBST — sie wird an alle Nachfahren vererbt.
   Nötig für Ausgaben OHNE eigenen .ks-home-events-calendar-style-Wrapper,
   z. B. „Meine Termine“: cards_list() liefert nur <div class="ks-home-events-list">.
   Bis 1.49.0 gab es nur die Nachfahren-Regel (b) — dort griff sie deshalb nie. */
.ks-cards-cols-1 { --kskal-card-columns: 1; }
.ks-cards-cols-2 { --kskal-card-columns: 2; }
.ks-cards-cols-3 { --kskal-card-columns: 3; }
.ks-cards-cols-4 { --kskal-card-columns: 4; }

/* (b) Zusätzlich auf dem inneren Wrapper. NICHT entfernen: Das Inline-CSS aus
   den Einstellungen setzt --kskal-card-columns direkt auf
   .ks-home-events-calendar-style. Eine eigene Deklaration am Element schlägt
   jede geerbte — ohne (b) würde die globale Spaltenzahl (a) wieder überstimmen. */
.ks-cards-cols-1 .ks-home-events-calendar-style { --kskal-card-columns: 1; }
.ks-cards-cols-2 .ks-home-events-calendar-style { --kskal-card-columns: 2; }
.ks-cards-cols-3 .ks-home-events-calendar-style { --kskal-card-columns: 3; }
.ks-cards-cols-4 .ks-home-events-calendar-style { --kskal-card-columns: 4; }

/* Leerzustand */
.ks-home-events-calendar-style .ks-home-events-empty {
	margin: 0;
	color: var(--ks-text, #253d54);
	font-size: 15px;
}

/* „Meine Termine“ ohne Login: Hinweis mittig + Anmelde-Button darunter */
.ks-home-events-calendar-style .ks-meine-login {
	text-align: center;
	padding: 10px 0 4px;
}

.ks-home-events-calendar-style .ks-meine-login .ks-home-events-empty {
	margin: 0 0 14px;
}

/* ============================================================
   Dashboard-Variante: kompakt für schmale Spalte
   Flexbox statt Grid – Bild bleibt auch im schmalen Dashboard-Container
   zuverlässig rechts (Grid-Spalten brechen dort um).
   ============================================================ */
.ks-home-events-calendar-style.ks-events--compact .ks-home-events-list {
	gap: 16px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-card-link {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	min-height: 0;
	padding: 14px 18px;
}

/* DOM-Reihenfolge erzwingen (Datum · Text · Bild), damit die Mobile-Reorder
   der großen Karten die Kompakt-Variante nicht umsortiert. */
.ks-home-events-calendar-style.ks-events--compact .ks-home-event-datebox {
	order: 0;
	flex: 0 0 auto;
	width: 52px;
	padding: 0;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-main {
	order: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-image {
	order: 0;
	flex: 0 0 auto;
	width: 120px;
	height: 84px;
	border-radius: 6px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-day {
	font-size: 26px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-title {
	font-size: 17px;
	margin-bottom: 8px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-date-line {
	margin-bottom: 6px;
	font-size: 13px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-event-venue {
	margin-bottom: 8px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-events-footer {
	margin-top: 18px;
}

/* Sehr schmale Spalten: Bild etwas kleiner, bleibt aber rechts */
@media (max-width: 480px) {
	.ks-home-events-calendar-style.ks-events--compact .ks-home-event-card-link {
		gap: 12px;
		padding: 12px 14px;
	}

	.ks-home-events-calendar-style.ks-events--compact .ks-home-event-image {
		width: 92px;
		height: 68px;
	}
}

/* ============================================================
   Tab-Umschalter – identisch zu den Dashboard-Buttons (.ks-tab-btn)
   Werte 1:1 aus dem Dashboard-Plugin. Schrift kommt aus den
   Einstellungen (inline), der Rest hier (mit !important gegen Theme).
   ============================================================ */
.ks-home-events-calendar-style .ks-events-tabbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
}

/* [hidden] muss IMMER gewinnen: die display-Regeln oben/unten würden das
   UA-Stylesheet ([hidden]{display:none}) sonst überschreiben — betrifft
   z. B. die JS-gesteuerte „Früher/Später“-Leiste (data-ks-pagenav) und
   umgeschaltete Panels/Tagesgruppen (1.41.0, Ohne-Neuladen-Schicht). */
.ks-home-events-calendar-style .ks-events-tabbar[hidden],
.ks-home-events-calendar-style .ks-events-tab[hidden],
.ks-home-events-calendar-style .ks-coaching-panel[hidden],
.ks-home-events-calendar-style .ks-coaching-daygroup[hidden],
.ks-home-events-calendar-style .ks-coaching-month[hidden],
.ks-home-events-calendar-style .ks-coaching-step1[hidden],
.ks-home-events-calendar-style .ks-coaching-stepline[hidden],
.ks-home-events-calendar-style .ks-kal-panel[hidden],
.ks-home-events-calendar-style .ks-kal-view-list[hidden],
.ks-home-events-calendar-style .ks-kal-view-month[hidden] {
	display: none !important;
}

.ks-home-events-calendar-style .ks-events-tab {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 44px !important;
	margin: 0;
	padding: 11px 18px !important;
	background: var(--ks-button, #253d54) !important;
	border: 1px solid var(--ks-button, #253d54) !important;
	border-radius: 7px !important;
	color: var(--ks-inverse-text, #ffffff) !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ks-home-events-calendar-style .ks-events-tab:hover,
.ks-home-events-calendar-style .ks-events-tab.is-active {
	background: var(--ks-accent, #326569) !important;
	border-color: var(--ks-accent, #326569) !important;
	color: var(--ks-inverse-text, #ffffff) !important;
}

.ks-home-events-calendar-style .ks-events-tab:focus {
	outline: none;
	background: var(--ks-accent, #326569) !important;
	border-color: var(--ks-accent, #326569) !important;
	color: var(--ks-inverse-text, #ffffff) !important;
	box-shadow: 0 0 0 2px rgba(50, 101, 105, 0.25);
}

/* Panels: verstecktes Panel sicher ausblenden (auch ohne CSS-Reset) */
.ks-home-events-calendar-style .ks-events-panel[hidden] {
	display: none;
}

/* ============================================================
   Segmented-Pill Filterleisten (VERBINDLICHE CI-Optik, 18.07.2026)
   Container beige, aktiver Tab CI-blau, inaktiv transparent/grau.
   Gilt für Filter-/Angebots-Tabs (.ks-events-tabbar) – NICHT für die
   Navigation „Früher/Später“ (.ks-coaching-nav), Slots oder Buttons.
   ============================================================ */
.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	background: var(--ks-section, #e9e4d9);
	border-radius: 11px;
	padding: 5px;
	margin: 0 0 22px;
}

.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab {
	min-height: 0 !important;
	padding: 8px 18px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	color: var(--ks-text-muted, #6f7c86) !important;
	/* Kein font-weight — Gewicht über die Familienwahl (alle Yantramanav-Schnitte
	   sind weight:100, 400/500 würde nur synthetisiert. CLAUDE.md-Font-Regel). */
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Hover = CI-Grün mit weißer Schrift (globale Vorgabe „Filter-/Tab-Optik“).
   Textfarbe optional konfigurierbar wie im Referenz-CSS. */
.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:hover {
	background: var(--ks-accent, #326569) !important;
	color: var(--ks-tab-hover-text, #ffffff) !important;
}

.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab.is-active,
.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab[aria-selected="true"],
.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab.is-active:hover {
	background: var(--ks-button, #253d54) !important;
	color: var(--ks-inverse-text, #ffffff) !important;
}

/* Divi-Builder-Panzerung: Divi stylt Links/Buttons mit ID-Spezifität
   (#et-boc .et-l …) und würde sonst durchschlagen. Gleiche Regeln stärker. */
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav),
#et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) {
	background: var(--ks-section, #e9e4d9);
	border-radius: 11px;
	padding: 5px;
	margin: 0 0 22px;
	display: inline-flex;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab,
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:visited {
	background: transparent !important;
	border: 0 !important;
	color: var(--ks-text-muted, #6f7c86) !important;
}

/* Aktiv = CI-Blau. WICHTIG: :hover NICHT mit .is-active zusammenfassen —
   sonst sieht ein gehoverter INAKTIVER Tab unter Divi aus wie der aktive
   (Fehler bis 1.43.0). Hover ist CI-Grün, aktiv bleibt auch beim Hovern blau. */
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab.is-active,
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab[aria-selected="true"],
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab.is-active:hover {
	background: var(--ks-button, #253d54) !important;
	color: var(--ks-inverse-text, #ffffff) !important;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:hover {
	background: var(--ks-accent, #326569) !important;
	color: var(--ks-tab-hover-text, #ffffff) !important;
}

/* Handy: nur die „Früher/Später“-Navigation stapeln – die Segmented-Pill
   Filterleiste bleibt IMMER waagerecht (Pill wrappt bei Bedarf). */
@media (max-width: 600px) {
	.ks-home-events-calendar-style .ks-events-tabbar.ks-coaching-nav {
		flex-direction: column;
		align-items: stretch;
	}

	.ks-home-events-calendar-style .ks-events-tabbar.ks-coaching-nav .ks-events-tab {
		width: 100%;
	}
}

/* ============================================================
   Zusatz Megamenu-Dropdowns (VERBINDLICH, 20.07.2026 — Kurse-Referenz):
   Im [ks_dashboard_termine]-Dropdown (Kontext .ks-events--compact) ist der
   Pill-Container WEISS statt beige, Schrift explizit Yantramanav
   15px / 1.2 (Gewicht über Familie). Außerhalb des Menüs (Kalenderseite, Buchungsseiten)
   bleibt der beige Container. Farben literal (Cross-Plugin-Vertrag).
   WICHTIG: Dieser Block steht VOR der dunklen Mobil-Megamenü-Variante,
   damit die bei gleicher Spezifität weiterhin gewinnt.
   ============================================================ */
.ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav),
.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav),
#et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) {
	background: var(--ks-surface, #ffffff);
}

.ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab,
.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab,
#et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab {
	/* Schrift EXAKT wie die Cockpit-Referenz: dort tragen die Pills „Yantramanav
	   Light“ zuerst — deshalb hier im Megamenü bewusst --kskal-font-body (Light
	   zuerst, identischer Stack) statt --kskal-font-ui (Regular). Sonst wirkt der
	   Kalender-Tab minimal fetter als das Cockpit (Frank, 27.07.2026).
	   KEIN font-weight — Gewicht über die Familienwahl (CLAUDE.md-Font-Regel).
	   Gilt NUR im .ks-events--compact-Kontext; on-page bleibt Regular (Kanon). */
	font-family: var(--kskal-font-body) !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
}

/* Megamenu-Hover EXAKT wie die Cockpit-Referenz: dezenter CI-Grün-Ton mit
   grünem Text statt deckender Vollfläche — damit die Kalender-Pille im
   Max-Mega-Menu identisch zur Cockpit-Pille (.ks-tab-btn) aussieht.
   NUR im .ks-events--compact-Kontext; die freistehende (beige) Kalenderseite
   behält den kanonischen Voll-Grün-Hover (CLAUDE.md „Filter-/Tab-Optik“).
   ID-Selektoren = Divi-Panzerung, damit dieser Hover die #et-boc/#page-container-
   Regeln oben sicher schlägt.
   :not(.is-active):not([aria-selected="true"]) ist PFLICHT — diese Regel steht
   NACH der Aktiv-Regel (gleiche Spezifität), würde also sonst einen gehoverten
   AKTIVEN Tab grün tönen. So bleibt der aktive Tab beim Hovern CI-Blau (wie in
   der Cockpit-Referenz). */
.ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:not(.is-active):not([aria-selected="true"]):hover,
.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:not(.is-active):not([aria-selected="true"]):hover,
#et-boc .et-l .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:not(.is-active):not([aria-selected="true"]):hover,
#page-container .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:not(.is-active):not([aria-selected="true"]):hover,
#et-main-area .ks-home-events-calendar-style.ks-events--compact .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab:not(.is-active):not([aria-selected="true"]):hover {
	background: rgba(50, 101, 105, .10) !important;
	color: var(--ks-accent, #326569) !important;
}

/* ------------------------------------------------------------
   Schrift im GESAMTEN Dropdown, nicht nur auf den Tabs (1.48.0).
   Zwei Gründe, warum das eigene Regeln braucht:
   1. Max Mega Menu setzt die Schrift NICHT nur am Container, sondern per
      eigenen Reset-Selektoren direkt auf a/span/div/p/button. Vererbung vom
      Container greift dagegen nicht — die Kindelemente müssen mitgenannt sein.
   2. Diese MMM-Selektoren arbeiten mit ID-Spezifität
      (#mega-menu-wrap-… li.mega-menu-item …). Ein reiner Klassen-Selektor
      verliert dagegen auch mit !important. Deshalb der Präfix
      [id^="mega-menu-wrap"] li.mega-menu-item — dieselbe Technik wie im
      Cockpit (header-dropdowns.css, seit 0.78.0).
   ------------------------------------------------------------ */
.ks-home-events-calendar-style.ks-events--compact,
.ks-home-events-calendar-style.ks-events--compact a,
.ks-home-events-calendar-style.ks-events--compact p,
.ks-home-events-calendar-style.ks-events--compact div,
.ks-home-events-calendar-style.ks-events--compact span,
.ks-home-events-calendar-style.ks-events--compact button,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact a,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact p,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact div,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact span,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact button {
	font-family: var(--kskal-font-body) !important;
}

/* Cinzel-Elemente zurückholen. MUSS NACH dem Block darüber stehen: gleiche
   Grundstruktur, gleiche Spezifität — hier gewinnt die spätere Regel. */
.ks-home-events-calendar-style.ks-events--compact .ks-home-event-title,
.ks-home-events-calendar-style.ks-events--compact .ks-dashboard-event-day,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact .ks-home-event-title,
[id^="mega-menu-wrap"] li.mega-menu-item .ks-events--compact .ks-dashboard-event-day {
	font-family: var(--kskal-font-display) !important;
}

/* 1.44.0: Die frühere DUNKLE Mobil-Variante (< 768px, .mega-sub-menu) ist
   entfallen. Laut SCHNITTSTELLEN.md („Zusatz Megamenu-Dropdowns“, 20.07.2026)
   sind die aufgeklappten Dropdown-Flächen auch mobil beige/hell — die dunkle
   Variante war dort unlesbar; das Cockpit hat seine in 0.85.0 ebenfalls
   entfernt. Mobil gilt jetzt dieselbe weiße Pille wie am Desktop.
   ▶ Falls die Mobil-Fläche auf der Live-Site doch dunkel ist: bitte melden,
     dann kommt die Variante gezielt zurück. */

/* ============================================================
   Filter in der Standardansicht von The Events Calendar
   ============================================================ */
.tribe-events .ks-calendar-filter {
	width: 100%;
	max-width: none;
	margin: 4px 0 26px;
}

.tribe-events .ks-calendar-filter .ks-events-tabbar {
	margin-bottom: 0;
}

.tribe-events .ks-calendar-reserved-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--ks-accent, #326569);
	color: var(--ks-inverse-text, #ffffff);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	vertical-align: middle;
	white-space: nowrap;
}

.tribe-events .tribe_events.ks-calendar-event--reserved {
	box-shadow: inset 4px 0 0 var(--ks-accent, #326569);
}

@media (max-width: 600px) {
	.tribe-events .ks-calendar-filter {
		margin-bottom: 22px;
	}

	.tribe-events .ks-calendar-reserved-badge {
		display: table;
		margin: 7px 0 0;
	}
}

/* ============================================================
   Banner-Variante: breites Banner für die Divi-Startseite
   (heller Hintergrund; dunkles Navy/Blob kommt ggf. aus dem Divi-Abschnitt)
   ============================================================ */
.ks-home-events-calendar-style.ks-events--banner .ks-home-events-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.ks-home-events-calendar-style.ks-events--banner .ks-home-event-card-link {
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	min-height: 0;
	padding: 18px 20px;
}

/* Im Banner Bild und Auszug ausblenden – kompakte Kachel */
.ks-home-events-calendar-style.ks-events--banner .ks-home-event-card.has-image .ks-home-event-card-link {
	grid-template-columns: 64px minmax(0, 1fr);
}

.ks-home-events-calendar-style.ks-events--banner .ks-home-event-image,
.ks-home-events-calendar-style.ks-events--banner .ks-home-event-excerpt {
	display: none;
}

.ks-home-events-calendar-style.ks-events--banner .ks-home-event-title {
	font-size: 17px;
	margin-bottom: 6px;
}

.ks-home-events-calendar-style.ks-events--banner .ks-home-events-footer {
	margin-top: 22px;
	text-align: center;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
	.ks-home-events-calendar-style .ks-home-event-card-link {
		grid-template-columns: 70px minmax(0, 1fr) 240px;
		gap: 24px;
		padding: 22px 22px 22px 22px;
	}

	.ks-home-events-calendar-style .ks-home-event-image {
		height: 120px;
	}

	.ks-home-events-calendar-style .ks-home-event-title {
		font-size: 18px;
	}
}

@media (max-width: 700px) {
	.ks-home-events-calendar-style .ks-home-event-card-link,
	.ks-home-events-calendar-style .ks-home-event-card.no-image .ks-home-event-card-link {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0;
	}

	.ks-home-events-calendar-style .ks-home-event-image {
		order: 1;
		width: 100%;
		height: 190px;
	}

	.ks-home-events-calendar-style .ks-home-event-datebox {
		order: 2;
		text-align: left;
		padding: 0 22px;
	}

	.ks-home-events-calendar-style .ks-home-event-card.no-image .ks-home-event-datebox {
		padding-top: 22px;
	}

	.ks-home-events-calendar-style .ks-home-event-main {
		order: 3;
		padding: 0 22px 24px;
	}

	.ks-home-events-calendar-style .ks-home-event-day {
		font-size: 28px;
	}

	.ks-home-events-calendar-style .ks-home-event-title {
		font-size: 18px;
	}

	.ks-home-events-calendar-style .ks-home-event-excerpt {
		font-size: 14px;
	}
}

/* ============================================================
   Reservierung (Platz reservieren / stornieren)
   ============================================================ */
.tribe-events-single .bs-event-heading.ks-event-heading--with-registration {
	display: grid !important;
	grid-template-columns: minmax(70px, auto) minmax(0, 2fr) minmax(240px, 1fr);
	align-items: center;
	column-gap: 28px;
}

.ks-event-heading--with-registration .ks-reg-placement--header {
	grid-column: 3;
	align-self: center;
	clear: none;
	width: 100%;
	min-width: 0;
	margin: 0;
}

.ks-event-heading--with-registration .ks-reg-placement--header .ks-home-events-calendar-style.ks-reg {
	width: 100%;
	max-width: none;
	margin: 0;
}

.ks-reg-placement--top {
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 24px;
}

.ks-reg-placement--top .ks-home-events-calendar-style.ks-reg {
	margin: 0;
	max-width: 320px;
}

.ks-reg-placement--top .ks-reg-button {
	width: 100%;
	min-height: 48px;
}

.ks-reg-placement--fallback {
	clear: both;
}

.ks-home-events-calendar-style.ks-reg {
	margin: 20px 0;
	padding: 0;
}

.ks-home-events-calendar-style .ks-reg-button {
	/* inline-FLEX, nicht inline-block: Die Einstellungen setzen zusätzlich ein
	   min-height (Standard 48px). Bei inline-block zentriert min-height den
	   Text NICHT — er sitzt oben und unten bleibt Luft (der Button wirkt „zu
	   hoch“). Mit inline-flex + center sitzt die Schrift immer mittig,
	   unabhängig vom eingestellten min-height. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 6px;
	background: var(--ks-button, #253d54);
	color: var(--ks-inverse-text, #ffffff) !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.ks-home-events-calendar-style .ks-reg-button:hover {
	background: var(--ks-accent, #326569);
}

/* Storno = CI-Signalrot var(--ks-danger, #931204) (globale CI-Tabelle). Überschreibbar über
   die Einstellungen (reg_cancel_bg / reg_cancel_hover). */
.ks-home-events-calendar-style .ks-reg-button--cancel {
	background: var(--ks-danger, #931204);
}

.ks-home-events-calendar-style .ks-reg-button--cancel:hover {
	background: #7a0f03;
}

.ks-home-events-calendar-style .ks-reg-button--full,
.ks-home-events-calendar-style .ks-reg-button[disabled] {
	background: #9aa5ad;
	cursor: not-allowed;
	opacity: 0.85;
}

.ks-home-events-calendar-style .ks-reg-button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.ks-home-events-calendar-style .ks-reg-status {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--ks-text, #253d54);
}

.ks-home-events-calendar-style .ks-reg-status--yes {
	color: var(--ks-accent, #326569);
}

/* Nach Storno eines wegfallenden Termins (Coaching-Slot) – Bestätigungston. */
.ks-home-events-calendar-style .ks-reg-status--cancelled {
	color: var(--ks-accent, #326569);
}

.ks-home-events-calendar-style .ks-reg-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ks-text, #253d54);
}

.ks-home-events-calendar-style .ks-reg-credit-select-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.ks-home-events-calendar-style .ks-reg-credit-product {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid #b9c1c9;
	border-radius: 6px;
	background: var(--ks-surface, #fff);
}

@media (max-width: 700px) {
	.tribe-events-single .bs-event-heading.ks-event-heading--with-registration {
		grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
		row-gap: 20px;
	}

	.ks-event-heading--with-registration .ks-reg-placement--header {
		grid-column: 1 / -1;
	}

	.ks-reg-placement--top {
		width: 100%;
		margin: 0 0 24px;
	}

	.ks-reg-placement--top .ks-home-events-calendar-style.ks-reg {
		max-width: none;
	}

	.ks-reg-placement--top .ks-reg-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 52px;
	}
}

/* ============================================================
   Teilnehmer-Tabelle (Admin)
   ============================================================ */
.ks-teilnehmer-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
}

.ks-teilnehmer-table th,
.ks-teilnehmer-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #e2e2e2;
	font-size: 14px;
}

.ks-teilnehmer-table th {
	font-weight: 700;
}

/* ============================================================
   Einheitliche Konto-/Divi-Karte
   Angelehnt an die Cockpit-Karte, aber eigenständig gekapselt.
   ============================================================ */
.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-events-list {
	display: grid;
	grid-template-columns: repeat(var(--kskal-card-columns, 2), minmax(0, 1fr));
	gap: 14px;
}

.ks-home-events-calendar-style.ks-events--compact .ks-home-events-list {
	grid-template-columns: 1fr;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-card {
	min-width: 0;
	min-height: 170px;
	border-radius: 12px;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-card-link,
.ks-home-events-calendar-style.ks-events--compact .ks-home-event-card-link {
	display: grid !important;
	grid-template-columns: minmax(105px, 34%) minmax(0, 1fr) !important;
	grid-template-areas: "media copy";
	gap: 0 !important;
	min-height: 170px;
	padding: 0 !important;
	align-items: stretch;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-card.no-image .ks-home-event-card-link {
	grid-template-columns: 1fr !important;
	grid-template-areas: "copy";
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-datebox {
	display: none;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-image,
.ks-home-events-calendar-style.ks-events--compact .ks-home-event-image {
	grid-area: media;
	order: 0;
	width: 100%;
	height: 100%;
	min-height: 170px;
	border-radius: 0;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-main,
.ks-home-events-calendar-style.ks-events--compact .ks-home-event-main {
	grid-area: copy;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 16px;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-date-line {
	margin: 0;
	color: var(--ks-accent, #326569);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-title {
	margin: 7px 0 4px;
	font-family: Cinzel, Georgia, serif;
	font-size: 20px;
	font-weight: 400;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-venue {
	margin: 0 0 6px;
	color: #657482;
	font-size: 14px;
	font-weight: 400;
}

.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 3px 0 10px;
	font-size: 13px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ks-home-events-calendar-style .ks-home-event-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	margin-top: auto;
	padding: 7px 11px;
	border-radius: 7px;
	background: var(--ks-button, #253d54);
	color: var(--ks-inverse-text, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .2s ease;
}

.ks-home-events-calendar-style .ks-home-event-card:hover .ks-home-event-action {
	background: var(--ks-accent, #326569);
}

.ks-home-events-calendar-style .ks-reg-button--login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 10px;
}

.ks-home-events-calendar-style .ks-reg-note--login {
	margin-top: 0;
}

.ks-credit-summaries {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.ks-credit-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #d7dde1;
	border-radius: 10px;
	background: var(--ks-surface, #ffffff);
	color: var(--ks-text, #253d54);
}

.ks-credit-summary__eyebrow {
	color: var(--ks-accent, #326569);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ks-credit-summary strong {
	font-size: 18px;
}

.ks-credit-summary a {
	margin-left: auto;
	color: var(--ks-accent, #326569);
	font-weight: 700;
}

@media (max-width: 760px) {
	.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-events-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-card-link,
	.ks-home-events-calendar-style.ks-events--compact .ks-home-event-card-link {
		grid-template-columns: 112px minmax(0, 1fr) !important;
		grid-template-areas: "media copy";
	}

	.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-main,
	.ks-home-events-calendar-style.ks-events--compact .ks-home-event-main {
		padding: 13px;
	}

	.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-title {
		font-size: 17px;
	}

	.ks-home-events-calendar-style:not(.ks-events--banner) .ks-home-event-excerpt {
		display: none;
	}
}

/* ============================================================
   Startseite: Proportionen der Cockpit-Karte, drei Spalten + CTA
   ============================================================ */
.ks-home-events-calendar-style.ks-events--startseite .ks-home-events-list {
	grid-template-columns: repeat(var(--kskal-card-columns, 3), minmax(0, 1fr));
}

.ks-home-events-calendar-style.ks-events--startseite .ks-home-event-card,
.ks-home-events-calendar-style.ks-events--startseite .ks-home-event-card-link,
.ks-home-events-calendar-style.ks-events--startseite .ks-home-event-image {
	min-height: 210px;
}

.ks-home-events-calendar-style.ks-events--startseite .ks-home-event-main {
	padding: 16px;
}

.ks-home-events-calendar-style.ks-events--startseite .ks-home-event-excerpt {
	display: none;
}

.ks-home-events-calendar-style .ks-home-events-footer {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.ks-home-events-calendar-style .ks-home-events-button,
.ks-home-events-calendar-style .ks-home-events-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--ks-button, #253d54);
	border-radius: 7px;
	background: var(--ks-button, #253d54);
	color: var(--ks-inverse-text, #ffffff) !important;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.ks-home-events-calendar-style .ks-home-events-button:hover,
.ks-home-events-calendar-style .ks-home-events-button:focus-visible {
	border-color: var(--ks-accent, #326569);
	background: var(--ks-accent, #326569);
	color: var(--ks-inverse-text, #ffffff) !important;
	text-decoration: none !important;
}

.ks-home-events-calendar-style .ks-home-events-button:hover {
	transform: translateY(-1px);
}

@media (max-width: 1100px) {
	.ks-home-events-calendar-style.ks-events--startseite .ks-home-events-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.ks-home-events-calendar-style.ks-events--startseite .ks-home-events-list {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Einzelcoaching-Buchung ([ks_coaching_buchen])
   ============================================================ */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-intro {
	margin: 0 0 16px;
	color: var(--ks-text, #253d54);
	font-size: 15px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-meta {
	margin: 0 0 16px;
	color: var(--ks-text, #253d54);
	font-size: 14px;
	font-weight: 600;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-day {
	margin: 26px 0 10px;
	color: var(--ks-text, #253d54);
	font-size: 15px;
	font-weight: 700;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px; /* Luft nach den Zeitangaben */
}

/* Slots sind kleiner als die großen Tabs */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-slot {
	min-height: 38px !important;
	padding: 8px 14px !important;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-slot.is-disabled {
	opacity: 0.55;
	cursor: default;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-nav {
	margin-top: 20px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-confirm {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--ks-surface, #ffffff);
	border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 8px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-confirm select {
	min-width: 240px;
}

/* --- Zweistufige Buchung (1.51.0, Option `two_step`) --- */
.ks-home-events-calendar-style .ks-coaching-stepline {
	margin: 0 0 14px;
	color: var(--ks-text-muted, #6f7c86);
	font-size: 14px;
}

.ks-home-events-calendar-style .ks-coaching-stepbadge {
	display: inline-block;
	margin-right: 8px;
	padding: 3px 11px;
	border-radius: 20px;
	background: var(--ks-button, #253d54);
	color: var(--ks-inverse-text, #ffffff);
	font-size: 12px;
	line-height: 1.5;
}

/* Kopfzeile in Schritt 2: gewählter Termin + „Termin ändern“ */
.ks-home-events-calendar-style .ks-coaching-picked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0 0 16px;
	padding: 11px 14px;
	border-radius: 8px;
	background: var(--ks-section, #e9e4d9);
}

.ks-home-events-calendar-style .ks-coaching-picked-text {
	margin: 0;
	color: var(--ks-text, #253d54);
}

/* Der Ändern-Button ist ein Sekundär-CTA – kompakter als der Buchen-Button
   und ohne dessen min-height aus den Einstellungen. */
.ks-home-events-calendar-style .ks-coaching-change {
	min-height: 0 !important;
	padding: 6px 14px !important;
	font-size: 14px !important;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-error {
	color: var(--ks-danger, #931204);
	font-weight: 600;
}

/* Gast-Formular (Buchung ohne Konto, z. B. Kennenlerngespräch) */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form input[type="text"],
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form input[type="email"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 6px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form label {
	font-weight: 500;
}

/* Vorname/Nachname nebeneinander, E-Mail volle Breite (mobil gestapelt) */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 4px 16px;
	max-width: 560px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form > p,
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-grid > p {
	margin: 0 0 12px;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-email {
	max-width: 560px;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es trotzdem aus */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ks-home-events-calendar-style.ks-coaching .ks-coaching-success {
	padding: 16px 18px;
	background: var(--ks-surface, #ffffff);
	border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 8px;
}

/* Buttons „Meine Termine“ / „Termin ansehen“ in der Erfolgsbox */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
}

/* Erfolgsbox-Buttons in derselben Optik wie die Slot-/Angebots-Buttons */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-success-actions .ks-reg-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 11px 18px;
	border-radius: 7px;
	line-height: 1.2;
}

@media (max-width: 600px) {
	/* Slots bleiben kompakt nebeneinander – nur die Nav/Angebote stapeln */
	.ks-home-events-calendar-style.ks-coaching .ks-coaching-slot {
		width: auto;
	}
}

/* ============================================================
   Divi-Kompatibilität: Divi setzt Linkfarben mit ID-Selektoren
   (#page-container a …) und gewinnt sonst gegen unsere Klassen.
   Gleiche Regeln nochmals mit ID-Präfix, damit Tabs/Buttons auf
   Divi-Seiten (z. B. Kennenlerngespräch) lesbar bleiben.
   ============================================================ */
#page-container .ks-home-events-calendar-style .ks-events-tab,
#page-container .ks-home-events-calendar-style .ks-events-tab:visited,
#et-main-area .ks-home-events-calendar-style .ks-events-tab {
	color: var(--ks-inverse-text, #ffffff) !important;
	background: var(--ks-button, #253d54) !important;
	border-color: var(--ks-text, var(--ks-button, #253d54)) !important;
	text-decoration: none !important;
}

#page-container .ks-home-events-calendar-style .ks-events-tab:hover,
#page-container .ks-home-events-calendar-style .ks-events-tab.is-active,
#page-container .ks-home-events-calendar-style .ks-events-tab:focus,
#et-main-area .ks-home-events-calendar-style .ks-events-tab:hover,
#et-main-area .ks-home-events-calendar-style .ks-events-tab.is-active {
	color: var(--ks-inverse-text, #ffffff) !important;
	background: var(--ks-accent, #326569) !important;
	border-color: var(--ks-accent, #326569) !important;
}

#page-container .ks-home-events-calendar-style .ks-reg-button,
#et-main-area .ks-home-events-calendar-style .ks-reg-button {
	color: var(--ks-inverse-text, #ffffff) !important;
	text-decoration: none !important;
}

/* Divi-Builder-Inhalte: Divi stylt Links dort mit #et-boc .et-l a – noch
   spezifischer. Gleiche Regeln mit diesem Präfix, damit auch „Später →“,
   Angebots-Tabs und Buttons in Divi-Layouts lesbar bleiben. */
#et-boc .et-l .ks-home-events-calendar-style .ks-events-tab,
#et-boc .et-l .ks-home-events-calendar-style .ks-events-tab:visited,
#et-boc .et-l .ks-home-events-calendar-style .ks-reg-button,
#et-boc .et-l .ks-home-events-calendar-style .ks-reg-button:visited {
	color: var(--ks-inverse-text, #ffffff) !important;
	text-decoration: none !important;
}

#et-boc .et-l .ks-home-events-calendar-style .ks-events-tab:hover,
#et-boc .et-l .ks-home-events-calendar-style .ks-events-tab.is-active,
#et-boc .et-l .ks-home-events-calendar-style .ks-events-tab:focus {
	color: var(--ks-inverse-text, #ffffff) !important;
	background: var(--ks-accent, #326569) !important;
	border-color: var(--ks-accent, #326569) !important;
}

/* BuddyBoss-Theme + Divi-Builder-PLUGIN (Live-Site!): Divi setzt dort
   „.et-db #et-boc .et-l .et_pb_module a“ (1 ID, 3 Klassen, 1 Element) –
   schlägt alles Obige um genau das a-Element. Diese Regeln ziehen gleich
   und gewinnen (1 ID, 4 Klassen, 1 Element). */
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-events-tab,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-events-tab:visited,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-reg-button,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-reg-button:visited,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-home-events-button,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-home-events-button:visited,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-dashboard-button,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-dashboard-button:visited {
	color: var(--ks-inverse-text, #ffffff) !important;
	text-decoration: none !important;
}

/* Divi drückt auf a-Elemente in Modulen ein eigenes Padding (.et-db #et-boc
   .et-l .et_pb_module a = 1,3,1) → der Text des Anmelde-Buttons (ein <a>) klebt
   an den Rändern. Die Farbe war armiert, das Layout nicht. Hier Padding/Flex
   mit gleicher/höherer Spezifität nachziehen. Betrifft nur Anchor-Buttons;
   die Reservieren-<button> haben das Problem nicht. (1.87.3) */
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-reg-button,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-home-events-button,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-dashboard-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 12px 24px !important;
	line-height: 1 !important;
	white-space: nowrap;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-events-tab:hover,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-events-tab.is-active,
.et-db #et-boc .et-l .ks-home-events-calendar-style a.ks-events-tab:focus {
	color: var(--ks-inverse-text, #ffffff) !important;
	background: var(--ks-accent, #326569) !important;
	border-color: var(--ks-accent, #326569) !important;
}

/* Divi-Builder-Reset „#et-boc .et-l div { margin:0 }“ (ID-Spezifität)
   plättet unsere Abstände – hier mit stärkeren Selektoren wiederherstellen. */
.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-slots,
#et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-slots {
	margin: 0 0 22px;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-days,
#et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-days {
	margin: 0 0 6px;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-coaching-day,
#et-boc .et-l .ks-home-events-calendar-style .ks-coaching-day {
	margin: 26px 0 10px !important;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style div.ks-events-tabbar,
#et-boc .et-l .ks-home-events-calendar-style div.ks-events-tabbar {
	margin: 0 0 22px;
}

/* Nach der Tabbar-Regel: „Später“-Leiste trägt BEIDE Klassen – Abstand nach oben gewinnt. */
.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-nav,
#et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-nav {
	margin: 20px 0 0;
}

.et-db #et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-confirm,
#et-boc .et-l .ks-home-events-calendar-style.ks-coaching div.ks-coaching-confirm {
	margin-top: 20px;
}

/* ============================================================
   [ks_kalender_seite] – komplette Kalenderseite (login-aware)
   Layout wie Kurse-/Shop-Seite: vollbreite Hero, schwebende
   Toolbar, Inhalt auf begrenzter Maximalbreite.
   ============================================================ */
.ks-home-events-calendar-style.ks-kal-page {
	margin: 0; padding: 0;
	/* Überlappung der schwebenden Toolbar über die Hero-Unterkante.
	   EINE Quelle für zwei Stellen: das negative margin-top der Toolbar UND
	   der Aufschlag auf die Hero-Mindesthöhe. Würde man beide getrennt
	   pflegen, laufen sie auseinander — genau das ist dem Marktplatz passiert.
	   48px ist der projektweit festgelegte Wert (Frank, 21.07.2026,
	   Referenz Kursseite; vorher lag der Kalender bei 56px). */
	--ks-kal-overlap: 48px;
}

/* --- Hero: vollbreit (bricht aus dem Content-Container aus) --- */
.ks-kal-page .ks-kal-hero {
	position: relative;
	left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
	width: 100vw; max-width: 100vw;
	box-sizing: border-box;
	padding: 92px 24px 118px;
	background: var(--ks-button, #253d54);
	color: var(--ks-inverse-text, #ffffff);
	text-align: center;
	overflow: hidden;

	/* --ks-hero-offset = Anzahl Pixel, die der fixierte Header vom Hero
	   verdeckt. Wird per JS GEMESSEN (siehe class-ks-kalender-page.php), weil
	   der Wert nicht konstant ist: Auf Divi-umschlossenen Archivseiten schiebt
	   das Plugin „Divi Overlays“ das ganze Dokument per
	   #sidebar-overlay{position:relative;top:-15px} nach oben — auf Safari/macOS
	   aber gar nicht (top:0) und mit .pcs_enabled um -20px. Ein fester Wert
	   wäre auf mindestens einer Plattform falsch. Ohne Versatz ist der Wert 0
	   und beide calc() ergeben exakt die bisherigen Werte.

	   Höhe über hero_height="…" steuerbar (Shortcode setzt --ks-hero-min).
	   Der Offset wird auf min-height UND padding-top addiert: dadurch
	   entspricht die SICHTBARE Höhe unter dem Header genau dem eingestellten
	   Wert, und der Textabstand zur Header-Unterkante bleibt gleich.
	   Flex-Zentrierung, damit der Text bei größerer Höhe mittig bleibt.

	   Dritter Summand --ks-kal-overlap: Die schwebende Toolbar ragt mit einem
	   negativen margin-top in den Hero und verdeckt dessen Unterkante. Nach der
	   Regel „Hero-Höhe = SICHTBARE Höhe“ muss diese Überlappung aufgeschlagen
	   werden — aus derselben Variablen, aus der auch das margin-top der Toolbar
	   kommt. Eingestellt 500 ⇒ min-height 548 ⇒ sichtbar 500. */
	padding-top: calc(92px + var(--ks-hero-offset, 0px));
	min-height: calc(var(--ks-hero-min, 0px) + var(--ks-hero-offset, 0px) + var(--ks-kal-overlap, 0px));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ks-kal-page .ks-kal-hero.has-image {
	background-size: cover; background-position: center;
}
/* Abdunklung über dem Bild: über hero_overlay="0…100" steuerbar
   (--ks-hero-ov = 0…1). Ohne Angabe der bisherige Verlauf. */
.ks-kal-page .ks-kal-hero.has-image::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(
		180deg,
		rgba(37, 61, 84, calc(var(--ks-hero-ov, .55) * 1)) 0%,
		rgba(37, 61, 84, calc(var(--ks-hero-ov, .72) * 1)) 100%
	);
}
.ks-kal-page .ks-kal-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.ks-kal-page .ks-kal-eyebrow {
	font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
	color: rgba(255,255,255,.82); font-weight: 600; margin-bottom: 14px;
}
.ks-kal-page .ks-kal-title {
	margin: 0 0 14px; color: var(--ks-inverse-text, #ffffff);
	/* Cinzel weight 500 (verbindlicher Hero-Standard 22.07.2026). Nur 100/400
	   sind installiert — 500 wird aus der 400er synthetisiert, das ist GEWOLLT
	   und gilt AUSSCHLIESSLICH für die Hero-Überschrift. */
	font-family: "Cinzel", serif; font-weight: 500;
	font-size: clamp(30px, 5vw, 52px); line-height: 1.12; text-transform: uppercase;
	letter-spacing: .01em; text-wrap: balance;
}
.ks-kal-page .ks-kal-intro {
	/* Fließtext 20px / Yantramanav Light (Hero-Standard). */
	margin: 0 auto; color: rgba(255,255,255,.9);
	font-family: var(--kskal-font-body); font-size: 20px; line-height: 1.5; max-width: 56ch;
}

/* Ausrichtung: zentriert (Default) oder linksbündig — gilt für Eyebrow,
   Überschrift und Intro gemeinsam. Gesteuert über die Einstellung hero_align
   (Klasse am Hero). */
.ks-kal-page .ks-kal-hero.is-align-left { text-align: left; }
.ks-kal-page .ks-kal-hero.is-align-left .ks-kal-hero-inner { margin-left: 0; }
.ks-kal-page .ks-kal-hero.is-align-left .ks-kal-intro { margin-left: 0; margin-right: 0; }

/* --- Content-Container auf Maximalbreite --- */
.ks-kal-page .ks-kal-wrap {
	max-width: var(--ks-kal-max, 1180px);
	margin: 0 auto; padding: 0 24px 40px;
}

/* --- Schwebende Toolbar (überlappt Hero-Unterkante) --- */
.ks-kal-page .ks-kal-toolbar {
	position: relative; z-index: 2;
	margin: calc(-1 * var(--ks-kal-overlap, 48px)) auto 30px;
	background: var(--ks-surface, #ffffff);
	border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 14px;
	box-shadow: 0 14px 40px rgba(37,61,84,.14);
	padding: 14px 18px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
/* Liste/Monat-Umschalter = kanonische Segmented-Pill (globale Vorgabe gilt für
   ALLE Umschalt-/Filter-Tabs, nicht nur die Filterleisten). Tokens literal. */
.ks-home-events-calendar-style .ks-kal-viewtoggle {
	display: inline-flex; gap: 6px;
	background: var(--ks-section, #e9e4d9); border-radius: 11px; padding: 5px;
}
.ks-home-events-calendar-style .ks-kal-view {
	border: 0; background: transparent; cursor: pointer;
	font-weight: 500; font-size: 15px; line-height: 1; color: var(--ks-text-muted, #6f7c86);
	padding: 8px 18px; border-radius: 8px;
	transition: background-color .2s ease, color .2s ease;
}
.ks-home-events-calendar-style .ks-kal-view:hover { background: var(--ks-accent, #326569); color: var(--ks-tab-hover-text, #ffffff); }
.ks-home-events-calendar-style .ks-kal-view.is-active,
.ks-home-events-calendar-style .ks-kal-view.is-active:hover { background: var(--ks-button, #253d54); color: var(--ks-inverse-text, #ffffff); }
.ks-home-events-calendar-style .ks-kal-view[hidden] { display: none !important; }

/* --- Einzelterminseite (1.59.0): Faktenleiste in der schwebenden Toolbar ---
   Nutzt bewusst .ks-kal-toolbar, damit Position, Schatten und die 48px-
   Überlappung aus derselben Quelle kommen wie auf der Kalenderseite. */
.ks-se-facts {
	justify-content: center;
	gap: 14px 28px;
}
.ks-se-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}
/* Schriftgrößen kommen aus den Einstellungen (inline_css setzt die Variablen).
   Die Fallbacks entsprechen den Vorgaben, damit die Leiste auch ohne
   gespeicherte Werte richtig aussieht. */
.ks-se-fact-label {
	font-size: var(--kskal-se-fact-label, 13px);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ks-text-muted, #6f7c86);
}
.ks-se-fact-value {
	font-size: var(--kskal-se-fact-value, 20px);
	line-height: 1.25;
	color: var(--ks-text, #253d54);
}
.ks-se-fact-value.is-accent { color: var(--ks-accent, #326569); }

/* Hero-Schriften NUR auf der Termin-Seite (.ks-se-page) überschreiben —
   die Kalenderseite teilt sich .ks-kal-title/.ks-kal-eyebrow und soll von
   diesen Einstellungen unberührt bleiben. */
.ks-se-page .ks-kal-title {
	font-size: clamp(30px, 5vw, var(--kskal-se-title-max, 52px));
}
.ks-se-page .ks-kal-eyebrow {
	font-size: var(--kskal-se-eyebrow, 13px);
}

/* Aktions-Buttons des Termins (Felder in der Metabox, beliebig viele).
   Untereinander, volle Spaltenbreite — links wie rechts dieselbe Optik. */
.ks-se-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0 0;
	max-width: 340px;
}
.ks-se-actions .ks-reg-button { width: 100%; box-sizing: border-box; }

/* In der Seitenspalte die Breitenbegrenzung aufheben — die Karte gibt sie vor. */
.ks-se-actions-card .ks-se-actions { max-width: none; margin: 0; }

/* Beschreibungstext: Fließtext-Rhythmus im Kartenrahmen. */
.ks-se-text p { margin: 0 0 1em; }
.ks-se-text > :last-child { margin-bottom: 0; }

/* Kalender-Links bringen eigene Inline-Styles mit — nur den Abstand fassen. */
.ks-se-cal-links > div { margin-top: 0 !important; }

/* --- „Zum Kalender hinzufügen“ als EIN Button mit Auswahl (1.70.0) ---
   Natives <details>: funktioniert ohne JS, also auch mit WP-Rockets
   „JavaScript verzögern“. */
.ks-se-page .ks-cal-dd { position: relative; }
.ks-se-page .ks-cal-dd > summary { list-style: none; cursor: pointer; display: block; }
.ks-se-page .ks-cal-dd > summary::-webkit-details-marker { display: none; }
.ks-se-page .ks-cal-dd .ks-cal-dd-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; box-sizing: border-box;
}
.ks-se-page .ks-cal-dd .ks-cal-dd-arrow { transition: transform .2s ease; }
.ks-se-page .ks-cal-dd[open] .ks-cal-dd-arrow { transform: rotate(180deg); }
.ks-se-page .ks-cal-dd .ks-cal-dd-menu {
	display: flex; flex-direction: column; margin-top: 8px;
	border: 1px solid var(--ks-border, #cfcfcf); border-radius: 10px; overflow: hidden;
}
.ks-se-page .ks-cal-dd .ks-cal-dd-menu a {
	padding: 11px 14px; font-size: 14px; color: var(--ks-text, #253d54); text-decoration: none;
	background: var(--ks-surface, #ffffff); transition: background-color .2s ease, color .2s ease;
}
.ks-se-page .ks-cal-dd .ks-cal-dd-menu a + a { border-top: 1px solid var(--ks-border, #cfcfcf); }
.ks-se-page .ks-cal-dd .ks-cal-dd-menu a:hover { background: var(--ks-accent, #326569); color: var(--ks-inverse-text, #ffffff); }

/* --- „Dein Begleiter“-Karte (1.70.0, Cinzel-Angleichung 1.71.0) --- */
.ks-se-begleiter { text-align: center; }
/* Kartentitel zentriert — Cinzel kommt (wie bei den übrigen Karten) vom Theme
   über das h3-Tag, damit die Überschriften einheitlich aussehen. */
.ks-se-begleiter .ks-se-beg-title { text-align: center; }
.ks-se-begleiter .ks-se-avatar {
	width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%;
	overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--ks-section, #e1ddd4); border: 2px solid rgba(37, 61, 84, .28);
}
.ks-se-begleiter .ks-se-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ks-se-begleiter .ks-se-avatar-mono {
	font-family: "Cinzel", serif; font-size: 30px; color: var(--ks-text, #253d54); line-height: 1;
}
/* Name in Cinzel — bewusst mit explizitem font-weight (CLAUDE.md-Font-Regel:
   nie den Browser-Default 700 wirken lassen). Cinzel ist eine Versalschrift,
   daher rendert der Name in Großbuchstaben — gewollt, passt zu den Titeln. */
.ks-se-begleiter .ks-se-beg-name {
	margin: 0; font-size: 18px; color: var(--ks-text, #253d54);
	font-family: "Cinzel", serif; font-weight: 400; letter-spacing: .02em;
}
.ks-se-begleiter .ks-se-beg-role { margin: 2px 0 14px; font-size: 13px; color: var(--ks-text-muted, #6f7c86); }

/* --- Veranstaltungsort-Karte mit Adresse + Karten-Link (1.70.0) --- */
.ks-se-location .ks-se-address {
	font-style: normal; font-size: 14px; line-height: 1.5; color: var(--ks-text, #253d54); margin: 0 0 12px;
}

/* --- Zwei-Spalten-Layout Inhalt --- */
.ks-kal-page .ks-kal-grid {
	display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; align-items: start;
}
@media (max-width: 820px) { .ks-kal-page .ks-kal-grid { grid-template-columns: 1fr; } }

.ks-kal-page .ks-kal-aside { display: flex; flex-direction: column; gap: 18px; }

.ks-kal-page .ks-kal-card {
	background: var(--ks-surface, #ffffff); border: 1px solid var(--ks-border, #cfcfcf);
	border-radius: 12px; padding: 18px 20px;
}
.ks-kal-page .ks-kal-card--accent { border-color: var(--ks-text, var(--ks-button, #253d54)); }
.ks-kal-page .ks-kal-card-title { margin: 0 0 10px; color: var(--ks-text, #253d54); font-size: 16px; }
.ks-kal-page .ks-kal-card .ks-reg-note { margin: 0 0 12px; }
.ks-kal-page .ks-kal-divider { border: 0; border-top: 1px solid var(--ks-border, #cfcfcf); margin: 14px 0; }

.ks-kal-page .ks-kal-badge {
	display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 20px;
	background: var(--ks-section, #e9e4d9); color: var(--ks-text, #253d54); margin-bottom: 8px;
}
.ks-kal-page .ks-kal-badge--free { background: #e7efe1; color: #3b6d11; }

/* Buttons in den Sidebar-Karten: volle Breite und gleiche Höhe, damit
   „Kennenlerngespräch buchen“ und „Konto anlegen“ exakt bündig stehen
   (Vorgabe: Buttons block/full-width). */
.ks-kal-page .ks-kal-card .ks-reg-button {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

/* --- Monatsraster --- */
.ks-home-events-calendar-style .ks-kal-monthbox { }
.ks-home-events-calendar-style .ks-kal-monthhead {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0 0 14px;
}
.ks-home-events-calendar-style .ks-kal-monthhead h3 {
	margin: 0; color: var(--ks-text, #253d54);
	font-family: "Cinzel", serif; font-size: 20px; text-transform: capitalize;
}
.ks-home-events-calendar-style .ks-kal-navbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 9px;
	background: var(--ks-section, #f2eee6); color: var(--ks-text, #253d54);
	text-decoration: none; font-size: 18px; line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}
/* Auf der Kalenderseite ist der Pfeil ein <a> (No-JS-Fallback), im
   Termin-Wahl-Kalender ein <button> — beide sollen gleich aussehen. */
.ks-home-events-calendar-style button.ks-kal-navbtn {
	border: 0; font: inherit; cursor: pointer;
}
.ks-home-events-calendar-style .ks-kal-navbtn:hover:not(:disabled) { background: var(--ks-button, #253d54); color: var(--ks-inverse-text, #fff); }
.ks-home-events-calendar-style .ks-kal-navbtn:disabled { opacity: .35; cursor: default; }
.ks-home-events-calendar-style .ks-kal-cal {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.ks-home-events-calendar-style .ks-kal-dow {
	text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: var(--ks-text-muted, #6f7c86); padding: 4px 0;
}
.ks-home-events-calendar-style .ks-kal-cell {
	min-height: 84px; border: 1px solid var(--ks-border, #cfcfcf); border-radius: 8px;
	padding: 6px; background: var(--ks-surface, #ffffff); display: flex; flex-direction: column; gap: 3px;
}
.ks-home-events-calendar-style .ks-kal-cell.is-empty { background: transparent; border-color: transparent; }
/* Tageszahl LITERAL dunkel (nicht #253d54 — im Divi-Overlay evtl.
   undefiniert → weiße, unsichtbare Zahlen). + Divi-armiert gegen weiße
   Button-Textfarbe im dunklen Overlay. Picked-Weiß bleibt (Regel weiter unten). */
.ks-home-events-calendar-style .ks-kal-n,
#et-boc .et-l .ks-home-events-calendar-style .ks-kal-n,
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-kal-n {
	font-size: 12px; font-weight: 600; color: var(--ks-text, #253d54) !important;
}
.ks-home-events-calendar-style .ks-kal-dot {
	display: block; font-size: 11px; line-height: 1.25;
	background: #e9eef1; color: var(--ks-text, #253d54);
	border-radius: 5px; padding: 2px 5px; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ks-home-events-calendar-style .ks-kal-dot:hover { background: var(--ks-accent, #326569); color: var(--ks-inverse-text, #fff); }
.ks-home-events-calendar-style .ks-kal-more { font-size: 10px; color: var(--ks-text-muted, #6f7c86); }
@media (max-width: 600px) {
	.ks-home-events-calendar-style .ks-kal-cell { min-height: 58px; }
	.ks-home-events-calendar-style .ks-kal-dot { font-size: 0; padding: 3px; }
	.ks-home-events-calendar-style .ks-kal-dot::before { content: "•"; font-size: 12px; }
	.ks-home-events-calendar-style .ks-kal-more { display: none; }
}

/* --- Übernommene TEC-Archivseite (Setting tec_takeover, 1.44.0) ---
   Der Wrapper darf die Seite nicht zusätzlich einschnüren: die Breiten-
   begrenzung macht [ks_kalender_seite] selbst (--ks-kal-max), damit der Hero
   vollbreit bleiben kann. */
.ks-kal-takeover {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* Ghost-Variante des Reservierungsbuttons (für Sekundär-CTAs auf der Seite) */
.ks-home-events-calendar-style .ks-reg-button--ghost {
	background: transparent !important; color: var(--ks-text, #253d54) !important;
	border: 1px solid var(--ks-button, #253d54) !important;
}
.ks-home-events-calendar-style .ks-reg-button--ghost:hover {
	background: var(--ks-button, #253d54) !important; color: var(--ks-inverse-text, #ffffff) !important;
}

/* ============================================================
   1.41.0 – Ohne-Neuladen-Schicht: Angebots-Pills mit Badge,
   Tagesgruppen + Termin-Wahl-Kalender (Monatsansicht der Slots)
   ============================================================ */

/* „kostenlos“-Badge in der Angebots-Pill (Kennenlerngespräch). */
.ks-home-events-calendar-style .ks-coaching-freebadge {
	display: inline-block; font-size: 10px; font-weight: 600;
	background: #e7efe1; color: #3b6d11;
	border-radius: 10px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px;
}
.ks-home-events-calendar-style .ks-events-tab.is-active .ks-coaching-freebadge {
	background: rgba(255, 255, 255, .22); color: var(--ks-inverse-text, #ffffff);
}

.ks-home-events-calendar-style .ks-coaching-offerbar { margin-bottom: 0; }
/* Angebots-Leiste + Liste/Monat in einer Zeile; Umschalter rechtsbündig (1.87.0).
   !important + Divi-armiert, damit Theme/„Used CSS“ das Flex-Layout nicht kappt. */
.ks-home-events-calendar-style .ks-coaching-bar,
#page-container .ks-coaching-bar,
.et-db #et-boc .et-l .ks-coaching-bar {
	display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px;
	margin: 0 0 16px !important; justify-content: space-between !important;
}
.ks-home-events-calendar-style .ks-coaching-bar .ks-coaching-viewtoggle,
#page-container .ks-coaching-bar .ks-coaching-viewtoggle,
.et-db #et-boc .et-l .ks-coaching-bar .ks-coaching-viewtoggle {
	margin: 0 0 0 auto !important;
}
.ks-home-events-calendar-style .ks-coaching-daygroup { margin: 0; }

/* Termin-Wahl-Kalender (JS-gefüllt).
   Seit 1.54.0 nutzt er DIESELBEN Klassen wie das serverseitige Monatsraster
   (.ks-kal-monthhead / -navbtn / -cal / -dow / -cell / -n) — alle drei Tabs
   sehen damit gleich aus, und es gibt nur eine Stelle zu pflegen. Die frühere
   Eigenoptik (.ks-cm-head/-grid/-dow/-cell/-nav, 420px schmal) ist entfallen.
   Hier stehen nur noch die Zustände, die es im Seiten-Raster nicht gibt. */
.ks-home-events-calendar-style .ks-coaching-month {
	margin: 14px 0 6px;
}

/* Eigener Liste/Monat-Umschalter im Buchungsblock (nur standalone gerendert —
   innerhalb von [ks_kalender_seite] sitzt er in der Seiten-Toolbar). */
.ks-home-events-calendar-style .ks-coaching-viewtoggle {
	margin: 0 0 16px;
}

/* Buchbarer Tag: als <button> im selben Zellen-Layout. */
.ks-home-events-calendar-style .ks-kal-cell--pick {
	align-items: flex-start;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}
.ks-home-events-calendar-style .ks-kal-cell--pick.is-avail {
	border-color: var(--ks-accent, #326569);
}
.ks-home-events-calendar-style .ks-kal-cell--pick.is-avail:hover {
	background: #e9eef1;
}
.ks-home-events-calendar-style .ks-kal-cell--pick.is-picked,
.ks-home-events-calendar-style .ks-kal-cell--pick.is-picked:hover {
	background: var(--ks-button, #253d54);
	border-color: var(--ks-text, var(--ks-button, #253d54));
}
.ks-home-events-calendar-style .ks-kal-cell--pick.is-picked .ks-kal-n,
.et-db #et-boc .et-l .ks-home-events-calendar-style .ks-kal-cell--pick.is-picked .ks-kal-n {
	color: var(--ks-inverse-text, #ffffff) !important;
}

/* „frei“-Marker in der Zelle — nutzt die Chip-Optik der Termin-Punkte. */
.ks-home-events-calendar-style .ks-kal-dot--free {
	background: #e7efe1;
	color: #3b6d11;
	text-align: center;
}
.ks-home-events-calendar-style .ks-kal-cell--pick.is-picked .ks-kal-dot--free {
	background: rgba(255, 255, 255, .22);
	color: var(--ks-inverse-text, #ffffff);
}

.ks-home-events-calendar-style .ks-cm-hint { margin: 10px 0 0; font-size: 12px; color: var(--ks-text-muted, #6f7c86); }

/* ============================================================
   Merkzettel „Termine" — Merk-Button (1.88.0)
   Monochrom-Outline nach KS-Interaktions-Standard: Ruhe gedämpft var(--ks-text-muted, #6f7c86),
   Aktiv/Hover CI-Blau #253d54 (KEIN Rot). Karte = schwebende Ecke, Icon-only;
   Einzelansicht = Ghost-Button mit Label. Farben literal (Divi-Overlay-fest).
   ============================================================ */
.ks-home-event-card { position: relative; }
.ks-kal-bm {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; background: transparent; color: var(--ks-text-muted, #6f7c86); cursor: pointer; padding: 0;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.ks-kal-bm svg { display: block; }
.ks-kal-bm:hover { color: var(--ks-text, #253d54); }
.ks-kal-bm.is-on { color: var(--ks-text, #253d54); }
.ks-kal-bm.is-on svg { fill: var(--ks-text, #253d54); stroke: var(--ks-text, #253d54); }
.ks-kal-bm.is-loading { opacity: .5; pointer-events: none; }

/* Karte: schwebt oben rechts, kleine helle Fläche für Kontrast überm Bild. */
.ks-kal-bm--card {
	position: absolute; top: 10px; right: 10px; z-index: 2;
	/* Größe seit 1.96.0 über die Variable, damit Teilen- und Merk-Knopf in der
	   Kartenleiste zwangsläufig gleich groß bleiben (auch mobil bei 44px). */
	width: var(--kskal-cardbtn, 38px); height: var(--kskal-cardbtn, 38px); border-radius: 50%;
	background: rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(20, 32, 46, .14);
}
.ks-kal-bm--card:hover { background: var(--ks-surface, #ffffff); }

/* Einzelansicht: Ghost-Button mit Label. */
.ks-kal-bm--single {
	margin: 0; padding: 9px 16px; border-radius: 8px;
	border: 1px solid var(--ks-border, #cfcfcf); color: var(--ks-text, #253d54);
	font-family: 'Yantramanav Regular', 'Yantramanav Light', 'Yantramanav', sans-serif;
	font-size: 14px; line-height: 1;
}
.ks-kal-bm--single:hover { border-color: var(--ks-text, var(--ks-button, #253d54)); background: var(--ks-surface-raised, #f4f6f7); }
.ks-kal-bm--single.is-on { border-color: var(--ks-text, var(--ks-button, #253d54)); background: var(--ks-surface-raised, #eef3f6); }

/* Einzelterminseite: Merken sitzt seit 1.91.3 oben rechts in der Ecke der
   Inhaltskarte. Der Text laeuft darunter weiter, deshalb bekommt nur die
   erste Zeile rechts Platz (float) statt einer absoluten Position — so
   ueberdeckt der Button keine lange Ueberschrift. */
.ks-se-text .ks-se-merken {
	float: right;
	margin: 0 0 12px 16px;
	/* Seit 1.96.0 stehen hier ZWEI Knöpfe (Teilen + Merken). */
	display: flex;
	gap: 8px;
	align-items: center;
}
.ks-se-text.has-merken > :not(.ks-se-merken):first-of-type { margin-top: 0; }
.ks-se-text::after { content: ''; display: block; clear: both; }

@media (max-width: 600px) {
	/* Schmal: nicht neben den Text quetschen, sondern eigene Zeile rechts. */
	.ks-se-text .ks-se-merken {
		float: none;
		display: flex;
		justify-content: flex-end;
		margin: 0 0 12px;
	}
}

/* ============================================================
   Team-/Kreis-Termine — kompakte Sidebar-Optik (1.77.0).
   Die breite Startseiten-Karte (Grid 90|1fr|320) sprengt die schmale
   Kreis-Spalte; hier drei umschaltbare Layouts (Einstellung team_card_layout):
   a = Bild oben · b = Datums-Badge · c = Mini-Bild links.
   Farben literal (CI), Gewicht über Farbe/Sperrung statt font-weight.
   ============================================================ */
.ks-team-events .ks-team-list { display: flex; flex-direction: column; gap: 14px; }

.ks-team-events .ks-team-card {
	display: block;
	background: var(--ks-surface, #ffffff);
	border: 1px solid rgba(37, 61, 84, .12);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none !important;
	color: var(--ks-text, #253d54) !important;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ks-team-events .ks-team-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }

.ks-team-events .ks-team-card-body { display: block; padding: 11px 13px 13px; }

.ks-team-events .ks-team-date {
	display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ks-accent, #326569); line-height: 1.2;
}
.ks-team-events .ks-team-time { display: block; color: var(--ks-accent, #326569); font-size: 12.5px; line-height: 1.3; }
.ks-team-events .ks-team-title {
	display: block;
	font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-weight: 400;
	letter-spacing: .02em; color: var(--ks-text, #253d54); font-size: 15px; line-height: 1.25;
	margin: 5px 0 6px;
}
.ks-team-events .ks-team-venue {
	display: flex; align-items: center; gap: 6px;
	color: var(--ks-text-muted, #6f7c86); font-size: 12.5px; line-height: 1.35; margin-top: 4px;
}
.ks-team-events .ks-team-pin { width: 12px; height: 12px; flex: 0 0 12px; }

.ks-team-events .ks-team-img { display: block; overflow: hidden; background: #e8e0cf; }
.ks-team-events .ks-team-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a — Bild oben */
.ks-team-list--a .ks-team-card--poster .ks-team-img { width: 100%; height: 120px; }

/* b — Datums-Badge, kein Bild */
.ks-team-list--b .ks-team-card { display: flex; gap: 12px; align-items: stretch; padding: 11px; }
.ks-team-list--b .ks-team-card-body { padding: 0; flex: 1; min-width: 0; }
.ks-team-events .ks-team-badge {
	flex: 0 0 52px; width: 52px; background: var(--ks-button, #253d54); color: var(--ks-inverse-text, #ffffff); border-radius: 9px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0;
}
.ks-team-events .ks-team-badge .d { font-family: 'Cinzel', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1; }
.ks-team-events .ks-team-badge .m { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }

/* c — Mini-Bild links */
.ks-team-list--c .ks-team-card { display: flex; gap: 12px; align-items: center; padding: 10px; }
.ks-team-list--c .ks-team-card-body { padding: 0; flex: 1; min-width: 0; }
.ks-team-list--c .ks-team-img { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 9px; }
.ks-team-list--c .ks-team-card.no-image .ks-team-card-body { padding-left: 2px; }

/* ============================================================
   Verweis-Karten „Prozessbegleitung“ (Privat/Business) oben in der
   Kalenderseite (1.81.0). Variante B: zwei gleichwertige Karten.
   Reiner Verweis auf die getrennten Divi-Angebotsseiten.
   ============================================================ */
.ks-home-events-calendar-style .ks-kal-promo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 22px;
}
@media (max-width: 620px) {
	.ks-home-events-calendar-style .ks-kal-promo { grid-template-columns: 1fr; }
}
.ks-home-events-calendar-style .ks-kal-promo-card {
	background: var(--ks-surface, #ffffff);
	border: 1px solid rgba(37, 61, 84, .12);
	border-top: 3px solid var(--ks-accent, #326569);
	border-radius: 12px;
	padding: 18px 18px 20px;
}
.ks-home-events-calendar-style .ks-kal-promo-eyebrow {
	display: block;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ks-accent, #326569); line-height: 1.2;
}
.ks-home-events-calendar-style .ks-kal-promo-title {
	font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-weight: 400;
	letter-spacing: .02em; color: var(--ks-text, #253d54); font-size: 18px; line-height: 1.25;
	margin: 5px 0 6px;
}
.ks-home-events-calendar-style .ks-kal-promo-text {
	margin: 0 0 14px; color: var(--ks-text-muted, #6f7c86); font-size: 13.5px; line-height: 1.5;
}
.ks-home-events-calendar-style .ks-kal-promo-btn { display: inline-block; }

/* ============================================================
   [ks_buchung_pills] – Umschalter „Frage stellen | Termin buchen“ (1.82.0).
   Nutzt die kanonische Pill-Optik (.ks-tabs/.ks-tab); hier nur Layout +
   [hidden]-Absicherung der Panels.
   ============================================================ */
.ks-home-events-calendar-style.ks-bpills { width: 100%; }
/* Überschrift über der Pill-Zeile (optional, Attribut titel="…"). */
.ks-home-events-calendar-style .ks-bpills-title {
	font-family: 'Cinzel', Georgia, 'Times New Roman', serif; font-weight: 400;
	letter-spacing: .03em; color: var(--ks-text, #253d54); font-size: 20px; line-height: 1.25;
	text-align: center; margin: 0 0 16px;
}
/* Deutlicher Abstand zwischen Pill-Zeile und Inhalt (Frank 01.08.2026).
   !important + Divi-Armierung, damit Theme/„Used CSS“ den Abstand nicht kappt. */
.ks-home-events-calendar-style .ks-bpills-tabbar,
#page-container .ks-bpills-tabbar,
.et-db #et-boc .et-l .ks-bpills-tabbar {
	text-align: center !important;
	margin: 0 0 30px !important;
}
/* Pill-Optik im Widget gegen Theme/Divi ARMIEREN (Frank 01.08.2026).
   Ohne das überschrieb das Theme die Button-Optik der Pillen — und der AKTIVE
   Zustand ging verloren, sobald man ins Formular klickte (er hing faktisch am
   Fokus statt an der .is-active-Klasse). Jetzt ist der Aktiv-Look klassenbasiert
   + !important und bleibt erhalten. Optik = kanonische KS-Pille, Schrift 18px. */
.ks-bpills .ks-tabs,
#page-container .ks-bpills .ks-tabs,
.et-db #et-boc .et-l .ks-bpills .ks-tabs {
	display: inline-flex !important; flex-wrap: wrap; gap: 6px !important;
	background: var(--ks-section, #e9e4d9) !important; border-radius: 11px !important; padding: 5px !important;
}
.ks-bpills .ks-bpills-tab,
#page-container .ks-bpills .ks-bpills-tab,
.et-db #et-boc .et-l .ks-bpills .ks-bpills-tab {
	background: transparent !important; color: var(--ks-text-muted, #6f7c86) !important;
	border: 0 !important; border-radius: 8px !important;
	padding: 8px 18px !important; font-size: 18px !important; line-height: 1.2 !important;
	box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
	cursor: pointer;
}
.ks-bpills .ks-bpills-tab:hover,
#page-container .ks-bpills .ks-bpills-tab:hover,
.et-db #et-boc .et-l .ks-bpills .ks-bpills-tab:hover {
	background: var(--ks-accent, #326569) !important; color: var(--ks-inverse-text, #ffffff) !important;
}
.ks-bpills .ks-bpills-tab.is-active,
.ks-bpills .ks-bpills-tab.is-active:hover,
.ks-bpills .ks-bpills-tab.is-active:focus,
#page-container .ks-bpills .ks-bpills-tab.is-active,
.et-db #et-boc .et-l .ks-bpills .ks-bpills-tab.is-active,
.et-db #et-boc .et-l .ks-bpills .ks-bpills-tab.is-active:hover,
.et-db #et-boc .et-l .ks-bpills .ks-bpills-tab.is-active:focus {
	background: var(--ks-button, #253d54) !important; color: var(--ks-inverse-text, #ffffff) !important;
}
.ks-bpills .ks-bpills-tab:focus { outline: none !important; box-shadow: none !important; }
/* [hidden] hart absichern – Autoren-CSS schlägt sonst das UA-Stylesheet und der
   inaktive Tab-Inhalt bliebe sichtbar (bekannte Falle, CLAUDE.md). */
.ks-home-events-calendar-style .ks-bpills-panel[hidden] { display: none !important; }

/* Grüner Senden-Button im Frage-Tab (CF7). Nur innerhalb des Widgets — Dein
   CF7-Formular an anderer Stelle bleibt unberührt. Grün + weiße Schrift, Hover
   dunkleres Grün (Frank 30.07.2026).
   ⚠️ DIVI-PANZERUNG (1.83.1): Der CF7-Submit trägt zusätzlich `.et_pb_button`
   (+ `.et_pb_bg_layout_light`). Divi stylt den mit ID-Spezifität und teils
   !important — ein bloßes `.ks-bpills .wpcf7-submit{…!important}` verliert dagegen.
   Deshalb dieselbe ID-Armierung wie bei den Kalender-Buttons (#page-container,
   #et-boc .et-l, .et-db #et-boc .et-l). */
.ks-bpills .wpcf7-submit,
.ks-bpills input[type="submit"],
.ks-bpills button[type="submit"],
#page-container .ks-bpills .wpcf7-submit,
#page-container .ks-bpills input[type="submit"],
#page-container .ks-bpills button[type="submit"],
#et-boc .et-l .ks-bpills .wpcf7-submit,
#et-boc .et-l .ks-bpills button[type="submit"],
.et-db #et-boc .et-l .ks-bpills .wpcf7-submit,
.et-db #et-boc .et-l .ks-bpills button[type="submit"] {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 16px 0 0 !important;
	padding: 14px 26px !important;
	background: var(--ks-accent, #326569) !important;
	background-color: var(--ks-accent, #326569) !important;
	color: var(--ks-inverse-text, #ffffff) !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	transition: background-color .2s ease;
}
.ks-bpills .wpcf7-submit:hover,
.ks-bpills input[type="submit"]:hover,
.ks-bpills button[type="submit"]:hover,
#page-container .ks-bpills .wpcf7-submit:hover,
#page-container .ks-bpills button[type="submit"]:hover,
#et-boc .et-l .ks-bpills .wpcf7-submit:hover,
.et-db #et-boc .et-l .ks-bpills .wpcf7-submit:hover,
.et-db #et-boc .et-l .ks-bpills button[type="submit"]:hover {
	background: #28545a !important; /* dunkleres CI-Grün */
	background-color: #28545a !important;
	color: var(--ks-inverse-text, #ffffff) !important;
}
/* Divi hängt an seine Buttons einen Pfeil (::after) — hier unterdrücken. */
.ks-bpills .wpcf7-submit::after,
#page-container .ks-bpills .wpcf7-submit::after,
.et-db #et-boc .et-l .ks-bpills button[type="submit"]::after {
	content: none !important;
	display: none !important;
}
/* CF7-Spinner nicht den Button verschieben lassen. */
.ks-bpills .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* Links im CF7-Formular (z. B. Datenschutzerklärung): waren weiß auf weißem
   Grund (Theme/Divi setzt a-Farbe hell) → CI-Grün, sichtbar. Divi-armiert. */
.ks-bpills .wpcf7 a,
#page-container .ks-bpills .wpcf7 a,
#et-boc .et-l .ks-bpills .wpcf7 a,
.et-db #et-boc .et-l .ks-bpills .wpcf7 a {
	color: var(--ks-accent, #326569) !important;
	text-decoration: underline !important;
}
.ks-bpills .wpcf7 a:hover,
#page-container .ks-bpills .wpcf7 a:hover,
.et-db #et-boc .et-l .ks-bpills .wpcf7 a:hover {
	color: #28545a !important;
}
/* Zusätzlicher Fallback: JEDER Textlink in den Panels (falls der CF7-Wrapper mal
   anders heißt) — Buttons/Pillen ausdrücklich ausgenommen, damit deren weiße
   Schrift auf farbigem Grund bleibt. Divi-armiert. */
.ks-bpills-panel a:not(.ks-reg-button):not(.ks-events-tab):not(.ks-events-button):not(.ks-dashboard-button):not(.ks-cal-dd-btn),
#page-container .ks-bpills-panel a:not(.ks-reg-button):not(.ks-events-tab):not(.ks-events-button):not(.ks-dashboard-button):not(.ks-cal-dd-btn),
.et-db #et-boc .et-l .ks-bpills-panel a:not(.ks-reg-button):not(.ks-events-tab):not(.ks-events-button):not(.ks-dashboard-button):not(.ks-cal-dd-btn) {
	color: var(--ks-accent, #326569) !important;
}

/* Checkboxen/Radios im Widget in CI-Grün (Häkchen-Füllung). */
.ks-bpills input[type="checkbox"],
.ks-bpills input[type="radio"] {
	accent-color: var(--ks-accent, #326569);
}

/* Dezenter grüner Fokus auf Formularfeldern (Politur). */
.ks-bpills .wpcf7 input:focus,
.ks-bpills .wpcf7 textarea:focus,
.ks-bpills .wpcf7 select:focus {
	border-color: var(--ks-accent, #326569) !important;
	box-shadow: 0 0 0 2px rgba(50, 101, 105, .15) !important;
	outline: none !important;
}

/* ============================================================
   TEILEN-KNOPF (1.96.0, KS-Teilen-Standard, Freigabe Frank 25.08.2026)
   Ein Knopf, darunter eine beschriftete Liste. Symbole sind lokale Inline-SVG,
   Ziele sind reine Links (Regel Nr. 1: kein Share-Plugin, kein Fremdskript).
   ============================================================ */
.ks-kal-share { position: relative; display: inline-block; }

.ks-kal-share__btn {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--ks-border, #cfcfcf); border-radius: 8px;
	background: var(--ks-surface, #ffffff); color: var(--ks-text, #253d54);
	font-family: 'Yantramanav Regular', 'Yantramanav Light', 'Yantramanav', sans-serif;
	font-size: 14px; line-height: 1; padding: 9px 16px; cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ks-kal-share__btn:hover {
	border-color: var(--ks-text, var(--ks-button, #253d54));
	background: var(--ks-surface-raised, #f4f6f7);
}
.ks-kal-share__btn svg { display: block; }

.ks-kal-share__list {
	position: absolute; z-index: 30; min-width: 232px; margin: 6px 0 0; padding: 6px;
	list-style: none;
	background: var(--ks-surface, #ffffff);
	border: 1px solid var(--ks-border, #cfcfcf); border-radius: 12px;
	box-shadow: 0 18px 40px -18px rgba(11, 24, 38, .55);
}
/* ⚠️ Pflicht-Absicherung: Ohne diese Zeile schlägt eine display-Regel das
   [hidden]-Attribut (Autoren-CSS gewinnt gegen das UA-Stylesheet), und die
   Liste stünde dauerhaft offen. Genau diese Falle hatte der Kalender in
   1.43.0 schon einmal bei der „Früher/Später"-Leiste. */
.ks-kal-share__list[hidden],
.ks-kal-share__list li[hidden] { display: none !important; }

.ks-kal-share__item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	border: 0; background: transparent; cursor: pointer; text-align: left;
	padding: 9px 10px; border-radius: 8px;
	color: var(--ks-text, #253d54); text-decoration: none;
	font-family: 'Yantramanav Light', 'Yantramanav Regular', 'Yantramanav', sans-serif;
	font-size: 15px; line-height: 1.2;
}
.ks-kal-share__item:hover { background: var(--ks-section, #e9e4d9); color: var(--ks-text, #253d54); }
.ks-kal-share__item svg { flex: 0 0 auto; color: var(--ks-text-muted, #6f7c86); }
.ks-kal-share__item:hover svg { color: var(--ks-accent, #326569); }

.ks-kal-share__sep {
	height: 1px; margin: 5px 8px; padding: 0;
	background: var(--ks-border, #cfcfcf);
}

/* Detailseite: Liste öffnet nach unten links, damit sie im Inhalt bleibt. */
.ks-kal-share--single .ks-kal-share__list { left: 0; }

/* Übersichtskarte: Knopf ist kompakt (nur Symbol), Liste öffnet nach rechts
   ausgerichtet, sonst ragt sie über den Kartenrand hinaus. */
.ks-kal-share--card .ks-kal-share__btn {
	width: var(--kskal-cardbtn, 38px); height: var(--kskal-cardbtn, 38px);
	padding: 0; justify-content: center; border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 6px rgba(20, 32, 46, .14);
}
.ks-kal-share--card .ks-kal-share__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ks-kal-share--card .ks-kal-share__list { right: 0; }

/* Beide Karten-Knöpfe (Teilen + Merken) in EINER Leiste oben rechts. So
   rutscht Teilen automatisch nach rechts, wenn Merken fehlt (ausgeloggt). */
.ks-kal-cardactions {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	display: flex; align-items: center; gap: 6px;
}
.ks-kal-cardactions .ks-kal-bm--card { position: static; }

@media (max-width: 768px) {
	.ks-kal-share__btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
	.ks-kal-share--card .ks-kal-share__btn { min-height: 0; }
	.ks-kal-share__item { min-height: 44px; }
	.ks-home-event-card { --kskal-cardbtn: 44px; }
}

/* ============================================================
   MOBIL-OPTIMIERUNG (1.93.0, Broadcast 24.08.2026, Freigabe Frank)
   Drei Punkte aus der Selbstprüfung. Die Desktop-Optik bleibt unangetastet,
   alles Folgende steht bewusst in Media Queries.
   ============================================================ */

/* --- 1. Eingabefelder: 16px gegen den iOS-Zoom ---
   Unter 16px zoomt iOS beim Antippen die ganze Seite und der Nutzer landet
   verschoben im Formular. Bisher setzte weder das Gast-Formular noch das
   Buchungs-Pillen-Widget eine eigene Schriftgröße, geerbt wurde vom Theme.
   Bewusst OHNE Media Query: 16px ist auch am Desktop richtig, und eine
   Bedingung würde nur eine zweite Fassung schaffen, die auseinanderlaufen kann.
   `!important` nur dort, wo CF7 und Divi ohnehin mit !important arbeiten. */
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form input[type="text"],
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form input[type="email"],
.ks-home-events-calendar-style.ks-coaching .ks-coaching-guest-form textarea {
	font-size: 16px;
}
.ks-bpills .wpcf7 input[type="text"],
.ks-bpills .wpcf7 input[type="email"],
.ks-bpills .wpcf7 input[type="tel"],
.ks-bpills .wpcf7 input[type="date"],
.ks-bpills .wpcf7 textarea,
.ks-bpills .wpcf7 select,
#page-container .ks-bpills .wpcf7 input[type="text"],
#page-container .ks-bpills .wpcf7 input[type="email"],
#page-container .ks-bpills .wpcf7 textarea,
#page-container .ks-bpills .wpcf7 select {
	font-size: 16px !important;
}

@media (max-width: 768px) {

	/* --- 2. Touch-Ziele auf mindestens 44px ---
	   ⚠️ Zur Einordnung: `.ks-events-tab` HATTE oben bereits `min-height:44px`.
	   Die Pillen-Variante (Zeile 433 ff.) setzt das mit `min-height:0` wieder
	   herunter, weil das Referenz-CSS für `.ks-tab` in CLAUDE.md nur
	   `padding:8px 18px` und `line-height:1` vorgibt, macht 31px. Der Kanon hat
	   hier also eine vorhandene Maßnahme überschrieben.
	   Deshalb NUR mobil zurückholen: Desktop bleibt exakt beim Kanon, damit die
	   Leisten aller Plugins gleich aussehen. Eine gemeinsame Mobil-Ergänzung des
	   Kanons liegt beim Chefkoch, siehe Vertragsdatei. */
	.ks-home-events-calendar-style .ks-events-tabbar:not(.ks-coaching-nav) .ks-events-tab,
	.ks-home-events-calendar-style .ks-kal-view {
		min-height: 44px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	/* Merk-Button: 34px ist ebenfalls zu klein zum Treffen. Die Karten-Variante
	   bekommt ihre 44px seit 1.96.0 über `--kskal-cardbtn` im Teilen-Block,
	   damit Teilen und Merken nicht auseinanderlaufen. */
	.ks-kal-bm--single { min-height: 44px; padding-top: 0; padding-bottom: 0; }

	/* --- 3. Monatsraster: Zellen breit genug zum Treffen ---
	   Rechnung bei 360px Gerätebreite: Die Seitenränder von `.ks-kal-wrap`
	   fressen 2x24px, die sechs Spalten-Abstände weitere 6x6px. Es blieben
	   (360-48-36)/7 = 39px je Zelle. Zwei Stellschrauben, beide hier: */
	.ks-kal-page .ks-kal-wrap { padding-left: 14px; padding-right: 14px; }
	.ks-home-events-calendar-style .ks-kal-cal { gap: 4px; }
	.ks-home-events-calendar-style .ks-kal-cell { padding: 4px; }
	/* Damit: (360-28-24)/7 = 44px, bei 390px sind es 48px. */
}

@media (max-width: 359px) {
	/* Sehr kleine Geräte (320px). Sieben Spalten mal 44px passen dort
	   rechnerisch nicht mehr in die Breite. Statt die Zellen unter die
	   Trefferschwelle zu drücken, scrollt NUR das Raster in seinem eigenen
	   Container, nicht die Seite. Genau so erlaubt es Kriterium 1 des
	   Broadcasts für breite Elemente. */
	.ks-home-events-calendar-style .ks-kal-monthbox {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ks-home-events-calendar-style .ks-kal-cal { min-width: 332px; }
}