/**
 * Eisleber Bäder – Kursverwaltung | Frontend
 * Die Farbvariablen werden aus den Plugin-Einstellungen gesetzt.
 */

.ekk {
	--ekk-primary: #1a5c9e;
	--ekk-primary-dark: #14497d;
	--ekk-primary-soft: rgba(26, 92, 158, 0.08);
	--ekk-accent: #5c9e31;
	--ekk-accent-dark: #4b8228;
	--ekk-ink: #1f2933;
	--ekk-muted: #6b7785;
	--ekk-line: #e3e8ee;
	--ekk-bg: #ffffff;
	--ekk-bg-soft: #f5f8fb;
	--ekk-radius: 14px;
	--ekk-radius-sm: 8px;
	--ekk-shadow: 0 1px 2px rgba(16, 34, 54, 0.04), 0 8px 24px rgba(16, 34, 54, 0.06);
	--ekk-shadow-lg: 0 2px 4px rgba(16, 34, 54, 0.05), 0 16px 40px rgba(16, 34, 54, 0.1);

	box-sizing: border-box;
	color: var(--ekk-ink);
	font-size: 16px;
	line-height: 1.6;

	/*
	 * Eigener Container: Seitenvorlagen ohne Inhaltsbereich (z. B. Elementor
	 * "Gesamte Breite") liefern keine Begrenzung, der Inhalt liefe sonst von
	 * Fensterkante zu Fensterkante. Innerhalb eines Theme- oder Elementor-
	 * Containers greift die Begrenzung nicht, weil der ohnehin schmaler ist.
	 */
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ekk-maxwidth, 1200px);
	padding-left: 16px;
	padding-right: 16px;
}

.ekk *,
.ekk *::before,
.ekk *::after {
	box-sizing: inherit;
}

.ekk img {
	max-width: 100%;
	height: auto;
}

.ekk-muted {
	color: var(--ekk-muted);
	font-weight: 400;
}

/* ---------------------------------------------------------------
 * Hinweise
 * ------------------------------------------------------------ */

.ekk-notice {
	background: var(--ekk-bg-soft);
	border: 1px solid var(--ekk-line);
	border-left: 4px solid var(--ekk-primary);
	border-radius: var(--ekk-radius-sm);
	color: var(--ekk-muted);
	padding: 16px 18px;
}

.ekk-alert {
	border-radius: var(--ekk-radius-sm);
	font-size: 15px;
	margin: 0 0 20px;
	padding: 13px 16px;
}

.ekk-alert--info {
	background: var(--ekk-primary-soft);
	border: 1px solid rgba(26, 92, 158, 0.2);
	color: var(--ekk-primary-dark);
}

.ekk-alert--error {
	background: #fdf1f1;
	border: 1px solid #f2c4c4;
	color: #a32020;
}

/* ---------------------------------------------------------------
 * Kursübersicht (Grid)
 * ------------------------------------------------------------ */

.ekk-group__title {
	font-size: 28px;
	margin: 0 0 24px;
}

