/*!
 * Fahrschule Kliese – Core: Design-CSS
 *
 * Wird nach dem YOOtheme-Stylesheet geladen. Wo UIkit sehr spezifische Kontext-Selektoren nutzt
 * (z. B. „.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary“), erhöht das Präfix
 * „body:not(#kl)“ die Spezifität auf ID-Niveau – so ist kaum !important nötig.
 *
 * Inhalt:
 *  0. Tokens
 *  1. Basis: Typografie, Links, Fokus
 *  2. UIkit/YOOtheme: Buttons, Sektionen, Karten, Hinweise, Formularfelder
 *  3. Kopfbereich: Ampelstreifen
 *  4. Komponenten (kl-…)
 *  5. Formulare
 *  6. Termine, Gebühren, Preise, Status-Chip
 *  7. Mobile Aktionsleiste
 *  8. Reduzierte Bewegung, Druck
 */

/* ============================================================ 0. Tokens */

:root {
	--kl-green: #15803D;
	--kl-green-dark: #166534;
	--kl-green-light: #E9F6EE;
	--kl-yellow: #FFC20E;
	--kl-yellow-light: #FFF3C4;
	--kl-red: #C62828;
	--kl-red-light: #FCE8E6;
	--kl-ink: #16181D;
	--kl-ink-muted: #4B5563;
	--kl-bg-muted: #F4F5F2;
	--kl-border: #8A9099;
	--kl-dark: #111418;
	--kl-line: #E3E5E0;
	--kl-radius: 12px;
	--kl-radius-btn: 10px;
	--kl-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Fett und leicht kondensiert, ohne Schrift-Download: Barlow (falls später lokal eingebunden),
	   Bahnschrift (Windows, DIN-artig), Avenir Next Condensed (Apple), Roboto Condensed (Android). */
	--kl-font-head: "Barlow Semi Condensed", "Bahnschrift SemiCondensed", "Bahnschrift", "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--kl-header-h: 64px;
	--kl-ampel: linear-gradient(90deg, var(--kl-red) 0 33.333%, var(--kl-yellow) 33.333% 66.666%, var(--kl-green) 66.666%);
	--kl-check-gruen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--kl-check-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ============================================================ 1. Basis */

html {
	font-family: var(--kl-font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--kl-ink);
	background: #fff;
}

@media (min-width: 960px) {
	html {
		font-size: 18px;
	}
}

/* Überschriften-Schrift (hohe Spezifität, aber ohne Farbe – die Invertierung dunkler Sektionen bleibt erhalten). */
body:not(#kl) :is(h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge,
.uk-card-title, .uk-accordion-title, .uk-article-title, .uk-modal-title, .uk-font-primary, .tm-section-title) {
	font-family: var(--kl-font-head);
	font-weight: 700;
	font-stretch: 87.5%;
	letter-spacing: -0.005em;
	text-transform: none;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge,
.uk-card-title, .uk-accordion-title {
	color: var(--kl-ink);
}

/* Fließtext-Bausteine des Themes in der System-Schrift (keine Webfont-Downloads für Inhalte). */
body:not(#kl) :is(.uk-text-lead, blockquote, .uk-text-meta, .uk-article-meta, .uk-description-list > dt, .uk-form-label, .uk-badge, .uk-label, .uk-card-badge, .uk-font-default, .uk-font-secondary) {
	font-family: var(--kl-font);
	letter-spacing: normal;
}

body:not(#kl) :is(.uk-text-lead, blockquote) {
	font-weight: 400;
	font-style: normal;
}

h1, .uk-h1 { font-size: 32px; line-height: 1.15; }
h2, .uk-h2 { font-size: 26px; line-height: 1.2; }
h3, .uk-h3 { font-size: 20px; line-height: 1.3; }
h4, .uk-h4 { font-size: 18px; line-height: 1.35; }
h5, .uk-h5, h6, .uk-h6 { font-size: 17px; line-height: 1.4; }
.uk-heading-small { font-size: 34px; line-height: 1.12; }
.uk-heading-medium { font-size: 36px; line-height: 1.1; }
.uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge { font-size: 40px; line-height: 1.08; }
body:not(#kl) .uk-accordion-title { font-size: 19px; line-height: 1.35; }

@media (min-width: 960px) {
	h1, .uk-h1 { font-size: 52px; line-height: 1.1; }
	h2, .uk-h2 { font-size: 38px; line-height: 1.18; }
	h3, .uk-h3 { font-size: 24px; line-height: 1.28; }
	h4, .uk-h4 { font-size: 20px; }
	.uk-heading-small { font-size: 54px; }
	.uk-heading-medium { font-size: 60px; }
	.uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge { font-size: 68px; }
	body:not(#kl) .uk-accordion-title { font-size: 21px; }
}

.uk-text-lead {
	font-size: 20px;
	line-height: 1.5;
	color: var(--kl-ink);
}

@media (min-width: 960px) {
	.uk-text-lead {
		font-size: 22px;
	}
}

.uk-text-meta,
.uk-text-muted {
	color: var(--kl-ink-muted);
}

.uk-text-meta,
.uk-text-small {
	font-size: 15px;
	line-height: 1.5;
}

/* Links: Ink, Hover grün-dunkel; im Fließtext immer unterstrichen (nie nur Farbe). */
a,
.uk-link {
	color: var(--kl-ink);
}

a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
	color: var(--kl-green-dark);
}

:where(#tm-main, .tm-footer) :where(p, td, dd, figcaption, .uk-list > li, ul:not([class]) > li, ol:not([class]) > li) a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(#tm-main, .tm-footer) :where(p, td, dd, figcaption, .uk-list > li, ul:not([class]) > li, ol:not([class]) > li) a:not([class]):hover {
	text-decoration-thickness: 2px;
}

/* Sichtbarer Fokus (auf Dunkel gelb). */
body:not(#kl) :focus-visible {
	outline: 3px solid var(--kl-ink);
	outline-offset: 2px;
	box-shadow: none;
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-secondary, .tm-toolbar, .kl-dark) :focus-visible {
	outline-color: var(--kl-yellow);
}

/* Sprungziele nicht unter der Sticky-Kopfzeile verstecken. */
[id] {
	scroll-margin-top: calc(var(--kl-header-h, 64px) + 16px);
}

/* ============================================================ 2. UIkit / YOOtheme */

/* ---------- Buttons: Radius 10 px, mind. 48 px, 17 px fett, keine Versalien */

body:not(#kl) .uk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 22px;
	border: 2px solid transparent;
	border-radius: var(--kl-radius-btn);
	font-family: var(--kl-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body:not(#kl) .uk-button-small {
	padding: 8px 16px;
	font-size: 16px;
}

body:not(#kl) .uk-button-large {
	min-height: 56px;
	padding: 12px 28px;
	font-size: 18px;
}

body:not(#kl) .uk-button-primary {
	background-color: var(--kl-green);
	border-color: var(--kl-green);
	color: #fff;
}

body:not(#kl) .uk-button-primary:hover,
body:not(#kl) .uk-button-primary:focus-visible {
	background-color: var(--kl-green-dark);
	border-color: var(--kl-green-dark);
	color: #fff;
}

body:not(#kl) .uk-button-primary:active,
body:not(#kl) .uk-button-primary.uk-active {
	background-color: #14532D;
	border-color: #14532D;
	color: #fff;
}

/* Sekundär: weiß mit 2 px Ink-Rahmen. */
body:not(#kl) :is(.uk-button-default, .uk-button-secondary) {
	background-color: #fff;
	border-color: var(--kl-ink);
	color: var(--kl-ink);
}

body:not(#kl) :is(.uk-button-default, .uk-button-secondary):hover,
body:not(#kl) :is(.uk-button-default, .uk-button-secondary):focus-visible {
	background-color: var(--kl-bg-muted);
	border-color: var(--kl-ink);
	color: var(--kl-ink);
}

body:not(#kl) :is(.uk-button-default, .uk-button-secondary):active,
body:not(#kl) :is(.uk-button-default, .uk-button-secondary).uk-active {
	background-color: var(--kl-line);
	border-color: var(--kl-ink);
	color: var(--kl-ink);
}

/* Auf Dunkel: weißer Rahmen. */
body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-secondary, .kl-dark) :is(.uk-button-default, .uk-button-secondary) {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-secondary, .kl-dark) :is(.uk-button-default, .uk-button-secondary):hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* Text-Buttons: unterstrichen. */
body:not(#kl) :is(.uk-button-text, .uk-button-link) {
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--kl-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.22em;
}

body:not(#kl) :is(.uk-button-text, .uk-button-link):hover {
	color: var(--kl-green-dark);
}

body:not(#kl) .uk-button-text::before,
body:not(#kl) .uk-button-text::after {
	content: none;
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) :is(.uk-button-text, .uk-button-link) {
	color: #fff;
}

/* Ink-Button (Formular-Buttons im CTA-Band, z. B. „Rückruf anfordern“). */
body:not(#kl) .kl-button-ink {
	background-color: var(--kl-ink);
	border-color: var(--kl-ink);
	color: #fff;
}

body:not(#kl) .kl-button-ink:hover,
body:not(#kl) .kl-button-ink:focus-visible {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) .kl-button-ink {
	background-color: #fff;
	border-color: #fff;
	color: var(--kl-ink);
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) .kl-button-ink:hover {
	background-color: var(--kl-green-light);
	border-color: var(--kl-green-light);
	color: var(--kl-ink);
}

body:not(#kl) .uk-button:disabled,
body:not(#kl) .uk-button[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}

/* Weiße Karten innerhalb dunkler Sektionen wieder hell darstellen. */
body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) :is(.kl-cta-card, .uk-card-default, .kl-compare__item) :is(.uk-button-default, .uk-button-secondary) {
	background-color: #fff;
	border-color: var(--kl-ink);
	color: var(--kl-ink);
}

body:not(#kl) :is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) :is(.kl-cta-card, .uk-card-default, .kl-compare__item) .kl-button-ink {
	background-color: var(--kl-ink);
	border-color: var(--kl-ink);
	color: #fff;
}

/* ---------- Sektionen */

body:not(#kl) .uk-section-muted {
	background-color: var(--kl-bg-muted);
}

body:not(#kl) .uk-section-secondary {
	background-color: var(--kl-dark);
}

body:not(#kl) .uk-section-secondary:not(.uk-preserve-color) {
	color: rgba(255, 255, 255, 0.86);
}

/* Primary = helles Grün mit DUNKLEM Text (UIkit würde weiß invertieren). */
body:not(#kl) .uk-section-primary {
	--uk-inverse: dark;
	background-color: var(--kl-green-light);
	color: var(--kl-ink);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) {
	color: var(--kl-ink);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge, .uk-card-title, .uk-text-lead, .uk-text-emphasis, em, strong, blockquote, .uk-accordion-title) {
	color: var(--kl-ink);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(a, .uk-link):not(.uk-button) {
	color: var(--kl-ink);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(a, .uk-link):not(.uk-button):hover {
	color: var(--kl-green-dark);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(.uk-text-muted, .uk-text-meta) {
	color: var(--kl-ink-muted);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(.uk-list-divider > :nth-child(n+2), .uk-hr, hr) {
	border-color: rgba(22, 24, 29, 0.15);
}

body:not(#kl) .uk-section-primary:not(.uk-preserve-color) :is(.uk-list-bullet > ::before, .uk-icon-link, .uk-accordion-title::before) {
	color: var(--kl-ink);
}

/* ---------- Karten */

body:not(#kl) .uk-card-default {
	background-color: #fff;
	color: var(--kl-ink);
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
	box-shadow: none;
}

body:not(#kl) .uk-card-default .uk-card-title {
	color: var(--kl-ink);
}

body:not(#kl) .uk-card-default.uk-card-hover:hover {
	border-color: var(--kl-green);
	box-shadow: 0 0 0 1px var(--kl-green);
}

body:not(#kl) .uk-card-default > .uk-card-media-top,
body:not(#kl) .uk-card-default > .uk-card-media-top img {
	border-radius: var(--kl-radius) var(--kl-radius) 0 0;
}

/* ---------- Hinweise (Alert-Element) */

body:not(#kl) .uk-alert {
	border-radius: var(--kl-radius);
	color: var(--kl-ink);
	padding: 16px 20px;
}

body:not(#kl) .uk-alert-primary,
body:not(#kl) .uk-alert-success {
	background-color: var(--kl-green-light);
	color: var(--kl-ink);
}

body:not(#kl) .uk-alert-warning {
	background-color: var(--kl-yellow-light);
	color: var(--kl-ink);
}

body:not(#kl) .uk-alert-danger {
	background-color: var(--kl-red-light);
	color: var(--kl-ink);
}

/* ---------- Formularfelder (allgemein): 48 px / 17 px */

.uk-input,
.uk-select,
.uk-textarea {
	font-size: 17px;
	color: var(--kl-ink);
	background-color: #fff;
	border: 1px solid var(--kl-border);
	border-radius: 8px;
}

.uk-input,
.uk-select:not([multiple]):not([size]) {
	height: 48px;
	padding: 0 14px;
}

.uk-textarea {
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.5;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
	border-color: var(--kl-ink);
	outline: 3px solid var(--kl-ink);
	outline-offset: 1px;
}

.uk-input::placeholder,
.uk-textarea::placeholder {
	color: #6B7280;
	opacity: 1;
}

input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
select,
textarea {
	font-size: 17px;
	min-height: 48px;
}

.uk-radio,
.uk-checkbox {
	width: 22px;
	height: 22px;
	border: 2px solid var(--kl-border);
}

.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
	background-color: var(--kl-ink);
	border-color: var(--kl-ink);
}

/* ---------- Reiter/Pills (z. B. Kontakt-Formulare) */

body:not(#kl) .kl-tabs {
	gap: 8px;
	margin-left: 0;
}

body:not(#kl) .kl-tabs > * {
	padding-left: 0;
}

body:not(#kl) .kl-tabs > * > a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 20px;
	border: 2px solid var(--kl-ink);
	border-radius: 999px;
	background: #fff;
	color: var(--kl-ink);
	font-family: var(--kl-font);
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

body:not(#kl) .kl-tabs > .uk-active > a {
	background: var(--kl-ink);
	color: #fff;
}

/* ============================================================ 3. Kopfbereich: Ampelstreifen */

/* Am oberen Rand der (sticky) Navigationsleiste – bleibt beim Scrollen sichtbar. */
.tm-header > [uk-sticky]::before,
.tm-header-mobile > [uk-sticky]::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--kl-ampel);
}

/* Falls die Leiste nicht sticky ist: am Header selbst. */
.tm-header:not(:has(> [uk-sticky]))::before,
.tm-header-mobile:not(:has(> [uk-sticky]))::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--kl-ampel);
}

/* ============================================================ 4. Komponenten */

/* Einheitliches Box-Modell (Mindesthöhen inkl. Innenabstand). */
[class^="kl-"],
[class*=" kl-"],
.kl-tabs > * > a,
.kl-subnav > a {
	box-sizing: border-box;
}

/* ---------- Eyebrow mit drei Ampelpunkten */

.kl-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-family: var(--kl-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: inherit;
}

.kl-eyebrow::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 24px;
	border-radius: 50%;
	background: var(--kl-red);
	box-shadow: 12px 0 0 var(--kl-yellow), 24px 0 0 var(--kl-green);
}

/* ---------- H1 mit kleinerer zweiter Zeile */

.kl-h1-sub {
	display: block;
	margin-top: 0.2em;
	font-size: 0.58em;
	line-height: 1.25;
}

/* ---------- Badge */

.kl-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--kl-yellow);
	color: var(--kl-ink);
	font-family: var(--kl-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
}

.kl-badge--green {
	background: var(--kl-green);
	color: #fff;
}

/* ---------- Hinweis-Boxen */

.kl-hint,
body:not(#kl) .uk-alert.kl-hint {
	padding: 16px 20px;
	border-radius: var(--kl-radius);
	background: var(--kl-yellow-light);
	color: var(--kl-ink);
}

.kl-warn,
body:not(#kl) .uk-alert.kl-warn {
	padding: 16px 20px;
	border-left: 6px solid var(--kl-red);
	border-radius: 0 var(--kl-radius) var(--kl-radius) 0;
	background: var(--kl-red-light);
	color: var(--kl-ink);
}

.kl-eltern {
	padding: 24px;
	border-left: 6px solid var(--kl-yellow);
	border-radius: 0 var(--kl-radius) var(--kl-radius) 0;
	background: var(--kl-bg-muted);
	color: var(--kl-ink);
}

.kl-eltern__label {
	display: inline-block;
	margin: 0 0 10px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--kl-yellow);
	color: var(--kl-ink);
	font-family: var(--kl-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.kl-hint > :first-child,
.kl-warn > :first-child,
.kl-eltern > :first-child {
	margin-top: 0;
}

.kl-hint > :last-child,
.kl-warn > :last-child,
.kl-eltern > :last-child {
	margin-bottom: 0;
}

/* Boxen behalten dunklen Text – auch in dunklen Sektionen. */
body:not(#kl) :is(.kl-hint, .kl-warn, .kl-eltern, .kl-contactbox, .kl-cta-card, .kl-costs__item, .kl-compare__item, .kl-card, .kl-success, .kl-errors) :is(h1, h2, h3, h4, h5, h6, p, li, strong, em, dt, dd) {
	color: var(--kl-ink);
}

body:not(#kl) :is(.kl-hint, .kl-warn, .kl-eltern, .kl-contactbox, .kl-cta-card, .kl-costs__item, .kl-compare__item, .kl-success, .kl-errors) a:not(.uk-button) {
	color: var(--kl-ink);
	text-decoration: underline;
}

body:not(#kl) :is(.kl-hint, .kl-warn, .kl-eltern, .kl-contactbox, .kl-cta-card, .kl-costs__item, .kl-compare__item, .kl-success, .kl-errors) a:not(.uk-button):hover {
	color: var(--kl-green-dark);
}

/* ---------- Kontakt-Box (G5) und CTA-Karte (G1) */

.kl-contactbox {
	padding: 20px 24px;
	border-radius: var(--kl-radius);
	background: var(--kl-bg-muted);
	color: var(--kl-ink);
}

.kl-contactbox > :first-child {
	margin-top: 0;
}

.kl-contactbox > :last-child {
	margin-bottom: 0;
}

.kl-cta-card {
	padding: 24px 20px;
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
	background: #fff;
	color: var(--kl-ink);
}

@media (min-width: 640px) {
	.kl-cta-card {
		padding: 32px;
	}
}

.kl-cta-card > :first-child {
	margin-top: 0;
}

.kl-cta-card > :last-child {
	margin-bottom: 0;
}

.kl-cta-card .uk-text-muted,
.kl-cta-card .uk-text-small {
	color: var(--kl-ink-muted);
}

/* ---------- Überschrift mit Piktogramm */

.kl-h-icon {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.kl-h-icon > img,
.kl-h-icon > svg {
	flex: none;
	width: 48px;
	height: 48px;
}

.kl-h-icon > :is(h1, h2, h3, .uk-h1, .uk-h2, .uk-h3) {
	margin: 0;
}

/* ---------- Schritte (Ablauf) */

.kl-steps {
	display: grid;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: klstep;
}

.kl-steps > li {
	position: relative;
	min-height: 44px;
	margin: 0;
	padding-left: 64px;
	counter-increment: klstep;
}

.kl-steps > li::before {
	content: counter(klstep);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kl-ink);
	color: #fff;
	font-family: var(--kl-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.kl-steps > li:last-child::before {
	background: var(--kl-green);
}

/* Mobil: senkrechte Verbindungslinie. */
.kl-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 52px;
	bottom: -18px;
	left: 21px;
	width: 2px;
	background: var(--kl-line);
}

.kl-steps strong {
	display: block;
	font-family: var(--kl-font-head);
	font-size: 20px;
	font-stretch: 87.5%;
	line-height: 1.25;
	color: inherit;
}

.kl-steps p {
	margin: 6px 0 0;
}

.kl-steps__phase {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--kl-ink-muted);
}

.kl-steps__phase::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
}

.kl-steps__phase--rot::before { background: var(--kl-red); }
.kl-steps__phase--gelb::before { background: var(--kl-yellow); }
.kl-steps__phase--gruen::before { background: var(--kl-green); }

@media (min-width: 960px) {
	.kl-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.kl-steps > li {
		padding-top: 60px;
		padding-left: 0;
	}

	/* Desktop: waagerechte Verbindung zum nächsten Schritt derselben Zeile. */
	.kl-steps > li:not(:last-child)::after {
		top: 21px;
		bottom: auto;
		left: 56px;
		right: -20px;
		width: auto;
		height: 2px;
	}

	.kl-steps > li:nth-child(3n)::after {
		content: none;
	}
}

/* Auf Dunkel: helle Kreise. */
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) .kl-steps > li:not(:last-child)::before {
	background: #fff;
	color: var(--kl-ink);
}

:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) .kl-steps > li::after {
	background: rgba(255, 255, 255, 0.25);
}

:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .kl-dark) .kl-steps__phase {
	color: rgba(255, 255, 255, 0.82);
}

/* Variante: immer als Liste (Seitenspalte). */
.kl-steps.kl-steps--list {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.kl-steps.kl-steps--list > li {
	padding-top: 0;
	padding-left: 60px;
}

.kl-steps.kl-steps--list > li:not(:last-child)::after {
	top: 52px;
	bottom: -14px;
	left: 21px;
	right: auto;
	width: 2px;
	height: auto;
}

.kl-steps.kl-steps--list > li:nth-child(3n):not(:last-child)::after {
	content: "";
}

/* Variante: kompakt in einer Zeile (z. B. B197-Block). */
.kl-steps.kl-steps--mini {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.kl-steps.kl-steps--mini > li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	padding: 0;
}

.kl-steps.kl-steps--mini > li::before {
	position: static;
	flex: none;
	width: 34px;
	height: 34px;
	font-size: 17px;
}

.kl-steps.kl-steps--mini > li::after {
	content: none;
}

.kl-steps.kl-steps--mini strong {
	font-size: 18px;
}

/* Variante: Altersschritte (Zahl steht im <strong>). */
.kl-steps.kl-steps--age > li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	padding-top: 0;
	padding-left: 64px;
}

.kl-steps.kl-steps--age > li::before {
	content: none;
}

.kl-steps.kl-steps--age > li > strong:first-child {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--kl-ink);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

.kl-steps.kl-steps--age > li:last-child > strong:first-child {
	background: var(--kl-green);
}

.kl-steps.kl-steps--age p {
	margin: 0;
}

.kl-steps.kl-steps--age > li:not(:last-child)::after {
	top: 56px;
	left: 23px;
}

@media (min-width: 960px) {
	.kl-steps.kl-steps--age {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}

	.kl-steps.kl-steps--age > li {
		display: block;
		padding-top: 64px;
		padding-left: 0;
	}

	.kl-steps.kl-steps--age > li:not(:last-child)::after {
		top: 23px;
		left: 60px;
		right: -24px;
	}

	.kl-steps.kl-steps--age > li:nth-child(3n):not(:last-child)::after {
		content: "";
	}
}

/* ---------- Vertrauensleiste */

.kl-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-trust > li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding-left: 14px;
	border-left: 3px solid var(--kl-yellow);
}

.kl-trust strong {
	font-family: var(--kl-font-head);
	font-size: 22px;
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 1.15;
	color: var(--kl-ink);
}

.kl-trust span {
	font-size: 15px;
	line-height: 1.45;
	color: var(--kl-ink-muted);
}

@media (min-width: 960px) {
	.kl-trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px;
	}

	.kl-trust strong {
		font-size: 26px;
	}
}

/* ---------- Karten-Grid mit Piktogrammen */

.kl-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 640px) {
	.kl-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (min-width: 960px) {
	.kl-cards:not(.kl-cards--2) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kl-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	row-gap: 4px;
	padding: 20px;
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
	background: #fff;
	color: var(--kl-ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kl-card > * {
	grid-column: 2;
}

.kl-card > .kl-card__icon {
	grid-row: span 3;
	grid-column: 1;
	width: 48px;
	height: 48px;
	margin-right: 16px;
}

a.kl-card:hover,
a.kl-card:focus-visible {
	border-color: var(--kl-green);
	box-shadow: 0 0 0 1px var(--kl-green);
	color: var(--kl-ink);
	text-decoration: none;
}

body:not(#kl) a.kl-card:focus-visible {
	outline: 3px solid var(--kl-ink);
	outline-offset: 3px;
}

.kl-card__title {
	display: block;
	font-family: var(--kl-font-head);
	font-size: 20px;
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 1.25;
	color: var(--kl-ink);
}

.kl-card__text {
	display: block;
	font-size: 16px;
	line-height: 1.5;
	color: var(--kl-ink-muted);
}

.kl-card__more {
	display: inline-block;
	margin-top: 8px;
	font-weight: 700;
	color: var(--kl-green-dark);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.kl-card__more::after {
	content: " →";
	text-decoration: none;
	display: inline-block;
	margin-left: 4px;
}

@media (min-width: 640px) {
	.kl-card {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 24px;
	}

	.kl-card > .kl-card__icon {
		margin: 0 0 10px;
	}

	.kl-card__more {
		margin-top: auto;
		padding-top: 10px;
	}
}

/* Hervorgehobene Karte (Handlung → grün). */
body:not(#kl) .kl-card.kl-card--primary {
	border-color: var(--kl-green);
	background: var(--kl-green);
}

body:not(#kl) .kl-card.kl-card--primary :is(.kl-card__title, .kl-card__text, .kl-card__more) {
	color: #fff;
}

body:not(#kl) a.kl-card.kl-card--primary:hover {
	border-color: var(--kl-green-dark);
	background: var(--kl-green-dark);
	box-shadow: none;
}

/* ---------- Große Zahl und Kreis (Heros ohne Foto) */

.kl-bignum {
	margin: 0;
	font-family: var(--kl-font-head);
	font-size: 72px;
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: var(--kl-yellow);
}

@media (min-width: 960px) {
	.kl-bignum {
		font-size: 120px;
	}
}

/* Gelb nie als Text auf Weiß: auf hellen Sektionen bekommt die Zahl eine dunkle Fläche. */
:where(.uk-section-default, .uk-section-muted, .uk-section-primary) .kl-bignum {
	display: inline-block;
	padding: 8px 20px 12px;
	border-radius: var(--kl-radius);
	background: var(--kl-dark);
}

.kl-bignum__label {
	max-width: 32ch;
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	color: inherit;
}

.kl-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(100%, 340px);
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 50%;
	background: var(--kl-yellow);
	box-shadow: 0 0 0 14px rgba(255, 194, 14, 0.28);
	color: var(--kl-ink);
	font-family: var(--kl-font-head);
	font-size: clamp(72px, 22vw, 150px);
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.kl-circle :is(small, span) {
	margin-top: 8px;
	font-family: var(--kl-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.kl-circle.kl-circle--icon img,
.kl-circle.kl-circle--icon svg {
	width: 48%;
	height: auto;
}

/* ---------- Alterstabelle */

.kl-agetable {
	width: 100%;
	border-collapse: collapse;
	font-size: 17px;
}

.kl-agetable :is(th, td) {
	padding: 14px 12px;
	border-bottom: 1px solid var(--kl-line);
	text-align: left;
	vertical-align: top;
}

.kl-agetable thead th {
	border-bottom: 2px solid var(--kl-ink);
	font-size: 15px;
	font-weight: 700;
	color: var(--kl-ink-muted);
	text-transform: none;
}

.kl-agetable tbody td:first-child {
	width: 1%;
	padding-left: 16px;
	box-shadow: inset 4px 0 0 var(--kl-yellow);
	font-family: var(--kl-font-head);
	font-size: 22px;
	font-stretch: 87.5%;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

@media (max-width: 639px) {
	.kl-agetable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.kl-agetable,
	.kl-agetable tbody,
	.kl-agetable tr,
	.kl-agetable td {
		display: block;
		width: auto;
	}

	.kl-agetable tr {
		padding: 12px 0 12px 16px;
		border-bottom: 1px solid var(--kl-line);
		box-shadow: inset 4px 0 0 var(--kl-yellow);
	}

	.kl-agetable td,
	.kl-agetable tbody td:first-child {
		width: auto;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.kl-agetable tbody td:first-child {
		margin-bottom: 2px;
	}
}

/* ---------- Wochenplan (und weitere Tabellen im selben Stil) */

.kl-week {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 17px;
}

.kl-week :is(th, td) {
	padding: 14px 16px;
	border-bottom: 1px solid var(--kl-line);
	text-align: left;
	vertical-align: top;
}

.kl-week thead th {
	background: var(--kl-bg-muted);
	border-bottom: 2px solid var(--kl-ink);
	font-size: 15px;
	font-weight: 700;
	color: var(--kl-ink);
	text-transform: none;
}

.kl-week thead th:first-child {
	border-radius: var(--kl-radius) 0 0 0;
}

.kl-week thead th:last-child {
	border-radius: 0 var(--kl-radius) 0 0;
}

.kl-week tbody td:first-child {
	font-weight: 700;
}

@media (max-width: 639px) {
	.kl-week thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.kl-week,
	.kl-week tbody,
	.kl-week tr,
	.kl-week td {
		display: block;
		width: auto;
	}

	.kl-week tr {
		margin-bottom: 12px;
		padding: 14px 16px;
		border: 1px solid var(--kl-line);
		border-radius: var(--kl-radius);
		background: #fff;
		color: var(--kl-ink);
	}

	.kl-week td {
		display: grid;
		grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
		gap: 12px;
		padding: 5px 0;
		border: 0;
	}

	.kl-week td::before {
		content: attr(data-label);
		font-size: 15px;
		font-weight: 600;
		color: var(--kl-ink-muted);
	}

	.kl-week tbody td:first-child {
		display: block;
		margin-bottom: 6px;
		padding: 0 0 8px;
		border-bottom: 1px solid var(--kl-line);
		font-family: var(--kl-font-head);
		font-size: 20px;
		font-stretch: 87.5%;
	}

	.kl-week tbody td:first-child::before {
		content: none;
	}
}

/* ---------- Vergleichskarten */

.kl-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px 24px;
	align-items: stretch;
	padding-top: 14px;
}

@media (min-width: 960px) {
	.kl-compare {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kl-compare__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px 24px;
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
	background: #fff;
	color: var(--kl-ink);
}

.kl-compare__item > :is(h2, h3, h4) {
	margin: 0;
}

.kl-compare__item > :is(ul, ol, p) {
	margin: 0;
}

.kl-compare__item > .uk-button {
	align-self: flex-start;
	margin-top: auto;
}

.kl-compare__item:is(.kl-compare__item--rec, .kl-compare__item--empfohlen) {
	border: 2px solid var(--kl-green);
	box-shadow: 0 0 0 4px var(--kl-green-light);
}

.kl-compare__item > .kl-badge:first-child {
	position: absolute;
	top: 0;
	left: 20px;
	transform: translateY(-50%);
}

/* ---------- Kostenblöcke (Rahmen oben Rot/Gelb/Grün) */

.kl-costs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}

@media (min-width: 960px) {
	.kl-costs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kl-costs__item {
	padding: 24px;
	border: 1px solid var(--kl-line);
	border-top: 6px solid var(--kl-ink);
	border-radius: var(--kl-radius);
	background: #fff;
	color: var(--kl-ink);
}

.kl-costs__item > :first-child {
	margin-top: 0;
}

.kl-costs__item > :last-child {
	margin-bottom: 0;
}

.kl-costs__item--rot { border-top-color: var(--kl-red); }
.kl-costs__item--gelb { border-top-color: var(--kl-yellow); }
.kl-costs__item--gruen { border-top-color: var(--kl-green); }

/* ---------- Checkliste mit grünen Häkchen */

.kl-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-checklist > li {
	position: relative;
	margin: 10px 0;
	padding-left: 34px;
}

.kl-checklist > li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kl-green-light) var(--kl-check-gruen) center / 14px no-repeat;
}

.kl-checklist.kl-checklist--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
}

.kl-checklist.kl-checklist--inline > li {
	margin: 0;
}

/* ---------- Zeitleiste */

.kl-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-timeline > li {
	position: relative;
	margin: 0;
	padding: 0 0 28px 38px;
}

.kl-timeline > li::before {
	content: "";
	position: absolute;
	top: 0.3em;
	left: 0;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 4px solid var(--kl-ink);
	border-radius: 50%;
	background: #fff;
}

.kl-timeline > li::after {
	content: "";
	position: absolute;
	top: calc(0.3em + 22px);
	bottom: 4px;
	left: 8px;
	width: 2px;
	background: var(--kl-line);
}

.kl-timeline > li:last-child {
	padding-bottom: 0;
}

.kl-timeline > li:last-child::after {
	content: none;
}

.kl-timeline > li:last-child::before {
	border-color: var(--kl-green);
	background: var(--kl-green);
}

.kl-timeline strong {
	display: block;
	font-family: var(--kl-font-head);
	font-size: 22px;
	font-stretch: 87.5%;
	line-height: 1.2;
	color: inherit;
}

/* ---------- Definitionsliste (Standort „Auf einen Blick“) */

.kl-dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 24px;
	margin: 0;
}

.kl-dl dt {
	margin-top: 12px;
	font-weight: 700;
	color: var(--kl-ink);
}

.kl-dl dt:first-child {
	margin-top: 0;
}

.kl-dl dd {
	margin: 0;
}

@media (min-width: 480px) {
	.kl-dl {
		grid-template-columns: max-content minmax(0, 1fr);
		gap: 10px 24px;
	}

	.kl-dl dt {
		margin-top: 0;
	}
}

/* ---------- Sprungnavigation (Pills) */

.kl-subnav {
	position: sticky;
	top: var(--kl-header-h, 64px);
	z-index: 970;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 8px 0;
	background: #fff;
	scrollbar-width: none;
}

.kl-subnav::-webkit-scrollbar {
	display: none;
}

.kl-subnav > a {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--kl-border);
	border-radius: 999px;
	background: #fff;
	color: var(--kl-ink);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
}

.kl-subnav > a:hover {
	border-color: var(--kl-green-dark);
	color: var(--kl-green-dark);
}

/* Text in den Pills immer mittig, auch wenn Zusatz-CSS display/padding ändert. */
body:not(#kl) .kl-subnav > a {
	display: inline-flex;
	align-items: center;
}

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

.kl-acc-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.kl-g6 a {
	font-weight: 700;
}

.kl-hero-img img {
	border-radius: var(--kl-radius);
}

.kl-theorie-beide:empty {
	display: none;
}

.kl-map {
	margin: 0;
}

.kl-map img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
}

.kl-map figcaption {
	margin-top: 6px;
	font-size: 14px;
	color: var(--kl-ink-muted);
}

.kl-map:not(:has(figcaption))::after {
	content: "Karte: © OpenStreetMap-Mitwirkende";
	display: block;
	margin-top: 6px;
	font-size: 14px;
	color: var(--kl-ink-muted);
}

.kl-admin-hinweis {
	padding: 12px 16px;
	border: 2px dashed var(--kl-red);
	border-radius: 8px;
	font-size: 14px;
	color: var(--kl-ink);
	background: #fff;
}

/* ============================================================ 5. Formulare */

.kl-formular {
	--kl-fg: var(--kl-ink);
	--kl-fg-muted: var(--kl-ink-muted);
	--kl-err: var(--kl-red);
	--kl-err-on: #fff;
	--kl-chip-bg: #fff;
	--kl-chip-border: var(--kl-border);
	--kl-chip-checked-bg: var(--kl-green-light);
	--kl-chip-checked-border: var(--kl-ink);
	--kl-focus: var(--kl-ink);
	color: var(--kl-fg);
}

/* Formular auf dunkler Fläche (z. B. Kontakt-Sektion „Für Eltern“). */
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-secondary, .kl-dark) .kl-formular {
	--kl-fg: #fff;
	--kl-fg-muted: rgba(255, 255, 255, 0.82);
	--kl-err: #FFB4AB;
	--kl-err-on: var(--kl-ink);
	--kl-chip-bg: transparent;
	--kl-chip-border: rgba(255, 255, 255, 0.6);
	--kl-chip-checked-bg: rgba(255, 255, 255, 0.14);
	--kl-chip-checked-border: #fff;
	--kl-focus: var(--kl-yellow);
}

/* … außer in weißen Karten innerhalb dunkler Flächen. */
:is(.uk-light, .uk-section-secondary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color), .uk-card-secondary, .kl-dark) :is(.kl-cta-card, .uk-card-default) .kl-formular {
	--kl-fg: var(--kl-ink);
	--kl-fg-muted: var(--kl-ink-muted);
	--kl-err: var(--kl-red);
	--kl-err-on: #fff;
	--kl-chip-bg: #fff;
	--kl-chip-border: var(--kl-border);
	--kl-chip-checked-bg: var(--kl-green-light);
	--kl-chip-checked-border: var(--kl-ink);
	--kl-focus: var(--kl-ink);
}

.kl-form {
	display: grid;
	gap: 20px;
	margin: 0;
	color: var(--kl-fg);
}

.kl-field,
.kl-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.kl-group {
	display: grid;
	gap: 16px;
}

.kl-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 640px) {
	.kl-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kl-row.kl-row--geburt {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body:not(#kl) .kl-form .kl-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--kl-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--kl-fg);
	text-transform: none;
	letter-spacing: normal;
}

body:not(#kl) .kl-form .kl-group__legend {
	margin-bottom: 4px;
	font-family: var(--kl-font-head);
	font-size: 20px;
	font-stretch: 87.5%;
}

.kl-pflicht {
	font-weight: 400;
	color: var(--kl-fg-muted);
}

body:not(#kl) .kl-form .kl-help {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--kl-fg-muted);
}

body:not(#kl) .kl-form .kl-help a,
body:not(#kl) .kl-form .kl-datenschutz a,
body:not(#kl) .kl-form .kl-check a {
	color: var(--kl-fg);
	text-decoration: underline;
}

/* Eingabefelder: immer weiß mit dunkler Schrift (auch auf dunklen Flächen). */
body:not(#kl) .kl-form :is(.uk-input, .uk-select, .uk-textarea, .kl-file) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--kl-border);
	border-radius: 8px;
	background-color: #fff;
	color: var(--kl-ink);
	font-family: var(--kl-font);
	font-size: 17px;
}

body:not(#kl) .kl-form :is(.uk-input, .uk-select) {
	height: 48px;
	padding: 0 14px;
}

body:not(#kl) .kl-form .uk-select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2316181D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

body:not(#kl) .kl-form .uk-textarea {
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.5;
}

body:not(#kl) .kl-form :is(.uk-input, .uk-select, .uk-textarea)::placeholder {
	color: #6B7280;
	opacity: 1;
}

body:not(#kl) .kl-form :is(.uk-input, .uk-select, .uk-textarea):focus {
	border-color: var(--kl-ink);
	outline: 3px solid var(--kl-focus);
	outline-offset: 1px;
}

body:not(#kl) .kl-form :is(.uk-input, .uk-select, .uk-textarea, .kl-file):is(.uk-form-danger, [aria-invalid="true"]) {
	border: 2px solid var(--kl-red);
	color: var(--kl-ink);
}

body:not(#kl) .kl-form .kl-file {
	display: block;
	padding: 10px;
	border-style: dashed;
	font-size: 16px;
	cursor: pointer;
}

body:not(#kl) .kl-form .kl-file::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 2px solid var(--kl-ink);
	border-radius: 8px;
	background: #fff;
	color: var(--kl-ink);
	font: 700 16px/1.2 var(--kl-font);
	cursor: pointer;
}

/* Radio-Chips. */
.kl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kl-chip-opt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 8px 18px 8px 12px;
	border: 1px solid var(--kl-chip-border);
	border-radius: 999px;
	background: var(--kl-chip-bg);
	color: var(--kl-fg);
	font-size: 17px;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kl-chip-opt:hover {
	border-color: var(--kl-chip-checked-border);
}

.kl-chip-opt:has(input:checked) {
	border-color: var(--kl-chip-checked-border);
	background: var(--kl-chip-checked-bg);
	box-shadow: inset 0 0 0 1px var(--kl-chip-checked-border);
	font-weight: 700;
}

.kl-chip-opt:has(input:focus-visible) {
	outline: 3px solid var(--kl-focus);
	outline-offset: 2px;
}

body:not(#kl) .kl-form :is(.uk-radio, .uk-checkbox) {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid var(--kl-border);
	background-color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

body:not(#kl) .kl-form .uk-radio {
	border-radius: 50%;
}

body:not(#kl) .kl-form .uk-checkbox {
	border-radius: 4px;
}

body:not(#kl) .kl-form .uk-radio:checked {
	border-color: var(--kl-ink);
	background-color: var(--kl-ink);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
}

body:not(#kl) .kl-form .uk-checkbox:checked {
	border-color: var(--kl-ink);
	background-color: var(--kl-ink);
	background-image: var(--kl-check-weiss);
	background-size: 16px;
}

body:not(#kl) .kl-form :is(.uk-radio, .uk-checkbox):focus-visible {
	outline: 3px solid var(--kl-focus);
	outline-offset: 2px;
}

/* Einzelne Checkbox mit Text. */
.kl-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 17px;
	line-height: 1.45;
	color: var(--kl-fg);
	cursor: pointer;
}

.kl-check .uk-checkbox {
	margin-top: 1px;
}

/* Fehler am Feld: Icon und Text. */
body:not(#kl) .kl-form .kl-error {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kl-err);
}

body:not(#kl) .kl-form .kl-error::before {
	content: "!";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--kl-err);
	color: var(--kl-err-on);
	font: 700 14px/20px var(--kl-font);
	text-align: center;
}

body:not(#kl) .kl-form .kl-error[hidden],
.kl-errors[hidden],
.kl-altershinweis[hidden] {
	display: none;
}

/* Fehlerübersicht oben. */
body:not(#kl) .kl-errors {
	padding: 16px 20px;
	border-left: 6px solid var(--kl-red);
	border-radius: 0 var(--kl-radius) var(--kl-radius) 0;
	background: var(--kl-red-light);
	color: var(--kl-ink);
}

body:not(#kl) .kl-errors:focus {
	outline: 3px solid var(--kl-ink);
	outline-offset: 2px;
}

.kl-errors__title {
	margin: 0 0 6px;
	font-weight: 700;
}

.kl-errors ul {
	margin: 0;
	padding-left: 20px;
}

.kl-errors li {
	margin: 4px 0;
}

.kl-errors__form {
	margin: 8px 0 0;
	font-weight: 600;
}

.kl-errors__title + .kl-errors__form,
.kl-errors > .kl-errors__form:first-child {
	margin-top: 0;
}

/* Erfolgsmeldung (ersetzt das Formular). */
body:not(#kl) .kl-success {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 20px 24px;
	border-left: 6px solid var(--kl-green);
	border-radius: 0 var(--kl-radius) var(--kl-radius) 0;
	background: var(--kl-green-light);
	color: var(--kl-ink);
	font-size: 18px;
	line-height: 1.5;
}

body:not(#kl) .kl-success::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--kl-green) var(--kl-check-weiss) center / 18px no-repeat;
}

.kl-success p {
	margin: 0;
}

body:not(#kl) .kl-success:focus {
	outline: 3px solid var(--kl-ink);
	outline-offset: 2px;
}

/* Hinweise im Formular. */
body:not(#kl) .kl-form .kl-altershinweis {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--kl-yellow-light);
	color: var(--kl-ink);
	font-size: 15px;
	line-height: 1.45;
}

.kl-form .kl-seminar-hinweis[hidden] {
	display: none;
}

body:not(#kl) .kl-form .kl-datenschutz {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kl-fg-muted);
}

.kl-submit-row {
	display: flex;
}

body:not(#kl) .kl-form .kl-nach-button {
	margin: -8px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--kl-fg-muted);
}

/* Honeypot: für Menschen unsichtbar. */
.kl-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Abhängige Felder ohne JavaScript und ohne Layout-Sprung (moderne Browser; ältere zeigen alles). */
@supports selector(:has(*)) {
	.kl-form .kl-nur-eltern,
	.kl-form .kl-nur-asf,
	.kl-form .kl-nur-preisliste,
	.kl-form .kl-fallback,
	.kl-form .kl-help:has(> .kl-fallback:only-child) {
		display: none;
	}

	.kl-form:has(input[name="kl[modus]"][value="eltern"]:checked) .kl-nur-eltern,
	.kl-form:has(input[name="kl[seminar]"][value="asf"]:checked) .kl-nur-asf {
		display: block;
	}

	.kl-form:has(select[name="kl[klasse]"] option:checked:is([value="am"], [value="mofa"], [value="a1"], [value="a2"], [value="a"], [value="a-aufstieg"], [value="b196"], [value="zweirad"])) .kl-bf17,
	.kl-form:has(input[name="kl[stelle]"][value="ausbildung"]:checked) .kl-nur-fahrlehrer,
	.kl-form:has(input[name="kl[anliegen]"][value="preisliste"]:checked) .kl-ohne-preisliste {
		display: none;
	}

	.kl-form:has(input[name="kl[anliegen]"][value="preisliste"]:checked) .kl-nur-preisliste {
		display: inline;
	}
}

/* ============================================================ 6. Termine, Gebühren, Preise, Status-Chip */

.kl-termine {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-termin {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px 16px;
	align-items: center;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--kl-line);
	border-radius: var(--kl-radius);
	background: #fff;
	color: var(--kl-ink);
}

.kl-termin__icon {
	align-self: start;
	color: var(--kl-green-dark);
}

.kl-termin__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kl-termin__title {
	font-family: var(--kl-font-head);
	font-size: 20px;
	font-stretch: 87.5%;
	line-height: 1.25;
	color: var(--kl-ink);
}

.kl-termin__meta,
.kl-termin__info {
	font-size: 16px;
	line-height: 1.45;
	color: var(--kl-ink-muted);
}

.kl-termin__button {
	grid-column: 1 / -1;
	justify-self: start;
}

@media (min-width: 640px) {
	.kl-termin {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.kl-termin__button {
		grid-column: auto;
	}
}

.kl-termine-leer {
	margin: 0;
}

.kl-gebuehren {
	font-variant-numeric: tabular-nums;
}

.kl-preise__tabelle {
	margin-bottom: 8px;
}

.kl-preise__betrag {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.kl-preise__betrag,
	.kl-preise__tabelle th:last-child {
		text-align: right;
	}
}

.kl-preise__fuss {
	margin: 0;
	font-size: 14px;
	color: var(--kl-ink-muted);
}

/* Status-Chip. */
.kl-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 8px 16px;
	border: 1px solid var(--kl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--kl-ink);
	font-family: var(--kl-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.kl-chip__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--kl-green);
	box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.16);
}

.kl-chip--spaeter .kl-chip__dot {
	background: var(--kl-yellow);
	box-shadow: 0 0 0 4px rgba(255, 194, 14, 0.3);
}

.kl-chip--geschlossen .kl-chip__dot {
	background: var(--kl-red);
	box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.16);
}

/* ============================================================ 7. Mobile Aktionsleiste (unter 960 px) */

.kl-actionbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 980;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 8px;
	padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--kl-line);
	box-shadow: 0 -2px 12px rgba(17, 20, 24, 0.06);
}

.kl-actionbar.kl-actionbar--zwei {
	grid-template-columns: 1fr 1fr;
}

body:not(#kl) .kl-actionbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 48px;
	border-radius: var(--kl-radius-btn);
	color: var(--kl-ink);
	font: 700 14px/1.2 var(--kl-font);
	text-decoration: none;
}

body:not(#kl) .kl-actionbar a:hover {
	background: var(--kl-bg-muted);
	color: var(--kl-ink);
}

body:not(#kl) .kl-actionbar .kl-ab-main {
	background: var(--kl-green);
	color: #fff;
	font-size: 17px;
}

body:not(#kl) .kl-actionbar .kl-ab-main:hover {
	background: var(--kl-green-dark);
	color: #fff;
}

body.kl-has-actionbar {
	padding-bottom: calc(72px + env(safe-area-inset-bottom));
	/* Querformat mit Notch: Inhalt nicht unter die Aussparung legen (viewport-fit=cover). */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body.kl-typing .kl-actionbar {
	display: none;
}

@media (min-width: 960px) {
	.kl-actionbar {
		display: none;
	}

	body.kl-has-actionbar {
		padding-bottom: 0;
	}
}

/* ============================================================ 8. Bewegung, Druck */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.tm-header,
	.tm-header-mobile,
	.tm-toolbar,
	.tm-footer,
	.kl-actionbar,
	.kl-noprint,
	.kl-formular,
	.kl-subnav,
	.uk-offcanvas,
	.uk-modal,
	.uk-notification {
		display: none !important;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
	}

	body.kl-has-actionbar {
		padding: 0 !important;
	}

	.uk-section,
	.uk-section-muted,
	.uk-section-primary,
	.uk-section-secondary {
		padding-top: 12pt !important;
		padding-bottom: 12pt !important;
		background: #fff !important;
		color: #000 !important;
	}

	.uk-section-secondary :is(h1, h2, h3, h4, p, li, a, span, strong) {
		color: #000 !important;
	}

	a[href^="http"]:not([href*="fahrschule-kliese.de"])::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.kl-checklist > li,
	.kl-steps > li,
	.kl-card,
	.kl-costs__item,
	.kl-compare__item,
	.uk-card {
		break-inside: avoid;
	}

	.kl-checklist > li::before,
	.kl-steps > li::before,
	.kl-badge,
	.kl-eyebrow::before {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}