/*
 * Zertifikat als Aushaengeschild (Florian, 22.10.2026: "das zertifikat ist
 * schon ein aushaengeschild und sollte ueberall gut sichtbar sein").
 * Musterbilder in assets/images/zertifikat/, gerendert aus der echten
 * Vorlage (inc/zertifikat-pdf.php) mit "MUSTER" darueber.
 * Laedt auf allen Seiten und im Editor (functions.php).
 */


/* == 1. Zertifikat-Band (patterns/zertifikat-*.php) == */

/*
 * Eigener Abschnitt mit den Musterzertifikaten (zertifikat-band.php, dazu
 * -eltern und -schulen). Hell gruen getoent, damit er zwischen weissen und
 * grauen Abschnitten auffaellt, ohne dunkel zu werden (Florian 30.09.2026:
 * kein dunkler Kasten mitten auf hellen Seiten). Die Zertifikate liegen als
 * Faecher uebereinander: alle Blaetter in derselben Rasterzelle, gedreht und
 * versetzt. Am Handy steht das Bild ueber dem Text.
 */
.zertifikat-band {
	position: relative;
	background: linear-gradient(180deg, #edf5f0 0%, #f6faf7 100%);
	border-top: 1px solid rgba(37, 128, 87, 0.08);
	border-bottom: 1px solid rgba(37, 128, 87, 0.08);
	overflow-x: clip;
}

/* WordPress setzt zwischen gestapelten Spalten keinen Abstand (blockGap 0) */
.zertifikat-band .zertifikat-band__spalten {
	row-gap: var(--wp--preset--spacing--30);
}

/* Faecher: Blaetter uebereinander in einer Rasterzelle */
.zertifikat-band .zertifikat-faecher {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	margin: 0;
	padding: 9% 3% 7%;
}

/* Heller Schein hinter den Blaettern. Im Editor nicht, dort zeichnet
   WordPress den Auswahlrahmen mit denselben Pseudo-Elementen. */
.zertifikat-band .zertifikat-faecher:not(.block-editor-block-list__block)::before {
	content: "";
	position: absolute;
	inset: 4% -2%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.zertifikat-band .zertifikat-faecher > .wp-block-image {
	position: relative;
	grid-row: 1;
	grid-column: 1;
	width: 72%;
	max-width: none;
	margin: 0;
}

.zertifikat-band .zertifikat-faecher > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(26, 26, 46, 0.08),
		0 24px 44px -24px rgba(26, 26, 46, 0.5);
}

/* Drei Blaetter (alle Kurse): Eltern links, 14 bis 16 rechts, 10 bis 13 vorn */
.zertifikat-band .zertifikat-faecher__blatt--links {
	justify-self: start;
	z-index: 1;
	transform: translateY(-15%) rotate(-7deg);
}

.zertifikat-band .zertifikat-faecher__blatt--rechts {
	justify-self: end;
	z-index: 2;
	transform: translateY(-11%) rotate(6deg);
}

.zertifikat-band .zertifikat-faecher__blatt--vorn {
	justify-self: center;
	z-index: 3;
	transform: translateY(11%) rotate(-1.5deg);
}

/* Zwei Blaetter (Schulen): 10 bis 13 hinten links, 14 bis 16 vorn rechts */
.zertifikat-band .zertifikat-faecher--zwei > .wp-block-image {
	width: 78%;
}

.zertifikat-band .zertifikat-faecher--zwei .zertifikat-faecher__blatt--links {
	transform: translateY(-12%) rotate(-5deg);
}

.zertifikat-band .zertifikat-faecher--zwei .zertifikat-faecher__blatt--vorn {
	justify-self: end;
	transform: translateY(10%) rotate(2deg);
}

/* Ein Blatt (Eltern): gross, dahinter zwei leere Blaetter als Stapel */
.zertifikat-band .zertifikat-faecher--eins {
	padding: 6% 6% 7%;
}

.zertifikat-band .zertifikat-faecher--eins > .wp-block-image {
	width: 92%;
}

.zertifikat-band .zertifikat-faecher--eins .zertifikat-faecher__blatt--vorn {
	transform: rotate(-2deg);
}

.zertifikat-band .zertifikat-faecher--eins .zertifikat-faecher__blatt--vorn:not(.block-editor-block-list__block)::before,
.zertifikat-band .zertifikat-faecher--eins .zertifikat-faecher__blatt--vorn:not(.block-editor-block-list__block)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 4px;
	box-shadow: 0 18px 36px -24px rgba(26, 26, 46, 0.45);
}

