/* Kidszone Camp-Finder – Phase 1 */

/* ═══════════════ Modernes Design ═══════════════ */
.kzcf-app {
	/* Palette „Verspielt / Zwei-Akzent" (2026-08): cleanes kühles Off-White,
	   ROT = Aktion/Auswahl, PETROL/TEAL = Info/Marke (Kategorie, Ort-Pin).
	   Kühle Neutral-Rampe. --kzcf-cream bleibt Alias auf die Fläche. */
	--kzcf-red: #1D2B4F;          /* Primär-Akzent: Aktion/Auswahl/CTA */
	--kzcf-red-weak: #e7ebf4;
	--kzcf-teal: #2E7CF0;         /* Sekundär-Akzent: Info/Marke */
	--kzcf-teal-weak: #e7f0fe;    /* Teal-Tönung (Chips) */
	--kzcf-teal-ink: #1a5fc0;     /* Teal-Text auf Tönung */
	--kzcf-bg: #f4f6f5;           /* Seiten-Hintergrund, kühles Off-White */
	--kzcf-surface: #ffffff;      /* Karten/Flächen */
	--kzcf-surface-2: #ecf0ef;    /* Rails, Hover, Chips */
	--kzcf-cream: #ecf0ef;        /* Alias (Alt-Regeln) */
	--kzcf-ink: #20283c;          /* kühles Fast-Schwarz */
	--kzcf-muted: #6b716f;        /* kühles Grau, EINE Familie */
	--kzcf-faint: #99a09d;
	--kzcf-border: #e3e8e6;       /* kühle Haarlinie */
	--kzcf-cluster: #1D2B4F;      /* Map-Cluster (dunkle Tinte) */
	--kzcf-success: #2FA84F;      /* Förderung */
	--kzcf-gold: #f5a623;         /* Bewertungs-Sterne */
	--kzcf-brandred: #E8402A;   /* verspielte Logo-Akzente */
	--kzcf-brandblue: #2E7CF0;
	--kzcf-brandgreen: #2FA84F;
	--kzcf-brandyellow: #FFC61A;
	--kzcf-navy: #1D2B4F;
	--kzcf-radius: 16px;
	--kzcf-shadow: 0 6px 22px rgba( 22, 28, 26, 0.08 );
	--kzcf-shadow-lg: 0 14px 40px rgba( 22, 28, 26, 0.16 );
	color: var( --kzcf-ink );
}

/* Hero-Suche */
.kzcf-search__in {
	border: 2px solid #ececec;
	border-radius: 18px;
	box-shadow: var( --kzcf-shadow );
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kzcf-search__in:focus { box-shadow: 0 0 0 4px rgba( 29, 43, 79, 0.12 ), var( --kzcf-shadow ); }

/* Filter-Chips: weicher, mit Lift */
.kzcf-filter__btn, .kzcf-more-btn, .kzcf-geo-near {
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.kzcf-filter__btn:hover, .kzcf-more-btn:hover { box-shadow: var( --kzcf-shadow ); transform: translateY( -1px ); }
.kzcf-filter__pop {
	border-radius: 14px;
	box-shadow: var( --kzcf-shadow-lg );
	animation: kzcf-pop 0.16s ease;
}
@keyframes kzcf-pop { from { opacity: 0; transform: translateY( -6px ); } to { opacity: 1; transform: none; } }

/* Ergebnis-Anzahl */
.kzcf-count { font-size: 18px; }

/* Karten: sanfter Hover-Lift + gestaffelte Einblend-Animation.
   (Diese Effekte waren NICHT die Ursache des früheren Scroll-Bugs – der lag an
   der Namenskollision der Body-Klasse `kzcf-page` mit der Pager-Button-Klasse
   `.kzcf-page:hover{transform}`. Body-Klasse heißt jetzt `kzcf-finder`.) */
#kzcf-results .hp-listing {
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	border-radius: var( --kzcf-radius );
	background: var( --kzcf-surface );
	border: 1px solid var( --kzcf-border );
	box-shadow: var( --kzcf-shadow );
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
#kzcf-results .hp-listing:hover { transform: translateY( -4px ); box-shadow: var( --kzcf-shadow-lg ); border-color: #d5dbd9; }
/* Karten inhaltshoch, NICHT auf Zeilenhöhe strecken – sonst entsteht die weiße
   Lücke über dem (nach unten gedrückten) Fuß. */
#kzcf-results .hp-grid { align-items: flex-start; }
#kzcf-results .hp-grid__item { align-self: flex-start; }

/* ═══════════════ Listing-Karte – Redesign (nur im Finder) ═══════════════ */
/* Bild: bündig oben, feste Höhe, Karte klippt die Ecken (overflow:hidden). */
#kzcf-results .hp-listing__header { margin: 0; }
/* Inhalt hatte aus HivePress/Theme einen Creme-Hintergrund (#f5f4d7) – dadurch
   wirkte der weiße Karten-Rand zwischen Inhalt und Fuß wie ein weißer Streifen.
   Ganze Karte einheitlich weiß machen. */
#kzcf-results .hp-listing__content { padding: 14px 15px 0; display: flex; flex-direction: column; flex: 1 1 auto; background: var( --kzcf-surface ); }

/* Kategorie als Pille (dezenter roter Tint, ersetzt den nackten Link). */
#kzcf-results .hp-listing__categories { margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 6px; line-height: 1; }
#kzcf-results .hp-listing__categories a {
	display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
	color: var( --kzcf-teal-ink ); background: var( --kzcf-teal-weak ); padding: 3px 9px; border-radius: 7px; text-decoration: none;
	transition: background 0.12s ease;
}
#kzcf-results .hp-listing__categories a:hover { background: #cfeceb; }

/* Titel: kräftig, warme Tinte. */
#kzcf-results .hp-listing__title { margin: 0 0 9px; }
#kzcf-results .hp-listing__title a {
	font-size: 17px; font-weight: 800; line-height: 1.22; letter-spacing: -0.01em;
	color: var( --kzcf-ink ); text-decoration: none;
}
#kzcf-results .hp-listing__title a:hover { color: var( --kzcf-red ); }

/* Details: Ort dezent, Datum + Ballast-Attribute ausblenden. */
#kzcf-results .hp-listing__details--primary { display: flex; flex-direction: column; gap: 7px; margin: 0; }
#kzcf-results .hp-listing__location { color: var( --kzcf-muted ); font-size: 13.5px; gap: 6px; margin: 0; }
#kzcf-results .hp-listing__location a { color: var( --kzcf-muted ); text-decoration: none; }
#kzcf-results .hp-listing__location .hp-icon { color: var( --kzcf-teal ); }
#kzcf-results .hp-listing__created-date { display: none; }
#kzcf-results .hp-listing__attributes--ternary { display: none; }

/* Google-Bewertung: kompakter, warme Töne. */
#kzcf-results .kzgr-badge { margin-top: 1px; font-size: 13px; }
#kzcf-results .kzgr-badge__value { color: var( --kzcf-ink ); font-weight: 800; }
#kzcf-results .kzgr-badge__count { color: var( --kzcf-faint ); }

/* Fuß: Preis groß mit „/ Woche", Aktionen rechts, warme Trennlinie. */
#kzcf-results .hp-listing__footer {
	margin: 6px 0 0; padding: 4px 15px 15px;
	display: flex; align-items: center; gap: 10px;
	/* Einheitlich weiß, KEINE Trennlinie – der Preis grenzt sich über Größe +
	   „/ Woche" ab; so bleibt zwischen Bewertung und Preis kein sichtbarer Strich. */
	background: var( --kzcf-surface );
}
#kzcf-results .hp-listing__footer .hp-listing__attributes { margin: 0; }
#kzcf-results .hp-listing__attribute--price,
#kzcf-results .hp-listing__attribute--preis-range {
	font-size: 19px; font-weight: 800; color: var( --kzcf-ink ); letter-spacing: -0.01em; margin: 0;
	display: inline-flex; align-items: baseline; gap: 4px;
}
#kzcf-results .hp-listing__attribute--price::after,
#kzcf-results .hp-listing__attribute--preis-range::after {
	content: "/ Woche"; font-size: 12px; font-weight: 600; color: var( --kzcf-muted );
}
#kzcf-results .hp-listing__attribute--price .hp-icon,
#kzcf-results .hp-listing__attribute--preis-range .hp-icon { display: none; }
#kzcf-results .hp-listing__footer .hp-icon { color: var( --kzcf-muted ); }
#kzcf-results .hp-listing__actions--primary { margin-left: auto; display: inline-flex; gap: 4px; }
#kzcf-results .hp-listing__action { color: var( --kzcf-faint ); transition: color 0.12s ease; }
#kzcf-results .hp-listing__action:hover { color: var( --kzcf-red ); }

/* Förder-Badges als System: Grün = Förderung, Dunkel = Fakten (kein Rot mehr). */
#kzcf-results .kz-fb { box-shadow: 0 2px 8px rgba( 22, 28, 26, 0.24 ); -webkit-backdrop-filter: blur( 2px ); backdrop-filter: blur( 2px ); }
#kzcf-results .kz-fb--stark { background: #2e9e5b; }
#kzcf-results .kz-fb--wien { background: rgba( 30, 26, 16, 0.82 ); }
#kzcf-results .kz-fb--nacht { background: rgba( 30, 26, 16, 0.62 ); }

/* „NICHT VERFÜGBAR"-Overlay dezenter (warmes Dunkel statt hartem Schwarz). */
#kzcf-results .hp-listing--unavailable .hp-listing__image::after { background: rgba( 32, 28, 20, 0.42 ); }
@keyframes kzcf-fade { from { opacity: 0; transform: translateY( 10px ); } to { opacity: 1; transform: none; } }
#kzcf-results .hp-grid__item { animation: kzcf-fade 0.4s ease both; }
#kzcf-results .hp-grid__item:nth-child( 2 ) { animation-delay: 0.04s; }
#kzcf-results .hp-grid__item:nth-child( 3 ) { animation-delay: 0.08s; }
#kzcf-results .hp-grid__item:nth-child( 4 ) { animation-delay: 0.12s; }
#kzcf-results .hp-grid__item:nth-child( 5 ) { animation-delay: 0.16s; }
#kzcf-results .hp-grid__item:nth-child( 6 ) { animation-delay: 0.2s; }

