/* =====================================================================
   VPH MOOC Showcase – Frontend-Styles · OVERHAUL „Soft Depth, veredelt"
   Eigenständig & themenneutral. Alles unter .vph-mooc gescoped.
   Markenfarben: virtuelle-ph.at (Blau/Orange/Cyan).

   Leitprinzip: Tiefe (Schatten) nur fuer schwebende Ebenen (Karte,
   Modal, CTA, Stat, Stepacc). Innere Struktur ueber 1px-Haarlinien.
   Farbe ist Wuerze (Status + Hierarchie), nie Tapete.
   Zweistufige CTA-Hierarchie: Orange = die EINE Hauptaktion (Checkliste),
   --card-accent = kursspezifisch.

   Reines CSS-Upgrade: Markup (PHP) + JS unveraendert, alle bestehenden
   Selektoren erhalten. Neu: Hilfs-Pseudoelemente, abgeleitete Tokens,
   Keyframes, @starting-style / @supports / @media-Bloecke.
   ===================================================================== */

/* =====================================================================
   1 · TOKENS
   ===================================================================== */
.vph-mooc {
	/* --- 1.1 Marken- & Neutralfarben (AA-gehaertet) --- */
	--vph-blue: #0098d4;
	--vph-blue-dark: #006f95;
	--vph-cyan: #00a7e5;
	--vph-orange: #d54d13;
	--vph-orange-dark: #aa3e0f;

	--vph-cta-1: #c0420f;            /* Orange-CTA-Gradient (Weiss >=4.6:1) */
	--vph-cta-2: #93360d;

	--vph-ink: #353c44;              /* Headings */
	--vph-text: #3a4654;             /* Fliesstext */
	--vph-muted: #586577;            /* ~5:1 auf #fff */
	--vph-muted-strong: #5a6675;     /* kleine Microcopy <=.85rem */
	--vph-line: #e3e9ef;             /* Hauptstruktur-Haarlinie */
	--vph-line-strong: #d3dbe4;      /* betonte Trenner (foot/nav top) */
	--vph-bg-soft: #f4f8fb;
	--vph-card: #ffffff;

	/* --- 1.2 Abgeleiteter Akzent-Ink (Akzent-Text auf Weiss >=4.5:1) --- */
	--card-accent-ink: color-mix(in srgb, var(--card-accent-dark) 80%, #11202c);

	/* --- 1.3 Type-Scale (modular ~1.20) --- */
	--fs-xs: .75rem;
	--fs-sm: .8125rem;
	--fs-base: .9375rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.625rem;
	--fs-3xl: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);

	/* --- 1.4 Leading & Tracking --- */
	--lh-tight: 1.35;   /* UI: meta, tags, badges, buttons, stat-label */
	--lh-base: 1.55;    /* kurze Absaetze: card__desc, step__text */
	--lh-prose: 1.7;    /* Lesetext: dialog__desc, cl__intro */
	--ls-tight: -.015em;/* Headings >=1.5rem */
	--ls-caps: .12em;   /* eyebrow UND cl__badge */

	/* --- 1.5 Spacing-Skala (4px) & Gutter --- */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3rem;
	--vph-gutter: clamp(16px, 4vw, 24px);

	/* --- 1.6 Radien --- */
	--vph-radius: 20px;
	--vph-radius-sm: 11px;

	/* --- 1.7 Schatten (zweilagig: Kontakt + Ambient) --- */
	--vph-shadow: 0 1px 2px rgba(15, 40, 70, .06), 0 6px 16px -4px rgba(15, 40, 70, .10);
	--vph-shadow-lg: 0 2px 4px rgba(15, 40, 70, .08), 0 24px 48px -12px rgba(15, 40, 70, .22);
	--vph-shadow-modal:
		0 1px 0 rgba(255, 255, 255, .6) inset,
		0 24px 60px -18px rgba(15, 40, 70, .45),
		0 8px 20px -10px rgba(15, 40, 70, .25);

	/* --- 1.8 Fokus-Ring (akzent-adaptiv, zweistufig) --- */
	--vph-ring: 0 0 0 2px #fff, 0 0 0 4px var(--card-accent, #0098d4);
	--vph-ring-outline: 3px solid color-mix(in srgb, var(--vph-blue) 55%, transparent);

	/* --- 1.9 Motion-Tokens --- */
	--vph-ease: cubic-bezier(.2, .7, .25, 1);
	--vph-ease-out: cubic-bezier(.16, 1, .3, 1);
	--vph-dur: .32s;
	--vph-dur-fast: .18s;

	--vph-cols: 3;

	/* Karten-Akzent (pro Karte inline ueberschrieben) */
	--card-accent: #0098d4;
	--card-accent-dark: #006f95;

	color: var(--vph-text);
	/* Schrift vom Theme erben (DSGVO – keine externen Fonts). */
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--vph-gutter);
}

.vph-mooc *,
.vph-mooc *::before,
.vph-mooc *::after {
	box-sizing: border-box;
}

.vph-mooc h2,
.vph-mooc h3,
.vph-mooc h4 {
	/* !important haelt Lesbarkeit auch in Themes, die Headings einfaerben (Divi). */
	color: var(--vph-ink) !important;
	line-height: 1.2;
	margin: 0;
}

.vph-mooc p { margin: 0; }

.vph-mooc ul,
.vph-mooc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vph-mooc a { text-decoration: none; }

/* --- Scroll-Reveal (gedeckelt: max 3 Stufen Verzoegerung) ------------ */
.vph-mooc .vph-reveal {
	opacity: 0;
	transform: translateY(16px) scale(.985);
	transition:
		opacity .55s var(--vph-ease-out),
		transform .55s var(--vph-ease-out);
	transition-delay: calc(min(var(--i, 0), 3) * 60ms);
}

.vph-mooc .vph-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* =====================================================================
   2 · INTRO
   ===================================================================== */
.vph-mooc-intro {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--sp-7);
	padding: 0;
}

.vph-mooc-eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--vph-blue-dark);
	margin-bottom: var(--sp-3);
}

.vph-mooc-eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	margin-right: .6em;
	vertical-align: middle;
	background: currentColor;
	opacity: .6;
}

.vph-mooc-intro__title {
	font-size: var(--fs-3xl);
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	color: var(--vph-ink);
	line-height: 1.15;
}

.vph-mooc-intro__lead {
	margin-top: var(--sp-4);
	font-size: var(--fs-lg);
	color: var(--vph-muted);
	line-height: var(--lh-prose);
	max-width: 60ch;
	margin-inline: auto;
}

.vph-mooc-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

.vph-mooc-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 116px;
	padding: var(--sp-3) var(--sp-5);
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius-sm);
	box-shadow: var(--vph-shadow);
}

.vph-mooc-stat__num {
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--vph-blue-dark);
	line-height: 1;
}

