/* =========================================================================
   Kurs-Buchung – Frontend-Theme
   Eigenständiges, modernes Design (nicht kopiert), angelehnt an eine warme,
   familiäre Farbwelt: Lachs/Pfirsich als Hauptfarbe, Gold/Senf als Akzent
   für Überschriften, Cremeweiß als Hintergrund, dunkles Anthrazit als Text.
   Alle Werte sind zentral als CSS-Variablen hinterlegt – Farben/Radien lassen
   sich hier an einer Stelle anpassen, ohne den Rest des CSS zu durchsuchen.
   ========================================================================= */

:root {
	--ckb-color-primary: #f2a98a;
	--ckb-color-primary-dark: #dd8a67;
	--ckb-color-primary-light: #fbe4d7;
	--ckb-color-accent: #c9a84c;
	--ckb-color-accent-light: #f6ecd2;
	--ckb-color-bg: #faf0e6;
	--ckb-color-surface: #ffffff;
	--ckb-color-text: #3a332e;
	--ckb-color-text-muted: #7d7168;
	--ckb-color-border: #ecdccb;
	--ckb-color-danger-bg: #f6dcd4;
	--ckb-color-danger-text: #9a4331;

	/* Schrift: Anlehnung an eine elegante Serifen-Headline-Optik, aber ohne
	   externe Google-Fonts-Einbindung (Datenschutz/DSGVO). Falls ihr die
	   Website-Schrift bereits selbst hostet, hier einfach ersetzen. */
	--ckb-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
	--ckb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ckb-radius-lg: 22px;
	--ckb-radius-md: 14px;
	--ckb-radius-pill: 999px;
	--ckb-shadow-card: 0 10px 30px rgba(58, 51, 46, 0.08);
	--ckb-shadow-modal: 0 20px 60px rgba(58, 51, 46, 0.25);
}

/* -------------------------------------------------------------------------
   Kurs-Übersicht (Grid mit Kurskarten)
   ------------------------------------------------------------------------- */

.ckb-courses {
	display: grid;
	/* Die Mindestbreite pro Karte kommt aus den Einstellungen (Kursübersicht
	   -> Spalten) als Inline-Style, abgestimmt auf die gewünschte Spaltenzahl.
	   Dank auto-fit ist diese Spaltenzahl aber ein MAXIMUM: Ist der verfügbare
	   Platz (Theme-Layout, Bildschirmbreite) schmaler, zeigt das Grid
	   automatisch weniger, dafür angenehm breite Karten an, statt sie
	   erzwungen schmal und lang zu quetschen. */
	grid-template-columns: repeat(auto-fit, minmax(var(--ckb-overview-min-width, 260px), 1fr));
	gap: 26px;
	margin: 24px 0;
	font-family: var(--ckb-font-body);
	color: var(--ckb-color-text);
}

@media (max-width: 480px) {
	.ckb-courses {
		/* Sicherheitsnetz für sehr schmale Bildschirme: immer genau eine Spalte,
		   unabhängig von der eingestellten Mindestbreite. */
		grid-template-columns: 1fr;
	}
}

/* Optionaler "volle Seitenbreite"-Ausbruch (Einstellungen -> Allgemein ->
   Kursübersicht). Viele Themes begrenzen den normalen Text-Inhaltsbereich auf
   eine feste, oft eher schmale Breite (z. B. 700-900px) – auch auf breiten
   Bildschirmen. Dieser Trick lässt die Kursübersicht bewusst über diese
   Begrenzung hinaus bis (fast) an den Bildschirmrand wachsen, damit auf
   breiten Bildschirmen wirklich mehr Spalten nebeneinanderpassen. Funktioniert
   zuverlässig bei den allermeisten Themes; hat ein Theme jedoch z. B.
   "overflow: hidden" auf einem umschließenden Element, kann der Ausbruch
   dadurch clientseitig unterdrückt werden. */
.ckb-courses-fullwidth-wrap {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding-left: 24px;
	padding-right: 24px;
}

.ckb-courses-fullwidth-wrap .ckb-courses {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

.ckb-no-courses {
	background: var(--ckb-color-surface);
	border-radius: var(--ckb-radius-md);
	padding: 24px;
	color: var(--ckb-color-text-muted);
}

.ckb-course-card {
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-lg);
	padding: 26px;
	box-shadow: var(--ckb-shadow-card);
	display: flex;
	flex-direction: column;
}