.zertifikat-band .zertifikat-faecher--eins .zertifikat-faecher__blatt--vorn:not(.block-editor-block-list__block)::before {
	background: #ffffff;
	transform: translate(3%, -3%) rotate(5deg);
}

.zertifikat-band .zertifikat-faecher--eins .zertifikat-faecher__blatt--vorn:not(.block-editor-block-list__block)::after {
	background: #dcebe1;
	transform: translate(-2%, 4%) rotate(-4deg);
}

/* Beim Zeigen faechern die Blaetter etwas weiter auf */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.zertifikat-band .zertifikat-faecher > .wp-block-image {
		transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.zertifikat-band .zertifikat-faecher:hover .zertifikat-faecher__blatt--links {
		transform: translate(-2%, -17%) rotate(-9deg);
	}

	.zertifikat-band .zertifikat-faecher:hover .zertifikat-faecher__blatt--rechts {
		transform: translate(2%, -13%) rotate(8deg);
	}

	.zertifikat-band .zertifikat-faecher:hover .zertifikat-faecher__blatt--vorn {
		transform: translateY(9%) rotate(0deg) scale(1.02);
	}

	.zertifikat-band .zertifikat-faecher--zwei:hover .zertifikat-faecher__blatt--links {
		transform: translate(-2%, -14%) rotate(-7deg);
	}

	.zertifikat-band .zertifikat-faecher--zwei:hover .zertifikat-faecher__blatt--vorn {
		transform: translateY(8%) rotate(0deg) scale(1.02);
	}

	.zertifikat-band .zertifikat-faecher--eins:hover .zertifikat-faecher__blatt--vorn {
		transform: rotate(0deg) scale(1.02);
	}
}

/* Text: Marke als Pille mit Siegel, Ueberschrift mit Playfair-Akzent */
.zertifikat-band .zertifikat-band__marke {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
	padding: 0.4rem 0.95rem 0.4rem 0.75rem;
	border: 1px solid rgba(37, 128, 87, 0.25);
	border-radius: 9999px;
	background: #ffffff;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.zertifikat-band .zertifikat-band__marke::before {
	content: "";
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.zertifikat-band .zertifikat-band__titel {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.zertifikat-band .zertifikat-band__titel em {
	font-family: var(--wp--preset--font-family--playfair), Georgia, serif;
	font-style: italic;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.zertifikat-band .zertifikat-band__text {
	max-width: 34rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-gray);
}

/* Drei Stichworte in einer Zeile, je mit gruenem Haken, ohne Kaesten */
.zertifikat-band .zertifikat-band__fakten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.zertifikat-band .zertifikat-band__fakten li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--dark);
}

.zertifikat-band .zertifikat-band__fakten li::before {
	content: "";
	flex: 0 0 auto;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* Knopf als Umriss (Angebot, kein Weg durch den Kurs), Schild mit Haken */
.zertifikat-band .zertifikat-band__knoepfe {
	margin-top: 1.9rem;
}

.zertifikat-band .zertifikat-band__knoepfe .wp-block-button.is-style-outline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.75rem 1.75rem;
	border-color: currentColor;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.zertifikat-band .zertifikat-band__knoepfe .wp-block-button.is-style-outline .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.zertifikat-band .zertifikat-band__knoepfe .wp-block-button.is-style-outline .wp-block-button__link:hover,
.zertifikat-band .zertifikat-band__knoepfe .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--accent);
}

.zertifikat-band .zertifikat-band__hinweis {
	max-width: 30rem;
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-gray);
}

