/**
 * Hero Shader - Animierter Mesh-Gradient Hero (Hybrid)
 * Gutenberg-Bloecke + CSS-Animation auf Container-Klasse
 * Farben: MediaFitPass Gruen (#258057), Blau (#0038E3), Dark (#1A1A2E)
 */

/* ── Hero Container ── */
.hero-shader {
	position: relative;
	background-color: #0a0a1a !important;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 7rem 3rem 4rem 3rem !important;
}

/* Unterseiten-Header: kuerzer, zentriert */
.wp-block-group.hero-shader.hero-shader--subpage {
	min-height: 40vh !important;
	min-height: 40dvh !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 6rem 2rem 3rem 2rem !important;
}

.hero-shader--subpage .wp-block-heading,
.hero-shader--subpage p {
	text-align: center !important;
}

/* Text-Only Subpage-Hero: kompakter Vertikalblock zentriert */
.hero-shader--text-only {
	min-height: 50vh !important;
	min-height: 50dvh !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 7rem 2rem 4rem 2rem !important;
}

.hero-shader--text-only .hero-shader__badge {
	margin-left: auto !important;
	margin-right: auto !important;
	display: inline-block !important;
}

.hero-shader--text-only .hero-shader__description {
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Foto im Kopf ueber dem Lichtfleck (.hero-shader::after), sonst liegt ein
   blauer Schleier auf dem Bild. Auf der Elternseite seit cda7612 in
   eltern.css, hier fuer alle Koepfe mit Bildspalte (Startseite). */
.hero-shader .hero-shader__image-col {
	position: relative;
	z-index: 2;
}

/* Seitenkopf der Unterseiten (page_header() in scripts/migrate-pages.sh), seit
   30.09.2026 statt des grauen Bands mit Playfair kursiv (Florian: "das mit der
   ueberschrift meine kurse passt zum beispiel nicht so"). Dunkel wie die
   Heroes, aber kompakt: Kontakt, Meine Kurse oder Impressum sollen schnell
   zum Inhalt kommen. */
.wp-block-group.hero-shader.seitenkopf {
	min-height: 0 !important;
	padding: 7rem 2rem 3.5rem 2rem !important;
}

.hero-shader.seitenkopf .hero-shader__description {
	margin-top: 0.75rem !important;
}

@media (max-width: 600px) {
	.wp-block-group.hero-shader.seitenkopf {
		padding: 6rem 1.25rem 2.5rem 1.25rem !important;
	}
}

/* ── Animated Blobs via box-shadows auf Pseudo-Elemente ── */
.hero-shader::before,
.hero-shader::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
	will-change: transform;
}

/* Blob 1: Grosser gruener Blob unten links */
.hero-shader::before {
	width: 60vw;
	height: 60vw;
	left: -10%;
	bottom: -20%;
	background: radial-gradient(circle, rgba(37, 128, 87, 0.55) 0%, transparent 70%);
	animation: heroBlob1 7s ease-in-out infinite;
}

/* Blob 2: Blauer Blob oben rechts */
.hero-shader::after {
	width: 50vw;
	height: 50vw;
	right: -10%;
	top: -15%;
	background: radial-gradient(circle, rgba(0, 56, 227, 0.45) 0%, transparent 70%);
	animation: heroBlob2 9s ease-in-out infinite;
}

@keyframes heroBlob1 {
	0%   { transform: translate(0, 0) scale(1); }
	25%  { transform: translate(10vw, -5vh) scale(1.1); }
	50%  { transform: translate(5vw, 5vh) scale(0.95); }
	75%  { transform: translate(15vw, -10vh) scale(1.05); }
	100% { transform: translate(0, 0) scale(1); }
}

@keyframes heroBlob2 {
	0%   { transform: translate(0, 0) scale(1); }
	25%  { transform: translate(-12vw, 8vh) scale(1.15); }
	50%  { transform: translate(-5vw, 12vh) scale(0.9); }
	75%  { transform: translate(-15vw, 5vh) scale(1.1); }
	100% { transform: translate(0, 0) scale(1); }
}

/* ── Hover: intensiveres Blau ──
   Keine gruene Verstaerkung: Mit ihr fiel das gruene Akzentwort unter 3:1
   (primary-light auf 75 % Gruen nur 2.37:1). */
