/*
 * Kartendesign nach dem Kunden-Mockup. Alles ist auf .fidf-camp-hero bzw.
 * .fidf-anmeldung gescoped, damit fremde Themes unberührt bleiben; die Farben
 * liegen als Custom Properties auf dem Formular und lassen sich im Theme
 * überschreiben.
 *
 * Schriftarten/-größen an das Typo-System der Website angeglichen
 * (Plus Jakarta Sans für Überschriften, Inter für Fließtext; Überschriften
 * mit letter-spacing: -0.027em) — siehe FormShortcode für den Google-Fonts-Import.
 */
.fidf-camp-hero,
.fidf-anmeldung {
	--fidf-card: #ffffff;
	--fidf-text: #222222;
	--fidf-muted: rgba(34, 34, 34, 0.75);
	--fidf-line: #dfe3e6;
	--fidf-dark: #1f2326;
	--fidf-hero-bg: #7bbfdb;
	--fidf-summe-bg: #f7fbfd;
	--fidf-summe-line: #dceef5;
	--fidf-font-heading: 'Plus Jakarta Sans', sans-serif;
	--fidf-font-body: 'Inter', sans-serif;

	box-sizing: border-box;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--fidf-font-body);
	line-height: 1.5;
}

.fidf-camp-hero *,
.fidf-anmeldung * {
	box-sizing: border-box;
}

/*
 * Schriftfamilie zusätzlich an den Nachfahren, nicht nur am Container:
 * Vererbung verliert gegen jede direkte Deklaration eines fremden
 * Stylesheets — steckt der Shortcode z. B. in einem Code-Block, greift
 * `code, kbd, samp { font-family: monospace, monospace }` und der halbe
 * Kasten wird monospace. :where() hält die Spezifität bei 0-1-0, damit
 * unsere Regeln weiter unten unverändert gewinnen. Überschriften fehlen
 * bewusst — die setzen ihre Schrift selbst.
 */
.fidf-camp-hero :where(p, div, span, b, strong, em, li, label, legend, button, input, select, textarea),
.fidf-anmeldung :where(p, div, span, b, strong, em, li, label, legend, button, input, select, textarea) {
	font-family: var(--fidf-font-body);
}

/*
 * Absatzgrößen selbst setzen statt erben: Page-Builder deklarieren sie direkt
 * auf <p> — Elementor etwa mit `.elementor-widget-text-editor p
 * { font-size: inherit }` (Spezifität 0-1-1) — und schlagen damit jede
 * Ein-Klassen-Regel von uns. Der doppelte Wurzel-Klassenname hebt uns auf
 * 0-2-1; Absätze mit eigener Größe weiter unten liegen entsprechend darüber.
 */
.fidf-camp-hero.fidf-camp-hero p,
.fidf-anmeldung.fidf-anmeldung p {
	font-size: 15px;
	font-weight: 400;
}

/* ---------- Kopfbereich ---------- */

.fidf-camp-hero {
	background: var(--fidf-hero-bg);
	color: var(--fidf-text);
	border-radius: 28px;
	padding: 34px;
	margin-bottom: 24px;
}

.fidf-camp-hero__kicker {
	font-size: 12px;
	letter-spacing: 0.14em;
	font-weight: 700;
	text-transform: uppercase;
	opacity: 0.8;
}

.fidf-camp-hero__titel {
	font-family: var(--fidf-font-heading);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.027em;
	margin: 12px 0 20px;
	color: inherit;
}

.fidf-camp-hero__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.fidf-camp-hero__fact {
	background: var(--fidf-card);
	border: 1px solid rgba(23, 23, 23, 0.12);
	border-radius: 16px;
	padding: 14px;
	font-size: 13px;
	font-weight: 400;
}

/* Explizit 700 statt des UA-Defaults `bolder` — der rechnet relativ zum
   geerbten Gewicht und fällt in Themes mit leichtem Fließtext auf 400. */
.fidf-camp-hero__fact b {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 3px;
}

.fidf-camp-hero.fidf-camp-hero .fidf-camp-hero__plaetze {
	margin: 18px 0 0;
	font-size: 13px;
	opacity: 0.8;
}

/* ---------- Formularkarte ---------- */

.fidf-anmeldung {
	background: var(--fidf-card);
	color: var(--fidf-text);
	border-radius: 28px;
	padding: 28px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.fidf-anmeldung__section {
	padding: 8px 0 28px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--fidf-line);
}