/* Handy und schmales Tablet: Bild ueber dem Text, Blaetter etwas groesser */
@media (max-width: 781px) {
	.zertifikat-band .zertifikat-band__bild {
		order: -1;
	}

	.zertifikat-band .zertifikat-faecher {
		max-width: 520px;
		margin: 0 auto;
		padding: 11% 4% 14%;
	}

	.zertifikat-band .zertifikat-faecher > .wp-block-image {
		width: 78%;
	}

	.zertifikat-band .zertifikat-faecher--zwei > .wp-block-image {
		width: 82%;
	}

	.zertifikat-band .zertifikat-faecher--eins {
		padding: 7% 6% 8%;
	}

	.zertifikat-band .zertifikat-faecher--eins > .wp-block-image {
		width: 92%;
	}

	.zertifikat-band .zertifikat-band__titel {
		font-size: clamp(1.6rem, 7vw, 2rem);
	}
}

/* == 1. Ende == */




/* == 2. Akzente in bestehenden Sektionen (Hero, Preiskarten, Kurskarten) == */

/*
 * Sichtbar statt erklaert (Florian, 22.10.2026: "zu viel erklaerungen zu viel
 * text"): Musterbilder im Kopf, Symbol und eigene Zeile auf den Preiskarten,
 * kleines Zeichen auf den Kurskarten. Wortlaut immer mit "kostenlos" und
 * "Akademie", nie "inklusive" (AGB Paragraf 12, FernUSG). Das Symbol ist
 * "award" aus Lucide wie im Kurskopf (learndash.css, .mfp-kurskopf__zertifikat).
 */

/* Rosette: gruener Kreis mit weissem Symbol, fuer Preiszeilen, Kurskarten und
   den Steckbrief der Schulseite */
.zertifikat-icon,
.zertifikat-marke::before,
.schul-steckbrief__zeile--zertifikat dt::before,
.zertifikat-chip__stapel::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E") center / 56% no-repeat;
	box-shadow: 0 4px 12px rgba(37, 128, 87, 0.28);
}

/* -- Kopf der Verkaufsseiten: Musterzertifikate als Knopf auf #zertifikat --
   hero.php mit allen drei Mustern gefaechert, eltern-hero.php mit dem Muster
   des Elternkurses. Das Familien-Paket hat keinen, dort folgt das Band
   direkt unter dem Kopf. Die Bilder haben keine width/height im Markup,
   die Groesse kommt von hier. */
.zertifikat-chip {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	max-width: 100%;
	margin-top: 2.25rem;
	padding: 0.7rem 1.25rem 0.7rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.zertifikat-chip:hover,
.zertifikat-chip:focus-visible {
	border-color: rgba(95, 211, 154, 0.6);
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.zertifikat-chip__text {
	min-width: 0;
}

.zertifikat-chip__text strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff;
}

.zertifikat-chip__pfeil {
	flex: none;
	font-weight: 600;
	color: #5fd39a;
	transition: transform 0.25s ease;
}

.zertifikat-chip:hover .zertifikat-chip__pfeil,
.zertifikat-chip:focus-visible .zertifikat-chip__pfeil {
	transform: translateX(3px);
}

.zertifikat-chip__stapel {
	position: relative;
	flex: none;
	width: 84px;
	height: 58px;
}

.zertifikat-chip__stapel img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	max-width: none;
	height: auto;
	border-radius: 3px;
	background: #ffffff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-4deg);
}

/* drei Muster: hinten links, Mitte, vorne rechts */
.zertifikat-chip__stapel img:nth-child(1):nth-last-child(3) {
	transform: translate(-68%, -60%) rotate(-11deg);
}

.zertifikat-chip__stapel img:nth-child(2):nth-last-child(2) {
	transform: translate(-50%, -50%) rotate(-2deg);
}

.zertifikat-chip__stapel img:nth-child(3):last-child {
	transform: translate(-32%, -40%) rotate(7deg);
}

/* zwei Muster (seit 26.10.2026, nur die Jugendkurse): hinten links, vorne
   rechts */
.zertifikat-chip__stapel img:nth-child(1):nth-last-child(2) {
	transform: translate(-62%, -56%) rotate(-8deg);
}

.zertifikat-chip__stapel img:nth-child(2):last-child {
	transform: translate(-38%, -44%) rotate(5deg);
}