.hero-shader:hover::after {
	background: radial-gradient(circle, rgba(0, 56, 227, 0.65) 0%, transparent 70%);
}

.hero-shader::before,
.hero-shader::after {
	transition: background 0.6s ease;
}

/* ── Badge ── */
.hero-shader .hero-shader__badge {
	display: inline-block !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 2rem !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 10;
}

/* ── Title ── */
.hero-shader .hero-shader__title {
	margin-bottom: 1.5rem !important;
	position: relative;
	z-index: 10;
}

/* ── Description ── */
.hero-shader .hero-shader__description {
	color: rgba(255, 255, 255, 0.65) !important;
	max-width: 580px;
	margin-bottom: 2.5rem !important;
	position: relative;
	z-index: 10;
}

/* ── Buttons ── */
.hero-shader .hero-shader__buttons {
	position: relative;
	z-index: 10;
}

/* ── CTA-Row mit Hauptbutton + Text-Link (Eltern-Hero) ── */
.hero-shader__cta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	position: relative;
	z-index: 10;
}

.hero-shader__cta-row .hero-shader__btn {
	display: inline-flex;
	align-items: center;
	padding: 1rem 2.5rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.hero-shader__cta-row .hero-shader__btn--primary {
	background: linear-gradient(135deg, #258057, #0038E3);
	color: #ffffff;
	border: none;
	box-shadow: 0 4px 20px rgba(37, 128, 87, 0.3);
}

.hero-shader__cta-row .hero-shader__btn--primary:hover {
	transform: translateY(-1px) scale(1.02);
	box-shadow: 0 8px 30px rgba(37, 128, 87, 0.4);
	color: #ffffff;
}

.hero-shader__textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 2px;
	transition: color 0.2s ease, gap 0.2s ease, border-color 0.2s ease;
}

.hero-shader__textlink:hover {
	color: #ffffff;
	gap: 0.7rem;
	border-color: rgba(255, 255, 255, 0.6);
}

.hero-shader .hero-shader__btn--primary .wp-block-button__link {
	background: linear-gradient(135deg, #258057, #0038E3) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow: 0 4px 20px rgba(37, 128, 87, 0.3);
}

.hero-shader .hero-shader__btn--primary .wp-block-button__link:hover {
	box-shadow: 0 8px 30px rgba(37, 128, 87, 0.4);
}

.hero-shader .hero-shader__btn--outline .wp-block-button__link {
	background: transparent !important;
	color: #ffffff !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hero-shader .hero-shader__btn--outline .wp-block-button__link:hover {
	border-color: rgba(37, 128, 87, 0.5) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Responsive ── */
@media (max-width: 781px) {
	.hero-shader {
		min-height: auto !important;
		padding: 90px 1.5rem 3rem 1.5rem !important;
	}

	.hero-shader .hero-shader__title {
		font-size: clamp(2.2rem, 9vw, 3.5rem) !important;
	}

	.hero-shader .hero-shader__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-shader .hero-shader__buttons .wp-block-button {
		width: 100%;
	}

	.hero-shader .hero-shader__buttons .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.hero-shader {
		padding: 90px 1rem 2rem 1rem !important;
	}

	.hero-shader .hero-shader__badge {
		font-size: 0.75rem !important;
	}
}

/* ══════════════════════════════════════════════════
   CTA Shader - Kleinere Version des Hero-Gradients
   ══════════════════════════════════════════════════ */

.cta-shader {
	position: relative;
	background-color: #0a0a1a;
	overflow: hidden;
	padding: 6rem 2rem;
}

.cta-shader__mesh {
	position: absolute;
	inset: 0;
	filter: blur(70px);
}

.cta-shader__blob {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.cta-shader__blob--1 {
	width: 50vw;
	height: 50vw;
	left: -5%;
	top: -30%;
	background: radial-gradient(circle, rgba(37, 128, 87, 0.45) 0%, transparent 70%);
	animation: heroBlob1 8s ease-in-out infinite;
}

.cta-shader__blob--2 {
	width: 40vw;
	height: 40vw;
	right: -5%;
	bottom: -30%;
	background: radial-gradient(circle, rgba(0, 56, 227, 0.35) 0%, transparent 70%);
	animation: heroBlob2 10s ease-in-out infinite;
}

.cta-shader__content {
	position: relative;
	z-index: 10;
	max-width: 960px;
	margin: 0 auto;
	text-align: center;
}

.cta-shader__title {
	font-family: var(--wp--preset--font-family--poppins), 'Poppins', sans-serif;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #ffffff;
	margin: 0 0 1.25rem 0;
}

/* primary-light statt primary: auf dem gruenen Blob 3.84:1 statt 2.39:1,
   auch wo das Blau darueberliegt noch 3.59:1 (verlangt 3:1). */
.cta-shader__title-accent {
	color: var(--wp--preset--color--primary-light);
}

.cta-shader__text {
	font-family: var(--wp--preset--font-family--poppins), 'Poppins', sans-serif;
	font-size: 1.05rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	margin: 0 0 2rem 0;
}

.cta-shader__buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Reuse hero button styles for CTA */
.cta-shader .hero-shader__btn {
	display: inline-flex;
	align-items: center;
	padding: 1rem 2.5rem;
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--poppins), 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

.cta-shader .hero-shader__btn--primary {
	background: linear-gradient(135deg, #258057, #0038E3);
	color: #ffffff;
	box-shadow: 0 4px 20px rgba(37, 128, 87, 0.3);
}

.cta-shader .hero-shader__btn--primary:hover {
	transform: scale(1.05) translateY(-1px);
	box-shadow: 0 8px 30px rgba(37, 128, 87, 0.4);
}

.cta-shader .hero-shader__btn--outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.25);
}

.cta-shader .hero-shader__btn--outline:hover {
	transform: scale(1.05) translateY(-1px);
	border-color: rgba(37, 128, 87, 0.5);
	background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 781px) {
	.cta-shader__buttons {
		flex-direction: column;
		align-items: center;
	}

	.cta-shader .hero-shader__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	.hero-shader::before,
	.hero-shader::after,
	.cta-shader__blob {
		animation: none !important;
	}

}

/* ══════════════════════════════════════════════════
   Startseite: Kopf mit Foto rechts und Angebotsleiste (hero.php)
   26.10.2026, Florian nach fuenf Varianten: "variante 3 weiter optimieren,
   das bild von den kindern weiter rechts, die schrift darf nicht im gesicht
   sein, die icons fuer die kurse mehr mittig", dann "die grenze zwischen
   bild und hintergrund ist zu hart", dann "setze es so um". Ziel: auf einen
   Blick erkennbar, was der MediaFitPass macht (drei Kurse, Schulen,
   Zertifikat, wer dahintersteht).
   ══════════════════════════════════════════════════ */

.wp-block-group.hero-shader.hv {
	display: flex !important;
	align-items: flex-end !important;
	min-height: min(100vh, 940px);
	padding: 9rem 2rem 3.5rem 2rem !important;
}

.hv-innen {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto !important;
}

/* Foto nur rechts, blendet nach links, oben und unten weich aus, damit der
   Hintergrund durchscheint und keine Kante bleibt. Die Gesichter stehen
   rechts vom Text. */
.hv-foto-flaeche {
	position: absolute;
	z-index: 1;
	top: 80px;
	right: 0;
	bottom: 95px;
	width: 62%;
	margin: 0 !important;
}

.hv-foto-flaeche img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 45% 30%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 7%, rgba(0, 0, 0, 0.8) 14%, #000 20%, #000 74%, rgba(0, 0, 0, 0.6) 86%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 8%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 24%, #000 31%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.35) 7%, rgba(0, 0, 0, 0.8) 14%, #000 20%, #000 74%, rgba(0, 0, 0, 0.6) 86%, transparent 100%), linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 8%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 0.85) 24%, #000 31%);
	mask-composite: intersect;
}

.hv-raster {
	display: grid;
	grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
	grid-template-areas: "text chip" "leiste leiste";
	row-gap: 3rem;
	align-items: end;
}

.hv-text {
	grid-area: text;
}

.hv-chip {
	grid-area: chip;
	justify-self: end;
}

.hv-chip .zertifikat-chip {
	margin: 0;
	background: rgba(13, 14, 27, 0.82);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

.hv .hv-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.4rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.9);
	font: 500 0.82rem/1.4 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.02em;
}

.hv .hv-kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5fd39a;
	box-shadow: 0 0 0 4px rgba(95, 211, 154, 0.18);
}

