/* ====================================================================
   BIZ Quiz Widget – Styles
   Mobile-first. CI kommt aus CSS Custom Properties (per JS aus config.json).
   ==================================================================== */

.biz-quiz-widget {
	/* Fallback-Farben (werden per JS aus der Config ueberschrieben). */
	--biz-quiz-primary: #578FC7;
	--biz-quiz-secondary: #7CAB88;
	--biz-quiz-accent: #ae9750;
	--biz-quiz-bg: #FCF5EF;
	--biz-quiz-text: #393939;
	--biz-quiz-text-light: #666666;
	--biz-quiz-white: #ffffff;

	--bqw-radius: 14px;
	--bqw-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);

	box-sizing: border-box;
	max-width: 680px;
	margin: 0 auto;
	padding: 0;
	color: var(--biz-quiz-text);
	font-family: var(--biz-quiz-font-body, inherit);
	line-height: 1.5;
}

.biz-quiz-widget *,
.biz-quiz-widget *::before,
.biz-quiz-widget *::after {
	box-sizing: border-box;
}

/* Buehne: feste Hoehe via min-height, Inhalt vertikal mittig. */
.bqw-stage {
	position: relative;
	overflow: hidden;
	background: var(--biz-quiz-bg);
	border-radius: var(--bqw-radius);
	box-shadow: var(--bqw-shadow);
	padding: 28px 22px;
	min-height: 440px;
	display: flex;
}

/* Jeder Screen liegt im Flow; Transition per transform/opacity. */
.bqw-screen {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: transform 300ms ease, opacity 300ms ease;
}

/* Wenn mehrere Screens kurzzeitig gleichzeitig da sind (Wechsel),
   liegen sie uebereinander. */
.bqw-stage > .bqw-screen + .bqw-screen,
.bqw-stage > .bqw-screen.bqw-leave,
.bqw-stage > .bqw-screen.bqw-leave-back {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	padding: 28px 22px;
}

/* Enter-/Leave-Zustaende. */
.bqw-enter      { transform: translateX(40px);  opacity: 0; }
.bqw-enter-back { transform: translateX(-40px); opacity: 0; }
.bqw-leave      { transform: translateX(-40px); opacity: 0; }
.bqw-leave-back { transform: translateX(40px);  opacity: 0; }

/* ---- Typo ---------------------------------------------------------- */

.bqw-title {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 0 0 10px;
	color: var(--biz-quiz-text);
	font-family: var(--biz-quiz-font-heading, inherit);
}

.bqw-subtitle {
	font-size: 1rem;
	color: var(--biz-quiz-text-light);
	margin: 0 0 22px;
}

.bqw-qtext {
	font-size: 1.3rem;
	line-height: 1.3;
	margin: 6px 0 18px;
}

/* ---- Start --------------------------------------------------------- */

.bqw-start { text-align: center; }

.bqw-logo {
	max-width: 180px;
	height: auto;
	margin: 0 auto 18px;
	display: block;
}

/* ---- Fortschritt --------------------------------------------------- */

.bqw-progress { margin-bottom: 16px; }

.bqw-progress-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--biz-quiz-text-light);
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}

.bqw-progress-track {
	width: 100%;
	height: 8px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.bqw-progress-bar {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--biz-quiz-primary), var(--biz-quiz-secondary));
	transition: width 350ms ease;
}

/* ---- Frage-Kopf / Zurueck ------------------------------------------ */

.bqw-qhead { min-height: 24px; margin-bottom: 4px; }

.bqw-back {
	background: none;
	border: none;
	color: var(--biz-quiz-text-light);
	font-size: 0.9rem;
	cursor: pointer;
	padding: 4px 2px;
}
.bqw-back:hover { color: var(--biz-quiz-primary); }

/* ---- Optionen ------------------------------------------------------ */