.ckb-course-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ckb-course-title {
	margin: 0;
	font-family: var(--ckb-font-heading);
	font-size: 1.35em;
	font-weight: 700;
	color: var(--ckb-color-text);
}

.ckb-badge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--ckb-radius-pill);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.ckb-badge-enrolled {
	background: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
}

.ckb-badge-waitlist {
	background: var(--ckb-color-accent-light);
	color: #8a6b1f;
}

.ckb-course-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.ckb-category-pill {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--ckb-radius-pill);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--ckb-color-bg);
	border: 1px solid var(--ckb-color-border);
	color: var(--ckb-color-text-muted);
}

.ckb-course-meta {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	font-size: 0.95em;
}

.ckb-course-meta li {
	margin-bottom: 6px;
	color: var(--ckb-color-text);
}

.ckb-course-meta li strong {
	color: var(--ckb-color-text-muted);
	font-weight: 600;
	margin-right: 4px;
}

.ckb-course-description {
	font-size: 0.95em;
	color: var(--ckb-color-text-muted);
	margin-bottom: 18px;
	line-height: 1.5;
}

.ckb-help-text {
	color: var(--ckb-color-text-muted);
	font-size: 0.85em;
}

/* -------------------------------------------------------------------------
   Buttons – abgerundete "Pill"-Buttons wie im Referenzdesign
   ------------------------------------------------------------------------- */

.ckb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ckb-color-primary);
	color: #fff;
	border: 2px solid var(--ckb-color-primary);
	border-radius: var(--ckb-radius-pill);
	padding: 12px 26px;
	font-size: 0.95em;
	font-weight: 600;
	font-family: var(--ckb-font-body);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	margin-top: auto;
	align-self: flex-start;
}

.ckb-btn:hover {
	background: var(--ckb-color-primary-dark);
	border-color: var(--ckb-color-primary-dark);
}

.ckb-btn:active {
	transform: translateY(1px);
}

.ckb-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.ckb-btn-outline {
	background: transparent;
	color: var(--ckb-color-primary-dark);
	border-color: var(--ckb-color-primary);
}

.ckb-btn-outline:hover {
	background: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
}

.ckb-btn-arrow::after {
	content: "→";
	font-size: 1.05em;
}

/* -------------------------------------------------------------------------
   Modal-Overlay – als rechtsseitiges "Drawer"-Panel, das einslidet
   ------------------------------------------------------------------------- */

.ckb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(58, 51, 46, 0.45);
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.ckb-modal-overlay.ckb-is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s ease, visibility 0s linear 0s;
}

body.ckb-modal-open {
	overflow: hidden;
}

.ckb-modal {
	background: var(--ckb-color-bg);
	box-shadow: var(--ckb-shadow-modal);
	width: 100%;
	max-width: 500px;
	height: 100%;
	overflow: hidden;
	position: relative;
	font-family: var(--ckb-font-body);
	color: var(--ckb-color-text);
	display: flex;
	flex-direction: column;
	border-radius: var(--ckb-radius-lg) 0 0 var(--ckb-radius-lg);
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.ckb-modal-overlay.ckb-is-open .ckb-modal {
	transform: translateX(0);
}

.ckb-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--ckb-color-surface);
	color: var(--ckb-color-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--ckb-shadow-card);
	z-index: 2;
}

.ckb-modal-close:hover {
	background: var(--ckb-color-primary-light);
}

/* -------------------------------------------------------------------------
   Wizard: horizontale Schritt-Leiste oben + darunter scrollbarer Inhalt
   (bewusst horizontal statt seitlicher Sidebar, damit es ins schmale
   Slide-in-Panel passt).
   ------------------------------------------------------------------------- */

.ckb-wizard {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.ckb-wizard-sidebar {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	gap: 4px;
	padding: 26px 50px 16px 24px;
	border-bottom: 1px solid var(--ckb-color-border);
}

.ckb-step-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 4px;
	border-radius: var(--ckb-radius-md);
	color: var(--ckb-color-text-muted);
	font-weight: 600;
	font-size: 0.72em;
	flex: 1 1 0;
}

.ckb-step-nav-icon {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ckb-color-text-muted);
}

.ckb-step-nav-icon svg {
	width: 17px;
	height: 17px;
}

.ckb-step-nav.ckb-step-active {
	color: var(--ckb-color-primary-dark);
}

.ckb-step-nav.ckb-step-active .ckb-step-nav-icon {
	background: var(--ckb-color-primary);
	border-color: var(--ckb-color-primary);
	color: #fff;
}