.fidf-anmeldung__section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.fidf-anmeldung__section > h2 {
	font-family: var(--fidf-font-heading);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.027em;
	margin: 0 0 6px;
}

.fidf-anmeldung__intro {
	color: var(--fidf-muted);
	margin: 0 0 20px;
}

.fidf-anmeldung__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.fidf-anmeldung__grid > p {
	margin: 0;
}

/* Eigene Basis für alle Feldtypen: Themes stylen <select>, date- und
   tel-Inputs oft nicht — ohne das bleiben sie auf Browser-Minimalgröße. */
.fidf-anmeldung input[type="text"],
.fidf-anmeldung input[type="email"],
.fidf-anmeldung input[type="tel"],
.fidf-anmeldung input[type="date"],
.fidf-anmeldung input[type="number"],
.fidf-anmeldung select,
.fidf-anmeldung textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: 0.45rem;
	padding: 13px 14px;
	/* Nicht `font: inherit` — die Felder stehen in einem fetten <label>, der
	   eingetippte Wert käme sonst fett heraus. */
	font-family: var(--fidf-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	border: 1px solid var(--fidf-line);
	border-radius: 14px;
	background-color: #fff;
	color: inherit;
}

.fidf-anmeldung select {
	appearance: none;
	height: auto;
	padding-right: 40px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="%23222222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6.5 8 10.5 12 6.5"/></svg>');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 14px;
}

.fidf-anmeldung textarea {
	min-height: 105px;
	resize: vertical;
}

.fidf-anmeldung label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 0.25rem;
}

.fidf-anmeldung input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	vertical-align: -0.1rem;
}

.fidf-anmeldung fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Jedes Kind ist eine eigene Karte — bei mehreren Kindern muss auf einen
   Blick klar sein, wo das eine aufhört und das nächste anfängt. */
.fidf-anmeldung .fidf-anmeldung__kind {
	border: 1px solid var(--fidf-line);
	border-radius: 18px;
	padding: 20px 18px 18px;
	margin: 0 0 18px;
	background: var(--fidf-summe-bg);
}

/* Die Nummer als Plakette im Rand der Karte. Als blosser fetter Text sass sie
   durch das Legenden-Padding leicht eingerückt in der Luft. */
.fidf-anmeldung .fidf-anmeldung__kind > legend {
	margin: 0;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--fidf-hero-bg);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fidf-anmeldung__kind .fidf-anmeldung__grid + .fidf-anmeldung__grid {
	margin-top: 16px;
}

/* ---------- Auswahlzeilen und Produkte ---------- */

.fidf-anmeldung__choice label,
.fidf-anmeldung__produkt {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var(--fidf-line);
	border-radius: 16px;
	padding: 14px;
	font-weight: 400;
	font-size: 14px;
}

.fidf-anmeldung__choice {
	margin: 10px 0;
}

.fidf-anmeldung__produkt {
	flex-wrap: wrap;
	border-radius: 18px;
	padding: 18px;
}

.fidf-anmeldung__produkt-name {
	font-weight: 700;
	font-size: 17px;
}

.fidf-anmeldung__produkt-bild {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 12px;
	background: var(--fidf-line);
}

.fidf-anmeldung__produkt-preis {
	flex-basis: 100%;
	font-weight: 700;
}

.fidf-anmeldung__produkt input[type="checkbox"],
.fidf-anmeldung__choice input[type="checkbox"] {
	margin-top: 4px;
	flex: 0 0 auto;
}

/* Bei nur einem Kind braucht die Extras-Gruppe keine Überschrift. */
.fidf-anmeldung__extras-gruppen > .fidf-anmeldung__extras:only-child .fidf-anmeldung__extras-kind {
	display: none;
}

.fidf-anmeldung__extras-kind {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 8px;
}

.fidf-anmeldung__extras + .fidf-anmeldung__extras {
	margin-top: 16px;
}

/* ---------- Zusammenfassung ---------- */

.fidf-anmeldung__summe {
	background: var(--fidf-summe-bg);
	border: 1px solid var(--fidf-summe-line);
	border-radius: 20px;
	padding: 20px;
	margin: 16px 0;
}

.fidf-anmeldung__summe-zeile {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 8px 0;
}