.bqw-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bqw-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	text-align: left;
	background: var(--biz-quiz-white);
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--bqw-radius);
	color: var(--biz-quiz-text);
	font-size: 1rem;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.bqw-option:hover {
	border-color: var(--biz-quiz-primary);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.bqw-option:active { transform: scale(0.99); }

.bqw-option.is-selected {
	background: var(--biz-quiz-primary);
	border-color: var(--biz-quiz-primary);
	color: var(--biz-quiz-white);
}

.bqw-option-icon { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.bqw-option-text { flex: 1 1 auto; }

/* ---- Buttons ------------------------------------------------------- */

.bqw-btn {
	display: inline-block;
	min-height: 50px;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: var(--bqw-radius);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter 150ms ease, transform 100ms ease, background 150ms ease, color 150ms ease;
}
.bqw-btn:active { transform: translateY(1px); }

.bqw-btn-primary {
	background: var(--biz-quiz-primary);
	color: var(--biz-quiz-white);
}
.bqw-btn-primary:hover { filter: brightness(1.07); }

.bqw-btn-secondary {
	background: var(--biz-quiz-secondary);
	color: var(--biz-quiz-white);
}
.bqw-btn-secondary:hover { filter: brightness(1.07); }

.bqw-btn-outline {
	background: transparent;
	border-color: var(--biz-quiz-primary);
	color: var(--biz-quiz-primary);
}
.bqw-btn-outline:hover {
	background: var(--biz-quiz-primary);
	color: var(--biz-quiz-white);
}

.bqw-start .bqw-btn { margin-top: 8px; }

/* ---- Lead-Formular ------------------------------------------------- */

.bqw-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

.bqw-field { display: flex; flex-direction: column; gap: 5px; }

.bqw-field label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--biz-quiz-text);
}

.bqw-field input {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 2px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--bqw-radius);
	font-size: 1rem;
	background: var(--biz-quiz-white);
	color: var(--biz-quiz-text);
}
.bqw-field input:focus {
	outline: none;
	border-color: var(--biz-quiz-primary);
}
.bqw-field input.is-invalid { border-color: #d9534f; }

.bqw-field-error {
	min-height: 14px;
	font-size: 0.8rem;
	color: #d9534f;
}

.bqw-privacy {
	font-size: 0.8rem;
	color: var(--biz-quiz-text-light);
	margin: 2px 0 4px;
}
.bqw-privacy a { color: var(--biz-quiz-primary); }

/* ---- Loading ------------------------------------------------------- */

.bqw-loading { text-align: center; }

.bqw-spinner {
	width: 46px;
	height: 46px;
	margin: 0 auto 18px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--biz-quiz-primary);
	border-radius: 50%;
	animation: bqw-spin 0.9s linear infinite;
}
@keyframes bqw-spin { to { transform: rotate(360deg); } }

.bqw-loading-text { color: var(--biz-quiz-text-light); }

/* ---- Ergebnis ------------------------------------------------------ */

.bqw-result { justify-content: flex-start; }

.bqw-cards { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }

.bqw-card {
	background: var(--biz-quiz-white);
	border: 2px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--bqw-radius);
	padding: 18px 18px 20px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.bqw-card-top {
	border-color: var(--biz-quiz-accent);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

.bqw-rank {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--biz-quiz-accent);
	margin-bottom: 6px;
}

.bqw-card-headline {
	font-size: 1.2rem;
	margin: 0 0 4px;
	color: var(--biz-quiz-text);
}
.bqw-card-top .bqw-card-headline { font-size: 1.35rem; }

.bqw-card-course {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--biz-quiz-primary);
	margin-bottom: 8px;
}

.bqw-card-text { font-size: 0.95rem; color: var(--biz-quiz-text-light); margin: 0 0 12px; }

.bqw-card-meta,
.bqw-card-highlights {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.9rem;
}
.bqw-card-meta li { margin-bottom: 3px; color: var(--biz-quiz-text); }
.bqw-card-highlights li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 4px;
	color: var(--biz-quiz-text);
}
.bqw-card-highlights li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--biz-quiz-secondary);
	font-weight: 700;
}

.bqw-ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.bqw-footer {
	margin-top: 18px;
	font-size: 0.78rem;
	color: var(--biz-quiz-text-light);
	text-align: center;
}

.bqw-error,
.biz-quiz-error {
	padding: 14px;
	border: 1px solid #d9534f;
	border-radius: 8px;
	background: #fdf2f2;
	color: #a33;
	font-size: 0.9rem;
}

/* ====================================================================
   Responsive
   ==================================================================== */

/* Tablet ab 600px: Optionen als 2x2-Grid, CTAs nebeneinander. */
@media (min-width: 600px) {
	.bqw-stage { padding: 36px 32px; }

	.bqw-options {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.bqw-option {
		flex: 1 1 calc(50% - 6px);
		min-width: calc(50% - 6px);
	}

	.bqw-ctas { flex-direction: row; flex-wrap: wrap; }
	.bqw-ctas .bqw-btn { flex: 1 1 auto; }

	.bqw-title { font-size: 1.9rem; }
}

/* Desktop ab 1024px: Max-Breite bleibt 680px (siehe Container). */
@media (min-width: 1024px) {
	.bqw-qtext { font-size: 1.4rem; }
}

/* Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
	.bqw-screen,
	.bqw-progress-bar,
	.bqw-option,
	.bqw-btn { transition: none; }
	.bqw-spinner { animation-duration: 1.6s; }
}