/* Rosette als Siegel unten rechts auf den Mustern */
.zertifikat-chip__stapel::after {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 1.6rem;
	height: 1.6rem;
	box-shadow: 0 0 0 3px #0a0a1a, 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Telefon: Abstand zum Foto, das unter der Textspalte folgt */
@media (max-width: 781px) {
	.hero-shader__columns .zertifikat-chip {
		margin-bottom: 1.75rem;
	}
}

@media (max-width: 480px) {
	.zertifikat-chip {
		gap: 0.8rem;
		margin-top: 1.75rem;
		padding: 0.65rem 0.9rem 0.65rem 0.6rem;
		font-size: 0.8rem;
	}

	.zertifikat-chip__text strong {
		font-size: 0.88rem;
	}

	.zertifikat-chip__stapel {
		width: 72px;
		height: 52px;
	}

	.zertifikat-chip__stapel img {
		width: 56px;
	}
}

/* -- Preiskarten: eigene Zeile unter der Leistungsliste --
   kurse-preise.php, eltern-preise.php, familien-paket-inhalt.php; auf der
   Schulseite als breite Zeile zwischen Karten und Angaben, nicht in der
   Karte (docs/recht/QUELLEN-UND-OFFENE-PUNKTE.md 6.8). */
.zertifikat-zeile {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(37, 128, 87, 0.24);
	border-radius: 14px;
	background: linear-gradient(135deg, #eaf5ef 0%, #f6faf8 100%);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--wp--preset--color--dark);
	text-align: left;
}

.zertifikat-zeile strong {
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.preis-card__list:has(+ .zertifikat-zeile) {
	margin-bottom: 1.1rem;
}

/* Familien-Paket: .paket-preis p setzt den Abstand sonst auf 0 */
.paket-preis .zertifikat-zeile {
	margin: 0 0 1.25rem;
}

.zertifikat-zeile--breit {
	max-width: 760px;
	margin: 2rem auto 0;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
}

.zertifikat-zeile--breit .zertifikat-icon {
	width: 2.4rem;
	height: 2.4rem;
}

.zertifikat-zeile--breit + .preise-fakten {
	margin-top: 1rem;
}

/* -- Kurskarten (three-pillars.php) und Kursbloecke auf /kurse/ --
   Absatz-Block mit Klasse, Rosette per CSS, im Editor bearbeitbar. Bewusst
   kein Flex: Setzt jemand im Editor einen Link oder Fettdruck in den Satz,
   bleibt er Fliesstext. Die Rosette steht links neben dem Text, das Polster
   oben und unten hebt eine einzelne Zeile auf ihre Mitte. */
.zertifikat-marke {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 1.5rem 0 0;
	padding: max(0px, calc((1.9rem - 1.4em) / 2)) 0 max(0px, calc((1.9rem - 1.4em) / 2)) 2.55rem;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary-dark);
	text-align: left;
}

.zertifikat-marke::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.9rem;
	height: 1.9rem;
	transform: translateY(-50%);
}

.zertifikat-marke,
.zertifikat-chip__text,
.zertifikat-zeile {
	text-wrap: pretty;
}

.pillar-card .zertifikat-marke {
	margin: 1.25rem auto 0;
	font-size: 0.82rem;
	text-wrap: balance;
}

/* -- Vertrauensblock (trust-elements.php): Karte "Zertifikat erwerben" hebt
   sich ab, die Reihe ist dann keine Reihe gleicher Kaesten mehr -- */
.trust-glance__claims--karten .trust-glance__claim.trust-glance__claim--zertifikat {
	border-color: rgba(37, 128, 87, 0.45);
	background: linear-gradient(180deg, #ffffff 0%, #e6f3ec 100%);
}

.trust-glance__claim--zertifikat .trust-glance__icon,
.format-grid .format-card--zertifikat .format-card__icon {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(37, 128, 87, 0.3);
}

/* -- Steckbrief im Kopf der Schulseite (schulen-hero.php): Zeile "Zusaetzlich" -- */
.schul-steckbrief .schul-steckbrief__zeile--zertifikat {
	margin: 0.6rem -1rem 0;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(95, 211, 154, 0.45);
	border-radius: 14px;
	background: rgba(37, 128, 87, 0.24);
}

.schul-steckbrief .schul-steckbrief__zeile--zertifikat dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #5fd39a;
}

.schul-steckbrief__zeile--zertifikat dt::before {
	width: 1.4rem;
	height: 1.4rem;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.zertifikat-chip,
	.zertifikat-chip__pfeil {
		transition: none;
	}
}

/* == 2. Ende == */




/* == 3. Kursseiten, Bestellseite, Meine Kurse == */

/* Abzeichen (Kreis mit Band) als Maske, dasselbe Zeichen wie in der
   Zertifikat-Pille des Kurskopfs (functions.php,
   mediafitpass_kurs_kaufinfo_html) */
:root {
	--mfp-zertifikat-abzeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E");
}

/* -- Kurskopf vor dem Kauf: Muster-Zertifikat rechts --
   (functions.php, mediafitpass_kurs_muster_html). Statt des grossen
   Kurssymbols, leicht gedreht wie ein aufgelegtes Blatt, oben rechts ein
   Siegel mit dem Abzeichen. Rechts, weil es links das Logo der Akademie im
   blauen Band verdeckte; rechts liegt es nur auf der kleinen Marke
   "ABSCHLUSSTEST". Darunter der Hinweis, dass Test und Zertifikat ein
   eigenes Angebot der Akademie sind. Bis 860 px steht es unter dem Text. */
.mfp-kurskopf__muster {
	position: relative;
	justify-self: end;
	box-sizing: border-box;
	width: clamp(260px, 29vw, 340px);
	margin: 0;
	padding: 0.75rem 0.5rem 0;
}

.mfp-kurskopf__muster img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 34px 56px -28px rgba(0, 0, 0, 0.7);
	transform: rotate(3deg);
	transition: transform 0.35s ease;
}