.hv .hero-shader__title {
	margin: 0 0 1.25rem !important;
	color: #ffffff;
	font-size: clamp(2.4rem, 4.4vw, 4rem) !important;
	font-weight: 700;
	line-height: 1.05 !important;
	letter-spacing: -0.02em;
}

.hv .hv-sub {
	max-width: 500px;
	margin: 0 0 2rem;
	color: rgba(255, 255, 255, 0.72);
	font: 400 1.1rem/1.65 var(--wp--preset--font-family--poppins), sans-serif;
}

.hv .hero-shader__cta-row {
	gap: 1rem 2rem;
}

.hv .hero-shader__cta-row .hero-shader__btn {
	padding: 1.05rem 2.6rem;
	font-size: 1rem;
}

.hv-vertrauen {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 2rem 0 0;
	color: rgba(255, 255, 255, 0.7);
	font: 400 0.88rem/1.4 var(--wp--preset--font-family--poppins), sans-serif;
}

.hv-vertrauen img {
	width: 42px;
	height: 42px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
}

.hv-vertrauen strong {
	color: #ffffff;
	font-weight: 600;
}

/* Angebotsleiste: eine Leiste mit vier Teilen statt vier gleicher Kaesten,
   Symbol und Text mittig im Feld */
.hv-leiste {
	grid-area: leiste;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 22px;
	background: rgba(10, 10, 26, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.hv-seg {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	min-width: 0;
	padding: 1rem 0.75rem;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.hv-seg + .hv-seg::before {
	content: "";
	position: absolute;
	top: 22%;
	bottom: 22%;
	left: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.13);
}

.hv-seg:hover,
.hv-seg:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.hv-icon {
	/* Symbole quadratisch zugeschnitten (icon-kurs-*-quadrat.webp), damit sie
	   mittig sitzen; die breiten Originale wurden im Kaestchen abgeschnitten
	   (Florian, 26.10.2026: "die icons der kurse muessen mittig sein") */
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 14px;
	background: #ffffff;
}

.hv-icon img {
	display: block;
	width: 82%;
	height: 82%;
	object-fit: contain;
}

.hv-icon--schule svg {
	width: 26px;
	height: 26px;
	color: #1B5E3F;
}

.hv-segtext {
	display: grid;
	min-width: 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	text-align: left;
}

.hv-kk {
	display: block;
	color: #5fd39a;
	font: 700 0.68rem/1.3 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hv-segtext strong {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.hv-pfeil {
	margin-left: 0.35rem;
	color: #5fd39a;
	font-weight: 600;
	opacity: 0.55;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.hv-seg:hover .hv-pfeil {
	opacity: 1;
	transform: translateX(3px);
}

@media (max-width: 1100px) {
	.hv-foto-flaeche {
		width: 58%;
	}

	.hv-seg {
		gap: 0.65rem;
	}

	.hv-pfeil {
		display: none;
	}
}

/* Handy: Foto oben unter der Kopfzeile, darunter Text, Leiste zwei mal zwei,
   Zertifikat */
@media (max-width: 781px) {
	.wp-block-group.hero-shader.hv {
		display: block !important;
		min-height: 0;
		padding: 0 1.25rem 3rem 1.25rem !important;
	}

	.hv-foto-flaeche {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		width: auto;
		height: 300px;
		margin: 76px -1.25rem 0 !important;
	}

	.hv-foto-flaeche img {
		object-position: center 30%;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	}

	.hv-raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "text" "leiste" "chip";
		row-gap: 1.5rem;
		margin-top: -2rem !important;
	}

	.hv-chip {
		justify-self: stretch;
	}

	.hv-chip .zertifikat-chip {
		display: flex;
		width: 100%;
	}

	.hv .hero-shader__title {
		font-size: clamp(2.2rem, 10vw, 3rem) !important;
	}

	.hv .hv-sub {
		margin-bottom: 1.5rem;
		font-size: 1.02rem;
	}

	.hv .hero-shader__cta-row .hero-shader__btn {
		width: 100%;
		justify-content: center;
	}

	.hv-vertrauen {
		margin-top: 1.5rem;
		font-size: 0.82rem;
	}

	.hv-leiste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-radius: 18px;
	}

	.hv-seg {
		flex-direction: column;
		gap: 0.55rem;
		padding: 1rem 0.6rem;
		text-align: center;
	}

	.hv-seg + .hv-seg::before {
		display: none;
	}

	.hv-seg:nth-child(2n) {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	.hv-seg:nth-child(n+3) {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.hv-icon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}


	.hv-icon--schule svg {
		width: 22px;
		height: 22px;
	}

	.hv-segtext {
		text-align: center;
	}

	.hv-segtext strong {
		font-size: 0.9rem;
		white-space: normal;
		hyphens: auto;
	}

	.hv-kk {
		font-size: 0.62rem;
	}
}

/* ══════════════════════════════════════════════════
   Seite Kurse: Kopf mit den drei Kursen als Karten (kurse-kopf.php),
   26.10.2026, Florian: "varinate 1 ist sehr gut"
   ══════════════════════════════════════════════════ */

.wp-block-group.hero-shader.kk {
	display: block !important;
	min-height: 0 !important;
	padding: 9rem 2rem 4rem 2rem !important;
}

.kk-innen {
	position: relative;
	z-index: 5;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto !important;
	text-align: center;
}

.kk .kk-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.4rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.9);
	font: 500 0.82rem/1.4 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.02em;
}

.kk .kk-kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #5fd39a;
	box-shadow: 0 0 0 4px rgba(95, 211, 154, 0.18);
}

.kk .hero-shader__title {
	margin: 0 0 1.1rem !important;
	color: #ffffff;
	font-size: clamp(2.3rem, 4.3vw, 3.8rem) !important;
	font-weight: 700;
	line-height: 1.06 !important;
	letter-spacing: -0.02em;
	text-align: center;
}

.kk .kk-sub {
	max-width: 560px;
	margin: 0 auto 1.75rem;
	color: rgba(255, 255, 255, 0.72);
	font: 400 1.1rem/1.65 var(--wp--preset--font-family--poppins), sans-serif;
}

.kk-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 2.25rem;
	text-align: left;
}