.vph-mooc-stat__label {
	font-size: var(--fs-sm);
	color: var(--vph-muted-strong);
	margin-top: var(--sp-1);
	line-height: var(--lh-tight);
	letter-spacing: .01em;
}

/* =====================================================================
   Wer / Wie / Wo / Wann – Schnellinfo (optional)
   ===================================================================== */
.vph-mooc-quickbar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	max-width: 1000px;
	margin: 0 auto var(--sp-7);
	padding: var(--sp-5) 0 0;
}

@media (max-width: 680px) {
	.vph-mooc-quickbar { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
}

.vph-mooc-qb {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-2);
	border-radius: var(--vph-radius-sm);
	color: var(--vph-text);
	transition: transform var(--vph-dur-fast) var(--vph-ease), background var(--vph-dur-fast) ease, color var(--vph-dur-fast) ease;
}

.vph-mooc-qb__icon { color: var(--vph-ink); line-height: 0; }
.vph-mooc-qb__icon svg { width: 40px; height: 40px; stroke-width: 1.7; }

.vph-mooc-qb__label {
	font-weight: 700;
	font-size: var(--fs-lg);
	color: var(--vph-ink);
}

.vph-mooc-qb__text {
	font-size: var(--fs-sm);
	color: var(--vph-muted);
	max-width: 22ch;
	line-height: var(--lh-base);
}

a.vph-mooc-qb { cursor: pointer; }

a.vph-mooc-qb:hover {
	transform: translateY(-3px);
	background: var(--vph-bg-soft);
	color: var(--vph-text);
}

a.vph-mooc-qb:hover .vph-mooc-qb__icon { color: var(--vph-blue); }

a.vph-mooc-qb:focus-visible {
	outline: none;
	box-shadow: var(--vph-ring);
}

/* Anker-Abstand fuer In-Page-Spruenge */
#vph-mooc-guide,
#vph-mooc-grid { scroll-margin-top: 90px; }

/* =====================================================================
   Filterleiste
   ===================================================================== */
.vph-mooc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
	margin: 0 auto var(--sp-6);
	padding: 0;
}

.vph-mooc-chip {
	font: inherit;
	font-size: var(--fs-base);
	font-weight: 600;
	cursor: pointer;
	padding: .5rem 1.05rem;
	border-radius: 999px;
	border: 1px solid var(--vph-line);
	background: var(--vph-card);
	color: var(--vph-text);
	line-height: var(--lh-tight);
	transition: background var(--vph-dur-fast) ease, color var(--vph-dur-fast) ease, border-color var(--vph-dur-fast) ease, transform var(--vph-dur-fast) var(--vph-ease), box-shadow var(--vph-dur-fast) ease;
}

.vph-mooc-chip:hover {
	border-color: var(--vph-blue);
	color: var(--vph-blue-dark);
	transform: translateY(-1px);
}

.vph-mooc-chip.is-active {
	background: var(--vph-blue-dark);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px -4px rgba(0, 152, 212, .42);
}

.vph-mooc-chip:focus-visible { outline: none; box-shadow: var(--vph-ring); }

/* =====================================================================
   6 · KARTEN-RASTER (eReihe-Stil: Farbbanner + Versaltitel + Mosaik)
   ===================================================================== */
.vph-mooc-grid {
	display: grid;
	gap: clamp(1rem, 1.8vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	padding: 0;
}
@media (min-width: 680px) and (max-width: 1079px) {
	.vph-mooc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
	.vph-mooc-grid { grid-template-columns: repeat(var(--vph-cols), minmax(0, 1fr)); }
}

.vph-mooc-card.is-hidden { display: none; }

/* --- Karte ------------------------------------------------------------ */
.vph-mooc-card {
	--card-accent-ink: color-mix(in srgb, var(--card-accent-dark) 80%, #11202c);
	--card-banner: color-mix(in srgb, var(--card-accent) 74%, #001018);
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius);
	overflow: hidden;
	box-shadow: var(--vph-shadow);
	transition: transform var(--vph-dur) var(--vph-ease), box-shadow var(--vph-dur) ease, border-color var(--vph-dur) ease;
}
.vph-mooc-card:hover,
.vph-mooc-card:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--vph-shadow-lg);
	border-color: color-mix(in srgb, var(--card-accent) 40%, var(--vph-line));
}
.vph-mooc-card.is-featured { border-color: color-mix(in srgb, var(--card-accent) 45%, var(--vph-line)); }

/* --- Kartenkopf: Vollfarbe + schraeges Titelbanner + Mosaik ---------- */
.vph-mooc-card__head {
	position: relative;
	min-height: 132px;
	background: var(--card-accent);
	overflow: hidden;
}
.vph-mooc-card__mosaic {
	position: absolute;
	top: 14px; right: 14px;
	display: grid;
	grid-template-columns: repeat(4, 9px);
	grid-auto-rows: 9px;
	gap: 3px;
	z-index: 1;
}
.vph-mooc-card__mosaic span { border-radius: 1.5px; background: rgba(255,255,255,.15); }
.vph-mooc-card__mosaic span:nth-child(2) { background: rgba(255,255,255,.34); }
.vph-mooc-card__mosaic span:nth-child(5) { background: rgba(255,255,255,.10); }
.vph-mooc-card__mosaic span:nth-child(7) { background: rgba(255,255,255,.30); }
.vph-mooc-card__mosaic span:nth-child(10) { background: rgba(255,255,255,.22); }
.vph-mooc-card__mosaic span:nth-child(12) { background: rgba(255,255,255,.12); }

.vph-mooc-card__logo {
	position: absolute;
	top: 13px; left: 13px;
	height: 42px;
	max-width: 64%;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 16px -7px rgba(0,0,0,.5);
	z-index: 2;
}
.vph-mooc-card__logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block; }

.vph-mooc-card__banner {
	position: absolute;
	left: -14px; bottom: 14px;
	max-width: 88%;
	padding: .5rem 1.05rem .5rem 1.4rem;
	background: var(--card-banner);
	transform: skewX(-11deg);
	box-shadow: 0 8px 18px -10px rgba(0,0,0,.5);
	z-index: 2;
}
.vph-mooc-card__banner .vph-mooc-card__title {
	transform: skewX(11deg);
	margin: 0;
	color: #fff !important;
	font-size: clamp(.95rem, 1.25vw, 1.12rem);
	font-weight: 800;
	letter-spacing: .015em;
	text-transform: uppercase;
	line-height: 1.14;
	text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

/* --- Kartenkoerper ---------------------------------------------------- */
.vph-mooc-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5) 0;
	flex: 1 1 auto;
}
.vph-mooc-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