.ckb-step-nav.ckb-step-done .ckb-step-nav-icon {
	background: var(--ckb-color-primary-light);
	border-color: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
}

.ckb-wizard-content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
}

.ckb-wizard-step-title {
	font-family: var(--ckb-font-heading);
	font-size: 1.3em;
	margin: 0 0 18px;
	color: var(--ckb-color-text);
}

.ckb-wizard-step {
	display: none;
	flex: 1 1 auto;
	flex-direction: column;
}

.ckb-wizard-step.ckb-step-visible {
	display: flex;
}

/* Schritt 1: Kurs-Übersicht im Modal */
.ckb-modal-course-summary {
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	padding: 20px;
	margin-bottom: 8px;
}

.ckb-modal-course-summary h3 {
	font-family: var(--ckb-font-heading);
	margin: 0 0 10px;
	font-size: 1.15em;
}

.ckb-modal-course-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.92em;
}

.ckb-modal-course-summary li {
	margin-bottom: 6px;
}

.ckb-modal-course-summary li strong {
	color: var(--ckb-color-text-muted);
	margin-right: 4px;
}

.ckb-wizard-intro {
	color: var(--ckb-color-text-muted);
	font-size: 0.9em;
	margin: 12px 0 14px;
}

.ckb-wizard-subtitle {
	font-family: var(--ckb-font-heading);
	font-size: 1.05em;
	margin: 22px 0 4px;
	color: var(--ckb-color-text);
}

/* Schritt 2: Kalender (Startdatum) + Fehltermine */
.ckb-calendar {
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	padding: 16px 18px 18px;
}

.ckb-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-family: var(--ckb-font-heading);
	font-weight: 700;
	font-size: 1.02em;
}

.ckb-calendar-nav-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ckb-color-border);
	background: var(--ckb-color-bg);
	color: var(--ckb-color-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ckb-calendar-nav-btn:hover {
	background: var(--ckb-color-primary-light);
}

.ckb-calendar-weekdays,
.ckb-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
}

