/* Cani Formulare 3 – Formulargestaltung im Stil der neuen Homepage-Entwürfe
 * (Startseite 22220, „Anmeldung zur 5. Klasse" 22234): weiße Karten mit 24 px Rundung und
 * weichem Schatten, Pillen-Knöpfe, Sonnengelb als Hauptknopf, Vier-Punkte-Zeichen, Plus Jakarta Sans.
 * Alle Regeln beginnen mit .cf3, damit das Theme sie nicht überschreibt und sie das Theme nicht stören.
 * Kontraste geprüft (WCAG AA): Tinte 17,5:1 · leise 5,5:1 · Tinte auf Gelb 11,4:1 ·
 * Blau tief 5,3:1 · Feldrahmen 3,5:1 · Fehler 6,5:1
 */

/* Schrift der neuen Seiten – liegt auf dem Schulserver, es wird nichts von Google geladen */
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../../../uploads/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

.cf3 {
	--cf3-tinte: #0d1b26;          /* Schrift, dunkle Elemente */
	--cf3-tinte2: #22313d;
	--cf3-leise: #5d6b77;          /* Hilfetexte */
	--cf3-blau: #0097be;           /* Cani-Blau: Rahmen, Markierungen, Fokus */
	--cf3-blau-tief: #007597;      /* Cani-Blau für Schrift und gefüllte Flächen */
	--cf3-blau-hell: #e3f4f9;
	--cf3-sonne: #ffc94d;          /* Hauptknopf */
	--cf3-sonne-hover: #ffd56e;
	--cf3-sand: #f7f6f2;
	--cf3-rand: #7f8c96;           /* Feldrahmen (3,5:1) */
	--cf3-rand-hell: #e2e7ea;      /* Trennlinien, Kachelrahmen */
	--cf3-fehler: #b3261e;
	--cf3-fehler-flaeche: #fdeeec;
	--cf3-ok: #1e6b3f;
	--cf3-ok-flaeche: #e6f4ec;
	--cf3-radius: 14px;
	--cf3-schatten: 0 1px 2px rgba(13, 27, 38, .04), 0 12px 40px -12px rgba(13, 27, 38, .18);
	/* passt sich dem Container an (Spalte, ganze Seite …); innen wird nach dessen Breite umgebaut */
	width: 100%;
	max-width: 100%;
	container-type: inline-size;
	container-name: cf3;
	margin: 1.5em 0;
	color: var(--cf3-tinte);
	line-height: 1.55;
}
.cf3 *, .cf3 *::before, .cf3 *::after { box-sizing: border-box; }
/* Auf Seiten im neuen Design (Klasse cani-neu) dieselbe Schrift wie die Seite – auf alten Seiten bleibt die Theme-Schrift */
.cani-neu .cf3, body:has(.cani-neu) .cf3,
.cani-neu .cf3 .cf3-eingabe, body:has(.cani-neu) .cf3 .cf3-eingabe,
.cani-neu .cf3 .cf3-knopf, body:has(.cani-neu) .cf3 .cf3-knopf { font-family: "Plus Jakarta Sans", sans-serif; }
/* Einstellung „schmal": lesefreundlich begrenzt und mittig, auch im breiten Container */
.cf3.cf3-schmal { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Karte ---------- */
.cf3 .cf3-form {
	background: #fff;
	border: 0;
	border-radius: 24px;
	padding: clamp(22px, 4.5vw, 44px);
	padding: clamp(22px, 5.5cqi, 48px);
	box-shadow: var(--cf3-schatten);
	margin: 0;
}
.cf3 .cf3-felder { display: flex; flex-wrap: wrap; gap: 0 4%; }
.cf3 .cf3-feld { flex: 0 0 100%; margin: 0 0 1.6em; min-width: 0; }
.cf3 .cf3-feld.cf3-halb { flex-basis: 48%; }
/* Ersatz für sehr alte Browser ohne Container-Abfragen: nach Bildschirmbreite */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) { .cf3 .cf3-feld.cf3-halb { flex-basis: 100%; } }
}