.vph-mooc-badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: var(--lh-tight);
	padding: .32rem .64rem;
	border-radius: 999px;
	color: #47566a;
	background: #eef2f6;
}
.vph-mooc-badge::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #1f9d57; }
.vph-mooc-badge--upcoming::before { background: #c77f00; }
.vph-mooc-badge--archived::before { background: #7c8794; }
.vph-mooc-badge--open::before,
.vph-mooc-badge--always::before { background: #1f9d57; }

.vph-mooc-cert {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	max-width: 100%;
	font-size: var(--fs-xs);
	font-weight: 700;
	line-height: var(--lh-tight);
	padding: .32rem .64rem .32rem .48rem;
	border-radius: 999px;
	color: #0c6b3a;
	background: #e9f8ef;
}
.vph-mooc-cert svg { width: 14px; height: 14px; flex: 0 0 auto; color: #1a9d57; }
.vph-mooc-cert span { white-space: nowrap; }

/* „nicht in PH-Online" – gleiche Beschriftung, rotes X statt grünem Haken */
.vph-mooc-cert--no { color: #9a1c1c; background: #fdecec; }
.vph-mooc-cert--no svg { color: #d33030; }

.vph-mooc-card__desc {
	color: var(--vph-ink);
	font-weight: 600;
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vph-mooc-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.vph-mooc-tag {
	font-size: var(--fs-xs);
	font-weight: 700;
	padding: .28rem .62rem;
	border-radius: 7px;
	line-height: var(--lh-tight);
	color: color-mix(in srgb, var(--card-accent-dark) 82%, #001018) !important;
	background: color-mix(in srgb, var(--card-accent) 12%, #fff);
}

.vph-mooc-meta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-3);
	border-top: 1px solid var(--vph-line);
}
.vph-mooc-meta__row {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--vph-muted);
	line-height: var(--lh-tight);
}
.vph-mooc-meta__icon { flex: 0 0 auto; color: var(--card-accent-dark); margin-top: 1px; }
.vph-mooc-meta__icon svg { width: 15px; height: 15px; display: block; }
.vph-mooc-meta__label { font-weight: 700; color: var(--vph-text); }

/* --- Kartenfuss ------------------------------------------------------- */
.vph-mooc-card__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-5) var(--sp-5);
	margin-top: var(--sp-3);
}

.vph-mooc-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: .6rem 1.05rem;
	font-family: inherit;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: var(--lh-tight);
	border-radius: var(--vph-radius-sm);
	cursor: pointer;
	border: 1.5px solid transparent;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	transition:
		transform var(--vph-dur-fast) var(--vph-ease),
		box-shadow var(--vph-dur-fast) ease,
		background var(--vph-dur-fast) ease,
		color var(--vph-dur-fast) ease,
		border-color var(--vph-dur-fast) ease,
		opacity var(--vph-dur-fast) ease;
}

.vph-mooc-btn svg { width: 17px; height: 17px; transition: transform var(--vph-dur-fast) ease; }

/* Hierarchie im Foot: Primaer dominiert, kein gleichrangiger Wrap */
.vph-mooc-card__foot .vph-mooc-btn--primary,
.vph-mooc-card__foot .vph-mooc-btn--ghost { flex: 0 0 auto; width: 100%; }

.vph-mooc-btn--primary {
	/* Tiefer Akzent-Verlauf aus --card-accent-ink → garantiert weißen Text ≥ AA bei JEDEM Akzent (auch hellen wie Gold/Cyan). */
	background: color-mix(in srgb, var(--card-accent-dark) 88%, #00131c);
	color: #fff !important;
	box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--card-accent) 70%, transparent);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.vph-mooc-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--card-accent) 75%, transparent);
	color: #fff;
}

.vph-mooc-btn--primary:hover svg { transform: translateX(3px); }

.vph-mooc-btn--ghost {
	background: transparent;
	color: var(--card-accent-dark) !important;
	border-color: color-mix(in srgb, var(--card-accent) 55%, var(--vph-line));
}

.vph-mooc-btn--ghost:hover {
	background: color-mix(in srgb, var(--card-accent) 9%, #fff);
	border-color: var(--card-accent);
	color: var(--card-accent-dark) !important;
	transform: translateY(-2px);
}

.vph-mooc-btn:focus-visible { outline: none; box-shadow: var(--vph-ring); }

.vph-mooc-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* =====================================================================
   3 · GUIDE-WRAPPER & STEPLIST-ACCORDION
   ===================================================================== */
.vph-mooc-guide {
	margin-top: var(--sp-7);
	padding: clamp(1.5rem, 3vw, 2.25rem) var(--vph-gutter);
	background: var(--vph-bg-soft);
	border: 1px solid var(--vph-line);
	border-radius: calc(var(--vph-radius) + 4px);
}

.vph-mooc-guide__intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--sp-5);
}

.vph-mooc-guide__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	line-height: 1.2;
}

.vph-mooc-guide__lead {
	margin-top: var(--sp-4);
	color: var(--vph-muted);
	font-size: var(--fs-md);
	line-height: var(--lh-prose);
	max-width: 60ch;
	margin-inline: auto;
	/* explizit zentriert – manche Themes (Divi) setzen p linksbündig und überschreiben das Erben. */
	text-align: center !important;
}

.vph-mooc .vph-mooc-guide__note {
	max-width: 760px;
	margin: var(--sp-5) auto 0;
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--vph-muted-strong);
	line-height: var(--lh-base);
	background: color-mix(in srgb, var(--vph-card) 70%, transparent);
	border: 1px dashed var(--vph-line);
	border-radius: var(--vph-radius-sm);
	padding: var(--sp-3) var(--sp-4);
}

/* --- Checklisten-CTA (primaerer Anlaufpunkt) ------------------------- */
.vph-mooc-guide__cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--sp-5);
}

.vph-mooc-guide__cta-sub {
	display: block;
	margin-top: var(--sp-3);
	font-size: var(--fs-sm);
	color: var(--vph-muted-strong);
	line-height: var(--lh-base);
}

/* --- Steplist-Lead & Accordion --------------------------------------- */
.vph-mooc-steplist__lead {
	text-align: center;
	margin: 0 auto var(--sp-3);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--vph-muted-strong);
	text-transform: none;
}

.vph-mooc-steplist {
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.vph-mooc-stepacc {
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--vph-shadow);
	transition: border-color var(--vph-dur-fast) ease, box-shadow var(--vph-dur-fast) ease;
}

.vph-mooc-stepacc[open] {
	border-color: color-mix(in srgb, var(--vph-blue) 30%, var(--vph-line));
}

.vph-mooc-stepacc > summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--vph-ink);
	line-height: var(--lh-tight);
}

.vph-mooc-stepacc > summary::-webkit-details-marker { display: none; }
.vph-mooc-stepacc > summary:focus-visible { outline: var(--vph-ring-outline); outline-offset: 2px; box-shadow: none; }

.vph-mooc-stepacc__num {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vph-blue-dark);
	color: #fff;
	font-weight: 800;
	font-size: var(--fs-sm);
	box-shadow: 0 4px 10px -4px rgba(0, 111, 149, .6);
}