.ckb-calendar-weekday {
	color: var(--ckb-color-text-muted);
	font-weight: 600;
	font-size: 0.72em;
	padding: 4px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.ckb-calendar-day {
	padding: 8px 0;
	border-radius: 10px;
	font-size: 0.85em;
	color: var(--ckb-color-text-muted);
}

.ckb-calendar-day.ckb-cal-empty {
	visibility: hidden;
}

.ckb-calendar-day.ckb-cal-disabled {
	opacity: 0.35;
}

.ckb-calendar-day.ckb-cal-available {
	cursor: pointer;
	color: var(--ckb-color-text);
	background: var(--ckb-color-primary-light);
	font-weight: 600;
}

.ckb-calendar-day.ckb-cal-available:hover {
	background: var(--ckb-color-primary);
	color: #fff;
}

.ckb-calendar-day.ckb-cal-selected {
	background: var(--ckb-color-primary) !important;
	color: #fff !important;
}

.ckb-start-date-readout {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
	border-radius: var(--ckb-radius-md);
	font-size: 0.88em;
	font-weight: 600;
}

/* Sicherheitsnetz: Lässt sich (z. B. für einen Kurs ohne ermittelbares
   Startdatum) kein Text befüllen, bleibt das Element leer – dann auch
   Innenabstand/Hintergrund ausblenden, statt einen leeren farbigen Balken
   unter dem Kalender anzuzeigen. */
.ckb-start-date-readout:empty {
	display: none;
}

.ckb-unavailable-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.ckb-unavailable-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ckb-unavailable-row .ckb-unavailable-select {
	flex: 1 1 auto;
}

.ckb-remove-row-btn {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	border: 1px solid var(--ckb-color-border);
	background: var(--ckb-color-surface);
	color: var(--ckb-color-text-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ckb-remove-row-btn:hover {
	background: var(--ckb-color-danger-bg);
	color: var(--ckb-color-danger-text);
	border-color: var(--ckb-color-danger-bg);
}

.ckb-btn-small {
	padding: 8px 18px;
	font-size: 0.85em;
}

#ckb-add-unavailable-row {
	margin-bottom: 18px;
}

/* Schritt 3: Formularfelder */
.ckb-field-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ckb-field-row label,
.ckb-field-full {
	display: flex;
	flex-direction: column;
	font-size: 0.88em;
	font-weight: 600;
	gap: 6px;
	margin-bottom: 14px;
	color: var(--ckb-color-text);
}

.ckb-field-row label {
	flex: 1 1 200px;
}

/* .ckb-field-full wird sowohl innerhalb einer .ckb-field-row (volle Breite
   der Zeile) als auch als direktes Kind von .ckb-wizard-step verwendet (z. B.
   der Geburtsdatum-Block). Im zweiten Fall darf es NICHT wachsen (flex-grow),
   sonst reißt es in der Flex-Column des Wizard-Schritts ungewollt viel
   vertikalen Platz an sich – das war die Ursache für den großen Abstand
   zwischen den Kind- und Elternteil-Feldern. */
.ckb-field-full {
	flex: 0 0 auto;
	width: 100%;
}

.ckb-wizard-content input[type="text"],
.ckb-wizard-content input[type="email"],
.ckb-wizard-content input[type="tel"],
.ckb-wizard-content input[type="date"],
.ckb-wizard-content select,
.ckb-wizard-content textarea {
	box-sizing: border-box;
	font-weight: normal;
	font-family: var(--ckb-font-body);
	line-height: 1.3;
	padding: 11px 14px;
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	font-size: 0.95em;
	background: var(--ckb-color-surface);
	color: var(--ckb-color-text);
}

/* Native Select-Darstellung normalisieren, damit Dropdowns exakt so hoch
   sind wie die Text-Eingabefelder (Browser rendern <select> sonst oft
   kompakter als <input>). Eigener Pfeil ersetzt den nativen Indikator. */
.ckb-wizard-content select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 13px;
}

.ckb-wizard-content input:focus,
.ckb-wizard-content select:focus,
.ckb-wizard-content textarea:focus {
	outline: none;
	border-color: var(--ckb-color-primary);
	box-shadow: 0 0 0 3px var(--ckb-color-primary-light);
}

/* Geburtsdatum als drei Dropdowns statt nativem Datums-Popup */
.ckb-field-full > span {
	font-size: 0.88em;
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

.ckb-birthdate-row {
	margin-bottom: 0;
}

.ckb-birthdate-row select {
	flex: 1 1 100px;
}

/* Trennlinien zwischen den Anmeldedaten-Abschnitten (Kind / Elternteil / Rechnungsadresse) */
.ckb-field-divider {
	border: none;
	border-top: 1px solid var(--ckb-color-border);
	margin: 20px 0;
}

.ckb-wizard-subtitle-first {
	margin-top: 4px;
}

/* Schritt 3: Zusammenfassung */
.ckb-summary-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	padding: 18px 20px;
}

.ckb-summary-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 0.92em;
	border-bottom: 1px dashed var(--ckb-color-border);
}

.ckb-summary-list li:last-child {
	border-bottom: none;
}

.ckb-summary-list li span:first-child {
	color: var(--ckb-color-text-muted);
	font-weight: 600;
}

/* Hinweisbox "Kostenlose Teilnahme" im Bestätigungs-Schritt: gleiche
   Signalfarbe wie der Buchungs-Button (.ckb-btn), aber als volle Box statt
   Pill-Form, damit sie sich in die Kartenstruktur darüber einfügt. */
.ckb-free-participation-note {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--ckb-color-primary);
	color: #fff;
	border-radius: var(--ckb-radius-md);
	font-size: 0.95em;
	font-weight: 700;
	text-align: center;
}

.ckb-checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: normal;
	font-size: 0.9em;
	margin-bottom: 18px;
	color: var(--ckb-color-text);
}

.ckb-hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ckb-wizard-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--ckb-color-border);
}

.ckb-form-message {
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: var(--ckb-radius-md);
	font-size: 0.9em;
	display: none;
}

.ckb-form-message.ckb-error {
	display: block;
	background: var(--ckb-color-danger-bg);
	color: var(--ckb-color-danger-text);
}

/* Erfolgs-Ansicht */
.ckb-wizard-success {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 34px;
	gap: 14px;
}

.ckb-wizard-success.ckb-step-visible {
	display: flex;
}

.ckb-wizard-success-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ckb-wizard-success-icon svg {
	width: 28px;
	height: 28px;
}

.ckb-wizard-success h3 {
	font-family: var(--ckb-font-heading);
	margin: 0;
	font-size: 1.3em;
}

.ckb-wizard-success p {
	color: var(--ckb-color-text-muted);
	max-width: 420px;
	margin: 0;
}

.ckb-wizard-success .ckb-btn {
	/* .ckb-btn ist standardmäßig linksbündig (align-self: flex-start), damit
	   er auf den Kurskarten unten links sitzt. Im zentrierten Bestätigungs-
	   Screen soll er aber mittig stehen wie Icon/Überschrift/Text darüber. */
	align-self: center;
	margin-top: 6px;
}

