.ktv-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}
.ktv-card-grid > * {
	height: 100%;
}

/* Leerstand-Text ("noch keine Termine/Neuigkeiten") -- zentriert statt
   linksbuendig am Rand, mit etwas Luft drumherum, damit es wie ein
   bewusster Platzhalter wirkt statt wie ein abgeschnittener Fehlertext. */
.ktv-leerstand {
	text-align: center;
	padding: var(--ktv-space-lg, 40px) var(--ktv-space-sm, 16px);
	color: var(--ktv-text-muted, #767671);
}

/* Neuigkeiten-Karussell (Startseite + Sportarten-Unterseiten): zeigt immer
   nur die ersten ~2 Karten, der Rest ist per Wischen/Scrollen erreichbar
   (nativer, sanfter Scroll-Snap statt Klick-Pagination -- keine
   Seitenneuladung noetig). Jede Karte "rastet" per scroll-snap-align sauber
   ein -- die letzte Karte bekommt align:end, damit sie beim Ranscrollen
   vollstaendig sichtbar wird statt am rechten Rand abgeschnitten zu bleiben.
   Ein leichter "Peek" der naechsten Karte (Kartenbreite < 50%) signalisiert,
   dass noch mehr kommt, zusaetzlich zu den JS-Pfeilen (siehe site.js). */
.ktv-card-carousel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 2px;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
}
.ktv-card-carousel > * {
	flex: 0 0 calc(45% - 13px);
	scroll-snap-align: start;
	min-width: 0;
}
.ktv-card-carousel > *:last-child {
	scroll-snap-align: end;
}
@media (max-width: 700px) {
	.ktv-card-carousel {
		gap: var(--ktv-space-sm, 16px);
	}
	.ktv-card-carousel > * {
		flex: 0 0 82%;
	}
}

/* Innerhalb eines Karussells sollen alle Karten optisch EINHEITLICH wirken,
   auch wenn sie unterschiedliche Inhaltstypen (Aktuelles vs. Veranstaltung)
   mit eigentlich unterschiedlicher Akzentfarbe (rot/blau) mischen -- im
   normalen Grid faellt das nicht auf, im engen 2er-Karussell nebeneinander
   schon. Deshalb hier auf eine einheitliche blaue Akzentfarbe erzwungen.
   !important noetig, da .accent-red/.accent-blue/.ktv-eyebrow.blue aus der
   Customizer-"Additional CSS" kommen, die nach diesem Stylesheet laedt. */