.ekk-grid {
	display: grid;
	gap: 26px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Feste Spaltenzahl – vorher hat auto-fill das Attribut spalten="" ignoriert. */
.ekk-grid--1 { grid-template-columns: minmax(0, 1fr); }
.ekk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ekk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ekk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.ekk-grid--3,
	.ekk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.ekk-grid,
	.ekk-grid--2,
	.ekk-grid--3,
	.ekk-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.ekk-card {
	background: var(--ekk-bg);
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius);
	box-shadow: var(--ekk-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.ekk-card:hover {
	box-shadow: var(--ekk-shadow-lg);
	transform: translateY(-3px);
}

.ekk-card__media {
	aspect-ratio: 16 / 10;
	background: var(--ekk-bg-soft);
	overflow: hidden;
	position: relative;
}

/*
 * Höhere Spezifität als die img-Regel des Themes: sonst behält das Bild seine
 * natürliche Höhe, object-fit greift nicht und die Kacheln werden ungleich hoch.
 */
.ekk .ekk-card__media img,
.ekk-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	width: 100%;
}

.ekk-card:hover .ekk-card__img {
	transform: scale(1.04);
}

.ekk-card__placeholder {
	background: linear-gradient(135deg, var(--ekk-primary) 0%, var(--ekk-primary-dark) 100%);
	display: block;
	height: 100%;
	opacity: 0.14;
	width: 100%;
}

.ekk-card__badge {
	left: 14px;
	position: absolute;
	top: 14px;
}

.ekk-card__body {
	flex: 1 1 auto;
	padding: 20px 22px 6px;
}

.ekk-card__title {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 4px;
}

.ekk-card__title a {
	color: var(--ekk-primary);
	text-decoration: none;
}

.ekk-card__title a:hover {
	text-decoration: underline;
}

.ekk-card__subtitle {
	color: var(--ekk-muted);
	font-size: 14px;
	margin: 0 0 10px;
}

.ekk-card__text {
	font-size: 15px;
	margin: 0 0 14px;
}

.ekk-card__meta {
	border-top: 1px solid var(--ekk-line);
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
}

.ekk-card__meta li {
	align-items: center;
	color: var(--ekk-muted);
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin: 0 0 6px;
}

.ekk-card__footer {
	padding: 16px 22px 22px;
}

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

/* Hero-Bild über die volle Breite des Inhaltsbereichs */

.ekk-hero {
	align-items: flex-end;
	border-radius: var(--ekk-radius);
	display: flex;
	margin: 0 0 34px;
	min-height: 340px;
	overflow: hidden;
	position: relative;
}

.ekk .ekk-hero__img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.ekk-hero::after {
	background: linear-gradient(180deg, rgba(10, 30, 50, 0) 35%, rgba(10, 30, 50, 0.78) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.ekk-hero__inner {
	padding: 34px 38px 30px;
	position: relative;
	width: 100%;
	z-index: 1;
}

.ekk-hero__title {
	color: #fff;
	font-size: 38px;
	line-height: 1.15;
	margin: 0 0 6px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.ekk-hero__subtitle {
	color: rgba(255, 255, 255, 0.92);
	font-size: 19px;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* Kopfzeile ohne Bild */

.ekk-course__head {
	margin: 0 0 28px;
}

.ekk-course__title {
	color: var(--ekk-primary);
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 6px;
}

.ekk-course__subtitle {
	color: var(--ekk-muted);
	font-size: 18px;
	margin: 0;
}

/* Text links, Infokarte rechts */

.ekk-course__body {
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	margin: 0 0 42px;
}

.ekk-course__text p:last-child {
	margin-bottom: 0;
}

.ekk-course__aside {
	align-self: start;
	position: sticky;
	top: 24px;
}

.ekk-infocard {
	background: var(--ekk-bg-soft);
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius);
	margin: 0 0 20px;
	padding: 20px 22px 22px;
}

.ekk-infocard__title {
	border-bottom: 1px solid var(--ekk-line);
	font-size: 16px;
	margin: 0 0 12px;
	padding-bottom: 10px;
}

.ekk-facts {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.ekk-facts__item {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 9px 0;
}

.ekk-facts__item + .ekk-facts__item {
	border-top: 1px solid var(--ekk-line);
}

.ekk-facts__label {
	color: var(--ekk-muted);
	flex: 1 1 100%;
	font-size: 13px;
}

.ekk-facts__value {
	font-weight: 600;
}

/* Downloads */

.ekk-downloads__title {
	font-size: 17px;
	margin: 0 0 10px;
}

.ekk-downloads__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ekk-download {
	align-items: center;
	background: var(--ekk-bg);
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius-sm);
	color: var(--ekk-primary);
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	padding: 10px 16px;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ekk-download:hover {
	background: var(--ekk-primary-soft);
	border-color: var(--ekk-primary);
}

.ekk-download__hint {
	color: var(--ekk-muted);
	font-size: 13px;
	font-weight: 400;
}

/* ---------------------------------------------------------------
 * Kursblöcke
 * ------------------------------------------------------------ */

.ekk-blocks__title {
	border-bottom: 2px solid var(--ekk-line);
	font-size: 24px;
	margin: 0 0 24px;
	padding-bottom: 10px;
}

.ekk-blocks__payment-hint {
	color: var(--ekk-muted);
	font-size: 14px;
	margin: 18px 0 0;
}

.ekk-block {
	background: var(--ekk-bg);
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius);
	box-shadow: var(--ekk-shadow);
	margin: 0 0 26px;
	overflow: hidden;
}

.ekk-block--ausgebucht,
.ekk-block--geschlossen {
	opacity: 0.86;
}

.ekk-block__head {
	align-items: center;
	background: linear-gradient(180deg, var(--ekk-bg-soft) 0%, #eef3f8 100%);
	border-bottom: 1px solid var(--ekk-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 24px;
}

.ekk-block__title {
	color: var(--ekk-primary);
	font-size: 19px;
	margin: 0;
}

.ekk-block__grid {
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	padding: 24px;
}

.ekk-block__hint {
	background: var(--ekk-primary-soft);
	border-radius: var(--ekk-radius-sm);
	font-size: 14px;
	margin: 16px 0 0;
	padding: 10px 14px;
}

.ekk-block__foot {
	align-items: center;
	background: var(--ekk-bg-soft);
	border-top: 1px solid var(--ekk-line);
	display: flex;
	justify-content: flex-end;
	padding: 16px 24px;
}

/* Plätze */

.ekk-seats {
	margin: 0 0 20px;
}

.ekk-seats__label {
	display: flex;
	font-size: 15px;
	gap: 8px;
	margin: 0 0 8px;
}

.ekk-seats__count {
	color: var(--ekk-primary);
	font-weight: 700;
}

.ekk-seats__bar {
	background: #e7edf3;
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.ekk-seats__fill {
	background: linear-gradient(90deg, var(--ekk-primary) 0%, var(--ekk-primary-dark) 100%);
	border-radius: 999px;
	display: block;
	height: 100%;
	transition: width 0.4s ease;
}

.ekk-block--knapp .ekk-seats__fill {
	background: linear-gradient(90deg, #e8a33d 0%, #d98218 100%);
}

.ekk-block--ausgebucht .ekk-seats__fill,
.ekk-block--warteliste .ekk-seats__fill {
	background: linear-gradient(90deg, #c94f4f 0%, #a83434 100%);
}

.ekk-seats__waitlist {
	color: var(--ekk-muted);
	font-size: 13px;
	margin: 8px 0 0;
}

/* Fakten-Liste */

.ekk-deflist {
	margin: 0;
}

.ekk-deflist__row {
	border-bottom: 1px solid var(--ekk-line);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 9px 0;
}

.ekk-deflist__row:last-child {
	border-bottom: 0;
}

.ekk-deflist dt {
	color: var(--ekk-muted);
	flex: 0 0 44%;
	font-size: 14px;
	margin: 0;
}

.ekk-deflist dd {
	flex: 1 1 45%;
	font-weight: 600;
	margin: 0;
}

/* Terminliste */

.ekk-dates__count {
	font-size: 15px;
	margin: 0 0 10px;
}

.ekk-dates {
	position: relative;
}

.ekk-dates.is-collapsed .ekk-dates__table {
	max-height: 268px;
	overflow: hidden;
}

.ekk-dates.is-collapsed::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%);
	bottom: 44px;
	content: "";
	height: 60px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.ekk-dates__table {
	border-collapse: collapse;
	display: block;
	font-size: 15px;
	width: 100%;
}

.ekk-dates__table thead,
.ekk-dates__table tbody,
.ekk-dates__table tr {
	display: table;
	table-layout: fixed;
	width: 100%;
}

.ekk-dates__table th,
.ekk-dates__table td {
	border-bottom: 1px solid var(--ekk-line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.ekk-dates__table th {
	color: var(--ekk-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ekk-dates__table tbody tr:nth-child(even) {
	background: #fafcfe;
}

.ekk-dates__nr {
	color: var(--ekk-muted);
	width: 44px;
}

.ekk-dates__table tr.is-cancelled td {
	color: var(--ekk-muted);
	text-decoration: line-through;
}

.ekk-dates__toggle {
	background: none;
	border: 0;
	color: var(--ekk-primary);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	margin-top: 8px;
	padding: 8px 0;
	text-decoration: underline;
}

.ekk-tag {
	background: var(--ekk-bg-soft);
	border-radius: 4px;
	color: var(--ekk-muted);
	display: inline-block;
	font-size: 12px;
	margin-left: 6px;
	padding: 1px 6px;
	text-decoration: none;
}

.ekk-tag--cancel {
	background: #fdeaea;
	color: #a32020;
}

/* ---------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------ */

.ekk-badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 5px 13px;
	white-space: nowrap;
}

.ekk-badge--frei {
	background: #e8f4e3;
	color: #3d6f22;
}

.ekk-badge--knapp {
	background: #fdf1de;
	color: #8a5610;
}

.ekk-badge--ausgebucht,
.ekk-badge--geschlossen {
	background: #f0f2f5;
	color: #5c6773;
}

.ekk-badge--warteliste {
	background: #fdeaea;
	color: #a32020;
}

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------ */

.ekk-btn {
	align-items: center;
	background: var(--ekk-primary);
	border: 1px solid transparent;
	border-radius: var(--ekk-radius-sm);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	padding: 12px 24px;
	text-decoration: none;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/*
 * Dieses Theme setzt button-Hintergrund, -Rand und Linkfarben mit
 * !important. Ohne Gegengewicht stand weiße Schrift auf weißem Grund –
 * die Buttons waren schlicht unsichtbar. Weder höhere Spezifität noch ein
 * Inline-Style gewinnen dagegen, deshalb hier ausnahmsweise !important,
 * eng begrenzt auf die Buttons des Plugins.
 */
.ekk a.ekk-btn,
.ekk button.ekk-btn,
.ekk a.ekk-btn:visited {
	background-color: var(--ekk-primary) !important;
	border: 1px solid transparent !important;
	color: #fff !important;
}

.ekk a.ekk-btn:hover,
.ekk button.ekk-btn:hover,
.ekk a.ekk-btn:focus,
.ekk button.ekk-btn:focus {
	background-color: var(--ekk-primary-dark) !important;
	color: #fff !important;
	text-decoration: none;
}

.ekk a.ekk-btn--accent,
.ekk button.ekk-btn--accent,
.ekk a.ekk-btn--accent:visited {
	background-color: var(--ekk-accent) !important;
}

.ekk a.ekk-btn--accent:hover,
.ekk button.ekk-btn--accent:hover,
.ekk a.ekk-btn--accent:focus,
.ekk button.ekk-btn--accent:focus {
	background-color: var(--ekk-accent-dark) !important;
}

.ekk a.ekk-btn--outline,
.ekk button.ekk-btn--outline,
.ekk a.ekk-btn--outline:visited {
	background-color: transparent !important;
	border-color: var(--ekk-primary) !important;
	color: var(--ekk-primary) !important;
}

.ekk a.ekk-btn--outline:hover,
.ekk button.ekk-btn--outline:hover {
	background-color: var(--ekk-primary) !important;
	color: #fff !important;
}

.ekk .ekk-btn--disabled,
.ekk span.ekk-btn--disabled {
	background-color: #eef1f4 !important;
	border-color: transparent !important;
	color: var(--ekk-muted) !important;
}

/* Textlink-Button der Terminliste: Theme-Rahmen und -Farbe zurücknehmen. */
.ekk button.ekk-dates__toggle {
	background: none !important;
	border: 0 !important;
	color: var(--ekk-primary) !important;
}

.ekk-btn--block {
	width: 100%;
}

.ekk-btn--lg {
	font-size: 17px;
	padding: 15px 32px;
}

.ekk-btn--disabled {
	background: #eef1f4;
	color: var(--ekk-muted);
	cursor: not-allowed;
	pointer-events: none;
}

.ekk-btn[disabled] {
	cursor: progress;
	opacity: 0.7;
}

.ekk-btn__chevron {
	font-size: 1.2em;
	line-height: 1;
}

.ekk-btn.is-open .ekk-btn__chevron {
	transform: rotate(90deg);
}

/* Ist das Formular offen, ist Absenden die Hauptaktion – nicht das Schließen. */
.ekk button.ekk-btn.is-open {
	background-color: transparent !important;
	border-color: var(--ekk-primary) !important;
	color: var(--ekk-primary) !important;
}

.ekk button.ekk-btn.is-open:hover {
	background-color: var(--ekk-primary) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
 * Anmeldeformular
 * ------------------------------------------------------------ */

.ekk-booking {
	background: var(--ekk-bg-soft);
	border-top: 1px solid var(--ekk-line);
	padding: 28px 24px 32px;
}

.ekk-booking[hidden] {
	display: none;
}

/* Kopf des Formulars mit Kurzübersicht des gewählten Kursblocks */

.ekk-form__head {
	border-bottom: 1px solid var(--ekk-line);
	margin: 0 0 22px;
	padding: 0 0 18px;
}

.ekk-form__title {
	font-size: 22px;
	margin: 0;
}

.ekk-form__blocklabel {
	color: var(--ekk-muted);
	font-size: 15px;
	margin: 2px 0 0;
}

.ekk-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
}

.ekk-summary__item {
	background: #fff;
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius-sm);
	padding: 8px 14px;
}

.ekk-summary__item dt {
	color: var(--ekk-muted);
	font-size: 12px;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

.ekk-summary__item dd {
	font-size: 15px;
	font-weight: 600;
	margin: 2px 0 0;
}

.ekk-summary__item--strong {
	background: var(--ekk-primary-soft);
	border-color: transparent;
}

.ekk-summary__item--strong dd {
	color: var(--ekk-primary-dark);
}

/*
 * Abschnitte: Die Überschrift saß als <legend> mitten auf der Rahmenlinie des
 * <fieldset>. Deshalb trägt das fieldset selbst keinen Rahmen mehr – die
 * Überschrift steht frei darüber, der Rahmen sitzt auf dem inneren Körper.
 * float + width machen die legend zu einem normalen Blockelement.
 */

.ekk-step {
	border: 0;
	margin: 0 0 22px;
	min-width: 0;
	padding: 0;
}

.ekk-step__head {
	align-items: center;
	display: flex;
	float: left;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	width: 100%;
}

.ekk-step__nr {
	align-items: center;
	background: var(--ekk-primary);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 26px;
	font-size: 14px;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.ekk-step__title {
	font-size: 17px;
	font-weight: 700;
}

.ekk-step__body {
	background: var(--ekk-bg);
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius-sm);
	clear: both;
	padding: 18px 20px 6px;
}

.ekk-step__hint {
	color: var(--ekk-muted);
	font-size: 14px;
	margin: 0 0 16px;
}

/* Einheitliches Feldraster statt unterschiedlich breiter Spalten */

.ekk-grid-fields {
	display: grid;
	gap: 0 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ekk-grid-fields--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ekk-grid-fields--adresse {
	grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
}

.ekk-field {
	margin: 0 0 16px;
	min-width: 0;
}

.ekk-field--message {
	border-top: 1px solid var(--ekk-line);
	margin-top: 18px;
	padding-top: 18px;
}

.ekk-field label {
	color: var(--ekk-ink);
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 5px;
}

.ekk-field input[type="text"],
.ekk-field input[type="email"],
.ekk-field input[type="tel"],
.ekk-field input[type="date"],
.ekk-field select,
.ekk-field textarea {
	background: #fff;
	border: 1px solid #cfd8e2;
	border-radius: var(--ekk-radius-sm);
	color: var(--ekk-ink);
	font-family: inherit;
	font-size: 16px;
	padding: 11px 13px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	width: 100%;
}

.ekk-field input:focus,
.ekk-field select:focus,
.ekk-field textarea:focus {
	border-color: var(--ekk-primary);
	box-shadow: 0 0 0 3px var(--ekk-primary-soft);
	outline: none;
}

.ekk-field input.is-invalid,
.ekk-field select.is-invalid,
.ekk-field textarea.is-invalid {
	border-color: #d05353;
	box-shadow: 0 0 0 3px rgba(208, 83, 83, 0.14);
}

.ekk-field input[readonly] {
	background: var(--ekk-bg-soft);
	color: var(--ekk-muted);
}

.ekk-field__hint {
	color: var(--ekk-muted);
	font-size: 14px;
	margin: 8px 0 0;
}

.ekk-req {
	color: #c0392b;
}

/* "Ich melde mich selbst an" */

.ekk-sameas {
	align-items: center;
	background: var(--ekk-primary-soft);
	border-radius: var(--ekk-radius-sm);
	cursor: pointer;
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
	padding: 11px 14px;
}

.ekk-sameas input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.ekk-sameas__box {
	background: #fff;
	border: 2px solid #c3ccd7;
	border-radius: 5px;
	flex: 0 0 20px;
	height: 20px;
	position: relative;
	transition: background 0.18s ease, border-color 0.18s ease;
	width: 20px;
}

.ekk-sameas input:checked ~ .ekk-sameas__box {
	background: var(--ekk-primary);
	border-color: var(--ekk-primary);
}

.ekk-sameas input:checked ~ .ekk-sameas__box::after {
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	content: "";
	height: 9px;
	left: 5px;
	position: absolute;
	top: 2px;
	transform: rotate(45deg);
	width: 5px;
}

.ekk-sameas input:focus-visible ~ .ekk-sameas__box {
	box-shadow: 0 0 0 3px rgba(26, 92, 158, 0.3);
}

.ekk-sameas__text {
	font-size: 15px;
	font-weight: 600;
}

/* Auswahl (Radio) */

.ekk-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ekk-choice {
	align-items: center;
	border: 1px solid var(--ekk-line);
	border-radius: var(--ekk-radius-sm);
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 13px 16px;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.ekk-choice:hover {
	border-color: var(--ekk-primary);
}

.ekk-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ekk-choice__box {
	background: #fff;
	border: 2px solid #c3ccd7;
	border-radius: 50%;
	flex: 0 0 20px;
	height: 20px;
	position: relative;
	transition: border-color 0.18s ease;
	width: 20px;
}

.ekk-choice input:checked ~ .ekk-choice__box {
	border-color: var(--ekk-primary);
}

.ekk-choice input:checked ~ .ekk-choice__box::after {
	background: var(--ekk-primary);
	border-radius: 50%;
	content: "";
	height: 10px;
	left: 3px;
	position: absolute;
	top: 3px;
	width: 10px;
}

.ekk-choice input:focus-visible ~ .ekk-choice__box {
	box-shadow: 0 0 0 3px var(--ekk-primary-soft);
}

.ekk-choice:has(input:checked) {
	background: var(--ekk-primary-soft);
	border-color: var(--ekk-primary);
}

/* Checkboxen / Einwilligungen */

.ekk-consent + .ekk-consent {
	border-top: 1px solid var(--ekk-line);
	margin-top: 14px;
	padding-top: 14px;
}

.ekk-consent__label {
	cursor: pointer;
	display: flex;
	gap: 12px;
}

.ekk-consent input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ekk-consent__box {
	background: #fff;
	border: 2px solid #c3ccd7;
	border-radius: 5px;
	flex: 0 0 22px;
	height: 22px;
	margin-top: 2px;
	position: relative;
	transition: background 0.18s ease, border-color 0.18s ease;
	width: 22px;
}

.ekk-consent input:checked ~ .ekk-consent__box {
	background: var(--ekk-primary);
	border-color: var(--ekk-primary);
}

.ekk-consent input:checked ~ .ekk-consent__box::after {
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	content: "";
	height: 10px;
	left: 6px;
	position: absolute;
	top: 2px;
	transform: rotate(45deg);
	width: 5px;
}

.ekk-consent input:focus-visible ~ .ekk-consent__box {
	box-shadow: 0 0 0 3px var(--ekk-primary-soft);
}

.ekk-consent.is-invalid .ekk-consent__box {
	border-color: #d05353;
}

.ekk-consent__text {
	font-size: 14px;
	line-height: 1.55;
}

.ekk-consent__text strong {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

.ekk-consent__text a {
	color: var(--ekk-primary);
}

.ekk-inline-downloads {
	background: var(--ekk-primary-soft);
	border-radius: var(--ekk-radius-sm);
	font-size: 14px;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.ekk-inline-downloads__label {
	font-weight: 600;
	margin-right: 6px;
}

.ekk-inline-downloads a {
	color: var(--ekk-primary);
	margin-right: 12px;
}

/* Honeypot */

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

/* Aktionen und Meldungen */

.ekk-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-top: 8px;
}

.ekk-form__note {
	color: var(--ekk-muted);
	font-size: 13px;
	margin: 0;
}

.ekk-form__messages:empty {
	display: none;
}

.ekk-form__messages {
	margin: 0 0 18px;
}

/* Erfolgsmeldung */

.ekk-success {
	background: #fff;
	border: 1px solid #cfe4c4;
	border-radius: var(--ekk-radius);
	padding: 32px 28px;
	text-align: center;
}

.ekk-success[hidden] {
	display: none;
}

.ekk-success__icon {
	align-items: center;
	background: var(--ekk-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 30px;
	height: 56px;
	justify-content: center;
	margin: 0 auto 16px;
	width: 56px;
}

.ekk-success__title {
	font-size: 22px;
	margin: 0 0 8px;
}

.ekk-success__text {
	color: var(--ekk-muted);
	margin: 0 auto;
	max-width: 520px;
}

/* ---------------------------------------------------------------
 * Icons (CSS-only)
 * ------------------------------------------------------------ */

.ekk-ico {
	display: inline-block;
	flex: 0 0 18px;
	height: 18px;
	opacity: 0.75;
	width: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ekk-ico--kalender {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.ekk-ico--uhr {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.ekk-ico--euro {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 6a7 7 0 100 12M4 10h9M4 14h9'/%3E%3C/svg%3E");
}

.ekk-ico--user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E");
}

.ekk-ico--check {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E");
}

.ekk-ico--pdf {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c9e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */

@media (max-width: 900px) {
	.ekk-grid-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ekk-grid-fields--adresse {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 1fr);
	}

	.ekk-course__body,
	.ekk-block__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.ekk-course__title,
	.ekk-hero__title {
		font-size: 26px;
	}

	.ekk-course__aside {
		position: static;
	}

	.ekk-hero {
		min-height: 240px;
	}

	.ekk-hero__inner {
		padding: 22px 20px 20px;
	}
}

@media (max-width: 600px) {
	.ekk-block__grid,
	.ekk-booking {
		padding: 18px 16px 22px;
	}

	.ekk-block__head,
	.ekk-block__foot {
		padding: 14px 16px;
	}

	.ekk-block__foot .ekk-btn {
		width: 100%;
	}

	.ekk-deflist dt {
		flex: 0 0 100%;
	}

	.ekk-dates__table {
		font-size: 14px;
	}

	.ekk-dates__table th,
	.ekk-dates__table td {
		padding: 7px 6px;
	}

	.ekk-step__body {
		padding: 16px 14px 4px;
	}

	.ekk-grid-fields,
	.ekk-grid-fields--2,
	.ekk-grid-fields--adresse {
		grid-template-columns: minmax(0, 1fr);
	}

	.ekk-summary {
		gap: 8px;
	}

	.ekk-summary__item {
		flex: 1 1 calc(50% - 4px);
		padding: 7px 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ekk *,
	.ekk *::before,
	.ekk *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}