.ckb-confirmation-code-readout {
	background: var(--ckb-color-bg);
	border: 1px dashed var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	padding: 12px 18px;
}

.ckb-confirmation-code-readout strong {
	font-family: var(--ckb-font-heading);
	font-size: 1.15em;
	letter-spacing: 0.06em;
	color: var(--ckb-color-primary-dark);
}

/* -------------------------------------------------------------------------
   Stornierung (Kurs-Stornierung per Bestätigungsnummer)
   ------------------------------------------------------------------------- */

.ckb-cancel-card {
	background: var(--ckb-color-surface);
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-lg);
	padding: 30px 32px;
	box-shadow: var(--ckb-shadow-card);
	font-family: var(--ckb-font-body);
	color: var(--ckb-color-text);
	max-width: 480px;
}

.ckb-cancel-title {
	font-family: var(--ckb-font-heading);
	font-size: 1.3em;
	margin: 0 0 10px;
	color: var(--ckb-color-text);
}

.ckb-flash-message {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--ckb-radius-md);
	font-size: 0.92em;
	line-height: 1.5;
}

.ckb-flash-success {
	background: #d7f5da;
	color: #1a7431;
}

.ckb-flash-error {
	background: var(--ckb-color-danger-bg);
	color: var(--ckb-color-danger-text);
}

.ckb-flash-info {
	background: #fff3cd;
	color: #8a6100;
}

.ckb-policy-note {
	background: var(--ckb-color-bg);
	border: 1px dashed var(--ckb-color-border);
	border-radius: var(--ckb-radius-md);
	padding: 12px 16px;
	font-size: 0.85em;
	line-height: 1.5;
	color: var(--ckb-color-text-muted);
	margin: 0 0 18px;
}

.ckb-waitlist-note {
	background: var(--ckb-color-accent-light);
	border: 1px solid #f0dfa8;
	border-radius: var(--ckb-radius-md);
	padding: 12px 16px;
	font-size: 0.88em;
	line-height: 1.5;
	color: #8a6b1f;
	margin: 0 0 16px;
}

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

/* -------------------------------------------------------------------------
   Elternbildungsgutschein-Hinweis + verzögerte Anmeldeöffnung (Kurskarte)
   ------------------------------------------------------------------------- */

.ckb-voucher-note {
	margin: 0 0 14px;
	padding: 8px 12px;
	font-size: 0.82em;
	font-weight: 600;
	color: var(--ckb-color-primary-dark);
	background: var(--ckb-color-primary-light);
	border-radius: var(--ckb-radius-md);
}

.ckb-course-opens-note {
	margin: 0 0 12px;
	color: var(--ckb-color-text-muted);
	font-size: 0.9em;
	font-weight: 600;
}

.ckb-reminder-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	align-items: flex-start;
}

.ckb-reminder-form input[type="email"] {
	flex: 1 1 180px;
	box-sizing: border-box;
	font-family: var(--ckb-font-body);
	padding: 10px 14px;
	border: 1px solid var(--ckb-color-border);
	border-radius: var(--ckb-radius-pill);
	font-size: 0.9em;
	background: var(--ckb-color-surface);
	color: var(--ckb-color-text);
}

.ckb-reminder-form input[type="email"]:focus {
	outline: none;
	border-color: var(--ckb-color-primary);
	box-shadow: 0 0 0 3px var(--ckb-color-primary-light);
}

.ckb-reminder-form .ckb-form-message {
	flex: 1 1 100%;
	margin-top: 6px;
	padding: 8px 12px;
	border-radius: var(--ckb-radius-md);
	font-size: 0.82em;
	display: none;
	background: var(--ckb-color-primary-light);
	color: var(--ckb-color-primary-dark);
}

.ckb-reminder-form .ckb-form-message:not(:empty) {
	display: block;
}

.ckb-reminder-form .ckb-form-message.ckb-error {
	background: var(--ckb-color-danger-bg);
	color: var(--ckb-color-danger-text);
}

@media (max-width: 640px) {
	.ckb-modal {
		max-width: 100%;
		border-radius: 0;
	}

	.ckb-wizard-sidebar {
		padding: 22px 46px 14px 16px;
	}

	.ckb-wizard-content {
		padding: 22px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ckb-modal-overlay,
	.ckb-modal {
		transition: none !important;
	}
}