/*
Theme Name: Karate-Do Trier
Theme URI: https://karate-trier.de
Author: PortaWerk
Author URI: https://portawerk.de
Description: Block-Theme fuer Karate-Do und Selbstverteidigung Trier e.V. Gestaltung und Tokens stammen aus dem Astro-Projekt karate-app-v2. Saemtliche Gestaltung liegt in theme.json; diese Datei enthaelt nur das, was theme.json nicht ausdruecken kann.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
Version: 0.89.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karate-do
Tags: block-theme, full-site-editing, one-column
*/

/* ---------------------------------------------------------------------------
   Diese Datei ist bewusst kurz. Farben, Schriften, Abstaende und Breiten
   stehen ausschliesslich in theme.json. Hier steht nur, was der Block-Editor
   von Haus aus nicht kann: die diagonale Flaeche im Kopfbereich, das
   Vereinslogo im Kopfbereich und die Ziffer auf den Angebotskarten.
   --------------------------------------------------------------------------- */

/* --- Kopfbereich: diagonale weisse Flaeche ------------------------------- */

.k-hero {
	position: relative;
	overflow: hidden;
	/* Volle Schirmhoehe, nicht 90 Prozent. Bei 90vh lugte das dunkle
	   Vertrauensband darunter schon ins Bild -- im Entwurf steht dort nichts
	   als der Kopfbereich. svh statt vh, weil auf dem Telefon sonst die
	   ein- und ausfahrende Adressleiste die Hoehe springen laesst. */
	min-height: 100svh;
	display: flex;
	align-items: center;
	isolation: isolate;
	background: radial-gradient(circle at 40% 50%, var(--wp--preset--color--navy-light) 0%, var(--wp--preset--color--navy) 70%);
	/* Luft ueber der Google-Bewertung. Der Entwurf setzt den Textblock
	   deutlich tiefer an als die Leiste hoch ist. */
	padding-top: clamp(7rem, 13vh, 10rem) !important;
}

/* Die weisse Flaeche. Sie liegt ueber dem Bild und schneidet es diagonal
   ab -- deshalb braucht das Bild selbst keinen Zuschnitt. */
.k-hero::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0 auto 0 0;
	width: 70%;
	background: var(--wp--preset--color--white);
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}

/* Kein position hier: das Logo wird absolut gesetzt und braucht den
   Kopfbereich als Bezug, nicht die Spalten -- die sind auf die Inhaltsbreite
   von 1440px begrenzt, die weisse Flaeche dagegen ist fensterbreit. Ohne das
   liefen die beiden Kanten auseinander. Die Reihenfolge stimmt trotzdem: die
   Flaeche liegt auf z-index -2, das Logo auf -1, der Inhalt darueber. */
.k-hero > * {
	width: 100%;
}

/* Sternchenzeile: die Sterne selbst sind Zeichen, nur die Farbe kommt hierher */
.k-hero .k-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.k-hero .k-rating .k-stars {
	color: var(--wp--preset--color--orange);
	letter-spacing: 0.1em;
}

/* Trennlinie ueber den Kennzahlen. Die Spalten sind nur so breit wie ihr
   Inhalt -- der Block-Editor kennt dafuer keine Einstellung. */
.k-hero .k-stats {
	border-top: 1px solid rgba(16, 26, 45, 0.08);
	padding-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--60);
}

.k-hero .k-stats .wp-block-column {
	flex: 0 0 auto;
}

/* Pfeil an den Knoepfen, wie im Astro-Original */
.k-hero .wp-block-button__link::after {
	content: "→";
	margin-left: 0.7em;
	opacity: 0.55;
}

/* --- Kopfbereich: Bild auf der dunklen Haelfte ---------------------------

   Aufbau in drei Ebenen, alle im selben Stapel von .k-hero:

     z-index -3  das Bild, deckt den ganzen Kopfbereich
     z-index -2  die weisse Flaeche, schneidet das Bild links diagonal ab
     normal      Text und Knoepfe

   Das Bild braucht dadurch keinen eigenen Zuschnitt: die weisse Flaeche
   verdeckt einfach seine linke Haelfte. Die Schraege entspricht wieder der
   Astro-Vorlage -- die steilere Neigung gab es nur, solange der Logo-Strich
   darauf fluchten musste. */

.k-hero__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Die Guertel sitzen in der linken Bildhaelfte, deshalb der Ausschnitt
	   weit links -- rechts steht nur der unscharfe Hintergrund. */
	object-position: 12% center;
}

@media (min-width: 782px) {
	/* Das Bild deckt nur die rechte Flaeche, nicht den ganzen Kopfbereich.
	   Deckte es alles, laege der sichtbare Teil am aeussersten rechten Rand
	   des Motivs -- und das ist beim Guertelbild der unscharfe Hintergrund.
	   Die 45 Prozent reichen bis unter die Schraege, dort verdeckt sie die
	   weisse Flaeche. Beide Masse sind Prozent der Fensterbreite, das
	   Verhaeltnis bleibt also auf jeder Groesse gleich. */
	.k-hero__figure .wp-block-image {
		position: absolute;
		z-index: -3;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 45%;
		height: auto;
		margin: 0;
		overflow: hidden;
	}

	/* Toenung: das Foto ist hell, ohne diese Schicht traegt der Kopfbereich
	   seine Farbigkeit nicht mehr und die weisse Haelfte verliert ihren
	   Kontrast. Der Verlauf laeuft von der Schraege nach rechts aus. */
	.k-hero__figure .wp-block-image::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			100deg,
			rgba(16, 26, 45, 0.94) 0%,
			rgba(16, 26, 45, 0.86) 50%,
			rgba(30, 58, 138, 0.68) 100%
		);
	}
}

@media (max-width: 781px) {
	.k-hero {
		min-height: 0;
	}
	/* Auf dem Handy gibt es keine Schraege: die weisse Flaeche laeuft ueber
	   die ganze Breite, sonst schneidet die Diagonale durch den Text. */
	.k-hero::before {
		width: 100%;
		clip-path: none;
	}
	/* Text und Bild stehen untereinander, das Bild als ruhiges Band. */
	.k-hero__figure .wp-block-image {
		position: relative;
		margin: 0;
		overflow: hidden;
		border-radius: 8px;
	}
	.k-hero__figure img {
		height: 220px;
	}
	.k-hero__figure .wp-block-image::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			100deg,
			rgba(16, 26, 45, 0.72) 0%,
			rgba(30, 58, 138, 0.5) 100%
		);
	}
	/* Die Kennzahlen bleiben auch auf dem Handy nebeneinander */
	.k-hero .k-stats.wp-block-columns {
		flex-wrap: nowrap;
	}
	.k-hero .k-stats .wp-block-column {
		flex-basis: auto !important;
	}
}


/* --- Angebotskarten ------------------------------------------------------ */

/* Der Inhalt einer Karte fuellt sie ganz aus: Ziffer oben, Text unten.
   Ohne das haengt der Inhaltsbereich nur unten am Bildrand. */
.k-card.wp-block-cover {
	align-items: stretch;
}

.k-card .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Der Abstand kommt von der Karte selbst, nicht zusaetzlich von hier */
	padding-left: 0;
	padding-right: 0;
}

/* WordPress zentriert Bloecke in einem eingegrenzten Layout ueber
   automatische Seitenabstaende. Im Flex-Kasten wuerde das den Text mittig
   setzen, deshalb hier zuruecknehmen. */
.k-card .wp-block-cover__inner-container > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Die durchscheinende Ziffer oben rechts. Der automatische Abstand nach
   unten schiebt Label und Ueberschrift an den unteren Rand. */
.k-card .k-num {
	align-self: flex-end;
	margin: 0 0 auto;
	opacity: 0.22;
	pointer-events: none;
}

/* Labelzeile auf der Karte ist im Ruhezustand zurueckgenommen */
.k-card .k-label {
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.k-card:hover .k-label {
	opacity: 1;
}

/* Akzentfarbe pro Disziplin beim Ueberfahren.
   Die Farbklassen von WordPress setzen !important, daher hier ebenfalls. */
.k-card--blue:hover .wp-block-heading,
.k-card--blue:hover .k-label {
	color: var(--wp--preset--color--blue) !important;
}

.k-card--defense:hover .wp-block-heading,
.k-card--defense:hover .k-label {
	color: var(--wp--preset--color--defense) !important;
}

.k-card--orange:hover .wp-block-heading,
.k-card--orange:hover .k-label {
	color: var(--wp--preset--color--orange) !important;
}

.k-card--health:hover .wp-block-heading,
.k-card--health:hover .k-label {
	color: var(--wp--preset--color--health) !important;
}

/* --- Disziplinen: Umschalter und Textkarten ------------------------------

   Zweite Fassung der Disziplinen ohne Bilder, umschaltbar. Solange das
   Skript nicht laeuft, stehen beide Fassungen untereinander -- niemand
   sieht eine leere Flaeche. Erst is-geschaltet blendet um. */

.k-varianten__knopf {
	cursor: pointer;
	color: var(--wp--preset--color--gray-200);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	user-select: none;
}

.k-varianten__knopf:hover {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--white);
}

.k-varianten__knopf.is-aktiv {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.k-varianten.is-geschaltet .k-varianten__gruppe {
	display: none;
}

.k-varianten.is-geschaltet .k-varianten__gruppe.is-aktiv {
	display: block;
}

/* Eine Textkarte. Sie traegt dieselbe Ordnung wie die Bildkarte -- Ziffer,
   Sparte, Titel, Verweis -- nur ohne Bild, dafuer mit einem Satz Text. */
.k-textkarte {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.k-textkarte::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--k-akzent, var(--wp--preset--color--blue));
}

.k-textkarte:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.24);
	transform: translateY(-4px);
}

/* Die Ziffer traegt die Akzentfarbe, das schafft den Bezug zur Bildfassung */
.k-textkarte .k-num {
	color: var(--k-akzent, var(--wp--preset--color--blue));
	line-height: 1;
}

.k-textkarte .k-label {
	color: var(--k-akzent, var(--wp--preset--color--blue));
	opacity: 0.85;
}

/* In der Karte steht alles auf der linken Kante, nur das Symbol sitzt ganz
   rechts.

   Das braucht mehr als text-align: WordPress gibt im constrained-Layout
   jedem Kind margin-left/right: auto mit !important. In der Flex-Spalte der
   Karte schrumpft das jedes Element auf seine Inhaltsbreite und zentriert es
   -- nur der Fliesstext blieb links, weil er die Breite ohnehin ausfuellt.
   Genau dieses halb zentrierte Bild entsteht ohne die Ruecksetzung hier. */
.k-textkarte > * {
	margin-inline: 0 !important;
	max-width: none;
	width: 100%;
	text-align: left;
}

/* Ziffer links, Symbol am rechten Rand. Im Markup steht das Symbol zuerst,
   order dreht die Anzeige -- so bleibt die Vorlesereihenfolge Symbol, Ziffer. */
.k-textkarte__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.k-textkarte__symbol {
	order: 2;
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
}

/* Die Sparte steht immer auf derselben Hoehe. Ohne die feste Hoehe rutscht
   alles darunter, sobald eine laengere Sparte wie "Tai Chi & Qi Gong"
   in zwei Zeilen umbricht -- dann steht eine Karte tiefer als die anderen. */
.k-textkarte .k-label {
	min-height: 2.4em;
}

/* Der Titel traegt die Karte, deshalb steht er ueber der Ziffer. Etwas
   kleiner als auf der Bildkarte, dort hat er die ganze Flaeche fuer sich. */
.k-textkarte .wp-block-heading {
	font-size: clamp(1.35rem, 11cqi, 2rem) !important;
	line-height: 1.1;
}

.k-textkarte .k-num {
	font-size: 1.5rem !important;
	opacity: 0.9;
}

/* Der Verweis sitzt unten, damit alle Karten gleich hoch wirken */
.k-textkarte .k-angebot__mehr {
	margin-top: auto !important;
}

.k-textkarte--blue    { --k-akzent: var(--wp--preset--color--blue); }
.k-textkarte--defense { --k-akzent: var(--wp--preset--color--defense); }
.k-textkarte--orange  { --k-akzent: var(--wp--preset--color--orange); }
.k-textkarte--health  { --k-akzent: var(--wp--preset--color--health); }

/* Bildausschnitt je Disziplin, wie im Astro-Original */
.k-card--blue .wp-block-cover__image-background,
.k-card--defense .wp-block-cover__image-background {
	object-position: center 20%;
}

.k-card--orange .wp-block-cover__image-background {
	object-position: center 30%;
}

.k-card--health .wp-block-cover__image-background {
	object-position: 70% 20%;
}

/* Leichter Zoom auf dem Bild, wie im Astro-Original */
.k-card .wp-block-cover__image-background {
	transition: transform 0.5s ease-out;
}

.k-card:hover .wp-block-cover__image-background {
	transform: scale(1.03);
}

/* Ziffer tritt beim Ueberfahren staerker hervor */
.k-card:hover .k-num {
	opacity: 0.5;
}

.k-card .k-num {
	transition: opacity 0.3s ease;
}

/* Sekundaerer Knopf: Rahmen statt Flaeche, Hover in Orange */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
}


/* --- Preiskarten --------------------------------------------------------- */

.k-price {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 520px;
	/* WordPress gibt Gruppen mit Hintergrundfarbe von sich aus 1.25em
	   Innenabstand. Die Karte bringt ihre Abstaende selbst mit. */
	padding: 0;
	border: 1px solid var(--wp--preset--color--gray-200);
	box-shadow: 0 10px 15px -3px rgba(16, 26, 45, 0.08);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k-price:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px -15px rgba(30, 58, 138, 0.2);
}

/* Die hervorgehobene Karte steht groesser und traegt einen dunklen Kopf */
.k-price--featured {
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
	transform: scale(1.04);
	z-index: 2;
}

.k-price--featured:hover {
	transform: scale(1.06) translateY(-4px);
}

/* Beim hervorgehobenen Tarif liegt hinter Name und Beschreibung ein navy
   Balken, der bis an die Kartenraender laeuft. Die negativen Aussenabstaende
   heben die Innenabstaende des Kopfbereichs auf. */
.k-price--featured .k-price__banner {
	background: var(--wp--preset--color--navy);
	margin-top: calc(var(--wp--preset--spacing--70) * -1);
	/* !important, weil das eingegrenzte Layout von WordPress hier sonst
	   margin-left/right: auto erzwingt und der Balken nicht ausbricht. */
	margin-left: calc(var(--wp--preset--spacing--50) * -1) !important;
	margin-right: calc(var(--wp--preset--spacing--50) * -1) !important;
	/* Sonst deckelt das eingegrenzte Layout die Breite auf den Textbereich */
	max-width: none !important;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* Alle Kartenkoepfe gleich hoch, damit Preis und Knopf auf einer Linie stehen */
.k-price__banner {
	min-height: 6.75rem;
}

/* Aufkleber oben rechts */
.k-price__badge {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	padding: 0.6rem 1rem;
	z-index: 3;
}

/* Der untere Teil fuellt die Karte, damit alle Karten gleich hoch sind */
.k-price__body {
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

/* Preis und Zeitraum stehen auf einer Grundlinie und brechen nie um */
.k-price__row {
	gap: 0.5rem;
}

.k-price__row > * {
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Lange Einzelwoerter wie "Selbstschutz" werden getrennt statt abgeschnitten.
   Setzt voraus, dass die Seite als deutsch ausgezeichnet ist (lang="de-DE"). */
.k-price h3 {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}

.k-price .k-label {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Der Knopf fuellt die Karte und bleibt einzeilig. Die seitlichen Abstaende
   aus theme.json wuerden den Text sonst umbrechen. */
.k-price .wp-block-button__link {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	white-space: nowrap;
}

/* Merkmalsliste mit gruenem Haken statt Aufzaehlungspunkt */
.k-checks {
	list-style: none;
	padding-left: 0;
}

.k-checks li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
	font-weight: 700;
	line-height: 1.4;
}

.k-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--health);
	color: var(--wp--preset--color--navy);
	font-size: 0.7rem;
	line-height: 1rem;
	text-align: center;
	font-weight: 900;
}

/* Aufklappbare Einmalkosten -- der Core-Block "Details" bringt die Mechanik mit */
.k-price__fees {
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: var(--wp--preset--spacing--30);
}

/* Pfeil rechts statt Dreieck links, wie im Astro-Original */
.k-price__fees summary {
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--navy);
	opacity: 0.7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
}

.k-price__fees summary::-webkit-details-marker {
	display: none;
}

.k-price__fees summary::after {
	content: "⌄";
	font-size: 1.1em;
	line-height: 1;
	transform: translateY(-0.2em);
	transition: transform 0.3s ease;
}

.k-price__fees[open] summary::after {
	transform: translateY(0.1em) rotate(180deg);
}

.k-price__fees summary:hover {
	opacity: 1;
}

.k-price__fees ul {
	list-style: none;
	padding-left: 0;
	margin-top: var(--wp--preset--spacing--30);
}

.k-price__fees li {
	margin-bottom: 0.4rem;
}

/* Zweitlink unter dem Knopf */
.k-price__link a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.k-price__link a::before {
	content: "→";
	margin-right: 0.5em;
	text-decoration: none;
	display: inline-block;
}

/* Umschalter Karate / Gesundheit. Im Astro ist das ein echter Schalter,
   hier steht er als Abbild -- der Block-Editor kennt keine Reiter. */
.k-toggle.wp-block-buttons {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--wp--preset--color--gray-200);
	background: var(--wp--preset--color--gray-200);
	padding: 4px;
}

.k-toggle .wp-block-button__link {
	padding: 0.65rem 1.5rem;
}



/* --- Navigation ---------------------------------------------------------- */

/* Die Leiste bleibt beim Scrollen oben stehen und ist immer weiss hinterlegt.
   Sie schwebt ueber dem Inhalt (fixed), damit der Kopfbereich mit seinem Bild
   bis an den oberen Seitenrand reicht und dahinter durchlaeuft. Die fruehere
   scrollgesteuerte Animation von durchsichtig auf weiss ist damit hinfaellig. */
.k-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
}

/* Der Inhalt der Leiste war auf 1440px eingegrenzt und ruckte damit von den
   Raendern ab. Oben soll er ueber die ganze Breite laufen. */
.k-nav > .wp-block-group,
.k-nav > * {
	max-width: none !important;
}

/* Fuer angemeldete Benutzer sitzt oben die Adminleiste von WordPress */
.admin-bar .k-nav {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .k-nav {
		top: 46px;
	}
}

/* Unter 600px scrollt die Adminleiste mit weg (WordPress setzt sie dort auf
   position: absolute). Ein Abstand von 46px liesse dann eine Luecke, durch
   die der Inhalt scheint (18.10.2026, nur fuer Angemeldete sichtbar). */
@media (max-width: 600px) {
	.admin-bar .k-nav {
		top: 0;
	}
}

/*
 * Das Menue steht in der Mitte des Fensters, nicht in der Mitte zwischen
 * Zeichen und Knoepfen. Beide Seiten bekommen gleich viel Raum, dann liegt
 * die Mitte des Menues auf der Mitte der Seite -- dort, wo auch die
 * Ueberschriften der Seitenkoepfe stehen. Reicht der Platz nicht (1440er
 * Schirm), gibt die schmalere Seite nach und das Menue rueckt etwas nach
 * links; ueberdecken tut sich nichts.
 */
@media (min-width: 782px) {
	.k-nav__marke,
	.k-nav__aktionen {
		flex: 1 1 0;
	}
	.k-nav__aktionen {
		justify-content: flex-end;
	}
}

.k-logo {
	margin: 0 !important;
	line-height: 0;
}

.k-logo img {
	display: block;
	height: 40px;
	width: auto;
}

/* Im Fussbereich steht das Logo auf Dunkel, also weiss einfaerben */
.k-logo--hell img {
	filter: brightness(0) invert(1);
}

.k-nav__sub {
	font-weight: 400;
	opacity: 0.6;
}

/*
 * Der Vereinsname neben dem Zeichen fuehrt auf die Startseite, wie das Zeichen
 * selbst. Er soll dabei nicht wie ein Verweis aussehen -- keine Unterstreichung,
 * keine eigene Farbe. Die allgemeine Regel fuer Verweise in der Leiste
 * (Zeichenabstand beim Ueberfahren) gilt hier ebenfalls nicht, der Name wuerde
 * sonst die Leiste auseinanderschieben.
 */
.k-nav__name a {
	color: inherit;
	text-decoration: none;
	letter-spacing: inherit !important;
	display: inline-block;
}

.k-nav__name a:hover {
	color: inherit;
	opacity: 0.75;
	letter-spacing: inherit !important;
}

.k-nav__name a::after {
	display: none;
}

/* --- Navigationsleiste: Verhalten wie im Astro-Entwurf -------------------- */

/*
 * Drei Dinge machen den Unterschied, und alle drei standen bisher nicht drin:
 *
 * 1. Beim Ueberfahren wird der Zeichenabstand weiter (0.1em). Der Punkt zieht
 *    sich sichtbar in die Laenge. Dass die Nachbarn dabei ein Stueck wandern,
 *    ist gewollt -- der Entwurf macht es genauso.
 * 2. Ein Strich waechst von links unter dem Punkt heraus.
 * 3. Das Untermenue ist eine weisse Karte mit Schatten, die sanft einblendet,
 *    nicht die schlichte Liste von WordPress.
 *
 * Werte aus Navbar.tsx: tracking-[0.1em], duration-300, w-60 (15rem),
 * px-6 py-3 fuer die Eintraege, border-l-2 beim Ueberfahren.
 */
.k-nav__menu a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	position: relative;
	display: inline-block;
	/* Tailwinds Standardkurve fuer `transition-all duration-300`. Mit dem
	   voreingestellten `ease` setzt die Bewegung haerter ein und der
	   Zeichenabstand springt eher, als dass er waechst. */
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            letter-spacing 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.k-nav__menu a:hover {
	color: var(--wp--preset--color--blue);
	letter-spacing: 0.1em;
}

/* Der Strich unter dem Punkt. transform statt width, damit er waechst und
   nicht ruckt. */
.k-nav__menu .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.k-nav__menu .wp-block-navigation-item > a:hover::after,
.k-nav__menu .wp-block-navigation-item.current-menu-item > a::after,
.k-nav__menu .wp-block-navigation-item.has-child:hover > a::after,
.k-nav__menu .wp-block-navigation-item.has-child:focus-within > a::after {
	transform: scaleX(1);
}

/*
 * Bei Punkten mit Untermenue haengt die Hervorhebung am Listenpunkt, nicht am
 * Link. Sonst verliert "Angebot" seinen Strich und seinen Zeichenabstand in
 * dem Moment, in dem der Zeiger nach unten ins aufgeklappte Feld wandert --
 * der Punkt zuckt zurueck, obwohl das Menue noch offen steht.
 *
 * Der Listenpunkt umfasst das Untermenue, also bleibt sein :hover bestehen,
 * solange man sich darin bewegt.
 */
.k-nav__menu .wp-block-navigation-item.has-child:hover > a,
.k-nav__menu .wp-block-navigation-item.has-child:focus-within > a {
	color: var(--wp--preset--color--blue);
	letter-spacing: 0.1em;
}

/*
 * Der kleine Pfeil neben "Angebot" und "Verein". WordPress gibt das Zeichen
 * als SVG ohne eigene Farbe aus, es bliebe damit schwarz. Mit currentColor
 * folgt es dem Text -- weiss ueber dem dunklen Seitenkopf, navy auf weiss.
 */
.k-nav__menu .wp-block-navigation__submenu-icon svg,
.k-nav__menu .wp-block-navigation__submenu-icon svg path {
	fill: currentColor;
}

/* Der Punkt "Kids" traegt Orange statt Blau, wie im Entwurf. */
.k-nav__menu .wp-block-navigation-item a[href*="kids"]:hover {
	color: var(--wp--preset--color--orange);
}

.k-nav__menu .wp-block-navigation-item a[href*="kids"]::after {
	background: var(--wp--preset--color--orange);
}

/* --- Das aufklappende Untermenue ----------------------------------------- */

.k-nav__menu .wp-block-navigation-item.has-child {
	position: relative;
}

.k-nav__menu .wp-block-navigation__submenu-container {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(0.25rem);
	width: 15rem;
	min-width: 15rem;
	margin-top: 0.5rem;
	padding: 0.5rem 0;
	/* !important, weil der Navigationsblock ueber overlayBackgroundColor die
	   Klassen has-navy-background-color und has-white-color mitbringt -- und
	   WordPress gibt die mit !important aus. Die Einstellung bleibt trotzdem
	   noetig: sie faerbt das Menue auf dem Telefon, das navy sein soll. */
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--gray-600) !important;
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 0;
	box-shadow: 0 20px 40px rgba(16, 26, 45, 0.14);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 60;
}

/*
 * Die Bruecke ueber die Luecke. Zwischen dem Menuepunkt und dem weissen Kasten
 * liegen 0.5rem Abstand -- fuehrt man die Maus hinunter, ist fuer einen Moment
 * weder das eine noch das andere ueberfahren, und das Menue klappt wieder zu.
 * Das fuehlt sich hakelig an und trifft man nur mit einer ruhigen Hand.
 *
 * Dieses durchsichtige Feld schliesst die Luecke. Es gehoert zum Untermenue,
 * also gilt der Zeiger darauf als "im Menue".
 *
 * Der Astro-Entwurf loest es genauso: dort traegt der aeussere Rahmen ein
 * pt-2, der weisse Kasten sitzt darin.
 */
.k-nav__menu .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.75rem;
	height: 0.75rem;
}

.k-nav__menu .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.k-nav__menu .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(0);
}

/* Die Eintraege im Untermenue. Der linke Strich erscheint beim Ueberfahren --
   deshalb ist er immer da, nur durchsichtig, sonst wandert der Text. */
.k-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.75rem 1.5rem !important;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--gray-600) !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Zeichenabstand und Strich gelten nur fuer die oberste Ebene. */
.k-nav__menu .wp-block-navigation__submenu-container a:hover {
	letter-spacing: normal;
	background: rgba(122, 181, 255, 0.08);
	color: var(--wp--preset--color--blue) !important;
	border-left-color: var(--wp--preset--color--blue);
}

.k-nav__menu .wp-block-navigation__submenu-container a::after {
	display: none;
}

/* Der Pfeil dreht sich, solange das Menue offen steht. */
.k-nav__menu .wp-block-navigation__submenu-icon {
	transition: transform 0.2s ease;
}

.k-nav__menu .wp-block-navigation-item.has-child:hover > a .wp-block-navigation__submenu-icon,
.k-nav__menu .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* Ueber einem dunklen Seitenkopf steht die Leiste durchsichtig. Das
   Untermenue bleibt trotzdem eine weisse Karte -- sonst waere es unlesbar. */
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu .wp-block-navigation__submenu-container a {
	color: var(--wp--preset--color--gray-600) !important;
}

/* Der Knopf in der Leiste ist kompakter als die Knoepfe im Inhalt */
.k-nav__cta .wp-block-button__link {
	padding: 0.85rem 1.6rem;
	font-size: var(--wp--preset--font-size--x-small);
}


.k-nav__social .k-icon img {
	/* Voll deckend in beiden Zustaenden. Die frueheren 0.6 sollten die
	   Symbole hinter dem Menue zuruecknehmen, liessen sie aber auf Weiss
	   verwaschen aussehen. */
	opacity: 1;
	transition: opacity 0.2s ease;
}

.k-nav__social .k-icon:hover img {
	opacity: 1;
}

.k-logo {
	flex: 0 0 auto;
}

/* Unterhalb der grossen Ansicht bleiben nur Logo und Menuknopf stehen */
@media (max-width: 1099px) {
	/* !important, weil die Layout-Klassen von WordPress display:flex
	   mit hoeherer Gewichtung setzen */
	.k-nav__social,
	.k-nav__cta,
	.k-nav__zweitcta {
		display: none !important;
	}

	.k-nav__marke {
		min-width: 0;
	}

	.k-nav__name {
		font-size: 0.65rem;
	}
}

/* Die Leiste liegt fest oben, der Kopfbereich braucht darunter Luft */
@media (max-width: 781px) {
	.k-hero .wp-block-columns {
		padding-top: 3.5rem;
	}
}

/* Das ausgeklappte Menue auf dem Handy: grosse Schrift, links buendig,
   wie im Astro-Original. Farben kommen aus den Blockeinstellungen.
   WordPress zentriert das Menue mit gleicher Gewichtung, daher !important. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: 5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
	gap: 0.25rem;
}

/* Auch die Eintraege mit Unterebene stehen links, nicht mittig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 1.6rem;
}

/* Die Eintraege der Unterebene bleiben klein und zurueckgenommen */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 700;
	opacity: 0.55;
	padding-left: 1rem;
}

/*
 * Kontaktseite: Die Schlagzeile ist dort die erste Ueberschrift der Seite
 * und bekam die Groesse einer h1 -- "PROBETRAINING?" brach in der 42-Prozent-
 * Spalte mitten im Wort. Eine Stufe kleiner und in der Schreibweise des
 * gleichen Bausteins auf der Vereinsseite, damit beide gleich aussehen.
 */
.k-kontakt__infos h1.wp-block-heading {
	font-size: var(--wp--preset--font-size--huge);
	text-transform: none;
	line-height: 1.05;
}

/*
 * Seitenkoepfe: Zwischen Ueberschrift und Zeile darunter stand Luft von
 * siebzig Pixeln -- der Abstand der Ueberschrift plus der Blockabstand des
 * Absatzes. Der Absatz rueckt an die Ueberschrift heran.
 */
.k-page-hero .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

.k-page-hero__text {
	margin-top: 0 !important;
}

/* --- Fussbereich --------------------------------------------------------- */



.k-fuss__zeile .k-icon {
}

.k-fuss__liste {
	list-style: none;
	padding-left: 0;
}

.k-fuss__liste li {
	margin-bottom: 0.75rem;
}

.k-fuss a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.k-fuss a:hover {
	color: var(--wp--preset--color--white) !important;
}

.k-fuss__unten {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/*
 * Fuenf Spalten: Marke, Kontakt, Angebot, Verein, Netzwerke. Auf dem Tablet
 * reicht die Breite dafuer nicht -- WordPress zwingt Spalten ab 782 Pixeln
 * in eine Reihe, deshalb hier mit !important zurueck auf Umbruch: drei
 * oben, zwei darunter. Unter 782 stapelt WordPress ohnehin.
 */
@media (min-width: 782px) and (max-width: 1100px) {
	.k-fuss > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.k-fuss > .wp-block-columns > .wp-block-column {
		flex-basis: calc(33.333% - var(--wp--preset--spacing--60)) !important;
		flex-grow: 1;
	}
}

/*
 * Der Vereinsname neben dem Zeichen brach in der schmaleren Spalte mitten
 * im Wort ("SELBSTVERTEIDIGUN / G E.V."). Er bleibt auf seinen zwei Zeilen,
 * die Spalte nimmt sich dafuer die Breite, die uebrigen geben sie ab.
 */
.k-fuss__marke p {
	white-space: nowrap;
}

/*
 * Nowrap allein reicht nicht: WordPress gibt jeder Spalte flex-basis 0, die
 * Markenspalte blieb also ein Fuenftel breit und der Vereinsname lief in die
 * Kontaktspalte hinein. Ab fuenf Spalten in einer Reihe nimmt sie sich ihre
 * natuerliche Breite, die uebrigen vier teilen den Rest.
 */
@media (min-width: 1101px) {
	.k-fuss > .wp-block-columns > .wp-block-column:first-child {
		flex: 0 0 auto !important;
	}
}

/* --- Symbole ------------------------------------------------------------- */

/* Die Symbole liegen als SVG-Dateien im Theme und werden als Bildbloecke
   eingesetzt. Damit bleiben sie im Editor austauschbar. */
/* Symbole sitzen mittig auf der ERSTEN Textzeile daneben.
 *
 * Zwei Dinge muessen dafuer stimmen, und beide waren lange falsch:
 *
 * 1. Die Hoehe stand fest auf 32px. Wo im Muster eine andere Breite gesetzt
 *    ist (die Uhr etwa hat style="width:14px"), ueberschrieb das nur die
 *    Breite -- das Bild blieb 32px hoch und der Rahmen darum ebenfalls.
 *    Deshalb jetzt height:auto mit aspect-ratio: die Hoehe folgt der Breite,
 *    egal woher die kommt.
 * 2. Der Rahmen war so hoch wie das Bild, der Text daneben aber so hoch wie
 *    seine Zeilenhoehe. Bei align-items:flex-start stand das Symbol dadurch
 *    sichtbar zu hoch. Mit min-height:1lh ist der Rahmen genau eine Textzeile
 *    hoch und zentriert das Symbol darin -- damit sitzt es auf der Mittellinie
 *    der ersten Zeile, auch wenn der Text umbricht.
 *
 * Das ersetzt die einzelnen margin-top-Korrekturen, die vorher an sieben
 * Stellen im Stylesheet standen und je nach Schriftgroesse mal passten und
 * mal nicht.
 */
.k-icon {
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	line-height: 0;
}

.k-icon img {
	display: block;
	width: 32px;
	height: auto;
	aspect-ratio: 1;
}

.k-icon--s img {
	width: 20px;
}

.k-icon--xs img {
	width: 16px;
}

/* Symbole auf dunklem Grund werden weiss eingefaerbt */
.k-icon--hell img {
	filter: brightness(0) invert(1);
	opacity: 0.6;
}

/* --- Vertrauensband ------------------------------------------------------ */

.k-trust {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.k-trust .k-icon img {
	width: 18px;
}

/*
 * Die vier Siegel stehen auf denselben Kanten wie die Zeile im Stoererband
 * darueber: links an der Textkante der Seite, rechts dort, wo "Platz
 * sichern" endet. Vorher sassen sie mittig in einem Klumpen, und die beiden
 * Baender lasen sich nicht als ein Block. Die Werte sind dieselben wie bei
 * .k-stoerer__reihe -- aendert sich dort etwas, gehoert es auch hierher.
 * Nur am Rechner: auf dem Handy macht mobil.js aus dem Band ein Laufband.
 */
@media (min-width: 782px) {
	.k-trust > .wp-block-group {
		max-width: none !important;
		justify-content: space-between;
		padding-left: max(0px, calc((100% - 1440px) / 2));
		padding-right: calc(var(--k-navknopf-breite) + var(--k-navknopf-abstand));
	}
}

@media (min-width: 782px) and (max-width: 1279px) {
	.k-trust > .wp-block-group {
		padding-right: 0;
	}
}

/* --- Kennzahlen ---------------------------------------------------------- */

.k-stat__icon .k-icon {
	padding: 0.9rem;
	background: rgba(122, 181, 255, 0.1);
	border: 1px solid rgba(122, 181, 255, 0.2);
}

/*
 * Solange nur eine der drei Hallen fotografiert ist, traegt die Karte ohne
 * Foto eine Flaeche im selben Format und in ihrer Akzentfarbe. Ein Foto neben
 * zwei Luecken sieht nach Fehler aus; drei gleich hohe Koepfe sehen nach
 * Absicht aus. Kommt ein Foto dazu, ersetzt es die Flaeche von allein.
 */
.k-anfahrt__bild--leer {
	aspect-ratio: 3 / 2;
	/* Grundwert zuerst, damit die Flaeche auch ohne color-mix steht */
	background: var(--wp--preset--color--gray-50);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

/*
 * Nur ein Hauch der Akzentfarbe. Die volle Farbe war hier zuerst gesetzt und
 * hat das Foto daneben erschlagen -- die Flaeche ist ein Platzhalter, sie
 * soll nicht lauter sein als die Aufnahme, die sie ersetzt.
 */
.k-anfahrt__karte.k-farbe-blue .k-anfahrt__bild--leer {
	background: color-mix(in srgb, var(--wp--preset--color--blue) 14%, white);
}

.k-anfahrt__karte.k-farbe-orange .k-anfahrt__bild--leer {
	background: color-mix(in srgb, var(--wp--preset--color--orange) 14%, white);
}

.k-anfahrt__karte.k-farbe-health .k-anfahrt__bild--leer {
	background: color-mix(in srgb, var(--wp--preset--color--health) 14%, white);
}

/* --- Erfahrungen --------------------------------------------------------- */

/*
 * Laufband statt Raster. Aufbau und Fallen wie beim Referenzen-Band weiter
 * unten -- die Spur muss max-content breit sein und das eingegrenzte Layout
 * ueberschreiben, sonst deckelt WordPress sie auf 100 Prozent und die Fahrt
 * verschiebt nur die Bandbreite statt der halben Kartenreihe.
 */
.k-stimmen__band {
	overflow: hidden;
	/* Luft nach oben und unten. Ohne sie ist das Band genau so hoch wie eine
	   Karte, und overflow: hidden schneidet die untere Kontur weg -- beim
	   Ueberfahren zusaetzlich den Schatten und die zwei Pixel, um die sich
	   die Karte anhebt. Der Abstand liegt innerhalb des Beschnitts, die
	   Karten laufen an den Seiten also weiterhin sauber aus. */
	padding-block: 1rem;
	/* Die Karten laufen an beiden Raendern weich ins Weiss der Sektion aus,
	   statt hart abgeschnitten an der Kante zu kleben. */
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.k-stimmen__spur {
	align-items: stretch !important;
	width: max-content;
	max-width: none !important;
	flex-wrap: nowrap !important;
	/* Gleicher Abstand auch ueber die Naht zwischen den beiden Haelften */
	gap: var(--wp--preset--spacing--40) !important;
}

/* Im Band braucht jede Karte eine feste Breite -- sonst zieht die laengste
   Stimme ihre Karte auf und das Band ruckelt bei jedem Umlauf anders. */
.k-stimmen__spur .k-review {
	width: 28rem;
	flex: 0 0 28rem;
	/* height: 100% aus der Grundregel muss hier weg: im Band hat die Spur
	   keine feste Hoehe, die Prozentangabe laeuft ins Leere und die Karte
	   faellt auf ihre Inhaltshoehe zurueck. Mit auto greift align-items:
	   stretch und alle Karten werden gleich hoch. */
	height: auto;
}

@media (max-width: 600px) {
	.k-stimmen__spur .k-review {
		width: 19rem;
		flex: 0 0 19rem;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.k-stimmen__spur {
		animation: k-stimmenband 48s linear infinite;
	}

	/* Anhalten beim Ueberfahren. Anders als bei den Referenzen sind das hier
	   Saetze zum Lesen, nicht nur Namen -- ohne Halt waere das Band unlesbar. */
	.k-stimmen__band:hover .k-stimmen__spur,
	.k-stimmen__band:focus-within .k-stimmen__spur {
		animation-play-state: paused;
	}
}

/* Gefahren wird um genau eine Haelfte: die halbe Spurbreite plus einen
   halben Abstand, weil zwischen den beiden Haelften auch eine Luecke sitzt. */
@keyframes k-stimmenband {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-50% - var(--wp--preset--spacing--40) / 2));
	}
}

/* Sterne sind SVG, kein Schriftzeichen -- siehe Kommentar in testimonials.php */
.k-stars {
	display: inline-flex;
	gap: 0.1em;
	line-height: 1;
}

.k-stern {
	display: block;
	fill: var(--wp--preset--color--gray-200);
}

.k-stern--voll {
	fill: #fbbc05;
}

.k-google {
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-200);
	align-items: center;
}

/*
 * Die Karte traegt links den Farbstreifen, den auch die Tarifzeilen und die
 * Hallenkarten benutzen. Damit gehoert der Abschnitt sichtbar zum Haus und
 * braucht keine runden Ecken, die es hier sonst nirgends gibt.
 */
.k-review {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-left: 3px solid var(--wp--preset--color--blue);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/*
 * Falle Nummer eins aus der CLAUDE.md, hier zugeschlagen: Die Karte ist ein
 * constrained-Container, WordPress gibt jedem Kind margin-inline: auto. Sobald
 * die Karte selbst zur Flex-Spalte wird, schrumpfen die Kinder auf ihre
 * Inhaltsbreite und sitzen mittig -- Name und Google-Zeichen standen dadurch
 * in der Kartenmitte statt am Rand. Gegenmittel ist margin-inline, nicht
 * text-align.
 */
.k-review > * {
	margin-inline: 0 !important;
	width: 100%;
}

.k-review:hover {
	box-shadow: 0 10px 15px -3px rgba(16, 26, 45, 0.1);
	transform: translateY(-2px);
}

.k-review__kopf {
	align-items: center;
}

/* Das Google-Zeichen sitzt am rechten Kartenrand, nicht neben dem Namen */
.k-review__kopf .k-icon {
	margin-left: auto !important;
}

/*
 * Der Text wird nach vier Zeilen abgeschnitten, damit alle Karten gleich
 * hoch bleiben und der Abschnitt nicht die halbe Startseite frisst. Der
 * vollstaendige Text steht weiterhin im Markup -- gekuerzt wird nur die
 * Darstellung, gelesen werden kann er ueber den Link zum Profil.
 */
.k-review__text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.55;
}

/* Die Fusszeile sitzt unten, auch wenn der Text kuerzer ist als vier Zeilen */
.k-review__fuss {
	border-top: 1px solid var(--wp--preset--color--gray-200);
	margin-top: auto !important;
}

/* Kreisloses Namenskuerzel, wie im Original ein Quadrat */
.k-avatar {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
}

/* --- Ablauf -------------------------------------------------------------- */

.k-step {
	position: relative;
	padding-top: 1.5rem;
}

/* Riesige Ziffer als blasser Hintergrund hinter dem Symbol */
.k-step__num {
	position: absolute;
	top: 0.5rem;
	left: 0;
	right: 0;
	opacity: 0.08;
	line-height: 1;
	pointer-events: none;
}

/* Feine Linie, die die drei Schritte verbindet */
@media (min-width: 782px) {
	.k-ablauf .wp-block-columns {
		position: relative;
	}

	.k-ablauf .wp-block-columns::before {
		content: "";
		position: absolute;
		top: 3.5rem;
		left: 20%;
		right: 20%;
		height: 1px;
		background: linear-gradient(to right, rgba(122, 181, 255, 0), rgba(122, 181, 255, 0.45), rgba(122, 181, 255, 0));
	}
}

.k-step__icon .k-icon {
	position: relative;
	padding: 1rem;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(16, 26, 45, 0.1);
	box-shadow: 0 10px 15px -3px rgba(16, 26, 45, 0.1);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.k-step:hover .k-icon {
	border-color: rgba(122, 181, 255, 0.4);
	box-shadow: 0 20px 25px -5px rgba(16, 26, 45, 0.12);
}

/* --- Trainerkarten ------------------------------------------------------- */

/* Gleicher Aufbau wie bei den Angebotskarten: Ziffer oben, Name unten */
.k-person.wp-block-cover {
	align-items: stretch;
}

/*
 * Nummer in die obere rechte Ecke der Karte.
 *
 * Der Inhaltskasten des Cover-Blocks steht auf "unten links" und schrumpft
 * dadurch auf seine Inhaltsbreite -- gemessen 207 von 320 Pixeln. Er ist
 * zugleich Bezugsrahmen fuer die Nummer, die deshalb weit vor der Kante
 * haengenblieb.
 *
 * position: static waere der kurze Weg gewesen und ist genau der Griff, der
 * am 23.08. die Disziplinkarten zerlegt hat. Hier hat er die Namen
 * verschluckt. Deshalb bleibt der Kasten positioniert und wird stattdessen
 * auf die volle Kartengroesse gezogen; er ordnet seinen Inhalt selbst an.
 */
.k-person .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;
	/* stretch statt der Ausrichtung "unten": der Kasten soll die ganze Karte
	   fuellen, die Anordnung uebernimmt danach justify-content. */
	align-self: stretch !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 !important;
}

/* Falle eins aus der CLAUDE.md: WordPress gibt jedem Kind eines
   constrained-Containers margin-inline: auto. In einer Flex-Spalte schrumpft
   das jedes Element auf seine Inhaltsbreite und rueckt es zur Mitte -- die
   Namen standen dadurch eingerueckt statt am linken Rand. */
.k-person .wp-block-cover__inner-container > * {
	margin-inline: 0 !important;
}

.k-person .k-num {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	align-self: auto !important;
	/* Die Nummer ordnet, sie soll nicht mitreden. Vorher stand sie voll
	   deckend und zog den Blick vom Gesicht weg. */
	opacity: 0.35;
}

.k-person:hover .k-num {
	opacity: 0.6;
}




.k-person:hover .k-num {
	opacity: 0.5;
}

.k-person .wp-block-cover__image-background {
	object-position: top;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.k-person:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/*
 * Rolle und Dan-Grad erscheinen erst beim Ueberfahren. Bis zum 07.09.2026
 * standen sie dauerhaft auf der Kachel. Seit Martin Panschar "SV-Trainer ·
 * 2. Vorsitzender" traegt und Marc Bonertz "Karate- und SV-Trainer", sind das
 * zwei Zeilen Versalien plus Grad auf einer Kachel von 210 Pixeln -- mehr Text
 * als Bild. Der Name bleibt stehen, er ist der Grund fuer die Kachel.
 *
 * Ohne Zeigegeraet gibt es kein Ueberfahren. Auf dem Handy bleibt die Zeile
 * deshalb sichtbar, sonst waere sie dort gar nicht erreichbar.
 */
.k-person__details {
	/*
	 * 16.09.2026: max-height war das Problem. Der Uebergang lief auf 8rem,
	 * der Text braucht aber nur 2 bis 4 -- also sprang er beim Aufklappen
	 * fast sofort auf, und beim Zuklappen passierte erst lange nichts.
	 *
	 * Browser, die "interpolate-size" kennen, blenden direkt von 0 auf
	 * "auto" -- exakt so hoch wie der Text, keine Schaetzung. Die uebrigen
	 * bekommen weiter max-height, aber knapper bemessen und mit einer
	 * Kurve, die schnell anzieht und weich ausrollt.
	 *
	 * Der Rastertrick (0fr auf 1fr) taugt hier nicht: Bei mehreren Absaetzen
	 * in einem Raster ohne feste Hoehe werden alle fr-Zeilen so hoch wie die
	 * hoechste, der Grad bekaeme also die Hoehe der zweizeiligen Rolle.
	 */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(6px);
	margin-top: 0 !important;
	transition:
		max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s ease-out,
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (interpolate-size: allow-keywords) {
	.k-person__details {
		interpolate-size: allow-keywords;
		height: 0;
		max-height: none;
	}
}

/*
 * Eingeklappt statt nur durchsichtig. Mit opacity allein belegte der Text
 * weiter seinen Platz, und weil nicht jeder einen Dan-Grad traegt, standen die
 * Namen auf unterschiedlichen Hoehen -- und alle zu weit oben. Der Inhalt haengt
 * am unteren Rand der Kachel: Klappt der Block auf, wandert der Name nach oben
 * und der Text erscheint darunter.
 *
 * max-height statt height, weil auf "auto" keine Uebergaenge laufen. Der Wert
 * ist grosszuegig gewaehlt, er begrenzt nichts, er gibt nur dem Uebergang ein Ziel.
 */
.k-person:hover .k-person__details,
.k-person:focus-within .k-person__details {
	/* Knapp ueber Rolle plus Grad; auf den Spartenseiten kommt der
	   Schwerpunkt dazu, dort steht die Grenze weiter unten. */
	max-height: 4.5rem;
	opacity: 1;
	transform: none;
	margin-top: var(--wp--preset--spacing--20) !important;
	transition-delay: 0s, 0s, 0.06s, 0s, 0s;
}

body[class*="k-sparte-"] .k-person:hover .k-person__details,
body[class*="k-sparte-"] .k-person:focus-within .k-person__details {
	max-height: 12rem;
}

@supports (interpolate-size: allow-keywords) {
	.k-person:hover .k-person__details,
	.k-person:focus-within .k-person__details {
		height: auto;
		max-height: none;
	}
}

/* Ohne Zeigegeraet gibt es kein Ueberfahren -- dort steht der Text immer. */
@media (hover: none) {

	.k-person__details {
		max-height: none;
		height: auto;
		opacity: 1;
		transform: none;
		margin-top: 4px !important;
	}
}

/*
 * Rangfolge im Textblock der Kachel, 08.09.2026.
 *
 * Vorher standen die drei Zeilen mit sechzehn und acht Pixeln Abstand und
 * alle drei in vollem Weiss; die Rolle lief zusaetzlich in Schriftstaerke
 * 900 mit weiter Sperrung. Beim Ueberfahren fiel der Block dadurch
 * auseinander -- drei gleich laute Zeilen, die nicht zusammengehoerten.
 *
 * Jetzt traegt jede Zeile ihren Rang: Der Name bleibt gross und nimmt beim
 * Ueberfahren die Akzentfarbe an, die Rolle wird leiser und ruecht nah an
 * ihn heran, der Grad steht als dritte Ebene darunter. Die Abstaende
 * wachsen nicht mehr mit dem Rang, sie schrumpfen mit ihm -- so liest sich
 * der Block als eine Einheit statt als drei Zeilen.
 */
.k-person .wp-block-heading {
	margin-bottom: 2px !important;
	transition: color 0.3s ease-out;
}

.k-person:hover .k-person__details,
.k-person:focus-within .k-person__details {
	margin-top: 4px !important;
}

.k-person .k-label {
	font-weight: 700;
	letter-spacing: 0.14em;
	opacity: 0.85;
	transition: color 0.3s ease-out;
}

.k-person__grad {
	margin-top: 2px !important;
	font-size: 0.6875rem;
	opacity: 0.62;
}

.k-person--blue:hover .wp-block-heading {
	color: var(--wp--preset--color--blue) !important;
}

.k-person--defense:hover .wp-block-heading {
	color: var(--wp--preset--color--defense) !important;
}

.k-person--orange:hover .wp-block-heading {
	color: var(--wp--preset--color--orange) !important;
}

/*
 * Gesundheitsfarbe fehlte in dieser Liste (08.09.2026). Bei Claudia und Anna
 * blieb der Name deshalb beim Ueberfahren weiss, waehrend er auf allen
 * anderen Karten die Farbe der Sparte annahm.
 */
.k-person--health:hover .wp-block-heading {
	color: var(--wp--preset--color--health) !important;
}

/*
 * Die Rollenzeile nimmt beim Ueberfahren ebenfalls die Farbe der Sparte an.
 * Vorher wechselte nur der Name, die Zeile darunter blieb weiss -- gerade
 * dort steht aber, was die Person macht.
 */
.k-person--blue:hover .k-label    { color: var(--wp--preset--color--blue) !important; }
.k-person--defense:hover .k-label { color: var(--wp--preset--color--defense) !important; }
.k-person--orange:hover .k-label  { color: var(--wp--preset--color--orange) !important; }
.k-person--health:hover .k-label  { color: var(--wp--preset--color--health) !important; }

/*
 * Der Abschluss auf den Gesundheitsseiten: gruene Flaeche im Ruhezustand,
 * beim Ueberfahren faehrt Weiss ein und die Schrift wechselt auf Navy --
 * dieselbe Mechanik wie bei Karate und Selbstschutz.
 */
.k-offer-cta.k-accent-health .k-offer-cta__knopf {
	--k-knopf-hover: var(--wp--preset--color--white);
}

.k-offer-cta.k-accent-health .k-offer-cta__knopf .wp-block-button__link {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--white) !important;
}

.k-offer-cta.k-accent-health .k-offer-cta__knopf .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.k-offer-cta.k-accent-health .k-offer-cta__knopf .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--navy) !important;
}

/* --- Bildtrenner --------------------------------------------------------- */

.k-divider .wp-block-cover__inner-container {
	display: none;
}

/*
 * Der Trenner nimmt das Format seines Bildes an, statt auf 60vh zu stehen.
 * Mit der festen Hoehe entschied das Fensterformat, was zu sehen ist: auf
 * dem Handy war der Kasten hoeher als breit, und object-fit: cover schnitt
 * das Bild links und rechts ab -- vom Gruertelknoten blieb ein Streifen.
 *
 * Alle drei Trennerbilder liegen auf 16:9 (banner-guertel, kick_black_pad,
 * kids-training). Solange das so bleibt, ist die Breite immer bindend und
 * es wird nie seitlich beschnitten. Ein Bild in einem anderen Format
 * gehoert vorher auf 16:9 gebracht.
 */
.k-divider {
	min-height: 0 !important;
	/* Das !important ist noetig: der Cover-Block schreibt sich selbst
	   "aspect-ratio: unset" in das style-Attribut. Ohne das bleibt der
	   Trenner 35 Pixel hoch, weil der Innenbereich ausgeblendet ist und
	   sonst nichts eine Hoehe vorgibt. */
	aspect-ratio: 16 / 5 !important;
}

/*
 * Flacher Trenner, 08.09.2026. Gedacht fuer Ausschnitte statt Szenen -- das
 * Guertelbild mit den gefalteten Haenden etwa. Sechzehn zu vier statt sechzehn
 * zu fuenf: auf 1440 Pixel Breite sind das 360 statt 450 Pixel Hoehe.
 *
 * Auf dem Handy geht die Ratio zurueck auf 16:7. Ein Streifen von 390 Pixeln
 * Breite waere sonst keine hundert Pixel hoch, vom Guertelknoten bliebe ein
 * Strich. Bei 16:7 schneidet cover links und rechts etwas ab -- in der Mitte
 * liegen die Haende, und genau die sollen bleiben.
 */
.k-divider--flach {
	aspect-ratio: 16 / 4 !important;
}

@media (max-width: 781px) {
	.k-divider--flach {
		aspect-ratio: 16 / 7 !important;
	}
}

/*
 * Trenner mit Zeile. Der normale Trenner blendet seinen Innenbereich aus, er
 * traegt ja nichts. Zeigt das Bild aber einen Anlass, den niemand erraten kann
 * -- einen Lehrgang, ein Jubilaeum --, braucht es eine Bildunterschrift.
 *
 * Sie sitzt unten rechts. In der Mitte laege sie den Koepfen im Weg, und links
 * stehen auf den Hallenbildern die Leute. Rechts unten ist Boden.
 */
.k-divider--text .wp-block-cover__inner-container {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 0;
}

/*
 * Der Schatten statt einer staerkeren Abdunklung: Das Bild soll hell bleiben,
 * und die Zeile laeuft ueber Hallenboden und Ziegelwand, beide hell. Ohne den
 * Schatten verschwindet sie dort. Er faerbt nur die Schrift ein, nicht das Bild.
 */
.k-divider__text {
	text-shadow: 0 1px 4px rgba(16, 26, 45, 0.85);
}

/* --- Haeufige Fragen ----------------------------------------------------- */

.k-faq__item {
	transition: background-color 0.3s ease;
}

.k-faq__item summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	list-style: none;
}

.k-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Kleines Plus rechts, das sich beim Oeffnen zum Minus dreht */
.k-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.4rem;
	text-align: center;
	font-weight: 400;
	font-size: 1.1rem;
	border: 1px solid rgba(16, 26, 45, 0.15);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.k-faq__item[open] summary::after {
	content: "+";
	transform: rotate(45deg);
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

/* --- Abschluss-Aufruf ---------------------------------------------------- */

/*
 * Der Umriss-Knopf stand auf dunklem Grund und war deshalb weiss. Seit die
 * Sektion am 04.09.2026 weiss ist, waere er unsichtbar gewesen -- ein
 * Rahmen in rgba(255,255,255,0.2) auf Weiss ist schlicht nicht da.
 * Jetzt in Navy, passend zum Nachbarknopf.
 */
/*
 * Der Selektor traegt bewusst vier Klassen. Die allgemeine Regel fuer
 * Umriss-Knoepfe weiter oben (.wp-block-button.is-style-outline > .link)
 * ist spezifischer als ".k-cta__ghost > .link" und hat deshalb gewonnen:
 * Der Rahmen blieb Gray-200 und der Knopf wurde beim Ueberfahren orange.
 * Orange ist die Farbe der Kinder-Sparte und hat hier nichts zu suchen.
 */
.k-cta .wp-block-button.k-cta__ghost > .wp-block-button__link {
	border-width: 2px;
}


/*
 * Die Unterzeile klebte ohne jeden Abstand an der Ueberschrift -- beide
 * standen im Muster auf margin 0, was auf dunklem Grund weniger auffiel.
 * Zehn Pixel bei einer 56 Pixel grossen Ueberschrift.
 */
.k-cta h2 + p {
	/* 1,25rem statt 0,625: Seit die Unterzeile auf Weiss steht und in der
	   grossen Schrift laeuft, war der enge Abstand zu wenig -- sie klebte
	   unter der 56 Pixel hohen Ueberschrift. */
	margin-top: 1.25rem !important;
}

/* --- Schriftgroesse an die Kartenbreite koppeln --------------------------- */

/* Bisher richteten sich die Ueberschriften nach der Fensterbreite. In einer
   schmalen Karte war "BALANCE" dann zu gross und lief ueber den Rand. Mit
   container-type wird die Spalte zum Bezugspunkt, cqi ist ein Prozent ihrer
   Breite. Die Farbklassen von WordPress setzen !important, daher hier auch. */
.k-angebote .wp-block-column,
.k-trainer .wp-block-column,
.k-preise .wp-block-column {
	container-type: inline-size;
}

.k-card .wp-block-heading {
	font-size: clamp(1.5rem, 16cqi, 3rem) !important;
}

.k-person .wp-block-heading {
	font-size: clamp(0.9rem, 8cqi, 1.25rem) !important;
}

.k-price h3 {
	font-size: clamp(1.1rem, 11cqi, 1.875rem) !important;
}

/* --- Einblenden beim Scrollen -------------------------------------------- */

/* Ersetzt die Framer-Motion-Einblendungen aus dem Astro-Projekt. Laeuft ueber
   eine scrollgesteuerte CSS-Animation, ohne JavaScript. Browser ohne
   Unterstuetzung zeigen die Inhalte sofort, weil die ganze Regel in @supports
   steht. Wer im System weniger Bewegung eingestellt hat, sieht sie ebenfalls
   sofort. */

/* Reine Bewegung: die Karte startet weiter unten und faehrt beim Scrollen
   auf ihren Platz. Kein Ein- und Ausblenden -- der Inhalt ist die ganze Zeit
   lesbar, es bewegt sich nur. */
@keyframes k-auffahren {
	from {
		transform: translateY(5rem);
	}
	to {
		transform: translateY(0);
	}
}




/* --- Referenzen: Laufband ------------------------------------------------

   Die Namen der Auftraggeber laufen langsam von rechts nach links durchs
   Bild. Reine CSS-Animation, kein Skript. Wer im System weniger Bewegung
   eingestellt hat, sieht die Liste still stehen -- deshalb steht die
   Bewegung in einer eigenen Medienabfrage und nicht an der Spur selbst. */

.k-laufband {
	overflow: hidden;
	border-block: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--wp--preset--spacing--50);
	/* Die Raender laufen weich aus, damit die Namen nicht hart abgeschnitten
	   an der Kante kleben. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.k-laufband__spur {
	align-items: center;
	/* Ohne das schrumpfen die Namen, statt aus dem Bild zu laufen.
	   max-width muss mit weg: das eingegrenzte Layout deckelt sonst auf 100
	   Prozent des Bandes, und die Fahrt um eine halbe Spur verschiebt dann
	   nur die halbe Bandbreite statt die halbe Eintragsreihe -- gemessen
	   1372px statt der noetigen 4196. */
	width: max-content;
	max-width: none !important;
	flex-wrap: nowrap !important;
	/* Der Abstand gilt gleichmaessig, auch ueber die Nahtstelle zwischen den
	   beiden Haelften hinweg -- sonst stockt das Band einmal je Umlauf. */
	gap: var(--wp--preset--spacing--70) !important;
}

.k-laufband__eintrag {
	white-space: nowrap;
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

.k-laufband__eintrag:hover {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.k-laufband__spur {
		animation: k-laufband 32s linear infinite;
	}

	/* Beim Ueberfahren haelt das Band an, damit man in Ruhe lesen kann */
	.k-laufband:hover .k-laufband__spur {
		animation-play-state: paused;
	}
}

/* Die Spur enthaelt alle Eintraege zweimal. Gefahren wird um genau eine
   Haelfte -- danach steht wieder derselbe Anfang an derselben Stelle, und
   der Sprung zurueck faellt nicht auf. Von 100% auf -100% zu fahren, wie es
   vorher stand, laesst das Band erst leer anlaufen und danach wieder leer
   werden. */
@keyframes k-laufband {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Auf schmalen Fenstern etwas kleiner und schneller, sonst dauert ein
   Durchlauf gefuehlt ewig */
@media (max-width: 781px) {
	.k-laufband__eintrag {
		font-size: var(--wp--preset--font-size--small) !important;
	}
	@media (prefers-reduced-motion: no-preference) {
		.k-laufband__spur {
			animation-duration: 22s;
		}
	}
}


/* --- Newsleiste: Suche und Archiv --------------------------------------- */

.k-news__leiste {
	width: 100%;
	align-items: center;
}

.k-news__suche .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--gray-200);
	background: var(--wp--preset--color--white);
	padding: 0.7rem 1rem;
}

.k-news__suche .wp-block-search__button {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.7rem 1.2rem;
	cursor: pointer;
}

/* Das Archiv gibt WordPress als echtes Auswahlfeld aus, das sich nicht
   ueber Blockeinstellungen gestalten laesst -- deshalb hier. */
.k-news__archiv select,
.k-news__archiv .wp-block-archives__select {
	border: 1px solid var(--wp--preset--color--gray-200);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 1rem;
	max-width: 100%;
}

.k-news__archiv label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-600);
}

@media (max-width: 781px) {
	.k-news__leiste {
		flex-direction: column;
		align-items: stretch;
	}
	.k-news__suche,
	.k-news__archiv {
		width: 100% !important;
	}
}

/* --- Einzelner Beitrag --------------------------------------------------- */

.k-beitrag__inhalt p,
.k-beitrag__inhalt li {
	color: var(--wp--preset--color--gray-600);
}

.k-beitrag__inhalt h2,
.k-beitrag__inhalt h3 {
	color: var(--wp--preset--color--navy);
	margin-top: var(--wp--preset--spacing--70);
}

.k-beitrag__fuss {
	width: 100%;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* --- Rechtstexte: Impressum und Datenschutz ------------------------------ */

/* Der Hinweis oben faellt bewusst auf: solange er dasteht, ist die Seite
   nicht rechtsgueltig. Er verschwindet mit dem echten Text. */
.k-rechtstext__hinweis {
	border-left: 4px solid var(--wp--preset--color--navy);
}

.k-rechtstext p {
	line-height: 1.7;
}

/* Text von easyRechtssicher (inc/rechtstexte.php): schlichtes HTML ohne
   Klassen, deshalb hier im Look der bisherigen Abschnitte. */
.k-rechtstext__text {
	color: var(--wp--preset--color--gray-600);
	overflow-wrap: anywhere;
}

.k-rechtstext__text h2,
.k-rechtstext__text h3,
.k-rechtstext__text h4 {
	color: var(--wp--preset--color--navy);
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	text-transform: none; /* das Theme setzt h3 sonst in Versalien */
}

.k-rechtstext__text h2 {
	font-size: var(--wp--preset--font-size--medium);
}

.k-rechtstext__text h3,
.k-rechtstext__text h4 {
	font-size: var(--wp--preset--font-size--small);
}

.k-rechtstext__text > :first-child {
	margin-block-start: 0;
}

.k-rechtstext__text p,
.k-rechtstext__text ul,
.k-rechtstext__text ol {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.k-rechtstext__text a {
	color: var(--wp--preset--color--navy);
}

/* --- Kleinigkeiten ------------------------------------------------------- */

/* Der Fussbereich schliesst direkt an die letzte Sektion an, ohne weisse Fuge */
/* Seit 25.10.2026 ist die Huelle ein div (vorher footer um footer, doppelte Landmarke) */
.wp-site-blocks > footer,
.wp-site-blocks > div:has(> .k-fuss) {
	margin-block-start: 0;
}

/* Labelzeilen ueber Ueberschriften: Inter statt Montserrat */
.k-label {
	font-family: var(--wp--preset--font-family--inter);
}
/* ---------------------------------------------------------------------------
   Kopfbereich der Angebotsseiten (offer-hero)

   Aufbau wie im Original OfferHero.tsx: das Bild fuellt die rechte Seite ueber
   die volle Hoehe, darueber liegt eine weisse Flaeche, die links beginnt und
   sich nach unten verbreitert. Die Diagonale laeuft also andersherum als bei
   .k-hero auf der Startseite -- oben schmaler, unten breiter.

   Umgesetzt als Cover-Block, damit das Bild im Editor austauschbar bleibt.
   Die Abdunklung des Cover-Blocks steht auf 0, das Freistellen uebernimmt
   allein die weisse Flaeche.
   --------------------------------------------------------------------------- */

.k-offer-hero.wp-block-cover {
	align-items: center;
	padding: 0;
	/* WordPress gibt dem ersten Block im Inhalt einen oberen Aussenabstand.
	   Der riss hier einen weissen Streifen unter die Navigationsleiste. */
	margin-block-start: 0 !important;
	/*
	 * Volle Fensterhoehe statt der 88vh aus dem Muster (Wunsch 04.09.2026).
	 * Bei 88vh stand unten ein Streifen der naechsten Sektion im Bild, rund
	 * hundert Pixel bei einem 900er Fenster.
	 *
	 * dvh statt vh: Auf dem Handy zaehlt vh die Browserleiste mit, der Kopf
	 * waere dort hoeher als das Fenster und der Knopf laege unter der
	 * Adresszeile. dvh misst, was wirklich zu sehen ist. Browser ohne dvh
	 * behalten den Wert aus dem Muster.
	 */
	min-height: 100dvh !important;
}

/* Das Bild fuellt nur die rechte Seite, so wie im Original (left-[37%]).
   Vorher lief es ueber die volle Breite und wurde links von der weissen
   Flaeche verdeckt -- dadurch sass der sichtbare Ausschnitt zu weit links. */
.k-offer-hero .wp-block-cover__image-background {
	left: 37%;
	width: 63%;
}

/* Die weisse Flaeche. Masse aus dem Original: 57% breit, oben bis 80% davon,
   unten ueber die volle Breite -- macht 45.6% oben und 57% unten. */
.k-offer-hero::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 57%;
	background: var(--wp--preset--color--white);
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
	z-index: 1;
	pointer-events: none;
}

.k-offer-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
}

/* Der Text steht in der linken Haelfte, die rechte Spalte bleibt leer und
   gibt das Bild frei. */
.k-offer-hero__grid {
	align-items: center;
}

/*
 * Wo der Text im Sparten-Kopf sitzt, entscheidet der Kopf selbst.
 *
 * Am 10.09.2026 probeweise auf unten links gestellt und wieder
 * zurueckgenommen. Festgehalten sei, wo die Stellschraube sitzt: Weder das
 * Spaltenraster noch die Textspalte richten etwas aus, beide sind genau so
 * hoch wie ihr Inhalt, ein align-self an der Spalte laeuft ins Leere.
 * Ausgerichtet wird der innere Kasten, und zwar vom Cover-Block darum --
 * mit align-items in der Regel `.k-offer-hero.wp-block-cover` weiter oben.
 * Zwei Klassen: eine einklassige Regel darunter schlaegt sie nicht.
 */

/* Strich vor der Kickerzeile, nimmt die Akzentfarbe des Abschnitts an. */
.k-offer-hero__kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.k-offer-hero__kicker::before {
	content: "";
	width: 3rem;
	height: 2px;
	background: currentColor;
	flex: none;
}

/* Der Knopf faehrt beim Ueberfahren in der Akzentfarbe durch, dieselbe
   Mechanik wie auf der Startseite. */
.k-offer-hero .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 0;
	/*
	 * Die Farbe der Sparte schon im Ruhezustand. Vorher kam sie aus der
	 * theme.json und war ueberall blau -- beim Ueberfahren sprang der Knopf
	 * auf der Selbstschutz-Seite also von Blau auf Lila.
	 *
	 * Die volle Farbe, nicht die Mischung mit Navy: Die sah bei Rueckenfit
	 * aus wie Khaki statt wie das Gruen des Vereins. Dafuer richtet sich die
	 * Schriftfarbe nach der Flaeche, siehe die Regeln darunter -- Weiss auf
	 * dem hellen Gruen steht bei 1,4 zu 1 und waere nicht zu lesen.
	 */
}






/* Akzentfarbe je Disziplin. Steht als eigene Klasse am Abschnitt, damit
   Kicker, Knopf und spaetere Bausteine aus einer Quelle schoepfen. */
.k-accent-blue    { --k-accent: var(--wp--preset--color--blue); }
.k-accent-orange  { --k-accent: var(--wp--preset--color--orange); }
.k-accent-health  { --k-accent: var(--wp--preset--color--health); }
.k-accent-defense { --k-accent: var(--wp--preset--color--defense); }

/* Schmale Fenster: keine Diagonale, Bild oben, Text darunter auf Weiss.
   Entspricht dem Mobil-Zweig des Originals.

   Neu gefasst am 08.09.2026. Vorher stand die Bildhoehe in Prozent der
   Kopfhoehe (42 Prozent) und der Textanfang als fester Wert (44vw). Zwei
   Masse fuer dieselbe Kante -- und die verschieben sich gegeneinander,
   sobald der Text hoeher wird. Genau das ist mit den groesseren
   Ueberschriften passiert: der Kopf wuchs, die Bildunterkante wanderte mit
   nach unten, der Textanfang blieb stehen. Kicker und Schlagzeile lagen
   dadurch im Bild.

   Jetzt gibt es nur noch einen Wert, --k-hero-bild. Er bestimmt die
   Bildhoehe, den Beginn der weissen Flaeche und den oberen Abstand des
   Textes. Was auch immer der Text tut, die drei bleiben zusammen.

   Der Kopf steht mobil wieder auf voller Fensterhoehe, damit im ersten
   Bildschirm genau eine Sache steht: Bild, Schlagzeile, Text, Knopf. */
@media (max-width: 781px) {
	.k-offer-hero.wp-block-cover {
		--k-hero-bild: 47dvh;
		min-height: 100dvh !important;
		flex-direction: column;
		justify-content: flex-start;
	}

	.k-offer-hero::after {
		inset: var(--k-hero-bild) 0 0 0;
		width: 100%;
		height: auto;
		clip-path: none;
	}

	.k-offer-hero .wp-block-cover__image-background {
		height: var(--k-hero-bild);
		top: 0;
		bottom: auto;
		left: 0;
		width: 100%;
	}

	/*
	 * Der Knopf steht auf breiten Fenstern mit viel Luft unter dem Text.
	 * Mobil kostet die Luft genau das, was am Ende fehlt: Bild, Schlagzeile,
	 * Text und Knopf sollen zusammen in den ersten Bildschirm. Der Abstand
	 * kommt als Elementstil aus dem Block, deshalb das !important.
	 */
	.k-offer-hero .wp-block-buttons {
		margin-top: var(--wp--preset--spacing--40) !important;
	}

	.k-offer-hero .wp-block-cover__inner-container {
		/* Mehr Luft unter dem Foto, damit die Kante nicht am Kicker klebt.
		   Die Bildhoehe gibt dafuer drei Prozent ab, sonst rutscht der
		   Knopf aus dem ersten Bildschirm. */
		padding-top: calc(var(--k-hero-bild) + 3.5rem);
		padding-bottom: var(--wp--preset--spacing--50);
		/* Nur hier ragt der Kasten um die 24 Pixel Seitenrand hinaus. Ohne
		   den Ausgleich klebte die Ueberschrift am Rand des Handys. */
		padding-inline: 24px;
	}
}

/* ---------------------------------------------------------------------------
   Trainingszeiten (schedule)

   Je Termin eine Zeile: links Tag und Uhrzeit in Weiss, rechts Bezeichnung,
   Trainer und Ort auf hellem Grund. Der linke Rand nimmt beim Ueberfahren die
   Akzentfarbe an, die Ueberschrift wechselt mit.

   Abweichung vom Original: dort klappen die Zeilen auf schmalen Fenstern auf.
   Hier stehen alle Angaben immer da und stapeln sich nur -- ohne JavaScript
   waere ein Aufklapper nur mit dem Details-Block moeglich, der sich auf
   breiten Fenstern nicht zuverlaessig offen halten laesst.
   --------------------------------------------------------------------------- */

/* Der Trainingsplan steht seit dem 23.08.2026 auf dunklem Grund. Die Zeilen
   sind deshalb keine hellen Kaesten mehr, sondern leicht aufgehellte Felder
   auf dem Navy -- helle Kaesten haetten den Abschnitt zerhackt. */
.k-zeiten__zeile.wp-block-columns {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 4px solid rgba(255, 255, 255, 0.16);
	max-width: 1040px;
	margin-left: auto !important;
	margin-right: auto !important;
	transition: border-left-color 0.3s ease, box-shadow 0.3s ease;
}

.k-zeiten__zeile:hover {
	border-left-color: var(--k-accent, var(--wp--preset--color--blue));
	background: rgba(255, 255, 255, 0.075);
}

.k-zeiten__zeile:hover .k-zeiten__was h3 {
	color: var(--k-accent, var(--wp--preset--color--blue)) !important;
}

/* Der Zeitblock steht auf Weiss und ist durch eine Linie abgesetzt.
   Auf schmalen Fenstern traegt er die Farbe der Sparte, siehe den
   Mobil-Zweig am Ende des Stylesheets. */
.k-zeiten__wann {
	background: rgba(0, 0, 0, 0.22);
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	flex-grow: 0 !important;
}

.k-zeiten__uhr,
.k-zeiten__ort {
	align-items: center;
	flex-wrap: nowrap;
}

/* Symbole tragen ihre Groesse am Bild, der Rahmen darf nicht mitwachsen */
.k-zeiten .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

.k-zeiten__meta {
	align-items: center;
	row-gap: 0.5rem;
}

/* Der Ort rutscht ans rechte Ende der Zeile */
.k-zeiten__ort {
	margin-left: auto;
}

.k-zeiten__fuss {
	max-width: 1040px;
	margin-left: auto !important;
	margin-right: auto !important;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.k-zeiten__fuss a {
	/* Der Hallenname stand als Link navy auf navy und war unsichtbar
	   (Abnahme 25.10.2026). Er nimmt die Farbe des Satzes an. */
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.k-zeiten__fuss::before {
	content: "";
	width: 2rem;
	height: 1px;
	background: var(--k-accent, var(--wp--preset--color--blue));
	flex: none;
}

.k-zeiten__hinweis {
	border-left: 4px solid var(--k-accent, var(--wp--preset--color--blue));
	background: rgba(255, 255, 255, 0.045) !important;
}

@media (max-width: 781px) {
	.k-zeiten__zeile.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.k-zeiten__wann {
		flex-basis: 100% !important;
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--gray-200);
	}

	.k-zeiten__ort {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
   Kopfbereich der Kids-Seite (kids-hero)

   Anders als die uebrigen Angebotsseiten: der Grund ist orange statt dunkel,
   die Schrift weiss, und rechts steht das Tiger-Maskottchen frei statt eines
   Fotos. Die Diagonale laeuft wie beim offer-hero nach rechts unten, nur ist
   die Flaeche hier orange und liegt hinter dem Text, nicht darueber.
   --------------------------------------------------------------------------- */

.k-kids-hero {
	position: relative;
	overflow: hidden;
	/*
	 * Volle Fensterhoehe wie bei den uebrigen Angebotsseiten (08.09.2026).
	 * Vorher 82vh -- der Kids-Kopf war dadurch rund 160 Pixel flacher als
	 * die Sparten-Koepfe, was beim Durchklicken auffiel. dvh aus demselben
	 * Grund wie beim offer-hero: vh zaehlt auf dem Handy die Browserleiste
	 * mit. Unter 782 Pixeln setzt die Regel weiter unten die Hoehe ohnehin
	 * auf 0 zurueck, dort waechst der Kopf mit seinem Inhalt.
	 */
	min-height: 100dvh;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--white);
	margin-block-start: 0 !important;
}

.k-kids-hero::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 55%;
	background: var(--wp--preset--color--orange);
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
	z-index: 1;
}

.k-kids-hero > * {
	position: relative;
	width: 100%;
	/*
	 * Kein z-index hier (08.09.2026). Mit einem Wert am Elternteil bilden
	 * die Spalten einen eigenen Stapelkontext -- alles darin liegt dann
	 * ueber der orangen Flaeche, auch das Maskottchen. Den Vorrang braucht
	 * nur der Text, der steht weiter unten.
	 */
}

.k-kids-hero__text {
	position: relative;
	z-index: 2;
}

/* Das Maskottchen sitzt rechts und liegt HINTER der orangen Flaeche.
   Die Hoehe muss durch beide Ebenen durchgereicht werden -- Spalte und
   Bildrahmen -- sonst hat das Bild nichts, worauf sich seine Hoehe bezieht. */
.k-kids-hero__figure {
	position: absolute;
	inset: 0 0 0 40%;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	/*
	 * Ohne diese Zeile erbt die Spalte die Breite 100 Prozent. Bei einem
	 * absolut gesetzten Kasten schlaegt eine gesetzte Breite das rechte
	 * inset -- die Flaeche war dadurch so breit wie der ganze Kopf, und
	 * das mittig gehaltene Maskottchen rutschte aus dem Bild. Mit auto
	 * spannt sie zwischen den beiden insets auf (08.09.2026).
	 */
	width: auto !important;
	/*
	 * Und eine Obergrenze: Der Kopf laeuft jetzt ueber die volle Breite,
	 * ohne Deckel waere das Maskottchen auf einem 2100er Schirm ueber
	 * 1200 Pixel gross und oben wie unten angeschnitten.
	 */
	/*
	 * Der Tiger steht mittig in der freien Flaeche rechts der orangen
	 * Schraege (Wunsch 08.09.2026). Die Schraege endet unten bei 55
	 * Prozent, ab dort ist Platz; innerhalb dieses Streifens zentriert
	 * ihn das flex-Layout der Spalte von selbst.
	 */
	left: 55%;
	right: 0;
	max-width: none;
}

.k-kids-hero__figure .wp-block-image {
	/* Groesser und hoeher gestellt (08.09.2026): Der Tiger sass mittig in
	   der Flaeche und wirkte dadurch klein und tief. */
	max-width: 1120px;
	margin-inline: auto !important;
	/*
	 * Die Vergroesserung laeuft ueber scale, nicht ueber die Breite: Das
	 * Bild sitzt in einem Kasten mit voller Kopfhoehe und wird von
	 * object-fit eingepasst -- eine groessere max-width bringt deshalb
	 * nichts, solange die Hoehe der engere Wert ist. Mit scale waechst es
	 * darueber hinaus und wird unten sauber vom Kopf beschnitten.
	 */
	transform: translateY(-7%) scale(1.25);
}

.k-kids-hero__figure .wp-block-image {
	margin: 0 !important;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-kids-hero__kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	opacity: 0.85;
}

.k-kids-hero__kicker::before {
	content: "";
	width: 3rem;
	height: 2px;
	background: currentColor;
	flex: none;
	opacity: 0.7;
}

.k-kids-hero__text p:not(.k-kids-hero__kicker) {
	opacity: 0.9;
}

/* Der Knopf steht dunkel auf Orange und faehrt beim Ueberfahren durch */
.k-kids-hero__cta .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.k-kids-hero__cta .wp-block-button__link {
	transition: color 0.3s ease;
}




/* Das Maskottchen ist freigestellt und darf ueber die Spalte hinausragen */
.k-kids-hero__figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 3rem;
	display: block;
	/* Die Maskottchen sind nicht freigestellt, sie haben einen weissen Grund.
	   Multiplizieren laesst das Weiss auf der weissen Flaeche verschwinden,
	   ohne die Bilder nachbearbeiten zu muessen. */
	mix-blend-mode: multiply;
}

@media (max-width: 781px) {
	.k-kids-hero {
		min-height: 0;
	}

	.k-kids-hero::before {
		inset: auto 0 0 0;
		width: 100%;
		height: 58%;
		clip-path: none;
	}

	.k-kids-hero .wp-block-columns {
		flex-direction: column-reverse;
	}

	.k-kids-hero__figure {
		position: static;
		inset: auto;
	}

	.k-kids-hero__figure img {
		max-width: 320px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Kids-Seite, uebrige Abschnitte

   Das orange Band lief im Original als Endlosschleife durch. Hier stehen die
   vier Zusagen fest nebeneinander -- eine Laufschrift waere zwar als CSS-
   Animation machbar, verschiebt aber bei jeder Breite anders und laesst sich
   im Editor nicht sinnvoll bearbeiten.
   --------------------------------------------------------------------------- */

.k-kids-band__reihe {
	justify-content: space-between;
	row-gap: 0.75rem;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.k-kids-band__punkt {
	align-items: center;
	flex-wrap: nowrap;
}

.k-kids-band .k-icon,
.k-kids-vorteile .k-icon,
.k-kids-mit .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

/* Die Symbole im Band stehen auf Orange und brauchen Weiss statt Akzentfarbe */
.k-kids-band .k-icon img {
	filter: brightness(0) invert(1);
}

/* Karten heben sich beim Ueberfahren leicht an, wie auf der Startseite */
.k-kids-karte {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k-kids-karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(16, 26, 45, 0.08);
}

.k-kids-karte:hover h3 {
	color: var(--wp--preset--color--orange) !important;
}

.k-kids-zahl {
	border-left: 4px solid rgba(255, 163, 71, 0.4);
}

.k-kids-zahl__wert {
	line-height: 1;
}

.k-kids-ansatz__figure img,
.k-kids-schluss__figure img {
	width: 100%;
	height: auto;
	display: block;
}

.k-kids-ansatz__figure img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.k-kids-schluss__figure img {
	max-width: 420px;
	margin-left: auto;
}

/* Was brauche ich: Bild links, dahinter ein versetzter Rahmen in Orange,
   rechts die vier Punkte als Liste mit Haken statt als Karten. */
.k-kids-mit__figure {
	position: relative;
}

.k-kids-mit__figure::after {
	content: "";
	position: absolute;
	inset: 0.75rem -0.75rem -0.75rem 0.75rem;
	border: 2px solid var(--wp--preset--color--orange);
	opacity: 0.2;
	z-index: -1;
	pointer-events: none;
}

.k-kids-mit__figure img {
	mix-blend-mode: multiply;
	width: 100%;
	max-width: 520px;
	height: auto;
	display: block;
	margin: 0 auto;
	object-fit: contain;
}

/* Das Haken-Quadrat bleibt quadratisch und waechst nicht mit der Spalte */
.k-kids-mit__zeile.wp-block-columns {
	flex-wrap: nowrap !important;
	align-items: flex-start;
}

.k-kids-mit__haken.wp-block-column {
	flex-grow: 0 !important;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.35rem;
}

.k-kids-mit__haken .k-icon {
	margin: 0 !important;
	line-height: 0;
}

.k-kids-mit__text h3 {
	line-height: 1.2;
}

@media (max-width: 781px) {
	.k-kids-zahl {
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		padding-top: var(--wp--preset--spacing--30);
	}

	.k-kids-zahl:first-child {
		border-top: none;
		padding-top: 0;
	}

	.k-kids-schluss__figure img {
		max-width: 260px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Trainer einer Sparte (trainer-spotlight)

   Abweichung vom Original: dort fahren Erfahrung und Schwerpunkt erst beim
   Ueberfahren der Karte ein. Hier stehen sie fest unter dem Bild. Auf
   Touch-Geraeten gibt es kein Ueberfahren, die Angaben waeren dort sonst
   ueberhaupt nicht erreichbar.
   --------------------------------------------------------------------------- */

.k-spot__betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

/*
 * Raster statt Spalten. Als flex-Reihe blies WordPress die letzte Karte auf
 * die ganze Zeilenbreite auf, sobald sie allein stehen blieb -- auf der
 * Karate-Seite war Hayo dadurch 1377 Pixel breit neben Kacheln von 256.
 * Im Raster behaelt eine einzelne Karte die Breite ihrer Spalte.
 */
.k-spot__reihe.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: stretch;
}

.k-spot__person {
	display: flex;
	flex-direction: column;
	/* Im Raster gibt die Spalte die Breite vor. Eine eigene Mindestbreite
	   wuerde die Spur sprengen, sobald mehr Karten hineinpassen als 240er. */
	min-width: 0;
}

/* Das Bild zoomt beim Ueberfahren leicht, wie auf der Startseite */
.k-spot__bild {
	overflow: hidden;
}

.k-spot__bild .wp-block-cover__image-background {
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-spot__person:hover .k-spot__bild .wp-block-cover__image-background {
	transform: scale(1.05);
}

.k-spot__bild h3 {
	line-height: 1.1;
}

.k-spot__angaben {
	flex: 1;
}

.k-spot__zeile {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.k-spot .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

/* ---------------------------------------------------------------------------
   Die drei Saeulen (karate-saeulen) und die vier Schritte (schritte)
   --------------------------------------------------------------------------- */

.k-saeulen__betont {
	color: var(--wp--preset--color--blue);
}

/* Drei Karten auf dunklem Grund. Der Rahmen ist nur angedeutet, beim
   Ueberfahren hebt sich die Karte und der Rahmen nimmt die Akzentfarbe an. */
.k-saeule.wp-block-column {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

.k-saeule:hover {
	transform: translateY(-6px);
	border-color: rgba(122, 181, 255, 0.4);
	background: rgba(122, 181, 255, 0.06);
}

/* Titel links, Symbol rechts im Kasten */
.k-saeule__kopf {
	align-items: center;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.k-saeule__symbol.wp-block-image {
	margin: 0 !important;
	width: 3.5rem;
	height: 3.5rem;
	background: rgba(122, 181, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: background-color 0.4s ease;
}

.k-saeule:hover .k-saeule__symbol.wp-block-image {
	background: rgba(122, 181, 255, 0.22);
}

.k-saeule__symbol img {
	display: block;
}

.k-saeule__kopf h3 {
	line-height: 1;
}

.k-schritte__betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

.k-schritte__reihe {
	position: relative;
}

/* Verbindungslinie auf Hoehe der Symbolkaesten, laeuft hinter ihnen durch */
.k-schritte__reihe::before {
	content: "";
	position: absolute;
	top: 2.75rem;
	left: 12%;
	right: 12%;
	height: 1px;
	background: var(--wp--preset--color--gray-200);
	z-index: 0;
}

.k-schritt {
	position: relative;
	z-index: 1;
}

.k-schritt__kopf {
	position: relative;
	height: 5.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-schritt__nr {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-25%, -50%);
	line-height: 1;
	opacity: 0.35;
	pointer-events: none;
	user-select: none;
}

/* Der weisse Kasten liegt ueber der Ziffer und traegt das Symbol. Der
   Aussenabstand muss auto bleiben, sonst rutscht der Kasten aus der Mitte --
   die Klasse aligncenter zentriert genau darueber. */
.k-schritt__symbol.wp-block-image {
	position: relative;
	z-index: 1;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 4.5rem;
	height: 4.5rem;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 20px rgba(16, 26, 45, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.k-schritt:hover .k-schritt__symbol.wp-block-image {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(16, 26, 45, 0.12);
}

.k-schritt__symbol img {
	display: block;
}

.k-schritte__cta {
	justify-content: center;
}


/* ---------------------------------------------------------------------------
   Fragen je Sparte (faq) und Abschluss der Angebotsseiten (offer-cta)
   --------------------------------------------------------------------------- */

.k-offer-cta {
	position: relative;
	overflow: hidden;
}

/* Sehr dezenter Schimmer in der Akzentfarbe ueber dem dunklen Grund */
.k-offer-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--k-accent, var(--wp--preset--color--blue));
	opacity: 0.05;
	pointer-events: none;
}

.k-offer-cta > * {
	position: relative;
	z-index: 1;
}

.k-offer-cta__betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

.k-offer-cta__text {
	max-width: 46rem;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Der helle Knopf faehrt beim Ueberfahren in der Akzentfarbe durch */
.k-offer-cta__knopf .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 0;
	transition: color 0.3s ease;
}





/* ---------------------------------------------------------------------------
   Kids: Video, Vorbereitungspunkte, Abschluss und Bewegung

   Die Bewegungen laufen ueber scrollgesteuerte CSS-Animationen, nicht ueber
   JavaScript. Browser ohne Unterstuetzung und Nutzer mit reduzierter Bewegung
   sehen die Inhalte sofort und vollstaendig.
   --------------------------------------------------------------------------- */

/* Die Filmklappe sitzt in einem runden Kasten -- die einzige runde Form im
   ganzen Theme, so wie im Original. */
.k-kids-video__klappe.wp-block-image {
	margin: 0 !important;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-kids-video__klappe img {
	display: block;
}

.k-kids-video__hinweis {
	opacity: 0.6;
}

.k-kids-video__player {
	margin: 0 !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.k-kids-video__player video {
	width: 100%;
	height: auto;
	display: block;
}

.k-kids-video__player video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}

/* Vorbereitungspunkte: Haken links, daneben Titel und direkt darunter der Text */
.k-kids-mit__punkt {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.k-kids-mit__haken.wp-block-image {
	margin: 0 !important;
	width: 2rem;
	height: 2rem;
	flex: none;
	background: var(--wp--preset--color--orange);
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-kids-mit__inhalt {
	flex: 1;
}

.k-kids-mit__inhalt h3 {
	line-height: 1.2;
}

/* Abschluss: der Knopf ist orange, die zweite Zeile der Schlagzeile ebenso */
.k-kids-schluss__betont {
	color: var(--wp--preset--color--orange);
}

.k-kids-knopf .wp-block-button__link {
	position: relative;
	overflow: hidden;
	z-index: 0;
}



.k-kids-schluss__figure img {
	mix-blend-mode: multiply;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-left: auto;
	display: block;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/*
		 * Die Parallaxe am Bildtrenner ist am 04.09.2026 abgeschaltet
		 * worden. Sie brauchte dreissig Prozent Ueberschuss in der Hoehe,
		 * und dieser Ueberschuss ist eine Vergroesserung: das Bild stand
		 * zu gross im Rahmen und wirkte hineingezoomt. Der Trenner traegt
		 * jetzt genau das Format seines Bildes und zeigt es unveraendert.
		 *
		 * Das war die zweite von zwei Stellen. Die andere steht weiter
		 * unten im Abschnitt "Bildtrenner: Parallax" -- wer die Bewegung
		 * zurueckholen will, muss beide anfassen.
		 *
		 * .k-divider .wp-block-cover__image-background {
		 *     height: 130%;
		 *     top: -15%;
		 *     animation: k-parallax linear both;
		 *     animation-timeline: view();
		 *     animation-range: entry 0% exit 100%;
		 * }
		 */

		/* Die vier Vorbereitungspunkte laufen versetzt ein */
		.k-kids-mit__punkt {
			animation: k-einlauf linear both;
			animation-timeline: view();
		}

		.k-kids-mit__punkt:nth-of-type(1) { animation-range: entry 10% entry 45%; }
		.k-kids-mit__punkt:nth-of-type(2) { animation-range: entry 10% entry 55%; }
		.k-kids-mit__punkt:nth-of-type(3) { animation-range: entry 10% entry 65%; }
		.k-kids-mit__punkt:nth-of-type(4) { animation-range: entry 10% entry 75%; }
	}
}

@keyframes k-parallax {
	from { transform: translateY(-6%); }
	to   { transform: translateY(6%); }
}

@keyframes k-einlauf {
	from { transform: translateY(2.5rem); opacity: 0.25; }
	to   { transform: translateY(0); opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Nur im Editor: das Titelfeld erbt sonst die Groesse der Seitenueberschrift
   und wirkt dort wuchtiger als der eigentliche Inhalt.

   Die Bindung an .editor-styles-wrapper ist wichtig. .wp-block-post-title ist
   KEINE reine Editorklasse -- sie steht genauso auf der Ueberschrift eines
   Beitrags im Frontend. Ohne die Einschraenkung faerbt diese Regel jede
   Beitragsueberschrift grau und nimmt ihr die Versalien, und zwar mit
   !important, also gegen jede Farbwahl im Block. Aufgefallen ist das lange
   nicht, weil es keinen einzigen Beitrag gab.
   --------------------------------------------------------------------------- */

.editor-post-title,
.editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
	font-size: 1.75rem !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--wp--preset--color--gray-600) !important;
}

/* ---------------------------------------------------------------------------
   Schlichter Seitenkopf (page-hero) und Produktraster (merch-raster)
   --------------------------------------------------------------------------- */

.k-page-hero {
	position: relative;
	overflow: hidden;
	margin-block-start: 0 !important;
	/*
	 * Ruhigerer Verlauf. Vorher lief er vom vollen navy-light (#1E3A8A) bis
	 * 85 Prozent, das war ein sehr heller Kern auf dunklem Rand. Jetzt startet
	 * die Mitte auf einem gedaempften Blau und ist bei 75 Prozent im Dunkeln
	 * -- naeher an der Schraege des Startseiten-Kopfes, die schon bei 70
	 * Prozent durch ist und deshalb ruhiger wirkt.
	 *
	 * Der erste Wert ist die Rueckfallebene fuer Browser ohne color-mix.
	 */
	background: radial-gradient(circle at 50% 45%, #182B60 0%, var(--wp--preset--color--navy) 75%);
	background: radial-gradient(circle at 50% 45%,
		color-mix(in srgb, var(--wp--preset--color--navy-light) 55%, var(--wp--preset--color--navy)) 0%,
		var(--wp--preset--color--navy) 75%);
	min-height: 46vh;
	/* Untereinander, nicht nebeneinander. Ohne flex-direction stehen Kicker,
	   Ueberschrift und Fliesstext in einer Reihe -- der Kicker links, der Text
	   rechts der Ueberschrift. Gemeint war immer die Abfolge von oben nach
	   unten; align-items zentriert dann waagerecht, justify-content senkrecht. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.k-page-hero > * {
	width: 100%;
}

.k-page-hero__betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

.k-page-hero__text {
	max-width: 44rem;
	margin-left: auto !important;
	margin-right: auto !important;
	opacity: 0.75;
}

/* Produktraster: vier Karten je Reihe, ohne Skript sind alle sichtbar */
.k-merch__filter {
	gap: 0.75rem;
}

.k-merch__knopf {
	border: 1px solid var(--wp--preset--color--gray-200);
	color: var(--wp--preset--color--gray-600);
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
	user-select: none;
}

.k-merch__knopf:hover {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

.k-merch__knopf.is-aktiv {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-merch__raster {
	gap: var(--wp--preset--spacing--40);
	align-items: stretch;
}

.k-merch__karte {
	flex: 1 1 calc(25% - var(--wp--preset--spacing--40));
	min-width: 240px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--gray-200);
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.k-merch__karte:hover {
	border-color: rgba(122, 181, 255, 0.5);
	box-shadow: 0 20px 60px -15px rgba(30, 58, 138, 0.15);
}

.k-merch__karte.is-versteckt {
	display: none;
}

.k-merch__bild {
	margin: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--gray-50);
}

.k-merch__bild img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-merch__karte:hover .k-merch__bild img {
	transform: scale(1.05);
}

.k-merch__text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.k-merch__fuss {
	margin-top: auto;
	align-items: center;
	flex-wrap: nowrap;
}

@media (max-width: 781px) {
	.k-merch__karte {
		flex-basis: calc(50% - var(--wp--preset--spacing--40));
		min-width: 0;
	}
}

/* Hervorgehobener Teil einer Schlagzeile. Nimmt die Akzentfarbe des
   umgebenden Abschnitts an, damit ein Baustein fuer alle Sparten reicht. */
.k-betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

/* ---------------------------------------------------------------------------
   Vorteile der Sparte (vorteile) und einzelner Trainer (trainer-einzeln)
   --------------------------------------------------------------------------- */

.k-vorteil.wp-block-column {
	border: 1px solid var(--wp--preset--color--gray-200);
	transition: box-shadow 0.3s ease;
}

.k-vorteil:hover {
	box-shadow: 0 20px 50px -20px rgba(16, 26, 45, 0.18);
}

/* Das Symbol sitzt in einem Kasten in der Akzentfarbe der Sparte */
.k-vorteil__symbol.wp-block-image {
	margin: 0 !important;
	width: 4rem;
	height: 4rem;
	background: var(--k-accent, var(--wp--preset--color--blue));
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.k-vorteil:hover .k-vorteil__symbol.wp-block-image {
	transform: scale(1.1);
}

.k-vorteil__symbol img {
	display: block;
}

/* Einzelner Trainer: jede zweite Einbindung spiegelt Text und Bild */
.k-einzel.is-gespiegelt .k-einzel__reihe {
	flex-direction: row-reverse;
}

.k-einzel__bild {
	overflow: hidden;
}

.k-einzel__bild .wp-block-cover__image-background {
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-einzel__person:hover .k-einzel__bild .wp-block-cover__image-background {
	transform: scale(1.04);
}

.k-einzel__zeile {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.k-einzel .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

@media (max-width: 781px) {
	.k-einzel.is-gespiegelt .k-einzel__reihe {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------------
   Alle Tarife mit Umschalter (preise-tarife)

   Ohne Skript stehen beide Gruppen untereinander. Erst wenn das Skript laeuft,
   setzt es die Klasse is-geschaltet und blendet die nicht gewaehlte Gruppe aus.
   So sieht niemand eine leere Flaeche, falls JavaScript nicht ankommt.
   --------------------------------------------------------------------------- */

.k-tarife__reiter {
	justify-content: center;
	background: var(--wp--preset--color--gray-200);
	padding: 0.25rem;
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: 0;
}

.k-tarife__knopf {
	cursor: pointer;
	color: var(--wp--preset--color--gray-600);
	transition: background-color 0.3s ease, color 0.3s ease;
	user-select: none;
}

.k-tarife__knopf.is-aktiv {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-tarife__gruppe {
	align-items: stretch;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--40);
}

.k-tarife.is-geschaltet .k-tarife__gruppe {
	display: none;
	margin-bottom: 0;
}

.k-tarife.is-geschaltet .k-tarife__gruppe.is-aktiv {
	display: flex;
}

/* Eine Tarifkarte */
.k-tarif {
	flex: 0 1 340px;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.k-tarif:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 60px -15px rgba(30, 58, 138, 0.15);
}

/* Der Haupttarif ist hervorgehoben und traegt einen dunklen Kopf */
.k-tarif.is-haupt {
	transform: scale(1.04);
}

.k-tarif.is-haupt:hover {
	transform: scale(1.06) translateY(-4px);
}

.k-tarif.is-haupt .k-tarif__kopf {
	background: var(--wp--preset--color--navy);
}

/* Der Preis auf der dunklen Hauptkarte steht weiss. Der Name nicht mehr --
   er traegt seit dem 04.09.2026 die Farbe seines Angebots, siehe unten. */
.k-tarif.is-haupt .k-tarif__preis {
	color: var(--wp--preset--color--white);
}

.k-tarif.is-haupt .k-tarif__beschr,
.k-tarif.is-haupt .k-tarif__zusatz p {
	color: rgba(255, 255, 255, 0.75);
}

.k-tarif__kopf {
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.k-tarif__kopf h3 {
	color: var(--wp--preset--color--navy);
	line-height: 1.1;
}

.k-tarif__beschr {
	color: var(--wp--preset--color--gray-600);
}

.k-tarif__preis {
	color: var(--wp--preset--color--navy);
	line-height: 1;
}

/* Preis ohne Zahl ("auf Anfrage"): kleines Etikett ueber dem Wort, statt
   das Wort gross wie eine Zahl zu setzen. Der Absatz behaelt die Hoehe der
   Zahlenzeile (1em seiner eigenen Schriftgroesse bei Zeilenhoehe 1), die
   beiden Zeilen sitzen unten darin -- so bleiben die Knoepfe neben
   "20 € / Monat" auf einer Linie (14.10.2026). */
.k-tarif__preis--text {
	height: 1em;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.k-tarif__preis-etikett {
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gray-600);
	line-height: 1;
	margin-bottom: 0.35rem;
}

.k-tarif__preis-wort {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.05;
	white-space: nowrap;
}

.k-tarif__zeitraum {
	font-size: 0.4em;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.k-tarif__zusatz {
	align-items: center;
	flex-wrap: nowrap;
}

.k-tarif__zusatz p {
	color: var(--wp--preset--color--gray-600);
}

.k-tarif__rumpf {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Aufkleber und Knopf tragen die Farbe des jeweiligen Tarifs */
.k-tarif__aufkleber {
	display: inline-block;
	width: fit-content;
	padding: 0.25rem 0.6rem;
	color: var(--wp--preset--color--white);
}

/*
 * Nur der Aufkleber, nicht jedes Element mit k-farbe-*. Die Regel stand
 * frueher ohne Einschraenkung da und faerbte damit auch Spalten und
 * Knoepfe -- der Kids-Knopf im Kopfbereich war deshalb orange gefuellt,
 * obwohl er als Kontur gebaut ist.
 *
 * Und in der gedeckten Fassung, weil weisse Schrift darauf steht: auf dem
 * hellen Gruen stand sie bei 1,4 zu 1.
 */
/* Die Farbe des Aufklebers steht am Ende der Datei, im Knopf-Abschnitt. */

.k-tarif__knopf .wp-block-button__link {
	width: 100%;
}


/*
 * Hier stand ein filter: brightness(0.92). Der stammte aus der Zeit, als der
 * Tarifknopf dauerhaft farbig war und beim Ueberfahren nachdunkeln sollte.
 * Seit die Farbe einfaehrt, hat er sie um acht Prozent verschmutzt -- Lila
 * kam als (104, 90, 212) heraus statt als (113, 98, 231). Beim Aufraeumen der
 * Knopfregeln ist er durchgerutscht, weil dort nur Flaeche, Schrift und Rand
 * gesucht wurden, keine Filter.
 */

.k-tarif__zeile {
	align-items: center;
	flex-wrap: nowrap;
}

.k-tarif__zeile p {
	color: var(--wp--preset--color--gray-600);
}

/* Der Haken sitzt in einem gruenen Quadrat, wie im Original */
.k-tarif__haken.wp-block-image {
	margin: 0 !important;
	width: 1rem;
	height: 1rem;
	flex: none;
	background: var(--wp--preset--color--health);
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-tarif__einmalig {
	margin-top: auto !important;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: var(--wp--preset--spacing--30);
}

.k-tarif__einmalig summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--gray-600);
}

.k-tarif__einmalig p {
	color: var(--wp--preset--color--gray-600);
}

@media (max-width: 781px) {
	.k-tarif,
	.k-tarif.is-haupt {
		flex-basis: 100%;
		transform: none;
	}

	.k-tarif.is-haupt:hover,
	.k-tarif:hover {
		transform: translateY(-4px);
	}
}

/* ---------------------------------------------------------------------------
   Vereinsseite: Werte, Zahlen, Zeitleiste, Erfolge, Galerie und Standort
   --------------------------------------------------------------------------- */

/* Gruenderstory: versetzter Rahmen und Jahreszahl am Bild */
.k-gruender__figure {
	position: relative;
}

.k-gruender__figure::after {
	content: "";
	position: absolute;
	inset: 1rem -1rem -1rem 1rem;
	border: 2px solid var(--wp--preset--color--blue);
	opacity: 0.2;
	z-index: -1;
	pointer-events: none;
}

.k-gruender__jahr {
	position: absolute;
	top: 1.5rem;
	right: -0.75rem;
	z-index: 2;
	width: fit-content;
}

/* Zitat mit grossem Anfuehrungszeichen im Hintergrund */
.k-zitat {
	position: relative;
	overflow: hidden;
}

.k-zitat::before {
	content: "„";
	position: absolute;
	top: -2rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 900;
	font-size: clamp(12rem, 22vw, 20rem);
	line-height: 1;
	color: rgba(16, 26, 45, 0.03);
	pointer-events: none;
	user-select: none;
}

.k-zitat > * {
	position: relative;
	z-index: 1;
}

/* Werte: Karten auf dunklem Grund */
.k-wert.wp-block-column {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease;
}

.k-wert:hover {
	background: rgba(255, 255, 255, 0.1);
}

.k-wert__symbol.wp-block-image {
	margin: 0 !important;
	width: 3.5rem;
	height: 3.5rem;
	background: rgba(122, 181, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.k-wert:hover .k-wert__symbol.wp-block-image {
	background: rgba(122, 181, 255, 0.2);
}

/* --- Kennzahlen: Zahl, Beschriftung, Strich ------------------------------
 *
 * Der Strich sass zwischen Zahl und Beschriftung und trennte damit zwei
 * Angaben, die zusammengehoeren -- "30" und "Jahre Erfahrung" sind ein
 * Satz. Er steht jetzt unter beiden und schliesst die Kennzahl ab.
 */
.k-vzahl__wert {
	line-height: 1;
	margin-bottom: 0.35rem !important;
}

.k-vzahl p:not(.k-vzahl__wert) {
	position: relative;
	margin-top: 0 !important;
	padding-bottom: 1rem;
}

.k-vzahl p:not(.k-vzahl__wert)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2rem;
	height: 4px;
	background: var(--wp--preset--color--blue);
}

/* Zeitleiste: senkrechte Linie mit Punkten */
.k-zeitleiste__strang {
	position: relative;
	padding-left: 3rem;
}

.k-zeitleiste__strang::before {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 1px;
	background: rgba(16, 26, 45, 0.1);
}

.k-station {
	position: relative;
}

.k-station::before {
	content: "";
	position: absolute;
	left: -2.75rem;
	top: 0.25rem;
	width: 1.15rem;
	height: 1.15rem;
	background: var(--wp--preset--color--blue);
}

/* Erfolge: zwei Karten je Reihe, Symbol links */
.k-erfolge__intro {
	max-width: 40rem;
}

.k-erfolge__raster {
	align-items: stretch;
}

.k-ehrung {
	flex: 1 1 calc(50% - var(--wp--preset--spacing--40));
	min-width: 280px;
	align-items: flex-start;
	flex-wrap: nowrap;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 0.3s ease;
}

.k-ehrung:hover {
	background: rgba(255, 255, 255, 0.1);
}

.k-ehrung__symbol.wp-block-image {
	margin: 0 !important;
	width: 4rem;
	height: 4rem;
	flex: none;
	background: rgba(122, 181, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.k-ehrung:hover .k-ehrung__symbol.wp-block-image {
	background: rgba(122, 181, 255, 0.2);
}

.k-ehrung__text {
	flex: 1;
}

.k-ehrung__text h3 {
	line-height: 1.2;
}

/* Galerie als Mosaik */
.k-galerie__raster {
	align-items: stretch;
}

.k-galerie__bild.wp-block-image {
	margin: 0 !important;
	flex: 1 1 calc(25% - var(--wp--preset--spacing--20));
	min-width: 180px;
	overflow: hidden;
}

.k-galerie__bild.is-gross  { flex-basis: calc(50% - var(--wp--preset--spacing--20)); }
.k-galerie__bild.is-breit  { flex-basis: calc(50% - var(--wp--preset--spacing--20)); }

.k-galerie__bild img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-galerie__bild.is-gross img,
.k-galerie__bild.is-hoch img {
	aspect-ratio: 1 / 1;
}

.k-galerie__bild:hover img {
	transform: scale(1.08);
}

/* Standort */
.k-standort__karte.wp-block-column {
	min-height: 22rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.k-standort__zeile {
	align-items: center;
	flex-wrap: nowrap;
}

.k-standort__symbol.wp-block-image,
.k-standort .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

.k-standort__knopf .wp-block-button__link {
	transition: background-color 0.3s ease;
}


.k-standort__knopf-hell .wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease;
}


@media (max-width: 781px) {
	.k-ehrung,
	.k-galerie__bild.wp-block-image,
	.k-galerie__bild.is-gross,
	.k-galerie__bild.is-breit {
		flex-basis: 100%;
		min-width: 0;
	}

	.k-gruender__jahr {
		right: 0;
	}
}

/* ---------------------------------------------------------------------------
   Kontakt mit Formular (kontakt-formular)

   Die Formularfelder kommen vom Plugin. Damit sie nicht wie ein Fremdkoerper
   wirken, werden sie hier auf die Gestaltung des Themes gezogen: harte Ecken,
   heller Grund, Rahmen erst beim Hineinklicken.
   --------------------------------------------------------------------------- */

.k-kontakt__kicker {
	display: inline-block;
	width: fit-content;
	background: rgba(122, 181, 255, 0.1);
}

.k-kontakt__kachel {
	align-items: flex-start;
	flex-wrap: nowrap;
	border: 1px solid transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.k-kontakt__kachel:hover {
	background: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--gray-200);
	box-shadow: 0 20px 50px -20px rgba(16, 26, 45, 0.15);
}

.k-kontakt__symbol.wp-block-image {
	margin: 0 !important;
	width: 3rem;
	height: 3rem;
	flex: none;
	background: rgba(122, 181, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.k-kontakt__kachel a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.k-kontakt__kachel a:hover {
	color: var(--wp--preset--color--blue);
}

.k-kontakt__karte.wp-block-column {
	box-shadow: 0 25px 70px -20px rgba(16, 26, 45, 0.18);
	border: 1px solid var(--wp--preset--color--gray-200);
}

.k-kontakt__datenschutz a {
	color: var(--wp--preset--color--blue);
	font-weight: 700;
}

/* --- Formulare: Nachbau des Astro-Entwurfs ------------------------------- */

/*
 * Die Werte stammen eins zu eins aus KontaktPage.tsx. Dort stehen sie als
 * Tailwind-Klassen, hier ausgerechnet:
 *
 *   px-6 py-4      1rem 1.5rem Innenabstand
 *   bg-gray-50     heller Grund im Ruhezustand
 *   border-2       zwei Pixel, im Ruhezustand durchsichtig
 *   focus:...      blauer Rahmen, weisser Grund
 *   font-semibold  600
 *   text-sm        0.875rem, das ist "small" im Theme
 *
 * Fluent Forms bringt eigene Abstaende und Rahmen mit, deshalb durchgehend
 * !important -- die Plugin-Regeln stehen spaeter im Dokument.
 */
.k-kontakt .fluentform input[type="text"],
.k-kontakt .fluentform input[type="email"],
.k-kontakt .fluentform input[type="tel"],
.k-kontakt .fluentform input[type="date"],
.k-kontakt .fluentform input[type="number"],
.k-kontakt .fluentform select,
.k-kontakt .fluentform textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	border-radius: 0 !important;
	border: 2px solid transparent !important;
	background: var(--wp--preset--color--gray-50) !important;
	padding: 0.875rem 1.25rem !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: var(--wp--preset--font-size--small) !important;
	color: var(--wp--preset--color--navy) !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.k-kontakt .fluentform input:focus,
.k-kontakt .fluentform select:focus,
.k-kontakt .fluentform textarea:focus {
	border-color: var(--wp--preset--color--blue) !important;
	background: var(--wp--preset--color--white) !important;
	outline: none !important;
	box-shadow: none !important;
}

/* Der Platzhaltertext ist im Entwurf deutlich blasser als die Eingabe. */
.k-kontakt .fluentform ::placeholder {
	color: #9CA3AF !important;
	font-weight: 500 !important;
	opacity: 1;
}

/* Die Auswahl traegt im Entwurf keinen System-Pfeil, sondern einen eigenen.
   appearance:none nimmt den alten weg, der neue kommt als Hintergrundbild. */
.k-kontakt .fluentform select {
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	padding-right: 3rem !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1.25rem center !important;
}

/* Das Nachrichtenfeld hat im Entwurf vier Zeilen und laesst sich nicht
   ziehen (resize-none). */
.k-kontakt .fluentform textarea {
	resize: none !important;
	min-height: 8.5rem !important;
}

/* Beschriftung: klein, fett, blass, und um 0.5rem eingerueckt (ml-2). */
/* Beschriftung im Stil der Probetrainingsseite des Entwurfs:
   text-xs font-bold text-gray-400 uppercase tracking-wider ml-1.
   Der Entwurf setzt sie auf der Kontaktseite anders (normale Schreibung,
   groesser); vereinheitlicht wurde auf diese Fassung, weil gesperrte
   Grossbuchstaben im ganzen Theme die Regel sind -- Kicker, Knoepfe,
   Tabellenkoepfe. */
.k-kontakt .fluentform .ff-el-input--label label,
.k-kontakt .fluentform label {
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #9CA3AF !important;
	margin-left: 0.25rem !important;
	margin-bottom: 0.5rem !important;
	display: inline-block;
}

/* Das Sternchen fuer Pflichtfelder steht im Entwurf direkt hinter dem Wort. */
.k-kontakt .fluentform .ff-el-is-required.asterisk-right label:after {
	color: #9CA3AF !important;
	font-weight: 700;
}

/* Abstand zwischen den Feldgruppen: space-y-6 im Entwurf. */
.k-kontakt .fluentform .ff-el-group {
	margin-bottom: 1.25rem !important;
}

/* Zwei Felder nebeneinander -- im Entwurf grid sm:grid-cols-2 gap-6.
   Fluent Forms legt dafuer einen Container mit Zellen an. */
.k-kontakt .fluentform .ff-t-container {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem !important;
}

.k-kontakt .fluentform .ff-t-cell {
	padding: 0 !important;
	flex: none !important;
	width: auto !important;
	max-width: none !important;
}

.k-kontakt .fluentform .ff-t-cell .ff-el-group {
	margin-bottom: 0 !important;
}

@media (max-width: 600px) {
	.k-kontakt .fluentform .ff-t-container {
		grid-template-columns: 1fr;
	}
}

/* Der Knopf: volle Breite, navy, beim Ueberfahren blau. Im Entwurf steht ein
   Papierflieger davor -- der kommt hier als Hintergrundbild, weil das Plugin
   den Knopftext selbst setzt. */
.k-kontakt .fluentform .ff-btn-submit {
	box-sizing: border-box;
	border: none !important;
	border-radius: 0 !important;
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--montserrat) !important;
	font-weight: 900 !important;
	font-size: 1.125rem !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 1.25rem 2rem !important;
	width: 100%;
	/* Wie im Entwurf: Symbol und Text als Flex-Paar mittig, dazwischen
	   0.75rem (gap-3). Als Hintergrundbild ging das nicht -- der Text ist
	   zentriert, seine Breite unbekannt, und der Flieger landete mitten im
	   Wort. Der Knopf ist ein button, also traegt er ein Pseudoelement. */
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	transition: background-color 0.3s ease;
}

.k-kontakt .fluentform .ff-btn-submit::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.k-kontakt .fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--blue) !important;
}

/* Fehlermeldungen des Plugins in der Formensprache des Entwurfs. */
.k-kontakt .fluentform .error-text,
.k-kontakt .fluentform .text-danger {
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600 !important;
	margin-left: 0.5rem;
}

.k-kontakt__hinweis a {
	color: var(--wp--preset--color--blue);
	font-weight: 700;
}

/* --- Mitgliedsantrag: Auswahlknoepfe, Kaestchen, Zwischentitel ---------
   Das Antragsformular (Fluent Forms 5) bringt Feldtypen mit, die die
   anderen Formulare nicht haben. Die Beschriftungsregel oben macht jedes
   label klein, grau und gesperrt -- fuer die Optionen der Auswahlknoepfe
   und den Text neben dem Kaestchen wird das hier zurueckgenommen. */
.k-kontakt .fluentform .ff-el-form-check {
	margin: 0 0 0.625rem !important;
}

.k-kontakt .fluentform .ff-el-form-check-label {
	display: flex !important;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 600 !important;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--navy) !important;
	cursor: pointer;
}

.k-kontakt .fluentform .ff-el-form-check-input {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0 !important;
	accent-color: var(--wp--preset--color--navy);
}

/* Einwilligungen: der Text ist laenger und darf ruhiger sein. */
.k-kontakt .fluentform .ff-el-tc .ff_t_c {
	font-weight: 500 !important;
	color: var(--wp--preset--color--gray-600);
}

.k-kontakt .fluentform .ff-el-tc .ff_t_c a {
	color: var(--wp--preset--color--blue);
	font-weight: 700;
}

.k-kontakt .fluentform .ff-el-help-message {
	margin: 0.5rem 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--gray-600);
}

/* Zwischentitel aus den HTML-Bloecken des Formulars. */
.k-kontakt .fluentform .k-antrag__abschnitt {
	margin: 2rem 0 0.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	color: var(--wp--preset--color--navy);
}

/* Die Weiche: wer noch nicht beim Probetraining war, sieht statt der
   Felder diesen Kasten. */
/* Der Antrag in Schritten (assets/js/antrag-schritte.js). Das Skript setzt
   k-antrag--schritte am Formular, blendet Gruppen mit k-antrag__aus aus und
   zeigt Absenden samt Turnstile erst im letzten Schritt. Ohne Skript steht
   alles am Stueck da. */
.k-kontakt .fluentform .k-antrag__aus {
	display: none !important;
}

.k-kontakt .fluentform .k-antrag--schritte .k-antrag__schritt {
	display: none;
}

.k-kontakt .fluentform .k-antrag--schritte:not(.k-antrag--letzter) .ff_submit_btn_wrapper {
	display: none !important;
}

/* Datenschutzsatz und Papier-Link gehoeren zum Absenden, also in den letzten Schritt. */
.k-formularkarte__karte.k-antrag--schritte:not(.k-antrag--letzter) .k-kontakt__datenschutz {
	display: none;
}

/* Fragen, die das Skript selbst beantwortet (minderjaehrig aus dem Geburtsdatum). */
.k-kontakt .fluentform .k-antrag__auto {
	display: none !important;
}

.k-kontakt .fluentform .k-antrag__fortschritt {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

.k-kontakt .fluentform .k-antrag__nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}

.k-kontakt .fluentform .k-antrag__nav[hidden],
.k-kontakt .fluentform .k-antrag__knopf[hidden] {
	display: none;
}

.k-kontakt .fluentform .k-antrag__knopf {
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 0;
	padding: 1rem 2rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.k-kontakt .fluentform .k-antrag__weiter {
	margin-left: auto;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-kontakt .fluentform .k-antrag__weiter:hover {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
}

.k-kontakt .fluentform .k-antrag__zurueck {
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.k-kontakt .fluentform .k-antrag__zurueck:hover {
	background: var(--wp--preset--color--gray-50);
}

.k-kontakt .fluentform .k-antrag--letzter .k-antrag__nav {
	margin-bottom: 1rem;
}

/* Angebotszeilen: Name und Erklaerung links, Preis rechts, Preise
   untereinander. Das Skript zerlegt "Name · Erklaerung · Preis". */
.k-kontakt .fluentform .k-angebot__zeile {
	padding: 0.875rem 1rem;
	border: 2px solid var(--wp--preset--color--gray-200);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.k-kontakt .fluentform .k-angebot__zeile:hover {
	border-color: var(--wp--preset--color--blue);
}

.k-kontakt .fluentform .k-angebot__zeile:has(input:checked) {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--gray-50);
}

.k-kontakt .fluentform .k-angebot {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1rem;
	align-items: baseline;
	flex: 1;
}

.k-kontakt .fluentform .k-angebot__name {
	font-weight: 700;
}

.k-kontakt .fluentform .k-angebot__info {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--preset--color--gray-600);
}

.k-kontakt .fluentform .k-angebot__preis {
	grid-column: 2;
	grid-row: 1;
	font-style: normal;
	font-weight: 900;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
}

.k-kontakt .fluentform .k-antrag__stopp {
	padding: 1.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--blue);
	background: var(--wp--preset--color--gray-50);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray-600);
}

.k-kontakt .fluentform .k-antrag__stopp p {
	margin: 0 0 0.875rem;
}

.k-kontakt .fluentform .k-antrag__stopp p:last-child {
	margin: 0;
}

.k-kontakt .fluentform .k-antrag__stopp strong {
	color: var(--wp--preset--color--navy);
}

.k-kontakt .fluentform .k-antrag__stopp-link,
:is(.k-kontakt, .k-vollantrag) .k-antrag__download {
	display: inline-block;
	padding: 0.875rem 1.5rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.k-kontakt .fluentform .k-antrag__stopp-link:hover,
:is(.k-kontakt, .k-vollantrag) .k-antrag__download:hover {
	background: var(--wp--preset--color--blue);
}

/* Dankeseite nach dem Absenden: Fluent Forms setzt sie in .ff-message-success. */
:is(.k-kontakt, .k-vollantrag) .ff-message-success {
	border: none !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke h3 {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
	color: var(--wp--preset--color--navy);
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke p {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray-600);
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke a:not(.k-antrag__download) {
	color: var(--wp--preset--color--blue);
	font-weight: 700;
}

/* Feierlichere Dankeseite (18.10.2026): Haken-Abzeichen, Konfetti, Schrittliste.
   Text kommt aus tools/mitgliedsantrag-einrichten.py (dankeseite). */
:is(.k-kontakt, .k-vollantrag) .k-antrag__danke {
	position: relative;
	text-align: center;
	padding-top: 0.5rem;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__haken {
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--blue) url("assets/icons/check-weiss.svg") center / 2.25rem no-repeat;
	box-shadow: 0 0 0 0.5rem rgba(122, 181, 255, 0.2);
	animation: k-haken-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-zeile {
	margin: 0 0 0.25rem !important;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue) !important;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke .k-antrag__download {
	margin: 0.5rem 0 1.5rem;
	padding: 1rem 1.75rem;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-schritte {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.5rem 1.25rem 2.75rem;
	background: var(--wp--preset--color--gray-50);
	border-left: 4px solid var(--wp--preset--color--blue);
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray-600);
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-schritte li {
	margin: 0 0 0.5rem;
	padding-left: 0.25rem;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-schritte li:last-child {
	margin-bottom: 0;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-schritte li::marker {
	font-weight: 900;
	color: var(--wp--preset--color--navy);
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke-schritte strong {
	color: var(--wp--preset--color--navy);
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__danke .k-antrag__danke-klein {
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

/* Konfetti: 14 Schnipsel fallen einmal vom oberen Rand, dann sind sie weg. */
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti {
	position: absolute;
	inset: -1rem 0 auto;
	height: 16rem;
	overflow: hidden;
	pointer-events: none;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span {
	position: absolute;
	top: -1rem;
	width: 0.5rem;
	height: 0.875rem;
	opacity: 0;
	animation: k-konfetti 1.8s ease-in 0.15s 1 both;
}

:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(4n+1) { background: var(--wp--preset--color--blue); }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(4n+2) { background: var(--wp--preset--color--orange); }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(4n+3) { background: var(--wp--preset--color--navy); }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(4n+4) { background: var(--wp--preset--color--health); border-radius: 50%; width: 0.6rem; height: 0.6rem; }

:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(1)  { left: 6%;  animation-delay: 0.10s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(2)  { left: 13%; animation-delay: 0.35s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(3)  { left: 20%; animation-delay: 0.05s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(4)  { left: 27%; animation-delay: 0.45s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(5)  { left: 34%; animation-delay: 0.20s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(6)  { left: 41%; animation-delay: 0.55s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(7)  { left: 48%; animation-delay: 0.00s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(8)  { left: 55%; animation-delay: 0.30s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(9)  { left: 62%; animation-delay: 0.15s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(10) { left: 69%; animation-delay: 0.50s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(11) { left: 76%; animation-delay: 0.25s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(12) { left: 83%; animation-delay: 0.40s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(13) { left: 90%; animation-delay: 0.10s; }
:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti span:nth-child(14) { left: 96%; animation-delay: 0.60s; }

@keyframes k-konfetti {
	0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
	80%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(15rem) rotate(540deg); }
}

@keyframes k-haken-pop {
	0%   { transform: scale(0.3); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	:is(.k-kontakt, .k-vollantrag) .k-antrag__konfetti { display: none; }
	:is(.k-kontakt, .k-vollantrag) .k-antrag__haken { animation: none; }
}

/* Nach dem Absenden gehoeren Datenschutzsatz und Papier-Link nicht mehr dazu. */
.k-formularkarte__karte:has(.k-antrag__danke) .k-kontakt__datenschutz {
	display: none;
}

/* ---------------------------------------------------------------------------
   Beitragsliste (news-liste)

   Nutzt die Abfrage-Schleife von WordPress. Neue Beitraege erscheinen damit
   ohne Bauschritt -- der Verein schreibt sie einfach im Adminbereich.
   --------------------------------------------------------------------------- */

.k-news__liste {
	gap: var(--wp--preset--spacing--40) !important;
}

.k-news__karte {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k-news__karte:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(16, 26, 45, 0.18);
}

.k-news__bild {
	margin: 0 !important;
	overflow: hidden;
}

.k-news__bild img {
	width: 100%;
	display: block;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-news__karte:hover .k-news__bild img {
	transform: scale(1.05);
}

.k-news__text {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.k-news__text .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

/*
 * Die Ueberschrift faerbte sich beim Ueberfahren blau. Die Karte hebt sich
 * dabei ohnehin an, wirft einen Schatten und zoomt ihr Bild -- drei
 * Hinweise darauf, dass hier etwas anklickbar ist, sind genug. Der
 * Farbwechsel kam als vierter dazu und zog den Blick auf die Schrift statt
 * auf die Karte.
 */

.k-news__text .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--30);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.k-news__blaettern {
	gap: var(--wp--preset--spacing--30);
}

.k-news__blaettern a,
.k-news__blaettern span {
	font-weight: 700;
	color: var(--wp--preset--color--gray-600);
}

.k-news__blaettern .current {
	color: var(--wp--preset--color--navy);
}

/* Verweis unter jeder Angebotskachel, im Original schon im Ruhezustand da */
.k-angebot__mehr a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	opacity: 0.85;
	transition: opacity 0.3s ease, gap 0.3s ease;
}

.k-angebot__mehr a::after {
	content: "→";
	transition: transform 0.3s ease;
}

.k-card:hover .k-angebot__mehr a {
	opacity: 1;
	gap: 0.7rem;
}

/* Der zweite Verweis unter jedem Tarifknopf */
.k-tarif__zweitlink {
	text-align: center;
}

.k-tarif__zweitlink a {
	color: var(--wp--preset--color--gray-600);
	text-decoration: underline;
	transition: color 0.3s ease;
}

.k-tarif__zweitlink a:hover {
	color: var(--wp--preset--color--navy);
}

/* --- Anfahrt zu den Hallen ----------------------------------------------- */

/* Drei Karten nebeneinander, jede mit Bild oben und Inhalt darunter. Bewusst
   ohne eingebettete Karte: es laedt beim Aufruf nichts von einem Dritten,
   damit braucht die Seite dafuer kein Zustimmungsfenster. Der Weg nach
   draussen passiert erst, wenn jemand auf "Route planen" drueckt. */
.k-anfahrt__karte.wp-block-column {
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--gray-200);
	/* Statt eines Fotos ein farbiger Streifen oben, in der Farbe der Sparte,
	   die in dieser Halle trainiert. Es gibt nur ein einziges Hallenbild im
	   Theme; dreimal dasselbe Foto sah aus, als waeren alle drei Hallen
	   dieselbe. */
	border-top: 4px solid var(--k-akzent, var(--wp--preset--color--blue));
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.k-anfahrt__karte.k-farbe-blue    { --k-akzent: var(--wp--preset--color--blue); }
.k-anfahrt__karte.k-farbe-orange  { --k-akzent: var(--wp--preset--color--orange); }
.k-anfahrt__karte.k-farbe-health  { --k-akzent: var(--wp--preset--color--health); }
.k-anfahrt__karte.k-farbe-defense { --k-akzent: var(--wp--preset--color--defense); }

/* Die allgemeine Regel .k-farbe-* faerbt jedes Element flaechig ein. Auf der
   Karte ist nur der obere Rand gemeint, der Grund bleibt weiss. */
.k-anfahrt__karte.k-farbe-blue,
.k-anfahrt__karte.k-farbe-orange,
.k-anfahrt__karte.k-farbe-health,
.k-anfahrt__karte.k-farbe-defense {
	background-color: var(--wp--preset--color--white) !important;
}

.k-anfahrt__karte:hover {
	box-shadow: 0 1.25rem 2.5rem rgba(16, 26, 45, 0.12);
	transform: translateY(-3px);
}

/* Der Kicker traegt die Farbe der Halle statt durchgehend Blau. */
.k-anfahrt__karte .k-anfahrt__kicker {
	color: var(--k-akzent, var(--wp--preset--color--blue)) !important;
}

/* Der Inhalt fuellt den Rest, damit die Knoepfe aller drei Karten auf einer
   Linie stehen -- auch wenn die Texte unterschiedlich lang sind. */
.k-anfahrt__inhalt {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Der Grund fuer das unruhige Bild vorher: Ein eingegrenztes Layout gibt jedem
 * Kind `margin-inline: auto`. Anschrift, Parkhinweis und Kursliste standen
 * deshalb mittig, jede Zeile an einer anderen Stelle beginnend. Bei drei
 * Karten nebeneinander ergibt das einen ausgefransten Block.
 *
 * Linksbuendig beginnen alle Zeilen an derselben Kante, und die Symbole
 * fluchten untereinander.
 */
.k-anfahrt__inhalt > * {
	margin-inline: 0 !important;
	width: 100%;
}

/*
 * Aufklapper und Knopf sitzen als Einheit am Kartenboden. Vorher hing nur der
 * Knopf unten -- der Aufklapper folgte dem Text darueber und sass deshalb bei
 * jeder Karte auf einer anderen Hoehe, je nachdem ob der Parkhinweis eine oder
 * zwei Zeilen brauchte.
 */
.k-anfahrt__inhalt > .k-anfahrt__weg {
	margin-top: auto !important;
}

.k-anfahrt__inhalt > .wp-block-buttons {
	margin-top: 0;
}

.k-anfahrt__zeile {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.k-anfahrt__symbol.wp-block-image,
.k-anfahrt .k-icon {
	margin: 0 !important;
	line-height: 0;
	flex: none;
}

/* Aufklapper im gleichen Stil wie die FAQ, nur kleiner. */
.k-anfahrt__weg summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--navy);
	list-style: none;
}

.k-anfahrt__weg summary::-webkit-details-marker {
	display: none;
}

.k-anfahrt__weg summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.15rem;
	text-align: center;
	font-weight: 400;
	border: 1px solid rgba(16, 26, 45, 0.15);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.k-anfahrt__weg[open] summary::after {
	transform: rotate(45deg);
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

.k-anfahrt__knopf .wp-block-button__link {
	transition: background-color 0.3s ease;
}


@media (max-width: 781px) {
	.k-anfahrt__karte.wp-block-column {
		flex-basis: 100% !important;
	}
}

/*
 * Der Aufnahmeantrag als PDF. Seit dem 16.09.2026 als Schritt 2 in der linken
 * Spalte auf Navy, nicht mehr als Nachsatz unter dem Formular -- das
 * Online-Formular ist nur die Anfrage, Mitglied wird man mit dem Papier.
 */
.k-kontakt__papier {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.k-kontakt__papier a {
	color: var(--wp--preset--color--white) !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	font-weight: 700;
	transition: color 0.3s ease;
}

.k-kontakt__papier a:hover {
	color: var(--wp--preset--color--gray-200) !important;
}

/* ========================================================================== */
/* Feinschliff der Startseite, 22.08.2026                                     */
/* ========================================================================== */

/* --- Kennzahlen im Kopfbereich ------------------------------------------- */

/* Zahl und Beschriftung gehoeren zusammen. Der Abstand kam vom Blockabstand
   der Spalte, nicht von den Absaetzen selbst -- deshalb hier und nicht im
   Muster. */
.k-hero .k-stats .wp-block-column > p:first-child {
	line-height: 0.95;
	margin-bottom: 0 !important;
}

.k-hero .k-stats .wp-block-column > p + p {
}

/* --- Knoepfe: beide gleich gross ----------------------------------------- */

/* Der Umriss-Knopf trug seinen Rahmen zusaetzlich zum Innenabstand und war
   dadurch groesser als der gefuellte. Beide bekommen jetzt dieselbe Breite
   und dieselbe Hoehe, der Rahmen zaehlt nach innen. */
.k-hero .wp-block-button__link,
.k-cta .wp-block-button__link {
	box-sizing: border-box;
	min-width: 15.5rem;
	padding-top: 0.95rem;
	padding-bottom: 0.95rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}

/* --- Farbflaeche, die beim Ueberfahren einfaehrt -------------------------- */

/* Nachbau des SlashButton aus dem Astro-Projekt: eine schraege Flaeche faehrt
   von links ein, der Text bleibt darueber lesbar.
   Der Text eines Knopfes ist ein blosser Textknoten und laesst sich nicht
   selbst hochlegen. Deshalb bekommt der Knopf mit "isolation" einen eigenen
   Stapelraum; die Flaeche liegt darin auf -1 und damit ueber der Grundfarbe
   des Knopfes, aber unter dem Text. */
.k-slash .wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: padding 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.k-slash .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -20%;
	width: 140%;
	z-index: -1;
	background: var(--wp--preset--color--blue);
	transform: translateX(-100%) skewX(-12deg);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-slash .wp-block-button__link:hover::before,
.k-slash .wp-block-button__link:focus-visible::before {
	transform: translateX(0) skewX(-12deg);
}

.k-slash .wp-block-button__link:hover {
	transform: scale(1.02);
}


.k-slash .wp-block-button__link:active {
	transform: scale(0.98);
}

/* Der gefuellte Knopf ist navy, die Flaeche blau -- der Text bleibt weiss.
   Beim Umriss-Knopf steht dunkler Text auf Weiss, der beim Einfahren auf
   Weiss wechseln muss, sonst verschwindet er auf der blauen Flaeche. */
.k-slash.is-style-outline .wp-block-button__link {
	transition: padding 0.3s ease, transform 0.3s ease, color 0.3s ease;
}


/* Wer weniger Bewegung eingestellt hat, bekommt den Farbwechsel ohne Fahrt. */
@media (prefers-reduced-motion: reduce) {
	.k-slash .wp-block-button__link::before {
		transition: none;
		transform: translateX(-100%) skewX(-12deg);
	}
	.k-slash .wp-block-button__link:hover::before {
		transform: translateX(0) skewX(0);
	}
	.k-slash .wp-block-button__link:hover {
		transform: none;
	}
}

/* --- Dein Einstieg: schmalere, gleich hohe Textspalten -------------------- */

/* Die Texte sollen ungefaehr so breit laufen wie die laengste Ueberschrift
   ("Probetraining besuchen") und nicht ueber die ganze Spalte. balance
   verteilt die Zeilen gleichmaessig, statt eine kurze letzte stehen zu
   lassen. */
.k-ablauf .k-step p:last-child,
.k-ablauf .k-step__text {
	max-width: 20rem;
	margin-left: auto !important;
	margin-right: auto !important;
	text-wrap: balance;
}

/* --- Trainerteam: Bildgroesse ------------------------------------------- */

/* Die Spaltenzahl steht weiter unten unter "Trainerteam: vier je Reihe".
   Hier stand sie frueher auch, wurde von dort aber ueberschrieben. */
.k-trainer .wp-block-column {
	min-width: 0;
}

.k-trainer .k-person {
	min-height: 300px !important;
}

@media (max-width: 1100px) {
	.k-trainer .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.k-trainer .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--30)) !important;
	}
	.k-trainer .k-person {
		min-height: 300px !important;
	}
}

@media (max-width: 600px) {
	.k-trainer .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* --- Bildtrenner: Parallax ----------------------------------------------- */

/* Wie die uebrigen Bewegungen im Theme scrollgesteuert und ohne JavaScript.
   Der Ueberschuss fuer die Verschiebung steckt seit dem 04.09.2026 in der
   Hoehe des Bildes und nicht mehr in scale(1.35). Das Vergroessern zog das
   Bild in beide Richtungen auf und schnitt dadurch auch links und rechts
   je siebzehn Prozent ab -- gewollt war nur die Bewegung nach oben und
   unten. Gleiche Loesung wie am Sparten-Kopf. */
@keyframes k-parallax {
	from {
		transform: translateY(-8%);
	}
	to {
		transform: translateY(8%);
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Die Spur gehoert an den Trenner, nicht an das Bild: das Bild liegt im
		   Cover-Block absolut und hat dadurch keine eigene Sichtbarkeitsspur.
		   Benannte Spur am Container, das Bild greift sie ab. */
		.k-divider {
			view-timeline-name: --k-divider-spur;
			view-timeline-axis: block;
		}

		/*
		 * Wieder an seit dem 04.09.2026, diesmal ohne Zoom.
		 *
		 * Der erste Anlauf hatte das Bild auf 130 Prozent gestreckt -- das
		 * ist eine Vergroesserung, und genau die fiel als "reingezoomt"
		 * auf. Jetzt liefert das Bild den Weg selbst mit: Der Rahmen ist
		 * 16:5, die Datei 16:6, also exakt zwanzig Prozent hoeher. Das
		 * Bild steht in seiner echten Groesse im Rahmen und wandert
		 * innerhalb seines eigenen Ueberschusses.
		 *
		 * Wer das Trennerbild austauscht, muss es deshalb auf 16:6
		 * zuschneiden -- sonst fehlt der Weg und es wird wieder gestreckt.
		 */
		.k-divider .wp-block-cover__image-background {
			height: 120%;
			top: -10%;
			animation: k-parallax linear both;
			animation-timeline: --k-divider-spur;
			animation-range: cover 0% cover 100%;
			will-change: transform;
		}
	}
}

/* --- Noch Fragen: der ganze Streifen klappt auf --------------------------- */

/* Der Innenabstand sass am details, der anklickbare Bereich aber nur am
   summary darin. Wer den Rand traf, loeste nichts aus. Jetzt traegt das
   summary den Abstand und fuellt damit den ganzen Streifen. */
.k-faq__item {
	padding: 0 !important;
}

.k-faq__item summary {
	padding: var(--wp--preset--spacing--40);
}

.k-faq__item > *:not(summary) {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.k-faq__item > *:last-child:not(summary) {
	padding-bottom: var(--wp--preset--spacing--40);
}

/* --- Trainingszeiten: alles enger zusammen -------------------------------- */

/* Zwischen Wochentag und Uhrzeit sowie zwischen Bezeichnung und Trainer stand
   je ein voller Blockabstand plus ein eigener Aussenabstand. Zusammen war das
   so viel, dass der Plan nicht mehr auf einen Bildschirm passte. */
.k-zeiten__zeile.wp-block-columns {
	margin-top: 0.45rem !important;
}

.k-zeiten__zeile .wp-block-column {
	padding-top: 0.85rem !important;
	padding-bottom: 0.85rem !important;
}

.k-zeiten__wann > * + *,
.k-zeiten__was > * + * {
	margin-top: 0 !important;
}

.k-zeiten__wann > p:first-child {
	margin-bottom: 0.15rem !important;
}

.k-zeiten__was > h3 {
	margin-bottom: 0.2rem !important;
	line-height: 1.2;
}

.k-zeiten__meta {
	row-gap: 0.25rem;
}

/* --- Fussbereich: Kontaktzeilen und Netzwerke enger ----------------------- */

/* Der Abstand kam vom Blockabstand der Spalte und addierte sich auf die
   Aussenabstaende der Zeilen. Erst beides zusammen wird es eng. */
.k-fuss .wp-block-column > * + * {
	margin-block-start: 0 !important;
}

.k-fuss__zeile {
	margin-bottom: 0.55rem !important;
}

.k-fuss__zeile:last-child {
	margin-bottom: 0 !important;
}

/* Ohne Nummer unter Einstellungen > Vereinsdaten bleibt der Absatz leer,
   dann soll auch das Telefon-Icon nicht allein stehen. */
.k-fuss__telefon:has(p:empty) {
	display: none;
}

.k-fuss__liste li {
	margin-bottom: 0.45rem;
}


/* --- Preisbereich zweispaltig -------------------------------------------- */

/* Links Ueberschrift, Umschalter und Vorteile, rechts die Karten -- wie im
   Astro-Entwurf. Vorher stand alles zentriert untereinander. */
.k-tarife__raster.wp-block-columns {
	align-items: flex-start;
}

.k-tarife__intro {
	padding-top: var(--wp--preset--spacing--20);
}

/* In der schmaleren Spalte muessen drei Karten nebeneinander passen. Die
   Karte durfte vorher 340px breit werden, das sprengt hier die Zeile. */
.k-tarife__karten .k-tarif {
	flex: 1 1 0;
	min-width: 0;
}

.k-tarife__karten .k-tarife__gruppe {
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
}

/* Die Hauptkarte waechst -- damit sie die Nachbarn nicht anschneidet, braucht
   die Reihe oben und unten etwas Luft. */
.k-tarife__karten {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.k-tarife__vorteil {
	align-items: center;
}

/* Verweis auf die Angebotsseite, mit Pfeil im Kaestchen wie im Original. */
.k-tarife__mehr a {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}

.k-tarife__mehr a::after {
	content: "→";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid currentColor;
	font-size: 0.85rem;
	transition: transform 0.3s ease;
}

.k-tarife__mehr a:hover {
	color: var(--wp--preset--color--blue);
}

.k-tarife__mehr a:hover::after {
	transform: translateX(3px);
}

/* --- Tarifkarten: kompakter und die Hauptkarte deutlicher ---------------- */

.k-tarif__kopf {
	padding: var(--wp--preset--spacing--40) !important;
}

.k-tarif__rumpf {
	padding: var(--wp--preset--spacing--40) !important;
}

.k-tarif__zeile {
	margin-bottom: 0.35rem;
}

/* Der Haupttarif war nur leicht groesser. Jetzt traegt er zusaetzlich den
   tieferen Schatten aus dem Original und hebt sich klar ab. */
.k-tarif.is-haupt {
	box-shadow: 0 24px 48px -12px rgba(16, 26, 45, 0.28);
	z-index: 2;
}

.k-tarif.is-haupt:hover {
	box-shadow: 0 28px 60px -12px rgba(16, 26, 45, 0.34);
}

@media (max-width: 1100px) {
	.k-tarife__karten .k-tarife__gruppe {
		flex-wrap: wrap;
	}
	.k-tarife__karten .k-tarif {
		flex: 1 1 260px;
	}
	.k-tarif.is-haupt {
		transform: none;
	}
	.k-tarif.is-haupt:hover {
		transform: translateY(-4px);
	}
}

@media (max-width: 781px) {
	.k-tarife__intro.wp-block-column,
	.k-tarife__karten.wp-block-column {
		flex-basis: 100% !important;
	}
	.k-tarife__reiter {
		justify-content: center;
	}
	.k-tarife__mehr {
		text-align: center !important;
	}
}

/* --- Nachbesserungen 22.08.2026, zweiter Durchgang ----------------------- */

/* Der Kids-Knopf war im Astro-Entwurf orange. Meine Regel hatte allen
   Knoepfen dieselbe blaue Flaeche gegeben. */
/* Beim Umriss-Knopf faerbt sich nur die Kontur, nicht die Flaeche. Eine
   einfahrende Farbflaeche gibt es hier bewusst nicht -- der Knopf soll der
   zurueckhaltende von beiden bleiben. */
.k-hero .is-style-outline.k-slash .wp-block-button__link::before {
	display: none;
}

.k-hero .is-style-outline.k-slash .wp-block-button__link {
	transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}


/* Merkmale in den Tarifkarten standen zentriert. Ursache ist die bekannte
   Falle: ein eingegrenztes Layout gibt jedem Kind margin-inline auto, und in
   einer Flex-Zeile schrumpft das auf die Inhaltsbreite und rueckt in die
   Mitte. Gegenmittel ist margin-inline, nicht text-align. */
.k-tarif__zeile.wp-block-group,
.k-tarif__zusatz.wp-block-group {
	margin-inline: 0 !important;
	max-width: none !important;
	justify-content: flex-start;
	/* align-items steht bewusst NICHT hier: die senkrechte Ausrichtung kommt
	   aus dem Muster ueber verticalAlignment. Eine Angabe an dieser Stelle
	   hatte genau das ueberschrieben und das Symbol nach oben gezogen. */
}

.k-tarif__haken.wp-block-image {
}

/* Die Karten waren unterschiedlich hoch. Der Rumpf soll den Rest fuellen,
   damit Knopf und Merkmalsliste auf einer Linie stehen. */
.k-tarife__karten .k-tarife__gruppe {
	align-items: stretch;
}

.k-tarif__rumpf {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Der Aufklapper "Einmalige Kosten" trug noch das Standarddreieck. Jetzt
   dasselbe Pluszeichen wie bei den Fragen, und er sitzt am Kartenboden. */
.k-tarif__einmalig {
	margin-top: auto !important;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: 0.6rem;
}

.k-tarif__einmalig summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	list-style: none;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.k-tarif__einmalig summary::-webkit-details-marker {
	display: none;
}

.k-tarif__einmalig summary:hover {
	opacity: 1;
}

.k-tarif__einmalig summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	line-height: 1.15rem;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0;
	border: 1px solid rgba(16, 26, 45, 0.2);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.k-tarif__einmalig[open] summary::after {
	transform: rotate(45deg);
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}

/* --- Trainerteam: Laufband ------------------------------------------------ */

/*
 * Aufbau wie beim Stimmen- und beim Referenzenband. Die Spur muss max-content
 * breit sein und das eingegrenzte Layout ueberschreiben, sonst deckelt
 * WordPress sie auf 100 Prozent und die Fahrt verschiebt nur die Bandbreite
 * statt der halben Kartenreihe.
 */
.k-trainer__band {
	overflow: hidden;
	/* Luft nach oben und unten, sonst beschneidet der Rahmen den Schatten
	   und die zwei Pixel, um die sich eine Kachel beim Ueberfahren hebt. */
	padding-block: 1rem;
	/*
	 * Harte Kante statt weichem Verlauf, auf Wunsch. Damit das Band bis an
	 * den Bildschirmrand laeuft und nicht am Innenabstand der Sektion endet,
	 * zieht es sich mit negativen Raendern aus dem eingegrenzten Bereich
	 * heraus -- der Innenabstand der Sektion betraegt spacing|40 je Seite.
	 */
	/*
	 * Bis an den Fensterrand. Zwei Fallen dabei: WordPress gibt jedem Kind
	 * eines constrained-Containers margin-inline: auto !important -- ohne
	 * eigenes !important gewinnt das und der Rand bleibt stehen. Und 100vw
	 * zaehlt die Bildlaufleiste mit, dann scrollt die Seite quer. Deshalb
	 * negativer Rand in Hoehe des Innenabstands und Breite auto.
	 */
	margin-inline: 0 !important;
	width: auto;
	max-width: none;
}

/*
 * Die Buehne traegt seit dem 04.09.2026 den Ausbruch bis zum Fensterrand und
 * ist der Bezugspunkt der beiden Pfeile. Vorher sass beides am Band selbst --
 * ein Pfeil darin waere beim Blaettern mitgewandert.
 */
.k-trainer__buehne {
	position: relative;
	margin-inline: calc(-1 * var(--wp--preset--spacing--40)) !important;
	width: auto;
	max-width: none;
}

.k-trainer__spur {
	flex-wrap: nowrap !important;
	width: max-content;
	max-width: none !important;
	align-items: stretch !important;
	gap: var(--wp--preset--spacing--30) !important;
}

/* Feste Kachelbreite -- im Band koennen die Spalten nicht mitwachsen */
.k-trainer .wp-block-column {
	flex: 0 0 20rem !important;
	min-width: 0;
}

.k-trainer .k-person {
	min-height: 440px !important;
}

/*
 * Seit dem 04.09.2026 laeuft das Band nicht mehr von selbst, sondern auf
 * Klicken. Grund: Wer sich fuer einen bestimmten Trainer interessiert, kann
 * ihn im laufenden Band nicht in Ruhe ansehen -- und Lucas und Martin, die
 * vorne stehen sollen, waren nach ein paar Sekunden aus dem Bild.
 *
 * Geblaettert wird ueber den nativen Querlauf des Bandes, die Pfeile
 * schieben ihn nur. Damit funktionieren Wischen auf dem Handy, Trackpad
 * und Tastatur ohne eine Zeile JavaScript; das Skript bedient allein die
 * beiden Knoepfe.
 */
.k-trainer__band {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Die Leiste stoert unter den Kacheln. Gewischt und geklickt wird
	   trotzdem, der Inhalt bleibt ueber die Tastatur erreichbar. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Der Einzug haelt die erste Kachel auf der Textkante der Sektion,
	   obwohl das Band selbst bis an den Fensterrand laeuft. */
	scroll-padding-left: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--40);
}

.k-trainer__band::-webkit-scrollbar {
	display: none;
}

.k-trainer .wp-block-column {
	scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.k-trainer__band {
		scroll-behavior: auto;
	}
}

/* --- Trainerband: die beiden Pfeile -------------------------------------- */

/*
 * Sie liegen auf den Bildern, links und rechts, und nicht mehr unter dem
 * Band: dort war der Weg von der Kachel zum Knopf am weitesten. Eckig statt
 * rund, damit sie zu den kantigen Kacheln passen.
 */
.k-trainer__pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--navy);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(16, 26, 45, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.k-trainer__pfeil--zurueck {
	left: var(--wp--preset--spacing--40);
}

.k-trainer__pfeil--vor {
	right: var(--wp--preset--spacing--40);
}

.k-trainer__pfeil:hover:not([disabled]) {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-trainer__pfeil:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

/*
 * Am Anfang und am Ende bleibt der jeweilige Knopf stehen, aber blass und
 * unbedienbar. Ihn auszublenden haette an der Kante ein Loch hinterlassen.
 */
.k-trainer__pfeil[disabled] {
	opacity: 0.3;
	cursor: default;
}

@media (max-width: 600px) {
	/* Auf dem Handy fasst die Hand die Kachel selbst an. Die Knoepfe ruecken
	   enger an den Rand und werden kleiner, damit sie nicht das halbe
	   Portraet verdecken. */
	.k-trainer__pfeil {
		width: 2.5rem;
		height: 2.5rem;
	}
	.k-trainer__pfeil--zurueck {
		left: 0;
	}
	.k-trainer__pfeil--vor {
		right: 0;
	}
}

/* --- Trainingszeiten in den Farben der Sparte ----------------------------- */

/* Die Zeile traegt jetzt je Termin eine eigene Akzentfarbe. Der linke Balken,
   die Ueberschrift beim Ueberfahren und das Symbol richten sich danach. */
.k-zeiten__zeile.k-farbe-blue    { --k-accent: var(--wp--preset--color--blue); }
.k-zeiten__zeile.k-farbe-orange  { --k-accent: var(--wp--preset--color--orange); }
.k-zeiten__zeile.k-farbe-health  { --k-accent: var(--wp--preset--color--health); }
.k-zeiten__zeile.k-farbe-defense { --k-accent: var(--wp--preset--color--defense); }

/* Ohne Ueberfahren war der Balken grau und die Farbe unsichtbar. Jetzt traegt
   ihn jede Zeile dauerhaft, damit die Sparte auf einen Blick erkennbar ist. */
.k-zeiten__zeile.wp-block-columns {
	border-left-color: var(--k-accent, var(--wp--preset--color--gray-200));
}

.k-zeiten__zeile .k-zeiten__was h3 {
	transition: color 0.3s ease;
}

/* --- Zweiter Entwurf fuer die Preise: eine Zeile je Tarif ---------------- */

/* Sechs Zeilen statt zwei mal drei Karten. Der Farbbalken links zeigt die
   Sparte, der Preis steht rechts immer an derselben Stelle -- damit laesst
   sich von oben nach unten vergleichen, ohne zu lesen. */
.k-preisliste__zeile.wp-block-columns {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-200);
	/* Der Streifen traegt die Spartenfarbe dauerhaft, wie bei den
	   Trainingszeiten. Er ist die Zuordnung, nicht die Hervorhebung -- und die
	   Zuordnung gilt auch, wenn niemand mit der Maus darauf steht.
	   Alles andere in der Zeile bleibt navy und faerbt sich erst beim
	   Ueberfahren (--k-jetzt). */
	border-left: 4px solid var(--k-accent, var(--wp--preset--color--navy));
	max-width: 1120px;
	margin-left: auto !important;
	margin-right: auto !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

/*
 * Ruhezustand durchgehend navy auf weiss. Sechs Zeilen untereinander, jede in
 * einer anderen Farbe, ergeben einen unruhigen Flickenteppich -- die Farbe
 * traegt dann keine Bedeutung mehr, sie ist nur noch Dekor.
 *
 * Die Sparte kommt erst beim Ueberfahren. Dann sagt die Farbe etwas: sie zeigt
 * an, welche Zeile gerade gemeint ist.
 */
.k-preisliste__zeile:hover {
	box-shadow: 0 10px 30px rgba(16, 26, 45, 0.09);
	transform: translateY(-2px);
	--k-jetzt: var(--k-accent, var(--wp--preset--color--blue));
	--k-jetzt-zart: var(--k-accent, var(--wp--preset--color--blue));
}

/*
 * Nur EINE Deklaration haengt am Hover: die Variable --k-jetzt auf der Zeile.
 * Alles andere -- Rand, Sparte, Punkte, Knopf -- liest sie bloss.
 *
 * Der erste Anlauf hatte je ein eigenes `.k-preisliste__zeile:hover .kind`
 * fuer jedes Element. Das ist nicht nur laenger, es ist auch anfaellig: jede
 * dieser Regeln kann einzeln von etwas Spaeterem geschlagen werden, und man
 * sucht dann an vier Stellen. So gibt es genau einen Schalter.
 */
.k-preisliste__zeile {
	--k-jetzt: var(--wp--preset--color--navy);
	--k-jetzt-zart: var(--wp--preset--color--gray-600);
}

.k-preisliste__zeile.k-farbe-blue    { --k-accent: var(--wp--preset--color--blue); }
.k-preisliste__zeile.k-farbe-orange  { --k-accent: var(--wp--preset--color--orange); }
.k-preisliste__zeile.k-farbe-health  { --k-accent: var(--wp--preset--color--health); }
.k-preisliste__zeile.k-farbe-defense { --k-accent: var(--wp--preset--color--defense); }

/* Die Zeile 'Mitgliedschaft' oder 'Kurs' ordnet nur ein, sie ist nicht die
   Nachricht. Im Ruhezustand steht sie deshalb blasser als der Name darunter
   und faerbt sich erst beim Ueberfahren mit. */
.k-preisliste__art {
	color: var(--k-jetzt-zart);
	transition: color 0.3s ease;
}

/* Die Merkmalsspalte ist durch feine Linien abgesetzt, damit die drei
   Bereiche der Zeile auseinanderzuhalten sind. */
.k-preisliste__merkmale {
	border-left: 1px solid var(--wp--preset--color--gray-200);
	border-right: 1px solid var(--wp--preset--color--gray-200);
}

.k-preisliste__einheit {
	font-size: 0.42em;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--gray-600);
	white-space: nowrap;
}

/* Ein eingegrenztes Layout zentriert Flex-Kinder. Ohne das hier stuenden
   Preis und Knopf mittig statt rechts. */
.k-preisliste__preis.wp-block-column > * {
	margin-inline: 0 !important;
}

.k-preisliste__knopf .wp-block-button__link {
	padding: 0.7rem 1rem;
	font-size: var(--wp--preset--font-size--x-small);
	white-space: nowrap;
	/* Feste Breite, damit alle Knoepfe an derselben Stelle beginnen und nicht
	   nur an derselben enden. 'Kostenlos testen' ist der laengste Text und
	   gibt das Mass vor. Nebenwirkung, die hier erwuenscht ist: die Betraege
	   links daneben fluchten dadurch ebenfalls. */
	width: 11.5rem;
	text-align: center;
}


.k-preisliste__knopf.k-farbe-blue    { --k-accent: var(--wp--preset--color--blue); }
.k-preisliste__knopf.k-farbe-orange  { --k-accent: var(--wp--preset--color--orange); }
.k-preisliste__knopf.k-farbe-health  { --k-accent: var(--wp--preset--color--health); }
.k-preisliste__knopf.k-farbe-defense { --k-accent: var(--wp--preset--color--defense); }

@media (max-width: 900px) {
	.k-preisliste__zeile.wp-block-columns {
		flex-wrap: wrap !important;
	}
	.k-preisliste__was.wp-block-column,
	.k-preisliste__merkmale.wp-block-column,
	.k-preisliste__preis.wp-block-column {
		flex-basis: 100% !important;
	}
	.k-preisliste__merkmale {
		border-left: none;
		border-right: none;
		border-top: 1px solid var(--wp--preset--color--gray-200);
		border-bottom: 1px solid var(--wp--preset--color--gray-200);
	}
	.k-preisliste__preis.wp-block-column {
		justify-content: space-between;
	}
}

/* --- Beitragsuebersicht (/news/) ----------------------------------------- */

/*
 * Die Karten liegen in einem Grid, das der Query-Block selbst aufspannt
 * (columnCount 3). Die Mindestbreite je Spalte kommt von WordPress und ist
 * mit 12rem zu klein: bei drei Karten auf 1180px entstuende sonst frueh eine
 * vierte Spalte. Deshalb hier eigene Spuren.
 */
.k-news__raster.wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 900px) {
	.k-news__raster.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.k-news__raster.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* Die Karte selbst. flex mit column, damit der Textteil den Rest der Hoehe
   fuellt und die Karten einer Reihe unten buendig abschliessen -- sonst
   haengen bei unterschiedlich langen Auszuegen die Kanten. */
.k-newskarte.wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--gray-200);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.k-newskarte:hover {
	box-shadow: 0 14px 36px rgba(16, 26, 45, 0.12);
	transform: translateY(-3px);
}

.k-newskarte__text.wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Ein eingegrenztes Layout gibt jedem Kind Aussenabstaende und zentriert es.
   Ohne diese Zeile stuenden Kategorie, Titel und Auszug mittig statt links. */
.k-newskarte__text.wp-block-group > * {
	margin-inline: 0 !important;
	width: 100%;
}

/* Das Bild wird beim Ueberfahren der Karte leicht herangezogen. Dieselbe
   Bewegung wie bei den Disziplinkarten auf der Startseite. */
/*
 * Das Bild bestimmt NIE die Hoehe der Karte. Ein hochformatiges Portrait hat
 * sonst die eine Karte doppelt so hoch gemacht wie die daneben, und Titel und
 * Auszug standen quer durcheinander.
 *
 * Die Proportion steht deshalb hier fest, und das Bild wird beschnitten statt
 * eingepasst. Das Blockattribut aspectRatio allein reicht nicht: es setzt die
 * Proportion nur auf dem img, und wenn das Bild aus der Mediathek eine andere
 * mitbringt, gewinnt der Rahmen darum herum.
 */
.k-newskarte__bild,
.k-newskarte__bild.wp-block-post-featured-image {
	aspect-ratio: 3 / 2;
	width: 100%;
	margin: 0 !important;
	overflow: hidden;
	flex: none;
}

.k-newskarte__bild a {
	display: block;
	width: 100%;
	height: 100%;
}

.k-newskarte__bild img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	aspect-ratio: auto !important;
	transition: transform 0.6s ease;
}

.k-newskarte:hover .k-newskarte__bild img {
	transform: scale(1.05);
}

/* Fehlt das Beitragsbild, laesst der Block eine Luecke. Statt einer leeren
   Flaeche bekommt die Karte dann gar kein Bild. */
.k-newskarte__bild:empty {
	display: none;
}

.k-newskarte__titel a {
	text-decoration: none;
	color: inherit;
	line-height: 1.2;
	display: block;
}

/* Zweite Bauart derselben Karte, gleiche Ueberlegung: kein Farbwechsel
   an der Ueberschrift. */

/* Drei Zeilen Auszug reichen. Laengere Texte wuerden die Karten einer Reihe
   unterschiedlich hoch machen, und der Auszug ist ohnehin nur ein Anreisser. */
.k-newskarte__auszug p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.55;
}

/* Der Weiterlesen-Link steht im selben Absatz wie der Auszug. Er wuerde vom
   Abschneiden oben mit verschluckt, deshalb steht er als eigene Zeile.

   margin-top:auto schiebt ihn an den Fuss der Karte. Ohne das sammelt sich
   der Leerraum unter dem Link statt darueber, und die Karte sieht unten
   abgeschnitten aus. */
.k-newskarte__auszug {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.k-newskarte__auszug .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

/* Die Kategorie ist ein Link und kaeme sonst unterstrichen. */
.k-newskarte__meta .wp-block-post-terms a {
	text-decoration: none;
}

.k-newskarte__meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

.k-newskarte__auszug .wp-block-post-excerpt__more-link {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.k-newskarte__auszug .wp-block-post-excerpt__more-link:hover {
	color: var(--wp--preset--color--blue);
}

/* Blaettern: die Zahlen als schlichte Reihe, der aktuelle Wert hervorgehoben. */
.k-news__blaettern {
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}

.k-news__blaettern a {
	text-decoration: none;
	color: var(--wp--preset--color--gray-600);
}

.k-news__blaettern a:hover,
.k-news__blaettern .current {
	color: var(--wp--preset--color--navy);
}

/* --- Ueberschrift eines Beitrags ----------------------------------------- */

/*
 * Der Seitenkopf setzt seine Ueberschrift gross und in Versalien. Das passt
 * fuer "Unser Verein", nicht fuer einen Artikeltitel: "Was beim ersten
 * Training passiert" fuellt so vier Zeilen und schreit den Leser an, bevor er
 * einen Satz gelesen hat.
 *
 * Deshalb hier kleiner, gemischt und mit ausgeglichenem Umbruch. Nur im
 * Beitrag -- Seiten behalten ihren plakativen Kopf.
 */
.k-beitrag__titel.wp-block-post-title {
	font-size: clamp(1.9rem, 3.2vw, 2.85rem) !important;
	line-height: 1.12;
	text-transform: none !important;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/*
 * Der Beitrag steht auf Weiss, ohne dunklen Kopf. Die feste Leiste liegt
 * darueber, deshalb braucht der Textanfang Luft nach oben -- sonst startet er
 * unter der Leiste.
 */
.k-beitrag .k-beitrag__inhalt {
	padding-top: calc(var(--wp--preset--spacing--80) + 4.5rem) !important;
}

/* Kicker und Datum stehen linksbuendig ueber dem Titel, nicht mittig. Ein
   Artikel liest sich von links, kein Grund ihn zu zentrieren. */
.k-beitrag__meta {
	justify-content: flex-start;
}

/*
 * Zwischenueberschriften im Fliesstext deutlich zurueckgenommen. Vorher trugen
 * sie die Auszeichnung der Sektionsueberschriften -- gross, fett, in Versalien.
 * In einem Artikel gliedern sie nur, sie werben nicht. Sie sollen sich vom
 * Absatz abheben und sonst nichts.
 */
.k-beitrag__inhalt .wp-block-post-content h2 {
	font-size: 1.32rem !important;
	line-height: 1.3;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
	color: var(--wp--preset--color--navy);
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--20) !important;
}

.k-beitrag__inhalt .wp-block-post-content h3 {
	font-size: 1.08rem !important;
	font-weight: 800;
	text-transform: none !important;
	letter-spacing: 0;
}

/* Fliesstext: etwas mehr Zeilenabstand als im uebrigen Haus. Ein Artikel wird
   am Stueck gelesen, kein ueberflogener Abschnitt. */
.k-beitrag__inhalt .wp-block-post-content p {
	line-height: 1.75;
	margin-bottom: var(--wp--preset--spacing--30);
}

.k-beitrag__inhalt .wp-block-post-content ul {
	line-height: 1.75;
	margin-block: var(--wp--preset--spacing--30);
}

/* --- Kopfzeile eines Beitrags -------------------------------------------- */

/*
 * Kategorie und Datum stehen in einer Zeile ueber der Ueberschrift. Die
 * Kategorie traegt die Akzentfarbe, das Datum steht daneben zurueck -- es ist
 * die Einordnung, nicht die Nachricht.
 *
 * Achtung bei Farben in Vorlagen: gray-400 gibt es in dieser Palette nicht.
 * Ein Blockattribut mit einem unbekannten Farbnamen faellt still durch, der
 * Text erscheint dann in der Grundfarbe. Nur Namen aus theme.json verwenden.
 */
.k-beitrag__meta .wp-block-post-date {
	opacity: 0.55;
}

/* Ein Punkt trennt beide, aber nur wenn eine Kategorie da ist. Ohne :has
   stuende der Punkt auch vor einem allein stehenden Datum. */
.k-beitrag__meta:has(.wp-block-post-terms) .wp-block-post-date::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--30);
	opacity: 0.6;
}

.k-beitrag__meta .wp-block-post-terms a {
	text-decoration: none;
}

.k-beitrag__meta .wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* Lange Sparten-Namen wie "Selbstverteidigung" liefen aus der Karte heraus und
   wurden mitten im Wort umbrochen. */
.k-tarif__kopf h3 {
	hyphens: auto;
	/* !important ist hier noetig, nicht bequem: der Block traegt "fontSize":"medium",
	   und WordPress gibt die Voreinstellungsklasse .has-medium-font-size selbst
	   mit !important aus. Eine gewoehnliche Regel verliert dagegen immer. */
	font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
	/* Zwei Dinge waren noetig. Erstens: word-break:break-word steht weiter oben
	   global und trennt mitten im Wort, ohne Trennstrich -- aus
	   "Selbstverteidigung" wurde "SELBSTVERTEIDIGUN G".
	   Zweitens: hyphens:auto allein rettet das nicht. Chrome trennt nur, wenn
	   ein Trennwoerterbuch fuer die Sprache vorhanden ist, und darauf ist kein
	   Verlass -- in der Pruefumgebung fehlte es. Deshalb ist die Schrift so
	   bemessen, dass das laengste vorkommende Wort in eine Zeile passt. */
	word-break: normal;
	letter-spacing: 0;
}

/* --- Freigestelltes Motiv im Hero ----------------------------------------- */

/*
 * Der bisherige Aufbau war fuer ein FOTO gedacht: Es liegt hinter einer fast
 * deckenden dunklen Schicht und traegt nur Stimmung bei. Ein Freisteller
 * gehoert stattdessen nach vorn -- er IST das Motiv, keine Tapete.
 *
 * Deshalb hier: keine Toenung darueber, nichts beschneiden, unten buendig.
 * Die Figuren duerfen oben aus der Flaeche herausragen, so wie im
 * Astro-Entwurf.
 */
@media (min-width: 782px) {
	/*
	 * Die Spalte muss ueber die volle Hoehe gehen. Sonst bezieht sich das
	 * `bottom: 0` des Bildes auf die Spalte statt auf den Hero -- und die
	 * Spalte ist mittig ausgerichtet und nur so hoch wie ihr Inhalt. Das
	 * Motiv sass deshalb oben und wurde von der Leiste angeschnitten.
	 */
	/*
	 * Bewusst OHNE position:relative. Damit richtet sich das Motiv am
	 * Kopfbereich selbst aus, nicht an der Spalte -- und `height` bezieht sich
	 * auf die volle Hoehe des Kopfbereichs.
	 *
	 * Die Spalte ist wegen des grossen Innenabstands oben nur gut zwei Drittel
	 * so hoch. Gegen sie gerechnet blieb das Motiv zu klein, egal welchen
	 * Prozentwert man einsetzte.
	 */
	.k-hero__figure:has(.is-freigestellt) {
		align-self: stretch;
		position: static;
	}

	.k-hero__figure .wp-block-image.is-freigestellt {
		z-index: 2;
		top: auto;
		/* Von Hand eingestellt mit ?justieren=1. Die Hoehe fuehrt, nicht die
		   Breite: das Motiv soll den Kopfbereich fuellen, unabhaengig von der
		   Fensterbreite. */
		height: 111.1%;
		right: 331px;
		bottom: -205px;
		/*
		 * Sicherung gegen die Ueberschrift. Die Breite des Motivs haengt an
		 * der Hoehe des Kopfbereichs, nicht an der Fensterbreite -- auf einem
		 * hohen, schmalen Fenster wird es dadurch breiter als der Platz
		 * rechts. Der Deckel bezieht sich auf den Kopfbereich und haelt es
		 * sicher rechts der Textspalte.
		 */
		max-width: 40%;
		width: auto;
		overflow: visible;
	}

	/*
	 * Unter 1800 Pixeln greifen die von Hand eingestellten Werte nicht mehr:
	 * 331 Pixel Abstand von rechts sind auf einem breiten Schirm richtig, auf
	 * 1440 schiebt sich das Motiv damit ueber die Ueberschrift -- gemessen
	 * 307 Pixel Ueberdeckung, das R von SICHER verschwand hinter der
	 * Schulter. Hier wird das Motiv kleiner und rueckt an den Rand.
	 */
	@media (max-width: 1800px) {
		.k-hero__figure .wp-block-image.is-freigestellt {
			height: 92%;
			right: 2%;
			bottom: -40px;
			max-width: 40%;
		}
	}

	/* Die Toenung faellt weg -- sie wuerde das Motiv verschleiern. */
	.k-hero__figure .wp-block-image.is-freigestellt::after {
		display: none;
	}
}

.k-hero__figure .wp-block-image.is-freigestellt img {
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: bottom center;
	/* Ein Freisteller auf dunklem Grund wirkt ohne Abhebung wie aufgeklebt.
	   Der weiche Schatten unter dem Motiv gibt ihm Stand. */
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

/* Auf schmalen Schirmen steht das Motiv unter dem Text statt daneben. */
@media (max-width: 781px) {
	.k-hero__figure .wp-block-image.is-freigestellt {
		position: static;
		width: min(22rem, 80%);
		margin: 0 auto !important;
	}
}

/* --- Siegel im Hero der Startseite ---------------------------------------- */

/*
 * Das Vereinszeichen sitzt unten rechts im Hero, klein und weiss, wie ein
 * aufgedrucktes Siegel. Es traegt keine Aussage, es signiert die Flaeche --
 * deshalb zurueckgenommen und ohne Verweis.
 *
 * Die Datei ist einfarbig dunkel. brightness(0) invert(1) macht daraus reines
 * Weiss, unabhaengig davon, welche Farben im SVG stehen. Dasselbe Verfahren
 * wie bei den Symbolen in den Ablaufkarten.
 */
.k-hero__siegel.wp-block-image {
	position: absolute;
	right: clamp(1.25rem, 4vw, 3rem);
	bottom: clamp(1.25rem, 3vw, 2.25rem);
	/* left:auto und width:max-content sind noetig, sonst spannt der Bildrahmen
	   ueber die ganze Breite und das Bild klebt an dessen linkem Rand -- also
	   ausserhalb des Sichtbaren, obwohl der Rahmen rechts richtig sitzt. */
	left: auto;
	width: max-content;
	max-width: none;
	margin: 0 !important;
	/* Hinter dem Motiv, nicht davor: Der Freisteller steht auf z-index 2. So
	   wirkt das Zeichen wie ein Wasserzeichen auf der Flaeche, statt den
	   Karateka einen Kreis vor die Beine zu legen. */
	z-index: 1;
	pointer-events: none;
}

.k-hero__siegel img {
	/* Das Rundzeichen liegt bereits in Weiss vor. Kein brightness/invert hier --
	   der Filter wuerde den feinen Schriftring nur verwaschen. */
	width: clamp(76px, 8.5vw, 128px) !important;
	height: auto;
	opacity: 0.5;
}

/* Auf schmalen Schirmen wird der Hero eng; dort raubt das Siegel nur Platz. */
@media (max-width: 600px) {
	.k-hero__siegel.wp-block-image {
		display: none;
	}
}

/* --- Beitrag: Brotkrumen, Schlagwoerter, Teilen --------------------------- */

.k-brotkrumen {
	color: var(--wp--preset--color--gray-600);
}

.k-brotkrumen a,
.k-brotkrumen .wp-block-post-terms a {
	color: var(--wp--preset--color--gray-600);
	text-decoration: none;
}

.k-brotkrumen a:hover,
.k-brotkrumen .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

.k-brotkrumen__kategorie {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.k-brotkrumen__pfeil {
	opacity: 0.5;
}

/* Schlagwoerter als kleine Plaketten. Sie stehen unter dem Text, nicht davor:
   beim Lesen helfen sie nicht, beim Weiterstoebern schon. */
.k-schlagworte .wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.k-schlagworte .wp-block-post-terms a {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	background: var(--wp--preset--color--gray-50);
	border: 1px solid var(--wp--preset--color--gray-200);
	color: var(--wp--preset--color--gray-600);
	font-weight: 700;
	text-decoration: none;
}

.k-schlagworte .wp-block-post-terms a:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Trennt die Schlagwoerter des Plugins voneinander -- WordPress setzt dort
   sonst ein Komma zwischen die Verweise. */
.k-schlagworte .wp-block-post-terms__separator {
	display: none;
}

/* Hat der Beitrag keine Schlagwoerter, bleibt sonst eine leere Zeile stehen. */
.k-schlagworte:not(:has(.wp-block-post-terms a)) {
	display: none;
}

.k-teilen {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

.k-teilen__titel {
	margin: 0 0 0.9rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--gray-600);
}

.k-teilen__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.k-teilen__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-200);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
}

.k-teilen__knopf svg {
	flex: none;
}

.k-teilen__knopf:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

@media (max-width: 600px) {
	.k-teilen__knopf span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.k-teilen__knopf {
		padding: 0.7rem;
	}
}

/* --- Weisser Streifen ueber dem dunklen Seitenkopf ------------------------ */

/*
 * WordPress setzt zwischen den Kindern von .wp-site-blocks einen Blockabstand.
 * Der Kopfbereich steht fest (position:fixed) und ist im Fluss zusammen-
 * gefallen -- er ist 0 Pixel hoch. Der Abstand dahinter bleibt aber stehen und
 * schiebt <main> um 32 Pixel nach unten. Dort scheint der weisse Seitengrund
 * durch.
 *
 * Auf hellen Seiten faellt das nicht auf, weiss auf weiss. Ueber einem dunklen
 * Seitenkopf ist es ein deutlicher Streifen. Der Abstand hat nie eine Aufgabe
 * gehabt, weil das Element davor keine Hoehe hat.
 */
.wp-site-blocks > main {
	margin-block-start: 0 !important;
}

/* --- Zwischenueberschriften der Abschnitte -------------------------------- */

/*
 * Die Seite traegt ihren Titel im dunklen Kopf. Eine zweite Ueberschrift
 * gleicher Groesse direkt darunter begruesst den Leser ein zweites Mal, ohne
 * ihm etwas Neues zu sagen. Die Abschnitte bekommen deshalb deutlich kleinere
 * Ueberschriften: der Kopf sagt, wo man ist, die Abschnitte gliedern.
 */
.k-preiszeilen__titel,
.k-zeiten > .wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* --- Tarifzeilen der Preisseite ------------------------------------------ */

/*
 * Das Muster preise-zeilen.php nutzt die Zeilengestaltung von oben. Hier
 * kommt nur dazu, was das Kartenmuster nicht kennt: die Rahmensektion, die
 * Gruppenbeschriftung und die Merkmale als Liste statt als Hakenzeilen.
 *
 * Warum ueberhaupt zwei Preismuster? Auf der Startseite sollen drei Karten
 * neugierig machen, mehr nicht. Auf der Preisseite will man vergleichen -- und
 * was hinter einem Umschalter liegt, wird beim Vergleichen uebersehen. Deshalb
 * stehen dort alle sechs Tarife untereinander offen da.
 */
/* Ohne das hier bleibt in der letzten Zeile oft ein einzelnes Wort stehen.
   text-wrap:balance verteilt die Zeilen gleichmaessig, was bei mittig
   gesetztem Text den groessten Unterschied macht. */
.k-preiszeilen__titel,
.k-preiszeilen__einleitung {
	text-wrap: balance;
	max-width: 52ch;
	margin-inline: auto !important;
}

/* Auf schmalen Schirmen richtet der gesetzte Umbruch mehr Schaden an als
   Nutzen: er erzwingt eine Zeile, die ohnehin nicht passt. */
@media (max-width: 600px) {
	.k-preiszeilen__einleitung br {
		display: none;
	}
}

.k-preiszeilen__gruppe {
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	padding-bottom: 0.6rem;
	max-width: 1120px;
	margin-inline: auto !important;
}

/* Die erste Gruppenbeschriftung braucht oben weniger Luft: darueber steht
   schon der Einleitungssatz der Sektion. */
.k-preiszeilen__gruppe:first-of-type {
	margin-top: var(--wp--preset--spacing--40) !important;
}

/* Die Merkmale stehen als schlichte Zeilen mit einem Punkt davor. Haken wie
   auf den Karten waeren hier zu laut -- sechs Zeilen mal drei Haken ergeben
   achtzehn blaue Punkte auf einem Blick. */
.k-preisliste__merkmal {
	position: relative;
	padding-left: 0.95rem;
	line-height: 1.5;
}

.k-preisliste__merkmal::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--k-jetzt);
}

/* Die einmaligen Kosten stehen kleiner und blasser unter den Merkmalen. Auf
   den Karten liegen sie hinter einem Info-Kreis, hier ist Platz genug, sie
   auszuschreiben. */
.k-preisliste__einmalig {
	font-style: italic;
	opacity: 0.85;
}

/* Der Betrag traegt die Akzentfarbe der Zeile, nicht durchgehend Navy --
   das bindet Preis und linken Rand optisch zusammen. */
.k-preisliste__betrag {
	line-height: 1.05;
}

/* Die Einheit steht immer unter der Zahl, nie daneben.
   Ohne das hier entscheidet die Breite des Knopfes daneben, ob umbrochen wird:
   neben "Platz sichern" passte "€ einmalig" noch in die Zeile, neben dem
   laengeren "Kostenlos testen" rutschte "€ / Monat" darunter. Sechs Zeilen
   untereinander mit zwei verschiedenen Preisformen sehen unsauber aus. */
.k-preisliste__einheit {
	display: block;
	margin-top: 0.15rem;
}


/* --- Kopf des Haupttarifs bündig an den Kartenrand ----------------------- */

/* Im Astro-Entwurf ragt der dunkle Kopf ueber die Kartenraender hinaus. Hier
   sass er mit einem weissen Rand mittendrin, weil das eingegrenzte Layout der
   Karte jedem Kind Aussenabstaende gibt. */
.k-tarif.is-haupt .k-tarif__kopf {
	width: auto;
	/* padding-top NICHT eigens setzen: die gemeinsame Regel oben haelt den
	   Platz fuer den Aufkleber frei. Ein kleinerer Wert hier hat ihn genau auf
	   der Hauptkarte in die Ueberschrift laufen lassen. */
	padding-bottom: var(--wp--preset--spacing--50) !important;
	box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.08);
}

.k-tarif.is-haupt {
	overflow: hidden;
}

/* Der Aufkleber sitzt im dunklen Kopf und braucht daher etwas Abstand nach
   oben, damit er nicht an der Kartenkante klebt. */
.k-tarif.is-haupt .k-tarif__aufkleber {
	margin-top: 0 !important;
}

/* ========================================================================== */
/* Bewegung ueber die ganze Seite                                             */
/* ========================================================================== */

/* Nachbau der Framer-Motion-Eintritte aus dem Astro-Projekt. Dort ist das
   Muster durchgehend: opacity 0 und 20px tiefer, dann auf den Platz, einmalig
   beim Erreichen (viewport once). Hier laeuft es scrollgesteuert und ohne
   JavaScript.
   Unterschied, der bleibt: eine scrollgesteuerte Animation ist an die
   Scrollposition gekoppelt und laeuft beim Zurueckscrollen rueckwaerts. Damit
   das beim Lesen nicht stoert, ist der Bereich eng gewaehlt -- alles ist
   fertig, bevor der Abschnitt die Bildmitte erreicht. */
@keyframes k-einblenden {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Der Kopfbereich steht beim Laden schon im Bild. Eine Sichtbarkeitsspur
   greift dort nicht, deshalb eine gewoehnliche Animation beim Seitenaufbau. */
@keyframes k-hero-auf {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.k-hero .wp-block-column:first-child > * {
		animation: k-hero-auf 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.k-hero .wp-block-column:first-child > *:nth-child(1) { animation-delay: 0.05s; }
	.k-hero .wp-block-column:first-child > *:nth-child(2) { animation-delay: 0.13s; }
	.k-hero .wp-block-column:first-child > *:nth-child(3) { animation-delay: 0.21s; }
	.k-hero .wp-block-column:first-child > *:nth-child(4) { animation-delay: 0.29s; }
	.k-hero .wp-block-column:first-child > *:nth-child(5) { animation-delay: 0.37s; }

	.k-hero__figure {
		animation: k-hero-auf 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
	}

	/*
	 * Nicht auf der Spalte, wenn ein Freisteller darin steht. Die Animation
	 * arbeitet mit transform, und ein transform macht das Element zum
	 * Bezugsrahmen fuer alles, was darin absolut steht -- ganz unabhaengig
	 * von `position`. Das Motiv richtete sich dadurch an der Spalte aus statt
	 * am Kopfbereich und blieb zu klein, egal welche Hoehe man einsetzte.
	 *
	 * Das Einlaufen uebernimmt stattdessen das Bild selbst.
	 */
	.k-hero__figure:has(.is-freigestellt) {
		animation: none;
	}

	.k-hero__figure .wp-block-image.is-freigestellt {
		animation: k-hero-auf 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
	}
}



@keyframes k-von-links {
	from {
		opacity: 0;
		transform: translateX(-1.5rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- Aufkleber in die obere rechte Ecke ---------------------------------- */

.k-tarif {
	position: relative;
}

/* Vorher lief er im Textfluss oben links mit und schob die Ueberschrift nach
   unten. Jetzt sitzt er in der Ecke, wie im Astro-Entwurf. */
.k-tarif__aufkleber {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
	margin: 0 !important;
	padding: 0.4rem 0.9rem;
}

/* Der Aufkleber soll sich an der KARTE ausrichten, nicht am Kopf. Der Kopf
   war bisher selbst positioniert und damit sein Bezugsrahmen -- und weil das
   eingegrenzte Layout ihn ausserdem schmaler macht als die Karte, sass der
   Aufkleber je nach Karte unterschiedlich weit vom Rand. Gemessen: 18px bei
   Karate Kids, 1px bei den anderen. */
.k-tarif__kopf {
	position: static;
	margin-inline: 0 !important;
	max-width: none !important;
	padding-top: 3.4rem !important;
}

/* --- Einmalige Kosten als Info-Kreis ------------------------------------- */

.k-tarif__info {
	margin-top: auto !important;
	/* Das eingegrenzte Layout der Karte gibt jedem Kind margin-inline:auto und
	   rueckt die Zeile damit in die Mitte. Gemessen waren es 26px Einzug. */
	margin-inline: 0 !important;
	max-width: none !important;
	position: relative;
	align-items: center;
	justify-content: flex-start;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	padding-top: 0.7rem;
}

/* Schriftzug und Kreis bilden zusammen den Ausloeser. Als Flex-Zeile stehen
   beide sicher auf einer Mittellinie -- vorher hing der Kreis an einem
   geratenen vertical-align und sass dadurch schief. */
.k-tarif__info-marke {
	color: var(--wp--preset--color--gray-600);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	cursor: help;
}

/* Der Kreis mit dem i haengt am Schriftzug, damit beides zusammen den
   Ausloeser bildet. */
.k-tarif__info-marke::after {
	content: "i";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0;
	line-height: 1;
	cursor: help;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.k-tarif__info:hover .k-tarif__info-marke::after,
.k-tarif__info:focus-within .k-tarif__info-marke::after {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Die Sprechblase liegt ueber der Karte und nimmt keinen Platz im Fluss ein. */
.k-tarif__info-blase {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 0;
	/*
	 * Breite nach dem Text, nicht nach der Karte. Mit "right: 0" war die
	 * Blase so breit wie die Karte; abzueglich ihres Innenabstands blieben
	 * dem Text zu wenige Pixel, und "Aufnahmegebuehr: 20 € (einmalig)"
	 * rutschte mit dem "(einmalig)" in eine zweite Zeile -- aber nur in der
	 * Karte, deren Text am laengsten war. Die uebrigen blieben einzeilig,
	 * und die Blasen sahen unterschiedlich aus.
	 */
	right: auto;
	width: max-content;
	max-width: 20rem;
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.35rem);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	box-shadow: 0 12px 30px rgba(16, 26, 45, 0.25);
	pointer-events: none;
}

/* Jede Angabe bleibt in ihrer Zeile. Zwei Betraege stehen weiterhin
   untereinander, weil sie zwei Absaetze sind. */
.k-tarif__info-blase p {
	white-space: nowrap;
}

/* Kleine Spitze zur Zeile hin */
.k-tarif__info-blase::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 1.4rem;
	border: 0.4rem solid transparent;
	border-top-color: var(--wp--preset--color--navy);
}

.k-tarif__info:hover .k-tarif__info-blase,
.k-tarif__info:focus-within .k-tarif__info-blase {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Ohne Mauszeiger gibt es kein Ueberfahren. Dort stehen die Betraege einfach
   sichtbar unter der Zeile, statt unerreichbar zu bleiben. */
@media (hover: none) {
	.k-tarif__info {
		flex-wrap: wrap !important;
	}

	.k-tarif__info-marke::after {
		display: none;
	}

	.k-tarif__info-blase {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		background: transparent !important;
		padding: 0.35rem 0 0 !important;
		flex-basis: 100%;
	}

	.k-tarif__info-blase::after {
		display: none;
	}

	.k-tarif__info-blase p {
		color: var(--wp--preset--color--gray-600) !important;
	}
}

/* --- Symbole und Text auf einer Linie ------------------------------------ */

/* Zwei Anlaeufe waren noetig, der zweite steht hier:
 *
 * Der eigentliche Fehler lag in .k-icon img -- dort stand die Hoehe fest auf
 * 32px. Wo ein Muster eine andere Breite setzt (die Uhr hat 14px), wirkte das
 * nur auf die Breite, und der Rahmen blieb 32px hoch. Das ist mit height:auto
 * und aspect-ratio behoben.
 *
 * Der Rest ist die Ausrichtung. Der Versuch, den Rahmen ueber min-height:1lh
 * genau eine Textzeile hoch zu machen, greift zu kurz: lh rechnet mit der
 * Zeilenhoehe des Symbols, nicht mit der des Textes daneben -- und die beiden
 * haben unterschiedliche Schriftgroessen. Gemessen blieben so bis zu 4,6px
 * Versatz.
 *
 * Was zuverlaessig funktioniert, ist align-items:center auf der Zeile selbst.
 * Die beiden Zeilen, die das schon hatten, standen als einzige exakt auf 0.
 * Bei ein bis zwei Textzeilen ist das Ergebnis dasselbe wie "mittig auf der
 * ersten Zeile"; nur bei laengeren Texten unterscheidet es sich, deshalb
 * bleibt die Wegbeschreibung in der Anfahrt bewusst aussen vor.
 */
/* Hier stand einmal eine Sammelregel mit align-items:center. Sie war
   wirkungslos: WordPress erzeugt je Flex-Gruppe eine eigene Layout-Klasse und
   gibt sie NACH dem Theme-Stylesheet aus. Bei gleicher Spezifitaet gewinnt
   die spaetere Angabe. Der Wert gehoert deshalb ins Muster
   ("verticalAlignment": "center"), so wie es weiter oben in dieser Datei
   schon fuer die Ausrichtung in der Waagerechten beschrieben ist. */

/* Ausnahme: hier laeuft der Text ueber mehrere Zeilen, dort gehoert das
   Symbol nach oben zur ersten Zeile. */
.k-anfahrt__zeile {
	align-items: flex-start;
}

.k-anfahrt__zeile .k-icon {
	margin-top: 0.15rem !important;
}

/* ========================================================================== */
/* Einblenden beim Scrollen                                                   */
/* ========================================================================== */

/* Zeitbasiert wie im Astro-Projekt, ausgeloest von assets/js/einblenden.js.
 *
 * Vorher lief das ueber animation-timeline: view(). Das haengt an der
 * Scrollposition und hatte zwei Nachteile, die in der Praxis schwer wogen:
 * die Bewegung war fertig, sobald das Element weit genug oben stand -- also
 * bevor man hinsieht -- und sie lief beim Zurueckscrollen rueckwaerts.
 * Firefox konnte sie ohnehin nicht.
 *
 * Jetzt setzt ein IntersectionObserver die Klasse is-da, sobald ein Element
 * ein Stueck weit im Bild ist. Von da an laeuft eine gewoehnliche Transition
 * ab, genau einmal, in jedem Browser gleich.
 *
 * Die Startwerte haengen an .k-auf-bereit am html-Element. Diese Klasse setzt
 * das Skript selbst, als Erstes. Bleibt es aus -- abgeschaltetes JavaScript,
 * Ladefehler, reduzierte Bewegung -- greift keine einzige Regel hier und die
 * Seite steht vollstaendig sichtbar da.
 */
.k-auf-bereit .k-auf {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.k-auf-bereit .k-auf.is-da {
	opacity: 1;
	transform: translateY(0);
}

/* Nach dem Ankommen den Beschleuniger wieder abgeben und den eigenen
   transform loswerden -- sonst blockiert er Effekte beim Ueberfahren, etwa
   das Anheben der Tarifkarten. */
.k-auf-bereit .k-auf.is-da {
	will-change: auto;
}

.k-auf-bereit .k-tarif.k-auf.is-da,
.k-auf-bereit .k-anfahrt__karte.k-auf.is-da,
.k-auf-bereit .k-zeiten__zeile.k-auf.is-da {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.k-auf-bereit .k-auf {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Pfeil statt Ziffer auf den Disziplinkarten -------------------------- */

/* Die Ziffer war reine Zierde. Ein Pfeil nach schraeg oben sagt stattdessen,
   dass es hinter der Karte weitergeht. Er sitzt an derselben Stelle oben
   rechts und ruckt beim Ueberfahren ein Stueck in seine Richtung. */
/* Der Pfeil markiert die Ecke der KARTE, deshalb absolut und nicht im Fluss.
   Im Fluss sass er am Rand des inneren Inhaltsbereichs, und der ist durch das
   eingegrenzte Layout schmaler als die Karte -- gemessen 204px bei deutlich
   breiterer Karte, also je nach Karte 63 bis 186px vom Rand entfernt. */
.k-card,
.k-textkarte {
	position: relative;
}


/* Der Pfeil sitzt im Fluss, genau an der Stelle der frueheren Ziffer.
 *
 * Ein Anlauf mit absoluter Positionierung sollte ihn buendig an die
 * Kartenecke bringen. Dafuer musste der Innenkasten des Cover-Blocks auf
 * static -- und genau der traegt dort die Anordnung des Inhalts. Ergebnis
 * waren Karten ohne Ueberschrift, mit Text am falschen Platz und ohne
 * Abdunklung. Der Gewinn von ein paar Pixeln war das nicht wert; die Ziffer
 * sass vorher an derselben Stelle und hat nie gestoert.
 */
/* Der Inhaltskasten des Cover-Blocks ist enger als die Karte -- gemessen
   204px bei 336px Karte. Der Pfeil sass dadurch mitten im Bild statt in der
   Ecke. Ihn breiter zu machen genuegt; ihn zu ENTPOSITIONIEREN dagegen nicht,
   denn dieser Kasten traegt die Anordnung des Inhalts. Genau das hatte die
   Karten schon einmal zerlegt. */
.k-card > .wp-block-cover__inner-container {
	/* Der Kasten ist ein Flex-Element im Cover und schrumpft sonst auf seine
	   Inhaltsbreite -- gemessen 204px bei 331px Karte. width:100% hilft dort
	   nicht, flex-grow schon. Die Anordnung des Inhalts (unten links) bleibt
	   unberuehrt, im Gegensatz zum frueheren Versuch mit position:static. */
	flex-grow: 1;
	max-width: none !important;
}

.k-card .k-pfeil,
.k-textkarte .k-pfeil {
	align-self: flex-end;
	margin: 0 0 auto !important;
	opacity: 0.55;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.k-card:hover .k-pfeil,
.k-textkarte:hover .k-pfeil {
	opacity: 1;
	transform: translate(3px, -3px);
}

/* --- Dein Einstieg auf dunklem Grund ------------------------------------- */

/* Die grosse Ziffer hinter dem Symbol war auf hellem Grund mit 8 Prozent
   Deckkraft gerade noch zu ahnen. Auf Navy verschwindet sie voellig. */
.k-ablauf .k-step__num {
	opacity: 0.16;
}

/* Die Symbolkaesten stehen dauerhaft in Hellblau mit weissem Symbol. Vorher
   leuchteten sie nacheinander kurz auf -- das lenkte mehr ab, als es half. */
.k-ablauf .k-step__icon .k-icon {
	background: var(--wp--preset--color--blue) !important;
	border-color: transparent;
	box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.45);
}

.k-ablauf .k-step__icon .k-icon img {
	filter: brightness(0) invert(1);
}

.k-ablauf .k-step:hover .k-icon {
	border-color: rgba(122, 181, 255, 0.5);
	box-shadow: 0 18px 30px -8px rgba(0, 0, 0, 0.55);
}


/* --- Schraege im Ablauf: hebt den dritten Schritt heraus ----------------- */

/* Die Flaeche laeuft zwischen Schritt zwei und drei hindurch, sodass
   "Durchstarten" auf eigenem Grund steht. Sie ist heller als die Sektion --
   die steht selbst auf Navy, eine dunkle Flaeche waere unsichtbar.
   Reine Zierde, ohne Inhalt. */
.k-ablauf {
	position: relative;
	overflow: hidden;
}

.k-ablauf::after {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 36%;
	z-index: 0;
	/* Deutlich genug, um den dritten Schritt abzusetzen, aber ruhig genug,
	   dass der weisse Text darauf gut lesbar bleibt. */
	background: linear-gradient(
		155deg,
		rgba(122, 181, 255, 0.2) 0%,
		rgba(122, 181, 255, 0.09) 50%,
		rgba(122, 181, 255, 0.17) 100%
	);
	/* Gemessen: Schritt zwei endet bei 65 Prozent, Schritt drei beginnt bei
	   69. Die Kante laeuft von 70 Prozent oben auf 64 unten und bleibt damit
	   in dieser Luecke -- sie trennt die beiden, ohne einen zu beschneiden. */
	clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}

/* Der Inhalt gehoert darueber, sonst verschwindet er hinter der Flaeche. */
.k-ablauf > * {
	position: relative;
	z-index: 1;
}

/* Auf schmalen Fenstern stehen die Schritte untereinander. Eine senkrechte
   Trennung ergibt dort keinen Sinn mehr. */
@media (max-width: 900px) {
	.k-ablauf::after {
		display: none;
	}
}

/* --- Formular als Karte (Probetraining, Anmeldung) ----------------------- */

/* Der Gegenentwurf zum zweispaltigen Kontaktformular: das Formular steht
   allein in der Mitte. Im Astro-Projekt ist die Probetrainingsseite genauso
   aufgebaut. */
/* Der obere Teil ist dunkel und laeuft schraeg aus, die Karte ragt darueber
   hinweg -- wie im Entwurf. Die Flaeche liegt hinter dem Inhalt, deshalb ein
   Pseudoelement statt einer eigenen Sektion. */
.k-formularkarte {
	position: relative;
	overflow: hidden;
}

.k-formularkarte::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Reicht bewusst ein Stueck in die Karte hinein -- gemessen waren es
	   vorher nur 46px, jetzt rund 110. */
	height: 26rem;
	background: var(--wp--preset--color--navy);
	clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
	z-index: 0;
}

.k-formularkarte > * {
	position: relative;
	z-index: 1;
}

/* Die Ueberschrift ist im Entwurf deutlich zarter als die Theme-Vorgabe:
   dort text-4xl bis text-5xl, also 2.25 bis 3rem. Gemessen kam sie hier auf
   87px, fast das Doppelte. */
.k-formularkarte > h1 {
	font-size: var(--wp--preset--font-size--xx-large) !important;
	line-height: 1.05;
}

/* Kicker, Ueberschrift und Einleitung stehen auf dem Dunklen. */
.k-formularkarte > h1,
.k-formularkarte > h1 .k-betont {
	color: var(--wp--preset--color--white) !important;
}

.k-formularkarte > h1 .k-betont {
	color: var(--wp--preset--color--blue) !important;
}

.k-formularkarte > p:not([class*="k-formularkarte__"]) {
	color: rgba(255, 255, 255, 0.82) !important;
}

.k-formularkarte__karte {
	box-shadow: 0 25px 50px -12px rgba(16, 26, 45, 0.32);
	border: 1px solid var(--wp--preset--color--gray-200);
	position: relative;
	overflow: hidden;
}

/* Das blasse Quadrat in der oberen Ecke stammt aus dem Entwurf -- dort ein
   eigenes div, hier reicht ein Pseudoelement. */
.k-formularkarte__karte::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
	background: rgba(122, 181, 255, 0.07);
	transform: translate(50%, -50%);
	pointer-events: none;
}

.k-formularkarte__karte > * {
	position: relative;
}

/* Die drei Merkmale unter der Karte. */
.k-formularkarte__merkmale {
	align-items: center;
	/* Die drei Merkmale sollen in eine Zeile. Der Inhaltsbereich ist auf
	   720px begrenzt und damit zu schmal -- diese eine Zeile darf breiter
	   werden als der Rest. Weniger Sperrung hilft zusaetzlich. */
	gap: 1.75rem !important;
	max-width: none !important;
	width: 100%;
}

.k-formularkarte__merkmal p {
	letter-spacing: 0.08em !important;
	white-space: nowrap;
}

.k-formularkarte__merkmal {
	align-items: center;
}

.k-formularkarte__merkmal .k-tarif__haken {
	background: var(--wp--preset--color--health);
	padding: 0.2rem;
}

@media (max-width: 600px) {
	.k-formularkarte__karte {
		padding-left: var(--wp--preset--spacing--50) !important;
		padding-right: var(--wp--preset--spacing--50) !important;
	}
}

/* --- Logos im Referenz-Laufband ------------------------------------------ */

/* Die Logos kommen aus verschiedenen Quellen und haben unterschiedliche
   Formate. Eine feste Hoehe bringt sie auf eine Linie, die Breite folgt.
   Auf dem dunklen Grund werden sie weiss eingefaerbt -- so wirkt die Reihe
   ruhig, und bunte Wappen reissen sie nicht auseinander. */
.k-laufband__logo.wp-block-image {
	margin: 0 !important;
	flex: none;
	line-height: 0;
}

.k-laufband__logo img {
	height: 2.6rem;
	width: auto;
	max-width: 11rem;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.75;
	transition: opacity 0.3s ease;
}

.k-laufband__logo:hover img {
	opacity: 1;
}

@media (max-width: 600px) {
	.k-laufband__logo img {
		height: 2rem;
	}
}

/* --- Leiste auf der Startseite: oben durchsichtig ------------------------- */

/* Nur auf der Startseite. Dort liegt hinter der Leiste die weisse Flaeche des
   Kopfbereichs, die dunklen Menuepunkte bleiben also lesbar. Auf den
   Unterseiten waere das nicht so -- das Probetraining etwa beginnt dunkel. */
.k-leiste-bereit .home .k-nav {
	background: transparent;
	box-shadow: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.k-leiste-bereit.k-gescrollt .home .k-nav {
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 3px rgba(16, 26, 45, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.k-leiste-bereit .home .k-nav {
		transition: none;
	}
}

/* --- Leiste auf Seiten mit dunklem Kopf ---------------------------------- */

/* Dieselbe Mechanik wie auf der Startseite, nur mit hellen Menuepunkten:
   Der Kopfbereich reicht unter die Leiste, sie liegt also auf Navy. Sobald
   gescrollt wird, wird sie weiss und die Punkte kehren zu Dunkel zurueck. */
.k-leiste-bereit.k-dunkler-kopf .k-nav {
	background: transparent;
	box-shadow: none;
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.k-leiste-bereit.k-dunkler-kopf.k-gescrollt .k-nav {
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 3px rgba(16, 26, 45, 0.08);
}

/* Solange die Leiste durchsichtig auf dem Dunklen liegt: alles hell. */
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu a,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu .wp-block-navigation__submenu-icon,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__name,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__marke {
	color: var(--wp--preset--color--white) !important;
	/* Bewusst nur Dauer und Eigenschaft einzeln, keine Kurzschreibweise.
	   `transition: color 0.35s ease` setzt alles zurueck, was nicht darin steht
	   -- auf den dunklen Seiten fiel damit der Uebergang fuer den
	   Zeichenabstand weg, und die Menuepunkte sprangen beim Ueberfahren,
	   statt sich in die Laenge zu ziehen. */
	transition-property: color, letter-spacing;
	transition-duration: 0.35s, 0.3s;
	transition-timing-function: ease, cubic-bezier(0.4, 0, 0.2, 1);
}

.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__marke img,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__social .k-icon img {
	filter: brightness(0) invert(1);
	/* Voll deckend, solange die Leiste durchsichtig ist. Die 0.6 aus der
	   Grundregel sind auf Weiss ein gewolltes Grau, auf dem Dunklen sehen
	   die Symbole damit ausgewaschen aus. */
	opacity: 1;
	transition: filter 0.35s ease, opacity 0.2s ease;
}

/*
 * Auf der Startseite gilt dasselbe fuer die Symbole rechts. Dort liegt zwar
 * links die weisse Flaeche des Kopfbereichs, die Symbole sitzen aber auf der
 * dunklen Schraege daneben und waren dunkel auf dunkel kaum zu sehen. Sobald
 * die Leiste weiss hinterlegt ist, kehren sie zu Dunkel zurueck.
 *
 * Nur die Symbole, nicht das Vereinszeichen: das steht links auf Weiss.
 */
.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__social .k-icon img {
	filter: brightness(0) invert(1);
	opacity: 1;
	transition: filter 0.35s ease, opacity 0.2s ease;
}

/*
 * Unter 1860 px passen Symbole und beide Knoepfe nicht mehr auf die dunkle
 * Schraege (Meldung 25.10.2026: Full HD mit 125 % Skalierung = 1536 px).
 * Die Gruppe wurde gestaucht, die Symbole rutschten unter "Mitglied werden"
 * und standen weiss auf Weiss. Instagram und Facebook stehen weiter im Fuss
 * und im Handymenue. Nichts in der Gruppe darf schrumpfen, sonst
 * ueberdecken sich die Teile wieder.
 */
.k-nav__aktionen > * {
	flex-shrink: 0;
}

@media (max-width: 1859px) {
	.k-nav__social {
		display: none !important;
	}
}

/* Der Knopf in der Leiste ist ohnehin blau und bleibt, wie er ist. */

/* --- Tarife: Farbe nur noch auf dem Knopf --------------------------------- */

/*
 * Vorher trug der Abschnitt fuenf Farben gleichzeitig: Orange, Hellblau,
 * Lila fuer die Aufkleber, Gruen fuer die Haken und dazu das Navy der
 * Hauptkarte. Das zog den Blick in alle Richtungen und liess offen, worauf
 * man klicken soll.
 *
 * Jetzt traegt nur noch der Knopf Farbe. Alles andere steht in Navy, die
 * Haken im Hellblau der Marke. Die Knopffarben bleiben unangetastet -- sie
 * sind der einzige Punkt, der herausstechen soll.
 */

/* Aufkleber immer Navy, egal welche Sparte */
.k-tarif__aufkleber.k-farbe-blue,
.k-tarif__aufkleber.k-farbe-orange,
.k-tarif__aufkleber.k-farbe-health,
.k-tarif__aufkleber.k-farbe-defense {
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Auf der dunklen Hauptkarte waere Navy auf Navy unsichtbar -- dort dreht
   sich der Aufkleber um, weiss auf dunkel. */
.k-tarif.is-haupt .k-tarif__aufkleber.k-farbe-blue,
.k-tarif.is-haupt .k-tarif__aufkleber.k-farbe-orange,
.k-tarif.is-haupt .k-tarif__aufkleber.k-farbe-health,
.k-tarif.is-haupt .k-tarif__aufkleber.k-farbe-defense {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
}

/* Haken im Hellblau der Marke statt in Gruen -- in den Karten und in der
   Aufzaehlung links daneben. */
.k-tarif__haken,
.k-tarif__haken.wp-block-image {
	background: var(--wp--preset--color--blue) !important;
}

/* --- Tarife: zwei Reihen statt Umschalter -------------------------------- */

/*
 * Der Umschalter versteckte die Haelfte des Angebots. Jetzt stehen beide
 * Gruppen untereinander, jede mit ihrer eigenen Zwischenueberschrift. Die
 * Regel display:none fuer nicht aktive Gruppen weiter oben laeuft damit ins
 * Leere -- beide tragen jetzt is-aktiv.
 */
.k-tarife__gruppe {
	display: flex !important;
}

.k-tarife__gruppe + .k-tarife__zwischen {
	margin-top: var(--wp--preset--spacing--60) !important;
}

/* Die Zwischenueberschrift bekommt links denselben Strich wie die Tarifzeilen
   auf der Angebotsseite, damit sie als Gliederung gelesen wird. */
.k-tarife__zwischen {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.k-tarife__zwischen::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--gray-200);
}

/* --- Disziplinen: sechs Karten statt vier -------------------------------- */

/*
 * Aus vier Karten in einer Reihe sind sechs geworden. Nebeneinander waeren
 * sie zu schmal, deshalb drei je Reihe. Der Umschalter "Mit Bild / Nur Text"
 * ist entfallen -- das war ein Vergleichswerkzeug aus der Bauzeit.
 */
.k-varianten__gruppe .wp-block-columns {
	flex-wrap: wrap !important;
	gap: var(--wp--preset--spacing--30);
}

.k-varianten__gruppe .wp-block-column {
	flex: 0 0 calc((100% - var(--wp--preset--spacing--30) * 2) / 3) !important;
	min-width: 0;
}

@media (max-width: 1100px) {
	.k-varianten__gruppe .wp-block-column {
		flex: 0 0 calc((100% - var(--wp--preset--spacing--30)) / 2) !important;
	}
}

@media (max-width: 600px) {
	.k-varianten__gruppe .wp-block-column {
		flex: 0 0 100% !important;
	}
}

/*
 * Karte ohne Foto, kompakt und ruhig.
 *
 * Kein Verlauf, keine Spartenfarbe, kein Zeichen. Uebrig bleiben Dunkel,
 * Weiss und das Hellblau der Marke. Die Sparte erkennt man am Namen, nicht
 * an einer Farbe -- sechs verschiedene Toene nebeneinander waren unruhig und
 * die Symbole (Zielscheibe, Smiley) wirkten beliebig.
 *
 * Die Flaeche ist eine Spur heller als der Abschnitt, dazu eine Haarlinie.
 * Beim Ueberfahren wird die Linie hellblau und die Karte hebt sich leicht.
 * Das ist die ganze Bewegung.
 */
.k-card--ohne-bild {
	min-height: 0 !important;
	background-color: rgba(255, 255, 255, 0.035);
	background-image: none;
	border: 1px solid rgba(255, 255, 255, 0.10);
	padding: var(--wp--preset--spacing--40) !important;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.k-card--ohne-bild:hover {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: var(--wp--preset--color--blue);
	transform: translateY(-2px);
}

.k-card--ohne-bild .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;
}

/* Die Zeichen sind raus. Zielscheibe fuer Karate und Smiley fuer Kids sagten
   nichts ueber die Sparte und zogen die Karte ins Verspielte. */
/*
 * Der Cover-Block legt ueber jede Karte den Verlauf "dark-bottom" -- dunkel
 * unten, nach oben auslaufend. Ueber einem Foto macht er die Beschriftung
 * lesbar. Ohne Foto liegt er auf der Flaeche und ergibt genau das
 * Dunkel-auf-Blau, das hier nicht hingehoert.
 */
.k-card--ohne-bild .wp-block-cover__background {
	display: none;
}

.k-card--ohne-bild .k-card__zeichen {
	display: none;
}

.k-card--ohne-bild .wp-block-heading {
	font-size: clamp(1.375rem, 3.6cqi, 1.875rem) !important;
}

/* Kicker im Hellblau, Fakten zurueckgenommen -- drei Ebenen, eine Farbe */
.k-card--ohne-bild .k-label {
	color: var(--wp--preset--color--blue) !important;
	opacity: 0.85;
}

.k-card--ohne-bild .k-card__fakt {
	opacity: 0.6;
}

.k-card--ohne-bild .k-pfeil {
	top: var(--wp--preset--spacing--40);
	opacity: 0.45;
	transition: opacity 0.3s ease;
}

.k-card--ohne-bild:hover .k-pfeil {
	opacity: 1;
}

/* --- Sparten als Liste (zweite Fassung zum Vergleich) -------------------- */

/*
 * Gleiche Daten wie die Kachelfassung darueber, andere Anordnung: eine Zeile
 * je Sparte ueber die volle Breite, getrennt durch Haarlinien. Kein Kasten,
 * kein Verlauf, keine Spartenfarbe. Von links nach rechts Kicker, Name,
 * Fakten, Details.
 *
 * Steht nur zum Vergleich auf der Seite. Was uebrig bleibt, entscheidet der
 * Verein -- die andere Fassung wird danach aus pages.json genommen.
 */
.k-varianten--liste .wp-block-columns {
	flex-direction: column !important;
	gap: 0 !important;
}

.k-varianten--liste .wp-block-column {
	/* Nach Inhalt, nicht wachsend. Mit flex: 1 verteilten die sechs Huellen
	   die Hoehe des Behaelters unter sich auf und zwischen den Zeilen klaffte
	   je ein halber Bildschirm. */
	flex: 0 0 auto !important;
	width: 100%;
	min-height: 0 !important;
}

.k-varianten--liste .k-card--ohne-bild {
	min-height: 0 !important;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	/*
	 * Kein Einzug zur Seite. Mit spacing--30 standen Kicker, Name und Fakten
	 * sechzehn Pixel weiter rechts als die Ueberschrift "Waehle deine
	 * Disziplin" und der Kicker "Unser Angebot" darueber -- die Sektion
	 * hatte damit zwei Textkanten statt einer.
	 */
	padding: var(--wp--preset--spacing--40) 0 !important;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.k-varianten--liste .wp-block-column:first-child .k-card--ohne-bild {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.k-varianten--liste .k-card--ohne-bild:hover {
	background-color: rgba(255, 255, 255, 0.04);
	border-bottom-color: var(--wp--preset--color--blue);
}

.k-varianten--liste .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none !important;
	display: flex !important;
	/* Ausdruecklich in der Reihe. Der Kasten steht sonst auf column -- die
	   flex-basis der Kinder haette dann die Hoehe gesetzt statt der Breite,
	   und aus einer Zeile wurde ein 562 Pixel hoher Turm. */
	flex-direction: row !important;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
}

.k-varianten--liste .k-label {
	flex: 0 0 11rem;
	margin: 0 !important;
}

.k-varianten--liste .k-card .wp-block-heading {
	flex: 0 0 14rem;
	margin: 0 !important;
}

.k-varianten--liste .k-card__fakt {
	flex: 1;
	margin: 0 !important;
}

.k-varianten--liste .k-angebot__mehr {
	margin: 0 !important;
	white-space: nowrap;
}

/* Der Eckpfeil entfaellt -- rechts steht schon "Details" */
.k-varianten--liste .k-pfeil {
	display: none;
}

/*
 * Gestapelt schon ab 900 statt erst ab 781. Zwischen diesen beiden Werten
 * reichen die vier Spalten nicht mehr fuer eine Zeile: die Faktenspalte
 * bekommt dort unter 270 Pixel und bricht um, wodurch einzelne Zeilen
 * fuenfundzwanzig Pixel hoeher stehen als ihre Nachbarn. Betroffen sind
 * genau die gaengigen Tablets im Hochformat (820 und 834 Pixel).
 */
@media (max-width: 900px) {
	.k-varianten--liste .wp-block-cover__inner-container {
		display: block !important;
	}
	.k-varianten--liste .k-label,
	.k-varianten--liste .k-card .wp-block-heading,
	.k-varianten--liste .k-card__fakt {
		flex: none;
	}
}

/* --- Sparten-Liste: Auftritt ---------------------------------------------- */

/*
 * Die Liste steht direkt unter dem Kopfbereich und ist die Stelle, an der
 * sich entscheidet, ob jemand anfragt. Sie darf deshalb Platz nehmen:
 * hoehere Zeilen, groessere Namen, eine feste Spaltenordnung.
 *
 * Die Fakten fluchten in einer eigenen Spalte, damit Tage und Hallen
 * untereinander vergleichbar bleiben statt hinter verschieden langen Namen
 * zu springen.
 */
.k-varianten--liste .k-card--ohne-bild {
	padding-block: var(--wp--preset--spacing--50) !important;
}

.k-varianten--liste .wp-block-cover__inner-container {
	align-items: center !important;
}

.k-varianten--liste .k-label {
	flex: 0 0 12rem;
	font-size: 0.7rem !important;
}

.k-varianten--liste .k-card .wp-block-heading {
	/* Breit genug fuer das laengste Wort. Bei 16rem brach "SELBSTSCHUTZ"
	   auf zwei Zeilen um und die Zeile wurde doppelt so hoch. Seit der
	   Umbenennung in "SELBSTVERTEIDIGUNG" reichten 22rem nicht mehr, der
	   Name stiess an die Faktenspalte (14.10.2026). Die Breite steht in em,
	   weil die Schrift mit dem Fenster waechst: das Wort ist 12,8em breit,
	   13,6em lassen Luft und wachsen mit. Eine feste Breite war entweder am
	   grossen Schirm zu knapp oder liess bei 1100 bis 1300 Pixeln die
	   Faktenspalte umbrechen. */
	flex: 0 0 13.6em;
	white-space: nowrap;
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.k-varianten--liste .k-card__fakt {
	flex: 1;
	font-size: 0.95rem !important;
	opacity: 0.55;
}

/* Beim Ueberfahren rueckt der Name eine Spur vor und der Verweis wird
   deutlich -- die Zeile reagiert als Ganzes, nicht nur der Text rechts. */
.k-varianten--liste .k-card--ohne-bild:hover .wp-block-heading {
	transform: translateX(0.5rem);
}

.k-varianten--liste .k-card--ohne-bild:hover .k-card__fakt {
	opacity: 0.8;
}

/* Rechts bleibt ein leiser Hinweis stehen -- ganz unsichtbar liest sich die
   Zeile nicht als anklickbar. Beim Ueberfahren wird er deutlich. */
.k-varianten--liste .k-angebot__mehr {
	color: var(--wp--preset--color--blue) !important;
	opacity: 0.35;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.k-varianten--liste .k-card--ohne-bild:hover .k-angebot__mehr {
	opacity: 1;
	transform: translateX(0.35rem);
}

@media (max-width: 1100px) {
	/* 10rem statt 9rem: "Atem und Energie" ist mit 147 Pixeln der laengste
	   Kicker und brach bei 9rem (144 Pixel) auf zwei Zeilen um -- die
	   Qi-Gong-Zeile wurde dadurch zehn Pixel hoeher als alle anderen.
	   nowrap haelt die Spalte auch dann einzeilig, wenn spaeter ein
	   laengerer Kicker dazukommt. */
	.k-varianten--liste .k-label { flex: 0 0 10rem; white-space: nowrap; }
	/* 13rem statt 15rem: "SELBSTSCHUTZ" ist mit 194 Pixeln der breiteste
	   Name und passt in 208. Die zwei gesparten Zentimeter gehen an die
	   Faktenspalte, die sonst umbrach. */
	.k-varianten--liste .k-card .wp-block-heading { flex: 0 0 13rem; }
	/* "SELBSTVERTEIDIGUNG" passt nicht in 13rem (14.10.2026). Etwas
	   kleinere Schrift, Breite wieder in em -- so bleibt der Faktenspalte
	   genug Platz fuer eine Zeile. */
	.k-varianten--liste .k-card .wp-block-heading {
		/* Das Wort misst 11,8em. 12,6em statt 13,6em: bei 920 Pixeln fehlten
		   der Faktenspalte sonst 19 Pixel fuer eine Zeile. */
		flex-basis: 12.6em;
		font-size: 1.35rem !important;
	}
}

/* Ab der gestapelten Fassung gibt es kein Ueberfahren mehr, auf das der
   Hinweis reagieren koennte -- er steht deshalb dauerhaft. */
@media (max-width: 900px) {
	.k-varianten--liste .k-angebot__mehr { opacity: 1; }
}

/* --- Tarife: Karten schmal und mittig ------------------------------------ */

/*
 * Seit der Zweispalter aufgeloest ist, steht den Karten die volle Breite zur
 * Verfuegung -- 453 Pixel je Karte. Das wirkt schwer. Schmal und mittig
 * liest sich ruhiger, wie vor dem Umbau.
 *
 * Die Regel stand hier schon einmal und ist bei einer spaeteren Ersetzung
 * im Stylesheet verlorengegangen. Sie steht bewusst am Dateiende, damit sie
 * die aeltere Regel ".k-tarife__karten .k-tarif { flex: 1 1 0 }" schlaegt,
 * die die Karten sonst auf die volle Zeilenbreite aufzieht.
 */
.k-tarife__gruppe {
	justify-content: center !important;
}

.k-tarife__karten .k-tarif {
	flex: 0 1 20rem !important;
	max-width: 20rem;
}

/* Die hervorgehobene Karte darf wie bisher etwas groesser stehen */
.k-tarife__karten .k-tarif.is-haupt {
	flex: 0 1 21rem !important;
	max-width: 21rem;
}

/* --- Tarife: Kopfbereich -------------------------------------------------- */

/*
 * display: block steht ausdruecklich hier. Der Kasten erbt sonst von anderer
 * Stelle ein flex in Reihe -- Kicker, Ueberschrift, Text und die drei Haken
 * standen dann nebeneinander und der Fliesstext brach nach jedem Wort um.
 *
 * Die Regel ist heute zweimal verlorengegangen, weil ich CSS-Bloecke ab einer
 * Fundstelle bis zum Dateiende ersetzt habe. Sie steht deshalb hier unten und
 * bewusst allein.
 */
.k-tarife__intro {
	display: block !important;
	max-width: 52rem;
	margin-inline: auto !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
	text-align: center;
	padding-top: 0 !important;
}

/* Die drei Haken als eine Zeile unter dem Text, mittig */
.k-tarife__intro .k-tarife__vorteil {
	display: inline-flex !important;
	margin: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) 0 !important;
}

/* 52rem statt 44: bei 44 brach "Waehle deinen Tarif." auf zwei Zeilen um */
.k-tarife__intro .wp-block-heading {
	text-wrap: balance;
}

/* --- Sparten-Seiten: Leiste immer weiss ----------------------------------- */

/*
 * Der Sparten-Kopf ist geteilt -- links weisse Flaeche, rechts Foto. Eine
 * durchsichtige Leiste war dort in beiden Haelften schlecht lesbar. Sie
 * steht auf diesen Seiten deshalb von Anfang an auf Weiss.
 */
.k-leiste-bereit.k-fester-kopf .k-nav {
	background: var(--wp--preset--color--white) !important;
	box-shadow: 0 1px 3px rgba(16, 26, 45, 0.08);
}

/*
 * Die Ueberschrift des Sparten-Kopfes steht in Navy statt in der
 * Akzentfarbe. Sie liegt komplett in .k-betont -- weil es keine zweite
 * Zeile gibt, faerbte das den ganzen Namen hellblau, und auf der weissen
 * Flaeche war er dadurch blass.
 */
.k-offer-hero h1 .k-betont {
	color: var(--wp--preset--color--navy) !important;
}

/* --- Ansprechpartner der Sparte ------------------------------------------ */

/*
 * Eine Karte, kein Abschnitt: helle Flaeche aussen, weisse Karte innen,
 * links das Portraet, rechts Name, Rolle und Mail. Steht kurz vor dem
 * Abschluss der Sparten-Seite, damit die Anfrage ein Gesicht hat, bevor
 * der Knopf kommt.
 */
.k-ansprech__karte {
	align-items: center;
	border-left: 4px solid var(--k-accent, var(--wp--preset--color--blue));
	box-shadow: 0 1px 3px rgba(16, 26, 45, 0.08);
}

.k-ansprech__bild img {
	border-radius: 50%;
	display: block;
}

.k-ansprech__daten {
	/* Ohne eigene Breite wuerde die Textspalte an ihrem laengsten Wort
	   haengen und die Karte auseinanderziehen. */
	flex: 1 1 16rem;
}

.k-ansprech .k-label {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

.k-ansprech__mail a {
	color: var(--wp--preset--color--navy);
	text-decoration-color: var(--k-accent, var(--wp--preset--color--blue));
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.k-ansprech__mail a:hover {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

@media (max-width: 600px) {
	.k-ansprech__karte {
		justify-content: center;
		text-align: center;
	}
	.k-ansprech__daten {
		flex-basis: 100%;
	}
}

/* --- Stoerer: der Knopf atmet ------------------------------------------- */

/*
 * Ein langsamer Ring, der nach aussen laeuft und verblasst -- kein Blinken,
 * kein Springen. Das Band steht direkt unter dem Kopfbereich und soll den
 * Blick halten, ohne sich wie eine Werbeanzeige aufzufuehren.
 *
 * Beim Ueberfahren haelt der Ring an und der Knopf hebt sich stattdessen an:
 * wer schon zielt, braucht den Hinweis nicht mehr.
 */
@keyframes k-stoerer-puls {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
	}
	70% {
		box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.k-stoerer .wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.k-stoerer .wp-block-button__link {
		animation: k-stoerer-puls 3s ease-out infinite;
	}
}

.k-stoerer .wp-block-button__link:hover,
.k-stoerer .wp-block-button__link:focus-visible {
	animation-play-state: paused;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(16, 26, 45, 0.25);
}

/* --- Sparten-Kopf: das Foto zieht langsamer mit -------------------------- */

/*
 * Parallaxe ueber eine scrollgesteuerte Animation, ohne JavaScript. Das Bild
 * ist zwanzig Prozent hoeher als der Kopfbereich und wandert innerhalb
 * dieses Ueberschusses -- deshalb entsteht oben und unten keine Luecke.
 *
 * Browser ohne animation-timeline zeigen das Bild einfach ruhig stehend.
 * Wer Bewegung abbestellt hat, ebenfalls.
 */
/*
 * Der Kopfbereich schneidet das ueberstehende Bild ab -- und wird damit
 * selbst zum Scrollbehaelter. Genau daran ist der erste Versuch
 * gescheitert: view() sucht den naechsten Scrollbehaelter ueber dem Bild,
 * fand den Kopfbereich, und der scrollt nie. Die Fortschrittsanzeige stand
 * deshalb dauerhaft auf null und das Bild ruehrte sich nicht.
 *
 * Loesung: eine benannte Sichtachse auf dem Kopfbereich selbst. Die misst,
 * wo er im Fenster steht, und daran haengt das Bild.
 */
.k-offer-hero {
	overflow: hidden;
	view-timeline-name: --k-hero-sicht;
}

@keyframes k-hero-parallaxe {
	from {
		transform: translateY(-8%);
	}
	to {
		transform: translateY(8%);
	}
}

/*
 * Nur auf breiten Fenstern, seit dem 08.09.2026. Auf dem Handy steht das
 * Bild als eigener Streifen oben und der Text darunter -- dort braucht es
 * kein Mitziehen, und die Regel hat den Mobil-Zweig ueberschrieben: sie
 * steht weiter unten im Stylesheet und setzte das Bild wieder auf 120
 * Prozent Hoehe. Ergebnis war ein Bild, das den ganzen Kopf fuellte, mit
 * Schlagzeile und Kicker mittendrin.
 */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.k-offer-hero > .wp-block-cover__image-background {
			/* Zwanzig Prozent Ueberschuss, je zehn oben und unten. Der Weg
			   von acht Prozent bleibt darin, es entsteht also nie eine
			   Blitzkante am Rand. */
			height: 120%;
			top: -10%;
			animation: k-hero-parallaxe linear both;
			animation-timeline: --k-hero-sicht;
			animation-range: cover 0% cover 100%;
		}
	}
}

/* --- Trainingszeiten: Balken laufen von links ein ------------------------ */

/*
 * Versuch vom 04.09.2026. Alles andere auf der Seite kommt von unten hoch
 * (.k-auf mit translateY). Die Zeitplan-Zeilen sind aber breit und flach --
 * eine Bewegung entlang ihrer langen Achse liegt naeher und nimmt die
 * Richtung auf, in die sich die Sparten-Zeilen beim Ueberfahren schieben.
 *
 * Rueckbau: diesen ganzen Abschnitt loeschen. Dann gilt wieder die
 * allgemeine Regel und die Zeilen kommen wie zuvor von unten.
 */
.k-auf-bereit .k-zeiten__zeile.k-auf {
	transform: translateX(-2.5rem);
}

/*
 * Eine eigene Staffelung braucht es hier nicht: einblenden.js setzt den
 * Verzug je Element als Inline-Stil (0,13 Sekunden Abstand), und der
 * schlaegt jede Regel aus dem Stylesheet. Ein zweiter Satz Delays hier waere
 * wirkungslos gewesen und haette nur so ausgesehen, als taete er etwas.
 */

/* --- Unterzeilen ruecken an ihre Ueberschrift ---------------------------- */

/*
 * WordPress setzt zwischen zwei Bloecken den globalen Abstand von 32 Pixeln.
 * Zwischen einer Sektionsueberschrift und ihrer Einleitung ist das richtig.
 * Innerhalb einer Karte ist es zu viel: Dort steht unter dem Namen die
 * Rolle, unter dem Schritt seine Erklaerung -- zwei Zeilen, die zusammen
 * gehoeren. Bei 18 Pixel Name und 12 Pixel Rolle standen 32 Pixel dazwischen,
 * fast das Dreifache der kleinen Zeile.
 *
 * Am 04.09.2026 ueber alle Seiten gemessen: 26 solche Paare in fuenf
 * Bausteinen. Sektionsueberschriften bleiben unangetastet, ihre grosse
 * Schrift traegt den weiten Abstand.
 */
.k-spot__bild h3 + p,
.k-einzel__bild h3 + p,
.k-schritt h3 + p,
.k-wert h3 + p,
.k-vorteil h3 + p {
	margin-top: 0.5rem !important;
}

/*
 * Rollenzeilen nicht trennen. Sie stehen in Versalien mit 0,2em Sperrung und
 * sind dadurch sehr breit; "1. Vorstandsvorsitzender" wurde in der 210 Pixel
 * schmalen Kachel zu "VORSTANDSVORSIT / ZENDER" auseinandergerissen. Lieber
 * ein Umbruch zwischen zwei Woertern als ein zerschnittenes Wort.
 */
.k-spot__rolle,
.k-person .k-label,
.k-einzel__bild .k-label {
	hyphens: none;
	overflow-wrap: normal;
}

/* --- Sektions-Kicker auf die Textkante der Ueberschrift ------------------ */

/*
 * Die Sektionen sind auf 1440 Pixel begrenzt. Ist das Fenster breiter,
 * zentriert WordPress diesen Kasten -- bei 1600 Pixeln stehen Ueberschrift,
 * Untertitel und alle Zeilen deshalb bei 73 statt bei 24.
 *
 * Beim Kicker griff das nicht: Er stand weiter bei 24 und damit rund fuenfzig
 * Pixel links neben allem anderen. Auf einem 1440er Schirm faellt das nicht
 * auf, weil dort kein Spielraum zum Zentrieren bleibt -- auf jedem groesseren
 * schon.
 *
 * Gilt nur fuer Kicker, die direkt in einer Sektion stehen. Die in Karten und
 * Zeilen bleiben unberuehrt, dort ist links richtig.
 */
.wp-block-group.alignfull > .k-label {
	margin-inline: auto !important;
}


/*
 * Beim Ueberfahren dreht sich das Paar um, sonst gaebe es keine Rueckmeldung
 * mehr -- die allgemeine Hover-Regel weiter oben faerbt den Knopf ebenfalls
 * navy. Navy auf Hellblau steht bei 8,2 zu 1 und ist damit gut lesbar.
 */
.k-leiste-bereit.k-gescrollt .home .k-nav__cta .wp-block-button__link:hover,
.k-leiste-bereit.k-dunkler-kopf.k-gescrollt .k-nav__cta .wp-block-button__link:hover,
.k-leiste-bereit.k-fester-kopf .k-nav__cta .wp-block-button__link:hover,
.k-leiste-bereit.k-gescrollt .home .k-nav__cta .wp-block-button__link:focus-visible,
.k-leiste-bereit.k-dunkler-kopf.k-gescrollt .k-nav__cta .wp-block-button__link:focus-visible,
.k-leiste-bereit.k-fester-kopf .k-nav__cta .wp-block-button__link:focus-visible {
	/* Weiss wie im Ruhezustand ueber dem Kopfbereich -- ein Knopf, eine
	   Schriftfarbe, egal auf welchem Grund er gerade steht. */
}

/* --- Sparten-Liste: eine Bewegung statt vier ----------------------------- */

/*
 * Vorher liefen am selben Ueberfahren vier Uebergaenge mit drei
 * verschiedenen Kurven -- und die Faktenspalte hatte gar keinen: ihre
 * Deckkraft sprang von 0,55 auf 0,8 in null Sekunden. Das war der Ruck.
 *
 * Jetzt teilen sich alle Teile Dauer und Kurve. Die Kurve ist ein weicher
 * Auslauf ohne Ueberschwingen: schnell los, langes Ausrollen. Das ergibt
 * den fliessenden Eindruck, statt dass etwas anspringt und stehenbleibt.
 *
 * Dazu faehrt die Zeile nach vorne: der ganze Inhalt ruecht ein Stueck nach
 * rechts, und links waechst ein Balken in der Farbe der Sparte hoch. Vorher
 * bewegte sich nur der Name -- Kicker und Fakten blieben stehen, was die
 * Zeile beim Ueberfahren auseinanderzog.
 */
.k-varianten--liste .k-card--ohne-bild {
	--k-fluss: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	transition: background-color var(--k-fluss), border-color var(--k-fluss);
}

/* Der Balken sitzt links ausserhalb der Textkante, im Innenabstand der
   Sektion. Er waechst aus der Mitte, nicht von oben -- das laeuft ruhiger. */
.k-varianten--liste .k-card--ohne-bild::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--30));
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--k-accent, var(--wp--preset--color--blue));
	transform: scaleY(0);
	transform-origin: center;
	transition: transform var(--k-fluss);
}

.k-varianten--liste .k-card--ohne-bild:hover::before,
.k-varianten--liste .k-card--ohne-bild:focus-within::before {
	transform: scaleY(1);
}

/* Alle vier Teile mit derselben Kurve, damit sie als eine Bewegung lesen */
.k-varianten--liste .k-card--ohne-bild .wp-block-cover__inner-container {
	transition: transform var(--k-fluss);
}

.k-varianten--liste .k-card .wp-block-heading,
.k-varianten--liste .k-card__fakt,
.k-varianten--liste .k-card--ohne-bild .k-label,
.k-varianten--liste .k-angebot__mehr {
	transition: opacity var(--k-fluss), color var(--k-fluss), transform var(--k-fluss);
}

/* Der Name bewegt sich nicht mehr allein -- die ganze Zeile faehrt vor. */
.k-varianten--liste .k-card--ohne-bild:hover .wp-block-heading {
	transform: none;
}

.k-varianten--liste .k-card--ohne-bild:hover .wp-block-cover__inner-container,
.k-varianten--liste .k-card--ohne-bild:focus-within .wp-block-cover__inner-container {
	transform: translateX(0.75rem);
}

.k-varianten--liste .k-card--ohne-bild:hover .k-angebot__mehr {
	transform: none;
}

/*
 * Die ganze Zeile ist der Verweis, nicht nur das Wort "Details" ganz rechts.
 * Der Verweis bekommt eine unsichtbare Flaeche, die ueber die komplette Zeile
 * gespannt ist. Sie haengt am Innencontainer, weil WordPress ihn positioniert
 * -- deshalb reicht sie oben und unten um den Innenabstand der Zeile hinaus
 * und links ein Stueck weiter, damit auch die Ecken treffen, wenn die Zeile
 * beim Ueberfahren vorfaehrt.
 */
.k-varianten--liste .k-card--ohne-bild {
	cursor: pointer;
}

.k-varianten--liste .k-card--ohne-bild .k-angebot__mehr a::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--50));
	bottom: calc(-1 * var(--wp--preset--spacing--50));
	left: -1rem;
	right: 0;
	z-index: 1;
}

/* --- CTA-Band mit Foto ---------------------------------------------------- */

/*
 * Text links, nicht mittig: Ein Band ist breit, und mittiger Text laesst die
 * Zeilen ueber die ganze Breite laufen. Links gesetzt bleibt der Blick am
 * Rand und der Knopf steht dort, wo das Auge nach dem Lesen ankommt.
 */
.k-ctaband .wp-block-cover__inner-container {
	text-align: left;
}

.k-ctaband__kicker {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

.k-ctaband__betont {
	color: var(--k-accent, var(--wp--preset--color--blue));
}

/*
 * Der Text steht nur auf der linken Haelfte, damit das Foto rechts zu sehen
 * bleibt und nicht komplett hinter Schrift verschwindet.
 *
 * Das margin-inline muss dazu: WordPress gibt jedem Kind eines
 * eingegrenzten Containers "margin-inline: auto". Zusammen mit einer
 * eigenen max-width heisst das nicht "links begrenzt", sondern
 * "zentriert" -- gemessen standen Ueberschrift und Text bei 511 Pixeln,
 * waehrend Kicker und Knopf bei 63 blieben. Die Sektion hatte damit zwei
 * Textkanten, genau wie vorher der Sektions-Kicker.
 */
/*
 * Die Zeilenlaenge sitzt an der Huelle, nicht an den einzelnen Elementen.
 *
 * Zwei Anlaeufe sind vorher gescheitert. Eine eigene max-width an
 * Ueberschrift und Text macht sie mittig, weil WordPress jedem Kind eines
 * eingegrenzten Containers "margin-inline: auto" gibt. Und der Umweg ueber
 * padding-right: calc(100% - 34rem) rechnet gegen die Breite des ELTERN-
 * elements: In einem 1900 Pixel breiten Fenster wurde daraus ein Innen-
 * abstand von 1356 Pixeln, es blieben 84 Pixel Textbreite, und jedes Wort
 * stand auf einer eigenen Zeile.
 *
 * Die Huelle nimmt die vollen 1440 und wird von WordPress zentriert wie
 * jedes andere Kind. Innerhalb der Huelle gibt es kein eingegrenztes
 * Layout, also auch kein automatisches Zentrieren -- dort wirkt max-width
 * so, wie man es erwartet.
 */
.k-ctaband__inhalt > * {
	/*
	 * Die Begrenzung sitzt an den Kindern, nicht an der Huelle. Mit einer
	 * max-width an der Huelle selbst greift wieder WordPress' automatisches
	 * Zentrieren -- sie stand dann mittig im Band statt links. Innerhalb der
	 * Huelle gibt es kein eingegrenztes Layout, dort wirkt max-width so, wie
	 * man es erwartet.
	 */
	max-width: 34rem;
}

.k-ctaband .wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.k-ctaband .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(16, 26, 45, 0.35);
}

@media (max-width: 781px) {
	/* Auf dem Handy traegt die halbe Breite nicht, dort darf der Text die
	   ganze Flaeche nutzen. */
	.k-ctaband .k-ctaband__text,
	.k-ctaband h2 {
		max-width: none;
	}
}

/* --- Formulare: Uebersicht ------------------------------------------------ */

/*
 * Vier gleich hohe Karten nebeneinander, je Formular eine. Raster statt
 * Spalten aus demselben Grund wie beim Trainerteam: In einer umbrechenden
 * Spaltenreihe blaeht WordPress die letzte allein stehende Karte auf die
 * ganze Zeilenbreite auf.
 *
 * Weiss auf Weiss, ohne Farbe. Getrennt wird ueber eine feine Kontur und
 * einen weichen Schatten -- die Sparten haben ihre Farben, die Formulare
 * brauchen keine eigene.
 *
 * Die Klasse hiess zuerst k-formularkarte. Die gibt es im Theme aber schon,
 * fuer die Seiten mit eingebettetem Formular; meine Karten erbten dadurch
 * deren ::before in Navy und lagen komplett dunkel da, samt unsichtbarer
 * Ueberschriften. getComputedStyle meldete brav "background-color: weiss" --
 * die Farbe der Karte stimmte ja, es lag nur etwas darueber. Vor einem neuen
 * Klassennamen also einmal grep laufen lassen.
 */
/*
 * Die Navigation liegt fest oben und ueberdeckt die ersten 79 Pixel. Auf
 * allen anderen Seiten faengt der Kopfbereich das ab -- diese Seite hat
 * keinen, deshalb steckte die Ueberschrift halb unter der Leiste. Der
 * Ausgleich steht hier und nicht am body, weil ein globaler Abstand die
 * Seiten mit Kopfbereich um dieselbe Hoehe nach unten schoebe.
 */
.k-formulare {
	padding-top: calc(var(--wp--preset--spacing--80) + 79px) !important;
}

.k-formulare__reihe.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	align-items: stretch;
}

.k-formularweg {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--gray-200);
	box-shadow: 0 1px 2px rgba(16, 26, 45, 0.04), 0 8px 24px rgba(16, 26, 45, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.k-formularweg:hover {
	transform: translateY(-3px);
	border-color: rgba(16, 26, 45, 0.18);
	box-shadow: 0 2px 4px rgba(16, 26, 45, 0.06), 0 16px 36px rgba(16, 26, 45, 0.12);
}

/* Das Zeichen sitzt oben rechts in der Ecke und nimmt sich zurueck. Es
   erklaert nichts, es hilft nur beim Wiederfinden. */
.k-formularweg__icon {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	width: 28px;
	height: 28px;
	opacity: 0.3;
	transition: opacity 0.25s ease;
}

.k-formularweg:hover .k-formularweg__icon {
	opacity: 0.55;
}

/* Platz fuer das Zeichen, damit die Ueberschrift nicht darunter laeuft */
.k-formularweg h3 {
	padding-right: 2.5rem;
}

/*
 * Der Knopf sitzt unten, auch wenn die Texte unterschiedlich lang sind --
 * sonst stehen vier Knoepfe auf vier Hoehen.
 *
 * Die Zusatzzeile ("Auch als PDF zum Ausdrucken") haette den Knopf ihrer
 * Karte nach oben gedrueckt und damit aus der Reihe geworfen. Sie steht
 * deshalb absolut unter dem Knopf, und alle vier Karten halten unten den
 * gleichen Platz dafuer frei -- auch die drei ohne Zusatz. So liegen die
 * Knoepfe auf einer Linie und die Zeile steht wirklich darunter.
 */
.k-formularweg {
	/*
	 * Der freigehaltene Platz und der Abstand der Zeile zur Kante muessen
	 * zusammen gerechnet werden: Die Zeile haengt absolut an bottom, die
	 * Polsterung haelt ihr den Platz frei. Wer nur eines aendert,
	 * verschiebt die Zeile in die Polsterung hinein oder laesst Luft
	 * stehen, die niemand gesetzt hat.
	 *
	 * Von 32 auf 20 Pixel heruntergegangen (11.09.2026): Die Karte war
	 * 326 Pixel hoch, und unter der Zeile stand mehr Rand als ueber ihr.
	 */
	padding-bottom: calc(1.25rem + 1.9rem) !important;
}

.k-formularweg__knopf {
	margin-top: auto !important;
}

.k-formularweg__zusatz {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	/* Derselbe Wert wie in der Polsterung oben. */
	bottom: 1.25rem;
	margin: 0 !important;
	opacity: 0.75;
}



/* --- Trainingszeiten: der Ort bekommt eine eigene Kante ------------------ */

/*
 * Der Ort stand rechtsbuendig am Zeilenende. Damit begann jeder Hallenname
 * an einer anderen Stelle -- "Nelson-Mandela-Halle" weiter links als
 * "Barbara-Grundschule", je nach Laenge. Untereinander gelesen wirkte das
 * unruhig.
 *
 * Er sitzt nicht in einer eigenen Spalte, sondern in der Meta-Zeile
 * innerhalb der mittleren Spalte -- die Zeitplan-Bausteine sind mit einer
 * aelteren Fassung des Musters gerendert und haben kein k-zeiten__wo.
 * Deshalb bekommt er hier eine feste Breite und wird ans Zeilenende
 * geschoben: Dadurch beginnt er in jeder Zeile an derselben Kante, und die
 * feine Linie markiert sie.
 */
.k-zeiten__ort {
	flex: 0 0 15rem !important;
	justify-content: flex-start !important;
	/* Das !important ist noetig: eine fruehere Regel setzt den Rand hart auf
	   null, und ohne auto klebt der Ort am Trainernamen davor -- der ist je
	   Zeile unterschiedlich lang. */
	margin-left: auto !important;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 781px) {
	/* Gestapelt gibt es keine Spalten mehr, dort waere die Linie ein Strich
	   quer durch die Karte. */
	.k-zeiten__ort {
		flex: 0 1 auto !important;
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
}

/* --- Trainingsplan: je Seite nur die eigene Sparte ----------------------- */

/*
 * Alle Seiten zeigen denselben Baustein (97). Damit auf der Karate-Seite
 * trotzdem nur Karate steht, traegt jede Zeile ihre Sparte als Klasse und
 * der body die Sparte der Seite -- gesetzt in inc/zeiten-filter.php.
 *
 * Steht am body keine Sparte, bleibt der ganze Plan stehen. So ist es auf
 * der Startseite und unter "Preise und Zeiten" gewollt: Dort ist die
 * Uebersicht der Sinn.
 *
 * Ohne CSS oder mit abgeschaltetem Stylesheet sind alle Zeilen sichtbar.
 * Das ist der richtige Ausfallzustand -- lieber zu viel Plan als keiner.
 */
body[class*="k-sparte-"] .k-zeiten__zeile {
	display: none;
}

body.k-sparte-karate .k-zeit--karate,
body.k-sparte-kids .k-zeit--kids,
body.k-sparte-selbstverteidigung .k-zeit--selbstverteidigung,
body.k-sparte-taichi .k-zeit--taichi,
body.k-sparte-qigong .k-zeit--qigong,
body.k-sparte-rueckenfit .k-zeit--rueckenfit {
	display: flex;
}

/* --- Trainerteam: ein Baustein, je Seite die eigene Sparte --------------- */

/*
 * Dieselbe Idee wie beim Trainingsplan. Es gibt genau einen Trainer-Baustein
 * (10), den der Verein im Block-Editor pflegt. Jede Karte traegt ihre Sparten
 * als Klasse, der body traegt die Sparte der Seite -- was nicht passt,
 * verschwindet.
 *
 * Vorher stand jeder Trainer bis zu fuenfmal in der Datenbank: einmal im
 * Band der Startseite, einmal in Baustein 34 und 35 und dazu inline auf den
 * Seiten fuer Tai Chi, Qi Gong, Rueckenfit und Selbstverteidigung. Wer eine
 * Rolle aenderte, musste alle Stellen kennen.
 *
 * Ohne Stylesheet stehen alle Trainer auf jeder Seite -- lieber zu viele als
 * eine leere Sektion.
 */
body[class*="k-sparte-"] .k-trainerkarte {
	display: none;
}

body.k-sparte-karate .k-trainer--karate,
body.k-sparte-kids .k-trainer--kids,
body.k-sparte-selbstverteidigung .k-trainer--selbstverteidigung,
body.k-sparte-taichi .k-trainer--taichi,
body.k-sparte-qigong .k-trainer--qigong,
body.k-sparte-rueckenfit .k-trainer--rueckenfit {
	display: block;
}

/*
 * Auf einer Sparten-Seite bleiben ein bis fuenf Karten uebrig. Ein Laufband
 * mit zwei Karten waere albern: dort wird daraus ein stehendes Raster, die
 * Pfeile und die laufende Nummer fallen weg. Die Nummer stimmte nach dem
 * Filtern ohnehin nicht mehr -- aus 01 02 03 waere 01 03 07 geworden.
 */
body[class*="k-sparte-"] .k-trainer__buehne {
	margin-inline: 0 !important;
}

body[class*="k-sparte-"] .k-trainer__band {
	overflow: visible;
	scroll-snap-type: none;
	padding-inline: 0;
}

body[class*="k-sparte-"] .k-trainer__spur {
	flex-wrap: wrap !important;
	width: auto;
}

/*
 * Kachelbreite auf der Sparten-Seite, neu am 08.09.2026.
 *
 * Vorher stand hier eine feste Breite von 20rem. Bei Karate bleiben nach dem
 * Filtern fuenf Personen uebrig -- vier passten nebeneinander, die fuenfte
 * stand allein in der zweiten Reihe.
 *
 * Jetzt duerfen die Kacheln schrumpfen und wieder wachsen: Grundmass 13rem,
 * Obergrenze die alten 20rem. Fuenf finden damit auf 1440 Pixeln zusammen in
 * eine Reihe (je rund 250 Pixel), drei oder vier stehen weiterhin so breit
 * wie zuvor. Die Sonderfaelle mit einer und mit zwei Personen haben eigene
 * Regeln weiter unten und bleiben unberuehrt.
 */
body[class*="k-sparte-"] .k-trainer .wp-block-column {
	/* Genau ein Fuenftel der Reihe, die vier Luecken abgezogen. Damit stehen
	   fuenf Kacheln sicher nebeneinander, statt an einer festen Breite zu
	   haengen und bei der kleinsten Aenderung umzubrechen. */
	flex: 1 1 calc((100% - 4 * var(--wp--preset--spacing--30)) / 5) !important;
	max-width: 20rem;
}

/*
 * Mittlere Fenster: drei je Reihe. Ein Fuenftel von 1000 Pixeln waeren rund
 * 180 Pixel je Kachel -- dafuer sind die Gesichter zu klein. Aus fuenf wird
 * hier drei plus zwei, und die zweite Reihe faellt nicht auf, weil sie zwei
 * Kacheln traegt statt einer.
 */
@media (min-width: 782px) and (max-width: 1100px) {
	body[class*="k-sparte-"] .k-trainer .wp-block-column {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3) !important;
		/* Auch die Obergrenze auf ein Drittel, sonst steht die zweite Reihe
		   mit 320 Pixeln breiter da als die erste mit 302. */
		max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
	}
}

body[class*="k-sparte-"] .k-trainer__pfeil,
body[class*="k-sparte-"] .k-trainer .k-num {
	display: none;
}

/*
 * Zwei Unterzeilen, eine sichtbar (08.09.2026).
 *
 * Die allgemeine Zeile spricht von Dan-Traegern -- auf der Kids-Seite ist
 * das falsch: dort unterrichten Johannes, Dilay und Leon, und ein Dan-Grad
 * ist nicht der Punkt. Beide Zeilen stehen im selben Baustein, damit der
 * Verein sie an einer Stelle pflegt; sichtbar ist immer genau eine.
 */
.k-trainer__unter--kids {
	display: none;
}

body.k-sparte-kids .k-trainer__unter {
	display: none;
}

body.k-sparte-kids .k-trainer__unter--kids {
	display: block;
}

/*
 * Kopf der Trainersektion enger, 08.09.2026. Kicker, Ueberschrift und
 * Unterzeile standen mit 16 und 24 Pixeln auseinander -- bei einer
 * Ueberschrift von 56 Pixeln wirkt das wie drei einzelne Zeilen statt wie
 * ein Block. Die drei gehoeren zusammen, die Luft gehoert darunter zu den
 * Kacheln.
 */
.k-trainer > .k-label {
	margin-bottom: 8px !important;
}

.k-trainer > .wp-block-heading {
	margin-bottom: 10px !important;
}

/*
 * Der Schwerpunkt steht nur auf der Sparten-Seite. Im laufenden Band der
 * Startseite waeren dreizehn Saetze uebereinander zu viel Text auf zu
 * kleiner Flaeche.
 */
.k-person__fokus {
	display: none;
}

body[class*="k-sparte-"] .k-person__fokus {
	display: block;
	line-height: 1.4;
}

/* --- Preise: ein Baustein, eine Darstellung -----------------------------
 *
 * Hier stand bis zum 10.09.2026 eine zweite Fassung der Tarife: auf der
 * Preisseite Zeilen statt Karten, umgeschaltet ueber die Body-Klasse
 * k-preise-liste. Der Gedanke war richtig -- auf einer Preisseite
 * vergleicht man, und Zeilen vergleicht man leichter als Karten.
 *
 * Gehalten hat die Fassung nicht. Auf dem Rechner standen schmale Karten
 * links, daneben eine Merkmalsspalte, in der jede Zeile umbrach, rechts
 * eine leere Flaeche ueber die halbe Breite, und die hervorgehobene Karte
 * zeigte weder Merkmale noch Knopf. 3.017 Pixel fuer sechs Tarife.
 *
 * Die Preisseite zeigt jetzt dieselben Karten wie die Startseite. Wer die
 * Zeilenfassung neu bauen will, faengt besser von vorn an, als das hier
 * Gestandene wiederzubeleben.
 */

/* --- Zweiter Knopf in der Leiste: Mitglied werden ------------------------- */

/*
 * Ersetzt die schmale graue Leiste ueber der Navigation. Die kostete oben
 * 33 Pixel, schob die ganze Leiste nach unten und trug zwei Wege, die auch
 * in die Navigation passen: "Mitglied werden" steht jetzt als zweiter Knopf
 * daneben, "Formulare" im Untermenue Verein.
 *
 * Er tritt hinter das Probetraining zurueck -- nur Kontur, keine Flaeche.
 * Zwei gefuellte Knoepfe nebeneinander waeren zwei Hauptwege, und der
 * Hauptweg ist das Probetraining: Wer den Verein noch nicht kennt, tritt
 * nicht als Erstes ein.
 *
 * Eigene Klasse statt is-style-outline: Der Kernstil zieht mit drei Klassen
 * an (.wp-block-button.is-style-outline > .wp-block-button__link) und hat
 * beim CTA-Band schon einmal eine zweiklassige Regel ueberstimmt.
 */
.k-nav__zweitcta .wp-block-button__link {
	padding: 0.85rem 1.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}




/*
 * Zwischen 1100 und 1279 Pixeln wird es neben Menue, Symbolen und zwei
 * Knoepfen zu eng. Dann faellt der zweite Knopf weg -- der Weg bleibt ueber
 * das Untermenue Verein und den Fussbereich erreichbar.
 */
@media (max-width: 1279px) {
	.k-nav__zweitcta {
		display: none !important;
	}
}

/* --- Stoererband: Knopf auf der Kante der Leiste ------------------------- */

/*
 * Der Knopf "Platz sichern" endete 209 Pixel weiter innen als die Knoepfe in
 * der Navigation darueber -- gemessen auf einem 1920er Schirm. Derselbe
 * Grund wie damals bei der schmalen Leiste: Die Navigation hebt die
 * 1440er Begrenzung fuer ihren Inhalt auf, das Stoererband hielt sich daran.
 * Auf einem 1440er Schirm faellt das nicht auf, weil dort beide gleich breit
 * sind. Ausrichtung gehoert auf einem breiten Schirm geprueft.
 *
 * Die Reihe laeuft jetzt genauso weit wie die der Navigation. Damit der Text
 * links trotzdem auf der Textkante der Seite stehen bleibt -- die Ueberschrift
 * des Kopfbereichs darunter beginnt bei 233 -- bekommt sie links genau den
 * Abstand, den die 1440er Begrenzung vorher erzeugt hat: die Haelfte dessen,
 * was ueber 1440 hinausgeht. Auf schmalen Schirmen wird der Wert negativ,
 * max() faengt das auf null ab.
 */
.k-stoerer__reihe {
	max-width: none !important;
	/* Mindestens so weit eingerueckt, wie die Streifen links reichen -- auf
	   schmalen Schirmen liefe der Text sonst in die Schraege hinein. */
	padding-left: max(var(--k-streifen-platz, 0px), calc((100% - 1440px) / 2));
	position: relative;
	z-index: 1;
}

/* --- Stoererband: Schraege am linken Rand --------------------------------- */

/*
 * Das Band nimmt die Schraege des Kopfbereichs auf: links steht Navy, daneben
 * ein schmaler Streifen im Mischton aus Navy und Lila, dann erst das Lila.
 * Beide Flaechen sind geschert, nicht zugeschnitten -- so bleibt der Winkel
 * gleich, egal wie hoch das Band gerade ist.
 *
 * Der Winkel ist der des Kopfbereichs: dort laeuft die weisse Flaeche ueber
 * die Schirmhoehe um 15 Prozent ihrer 70 Prozent Breite zurueck, also
 * 10,5vw auf 100svh. atan2 rechnet daraus den Winkel; Browser ohne atan2
 * behalten die 10 Grad davor, die bei gaengigen Schirmen herauskommen.
 */
.k-stoerer {
	--k-streifen-navy: 5rem;
	--k-streifen-mitte: 5rem;
	--k-streifen-platz: calc(var(--k-streifen-navy) + var(--k-streifen-mitte) + 1rem);
	position: relative;
	overflow: hidden;
}

.k-stoerer::before,
.k-stoerer::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	transform-origin: 0 0;
	transform: skewX(-10deg);
	transform: skewX(calc(-1 * atan2(10.5vw, 100svh)));
}

/* Navy beginnt weit links ausserhalb, damit seine eigene linke Kante nach
   dem Scheren nicht ins Bild ragt. */
.k-stoerer::before {
	left: -3rem;
	width: calc(3rem + var(--k-streifen-navy));
	background: var(--wp--preset--color--navy);
}

.k-stoerer::after {
	left: var(--k-streifen-navy);
	width: var(--k-streifen-mitte);
	background: #403E8A;
	background: color-mix(in srgb, var(--wp--preset--color--navy), var(--wp--preset--color--defense));
}

/*
 * Einfahren beim Scrollen. einblenden.js haengt k-auf und is-da an das Band;
 * das Band selbst bleibt dabei sichtbar, nur die Streifen stehen anfangs
 * links ausserhalb und fahren nacheinander herein -- erst der helle, dann
 * der dunkle. Der Weg ist so bemessen, dass auch die obere rechte Ecke
 * (nach dem Scheren der aeusserste Punkt) hinter dem Rand steht.
 */
.k-auf-bereit .k-stoerer.k-auf {
	--k-streifen-weg: calc(-1 * (var(--k-streifen-navy) + var(--k-streifen-mitte) + 4rem));
	opacity: 1;
	transform: none;
	transition: none;
}

.k-auf-bereit .k-stoerer.k-auf::before,
.k-auf-bereit .k-stoerer.k-auf::after {
	transform: translateX(var(--k-streifen-weg)) skewX(-10deg);
	transform: translateX(var(--k-streifen-weg)) skewX(calc(-1 * atan2(10.5vw, 100svh)));
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.k-auf-bereit .k-stoerer.k-auf::before {
	transition-delay: 0.22s;
}

.k-auf-bereit .k-stoerer.k-auf.is-da::before,
.k-auf-bereit .k-stoerer.k-auf.is-da::after {
	transform: translateX(0) skewX(-10deg);
	transform: translateX(0) skewX(calc(-1 * atan2(10.5vw, 100svh)));
}

/* Auf dem Handy hat auch der Kopfbereich keine Schraege. */
@media (max-width: 781px) {
	.k-stoerer {
		--k-streifen-platz: 0px;
	}
	.k-stoerer::before,
	.k-stoerer::after {
		display: none;
	}
}

/* Und gleich gross wie die Knoepfe in der Leiste: dieselbe Polsterung,
   dieselbe Schriftgroesse. Vorher war er 55 Pixel hoch gegen 48. */
.k-stoerer .wp-block-button__link {
	padding: 0.85rem 1.6rem;
	font-size: var(--wp--preset--font-size--x-small);
}

/*
 * Er steht unter "Mitglied werden", nicht unter dem Probetraining. Beide
 * sind der zweite Weg: einer fuehrt in den Verein, einer in den Kurs. Das
 * Probetraining bleibt allein rechts aussen stehen.
 *
 * CSS kann die Kante eines anderen Elements nicht abfragen. Statt eine
 * gemessene Zahl einzutragen, die beim naechsten Wort im Knopf falsch waere,
 * bekommt der Probetraining-Knopf eine feste Breite -- und das Stoererband
 * rueckt genau um diese Breite plus den Abstand dazwischen ein. Beide Werte
 * stehen einmal hier oben, damit sie nicht auseinanderlaufen koennen.
 */
:root {
	/* Alle drei Knoepfe tragen dasselbe Mass: die beiden in der Leiste und
	   "Platz sichern" im Stoererband. Das Stoererband rechnet mit dieser
	   Variablen, seine Ausrichtung wandert also mit. */
	--k-navknopf-breite: 11.5rem;
	--k-navknopf-abstand: var(--wp--preset--spacing--40);
	/* "Mitglied werden" und "Platz sichern" sind gleich breit. Der Wert
	   richtet sich nach dem laengeren der beiden Woerter. */
	--k-zweitknopf-breite: 11.5rem;
}

.k-nav__cta .wp-block-button__link {
	width: var(--k-navknopf-breite);
}

/*
 * Der Knopf sass 4 Pixel hoeher als "Mitglied werden". Nicht der Knopf war
 * schuld, sondern seine Huelle: `.wp-block-button` ist ein Block, der Link
 * darin ein inline-block. Darunter bleibt der Zeilenrest der Grundlinie
 * stehen -- gemessen 55,4 statt 47 Pixel. Die Elternreihe zentriert dann die
 * zu hohe Huelle, und der Knopf haengt in ihr oben.
 * display:flex nimmt der Huelle den Zeilenrest, sie ist so hoch wie der Knopf.
 */
.k-nav__cta .wp-block-button,
.k-nav__zweitcta .wp-block-button {
	display: flex;
}

/* Beide zweiten Wege gleich breit. box-sizing, weil nur einer von beiden
   eine Kontur traegt -- sonst waere er zwei Pixel breiter als der andere. */
.k-nav__zweitcta .wp-block-button__link,
.k-stoerer .wp-block-button__link {
	box-sizing: border-box;
	width: var(--k-zweitknopf-breite);
}


.k-stoerer__reihe {
	padding-right: calc(var(--k-navknopf-breite) + var(--k-navknopf-abstand));
}

/*
 * Unter 1280 faellt "Mitglied werden" weg, unter 1100 auch das
 * Probetraining. Dann gibt es nichts mehr, worunter der Knopf stehen
 * koennte -- er rueckt wieder an die Kante der Leiste.
 */
@media (max-width: 1279px) {
	.k-stoerer__reihe {
		padding-right: 0;
	}
}

/* --- Trainer: eine Person, ein Text daneben ------------------------------ */

/*
 * Bei Tai Chi und Rueckenfit unterrichtet je eine Person. Eine einzelne
 * Karte in einem Laufband unter der Ueberschrift "Das Trainerteam" sah
 * verloren aus -- so wie es der Astro-Entwurf schon geloest hatte, tritt
 * hier ein kurzer Text neben das Bild.
 *
 * Es ist derselbe Baustein wie ueberall, nur die dritte Darstellung:
 * Startseite Laufband, Sparten-Seite Raster, Einzelperson Portraet mit
 * Text daneben. Die Klasse setzt inc/zeiten-filter.php.
 */
.k-trainer__kontext {
	display: none;
}

body.k-sparte-taichi .k-trainer-kontext--taichi,
body.k-sparte-qigong .k-trainer-kontext--qigong,
body.k-sparte-rueckenfit .k-trainer-kontext--rueckenfit,
body.k-sparte-selbstverteidigung .k-trainer-kontext--selbstverteidigung {
	display: block;
	/*
	 * Die bekannte Falle: Der Baustein liegt in einem eingegrenzten Layout,
	 * und WordPress gibt jedem Kind darin margin-inline: auto und die
	 * Inhaltsbreite als Deckel. Der Text stand dadurch mittig in seiner
	 * Spalte statt an der Textkante der Seite.
	 */
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Die allgemeine Ueberschrift der Sektion weicht dem eigenen Text. */
body.k-trainer-einzeln .k-trainer > .k-label,
body.k-trainer-einzeln .k-trainer > .wp-block-heading,
body.k-trainer-einzeln .k-trainer > p.has-large-font-size,
body.k-trainer-zwei .k-trainer > .k-label,
body.k-trainer-zwei .k-trainer > .wp-block-heading,
body.k-trainer-zwei .k-trainer > p.has-large-font-size {
	display: none;
}

/*
 * Zwei Spalten: links der Text, rechts das Portraet. Die Buehne traegt
 * sonst den Ausbruch bis zum Fensterrand -- den braucht sie hier nicht,
 * das Band laeuft ja nicht.
 */
body.k-trainer-einzeln .k-trainer__buehne {
	display: grid;
	/*
	 * Feste Spalten statt 1fr: Mit 1fr wuchs die Textspalte auf die ganze
	 * Restbreite, Text und Bild klebten an den Aussenkanten und dazwischen
	 * stand ein Loch. Jetzt sind beide Spalten so breit, wie ihr Inhalt sie
	 * braucht, und das Paar steht zusammen in der Mitte.
	 */
	grid-template-columns: minmax(0, 40rem) minmax(0, 26rem);
	justify-content: center;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
	margin-inline: 0 !important;
}

body.k-trainer-einzeln .k-trainer__band {
	overflow: visible;
	padding-inline: 0;
}

/* Die Karte fuellt ihre Spalte und steht im Hochformat wie im Entwurf. */
body.k-trainer-einzeln .k-trainer__spur {
	width: 100%;
}

body.k-trainer-einzeln .k-trainer .wp-block-column {
	flex: 1 1 100% !important;
}

body.k-trainer-einzeln .k-trainer .k-person {
	min-height: 30rem !important;
}

/*
 * Die Textspalte ist breit genug fuer 110 Zeichen je Zeile -- das liest sich
 * schlecht. Der Absatz bekommt deshalb eine eigene Grenze, die Ueberschrift
 * darf die ganze Spalte nutzen.
 */
body.k-trainer-einzeln .k-trainer__kontext p:not(.k-label) {
	max-width: 34rem;
	/* Dieselbe Falle eine Ebene tiefer: Der Kontext ist selbst ein
	   eingegrenztes Layout, also bekommt auch der Absatz darin von
	   WordPress margin-inline: auto -- und stand mittig statt links. */
	margin-inline: 0 !important;
}

@media (max-width: 781px) {
	/* Gestapelt: erst der Text, dann das Bild. */
	body.k-trainer-einzeln .k-trainer__buehne {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	body.k-trainer-einzeln .k-trainer .k-person {
		min-height: 26rem !important;
	}
}

/* --- Kurstermine: die naechsten Kursstarts ------------------------------- */

/*
 * Fuer Angebote, die als Kurs laufen statt fortlaufend. Rueckenfit hat acht
 * Termine und faengt dann neu an -- eine Zeile "Donnerstags 18 Uhr" im
 * Wochenplan haette verschwiegen, dass man nur zum Kursstart einsteigen kann.
 *
 * Der Aufbau ist bewusst schlicht: eine Zeile je Kurs, links der Zeitraum in
 * Fett, dahinter Ort und Hinweis. Abgelaufene nimmt inc/kurstermine.php
 * heraus, bevor die Seite ausgeliefert wird.
 */
.k-kurse__termin {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.25rem;
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	line-height: 1.5;
}

/* Die letzte Zeile bekommt ihre Linie, sonst endet die Liste offen. */
.k-kurse__termin:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.k-kurse__termin strong {
	/* Die Zeitraeume stehen untereinander auf gleicher Kante. Ohne feste
	   Breite rutschte der Ort je nach Laenge des Datums hin und her. */
	flex: 0 0 auto;
	min-width: 16rem;
	color: var(--k-accent, var(--wp--preset--color--health));
}

/*
 * Der Trennpunkt aus dem Markup bleibt fuer den Vorlesemodus und fuer den
 * Fall ohne Stylesheet stehen, sichtbar ist er nicht: Zwischen Zeitraum und
 * Ort steht schon die feste Spaltenbreite, ein Punkt davor sah aus wie ein
 * verirrtes Zeichen am Zeilenanfang.
 */
.k-kurse__trenner {
	display: none;
}

.k-kurse__leer {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--gray-200);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

@media (max-width: 600px) {
	/* Auf dem Handy steht der Zeitraum ueber dem Ort, sonst bleibt fuer den
	   Ort nur noch eine Handbreit. */
	.k-kurse__termin strong {
		flex: 0 0 100%;
		min-width: 0;
	}

}

/* --- Trainerraster: mittig, wenn die Reihe nicht voll wird ---------------- */

/*
 * Bei Kids stehen drei Karten in einer Reihe, die fuenf tragen wuerde --
 * linksbuendig sah das aus, als fehle rechts etwas. Sie ruecken deshalb in
 * die Mitte, und Kicker, Ueberschrift und Einleitung darueber mit ihnen.
 *
 * Auf der Startseite bleibt alles links: Dort laeuft das Band, und ein
 * zentrierter Anfang haette den Lauf unruhig gemacht.
 */
body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer__spur {
	justify-content: center;
}

body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer > .k-label,
body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer > .wp-block-heading,
body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer > p {
	text-align: center;
}

/* --- Trainer: zwei Personen im Wechsel ----------------------------------- */

/*
 * Bei Selbstschutz unterrichten zwei. Zwei Karten nebeneinander waeren ein
 * halbleeres Raster, deshalb stellt sich jede Person einzeln vor -- erst
 * Text links und Bild rechts, dann andersherum. So war es im Astro-Entwurf
 * (TrainerSpotlight mit "reversed").
 *
 * Der Trick dabei: Die Karten liegen zwei Ebenen tiefer, im Band und in der
 * Spur. Mit display: contents fallen diese beiden Ebenen aus dem Layout, und
 * die Karten werden zu Kacheln desselben Rasters wie die Texte. Erst
 * dadurch lassen sie sich ueberhaupt im Wechsel setzen.
 */
body.k-trainer-zwei .k-trainer__buehne {
	display: grid;
	/*
	 * Beide Spalten gleich breit. Mit einer schmalen Bildspalte waere der
	 * Text in der zweiten Zeile -- wo er rechts steht -- nur halb so breit
	 * gewesen wie in der ersten.
	 */
	grid-template-columns: minmax(0, 30rem) minmax(0, 30rem);
	justify-content: center;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
	align-items: center;
	margin-inline: 0 !important;
}

body.k-trainer-zwei .k-trainer__band,
body.k-trainer-zwei .k-trainer__spur {
	display: contents;
}

/* Erste Zeile: Text links, Bild rechts. */
body.k-trainer-zwei .k-trainer-kontext--nr1 {
	grid-column: 1;
	grid-row: 1;
}

body.k-sparte-selbstverteidigung.k-trainer-zwei
	.k-trainerkarte:nth-child(1 of .k-trainer--selbstverteidigung) {
	grid-column: 2;
	grid-row: 1;
	/* Beide Bilder ruecken an die Mitte, nicht an den Aussenrand. */
	justify-self: start;
}

/* Zweite Zeile andersherum: Bild links, Text rechts. */
body.k-sparte-selbstverteidigung.k-trainer-zwei
	.k-trainerkarte:nth-child(2 of .k-trainer--selbstverteidigung) {
	grid-column: 1;
	grid-row: 2;
	/* Buendig mit dem Text darueber, nicht an die Mitte geschoben -- beide
	   Zeilen beginnen an derselben linken Kante. */
	justify-self: start;
}

body.k-trainer-zwei .k-trainer-kontext--nr2 {
	grid-column: 2;
	grid-row: 2;
}

body.k-trainer-zwei .k-trainer .wp-block-column {
	flex: 1 1 auto !important;
	width: 26rem;
	max-width: 100%;
}

body.k-trainer-zwei .k-trainer .k-person {
	min-height: 30rem !important;
}

body.k-trainer-zwei .k-trainer__kontext p:not(.k-label) {
	max-width: 34rem;
	margin-inline: 0 !important;
}

body.k-trainer-zwei .k-trainer__pfeil,
body.k-trainer-zwei .k-trainer .k-num {
	display: none;
}

body.k-trainer-zwei .k-person__fokus {
	display: block;
	line-height: 1.4;
}

@media (max-width: 781px) {
	/* Gestapelt faellt der Wechsel weg: immer erst der Text, dann das Bild. */
	body.k-trainer-zwei .k-trainer__buehne {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	body.k-trainer-zwei .k-trainer-kontext--nr1 { grid-row: 1; grid-column: 1; }
	body.k-sparte-selbstverteidigung.k-trainer-zwei
		.k-trainerkarte:nth-child(1 of .k-trainer--selbstverteidigung) { grid-row: 2; grid-column: 1; }
	body.k-trainer-zwei .k-trainer-kontext--nr2 { grid-row: 3; grid-column: 1; }
	body.k-sparte-selbstverteidigung.k-trainer-zwei
		.k-trainerkarte:nth-child(2 of .k-trainer--selbstverteidigung) { grid-row: 4; grid-column: 1; justify-self: stretch; }

	body.k-trainer-zwei .k-trainer .k-person {
		min-height: 26rem !important;
	}
}

/*
 * Die Ueberschrift im Trainertext richtet sich nach der Spalte, nicht nach
 * der Seitenbreite. "Dein Ansprechpartner." lief sonst aus den 30rem heraus
 * und schob sich hinter das Portraet daneben.
 */
body.k-trainer-zwei .k-trainer__kontext .wp-block-heading,
body.k-trainer-einzeln .k-trainer__kontext .wp-block-heading {
	font-size: clamp(1.75rem, 2.6vw, 2.6rem);
	line-height: 1;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* --- Sparten-Kopf: die Schlagzeile bricht nicht mehr mitten im Wort ------- */

/*
 * "Selbstschutz. Kompaktkurs" stand als "SELBSTSCHUT / Z. / KOMPAKTKUR / S"
 * auf der Seite. Zwei Ursachen, dieselben wie schon bei den Tarifkarten:
 *
 * 1. Weiter oben steht global word-break: break-word. Das trennt mitten im
 *    Wort und ohne Trennstrich, sobald es eng wird.
 * 2. Die Schlagzeile ist auf die volle Seitenbreite bemessen, steht aber nur
 *    in der linken Haelfte -- die rechte gehoert dem Bild.
 *
 * hyphens: auto allein reicht nicht, Chrome trennt nur mit passendem
 * Woerterbuch. Deshalb zusaetzlich eine Groesse, in die das laengste Wort
 * hineinpasst.
 */
.k-offer-hero h1,
.k-kids-hero h1 {
	/*
	 * Groesser gestellt am 08.09.2026. Der Maßstab ist "Selbstschutz." --
	 * das laengste Wort im Kopf. Gemessen wurde, wieviel es in der
	 * Textspalte noch vertraegt: bei 1024 Pixeln blieben mit der alten
	 * Groesse 14 Prozent Luft, bei 2108 waren es 30. Die neue Formel
	 * schoepft das bis auf rund zehn Prozent Reserve aus und laesst das
	 * Wort ueberall in einer Zeile. Auf dem Handy bleibt es bei 2.25rem:
	 * dort war die alte Groesse schon zu 99 Prozent ausgereizt.
	 */
	font-size: clamp(2.25rem, 5vw, 5.2rem) !important;
	line-height: 0.95;
	word-break: normal;
	overflow-wrap: normal;
	hyphens: auto;
}

/*
 * Der Kopf bricht aus dem Seitenraster aus (Wunsch 08.09.2026).
 *
 * Alle Sektionen laufen in einer Spur von 1440 Pixeln. Auf einem 2100er
 * Schirm blieben links dadurch 326 Pixel leer, die Ueberschrift stand
 * weit in der Flaeche. Nur der Kopf laeuft jetzt bis an den Rand, der
 * Abstand waechst mit dem Fenster: 24 Pixel auf dem Handy, hoechstens 96
 * auf grossen Schirmen.
 *
 * Die Textspalte bekommt dafuer eine eigene Grenze. Ohne sie waere sie
 * die Haelfte des Fensters breit, und die Zeilen wuerden auf grossen
 * Schirmen zu lang zum Lesen.
 */
/*
 * Beide Koepfe sind alignfull und ziehen sich mit einem negativen
 * Aussenabstand ueber den Seitenrand von 24 Pixeln hinaus. Wer den Abstand
 * einfach auf den aeusseren Kasten legt, gleicht damit nur diesen Ausbruch
 * aus -- auf dem Handy stand die Ueberschrift dadurch mit 0 Pixeln
 * Abstand an der Kante. Deshalb hier zwei getrennte Schritte: aussen nur
 * der Ausgleich, der sichtbare Abstand kommt auf die Spalten.
 */
.k-offer-hero .wp-block-cover__inner-container {
	max-width: none;
	padding-inline: 0;
}

.k-kids-hero {
	padding-inline: 0 !important;
}

.k-offer-hero__grid,
.k-kids-hero .wp-block-columns {
	max-width: none !important;
	padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.k-kids-hero__text {
	max-width: 44rem;
}

/*
 * Die Textspalte der Sparten-Koepfe bekommt mehr als die Haelfte, sonst
 * begrenzt nicht die Schriftgroesse den Kopf, sondern die Spalte. Bis 80
 * Prozent der Breite liegt ohnehin die weisse Flaeche, das Foto rechts
 * bleibt frei. Beim Kids-Kopf bleibt es bei der Haelfte -- dort sitzt ab
 * 40 Prozent das Maskottchen.
 */
.k-offer-hero__text {
	flex-basis: 58% !important;
	max-width: 52rem;
}

/*
 * Bildausschnitt je Sparte.
 *
 * WICHTIG: Das Muster schreibt `style="object-position:50% 50%"` direkt an
 * das img. Ein Stil am Element schlaegt jede Regel aus der Datei -- ohne
 * !important passiert hier also nichts. Das ist am 08.09.2026 aufgefallen:
 * Eine Regel mit 60 Prozent stand wochenlang wirkungslos in der Datei, zu
 * sehen war immer die Mitte.
 *
 * Selbstschutz laeuft deshalb bewusst mit der Voreinstellung (Mitte), so
 * wie freigegeben. Bei Qi Gong steht die Uebende im Bild weit links und
 * wurde von der Schraege angeschnitten -- 30 Prozent rueckt sie nach
 * rechts ins Freie.
 */
body.k-sparte-qigong .k-offer-hero .wp-block-cover__image-background {
	object-position: 30% 50% !important;
}

/*
 * Karate, 08.09.2026: Ausschnitt nach rechts. Der kleinere Wert zeigt mehr
 * von der linken Bildhaelfte -- das Motiv wandert dadurch nach rechts ins
 * Bild. Auch hier das !important, weil der Cover-Block sein
 * object-position als Elementstil an das Bild schreibt.
 */
body.k-sparte-karate .k-offer-hero .wp-block-cover__image-background {
	object-position: 32% 50% !important;
}

/*
 * Rueckenfit, 12.10.2026: Martina stand in der Bildmitte und damit genau an
 * der Schraege, ihr Arm lief parallel zur Kante. 25 Prozent rueckt sie nach
 * rechts ins Freie.
 */
body.k-sparte-rueckenfit .k-offer-hero .wp-block-cover__image-background {
	object-position: 25% 50% !important;
}


/* ========================================================================= */
/* DREI KNOEPFE, EINE REGEL                                                  */
/* ========================================================================= */

/*
 * Stand 04.09.2026. Vorher gab es elf Bauarten und einundfuenfzig Regeln, die
 * Flaeche oder Schrift eines Knopfes gesetzt haben. Jede einzeln begruendet,
 * zusammen kein System -- und in jeder neuen Sektion fiel wieder auf, dass
 * irgendwo dunkle Schrift auf einer Farbflaeche stand.
 *
 * Die Farben kommen aus dem Designmanual des Vereins (V3, Seite 11):
 *
 *   Hauptfarbe    #101A2D    80 Prozent Anteil
 *   Sekundaer     #FFFFFF    10 Prozent
 *   Karate        #7AB5FF    2,5 Prozent
 *   Kids          #FFA347    2,5 Prozent
 *   Gesundheit    #B3E762    2,5 Prozent
 *   Selbstschutz  #7162E7    2,5 Prozent
 *
 * Die vier Spartenfarben sind **Akzente**, keine Flaechen -- das sagen die
 * 2,5 Prozent. Ein Knopf, der ganz in Hellgruen steht, waere fuenfmal so
 * viel Farbe, wie das Manual vorsieht. Deshalb:
 *
 *   Die Flaeche eines gefuellten Knopfes ist immer die Hauptfarbe.
 *   Die Sparte zeigt sich am Rand, in der Schrift und in der Bewegung.
 *
 * Damit gilt die Festlegung von selbst, ohne eine einzige neue Farbe:
 *
 *   **Liegt eine Farbflaeche unter der Schrift, ist die Schrift hell.**
 *
 * Am 04.09.2026 waren vier gedeckte Zwischentoene im Einsatz, damit ein
 * gruener Knopf weisse Schrift tragen kann. Die standen nicht im Manual und
 * sind wieder heraus.
 */

:root {
	--k-knopf-flaeche: var(--wp--preset--color--navy);
	--k-knopf-schrift: var(--wp--preset--color--white);
	--k-knopf-akzent: var(--wp--preset--color--navy);
}

/* k-accent-* steht an der Sektion, k-farbe-* am einzelnen Stueck. */
.k-accent-blue,    .k-farbe-blue    { --k-knopf-akzent: var(--wp--preset--color--blue); }
.k-accent-orange,  .k-farbe-orange  { --k-knopf-akzent: var(--wp--preset--color--orange); }
.k-accent-health,  .k-farbe-health  { --k-knopf-akzent: var(--wp--preset--color--health); }
.k-accent-defense, .k-farbe-defense { --k-knopf-akzent: var(--wp--preset--color--defense); }

/* --- 1. Hauptweg --------------------------------------------------------- */

.k-knopf--voll .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link {
	background-color: var(--k-knopf-flaeche);
	color: var(--k-knopf-schrift);
	/*
	 * Kein Rahmen. Er war einmal da, damit gefuellte und Kontur-Knoepfe
	 * gleich hoch sind -- und hat danach in Serie Aerger gemacht: mal blieb
	 * eine helle Linie stehen, wenn die Flaeche einfuhr, mal war er selbst
	 * zu sehen. Die Kontur-Knoepfe tragen ihre Linie jetzt als inneren
	 * Schatten, der nichts an der Groesse aendert. Damit sind beide gleich
	 * hoch und keiner hat einen Rahmen.
	 */
	border: 0;
	box-sizing: border-box;
}

/*
 * Beim Ueberfahren wird jeder Knopf blau, die Schrift bleibt weiss. Das gilt
 * fuer beide Rollen und fuer jede Sektion -- an einer Stelle geaendert, ueber
 * die ganze Seite wirksam.
 *
 * Der Rand wandert mit. Vorher lag beim Ueberfahren nur ein heller Schleier
 * ueber der Flaeche, und der Rand, der im Ruhezustand durchsichtig ist, blieb
 * als dunkle Linie stehen -- am Probetraining im Kopfbereich zu sehen.
 *
 * Zum Kontrast: Weiss auf dem hellen Blau steht bei 2,1 zu 1 und liegt damit
 * unter der Grenze von 4,5. Das ist mehrfach so entschieden worden und gilt
 * ueberall gleich, damit die Schrift nirgends beim Ueberfahren die Farbe
 * wechselt.
 */

/* --- Die schraege Flaeche faehrt bei jedem gefuellten Knopf ein ----------- */

/*
 * Bis zum 04.09.2026 war diese Bewegung an vier Stellen einzeln gebaut --
 * im Kopfbereich, im Abschlussband, zweimal auf der Kids-Seite -- und an
 * einigen Knoepfen fehlte sie ganz, etwa am "Platz sichern" im Stoererband.
 * Deshalb sah sie ueberall ein bisschen anders aus.
 *
 * Jetzt haengt sie am Hauptweg selbst. Welche Farbe einfaehrt, sagt
 * --k-knopf-hover; ohne Angabe ist es Blau. Eine Sektion, die etwas anderes
 * will, setzt die Variable -- und niemand baut die Bewegung noch einmal.
 */
.k-knopf--voll .wp-block-button__link,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link {
	position: relative;
	isolation: isolate;
	/*
	 * overflow und nicht clip-path. clip-path waere fuer die einfahrende
	 * Flaeche praeziser -- es schneidet an der Aussenkante des Rahmens statt
	 * an der Innenkante -- beschneidet aber auch Schatten. Der pulsierende
	 * Ring am "Platz sichern" im Stoererband war damit weg.
	 *
	 * Den Saum, den overflow an der Rahmenlinie stehen laesst, nimmt die
	 * Hover-Regel weiter unten weg: Sie faerbt den Rahmen in dieselbe Farbe
	 * wie die einfahrende Flaeche.
	 */
	overflow: hidden;
}

.k-knopf--voll .wp-block-button__link::after,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	left: -20%;
	width: 140%;
	z-index: -1;
	background: var(--k-knopf-hover, var(--wp--preset--color--blue));
	transform: translateX(-100%) skewX(-12deg);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-knopf--voll .wp-block-button__link:hover::after,
.k-knopf--voll .wp-block-button__link:focus-visible::after,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover::after,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible::after {
	transform: translateX(0) skewX(-12deg);
}

@media (prefers-reduced-motion: reduce) {
	.k-knopf--voll .wp-block-button__link::after,
	.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link::after {
		transition: none;
	}
}

.k-knopf--voll .wp-block-button__link:hover,
.k-knopf--voll .wp-block-button__link:focus-visible,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	/*
	 * !important ist hier noetig, nicht bequem. Bekommt ein Knopf im Muster
	 * eine Textfarbe mit ("textColor":"navy"), schreibt WordPress dafuer
	 * .has-navy-color { color: ... !important } in die Seite. Eine
	 * gewoehnliche Regel verliert dagegen immer -- der Knopf "Jetzt starten"
	 * behielt deshalb beim Ueberfahren seine dunkle Schrift, obwohl die
	 * Flaeche blau wurde. Das betraf jeden Knopf mit gesetzter Textfarbe.
	 */
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
}

/* --- 2. Nebenweg --------------------------------------------------------- */

/*
 * Hier zeigt sich die Sparte: Rand und Schrift tragen ihre Farbe. Beim
 * Ueberfahren fuellt sich der Knopf mit der Hauptfarbe, und damit gilt
 * wieder -- Flaeche da, Schrift hell.
 */
.k-knopf--kontur .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--k-knopf-akzent);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--k-knopf-akzent);
	box-sizing: border-box;
}

/*
 * Der Nebenweg bleibt beim Ueberfahren offen: Rand und Schrift wechseln auf
 * Blau, die Flaeche bleibt leer. Er soll ein zweiter Weg bleiben und sich
 * nicht in einen zweiten Hauptweg verwandeln.
 */
.k-knopf--kontur .wp-block-button__link:hover,
.k-knopf--kontur .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	/* Aus demselben Grund wie oben mit !important. */
	background-color: transparent !important;
	color: var(--wp--preset--color--blue) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--blue) !important;
}

/*
 * Auf dunklem Grund kehrt sich der Nebenweg um: weisse Kontur, weisse
 * Schrift, beim Ueberfahren weisse Flaeche mit dunkler Schrift. Das ist kein
 * Widerspruch zur Festlegung -- Weiss ist keine Farbflaeche.
 */
.k-auf-dunkel .k-knopf--kontur .wp-block-button__link,
.k-auf-dunkel .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.k-auf-dunkel .k-knopf--kontur .wp-block-button__link:hover,
.k-auf-dunkel .k-knopf--kontur .wp-block-button__link:focus-visible,
.k-auf-dunkel .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.k-auf-dunkel .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
}

/* --- 3. Textweg ---------------------------------------------------------- */

.k-knopf--text .wp-block-button__link {
	background-color: transparent;
	color: var(--k-knopf-akzent);
	border: 0;
	padding-inline: 0;
	text-decoration: none;
}

.k-knopf--text .wp-block-button__link:hover,
.k-knopf--text .wp-block-button__link:focus-visible {
	background-color: transparent;
	color: var(--k-knopf-akzent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.k-auf-dunkel .k-knopf--text .wp-block-button__link {
	color: var(--wp--preset--color--white);
}

/* --- Der Aufkleber auf der Tarifkarte ------------------------------------ */

/*
 * Die eine Stelle, an der eine Spartenfarbe wirklich als Flaeche steht. Sie
 * ist klein genug fuer die 2,5 Prozent aus dem Manual, und die Schrift
 * darauf ist dunkel -- weiss waere auf dem Gruen nicht zu lesen. Frueher
 * galt diese Regel ohne jede Einschraenkung fuer alles mit k-farbe-*, und
 * der Kids-Knopf im Kopfbereich war deshalb orange gefuellt, obwohl er als
 * Kontur gebaut ist.
 */
.k-tarif__aufkleber.k-farbe-blue    { background-color: var(--wp--preset--color--blue); }
.k-tarif__aufkleber.k-farbe-orange  { background-color: var(--wp--preset--color--orange); }
.k-tarif__aufkleber.k-farbe-health  { background-color: var(--wp--preset--color--health); }
.k-tarif__aufkleber.k-farbe-defense { background-color: var(--wp--preset--color--defense); }

/* --- Die beiden Knoepfe in der Leiste, solange sie durchsichtig ist ------- */

/*
 * Oben auf der Startseite liegt die Leiste durchsichtig ueber dem
 * Kopfbereich. Dort sollen die beiden Wege sichtbar bleiben, ohne dass die
 * Leiste selbst schon eine Flaeche hat:
 *
 *   Probetraining     hellblau hinterlegt, Schrift weiss
 *   Mitglied werden   weisse Kontur, weisse Schrift, keine Flaeche
 *
 * Sobald die Leiste beim Scrollen weiss wird, gelten wieder die normalen
 * Rollen: Probetraining in der Hauptfarbe gefuellt, Mitglied werden als
 * Kontur.
 *
 * Weisse Schrift auf dem hellen Blau steht bei 2,1 zu 1. Das ist unter der
 * Grenze und mehrfach so entschieden -- der Knopf liegt hier auf dem dunklen
 * Teil des Kopfbereichs, dunkle Schrift waere dort noch schlechter zu sehen.
 */
.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__cta .wp-block-button__link,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	/* Solange der Knopf selbst blau ist, faehrt Dunkel ein -- Blau auf Blau
	   waere keine Rueckmeldung. */
	--k-knopf-hover: var(--wp--preset--color--navy);
}

.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__zweitcta .wp-block-button__link,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__zweitcta .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
}

/* --- Kids Karate im Kopfbereich: erst dunkel, beim Ueberfahren orange ----- */

/*
 * Der zweite Weg auf der Startseite fuehrt zu den Kindern. Im Ruhezustand
 * traegt er die Hauptfarbe wie jeder andere Nebenweg, erst beim Ueberfahren
 * kommt das Orange -- so faellt es auf, statt dauerhaft neben dem
 * Probetraining zu stehen.
 *
 * Nur Kontur und Schrift wechseln, keine Flaeche: Auf dem hellen Orange
 * stuende weisse Schrift bei 2,0 zu 1. Deshalb faehrt hier auch die schraege
 * Flaeche des Slash-Knopfes nicht ein.
 */
.k-hero .k-slash.k-farbe-orange .wp-block-button__link {
	color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--navy);
	transition: color 0.3s ease, box-shadow 0.3s ease;
}

.k-hero .k-slash.k-farbe-orange .wp-block-button__link:hover,
.k-hero .k-slash.k-farbe-orange .wp-block-button__link:focus-visible {
	/*
	 * !important, weil die allgemeine Hover-Regel seit dem 04.09.2026
	 * ebenfalls eines traegt -- sie muss sich gegen die Farbklassen von
	 * WordPress durchsetzen. Ohne das hier waere dieser Knopf blau statt
	 * orange, obwohl er der Weg zu den Kindern ist.
	 */
	background-color: transparent !important;
	color: var(--wp--preset--color--orange) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--orange) !important;
}

.k-hero .k-slash.k-farbe-orange .wp-block-button__link::before {
	display: none;
}

/* ========================================================================= */
/* AUF UNSEREN FARBEN STEHT WEISSE SCHRIFT -- BEI KNOEPFEN                    */
/* ========================================================================= */

/*
 * Festlegung von Johannes, mehrfach bestaetigt und ab hier nicht mehr zur
 * Diskussion: Traegt ein Knopf eine der fuenf Vereinsfarben als Flaeche, ist
 * seine Schrift weiss. Blau, Dunkelblau, Gruen, Orange, Lila -- ohne
 * Ausnahme und ohne Ruecksicht auf den gemessenen Kontrast.
 *
 * Gilt nur fuer Knoepfe. Flaechen im uebrigen Inhalt behalten ihre eigene
 * Schriftfarbe.
 *
 * Weiss und die Grautoene sind keine Vereinsfarben in diesem Sinn -- ein
 * weisser Knopf auf dunklem Band traegt weiter dunkle Schrift.
 */
.wp-block-button__link.has-blue-background-color,
.wp-block-button__link.has-navy-background-color,
.wp-block-button__link.has-navy-light-background-color,
.wp-block-button__link.has-health-background-color,
.wp-block-button__link.has-orange-background-color,
.wp-block-button__link.has-defense-background-color {
	color: var(--wp--preset--color--white) !important;
}

/* --- Der Knopf im Sparten-Kopf ------------------------------------------- */

/*
 * Er steht dunkel da, und beim Ueberfahren faehrt die Farbe der Sparte
 * schraeg durch. Keine dritte Farbe: nur Dunkelblau und die Farbe des
 * Angebots. Die Schrift bleibt in beiden Zustaenden weiss.
 *
 * Die allgemeine Hover-Regel weiter oben faerbt jeden Knopf blau -- hier
 * nicht, sonst waere auf der Rueckenfit-Seite Blau statt Gruen zu sehen.
 */
.k-offer-hero .wp-block-button__link,
.k-offer-hero .wp-block-button__link:hover,
.k-offer-hero .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy) !important;
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
	border-color: transparent !important;
}

/*
 * Karate-Abschluss: der Knopf traegt die Farbe schon im Ruhezustand
 * (08.09.2026, auf Wunsch). Vorher stand er navy auf navy -- vom dunklen
 * Grund kaum zu unterscheiden, erst beim Ueberfahren kam das Blau.
 *
 * Schrift weiss. Das ist eine Festlegung des Vereins fuer alle hellblauen
 * Flaechen und gilt unabhaengig vom gemessenen Kontrast; sie steht so auch
 * in der Leiste oben.
 *
 * Beim Ueberfahren faehrt Weiss ein. Damit die Beschriftung dabei nicht
 * verschwindet, wechselt sie auf Navy -- die Festlegung gilt fuer hellblaue
 * Flaechen, und blau ist die Flaeche in diesem Moment nicht mehr.
 *
 * Bewusst nur die blaue Sparte -- die uebrigen ziehe ich nach, wenn wir bei
 * den Seiten sind.
 */
.k-offer-cta.k-accent-blue .k-offer-cta__knopf {
	--k-knopf-hover: var(--wp--preset--color--white);
}

.k-offer-cta.k-accent-blue .k-offer-cta__knopf .wp-block-button__link {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--white) !important;
}

/*
 * Der Knopf im Hover braucht eine Klasse mehr im Selektor, als man denken
 * wuerde. Die allgemeine Regel fuer gefuellte Knoepfe steht als
 * `.wp-block-button:not(...):not(...):not(...) > .wp-block-button__link:hover`
 * -- die drei :not() zaehlen bei der Spezifitaet voll mit, macht sechs
 * Klassen gegen meine fuenf. Sie setzt die Schrift auf Weiss !important und
 * gewann deshalb, obwohl sie weiter oben steht. Mit dem zusaetzlichen
 * `.wp-block-button` im Pfad stehen beide bei sechs, und die spaetere Regel
 * entscheidet.
 */
.k-offer-cta.k-accent-blue .k-offer-cta__knopf .wp-block-button > .wp-block-button__link:hover,
.k-offer-cta.k-accent-blue .k-offer-cta__knopf .wp-block-button > .wp-block-button__link:focus-visible {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--navy) !important;
}

/*
 * Welche Farbe in einer Sektion einfaehrt. Die Bewegung selbst steht einmal
 * am Hauptweg, hier steht nur noch die Farbe.
 */
.k-offer-hero,
.k-offer-cta,
.k-kids-hero,
.k-kids-video,
/*
 * Der Abschnitt mit den vier Schritten stand nicht in dieser Liste: sein
 * Knopf fuhr deshalb ueberall im Blau des Fallbacks ein, auch auf der
 * Selbstschutz-Seite. Jetzt nimmt er die Farbe seiner Sparte -- Violett bei
 * Selbstschutz, Orange bei den Kindern, Gruen bei Rueckenfit, und auf der
 * Karate-Seite bleibt es Blau wie bisher.
 */
.k-schritte {
	--k-knopf-hover: var(--k-accent, var(--wp--preset--color--blue));
}

/*
 * Der Knopf im Kids-Abschluss (08.09.2026).
 *
 * Zwei Fallen auf einmal: In der Liste oben stand `k-kids-abschluss` --
 * diese Klasse kommt in keinem Muster vor, der Abschnitt heisst
 * `k-kids-schluss`. Und die Zuweisung am Abschnitt haette auch mit dem
 * richtigen Namen nicht genuegt: `--k-accent` wird erst weiter unten am
 * `k-kids-knopf` gesetzt, oben im Abschnitt ist es leer. Die Variable
 * gehoert deshalb dorthin, wo die Akzentfarbe schon bekannt ist.
 */
.k-kids-knopf {
	--k-knopf-hover: var(--k-accent, var(--wp--preset--color--orange));
}

.k-slash .wp-block-button__link::before {
	background: var(--k-knopf-hover, var(--k-accent, var(--wp--preset--color--blue)));
}

/*
 * Dieselbe Rechnung fuer die uebrigen Knoepfe mit einfahrender Flaeche:
 * dunkel im Ruhezustand, die Farbe des Angebots faehrt durch, Schrift immer
 * weiss. Vorher fuhr auf der Kids-Seite einmal Weiss ein und einmal ein
 * abgedunkeltes Orange, das im Manual nicht steht.
 */
.k-offer-cta__knopf .wp-block-button__link,
.k-offer-cta__knopf .wp-block-button__link:hover,
.k-offer-cta__knopf .wp-block-button__link:focus-visible,
.k-kids-hero__cta .wp-block-button__link,
.k-kids-hero__cta .wp-block-button__link:hover,
.k-kids-hero__cta .wp-block-button__link:focus-visible,
.k-kids-knopf .wp-block-button__link,
.k-kids-knopf .wp-block-button__link:hover,
.k-kids-knopf .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--navy) !important;
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
	border-color: transparent !important;
}

/*
 * Ausnahme im Kids-Kopf (08.09.2026).
 *
 * Dort steht der Knopf auf der orangen Flaeche. Faehrt die Akzentfarbe
 * ein, wird Orange auf Orange daraus und der Knopf loest sich auf. Hier
 * faehrt deshalb Weiss ein, die Schrift wechselt dazu auf Navy -- die
 * dunkle Farbe des Hauses, nicht reines Schwarz.
 *
 * Im Kids-Abschluss bleibt es bei Orange: Dort ist der Grund weiss, die
 * Farbe hat also genug Kontrast.
 */
.k-kids-hero__cta {
	--k-knopf-hover: var(--wp--preset--color--white);
}

/*
 * Eine Klasse mehr im Pfad, damit die Regel gewinnt: Die allgemeine Regel
 * fuer gefuellte Knoepfe steht als
 * `.wp-block-button:not(...):not(...):not(...) > .wp-block-button__link:hover`
 * und setzt die Schrift auf Weiss !important. Die drei :not() zaehlen bei der
 * Spezifitaet mit -- ohne das zusaetzliche `.wp-block-button` blieb die
 * Schrift weiss und der Knopf beim Ueberfahren leer. Dieselbe Falle wie beim
 * Abschluss der Karate-Seite.
 */
/*
 * Achtung beim Selektor: `k-kids-hero__cta` steht am Knopf selbst
 * (`div.wp-block-button.k-kids-hero__cta`), nicht am Kasten darum. Ein
 * Nachfahren-Selektor greift deshalb ins Leere -- die Klasse gehoert mit
 * Punkt direkt an `.wp-block-button`.
 */
.wp-block-button.k-kids-hero__cta:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.wp-block-button.k-kids-hero__cta:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--navy) !important;
}

/* Die Kids-Seite fuehrt Orange, auch wo keine k-accent-Klasse steht. */
.k-kids-hero,
.k-kids-hero__cta,
.k-kids-knopf,
.k-kids-abschluss {
	--k-accent: var(--wp--preset--color--orange);
}

/* --- Der Tarifname traegt die Farbe seines Angebots ----------------------- */

/*
 * "Karate Kids" in Orange, "Tai Chi" in Gruen und so weiter. Die Karte
 * traegt dafuer dieselbe Klasse wie ihr Aufkleber, k-farbe-*, und liest die
 * Farbe aus derselben Variablen wie die Knoepfe.
 *
 * Auch auf der dunklen Hauptkarte: Dort steht die Akzentfarbe auf Navy und
 * hebt sich gut ab -- genau dafuer ist sie im Manual gedacht.
 */
.k-tarif__kopf h3,
.k-tarif.is-haupt .k-tarif__kopf h3 {
	color: var(--k-knopf-akzent, var(--wp--preset--color--navy));
}

/* --- Die Knoepfe der Tarifkarten stehen auf einer Linie ------------------- */

/*
 * Der Kopf einer Karte ist unterschiedlich hoch: "Selbstverteidigung" traegt
 * unter dem Preis noch die Zeile "10 Einheiten à 90 Min", die anderen nicht.
 * Damit sass ihr Knopf 28 Pixel tiefer als bei den Nachbarn.
 *
 * Die Mindesthoehe entspricht dem hoechsten Fall -- Aufkleber, Name,
 * einzeilige Beschreibung, Preis und Zusatzzeile. Bricht ein Text auf
 * schmalen Schirmen um, waechst der Kopf darueber hinaus; dann stehen die
 * Karten ohnehin untereinander.
 */
.k-tarif__kopf {
	min-height: 13.5rem;
	box-sizing: border-box;
}

@media (max-width: 781px) {
	/* Gestapelt gibt es keine Nachbarn, an denen sich etwas ausrichten
	   muesste -- die Mindesthoehe waere nur leere Flaeche. */
	.k-tarif__kopf {
		min-height: 0;
	}
}

/* --- Der Tarifname ist ein Weg zur Sparte -------------------------------- */

/*
 * "Karate Kids" fuehrt auf die Kids-Seite, "Tai Chi" auf die Tai-Chi-Seite.
 * Der Link uebernimmt die Farbe der Ueberschrift, damit er als Ueberschrift
 * gelesen wird und nicht als Link im Fliesstext.
 */
.k-tarif__kopf h3 a {
	color: inherit;
	text-decoration: none;
	transition: text-decoration-color 0.2s ease;
}

.k-tarif__kopf h3 a:hover,
.k-tarif__kopf h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 2px;
}

/* --- "Platz sichern" im Stoererband -------------------------------------- */

/*
 * Der Knopf steht weiss auf dem farbigen Band. Beim Ueberfahren wird er
 * dunkel statt blau: Auf dem Band waere Blau eine dritte Farbe neben Weiss
 * und der Farbe der Sparte.
 */
/*
 * Im Stoererband faehrt Dunkel ein statt Blau: Auf dem farbigen Band waere
 * Blau eine dritte Farbe neben Weiss und der Farbe der Sparte.
 */
.k-stoerer {
	--k-knopf-hover: var(--wp--preset--color--navy);
}

/* --- Der Knopf einer Tarifkarte faerbt sich mit der Karte ----------------- */

/*
 * Im Ruhezustand ist er dunkel wie jeder Hauptweg. Die Farbe des Angebots
 * kommt erst, wenn jemand die Karte anfaehrt -- nicht nur den Knopf selbst.
 * Damit reagiert die ganze Karte, und die Farbe bleibt eine Betonung statt
 * einer Dauerfarbe.
 *
 * :focus-within ist dabei, damit es auch beim Durchtabben passiert.
 *
 * Der lange Selektor ist Absicht. Die allgemeine Hover-Regel traegt dieselbe
 * Kette und damit dieselbe Gewichtung -- eine kuerzere Regel verliert gegen
 * sie, auch mit !important. Wer hier etwas aendert, muss die Kette mitnehmen.
 */
.k-tarif__knopf.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link {
	background-color: var(--wp--preset--color--navy) !important;
	color: var(--wp--preset--color--white) !important;
	border-color: transparent !important;
	transition: background-color 0.25s ease;
}

/*
 * In der Tarifkarte faehrt die Farbe des Angebots ein -- und zwar schon,
 * wenn jemand die Karte anfaehrt, nicht erst den Knopf.
 */
.k-tarif {
	--k-knopf-hover: var(--k-knopf-akzent, var(--wp--preset--color--navy));
}

.k-tarif:hover .k-tarif__knopf.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link::after,
.k-tarif:focus-within .k-tarif__knopf.wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link::after {
	/*
	 * Die lange Kette ist noetig: Die allgemeine Regel, die die Flaeche in
	 * Warteposition haelt, traegt sie ebenfalls und ist damit schwerer. Eine
	 * kurze Regel verliert gegen sie, und die Flaeche blieb draussen stehen,
	 * obwohl die Karte schon angefahren war.
	 */
	transform: translateX(0) skewX(-12deg);
}

/* --- Die Knoepfe in der Leiste fahren nicht ------------------------------- */

/*
 * Der Probetraining-Knopf in der Navigation bekommt keine einfahrende
 * Flaeche. Oben auf der Startseite ist er selbst hellblau und liegt auf dem
 * dunklen Teil des Kopfbereichs -- faehrt dort Dunkelblau ein, verschwindet
 * er im Hintergrund.
 *
 * Stattdessen wechselt die Flaeche direkt:
 *   weisse Leiste  ->  Dunkelblau wird Blau
 *   oben, durchsichtig  ->  Blau wird Weiss, Schrift dunkel
 */
.k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link::after,
.k-nav__zweitcta .wp-block-button__link::after {
	content: none;
}

.k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease;
}

.k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--blue) !important;
	color: var(--wp--preset--color--white) !important;
}

.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__cta .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy) !important;
}


/* ---------------------------------------------------------------------------
   Angebotsseiten auf dem Handy, 08.09.2026

   Vier Stellen, die auf schmalen Fenstern nicht funktioniert haben. Alles in
   einem Zweig, damit es beisammen bleibt.
   --------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/* --- Kopfbereich: Text ohne feste Umbrueche, Knopf ueber die Breite ---

	   Die Umbrueche im Fliesstext sind fuer die breite Spalte gesetzt. In
	   einer 340 Pixel schmalen Spalte bricht der Satz ohnehin, und die
	   festen Umbrueche schneiden ihn zusaetzlich -- es entstehen Zeilen mit
	   drei Woertern und Zeilen mit acht. Auf dem Handy laeuft der Text
	   deshalb frei. */
	.k-offer-hero__text p br,
	.k-kids-hero__text p br {
		display: none;
	}

	/* Auf dem Handy ist die Schlagzeile kleiner, der Leerraum darunter
	   ebenfalls -- hier genuegt gut die Haelfte. */
	.k-offer-hero__zeile2 {
		margin-top: 0;
	}

	/*
	 * Kein Strich vor der Kickerzeile. Auf breiten Fenstern fuehrt er das
	 * Auge zur Zeile hin; in einer 340 Pixel schmalen Spalte nimmt er drei
	 * von zwoelf Zentimetern Zeilenbreite weg und draengt den Text in den
	 * Umbruch. Gilt fuer alle Angebotskoepfe, den der Kinderseite
	 * eingeschlossen.
	 */
	.k-offer-hero__kicker::before,
	.k-kids-hero__kicker::before {
		display: none;
	}

	.k-offer-hero__kicker,
	.k-kids-hero__kicker {
		gap: 0;
	}

	.k-offer-hero .wp-block-buttons,
	.k-offer-hero .wp-block-button {
		width: 100%;
	}

	.k-offer-hero .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* --- Die drei Saeulen stapeln sich beim Scrollen -------------------

	   Untereinander gestellt sind es drei gleich aussehende Kaesten, durch
	   die man hindurchscrollt. Als Stapel bleibt jede Karte am oberen Rand
	   stehen, die naechste schiebt sich darueber und laesst einen Streifen
	   der vorigen sichtbar.

	   Zwei Bedingungen dafuer: Die Karten brauchen einen deckenden Grund --
	   mit den bisherigen drei Prozent Weiss auf Durchsicht wuerde die
	   darunterliegende Karte durchscheinen. Und die Spalten muessen aus dem
	   Flex-Fluss heraus, sonst hat sticky keinen Bezugsrahmen. */
	.k-saeulen .wp-block-columns {
		display: block !important;
	}

	.k-saeule.wp-block-column {
		position: sticky;
		background: #151f31;
		margin-bottom: 1rem;
	}

	.k-saeule.wp-block-column:nth-child(1) { top: 72px; }
	.k-saeule.wp-block-column:nth-child(2) { top: 88px; }
	.k-saeule.wp-block-column:nth-child(3) { top: 104px; }

	/* Letzte Karte ohne Abstand, sonst haengt unter dem Stapel Luft. */
	.k-saeule.wp-block-column:last-child {
		margin-bottom: 0;
	}

	/* --- Trainer: eine Karte, seitlich blaettern -----------------------

	   Auf der Sparten-Seite steht das Trainerteam als Raster. Fuenf Karten
	   in einer 390 Pixel breiten Spalte ergaben fuenf 60 Pixel schmale
	   Streifen -- die Namen liefen Buchstabe fuer Buchstabe untereinander.

	   Auf dem Handy wird daraus wieder ein Band: eine Karte fuellt den
	   Bildschirm, die naechste schaut am Rand herein, und der Finger
	   blaettert weiter. Das Einrasten uebernimmt scroll-snap. */
	body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer__band,
	body.home .k-trainer__band {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40)) !important;
		padding-inline: var(--wp--preset--spacing--40);
		/* Die Leiste stoert unter den Karten, gewischt wird ohnehin. */
		scrollbar-width: none;
	}

	body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer__band::-webkit-scrollbar,
	body.home .k-trainer__band::-webkit-scrollbar {
		display: none;
	}

	body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer__spur,
	body.home .k-trainer__spur {
		flex-wrap: nowrap !important;
		width: max-content;
	}

	body[class*="k-sparte-"]:not(.k-trainer-einzeln) .k-trainer .wp-block-column,
	body.home .k-trainer .wp-block-column {
		flex: 0 0 78vw !important;
		max-width: 78vw;
		scroll-snap-align: center;
	}

	/* --- Trainingszeiten deutlicher voneinander trennen ----------------

	   Die Zeilen standen dicht an dicht und unterschieden sich nur durch
	   eine helle Haarlinie. Auf dem dunklen Grund verschwimmt das zu einem
	   Block. Jetzt liegt echter Abstand dazwischen, der Rahmen ist
	   kraeftiger, und der Balken links traegt die Farbe der Sparte.

	   Der Balken war bisher an :hover gebunden -- den gibt es auf dem Handy
	   nicht, dort blieb er immer grau. */
	.k-zeiten__zeile.wp-block-columns {
		margin-bottom: 1.75rem !important;
		background: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.16);
		border-left-color: var(--k-accent, var(--wp--preset--color--blue));
	}

	/*
	 * Der Zeitblock traegt hier die Farbe der Sparte (08.09.2026). Nur auf
	 * dem Handy: Dort steht er als eigene Zeile ueber dem Eintrag und
	 * uebernimmt die Trennung. Auf breiten Fenstern ist er die linke Spalte
	 * und bleibt abgedunkelt -- eine farbige Flaeche je Zeile waere dort
	 * deutlich mehr Farbe, als das Designmanual fuer Akzente vorsieht.
	 */
	.k-zeiten__wann {
		background: var(--k-accent, var(--wp--preset--color--blue));
		border-bottom-color: rgba(255, 255, 255, 0.14);
	}

	/* Auch die Tageszeile, die sonst in Grau-200 steht. */
	.k-zeiten__wann p {
		color: var(--wp--preset--color--white) !important;
	}

	/*
	 * Das Uhrsymbol ist eine SVG-Datei mit fester dunkler Farbe, es laesst
	 * sich nicht ueber currentColor steuern. brightness(0) macht es
	 * vollstaendig schwarz, invert(1) daraus reines Weiss.
	 */
	.k-zeiten__wann .k-icon img {
		filter: brightness(0) invert(1);
	}
}


/* ---------------------------------------------------------------------------
   Kopfleiste und Menue auf dem Handy -- neu gebaut am 08.09.2026

   Vorher: Logo und dreizeiliger Vereinsname nahmen die halbe Leiste ein, das
   Menuezeichen war 24 Pixel gross (empfohlen sind 44), und das ausgeklappte
   Menue war unbrauchbar -- die Unterpunkte standen in Grau auf Navy und
   ragten 59 Pixel nach links aus dem Bild.

   Ursache des Ausreissers: Die Regeln fuer das Klappmenue am Schreibtisch
   (absolut gesetzt, `left: 50%`, weisse Flaeche, graue Schrift) galten auch
   im Overlay -- sie stehen ohne Media Query im Stylesheet. Im Overlay muss
   davon alles zurueckgenommen werden.
   --------------------------------------------------------------------------- */

/* Die beiden Wege stehen im Menue, damit sie im Overlay auftauchen. Am
   Schreibtisch fuehren sie als Knoepfe rechts in der Leiste, dort waeren sie
   doppelt. */
@media (min-width: 782px) {
	.k-nav__menu .k-nav__weg,
	.k-nav__menu .k-nav__draht,
	.k-nav__menu .k-nav__sozial-mobil {
		display: none;
	}
}

@media (max-width: 781px) {

	/* --- Die Leiste ---------------------------------------------------- */

	/* Der Vereinsname steht im Titel der Seite, im Fussbereich und im
	   Impressum. In der Leiste kostet er drei Zeilen und liefert nichts,
	   was das Signet nicht auch sagt. */
	.k-nav__name {
		display: none;
	}

	/* Das Menuezeichen gehoert an den rechten Rand. Ohne diese Zeile steht
	   es in der Mitte: Die Navigation ist das mittlere von drei Feldern der
	   Leiste, und das dritte -- Soziales und die beiden Knoepfe -- ist auf
	   dem Handy ausgeblendet. */
	.k-nav__menu {
		margin-left: auto !important;
	}

	.k-logo img {
		width: 56px !important;
		height: auto;
	}

	/* Das Menuezeichen: drei weisse Striche auf einem navy Quadrat, 48 Pixel
	   Tippflaeche. Die Striche sind drei Farbverlaeufe im Hintergrund -- so
	   braucht es kein zusaetzliches Element im Markup, und das SVG von
	   WordPress kann verschwinden. Sie nehmen currentColor, deshalb steht
	   die Schriftfarbe des Knopfes auf Weiss. */
	.wp-block-navigation__responsive-container-open {
		width: 48px !important;
		height: 48px !important;
		display: flex !important;
		background-color: var(--wp--preset--color--navy) !important;
		color: var(--wp--preset--color--white) !important;
		border-radius: 0;
		background-image:
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor);
		background-size: 24px 2px;
		background-repeat: no-repeat;
		background-position: center 16px, center 23px, center 30px;
	}

	.wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	/* --- Das ausgeklappte Menue ---------------------------------------- */

	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding-top: 4.5rem;
	}

	/* Der Schliessknopf bekommt dieselbe Tippflaeche wie das Menuezeichen. */
	.wp-block-navigation__responsive-container-close {
		width: 48px !important;
		height: 48px !important;
		margin: 0.5rem 0.75rem 0 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	/* Jede Zeile eine Flaeche, nicht nur der Text: 56 Pixel hoch und ueber
	   die volle Breite. Vorher war nur das Wort selbst anklickbar. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		/* Ohne border-box zaehlt der Innenabstand zur Breite dazu: die Zeilen
		   waren 438 statt 390 Pixel breit und das Menue liess sich seitlich
		   schieben. */
		box-sizing: border-box;
		min-height: 56px;
		padding: 0 1.5rem !important;
		font-size: 1.25rem;
		letter-spacing: -0.01em;
	}

	/* --- Die Unterebene ------------------------------------------------ */

	/* Hier wird der Schreibtisch-Kasten zurueckgenommen: keine absolute
	   Position, keine feste Breite, keine weisse Flaeche. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		/*
		 * Der Hintergrund sitzt nicht hier, sondern an den Eintraegen
		 * weiter unten. Der Navigationsblock von WordPress setzt den
		 * Untermenue-Kasten im Overlay selbst auf durchsichtig, und zwar so
		 * fest, dass hier auch ein !important nicht durchkommt -- die
		 * Regel des Themes fuer das weisse Klappmenue am Schreibtisch
		 * scheitert an derselben Stelle.
		 */
		background-color: transparent !important;
		color: var(--wp--preset--color--white) !important;
		border: 0 !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--inter);
		font-size: 1rem;
		font-weight: 500;
		text-transform: none;
		letter-spacing: normal;
		min-height: 48px;
		padding-left: 2.5rem !important;
		border-left: 0;
		/* Weiss mit Zuruecknahme statt des Grau-600 vom Schreibtisch -- das
		   stand auf dem Navy bei 1,6 zu 1 und war praktisch unlesbar. */
		color: rgba(255, 255, 255, 0.72) !important;
		opacity: 1;
		/* Aufgehelltes Navy als Flaeche der Unterebene. Die Zeilen liegen
		   ohne Luecke uebereinander, dadurch liest sich der Block als
		   ein Feld. */
		background-color: rgba(255, 255, 255, 0.1);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	/* --- Die beiden Wege am Ende --------------------------------------- */

	/* Probetraining und Anmeldung schliessen das Menue ab. Sie stehen als
	   Flaeche da, nicht als Zeile: es sind die beiden Handlungen, alles
	   darueber ist Navigation. */
	.wp-block-navigation__responsive-container.is-menu-open .k-nav__weg {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__weg .wp-block-navigation-item__content {
		font-weight: 900;
		text-transform: uppercase;
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__weg--haupt .wp-block-navigation-item__content {
		background: var(--wp--preset--color--blue);
		color: var(--wp--preset--color--white) !important;
	}

	/* --- Der Fuss des Menues ------------------------------------------- 

	   Wer bis hierher gescrollt hat, sucht meist keinen Menuepunkt mehr,
	   sondern einen Weg zum Verein. Telefon und Mail stehen deshalb am
	   Ende, in kleinerer Schrift als die Navigation darueber. */
	.wp-block-navigation__responsive-container.is-menu-open .k-nav__draht {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__draht .wp-block-navigation-item__content {
		font-family: var(--wp--preset--font-family--inter);
		font-size: 0.95rem;
		font-weight: 500;
		text-transform: none;
		letter-spacing: normal;
		min-height: 48px;
		color: rgba(255, 255, 255, 0.78) !important;
	}

	/* Symbol vor der Zeile: gezeichnet aus Rahmen und Rundungen, damit es
	   keine weitere Datei braucht. */
	.wp-block-navigation__responsive-container.is-menu-open .k-nav__draht .wp-block-navigation-item__content::before {
		content: "";
		width: 18px;
		height: 18px;
		margin-right: 0.75rem;
		flex: none;
		background-color: currentColor;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__draht--tel .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("assets/icons/phone.svg");
		mask-image: url("assets/icons/phone.svg");
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__draht--mail .wp-block-navigation-item__content::before {
		-webkit-mask-image: url("assets/icons/mail.svg");
		mask-image: url("assets/icons/mail.svg");
	}

	.wp-block-navigation__responsive-container.is-menu-open .k-nav__sozial-mobil {
		width: 100%;
		padding: 1.25rem 1.5rem 2rem !important;
		margin: 0 !important;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		gap: 1.25rem !important;
	}
}


/* ---------------------------------------------------------------------------
   Kids-Seite, Feinarbeiten vom 08.09.2026
   --------------------------------------------------------------------------- */

/*
 * Der Familienhinweis als Sprechblase des Tigers.
 *
 * Vorher standen dort zwei lose Zeilen unter dem Knopf -- eine Kickerzeile
 * "Fuer die ganze Familie" und darunter "Geschwister-Rabatte verfuegbar".
 * Beides ging unter, weil es aussah wie ein vergessener Rest.
 *
 * Jetzt ist es ein Kasten mit Infozeichen, und die Spitze zeigt nach rechts
 * zum jubelnden Tiger daneben -- die Nachricht kommt von ihm.
 */
.k-kids-tipp {
	position: relative;
	background: rgba(255, 163, 71, 0.1);
	border-left: 3px solid var(--wp--preset--color--orange);
	max-width: 34rem;
	align-items: flex-start !important;
}

/* Die Spitze der Blase. Sie sitzt rechts oben und zeigt zum Tiger. */
.k-kids-tipp::after {
	content: "";
	position: absolute;
	top: 1.75rem;
	right: -10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid rgba(255, 163, 71, 0.1);
}

/* Das Infozeichen: ein Kreis mit einem i darin, gezeichnet aus Schrift und
   Rahmen statt aus einer weiteren Datei. */
.k-kids-tipp__zeichen {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 900;
	font-size: 1rem;
	line-height: 1.75rem;
	text-align: center;
}

.k-kids-tipp__text {
	line-height: 1.6;
}

@media (max-width: 781px) {
	/* Auf dem Handy steht der Tiger unter dem Text, die Spitze zeigt ins
	   Leere -- sie faellt dort weg. */
	.k-kids-tipp::after {
		display: none;
	}
}

/*
 * "Was brauche ich?" -- groesser und ruhiger.
 *
 * Die vier Punkte standen in kleiner Schrift auf halber Spaltenbreite; die
 * Saetze liefen dadurch ueber drei bis vier kurze Zeilen. Jetzt traegt der
 * Text eine Stufe mehr, und die Zeilenbreite ist so gesetzt, dass jeder
 * Punkt auf zwei Zeilen laeuft.
 */
.k-kids-mit__inhalt h3 {
	font-size: 1.35rem !important;
}

.k-kids-mit__inhalt p {
	font-size: 1.0625rem !important;
	line-height: 1.55;
	max-width: 30rem;
	text-wrap: pretty;
	/*
	 * Falle aus der CLAUDE.md: WordPress gibt jedem Kind eines
	 * constrained-Containers margin-inline: auto. Zusammen mit der
	 * Breitenbegrenzung oben zentrierte das den Text -- er stand dadurch
	 * eingerueckt unter seiner Ueberschrift statt buendig darunter.
	 */
	margin-inline: 0 !important;
}

.k-kids-mit__punkt {
	align-items: flex-start !important;
}

/* Der Haken sitzt in der Zeile der Ueberschrift, nicht daneben in der Luft. */
.k-kids-mit__haken {
	margin-top: 0.4rem !important;
}

/*
 * Das Bild der Karateka mit der Liste war 48 Prozent breit und wirkte neben
 * dem gewachsenen Text zu klein. Es bricht jetzt aus seiner Spalte heraus:
 * die Spalte bleibt im Raster, das Bild darin darf groesser werden.
 */
.k-kids-mit__figure .wp-block-image img {
	width: 118%;
	max-width: none;
	margin-left: -9%;
}

@media (max-width: 781px) {
	.k-kids-mit__figure .wp-block-image img {
		width: 100%;
		margin-left: 0;
	}
}


/* ---------------------------------------------------------------------------
   Kids und Ansprechpartner, zweiter Durchgang 08.09.2026
   --------------------------------------------------------------------------- */

/*
 * "Schreib mir" statt der Adresse.
 *
 * Vorher stand dort die volle Mailadresse -- 32 Zeichen, die auf dem Handy
 * umbrachen und wie ein Datensatz aussahen statt wie eine Einladung. Die
 * Adresse steckt weiter im Link, sie ist nur nicht mehr die Beschriftung.
 */
.k-ansprech__mail a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.k-ansprech__mail a::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background-color: currentColor;
	-webkit-mask-image: url("assets/icons/mail.svg");
	mask-image: url("assets/icons/mail.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Der Hinweis auf die drei Hallen gehoert nicht auf die Kinderseite: dort
   trainiert eine Gruppe an einem Ort. */
body.k-sparte-kids .k-zeiten__fuss {
	display: none;
}

@media (max-width: 781px) {

	/* Die Schlagzeile der Kinderseite traegt den Auftritt -- 36 Pixel waren
	   dafuer zu wenig, sie stand kleiner da als die Ueberschriften weiter
	   unten auf derselben Seite. */
	.k-kids-hero h1 {
		font-size: 3.1rem !important;
		line-height: 0.95;
	}

	/* Die drei Karten unter "Mehr als ein neues Hobby" stapeln sich beim
	   Scrollen, wie die drei Saeulen auf der Karate-Seite. Deckender Grund,
	   damit nichts durchscheint -- die Karten sind weiss auf Grau-50. */
	.k-kids-vorteile .wp-block-columns {
		display: block !important;
	}

	.k-kids-karte.wp-block-column {
		position: sticky;
		background: var(--wp--preset--color--white) !important;
		margin-bottom: 1rem;
	}

	.k-kids-karte.wp-block-column:nth-child(1) { top: 72px; }
	.k-kids-karte.wp-block-column:nth-child(2) { top: 88px; }
	.k-kids-karte.wp-block-column:nth-child(3) { top: 104px; }

	.k-kids-karte.wp-block-column:last-child {
		margin-bottom: 0;
	}

	/*
	 * Der Familienhinweis rutscht unter den Tiger.
	 *
	 * Die Textspalte gibt ihre Rolle als Kasten auf (display: contents), so
	 * werden ihre Kinder direkte Nachbarn des Bildes und lassen sich
	 * einzeln sortieren. Der Tipp bekommt die hoechste Ordnungszahl und
	 * steht damit als letztes -- unter dem Tiger.
	 */
	.k-kids-schluss .wp-block-columns {
		display: flex !important;
		flex-direction: column;
	}

	.k-kids-schluss__text {
		display: contents;
	}

	.k-kids-schluss__figure {
		order: 8;
	}

	.k-kids-tipp {
		order: 9;
		max-width: none;
		margin-top: 1.5rem;
	}
}


@media (max-width: 781px) {

	/*
	 * Der Abschluss stand mobil weit auseinander: 48, 88 und 112 Pixel
	 * zwischen Kicker, Schlagzeile, Text und Knopf.
	 *
	 * Ursache war das display: contents an der Textspalte -- damit der Tipp
	 * unter den Tiger rutschen kann, sind ihre Kinder direkte Flex-Kinder
	 * geworden, und der Spaltenabstand von 32 Pixeln legte sich zusaetzlich
	 * zwischen jedes Element. Der Abstand kommt jetzt allein aus den
	 * Elementen selbst.
	 */
	.k-kids-schluss .wp-block-columns {
		gap: 0 !important;
	}

	.k-kids-schluss h2 {
		margin-bottom: 1.25rem !important;
	}

	/* Die oberen Raender kommen aus den Blockstilen dazu und muessen mit
	   weg, sonst bleibt es bei ueber fuenfzig Pixeln. */
	.k-kids-schluss__text p.has-large-font-size {
		margin-top: 0 !important;
		margin-bottom: 1.75rem !important;
	}

	.k-kids-schluss .wp-block-buttons {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/*
	 * Die Karateka mit der Liste traegt den Abschnitt "Was brauche ich?" --
	 * auf Spaltenbreite war sie dafuer zu klein. Sie laeuft jetzt ueber den
	 * Seitenrand hinaus, und die Luft ueber ihr faellt weg: der Abschnitt
	 * beginnt mit dem Bild, nicht mit einem leeren Streifen.
	 */
	.k-kids-mit {
		padding-top: 2.5rem !important;
		/* Das Bild ragt bewusst ueber die Spalte hinaus. Ohne diese Zeile
		   waechst dadurch die Seitenbreite und die ganze Seite laesst sich
		   quer schieben. clip statt hidden, damit klebende Elemente
		   weiter kleben. */
		overflow-x: clip;
	}

	.k-kids-mit .wp-block-columns {
		gap: 0 !important;
	}

	.k-kids-mit__figure .wp-block-image img {
		width: 128%;
		max-width: none;
		margin-left: -14%;
	}

	.k-kids-mit__figure .wp-block-image {
		margin-block: 0 !important;
	}
}


/* ---------------------------------------------------------------------------
   Selbstschutz-Seite, 08.09.2026
   --------------------------------------------------------------------------- */

/*
 * Die zweite Zeile der Schlagzeile tritt zurueck.
 *
 * "Selbstschutz. Kompaktkurs" stand in einer Groesse -- damit war der
 * Kompaktkurs so laut wie die Sache selbst. Die Zeile darunter traegt jetzt
 * gut die halbe Groesse und normales Gewicht: sie sagt, in welcher Form es
 * das gibt, nicht worum es geht.
 */
.k-offer-hero__zeile2 {
	/*
	 * block statt inline-block: An einem inline-block richtet sich die
	 * Position nach der Schriftlinie, ein negativer oberer Rand wird von
	 * der Zeilenbox aufgefangen und bewegt nichts -- gemessen blieb der
	 * Abstand bei 22 Pixeln, egal welcher Wert dort stand.
	 */
	display: block;
	/* Nur so breit wie der Text: als Block wirkt der obere Rand, mit
	   fit-content bleibt das Rechteck trotzdem am Wort. */
	width: fit-content;
	font-size: 0.46em;
	font-weight: 500;
	letter-spacing: 0;
	/* Die Zeile steht als Feld in der Spartenfarbe, Schrift weiss. */
	background-color: var(--k-accent, var(--wp--preset--color--blue));
	padding: 0.22em 0.55em 0.28em;
	/*
	 * Dicht unter der Schlagzeile. Der Abstand kommt nicht aus einem Rand,
	 * sondern aus der Zeilenbox: die grosse erste Zeile laesst unter sich
	 * Leerraum stehen. Deshalb ein negativer Wert, der die kleine Zeile
	 * wieder heranzieht -- sie soll zur Schlagzeile gehoeren, nicht zum
	 * Fliesstext darunter.
	 */
	line-height: 1;
	/*
	 * Auf breiten Fenstern ist die Schlagzeile 72 Pixel hoch und laesst
	 * entsprechend viel Leerraum unter sich -- gemessen blieben mit -0.35em
	 * noch 22 Pixel, genauso viel wie zum Fliesstext darunter. Der Wert
	 * richtet sich deshalb nach der Groesse der grossen Zeile, nicht nach
	 * der eigenen: auf dem Handy faellt er kleiner aus, siehe Mobil-Zweig.
	 */
	margin-top: 0.15em;
	color: var(--wp--preset--color--white);
}

/*
 * Kicker im Trainerbereich: Die Kontextzeile traegt im Muster fest die
 * Gesundheitsfarbe -- richtig fuer Tai Chi, Qi Gong und Rueckenfit, falsch
 * fuer den Selbstschutz. Dort gilt das Violett der Sparte.
 */
body.k-sparte-selbstverteidigung .k-trainer__kontext .k-label {
	color: var(--wp--preset--color--defense) !important;
}

/*
 * Die naechsten Kurse stehen wie bei Rueckenfit auf hellem Grund, nur das
 * Datum traegt die Spartenfarbe. Die vollflaechig violette Fassung vom
 * 08.09.2026 ist am 15.09.2026 wieder herausgenommen: zusammen mit dem
 * Stoerer auf der Startseite und dem violetten Abschluss war es zu viel
 * Farbe auf einer Seite.
 */

/*
 * Der Abschluss traegt die Spartenfarbe schon im Ruhezustand -- dieselbe
 * Entscheidung wie auf der Karate-Seite. Beim Ueberfahren faehrt Weiss ein,
 * die Schrift wechselt dabei auf Navy.
 */
.k-offer-cta.k-accent-defense .k-offer-cta__knopf {
	--k-knopf-hover: var(--wp--preset--color--white);
}

.k-offer-cta.k-accent-defense .k-offer-cta__knopf .wp-block-button__link {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--white) !important;
}

.k-offer-cta.k-accent-defense .k-offer-cta__knopf .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:hover,
.k-offer-cta.k-accent-defense .k-offer-cta__knopf .wp-block-button:not(.is-style-outline):not(.k-knopf--kontur):not(.k-knopf--text) > .wp-block-button__link:focus-visible {
	background-color: var(--k-accent) !important;
	color: var(--wp--preset--color--navy) !important;
}


/*
 * Lange Woerter duerfen die Seite nicht breiter machen, 08.09.2026.
 *
 * "Selbstverteidigung" passte in der 279 Pixel schmalen Ueberschriftspalte
 * nicht und schob die Seite auf 459 Pixel -- man konnte quer schieben, und
 * dabei wanderte das Menuezeichen aus dem Bild. Der Text heisst jetzt
 * "Selbstschutz", aber die Absicherung bleibt: keine Ueberschrift schiebt
 * die Seite mehr auf.
 */
.k-referenzen h2,
.k-referenzen__kopf p {
	overflow-wrap: break-word;
	hyphens: auto;
}

/*
 * Die Symbole der vier Schritte liegen als SVG-Dateien mit fest eingebautem
 * Blau vor -- eine Farbe laesst sich an einem <img> nicht aendern. Auf der
 * Selbstschutz-Seite wird die Datei deshalb als Maske benutzt: sichtbar ist
 * nur ihre Silhouette, gefuellt mit der Spartenfarbe.
 */
body.k-sparte-selbstverteidigung .k-schritt__symbol {
	position: relative;
}

body.k-sparte-selbstverteidigung .k-schritt__symbol img {
	visibility: hidden;
}

body.k-sparte-selbstverteidigung .k-schritt__symbol::after {
	content: "";
	position: absolute;
	/*
	 * Die Groesse des Symbols, nicht die des Kastens. inset: 0 hat das
	 * Zeichen auf die vollen 72 Pixel des weissen Feldes aufgeblasen --
	 * das Symbol selbst ist 28 Pixel gross.
	 */
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -50%);
	background-color: var(--k-accent, var(--wp--preset--color--defense));
	-webkit-mask: var(--k-symbol) no-repeat center / contain;
	mask: var(--k-symbol) no-repeat center / contain;
}

body.k-sparte-selbstverteidigung .k-schritt:nth-child(1) .k-schritt__symbol { --k-symbol: url("assets/icons/calendar-check.svg"); }
body.k-sparte-selbstverteidigung .k-schritt:nth-child(2) .k-schritt__symbol { --k-symbol: url("assets/icons/clipboard-edit.svg"); }
body.k-sparte-selbstverteidigung .k-schritt:nth-child(3) .k-schritt__symbol { --k-symbol: url("assets/icons/shirt-blau.svg"); }
body.k-sparte-selbstverteidigung .k-schritt:nth-child(4) .k-schritt__symbol { --k-symbol: url("assets/icons/sparkles.svg"); }


@media (max-width: 781px) {
	/*
	 * Die drei Vorteilskarten stapeln sich beim Scrollen, wie die Saeulen
	 * auf der Karate-Seite und die Karten bei den Kindern. Gilt fuer jede
	 * Angebotsseite, die diesen Baustein fuehrt.
	 */
	.k-vorteile .wp-block-columns {
		display: block !important;
	}

	.k-vorteil.wp-block-column {
		position: sticky;
		background: var(--wp--preset--color--white) !important;
		margin-bottom: 1rem;
	}

	.k-vorteil.wp-block-column:nth-child(1) { top: 72px; }
	.k-vorteil.wp-block-column:nth-child(2) { top: 88px; }
	.k-vorteil.wp-block-column:nth-child(3) { top: 104px; }

	.k-vorteil.wp-block-column:last-child {
		margin-bottom: 0;
	}
}


/*
 * Bildausschnitt des Trenners auf der Selbstschutz-Seite, 08.09.2026.
 *
 * Auf schmalen Fenstern zeigt der Trenner nur einen Ausschnitt seiner
 * Breite -- ohne Angabe die Mitte, und dort steht der Ruecken der
 * Trainierenden. Der Punkt des Bildes sind die gekreuzten Arme mit dem
 * Stock dazwischen; sie liegen bei rund einem Drittel der Breite.
 *
 * Das !important ist noetig, weil der Cover-Block sein object-position als
 * Elementstil direkt an das Bild schreibt.
 */
body.k-sparte-selbstverteidigung .k-divider .wp-block-cover__image-background {
	object-position: 32% 50% !important;
}


/* ---------------------------------------------------------------------------
   Rueckenfit: Kursblock, 08.09.2026
   --------------------------------------------------------------------------- */

/*
 * Der Knopf im Kursblock fuhr ueberall im Blau des Fallbacks ein -- der
 * Abschnitt stand nicht in der Liste der Sektionen, die ihre Spartenfarbe
 * weitergeben. Jetzt nimmt er die Farbe seiner Seite: Gruen bei Rueckenfit,
 * Blau bei Karate. Der Selbstschutz hat weiter unten eine eigene Regel, weil
 * sein Kursblock auf voller Flaeche in Violett steht.
 */
.k-kurse__knopf {
	--k-knopf-hover: var(--k-accent, var(--wp--preset--color--blue));
}

/*
 * Das Datum steht als Kasten in der Spartenfarbe statt als gruene Schrift.
 * Gruen auf Weiss ist bei dieser Groesse schwer zu lesen; als Flaeche mit
 * weisser Schrift bleibt die Farbe erhalten und die Zeile wird ruhiger.
 */
body.k-sparte-rueckenfit .k-kurse__termin strong {
	background-color: var(--wp--preset--color--health);
	color: var(--wp--preset--color--white);
	padding: 0.12em 0.5em 0.18em;
	/*
	 * Die Mindestbreite von 16rem faellt hier weg. Sie haelt sonst die
	 * Ortsangaben auf einer Kante -- als farblose Schrift faellt der leere
	 * Rest nicht auf, als gruene Flaeche schon: der Kasten lief weit ueber
	 * das Datum hinaus. Beide Zeitraeume sind gleich lang, die Kante bleibt
	 * also auch ohne feste Breite stehen.
	 */
	min-width: 0;
	margin-right: 1rem;
}


/* ==========================================================================
   Mobilfassung der Startseite (10.09.2026)
   ==========================================================================

   Gemessen vor dem Umbau: 22.324 Pixel Gesamthoehe auf einem 390er Schirm,
   das sind sechsundzwanzig Bildschirmhoehen. Die Haelfte davon entfiel auf
   drei Bausteine -- Trainerteam 6.368, Tarife 4.319, Kopfbereich 2.587.

   Vier der hier behandelten Bausteine sind synchronisierte Muster: Trainer,
   Zeiten, Tarife und Kennzahlen liegen als eigene Beitraege in der Datenbank,
   damit der Verein sie selbst pflegen kann. Ihr Aufbau wird deshalb nicht
   angefasst. Was sich nicht mit CSS loesen liess -- eine Huelle um die
   Zeitzeilen, das Aufklappen der Tarife -- macht assets/js/mobil.js, und zwar
   so, dass die Seite ohne das Skript vollstaendig lesbar bleibt.
   -------------------------------------------------------------------- */

/*
 * Der Aufklapp-Pfeil der Tarife: Grundmass und Grundzustand.
 *
 * Er gehoert zur Handy-Fassung, wird aber von mobil.js in den Baum gesetzt
 * und bleibt dort stehen, wenn das Fenster breiter wird -- beim Drehen des
 * Telefons ins Querformat zum Beispiel. Ohne Grundmass dehnt sich ein SVG
 * auf die volle Breite seines Platzes: aus dem 22-Pixel-Pfeil wurde ein
 * Banner quer durch die Tarifkarte.
 *
 * Deshalb steht die Regel hier und nicht in der Media Query. Sichtbar
 * gemacht wird er erst dort.
 */
.k-tarif__pfeil {
	display: none;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/*
 * Die Punktreihe unter den Baendern. Aus demselben Grund wie beim Pfeil
 * steht sie hier und nicht in der Media Query: mobil.js setzt sie in den
 * Baum, und sie bleibt stehen, wenn das Fenster breiter wird. Auf dem
 * Rechner stehen die Karten nebeneinander -- dort waere sie eine Auskunft
 * ueber etwas, das nicht stattfindet.
 */
.k-punkte {
	display: none;
}

/*
 * Das Siegelband, gleiche Vorsichtsmassnahme. mobil.js haengt die vier
 * Siegel ein zweites Mal an die Reihe, damit das Laufband umlaufen kann.
 * Am Rechner laeuft nichts, dort stuenden sonst acht Siegel in der Reihe
 * statt vier.
 */
.k-trust--laeuft > .k-trust__spur > [aria-hidden="true"] {
	display: none;
}

@media (max-width: 781px) {

	/* --- Knoepfe auf volle Breite --------------------------------------

	   Zwoelf Knoepfe standen zwischen 184 und 275 Pixel breit in einer
	   342 Pixel breiten Spalte, jeder auf ein anderes Mass. Auf dem Handy
	   ist die volle Breite die groessere Trefferflaeche und zugleich die
	   ruhigere Kante: alle Knoepfe beginnen und enden an derselben Stelle.

	   Ausgenommen sind Textknoepfe -- die sehen aus wie Links und sollen
	   sich nicht ueber die Seite spannen. */
	.wp-block-buttons .wp-block-button:not(.k-knopf--text) {
		/* !important, weil einzelne Bausteine ihren Knoepfen eine eigene
		   Breite geben -- "Route planen" in den Hallenkarten stand sonst
		   weiter auf 195 Pixeln, waehrend alle anderen die volle Breite
		   trugen. */
		width: 100% !important;
	}

	.wp-block-buttons .wp-block-button:not(.k-knopf--text) > .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		text-align: center;
		/*
		 * Ein Mass fuer alle. Gemessen standen drei nebeneinander: der
		 * Knopf unter den Schritten 55 Pixel hoch, der im Schlussaufruf
		 * 47, der im Stoererband 47 bei nur 12 Pixel Schrift. Auf einem
		 * Bildschirm, auf dem jeder Knopf die volle Breite hat, faellt
		 * jeder Unterschied in der Hoehe sofort auf.
		 *
		 * Massgebend ist der Knopf im Schlussaufruf.
		 */
		padding: 0.95rem 2.25rem !important;
		font-size: 0.875rem !important;
		/* Auch die Zeilenhoehe, sonst bleiben sechs Pixel Unterschied
		   stehen: gleiche Schrift, gleiche Polsterung, und trotzdem 53
		   gegen 47. */
		line-height: 1.2 !important;
	}

	/* Das Stoererband setzt seinen Knopf auf ein festes Mass, damit er am
	   Rechner unter "Mitglied werden" sitzt. Auf dem Handy gibt es die
	   Navigation nicht mehr, an der er sich ausrichten koennte. */
	.k-stoerer .wp-block-button__link {
		width: 100% !important;
	}

	/* Der Knopf steht als Flex-Element neben dem Text und war deshalb nur
	   160 Pixel breit -- volle Breite auf dem Link allein half nicht, die
	   Huelle darum musste sie erst bekommen. */
	.k-stoerer__knopf,
	.k-stoerer__knopf > .wp-block-button {
		flex: 1 1 100%;
		width: 100%;
	}

	/* --- Kopfbereich ---------------------------------------------------

	   Der Freisteller ist 1.600 Pixel hoch und damit fuer sich genommen
	   fast zwei Bildschirme. Am Rechner steht er neben dem Text, auf dem
	   Handy unter ihm -- dort schiebt er alles Weitere aus dem Bild. */
	.k-hero__figure {
		display: none !important;
	}

	/* Ohne das Bild traegt die Ueberschrift den Kopfbereich allein. Sie
	   stand auf 54 Pixel bei einer Zeilenhoehe von 48 -- die Zeilen
	   klebten aneinander. Jetzt groesser und mit Luft dazwischen. */
	.k-hero h1 {
		font-size: clamp(3.5rem, 15vw, 4.25rem) !important;
		line-height: 1.02 !important;
	}

	/*
	 * Im Einleitungstext stehen feste Zeilenumbrueche, die den Satz am
	 * Rechner an der gewuenschten Stelle brechen. Auf 390 Pixeln bricht
	 * der Satz ohnehin, die festen Umbrueche kamen obendrauf: "Kampfkunst,
	 * Selbstverteidigung" endete mitten im Gedanken, danach eine halbe
	 * Zeile Leerraum.
	 */
	.k-hero p br {
		display: none;
	}

	/* --- Stoererband ---------------------------------------------------

	   Datum, Ort und Stand standen als ein Fliesstext mit Mittelpunkten
	   dazwischen. Auf 390 Pixeln bricht der mitten in der Aufzaehlung um,
	   und der Trennpunkt landet am Zeilenende. Das Datum bekommt eine
	   eigene Zeile, der erste Trennpunkt faellt weg. Die uebrigen trennen
	   nur noch Ort und Stand, das haelt eine Zeile aus. */
	.k-stoerer__termin > strong {
		display: block;
	}

	.k-stoerer__trenner {
		display: none;
	}

	/*
	 * Der Herkunftshinweis unter den Stimmen ist eine Pflichtangabe nach
	 * UWG, kein Text zum Lesen. Er steht so klein und so eng, wie es das
	 * Kleingedruckte einer Seite eben tut.
	 */
	.k-stimmen__herkunft {
		font-size: 0.65rem !important;
		line-height: 1.25 !important;
		margin-top: 1rem !important;
		opacity: 0.75;
	}

	/* --- Angebotsliste: enger und ganz anklickbar --------------------

	   1.367 Pixel fuer sechs Zeilen, die zusammen aus achtzehn kurzen
	   Angaben bestehen. Der Platz steckte nicht im Inhalt: 192 Pixel
	   Polsterung der Sektion, 64 je Zeile, und jede Zeile schloss mit
	   einem eigenen Wort "Details", das sagte, was ein Pfeil auch sagt. */
	.k-angebote {
		padding-top: 3.5rem !important;
		padding-bottom: 3.5rem !important;
	}

	.k-angebote > h2 {
		margin-top: 0.75rem !important;
	}

	.k-angebote > p:not(.k-label) {
		margin: 0.75rem 0 0 !important;
	}

	.k-angebote > .k-varianten__gruppe {
		margin-top: 1.5rem !important;
	}

	.k-varianten--liste .k-card {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	/*
	 * Die ganze Zeile wird zur Trefferflaeche. Verlinkt war bisher nur
	 * das Wort "Details" -- auf dem Handy eine 90 Pixel breite Marke in
	 * einer 342 Pixel breiten Zeile.
	 *
	 * Das Wort verschwindet aus dem Bild, der Link bleibt: Er zieht sich
	 * ueber die Karte, weil sein ::after auf deren Kanten sitzt. Deshalb
	 * hier font-size: 0 statt display: none -- was nicht dargestellt
	 * wird, hat auch kein ::after, und die Zeile waere gar nicht mehr
	 * erreichbar. Fuer die Vorlesefunktion bleibt "Details" bestehen.
	 */
	.k-varianten--liste .k-angebot__mehr {
		font-size: 0 !important;
		line-height: 0 !important;
		margin: 0 !important;
	}

	.k-varianten--liste .k-angebot__mehr a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	/*
	 * An die Stelle des Wortes tritt der Pfeil, den die Karte ohnehin
	 * mitbringt -- in der Listenfassung stand er auf display: none.
	 */
	.k-varianten--liste .k-card .k-pfeil {
		display: block !important;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 !important;
		opacity: 0.5;
	}

	/* Damit die laengste Ortsangabe nicht unter den Pfeil laeuft. */
	.k-varianten--liste .k-card .wp-block-cover__inner-container {
		padding-right: 2.25rem;
	}

	/* --- Siegelband: eine Zeile statt vier --------------------------

	   Vier Siegel untereinander brauchten 257 Pixel -- eine dreitel
	   Bildschirmhoehe fuer vier Zeilen, die niemand einzeln liest. Als
	   Laufband ist es eine Zeile hoch und sagt dasselbe.

	   Gebaut wie die Referenzen und die Stimmen: Die Spur enthaelt alles
	   zweimal und faehrt um genau eine Haelfte. Die zweite Haelfte setzt
	   mobil.js, siehe dort. */
	.k-trust--laeuft {
		overflow: hidden;
		padding-top: 1.25rem !important;
		padding-bottom: 1.25rem !important;
		position: relative;
	}

	/*
	 * Die Siegel sollen an den Raendern auslaufen, statt an der Kante
	 * abgeschnitten zu kleben.
	 *
	 * Der erste Anlauf nahm dafuer mask-image, wie das Stimmenband. Dort
	 * geht das, weil der Baustein auf hellem Grund steht und die Maske
	 * genau das freilegt, was ohnehin dahinter liegt. Hier traegt der
	 * Baustein selbst den dunklen Grund -- und eine Maske nimmt nicht nur
	 * die Siegel weg, sondern auch ihn. An den Raendern kam die helle
	 * Seite darunter durch, das Band hatte zwei weisse Ecken.
	 *
	 * Zwei Verlaeufe darueber statt einer Maske darunter: Sie blenden die
	 * Siegel in denselben Grund aus, auf dem sie stehen.
	 */
	.k-trust--laeuft::before,
	.k-trust--laeuft::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 3rem;
		pointer-events: none;
		z-index: 1;
	}

	.k-trust--laeuft::before {
		left: 0;
		background: linear-gradient(90deg,
			var(--wp--preset--color--navy), transparent);
	}

	.k-trust--laeuft::after {
		right: 0;
		background: linear-gradient(270deg,
			var(--wp--preset--color--navy), transparent);
	}

	.k-trust--laeuft > .k-trust__spur {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
		width: max-content;
		max-width: none !important;
		/* Derselbe Abstand auch ueber die Naht zwischen den Haelften,
		   sonst stockt das Band einmal je Umlauf. */
		gap: 2.5rem !important;
	}

	.k-trust--laeuft > .k-trust__spur > [aria-hidden="true"] {
		display: flex;
	}

	.k-trust--laeuft > .k-trust__spur > * {
		flex: 0 0 auto;
		white-space: nowrap;
		margin: 0 !important;
	}

	@media (prefers-reduced-motion: no-preference) {
		.k-trust--laeuft > .k-trust__spur {
			animation: k-siegelband 24s linear infinite;
		}
	}

	/*
	 * Wer weniger Bewegung eingestellt hat, bekommt ein stehendes Band --
	 * und muesste die hinteren Siegel sonst raten. Deshalb laesst es sich
	 * dann von Hand schieben.
	 */
	@media (prefers-reduced-motion: reduce) {
		.k-trust--laeuft {
			overflow-x: auto;
			scrollbar-width: none;
		}
	}

	/* --- Kennzahlen: zwei mal zwei -------------------------------------

	   Vier Zahlen untereinander ergaben 1.065 Pixel. Nebeneinander in zwei
	   Reihen passen sie in eine halbe Bildschirmhoehe, und der Vergleich
	   zwischen ihnen wird erst dadurch einer. */
	/*
	 * Die Sektion trug oben und unten je 96 Pixel, wie alle anderen. Hier
	 * steht aber nur ein Raster ohne Ueberschrift darin -- die Polsterung
	 * war fast so hoch wie der Inhalt. Halbiert bleibt der Baustein unter
	 * einer halben Bildschirmhoehe, und das ist der Sinn der Sache: alle
	 * vier Zahlen auf einen Blick.
	 */
	.k-stats-band {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	.k-stats-band > .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1rem !important;
	}

	.k-stats-band .wp-block-column {
		flex-basis: auto !important;
		margin: 0 !important;
	}

	/* Das Symbolkaestchen war 68 Pixel gross und hatte oben und unten je
	   einen vollen Abstand. Es begleitet die Zahl, es traegt sie nicht. */
	/*
	 * Die Symbole sind auf dem Handy raus. Vier Zahlen im Raster lesen
	 * sich als Reihe, und jedes Symbol daneben war ein Kaestchen, das
	 * dieselbe Auskunft ein zweites Mal gab: Kalender neben "Jahre
	 * Erfahrung", Ortsmarke neben "Standorte".
	 */
	.k-stat__icon {
		display: none !important;
	}

	.k-stat p:not(.k-label) {
		font-size: 2.5rem !important;
		line-height: 1.1 !important;
		/* Oben standen 24 Pixel Abstand zum Symbol. Das Symbol bringt
		   seinen eigenen Abstand nach unten schon mit. */
		margin-top: 0 !important;
		margin-bottom: 0.25rem !important;
	}

	.k-stat .k-label {
		font-size: 0.7rem !important;
	}

	/* --- Trainerteam: eine Karte, seitlich blaettern --------------------

	   Das Band gibt es seit dem 08.09.2026 auf den Sparten-Seiten. Es hing
	   allein an der Body-Klasse k-sparte-*, deshalb standen auf der
	   Startseite weiterhin dreizehn Karten untereinander: 6.368 Pixel.
	   Die Regeln dort oben sind um body.home erweitert, hier steht nichts
	   Eigenes -- zwei Faelle, eine Fassung. */

	/* --- Trainingszeiten: dasselbe Band ---------------------------------

	   Die sechs Zeilen liegen ohne eigene Huelle direkt im Baustein,
	   zwischen Kicker, Ueberschrift und Fusszeile. Ein Band braucht aber
	   einen Behaelter, der nur die Zeilen enthaelt. Den setzt mobil.js
	   beim Laden -- ohne das Skript bleiben die Zeilen untereinander
	   stehen und sind vollstaendig lesbar. */
	/* Die Baender ragen um ihre negative Marge nach rechts hinaus, damit
	   die Karten bis an den Bildschirmrand laufen. Ohne Deckel liess sich
	   die Seite dadurch um 24 Pixel quer schieben. Geclippt wird auf der
	   Sektion: ein Deckel auf body oder .entry-content wuerde die klebende
	   Navigationsleiste ausser Kraft setzen. clip statt hidden aus dem
	   gleichen Grund, an anderer Stelle im Stylesheet steht das schon so. */
	.k-trainer,
	.k-zeiten,
	.k-ablauf {
		overflow-x: clip;
	}

	.k-zeiten__band {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
		scrollbar-width: none;
	}

	.k-zeiten__band::-webkit-scrollbar {
		display: none;
	}

	.k-zeiten__spur {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.75rem;
		width: max-content;
	}

	/*
	 * Im Band werden alle Karten so hoch wie die hoechste. Die Zeile
	 * verteilt ihren Inhalt aber mittig, und bei den kuerzeren blieb
	 * dadurch oben ein Streifen der Kartenflaeche ueber dem blauen Kopf
	 * stehen -- er sah aus wie ein Fehler im Rahmen. Der Inhalt sammelt
	 * sich jetzt oben, der Rest bleibt unten unter dem Ort.
	 */
	.k-zeiten__band .k-zeiten__zeile.wp-block-columns {
		align-content: flex-start;
		flex: 0 0 76vw;
		max-width: 76vw;
		scroll-snap-align: center;
		/* Der Abstand nach unten trennte die Zeilen im Stapel. Im Band
		   trennt die Luecke der Spur, unten wuerde er nur das Band
		   hoeher machen. */
		margin-bottom: 0 !important;
	}

	/* --- Schritte: dasselbe Band ---------------------------------------

	   Drei Schritte untereinander mit je einem Bildschirm Luft ergaben
	   1.493 Pixel fuer drei Saetze. Nebeneinander im Band ist die
	   Reihenfolge ausserdem wieder zu sehen -- untereinander gelesen ist
	   sie nur eine Liste. */
	.k-ablauf > .wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.75rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
		scrollbar-width: none;
	}

	.k-ablauf > .wp-block-columns::-webkit-scrollbar {
		display: none;
	}

	.k-ablauf > .wp-block-columns > .wp-block-column {
		flex: 0 0 78vw !important;
		max-width: 78vw;
		scroll-snap-align: center;
		margin-bottom: 0 !important;
	}

	/*
	 * Die Schritte tragen keinen eigenen Grund -- am Rechner stehen sie
	 * frei nebeneinander. Im Band war deshalb nicht zu sehen, dass rechts
	 * noch etwas kommt: die naechste Karte ragte 23 Pixel herein und
	 * zeigte dort nichts als denselben dunklen Grund.
	 *
	 * Dieselbe Flaeche wie die Zeitzeilen im Baustein darueber, damit der
	 * Anschnitt sichtbar wird und beide Baender gleich aussehen.
	 */
	/*
	 * Die grossen Ziffern 01, 02, 03 standen als Wasserzeichen hinter dem
	 * Symbol. Im Band bekommt jede Karte den ganzen Bildschirm, die
	 * Reihenfolge ergibt sich aus dem Wischen -- die Ziffer nahm nur
	 * Hoehe.
	 */
	.k-step__num {
		display: none !important;
	}

	.k-ablauf > .wp-block-columns > .wp-block-column > .k-step {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 2px;
		padding: 1.5rem 1.25rem 2rem;
		height: 100%;
		box-sizing: border-box;
	}

	.k-punkte {
		display: flex;
		justify-content: center;
		gap: 0.4rem;
		margin-top: 1rem;
	}

	.k-punkte__punkt {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
		opacity: 0.25;
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/*
	 * Der erste Anlauf nahm currentColor. Das schien richtig -- dunkler
	 * Grund, helle Schrift -- aber die Farbe steht in diesen Bausteinen
	 * nicht am Behaelter, sondern an den einzelnen Zeilen darin. Am
	 * Behaelter galt weiterhin Navy, und die Punkte standen navy auf
	 * navy. Beide Baender liegen auf dunklem Grund, deshalb haengt die
	 * Regel an dessen Klasse.
	 */
	.has-navy-background-color .k-punkte__punkt {
		background: var(--wp--preset--color--white);
	}

	.k-punkte__punkt.is-da {
		opacity: 1;
		transform: scale(1.35);
	}

	/* --- Tarife: Liste statt sechs Karten -------------------------------

	   Sechs Karten mit je Aufkleber, Name, Zielgruppe, Preis, Knopf,
	   Anfragelink, vier bis fuenf Merkmalszeilen und einer Fusszeile
	   ergaben 4.319 Pixel. Die Frage auf dem Handy ist aber eine kurze:
	   Was passt zu mir und was kostet es. Alles Weitere ist Nachlesen.

	   Der Kopf jeder Karte bleibt stehen und wird zum Schalter, der Rumpf
	   klappt darunter auf. Das uebernimmt mobil.js; ohne das Skript steht
	   jede Karte offen da, wie bisher. */
	/*
	 * Die Einleitung stand mittig. Bei vier Zeilen Fliesstext und drei
	 * Haekchenzeilen darunter ergab das sieben verschiedene Zeilenanfaenge
	 * -- das Auge findet beim Lesen nicht zurueck an den Anfang.
	 */
	.k-tarife__intro,
	.k-tarife__intro > * {
		text-align: left !important;
	}

	.k-tarife__vorteil {
		justify-content: flex-start !important;
	}

	.k-tarife__karten .k-tarif {
		margin-bottom: 0 !important;
	}

	/*
	 * Karate-Do steht auf dem Handy an erster Stelle. Es ist das
	 * Hauptangebot des Vereins, und die Reihenfolge im Muster laesst
	 * sich nicht aendern, ohne den Baustein in der Datenbank anzufassen
	 * -- die Gruppe ist aber eine Flex-Reihe, und dort ordnet order.
	 */
	.k-tarife__gruppe .k-tarif.is-haupt {
		order: -1;
	}

	/*
	 * Als Karten brauchten die Gruppen Luft um sich. Als Liste sind sie
	 * die Liste -- 32 Pixel ueber und 24 unter jeder Gruppe, dazu 16
	 * zwischen je zwei Karten, ergaben mehr Zwischenraum als Inhalt.
	 */
	.k-tarife__gruppe {
		gap: 0.5rem !important;
		margin: 0 0 1.5rem !important;
	}

	/*
	 * Die Sektion trug oben und unten je 96 Pixel. Die Liste beginnt mit
	 * einer Ueberschrift, sie braucht also nicht so viel Vorlauf wie ein
	 * Baustein, der mit Inhalt anfaengt.
	 */
	.k-tarife {
		padding-top: 3.5rem !important;
		padding-bottom: 3.5rem !important;
	}

	.k-tarif.k-klapp > .k-tarif__kopf {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 0.25rem 0.75rem;
		cursor: pointer;
		/* Der Kopf ist jetzt die Trefferflaeche. Er braucht die Hoehe, die
		   ein Finger sicher trifft. */
		/* Sechs flache Zeilen zwischen hohen Bausteinen wirkten wie eine
		   Fussnote. Mehr Hoehe je Zeile, und der Preis traegt sie. */
		min-height: 76px;
		padding: 1.15rem 1.25rem !important;
	}

	/* Der Aufkleber "Fortlaufend" oder "Kurs" stand als eigene Zeile ueber
	   dem Namen und kostete jede Karte eine Zeilenhoehe. In der Liste
	   steht er unter der Zielgruppe. */
	/*
	 * Der Aufkleber traegt "Fortlaufend" oder "Kurs". Genau dieselbe
	 * Auskunft steht daneben am Preis -- "je Monat" oder "je Kurs". Auf
	 * dem Handy kostete die Doppelung 37 Pixel je Zeile, bei sechs
	 * Angeboten also mehr als eine viertel Bildschirmhoehe.
	 */
	.k-tarif.k-klapp .k-tarif__aufkleber {
		display: none;
	}

	.k-tarif.k-klapp .k-tarif__kopf > h3 {
		grid-column: 1;
		grid-row: 1;
		margin: 0 !important;
	}

	.k-tarif.k-klapp .k-tarif__beschr {
		grid-column: 1;
		grid-row: 2;
		margin: 0 !important;
	}

	.k-tarif.k-klapp .k-tarif__preis {
		grid-column: 2;
		grid-row: 1 / span 2;
		font-size: 2rem !important;
		line-height: 1 !important;
		align-self: center;
		margin: 0 !important;
		text-align: right;
		white-space: nowrap;
		/* Zahl und Zeitraum untereinander statt nebeneinander. Das macht
		   die Zahl gross, ohne der Zielgruppe links die Breite zu nehmen,
		   die sie fuer zwei ausgeglichene Zeilen braucht. */
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		line-height: 1.05 !important;
	}

	/* Der Zusatz "je Monat" stand fast so gross wie die Zahl und nahm der
	   Zielgruppe links die Breite, die sie fuer zwei Zeilen braucht. */
	.k-tarif.k-klapp .k-tarif__zeitraum {
		font-size: 0.7rem !important;
		margin-top: 0.1rem;
	}

	/*
	 * "Selbstverteidigung" wurde getrennt: Selbstvertei-digung. In einer
	 * 143 Pixel breiten Spalte passt das Wort nicht, aber ein getrenntes
	 * Angebot liest sich schlechter als ein knapperes.
	 */
	.k-tarif.k-klapp .k-tarif__kopf h3 {
		/* overflow-wrap: anywhere hat den Bruch mitten im Wort erst
		   erlaubt -- aus "Selbstvertei-digung" wurde "Selbstverteidi
		   gung", also dasselbe ohne Strich. Das Wort bleibt jetzt ganz,
		   Platz macht die kleinere Schrift und der schmalere Preis. */
		hyphens: none;
		font-size: 0.8rem !important;
		letter-spacing: 0.02em;
	}

	/*
	 * "Fuer Kinder ab 6 bis 14 Jahren" brach nach "6" um und liess eine
	 * fast leere zweite Zeile stehen. text-wrap: balance verteilt die
	 * Woerter auf gleich lange Zeilen -- der Umbruch sitzt jetzt nach
	 * "ab", ohne dass am Text etwas geaendert werden musste. Er steht im
	 * Muster in der Datenbank, das der Verein selbst pflegt.
	 */
	.k-tarif.k-klapp .k-tarif__beschr {
		font-size: 0.85rem !important;
		line-height: 1.3 !important;
		text-wrap: balance;
	}

	/*
	 * Der Pfeil nimmt die Textfarbe seiner Umgebung. Auf der
	 * hervorgehobenen Karte ist der Kopf dunkel, die Textfarbe aber
	 * weiterhin navy -- weiss wird dort erst Ueberschrift und Text
	 * gesetzt. Der Pfeil stand deshalb unsichtbar auf dem dunklen Grund.
	 */
	/*
	 * Die hervorgehobene Karte trug einen dunklen Kopf. In der Liste war
	 * sie damit ein schwarzer Balken zwischen fuenf hellen Zeilen -- am
	 * Rechner hebt das eine Karte unter Karten hervor, in einer Liste
	 * zerschneidet es sie. Sie steht jetzt hell wie die anderen; dass sie
	 * das Hauptangebot ist, sagt ihre Stelle ganz oben.
	 */
	.k-tarif.is-haupt.k-klapp > .k-tarif__kopf {
		background: var(--wp--preset--color--white) !important;
		box-shadow: none !important;
	}

	.k-tarif.is-haupt.k-klapp .k-tarif__kopf h3,
	.k-tarif.is-haupt.k-klapp .k-tarif__kopf h3 a,
	.k-tarif.is-haupt.k-klapp .k-tarif__preis,
	.k-tarif.is-haupt.k-klapp .k-tarif__zeitraum,
	.k-tarif.is-haupt.k-klapp .k-tarif__pfeil {
		color: var(--wp--preset--color--navy) !important;
	}

	.k-tarif.is-haupt.k-klapp .k-tarif__beschr {
		color: var(--wp--preset--color--gray-600) !important;
	}

	/*
	 * Was sonst noch im Kopf steht, bekommt eine eigene Zeile ueber die
	 * volle Breite. Bei der Selbstverteidigung ist das der Kursumfang,
	 * "10 Einheiten a 90 Min". Ohne diese Regel setzt das Raster jedes
	 * unbekannte Kind in die naechste freie Zelle, und der Umfang landete
	 * neben dem Preis.
	 */
	.k-tarif.k-klapp > .k-tarif__kopf > *:not(h3):not(.k-tarif__beschr):not(.k-tarif__preis):not(.k-tarif__pfeil):not(.k-tarif__aufkleber) {
		grid-column: 1 / -1;
		margin: 0.35rem 0 0 !important;
	}

	/* Der Pfeil zeigt, dass hier etwas aufgeht. Er sitzt in der zweiten
	   Spalte unter dem Preis und dreht sich beim Oeffnen. */
	.k-tarif.k-klapp .k-tarif__pfeil {
		display: block;
		grid-column: 3;
		grid-row: 1 / span 2;
		justify-self: end;
		align-self: center;
		transition: transform 0.25s ease;
	}

	.k-tarif.k-klapp.is-offen .k-tarif__pfeil {
		transform: rotate(180deg);
	}

	/* Zu bleibt zu, solange das Skript den Schalter gesetzt hat. Ohne
	   Skript traegt die Karte die Klasse k-klapp nicht und steht offen. */
	.k-tarif.k-klapp:not(.is-offen) > .k-tarif__rumpf {
		display: none;
	}

	/* Die Zwischenueberschriften "Karate" und "Gesundheit" trennen die
	   Liste in zwei Bloecke. Enger als bisher, sie stehen jetzt zwischen
	   Zeilen und nicht mehr zwischen Karten. */
	.k-tarife__zwischen {
		margin: 1.5rem 0 0.5rem !important;
	}
}


/* Gefahren wird um eine Haelfte plus einen halben Abstand.
   Acht Siegel haben sieben Luecken dazwischen -- die halbe Spurbreite
   schneidet also mitten durch eine Luecke, und das Band ruckt einmal je
   Umlauf um zwanzig Pixel. Dieselbe Rechnung steht beim Stimmenband. */
@keyframes k-siegelband {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-50% - 1.25rem));
	}
}


/* ==========================================================================
   Kontaktseite: auf dem Handy Text, Formular, Wege (10.09.2026)
   ==========================================================================

   Am Rechner bleibt alles, wie es war: links Kicker, Schlagzeile,
   Einleitung und die drei Wege, rechts das Formular. Der erste Anlauf hat
   das auch dort umgebaut, das war zu viel.

   Auf dem Handy stehen die beiden Spalten untereinander, und dort ist die
   Reihenfolge falsch: erst Text, dann drei Kacheln, und ganz unten das
   Formular, um das es auf dieser Seite geht.

   Die Reihenfolge liesse sich nicht sortieren, solange Text und Kacheln in
   derselben Spalte stecken -- order wirkt nur unter Geschwistern.
   display: contents loest die Spalte auf: Ihre Kinder werden selbst zu
   Elementen der Reihe und lassen sich einzeln stellen. Der Kopfbereich der
   Seite faellt hier weg (siehe pages.json), diese Ueberschrift ist also die
   erste der Seite.
   -------------------------------------------------------------------- */

/*
 * Die Navigationsleiste liegt fest ueber der Seite und ist 79 Pixel hoch,
 * auf dem Handy 86. Auf allen anderen Seiten schiebt der Kopfbereich den
 * Inhalt darunter weg -- die Kontaktseite hat seit dem 10.09.2026 keinen
 * mehr, und ihre Ueberschrift stand dadurch auf dem Handy bei 32 Pixeln,
 * also hinter der Leiste.
 *
 * Der Vorlauf traegt die Leiste plus den Weissraum, den ein Seitenanfang
 * braucht.
 */
.k-kontakt {
	padding-top: 11rem !important;
}

@media (max-width: 781px) {

	.k-kontakt {
		padding-top: 9rem !important;
	}

	.k-kontakt > .wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--50);
	}

	/*
	 * display: contents nimmt der Spalte ihren Platz im Baum, und die
	 * Breitenangaben ihrer Kinder beziehen sich danach auf einen anderen
	 * Bezug: Sie standen auf 395 Pixeln in einer 358 Pixel breiten Reihe,
	 * und die Seite liess sich um 21 Pixel quer schieben. Der Deckel gilt
	 * fuer alle, die auf diese Ebene gerutscht sind.
	 */
	.k-kontakt > .wp-block-columns > * {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* Die Spalte selbst verschwindet, ihre Kinder ruecken eine Ebene hoch. */
	.k-kontakt__infos {
		display: contents !important;
	}

	.k-kontakt__kicker,
	.k-kontakt__infos > h2,
	.k-kontakt__infos > p {
		order: 1;
	}

	.k-kontakt__karte {
		order: 2;
	}

	.k-kontakt__kachel {
		order: 3;
	}

	/* display: contents nimmt der Spalte auch ihre Abstaende. Die Kacheln
	   brauchen wieder einen zwischen sich. */
	.k-kontakt__kachel + .k-kontakt__kachel {
		margin-top: var(--wp--preset--spacing--30) !important;
	}

	/* Die Einleitung stand mit grossem Abstand vor den Kacheln -- die
	   stehen jetzt ganz unten, der Abstand haengt sonst unter dem Text. */
	.k-kontakt__infos > p {
		margin-bottom: 0 !important;
	}

	/*
	 * Die Formularkarte trug rundum 64 Pixel Innenabstand. Auf einem
	 * 390er Schirm blieben davon 214 Pixel fuer die Eingabefelder. Auf
	 * dem Handy zaehlt die Tippflaeche mehr als der Rahmen darum.
	 */
	.k-kontakt__karte {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important;
	}

	.k-kontakt {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}
}

/* --- Anfahrt: die Wegbeschreibung als Fenster ---------------------------

   Die drei Hallenkarten stehen in einer Reihe gleicher Hoehe. Als die
   Wegbeschreibung noch ein Aufklapper war, wuchsen beim Oeffnen alle drei
   mit -- von aussen sah es aus, als gingen alle drei auf. Ein Zwischenschritt
   hat den Karten deshalb ihre eigene Hoehe gelassen; jetzt legt sich das
   Fenster ueber die Seite, statt die Karte zu dehnen, und die Karten duerfen
   wieder gleich hoch stehen.

   Gebaut wird das Fenster von assets/js/wegbeschreibung.js aus dem
   <details>, das im Muster steht. Ohne das Skript bleibt der Aufklapper.
   -------------------------------------------------------------------- */

/* Der Knopf sieht aus wie der Aufklapper vorher -- eine helle Zeile mit
   einem Pluszeichen rechts. Wer die Seite kennt, sucht nichts Neues. */
.k-weg__oeffner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 0;
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.k-weg__oeffner::after {
	/* Pfeil statt Plus: der Knopf oeffnet ein Fenster, er klappt nichts auf
	   (Johannes, 17.10.2026). */
	content: "92";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	background: var(--k-accent, var(--wp--preset--color--blue));
	color: var(--wp--preset--color--white);
	font-size: 1rem;
	line-height: 1;
}

.k-weg__oeffner:hover,
.k-weg__oeffner:focus-visible {
	background: var(--wp--preset--color--gray-200);
}

.k-weg__oeffner::after {
	transition: transform 0.2s ease;
}

.k-weg__oeffner:hover::after,
.k-weg__oeffner:focus-visible::after {
	transform: translateX(3px);
}

/* --- Das Fenster selbst -------------------------------------------------- */

.k-weg__fenster {
	max-width: min(34rem, calc(100vw - 2rem));
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
}

.k-weg__fenster::backdrop {
	background: rgba(16, 26, 45, 0.6);
}

.k-weg__kasten {
	position: relative;
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--white);
	max-height: 80dvh;
	overflow-y: auto;
}

.k-weg__titel {
	margin: 0 0 var(--wp--preset--spacing--40);
	padding-right: 2.5rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--navy);
}

.k-weg__kasten p {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--gray-600);
	font-size: var(--wp--preset--font-size--small);
}

.k-weg__kasten p:last-of-type {
	margin-bottom: 0;
}

/* Das Kreuz sitzt oben rechts im Kasten, nicht am Fensterrand -- der ist
   durchsichtig. */
.k-weg__zu {
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--wp--preset--color--gray-50);
	color: var(--wp--preset--color--navy);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.k-weg__zu:hover,
.k-weg__zu:focus-visible {
	background: var(--wp--preset--color--gray-200);
}

@media (max-width: 781px) {
	.k-weg__kasten {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* --- Hallenkarten: der Knopf, der den Rest zeigt --------------------

	   Sieht aus wie der Knopf der Wegbeschreibung darunter, nur ohne
	   Flaeche -- er gehoert zur Karte, nicht zu einem eigenen Kasten. */
	.k-halle__mehr {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		margin: 0 0 var(--wp--preset--spacing--30);
		padding: 0;
		border: 0;
		background: none;
		color: var(--k-accent, var(--wp--preset--color--blue));
		font-family: inherit;
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: 900;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}

	.k-halle__mehr::after {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translate(-2px, -2px);
		transition: transform 0.25s ease;
	}

	.k-halle__mehr.is-offen::after {
		transform: rotate(225deg) translate(-2px, -2px);
	}

	/* Der Knopf zur Karte steht danach und braucht Luft, wenn das Fach zu
	   ist -- sonst klebt er am Namen der Halle. */
	.k-halle__fach[hidden] + * {
		margin-top: var(--wp--preset--spacing--20);
	}
}


/* ==========================================================================
   Vereinsseite: Abstaende und Fliesstext (10.09.2026)
   ========================================================================== */

/*
 * Marke und Name standen zu weit auseinander -- im Bild der Gruender wie
 * unter dem Zitat. Beide Absaetze setzen selbst nur einen kleinen Abstand
 * nach unten; was dazwischen stand, war der Blockabstand, den WordPress
 * jedem Folgeabsatz von sich aus gibt. Zwei Zeilen, die zusammen eine
 * Bildunterschrift ergeben, brauchen ihn nicht.
 */
.k-gruender__bild .wp-block-cover__inner-container p + p,
.k-zitat p + p {
	margin-top: 0 !important;
}

/*
 * Der Fliesstext unter "Unsere Erfolge." stand mittig eingerueckt: 640
 * Pixel breit mit 376 Pixeln Rand auf jeder Seite, waehrend Kicker,
 * Ueberschrift und die Ehrungen darunter an der Textkante bei 24 Pixeln
 * beginnen. Er faengt jetzt dort an wie alles andere.
 */
.k-erfolge__intro {
	/*
	 * Der erste Anlauf setzte margin-inline auf 0. Auf einem 1440er Schirm
	 * sah das richtig aus, auf einem breiteren nicht: Der Abschnitt ist auf
	 * 1440 Pixel eingegrenzt, und Kicker, Ueberschrift und Karten stehen
	 * mittig in dieser Spalte. Ohne Aussenabstand fiel allein der Text aus
	 * ihr heraus nach links.
	 *
	 * Er bekommt jetzt dieselbe Box wie seine Geschwister. Kurz gehalten
	 * werden die Zeilen ueber die Polsterung rechts -- was ueber 46rem
	 * hinausgeht, bleibt leer.
	 */
	max-width: 46rem !important;
	/*
	 * Der Aussenabstand wird gerechnet, nicht auf auto gestellt: Was ueber
	 * die 1440 Pixel des Abschnitts hinausgeht, faellt zur Haelfte auf die
	 * linke Seite -- genau dort beginnen Ueberschrift und Karten. Auf
	 * schmalen Fenstern wird der Wert negativ, max() faengt das auf null
	 * ab. Dieselbe Rechnung steht am Stoererband.
	 */
	margin-left: max(0px, calc((100% - 1440px) / 2)) !important;
	margin-right: 0 !important;
}


/* --- Vereinsseite: Zitat und Kennzahlen in Bewegung ----------------------
 *
 * Beides setzt assets/js/verein.js in Gang. Die Startwerte haengen an
 * Klassen, die erst das Skript vergibt -- ohne Skript steht alles sofort
 * und vollstaendig da. Wer weniger Bewegung eingestellt hat, ebenfalls:
 * Das Skript kehrt dann um, bevor es etwas anfasst.
 */

.k-tippt .k-tippt__zeichen {
	opacity: 0;
	transition: opacity 0.09s linear;
}

.k-tippt.is-da .k-tippt__zeichen {
	opacity: 1;
}

/*
 * Aufploppen: von unten heran und aus 80 Prozent Groesse. Die Kurve mit dem
 * Ueberschwung laesst die Zahl kurz ueber ihr Mass hinausgehen -- das ist
 * der Unterschied zwischen Erscheinen und Aufploppen.
 */
.k-plopp {
	opacity: 0;
	transform: translateY(12px) scale(0.8);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.k-plopp.is-da {
	opacity: 1;
	transform: none;
}


/* --- Beitragskarten: alles an einer Kante, das Datum rechts --------------
 *
 * Das Datum stand mittig ueber der Ueberschrift -- nicht weil es so gesetzt
 * war, sondern weil das Layout von WordPress jedem Kind margin-inline: auto
 * gibt. Bei Ueberschrift und Text faellt das nicht auf, sie fuellen die
 * Spalte ohnehin. Das Datum ist 144 Pixel breit, und die 119 Pixel Rest auf
 * jeder Seite haben es in die Mitte geschoben.
 *
 * Jetzt beginnt alles an derselben Kante. Das Datum ist die Ausnahme: Es
 * gehoert zur Karte, aber nicht in ihre Leserichtung, und steht deshalb
 * rechts auf der Hoehe, auf der sonst der Text beginnt.
 */
.k-news__text > * {
	margin-inline: 0 !important;
}

/*
 * Das Datum ist immer das erste Kind -- so baut es das Muster. Die Regel
 * oben reicht ihm schon: ohne den auto-Rand steht es an derselben Kante
 * wie Ueberschrift und Text.
 */


/* Hinweis, wenn die Beitragssuche nichts findet. Gesetzt von
   assets/js/news-filter.js. */
.k-news__leer {
	margin: var(--wp--preset--spacing--60) 0 0;
	color: var(--wp--preset--color--gray-600);
	text-align: center;
}


/* --- Beitragsleiste: Suche und Monate ------------------------------------
 *
 * Das Suchfeld war 320 Pixel breit, eine Beitragskarte daneben 448. Zwei
 * verschiedene Masse in derselben Spalte, ohne dass eines davon einen Grund
 * hatte. Das Feld nimmt jetzt die Breite einer Karte.
 */
.k-news__suche {
	flex: 0 1 28rem;
	max-width: 28rem;
}

/*
 * Der Suchblock traegt seine Breite als festen Wert am inneren Kasten --
 * 320 Pixel, gesetzt im Muster. Die Huelle darum zu verbreitern half
 * deshalb nicht: Sie wurde 448 Pixel breit, das Feld darin blieb bei 320
 * und die Differenz stand leer daneben. Gemessen hatte ich die Huelle,
 * gesehen hat man das Feld.
 */
.k-news__suche .wp-block-search__inside-wrapper {
	width: 100% !important;
	max-width: none !important;
}

.k-news__suche .wp-block-search__input {
	flex: 1;
}

/*
 * Die Monate als Knoepfe. Sie ersetzen das Ausklappmenue des Archivs, das
 * auf eine eigene Seite je Monat fuehrte -- neben einer Suche, die beim
 * Tippen filtert, war das ein zweiter Weg zum selben Ziel, nur mit
 * Neuladen. Gesetzt werden sie von assets/js/news-filter.js, und zwar nur,
 * wenn es mehr als einen Monat gibt.
 */
.k-news__monate {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
}

.k-news__monat {
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-200);
	background: none;
	color: var(--wp--preset--color--gray-600);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.k-news__monat:hover,
.k-news__monat:focus-visible {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
}

/* Der gewaehlte Monat traegt die Flaeche, nicht nur eine andere Kontur --
   auf einen Blick zu sehen, wonach gerade gefiltert wird. */
.k-news__monat[aria-pressed="true"] {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.k-news__suche {
		flex: 1 1 100%;
		max-width: none;
	}

	.k-news__monate {
		justify-content: flex-start;
	}
}


@media (max-width: 781px) {
	/*
	 * "Weiterlesen" stand 48 Pixel unter dem Auszug -- 32 davon aus dem
	 * Blockabstand, den WordPress zwischen zwei Absaetzen setzt, 16 aus
	 * dem Link selbst. Auf dem Handy, wo die Karte ohnehin schmal ist,
	 * sah der Link dadurch aus, als gehoere er nicht mehr dazu.
	 */
	.k-news__text .wp-block-post-excerpt__more-text {
		margin-top: 0.75rem !important;
	}

	.k-news__text .wp-block-post-excerpt__more-link {
		margin-top: 0 !important;
	}
}


@media (max-width: 781px) {
	/* --- Seitenkopf der Beitragsseite: enger ---------------------------

	   Gemessen auf einem 390er Schirm: 441 Pixel hoch, davon 192 Polsterung
	   oben und unten. Darunter beginnt der helle Bereich mit weiteren 96,
	   sodass zwischen der Einleitung und dem Suchfeld 192 Pixel leer
	   standen -- eine halbe Bildschirmhoehe fuer nichts.

	   Auch innen war es weit: zwischen Schlagzeile und Einleitung lagen
	   55 Pixel, weil die eine 24 nach unten und die andere 32 nach oben
	   setzt. Beides zusammen ergibt einen Abstand, den keiner von beiden
	   gemeint hat. */
	.k-page-hero {
		padding-top: 3.5rem !important;
		padding-bottom: 3rem !important;
		/*
		 * Die Mindesthoehe haelt den Kopf auf einem Anteil des Fensters --
		 * 414 Pixel bei 900 Fensterhoehe. Sie ist es, die die Hoehe
		 * bestimmt, nicht die Polsterung: Der Inhalt steht darin
		 * zentriert, und oben wie unten bleibt Luft ueber, die niemand
		 * gesetzt hat. Auf dem Handy zaehlt jede Bildschirmhoehe, hier
		 * traegt der Inhalt die Hoehe selbst.
		 */
		min-height: 0 !important;
	}

	/* Der Kicker ist ein Absatz ohne eigene Klasse -- deshalb ueber die
	   Stelle angesprochen, nicht ueber einen Namen. */
	.k-page-hero > p:first-child {
		margin-bottom: 0.75rem !important;
	}

	.k-page-hero > h1 {
		margin-bottom: 0.75rem !important;
	}

	.k-page-hero__text {
		margin-top: 0 !important;
	}

	/* Der helle Bereich darunter beginnt mit der Suchzeile, nicht mit einer
	   Ueberschrift -- er braucht keinen Vorlauf von 96 Pixeln. */
	.k-news {
		padding-top: 2.5rem !important;
	}
}


/* ==========================================================================
   Navigationsleiste auf dem Handy (11.09.2026)
   ==========================================================================

   Nachgemessen auf vierzehn Seiten: Auf sechs war die Leiste weiss, auf
   acht durchsichtig. Die Durchsichtige gehoert zur Startseite, wo sie auf
   einem grossen Kopfbild liegt -- auf einer Unterseite mit dunklem
   Seitenkopf war sie nur der Zustand, den niemand umgestellt hatte.

   Schwerer wog der zweite Befund: Auf sechs Seiten -- News, Preise,
   Verein, Anmeldung, Impressum, Datenschutz -- begann der erste Text bei
   56 Pixeln, waehrend die Leiste bis 86 reicht. Die Ueberschrift stand
   also hinter der Leiste. Sichtbar wurde das erst, seit der Seitenkopf
   seine Mindesthoehe nicht mehr traegt; vorher hat die Luft darin den
   Fehler verdeckt.
   -------------------------------------------------------------------- */

@media (max-width: 781px) {
	/*
	 * Weiss, gleich welcher Seitenkopf darunter liegt. Die Klasse
	 * k-dunkler-kopf schaltet am Rechner auf durchsichtig mit hellen
	 * Menuepunkten -- auf dem Handy ist die Leiste zu schmal, als dass
	 * dieser Wechsel etwas braechte, und ein Logo, das je nach Seite
	 * seine Farbe wechselt, macht sie schwerer wiederzuerkennen.
	 */
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav {
		background: var(--wp--preset--color--white) !important;
	}

	/* Dann muessen auch die Menuepunkte und das Signet dunkel bleiben. */
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu a,
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__name,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__menu a,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__name {
		color: var(--wp--preset--color--navy) !important;
	}

	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-logo img,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-logo img {
		filter: none !important;
	}

	/*
	 * Und der Seitenkopf beginnt unter der Leiste, nicht dahinter.
	 * 86 Pixel ist sie hoch, der Rest ist der Weissraum, den ein
	 * Seitenanfang braucht.
	 */
	.k-page-hero {
		padding-top: 8rem !important;
	}
}


/* --- Weiterlesen: drei Beitraege unter einem Beitrag ---------------------
 *
 * Gebaut von patterns/verwandte-beitraege.php. Die Karten sehen aus wie die
 * in der Beitragsliste, tragen aber weniger: Datum und Titel, kein Auszug.
 * Wer hier landet, hat gerade einen Beitrag zu Ende gelesen und entscheidet
 * am Titel, nicht an drei weiteren Zeilen Text.
 *
 * Die ganze Karte ist ein Link -- deshalb ein <a> um alles, statt eines
 * Links im Titel.
 */
.k-verwandt__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.k-verwandt__karte {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.k-verwandt__karte:hover,
.k-verwandt__karte:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -20px rgba(16, 26, 45, 0.18);
}

.k-verwandt__bild {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.k-verwandt__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.k-verwandt__karte:hover .k-verwandt__bild img {
	transform: scale(1.05);
}

.k-verwandt__text {
	display: block;
	padding: var(--wp--preset--spacing--50);
}

.k-verwandt__datum {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--blue);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 900;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.k-verwandt__titelzeile {
	display: block;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--headline, inherit);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.25;
}

@media (max-width: 1099px) {
	.k-verwandt__liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.k-verwandt__liste {
		grid-template-columns: 1fr;
	}

	.k-verwandt {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}
}


@media (max-width: 781px) {
	/* --- Was unter einem Beitrag steht, rueckt zusammen ------------------

	   Am Ende eines Beitrags folgen vier Bloecke: Schlagworte, Teilen-Leiste,
	   die Sprungmarken zum vorherigen und naechsten Beitrag und zuletzt die
	   drei Vorschlaege. Jeder bringt seinen eigenen Abstand mit, und jeder
	   ist fuer sich vertretbar -- zusammen lagen 350 Pixel reiner Zwischenraum
	   zwischen dem letzten Satz und dem ersten Vorschlag. Auf einem 390er
	   Schirm sind das vier Wischer ueber Leerflaeche.

	   Am Rechner bleibt es, wie es ist: Dort steht der Text in einer schmalen
	   Spalte, und die Luft drumherum traegt ihn. */
	.k-schlagworte {
		margin-top: var(--wp--preset--spacing--50) !important;
	}

	[data-teilen] {
		margin-top: var(--wp--preset--spacing--40) !important;
		padding-top: var(--wp--preset--spacing--30) !important;
	}

	/*
	 * Die drei Sprungmarken standen mit space-between nebeneinander und
	 * brachen dabei um: "Vorheriger Beitrag" und "Alle Beiträge" in der
	 * ersten Zeile, "Nächster Beitrag" allein in der zweiten, dazwischen
	 * 32 Pixel Reihenabstand. Das sah aus wie ein Versehen und war auch
	 * eines -- die Anordnung ist fuer eine breite Zeile gedacht.
	 *
	 * Auf dem Handy stehen sie untereinander an einer Kante. Drei Zeilen
	 * sind kuerzer als zwei mit Loch dazwischen.
	 */
	.k-beitrag__fuss {
		margin-top: var(--wp--preset--spacing--50) !important;
		padding-top: var(--wp--preset--spacing--40) !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem !important;
	}

	/*
	 * Darunter standen 96 Pixel Polsterung, bevor der graue Bereich mit den
	 * Vorschlaegen beginnt. Der bringt seine eigene mit -- zusammen war es
	 * ein leeres Feld von fast anderthalb Bildschirmhoehen.
	 */
	.k-beitrag__inhalt {
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	.k-verwandt {
		margin-top: 0 !important;
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}

	.k-verwandt__titel {
		margin: 0 0 var(--wp--preset--spacing--40) !important;
	}

	/* Die Karten untereinander brauchen weniger Abstand als nebeneinander:
	   Waagerecht trennt die Luecke zwei Dinge, senkrecht reiht sie. */
	.k-verwandt__liste {
		gap: var(--wp--preset--spacing--30);
	}

	/* Bild und Titel duerfen enger stehen -- die Karte traegt nur zwei
	   Zeilen, keinen Auszug. */
	.k-verwandt__text {
		padding: var(--wp--preset--spacing--40) !important;
	}
}


/* ==========================================================================
   Navigationsleiste zwischen 600 und 900 Pixeln (11.09.2026)
   ==========================================================================

   Der Navigationsblock von WordPress schaltet bei 600 Pixeln vom Menuknopf
   auf ausgeschriebene Menuepunkte. Die passen hier aber erst ab 900 in eine
   Zeile. Dazwischen brach das Menue um, und die Leiste wurde zwei- bis
   vierzeilig -- nachgemessen:

     595 px: 86 Pixel hoch, Menuknopf
     605 px: 262 Pixel hoch, Menue auf vier Zeilen
     800 px: 110 Pixel, zwei Zeilen
     840 px: 87 Pixel
     900 px: 72 Pixel, eine Zeile

   Das traf genau die Tablets: iPad hochkant misst 768, viele Android-Geraete
   800. Die Leiste liegt fest ueber der Seite, eine 262 Pixel hohe Leiste
   verdeckt also ein Drittel des Bildschirms.

   Der Menuknopf gilt jetzt bis 899. Ab 900 steht das Menue wieder
   ausgeschrieben da, so wie bisher.
   -------------------------------------------------------------------- */

/*
 * Und die Leiste bleibt auch daueber noch weiss, bis 1199.
 *
 * Auf der Startseite liegt sie durchsichtig ueber dem Kopfbild. Das geht
 * auf, solange die Menuepunkte auf der weissen Haelfte stehen -- bei 1024
 * Pixeln reichten "Verein" und "Kontakt" aber schon in das dunkle Foto
 * hinein und waren dort navy auf navy, also unsichtbar. Genau die Breite
 * hat ein iPad im Querformat.
 *
 * Ab 1200 ist das Foto weit genug rechts, dort bleibt die Leiste
 * durchsichtig wie bisher.
 */
@media (max-width: 1199px) {
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav {
		background: var(--wp--preset--color--white) !important;
	}

	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu a,
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__name,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__menu a,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__name {
		color: var(--wp--preset--color--navy) !important;
	}

	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-logo img,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-logo img {
		filter: none !important;
	}
}

@media (max-width: 899px) {
	.k-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.k-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	/* Das aufgeklappte Overlay bleibt unberuehrt -- es ist ohnehin ein
	   eigener Kasten ueber der Seite. */
	.k-nav .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}

	/*
	 * Und dieselbe weisse Flaeche wie auf dem Handy. Wo der Menuknopf
	 * steht, ist die Leiste die kompakte Fassung -- dann soll sie auch
	 * ueberall gleich aussehen.
	 */
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav {
		background: var(--wp--preset--color--white) !important;
	}

	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__menu a,
	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-nav__name,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__menu a,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-nav__name {
		color: var(--wp--preset--color--navy) !important;
	}

	.k-leiste-bereit.k-dunkler-kopf:not(.k-gescrollt) .k-logo img,
	.k-leiste-bereit:not(.k-gescrollt) .home .k-logo img {
		filter: none !important;
	}
}


/* --- Einzelportraet unter 1100 Pixeln ------------------------------------
 *
 * Bei Tai Chi und Rueckenfit unterrichtet je eine Person, das Portraet steht
 * dann neben einem Text statt in einem Band. Die Karte ist aber dieselbe wie
 * im Raster der uebrigen Sparten, und dort gibt WordPress jeder Spalte
 * max-width: calc(33.3333% - gap) mit -- drei nebeneinander.
 *
 * Mit nur einer sichtbaren Karte bleibt davon ein Drittel der Spur uebrig.
 * Auf einem 834 Pixel breiten Schirm waren das 110 Pixel: ein senkrechter
 * Streifen, auf dem vom Gesicht die Haelfte fehlte. Auf 1440 faellt es nicht
 * auf, weil dort eine andere Regel die Karte auf 320 Pixel setzt, und auf
 * dem Handy stehen Text und Bild ohnehin untereinander. Genau dazwischen lag
 * der Fehler -- also auf dem Tablet.
 */
@media (max-width: 1099px) {
	body.k-trainer-einzeln .k-trainer__spur > .wp-block-column {
		max-width: none !important;
	}
}

/*
 * Ausdruecklich nur die Einzelfassung.
 *
 * Im ersten Anlauf stand die Zwei-Personen-Fassung mit in der Regel oben.
 * Ohne Breitengrenze wurden dort beide Portraets je 416 Pixel breit,
 * zusammen mehr als der Abschnitt hergab, und die Seite liess sich quer
 * schieben -- bis 865 auf einem 834er Schirm. Der zweite Anlauf setzte
 * stattdessen 50 Prozent, und die Karten schrumpften auf 165 Pixel.
 *
 * Beides war eine Loesung fuer ein Problem, das es nicht gab: Bei zwei
 * Portraets stimmten die Masse vorher schon. Hier steht nichts mehr.
 */


/* ==========================================================================
   Handy-Fassung, Nachtrag vom 15.09.2026
   ==========================================================================
   Alles hier gilt nur unterhalb von 782 Pixeln (eine Regel ab 1099) und
   aendert am Rechner nichts. Einzige Ausnahme steht als Erstes: die Farbe
   des Kickers ueber den Kursterminen.
   -------------------------------------------------------------------------- */

/*
 * Der Kicker "Kompakt und praxisnah" traegt im Muster fest die
 * Gesundheitsfarbe. Seit die violette Vollflaeche beim Selbstschutz weg ist,
 * stand er dort gruen auf hellem Grund. Er nimmt jetzt die Farbe seiner
 * Sparte -- bei Rueckenfit bleibt das Gruen.
 */
.k-kurse .k-kurse__kicker {
	color: var(--k-accent, var(--wp--preset--color--health)) !important;
}

/*
 * Das Menuezeichen stand 24 Pixel vom rechten Rand ab, das Zeichen links
 * nur auf der Polsterung. Grund: Die Gruppe mit Netzwerken und Knoepfen
 * ist auf dem Handy leer, steht aber noch in der Reihe und bekommt den
 * Blockabstand. Sie verschwindet jetzt ganz.
 */
@media (max-width: 1099px) {
	.k-nav__aktionen {
		display: none !important;
	}
}

@media (max-width: 781px) {

	/* --- Seitenkoepfe: Einleitung fliesst ------------------------------
	   Die Zeilenumbrueche aus pages.json sind fuer die Breite am Rechner
	   gesetzt. Auf dem Handy brechen sie mitten in der Zeile und lassen
	   einzelne Woerter allein stehen. Hier fliesst der Text, und der
	   Browser verteilt ihn gleichmaessig auf die Zeilen. */
	.k-page-hero__text br,
	.k-offer-cta h2 br {
		display: none;
	}

	.k-page-hero__text,
	.k-offer-cta h2 {
		text-wrap: balance;
	}

	/* --- Formulare: Absendeknopf bricht um -----------------------------
	   "Mitgliedsantrag absenden" war mit 334 Pixeln breiter als der Knopf
	   (308) und wurde rechts abgeschnitten. */
	.k-kontakt .fluentform .ff-btn-submit,
	.ff-btn-submit {
		white-space: normal !important;
		/* Kleiner und enger, damit "Mitgliedsantrag absenden" auf zwei
		   Zeilen passt, ohne dass ein Wort mitten durchbricht. Gebrochen
		   wird nur am Leerzeichen -- das globale word-break: break-word
		   trennte sonst "Mitgliedsantra / g". */
		font-size: 0.9rem !important;
		letter-spacing: 0.04em !important;
		line-height: 1.3 !important;
		padding: 1rem 1.25rem !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: manual !important;
	}

	/* --- Kids: drei Kennzahlen nebeneinander ---------------------------
	   Vier Zahlen untereinander brauchten 620 Pixel. Es sind jetzt drei,
	   und die stehen in einer Reihe. */
	.k-kids-zahlen .wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.75rem !important;
	}

	.k-kids-zahlen .wp-block-columns > .k-kids-zahl.wp-block-column {
		flex: 1 1 0 !important;
		min-width: 0;
		border-top: none;
		border-left: 3px solid rgba(255, 163, 71, 0.4);
		padding-top: 0;
		padding-left: 0.75rem !important;
	}

	.k-kids-zahlen .k-kids-zahl__wert {
		font-size: 2rem !important;
	}

	.k-kids-zahlen .k-kids-zahl p:last-child {
		font-size: 0.6rem !important;
		letter-spacing: 0.1em !important;
	}

	/* --- Schritte: dasselbe Band wie der Ablauf auf der Startseite ----- */
	.k-schritte {
		overflow-x: clip;
	}

	.k-schritte .k-schritte__reihe.wp-block-columns {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.75rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
		scrollbar-width: none;
	}

	.k-schritte .k-schritte__reihe::-webkit-scrollbar {
		display: none;
	}

	/* Die Verbindungslinie zwischen den Symbolen gehoert zur Reihe am
	   Rechner, im Band laeuft sie ins Leere. */
	.k-schritte .k-schritte__reihe::before {
		display: none;
	}

	.k-schritte .k-schritte__reihe > .k-schritt.wp-block-column {
		flex: 0 0 78vw !important;
		max-width: 78vw;
		scroll-snap-align: center;
		margin-bottom: 0 !important;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--gray-200);
		border-radius: 2px;
		padding: 1.5rem 1.25rem 2rem;
		box-sizing: border-box;
	}

	.k-schritte .k-schritt__nr {
		display: none !important;
	}

	/* --- Vereinsseite: Werte stapeln sich beim Scrollen ----------------
	   Gebaut wie die drei Saeulen auf der Karate-Seite. Deckender Grund,
	   weil die Karten sonst durchscheinen. */
	.k-werte .wp-block-columns {
		display: block !important;
	}

	.k-werte .k-wert.wp-block-column {
		position: sticky;
		background: #1b2740;
		margin-bottom: 1rem;
	}

	.k-werte .k-wert.wp-block-column:nth-child(1) { top: 72px; }
	.k-werte .k-wert.wp-block-column:nth-child(2) { top: 88px; }
	.k-werte .k-wert.wp-block-column:nth-child(3) { top: 104px; }
	.k-werte .k-wert.wp-block-column:nth-child(4) { top: 120px; }
	.k-werte .k-wert.wp-block-column:nth-child(5) { top: 136px; }

	.k-werte .k-wert.wp-block-column:last-child {
		margin-bottom: 0;
	}

	/* --- Vereinsseite: Bannerbild hoeher, ohne Beschriftung ------------ */
	.k-divider--text {
		aspect-ratio: 16 / 10 !important;
	}

	.k-divider--text .k-divider__text {
		display: none;
	}

	/* --- Vereinsseite: Erfolge als Wischband --------------------------- */
	.k-erfolge {
		overflow-x: clip;
	}

	.k-erfolge .k-erfolge__raster {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0.75rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--wp--preset--spacing--40));
		padding-inline: var(--wp--preset--spacing--40);
		scrollbar-width: none;
	}

	.k-erfolge .k-erfolge__raster::-webkit-scrollbar {
		display: none;
	}

	.k-erfolge .k-erfolge__raster > .k-ehrung {
		flex: 0 0 78vw !important;
		max-width: 78vw;
		min-width: 0;
		scroll-snap-align: center;
	}

	/* --- Kids: Vertrauensband laeuft wie auf der Startseite ------------
	   mobil.js haengt dieselben Klassen an wie beim Siegelband. Der Grund
	   ist hier orange, also auch die Ausblendung an den Raendern. */
	.k-kids-band.k-trust--laeuft::before {
		background: linear-gradient(90deg,
			var(--wp--preset--color--orange), transparent);
	}

	.k-kids-band.k-trust--laeuft::after {
		background: linear-gradient(270deg,
			var(--wp--preset--color--orange), transparent);
	}

	/* --- Menue: Unterpunkte erst auf Tippen -----------------------------
	   WordPress zeigt im ausgeklappten Menue alle Unterpunkte offen. Hier
	   bleiben sie zu, bis "Angebot" oder "Verein" angetippt wird; mobil.js
	   setzt dafuer is-offen. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child.is-offen > .wp-block-navigation__submenu-container {
		display: flex !important;
	}

	/* Der Eintrag ist eine Zeile: links das Wort, rechts das Plus. Der
	   Verweis nimmt sich sonst die volle Breite und schiebt den Knopf in
	   die naechste Zeile. Die Unterebene bricht darunter um. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child {
		display: flex !important;
		flex-wrap: wrap !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		flex: 0 0 100%;
	}

	/* Das Plus: zwei Striche als Farbverlaeufe, wie beim Menuezeichen.
	   Offen bleibt nur der waagerechte, ein Minus. Der Pfeil von
	   WordPress verschwindet, ebenso seine Drehung vom Schreibtisch. */
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
		display: block !important;
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		margin: 0 !important;
		padding: 0 !important;
		border: 0;
		background-color: transparent !important;
		color: var(--wp--preset--color--white);
		background-image:
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor);
		background-size: 16px 2px, 2px 16px;
		background-repeat: no-repeat;
		background-position: center center, center center;
		transform: none !important;
		transition: background-size 0.2s ease;
		cursor: pointer;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.has-child.is-offen > .wp-block-navigation__submenu-icon {
		background-size: 16px 2px, 2px 0;
	}
}

/* ---------------------------------------------------------------------------
   Gemeinnuetzig (verein-gemeinnuetzig), Feedback 11.10.2026
   --------------------------------------------------------------------------- */

/* Der Verweis auf die Foerdermitgliedschaft steht im Fliesstext und soll
   trotzdem als Handlung erkennbar sein. */
.k-gemeinnuetzig a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.k-gemeinnuetzig__logo img {
	max-width: 100%;
	height: auto;
}

/* Gestapelt steht das Zeichen unter dem Text und darf ihn nicht ueberragen. */
@media (max-width: 781px) {
	.k-gemeinnuetzig__logo img {
		width: 200px !important;
	}
}

/* ---------------------------------------------------------------------------
   Mobil, Feedback 11.10.2026
   --------------------------------------------------------------------------- */

/*
 * Menueschrift im aufgeklappten Menue. Auf der Startseite ganz oben war sie
 * navy auf navy, also unsichtbar: Die Regeln oben, die die Leiste auf
 * hellem Kopf dunkel faerben (".home .k-nav__menu a"), greifen auch auf die
 * Links im Overlay. Das Overlay ist aber immer dunkel. html und body
 * heben die Spezifitaet ueber die dortigen Regeln.
 */
html.k-leiste-bereit body .k-nav__menu .wp-block-navigation__responsive-container.is-menu-open a,
html.k-leiste-bereit body .k-nav__menu .wp-block-navigation__responsive-container.is-menu-open .k-nav__name {
	color: var(--wp--preset--color--white) !important;
}

@media (max-width: 480px) {
	/*
	 * Lange Woerter in Ueberschriften ("DAS TRAINERTEAM.") waren bei 360
	 * Pixeln breiter als ihr Kasten und liefen ueber den Rand. Trennen statt
	 * ueberlaufen; break-word faengt Woerter ab, die keine Trennstelle haben.
	 */
	h1, h2, h3 {
		hyphens: auto;
		overflow-wrap: break-word;
	}

	/*
	 * Das getippte Zitat auf der Vereinsseite steht Zeichen fuer Zeichen in
	 * eigenen Spans. Dort kann der Browser nicht trennen -- "KAMPFSPORTLER,"
	 * war bei 360 Pixeln 17 Pixel zu breit. Etwas kleiner passt es.
	 */
	.k-tippt {
		font-size: clamp(1.6rem, 8.6vw, 2.25rem) !important;
	}

	/*
	 * Der Zeitraum bei Rueckenfit hat Innenabstand. Mit flex-basis 100 %
	 * kam der zur Breite dazu, die Zeile lief 16 Pixel ueber.
	 */
	.k-kurse__termin strong {
		box-sizing: border-box;
		max-width: 100%;
	}

	/*
	 * Der Vereinsname neben dem Zeichen im Fuss bleibt am Rechner auf zwei
	 * Zeilen (nowrap, siehe oben). Auf schmalen Handys reicht der Platz
	 * dafuer nicht, er lief bei 320 Pixeln ueber den Rand. Hier darf er an
	 * den Leerzeichen umbrechen -- nie mitten im Wort.
	 */
	.k-fuss__marke p {
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: manual;
	}
}

/*
 * Startbild mit zwei Personen (Feedback 11.10.2026: Mann und Frau im Hero).
 * Das Motiv ist breiter als der fruehere Einzel-Freisteller (Seitenverhaeltnis
 * 0,76 statt 0,64). Die Hoehe fuehrt weiterhin, aber zwischen 820 und 1680
 * Pixeln ragte das Bild damit rechts aus dem Fenster. Jetzt bleibt es in der
 * Breite seiner Spalte (hoechstens 40 %) und wird darin eingepasst, statt
 * ueber den Rand zu laufen. object-fit: contain steht schon oben.
 */
@media (min-width: 782px) {
	.k-hero__figure .wp-block-image.is-freigestellt img {
		max-width: 100%;
		object-position: bottom right;
	}
}

/* Verweis auf das News-Archiv unter der Liste (Import 12.10.2026). */
.k-news__archiv-hinweis a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-decoration-color: var(--wp--preset--color--blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/*
 * "Unsere Erfolge" fast schwarz statt navy (Feedback 12.10.2026). Auf der
 * Startseite steht der Abschnitt direkt unter den Kennzahlen, die ebenfalls
 * navy sind -- beide flossen ineinander. Der Ton bleibt kuehl, damit er zum
 * Navy passt, ist aber deutlich dunkler.
 */
.k-erfolge.has-navy-background-color {
	background-color: #070B13 !important;
}

/*
 * "Selbstverteidigung" trennt nur nach "Selbst" (inc/trennung.php setzt
 * dort ein weiches Trennzeichen). Ohne manual wuerde die automatische
 * Silbentrennung auf dem Handy auch "Selbstvertei-digung" anbieten.
 */
.k-trennwort {
	hyphens: manual !important;
	-webkit-hyphens: manual !important;
}

/* Ersatzbild fuer Beitraege ohne Bild (inc/beitragsbild-ersatz.php):
   Vereinszeichen in Weiss, mittig auf Navy. */
.k-ersatzbild {
	margin: 0 !important;
	background-color: var(--wp--preset--color--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.k-ersatzbild a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.k-news__bild.k-ersatzbild img,
.k-ersatzbild img {
	width: 38% !important;
	height: auto !important;
	opacity: 0.9;
}

/* Haken im Abschnitt "Was dein Beitrag im Verein bewegt" weiss auf Gruen
   statt navy (Feedback 12.10.2026). */
.k-gemeinnuetzig .k-checks li::before {
	color: var(--wp--preset--color--white);
}

/* Kids-Unterzeile unter "Das Trainerteam." lief ueber die ganze Breite.
   Sie soll nur wenig weiter reichen als die Ueberschrift. */
.k-trainer__unter--kids {
	max-width: 36rem;
}

/*
 * Startseite: Der Text stand auf breiten Schirmen weit rechts, weil die
 * Spalten hoechstens 1440 Pixel breit sind und mittig sitzen -- das Bild
 * haengt aber am rechten Fensterrand. Ab 1600 Pixeln darf der Kopfbereich
 * breiter werden, der Text rueckt damit nach links (Feedback 12.10.2026).
 */
@media (min-width: 1600px) {
	.k-hero > .wp-block-columns {
		max-width: min(1840px, 92vw) !important;
	}

	/* Mit der breiteren Reihe wuerde auch die Textspalte breiter und liefe
	   bei 1920 Pixeln ins Bild. Sie bleibt so breit wie bei 1440. */
	.k-hero > .wp-block-columns > .wp-block-column:first-child {
		flex-basis: 792px !important;
		flex-grow: 0 !important;
		max-width: 792px;
	}
}

/*
 * Kontaktseite: das Vereinszeichen mit Schriftring gross und angeschnitten
 * im Hintergrund, fuer die Wiedererkennung (Feedback Lucas 11.10.2026).
 * Nur auf /kontakt/ -- derselbe Abschnitt steht auch auf "Über uns".
 */
body.k-seite-kontakt .k-kontakt {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.k-seite-kontakt .k-kontakt::before {
	/*
	 * Rechts, am rechten Rand angeschnitten (Feedback 12.10.2026). Seit
	 * 17.10.2026 steht ueber dem Abschnitt der Seitenkopf wie auf "Preise &
	 * Zeiten"; die Mitte des Zeichens liegt deshalb ein Viertel Bildschirm
	 * unter dem Abschnittsanfang statt einen halben.
	 */
	--k-logo-groesse: min(68vw, 980px, 80svh);
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(25svh - 0.5 * var(--k-logo-groesse));
	right: calc(-0.3 * var(--k-logo-groesse));
	width: var(--k-logo-groesse);
	aspect-ratio: 1;
	background: url("assets/images/logo-hero-navy.webp") center / contain no-repeat;
	opacity: 0.05;
	pointer-events: none;
}

@media (max-width: 781px) {
	body.k-seite-kontakt .k-kontakt::before {
		--k-logo-groesse: 110vw;
	}
}

/*
 * Trainerkarten: leichterer Verlauf (Feedback 12.10.2026, "recht starker
 * Overlay"). Der Standard dark-bottom dunkelt bis 70 % der Hoehe ab, mit
 * 35 % Deckkraft noch auf halber Hoehe -- die Portraets wirkten dadurch
 * dunkel. Name, Rolle und Grad stehen im unteren Viertel, dafuer reicht
 * ein Verlauf bis 45 %.
 */
.k-trainer .wp-block-cover__background.has-dark-bottom-gradient-background {
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 45%) !important;
}

/*
 * Banderole hinter Name, Rolle und Grad der Trainerkarten (Feedback
 * 12.10.2026). Seit der Verlauf leichter ist, lag der aufgeklappte Text beim
 * Ueberfahren teils auf weissem Gi. Die Banderole haengt am Namen: Sie
 * beginnt knapp darueber und reicht bis unter die Karte (die Karte schneidet
 * sie ab). Klappt der Text auf, wandert der Name nach oben und die
 * Banderole mit -- sie ist also immer genau so hoch wie der Text.
 * z-index -1 legt sie hinter den Text, aber vor das Bild: Der innere
 * Container des Cover-Blocks bildet den Stapelkontext.
 */
.k-person {
	overflow: hidden;
}

/* Eigener Stapelkontext, damit z-index -1 hinter dem Text bleibt und nicht
   hinter das Foto rutscht. */
.k-person .wp-block-cover__inner-container {
	isolation: isolate;
}

.k-person .wp-block-cover__inner-container > .wp-block-heading {
	position: relative;
}

.k-person .wp-block-cover__inner-container > .wp-block-heading::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -0.75rem;
	left: -16px;
	right: -16px;
	height: 40rem;
	background: var(--wp--preset--color--navy);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.k-person:hover .wp-block-cover__inner-container > .wp-block-heading::before,
.k-person:focus-within .wp-block-cover__inner-container > .wp-block-heading::before {
	transform: scaleX(1);
}

/* Ohne Zeigegeraet steht der Text immer -- dann auch die Banderole. */
@media (hover: none) {
	.k-person .wp-block-cover__inner-container > .wp-block-heading::before {
		transform: none;
	}
}

/* --- SV-Workshop fuer Einrichtungen (14.10.2026) ------------------------- */

/*
 * Links Text und Merkmale, rechts das Anfrageformular. Der Haken traegt die
 * Farbe der Selbstverteidigung statt des Blaus der Tarifkarten.
 */
.k-workshop .k-tarif__haken,
.k-workshop .k-tarif__haken.wp-block-image {
	background: var(--wp--preset--color--defense) !important;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.3rem;
	box-sizing: border-box;
}

.k-workshop__mail a {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.k-workshop .k-formularkarte__karte::before {
	background: rgba(113, 98, 231, 0.07);
}

/* "auf Anfrage" in der aufgeklappten Handy-Liste: Dort steht der Preis
   rechts neben dem Namen, ohne Knopfreihe, die auf einer Linie bleiben
   muesste. Die feste Hoehe faellt weg (sonst ragte das Etikett in die
   Zeile darueber), Etikett und Wort werden kleiner wie "je Monat". */
.k-tarif.k-klapp .k-tarif__preis--text {
	height: auto;
}

.k-tarif.k-klapp .k-tarif__preis-etikett {
	font-size: 0.55rem;
	letter-spacing: 0.15em;
	margin-bottom: 0.2rem;
}

.k-tarif.k-klapp .k-tarif__preis-wort {
	font-size: 1.05rem;
}

/*
 * FAQ: Beim Zuklappen bleibt [open] bis zum Ende der Animation stehen
 * (assets/js/faq.js). Das Plus soll sich aber sofort zurueckdrehen.
 */
.k-faq__item[open].k-schliesst summary::after {
	transform: none;
	background: transparent;
	border-color: rgba(16, 26, 45, 0.15);
	color: var(--wp--preset--color--navy);
}

/*
 * FAQ: Das offene Kaestchen nimmt die Farbe der Sparte an statt immer Blau
 * (Johannes, 17.10.2026). Die Akzentklasse sitzt am FAQ-Block, Karate und
 * Startseite bleiben blau.
 */
.k-accent-orange .k-faq__item[open] summary::after {
	background: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
}

.k-accent-defense .k-faq__item[open] summary::after {
	background: var(--wp--preset--color--defense);
	border-color: var(--wp--preset--color--defense);
}

.k-accent-health .k-faq__item[open] summary::after {
	background: var(--wp--preset--color--health);
	border-color: var(--wp--preset--color--health);
}

.k-accent-orange .k-faq__item[open].k-schliesst summary::after,
.k-accent-defense .k-faq__item[open].k-schliesst summary::after,
.k-accent-health .k-faq__item[open].k-schliesst summary::after {
	background: transparent;
	border-color: rgba(16, 26, 45, 0.15);
}

/*
 * Wegbeschreibung als Bildergalerie (Nelson-Mandela-Halle, Johannes
 * 17.10.2026): ein Foto je Ansicht, darunter der Satz zum Bild. Die Reihe
 * rastet ein, Wischen kommt vom Browser; assets/js/wegbeschreibung.js
 * setzt Pfeile, Punkte und Zaehler darunter. Die Breite richtet sich auch
 * nach der Hoehe, damit Bild, Text und Leiste auf jeden Bildschirm passen.
 */
.k-weg__fenster--galerie {
	/* Bildbreite: hoechstens 22rem und nie hoeher als gut die Haelfte des
	   Bildschirms, damit das Fenster mit Rand rundherum mittig steht. */
	--k-galerie-breite: min(22rem, calc(100vw - 4rem), calc(52dvh * 0.75));
	width: fit-content;
	max-width: calc(100vw - 2rem);
	margin: auto;
}

.k-weg__kasten--galerie {
	padding: var(--wp--preset--spacing--50);
	max-height: none;
	overflow: visible;
}

.k-weg__galerie {
	display: flex;
	width: var(--k-galerie-breite);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.k-weg__galerie::-webkit-scrollbar {
	display: none;
}

.k-weg__galerie:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 4px;
}

.k-weg__galerie .wp-block-image {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.k-weg__galerie img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--wp--preset--color--navy);
}

/* Die Halle von innen ist quer und wird ganz gezeigt, auf Navy. */
.k-weg__galerie img.k-weg__quer {
	object-fit: contain;
}

.k-weg__galerie figcaption {
	margin: var(--wp--preset--spacing--30) 0 0;
	min-height: 4.5em;
	color: var(--wp--preset--color--gray-600);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

.k-weg__leiste {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
}

.k-weg__pfeil {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.k-weg__pfeil:hover:not(:disabled),
.k-weg__pfeil:focus-visible {
	background: var(--wp--preset--color--blue);
}

.k-weg__pfeil:disabled {
	opacity: 0.25;
	cursor: default;
}

.k-weg__punkte {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

.k-weg__punkt {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--gray-200);
	cursor: pointer;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.k-weg__punkt.ist-aktiv {
	width: 1.25rem;
	background: var(--wp--preset--color--blue);
}

.k-weg__kasten p.k-weg__zaehler {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--gray-600);
	white-space: nowrap;
}

@media (max-width: 781px) {
	.k-weg__kasten--galerie {
		padding: var(--wp--preset--spacing--40);
	}

	.k-weg__fenster--galerie {
		--k-galerie-breite: min(22rem, calc(100vw - 4rem), calc(58dvh * 0.75));
	}
}

/* ===========================================================================
   Antrag als Vollbild, eine Frage je Screen (Entwurf B, 18.10.2026)

   Vorlage templates/page-anmeldung.html, Muster patterns/antrag-vollbild.php,
   Skript assets/js/antrag-schritte.js. Oben die Fortschrittsleiste,
   unten die dunkle Vereinsleiste, dazwischen viel Weiss und eine Frage.
   =========================================================================== */
body:has(.k-vollantrag) {
	background: var(--wp--preset--color--white);
}

.k-vollantrag {
	--k-va-akzent: var(--wp--preset--color--blue);
	--k-va-hell: #EAF3FF;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--gray-900);
	font-family: var(--wp--preset--font-family--inter);
}

.k-vollantrag__kopf {
	position: sticky;
	top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 0px));
	z-index: 5;
	background: var(--wp--preset--color--white);
}

.k-fortschritt {
	height: 10px;
	background: var(--wp--preset--color--gray-200);
}

.k-fortschritt__band {
	width: 0;
	height: 100%;
	background: var(--k-va-akzent);
	border-radius: 0 999px 999px 0;
	transition: width 0.5s ease, background-color 0.4s ease;
}

/* Akzent nach gewaehltem Angebot (Klasse setzt antrag-schritte.js) */
.k-vollantrag--kids {
	--k-va-akzent: var(--wp--preset--color--orange);
	--k-va-hell: #FFF1E2;
}

.k-vollantrag--gesund {
	--k-va-akzent: var(--wp--preset--color--health);
	--k-va-hell: #F1FAE3;
}

/* Familie im Antrag: Name und Geburtsdatum je Person nebeneinander. Float
   statt inline-block, damit display: none beim Ausblenden greift. */
@media (min-width: 480px) {
	.k-vollantrag .fluentform .ff-el-group.k-feld--name,
	.k-vollantrag .fluentform .ff-el-group.k-feld--datum {
		float: left;
		margin-bottom: 1rem;
	}

	.k-vollantrag .fluentform .ff-el-group.k-feld--name {
		clear: left;
		width: calc(64% - 1rem);
		margin-right: 1rem;
	}

	.k-vollantrag .fluentform .ff-el-group.k-feld--datum {
		width: 36%;
	}

	.k-vollantrag .fluentform .k-screen__nav,
	.k-vollantrag .fluentform .ff-el-group:not(.k-feld--name):not(.k-feld--datum) {
		clear: both;
	}
}

/* Kursanmeldung: Selbstverteidigung, fest violett */
.k-vollantrag--sv {
	--k-va-akzent: var(--wp--preset--color--defense);
	--k-va-hell: #EFEDFC;
}

/* Bei Kids steht der Tiger gross rechts neben dem Formular, am Guertel von
   der Vereinsleiste abgeschnitten (Bild tiger-klemmbrett, 18.10.2026). Er
   sitzt in der Leiste und waechst von ihrer Oberkante nach oben. Breite =
   der freie Platz rechts der 560-px-Spalte, hoechstens 60 % der Hoehe. */
.k-vollantrag__tiger {
	position: absolute;
	right: clamp(0.5rem, 3vw, 4rem);
	bottom: calc(100% + 4px); /* ueber der farbigen Kante der Leiste */
	width: min(calc((100vw - var(--k-spalte, 560px)) / 2 - 3rem), 60vh, 620px);
	height: auto;
	mix-blend-mode: multiply;
	filter: brightness(1.02); /* Bildgrund 254 auf reines Weiss heben */
	pointer-events: none;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.4s ease, transform 0.5s ease;
}

.k-vollantrag--kids .k-vollantrag__tiger {
	opacity: 1;
	transform: none;
}

/* Breite Kachelansicht (Angebotswahl) braucht den Platz selbst */
.k-vollantrag--breit .k-vollantrag__tiger {
	opacity: 0;
}

/* Unter 1100 px bliebe neben der Spalte kein Platz mehr */
@media (max-width: 1100px) {
	.k-vollantrag__tiger {
		display: none;
	}
}

.k-vollantrag__leiste {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 2rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag__zurueck {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.k-vollantrag__zurueck:hover,
.k-vollantrag__zurueck:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-vollantrag__grad {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.k-vollantrag__buehne {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem 1.5rem 4rem;
}

.k-vollantrag .fluentform,
.k-vollantrag .k-vollantrag__datenschutz,
.k-vollantrag .k-vollantrag__papier {
	width: 100%;
	max-width: 560px;
}

.k-vollantrag .k-vollantrag__datenschutz,
.k-vollantrag .k-vollantrag__papier {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .k-vollantrag__datenschutz a,
.k-vollantrag .k-vollantrag__papier a {
	color: var(--wp--preset--color--navy);
}

/* Datenschutzsatz gehoert zum Absenden, der Papier-Link zum Anfang. Beides
   faellt erst weg, wenn das Skript laeuft. */
.k-vollantrag:has(.k-screens):not(.k-vollantrag--letzter) .k-vollantrag__datenschutz,
.k-vollantrag:has(.k-screens):not(.k-vollantrag--start) .k-vollantrag__papier,
.k-vollantrag--fertig .k-vollantrag__datenschutz,
.k-vollantrag--fertig .k-vollantrag__papier {
	display: none;
}

/* --- Die Vereinsleiste unten ---------------------------------------------- */
.k-vollantrag__fuss {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	padding: 1.1rem 2rem;
	border-top: 4px solid var(--k-va-akzent);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.k-vollantrag__marke {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	flex-shrink: 0;
}

.k-vollantrag__marke img {
	display: block;
	width: 44px;
	height: 44px;
}

.k-vollantrag__marke span {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1.3;
}

.k-vollantrag__info {
	margin: 0;
	padding-left: 1.75rem;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
}

.k-vollantrag__info strong {
	margin-right: 0.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 800;
	color: var(--wp--preset--color--white);
}

/* --- Screens --------------------------------------------------------------- */
.k-vollantrag .k-screens .k-screen__aus,
.k-vollantrag .k-antrag__auto {
	display: none !important;
}

.k-vollantrag .k-screens:not(.k-screens--letzter) .ff_submit_btn_wrapper {
	display: none !important;
}

.k-vollantrag .k-screen__frage {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-transform: none;
	text-wrap: balance;
	color: var(--wp--preset--color--navy);
}

.k-vollantrag .k-screen__hilfe {
	margin: 0 0 2rem;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .k-screen__kopf {
	margin-bottom: 1.25rem;
}

/* Beschriftung ueber Textfeldern: klein und ruhig */
.k-vollantrag .fluentform .ff-el-input--label label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .fluentform .ff-el-is-required.asterisk-right label::after {
	display: none;
}

/* Eingaben nur mit Unterstrich, wie auf Papier */
.k-vollantrag .fluentform .ff-el-form-control {
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--gray-200);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.375rem;
	color: var(--wp--preset--color--gray-900);
	transition: border-color 0.2s ease;
}

.k-vollantrag .fluentform textarea.ff-el-form-control {
	font-size: 1.125rem;
	min-height: 7.5rem;
}

.k-vollantrag .fluentform .ff-el-form-control:focus {
	border-bottom-color: var(--k-va-akzent);
	outline: none;
	box-shadow: none;
}

.k-vollantrag .fluentform .ff-el-form-control::placeholder {
	color: #C4C9D1;
}

.k-vollantrag .fluentform .ff-el-group {
	margin-bottom: 1.75rem;
}

/* Die Antwortgruppe einer Auswahlfrage: die Frage steht schon oben */
.k-vollantrag .fluentform .k-screen__wahl > .ff-el-input--label {
	display: none !important;
}

/* Auswahl als Zeilen: ein Klick waehlt und geht weiter */
.k-vollantrag .fluentform .ff-el-form-check {
	margin: 0 0 0.625rem;
}

.k-vollantrag .fluentform .ff-el-form-check-label {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 1.1rem 1.25rem;
	border: 1.5px solid var(--wp--preset--color--gray-200);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.k-vollantrag .fluentform .ff-el-form-check-label:hover {
	border-color: #9CA3AF;
}

.k-vollantrag .fluentform .ff-el-form-check-label:has(input:checked) {
	border-color: var(--wp--preset--color--navy);
	background: var(--k-va-hell);
}

.k-vollantrag .fluentform .ff-el-form-check-input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--navy);
}

.k-vollantrag .fluentform .k-angebot {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 1rem;
	width: 100%;
}

.k-vollantrag .fluentform .k-angebot__name {
	font-weight: 600;
}

.k-vollantrag .fluentform .k-angebot__info {
	grid-column: 1;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .fluentform .k-angebot__preis {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-style: normal;
	font-weight: 400;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--gray-600);
	white-space: nowrap;
}

/* Knoepfe */
.k-vollantrag .k-screen__nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 0.75rem;
}

.k-vollantrag .k-screens--letzter .ff_submit_btn_wrapper {
	display: inline-block;
	margin: 0.75rem 1.25rem 0 0;
	vertical-align: middle;
}

.k-vollantrag .k-screens--letzter .k-screen__nav {
	display: inline-flex;
	vertical-align: middle;
}

.k-vollantrag .k-screen__nav [hidden] {
	display: none;
}

.k-vollantrag .k-screen__weiter,
.k-vollantrag .fluentform .ff-btn-submit {
	padding: 0.95rem 1.75rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.k-vollantrag .k-screen__weiter:hover,
.k-vollantrag .fluentform .ff-btn-submit:hover {
	background: #1E2B45;
}

.k-vollantrag .k-screen__zurueck {
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gray-600);
	font-size: 0.9375rem;
	cursor: pointer;
}

.k-vollantrag .k-screen__zurueck:hover {
	color: var(--wp--preset--color--navy);
}

.k-vollantrag :focus-visible {
	outline: 3px solid var(--k-va-akzent);
	outline-offset: 3px;
}

/* Fehler unter dem Feld */
.k-vollantrag .k-antrag__fehler {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #B42318;
}

/* Noch kein Probetraining */
.k-vollantrag .k-antrag__stopp {
	padding: 1.5rem;
	border: 1.5px solid var(--wp--preset--color--gray-200);
	border-radius: 10px;
}

.k-vollantrag .k-antrag__stopp p {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .k-antrag__stopp p:last-child {
	margin: 0;
}

.k-vollantrag .k-antrag__stopp-link {
	display: inline-block;
	padding: 0.95rem 1.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	text-decoration: none;
}

/* Ueberblick vor dem Absenden */
.k-vollantrag .k-ueberblick {
	margin: 0.5rem 0 0;
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

.k-vollantrag .k-ueberblick__zeile {
	display: grid;
	grid-template-columns: 9.5rem 1fr auto;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	font-size: 0.9375rem;
}

.k-vollantrag .k-ueberblick dt {
	color: var(--wp--preset--color--gray-600);
}

.k-vollantrag .k-ueberblick dd {
	margin: 0;
	font-weight: 500;
	white-space: pre-line;
}

.k-vollantrag .k-ueberblick__aendern {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--navy);
	font-size: 0.875rem;
	text-decoration: underline;
	cursor: pointer;
}

.k-vollantrag .k-antrag__zahlung {
	margin: 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--k-va-akzent);
	background: var(--k-va-hell);
	font-size: 0.9375rem;
}

/* Schritte erst nach dem Download zeigen (nur mit Skript, sonst immer) */
.k-vollantrag--js .k-antrag__danke:not(.k-antrag__danke--geladen) .k-antrag__danke-schritte,
.k-vollantrag--js .k-antrag__danke:not(.k-antrag__danke--geladen) .k-antrag__danke-klein {
	display: none;
}

.k-vollantrag .k-antrag__danke--geladen .k-antrag__danke-schritte,
.k-vollantrag .k-antrag__danke--geladen .k-antrag__danke-klein {
	animation: k-einblenden 0.4s ease both;
}

.k-vollantrag .k-antrag__danke .k-antrag__danke-klein {
	margin: 1rem 0 0;
}

@keyframes k-einblenden {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* Viele Antworten in zwei Spalten, dafuer darf der Screen breiter werden */
@media (min-width: 900px) {
	.k-vollantrag--breit .fluentform {
		max-width: 760px;
	}

	.k-vollantrag .k-screen__wahl--raster .ff-el-input--content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.625rem;
	}

	.k-vollantrag .k-screen__wahl--raster .ff-el-form-check {
		display: flex;
		margin: 0;
	}

	.k-vollantrag .k-screen__wahl--raster .ff-el-form-check-label {
		align-items: flex-start;
	}

	.k-vollantrag .k-screen__wahl--raster .ff-el-form-check-input {
		margin-top: 0.15rem;
	}

	/* In der Kachel steht der Preis unter dem Namen, so passen drei Spalten */
	.k-vollantrag .k-screen__wahl--raster .k-angebot {
		grid-template-columns: 1fr;
	}

	.k-vollantrag .k-screen__wahl--raster .k-angebot__preis {
		grid-column: 1;
		grid-row: auto;
		margin-top: 0.25rem;
		font-weight: 600;
		color: var(--wp--preset--color--navy);
	}
}

@media (min-width: 1200px) {
	.k-vollantrag--breit {
		--k-spalte: 1120px;
	}

	.k-vollantrag--breit .fluentform {
		max-width: 1120px;
	}

	.k-vollantrag .k-screen__wahl--raster .ff-el-input--content {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Ueberblick vor dem Absenden in zwei Spalten, sonst waere er hoeher als
   das Fenster */
@media (min-width: 1100px) {
	.k-vollantrag--letzter {
		--k-spalte: 920px;
	}

	.k-vollantrag--letzter .fluentform,
	.k-vollantrag--letzter .k-vollantrag__datenschutz {
		max-width: 920px;
	}

	.k-vollantrag .k-ueberblick {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2.5rem;
	}

	.k-vollantrag .k-ueberblick__zeile {
		grid-template-columns: 7.5rem 1fr auto;
	}
}

/* Kein Scrollen auf dem Desktop (Johannes, 18.10.2026): Die Seite ist genau
   ein Fenster hoch, Kopf und Leiste stehen fest, nur die Buehne in der Mitte
   duerfte notfalls selbst scrollen. Vorher klebten Kopf und Leiste ueber dem
   Inhalt und schnitten ihn beim Scrollen ab. */
@media (min-width: 781px) {
	.k-vollantrag {
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		min-height: 0;
		overflow: hidden;
	}

	.k-vollantrag__kopf,
	.k-vollantrag__fuss {
		position: relative;
		top: auto;
		bottom: auto;
		flex-shrink: 0;
	}

	.k-vollantrag__buehne {
		min-height: 0;
		overflow-y: auto;
		justify-content: safe center;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}

/* Niedrige Fenster (Laptops): alles etwas enger, damit es ohne Scrollen passt */
@media (min-width: 781px) and (max-height: 860px) {
	.k-vollantrag__leiste {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.k-vollantrag .k-screen__frage {
		font-size: clamp(1.5rem, 2.4vw, 2rem);
	}

	.k-vollantrag .fluentform .ff-el-form-check-label {
		padding: 0.8rem 1.1rem;
	}

	.k-vollantrag .fluentform .ff-el-group {
		margin-bottom: 1.25rem;
	}

	.k-vollantrag .k-ueberblick__zeile {
		padding: 0.4rem 0;
	}

	.k-vollantrag .k-screen__frage {
		margin-bottom: 0.5rem;
	}

	.k-vollantrag .k-antrag__zahlung {
		padding: 0.7rem 1rem;
	}

	.k-vollantrag .k-vollantrag__datenschutz {
		margin-top: 0.75rem;
	}

	.k-vollantrag__buehne {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.k-vollantrag__fuss {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
}

/* Sehr niedrige Fenster (kleine Laptops mit Lesezeichenleiste) */
@media (min-width: 781px) and (max-height: 700px) {
	.k-vollantrag__leiste {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.k-vollantrag .k-screen__frage {
		font-size: 1.5rem;
	}

	.k-vollantrag .k-ueberblick__zeile {
		padding: 0.3rem 0;
		font-size: 0.875rem;
	}

	.k-vollantrag .k-antrag__zahlung {
		font-size: 0.875rem;
	}

	.k-vollantrag .k-screen__weiter,
	.k-vollantrag .fluentform .ff-btn-submit {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.k-vollantrag .k-screen__hilfe {
		margin-bottom: 1rem;
	}

	.k-vollantrag .k-screen__kopf {
		margin-bottom: 0.5rem;
	}

	.k-vollantrag .fluentform .ff-el-group.k-feld--name,
	.k-vollantrag .fluentform .ff-el-group.k-feld--datum {
		margin-bottom: 0.6rem;
	}

	.k-vollantrag .k-antrag__haken {
		width: 3.5rem;
		height: 3.5rem;
		margin-bottom: 0.75rem;
		background-size: 1.75rem;
	}

	.k-vollantrag .k-antrag__danke .k-antrag__download {
		margin: 0.25rem 0 1rem;
	}
}

.k-vollantrag .k-antrag__danke h3 {
	text-wrap: balance;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	letter-spacing: -0.015em;
	text-transform: none;
}

/* Haken der Dankeseite in der Farbe des Angebots. Die kleine Zeile darueber
   bleibt bei Orange und Gruen dunkel, hell waere sie auf Weiss kaum lesbar. */
.k-vollantrag .k-antrag__haken {
	background-color: var(--k-va-akzent);
	box-shadow: 0 0 0 0.5rem var(--k-va-hell);
}

:is(.k-vollantrag--kids, .k-vollantrag--gesund) .k-antrag__danke-zeile {
	color: var(--wp--preset--color--navy) !important;
}

.k-vollantrag .k-antrag__zahlung a {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.k-fortschritt__band,
	.k-vollantrag__tiger {
		transition: none;
	}
}

/* --- Handy ----------------------------------------------------------------- */
@media (max-width: 780px) {
	/* Auf dem Handy kleben Kopf und Leiste nicht. Bei offener Tastatur
	   verdeckten sie sonst die Frage, der Platz ist dort zu knapp. */
	.k-vollantrag__kopf,
	.k-vollantrag__fuss {
		position: relative;
		top: auto;
		bottom: auto;
	}

	.k-vollantrag__leiste {
		padding: 0.9rem 1.25rem;
	}

	.k-vollantrag__buehne {
		justify-content: flex-start;
		padding: 1rem 1.25rem 3rem;
	}

	.k-vollantrag__fuss {
		gap: 0.875rem;
		padding: 0.75rem 1.25rem;
	}

	.k-vollantrag__marke span {
		display: none;
	}

	.k-vollantrag__marke img {
		width: 34px;
		height: 34px;
	}

	.k-vollantrag__info {
		padding-left: 0.875rem;
		font-size: 0.8125rem;
	}

	.k-vollantrag__info strong {
		display: block;
		margin: 0;
		font-size: 0.875rem;
	}

	.k-vollantrag .fluentform .ff-el-form-control {
		font-size: 1.25rem;
	}

	.k-vollantrag .k-ueberblick__zeile {
		grid-template-columns: 1fr auto;
	}

	.k-vollantrag .k-ueberblick dt {
		grid-column: 1 / -1;
		font-size: 0.8125rem;
	}
}

/* ===========================================================================
   Abnahme 25.10.2026 (Fix-Paket, Freigabe Johannes)
   Farben bleiben bewusst unangetastet (Entscheidung 25.10.2026).
   =========================================================================== */

/*
 * Fliesstext am Handy mindestens 16 px. Die Absaetze in Karten, FAQ und
 * Schritten standen auf "small" (14 px), die Rezensionen ebenso. Etiketten
 * (x-small) bleiben klein, sie sind keine Lesetexte.
 */
@media (max-width: 781px) {
	.wp-block-post-content p.has-small-font-size,
	.wp-block-post-content li.has-small-font-size,
	.wp-block-post-content .k-review__text,
	.wp-block-post-content .k-kids-tipp__text,
	.wp-block-post-content .k-kids-video__hinweis {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/*
 * Ueberschriften am Handy nicht mehr automatisch trennen. hyphens:auto
 * trennte auch Woerter, die in die naechste Zeile gepasst haetten
 * ("UN-SERE", "IMPRES-SUM"). overflow-wrap bleibt als Notbremse fuer
 * Woerter, die breiter als die Zeile sind. Bewusste Trennstellen setzt
 * inc/trennung.php mit &shy;.
 */
@media (max-width: 480px) {
	h1, h2, h3 {
		hyphens: manual;
	}
}

/*
 * Probetraining-Knopf am Handy und Tablet neben dem Menue (Entscheidung
 * 25.10.2026). Bisher stand unter 1100 px nur das Menue-Zeichen im Kopf,
 * der wichtigste Weg lag im aufgeklappten Menue. Symbole und
 * "Mitglied werden" bleiben dort weg.
 */
@media (max-width: 1099px) {
	.k-nav .k-nav__aktionen {
		display: flex !important;
		flex: 0 0 auto !important;
		margin-left: auto;
	}

	.k-nav .k-nav__aktionen .k-nav__social,
	.k-nav .k-nav__aktionen .k-nav__zweitcta {
		display: none !important;
	}

	.k-nav .k-nav__aktionen .k-nav__cta {
		display: flex !important;
	}

	/* Spezifischer als die Handy-Regel fuer alle Knoepfe (volle Breite, 0.95rem 2.25rem) */
	.k-nav .k-nav__cta .wp-block-button:not(.k-knopf--text) > .wp-block-button__link {
		width: auto !important;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0.6rem 0.9rem !important;
		font-size: 0.7rem !important;
		white-space: nowrap;
	}
}

/* Solange das Menue-Zeichen steht (unter 900 px), sitzt der Knopf links davon. */
@media (max-width: 899px) {
	.k-nav .k-nav__aktionen {
		order: 2;
	}

	.k-nav .k-nav__menu {
		order: 3;
		flex: 0 0 auto !important;
		margin-left: 0.75rem !important;
	}
}

/*
 * Tastaturfokus sichtbar machen. Formularfelder zeigten beim Fokus nur einen
 * hellblauen Rand (2,1:1 auf Weiss), der Absendeknopf und das Suchfeld gar
 * nichts. Ein Navy-Rahmen ausserhalb des Feldes, nur bei Tastaturbedienung.
 */
.k-kontakt .fluentform input:focus-visible,
.k-kontakt .fluentform select:focus-visible,
.k-kontakt .fluentform textarea:focus-visible,
.k-vollantrag .fluentform .ff-el-form-control:focus-visible,
.fluentform .ff-btn-submit:focus-visible,
.wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy) !important;
	outline-offset: 2px !important;
}

.k-zeiten .wp-block-buttons a:focus-visible,
.has-navy-background-color .fluentform .ff-btn-submit:focus-visible {
	outline-color: var(--wp--preset--color--white) !important;
}

/*
 * Tippflaechen mindestens 44 px hoch. Disziplin-Links in den Tarifkoepfen,
 * Seitenzahlen und Beitragskategorien waren 9 bis 15 px hoch.
 */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.k-beitrag__meta .wp-block-post-terms a {
	display: inline-block;
	padding-block: 0.75rem;
}

@media (max-width: 781px) {
	.k-tarif__kopf h3 a,
	.k-weg__oeffner {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/*
 * Handy quer (844 x 390): Der Sparten-Kopf hat volle Fensterhoehe, der Text
 * lag oben unter der festen Leiste und lief unten ins Foto. Hier bekommt er
 * seine eigene Hoehe und oben Platz fuer die Leiste.
 */
@media (orientation: landscape) and (max-height: 500px) {
	.wp-block-cover.k-offer-hero {
		min-height: 0 !important;
		padding-top: 6.5rem !important;
		padding-bottom: 2.5rem !important;
	}
}