/* Anpacker Lead-Quiz – Frontend
 *
 * Farben, Radien und Schatten folgen dem Elementor-Kit der Website. Wo eine
 * Kit-Variable existiert, wird sie benutzt — mit dem Original-Wert als
 * Rückfall, damit das Quiz auch außerhalb von Elementor korrekt aussieht.
 */

.apq{
	--apq-primary:#f5a623;
	--apq-primary-dark:#e09315;
	--apq-ink:var(--e-global-color-primary,#1f2428);
	--apq-muted:var(--e-global-color-secondary,#667085);
	--apq-line:var(--e-global-color-border,#ead8ca);
	--apq-field:#faf8f6;
	--apq-bg:#ffffff;
	--apq-radius:22px;
	--apq-shadow:0 18px 50px rgba(31,36,40,.12);

	max-width:640px;
	margin:0 auto;
	box-sizing:border-box;
	font-family:inherit;
	color:var(--apq-ink);
	line-height:1.55;
}
.apq *,.apq *::before,.apq *::after{ box-sizing:border-box; }

.apq-loading{ padding:40px; text-align:center; color:var(--apq-muted); }

/* Karte */
.apq-card{
	background:var(--apq-bg);
	border:1px solid var(--apq-line);
	border-radius:var(--apq-radius);
	box-shadow:var(--apq-shadow);
	padding:28px;
	overflow:hidden;
}
@media (min-width:600px){ .apq-card{ padding:36px 40px; } }

/* Fortschritt */
.apq-progress{ margin-bottom:22px; }
.apq-progress-top{
	display:flex; justify-content:space-between; align-items:center;
	font-size:13px; color:var(--apq-muted); margin-bottom:8px;
}
.apq-progress-bar{ height:8px; border-radius:999px; background:var(--apq-line); overflow:hidden; }
.apq-progress-fill{
	height:100%; width:0; border-radius:999px;
	background:var(--apq-primary);
	transition:width .35s cubic-bezier(.4,0,.2,1);
}

/* Überschriften */
.apq-intro-title,.apq-step-title,.apq-success-title,.apq-stop-title{
	font-size:23px; font-weight:800; margin:0 0 6px; line-height:1.25; letter-spacing:-.02em;
}
.apq-intro-text{ color:var(--apq-muted); margin:0 0 22px; }
.apq-step-title{ margin-bottom:18px; }

/* Auswahl-Kacheln
   ⚠️ !important ist hier Pflicht: Das Elementor-Kit färbt JEDES <button>
   mit der globalen Button-Farbe. Ohne das sind die Antwort-Kacheln
   vollflächig orange statt weiß mit Rahmen — und damit unlesbar als
   Auswahl. Gleiches Muster wie bei den Eingabefeldern. */
.apq-options{ display:grid; gap:12px; }
.apq .apq-option{
	display:flex; align-items:center; gap:14px;
	width:100%; text-align:left;
	padding:16px 18px !important;
	background:#fff !important;
	border:2px solid var(--apq-line) !important;
	border-radius:14px !important;
	font-family:inherit;
	font-size:16px !important; font-weight:700 !important; color:var(--apq-ink) !important;
	cursor:pointer;
	box-shadow:none !important;
	transition:border-color .15s,background .15s,transform .08s,box-shadow .15s;
}
.apq .apq-option:hover{ border-color:var(--apq-primary) !important; background:rgba(245,166,35,.06) !important; }
.apq .apq-option:active{ transform:scale(.99); }
.apq-option .apq-radio{
	flex:0 0 auto; width:22px; height:22px; border-radius:50%;
	border:2px solid var(--apq-line); position:relative; transition:border-color .15s;
}
.apq .apq-option.is-selected{
	border-color:var(--apq-primary) !important;
	background:rgba(245,166,35,.12) !important;
	box-shadow:0 0 0 3px rgba(245,166,35,.15) !important;
}
.apq-option.is-selected .apq-radio{ border-color:var(--apq-primary); }
.apq-option.is-selected .apq-radio::after{
	content:""; position:absolute; inset:4px; border-radius:50%; background:var(--apq-primary);
}

/* Eingabefelder
   ⚠️ .apq-Präfix + !important: Themes (hier Hello/Elementor) setzen eigene
   Input-Styles. Ohne das gewinnt das Theme und die Felder fallen aus dem
   Design (falsche Höhe, andere Radien). */
.apq-field{ margin-bottom:20px; }
.apq-field label{ display:block; font-weight:800; font-size:14px; margin-bottom:8px; color:var(--apq-ink); }
.apq .apq-input{
	box-sizing:border-box !important;
	width:100% !important;
	height:auto !important;
	padding:14px !important;
	margin:0 !important;
	border:2px solid var(--apq-line) !important;
	border-radius:12px !important;
	font-size:16px !important;
	line-height:1.55 !important;
	font-family:inherit !important;
	color:var(--apq-ink) !important;
	background:var(--apq-field) !important;
	box-shadow:none !important;
	transition:border-color .15s,box-shadow .15s,background .15s !important;
}
.apq .apq-input::placeholder{ color:#9ca3af !important; }
.apq .apq-input:focus{
	outline:none !important; border-color:var(--apq-primary) !important; background:#fff !important;
	box-shadow:0 0 0 4px rgba(245,166,35,.15) !important;
}
.apq .apq-input.apq-invalid{ border-color:#e23b3b !important; background:#fff !important; box-shadow:0 0 0 4px rgba(226,59,59,.12) !important; }

/* Einwilligung */
.apq-consent{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--apq-muted); margin-top:10px; }
.apq-consent input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--apq-primary); }
.apq-consent a{ color:var(--e-global-color-branddark,#7a3d25); font-weight:700; }

/* Fehler */
.apq-error{
	display:none; margin-top:14px; padding:11px 14px;
	background:#fdecec; color:#b42323; border-radius:10px; font-size:14px;
}
.apq-error.is-visible{ display:block; }

/* Navigation */
.apq-nav{ display:flex; gap:12px; align-items:center; margin-top:24px; }
.apq .apq-btn{
	appearance:none; border:none !important; cursor:pointer;
	font-family:inherit; font-size:16px !important; font-weight:800 !important;
	padding:14px 26px !important; border-radius:999px !important;
	transition:all .25s ease;
}
.apq .apq-next,.apq .apq-submit{
	background:var(--apq-primary) !important; color:var(--apq-ink) !important; margin-left:auto;
	box-shadow:0 10px 28px rgba(245,166,35,.35) !important;
}
.apq .apq-next:hover,.apq .apq-submit:hover{ background:var(--apq-primary-dark) !important; transform:translateY(-3px); box-shadow:0 14px 32px rgba(245,166,35,.5) !important; }
/* Zurück muss unscheinbar bleiben — sonst konkurriert es mit dem Weiter-Button */
.apq .apq-back{ background:transparent !important; color:var(--apq-muted) !important; padding:14px 10px !important; box-shadow:none !important; }
.apq .apq-back:hover{ color:var(--apq-ink) !important; background:transparent !important; transform:none; }
.apq .apq-btn[disabled]{ opacity:.6; cursor:default; transform:none; }

/* Erfolg */
.apq-success{ text-align:center; padding:18px 6px; }
.apq-success-check{
	width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
	background:var(--e-global-color-greenlight,#dcfce7); display:flex; align-items:center; justify-content:center;
}
.apq-success-check svg{ width:38px; height:38px; color:var(--e-global-color-green,#1f7a4d); }
.apq-success-text{ color:var(--apq-muted); max-width:420px; margin:0 auto; }

/* Abbruch (Auftragswert unter der Mindestgrenze) — freundlich, nicht wie ein
   Fehler: kein Rot, sondern der ruhige Creme-Ton der Website. */
.apq-stop{
	background:var(--e-global-color-light,#fff8f2);
	border:1px solid var(--apq-line);
	border-radius:16px;
	padding:24px 26px;
}
.apq-stop-text{ color:var(--apq-muted); margin:0 0 14px; }
.apq-stop-note{ font-size:14px; color:var(--e-global-color-branddark,#7a3d25); font-weight:700; margin:0; }
.apq-stop-back{ margin-top:16px; padding-left:0; }

/* Mobil */
@media (max-width:480px){
	.apq-card{ padding:22px 18px; }
	.apq-intro-title,.apq-step-title,.apq-success-title,.apq-stop-title{ font-size:20px; }
	.apq-btn{ padding:13px 20px; font-size:15px; }
	.apq-option{ padding:14px 15px; font-size:15px; }
}