.kk-karte {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
	color: #1A1A2E;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.kk-karte:hover,
.kk-karte:focus-visible {
	transform: translateY(-4px);
	color: #1A1A2E;
}

.kk-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 0.5rem;
	overflow: hidden;
	border: 1px solid #E4E7E0;
	border-radius: 14px;
	background: #ffffff;
}

.kk-icon img {
	display: block;
	width: 82%;
	height: 82%;
	object-fit: contain;
}

.kk-kk {
	display: block;
	color: #258057;
	font: 700 0.66rem/1.3 var(--wp--preset--font-family--poppins), sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kk-karte strong {
	font-size: 1.25rem;
	font-weight: 700;
}

.kk-x {
	color: #5b6170;
	font-size: 0.92rem;
	line-height: 1.5;
}

.kk-preis {
	margin-top: auto;
	padding-top: 0.6rem;
	color: #5b6170;
	font-size: 0.82rem;
}

.kk-preis b {
	margin-right: 0.25rem;
	color: #1A1A2E;
	font-size: 1.35rem;
}

/* Jugendkurse seit 26.10.2026 "Bald erhaeltlich" statt Preis (custom.css,
   Abschnitt "Bald erhaeltlich") */
.kk-preis.kk-bald {
	align-self: flex-start;
	margin-top: auto;
	padding: 0.3rem 0.85rem;
	border: 1.5px dashed #b9c4bc;
	border-radius: 9999px;
	color: #5b6170;
	font-size: 0.8rem;
	font-weight: 600;
}

.kk-mehr {
	margin-top: 0.4rem;
	color: #0038E3;
	font-size: 0.92rem;
	font-weight: 600;
}

.kk-unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	margin-top: 1.5rem;
}

.kk-unten .zertifikat-chip {
	margin: 0;
	background: rgba(13, 14, 27, 0.82);
}

@media (max-width: 781px) {
	.wp-block-group.hero-shader.kk {
		padding: 96px 1.25rem 3rem 1.25rem !important;
	}

	.kk .hero-shader__title {
		font-size: clamp(2.1rem, 9.5vw, 2.8rem) !important;
	}

	.kk .kk-sub {
		margin-bottom: 1.5rem;
		font-size: 1.02rem;
	}

	.kk-karten {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.8rem;
		margin-top: 1.5rem;
	}

	.kk-karte {
		padding: 1.1rem 1.2rem;
	}

	.kk-unten > * {
		width: 100%;
	}

	.kk-unten .zertifikat-chip {
		display: flex;
	}
}