.ktv-card-carousel .ktv-card.accent-red,
.ktv-card-carousel .ktv-card.accent-blue {
	border-left-color: var(--ktv-blue, #005298) !important;
}
.ktv-card-carousel .ktv-eyebrow {
	color: var(--ktv-blue, #005298) !important;
}
/* Karten im Karussell muessen gleich hoch wirken, unabhaengig davon wie
   lang der jeweilige Titel ist -- Titel auf fest 2 Zeilen begrenzt (mit
   Ellipsis bei laengeren Titeln), Eyebrow auf 1 Zeile. min-height
   reserviert den Platz fuer 2 Zeilen auch wenn der Titel kuerzer ist, damit
   ALLE Karten exakt denselben Innenraum belegen. */
/* Kleine Thumbnail-Version im Karussell -- flacheres Seitenverhaeltnis als
   das grosse Karten-Bild im normalen Grid, damit die Karte trotz Bild
   kompakt bleibt (User: "kleine Version des Thumbnails... macht es
   persoenlicher"). */
.ktv-card-carousel .ktv-card-thumb img {
	aspect-ratio: 16 / 7;
}
.ktv-card-carousel .ktv-card h3 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	font-size: 17px;
	line-height: 1.3;
}
.ktv-card-carousel .ktv-eyebrow {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pfeil-Buttons fuers Karussell (site.js fuegt sie automatisch ein). Auf
   dem Handy nicht noetig/gezeigt -- dort ist Wischen die natuerliche
   Geste, Pfeile waeren nur zusaetzliche Ablenkung auf wenig Platz. */
.ktv-carousel-nav {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 10px rgba(11, 27, 43, 0.18);
	color: var(--ktv-blue, #005298);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ktv-carousel-nav:disabled {
	opacity: 0.25;
	cursor: default;
}
.ktv-carousel-prev {
	left: -18px;
}
.ktv-carousel-next {
	right: -18px;
}
@media (max-width: 700px) {
	.ktv-carousel-nav {
		display: none !important;
	}
}

/* Ueberschriften konsequent linksbuendig wie der Fliesstext -- nur die
   Personenkarten bleiben bewusst zentriert (siehe .ktv-person-card weiter
   unten, die Regel dort steht spaeter im Stylesheet und gewinnt daher). */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.single-content h1, .single-content h2, .single-content h3, .single-content h4,
.ktv-layout-main h1, .ktv-layout-main h2, .ktv-layout-main h3,
.ktv-layout-sidebar h1, .ktv-layout-sidebar h2, .ktv-layout-sidebar h3 {
	text-align: left;
}

/* Sportarten-/Aktuelles-/Veranstaltungs-Kacheln in einer wp:columns-Reihe
   (z.B. "Unsere Sportarten" auf der Startseite) gleich hoch, egal wie
   lang der jeweilige Titel ist. */
.wp-block-columns {
	align-items: stretch;
}
.wp-block-columns > .wp-block-column {
	display: flex;
}
.wp-block-columns > .wp-block-column > .ktv-card {
	width: 100%;
}

/* Personenkarten: einheitliches, ruhiges Design passend zum restlichen
   Kartensystem -- Foto mit dezentem Ring, Name als klare Ueberschrift,
   Funktion als Pill-Badge (statt einfachem Fliesstext), E-Mail als
   eigene Zeile mit Icon statt nacktem blauen Link. */
.ktv-person-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ktv-person-foto img,
.ktv-person-card .ktv-avatar {
	border-radius: 50%;
	width: 104px;
	height: 104px;
	object-fit: cover;
	margin: 0 auto var(--ktv-space-sm, 16px);
	box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ktv-border, #ECECEA);
}

.ktv-person-card h3 {
	margin: 0 0 6px;
	font-size: 18px;
	text-align: center !important;
}

.ktv-person-funktion {
	display: inline-block;
	background: var(--ktv-bg-alt, #F5F6F5);
	color: var(--ktv-blue, #005298);
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.02em;
	padding: 5px 14px;
	border-radius: var(--ktv-radius-pill, 999px);
	margin: 0 0 var(--ktv-space-sm, 16px);
}

/* Kleiner Pfeil-Button fuer Links, die auf eine andere Seite/externe Seite
   verweisen (z.B. "Zu Gerätturnen →" auf Personen-Karten, "TSV Bordesholm →"
   auf Turnstuetzpunkt-Karten) -- vorher nackter unterstrichener Text,
   wirkte lieblos. Klein/pillenfoermig statt der grossen Hero-Buttons
   (.ktv-btn-primary/outline), die fuer diesen Karten-Kontext zu wuchtig
   waeren. Ein Klassenname, ueberall wiederverwendet fuer Konsistenz. */
.ktv-btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 6px 14px;
	border-radius: var(--ktv-radius-pill, 999px);
	border: 1.5px solid var(--ktv-blue, #005298);
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 13px;
	color: var(--ktv-blue, #005298) !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.ktv-btn-arrow:hover {
	background: var(--ktv-blue, #005298);
	color: #fff !important;
}

/* Termine-Übersichtsseite: schlanke Zeilen-Liste statt Karten-Grid --
   ohne Thumbnail bräuchte eine Karte sonst viel Leerraum, um nicht winzig
   zu wirken. Datum links als kompaktes Kaestchen (auf einen Blick
   scannbar bei vielen Terminen untereinander), Titel/Meta in der Mitte,
   eindeutiger Button rechts statt nur "die ganze Karte ist klickbar". */
.ktv-termine-liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ktv-termine-liste-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	background: #fff;
	border: 1px solid var(--ktv-border, #ECECEA);
	border-radius: var(--ktv-radius, 8px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ktv-termine-liste-item:hover {
	border-color: var(--ktv-blue, #005298);
	box-shadow: 0 6px 20px rgba(11, 27, 43, 0.08);
}
.ktv-termine-datum {
	flex: 0 0 auto;
	width: 56px;
	text-align: center;
	line-height: 1.1;
}
.ktv-termine-datum-tag {
	display: block;
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 800;
	font-size: 22px;
	color: var(--ktv-blue, #005298);
}
.ktv-termine-datum-monat {
	display: block;
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ktv-text-muted, #5A6472);
}
.ktv-termine-body {
	flex: 1 1 auto;
	min-width: 0;
}
.ktv-termine-body h3 {
	margin: 0 0 3px;
	font-size: 17px;
}
.ktv-termine-meta {
	margin: 0;
	color: var(--ktv-text-muted, #5A6472);
	font-size: 13px;
}
.ktv-termine-liste-btn {
	flex: 0 0 auto;
	margin-top: 0;
	white-space: nowrap;
}
@media (max-width: 560px) {
	.ktv-termine-liste-item {
		flex-wrap: wrap;
		padding: 16px 18px;
	}
	.ktv-termine-body {
		flex-basis: calc(100% - 76px);
	}
	.ktv-termine-liste-btn {
		flex: 1 1 100%;
		justify-content: center;
		margin-top: 4px;
	}
}

/* "Heute"-Trennmarker in der durchgehenden Termine-Liste (modus=alle) --
   deutlich vom weissen Karten-Look der Termin-Zeilen abgesetzt (kraeftige
   Markenfarbe statt weiss), damit er auch bei vielen Zeilen sofort als
   fester Bezugspunkt "hier ist heute" auffaellt, egal ob gerade ein
   Termin ansteht oder nicht. */
/* Zweiter Anlauf: der massive volltonblaue Kasten (erste Version) wirkte im
   Vergleich zu den leichten weissen Zeilen zu laut/fremd -- User: "sieht
   nicht gut aus". Jetzt ein duenner Trenner-Strich mit einem kleinen, nur
   umrandeten Datums-Abzeichen mittig (gleiche Sprache wie die anderen
   Pillen-Buttons/Badges auf der Seite: weiss, duenner blauer Rahmen, keine
   Vollflaeche) statt eines eigenstaendigen, schweren Elements. */
.ktv-termine-heute {
	margin: 6px 0;
	text-align: center;
}
.ktv-termine-heute-divider {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ktv-termine-heute-divider::before,
.ktv-termine-heute-divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--ktv-border, #ECECEA);
}
.ktv-termine-heute-datum {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: var(--ktv-radius-pill, 999px);
	background: #fff;
	border: 1.5px solid var(--ktv-blue, #005298);
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ktv-blue, #005298);
	white-space: nowrap;
}
/* Termine GENAU heute stehen direkt im Heute-Bereich selbst (nicht nur
   knapp darueber in der normalen Liste) und heben sich farblich klar von
   den neutralen weissen Zeilen ab -- hellblauer Ton + blauer Rahmen statt
   grau, dazu das Datums-Abzeichen in Fuell- statt Umriss-Optik. */
.ktv-termine-heute .ktv-termine-liste-item {
	margin-top: 10px;
}
.ktv-termine-liste-item-heute {
	background: rgba(0, 82, 152, 0.06);
	border-color: var(--ktv-blue, #005298);
}
.ktv-termine-liste-item-heute .ktv-termine-datum {
	border-radius: var(--ktv-radius, 8px);
	padding: 4px 2px;
	background: var(--ktv-blue, #005298);
}
.ktv-termine-liste-item-heute .ktv-termine-datum-tag,
.ktv-termine-liste-item-heute .ktv-termine-datum-monat {
	color: #fff;
}
/* Anstehende Termine (noch nicht heute) rot statt blau -- macht auf einen
   Blick klar, was noch bevorsteht, ohne die ganze Zeile einzufaerben (das
   bleibt der "Heute"-Hervorhebung vorbehalten, damit die nicht mit
   "einfach nur anstehend" verwechselt wird). */
.ktv-termine-liste-item-kommend .ktv-termine-datum-tag,
.ktv-termine-liste-item-kommend .ktv-termine-datum-monat {
	color: var(--ktv-red, #E6030E);
}

.ktv-person-card p:has(a[href^="mailto:"]),
.ktv-person-card p:has(a[href^="tel:"]) {
	margin: 0;
}
.ktv-person-card p:has(a[href^="tel:"]) {
	margin-top: 4px;
}
.ktv-person-card a[href^="mailto:"],
.ktv-person-card a[href^="tel:"] {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
	gap: 5px;
	font-size: 12px;
	line-height: 1.4;
	max-width: 100%;
	color: var(--ktv-text-muted, #5A6472);
	font-size: 13px;
	text-decoration: none;
	word-break: break-word;
}
.ktv-person-card a[href^="mailto:"]:before {
	content: "\2709";
	font-size: 13px;
}
.ktv-person-card a[href^="tel:"]:before {
	content: "\260E";
	font-size: 13px;
}
.ktv-person-card a[href^="mailto:"]:hover,
.ktv-person-card a[href^="tel:"]:hover {
	color: var(--ktv-blue, #005298);
	text-decoration: underline;
}

.ktv-turnstuetzpunkte-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-top: var(--ktv-space-lg, 40px);
}
.ktv-turnstuetzpunkt-detail h3 {
	margin-top: 0;
}
.ktv-tsp-verein {
	font-weight: 600;
	margin-bottom: var(--ktv-space-sm, 16px);
}
.ktv-tsp-verein a {
	color: var(--ktv-blue, #005298);
}
.ktv-tsp-angebote {
	color: var(--ktv-text-muted, #5A6472);
	line-height: 1.6;
	margin-bottom: var(--ktv-space-sm, 16px);
}
.ktv-tsp-ansprechpartner {
	font-size: 13px;
	color: var(--ktv-text-muted, #5A6472);
	margin: 0;
}

.ktv-turnstuetzpunkt-karte {
	width: 100%;
	border-radius: var(--ktv-radius, 8px);
	overflow: hidden;
}

/* Kadence-eigene Titel-Elemente zuverlaessig ausblenden. Der Customizer-Schalter
   "Show Page Title?" (theme_mod page_title=false) wirkt nachweislich nur auf
   die Startseite, nicht auf normale Unterseiten (Kadence-interne Layout-Logik
   ist mehrschichtiger als der einfache Schalter) -- daher hier hart per CSS,
   das ist unabhaengig von dieser Logik zuverlaessig. Kadence rendert den
   Seitentitel potenziell an ZWEI Stellen: dem Hero-Titel-Balken (.entry-hero)
   UND separat als <header class="entry-header"><h1 class="entry-title"> im
   Content-Bereich -- display:none versteckt nur visuell, der Text bleibt im
   HTML-Quelltext und wurde auf einem echten Handy sichtbar dupliziert
   (2026-09-27, Nutzer-Screenshot). Beide Selektoren muessen abgedeckt sein.
   Unser eigener Ersatz-Header (.ktv-page-header, per the_content-Filter bzw.
   im Single-Template) bleibt sichtbar. */
.entry-hero,
.entry-header {
	display: none !important;
}

/* Breadcrumbs -- Orientierung fuer Besucher, die ueber eine Suchmaschine
   direkt auf einer Unterseite landen. */
.ktv-breadcrumbs {
	/* Basiswert: fuer den Fall, dass dieses Element NICHT in Kadences
	   eigenem Content-Wrapper sitzt (z.B. im eigenen Veranstaltung-Template,
	   das per get_header()/get_footer() direkt schreibt, ohne durch
	   .entry-content zu laufen) -- braucht dann eine eigene Breite+Rand. */
	max-width: 900px;
	margin: 0 auto;
	padding: var(--ktv-space-md, 24px) var(--ktv-space-lg, 40px) 0;
}
/* Sitzt dieses Element dagegen INNERHALB von Kadences eigenem, bereits
   zentrierten Content-Bereich (Normalfall: per the_content-Filter auf
   Seiten eingefuegt), zentriert Kadence schon selbst -- eine zweite,
   abweichend breite eigene Zentrierung wuerde aus dem Rahmen des
   restlichen Inhalts rutschen (das war der "zu weit rechts"-Bug). Diese
   Regel ist spezifischer (2 Klassen) und gewinnt daher in diesem Fall. */
.entry-content .ktv-breadcrumbs,
.single-content .ktv-breadcrumbs {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.ktv-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--ktv-text-muted, #5A6472);
}
.ktv-breadcrumbs li:not(:last-child):after {
	content: "/";
	margin-left: 6px;
	color: var(--ktv-border, #ECECEA);
}
.ktv-breadcrumbs a {
	color: var(--ktv-text-muted, #5A6472);
	text-decoration: none;
}
.ktv-breadcrumbs a:hover {
	color: var(--ktv-blue, #005298);
	text-decoration: underline;
}
.ktv-breadcrumbs li[aria-current="page"] {
	color: var(--ktv-ink, #14181B);
	font-weight: 600;
}
@media (max-width: 600px) {
	.ktv-breadcrumbs { padding: var(--ktv-space-sm, 16px) var(--ktv-space-sm, 16px) 0; }
}

/* Seiten-Header-Ersatz (Kadence-Titelbalken ist ausgeblendet, siehe oben) */
.ktv-page-header {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--ktv-space-xl, 64px) var(--ktv-space-lg, 40px) var(--ktv-space-md, 24px);
	text-align: left;
}
.entry-content .ktv-page-header,
.single-content .ktv-page-header {
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}
.ktv-page-header h1 {
	margin: 6px 0 0;
	font-size: 40px;
	line-height: 1.15;
}
@media (max-width: 600px) {
	.ktv-page-header,
	.entry-content .ktv-page-header,
	.single-content .ktv-page-header {
		padding: var(--ktv-space-lg, 40px) var(--ktv-space-sm, 16px) var(--ktv-space-sm, 16px);
	}
	.ktv-page-header h1 { font-size: 28px; }
}

/* Ganze Karte klickbar (siehe site.js): Cursor + dezenter Hover */
.ktv-card-thumb {
	margin: 0 0 var(--ktv-space-sm, 16px);
	border-radius: var(--ktv-radius, 8px);
	overflow: hidden;
}
.ktv-card-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.ktv-card-clickable {
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ktv-card-clickable:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* Kein blauer Tipp-Flash auf Handy, dafuer ein bewusster, sichtbarer Fokus-Ring (Barrierefreiheit) */
a, button, .wp-block-button__link, input, textarea, select {
	-webkit-tap-highlight-color: transparent;
}
a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible {
	outline: 2px solid var(--ktv-blue, #005298);
	outline-offset: 2px;
}

/* Avatare (echtes Foto oder Platzhalter) einheitlich rund */
.ktv-avatar {
	border-radius: 50%;
	width: 96px;
	height: 96px;
	object-fit: cover;
	margin: 0 auto 12px;
	display: block;
}
.ktv-avatar-placeholder {
	background: #f5f6f5;
}

/* Einzelseite Veranstaltung */
.ktv-veranstaltung-meta {
	color: var(--ktv-text-muted, #5A6472);
	margin-top: var(--ktv-space-sm, 16px);
}
.ktv-ical-feed-hint {
	margin-top: var(--ktv-space-xl, 64px);
	font-size: 13px;
}
.ktv-ical-feed-hint a {
	color: var(--ktv-text-muted, #5A6472);
}
.ktv-ical-feed-hint a:hover {
	color: var(--ktv-blue, #005298);
}

/* "Naechster Termin"-Banner auf der Startseite -- kompakt, gut lesbar auf
   Handy und Desktop, faellt aber nicht so massiv auf wie der Hero. */
.ktv-naechster-termin {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px var(--ktv-space-md, 24px);
	background: var(--ktv-bg-alt, #F5F6F5);
	border: 1px solid var(--ktv-border, #ECECEA);
	border-left: 3px solid var(--ktv-blue, #005298);
	border-radius: var(--ktv-radius, 8px);
	padding: var(--ktv-space-sm, 16px) var(--ktv-space-md, 24px);
	text-decoration: none;
	color: var(--ktv-ink, #14181B);
	transition: box-shadow .15s ease;
}
.ktv-naechster-termin:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.ktv-nt-label {
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ktv-blue, #005298);
	flex-basis: 100%;
}
.ktv-nt-titel {
	font-weight: 700;
	font-size: 17px;
}
.ktv-nt-meta {
	color: var(--ktv-text-muted, #5A6472);
	font-size: 14px;
}
.ktv-nt-arrow {
	margin-left: auto;
	color: var(--ktv-blue, #005298);
	font-weight: 700;
}
@media (max-width: 600px) {
	.ktv-nt-titel { flex-basis: 100%; }
	.ktv-nt-arrow { display: none; }
}

/* Foto-Slideshow auf der Veranstaltungsseite (einfacher Ueberblick, z.B.
   fuer Eltern) -- reines CSS/Vanilla-JS, kein externes Karussell-Plugin. */
.ktv-veranstaltung-slideshow {
	position: relative;
	border-radius: var(--ktv-radius, 8px);
	overflow: hidden;
	background: var(--ktv-bg-alt, #F5F6F5);
}
.ktv-slideshow-track {
	display: flex;
	transition: transform .3s ease;
}
.ktv-slideshow-slide {
	flex: 0 0 100%;
}
.ktv-slideshow-slide img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}
.ktv-slideshow-prev, .ktv-slideshow-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, .9);
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	color: var(--ktv-ink, #14181B);
}
.ktv-slideshow-prev { left: 12px; }
.ktv-slideshow-next { right: 12px; }
.ktv-slideshow-dots {
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.ktv-slideshow-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .6);
	border: none;
	padding: 0;
	cursor: pointer;
}
.ktv-slideshow-dot.is-active {
	background: #fff;
}
@media (max-width: 600px) {
	.ktv-slideshow-slide img { height: 260px; }
}

.ktv-veranstaltung-ical {
	margin-top: var(--ktv-space-sm, 16px);
}
.ktv-veranstaltung-ical a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--ktv-blue, #005298);
	text-decoration: none;
	border: 1px solid var(--ktv-border, #ECECEA);
	border-radius: var(--ktv-radius-pill, 999px);
	padding: 8px 18px;
}
.ktv-veranstaltung-ical a:hover {
	border-color: var(--ktv-blue, #005298);
}
.ktv-veranstaltung-content {
	/* Nur im eigenen Veranstaltung-Template genutzt (nicht per the_content-
	   Filter, kein Kadence-Wrapper drumherum) -- braucht daher eine eigene
	   Breite+Rand, anders als .ktv-page-header/.ktv-breadcrumbs auf
	   normalen Seiten. */
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--ktv-space-lg, 40px) var(--ktv-space-xl, 64px);
}
.ktv-veranstaltung-hauptfoto {
	max-width: 900px;
	margin: 0 auto var(--ktv-space-xl, 64px);
	padding: 0 var(--ktv-space-lg, 40px);
}
.ktv-veranstaltung-hauptfoto img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ktv-radius-lg, 12px);
	display: block;
}
@media (max-width: 600px) {
	.ktv-veranstaltung-hauptfoto {
		padding: 0 var(--ktv-space-sm, 16px);
		margin-bottom: var(--ktv-space-lg, 40px);
	}
}

/* Veranstaltungsseite: Spalten-Layout. War zwischenzeitlich ein Float
   (sollte verhindern, dass bei kuerzerem Haupttext rechts Weissraum
   entsteht), aber seit die Platzierungen in die Sidebar gewandert sind
   (siehe weiter unten) kann jetzt auch die SIDEBAR laenger als der
   Haupttext sein -- beim Float haengt sie dann sichtbar unten "frei"
   raus, weil links schon nichts mehr da ist (User-Screenshot). Normales
   Grid (wie auf den Sportarten-Seiten) hat dieses Problem in KEINER
   Richtung: die kuerzere Spalte endet einfach fuer sich, ohne dass ein
   "Rest" der laengeren Spalte seltsam absteht. Nutzt die geteilte
   .ktv-layout-grid-Regel (siehe oben) unveraendert, keine eigene
   Display-Logik mehr noetig -- Sidebar/Main-Reihenfolge im HTML ist
   deshalb auch wieder normal (Hauptinhalt zuerst). */
/* Der 40px-Ausgleich von vorher (fuer buendige Hoehe mit dem ersten
   Haupttext-Abschnitt) ist mit den kompakten Akkordeon-Karten nicht mehr
   noetig -- sah nur wie unerklaerlicher Leerraum ueber der ersten Karte aus.
   Sidebar startet jetzt einfach direkt buendig oben, wie der Haupttext. */
.ktv-veranstaltung-section {
	padding: var(--ktv-space-lg, 40px) 0;
	border-top: 1px solid var(--ktv-border, #ECECEA);
}
.ktv-veranstaltung-section:first-child {
	border-top: none;
}
.ktv-veranstaltung-section.ktv-section-alt {
	background: var(--ktv-bg-alt, #F5F6F5);
	margin: 0 calc(-1 * var(--ktv-space-lg, 40px));
	padding: var(--ktv-space-lg, 40px);
	border-top: none;
	border-radius: var(--ktv-radius, 8px);
}
.ktv-veranstaltung-text {
	line-height: 1.7;
}
.ktv-veranstaltung-back {
	margin-top: var(--ktv-space-lg, 40px);
}
.ktv-dokumente-liste {
	list-style: none;
	margin: var(--ktv-space-sm, 16px) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ktv-dokumente-liste a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--ktv-border, #ECECEA);
	border-radius: var(--ktv-radius, 8px);
	text-decoration: none;
}
.ktv-dokumente-liste a:hover {
	border-color: var(--ktv-blue, #005298);
}
.ktv-doc-size {
	color: var(--ktv-text-muted, #5A6472);
	font-size: 12px;
}
@media (max-width: 600px) {
	.ktv-veranstaltung-content { padding: 0 var(--ktv-space-sm, 16px) var(--ktv-space-lg, 40px); }
	.ktv-veranstaltung-section.ktv-section-alt { margin: 0 calc(-1 * var(--ktv-space-sm, 16px)); padding: var(--ktv-space-md, 24px) var(--ktv-space-sm, 16px); }
}

/* Desktop-Layout Unterseiten: Hauptinhalt / Sidebar (Ansprechpartner,
   Dokumente, alles Ergaenzende). Wird automatisch angewendet, wenn eine Seite
   [ktv_fachwarte] enthaelt bzw. im Veranstaltungs-Template Dokumente/Ergebnisse/
   Ansprechpartner vorhanden sind -- Joshua muss dafuer nichts einstellen.
   Auf Tablet/Handy faellt die Sidebar automatisch unter den Hauptinhalt.
   Design v4 (Nutzerwahl): "Schwebende weisse Karten" -- KEIN umschliessender
   Kasten/Hintergrund mehr. Die Sidebar ist nur noch ein Layout-Container,
   jede Karte traegt ihren eigenen weissen Hintergrund + weichen Schatten und
   "schwebt" mit viel Abstand auf dem Seitenhintergrund. */
.ktv-layout-grid {
	display: grid;
	grid-template-columns: 64% 34%;
	gap: var(--ktv-space-xl, 64px) var(--ktv-space-lg, 40px);
	align-items: start;
	min-width: 0;
}
/* KRITISCH: Grid-Items sind per CSS-Spezifikation standardmaessig
   min-width:auto -- sie weigern sich, unter die eigene Inhalts-
   Mindestbreite zu schrumpfen, SELBST wenn grid-template-columns bei
   max-width:900px auf 1fr steht. Ohne dieses min-width:0 hier wurde die
   ganze Spalte (und damit der komplette Fliesstext) am Handy breiter als
   der Bildschirm, Text lief seitlich ab statt umzubrechen -- vom Nutzer per
   echtem Handy-Screenshot gemeldet und bestaetigt (Gerätturnen-Seite,
   "Was ist LK-Programm"-Abschnitt). Betraf vermutlich jede Seite mit
   Sidebar-Layout, nicht nur diese. */
.ktv-layout-main,
.ktv-layout-sidebar {
	min-width: 0;
}
.ktv-layout-sidebar {
	overflow-wrap: break-word;
	word-break: break-word;
}
.ktv-layout-sidebar h3,
.ktv-layout-sidebar .wp-block-heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--ktv-blue, #005298);
}
.ktv-layout-sidebar > h3,
.ktv-layout-sidebar > .wp-block-heading {
	margin: 0 0 var(--ktv-space-md, 24px);
	text-align: center;
}
/* War 64px, dann 40px -- jetzt wo jeder Abschnitt sein eigenes
   Akkordeon-Kaertchen ist (siehe .ktv-sidebar-accordion weiter unten),
   reicht ein kleiner Stapel-Abstand wie zwischen Listen-Karten, kein
   grosser Section-Abstand mehr noetig. */
.ktv-layout-sidebar > *:not(:first-child) {
	margin-top: 12px;
}
.ktv-layout-sidebar .ktv-card-grid {
	grid-template-columns: 1fr;
	gap: var(--ktv-space-sm, 16px);
}
/* Jede Karte schwebt einzeln: weisser Hintergrund + weicher Schatten statt
   Rahmen/Umriss, damit sie sich vom (weissen) Seitenhintergrund abhebt. Kein
   Foto-Thumbnail bei Terminen in dieser schmalen Spalte (PHP laesst es hier
   ohnehin weg) -- dafuer ein farbiger oberer Akzentstreifen. Text zentriert,
   damit es zur zentrierten Sidebar-Ueberschrift darueber passt (ein linker
   Akzentstreifen + zentrierter Text sah unstimmig aus, deshalb oben statt
   links). */
.ktv-card-compact {
	padding: var(--ktv-space-md, 24px);
	border-top: 3px solid var(--ktv-blue, #005298);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(11, 27, 43, 0.09);
	text-align: center;
}
.ktv-card-compact .ktv-eyebrow {
	margin-bottom: 6px;
}
.ktv-card-compact h3 {
	font-size: 16px;
	margin: 0 0 4px;
	text-align: center !important;
}
.ktv-card-compact .ktv-ort {
	margin: 0;
}
/* War 40px/24px Innenpolster + 104px Foto -- fuer eine Sidebar mit
   mehreren Fachwarten (2+ Karten hintereinander) zu grosszuegig, liess die
   Spalte insgesamt sehr lang werden. Kompakter, ohne die Karte winzig
   wirken zu lassen. */
.ktv-layout-sidebar .ktv-person-card {
	padding: var(--ktv-space-md, 24px) var(--ktv-space-md, 24px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(11, 27, 43, 0.09);
}
.ktv-layout-sidebar .ktv-person-foto img,
.ktv-layout-sidebar .ktv-person-card .ktv-avatar {
	width: 76px;
	height: 76px;
}
.ktv-layout-sidebar .ktv-person-funktion {
	white-space: normal;
	max-width: 100%;
}
/* Innerhalb des neuen Sidebar-Akkordeons (siehe weiter unten) braucht keine
   Karte mehr ihren eigenen weissen Hintergrund/Schatten -- der Akkordeon-
   Rahmen uebernimmt das schon, sonst sieht es wie "Karte in der Karte" aus.
   WICHTIG: .ktv-card selbst setzt schon einen eigenen 1px-Rahmen (aus der
   Additional-CSS) -- den hatte ich beim ersten Versuch vergessen zurueck-
   zusetzen, dadurch blieb ein stehen gebliebener, halb sichtbarer Rahmen um
   jede Karte ("verbugged" wirkendes Artefakt im Screenshot). Jetzt border
   explizit auf none. */
.ktv-sidebar-accordion-body .ktv-card-compact,
.ktv-sidebar-accordion-body .ktv-person-card {
	background: transparent;
	box-shadow: none;
	border: none;
	border-radius: 0;
	padding: var(--ktv-space-md, 24px) 0;
}
.ktv-sidebar-accordion-body .ktv-card-grid > * + * {
	border-top: 1px solid var(--ktv-border, #ECECEA);
}

@media (max-width: 900px) {
	.ktv-layout-grid {
		grid-template-columns: 1fr;
	}
	/* Die Sidebar (Ansprechpartner, Dokumente, Platzierungen, Regelwerk...)
	   soll am Handy auf JEDER Seite mit diesem Layout ÜBER dem Fliesstext
	   stehen statt darunter -- User: "bei allen Seiten, also auch
	   Sportarten-Unterseiten". Vorher nur auf der Veranstaltungsseite,
	   jetzt generell fuer .ktv-layout-grid (Seiten UND Veranstaltungen
	   teilen sich diese Klasse). Grid-Items unterstuetzen "order" genauso
	   wie Flex-Items, DOM-Reihenfolge bleibt fuer Screenreader/SEO
	   unveraendert (nur visuell umsortiert). */
	.ktv-layout-grid .ktv-layout-sidebar {
		order: -1;
	}
}
/* Sprungmarken-Ziele nicht direkt unter einer evtl. fixierten Kopfzeile
   verstecken, wenn per Inhaltsverzeichnis dorthin gesprungen wird. */
.entry-content h3,
.single-content h3 {
	scroll-margin-top: 90px;
}
/* Inhaltsverzeichnis nur am Handy/Tablet: am Desktop steht die Sidebar
   (Ansprechpartner etc.) ohnehin direkt sichtbar daneben. Design v5
   (Nutzerwunsch): schwebender Button statt fest im Textfluss -- war den
   Nutzern als Tab-Leiste "im Weg"/nervig. Der Button bleibt beim Scrollen
   unten rechts sichtbar (position:fixed), ein Klick oeffnet eine kleine
   Karte mit den Sprunglinks daneben (site.js steuert das Ein-/Ausblenden). */
.ktv-toc-fab {
	display: none;
}
.ktv-toc {
	display: none;
}
@media (max-width: 900px) {
	.ktv-toc-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 18px;
		bottom: 18px;
		width: 52px;
		height: 52px;
		border-radius: 50%;
		border: none;
		background: var(--ktv-blue, #005298);
		box-shadow: 0 4px 16px rgba(11, 27, 43, 0.3);
		z-index: 60;
		padding: 0;
		cursor: pointer;
	}
	.ktv-toc-fab-icon {
		display: block;
		width: 20px;
		height: 14px;
		position: relative;
	}
	.ktv-toc-fab-icon:before,
	.ktv-toc-fab-icon:after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		border-radius: 2px;
	}
	.ktv-toc-fab-icon:before {
		top: 0;
	}
	.ktv-toc-fab-icon:after {
		bottom: 0;
	}
	.ktv-toc-fab-icon {
		border-top: none;
	}
	.ktv-toc-fab-icon::before {
		box-shadow: 0 6px 0 #fff;
	}
	.ktv-toc-fab[aria-expanded="true"] {
		background: var(--ktv-dark, #0B1B2B);
	}
	.ktv-toc {
		display: block;
		position: fixed;
		right: 18px;
		bottom: 80px;
		z-index: 60;
		width: min(280px, calc(100vw - 36px));
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 8px 30px rgba(11, 27, 43, 0.25);
		padding: var(--ktv-space-md, 24px);
		animation: ktv-toc-in 0.15s ease-out;
	}
	.ktv-toc[hidden] {
		display: none;
	}
	.ktv-toc-label {
		margin: 0 0 10px;
		font-family: var(--ktv-font-heading, inherit);
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--ktv-text-muted, #767671);
	}
	.ktv-toc ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	.ktv-toc li + li {
		border-top: 1px solid var(--ktv-border, #ECECEA);
	}
	.ktv-toc a {
		display: block;
		padding: 11px 4px;
		font-family: var(--ktv-font-heading, inherit);
		font-weight: 700;
		font-size: 14px;
		color: var(--ktv-text, #1a1a1a);
		text-decoration: none;
	}
	.ktv-toc a:active {
		color: var(--ktv-blue, #005298);
	}
}
@keyframes ktv-toc-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Einheitliches Akkordeon fuer ALLE Sidebar-Abschnitte (Platzierungen,
   Dokumente, Ergebnisse, Ansprechpartner, Termine -- ueberall wo eine 30%-
   Sidebar vorkommt, egal auf welcher Seite). Standardmaessig zugeklappt
   (kein "open"-Attribut im PHP), damit die Sidebar-Laenge NICHT mehr vom
   Inhalt jedes einzelnen Abschnitts abhaengt, sondern immer gleich kurz und
   vorhersehbar bleibt -- jeder Abschnitt einzeln bei Bedarf aufklappbar.
   Loest den wiederkehrenden "Sidebar haengt laenger als der Haupttext raus"
   Beschwerdepunkt strukturell statt durch immer weiteres Kompaktieren. */
.ktv-sidebar-accordion {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(11, 27, 43, 0.09);
	overflow: hidden;
}
.ktv-sidebar-accordion-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 14px;
	color: var(--ktv-text, #1a1a1a);
	transition: background 0.15s ease;
}
.ktv-sidebar-accordion-header:hover {
	background: var(--ktv-bg-alt, #F5F6F5);
}
.ktv-sidebar-accordion-header::-webkit-details-marker {
	display: none;
}
.ktv-sidebar-accordion-label {
	flex: 1 1 auto;
}
.ktv-sidebar-accordion-chevron {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--ktv-blue, #005298);
}
.ktv-sidebar-accordion-chevron:before {
	content: "▾";
	display: block;
	transition: transform 0.25s ease;
}
.ktv-sidebar-accordion[open] .ktv-sidebar-accordion-chevron:before {
	transform: rotate(180deg);
}
/*
 * Sanftes Ausfahren/Einfahren (User: "mehr Animationen beim Ausfahren...
 * beim Einfahren abrupt"). Ein reiner CSS-Trick (grid-template-rows
 * 0fr->1fr) wurde ausprobiert, aber live im Browser per JS gemessen: bei
 * "auto"-Container-Hoehe hat der Browser keine "freie Flaeche" zum
 * Verteilen ueber fr-Einheiten, dadurch kollabierte der Inhalt auch im
 * OFFENEN Zustand auf die reine Padding-Hoehe (Inhalt unsichtbar). Deshalb
 * jetzt die bewaehrte JS-Variante (site.js): Web-Animations-API animiert
 * die tatsaechliche Pixel-Hoehe des <details>-Elements zwischen Start-
 * und Ziel-Hoehe, in beide Richtungen gleich behandelt. <details>
 * bleibt semantisch/tastatur-bedienbar, JS greift nur den Klick auf die
 * Summary ab und steuert das "open"-Attribut selbst zeitversetzt zum
 * Animationsende (siehe site.js).
 */
.ktv-sidebar-accordion-body-inner {
	padding: 16px 20px 20px;
	border-top: 1px solid var(--ktv-border, #ECECEA);
}
/* Leichteres Listen-Design statt einzeln beschatteter Karten pro Zeile --
   die Platzierungen sitzen jetzt in der schmalen Sidebar zwischen Dokumenten
   und Ansprechpartner, das "Kartenstapel"-Design von vorher (fuer die
   breite Hauptspalte gedacht) wirkte dort "ueberladen". Einfache Liste mit
   duenner Trennlinie, kleinere Schrift/Abzeichen. Das Abzeichen ist jetzt
   eine Pille mit min-width statt eines starren Kreises -- verhindert, dass
   laengere Platz-Texte wie "LM-Quali" ueberlaufen/abgeschnitten werden
   (echter Bug: "7. (von 8)" lief vorher aus dem runden Abzeichen raus). */
.ktv-platzierungen-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ktv-platzierungen-liste li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ktv-border, #ECECEA);
}
.ktv-platzierungen-liste li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.ktv-platzierungen-liste li:first-child {
	padding-top: 0;
}
.ktv-platz-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 24px;
	padding: 0 7px;
	border-radius: var(--ktv-radius-pill, 999px);
	background: var(--ktv-blue, #005298);
	color: #fff;
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 800;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}
.ktv-platz-badge.ktv-platz-gold {
	background: linear-gradient(135deg, #f5d67d, #c9932b);
	color: #4a3200;
}
.ktv-platz-badge.ktv-platz-silber {
	background: linear-gradient(135deg, #eef0f1, #b7bac0);
	color: #3a3a3a;
}
.ktv-platz-badge.ktv-platz-bronze {
	background: linear-gradient(135deg, #e3a06b, #9c5a28);
	color: #3a1c00;
}
.ktv-platz-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.ktv-platz-name {
	font-family: var(--ktv-font-heading, inherit);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.3;
}
.ktv-platz-meta {
	color: var(--ktv-text-muted, #767671);
	font-size: 11px;
	line-height: 1.3;
}
/* Platzierungen sind jetzt beim Laden direkt sichtbar (nicht mehr
   eingeklappt) -- die Top-3 bekommen deshalb einen dezenten Hintergrund-
   Streifen, damit sie auf den ersten Blick auffallen statt in einer
   gleichfoermigen Liste unterzugehen. Kein zusaetzlicher Kartenrahmen/
   Schatten (das wirkte laut Nutzer-Feedback vorher "ueberladen") -- nur ein
   flacher, farblich passender Tonwert. */
.ktv-platzierung-row {
	border-radius: 8px;
}
.ktv-platzierung-row.ktv-platz-gold,
.ktv-platzierung-row.ktv-platz-silber,
.ktv-platzierung-row.ktv-platz-bronze {
	margin: 0 -10px;
	padding: 9px 10px;
	background: var(--ktv-bg-alt, #F5F6F5);
}
.ktv-platzierung-row.ktv-platz-gold:first-child,
.ktv-platzierung-row.ktv-platz-silber:first-child,
.ktv-platzierung-row.ktv-platz-bronze:first-child {
	padding-top: 9px;
}
@media (max-width: 600px) {
	.ktv-platzierungen {
		padding: var(--ktv-space-sm, 16px);
	}
}

/* Hero (Startseite) auf dem Handy kompakter: die Grundwerte aus der
   Additional-CSS-Datei (Padding 40/24px, Eyebrow 11px, H1 32px) wirken auf
   einem echten schmalen Telefon zusammen trotzdem sperrig -- engere
   Abstaende und minimal kleinere Schrift halten den dunkelblauen Kasten
   kompakter, ohne die Lesbarkeit zu beeintraechtigen. !important noetig,
   da die Basis-Regeln in der Customizer-"Additional CSS" liegen und deren
   Ladereihenfolge relativ zu diesem Stylesheet nicht zuverlaessig ist
   (siehe .entry-header-Fix weiter oben, gleiches Problem). */
@media (max-width: 600px) {
	.ktv-hero {
		padding: var(--ktv-space-lg, 40px) var(--ktv-space-sm, 16px) !important;
	}
	.ktv-hero .ktv-eyebrow.on-dark {
		font-size: 10px !important;
		letter-spacing: 0.03em !important;
	}
	.ktv-hero h1 {
		font-size: 28px !important;
		margin-top: 8px !important;
	}
	.ktv-hero p {
		font-size: 15px !important;
	}
	.ktv-hero .wp-block-buttons {
		gap: 8px !important;
	}
	.ktv-hero .wp-block-button__link {
		padding: 10px 20px !important;
	}
}

/* Mobile Header: Name bleibt fuer Screenreader erhalten, ist visuell aber
   ausgeblendet -- nur das Logo bleibt sichtbar (Nutzer-Vorgabe nach echtem
   Handy-Screenshot). Logo bekommt zusaetzlich eine feste Maximalbreite, da
   das "sizes"-Attribut es sonst auf fast Bildschirmbreite skaliert und
   dadurch Header/Menu-Button auf dem Handy unbedienbar macht. */
@media (max-width: 1024px) {
	.site-title-wrap {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
	a.brand img.custom-logo {
		width: auto;
		height: auto;
		max-width: 130px;
		max-height: 60px;
	}
}