.vph-mooc-stepacc__icon { flex: 0 0 auto; display: inline-flex; color: var(--vph-blue); }
.vph-mooc-stepacc__icon svg { width: 20px; height: 20px; }
.vph-mooc-stepacc__title { flex: 1 1 auto; }
.vph-mooc-stepacc__chevron { flex: 0 0 auto; display: inline-flex; color: var(--vph-muted); transition: transform var(--vph-dur) var(--vph-ease); }
.vph-mooc-stepacc__chevron svg { width: 18px; height: 18px; }
.vph-mooc-stepacc[open] .vph-mooc-stepacc__chevron { transform: rotate(180deg); }

.vph-mooc-stepacc__body {
	padding: 0 var(--sp-4) var(--sp-4) 3.5rem;
	color: var(--vph-text);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}
.vph-mooc-stepacc__body p { margin: var(--sp-1) 0; }
.vph-mooc-stepacc__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--vph-muted-strong); font-style: italic; line-height: var(--lh-base); }

/* Reveal-Tween (Markup-frei) */
.vph-mooc-stepacc[open] .vph-mooc-stepacc__body {
	animation: vph-acc-in var(--vph-dur) var(--vph-ease-out);
}

/* =====================================================================
   4 · STEPS-RASTER (fluid 3 -> 2 -> 1)
   ===================================================================== */
.vph-mooc-steps {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	max-width: 980px;
	margin: 0 auto;
	counter-reset: vphstep;
}

.vph-mooc-step {
	position: relative;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius);
	padding: clamp(1.8rem, 4vw, 2.1rem) var(--sp-5) var(--sp-5);
	box-shadow: var(--vph-shadow);
	text-align: center;
}

/* Verbindungslinie zwischen den Schritten (Desktop) */
@media (min-width: 880px) {
	.vph-mooc-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 38px;
		right: -.75rem;
		width: 1.5rem;
		height: 2px;
		background: var(--vph-blue-dark);
		opacity: .5;
	}
}

.vph-mooc-step__num {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: var(--fs-lg);
	color: #fff;
	background: var(--vph-blue-dark);
	box-shadow: 0 8px 18px -6px rgba(0, 111, 149, .7);
	border: 3px solid var(--vph-card);
}

.vph-mooc-step__icon {
	color: var(--vph-blue);
	margin: var(--sp-1) auto var(--sp-3);
}

.vph-mooc-step__icon svg { width: 34px; height: 34px; }

.vph-mooc-step__title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.25;
}

.vph-mooc-step__text {
	margin-top: var(--sp-2);
	font-size: var(--fs-base);
	color: var(--vph-text);
	line-height: var(--lh-base);
}

.vph-mooc-step__note {
	margin-top: var(--sp-2);
	font-size: var(--fs-sm);
	color: var(--vph-muted-strong);
	font-style: italic;
	line-height: var(--lh-base);
}

/* =====================================================================
   9 · TRUST-LEISTE
   ===================================================================== */
.vph-mooc-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3) var(--sp-5);
	margin: var(--sp-5) auto 0;
}

.vph-mooc-trust__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 700;
	color: var(--vph-ink);
	font-size: var(--fs-base);
	line-height: var(--lh-tight);
	transition: color var(--vph-dur-fast) ease;
}

.vph-mooc-trust__icon {
	display: inline-flex;
	color: var(--vph-blue-dark);
	transition: transform var(--vph-dur-fast) var(--vph-ease);
}

.vph-mooc-trust__icon svg { width: 22px; height: 22px; }

.vph-mooc-trust__item:hover .vph-mooc-trust__icon { transform: translateY(-1px); }

/* =====================================================================
   10 · IMMAT-AKKORDEON
   ===================================================================== */
.vph-mooc-accordion {
	max-width: 820px;
	margin: var(--sp-6) auto 0;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius);
	box-shadow: var(--vph-shadow);
	overflow: hidden;
}

.vph-mooc-accordion[open] {
	border-color: color-mix(in srgb, var(--vph-blue) 25%, var(--vph-line));
}

.vph-mooc-accordion__summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--vph-ink);
	cursor: pointer;
	list-style: none;
	line-height: var(--lh-tight);
}

.vph-mooc-accordion__summary::-webkit-details-marker { display: none; }

.vph-mooc-accordion__summary:focus-visible {
	outline: var(--vph-ring-outline);
	outline-offset: 2px;
	box-shadow: none;
}

.vph-mooc-accordion__icon {
	display: inline-flex;
	color: var(--vph-blue);
	flex: 0 0 auto;
}

.vph-mooc-accordion__icon svg { width: 22px; height: 22px; }

.vph-mooc-accordion__chevron {
	margin-left: auto;
	display: inline-flex;
	color: var(--vph-muted);
	transition: transform var(--vph-dur) var(--vph-ease);
}

.vph-mooc-accordion__chevron svg { width: 20px; height: 20px; }

.vph-mooc-accordion[open] .vph-mooc-accordion__chevron { transform: rotate(180deg); }

.vph-mooc-accordion__body {
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--vph-text);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.vph-mooc-accordion__body > p { margin-bottom: var(--sp-3); }

.vph-mooc-accordion[open] .vph-mooc-accordion__body {
	animation: vph-acc-in var(--vph-dur) var(--vph-ease-out);
}

/* --- Statische 3-Schritte-Liste im einklappbaren Überblick ----------- */
.vph-mooc-gsteps {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	margin: var(--sp-2) 0 var(--sp-4);
}

.vph-mooc-gstep {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.vph-mooc-gstep__num {
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vph-blue-dark);
	color: #fff;
	font-weight: 800;
	font-size: var(--fs-sm);
	box-shadow: 0 4px 10px -4px rgba(0, 111, 149, .65);
}

.vph-mooc-gstep__main { flex: 1 1 auto; min-width: 0; }

.vph-mooc-gstep__title {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--vph-ink);
	margin-bottom: .15rem;
}

.vph-mooc-gstep__text { color: var(--vph-text); font-size: var(--fs-base); line-height: var(--lh-base); }
.vph-mooc-gstep__note { margin-top: .35rem; font-size: var(--fs-sm); color: var(--vph-muted); font-style: italic; }

.vph-mooc-immat {
	counter-reset: immat;
	display: grid;
	gap: var(--sp-3);
}