/* Leerzustand (0-Ergebnis-Fallback mit „Filter lockern"-Vorschlägen) */
.kzcf-empty { text-align: center; padding: 44px 20px; max-width: 460px; margin: 0 auto; }
.kzcf-empty__icon { font-size: 38px; margin-bottom: 6px; }
.kzcf-empty__title { font-size: 20px; font-weight: 800; color: #333; margin-bottom: 6px; }
.kzcf-empty__text { font-size: 14px; color: #777; margin-bottom: 18px; }
.kzcf-empty__sugs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; text-align: left; }
.kzcf-empty__sug { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 1.5px solid #e3e8e6; background: #fff; border-radius: 14px; padding: 12px 16px; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.kzcf-empty__sug:hover { border-color: #1D2B4F; background: #faf9ec; }
.kzcf-empty__sug-label { font-size: 14px; font-weight: 600; color: #333; }
.kzcf-empty__sug-count { font-size: 13px; font-weight: 700; color: #1D2B4F; background: #e7ebf4; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.kzcf-empty__reset { border: none; background: none; color: #6b7480; text-decoration: underline; font-size: 14px; cursor: pointer; }
.kzcf-empty__reset:hover { color: #333; }

/* Pager */
.kzcf-page { box-shadow: var( --kzcf-shadow ); transition: transform 0.1s ease, background 0.12s ease; }
.kzcf-page:hover { transform: translateY( -1px ); }

/* ═══════════════ Split-View mit Karte ═══════════════ */
.kzcf-split { display: flex; gap: 20px; align-items: flex-start; }
.kzcf-list { flex: 1 1 58%; min-width: 0; }
.kzcf-mapwrap {
	flex: 0 0 40%;
	position: sticky;
	top: 184px;
	height: calc( 100vh - 216px );
	border-radius: 16px;
	overflow: hidden;
}
.kzcf-map { width: 100%; height: 100%; }
/* Mini-Karte im „Wo"-Panel: zeigt Ort + Umkreis als kleine Vorschau im Modal. */
.kzcf-womap { height: 0; opacity: 0; border-radius: 12px; overflow: hidden; transition: height 0.28s ease, opacity 0.2s ease; margin: 0; }
.kzcf-womap.is-shown { height: 300px; opacity: 1; margin: 12px 0 0; }
.kzcf-womap-dot { width: 16px; height: 16px; border-radius: 50%; background: #1D2B4F; border: 3px solid #fff; box-shadow: 0 1px 5px rgba( 0, 0, 0, 0.4 ); }
/* Camp-Punkte auf der Mini-Karte (klein, dezent). */
.kzcf-womap-camp { width: 9px; height: 9px; border-radius: 50%; background: #3a6ea5; border: 2px solid #fff; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.35 ); cursor: pointer; }
.kzcf-map-search {
	position: absolute; top: 14px; left: 50%; transform: translateX( -50% ); z-index: 2;
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff; padding: 8px 14px; border-radius: 999px;
	box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.22 );
	font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.kzcf-map-search input { accent-color: #1D2B4F; }

/* Preis-Pins */
.kzcf-pin {
	position: relative;
	background: var( --kzcf-surface ); border: 1px solid var( --kzcf-border );
	border-radius: 999px; padding: 5px 11px;
	font-size: 13px; font-weight: 800; color: var( --kzcf-ink ); cursor: pointer;
	box-shadow: 0 4px 12px rgba( 22, 28, 26, 0.20 );
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
	white-space: nowrap;
}
/* Kleine Pin-Spitze unter dem Chip, damit er wie am Ort verankert wirkt. */
.kzcf-pin::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX( -50% ); margin-top: -1px; border: 5px solid transparent; border-top-color: var( --kzcf-surface, #fff ); filter: drop-shadow( 0 2px 1px rgba( 22, 28, 26, 0.16 ) ); }
.kzcf-pin:hover { transform: scale( 1.08 ); border-color: #d3d9d7; box-shadow: 0 7px 18px rgba( 22, 28, 26, 0.26 ); z-index: 5; }
/* Ausgewählt / hervorgehoben = Navy (Marken-Akzent). */
.kzcf-pin.is-active { background: var( --kzcf-navy, #1D2B4F ); color: #fff; border-color: var( --kzcf-navy, #1D2B4F ); box-shadow: 0 6px 18px rgba( 29, 43, 79, 0.42 ); }
.kzcf-pin.is-active::after { border-top-color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-pin.is-active .kzcf-pin__star { color: #fff; }
.kzcf-pin.is-hi { transform: scale( 1.14 ); background: var( --kzcf-navy, #1D2B4F ); color: #fff; border-color: var( --kzcf-navy, #1D2B4F ); box-shadow: 0 8px 20px rgba( 29, 43, 79, 0.42 ); z-index: 6; }
.kzcf-pin.is-hi::after { border-top-color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-pin.is-hi .kzcf-pin__star { color: #fff; }
/* Bewertungs-Chip: goldener Stern + Note; ohne Bewertung dezent. */
.kzcf-pin__star { color: var( --kzcf-gold ); }
.kzcf-pin--none { background: var( --kzcf-surface-2 ); color: var( --kzcf-faint ); box-shadow: 0 2px 8px rgba( 22, 28, 26, 0.12 ); }
.kzcf-pin--none::after { border-top-color: var( --kzcf-surface-2 ); }

/* Umschalter Preis ↔ Bewertung (oben links auf der Karte). */
.kzcf-map-chiptoggle {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	display: inline-flex; background: #fff; border-radius: 999px; padding: 3px;
	box-shadow: 0 3px 12px rgba( 0, 0, 0, 0.22 );
}
.kzcf-map-chiptoggle button {
	border: none; background: none; cursor: pointer;
	padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var( --kzcf-muted );
	white-space: nowrap; transition: background 0.12s ease, color 0.12s ease;
}
.kzcf-map-chiptoggle button.is-active { background: var( --kzcf-ink ); color: #fff; }

/* Karten-Popup (Mini-Karte) – maplibre + mapbox Klassennamen. */
.kzcf-mappop .maplibregl-popup-content,
.kzcf-mappop .mapboxgl-popup-content { padding: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 46px rgba( 22, 28, 26, 0.24 ); }
/* Gut sichtbarer Schließen-Button: weißer runder Button mit dunklem X überm Bild. */
.kzcf-mappop .maplibregl-popup-close-button,
.kzcf-mappop .mapboxgl-popup-close-button {
	right: 9px; top: 9px; width: 28px; height: 28px; padding: 0; border: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba( 255, 255, 255, 0.95 ); color: #20283c;
	font-size: 20px; line-height: 1; font-weight: 700;
	box-shadow: 0 2px 9px rgba( 22, 28, 26, 0.30 ); z-index: 4;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.kzcf-mappop .maplibregl-popup-close-button:hover,
.kzcf-mappop .mapboxgl-popup-close-button:hover { background: #fff; color: var( --kzcf-navy, #1D2B4F ); transform: scale( 1.08 ); }
.kzcf-pop { display: block; width: 236px; text-decoration: none; color: var( --kzcf-ink ); }
.kzcf-pop--loading { padding: 30px; text-align: center; color: var( --kzcf-faint ); }
.kzcf-pop__img { height: 126px; background-size: cover; background-position: center; }
.kzcf-pop__body { padding: 11px 13px 13px; }
.kzcf-pop__k { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.kzcf-pop__cat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; font-weight: 800; color: #1c5fc7; background: rgba( 46, 124, 240, 0.13 ); padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.kzcf-pop__rate { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var( --kzcf-ink ); }
.kzcf-pop__stars { position: relative; display: inline-block; font-size: 12px; line-height: 1; letter-spacing: 1.5px; color: #d7dce3; white-space: nowrap; }
.kzcf-pop__stars::before { content: "\2605\2605\2605\2605\2605"; }
.kzcf-pop__stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; letter-spacing: 1.5px; color: var( --kzcf-gold, #F5A623 ); }
.kzcf-pop__stars-on::before { content: "\2605\2605\2605\2605\2605"; }
.kzcf-pop__ratev { color: var( --kzcf-ink ); font-weight: 800; }
.kzcf-pop__title { font-weight: 700; font-size: 14.5px; line-height: 1.25; letter-spacing: -0.01em; }
.kzcf-pop__prov { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: var( --kzcf-muted, #6b7480 ); }
.kzcf-pop__prov b { color: var( --kzcf-ink ); font-weight: 800; }
.kzcf-pop__logo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: #fff; box-shadow: 0 2px 7px rgba( 22, 28, 26, 0.16 ); display: flex; align-items: center; justify-content: center; }
.kzcf-pop__logo img { max-width: 24px; max-height: 24px; width: auto; height: auto; object-fit: contain; display: block; }
.kzcf-pop__travel { margin-top: 9px; }
.kzcf-pop__travel:empty { display: none; }
.kzcf-pop__foot { display: flex; align-items: center; margin-top: 11px; }
.kzcf-pop__price { font-weight: 800; font-size: 15px; }
.kzcf-pop__cta { margin-left: auto; font-size: 12px; font-weight: 800; color: #fff; background: var( --kzcf-navy, #1D2B4F ); padding: 6px 13px; border-radius: 9px; }
/* Cluster-Liste (mehrere Camps am selben Standort) im Popup, scrollbar. */
.kzcf-poplist { max-height: 340px; overflow-y: auto; width: 240px; }
.kzcf-poplist__head { position: sticky; top: 0; z-index: 1; background: #fff; padding: 10px 13px; font-weight: 800; font-size: 12.5px; color: var( --kzcf-ink ); border-bottom: 1px solid var( --kzcf-border, #e3e8e6 ); }
.kzcf-poplist .kzcf-pop { width: 100%; border-bottom: 1px solid var( --kzcf-border, #e3e8e6 ); }
.kzcf-poplist .kzcf-pop:last-child { border-bottom: none; }
.kzcf-poplist .kzcf-pop.is-focus { position: relative; z-index: 1; background: #eef2f8; box-shadow: 0 0 0 2px var( --kzcf-navy, #1D2B4F ); border-radius: 10px; }
.kzcf-poplist .kzcf-pop__img { height: 96px; }

/* Mobil: Umschalter Liste ↔ Karte */
.kzcf-maptoggle {
	display: none;
	position: fixed; bottom: 84px; left: 50%; transform: translateX( -50% ); z-index: 99991;
	border: none; background: #111; color: #fff; font-weight: 700; font-size: 14px;
	padding: 12px 22px; border-radius: 999px; cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.3 );
}
@media ( max-width: 900px ) {
	.kzcf-mapwrap { display: none; }
	.kzcf-split { display: block; }
	.kzcf-list { flex-basis: auto; }
	.kzcf-maptoggle { display: inline-block; }
	body.kzcf-map-open .kzcf-mapwrap {
		display: block; position: fixed; inset: 0; z-index: 99990;
		height: 100vh; border-radius: 0; flex-basis: auto;
	}
	body.kzcf-map-open .kzcf-list { display: none; }
}

.kzcf-app {
	position: relative;
	min-height: 200px;
	/* Volle Bildschirmbreite ausnutzen (aus der zentrierten Theme-Spalte ausbrechen).
	   Gutter = 32px auf Desktop, passend zum linken Rand des normalen Kidszone-Headers,
	   damit das Logo dieselbe Platzierung hat. */
	--kzcf-gutter: clamp( 16px, 2.2vw, 32px );
	width: 100vw;
	margin-left: calc( -50vw + 50% );
	box-sizing: border-box;
}
/* Abschnitte bündig mit dem Gutter (Logo/Suche/Chips fluchten mit Grid + Karte). */
.kzcf-active,
.kzcf-split { box-sizing: border-box; padding-left: var( --kzcf-gutter ); padding-right: var( --kzcf-gutter ); }
/* Ladezustand NUR auf den Ergebnissen – Filterleiste bleibt jederzeit bedienbar */
.kzcf-results { transition: opacity 0.12s ease; }
.kzcf-results.kzcf-busy { opacity: 0.55; pointer-events: none; }

/* Ergebnis-/Sortier-Zeile: Teil der Kopfleiste (unter den Kategorie-Chips), damit
   die (sticky) Karte bündig unter der Leiste beginnt und nicht unten aus dem
   Viewport ragt. */
.kzcf-headbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.kzcf-count { font-weight: 700; font-size: 15px; color: #333; }

/* ─── Plattform-Feinschliff ─── */
/* Standard-Kidszone-Header + Hero-Titelband auf der Finder-Seite komplett
   entfernen (Airbnb-Stil): die Sticky-Filterleiste mit Logo übernimmt oben.
   Auch den mobilen Drawer-CTA ausblenden, da sein Menü im (versteckten) Header
   liegt und der Button sonst ins Leere führt. */
body.kzcf-finder .site-header,
body.kzcf-finder .header-hero,
body.kzcf-finder .header-navbar,
body.kzcf-finder .kz-drawer-cta { display: none !important; }
/* Der Content-Wrapper reserviert normalerweise 64px oben für den fixen Header –
   den brauchen wir hier nicht, also bündig ganz nach oben. */
body.kzcf-finder #content.site-content { padding-top: 0 !important; }
/* Warmer Off-White-Seitenhintergrund NUR auf der Filterseite (Theme-Creme
   überschreiben). Lässt die weißen Karten wieder „stehen". */
/* WICHTIG: Literal, KEIN var(--kzcf-bg) – diese Elemente sind Vorfahren von
   .kzcf-app (wo der Token definiert ist) und erben ihn nicht → var wäre leer
   (transparent) und der warme Theme-Hintergrund käme durch. */
/* Auch das <html>-Root einfärben, sonst zeigt Chrome beim Overscroll oben die alte beige Theme-Farbe. */
html:has( body.kzcf-finder ) { background: #f4f6f5 !important; }
body.kzcf-finder,
body.kzcf-finder .site-container,
body.kzcf-finder #content.site-content,
body.kzcf-finder .site-main { background: #f4f6f5 !important; }

/* ── Footer (nur Finder-Seite): schlicht in der Header-/Seiten-Hintergrund-
   farbe (#f4f6f5), passend zum Farbschema. Keine Grafik. */
body.kzcf-finder .site-footer {
	position: relative;
	background: #f4f6f5 !important;
	border-top: 1px solid #e3e8e6;
	overflow: hidden;
}
/* Desktop-Footer: jeder Abschnitt in einem eigenen verspielten Farbklecks
   (organische Form mit KLARER Linie) in den Logo-Ball-Farben; „Folge uns" als
   Klecks, der links über den Bildschirmrand hinausläuft und abgeschnitten wird
   (Footer hat overflow:hidden). Blob-Regeln stehen weiter unten im Footer-Block. */
body.kzcf-finder .site-footer,
body.kzcf-finder .site-footer p,
body.kzcf-finder .site-footer li,
body.kzcf-finder .site-footer span,
body.kzcf-finder .site-footer .widget,
body.kzcf-finder .site-footer .textwidget { color: #5b615f; }
body.kzcf-finder .site-footer .widget__title,
body.kzcf-finder .site-footer h1,
body.kzcf-finder .site-footer h2,
body.kzcf-finder .site-footer h3,
body.kzcf-finder .site-footer h4,
body.kzcf-finder .site-footer h5,
body.kzcf-finder .site-footer h6 { color: #1e2422; }
body.kzcf-finder .site-footer a { color: #1e2422; text-decoration: none; }
/* Kein Hover-Effekt im Footer: Links behalten beim Hovern ihre Farbe. */
body.kzcf-finder .site-footer a:hover { color: #1e2422; }
/* Neues Footer-Logo (breite Wortmarke statt altem Hochkant-Logo), deutlich größer,
   etwas weiter rechts eingerückt. */
body.kzcf-finder .site-footer .kzcf-foot-logo {
	width: 300px;
	height: auto;
	max-width: none;
	display: block;
	margin: 0 0 16px -12px;
}
@media ( max-width: 640px ) {
	body.kzcf-finder .site-footer .kzcf-foot-logo { width: 240px; max-width: 100%; margin-left: 0; }
}
/* Rote Theme-Striche über den Footer-Überschriften entfernen. */
body.kzcf-finder .site-footer .widget__title::before,
body.kzcf-finder .site-footer .widget-title::before { display: none !important; }
/* Basis-Linkfarbe im Footer (Mobil/allgemein); auf den Desktop-Klecksen wird sie
   pro Abschnitt auf Weiß bzw. Dunkel überschrieben. */
body.kzcf-finder .site-footer .footer-widgets a { color: #1e2422 !important; }
/* Theme-Chevron (li::before) entfernen und einen eigenen sauberen Pfeil bauen. */
body.kzcf-finder .site-footer .footer-widgets li { list-style: none !important; }
body.kzcf-finder .site-footer .footer-widgets li::before { content: none !important; display: none !important; }
body.kzcf-finder .site-footer .widget_categories li > a,
body.kzcf-finder .site-footer .widget_nav_menu li > a {
	position: relative; display: inline-block; padding-left: 18px;
	transition: color 0.15s ease;
}
body.kzcf-finder .site-footer .widget_categories li > a::before,
body.kzcf-finder .site-footer .widget_nav_menu li > a::before {
	content: ""; position: absolute; left: 2px; top: 0.66em;
	width: 5px; height: 5px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0.85;
}
/* Kein Hover-Effekt: der Pfeil bleibt beim Hovern unverändert (kein Verschieben). */
/* „Folge uns": Einträge untereinander statt nebeneinander. */
body.kzcf-finder .site-footer .kz-footer-social a { display: flex !important; width: max-content; margin: 0 0 10px !important; }

/* Footer-Überschriften etwas Luft geben (ohne den roten Balken). */
body.kzcf-finder .site-footer .widget__title { padding-top: 0; margin-bottom: 14px; }
/* Kein horizontaler Scroll: der Full-Bleed-Trick (.kzcf-app width:100vw) zieht
   die Scrollbar-Breite nicht ab und ragt ~15px raus. `overflow-x: clip` clippt
   das weg OHNE den sticky-Header/-Karte zu brechen (anders als overflow:hidden). */
body.kzcf-finder { overflow-x: clip; }

/* Kopf-/Filterleiste: KEINE eigene Box, sondern volle Breite mit cremigem
   Hintergrund; klebt beim Scrollen oben fest, sobald der Header weggescrollt ist. */
.kzcf-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var( --kzcf-bg );
	border: none;
	border-radius: 0;
	box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.05 );
	padding: 14px var( --kzcf-gutter ) 10px;
	margin: 0 0 18px;
}
/* Oberste Zeile der Leiste: Logo links + Suchfeld + Konto-/Menü-Pille rechts (Airbnb-Stil). */
/* Desktop: 3-Spalten-Raster mit zwei GLEICH breiten Außenspalten (minmax(0,1fr)),
   damit die Suchleiste in der Mitte IMMER exakt zentriert sitzt, egal wie breit
   Logo oder Aktionen (Anbieter-Link, Menü, Sprachschalter) gerade sind.
   Unter 760px (siehe unten) wieder Flex: Suchleiste in eigener Zeile. */
.kzcf-topbar__top {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	gap: 22px;
	margin: 0 0 14px;
}
.kzcf-logo { flex: 0 0 auto; display: flex; align-items: center; justify-self: start; }
.kzcf-logo img { height: 60px; width: auto; display: block; }
/* Neues animiertes SVG-Logo (Zauberlupe). overflow:visible, damit die Lupe
   beim Flug kurz über die Wortmarke hinausragen darf. */
.kzcf-logo--anim { line-height: 0; }
.kzcf-logo--anim .kz-logo { height: 42px; width: auto; display: block; overflow: visible; }
@media ( max-width: 720px ) {
	.kzcf-logo--anim .kz-logo { height: 34px; }
}

/* Suchfeld: kompakt, wächst neben dem Logo bis max. 600px (wirkt als Control). */
.kzcf-search { flex: 1 1 auto; max-width: 600px; margin: 0; }

/* Rechte Aktionen: Konto-/Kompaktmenü als Pille (☰ + Person) mit Dropdown. */
.kzcf-topbar__actions { flex: 0 0 auto; justify-self: end; margin-left: auto; display: flex; align-items: center; }
/* Dezenter Anbieter-Einstieg neben dem Sprachmenü. Hover: KEINE andere Textfarbe
   (auch kein Opacity-Wechsel), nur ein Unterstrich in der Textfarbe. */
.kzcf-provlink { font-size: 0.9rem; font-weight: 600; color: #1d2b4f; text-decoration: none; white-space: nowrap; padding-right: 15px; }
.kzcf-provlink:hover,
.kzcf-provlink:focus-visible { color: #1d2b4f; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
@media ( max-width: 900px ) { .kzcf-provlink { display: none; } }
.kzcf-menu { position: relative; }
.kzcf-menu-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; padding: 0;
	border: 1.5px solid var( --kzcf-border, #e3e8e6 ); background: #fff; border-radius: 50%;
	cursor: pointer; color: var( --kzcf-navy, #1D2B4F );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	list-style: none; -webkit-user-select: none; user-select: none;
}
.kzcf-menu-btn::-webkit-details-marker { display: none; }
.kzcf-menu-btn::marker { content: ''; }
.kzcf-menu-btn:hover { box-shadow: 0 4px 14px rgba( 29, 43, 79, 0.16 ); border-color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-menu-btn__bars { width: 20px; height: 20px; color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-menu-pop {
	position: absolute; right: 0; top: calc( 100% + 8px );
	min-width: 224px; background: #fff;
	border: 1px solid #ebe7cf; border-radius: 14px;
	box-shadow: 0 14px 36px rgba( 0, 0, 0, 0.16 );
	padding: 8px; z-index: 200;
	display: flex; flex-direction: column;
}
.kzcf-menu-pop[hidden] { display: none; }
.kzcf-menu-pop__item {
	display: block; padding: 10px 12px; border-radius: 10px;
	color: var( --kzcf-ink, #20283c ); text-decoration: none; font-size: 14.5px; white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}
.kzcf-menu-pop__item:hover { background: #eef2f8; color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-menu-pop__acc { font-weight: 700; color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-menu-pop__logout { color: #b3261e; font-weight: 600; }
.kzcf-menu-pop__logout:hover { background: #fdecea; color: #b3261e; }
.kzcf-menu-pop__sep { height: 1px; background: #e3e8e6; margin: 6px 4px; }

/* Mobil: Suchfeld bricht in eine eigene Zeile um (Logo links + Menü-Pille rechts oben). */
@media ( max-width: 640px ) {
	.kzcf-topbar { padding: 10px var( --kzcf-gutter ) 8px; }
	.kzcf-topbar__top { gap: 12px; margin-bottom: 10px; }
	.kzcf-search { order: 3; flex: 1 1 100%; max-width: none; }
	.kzcf-sb { min-height: 52px; }
}
.kzcf-search__in {
	background: #fff;
	border: 2px solid #e7e1c0;
	border-radius: 999px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 );
	padding: 13px 18px 13px 48px;
	font-size: 15px;
}
.kzcf-search__in::placeholder { color: #9a9782; }
.kzcf-search__in:focus { background: #fff; border-color: #1D2B4F; box-shadow: 0 0 0 4px rgba( 29, 43, 79, 0.12 ); }
.kzcf-search__icon { left: 18px; color: #8a8770; opacity: 1; }
.kzcf-search__icon svg { width: 18px; height: 18px; display: block; }

/* ═══════════ Airbnb-Suchleiste (Wo · Wann · Was) ═══════════ */
/* EIN Element, das morpht: kompakt im Ruhezustand, wächst beim Fokus. Bleibt
   dabei durchgehend sichtbar (kein Cross-Fade zweier Elemente). */
.kzcf-sb { position: relative; flex: 1 1 auto; min-height: 56px; width: min( 560px, calc( 100vw - 40px ) ); justify-self: center; }

.kzcf-sb__bar {
	position: absolute; top: 6px; left: 50%;
	transform: translateX( -50% );
	width: min( 560px, calc( 100vw - 40px ) ); height: 52px;
	display: flex; align-items: stretch;
	background: #fff; border: 1px solid #e3e8e6; border-radius: 999px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.08 );
	cursor: pointer; z-index: 6;
	transition: width 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 ), height 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 ), transform 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 ), box-shadow 0.25s ease;
}
.kzcf-sb__bar:hover { box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 ); }
/* Fokus: wächst + gleitet nach unten. */
body.kzcf-sb-open .kzcf-sb__bar {
	width: min( 900px, calc( 100vw - 90px ) ); height: 74px;
	transform: translateX( -50% ) translateY( 40px );
	box-shadow: 0 12px 44px rgba( 0, 0, 0, 0.18 ); cursor: default;
}
/* Container durchlässig, damit Klicks in Leerbereiche das Backdrop erreichen. */
body.kzcf-sb-open .kzcf-sb { pointer-events: none; }
/* Nur die Leiste auf auto (pointer-events vererbt sich an die Kinder). KEIN
   Blanket-`*`, sonst überschreibt es das pointer-events:none der inaktiven Panes,
   die dann (opacity 0, aber übereinandergestapelt) die Klicks abfangen. */
body.kzcf-sb-open .kzcf-sb__bar { pointer-events: auto; }
body.kzcf-sb-open .kzcf-topbar { z-index: 100; }
/* Bei offener Suche darf der (auf der Startseite) auto-hidende Header NICHT
   transformiert/ausgeblendet sein: ein transform/opacity am Header macht das
   position:fixed-Vollbild-Sheet zum Kind-Containing-Block → es kollabierte. */
body.kzcf-sb-open .kzcf-topbar { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
/* Sprach-Switcher (kidszone-translate) bei offener Suche ausblenden – er läge sonst
   über dem Sheet. */
/* Sprach-Switcher bleibt (Review 2026-09-29, Punkt 10); die Suchleiste liegt bei Bedarf darüber. */
body.kzcf-sb-open .kzcf-sb { z-index: 1005; }
/* Scroll-Lock bei offenem Vollbild-Sheet (JS setzt body.top = -scrollY). */
body.kzcf-sb-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
/* Beim offenen Suchfeld den Kontakt-FAB (.kz-fab, z999) und das Cookie-Banner
   KOMPLETT ausblenden – sie liegen z-index-mäßig ÜBER dem Sheet (z200) und wären
   sonst (früher nur geblurrt) ein Fleck über dem Vollbild-Sheet. Weicher Fade. */
.kz-fab,
.cmplz-cookiebanner,
.hpsbb-bar { transition: opacity 0.25s ease, visibility 0.25s ease; }
body.kzcf-sb-open .kz-fab,
body.kzcf-sb-open .cmplz-cookiebanner,
/* Sticky-Buchungsleiste der Detailseite (z9999) verdeckt sonst das offene Such-Sheet. */
body.kzcf-sb-open .hpsbb-bar { opacity: 0; visibility: hidden; pointer-events: none; }

/* Kompakt-Label (Ruhezustand) vs. Label+Feld (Fokus).
   Leer: einzeilig zentriert („Wo"). Gefüllt (.is-set): kleines Label oben-links
   + eingegebener Wert darunter. */
.kzcf-sb__compact { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.kzcf-sb__compact.is-set { align-items: flex-start; }
.kzcf-sb__compact-lbl { font-size: 11px; font-weight: 700; color: #222; line-height: 1.1; display: none; }
.kzcf-sb__compact.is-set .kzcf-sb__compact-lbl { display: block; }
.kzcf-sb__compact-val { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kzcf-sb__compact.is-set .kzcf-sb__compact-val { color: #111; }
.kzcf-sb__lbl, .kzcf-sb__in, .kzcf-sb__val { display: none; }
body.kzcf-sb-open .kzcf-sb__compact { display: none; }
body.kzcf-sb-open .kzcf-sb__lbl { display: block; }
body.kzcf-sb-open .kzcf-sb__in { display: block; }
body.kzcf-sb-open .kzcf-sb__val { display: block; }
/* sanft einblenden beim Öffnen */
body.kzcf-sb-open .kzcf-sb__lbl,
body.kzcf-sb-open .kzcf-sb__in,
body.kzcf-sb-open .kzcf-sb__val { animation: kzcf-sb-fade 0.35s ease both; }
@keyframes kzcf-sb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Trenner zwischen Segmenten (nur Ruhezustand). */
.kzcf-sb__div { width: 1px; align-self: center; height: 24px; background: #e3e8e6; flex: 0 0 auto; }
body.kzcf-sb-open .kzcf-sb__div { opacity: 0; }
/* Schließen-/Zurück-Button standardmäßig aus; nur im mobilen Vollbild-Sheet sichtbar (Regeln im @media unten). */
.kzcf-sb__close { display: none; }
.kzcf-sb__back { display: none; }
.kzcf-sb__handle { display: none; } /* nur im mobilen Sheet sichtbar */
.kzcf-sb__pill { display: none; }
.kzcf-sb__foot { display: none; }

/* Such-Button: rund/nur-Icon im Ruhezustand, Pille mit Text beim Fokus. */
.kzcf-sb__go-lbl { display: none; }
body.kzcf-sb-open .kzcf-sb__go-lbl { display: inline; }

.kzcf-catrow { position: relative; }
body.kzcf-sb-open .kzcf-catrow { pointer-events: none; }

/* Cremiger Vorhang: Oberkante klebt (per JS) an der Unterkante der Suchleiste,
   zieht beim Öffnen nach unten auf und verdeckt die Chips + den Bereich darunter.
   Volle Bildschirmbreite; liegt über den Chips (z4), unter der Leiste (z6). */
.kzcf-curtain {
	position: absolute;
	left: 0; right: 0;
	top: 0; height: 0;
	background: #f4f6f5; z-index: 4; pointer-events: none;
	box-shadow: 0 10px 18px rgba( 0, 0, 0, 0.06 );
	transition: height 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

.kzcf-sb__seg {
	position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: center;
	padding: 0 14px; border-radius: 999px; cursor: pointer; text-align: center;
}
/* Fokus: Segmente linksbündig mit mehr Innenabstand (Label über Feld). */
body.kzcf-sb-open .kzcf-sb__seg { padding: 10px 24px; text-align: left; }
/* Nach dem Reinzoomen: nur das aktive Segment bleibt hervorgehoben, alle
   anderen werden abgedunkelt (weich eingeblendet). */
.kzcf-sb__seg { transition: opacity 0.25s ease; }
body.kzcf-sb-open .kzcf-sb__bar.has-seg .kzcf-sb__seg:not( .is-open ) { opacity: 0.4; }
.kzcf-sb__lbl { font-size: 12px; font-weight: 700; color: #222; }
/* Scoped + wichtige Resets, weil das Theme input[type=text] mit Rahmen/Box-Shadow
   styled (spezifischer als eine reine Klasse). */
.kzcf-sb__bar .kzcf-sb__in {
	border: none !important; background: transparent !important; box-shadow: none !important;
	outline: none; font-size: 14px; color: #222; padding: 2px 0 0; width: 100%;
	height: auto; border-radius: 0; min-height: 0;
}
.kzcf-sb__bar .kzcf-sb__in:focus { border: none !important; box-shadow: none !important; outline: none; }
.kzcf-sb__in::placeholder { color: #808683; }
.kzcf-sb__val { font-size: 14px; color: #808683; padding-top: 3px; }
.kzcf-sb__val.is-set { color: #222; font-weight: 600; }
.kzcf-sb__go {
	flex: 0 0 auto; align-self: center; margin: 0 7px 0 4px;
	display: inline-flex; align-items: center; gap: 8px;
	background: #1D2B4F; color: #fff; border: none; border-radius: 999px;
	width: 40px; height: 40px; justify-content: center; padding: 0;
	font-size: 15px; font-weight: 700; cursor: pointer;
	transition: background 0.15s ease, width 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 ), padding 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}
body.kzcf-sb-open .kzcf-sb__go { width: auto; padding: 0 22px; height: 46px; margin: 6px 6px 6px 4px; }
.kzcf-sb__go:hover { background: #16223f; }
.kzcf-sb__go svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* Beweglicher Highlight-Chip: gleitet hinter das aktive Segment. */
.kzcf-sb__hl {
	position: absolute; top: 0; left: 0; height: 100%;
	background: #fff; border-radius: 999px;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.14 );
	opacity: 0; z-index: 0;
	transition: transform 0.32s cubic-bezier( 0.2, 0.8, 0.2, 1 ), width 0.32s cubic-bezier( 0.2, 0.8, 0.2, 1 ), opacity 0.3s ease;
}
body.kzcf-sb-open .kzcf-sb__hl.is-shown { opacity: 1; }

/* EIN bewegliches Panel: gleitet unter das aktive Segment, Größe animiert.
   Etwas höher (kleiner Überlapp mit der Leisten-Unterkante), damit es optisch
   mit dem cremigen Hintergrund verbunden wirkt. */
.kzcf-sb__panel {
	position: absolute; top: calc( 100% + 2px ); left: 0;
	background: #fff; border: 1px solid #ebe7cf; border-radius: 22px;
	box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.2 );
	overflow: hidden; z-index: 8;
	opacity: 0; pointer-events: none; transform: translateY( 6px );
	transition: transform 0.34s cubic-bezier( 0.2, 0.8, 0.2, 1 ), left 0.34s cubic-bezier( 0.2, 0.8, 0.2, 1 ), width 0.34s cubic-bezier( 0.2, 0.8, 0.2, 1 ), height 0.34s cubic-bezier( 0.2, 0.8, 0.2, 1 ), opacity 0.3s ease;
}
.kzcf-sb__panel.is-shown { opacity: 1; pointer-events: auto; }
/* Panes übereinander gestapelt; Breite/Höhe steuert JS von der aktiven Pane.
   width:max-content, damit die JS-Messung die inhaltsabhängige Größe liefert. */
.kzcf-sb__pane {
	position: absolute; top: 0; left: 0; box-sizing: border-box;
	width: max-content; max-width: min( 600px, calc( 100vw - 60px ) );
	padding: 18px; opacity: 0; pointer-events: none;
	transition: opacity 0.18s ease;
}
.kzcf-sb__pane.is-active { position: relative; opacity: 1; }
/* Vollbreite Panes (Wann/Alter): Inhalt füllt die ganze Panel-Breite. */
.kzcf-sb__panel.is-full .kzcf-sb__pane.is-active { width: 100%; max-width: none; }
.kzcf-sb__panel.is-full .kzcf-alter__chips { justify-content: center; }
/* Interaktiv NUR wenn das Panel sichtbar ist – sonst fängt das geschlossene
   (unsichtbare) Panel Klicks auf den darunterliegenden Kategorie-Chips ab. */
.kzcf-sb__panel.is-shown .kzcf-sb__pane.is-active { pointer-events: auto; }

.kzcf-sb__sug { display: flex; flex-direction: column; min-width: 300px; }
.kzcf-sb__sug .kzcf-geo-sug { text-align: left; border: none; background: none; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; color: #222; }
.kzcf-sb__sug .kzcf-geo-sug:hover { background: #ecf0ef; }
/* Leerer Zustand ohne Platzhaltertext (auf Wunsch entfernt). */
.kzcf-sb__sug:empty { display: none; }
.kzcf-sb__poptitle { font-size: 12px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; }
.kzcf-sb__pop { display: flex; flex-wrap: wrap; gap: 10px; max-width: 420px; }
.kzcf-sb__popchip {
	border: 1px solid #e3e8e6; background: #fff; border-radius: 999px;
	padding: 9px 16px; font-size: 14px; font-weight: 600; color: #333; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.kzcf-sb__popchip:hover { border-color: #1D2B4F; background: #eef2f8; }
.kzcf-sb__wassug:not(:empty) { margin-bottom: 4px; }
.kzcf-sb__sugtype { margin-left: 8px; font-size: 11px; font-weight: 600; color: #9aa1ac; text-transform: uppercase; letter-spacing: 0.4px; }

/* Backdrop – blurrt + leicht abdunkelt den Inhalt unter dem Header (Fokus auf
   die Suche; Blur statt starkem Grau). */
.kzcf-sb__backdrop {
	position: fixed; inset: 0; background: rgba( 29, 43, 79, 0.14 );
	-webkit-backdrop-filter: blur( 7px ); backdrop-filter: blur( 7px );
	opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 90;
}
body.kzcf-sb-open .kzcf-sb__backdrop { opacity: 1; pointer-events: auto; }

/* „Wann"-Ferienwochen-Zeitleiste: Balken je Woche (Heat=Anzahl), nach Periode
   gruppiert, Wochen anklickbar (Snap), Mehrfach-/Bereichsauswahl (Drag). */
.kzcf-wt { min-width: 360px; max-width: 100%; user-select: none; -webkit-user-select: none; }
.kzcf-wt__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.kzcf-wt__title { font-size: 13px; font-weight: 700; color: #444; }
.kzcf-wt__hint { font-size: 11px; color: #a9a789; white-space: nowrap; }
/* Alle Ferienperioden teilen sich die Breite (flex-grow = Anzahl Wochen), damit
   alle Balken ohne horizontales Scrollen nebeneinander sichtbar sind. */
.kzcf-wt__scroll { display: flex; gap: 14px; align-items: flex-end; }
.kzcf-wt__grp { display: flex; flex-direction: column; gap: 6px; flex-basis: 0; flex-shrink: 1; min-width: 0; }
.kzcf-wt__bars { display: flex; gap: 3px; align-items: flex-end; }
.kzcf-wt__plabel { font-size: 11px; font-weight: 600; color: #8a8f98; text-align: center; white-space: nowrap; }
.kzcf-wt__wk {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	border: none; background: none; cursor: pointer; padding: 4px 2px 3px;
	border-radius: 8px; flex: 1 1 0; min-width: 0;
	transition: background 0.12s ease;
}
/* „Füllstand"-Spur: heller Rahmen zeigt die volle Höhe, der gefüllte Teil = Anzahl
   Camps. So ist ohne Zahl sofort erkennbar, dass Höhe die Menge darstellt. */
.kzcf-wt__col {
	display: flex; align-items: flex-end; height: 64px; width: 66%; max-width: 22px;
	background: #eef1f5; border-radius: 5px; overflow: hidden;
}
.kzcf-wt__bar { width: 100%; border-radius: 5px 5px 0 0; background: #c3cbe1; transition: height 0.25s ease, background 0.15s ease; }
.kzcf-wt__wk:hover:not(.is-empty) .kzcf-wt__bar { background: #aab6d6; }
.kzcf-wt__kw { font-size: 10px; font-weight: 700; color: #666; line-height: 1; white-space: nowrap; }
/* Auswahl: nur der BALKEN selbst wird markiert (kein Rahmen/keine getönte Zelle):
   Balken Espresso, Label mit Espresso hervorgehoben. Spur bleibt neutral. */
.kzcf-wt__wk.is-selected .kzcf-wt__bar { background: #1D2B4F; }
.kzcf-wt__wk.is-selected:hover .kzcf-wt__bar { background: #101c37; }
.kzcf-wt__wk.is-selected .kzcf-wt__kw { color: #101c37; font-weight: 800; }
/* Teilweise gewählt (nur einzelne Tage der Woche): dezent, nur der Balken. */
.kzcf-wt__wk.is-partial .kzcf-wt__bar { background: #6b7aa6; }
.kzcf-wt__wk.is-partial:hover .kzcf-wt__bar { background: #586897; }
.kzcf-wt__wk.is-partial .kzcf-wt__kw { color: #586897; font-weight: 800; }
/* Leer (0 Camps): ausgegraut, nicht wählbar. */
.kzcf-wt__wk.is-empty { opacity: 0.35; cursor: default; }
.kzcf-wt__wk.is-empty:hover { background: none; }
.kzcf-wt__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e8e6; }
.kzcf-wt__sum { font-size: 13px; font-weight: 600; color: #333; }
.kzcf-wt__reset { border: none; background: none; color: #6b7480; text-decoration: underline; font-size: 13px; cursor: pointer; }
.kzcf-wt__reset:hover { color: #333; }
.kzcf-wt__reset[hidden] { display: none; }
.kzcf-wt--na { color: #808683; font-size: 14px; padding: 10px; }

/* „Alter"-Picker: „Wie alt ist dein Kind?" + Alters-Chips. */
.kzcf-alter { padding: 4px 2px; }
.kzcf-alter__head { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; }
.kzcf-alter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kzcf-alter__chip {
	width: 44px; height: 44px; border: 1.5px solid #e3e8e6; background: #fff; color: #333;
	border-radius: 50%; font-size: 15px; font-weight: 700; cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.kzcf-alter__chip:hover { border-color: #1D2B4F; }
.kzcf-alter__chip.is-active { background: #1D2B4F; border-color: #1D2B4F; color: #fff; }
.kzcf-alter__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e3e8e6; }
.kzcf-alter__sum { font-size: 13px; font-weight: 600; color: #333; }
.kzcf-alter__reset { border: none; background: none; color: #6b7480; text-decoration: underline; font-size: 13px; cursor: pointer; }
.kzcf-alter__reset:hover { color: #333; }
.kzcf-alter__reset[hidden] { display: none; }

/* Monats-Kalender unter den Balken: nur relevante Monate, Ferienwochen-Tage
   markiert (Heat), Klick wählt die ganze Woche. */
.kzcf-wtcal {
	display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
	max-height: min( 440px, 46vh ); overflow-y: auto; margin-top: 14px; padding-top: 14px;
	border-top: 1px solid #e3e8e6;
}
.kzcf-wtcal::-webkit-scrollbar { width: 8px; }
.kzcf-wtcal::-webkit-scrollbar-thumb { background: #e3e8e6; border-radius: 4px; }
.kzcf-wtcal__mo { min-width: 0; }
.kzcf-wtcal__mohead { font-weight: 700; font-size: 13px; color: #333; margin-bottom: 6px; }
.kzcf-wtcal__grid { display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 2px; }
.kzcf-wtcal__dow { font-size: 10px; color: #9aa1ac; text-align: center; padding-bottom: 2px; }
.kzcf-wtcal__day {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	font-size: 12px; border: none; background: none; border-radius: 7px; color: #333;
}
.kzcf-wtcal__day.is-blank { visibility: hidden; }
.kzcf-wtcal__day.is-plain { color: #b7bcc6; } /* kein Ferienwochen-Tag */
.kzcf-wtcal__day.is-fw { cursor: pointer; font-weight: 600; touch-action: none; } /* Finger-Drag wählt Zeitraum, statt zu scrollen */
/* Ferienwochen-Tage einheitlich hell (keine Heat-Töne mehr – konsistent mit den
   neutralen Balken; Anzahl je Woche zeigt das Balken-Chart darüber). */
.kzcf-wtcal__day.is-fw.kzcf-wt-h0,
.kzcf-wtcal__day.is-fw.kzcf-wt-h1,
.kzcf-wtcal__day.is-fw.kzcf-wt-h2,
.kzcf-wtcal__day.is-fw.kzcf-wt-h3,
.kzcf-wtcal__day.is-fw.kzcf-wt-h4 { background: #e7ebf4; }
.kzcf-wtcal__day.is-fw.is-wkhover { box-shadow: inset 0 0 0 2px #1D2B4F; }
.kzcf-wtcal__day.is-fw.is-selected { background: #1D2B4F; color: #fff; }
/* Vorschau beim Ziehen eines Zeitfensters. */
.kzcf-wtcal__day.is-fw.is-winpreview { background: #dfe4f1; color: #111; }
.kzcf-wtcal__day.is-fw.is-empty { opacity: 0.4; cursor: default; }
@media ( max-width: 640px ) {
	.kzcf-wtcal { grid-template-columns: 1fr; }
}

/* Mobil: Leiste vertikal. Highlight-Chip + bewegliches Panel sind eine
   Desktop-Verbesserung; hier statisches, volle-Breite-Panel (JS-Inline-Größen
   per !important überschrieben). */
@media ( max-width: 760px ) {
	/* Suchleiste bekommt eine eigene volle Zeile unter Logo + Menü (Flex statt
	   Desktop-Raster; die volle Zeile ist damit automatisch mittig). */
	.kzcf-topbar__top { display: flex; flex-wrap: wrap; gap: 12px; }
	.kzcf-sb { flex: 1 1 100%; order: 3; min-height: 46px; width: auto; }
	/* Logo bleibt oben links, nur kleiner (Dennis 30.09.). */
	.kzcf-logo--anim .kz-logo { height: 24px; }
	.kzcf-logo img { height: 36px; }

	/* RUHEZUSTAND (Dennis 30.09.): nur eine weiße Pille „Jetzt suchen" (+ kleine Zusammenfassung
	   der Auswahl). Die eigentliche Leiste erscheint erst als Sheet. */
	.kzcf-sb__bar { display: none; }
	body.kzcf-sb-open .kzcf-sb__bar { display: flex; }
	.kzcf-sb__pill {
		display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 14px;
		background: #fff; border: 1px solid #e3e8e6; border-radius: 999px; box-shadow: 0 2px 10px rgba( 0, 0, 0, .08 );
		cursor: pointer; text-align: left; color: #1D2B4F; font-family: inherit;
	}
	.kzcf-sb__pill svg { width: 18px; height: 18px; flex: 0 0 auto; stroke: #1D2B4F; }
	.kzcf-sb__pill-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
	.kzcf-sb__pill-main { font-size: 14.5px; font-weight: 800; }
	.kzcf-sb__pill-sub { font-size: 11.5px; font-weight: 600; color: #6b716f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
	.kzcf-sb__pill-sub[hidden] { display: none; }
	body.kzcf-sb-open .kzcf-sb__pill { visibility: hidden; }
	/* Karten-Pille (Filterseite) bei offenem Sheet weg. */
	body.kzcf-sb-open .kzcf-maptoggle { display: none !important; }

	/* GEÖFFNET (Review 2026-09-29, Punkt 8): Bottom-Sheet, das von unten hochschießt.
	   Vier Abschnitte (Wo/Wann/Alter/Was) als Akkordeon über die volle Höhe, nur einer offen,
	   „Suchen" füllt unten den restlichen Platz. Kein X: oben ein Griff zum Runterziehen. */
	body.kzcf-sb-open .kzcf-sb__bar {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0;
		width: 100vw; height: 100vh; height: 100dvh;
		transform: none; border-radius: 0; background: #fff;
		flex-direction: column; align-items: stretch;
		padding: 6px 14px 14px; padding-bottom: max( 14px, env( safe-area-inset-bottom ) ); gap: 8px;
		overflow: hidden; z-index: 200; box-shadow: none;
		animation: kzcf-sheet-up .34s cubic-bezier( .2, .8, .2, 1 ) !important;
		will-change: transform;
	}
	body.kzcf-sb-open .kzcf-sb__bar.is-closing { animation: kzcf-sheet-down .22s ease-in forwards !important; }
	body.kzcf-sb-open .kzcf-sb__bar[style*="translateY"] { animation: none !important; } /* während/nach Drag: nur die Transition */
	@keyframes kzcf-sheet-up { from { transform: translateY( 100% ); } to { transform: none; } }
	@keyframes kzcf-sheet-down { from { transform: none; } to { transform: translateY( 100% ); } }
	.kzcf-sb__hl { display: none; }
	body.kzcf-sb-open .kzcf-sb__div { display: none; }
	/* Griff (Drag-to-close): dezenter Strich, große Touch-Fläche. */
	.kzcf-sb__handle { display: none; }
	body.kzcf-sb-open .kzcf-sb__handle {
		display: block; flex: 0 0 auto; width: 100%; height: 26px; margin: 0 0 2px; cursor: grab;
		background: linear-gradient( #cfd5df, #cfd5df ) center / 44px 5px no-repeat; border-radius: 999px;
		touch-action: none;
	}

	/* Abschnitt = Zeile mit Label + aktueller Wahl + Chevron; offen: navy Rahmen, Eingabe sichtbar. */
	body.kzcf-sb-open .kzcf-sb__seg {
		flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px 12px;
		padding: 15px 16px; border-radius: 16px; background: #f2f4f3; text-align: left;
		cursor: pointer; border: 1.5px solid transparent; opacity: 1 !important;
		transition: background .15s ease, border-color .15s ease;
	}
	body.kzcf-sb-open .kzcf-sb__seg.is-open { background: #fff; border-color: #1D2B4F; box-shadow: 0 6px 18px rgba( 29, 43, 79, .10 ); }
	body.kzcf-sb-open .kzcf-sb__lbl { display: block; font-size: 15px; font-weight: 800; color: #1D2B4F; min-width: 54px; }
	body.kzcf-sb-open .kzcf-sb__seg.is-open .kzcf-sb__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; min-width: 0; flex: 1 1 100%; }
	body.kzcf-sb-open .kzcf-sb__seg::after {
		content: ""; margin-left: auto; width: 9px; height: 9px; flex: 0 0 auto; order: 5;
		border-right: 2px solid #9aa1ac; border-top: 2px solid #9aa1ac; transform: rotate( 45deg ); transition: transform .2s ease;
	}
	body.kzcf-sb-open .kzcf-sb__seg.is-open::after { transform: rotate( 135deg ); position: absolute; right: 16px; top: 18px; border-color: #1D2B4F; }
	body.kzcf-sb-open .kzcf-sb__seg.is-open { position: relative; flex-wrap: wrap; }
	/* FOKUS-MODUS (Dennis 30.09.): nur der aktive Abschnitt + sein Inhalt, übrige Zeilen und „Suchen" weg,
	   unten „Weiter" (bzw. „Fertig"). */
	body.kzcf-sb-open.kzcf-sb-editing .kzcf-sb__seg:not( .is-open ) { display: none; }
	body.kzcf-sb-open.kzcf-sb-editing .kzcf-sb__go { display: none; }
	body.kzcf-sb-open.kzcf-sb-editing .kzcf-sb__foot { display: flex; order: 100; flex: 0 0 auto; gap: 10px; margin: 8px 0 0; }
	.kzcf-sb__over, .kzcf-sb__next { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 16px; font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit; }
	.kzcf-sb__over { background: #fff; color: #1D2B4F; border: 1.5px solid #1D2B4F; }
	.kzcf-sb__next { background: #1D2B4F; color: #fff; border: 0; }
	body.kzcf-sb-open.kzcf-sb-editing .kzcf-sb__seg.is-open::after { display: none; }
	/* Zu: Kompaktwert (gewählt) sichtbar, Eingaben versteckt. */
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__in,
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__val { display: none; }
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__compact { display: none; }
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__compact.is-set { display: block; }
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__compact.is-set .kzcf-sb__compact-lbl { display: none; }
	body.kzcf-sb-open .kzcf-sb__seg:not( .is-open ) .kzcf-sb__compact { flex: 1 1 auto; min-width: 0; }
	body.kzcf-sb-open .kzcf-sb__compact-val { display: block; font-size: 15px; font-weight: 600; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
	/* Offen: Eingabefeld bzw. Wert unter dem Label. */
	body.kzcf-sb-open .kzcf-sb__seg.is-open .kzcf-sb__compact { display: none; }
	body.kzcf-sb-open .kzcf-sb__seg.is-open .kzcf-sb__in { display: block; font-size: 18px; padding: 0; flex: 1 1 100%; }
	body.kzcf-sb-open .kzcf-sb__seg.is-open .kzcf-sb__val { display: block; font-size: 16px; color: #333; flex: 1 1 100%; padding: 0; }

	/* Panel des offenen Abschnitts (per JS direkt darunter einsortiert): passt sich dem Inhalt an, scrollt intern. */
	body.kzcf-sb-open .kzcf-sb__panel {
		position: relative; top: 0; inset: auto;
		left: 0 !important; width: 100% !important; height: auto !important;
		flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
		opacity: 1; pointer-events: auto; transform: none;
		box-shadow: none; border: none; border-radius: 0; background: transparent;
	}
	body.kzcf-sb-open:not( .kzcf-sb-editing ) .kzcf-sb__panel { display: none; }
	body.kzcf-sb-open .kzcf-sb__pane { position: relative; width: 100%; max-width: none; padding: 4px 4px 6px; opacity: 1; }
	body.kzcf-sb-open .kzcf-sb__pane:not( .is-active ) { display: none; }
	/* „Wo": mobil KEINE Karte im Sheet. */
	body.kzcf-sb-open .kzcf-sb__pane[data-pane="wo"] .kzcf-womap,
	body.kzcf-sb-open .kzcf-sb__pane[data-pane="wo"] #kzcf-wo-map { display: none !important; }

	/* Getippte Vorschläge auf Mobile als übersichtliche Liste (volle Breite, Zeilen
	   mit Trenner) statt großer, umbrechender Pillen. */
	body.kzcf-sb-open .kzcf-sb__sug { min-width: 0; }
	body.kzcf-sb-open .kzcf-sb__sug .kzcf-geo-sug { padding: 15px 12px; font-size: 15px; border-radius: 10px; border-bottom: 1px solid #eef1f0; }
	body.kzcf-sb-open .kzcf-sb__sug .kzcf-geo-sug:last-child { border-bottom: none; }
	body.kzcf-sb-open .kzcf-sb__wassug .kzcf-sb__pop { flex-direction: column; gap: 0; max-width: none; }
	body.kzcf-sb-open .kzcf-sb__wassug .kzcf-sb__sugchip {
		display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
		border: none; border-bottom: 1px solid #eef1f0; border-radius: 0;
		padding: 15px 6px; text-align: left; box-shadow: none; white-space: normal; font-weight: 600; font-size: 15px;
	}
	body.kzcf-sb-open .kzcf-sb__wassug .kzcf-sb__sugchip:hover { background: #f4f6fb; }
	body.kzcf-sb-open .kzcf-sb__wassug .kzcf-sb__sugtype { margin-left: auto; flex: 0 0 auto; }

	/* „Suchen" füllt unten den restlichen Platz. */
	body.kzcf-sb-open .kzcf-sb__go { order: 100; margin: auto 0 0; width: 100%; justify-content: center; flex: 0 0 auto; height: 56px; border-radius: 16px; font-size: 16px; }
	/* Sobald ein Abschnitt offen ist: die übrigen kompakt (kleiner) darunter. */
	/* Wo: Vorschläge direkt unter dem Eingabefeld, gut antippbar. */
	body.kzcf-sb-open .kzcf-sb__pane[data-pane="wo"] .kzcf-sb__sug { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
	body.kzcf-sb-open .kzcf-sb__pane[data-pane="wo"] .kzcf-sb__sug:empty { display: none; }

	/* Kein X und kein Zurück-Button mehr (Griff oben schließt). */
	.kzcf-sb__close, body.kzcf-sb-open .kzcf-sb__close, .kzcf-sb__back, body.kzcf-sb-open .kzcf-sb__back { display: none !important; }
	/* Sprachmenü bleibt (Punkt 10): liegt bei offenem Sheet nur darunter statt zu verschwinden. */
	body.kzcf-sb-open #kzt-switcher { z-index: 1 !important; pointer-events: none; }

	/* ── Wann: Kalenderwochen-Balken als Horizontal-Scroller ── */
	body.kzcf-sb-open .kzcf-wt { min-width: 0; }
	body.kzcf-sb-open .kzcf-wt__scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; scroll-snap-type: x proximity; }
	body.kzcf-sb-open .kzcf-wt__scroll::-webkit-scrollbar { display: none; }
	body.kzcf-sb-open .kzcf-wt__grp { flex: 0 0 auto; scroll-snap-align: start; }
	body.kzcf-sb-open .kzcf-wt__wk { flex: 0 0 auto; min-width: 30px; }
	body.kzcf-sb-open .kzcf-wt__col { width: 22px; max-width: 22px; }

	/* ── Wann: Kalender ein Monat pro Ansicht, horizontal wischen ── */
	body.kzcf-sb-open .kzcf-wtcal {
		display: flex; grid-template-columns: none; gap: 0; max-height: none; overflow: visible;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	body.kzcf-sb-open .kzcf-wtcal::-webkit-scrollbar { display: none; }
	body.kzcf-sb-open .kzcf-wtcal__mo { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; padding: 0 2px; }
	.kzcf-cal { flex-direction: column; gap: 14px; }

	/* Vorhang unter dem Vollbild-Sheet nicht nötig. */
	body.kzcf-sb-open .kzcf-curtain { display: none; }

	/* ── Filterseite mobil (Review 2026-09-29, Punkte 25–27) ──
	   Kategorie-Chips + „Filter"-Chip verlassen die Chip-Zeile (JS verschiebt sie). */
	.kzcf-catrow.is-empty-mobile { display: none; }
	/* Filter-Icon (Slider) ohne Pille, direkt links neben der Suchleiste in derselben Zeile. */
	.kzcf-topbar__top .kzcf-filter-btn--icon {
		flex: 0 0 auto; position: relative; width: 44px; height: 46px; margin: 0; padding: 0;
		border: 0; background: none; box-shadow: none; font-size: 0; line-height: 0; gap: 0;
		display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
	}
	.kzcf-topbar__top .kzcf-filter-btn--icon:active { background: #eef1f8; }
	.kzcf-topbar__top .kzcf-filter-btn--icon .kzcf-filter-btn__ico {
		font-size: 0; width: 26px; height: 26px; display: block;
		background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2B4F' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Ccircle cx='9' cy='6' r='2.4' fill='%23fff'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Ccircle cx='15' cy='12' r='2.4' fill='%23fff'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='7' cy='18' r='2.4' fill='%23fff'/%3E%3C/svg%3E" ) center / contain no-repeat;
	}
	.kzcf-topbar__top .kzcf-filter-btn--icon .kzcf-filter-btn__badge { position: absolute; top: 2px; right: 0; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; line-height: 1; }
	/* Suchleiste teilt sich die Zeile mit dem Icon. */
	.kzcf-topbar__top .kzcf-sbrow { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: 6px; min-width: 0; }
	.kzcf-sbrow .kzcf-sb { flex: 1 1 auto; width: auto; min-width: 0; order: 0; }
	.kzcf-modal .kzcf-sec--sort .kzcf-sort-wrap { font-size: 15px; color: #222; }
	.kzcf-modal .kzcf-sec--sort .kzcf-sort { font-size: 15px; padding: 8px 10px; border: 1px solid #e3e8e6; border-radius: 10px; }
	/* Kategorie-Abschnitt im Modal: Chips umbrechend. */
	.kzcf-modal .kzcf-sec--cats .kzcf-cats { flex-wrap: wrap; overflow: visible; padding: 0; border: 0; gap: 8px; }
	/* Filter-Modal bildschirmfüllend. */
	.kzcf-modal.kzcf-modal { align-items: stretch; justify-content: stretch; }
	.kzcf-modal .kzcf-modal__box { width: 100vw; max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; animation: kzcf-sheet-up .3s cubic-bezier( .2, .8, .2, 1 ); }
	.kzcf-modal .kzcf-modal__head { padding-top: max( 16px, env( safe-area-inset-top ) ); }
	.kzcf-modal .kzcf-modal__foot { padding-bottom: max( 14px, env( safe-area-inset-bottom ) ); }
}

/* Kategorien als Chips (Pillen), gleiche Optik wie der Filter-Button.
   Trennlinie links grenzt sie vom Filter-Button ab. */
.kzcf-cats {
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
	padding-left: 14px; border-left: 1px solid #e6dfba;
}
.kzcf-cats::-webkit-scrollbar { display: none; }
.kzcf-cat {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border: 1px solid #e3e8e6; background: #fff; border-radius: 999px;
	cursor: pointer; color: #333; white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.kzcf-cat__ico { font-size: 15px; line-height: 1; }
.kzcf-cat__lbl { font-size: 13px; font-weight: 600; }
.kzcf-cat:hover { border-color: #d0c99a; box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 ); }
/* Keine Camps mit den aktuellen Filtern -> ausgegraut, nicht klickbar. */
.kzcf-cat.is-empty { opacity: 0.4; pointer-events: none; box-shadow: none; }
.kzcf-cat.is-active { background: #1D2B4F; border-color: #1D2B4F; color: #fff; }
.kzcf-cat.is-active .kzcf-cat__lbl { font-weight: 700; }
/* Mobil: fixen Kopfbereich flacher halten (mehr Platz für Ergebnisse). */
@media ( max-width: 760px ) {
	.kzcf-topbar { padding: 8px var( --kzcf-gutter ) 14px; } /* mehr Luft zum unteren Header-Rand (Review 2026-09-29, Punkt 8) */
	.kzcf-topbar__top { margin-bottom: 8px; }
	.kzcf-sb { min-height: 46px; }
	.kzcf-sb__bar { height: 46px; }
	.kzcf-cats { padding-left: 0; border-left: 0; }
	.kzcf-cat { padding: 5px 11px; }
	.kzcf-cat__ico { font-size: 14px; }
	.kzcf-cat__lbl { font-size: 12.5px; }
	.kzcf-headbar { margin-top: 8px; }
	.kzcf-count, .kzcf-sort-wrap { font-size: 13px; }
	/* Header gleitet beim Runterscrollen weg (Autohide unten per JS). */
	.kzcf-topbar { transition: transform .3s cubic-bezier(.16,1,.3,1); }
	body.kzcf-hdr-hidden .kzcf-topbar { transform: translateY(-110%); }
	/* Mobil: KEINE Animationen im Suchmenü (Sheet, Segmente, Panel, Backdrop, Curtain)
	   – erscheint/schließt direkt, ohne Übergänge. */
	/* (Die Leiste selbst ist ausgenommen: sie hat die Slide-up-Animation und die Gleit-Transition beim Runterziehen.) */
	.kzcf-sb__seg, .kzcf-sb__seg *, .kzcf-sb__panel, .kzcf-sb__panel *, .kzcf-sb__hl, .kzcf-sb__go, .kzcf-sb__foot,
	.kzcf-sb__backdrop, .kzcf-curtain { transition: none !important; animation: none !important; }
}

/* Filter-Button + Chip-Zeile: kleiner und mittig am Bildschirm zentriert. */
.kzcf-catrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.kzcf-filter-btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid #e3e8e6; background: #fff; padding: 7px 14px;
	border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; color: #222;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kzcf-filter-btn:hover { border-color: #1D2B4F; box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.1 ); }
.kzcf-filter-btn__ico { font-size: 14px; }
.kzcf-filter-btn__badge {
	background: #1D2B4F; color: #fff; border-radius: 999px;
	min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; padding: 0 6px;
}

/* Filter-Modal */
/* Design-Tokens auch am Modal setzen: das Modal hängt außerhalb von .kzcf-app
   (direkt am body), sonst wäre var(--kzcf-red) hier leer → transparente Badges. */
.kzcf-modal {
	--kzcf-red: #1D2B4F;
	--kzcf-red-weak: #e7ebf4;
	--kzcf-teal: #2E7CF0;
	--kzcf-teal-weak: #e7f0fe;
	--kzcf-teal-ink: #1a5fc0;
	--kzcf-bg: #f4f6f5;
	--kzcf-surface: #ffffff;
	--kzcf-surface-2: #ecf0ef;
	--kzcf-cream: #ecf0ef;
	--kzcf-ink: #20283c;
	--kzcf-muted: #6b716f;
	--kzcf-faint: #99a09d;
	--kzcf-border: #e3e8e6;
	--kzcf-cluster: #1D2B4F;
	--kzcf-success: #2FA84F;
	--kzcf-gold: #f5a623;
	--kzcf-brandred: #E8402A;   /* verspielte Logo-Akzente */
	--kzcf-brandblue: #2E7CF0;
	--kzcf-brandgreen: #2FA84F;
	--kzcf-brandyellow: #FFC61A;
	--kzcf-navy: #1D2B4F;
	--kzcf-radius: 16px;
	--kzcf-shadow: 0 6px 22px rgba( 22, 28, 26, 0.08 );
	--kzcf-shadow-lg: 0 14px 40px rgba( 22, 28, 26, 0.16 );
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; transition: opacity 0.28s ease;
}
/* Sanft ausfaden beim Schließen (Blur geht langsam weg). */
.kzcf-modal.is-closing { opacity: 0; pointer-events: none; }
.kzcf-modal[hidden] { display: none; }
.kzcf-modal__backdrop { position: absolute; inset: 0; background: rgba( 30, 28, 10, 0.28 ); -webkit-backdrop-filter: blur( 7px ); backdrop-filter: blur( 7px ); }
.kzcf-modal__box {
	position: relative; width: min( 720px, calc( 100vw - 32px ) ); max-height: min( 88vh, 800px );
	background: #fff; border-radius: 18px; display: flex; flex-direction: column; overflow: hidden;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, 0.32 );
	animation: kzcf-modal-in 0.22s ease;
	transition: transform 0.26s ease, opacity 0.26s ease;
}
@keyframes kzcf-modal-in { from { opacity: 0; transform: translateY( 24px ) scale( 0.98 ); } to { opacity: 1; transform: none; } }
/* Schließen: die Reinkomm-Animation rückwärts (Box gleitet nach unten + schrumpft). */
.kzcf-modal.is-closing .kzcf-modal__box { opacity: 0; transform: translateY( 24px ) scale( 0.98 ); }
.kzcf-modal__head { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 20px; border-bottom: 1px solid #e3e8e6; }
.kzcf-modal__head strong { font-size: 16px; }
.kzcf-modal__x { position: absolute; left: 14px; top: 50%; transform: translateY( -50% ); border: none; background: none; font-size: 15px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.kzcf-modal__x:hover { background: #f2f2f2; }
.kzcf-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 24px 8px; }
.kzcf-modal__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #e3e8e6; }
.kzcf-modal__apply { border: none; background: #111; color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 12px; cursor: pointer; transition: background 0.15s ease; }
.kzcf-modal__apply:hover { background: #1D2B4F; }

/* Filter-Abschnitte */
.kzcf-sec { padding: 22px 0; border-bottom: 1px solid #e3e8e6; }
.kzcf-sec:last-child { border-bottom: none; }
.kzcf-sec__title { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.kzcf-sec__badge { display: inline-block; margin-left: 8px; background: #1D2B4F; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 1px 8px; vertical-align: middle; }
.kzcf-opts--sec { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.kzcf-sec .kzcf-opt-search { margin-bottom: 10px; }

/* Preis-Stufen (feste Werte statt Slider) */
.kzcf-price-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.kzcf-price-step {
	border: 1.5px solid #e3e8e6; background: #fff; color: #333;
	border-radius: 999px; padding: 8px 15px; font-size: 14px; font-weight: 700;
	cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.kzcf-price-step:hover { border-color: #d0c99a; }
.kzcf-price-step.is-active { background: #1D2B4F; border-color: #1D2B4F; color: #fff; }

/* Preis-Histogramm SITZT direkt auf der (dünnen) Slider-Linie: Balken wachsen von
   der Linie nach oben, die Knöpfe gleiten auf derselben Linie. Seitlicher
   Innenabstand = halbe Knopfbreite (13px), damit Balken zum Slider fluchten. */
.kzcf-pricehist { position: relative; height: 64px; margin: 6px 8px 0; touch-action: none; cursor: pointer; }
.kzcf-histo { position: absolute; left: 0; right: 0; top: 0; bottom: 10px; display: flex; align-items: flex-end; gap: 1px; padding: 0 13px; box-sizing: border-box; }
.kzcf-histo__bar { flex: 1 1 auto; background: #e3e3e3; border-radius: 2px 2px 0 0; min-height: 3px; transition: background 0.15s ease; }
.kzcf-histo__bar.is-mark { background: #1D2B4F; }

/* Stichwortsuche */
.kzcf-search { position: relative; margin: 0 0 12px; }
.kzcf-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY( -50% ); font-size: 16px; opacity: 0.6; pointer-events: none; }
.kzcf-search__in {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px 13px 44px;
	border: 2px solid #e3e8e6;
	border-radius: 14px;
	font-size: 16px;
}
.kzcf-search__in:focus { outline: none; border-color: #1D2B4F; }

/* ── Filterleiste ───────────────────────────────────────── */
.kzcf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 18px;
}
.kzcf-filter { position: relative; }
.kzcf-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e3e8e6;
	background: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #222;
	line-height: 1.2;
}
.kzcf-filter__btn:hover { background: #ecf0ef; }
.kzcf-filter__btn.is-active { border-color: #1D2B4F; background: #eef2f8; }
.kzcf-filter__badge {
	background: #1D2B4F;
	color: #fff;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	padding: 0 5px;
}
.kzcf-caret { color: #808683; font-size: 11px; }

.kzcf-filter__pop {
	position: absolute;
	z-index: 50;
	top: calc( 100% + 6px );
	left: 0;
	min-width: 230px;
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e8e6;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.15 );
	padding: 8px;
}
.kzcf-filter__pop[hidden] { display: none; }
.kzcf-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
}
.kzcf-opt:hover { background: #ecf0ef; }
.kzcf-opt input { accent-color: #1D2B4F; }
.kzcf-opt__name { flex: 1; }
.kzcf-opt__count { color: #9a9a9a; font-size: 12px; font-variant-numeric: tabular-nums; }
.kzcf-opt.is-empty { opacity: 0.4; }
.kzcf-opt.is-empty:hover { background: none; cursor: default; }

/* Chip-Variante (Sportart / Sprache): große anklickbare Pills mit Custom-Icon. */
.kzcf-opts--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-height: none;
	overflow: visible;
}
.kzcf-opt--chip {
	flex: 0 0 auto;
	gap: 10px;
	padding: 9px 18px 9px 11px;
	border: 1px solid #e0e6e4;
	border-radius: 999px;
	background: #f5f7f6;
	font-size: 15px;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.kzcf-opt--chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}
.kzcf-opt--chip__ico {
	display: inline-flex;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}
.kzcf-opt--chip__ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transform-origin: center 60%;
	transition: transform 0.2s ease;
	will-change: transform;
}
.kzcf-opt--chip .kzcf-opt__name { flex: 0 0 auto; font-weight: 700; color: #2a2a2a; }
.kzcf-opt--chip .kzcf-opt__count {
	background: #e6ecea;
	color: #6f7573;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.kzcf-opt--chip:hover {
	background: #fff;
	border-color: #d9d3b2;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.10 );
}
.kzcf-opt--chip:hover .kzcf-opt--chip__ico img {
	transform: scale( 1.12 );
}
.kzcf-opt--chip:has( input:checked ) {
	border-color: var( --kzcf-red );
	background: rgba( 29, 43, 79, 0.09 );
	box-shadow: 0 5px 16px rgba( 29, 43, 79, 0.15 );
}
.kzcf-opt--chip:has( input:checked ) .kzcf-opt__name { color: #16223f; }
.kzcf-opt--chip:has( input:checked ) .kzcf-opt__count { background: var( --kzcf-red ); color: #fff; }
.kzcf-opt--chip:has( input:checked ) .kzcf-opt--chip__ico img { transform: scale( 1.08 ); }
.kzcf-opt--chip.is-empty { opacity: 0.4; }
.kzcf-opt--chip.is-empty:hover {
	background: #f5f7f6;
	border-color: #e6ecea;
	box-shadow: none;
	transform: none;
	cursor: default;
}
.kzcf-opt--chip.is-empty:hover .kzcf-opt--chip__ico img { animation: none; }
@keyframes kzcf-chip-pop {
	0%   { transform: scale( 1 ) rotate( 0deg ); }
	30%  { transform: scale( 1.28 ) rotate( -9deg ); }
	55%  { transform: scale( 1.12 ) rotate( 7deg ); }
	78%  { transform: scale( 1.2 ) rotate( -4deg ); }
	100% { transform: scale( 1.15 ) rotate( 0deg ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.kzcf-opt--chip:hover .kzcf-opt--chip__ico img { animation: none; transform: scale( 1.1 ); }
}
.kzcf-reset-all {
	border: none;
	background: none;
	color: #1D2B4F;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	margin-left: 4px;
}
.kzcf-reset-all[hidden] { display: none; }

/* Weitere Filter */
.kzcf-more-btn {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px dashed #b7bcc6; background: #fff;
	padding: 8px 14px; border-radius: 999px; cursor: pointer;
	font-size: 14px; font-weight: 600; color: #333;
}
.kzcf-more-btn:hover { background: #ecf0ef; }
.kzcf-more-btn.is-open { border-style: solid; border-color: #1D2B4F; background: #eef2f8; }
.kzcf-more {
	flex-basis: 100%;
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: 8px; padding-top: 12px;
	border-top: 1px dashed #e2e2e2;
}
.kzcf-more[hidden] { display: none; }

/* Aktive Filter-Chips */
.kzcf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.kzcf-active:empty { display: none; margin: 0; }
/* Reset-Button (ersetzt die früheren Filter-Chips): navy Outline-Pille. */
.kzcf-clear-all {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1.5px solid var( --kzcf-navy, #1D2B4F ); background: #fff;
	color: var( --kzcf-navy, #1D2B4F ); font-weight: 700; font-size: 13.5px;
	padding: 8px 15px; border-radius: 999px; cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.kzcf-clear-all:hover { background: var( --kzcf-navy, #1D2B4F ); color: #fff; transform: translateY( -1px ); box-shadow: 0 6px 16px rgba( 29, 43, 79, 0.25 ); }
.kzcf-clear-all svg { display: block; }

/* Option-Suche im Dropdown */
.kzcf-filter__pop { display: flex; flex-direction: column; overflow: hidden; }
.kzcf-opts { overflow-y: auto; }
.kzcf-opt-search {
	width: 100%; box-sizing: border-box;
	padding: 7px 10px; border: 1px solid #e3e8e6; border-radius: 8px;
	font-size: 13px; margin-bottom: 6px;
}
.kzcf-opt-search:focus { outline: none; border-color: #1D2B4F; }

/* Sortierung */
.kzcf-sort-wrap { font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 6px; }
.kzcf-sort { padding: 7px 10px; border: 1px solid #e3e8e6; border-radius: 10px; font-size: 14px; background: #fff; cursor: pointer; }
.kzcf-sort:focus { outline: none; border-color: #1D2B4F; }

/* Preis-Range-Slider – die Linie liegt am Fuß der Balken (Baseline). */
.kzcf-price { display: flex; flex-direction: column; gap: 4px; min-width: 240px; padding: 4px 4px 2px; }
.kzcf-slider { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; margin: 0; }
.kzcf-slider__track { position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: #dcdcdc; border-radius: 2px; }
.kzcf-slider__fill { position: absolute; top: 9px; height: 2px; background: #1D2B4F; border-radius: 2px; }
.kzcf-slider__in { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; background: none; border: none !important; outline: none; box-shadow: none !important; -webkit-appearance: none; appearance: none; pointer-events: none; }
.kzcf-slider__in::-webkit-slider-runnable-track { background: none; border: none; height: 20px; }
/* Native Thumbs UNSICHTBAR – nur für die Interaktion (Ziehen); sichtbar ist der
   per JS positionierte Custom-Knopf (.kzcf-slider__knob), damit Fill + Knopf immer
   exakt gleich sitzen, unabhängig von Browser-Thumb-Eigenheiten. */
.kzcf-slider__in::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: none; width: 26px; height: 26px; border: none; background: transparent; box-shadow: none; }
.kzcf-slider__in::-moz-range-track { background: none; height: 20px; }
.kzcf-slider__in::-moz-range-thumb { pointer-events: none; width: 26px; height: 26px; border: none; background: transparent; box-shadow: none; }
/* Sichtbarer Slider-Knopf (per JS positioniert; left = Mittelpunkt, sitzt auf der Linie). */
.kzcf-slider__knob { position: absolute; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #1D2B4F, 0 1px 4px rgba( 0, 0, 0, 0.25 ); pointer-events: none; transform: translateX( -50% ); z-index: 3; }
.kzcf-slider__vals { text-align: center; font-size: 14px; font-weight: 700; color: #222; }
/* Bearbeitbare Min/Max-Preis-Felder unter dem Slider (links = Min, rechts = Max). */
.kzcf-price__fields { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 8px 12px; }
.kzcf-price__field { font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 5px; }
.kzcf-price__field--max { flex-direction: row-reverse; }
.kzcf-price__field input { width: 74px; padding: 8px 10px; border: 1.5px solid #e3e8e6; border-radius: 10px; font-size: 14px; font-weight: 700; color: #222; text-align: center; }
.kzcf-price__field input:focus { outline: none; border-color: #1D2B4F; }
.kzcf-price__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; }
.kzcf-price-in {
	width: 90px;
	padding: 6px 8px;
	border: 1px solid #e3e8e6;
	border-radius: 8px;
	font-size: 14px;
}
.kzcf-price-in:focus { outline: none; border-color: #1D2B4F; }

/* Umkreis */
.kzcf-filter--geo .kzcf-filter__pop { min-width: 250px; }
.kzcf-geo-loc {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #e3e8e6;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 6px;
}
.kzcf-geo-loc:focus { outline: none; border-color: #1D2B4F; }
.kzcf-geo-suggest:not(:empty) { margin-bottom: 8px; border: 1px solid #e3e8e6; border-radius: 8px; overflow: hidden; }
.kzcf-geo-sug {
	display: block;
	width: 100%;
	text-align: left;
	border: none;
	background: #fff;
	padding: 8px 10px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
.kzcf-geo-sug:last-child { border-bottom: none; }
.kzcf-geo-sug:hover { background: #ecf0ef; }
.kzcf-geo-radius-row { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 4px 0 10px; }
.kzcf-geo-radius { padding: 6px 8px; border: 1px solid #e3e8e6; border-radius: 8px; font-size: 14px; }
.kzcf-geo-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kzcf-geo-near {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #e3e8e6;
	background: #fff;
	padding: 7px 12px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
}
.kzcf-geo-near__ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; }
.kzcf-geo-near:hover { background: #ecf0ef; }
.kzcf-geo-clear { color: #6b7480; text-decoration: underline; font-size: 13px; cursor: pointer; }
.kzcf-geo-clear:hover { color: #333; }
.kzcf-geo-clear[hidden] { display: none; }
/* Umkreis-Zeile im „Wo"-Pane (unter den Ort-Vorschlägen). */
.kzcf-wo-geo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e3e8e6; }
.kzcf-wo-geo .kzcf-geo-radius-row { margin: 0; }
.kzcf-wo-geo .kzcf-geo-clear { margin-left: auto; }

/* Grid-Layout selbst absichern (HivePress' .hp-grid-Flexregel greift auf dieser Seite nicht) */
#kzcf-results .hp-listings.hp-grid {
	display: flex;
	flex-wrap: wrap;
	margin-right: -1rem;
	margin-left: -1rem;
}
#kzcf-results .hp-grid__item {
	box-sizing: border-box;
	padding: 0 1rem;
	margin-bottom: 2rem;
	flex: 0 0 100%;
	max-width: 100%;
}
@media ( min-width: 600px ) {
	#kzcf-results .hp-grid__item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media ( min-width: 1100px ) {
	#kzcf-results .hp-grid__item {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
}

.kzcf-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 28px 0 8px;
}
.kzcf-page {
	border: 1.5px solid var( --kzcf-border, #e3e8e6 );
	background: #fff;
	padding: 9px 20px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: var( --kzcf-navy, #1D2B4F );
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.kzcf-page:hover { background: var( --kzcf-navy, #1D2B4F ); border-color: var( --kzcf-navy, #1D2B4F ); color: #fff; box-shadow: 0 6px 16px rgba( 29, 43, 79, 0.22 ); }
.kzcf-page[disabled], .kzcf-page:disabled { opacity: 0.4; cursor: default; }
.kzcf-page[disabled]:hover, .kzcf-page:disabled:hover { background: #fff; color: var( --kzcf-navy, #1D2B4F ); border-color: var( --kzcf-border, #e3e8e6 ); box-shadow: none; transform: none; }
.kzcf-page-info { color: var( --kzcf-muted, #6b7480 ); font-size: 14px; font-weight: 600; }


/* Karussell-Pfeile in nachgeladenen Kacheln (HivePress-CSS ist auf .hp-listing__image-slider gescoped und greift hier nicht) */
#kzcf-results [data-component="carousel-slider"] .slick-arrow {
	position: absolute;
	z-index: 1;
	top: 50%;
	display: block;
	width: 32px;
	height: 32px;
	margin-top: -1rem;
	text-align: center;
	line-height: 2rem;
	color: #fff;
	background-color: rgba( 0, 0, 0, 0.5 );
	border-radius: 50%;
	cursor: pointer;
}
#kzcf-results [data-component="carousel-slider"] .slick-prev { left: 1rem; }
#kzcf-results [data-component="carousel-slider"] .slick-next { right: 1rem; }
#kzcf-results [data-component="carousel-slider"] .slick-arrow.slick-disabled { top: -9999px; }
#kzcf-results [data-component="carousel-slider"]:not( :hover ) .slick-arrow { display: none !important; }

/* Footer-Überschriften: KEIN Hover-Effekt (Wunsch Dennis). Kein Farbwechsel je Spalte. */

/* ═══ Social-Icons: navy → beim Hover in Markenfarbe überblenden + leicht größer ═══ */
body.kzcf-finder .site-footer .kz-footer-social a .kzcf-soc-ic {
	position: relative; display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle;
	transition: transform 0.28s cubic-bezier(.16,1,.3,1);
}
body.kzcf-finder .site-footer .kz-footer-social a .kzcf-soc-ic img {
	position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.3s ease;
}
body.kzcf-finder .site-footer .kz-footer-social a .kzcf-soc-ic .ic-color { opacity: 0; }
body.kzcf-finder .site-footer .kz-footer-social a:hover .kzcf-soc-ic { transform: scale(1.28); }
body.kzcf-finder .site-footer .kz-footer-social a:hover .kzcf-soc-ic .ic-color { opacity: 1; }
body.kzcf-finder .site-footer .kz-footer-social a:hover .kzcf-soc-ic .ic-navy { opacity: 0; }

/* „Folge uns" auf Desktop garantiert in eigener Reihe links unten. */
@media ( min-width: 900px ) {
	body.kzcf-finder .site-footer .footer-widgets .row > *:has( .kz-footer-social ) {
		flex: 0 0 100%; max-width: 100%; order: 10; margin-top: 8px;
	}
}

/* ═══════════ Neue Camp-Karten (Marken-Look C) + Video-Modal ═══════════ */
#kzcf-results{ container-type:inline-size; }
/* Spalten nach echter Listenbreite (Container-Query, unabhängig vom Map-Split): max 3 → 2 → mobil 1. */
#kzcf-results .kzcf-cards{ display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; justify-content:center; }
@container (min-width:620px){ #kzcf-results .kzcf-cards{ grid-template-columns:repeat(2,minmax(0,350px)); } }
@container (min-width:950px){ #kzcf-results .kzcf-cards{ grid-template-columns:repeat(3,minmax(0,350px)); } }
.kzcf-nc{ position:relative; display:flex; flex-direction:column; cursor:pointer; background:var(--kzcf-surface,#fff); border:1px solid var(--kzcf-border,#e3e8e6); border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(22,28,26,.07); transition:transform .18s ease, box-shadow .18s ease; }
/* Ganze Karte klickbar: Titel-Link streckt sich per ::after über die komplette Karte (UI-Buttons liegen mit höherem z-index darüber). */
.kzcf-nc__title::after{ content:""; position:absolute; inset:0; z-index:6; }
.kzcf-nc:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(22,28,26,.14); }
/* Von der Karte hervorgehobene Listenkarte (Pin-Hover/Klick): Ring per Box-Shadow (folgt den runden Ecken). */
.kzcf-nc.is-hi{ box-shadow:0 0 0 2px var(--kzcf-navy,#1D2B4F), 0 16px 36px rgba(29,43,79,.20); }
.kzcf-nc__media{ position:relative; flex:0 0 auto; aspect-ratio:16/11; overflow:hidden; background:#dfe3e6; cursor:pointer; }
.kzcf-nc__mapbtn{ position:absolute; right:10px; top:10px; z-index:7; display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer; font-family:inherit; background:rgba(255,255,255,.94); color:var(--kzcf-navy,#1D2B4F); font-size:11.5px; font-weight:800; padding:6px 11px 6px 9px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.18); transition:transform .15s ease, background .15s ease, color .15s ease; }
.kzcf-nc__mapbtn:hover{ transform:scale(1.05); background:var(--kzcf-navy,#1D2B4F); color:#fff; }
.kzcf-nc__mapbtn svg{ display:block; }
.kzcf-nc__thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.kzcf-nc__prev{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .3s ease, transform .5s ease; pointer-events:none; }
.kzcf-nc.playing .kzcf-nc__prev{ opacity:1; transform:scale(1); }
.kzcf-nc.playing .kzcf-nc__thumb{ transform:scale(1.02); }
.kzcf-nc__grad{ position:absolute; inset:0; background:linear-gradient(to top,rgba(10,16,30,.5),transparent 42%); pointer-events:none; }
.kzcf-nc__vhint{ position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:7px; background:rgba(15,20,35,.72); color:#fff; font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; transition:opacity .25s ease; }
.kzcf-nc.playing .kzcf-nc__vhint{ opacity:0; }
.kzcf-nc__tri{ width:0; height:0; border-left:9px solid #fff; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; }
.kzcf-nc__heart{ position:absolute; right:10px; top:10px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center; font-size:16px; color:#c9c9c9; cursor:pointer; z-index:3; transition:color .15s ease, transform .15s ease; }
.kzcf-nc__heart:hover{ transform:scale(1.08); }
.kzcf-nc__heart.is-on{ color:var(--kzcf-red,#E8402A); }
.kzcf-nc__allvids{ position:absolute; left:10px; bottom:10px; top:auto; border:none; cursor:pointer; font-family:inherit; background:rgba(255,255,255,.94); color:var(--kzcf-navy,#1D2B4F); font-size:11.5px; font-weight:800; padding:6px 11px; border-radius:999px; box-shadow:0 4px 12px rgba(0,0,0,.18); z-index:7; transition:transform .15s ease; }
.kzcf-nc__allvids:hover{ transform:scale(1.05); }
.kzcf-nc__body{ padding:14px 15px 15px; flex:1 1 auto; display:flex; flex-direction:column; }
.kzcf-nc__tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.kzcf-nc__pill{ font-size:11px; font-weight:800; padding:4px 9px; border-radius:8px; }
.kzcf-nc__pill.p-blue{ background:rgba(46,124,240,.13); color:#1c5fc7; }
.kzcf-nc__pill.p-green{ background:rgba(47,168,79,.14); color:#217a3c; }
.kzcf-nc__pill.p-red{ background:rgba(232,64,42,.12); color:#c0331f; }
.kzcf-nc__pill.p-navy{ background:rgba(29,43,79,.10); color:#1D2B4F; }
.kzcf-nc__title{ display:block; font-size:16.5px; font-weight:800; color:var(--kzcf-ink,#20283c); line-height:1.25; margin-bottom:6px; text-decoration:none; }
.kzcf-nc__title:hover{ color:var(--kzcf-navy,#1D2B4F); }
/* Anbieter-Logo als großes Badge, das elegant über den unteren Bildrand ragt. */
.kzcf-nc__prov{ display:flex; align-items:center; justify-content:space-between; gap:11px; font-size:13px; color:var(--kzcf-muted,#6b7480); margin-bottom:10px; }
.kzcf-nc__prov b{ color:var(--kzcf-ink,#20283c); font-weight:800; }
.kzcf-nc__provname{ line-height:1.25; }
/* Anbieter-Logo als abgerundete weiße „Logo-Karte" – wächst in die Breite bei breiten Logos, ragt über den Bildrand. */
.kzcf-nc__logobox{ box-sizing:border-box; height:58px; min-width:58px; max-width:150px; margin-top:-40px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:7px 12px; border-radius:16px; background:#fff; box-shadow:0 5px 16px rgba(22,28,26,.22); position:relative; z-index:2; }
.kzcf-nc__logo{ display:block; height:100%; width:auto; max-width:126px; object-fit:contain; }
.kzcf-nc__logobox--txt{ background:var(--kzcf-navy,#1D2B4F); color:#fff; font-size:19px; font-weight:800; letter-spacing:.5px; padding:0 16px; }
.kzcf-nc__meta{ display:flex; align-items:center; gap:7px; color:var(--kzcf-muted,#6b7480); font-size:13px; flex-wrap:wrap; margin-bottom:10px; }
/* 5-Sterne-Widget: graue Basis, goldene Overlay-Ebene auf Bewertungs-Breite geclippt. */
.kzcf-nc__stars{ position:relative; display:inline-block; font-size:14px; line-height:1; letter-spacing:2px; color:#d7dce3; white-space:nowrap; }
.kzcf-nc__stars::before{ content:"\2605\2605\2605\2605\2605"; }
.kzcf-nc__stars-on{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; letter-spacing:2px; color:var(--kzcf-gold,#F5A623); }
.kzcf-nc__stars-on::before{ content:"\2605\2605\2605\2605\2605"; }
.kzcf-nc__ratev{ color:var(--kzcf-ink,#20283c); font-weight:800; font-size:13px; }
.kzcf-nc__next{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--kzcf-navy,#1D2B4F); font-weight:700; margin:0 0 9px; }
.kzcf-nc__next strong{ font-weight:800; }
.kzcf-nc__next-ico{ font-size:13px; line-height:1; filter:grayscale(.1); }
.kzcf-nc__chiprow{ display:flex; gap:8px; flex-wrap:wrap; }
.kzcf-nc__chip{ font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:var(--kzcf-bg,#f4f6f5); color:var(--kzcf-ink,#20283c); display:inline-flex; gap:5px; align-items:center; }
/* Reisezeit-Chip (Auto), per JS gefüllt, wenn ein Standort gewählt ist. */
.kzcf-nc__travel:empty, .kzcf-pop__travel:empty{ display:none; }
.kzcf-travel{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(29,43,79,.08); color:var(--kzcf-navy,#1D2B4F); white-space:nowrap; }
.kzcf-travel svg{ display:block; flex:0 0 auto; }
.kzcf-nc__foot{ position:relative; z-index:5; display:flex; align-items:center; margin-top:auto; padding-top:12px; min-height:46px; }
.kzcf-nc__price{ font-size:18px; font-weight:900; color:var(--kzcf-ink,#20283c); }
.kzcf-nc__price span{ font-size:12px; font-weight:700; color:var(--kzcf-muted,#6b7480); }
/* Ansehen-CTA füllt die Ecke unten rechts; die SVG-Form hat oben-links einen
   geschwungenen Cut, der die Ecke vom Karten-Inneren trennt. */
.kzcf-nc__cta{
	position:absolute; left:0; right:0; bottom:0; height:96px; z-index:4;
	display:flex; align-items:flex-end; justify-content:flex-end;
	padding:0 20px 14px 0; text-decoration:none;
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96' preserveAspectRatio='none'%3E%3Cpath d='M24 96 C50 96 78 42 100 38 L100 96 Z' fill='%231D2B4F'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	opacity:0; transform:translateY(16px); pointer-events:none;
	transition:opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1), filter .15s ease;
}
.kzcf-nc:hover .kzcf-nc__cta, .kzcf-nc:focus-within .kzcf-nc__cta{ opacity:1; transform:translateY(0); pointer-events:auto; }
.kzcf-nc__cta span{ color:#fff; font-weight:800; font-size:13px; letter-spacing:.2px; }
.kzcf-nc:hover .kzcf-nc__cta:hover{ filter:brightness(.93); }
/* Touch-Geräte (kein Hover): CTA sichtbar, aber das große Overlay fängt KEINE
   Touch-Geste ab (sonst blockiert es das vertikale Scrollen, wenn der Finger
   auf der Karte startet). Nur der sichtbare „Ansehen"-Button ist tippbar. */
@media (hover:none){
	.kzcf-nc__cta{ opacity:1; transform:none; pointer-events:none; }
	.kzcf-nc__cta span{ pointer-events:auto; }
}
/* Mobiler Karussell: CTA nur auf der mittig gescrollten Karte einblenden. */
@media (max-width:700px){
	.kzcf-row__scroll .kzcf-nc__cta{ opacity:0; transform:translateY(16px); pointer-events:none; }
	.kzcf-row__scroll .kzcf-nc__cta span{ pointer-events:none; }
	.kzcf-row__scroll .kzcf-nc.is-mid .kzcf-nc__cta{ opacity:1; transform:translateY(0); pointer-events:none; }
	.kzcf-row__scroll .kzcf-nc.is-mid .kzcf-nc__cta span{ pointer-events:auto; }
}
@media (prefers-reduced-motion:reduce){ .kzcf-nc__cta{ transition:opacity .15s ease, filter .15s ease; transform:none; } }
/* Video-Modal */
.kzcf-vmodal{ position:fixed; inset:0; background:rgba(12,17,28,.62); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; z-index:100001; }
.kzcf-vmodal.open{ display:flex; }
.kzcf-vmbox{ background:#fff; border-radius:22px; max-width:720px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; }
.kzcf-vmclose{ position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:50%; border:none; background:#eef1f5; color:#1e2634; font-size:22px; line-height:1; cursor:pointer; z-index:2; }
.kzcf-vmhead{ display:flex; align-items:center; gap:12px; padding:20px 22px 14px; }
.kzcf-vmini{ width:40px; height:40px; border-radius:50%; background:#1D2B4F; color:#fff; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background-size:cover; background-position:center; }
.kzcf-vmini.has-logo{ background-color:#fff; border:1px solid #e6eaf0; }
.kzcf-vmtitle{ font-size:18px; font-weight:800; color:#1e2634; }
.kzcf-vmsub{ font-size:13px; color:#6b7480; }
.kzcf-vmplayer{ width:100%; aspect-ratio:16/10; background:#000; display:block; }
.kzcf-vmgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:16px 22px 24px; align-items:start; }
.kzcf-vmitem{ border:none; background:none; padding:0; cursor:pointer; font-family:inherit; text-align:left; border-radius:12px; }
.kzcf-vmitem .kzcf-vmthumb{ transition:box-shadow .15s ease; }
.kzcf-vmitem.active .kzcf-vmthumb{ box-shadow:0 0 0 3px var(--kzcf-navy,#1D2B4F); }
.kzcf-vmthumb{ position:relative; display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#ccd; background-size:cover; background-position:center; }
.kzcf-vmplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; }
.kzcf-vmplay::after{ content:""; border-left:11px solid #1D2B4F; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.kzcf-vmlbl{ display:block; font-size:13px; font-weight:700; color:#1e2634; margin-top:7px; line-height:1.2; }

/* ── Startseite (neues Design): horizontal scrollbare Kategorie-/Orts-Reihen ── */
/* Kein padding-bottom hier: die transparente Lücke ließe sonst den sticky navy
   Hero unten zwischen Listen und Footer durchscheinen. Abstand liegt in __rows. */
.kzcf-home__body { padding: 0; position: relative; }

/* ── Video-Hero (Full-Bleed): volle Breite, klebt oben und bleibt hinter dem
   Inhalt liegen. Beim Scrollen fahren die Listen (kzcf-home__rows) mit
   abgerundeter Kante darüber, während der Hero leicht wegfadet und parallax
   mitdriftet (per JS gesteuert). Clips aus kidszone-hero-video. ── */
.kzcf-hero {
	position: sticky;
	top: 0;
	margin: 0;
	border-radius: 0;
	overflow: hidden;
	height: clamp(440px, 76vh, 700px);
	background: var(--kzcf-navy, #1D2B4F);
	z-index: 0;
	isolation: isolate;
}
/* Auf der Startseite kein Abstand zwischen Header und Video (Topbar-Margin ist
   für die Chips der Filterseite gedacht). */
.kzcf-home .kzcf-topbar { margin-bottom: 0; }
/* Feine Theme-Trennlinie über dem Footer entfernen (nahtloser Übergang, gleicher BG). */
body.kzcf-home-page .site-footer { border-top: 0; }
/* Complianz „Einwilligung verwalten"-Tab (fixed) mittig an den unteren Rand statt
   unten rechts (dort überlappte er die Reihen-Pfeile). Complianz kann selbst nur
   links/rechts, daher Override. */
body.kzcf-finder .cmplz-manage-consent.manage-consent-1 {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
}
/* Medien ragen oben/unten über den Hero hinaus (Headroom), damit der Parallax-
   Versatz nie den navy Hero-Grund freilegt. */
.kzcf-hero__media { position: absolute; left: 0; right: 0; top: -12%; height: 124%; z-index: 0; will-change: transform; }
.kzcf-hero__poster,
.kzcf-hero__vid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kzcf-hero__vid { opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.kzcf-hero__vid.is-active { opacity: 1; }
/* Sobald ein Clip läuft, Standbild darunter ausblenden (kein Aufblitzen beim Wechsel). */
.kzcf-hero.is-playing .kzcf-hero__poster { opacity: 0; transition: opacity .9s ease; }

.kzcf-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(29, 43, 79, .90) 0%, rgba(29, 43, 79, .62) 42%, rgba(29, 43, 79, .12) 78%, rgba(29, 43, 79, 0) 100%),
		linear-gradient(0deg, rgba(29, 43, 79, .35) 0%, rgba(29, 43, 79, 0) 40%);
}
.kzcf-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	padding: clamp(26px, 5vw, 60px) clamp(24px, 6vw, 90px) clamp(60px, 12vh, 130px);
	color: #fff;
	will-change: transform, opacity;
}
/* .kzcf-app-Präfix: schlägt die dunkle Theme-h1-Farbe (Überschrift bleibt weiß). */
.kzcf-app .kzcf-hero__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(27px, 3.4vw, 46px);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -.02em;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.kzcf-hero__sub {
	margin: 0 0 24px;
	max-width: 460px;
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 500;
	line-height: 1.45;
	color: rgba(255, 255, 255, .90);
	text-shadow: 0 1px 10px rgba(0, 0, 0, .22);
}
.kzcf-hero__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border: none;
	border-radius: 999px;
	background: #fff;
	color: var(--kzcf-navy, #1D2B4F);
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.kzcf-hero__cta::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2.4px solid currentColor;
	border-top: 2.4px solid currentColor;
	transform: rotate(45deg);
	transition: transform .16s ease;
}
.kzcf-hero__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
}
.kzcf-hero__cta:hover::after { transform: rotate(45deg) translate(1px, -1px); }
.kzcf-hero__cta:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .7);
	outline-offset: 3px;
}
/* Listen-Sektion fährt mit abgerundeter Kante über den Video-Hero (liegt darüber,
   deckt ihn beim Weiterscrollen ab). Der negative Rand erzeugt die Überlappung. */
.kzcf-home__rows {
	position: relative;
	z-index: 2;
	background: var(--kzcf-bg, #f4f6f5);
	border-radius: 0;
	margin-top: -42px;
	padding-top: 26px;
	/* Kein Padding unten: der letzte Abschnitt (FAQ) stößt direkt an den Footer,
	   sonst entsteht ein heller Streifen ("weißer Balken") davor. */
	padding-bottom: 0;
	box-shadow: 0 -20px 44px rgba(29, 43, 79, .14);
}
/* Kleiner „Griff" oben mittig – signalisiert die scrollbare Content-Fläche. */
.kzcf-home__rows::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 46px;
	height: 5px;
	border-radius: 999px;
	background: rgba(29, 43, 79, .16);
}

/* ═══════════════ Story-Abschnitt (scrollanimiert) ═══════════════ */
.kzcf-story { position: relative; margin-top: 20px; }
.kzcf-st { position: relative; padding: clamp(48px, 8vh, 110px) clamp(24px, 6vw, 90px); }
.kzcf-st__inner { max-width: 1180px; margin: 0 auto; }
.kzcf-eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--kzcf-teal, #2E7CF0); margin-bottom: 12px; }
.kzcf-st__title { font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; color: var(--kzcf-ink, #20283c); margin: 0; text-wrap: balance; }
.kzcf-st__title em { font-style: normal; color: var(--kzcf-navy, #1D2B4F); position: relative; white-space: nowrap; }
.kzcf-st__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 8px; background: rgba(46, 124, 240, .22); border-radius: 4px; z-index: -1; }

/* Reveal-Engine: kinoreif (Fade + Slide + leichter Scale), gestaffelt via --i. */
.kzcf-rv { opacity: 0; transform: translateY(38px) scale(.985); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * .09s); will-change: opacity, transform; }
.kzcf-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kzcf-rv { opacity: 1; transform: none; transition: none; } }

/* ── 1) Camp-Reise: gepinnter Abschnitt (Pin & Scrub) ──────────────────────
   Die Section ist ein hoher „Track"; die Stage klebt 100vh im Viewport, während
   der Scroll die Phasen (Inhalte) nacheinander ein- und ausblendet. */
.kzcf-jsec { position: relative; height: calc(100vh * 3.4); /* JS überschreibt anhand Phasenanzahl */ }
/* Header (Topbar) auto-ausblenden, sobald man nach unten gescrollt hat; taucht
   wieder auf, wenn man ganz oben ist ODER die Maus in den oberen Bereich fährt.
   JS setzt body.kzcf-hdr-hidden. */
.kzcf-topbar { transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease; }
body.kzcf-hdr-hidden .kzcf-topbar { transform: translateY(-115%); opacity: 0; pointer-events: none; }
body.kzcf-hdr-hidden .kzcf-sb__backdrop { opacity: 0; pointer-events: none; }
/* Helle, fließende Fläche; der farbige Schimmer folgt dem Accent der aktiven Phase. */
.kzcf-jsec__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; --accent: #2E7CF0;
	background: linear-gradient(180deg, #ffffff 0%, var(--kzcf-bg, #f4f6f5) 100%); }
.kzcf-jsec__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 66%);
	transition: background .6s ease; }
/* Jede Phase = volles 2-Spalten-Layout (Bild + Text), Seiten alternieren via data-side.
   Der Scrub blendet die ganze Phase (Bild UND Text) ein/aus. */
.kzcf-jsec__phases { position: absolute; inset: 0; z-index: 1; }
/* Bildseite blutet bis zum Bildschirmrand (nutzt die Kante als natürlichen Rand);
   Textseite hat den Seiten-Gutter. */
.kzcf-phase { position: absolute; inset: 0; display: grid; grid-template-columns: 0.86fr 1.14fr; align-items: center; gap: clamp(20px, 4vw, 64px); opacity: 0; transform: translateY(40px); will-change: opacity, transform; }
.kzcf-phase[data-side="left"] { grid-template-columns: 1.14fr 0.86fr; }
.kzcf-phase__copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; }
.kzcf-phase__media { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: stretch; height: 100%; }
.kzcf-phase[data-side="left"] .kzcf-phase__copy { grid-column: 2; }
.kzcf-phase[data-side="left"] .kzcf-phase__media { grid-column: 1; }
/* Text vom äußeren Bildschirmrand weghalten (Gutter), innen kleinerer Abstand. */
.kzcf-phase[data-side="right"] .kzcf-phase__copy { padding: 0 clamp(16px,2.5vw,40px) 0 clamp(24px,6vw,90px); }
.kzcf-phase[data-side="left"] .kzcf-phase__copy { padding: 0 clamp(24px,6vw,90px) 0 clamp(16px,2.5vw,40px); }
/* Farbiger Glow hinter jedem Motiv (Accent). */
.kzcf-scene__glow { position: absolute; left: 50%; top: 47%; width: 112%; height: 84%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%); filter: blur(26px); }
/* Foto füllt die volle Höhe der Spalte bis zur Bildschirmkante; die ÄUSSERE Seite
   bleibt hart an der Kante (natürlicher Rand), die INNERE Seite ist per Verlaufs-
   Maske ausgeschnitten und fadet weich in den Hintergrund (kein Rahmen). */
/* Kein Zoom/Upscale (sonst wirkt das Foto verpixelt) – Bild bleibt nativ scharf. */
.kzcf-scene__img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover;
	transform: translate(-50%,-50%); }
.kzcf-phase[data-side="right"] .kzcf-scene__img { object-position: right center;
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 44%);
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 44%); }
.kzcf-phase[data-side="left"] .kzcf-scene__img { object-position: left center;
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 44%);
	mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 44%); }
/* Szene 3: stärkerer Fade (Motiv löst sich weiter auf). */
.kzcf-phase[data-phase="3"][data-side="right"] .kzcf-scene__img {
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 60%);
	mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 60%); }
.kzcf-phase[data-phase="3"][data-side="left"] .kzcf-scene__img {
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 60%);
	mask-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 60%); }
@keyframes kzcf-kenburns { from { transform: translate(-50%,-50%) scale(1.02); } to { transform: translate(-50%,-50%) scale(1.1); } }
/* Typ „cutout": freigestellt auf weichem Farbklecks (Rand ausgefadet) + Bodenschatten. */
.kzcf-phase[data-type="cutout"] .kzcf-scene__blob { position: absolute; left: 50%; top: 46%; width: 92%; height: 84%; transform: translate(-50%,-50%); border-radius: 46% 54% 57% 43% / 52% 46% 54% 48%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 78%, white 22%) 40%, color-mix(in srgb, var(--accent) 55%, transparent) 82%, transparent 100%); }
.kzcf-phase[data-type="cutout"] .kzcf-scene__img { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); height: 96%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(29,43,79,.30)); animation: kzcf-float 6s ease-in-out infinite; }
.kzcf-scene__shadow { position: absolute; left: 50%; bottom: 1%; width: 52%; height: 36px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29,43,79,.28), rgba(29,43,79,0)); filter: blur(3px); transform: translateX(-50%) scaleX(1); animation: kzcf-shadow 6s ease-in-out infinite; }
@keyframes kzcf-float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-14px); } }
@keyframes kzcf-floaty { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%, calc(-50% - 14px)); } }
@keyframes kzcf-shadow { 0%,100% { opacity: .85; transform: translateX(-50%) scaleX(1); } 50% { opacity: .5; transform: translateX(-50%) scaleX(.83); } }

.kzcf-phase__eyebrow { display: block; margin-bottom: 16px; color: var(--accent, #2E7CF0); transition: color .5s ease; opacity: 0; transform: translateY(16px); }
.kzcf-phase.is-live .kzcf-phase__eyebrow { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
/* Inhalte fahren beim Aktivwerden gestaffelt ein (dynamischer Text). */
.kzcf-phase__ico { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #fff; color: var(--accent, #1D2B4F); border: 1px solid var(--kzcf-border, #e3e8e6); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom: 20px; opacity: 0; transform: translateY(22px) scale(.9); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.kzcf-phase__n { display: block; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: var(--accent, #2E7CF0); margin-bottom: 10px; opacity: 0; transform: translateY(18px); transition: opacity .5s ease .05s, transform .5s cubic-bezier(.16,1,.3,1) .05s; }
.kzcf-app .kzcf-phase__title { color: var(--kzcf-ink, #20283c); font-size: clamp(30px, 4.4vw, 56px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; margin: 0 0 14px; white-space: normal; text-wrap: balance; }
.kzcf-phase__title .kzcf-w { display: inline-block; opacity: 0; transform: translateY(115%) rotate(3deg); }
.kzcf-phase__text { font-size: clamp(16px, 1.6vw, 21px); line-height: 1.5; color: #4a5468; margin: 0; max-width: 460px; white-space: normal; opacity: 0; transform: translateY(18px); transition: opacity .5s ease .35s, transform .5s cubic-bezier(.16,1,.3,1) .35s; }
/* is-live = aktive Phase → einfahren. */
.kzcf-phase.is-live .kzcf-phase__ico,
.kzcf-phase.is-live .kzcf-phase__n,
.kzcf-phase.is-live .kzcf-phase__text { opacity: 1; transform: none; }
.kzcf-phase.is-live .kzcf-phase__title .kzcf-w { animation: kzcf-word .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--w, 0) * .07s + .12s); }
@keyframes kzcf-word { to { opacity: 1; transform: none; } }
/* Fortschritts-Punkte unten mittig. */
.kzcf-jsec__progress { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(24px, 5vh, 48px); z-index: 3; display: flex; gap: 10px; }
.kzcf-jsec__dot { width: 32px; height: 4px; border-radius: 999px; background: rgba(29,43,79,.20); transition: background .4s ease, transform .3s ease; }
.kzcf-jsec__dot.is-active { background: var(--accent, #1D2B4F); transform: scaleX(1.15); }
@media (max-width: 860px) {
	/* Mobil: einspaltig, Bild oben (Seite egal), Text darunter. */
	.kzcf-phase { grid-template-columns: 1fr; align-content: center; gap: 8px; padding-bottom: clamp(48px, 9vh, 90px); }
	.kzcf-phase__copy, .kzcf-phase[data-side="left"] .kzcf-phase__copy { grid-column: 1; grid-row: 2; }
	.kzcf-phase__media, .kzcf-phase[data-side="left"] .kzcf-phase__media { grid-column: 1; grid-row: 1; height: min(40vh, 340px); }
	.kzcf-phase__text { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kzcf-jsec { height: auto; }
	.kzcf-jsec__stage { position: relative; height: auto; padding: 40px 0; }
	.kzcf-phase { position: relative; inset: auto; opacity: 1; transform: none; padding-block: 30px; }
	.kzcf-phase__eyebrow, .kzcf-phase__ico, .kzcf-phase__n, .kzcf-phase__text { opacity: 1; transform: none; transition: none; }
	.kzcf-phase__title .kzcf-w { opacity: 1; transform: none; animation: none; }
	.kzcf-scene__img, .kzcf-scene__shadow { animation: none; }
}

/* ── 2) Zahlen + Partner: Akzent-Band full-bleed ── */
.kzcf-st--band { padding: 0; }
/* Zahlen-Band neu: heller Grund, große Navy-Zahlen, dezente Trenner, Partner grau→Farbe. */
.kzcf-band__inner { background: linear-gradient( 180deg, #ffffff 0%, #f4f7fb 100% ); color: var(--kzcf-ink, #20283c); padding: clamp(48px, 8vh, 96px) clamp(24px, 6vw, 90px); text-align: center; overflow: hidden; }
.kzcf-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0; max-width: 860px; margin: 0 auto; }
.kzcf-stat { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 150px; padding: 4px clamp(16px, 4vw, 44px); }
.kzcf-stat + .kzcf-stat { border-left: 1px solid var(--kzcf-border, #e3e8e6); }
.kzcf-stat b { font-size: clamp(46px, 6.5vw, 78px); font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--kzcf-navy, #1D2B4F); }
.kzcf-stat strong { font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; margin-top: 10px; color: var(--kzcf-navy, #1D2B4F); }
.kzcf-stat span { font-size: 13.5px; color: #6b716f; margin-top: 4px; }
.kzcf-band__label { margin: clamp(38px, 5vh, 58px) 0 20px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #9aa1ac; }
/* Anbieter-Logos: statische, zentrierte Liste (kein Marquee mehr). */
.kzcf-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 40px); }
.kzcf-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kzcf-marquee__track { display: flex; align-items: center; gap: clamp(30px, 5vw, 70px); width: max-content; animation: kzcf-marquee 26s linear infinite; }
.kzcf-marquee:hover .kzcf-marquee__track { animation-play-state: paused; }
.kzcf-partner { flex: 0 0 auto; display: inline-flex; align-items: center; }
.kzcf-partner img { height: 58px; width: auto; max-width: 200px; object-fit: contain; background: #fff; border-radius: 14px; padding: 12px 20px; box-shadow: 0 6px 18px rgba(29,43,79,.08); }
@media ( min-width: 701px ) { .kzcf-partner img { height: 80px; max-width: 260px; padding: 16px 28px; border-radius: 16px; } }
/* Zahlen-Trenner nur auf breiteren Screens; auf Mobile gestapelt ohne Seitenrand. */
@media ( max-width: 600px ) {
	.kzcf-stats { flex-direction: column; gap: 22px; }
	.kzcf-stat + .kzcf-stat { border-left: none; border-top: 1px solid var(--kzcf-border, #e3e8e6); padding-top: 22px; }
}
@keyframes kzcf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kzcf-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ── 3) Für Anbieter: abgehobene Card + Copy ── */
.kzcf-prov { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.kzcf-prov__lead { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: #4a5468; margin: 16px 0 20px; }
.kzcf-prov__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kzcf-prov__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #3a4459; }
.kzcf-chk { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(46,124,240,.14); color: var(--kzcf-teal, #2E7CF0); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin-top: 1px; }
.kzcf-prov__card { background: #fff; border: 1px solid var(--kzcf-border, #e3e8e6); border-radius: 24px; padding: clamp(24px, 3vw, 38px); box-shadow: 0 26px 56px rgba(29,43,79,.16); }
.kzcf-prov__card h3 { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--kzcf-ink, #20283c); }
.kzcf-prov__steps { list-style: none; counter-reset: pv; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.kzcf-prov__steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: pv; }
.kzcf-prov__steps li::before { content: counter(pv); flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--kzcf-navy, #1D2B4F); color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.kzcf-prov__steps b { display: block; color: var(--kzcf-ink, #20283c); font-size: 15px; }
.kzcf-prov__steps span { color: #5a6478; font-size: 14px; line-height: 1.45; }
.kzcf-prov__btn { display: inline-flex; align-items: center; justify-content: center; background: var(--kzcf-navy, #1D2B4F); color: #fff; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.kzcf-prov__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,43,79,.28); }
.kzcf-prov__note { margin: 14px 0 0; font-size: 13px; color: #6b7488; }
.kzcf-prov__note a { color: var(--kzcf-teal, #2E7CF0); }

/* Schlanke Anbieter-CTA (verschlankte Variante): eine zentrierte, ruhige Karte. */
.kzcf-provlite { max-width: 620px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var( --kzcf-border, #e3e8e6 ); border-radius: 24px; padding: clamp( 32px, 5vw, 52px ) clamp( 24px, 4vw, 44px ); box-shadow: 0 20px 50px rgba( 29, 43, 79, 0.10 ); }
.kzcf-provlite__lead { font-size: clamp( 15px, 1.6vw, 18px ); line-height: 1.6; color: #4a5468; margin: 14px 0 24px; }
.kzcf-provlite__btn { display: inline-flex; align-items: center; gap: 8px; background: var( --kzcf-navy, #1D2B4F ); color: #fff; font-weight: 800; font-size: 16px; padding: 15px 30px; border-radius: 999px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kzcf-provlite__btn:hover { transform: translateY( -2px ); box-shadow: 0 12px 28px rgba( 29, 43, 79, 0.28 ); }
.kzcf-provlite__note { margin: 16px 0 0; font-size: 13.5px; color: #6b7488; }
.kzcf-provlite__note a { color: var( --kzcf-teal, #2E7CF0 ); }

/* ══════ KiKi-Story: 3 scrollgesteuerte Video-Szenen ══════ */
.kzcf-kstory { position: relative; height: calc(100vh * 4); /* JS überschreibt */ }
.kzcf-kstory__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; background: #0b1220; }
.kzcf-kstory__scene { position: absolute; inset: 0; opacity: 0; }
.kzcf-kstory__scene.is-active { opacity: 1; }
.kzcf-kstory__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kzcf-kstory__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: 50% 42%; }
/* Zoom-Reveal: Szenen-Wrapper wird am Ende in den Laptop-Screen gezoomt, Flash blendet zu Weiss. */
.kzcf-kstory__zoom { position: absolute; inset: 0; transform-origin: 50% 44%; will-change: transform; }
.kzcf-kstory__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }
/* Reveal-Ziel: echte KiKi als voll bedienbarer Vollbild-Abschnitt (weiss auf weiss = nahtlos). */
/* Chat blendet nach dem Zoom als Ebene über dem weissen Screen ein (kein Scroll-In). */
.kzcf-kchat { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
.kzcf-kchat__inner { flex: 1 1 auto; min-height: 0; display: flex; }
/* Navigations-Pfeile links (hoch = zurück, runter = weiter). */
.kzcf-kchat__nav { position: absolute; left: clamp(12px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 8; display: flex; flex-direction: column; gap: 12px; }
.kzcf-kchat__navbtn { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(29,43,79,.12); border-radius: 50%; background: #fff; color: var(--kzcf-navy, #1D2B4F); cursor: pointer; box-shadow: 0 6px 18px rgba(29,43,79,.14); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.kzcf-kchat__navbtn:hover { transform: translateY(-2px); background: var(--kzcf-navy, #1D2B4F); color: #fff; box-shadow: 0 10px 24px rgba(29,43,79,.24); }
.kzcf-kchat__navbtn svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .kzcf-kchat__nav { left: 10px; gap: 10px; } .kzcf-kchat__navbtn { width: 40px; height: 40px; } }
.kzcf-kstory__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,32,.9) 0%, rgba(11,18,32,.58) 40%, rgba(11,18,32,.12) 72%, rgba(11,18,32,0) 100%), linear-gradient(0deg, rgba(11,18,32,.5) 0%, rgba(11,18,32,0) 45%); }
.kzcf-kstory__cap { position: absolute; z-index: 3; inset: 0; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; color: #fff; }
.kzcf-kstory__cap > * { max-width: 600px; }
/* Szene 2: Headline nach unten, damit sie den zentrierten Chat nicht überlappt. */
/* Szene 2: Headline mittig auf dem Laptop-Screen, zoomt mit rein und fadet raus. */
.kzcf-kstory__cap--screen { justify-content: flex-end; align-items: center; text-align: center; padding-bottom: clamp(90px, 22vh, 240px); }
.kzcf-kstory__cap--screen > * { max-width: min(640px, 72vw); }
.kzcf-kstory__cap--screen .kzcf-kstory__eyebrow { justify-content: center; }
/* Eyebrow: Akzent-Balken + weite Laufweite, dezenter Schatten für Lesbarkeit auf Video. */
.kzcf-kstory__eyebrow { display: inline-flex; align-items: center; gap: 13px; font-size: 12px; font-weight: 700; letter-spacing: .24em; color: rgba(255,255,255,.85); margin-bottom: 18px; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.kzcf-kstory__eyebrow::before { content: ""; width: 32px; height: 2px; border-radius: 2px; background: currentColor; opacity: .9; }
.kzcf-app .kzcf-kstory__title { color: #fff; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.015em; font-weight: 800; text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); }
.kzcf-kstory__title em { color: #fff; font-style: normal; position: relative; }
.kzcf-kstory__title em::after { background: rgba(255,255,255,.34); height: 3px; }
.kzcf-kad__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; background: #fff; color: var(--kzcf-navy, #1D2B4F); font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease; }
.kzcf-kad__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
/* Szene 2 hat weißen Hintergrund (Laptop-Studio) → dunkler Text + heller Veil. */
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__veil { background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 20%, rgba(255,255,255,0) 42%); }
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__eyebrow { color: var(--kzcf-navy, #1D2B4F); text-shadow: none; }
.kzcf-app .kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title { color: var(--kzcf-navy, #1D2B4F); text-shadow: none; }
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title em { color: var(--kzcf-navy, #1D2B4F); }
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title em::after { background: rgba(29,43,79,.28); }
/* Fortschritts-Punkte dunkel, solange die weiße Szene dominiert. */
.kzcf-kstory.is-light .kzcf-kstory__dots span { background: rgba(29,43,79,.28); }
.kzcf-kstory.is-light .kzcf-kstory__dots span.is-active { background: var(--kzcf-navy, #1D2B4F); }
/* Szene 2: Chat-Overlay auf dem formatfüllenden Laptop-Screen */
.kzcf-kstory__screen { position: absolute; z-index: 2; left: 50%; top: 43%; transform: translate(-50%,-50%); width: clamp(300px, 46vw, 640px); height: clamp(190px, 42vh, 380px); opacity: 0; transition: opacity .45s ease; }
.kzcf-kstory__screen.is-on { opacity: 1; }
/* Seamless: der Chat liegt direkt auf dem weißen Laptop-Screen (kein dunkles Panel). */
.kzcf-kstory__win { height: 100%; display: flex; flex-direction: column; padding: clamp(8px,1.1vw,16px) clamp(10px,1.4vw,20px); border-radius: 0; background: transparent; box-shadow: none; }
.kzcf-kiki__winbar { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: var(--kzcf-navy, #1D2B4F); padding: 0 2px 9px; border-bottom: 1px solid rgba(29,43,79,.12); }
.kzcf-kiki__dot { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #4a5aa8, var(--kzcf-navy,#1D2B4F)); }
.kzcf-kiki__tag { font-weight: 500; font-size: 11px; color: rgba(29,43,79,.5); }
.kzcf-kiki__msgs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 12px; overflow: hidden; }
.kzcf-kiki__bubble { max-width: 86%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); box-shadow: 0 1px 2px rgba(29,43,79,.06); }
.kzcf-kiki__bubble.is-in { opacity: 1; transform: none; }
.kzcf-kiki__bubble--me { align-self: flex-end; background: var(--kzcf-navy, #1D2B4F); color: #fff; border-bottom-right-radius: 4px; }
.kzcf-kiki__bubble--ki { align-self: flex-start; background: #eef0f5; color: #20283c; border-bottom-left-radius: 4px; }
.kzcf-kiki__bubble--ki b { color: var(--kzcf-navy, #1D2B4F); }
.kzcf-kiki__typing { align-self: flex-start; display: none; gap: 5px; background: #eef0f5; padding: 9px 12px; border-radius: 14px; }
.kzcf-kiki__typing.is-on { display: inline-flex; }
.kzcf-kiki__typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa4bd; opacity: .6; animation: kzcf-typing 1.1s infinite; }
.kzcf-kiki__typing i:nth-child(2) { animation-delay: .18s; }
.kzcf-kiki__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes kzcf-typing { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }
/* Fortschritts-Punkte */
.kzcf-kstory__dots { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: clamp(22px, 5vh, 44px); display: flex; gap: 10px; }
.kzcf-kstory__dots span { width: 30px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.35); transition: background .3s ease; }
.kzcf-kstory__dots span.is-active { background: #fff; }
@media (max-width: 760px) {
	.kzcf-kstory__veil { background: linear-gradient(0deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.5) 48%, rgba(11,18,32,.1) 100%); }
	.kzcf-kstory__cap { justify-content: flex-end; padding-bottom: clamp(70px, 14vh, 130px); }
	.kzcf-kstory__screen { top: 38%; width: 80vw; height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
	.kzcf-kstory { height: auto; }
	.kzcf-kstory__stage { position: relative; height: auto; }
	.kzcf-kstory__scene { position: relative; inset: auto; opacity: 1; height: 70vh; }
	.kzcf-kstory__screen { opacity: 1; }
	.kzcf-kiki__bubble { opacity: 1; transform: none; }
}

/* ══════ Mobile: gepinnte Story-Abschnitte kompakt gestapelt (kein Scroll-Pin) ══════
   Auf dem Handy sind die scroll-gescrubbten Sektionen zu lang/zäh. Das JS überspringt
   dort den Scrub; hier wird alles statisch untereinander gestapelt. */
@media (max-width: 700px) {
	/* ── Camp-Reise: Phasen als Karten untereinander ── */
	.kzcf-jsec { height: auto !important; }
	.kzcf-jsec__stage { position: relative; height: auto; overflow: visible; padding: 8px 0 4px; }
	.kzcf-jsec__phases { position: relative; inset: auto; }
	.kzcf-phase {
		position: relative; inset: auto; opacity: 1 !important; transform: none !important;
		display: block; grid-template-columns: none !important;
		padding: 26px clamp(20px, 6vw, 32px); border-top: 1px solid rgba(29, 43, 79, .10);
		transition: opacity .55s ease;
	}
	/* Sanftes Einblenden beim Scrollen (nur wenn JS die Sektion markiert – sonst sichtbar).
	   Reines Opacity, KEIN Verschieben des Abschnitts. */
	.kzcf-jsec.kzcf-jrv .kzcf-phase:not( .is-seen ) { opacity: 0 !important; }
	.kzcf-jsec__phases > .kzcf-phase:first-child { border-top: none; }
	.kzcf-phase__copy,
	.kzcf-phase[data-side="left"] .kzcf-phase__copy,
	.kzcf-phase[data-side="right"] .kzcf-phase__copy { grid-column: auto; padding: 0; margin-top: 16px; }
	.kzcf-phase__media { grid-column: auto; height: 260px; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba( 29, 43, 79, .16 ); }
	.kzcf-scene__img,
	.kzcf-phase[data-side="left"] .kzcf-scene__img,
	.kzcf-phase[data-side="right"] .kzcf-scene__img {
		position: relative; left: auto; top: auto; width: 100%; height: 100%;
		object-position: var( --focus, 50% 42% ) !important; border-radius: 0;
		-webkit-mask-image: none !important; mask-image: none !important;
		transform: scale( 1.06 ); animation: kzcf-kenburns 14s ease-in-out infinite alternate;
	}
	.kzcf-phase__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient( 180deg, rgba(16,24,44,0) 55%, rgba(16,24,44,.28) 100% ); }
	@keyframes kzcf-kenburns { from { transform: scale( 1.06 ); } to { transform: scale( 1.14 ) translateY( -1.5% ); } }
	.kzcf-phase__title .kzcf-w { opacity: 1 !important; transform: none !important; animation: none !important; }
	.kzcf-phase__eyebrow, .kzcf-phase__ico, .kzcf-phase__n, .kzcf-phase__text { opacity: 1 !important; transform: none !important; transition: none !important; }
	.kzcf-scene__glow, .kzcf-scene__blob, .kzcf-scene__shadow { display: none !important; }
	.kzcf-jsec__progress { display: none !important; }

	/* ── KiKi-Story: Szenen untereinander, dann der echte Chat ── */
	.kzcf-kstory { height: auto !important; }
	.kzcf-kstory__stage { position: relative; height: auto; overflow: visible; }
	.kzcf-kstory__zoom { position: relative; inset: auto; transform: none !important; }
	.kzcf-kstory__scene { position: relative; inset: auto; opacity: 1 !important; height: auto; min-height: 62vh; overflow: hidden; }
	.kzcf-kstory__img, .kzcf-kstory__vid { position: absolute; inset: 0; }
	/* Chat sticky + Vollbild (wie Desktop): pinnt beim Scrollen, fuellt den Screen. */
	.kzcf-kchat {
		position: sticky; top: 0; inset: auto; opacity: 1 !important; pointer-events: auto !important;
		height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh;
	}
	.kzcf-kchat__inner { flex: 1 1 auto; min-height: 0; }
	.kzcf-kstory__flash, .kzcf-kstory__dots, .kzcf-kchat__nav, .kzcf-kstory__screen { display: none !important; }
}

/* ══════ Karte: gepinnt & full-bleed, Pins poppen scrollgesteuert auf ══════ */
.kzcf-mpin { position: relative; height: calc(100vh * 2.6); /* JS überschreibt */ }
.kzcf-mpin__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; background: #e9efe9; }
.kzcf-mpin__map { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 60% center; transform: scale(1.06); }
.kzcf-mpin__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(244,246,245,.97) 0%, rgba(244,246,245,.82) 26%, rgba(244,246,245,.2) 58%, rgba(244,246,245,0) 100%); }
.kzcf-mpin__pins { position: absolute; inset: 0; z-index: 2; }
.kzcf-mpin__pin { position: absolute; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; border: 2px solid #fff; box-shadow: 0 4px 9px rgba(0,0,0,.28); opacity: 0; transform: translate(-50%,-100%) rotate(45deg) scale(0); transform-origin: center bottom; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.kzcf-mpin__pin.is-in { opacity: 1; transform: translate(-50%,-100%) rotate(45deg) scale(1); }
.kzcf-mpin__pin--g { background: #37B679; }
.kzcf-mpin__pin--b { background: #2E7CF0; }
.kzcf-mpin__pin--o { background: #F5A623; }
.kzcf-mpin__pin--r { background: #E5484D; }
.kzcf-mpin__pin--p { background: #8B5CF6; }
.kzcf-mpin__inner { position: relative; z-index: 3; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; max-width: 1240px; }
.kzcf-mpin__inner > * { max-width: 480px; }
.kzcf-mpin__lead { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: #4a5468; margin: 16px 0 24px; }
.kzcf-map__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--kzcf-navy, #1D2B4F); color: #fff; font-weight: 800; font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.kzcf-map__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(29,43,79,.28); }

@media (max-width: 860px) {
	.kzcf-kpin__inner { grid-template-columns: 1fr; align-content: center; gap: 20px; }
	.kzcf-kpin__chat { order: 2; }
	.kzcf-kiki__msgs { min-height: 0; }
	.kzcf-mpin__veil { background: linear-gradient(0deg, rgba(244,246,245,.97) 0%, rgba(244,246,245,.7) 45%, rgba(244,246,245,.05) 100%); }
	.kzcf-mpin__inner { justify-content: flex-end; padding-bottom: clamp(50px, 10vh, 100px); }
}
@media (prefers-reduced-motion: reduce) {
	.kzcf-kpin, .kzcf-mpin { height: auto; }
	.kzcf-kpin__stage, .kzcf-mpin__stage { position: relative; height: auto; padding: 60px 0; }
	.kzcf-kiki__bubble { opacity: 1; transform: none; }
	.kzcf-mpin__pin { opacity: 1; transform: translate(-50%,-100%) rotate(45deg) scale(1); }
	.kzcf-kpin__vid { display: none; }
	.kzcf-kiki__orb { animation: none; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.kzcf-prov { grid-template-columns: 1fr; }
	.kzcf-jsec__veil { background: linear-gradient(0deg, rgba(16,24,44,.9) 0%, rgba(16,24,44,.5) 45%, rgba(16,24,44,.1) 100%); }
	.kzcf-pin__inner { justify-content: flex-end; padding-bottom: clamp(80px, 16vh, 140px); }
	.kzcf-phase__title { font-size: clamp(28px, 8vw, 40px); }
}

@media (max-width: 640px) {
	.kzcf-hero { height: clamp(360px, 64vh, 520px); }
	.kzcf-hero__inner {
		max-width: none;
		justify-content: flex-end;
		padding-bottom: clamp(56px, 10vh, 96px);
	}
	.kzcf-hero__overlay {
		background:
			linear-gradient(0deg, rgba(29, 43, 79, .92) 0%, rgba(29, 43, 79, .55) 45%, rgba(29, 43, 79, .12) 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kzcf-hero__vid { transition: none; }
	.kzcf-hero__cta { transition: none; }
	.kzcf-hero__media, .kzcf-hero__inner { transform: none !important; }
}
/* Jede Reihe = ein dezent getöntes Band (pro Kategorie/Ort eine sanfte Stimmung) mit
   großem, entsättigtem Deko-Icon im Hintergrund – unterscheidbar, aber nicht zu bunt. */
.kzcf-row { position: relative; margin: 0 0 20px; }
/* Beim Hovern der Reihe: weicher Farb-Glow von der Mitte, nach außen Übergang zum Seiten-BG. */
.kzcf-row::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
	background: radial-gradient( ellipse farthest-side at 50% 46%, rgba( 29, 43, 79, 0.30 ) 0%, rgba( 29, 43, 79, 0.14 ) 48%, rgba( 29, 43, 79, 0 ) 85% );
	transition: opacity 0.5s ease; }
.kzcf-row:hover::before { opacity: 1; }
/* Unterscheidung der Listen: kleines kategoriefarbenes Icon-Badge neben dem Titel. */
/* Kein linkes Padding → das navy Banner reicht bis zum Seitenrand (kommt von links rein). */
.kzcf-row__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp( 24px, 6vw, 90px ) 0 0; margin-bottom: 14px; }
.kzcf-row__headl { position: relative; display: inline-flex; align-items: center; gap: 11px; min-width: 0;
	padding: 8px 46px 8px clamp( 24px, 6vw, 90px ); }
/* Navy Fläche: im Ruhezustand nur bis hinters Icon (rechts gerundet, kommt vom Rand rein);
   beim Hover über die Reihe fährt sie von links nach rechts über den Titel. */
.kzcf-row__headl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
	width: 0; background: var( --kzcf-navy, #1D2B4F );
	border-radius: 0 999px 999px 0; box-shadow: none;
	transition: width 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ); }
.kzcf-row:hover .kzcf-row__headl::before { width: 100%; box-shadow: 0 4px 12px rgba( 29, 43, 79, 0.22 ); }
/* Freistehendes Line-Icon (kein Badge/Rahmen); navy, beim Hover weiß (mit dem Navy-Sweep). */
.kzcf-row__ico { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var( --kzcf-navy, #1D2B4F );
	transition: transform 0.25s cubic-bezier( 0.16, 1, 0.3, 1 ), color 0.28s ease 0.12s; }
.kzcf-row__ico svg { width: 30px; height: 30px; display: block; }
.kzcf-row:hover .kzcf-row__ico { transform: translateY( -2px ) rotate( -12deg ) scale( 1.14 ); color: #fff; }
.kzcf-row__title { position: relative; z-index: 1; font-size: 19px; font-weight: 800; color: var( --kzcf-ink, #20283c ); margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.28s ease 0.12s; }
.kzcf-row:hover .kzcf-row__title { color: #fff; }
/* Mobile: KEIN Navy-Balken/Markierung und KEIN Hover-Effekt (Wunsch Dennis).
   Auf Touch bleibt :hover nach dem Tippen haengen -> Titel wurde weiss + Icon
   drehte sich. Darum den kompletten Hover-Zustand hier neutralisieren. */
@media ( max-width: 700px ) {
	.kzcf-row .kzcf-row__headl::before,
	.kzcf-row:hover .kzcf-row__headl::before { width: 0 !important; box-shadow: none !important; }
	.kzcf-row .kzcf-row__title,
	.kzcf-row:hover .kzcf-row__title { color: var( --kzcf-ink, #20283c ) !important; }
	.kzcf-row .kzcf-row__ico,
	.kzcf-row:hover .kzcf-row__ico { transform: none !important; color: var( --kzcf-navy, #1D2B4F ) !important; }
	.kzcf-row::before,
	.kzcf-row:hover::before { opacity: 0 !important; }
}
.kzcf-row__more { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var( --kzcf-navy, #1D2B4F ); text-decoration: none; white-space: nowrap; }
/* Beim Hovern nur navyblauer Unterstrich, KEIN Textfarbwechsel (überschreibt Theme-a:hover). */
.kzcf-row__more:hover { color: var( --kzcf-navy, #1D2B4F ) !important; text-decoration: underline; text-decoration-color: var( --kzcf-navy, #1D2B4F ); text-underline-offset: 3px; }
.kzcf-row__viewport { position: relative; z-index: 1; }
/* Scrollbalken ausblenden (Navigation per Pfeilen / Wischen). */
/* Karten in fixer Größe (wie zuvor, 244px). Navigation per Pfeilen springt genau
   eine Karte weiter; Snapping proximity, damit die nächste Karte sauber bündig steht. */
.kzcf-row__scroll { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: clamp( 24px, 6vw, 90px ); padding: 10px clamp( 24px, 6vw, 90px ) 28px; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; }
.kzcf-row__scroll > .kzcf-nc { flex: 0 0 244px; width: 244px; scroll-snap-align: start; }
.kzcf-row__scroll::-webkit-scrollbar { display: none; height: 0; }
/* Mobile: EINE Listing-Karte mittig, Wischen zentriert die nächste (Center-Snap).
   touch-action/overscroll: behebt den „erst tippen, dann wischen"-Bug (Gesten-Disambiguierung). */
@media ( max-width: 700px ) {
	.kzcf-row__scroll {
		overflow-x: auto; overflow-y: hidden; /* nur horizontal scrollbar → vertikale Geste geht an die Seite */
		scroll-snap-type: x mandatory; scroll-padding: 0;
		padding: 10px 11vw 28px; gap: 14px;
		/* pan-x pan-y: horizontal fürs Karussell UND vertikal für die Seite. NICHT nur
		   pan-x – das blockiert eine auf der Karte beginnende vertikale Wischgeste. */
		touch-action: pan-x pan-y; overscroll-behavior-x: contain;
	}
	/* Ein Wisch = genau eine Karte (egal wie stark). */
	.kzcf-row__scroll > .kzcf-nc { flex: 0 0 78vw; width: 78vw; scroll-snap-align: center; scroll-snap-stop: always; }
	.kzcf-row__scroll .kzcf-nc__prev { pointer-events: none; }
	/* Mobil kein „Ansehen"-Overlay. */
	.kzcf-nc__cta { display: none !important; }
	/* Kein Anheben/Hover-Effekt auf Touch (klebt sonst nach dem Antippen). */
	.kzcf-nc:hover { transform: none; box-shadow: 0 8px 24px rgba( 22, 28, 26, .07 ); }
}
/* Zusätzlich für alle Touch-Geräte ohne Hover: keine klebende Anhebung. */
@media ( hover: none ) {
	.kzcf-nc:hover { transform: none; box-shadow: 0 8px 24px rgba( 22, 28, 26, .07 ); }
}
/* Klick-Pfeile links/rechts. */
/* Pfeile jetzt im Header oben rechts (neben „Alle ansehen"), nicht über den Karten. */
.kzcf-row__headr { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kzcf-row__nav { width: 34px; height: 34px; border-radius: 50%; padding: 0;
	background: #fff; border: 1.5px solid var( --kzcf-border, #e3e8e6 ); color: var( --kzcf-navy, #1D2B4F );
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.kzcf-row__nav svg { width: 18px; height: 18px; }
.kzcf-row__nav:not(:disabled):hover { background: var( --kzcf-navy, #1D2B4F ); color: #fff; border-color: var( --kzcf-navy, #1D2B4F ); }
/* Beide Pfeile bleiben immer sichtbar; der nicht nutzbare wird nur ausgegraut. */
.kzcf-row__nav:disabled { opacity: 0.35; cursor: default; }
/* Startseite hat keine Karte → „Karte"-Button auf den Karten ausblenden. */
.kzcf-home .kzcf-nc__mapbtn { display: none; }
/* Startseiten-Karten kompakter (deutlich geringere Höhe): kürzeres Bild, nur Kategorie-
   Pille (Förder-Badges nur auf der Filterseite), engeres Layout, Titel max. 2 Zeilen. */
.kzcf-row__scroll .kzcf-nc__media { aspect-ratio: 16 / 9; }
.kzcf-row__scroll .kzcf-nc__chiprow { display: none; }
.kzcf-row__scroll .kzcf-nc__pill.p-green,
.kzcf-row__scroll .kzcf-nc__pill.p-red,
.kzcf-row__scroll .kzcf-nc__pill.p-navy { display: none; }
.kzcf-row__scroll .kzcf-nc__body { padding: 10px 13px 11px; }
.kzcf-row__scroll .kzcf-nc__tags { margin-bottom: 5px; }
.kzcf-row__scroll .kzcf-nc__prov { margin-bottom: 6px; font-size: 12px; }
.kzcf-row__scroll .kzcf-nc__title { font-size: 14.5px; line-height: 1.2; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kzcf-row__scroll .kzcf-nc__meta { margin-bottom: 6px; font-size: 12px; }
.kzcf-row__scroll .kzcf-nc__foot { min-height: 36px; padding-top: 6px; }
.kzcf-row__scroll .kzcf-nc__price { font-size: 16px; }
.kzcf-row__scroll .kzcf-nc__logobox { height: 44px; min-width: 44px; margin-top: -32px; }
.kzcf-row__scroll .kzcf-nc__logobox--txt { font-size: 15px; }

/* Ken-Burns der Phasen-Bilder bei reduced-motion aus. */
@media (prefers-reduced-motion: reduce){ .kzcf-scene__img{ animation:none !important; transform:none !important; } }

/* ═══════════ Untere Abschnitte: weißlicher Grund, neu gedachtes Layout ═══════════ */
/* Anbieter-CTA: 2-spaltig (Text + Button links, Vorteils-Karten rechts). */
.kzcf-st--prov { background: linear-gradient( 180deg, #ffffff 0%, #f4f7fb 100% ); }
.kzcf-prov2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp( 28px, 5vw, 72px ); align-items: center; }
.kzcf-prov2 .kzcf-eyebrow { color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-prov2 .kzcf-st__title { color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-prov2 .kzcf-st__title em::after { background: rgba( 29, 43, 79, .16 ); }
.kzcf-prov2__lead { font-size: clamp( 15px, 1.6vw, 18px ); line-height: 1.6; color: #4a5468; margin: 16px 0 26px; max-width: 42ch; }
/* Schlicht gehalten: dezenter Farbwechsel beim Hover, kein Lift/Schatten, keine Unterstreichung. */
.kzcf-prov2__btn { display: inline-flex; align-items: center; gap: 8px; background: var( --kzcf-navy, #1D2B4F ); color: #fff; font-weight: 800; font-size: 16px; padding: 15px 30px; border-radius: 999px; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
/* Kein Textfarbwechsel beim Hovern (Theme-a:hover überschreiben), Text bleibt weiß. */
.kzcf-prov2__btn:hover { background: var( --kzcf-navy-dark, #142038 ); color: #fff !important; text-decoration: none; }
.kzcf-prov2__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kzcf-prov2__btn--ghost { background: transparent; color: var( --kzcf-navy, #1D2B4F ); border: 1.5px solid var( --kzcf-border, #e3e8e6 ); }
.kzcf-prov2__btn--ghost:hover { background: transparent; border-color: var( --kzcf-navy, #1D2B4F ); color: var( --kzcf-navy, #1D2B4F ); }
.kzcf-prov2__note { margin: 16px 0 0; font-size: 13.5px; color: #6b7488; }
.kzcf-prov2__note a { color: var( --kzcf-navy, #1D2B4F ); font-weight: 700; text-decoration: none; }
.kzcf-prov2__note a:hover { color: #0f1a33; }
.kzcf-prov2__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kzcf-prov2__points li { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var( --kzcf-border, #e3e8e6 ); border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 18px rgba( 29, 43, 79, .08 ); }
.kzcf-prov2__ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: rgba( 29, 43, 79, .10 ); color: var( --kzcf-navy, #1D2B4F ); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.kzcf-prov2__points b { display: block; color: var( --kzcf-ink, #20283c ); font-size: 15px; margin-bottom: 2px; }
.kzcf-prov2__points span { color: #5a6478; font-size: 14px; line-height: 1.45; }
@media ( max-width: 820px ) { .kzcf-prov2 { grid-template-columns: 1fr; gap: 26px; } }
/* FAQ: weißlicher Grund (Text-Overrides in der Inline-<style>). */
.kzcf-st--faq { background: linear-gradient( 180deg, #ffffff 0%, #f4f7fb 100% ); }

/* ═══════════ KiKi Szene 2: weißlicher Grund + großer KiKi-Blob (wie Chat-Seite) ═══════════ */
.kzcf-kstory__scene[data-scene="2"] { background: radial-gradient( 120% 90% at 50% 42%, #ffffff 0%, #eef1f7 55%, #e5eaf3 100% ); }
/* Blob identisch zum Chat-Sparkle (.kzchat__sparkle), nur groß. */
.kzcf-kstory__blob {
	position: absolute; left: 50%; top: 43%; transform: translate( -50%, -50% ); z-index: 1; pointer-events: none;
	width: min( 60vw, 440px ); aspect-ratio: 1; border-radius: 50%;
	background-image:
		radial-gradient( circle at 28% 30%, #7fa0e6 0%, rgba(127,160,230,0) 55% ),
		radial-gradient( circle at 72% 70%, #1D2B4F 0%, rgba(29,43,79,0)    55% ),
		radial-gradient( circle at 50% 85%, #3a5fa8 0%, rgba(58,95,168,0)   60% ),
		radial-gradient( circle at 65% 25%, #aec6f2 0%, rgba(174,198,242,0) 50% );
	background-color: #cdd9f0;
	background-size: 200% 200%, 200% 200%, 200% 200%, 180% 180%;
	background-position: 0% 0%, 100% 100%, 50% 100%, 100% 0%;
	filter: blur( 0.7px ) saturate( 1.1 );
	box-shadow: 0 30px 90px rgba( 29, 43, 79, .28 );
	animation: kzcf-kblob-morph 11s ease-in-out infinite, kzcf-kblob-shift 9s ease-in-out infinite;
	will-change: border-radius, background-position, transform;
}
/* Beim Reinzoomen faerbt sich der Blob zur Chat-Hintergrundfarbe (weiss), statt rauszufaden. */
.kzcf-kstory__blob::after {
	content: ""; position: absolute; inset: -1px; border-radius: inherit;
	background: #fff; opacity: var( --zfill, 0 ); pointer-events: none;
}
@keyframes kzcf-kblob-morph {
	0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: translate( -50%, -50% ) rotate( 0deg ); }
	20%      { border-radius: 60% 40% 58% 42% / 55% 45% 60% 40%; transform: translate( -50%, -50% ) rotate( 6deg ); }
	40%      { border-radius: 45% 55% 40% 60% / 60% 40% 48% 52%; transform: translate( -50%, -50% ) rotate( -5deg ); }
	60%      { border-radius: 55% 45% 62% 38% / 42% 58% 50% 50%; transform: translate( -50%, -50% ) rotate( 4deg ); }
	80%      { border-radius: 42% 58% 50% 50% / 52% 48% 55% 45%; transform: translate( -50%, -50% ) rotate( -3deg ); }
}
@keyframes kzcf-kblob-shift {
	0%, 100% { background-position:   0%   0%, 100% 100%,  50% 100%, 100%   0%; }
	33%      { background-position: 100%  30%,   0%  70%,  70%  30%,  20%  70%; }
	66%      { background-position:  30% 100%,  70%   0%,  30%  70%,  80%  40%; }
}
@media ( prefers-reduced-motion: reduce ) { .kzcf-kstory__blob { animation: none; transform: translate( -50%, -50% ); } }

/* Navy-Pfeil, der auf den Chat-Button (kz-fab) unten rechts zeigt — sichtbar wenn die KiKi-Sektion im Blick ist. */
.kzcf-fabarrow { position: fixed; right: 20px; bottom: 88px; z-index: 9997; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; pointer-events: none; opacity: 0; transform: translateY( 8px ); transition: opacity .4s ease, transform .4s ease; }
.kzcf-fabarrow.is-on { opacity: 1; transform: translateY( 0 ); }
.kzcf-fabarrow__pill { background: #1D2B4F; color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .01em; padding: 6px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba( 29, 43, 79, .3 ); }
.kzcf-fabarrow__svg { width: 38px; height: 52px; display: block; filter: drop-shadow( 0 3px 6px rgba( 29, 43, 79, .25 ) ); }
.kzcf-fabarrow.is-on .kzcf-fabarrow__svg { animation: kzcf-fabarrow-bob 1.5s ease-in-out infinite; }
@keyframes kzcf-fabarrow-bob { 0%, 100% { transform: translateY( 0 ); } 50% { transform: translateY( 6px ); } }
@media ( prefers-reduced-motion: reduce ) { .kzcf-fabarrow.is-on .kzcf-fabarrow__svg { animation: none; } }
/* Text navy auf weißlichem Grund (die Basis-Regeln für Szene 2 sind bereits navy). */
/* Eyebrow "Die Lösung" in dunklem Grau, damit es sich vom navy KiKi-Kreis abhebt, aber zum Design passt. */
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__eyebrow { color: #4a5468 !important; text-shadow: none; }
.kzcf-app .kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title,
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title em { color: var( --kzcf-navy, #1D2B4F ) !important; text-shadow: none; }
.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__title em::after { background: rgba( 46, 124, 240, .22 ) !important; }

/* Mobile: KiKi-Blob frei, Text näher darunter. */
@media ( max-width: 700px ) {
	.kzcf-kstory__scene[data-scene="2"] { min-height: 66vh; }
	.kzcf-kstory__blob { top: 31%; width: min( 56vw, 300px ); }
	.kzcf-kstory__scene[data-scene="2"] .kzcf-kstory__cap--screen { justify-content: flex-end; padding-bottom: 10vh; }
}

/* Phase 2 (Schema-Facetten): kleine Chips, Schwerpunkt-Gruppen, Verfügbarkeit */
.kzcf-opts--small { gap: 8px; }
.kzcf-opts--small .kzcf-opt--chip { padding: 7px 13px 7px 10px; font-size: 14px; gap: 7px; }
.kzcf-opts--small .kzcf-opt--chip .kzcf-opt__name { font-weight: 600; }
.kzcf-opts--small .kzcf-opt--chip__ico { width: 24px; height: 24px; }
.kzfx-grp { margin: 0 0 14px; }
.kzfx-grp:last-child { margin-bottom: 0; }
.kzfx-grp__title { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #6f7573; margin: 0 0 7px; }
.kzcf-opt--parent { background: #fff; border-style: dashed; }
.kzcf-filter--groups .kzcf-opt--chip.is-empty { display: none; }
.kzcf-filter--groups .kzfx-grp:not( :has( .kzcf-opt:not( .is-empty ) ) ) { display: none; }
.kzcf-sec__hint { margin: 10px 0 0; font-size: 13px; color: #6f7573; }

/* ───────── Phase 2b: eigene Form je Filter-Abschnitt ───────── */
.kzcf-sec__hint { margin: -8px 0 14px; font-size: 13.5px; color: #6f7573; line-height: 1.4; }
.kzcf-sec .kzcf-opt input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.kzcf-sec .kzcf-opt { position: relative; cursor: pointer; }
.kzcf-sec .kzcf-opt.is-empty { cursor: default; }
.kzcf-sec__deco { float: right; width: 52px; height: 52px; margin: -6px 0 0 12px; }

/* Einklappbare Nebenabschnitte */
details.kzcf-sec--fold { padding: 0; }
details.kzcf-sec--fold > summary { list-style: none; cursor: pointer; padding: 18px 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t c" "h c"; align-items: center; column-gap: 12px; }
details.kzcf-sec--fold > summary::-webkit-details-marker { display: none; }
details.kzcf-sec--fold > summary .kzcf-sec__title { grid-area: t; margin: 0; }
details.kzcf-sec--fold > summary .kzcf-sec__hint { grid-area: h; margin: 3px 0 0; }
details.kzcf-sec--fold > summary .kzcf-sec__chev { grid-area: c; width: 10px; height: 10px; border-right: 2px solid #1D2B4F; border-bottom: 2px solid #1D2B4F; transform: rotate( 45deg ); transition: transform 0.2s ease; margin-right: 6px; }
details.kzcf-sec--fold[open] > summary .kzcf-sec__chev { transform: rotate( -135deg ); }
details.kzcf-sec--fold > .kzcf-sec__body { padding: 0 0 20px; }

/* 1. Schalter */
.kzfx-switch { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e3e8e6; border-radius: 14px; background: #f7f9f8; }
.kzfx-switch__track { flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px; background: #cfd6d3; position: relative; transition: background 0.2s ease; }
.kzfx-switch__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 ); transition: left 0.2s ease; }
.kzfx-switch:has( input:checked ) { border-color: #2e9e5b; background: #eef8f1; }
.kzfx-switch:has( input:checked ) .kzfx-switch__track { background: #2e9e5b; }
.kzfx-switch:has( input:checked ) .kzfx-switch__knob { left: 23px; }
.kzfx-switch__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.kzfx-switch__text strong { font-size: 15px; color: #1D2B4F; }
.kzfx-switch__text small { font-size: 12.5px; color: #6f7573; line-height: 1.35; }
.kzfx-switch .kzcf-opt__count { background: #e6ecea; color: #6f7573; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 800; }
.kzfx-switch:has( input:checked ) .kzcf-opt__count { background: #2e9e5b; color: #fff; }

/* 2. Themenwelten */
.kzfx-worlds { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 10px; }
.kzfx-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 8px 12px; border: 1.5px solid #e3e8e6; border-radius: 16px; background: #fff; text-align: center; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.kzfx-tile__ico { width: 56px; height: 56px; display: inline-flex; }
.kzfx-tile__ico img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s ease; }
.kzfx-tile__name { font-size: 13.5px; font-weight: 700; color: #1D2B4F; line-height: 1.2; }
.kzfx-tile .kzcf-opt__count { font-size: 11px; color: #9a9a9a; }
.kzfx-tile__sub { font-size: 11px; font-weight: 700; color: var( --kzcf-red ); }
.kzfx-tile:hover { border-color: #1D2B4F; box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.08 ); }
.kzfx-tile:hover .kzfx-tile__ico img { transform: scale( 1.1 ); }
.kzfx-tile:has( input:checked ), .kzfx-tile.has-sub { border-color: #1D2B4F; background: #eef1f7; box-shadow: inset 0 0 0 1px #1D2B4F; }
.kzfx-tile.is-empty { opacity: 0.35; }
.kzfx-tile.is-empty:hover { border-color: #e3e8e6; box-shadow: none; }
.kzfx-tile.is-empty:hover .kzfx-tile__ico img { transform: none; }
.kzfx-worlds__subs { margin-top: 12px; }
.kzfx-world__sub { display: none; margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: #f5f7f6; }
.kzfx-world__sub:has( input:checked ) { display: block; }
.kzfx-world__subtitle { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6f7573; margin: 0 0 8px; }
.kzfx-world__sub .kzcf-opt--chip.is-empty { display: none; }
.kzfx-world__sub .kzcf-opt--chip { background: #fff; }
@media ( max-width: 480px ) { .kzfx-worlds { grid-template-columns: repeat( 3, 1fr ); gap: 8px; } .kzfx-tile { padding: 12px 6px 10px; } .kzfx-tile__ico { width: 46px; height: 46px; } .kzfx-tile__name { font-size: 12.5px; } }

/* 3. Bild-Karten */
.kzfx-cards { display: grid; gap: 10px; grid-template-columns: repeat( 2, 1fr ); }
.kzfx-cards--4, .kzfx-cards--3 { grid-template-columns: repeat( 4, 1fr ); }
.kzfx-cards--3 { grid-template-columns: repeat( 3, 1fr ); }
.kzfx-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; border: 1.5px solid #e3e8e6; border-radius: 16px; background: #fff; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.kzfx-cards--4 .kzfx-card { align-items: center; text-align: center; padding: 12px 8px 10px; }
.kzfx-card__ico { width: 48px; height: 48px; margin-bottom: 4px; }
.kzfx-card__ico img { width: 100%; height: 100%; object-fit: contain; }
.kzfx-card__name { font-size: 15px; font-weight: 800; color: #1D2B4F; line-height: 1.2; }
.kzfx-cards--4 .kzfx-card__name { font-size: 13px; }
.kzfx-card__sub { font-size: 12.5px; color: #6f7573; line-height: 1.35; }
.kzfx-card .kzcf-opt__count { margin-top: 4px; font-size: 11px; font-weight: 700; color: #9a9a9a; }
.kzfx-card:hover { border-color: #1D2B4F; box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.08 ); }
.kzfx-card:has( input:checked ) { border-color: var( --kzcf-red ); background: #fff4f3; box-shadow: inset 0 0 0 1px var( --kzcf-red ); }
.kzfx-card:has( input:checked ) .kzcf-opt__count { color: var( --kzcf-red ); }
.kzfx-card.is-empty { opacity: 0.35; }
@media ( max-width: 480px ) { .kzfx-cards--4 { grid-template-columns: repeat( 2, 1fr ); } }

/* 5. Tagesbalken */
.kzfx-day { display: grid; grid-template-columns: 1fr 1.3fr 1fr; border-radius: 16px; overflow: hidden; border: 1.5px solid #e3e8e6; background: #fff; }
.kzfx-day__seg, .kzfx-day__core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 14px 8px 12px; text-align: center; }
.kzfx-day__seg { transition: background 0.18s ease; }
.kzfx-day__seg + .kzfx-day__core, .kzfx-day__core + .kzfx-day__seg { border-left: 1.5px solid #e3e8e6; }
.kzfx-day__core { background: repeating-linear-gradient( 135deg, #f5f7f6 0 8px, #eef1f0 8px 16px ); color: #6f7573; }
.kzfx-day__seg img { width: 34px; height: 34px; }
.kzfx-day__name { font-size: 13.5px; font-weight: 800; color: #1D2B4F; }
.kzfx-day__core .kzfx-day__name { color: #6f7573; }
.kzfx-day__time { font-size: 11.5px; color: #6f7573; }
.kzfx-day__seg .kzcf-opt__count { font-size: 11px; color: #9a9a9a; }
.kzfx-day__seg:hover { background: #f7f9f8; }
.kzfx-day__seg:has( input:checked ) { background: #fff1c2; }
.kzfx-day__seg--spaetbetreuung:has( input:checked ) { background: #dde7fb; }
.kzfx-day__seg.is-empty { opacity: 0.35; }
.kzfx-day__extras { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.kzfx-day__more { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #2a2a2a; }
.kzfx-day__box, .kzfx-row__box { flex: 0 0 auto; width: 18px; height: 18px; border: 2px solid #1D2B4F; border-radius: 5px; background: #fff; position: relative; }
.kzfx-day__more:has( input:checked ) .kzfx-day__box, .kzfx-row:has( input:checked ) .kzfx-row__box { background: #1D2B4F; }
.kzfx-day__more:has( input:checked ) .kzfx-day__box::after, .kzfx-row:has( input:checked ) .kzfx-row__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate( 45deg ); }
.kzfx-day__more .kzcf-opt__count { font-size: 11px; color: #9a9a9a; }
.kzfx-day__more.is-empty { opacity: 0.4; }

/* 6. Checkliste */
.kzfx-rows { display: flex; flex-direction: column; }
.kzfx-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 6px; border-bottom: 1px dashed #e3e8e6; }
.kzfx-row:last-child { border-bottom: none; }
.kzfx-row .kzfx-row__box { margin-top: 2px; }
.kzfx-row__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.kzfx-row__name { font-size: 14.5px; font-weight: 700; color: #1D2B4F; }
.kzfx-row__desc { font-size: 12.5px; color: #6f7573; line-height: 1.35; }
.kzfx-row .kzcf-opt__count { font-size: 11px; color: #9a9a9a; margin-top: 3px; }
.kzfx-row:hover { background: #f7f9f8; border-radius: 10px; }
.kzfx-row:has( input:checked ) .kzfx-row__name { color: var( --kzcf-red ); }
.kzfx-row.is-empty { opacity: 0.4; }

/* 7. Tag-Quadrate */
.kzfx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kzfx-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1.5px solid #bfe3cc; border-radius: 8px; background: #f3fbf5; font-size: 13.5px; color: #1f5a35; }
.kzfx-tag__check { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #2e9e5b; background: #fff; position: relative; }
.kzfx-tag:has( input:checked ) { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.kzfx-tag:has( input:checked ) .kzfx-tag__check { background: #fff; }
.kzfx-tag:has( input:checked ) .kzfx-tag__check::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid #2e9e5b; border-width: 0 2px 2px 0; transform: rotate( 45deg ); }
.kzfx-tag .kzcf-opt__count { font-size: 11px; opacity: 0.7; }
.kzfx-tag.is-empty { opacity: 0.4; }

/* 8. Stufenleiter */
.kzfx-steps { display: grid; grid-template-columns: repeat( 3, 1fr ); position: relative; padding-top: 6px; }
.kzfx-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 33px; height: 4px; background: #e3e8e6; border-radius: 2px; }
.kzfx-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; }
.kzfx-step__dot { width: 58px; height: 58px; border-radius: 50%; border: 2px solid #e3e8e6; background: #fff; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.kzfx-step__dot img { width: 34px; height: 34px; }
.kzfx-step__name { font-size: 13px; font-weight: 700; color: #1D2B4F; }
.kzfx-step .kzcf-opt__count { font-size: 11px; color: #9a9a9a; }
.kzfx-step:hover .kzfx-step__dot { border-color: #1D2B4F; }
.kzfx-step:has( input:checked ) .kzfx-step__dot { border-color: var( --kzcf-red ); box-shadow: 0 0 0 4px rgba( 229, 57, 53, 0.15 ); background: #fff4f3; }
.kzfx-step.is-empty { opacity: 0.35; }

/* 9. Segment-Schalter */
.kzfx-segm { display: grid; grid-template-columns: repeat( 3, 1fr ); border: 1.5px solid #1D2B4F; border-radius: 999px; overflow: hidden; background: #fff; }
.kzfx-segm__item { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; font-size: 13.5px; font-weight: 700; color: #1D2B4F; transition: background 0.18s ease, color 0.18s ease; }
.kzfx-segm__item + .kzfx-segm__item { border-left: 1.5px solid #1D2B4F; }
.kzfx-segm__item img { width: 26px; height: 26px; }
.kzfx-segm__item .kzcf-opt__count { font-size: 11px; opacity: 0.6; }
.kzfx-segm__item:hover { background: #eef1f7; }
.kzfx-segm__item:has( input:checked ) { background: #1D2B4F; color: #fff; }
.kzfx-segm__item.is-empty { opacity: 0.4; }
@media ( max-width: 480px ) { .kzfx-segm__item { flex-direction: column; gap: 3px; font-size: 12px; padding: 9px 4px; } }
@media ( min-width: 700px ) { .kzfx-worlds { grid-template-columns: repeat( 5, 1fr ); } .kzfx-tile__ico { width: 50px; height: 50px; } }