/* ---------- Beschriftungen ---------- */
.cf3 .cf3-label {
	display: block; margin: 0 0 .5em; padding: 0;
	font-weight: 700; font-size: 1.04em; line-height: 1.35; letter-spacing: -.005em; color: var(--cf3-tinte);
	text-transform: none;
}
.cf3 .cf3-pflicht { color: var(--cf3-fehler); font-weight: 700; }
.cf3 .cf3-hilfe { margin: .45em 0 0; font-size: max(13px, .875em); color: var(--cf3-leise); line-height: 1.45; }
.cf3 fieldset .cf3-hilfe { margin: -.2em 0 .7em; }
.cf3 fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cf3 legend { float: left; width: 100%; padding: 0; }
.cf3 legend + * { clear: both; }

/* ---------- Eingabefelder ---------- */
.cf3 .cf3-eingabe {
	display: block; width: 100%; max-width: 100%; height: auto; min-height: 52px; margin: 0;
	padding: .75em 1em; border: 1.5px solid var(--cf3-rand); border-radius: var(--cf3-radius);
	background: #fff; color: var(--cf3-tinte); font: inherit; line-height: 1.4;
	font-size: 16px; font-size: max(16px, 1em); /* mind. 16px, sonst vergrößert das iPhone beim Antippen */
	box-shadow: none; transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none; appearance: none;
}
.cf3 textarea.cf3-eingabe { min-height: 8em; resize: vertical; }
.cf3 .cf3-eingabe::placeholder { color: #8a97a1; opacity: 1; }
.cf3 .cf3-eingabe:hover { border-color: var(--cf3-tinte2); }
.cf3 .cf3-eingabe:focus { outline: none; border-color: var(--cf3-blau); box-shadow: 0 0 0 4px rgba(0, 151, 190, .2); }
.cf3 input[type="date"].cf3-eingabe { min-height: 52px; }

/* Auswahlliste mit eigenem Pfeil */
.cf3 .cf3-select { position: relative; }
.cf3 .cf3-select select.cf3-eingabe { padding-right: 2.8em; cursor: pointer; background-image: none; }
.cf3 .cf3-select::after {
	content: ""; position: absolute; right: 1.15em; top: 50%; width: .55em; height: .55em; margin-top: -.4em;
	border-right: 2px solid var(--cf3-tinte); border-bottom: 2px solid var(--cf3-tinte);
	transform: rotate(45deg); pointer-events: none;
}

/* ---------- Ankreuzfelder und Auswahlpunkte ---------- */
.cf3 .cf3-optionen { display: grid; gap: .55em; }
.cf3 .cf3-option {
	position: relative; display: flex; align-items: center; gap: .8em;
	min-height: 52px; margin: 0; padding: .65em .95em;
	border: 1.5px solid var(--cf3-rand-hell); border-radius: var(--cf3-radius);
	background: #fff; font-weight: 500; line-height: 1.35; cursor: pointer;
	transition: border-color .2s, background-color .2s, transform .2s;
}
.cf3 .cf3-option:hover { border-color: var(--cf3-blau); }
/* zwei getrennte Regeln: Ältere Browser ohne :has() verwerfen sonst beide */
.cf3 .cf3-option.cf3-gewaehlt { border-color: var(--cf3-blau); background: var(--cf3-blau-hell); }
.cf3 .cf3-option:has(input:checked) { border-color: var(--cf3-blau); background: var(--cf3-blau-hell); }
.cf3 .cf3-option-text { flex: 1 1 auto; min-width: 0; }
.cf3 .cf3-option input[type="checkbox"], .cf3 .cf3-option input[type="radio"] {
	-webkit-appearance: none; appearance: none; flex: 0 0 auto;
	width: 22px; height: 22px; margin: 0; padding: 0;
	border: 2px solid var(--cf3-rand); background: #fff; cursor: pointer;
	display: grid; place-content: center; transition: background-color .15s, border-color .15s;
}
.cf3 .cf3-option input[type="checkbox"] { border-radius: 7px; }
.cf3 .cf3-option input[type="radio"] { border-radius: 50%; }
.cf3 .cf3-option input[type="checkbox"]::before {
	content: ""; width: 12px; height: 7px; margin: -3px 0 0 0; float: none; background: none;
	border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0);
	transition: transform .15s;
}
.cf3 .cf3-option input[type="radio"]::before {
	content: ""; width: 10px; height: 10px; margin: 0; float: none; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s;
}
.cf3 .cf3-option input:checked { background: var(--cf3-tinte); border-color: var(--cf3-tinte); }
.cf3 .cf3-option input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
.cf3 .cf3-option input[type="radio"]:checked::before { transform: scale(1); }
.cf3 .cf3-option input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 151, 190, .3); }
.cf3 .cf3-option.cf3-voll { cursor: not-allowed; background: var(--cf3-sand); border-style: dashed; }
.cf3 .cf3-option.cf3-voll .cf3-option-text { color: var(--cf3-leise); text-decoration: line-through; }
.cf3 .cf3-option.cf3-voll input { cursor: not-allowed; background: #eef0f1; }

/* Kacheln: Möglichkeiten nebeneinander – wie die Karten der Startseite */
.cf3 .cf3-kacheln { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: .75em; }
.cf3 .cf3-kacheln .cf3-option {
	flex-direction: column; align-items: flex-start; gap: .55em; min-height: 104px; padding: 1em 1.05em;
	border-radius: 20px;
}
.cf3 .cf3-kacheln .cf3-option:not(.cf3-voll):not(.cf3-regel-aus):hover { transform: translateY(-3px); box-shadow: 0 12px 30px -14px rgba(13, 27, 38, .3); }
.cf3 .cf3-kacheln .cf3-option-text { font-weight: 700; letter-spacing: -.01em; }
.cf3 .cf3-kacheln .cf3-platz { margin-left: 0; margin-top: auto; }

/* Restplätze – Plaketten wie die Nummern-Pillen der Startseite */
.cf3 .cf3-platz {
	flex: 0 0 auto; margin-left: auto; padding: .3em .75em; border-radius: 999px;
	font-size: 12px; font-size: max(12px, .78em); font-weight: 700; line-height: 1.3; white-space: nowrap; letter-spacing: .02em;
	background: var(--cf3-blau-hell); color: var(--cf3-blau-tief);
}
.cf3 .cf3-platz[hidden] { display: none; }
.cf3 .cf3-platz-knapp { background: var(--cf3-sonne); color: var(--cf3-tinte); }
.cf3 .cf3-platz-voll { background: #eef0f1; color: var(--cf3-leise); }

/* Datenschutz-Box */
.cf3 .cf3-datenschutz-box { padding: 1.1em 1.2em; border-radius: 20px; background: var(--cf3-sand); border: 0; }
.cf3 .cf3-datenschutz-text { font-size: .92em; color: var(--cf3-leise); margin-bottom: .8em; }
.cf3 .cf3-datenschutz-text p { margin: 0 0 .4em; }
.cf3 .cf3-datenschutz-text a { color: var(--cf3-blau-tief); text-decoration: underline; text-underline-offset: 2px; }
.cf3 .cf3-option-einzeln { background: #fff; }

/* Gestaltungselemente – Zwischenüberschrift mit dem Vier-Punkte-Zeichen der Startseite */
.cf3 .cf3-zwischentitel {
	display: flex; align-items: center; gap: .6em;
	margin: .6em 0 0; padding: 0; border: 0;
	font-size: 1.45em; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--cf3-tinte); text-transform: none;
}
.cf3 .cf3-zwischentitel::before {
	content: ""; flex: 0 0 19px; width: 19px; height: 19px;
	background:
		radial-gradient(circle, var(--cf3-blau) 4px, transparent 4.5px) 0 0 / 11px 11px no-repeat,
		radial-gradient(circle, #5cc4e0 4px, transparent 4.5px) 11px 0 / 11px 11px no-repeat,
		radial-gradient(circle, #9adbec 4px, transparent 4.5px) 0 11px / 11px 11px no-repeat,
		radial-gradient(circle, var(--cf3-tinte) 4px, transparent 4.5px) 11px 11px / 11px 11px no-repeat;
}
.cf3 .cf3-trenner hr { border: 0; border-top: 1.5px solid var(--cf3-rand-hell); margin: .3em 0; height: 0; background: none; }
.cf3 .cf3-hinweis { padding: 1em 1.2em; border: 0; border-radius: 20px; background: var(--cf3-blau-hell); font-size: .95em; color: var(--cf3-tinte2); }
.cf3 .cf3-hinweis p { margin: 0 0 .4em; }
.cf3 .cf3-hinweis p:last-child { margin-bottom: 0; }
.cf3 .cf3-hinweis-titel { font-weight: 700; color: var(--cf3-blau-tief); }
.cf3 .cf3-hinweis a { color: var(--cf3-blau-tief); }

/* ---------- Fehler ---------- */
.cf3 .cf3-fehler { display: flex; gap: .45em; align-items: center; margin: .5em 0 0; color: var(--cf3-fehler); font-size: .9em; font-weight: 700; }
.cf3 .cf3-fehler:empty { display: none; }
.cf3 .cf3-fehler::before { content: "!"; display: inline-grid; place-content: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--cf3-fehler); color: #fff; font-size: .78em; flex: 0 0 auto; }
.cf3 .cf3-hat-fehler .cf3-eingabe { border-color: var(--cf3-fehler); }
.cf3 .cf3-hat-fehler .cf3-eingabe:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .16); }
.cf3 .cf3-hat-fehler .cf3-option input { border-color: var(--cf3-fehler); }
.cf3 .cf3-meldung { display: flex; gap: .7em; align-items: flex-start; padding: 1em 1.2em; border-radius: 18px; margin: 0 0 1.6em; font-weight: 700; }
.cf3 .cf3-meldung[hidden] { display: none; }
.cf3 .cf3-meldung-fehler { background: var(--cf3-fehler-flaeche); color: var(--cf3-fehler); }
.cf3 .cf3-symbol { flex: 0 0 auto; width: 1.4em; height: 1.4em; }

/* ---------- Fuß und Knopf ---------- */
.cf3 .cf3-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; margin-top: .4em; padding-top: 1.4em; border-top: 1.5px solid var(--cf3-rand-hell); }
.cf3 .cf3-pflicht-hinweis { margin: 0; font-size: .85em; color: var(--cf3-leise); }
/* Hauptknopf: Sonnengelbe Pille mit Pfeil im dunklen Kreis – wie die Knöpfe im Kopfbild und auf den Karten */
.cf3 .cf3-knopf {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	min-height: 56px; margin: 0 0 0 auto; padding: 8px 8px 8px 28px; border: 0; border-radius: 999px;
	background: var(--cf3-sonne); color: var(--cf3-tinte); font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: 0; cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(13, 27, 38, .45); transition: background-color .25s, transform .25s, box-shadow .25s;
}
.cf3 .cf3-knopf::after {
	content: ""; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
	background: var(--cf3-tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 16px;
	transition: background-color .25s, transform .3s;
}
.cf3 .cf3-knopf:hover { background: var(--cf3-sonne-hover); color: var(--cf3-tinte); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(13, 27, 38, .5); }
.cf3 .cf3-knopf:hover::after { background-color: var(--cf3-blau-tief); transform: translateX(3px); }
.cf3 .cf3-knopf:active { transform: translateY(0); }
.cf3 .cf3-knopf:focus-visible { outline: 3px solid var(--cf3-tinte); outline-offset: 3px; }
.cf3 .cf3-knopf[disabled] { cursor: wait; opacity: .85; transform: none; }
.cf3 .cf3-sendet .cf3-knopf::after {
	background-image: none; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff;
	animation: cf3-dreh .7s linear infinite;
}
@keyframes cf3-dreh { to { transform: rotate(360deg); } }
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.cf3 .cf3-fuss { flex-direction: column-reverse; align-items: stretch; }
		.cf3 .cf3-knopf { width: 100%; margin: 0; justify-content: space-between; }
		.cf3 .cf3-pflicht-hinweis { text-align: center; }
	}
}