.vph-mooc-immat li {
	position: relative;
	padding-left: 2.4rem;
	min-height: 1.7rem;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.vph-mooc-immat li::before {
	counter-increment: immat;
	content: counter(immat);
	position: absolute;
	left: 0;
	top: -2px;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: var(--fs-xs);
	font-weight: 800;
	color: var(--vph-blue-dark);
	background: color-mix(in srgb, var(--vph-blue) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--vph-blue) 30%, #fff);
}

.vph-mooc-help {
	margin-top: var(--sp-4);
	font-size: var(--fs-base);
	color: var(--vph-muted-strong);
	line-height: var(--lh-base);
}

.vph-mooc-help a {
	color: var(--vph-blue-dark);
	font-weight: 700;
	border-bottom: 1px solid currentColor;
}

/* =====================================================================
   11 · LEERZUSTAND & EINZELSEITE
   ===================================================================== */
.vph-mooc-empty {
	text-align: center;
	color: var(--vph-muted);
	padding: var(--sp-6) var(--sp-4);
	font-size: var(--fs-md);
	line-height: var(--lh-base);
}

.vph-mooc--single .vph-mooc-single-cta {
	padding: 0 0 var(--sp-5);
	max-width: 520px;
}

/* Buttons darin behalten flex:1 1 auto (kein Foot-Override) */
.vph-mooc--single .vph-mooc-single-cta .vph-mooc-btn {
	--card-accent: var(--vph-blue);
	--card-accent-dark: var(--vph-blue-dark);
	flex: 1 1 auto;
}

/* =====================================================================
   7 · „MEHR ERFAHREN"-MODAL (natives <dialog>)
   ===================================================================== */
.vph-mooc-dialog {
	--card-accent-ink: color-mix(in srgb, var(--card-accent-dark) 80%, #11202c);
	width: min(680px, calc(100vw - 2 * var(--vph-gutter)));
	max-width: 680px;
	max-height: 90vh;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: calc(var(--vph-radius) + 4px);
	background: var(--vph-card);
	color: var(--vph-text);
	box-shadow: var(--vph-shadow-modal);
	overflow: hidden;
	/* Eintritt: geschlossen */
	opacity: 0;
	transform: translateY(12px) scale(.98);
}

.vph-mooc-dialog[open] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--vph-dur) var(--vph-ease-out),
		transform var(--vph-dur) var(--vph-ease-out),
		overlay var(--vph-dur) allow-discrete,
		display var(--vph-dur) allow-discrete;
}

@starting-style {
	.vph-mooc-dialog[open] { opacity: 0; transform: translateY(12px) scale(.98); }
}

.vph-mooc-dialog::backdrop {
	background: rgba(13, 28, 48, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 1;
	transition:
		opacity var(--vph-dur) ease,
		overlay var(--vph-dur) allow-discrete,
		display var(--vph-dur) allow-discrete;
}

@starting-style {
	.vph-mooc-dialog::backdrop { opacity: 0; }
}

/* Fallback ohne <dialog>-Support */
.vph-mooc-dialog.is-fallback {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	opacity: 1;
	animation: vph-pop var(--vph-dur) var(--vph-ease-out);
}

.vph-mooc-dialog__inner {
	display: flex;
	flex-direction: column;
	max-height: 90vh;
}

.vph-mooc-dialog__close {
	position: absolute;
	z-index: 5;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, .04);
	background: rgba(255, 255, 255, .96);
	color: #1d2733;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .04);
	transition: transform var(--vph-dur) var(--vph-ease-out), background var(--vph-dur-fast) ease;
}

.vph-mooc-dialog__close svg { width: 20px; height: 20px; }
.vph-mooc-dialog__close:hover { background: #fff; transform: rotate(90deg) scale(1.05); }
.vph-mooc-dialog__close:focus-visible { outline: none; box-shadow: var(--vph-ring); }

.vph-mooc-dialog__media {
	position: relative;
	flex: 0 0 auto;
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--card-accent);
}

/* Scrim fuer Badges */
.vph-mooc-dialog__media::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 64px;
	background: transparent;
	z-index: 1;
	pointer-events: none;
}

.vph-mooc-dialog__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vph-mooc-dialog__media.is-contain { background: #fff; height: 150px; padding-top: 8px; }
.vph-mooc-dialog__media.is-contain img { object-fit: contain; padding: 18px; }
.vph-mooc-dialog__glyph { color: #fff; position: relative; z-index: 1; }
.vph-mooc-dialog__glyph svg { width: 64px; height: 64px; }

.vph-mooc-dialog__body {
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--sp-6) clamp(1rem, 4vw, 1.6rem) var(--sp-3);
	/* Scroll-Fade (Markup-frei) – §12 */
	background: var(--vph-card);
	background-repeat: no-repeat;
	background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
	background-attachment: local, local, scroll, scroll;
}

.vph-mooc-dialog__title {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	margin: .2rem 0 var(--sp-2);
	color: var(--vph-ink);
}

.vph-mooc-dialog__desc {
	margin-top: var(--sp-4);
	color: var(--vph-text);
	line-height: var(--lh-prose);
	font-size: var(--fs-md);
	max-width: 66ch;
}

.vph-mooc-dialog__desc p { margin: 0 0 var(--sp-3); }
.vph-mooc-dialog__desc ul { margin: 0 0 var(--sp-3); padding-left: 1.2rem; list-style: disc; }
.vph-mooc-dialog__desc li { margin: var(--sp-1) 0; }
.vph-mooc-dialog__desc a { color: var(--card-accent-dark) !important; text-decoration: underline; }

.vph-mooc-dialog__foot {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	padding: 1.1rem clamp(1rem, 4vw, 1.5rem) var(--sp-5);
	border-top: 1px solid var(--vph-line-strong);
	background: var(--vph-bg-soft);
}

.vph-mooc-dialog__foot .vph-mooc-btn { min-height: 48px; }
.vph-mooc-dialog__foot .vph-mooc-btn--primary {
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--card-accent) 65%, transparent);
}

/* =====================================================================
   5 · CHECKLISTEN-TRIGGER – die EINE Orange-Hauptaktion
   ===================================================================== */
.vph-mooc-cl-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	min-height: 48px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-lg);
	font-weight: 700;
	color: #fff !important;
	background: var(--vph-blue-dark) !important;
	box-shadow: 0 12px 24px -8px rgba(147, 54, 13, .55);
	transition: transform var(--vph-dur-fast) var(--vph-ease), box-shadow var(--vph-dur-fast) ease, filter var(--vph-dur-fast) ease;
}

.vph-mooc-cl-trigger span { color: #fff !important; }
.vph-mooc-cl-trigger:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 16px 30px -8px rgba(147, 54, 13, .6);
}
.vph-mooc-cl-trigger:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vph-blue);
}
.vph-mooc-cl-trigger svg { width: 20px; height: 20px; color: #fff; }

/* =====================================================================
   8 · CHECKLISTEN-WIZARD (Modal)
   ===================================================================== */
.vph-mooc-checklist {
	width: min(720px, calc(100vw - 2 * var(--vph-gutter)));
	max-width: 720px;
	max-height: 92vh;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: calc(var(--vph-radius) + 4px);
	background: var(--vph-card);
	color: var(--vph-text);
	box-shadow: var(--vph-shadow-modal);
	overflow: hidden;
	/* Wizard-Primary markentreu blau */
	--card-accent: var(--vph-blue);
	--card-accent-dark: var(--vph-blue-dark);
	/* Eintritt: geschlossen */
	opacity: 0;
	transform: translateY(12px) scale(.98);
}

.vph-mooc-checklist[open] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--vph-dur) var(--vph-ease-out),
		transform var(--vph-dur) var(--vph-ease-out),
		overlay var(--vph-dur) allow-discrete,
		display var(--vph-dur) allow-discrete;
}

