/**
 * peoplefone Kurse – Frontend
 *
 * Farben und Radius laufen über CSS-Variablen, damit sie in Elementor
 * über die Style-Controls gesetzt werden können, ohne Custom CSS.
 * Standardwerte nach peoplefone Design Guide.
 */

.pfk {
	--pfk-primaer: #9b1c20;
	--pfk-primaer-dunkel: #6c181c;
	--pfk-sand: #edeae6;
	--pfk-sand-mittel: #b4aca6;
	--pfk-text: #564d49;
	--pfk-flaeche: #ffffff;
	--pfk-linie: #e2ddd8;
	--pfk-radius: 6px;
	--pfk-abstand: 1rem;

	color: var(--pfk-text);
	font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
}

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

/* --- Filterleiste ------------------------------------------------------- */

.pfk-filterleiste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.pfk-filter-btn {
	background: transparent;
	border: 1px solid var(--pfk-sand-mittel);
	border-radius: 999px;
	color: var(--pfk-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	padding: 0.35rem 0.9rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pfk-filter-btn:hover {
	border-color: var(--pfk-primaer);
	color: var(--pfk-primaer);
}

.pfk-filter-btn.is-aktiv {
	background: var(--pfk-primaer);
	border-color: var(--pfk-primaer);
	color: #fff;
}

/* --- Ansichtsumschalter -------------------------------------------------- */

.pfk-ansichten {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 1rem;
}

.pfk-ansicht-btn {
	border: 1px solid var(--pfk-linie);
	color: var(--pfk-text);
	font-size: 0.8125rem;
	margin-left: -1px;
	padding: 0.35rem 0.9rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pfk-ansicht-btn:first-child {
	border-radius: var(--pfk-radius) 0 0 var(--pfk-radius);
	margin-left: 0;
}

.pfk-ansicht-btn:last-child {
	border-radius: 0 var(--pfk-radius) var(--pfk-radius) 0;
}

.pfk-ansicht-btn:hover {
	background: var(--pfk-sand);
	color: var(--pfk-primaer);
}

.pfk-ansicht-btn.is-aktiv {
	background: var(--pfk-sand);
	border-color: var(--pfk-sand-mittel);
	color: var(--pfk-primaer);
	font-weight: 600;
	position: relative;
	z-index: 1;
}

/* --- Monatsgruppen ------------------------------------------------------ */

.pfk-monat {
	border-bottom: 2px solid var(--pfk-sand);
	color: var(--pfk-primaer);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.35rem;
	text-transform: uppercase;
}

.pfk-monat:first-child {
	margin-top: 0;
}

/* --- Terminzeilen und Kacheln ------------------------------------------ */

.pfk-zeilen {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pfk-kacheln {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pfk-termin {
	align-items: center;
	background: var(--pfk-flaeche);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	display: flex;
	gap: 1rem;
	padding: 0.9rem 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pfk-termin:hover {
	border-color: var(--pfk-sand-mittel);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pfk-kacheln .pfk-termin {
	align-items: flex-start;
	flex-direction: column;
}

.pfk-termin--voll {
	opacity: 0.72;
}

.pfk-termin__datum {
	background: var(--pfk-sand);
	border-radius: var(--pfk-radius);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	line-height: 1.1;
	min-width: 3.25rem;
	padding: 0.5rem;
	text-align: center;
}

.pfk-termin__tag {
	color: var(--pfk-primaer);
	font-size: 1.4rem;
	font-weight: 700;
}

.pfk-termin__monat {
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pfk-termin__inhalt {
	flex: 1 1 auto;
	min-width: 0;
}

.pfk-termin__titel {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.15rem;
}

.pfk-termin__titel a {
	color: inherit;
	text-decoration: none;
}

.pfk-termin__titel a:hover {
	color: var(--pfk-primaer);
}

.pfk-termin__meta {
	color: var(--pfk-sand-mittel);
	font-size: 0.8125rem;
	margin: 0;
}

.pfk-termin__text {
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

.pfk-termin__aktion {
	flex: 0 0 auto;
	text-align: right;
}

.pfk-kacheln .pfk-termin__aktion {
	margin-top: 0.75rem;
	text-align: left;
	width: 100%;
}

.pfk-plaetze {
	font-size: 0.75rem;
	margin: 0 0 0.35rem;
}

/* --- Buttons und Badges ------------------------------------------------- */

.pfk-btn {
	background: var(--pfk-primaer);
	border: 1px solid var(--pfk-primaer);
	border-radius: var(--pfk-radius);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 1.1rem;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.pfk-btn:hover {
	background: var(--pfk-primaer-dunkel);
	border-color: var(--pfk-primaer-dunkel);
	color: #fff;
}

.pfk-btn--sekundaer {
	background: transparent;
	color: var(--pfk-primaer);
}

.pfk-btn--sekundaer:hover {
	background: var(--pfk-sand);
	color: var(--pfk-primaer-dunkel);
}

.pfk-btn--klein {
	font-size: 0.8125rem;
	padding: 0.35rem 0.8rem;
}

.pfk-btn--gross {
	font-size: 1rem;
	padding: 0.7rem 1.6rem;
}

.pfk-btn--aus {
	background: var(--pfk-sand);
	border-color: var(--pfk-sand);
	color: var(--pfk-sand-mittel);
	cursor: not-allowed;
}

.pfk-btn[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* Nach dem Absenden: der Knopf ist aus, aber die Meldung bleibt lesbar. */
.pfk-btn.is-erledigt[disabled] {
	background: #24631f;
	border-color: #24631f;
	cursor: default;
	opacity: 1;
}

.pfk-grenze {
	color: #7a5a12;
	margin: 0.4rem 0 0;
}

.pfk-badge {
	background: var(--pfk-sand);
	border-radius: 999px;
	display: inline-block;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.55rem;
	text-transform: uppercase;
}

.pfk-badge--voll,
.pfk-badge--warteliste {
	background: #f3e3c8;
	color: #7a5a12;
}

.pfk-badge--bestaetigt {
	background: #dcefdc;
	color: #24631f;
}

.pfk-badge--storniert {
	background: var(--pfk-sand);
	color: var(--pfk-sand-mittel);
	text-decoration: line-through;
}

/* --- Kursdetail --------------------------------------------------------- */

.pfk-abschnitt {
	color: var(--pfk-primaer);
	font-size: 1.125rem;
	margin: 2rem 0 0.75rem;
}

.pfk-eckdaten {
	background: var(--pfk-sand);
	border-radius: var(--pfk-radius);
	display: grid;
	gap: 0.35rem 1rem;
	grid-template-columns: max-content 1fr;
	margin: 1rem 0;
	padding: 1rem;
}

.pfk-eckdaten dt {
	font-weight: 600;
}

.pfk-eckdaten dd {
	margin: 0;
}

.pfk-terminliste {
	border-collapse: collapse;
	width: 100%;
}

.pfk-terminliste th,
.pfk-terminliste td {
	border-bottom: 1px solid var(--pfk-linie);
	padding: 0.6rem 0.5rem;
	text-align: left;
	vertical-align: middle;
}

.pfk-terminliste th {
	color: var(--pfk-sand-mittel);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* --- Formular ----------------------------------------------------------- */

.pfk-gewaehlt {
	background: var(--pfk-sand);
	border-left: 3px solid var(--pfk-primaer);
	border-radius: var(--pfk-radius);
	margin-bottom: 1.5rem;
	padding: 0.9rem 1rem;
}

.pfk-warnung {
	color: #7a5a12;
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

.pfk-gruppe {
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem 1.25rem;
}

.pfk-gruppe legend {
	color: var(--pfk-primaer);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0 0.4rem;
	text-transform: uppercase;
}

.pfk-raster {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pfk-feld {
	display: flex;
	flex-direction: column;
}

.pfk-feld--schmal {
	max-width: 14rem;
}

.pfk-feld label,
.pfk-checkbox {
	font-size: 0.8125rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.pfk-feld input,
.pfk-feld select,
.pfk-feld textarea {
	background: var(--pfk-flaeche);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	color: var(--pfk-text);
	font: inherit;
	font-size: 0.9375rem;
	padding: 0.5rem 0.65rem;
	width: 100%;
}

.pfk-feld input:focus,
.pfk-feld select:focus,
.pfk-feld textarea:focus {
	border-color: var(--pfk-primaer);
	outline: 2px solid rgba(155, 28, 32, 0.15);
	outline-offset: 1px;
}

.pfk-feld.hat-fehler input,
.pfk-feld.hat-fehler select {
	border-color: var(--pfk-primaer);
}

.pfk-pflicht {
	color: var(--pfk-primaer);
}

.pfk-fehler {
	color: var(--pfk-primaer);
	display: none;
	font-size: 0.75rem;
	margin-top: 0.2rem;
}

.pfk-fehler.is-sichtbar {
	display: block;
}

.pfk-hinweis-klein {
	color: var(--pfk-sand-mittel);
	font-size: 0.75rem;
	margin-top: 0.2rem;
}

.pfk-checkbox {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
	font-weight: 400;
}

.pfk-checkbox input {
	margin-top: 0.2rem;
}

.pfk-datenschutz {
	margin: 1rem 0 1.25rem;
}

.pfk-person {
	background: var(--pfk-sand);
	border-radius: var(--pfk-radius);
	margin-top: 0.85rem;
	padding: 0.9rem 1rem;
}

.pfk-person__kopf {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.pfk-person__titel {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pfk-person__weg {
	background: transparent;
	border: 0;
	color: var(--pfk-sand-mittel);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
	padding: 0 0.25rem;
}

.pfk-person__weg:hover {
	color: var(--pfk-primaer);
}

.pfk-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.pfk-aktionen {
	margin-top: 0.5rem;
}

.pfk-meldung {
	border-radius: var(--pfk-radius);
	display: none;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
}

.pfk-meldung.is-sichtbar {
	display: block;
}

.pfk-meldung--ok {
	background: #dcefdc;
	color: #24631f;
	display: block;
}

.pfk-meldung--warteliste {
	background: #f3e3c8;
	color: #7a5a12;
}

.pfk-meldung--fehler {
	background: #f7e2e2;
	color: var(--pfk-primaer-dunkel);
}

.pfk-hinweis {
	background: var(--pfk-sand);
	border-radius: var(--pfk-radius);
	color: var(--pfk-text);
	padding: 0.85rem 1rem;
}

/* --- Teilnehmerbereich -------------------------------------------------- */

.pfk-anmeldung-karte {
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
}

.pfk-anmeldung-karte h4 {
	margin: 0 0 0.2rem;
}

.pfk-teilnehmerliste {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0;
}

.pfk-teilnehmerliste li {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	padding: 0.2rem 0;
}

/* --- Responsiv ---------------------------------------------------------- */

@media (max-width: 782px) {
	.pfk-kacheln {
		grid-template-columns: 1fr !important;
	}

	.pfk-raster {
		grid-template-columns: 1fr;
	}

	.pfk-termin {
		align-items: flex-start;
		flex-direction: column;
	}

	.pfk-termin__aktion {
		text-align: left;
		width: 100%;
	}

	.pfk-terminliste thead {
		display: none;
	}

	.pfk-terminliste tr {
		border-bottom: 1px solid var(--pfk-linie);
		display: block;
		padding: 0.6rem 0;
	}

	.pfk-terminliste td {
		border: 0;
		display: block;
		padding: 0.15rem 0;
	}
}

/* --- Tickets und Preise ------------------------------------------------- */

.pfk-ticket-option {
	align-items: center;
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	padding: 0.75rem 1rem;
}

.pfk-ticket-option:hover {
	border-color: var(--pfk-sand-mittel);
}

.pfk-ticket-option__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.pfk-ticket-option__text small {
	color: var(--pfk-sand-mittel);
	font-size: 0.8125rem;
}

.pfk-ticket-option__preis {
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.pfk-frueh {
	background: #dcefdc;
	border-radius: 999px;
	color: #24631f;
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	margin-top: 0.2rem;
	padding: 0.1rem 0.45rem;
}

.pfk-preis-hinweis {
	background: var(--pfk-sand);
	border-radius: var(--pfk-radius);
	margin-bottom: 1.25rem;
	padding: 0.7rem 1rem;
}

/* Aufstellung wie auf einer Rechnung: Bezeichnung links, Betrag rechts. */
.pfk-summe {
	border-top: 1px solid var(--pfk-linie);
	color: var(--pfk-text);
	display: grid;
	gap: 0.2rem 1rem;
	grid-template-columns: 1fr auto;
	margin: var(--pfk-abstand) 0 0;
	padding-top: 0.6rem;
}

.pfk-summe dt,
.pfk-summe dd {
	margin: 0;
}

.pfk-summe dd {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pfk-summe .pfk-summe__total {
	border-top: 1px solid var(--pfk-linie);
	font-weight: 700;
	margin-top: 0.3rem;
	padding-top: 0.4rem;
}

.pfk-mwst-vermerk {
	display: block;
	font-weight: 400;
	opacity: 0.75;
}

.pfk-radios {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.pfk-radio {
	align-items: center;
	display: flex;
	font-weight: 400;
	gap: 0.3rem;
}

/* --- Ticket ------------------------------------------------------------- */

.pfk-ticket {
	background: var(--pfk-flaeche);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	margin: 0 auto;
	max-width: 26rem;
	padding: 1.5rem;
	text-align: center;
}

.pfk-ticket__kopf {
	border-bottom: 2px dashed var(--pfk-linie);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.pfk-ticket__label {
	color: var(--pfk-sand-mittel);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pfk-ticket__kopf h3 {
	margin: 0.35rem 0 0;
}

.pfk-ticket__daten {
	display: grid;
	gap: 0.3rem 1rem;
	grid-template-columns: max-content 1fr;
	margin: 0 0 1.25rem;
	text-align: left;
}

.pfk-ticket__daten dt {
	color: var(--pfk-sand-mittel);
	font-size: 0.8125rem;
}

.pfk-ticket__daten dd {
	margin: 0;
}

.pfk-ticket__qr svg {
	height: auto;
	max-width: 100%;
}

.pfk-ticket__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.1rem;
	letter-spacing: 0.15em;
	margin: 0.5rem 0 0;
}

.pfk-ticket-link {
	font-size: 0.8125rem;
	margin-left: 0.4rem;
}

.pfk-haken {
	color: #24631f;
	font-weight: 700;
}

/* --- Feedback ----------------------------------------------------------- */

.pfk-bewertung {
	border: 0;
	border-bottom: 1px solid var(--pfk-linie);
	margin: 0 0 1rem;
	padding: 0 0 1rem;
}

.pfk-bewertung legend {
	font-weight: 600;
	padding: 0;
}

.pfk-sterne {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.pfk-stern input {
	position: absolute;
	opacity: 0;
}

.pfk-stern span {
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	cursor: pointer;
	display: inline-block;
	min-width: 2.2rem;
	padding: 0.4rem 0;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pfk-stern input:checked + span {
	background: var(--pfk-primaer);
	border-color: var(--pfk-primaer);
	color: #fff;
}

.pfk-stern input:focus-visible + span {
	outline: 2px solid var(--pfk-primaer);
	outline-offset: 2px;
}

.pfk-skala {
	color: var(--pfk-sand-mittel);
	font-size: 0.75rem;
	margin-left: 0.5rem;
}

.pfk-sterne--nps .pfk-stern span {
	min-width: 1.9rem;
}

/* Nur für Personen mit Check-in-Recht sichtbar – siehe ticket.php. */
.pfk-ticket__checkin {
	margin: var(--pfk-abstand) 0 0;
	text-align: center;
}

@media print {
	.pfk-ticket__checkin,
	.pfk-ticket__drucken,
	.pfk-btn {
		display: none !important;
	}

	.pfk-ticket {
		border: 0;
	}
}

/* --- Referenten --------------------------------------------------------- */

.pfk-referenten {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 1rem 0 1.5rem;
}

.pfk-referent {
	align-items: flex-start;
	background: var(--pfk-flaeche);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	display: flex;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
}

.pfk-referent__bild {
	background-color: var(--pfk-sand);
	background-position: center;
	background-size: cover;
	border-radius: 50%;
	flex: 0 0 auto;
	height: 56px;
	width: 56px;
}

.pfk-referent__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pfk-referent__text small {
	color: var(--pfk-sand-mittel);
	font-size: 0.8125rem;
}

.pfk-referent__bio {
	font-size: 0.875rem;
	margin-top: 0.35rem;
}

.pfk-video {
	margin: 1.25rem 0;
}

.pfk-video iframe {
	aspect-ratio: 16 / 9;
	height: auto;
	max-width: 100%;
	width: 100%;
}

/* --- Programm ----------------------------------------------------------- */

.pfk-programm__tag {
	border-bottom: 2px solid var(--pfk-sand);
	color: var(--pfk-primaer);
	font-size: 1rem;
	margin: 1.5rem 0 0.5rem;
	padding-bottom: 0.3rem;
}

.pfk-zeitstrahl {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfk-zeitstrahl__punkt {
	border-left: 2px solid var(--pfk-sand);
	display: flex;
	gap: 1rem;
	padding: 0.6rem 0 0.9rem 1.1rem;
	position: relative;
}

.pfk-zeitstrahl__punkt::before {
	background: var(--pfk-primaer);
	border-radius: 50%;
	content: "";
	height: 9px;
	left: -5.5px;
	position: absolute;
	top: 1rem;
	width: 9px;
}

.pfk-zeitstrahl__punkt--pause::before,
.pfk-zeitstrahl__punkt--essen::before {
	background: var(--pfk-sand-mittel);
}

.pfk-zeitstrahl__punkt--pause,
.pfk-zeitstrahl__punkt--essen {
	color: var(--pfk-sand-mittel);
}

.pfk-zeitstrahl__punkt--block {
	border-left-color: var(--pfk-primaer);
}

.pfk-zeitstrahl__zeit {
	color: var(--pfk-primaer);
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-width: 6.5rem;
	padding-top: 0.15rem;
}

.pfk-zeitstrahl__inhalt {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pfk-zeitstrahl__titel {
	font-size: 0.9375rem;
}

.pfk-zeitstrahl__text {
	font-size: 0.875rem;
	margin-top: 0.2rem;
}

.pfk-zeitstrahl__meta {
	color: var(--pfk-sand-mittel);
	font-size: 0.8125rem;
	margin-top: 0.3rem;
}

/* --- Zertifikat --------------------------------------------------------- */

.pfk-zertifikat {
	margin: 0 auto;
	max-width: 46rem;
}

.pfk-zertifikat__rahmen {
	background: var(--pfk-flaeche);
	border: 2px solid var(--pfk-primaer);
	border-radius: var(--pfk-radius);
	padding: 3rem 3.5rem 2rem;
	text-align: center;
}

.pfk-zertifikat__label {
	color: var(--pfk-primaer);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	margin: 0;
	text-transform: uppercase;
}

.pfk-zertifikat__titel {
	font-size: 1.75rem;
	letter-spacing: 0.04em;
	margin: 1.5rem 0 2rem;
}

.pfk-zertifikat__name {
	border-bottom: 1px solid var(--pfk-linie);
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.5rem;
	padding: 0 2rem 0.5rem;
}

.pfk-zertifikat__text {
	font-size: 1rem;
	margin: 0 auto 2rem;
	max-width: 32rem;
}

.pfk-zertifikat__daten {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	margin: 0 0 2.5rem;
}

.pfk-zertifikat__daten dt {
	color: var(--pfk-sand-mittel);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pfk-zertifikat__daten dd {
	margin: 0.2rem 0 0;
}

.pfk-zertifikat__fuss {
	align-items: flex-end;
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	text-align: left;
}

.pfk-zertifikat__unterschrift {
	display: flex;
	flex-direction: column;
	min-height: 4rem;
	justify-content: flex-end;
}

.pfk-zertifikat__linie {
	border-top: 1px solid var(--pfk-text);
	display: block;
	margin-bottom: 0.4rem;
	width: 12rem;
}

.pfk-zertifikat__unterschrift small {
	color: var(--pfk-sand-mittel);
}

.pfk-zertifikat__pruefung {
	text-align: center;
}

.pfk-zertifikat__pruefung small {
	color: var(--pfk-sand-mittel);
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pfk-zertifikat__pruefung code {
	background: none;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.pfk-zertifikat__drucken {
	margin-top: 1.5rem;
	text-align: center;
}

@media (max-width: 640px) {
	.pfk-zertifikat__rahmen {
		padding: 1.5rem 1.25rem;
	}

	.pfk-zertifikat__fuss {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.pfk-zeitstrahl__punkt {
		flex-direction: column;
		gap: 0.2rem;
	}
}

@media print {
	.pfk-zertifikat__drucken {
		display: none !important;
	}

	.pfk-zertifikat__rahmen {
		border-width: 1px;
	}
}

/* ---------------------------------------------------------------------
 * Skins der Kursübersicht (ab 0.4.0)
 * ------------------------------------------------------------------ */

/* Karten */
.pfk-karte {
	display: flex;
	flex-direction: column;
	background: var(--pfk-flaeche);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.pfk-karte:hover {
	border-color: var(--pfk-sand-mittel);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.pfk-karte--zu {
	opacity: .72;
}

.pfk-karte__bild img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.pfk-karte__inhalt {
	flex: 1 1 auto;
	padding: var(--pfk-abstand);
}

.pfk-karte__datum {
	margin: 0 0 .25rem;
	font-size: .85em;
	font-weight: 600;
	color: var(--pfk-primaer);
}

.pfk-karte__titel {
	/* Deutlich grösser als Untertitel und Meta darunter – die Karte wird
	   nach dem Kursnamen gelesen, nicht nach dem Zusatz. */
	margin: 0 0 .2rem;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.pfk-karte__untertitel {
	margin: 0 0 .4rem;
	font-size: .9em;
	font-weight: 400;
	line-height: 1.35;
	color: var(--pfk-sand-mittel);
}

.pfk-karte__titel a {
	color: inherit;
	text-decoration: none;
}

.pfk-karte__titel a:hover {
	color: var(--pfk-primaer);
}

.pfk-karte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 .5rem;
	font-size: .85em;
	color: var(--pfk-sand-mittel);
}

.pfk-karte__text {
	/* Auf drei Zeilen begrenzt: der Textauszug eines Kurses ist oft der
	   halbe Beschreibungstext und sprengt sonst das Kartenraster. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: .9em;
}

.pfk-karte__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: calc(var(--pfk-abstand) * .75) var(--pfk-abstand);
	border-top: 1px solid var(--pfk-linie);
	background: var(--pfk-sand);
}

.pfk-karte__zahlen {
	display: flex;
	flex-direction: column;
	font-size: .85em;
	line-height: 1.35;
}

.pfk-preis {
	font-weight: 600;
	color: var(--pfk-text);
}

/* Tabelle */
.pfk-tabelle-umschlag {
	overflow-x: auto;
}

.pfk-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: .95em;
}

.pfk-tabelle th,
.pfk-tabelle td {
	padding: .6rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--pfk-linie);
	vertical-align: top;
}

.pfk-tabelle thead th {
	border-bottom-width: 2px;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pfk-sand-mittel);
}

.pfk-tabelle__zeile--zu {
	opacity: .68;
}

.pfk-tabelle__zusatz {
	display: block;
	font-size: .85em;
	color: var(--pfk-sand-mittel);
}

.pfk-tabelle__aktion {
	text-align: right;
	white-space: nowrap;
}

/* Kalender */
.pfk-kalender__raster {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.pfk-kalender__raster th {
	padding: .4rem;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pfk-sand-mittel);
	text-align: center;
}

.pfk-kalender__raster td {
	height: 6.5rem;
	padding: .3rem;
	border: 1px solid var(--pfk-linie);
	vertical-align: top;
}

.pfk-kalender__leer {
	background: var(--pfk-sand);
	border-color: var(--pfk-linie);
}

.pfk-kalender__zahl {
	display: block;
	font-size: .8em;
	font-weight: 600;
	color: var(--pfk-sand-mittel);
}

.pfk-kalender__tag.is-belegt .pfk-kalender__zahl {
	color: var(--pfk-primaer);
}

.pfk-kalender__eintrag {
	display: block;
	margin-top: .2rem;
	padding: .2rem .35rem;
	border-radius: calc(var(--pfk-radius) / 2);
	background: var(--pfk-primaer);
	color: #fff;
	font-size: .75em;
	line-height: 1.25;
	text-decoration: none;
}

.pfk-kalender__eintrag:hover {
	background: var(--pfk-primaer-dunkel);
	color: #fff;
}

.pfk-kalender__eintrag--warteliste {
	background: var(--pfk-sand-mittel);
}

.pfk-kalender__eintrag--zu {
	background: var(--pfk-sand);
	color: var(--pfk-text);
}

.pfk-kalender__zeit {
	display: block;
	font-weight: 600;
	opacity: .85;
}

.pfk-kalender__titel {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Kursdetail und Buchungskasten
 * ------------------------------------------------------------------ */

.pfk-kursdetail__raster {
	display: grid;
	gap: calc(var(--pfk-abstand) * 2);
	grid-template-columns: minmax(0, 1fr);
}

.pfk-kursdetail--klassisch .pfk-kursdetail__raster,
.pfk-kursdetail--hero .pfk-kursdetail__raster {
	grid-template-columns: minmax(0, 1fr) 20rem;
	align-items: start;
}

.pfk-kursdetail__seite {
	position: sticky;
	top: 2rem;
}

.pfk-hero {
	margin-bottom: calc(var(--pfk-abstand) * 1.5);
}

.pfk-hero__bild img {
	display: block;
	width: 100%;
	max-height: 26rem;
	object-fit: cover;
	border-radius: var(--pfk-radius);
}

.pfk-hero__titel {
	margin: var(--pfk-abstand) 0 .25rem;
}

.pfk-hero__untertitel {
	margin: 0;
	color: var(--pfk-sand-mittel);
}

.pfk-buchung {
	padding: var(--pfk-abstand);
	background: var(--pfk-sand);
	border: 1px solid var(--pfk-linie);
	border-radius: var(--pfk-radius);
}

.pfk-buchung__titel {
	margin: 0 0 .5rem;
	font-size: 1.05em;
}

.pfk-buchung__preis {
	margin: 0 0 .75rem;
	font-size: 1.35em;
	font-weight: 600;
	color: var(--pfk-primaer);
}

.pfk-buchung__termin {
	margin: 0 0 .75rem;
	line-height: 1.4;
}

.pfk-buchung__datum {
	display: block;
	font-weight: 600;
}

.pfk-buchung__ort {
	display: block;
	font-size: .9em;
	color: var(--pfk-sand-mittel);
}

.pfk-buchung__form .pfk-btn {
	width: 100%;
	text-align: center;
}

.pfk-buchung__zu {
	margin: 0;
	font-weight: 600;
	color: var(--pfk-sand-mittel);
}

.pfk-buchung__fuss {
	margin: .75rem 0 0;
	font-size: .85em;
	color: var(--pfk-sand-mittel);
}

/* ---------------------------------------------------------------------
 * Schmale Bildschirme
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {

	.pfk-kursdetail--klassisch .pfk-kursdetail__raster,
	.pfk-kursdetail--hero .pfk-kursdetail__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.pfk-kursdetail__seite {
		position: static;
	}

	.pfk-kacheln {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.pfk-kalender__raster td {
		height: auto;
		min-height: 3rem;
	}

	.pfk-tabelle thead {
		display: none;
	}

	.pfk-tabelle tr {
		display: block;
		padding: .5rem 0;
		border-bottom: 1px solid var(--pfk-linie);
	}

	.pfk-tabelle td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: .2rem 0;
	}

	.pfk-tabelle td::before {
		content: attr(data-label);
		font-size: .8em;
		font-weight: 600;
		color: var(--pfk-sand-mittel);
	}

	.pfk-tabelle__aktion {
		text-align: left;
	}
}

/* Die Terminliste auf der Kursseite verhält sich schmal wie die
   Tabellenansicht – dieselben data-label-Attribute sind gesetzt. */
@media (max-width: 782px) {

	.pfk-terminliste thead {
		display: none;
	}

	.pfk-terminliste tr {
		display: block;
		padding: .5rem 0;
		border-bottom: 1px solid var(--pfk-linie);
	}

	.pfk-terminliste td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: .2rem 0;
	}

	.pfk-terminliste td::before {
		content: attr(data-label);
		font-size: .8em;
		font-weight: 600;
		color: var(--pfk-sand-mittel);
	}
}

/* ---------------------------------------------------------------------
 * Ausgeblendete Elemente
 *
 * `hidden` ist im Browser nur eine sehr schwache Regel (display:none auf
 * UA-Ebene). Jede eigene display-Angabe – etwa `.pfk-tabelle tr { display:
 * block }` in der Schmalansicht – schlägt sie. Ohne diese Regel bleiben
 * beim Kategoriefilter Zeilen stehen, die ausgeblendet sein sollten.
 * ------------------------------------------------------------------ */

.pfk [hidden],
.pfk[hidden] {
	display: none !important;
}

/* Anmeldung beim Anbieter: ein Hinweis statt eines Formulars, das
   nirgends ankäme. */
.pfk-extern {
	background: var(--pfk-flaeche-hell, #f7f5f3);
	border-radius: var(--pfk-radius, 8px);
	margin: 0 auto;
	max-width: 40rem;
	padding: 2rem;
	text-align: center;
}

.pfk-extern__titel {
	margin-top: 0;
}

.pfk-extern__termin {
	color: var(--pfk-grau, #646970);
}