/**
 * Azubi-Check – Frontend-Styles im TENA-Live-Branding.
 *
 * Orange #f59b00, Blau #253457 / #193c74, Schriften Nunito/Assistant kommen vom
 * Theme. Alles ist unter `.azubi-check` gekapselt, damit es andere CF7-Formulare
 * nicht beeinflusst. Baut auf den vorhandenen `.wpcf7`-Theme-Styles auf.
 */

.azubi-check {
	--ac-orange: #f59b00;
	--ac-blue: #253457;
	--ac-blue-2: #193c74;
	--ac-border: #e2e2e2;
	--ac-muted: #5a6472;
	--ac-card: #ffffff;
	--ac-radius: 12px;
}

/*
 * Theme-`p` neutralisieren: Das TENA-Theme setzt p { font-size:1.38rem; line-height:2.06rem },
 * was Labels, Disclaimer und (zusammen mit CF7-autop) die Optionsabstände aufbläht.
 */
.azubi-check p {
	margin: 0 0 0.6rem;
	line-height: 1.4;
	font-size: 1.05rem;
}

.azubi-check .azubi-intro {
	font-size: 1.1rem;
	line-height: 1.5;
	color: var(--ac-muted);
	margin: 0 0 1.25rem;
}

/* Frage-Block */
.azubi-check .azubi-q {
	border: 0;
	padding: 0;
	margin: 0 0 1.2rem;
}

.azubi-check .azubi-q legend {
	font-family: 'Assistant', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--ac-blue);
	padding: 0;
	margin: 0 0 0.5rem;
}

/*
 * CF7 wendet auto-paragraph auf das rohe Formular-HTML an und fügt im Fragenblock
 * <p>-Wrapper + <br> zwischen den Optionen ein. Beides hier gezielt entschärfen –
 * nur innerhalb von .azubi-q, damit das gewollte <br> bei Vorname/WhatsApp bleibt.
 */
.azubi-check .azubi-q p {
	margin: 0;
}

.azubi-check .azubi-q br {
	display: none;
}

/* Auswahl-Karten */
.azubi-check .choice {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: 0.7rem 0.9rem;
	margin: 0 0 0.4rem;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius);
	background: var(--ac-card);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.azubi-check .choice:hover {
	border-color: var(--ac-orange);
	transform: translateY(-1px);
}

/* Markierte Karte hervorheben (über :has, mit Fallback ohne Hervorhebung) */
.azubi-check .choice:has(input:checked) {
	border-color: var(--ac-orange);
	box-shadow: 0 0 0 2px rgba(245, 155, 0, 0.25);
}

.azubi-check .choice input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-top: 3px;
	flex: 0 0 auto;
	accent-color: var(--ac-orange);
}

.azubi-check .choice .t {
	display: block;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--ac-blue);
}

.azubi-check .choice .d {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--ac-muted);
}

/* Ergebnis-Box */
.azubi-check .azubi-result {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	border-radius: var(--ac-radius);
	background: rgba(245, 155, 0, 0.1);
	border: 1px solid rgba(245, 155, 0, 0.35);
}

.azubi-check .azubi-result-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ac-muted);
}

.azubi-check .azubi-result-title {
	font-family: 'Assistant', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 1.45rem;
	color: var(--ac-blue);
	margin-top: 0.15rem;
}

.azubi-check .azubi-result-desc {
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--ac-muted);
	margin-top: 0.25rem;
}

.azubi-check .azubi-result-pill {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 700;
	color: #fff;
	background: var(--ac-orange);
}

/* Kontaktfelder: lehnt sich an die vorhandenen .wpcf7-Theme-Styles an */
.azubi-check .azubi-fields label {
	font-weight: 700;
	color: var(--ac-blue);
}

/* Datenschutz-Disclaimer: dezent (klein, gedämpft) und linksbündig */
.azubi-check .wpcf7-acceptance,
.azubi-check .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--ac-muted);
	text-align: left;
}

.azubi-check .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

/* Checkbox VOR (nicht über) dem Text, größer – Text bleibt klein */
.azubi-check .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.azubi-check .wpcf7-acceptance input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	accent-color: var(--ac-orange);
	position: relative;
	top: 1px;
}

/* Absende-Button: kompakt statt volle Breite (überschreibt Theme .wpcf7 input{width:100%}), Label links */
.azubi-check input[type="submit"] {
	width: auto;
	display: inline-block;
	text-align: left;
	font-size: 1.1rem;
	padding: 0.6rem 1.5rem;
	line-height: 1.2;
}

/* Links im Formular (z. B. Datenschutzerklärung): Theme färbt .wpcf7 a weiß – hier sichtbar machen */
.azubi-check a {
	color: var(--ac-blue-2) !important;
	text-decoration: underline !important;
}

/* Erfolgs-Popup (ersetzt die CF7-Standardmeldung) */
.azubi-modal-overlay {
	position: fixed;
	/* Einzelwerte statt `inset: 0` – die Kurzschreibweise kennt iOS Safari erst ab
	   14.5. Auf älteren iPhones blieb das Overlay sonst unverankert (keine 100%-Breite)
	   und ragte rechts über den Rand hinaus (Android/Chrome war ok). */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Modal hängt am <body> (außerhalb .azubi-check) → Theme-Reset nicht garantiert.
	   border-box explizit setzen, sonst zählt das Padding ZUSÄTZLICH zur Breite. */
	box-sizing: border-box;
	display: flex;
	/* flex-start + margin:auto am Modal zentriert, wenn Platz ist, erlaubt sonst Scrollen
	   (wichtig, falls am Handy die Tastatur die Höhe verkleinert). */
	align-items: flex-start;
	justify-content: center;
	padding: 1rem;
	overflow-y: auto;
	background: rgba(10, 12, 20, 0.55);
	z-index: 99999;
}

.azubi-modal {
	box-sizing: border-box;
	margin: auto;
	background: #fff;
	max-width: 440px;
	width: 100%;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	border-radius: 14px;
	padding: 1.8rem 1.6rem 1.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	text-align: center;
}

/*
 * Hinweis: Das Modal wird per JS an <body> gehängt – also AUSSERHALB von .azubi-check.
 * Die dort definierten CSS-Variablen (--ac-*) greifen hier NICHT. Daher feste Farbwerte
 * verwenden, sonst werden Button-Hintergrund und Haken unsichtbar.
 */
.azubi-modal h2 {
	font-family: 'Assistant', Arial, Helvetica, sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	color: #253457;
	margin: 0.2rem 0 0.5rem;
}

.azubi-modal p {
	font-size: 1rem;
	line-height: 1.5;
	color: #5a6472;
	margin: 0 0 1.3rem;
}

.azubi-modal button {
	border: 0;
	border-radius: 10px;
	padding: 0.7rem 1.8rem;
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	background: #f59b00;
	cursor: pointer;
}

/* Animierter Erfolgs-Haken über dem Text (grün) */
.azubi-check-anim {
	width: 76px;
	height: 76px;
	display: block;
	margin: 0 auto 0.8rem;
}

.azubi-check-circle {
	stroke: #16a34a;
	stroke-width: 3;
	fill: none;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: azubi-circle 0.5s ease-out forwards;
}

.azubi-check-mark {
	stroke: #16a34a;
	stroke-width: 4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: azubi-mark 0.35s 0.45s ease-out forwards;
}

@keyframes azubi-circle {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes azubi-mark {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.azubi-check-circle,
	.azubi-check-mark {
		animation: none;
		stroke-dashoffset: 0;
	}
}

@media (max-width: 768px) {
	.azubi-check .choice .t {
		font-size: 1.05rem;
	}
}