/* Kursplattform Frontend. Farben über --kp-akzent im Theme überschreibbar. */
.kp-kurs, .kp-step, .kp-kursliste, .kp-hinweis, .kp-kaufbox {
	--kp-akzent: #1f6f5c;
	--kp-linie: rgba(127, 127, 127, .25);
	--kp-flaeche: rgba(127, 127, 127, .1);
}

.kp-button {
	display: inline-block; padding: .65em 1.25em; border: 0; border-radius: 4px;
	background: var(--kp-akzent); color: #fff !important; font: inherit; line-height: 1.2;
	text-decoration: none !important; cursor: pointer;
}
.kp-button:hover { filter: brightness(1.08); }
.kp-button.ist-zweitrangig, .kp-erledigt-btn.ist-erledigt {
	background: transparent; color: var(--kp-akzent) !important; box-shadow: inset 0 0 0 1px currentColor;
}

.kp-klein { font-size: .875em; }
.kp-hinweis { padding: 1em 1.25em; border-radius: 6px; background: var(--kp-flaeche); }
.kp-hinweis p:last-child { margin-bottom: 0; }

/* Fortschritt */
.kp-fortschritt { display: flex; align-items: center; gap: .75em; margin: 1em 0 1.5em; }
.kp-balken { flex: 1; height: 8px; border-radius: 99px; background: var(--kp-flaeche); overflow: hidden; }
.kp-balken span { display: block; height: 100%; background: var(--kp-akzent); transition: width .3s ease; }
.kp-fortschritt-text { font-size: .875em; white-space: nowrap; }

/* Kaufbox */
.kp-kaufbox { margin: 1.5em 0; padding: 1.25em 1.5em; border: 1px solid var(--kp-linie); border-radius: 6px; }
.kp-preis { margin: 0 0 .5em; font-size: 1.4em; }

/* Gliederung */
.kp-gliederung, .kp-gl-steps { margin: 0; padding: 0; list-style: none; }
.kp-gl-kapitel { margin: 0 0 1.25em; }
.kp-gl-kapitel-titel { display: flex; justify-content: space-between; gap: 1em; margin-bottom: .35em; font-weight: 600; }
.kp-gl-zahl { font-weight: 400; font-size: .875em; opacity: .7; }
.kp-gl-step { position: relative; padding: .45em 0 .45em 1.9em; border-bottom: 1px solid var(--kp-linie); }
.kp-gl-step::before {
	content: ""; position: absolute; left: 0; top: .7em; width: 1.05em; height: 1.05em;
	border: 2px solid var(--kp-linie); border-radius: 50%; box-sizing: border-box;
}
.kp-gl-step.ist-erledigt::before { border-color: var(--kp-akzent); background: var(--kp-akzent); }
.kp-gl-step.ist-erledigt::after {
	content: ""; position: absolute; left: .37em; top: .87em; width: .3em; height: .55em;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.kp-gl-step.ist-aktiv { font-weight: 600; }
.kp-gl-step a { text-decoration: none; }

/* Step */
.kp-brotkrumen { margin-bottom: .5em; opacity: .8; }
.kp-video { margin: 0 0 1.5em; aspect-ratio: 16 / 9; background: #000; }
.kp-video video { display: block; width: 100%; height: 100%; }
.kp-step-aktionen {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75em;
	margin: 2em 0 1.5em; padding: 1em 0; border-top: 1px solid var(--kp-linie); border-bottom: 1px solid var(--kp-linie);
}
.kp-step-aktionen > span { min-width: 6em; }
.kp-step-aktionen > span:last-child { text-align: right; }
.kp-inhalt summary { cursor: pointer; font-weight: 600; margin-bottom: 1em; }

/* Meine Kurse */
.kp-kursliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25em; }
.kp-karte { display: flex; flex-direction: column; border: 1px solid var(--kp-linie); border-radius: 6px; overflow: hidden; }
.kp-karte img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.kp-karte-inhalt { display: flex; flex: 1; flex-direction: column; padding: 1em; }
.kp-karte-titel { margin: 0; font-size: 1.1em; }
.kp-karte-inhalt .kp-fortschritt { margin: .75em 0; }
.kp-karte-inhalt p:last-child { margin: auto 0 0; }

@media (max-width: 600px) {
	.kp-step-aktionen { justify-content: center; text-align: center; }
	.kp-step-aktionen > span { min-width: 0; }
}