.mfp-kurskopf__muster:hover img {
	transform: rotate(0deg) scale(1.04);
}

.mfp-kurskopf__muster::before,
.mfp-kurskopf__muster::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.mfp-kurskopf__muster::before {
	top: -0.4rem;
	right: -0.5rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 12px 24px -10px rgba(0, 0, 0, 0.6);
}

.mfp-kurskopf__muster::after {
	top: calc(-0.4rem + 13px);
	right: calc(-0.5rem + 13px);
	width: 30px;
	height: 30px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
	mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
}

.mfp-kurskopf__muster figcaption {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.8rem;
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 860px) {
	.mfp-kurskopf__muster {
		justify-self: center;
		width: min(100%, 360px);
	}

	.mfp-kurskopf__muster img {
		transform: rotate(2deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mfp-kurskopf__muster img {
		transition: none;
	}
}

/* -- Kurskopf eingeschrieben: kleines Muster beim Abschlusstest --
   (Kasten aus inc/abschlusstest.php in der weissen Karte rechts). Rein
   gestalterisch, je Kurs das passende Bild ueber die Kurs-Klasse des Kopfs. */
.mfp-kurskopf__test {
	position: relative;
}

.mfp-kurskopf__test::after {
	content: "";
	position: absolute;
	top: 0.9rem;
	right: 0.15rem;
	width: 68px;
	aspect-ratio: 1400 / 990;
	border-radius: 3px;
	background: #ffffff url("../images/zertifikat/zertifikat-muster-eltern.webp") center / cover no-repeat;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.14), 0 10px 18px -10px rgba(26, 26, 46, 0.5);
	transform: rotate(4deg);
	pointer-events: none;
}

.mfp-kurskopf--kinder .mfp-kurskopf__test::after {
	background-image: url("../images/zertifikat/zertifikat-muster-einsteiger.webp");
}

.mfp-kurskopf--jugend .mfp-kurskopf__test::after {
	background-image: url("../images/zertifikat/zertifikat-muster-fortgeschrittene.webp");
}

.mfp-kurskopf__test .mfp-kurskopf__testtitel,
.mfp-kurskopf__test .mfp-kurskopf__testzeile {
	padding-right: 84px;
}

/* -- "Meine Kurse": Abzeichen im Knopf zum Abschlusstest --
   (Umriss-Knopf aus inc/abschlusstest.php, je nach Stand "Zum
   Abschlusstest", "Zertifikat herunterladen" usw.) */
.mfp-kurskarte__knoepfe .mfp-knopf--umriss::before {
	content: "";
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-right: 0.5rem;
	background-color: currentColor;
	-webkit-mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
	mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
}

/* -- Bestellseite: Ausblick unter dem Bestellknopf --
   (inc/bestellung.php, mediafitpass_bestellung_zertifikat_html). Ohne
   Kasten, damit unter den zwei weissen Karten keine dritte steht. Beim
   Familien-Paket drei Muster aufgefaechert. */
.mfp-bestellung-zertifikat {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.25rem clamp(0.25rem, 3vw, 1.25rem);
}

.mfp-bestellung-zertifikat__bilder {
	position: relative;
	flex: none;
	width: 104px;
	aspect-ratio: 1400 / 990;
}

.mfp-bestellung-zertifikat__bilder img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(26, 26, 46, 0.12), 0 14px 24px -14px rgba(26, 26, 46, 0.5);
	transform: rotate(-4deg);
}

.mfp-bestellung-zertifikat--paket .mfp-bestellung-zertifikat__bilder {
	width: 92px;
	margin: 0 14px;
}

.mfp-bestellung-zertifikat--paket .mfp-bestellung-zertifikat__bilder img:nth-child(1) {
	transform: translate(-14px, 4px) rotate(-12deg);
}

.mfp-bestellung-zertifikat--paket .mfp-bestellung-zertifikat__bilder img:nth-child(2) {
	transform: translate(12px, 2px) rotate(9deg);
}

.mfp-bestellung-zertifikat--paket .mfp-bestellung-zertifikat__bilder img:nth-child(3) {
	transform: rotate(-2deg);
}

.mfp-bestellung .mfp-bestellung-zertifikat p {
	margin: 0;
	line-height: 1.45;
}

.mfp-bestellung-zertifikat strong {
	display: block;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--wp--preset--color--dark);
}