/* ---------- Umbau nach Breite des Containers ---------- */
/* schmal (halbe Spalte, Handy): alles untereinander, Knopf über die volle Breite */
@container cf3 (max-width: 460px) {
	.cf3 .cf3-feld.cf3-halb { flex-basis: 100%; }
	.cf3 .cf3-fuss { flex-direction: column-reverse; align-items: stretch; }
	.cf3 .cf3-knopf { width: 100%; margin: 0; justify-content: space-between; }
	.cf3 .cf3-pflicht-hinweis { text-align: center; }
	.cf3 .cf3-form { border-radius: 20px; }
}
/* breit (ganze Seite): Auswahllisten in mehreren Spalten statt überlanger Zeilen */
@container cf3 (min-width: 820px) {
	.cf3 .cf3-optionen:not(.cf3-kacheln) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.cf3 .cf3-kacheln { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
	.cf3 .cf3-felder { gap: 0 3%; }
	.cf3 .cf3-feld.cf3-halb { flex-basis: 48.5%; }
}

/* ---------- Bestätigung und „geschlossen" ---------- */
.cf3 .cf3-erfolg {
	text-align: center; padding: clamp(32px, 6vw, 64px) clamp(22px, 5vw, 52px);
	padding: clamp(32px, 7cqi, 64px) clamp(22px, 6cqi, 52px);
	background: #fff; border: 0; border-radius: 24px;
	box-shadow: var(--cf3-schatten); outline: none;
	animation: cf3-auftauchen .45s cubic-bezier(.2, .7, .1, 1);
}
.cf3 .cf3-erfolg-kreis {
	display: inline-grid; place-content: center; width: 80px; height: 80px; margin-bottom: .9em; border-radius: 50%;
	background: var(--cf3-sonne); color: var(--cf3-tinte); box-shadow: 0 0 0 10px rgba(255, 201, 77, .25);
}
.cf3 .cf3-erfolg-kreis .cf3-symbol { width: 38px; height: 38px; }
.cf3 .cf3-erfolg-titel { margin: 0 0 .35em; font-size: 2em; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--cf3-tinte); }
.cf3 .cf3-erfolg-text { color: var(--cf3-leise); max-width: 34em; margin: 0 auto; }
.cf3 .cf3-erfolg-text p { margin: 0 0 .5em; }
.cf3 .cf3-zu { display: flex; gap: 1em; align-items: flex-start; padding: 1.3em 1.5em; border-radius: 24px; background: #fff; border: 0; box-shadow: var(--cf3-schatten); color: var(--cf3-tinte); }
.cf3 .cf3-zu .cf3-symbol { color: var(--cf3-blau-tief); margin-top: .1em; }
.cf3 .cf3-zu p { margin: 0; }
@keyframes cf3-auftauchen { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cf3 .cf3-hinweis-admin { background: #fff8e1; border-left: 4px solid #f0b400; padding: .5em .8em; font-size: .9em; border-radius: 0 8px 8px 0; }
.cf3 .cf3-falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Kombinationen ausschließen */
.cf3 .cf3-regel-hinweis { display: flex; gap: .5em; align-items: flex-start; margin: .55em 0 0; padding: .65em .9em; border-radius: 14px; background: #fff1cc; color: #6a4a00; font-size: max(13px, .9em); line-height: 1.45; }
.cf3 .cf3-regel-hinweis::before { content: "i"; flex: 0 0 auto; display: inline-grid; place-content: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--cf3-tinte); color: var(--cf3-sonne); font-size: .8em; font-weight: 800; font-style: italic; }
.cf3 .cf3-regel-hinweis[hidden] { display: none; }
.cf3 .cf3-option.cf3-regel-aus { cursor: not-allowed; background: var(--cf3-sand); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
	.cf3 *, .cf3 *::before, .cf3 *::after { animation: none !important; transition: none !important; }
}