@starting-style {
	.vph-mooc-checklist[open] { opacity: 0; transform: translateY(12px) scale(.98); }
}

.vph-mooc-checklist::backdrop {
	background: rgba(13, 28, 48, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 1;
	transition:
		opacity var(--vph-dur) ease,
		overlay var(--vph-dur) allow-discrete,
		display var(--vph-dur) allow-discrete;
}

@starting-style {
	.vph-mooc-checklist::backdrop { opacity: 0; }
}

.vph-mooc-checklist.is-fallback {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100000;
	opacity: 1;
	animation: vph-pop var(--vph-dur) var(--vph-ease-out);
}

.vph-mooc-cl {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: 92vh;
}

/* --- Head & Fortschritt --- */
.vph-mooc-cl__head {
	flex: 0 0 auto;
	text-align: center;
	padding: var(--sp-5) clamp(1rem, 4vw, 1.5rem) var(--sp-4);
	border-bottom: 1px solid var(--vph-line);
}

.vph-mooc-cl__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--vph-ink); }
.vph-mooc-cl__sub { margin-top: var(--sp-1); color: var(--vph-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }

.vph-mooc-cl__bar { height: 8px; margin-top: var(--sp-4); background: var(--vph-line); border-radius: 999px; overflow: hidden; }
.vph-mooc-cl__bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--vph-blue-dark);
	box-shadow: 0 0 0 1px rgba(0, 152, 212, .15);
	transition: width var(--vph-dur) var(--vph-ease-out);
}

.vph-mooc-cl__dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }

@media (max-width: 560px) {
	.vph-mooc-cl__dots { flex-wrap: nowrap; overflow-x: auto; gap: .4rem; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
}

.vph-mooc-cl__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--vph-line);
	background: #fff;
	color: var(--vph-muted);
	font-family: inherit;
	font-weight: 800;
	font-size: var(--fs-xs);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background var(--vph-dur-fast) ease, border-color var(--vph-dur-fast) ease, color var(--vph-dur-fast) ease, transform var(--vph-dur-fast) var(--vph-ease);
}
.vph-mooc-cl__dot svg { width: 15px; height: 15px; }
.vph-mooc-cl__dot:focus-visible { outline: var(--vph-ring-outline); outline-offset: 2px; box-shadow: none; }
.vph-mooc-cl__dot.is-done { background: #eef9f2; border-color: #1a9d57; color: #1a9d57; }
.vph-mooc-cl__dot.is-active {
	background: var(--vph-blue-dark);
	border-color: var(--vph-blue-dark);
	color: #fff;
	transform: scale(1.12);
	box-shadow: 0 0 0 4px rgba(0, 152, 212, .18);
}

/* --- Steps-Container & Inhalt --- */
.vph-mooc-cl__steps {
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--sp-5) clamp(1rem, 4vw, 1.5rem);
	/* Scroll-Fade (Markup-frei) – §12 */
	background: var(--vph-card);
	background-repeat: no-repeat;
	background-size: 100% 28px, 100% 28px, 100% 12px, 100% 12px;
	background-attachment: local, local, scroll, scroll;
}

.vph-mooc-cl__step { display: none; }
.vph-mooc-cl__step.is-active { display: block; }

.vph-mooc-cl__badge {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: #0c447c;
	background: #e6f1fb;
	padding: .3rem .8rem;
	border-radius: 999px;
	line-height: var(--lh-tight);
}

.vph-mooc-cl__steptitle {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: var(--ls-tight);
	color: var(--vph-ink);
	margin: var(--sp-3) 0 var(--sp-2);
}

.vph-mooc-cl__intro { color: var(--vph-text); font-size: var(--fs-md); line-height: var(--lh-prose); max-width: 66ch; }
.vph-mooc-cl__hint { margin-top: var(--sp-2); color: var(--vph-muted-strong); font-size: var(--fs-sm); line-height: var(--lh-base); }

/* --- Info-/Warn-Boxen (linke Akzentkante) --- */
.vph-mooc-cl__important {
	margin-top: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: #eef6fb;
	border: 1px solid #cfe3f3;
	border-left: 3px solid var(--vph-blue);
	border-radius: 4px 10px 10px 4px;
	color: var(--vph-ink);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: var(--lh-base);
}

.vph-mooc-cl__warn {
	margin-top: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: #fff7ed;
	border: 1px solid #f3d2a8;
	border-left: 3px solid #d98a2b;
	border-radius: 4px 10px 10px 4px;
	color: #7a4218;
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

/* --- Sub-Steps (Stepper mit Verbindungslinie + Tiefen-Nummern) --- */
.vph-mooc-cl__sub-steps {
	position: relative;
	counter-reset: clsub;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: var(--sp-4) 0 0;
}

.vph-mooc-cl__sub-steps > li { position: relative; padding-left: 2.3rem; }

@media (max-width: 480px) {
	.vph-mooc-cl__sub-steps > li { padding-left: 1.9rem; }
}

.vph-mooc-cl__sub-steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: .8rem;
	top: 1.65rem;
	bottom: -1.1rem;
	width: 2px;
	background: var(--vph-line);
}

.vph-mooc-cl__sub-steps > li::before {
	counter-increment: clsub;
	content: counter(clsub);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--vph-blue-dark);
	color: #fff;
	font-weight: 800;
	font-size: var(--fs-xs);
	box-shadow: 0 4px 10px -4px rgba(0, 111, 149, .6);
}

.vph-mooc-cl__sub-steps > li > span {
	display: block;
	font-weight: 600;
	color: var(--vph-ink);
	font-size: var(--fs-md);
	line-height: var(--lh-base);
}

/* --- Figures (groesser, gerahmt, integriert) --- */
.vph-mooc-cl__fig {
	margin: var(--sp-3) 0 0;
	padding: .6rem;
	background: var(--vph-bg-soft);
	border-radius: 12px;
	text-align: center;
}

.vph-mooc-cl__fig img {
	display: inline-block;
	max-width: 100%;
	max-height: 230px;
	width: auto;
	height: auto;
	border: 1px solid var(--vph-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px -8px rgba(15, 40, 70, .25);
	transition: transform var(--vph-dur) ease, box-shadow var(--vph-dur) ease;
}

.vph-mooc-cl__fig img:hover {
	transform: scale(1.02);
	box-shadow: 0 12px 28px -10px rgba(15, 40, 70, .3);
}

@media (max-width: 480px) {
	.vph-mooc-cl__fig img { max-height: 160px; }
}

/* --- Check-Wrap, Skip, Success, Nav --- */
.vph-mooc-cl__check-wrap {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--vph-bg-soft);
	border: 1px solid var(--vph-line);
	border-radius: 10px;
	cursor: pointer;
	font-weight: 600;
	color: var(--vph-ink);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}