/*
 * Währungszeichen und Betrag gehören zusammen — zwischen beiden steht ein
 * normales Leerzeichen, und ohne das hier bricht "€ 159,00" mitten durch.
 * Der Betrag darf dafür als Ganzes in die nächste Zeile rutschen (flex-wrap
 * oben), sonst schiebt er die Karte auf schmalen Geräten aus dem Bild.
 * `margin-left: auto` hält ihn dabei rechtsbündig.
 */
.fidf-anmeldung__summe-zeile > :last-child {
	white-space: nowrap;
	margin-left: auto;
}

.fidf-anmeldung__summe-zeile--gesamt {
	font-size: clamp(17px, 5vw, 22px);
	font-weight: 800;
	border-top: 1px solid var(--fidf-line);
	margin-top: 8px;
	padding-top: 14px;
}

.fidf-anmeldung button[type="submit"] {
	width: 100%;
	background: var(--fidf-hero-bg);
	color: #fff;
	border: 0;
	border-radius: 16px;
	padding: 17px 20px;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}

.fidf-anmeldung button[type="submit"][disabled] {
	opacity: 0.6;
	cursor: default;
}

.fidf-anmeldung__kind-hinzufuegen {
	background: transparent;
	border: 1px solid var(--fidf-line);
	border-radius: 14px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}

.fidf-anmeldung__kind-aktionen {
	margin: 16px 0 0;
	text-align: right;
}

.fidf-anmeldung__kind-entfernen {
	background: transparent;
	border: 0;
	padding: 4px 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--fidf-muted);
	text-decoration: underline;
	cursor: pointer;
}

.fidf-anmeldung__kind-entfernen:hover,
.fidf-anmeldung__kind-entfernen:focus-visible {
	color: var(--fidf-text);
}

.fidf-anmeldung.fidf-anmeldung .fidf-anmeldung__hinweis {
	font-size: 12px;
	color: var(--fidf-muted);
	margin-top: 12px;
	text-align: center;
}

.fidf-anmeldung.fidf-anmeldung .fidf-anmeldung__datenschutz-hinweis {
	font-size: 14px;
	color: var(--fidf-muted);
	margin: 10px 0;
}

.fidf-anmeldung__warteliste-hinweis,
.fidf-anmeldung__geschlossen {
	font-family: var(--fidf-font-body);
	font-size: 15px;
	font-weight: 400;
}

.fidf-anmeldung__warteliste-hinweis {
	max-width: 1080px;
	margin: 0 auto 16px;
	padding: 14px 18px;
	border-radius: 16px;
	background: #fff8e5;
	border: 1px solid #f0d68a;
}

/* ---------- Feldmeldungen ---------- */

/* Eigene Hinweise statt der nativen Sprechblasen: Bei `scroll-behavior: smooth`
   im Theme schließt der Browser seine Sprechblase sofort wieder, sobald er zum
   Feld scrollt — der Hinweis wäre nie zu sehen. */
.fidf-anmeldung__feld-fehler {
	display: block;
	margin-top: 0.35rem;
	font-size: 13px;
	font-weight: 400;
	color: #b3261e;
}

.fidf-anmeldung [aria-invalid="true"] {
	border-color: #b3261e;
}

.fidf-anmeldung__choice label:has( [aria-invalid="true"] ),
.fidf-anmeldung__produkt:has( [aria-invalid="true"] ) {
	border-color: #b3261e;
}

/* ---------- Meldungen ---------- */

.fidf-anmeldung__meldung {
	display: none;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 14px;
}

.fidf-anmeldung__meldung--sichtbar {
	display: block;
}

.fidf-anmeldung__meldung--erfolg {
	background: #e6f4ea;
	border: 1px solid #34a853;
	color: #1e4620;
}

.fidf-anmeldung__meldung--fehler {
	background: #fce8e6;
	border: 1px solid #ea4335;
	color: #5f1e1a;
}

.fidf-anmeldung--gesendet > *:not(.fidf-anmeldung__meldung) {
	display: none;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld. */
.fidf-anmeldung__website {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 800px) {
	.fidf-camp-hero {
		padding: 24px;
		border-radius: 22px;
	}

	.fidf-camp-hero__titel {
		font-size: 30px;
	}

	.fidf-anmeldung {
		padding: 20px;
		border-radius: 22px;
	}

	.fidf-anmeldung__grid {
		grid-template-columns: 1fr;
	}
}