.mfp-bestellung-zertifikat span {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-gray);
}

@media (max-width: 480px) {
	.mfp-bestellung-zertifikat {
		gap: 1rem;
	}

	.mfp-bestellung-zertifikat__bilder {
		width: 84px;
	}

	.mfp-bestellung-zertifikat--paket .mfp-bestellung-zertifikat__bilder {
		width: 76px;
	}
}

/* -- "Meine Kurse" nach dem Kauf (?kauf=danke): eine Zeile mit Abzeichen --
   (functions.php, mediafitpass_kauf_danke_html), darunter klein der
   Hinweis, dass Test und Zertifikat nicht Teil des Kaufs sind */
.mfp-kauf-danke .mfp-kauf-danke__zertifikat {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid #E4ECE7;
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--primary-dark);
}

.mfp-kauf-danke__zertifikat::before {
	content: "";
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
	mask: var(--mfp-zertifikat-abzeichen) center / contain no-repeat;
}

.mfp-kauf-danke__zertifikat small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-gray);
}

/* -- Bestellseite: Hinweis aufs Familien-Paket --
   (inc/bestellung.php, mediafitpass_bestellung_paket_hinweis_html,
   23.10.2026). Ueber der Uebersicht "Ihre Bestellung" und leiser als sie:
   heller Gruenton ohne Schatten, damit er nicht wie ein Teil der Bestellung
   wirkt. primary-dark auf #EEF6F1 7.02:1, im Hover accent 7.14:1. */
.mfp-bestellung-paket {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.9rem 1.15rem 0.9rem 1rem;
	border: 1px solid #CFE3D7;
	border-radius: 16px;
	background: #EEF6F1;
}

.mfp-bestellung-paket::before {
	content: "";
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin-top: 0.1rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mfp-bestellung .mfp-bestellung-paket p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--dark);
}

.mfp-bestellung-paket a {
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--primary-dark);
}

.mfp-bestellung-paket a:hover,
.mfp-bestellung-paket a:focus-visible {
	color: var(--wp--preset--color--accent);
}

@media (forced-colors: active) {
	.mfp-kurskopf__muster::after,
	.mfp-kurskarte__knoepfe .mfp-knopf--umriss::before,
	.mfp-kauf-danke__zertifikat::before,
	.mfp-bestellung-paket::before {
		background-color: CanvasText;
	}
}

/* == 3. Ende == */