.vph-mooc-cl__check-wrap input {
	margin-top: .15rem;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--vph-blue);
	cursor: pointer;
}

.vph-mooc-cl__skip {
	display: inline-block;
	margin-top: var(--sp-3);
	padding: .2rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--vph-muted-strong);
	opacity: .85;
	text-decoration: underline;
}
.vph-mooc-cl__skip:hover { color: var(--vph-blue-dark); opacity: 1; }

.vph-mooc-cl__success { text-align: center; padding: var(--sp-5) 0; }
.vph-mooc-cl__success-icon {
	display: inline-flex;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: #e8faef;
	color: #1a9d57;
	margin-bottom: var(--sp-2);
}
.vph-mooc-cl__success-icon svg { width: 34px; height: 34px; }

.vph-mooc-cl__step.is-final.is-active .vph-mooc-cl__success-icon {
	animation: vph-success-pop .5s var(--vph-ease-out) both;
}

.vph-mooc-cl__finishbtn { flex: 0 0 auto; }

.vph-mooc-cl__nav {
	flex: 0 0 auto;
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-4) clamp(1rem, 4vw, 1.5rem) var(--sp-5);
	border-top: 1px solid var(--vph-line-strong);
	background: var(--vph-bg-soft);
}

.vph-mooc-cl__nav .vph-mooc-btn--ghost { flex: 0 0 auto; min-width: 120px; }
.vph-mooc-cl__nav .vph-mooc-btn--primary { flex: 1 1 auto; }

/* --- Editor-Vorschau -------------------------------------------------- */
.vph-mooc-block-preview { pointer-events: none; }

/* =====================================================================
   13.1 · MOTION-KEYFRAMES (zentral)
   ===================================================================== */
@keyframes vph-acc-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@keyframes vph-pop {
	from { opacity: 0; transform: translate(-50%, -46%) scale(.98); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes vph-success-pop {
	0% { transform: scale(.6); opacity: 0; }
	60% { transform: scale(1.08); }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes vph-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(31, 157, 87, .5); }
	70% { box-shadow: 0 0 0 5px rgba(31, 157, 87, 0); }
}

/* --- 13.2 Live-Puls (nur offene MOOCs) --- */
.vph-mooc-badge--open::before,
.vph-mooc-badge--always::before {
	animation: vph-pulse 2.4s var(--vph-ease) infinite;
}

/* =====================================================================
   13.4 · prefers-reduced-motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vph-mooc .vph-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.vph-mooc *,
	.vph-mooc *::before,
	.vph-mooc *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	.vph-mooc-dialog,
	.vph-mooc-checklist,
	.vph-mooc-dialog::backdrop,
	.vph-mooc-checklist::backdrop,
	.vph-mooc-stepacc[open] .vph-mooc-stepacc__body,
	.vph-mooc-accordion[open] .vph-mooc-accordion__body,
	.vph-mooc-cl__step.is-final.is-active .vph-mooc-cl__success-icon,
	.vph-mooc-badge--open::before,
	.vph-mooc-badge--always::before {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   forced-colors – Fokus-Sichtbarkeit (clip-tauglich)
   ===================================================================== */
@media (forced-colors: active) {
	.vph-mooc-stepacc > summary:focus-visible,
	.vph-mooc-accordion__summary:focus-visible,
	.vph-mooc-cl__dot:focus-visible,
	.vph-mooc-btn:focus-visible,
	.vph-mooc-chip:focus-visible,
	.vph-mooc-cl-trigger:focus-visible,
	.vph-mooc-dialog__close:focus-visible {
		outline: 2px solid transparent;
		outline-offset: 2px;
	}
}

/* =====================================================================
   13.5 · color-mix-Fallback
   ===================================================================== */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.vph-mooc-tag {
		color: #0c4a66;
		background: #eef4f9;
		border-color: var(--vph-line);
	}
	.vph-mooc-btn--ghost {
		color: #0c4a66;
		border-color: var(--vph-line);
	}
	.vph-mooc-btn--ghost:hover { background: #f1f6fa; }
	.vph-mooc-btn--primary { background: var(--card-accent-dark); color: #fff; }
	.vph-mooc-dialog__desc a { color: #0c4a66; }
	.vph-mooc-immat li::before {
		color: var(--vph-blue-dark);
		background: #eef4f9;
		border-color: var(--vph-line);
	}
	.vph-mooc .vph-mooc-guide__note { background: rgba(255, 255, 255, .6); }
}


/* =====================================================================
   THEME-SCHUTZ – verhindert, dass das Host-Theme (Divi) Button-/Link-/
   Fokus-Farben überschreibt. Nur Header-/Logo-Farben (Blau, Weiß, Schwarz).
   ===================================================================== */
.vph-mooc .vph-mooc-btn--primary,
.vph-mooc .vph-mooc-btn--primary:hover,
.vph-mooc .vph-mooc-btn--primary:focus,
.vph-mooc .vph-mooc-cl-trigger,
.vph-mooc .vph-mooc-cl-trigger:hover,
.vph-mooc .vph-mooc-cl-trigger span { color: #fff !important; }

.vph-mooc .vph-mooc-cl-trigger { background: var(--vph-blue-dark) !important; }

.vph-mooc .vph-mooc-btn--ghost { color: var(--card-accent-dark) !important; background: transparent !important; }

.vph-mooc .vph-mooc-chip { color: var(--vph-text) !important; }
.vph-mooc .vph-mooc-chip.is-active { color: #fff !important; background: var(--vph-blue-dark) !important; }

.vph-mooc .vph-mooc-cl__skip { color: var(--vph-muted-strong) !important; background: none !important; border: none !important; box-shadow: none !important; }
.vph-mooc .vph-mooc-cl__skip:hover { color: var(--vph-blue-dark) !important; }

.vph-mooc .vph-mooc-cl__dot { color: var(--vph-muted) !important; background: #fff !important; }
.vph-mooc .vph-mooc-cl__dot.is-active { color: #fff !important; background: var(--vph-blue-dark) !important; }
.vph-mooc .vph-mooc-cl__dot.is-done { color: #0a5a30 !important; background: #eafaf1 !important; }

.vph-mooc .vph-mooc-dialog__close { color: var(--vph-ink) !important; background: rgba(255, 255, 255, .95) !important; }

.vph-mooc .vph-mooc-help a,
.vph-mooc .vph-mooc-dialog__desc a { color: var(--card-accent-dark) !important; }

/* Kein dauerhafter Theme-Fokusrahmen nach Klick; Tastatur-Fokus bleibt (focus-visible). */
.vph-mooc .vph-mooc-btn:focus:not(:focus-visible),
.vph-mooc .vph-mooc-cl__dot:focus:not(:focus-visible),
.vph-mooc .vph-mooc-cl__skip:focus:not(:focus-visible),
.vph-mooc .vph-mooc-dialog__close:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }


/* =====================================================================
   DIVI BUTTON-HARDENING – Divi stylt ALLE <button> (Rahmen, Radius,
   Padding, Uppercase, min-width) und verschiebt so Dots/Close/Buttons.
   Hier eigene Form erzwingen (!important schlaegt Divi-ID-Specificity).
   ===================================================================== */
.vph-mooc button {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-width: 0 !important;
	background-image: none !important;
}

.vph-mooc .vph-mooc-btn {
	min-height: 44px !important;
	padding: .6rem 1.05rem !important;
	border: 1.5px solid transparent !important;
	border-radius: var(--vph-radius-sm) !important;
	line-height: var(--lh-tight) !important;
}
.vph-mooc .vph-mooc-btn--ghost { border-color: var(--card-accent-dark) !important; }

.vph-mooc .vph-mooc-cl-trigger {
	border: none !important;
	border-radius: 999px !important;
	padding: var(--sp-3) var(--sp-6) !important;
	min-height: 48px !important;
}

.vph-mooc .vph-mooc-cl__dot {
	width: 30px !important;
	height: 30px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--vph-line) !important;
	border-radius: 50% !important;
	line-height: 1 !important;
}
.vph-mooc .vph-mooc-cl__dot.is-active { border-color: var(--vph-blue-dark) !important; }
.vph-mooc .vph-mooc-cl__dot.is-done { border-color: #1f9d57 !important; }

.vph-mooc .vph-mooc-dialog__close {
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(15, 40, 70, .10) !important;
	border-radius: 50% !important;
}

.vph-mooc .vph-mooc-chip {
	padding: .42rem .9rem !important;
	border: 1px solid var(--vph-line) !important;
	border-radius: 999px !important;
	min-height: 0 !important;
}
.vph-mooc .vph-mooc-chip.is-active { border-color: transparent !important; }

.vph-mooc .vph-mooc-cl__skip {
	padding: .2rem 0 !important;
	border: none !important;
	min-height: 0 !important;
}


/* =====================================================================
   BUTTON-HINTERGRUND-HARDENING – Divi steuert sonst bg (idle = hell →
   weisser Text unsichtbar; Hover = Pink). Hier bg + Hover + Disabled
   theme-fest erzwingen. =================================================
   ===================================================================== */
.vph-mooc .vph-mooc-btn--primary {
	background: color-mix(in srgb, var(--card-accent-dark) 88%, #00131c) !important;
}
.vph-mooc .vph-mooc-btn--primary:hover {
	background: color-mix(in srgb, var(--card-accent-dark) 78%, #000) !important;
}
.vph-mooc .vph-mooc-cl-trigger:hover { background: #00597a !important; }
.vph-mooc .vph-mooc-btn--ghost:hover { background: color-mix(in srgb, var(--card-accent) 10%, #fff) !important; }

/* Deaktiviert: klar erkennbar UND lesbar (kein unsichtbarer Weisstext). */
.vph-mooc .vph-mooc-btn:disabled,
.vph-mooc .vph-mooc-btn--primary:disabled {
	background: var(--vph-line) !important;
	color: var(--vph-muted-strong) !important;
	opacity: 1 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	cursor: not-allowed !important;
}

/* Fallback ohne color-mix */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.vph-mooc .vph-mooc-btn--primary { background: var(--card-accent-dark) !important; }
	.vph-mooc .vph-mooc-btn--primary:hover { background: var(--card-accent-dark) !important; }
}


/* =====================================================================
   LIST-HARDENING – Divi stylt <ol>/<li> mit list-style (Zahlen "1.2.3.")
   + Einrueckung -> falsche Nummern vor den Fortschritts-Punkten und
   abgeschnittene/verschobene Schritt-Badges. Struktur-Listen hart
   neutralisieren; eigene ::before-Zaehler & __num-Spans bleiben (separate
   Pseudo-Elemente, von list-style nicht betroffen).
   ===================================================================== */
.vph-mooc .vph-mooc-cl__dots,
.vph-mooc .vph-mooc-cl__sub-steps,
.vph-mooc .vph-mooc-gsteps,
.vph-mooc .vph-mooc-immat,
.vph-mooc .vph-mooc-tags,
.vph-mooc .vph-mooc-meta,
.vph-mooc .vph-mooc-stats {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.vph-mooc .vph-mooc-cl__dots > li,
.vph-mooc .vph-mooc-cl__sub-steps > li,
.vph-mooc .vph-mooc-gsteps > li,
.vph-mooc .vph-mooc-immat > li,
.vph-mooc .vph-mooc-tags > li,
.vph-mooc .vph-mooc-meta > li,
.vph-mooc .vph-mooc-stats > li {
	list-style: none !important;
	text-indent: 0 !important;
}
.vph-mooc .vph-mooc-cl__dots > li::marker,
.vph-mooc .vph-mooc-cl__sub-steps > li::marker,
.vph-mooc .vph-mooc-gsteps > li::marker,
.vph-mooc .vph-mooc-immat > li::marker,
.vph-mooc .vph-mooc-tags > li::marker,
.vph-mooc .vph-mooc-meta > li::marker,
.vph-mooc .vph-mooc-stats > li::marker { content: "" !important; }

/* MOOC-Beschreibung (do_blocks) darf ihre Aufzaehlungen behalten */
.vph-mooc .vph-mooc-dialog__desc ul { list-style: disc !important; padding-left: 1.2rem !important; }
.vph-mooc .vph-mooc-dialog__desc ol { list-style: decimal !important; padding-left: 1.2rem !important; }


/* =====================================================================
   CHECKLISTEN-WIDGET  [vph_mooc_checklist] – kompakter Hinweis + CTA
   ===================================================================== */
.vph-mooc-clw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2rem);
	position: relative;
	overflow: hidden;
	background: var(--vph-card);
	border: 1px solid var(--vph-line);
	border-radius: var(--vph-radius);
	box-shadow: var(--vph-shadow);
	padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2rem);
}
.vph-mooc-clw::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--vph-blue);
}
.vph-mooc-clw__text { flex: 1 1 300px; min-width: 0; padding-left: .35rem; }
.vph-mooc-clw__title {
	font-size: clamp(1.2rem, 2.3vw, 1.55rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	color: var(--vph-ink);
	margin: .35rem 0 .35rem !important;
}
.vph-mooc-clw__lead { color: var(--vph-muted); font-size: var(--fs-base); line-height: var(--lh-base); max-width: 62ch; }
.vph-mooc-clw__cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; max-width: 340px; }
.vph-mooc-clw__sub { font-size: var(--fs-sm); color: var(--vph-muted); line-height: var(--lh-base); }

@media (max-width: 680px) {
	.vph-mooc-clw { flex-direction: column; align-items: flex-start; }
	.vph-mooc-clw__cta { width: 100%; max-width: none; }
	.vph-mooc-clw__cta .vph-mooc-cl-trigger { width: 100%; }
}